/* Shared homepage and Magnet header; original OhDeven header treatments. */
.site-header {
  --stage: #f6f2e9;
  --stage-deep: #eae3d7;
  --panel: #f4f2ec;
  --panel-warm: #fbf3e6;
  --ink: #202328;
  --muted: #62676b;
  --graphite: #282c31;
  --graphite-deep: #141719;
  --coral: #ff704d;
  --coral-dark: #c94228;
  --violet: #7368ff;
  --signal: #bbff5a;
  --cyan: #62e7f2;
  --amber: #ffbc58;
  --line: rgba(32, 35, 40, .22);
  --radius: 24px;
  --amb-light-x: -.78;
  --amb-light-y: -.92;
  --amb-key-light-intensity: .96;
  --amb-fill-light-intensity: .78;
  --amb-light-hue: 38;
  --amb-light-saturation: 5%;
  max-width:none; height:auto; margin:0; border:0; color-scheme:dark; flex-wrap:wrap;
}
.site-header {
  --amb-albedo: var(--graphite);
  --amb-shade: .72;
  min-height: 152px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  z-index: 10;
  padding: 18px clamp(20px, 4vw, 62px);
  color: #f4f5f2;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  color: inherit;
  font: 800 28px/1 Arial, sans-serif;
  letter-spacing: -.09em;
  text-decoration: none;
}

.site-header .brand {
  font-size: 88px;
}

.portrait-letter {
  width: .9em;
  height: 1.05em;
  display: inline-block;
  overflow: hidden;
  position: relative;
  border: 2.2px solid currentColor;
  transform: translateY(.1em);
  background: var(--violet);
}

.portrait-o { border-radius: 50%; }
.portrait-d {
  margin-left: .12em;
  border-radius: 2px 50% 50% 2px;
}

.portrait-letter img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 28%;
}

.portrait-letter .portrait-image-left { object-position: 0% 50%; }
.portrait-letter .portrait-image-right { object-position: 50% 24%; }

.brand-punctuation {
  margin-left: .08em;
  color: var(--signal);
  font-size: .54em;
  letter-spacing: -.04em;
}

.header-status {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 34px);
}

.dashboard-status-link {
  --amb-albedo: #243127;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 13px;
  color: #f4f5f2;
  font: 850 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .11em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .18s ease, transform .18s ease, filter .18s ease;
}

.dashboard-status-light {
  width: 9px;
  height: 9px;
  display: inline-block;
  flex: 0 0 auto;
  border: 1px solid #e5ffbd;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 12px rgba(187, 255, 90, .9);
  animation: dashboard-status-pulse 1.8s ease-in-out infinite;
}

.dashboard-status-state {
  padding-left: 8px;
  color: var(--signal);
  border-left: 1px solid rgba(187, 255, 90, .32);
}

.dashboard-status-arrow {
  color: var(--signal);
  font-size: 13px;
  transition: transform .18s ease;
}

.dashboard-status-link:hover,
.dashboard-status-link:focus-visible {
  color: #fff;
  outline: none;
  filter: brightness(1.13);
  transform: translateY(-1px);
}

.dashboard-status-link:hover .dashboard-status-arrow,
.dashboard-status-link:focus-visible .dashboard-status-arrow {
  transform: translateX(3px);
}

.tree-status-link {
  --amb-albedo: #312b3d;
}

.tree-status-link .dashboard-status-light {
  border-color: #ffd7cd;
  background: var(--coral);
  box-shadow: 0 0 12px rgba(255, 112, 77, .88);
}

.tree-status-link .dashboard-status-state,
.tree-status-link .dashboard-status-arrow { color: var(--coral); }

.tree-status-link .dashboard-status-state { border-left-color: rgba(255, 112, 77, .34); }

@keyframes dashboard-status-pulse {
  0%, 100% {
    opacity: .7;
    transform: scale(.86);
    box-shadow: 0 0 6px rgba(187, 255, 90, .64);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
    box-shadow: 0 0 0 5px rgba(187, 255, 90, 0), 0 0 15px rgba(187, 255, 90, .98);
  }
}

.pay-me-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 11px 15px;
  color: #142000;
  border: 1px solid #d9ff9f;
  border-radius: 4px 13px 4px 13px;
  background: var(--signal);
  box-shadow:
    0 0 0 3px rgba(187, 255, 90, .2),
    0 0 18px rgba(187, 255, 90, .84),
    0 0 38px rgba(187, 255, 90, .5),
    0 2px 0 rgba(255, 255, 255, .72) inset;
  font: 950 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
  animation: pay-me-pulse 1.15s ease-in-out infinite alternate;
}

.pay-me-button:hover,
.pay-me-button:focus-visible {
  color: #fff;
  border-color: #ffb39f;
  outline: none;
  background: var(--coral);
  box-shadow: 0 0 0 4px rgba(255, 112, 77, .2), 0 0 26px rgba(255, 112, 77, .9);
}

@keyframes pay-me-pulse {
  from { filter: brightness(.94); transform: rotate(-1.5deg) scale(1); }
  to { filter: brightness(1.2); transform: rotate(1.2deg) scale(1.055); }
}

.stripe-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
}

.stripe-badge img {
  width: 100%;
  height: auto;
  display: block;
}

.stripe-badge-header { width: 116px; }


.site-header .brand { flex-shrink:0; }
.site-header .brand > span { margin:0; padding:0; color:inherit; }
.site-header .brand .portrait-d { margin-left:.12em; }
.site-header .brand .brand-punctuation { margin-left:.08em; color:var(--signal); }
.site-header .header-status { flex-wrap:wrap; justify-content:flex-end; flex:1; gap:12px; }
.site-header a[aria-current="page"] { outline:1px solid var(--coral); outline-offset:3px; }
@media(max-width:1040px) {
  .site-header .brand { font-size:clamp(52px,7vw,72px); }
  .site-header .dashboard-status-state { display:none; }
}
@media(max-width:720px) {
  .site-header { min-height:58px; flex-direction:column; align-items:stretch; gap:10px; padding:12px; }
  .site-header .brand { align-self:flex-start; font-size:38px; }
  .site-header .header-status { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; width:100%; }
  .site-header .dashboard-status-link { min-width:0; min-height:44px; padding:8px 5px; justify-content:center; gap:5px; font-size:11px; }
  .site-header .dashboard-status-state,.site-header .dashboard-status-arrow,.site-header .stripe-badge-header,.site-header .pay-me-button { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  .site-header .dashboard-status-light,.site-header .pay-me-button { animation:none; }
}

/* One responsive navigation layout across every OhDeven lab. */
body header.site-header {
  position:relative; inset:auto; height:auto; min-height:0; width:100%; max-width:none;
  margin:0; padding:22px clamp(12px,3vw,44px); display:grid;
  grid-template-columns:minmax(230px,.8fr) minmax(0,2fr); gap:18px 28px;
  align-items:center; color:#f4f5f2; border:0;
}
body header.site-header .brand { font:800 clamp(38px,4.5vw,68px)/1 Arial,sans-serif; letter-spacing:-.09em; min-width:0; }
body header.site-header .header-status {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px;
  width:100%; min-width:0; align-items:stretch;
}
body header.site-header .header-status > a {
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:auto; min-width:0; min-height:44px; margin:0; padding:10px 8px;
  border:1px solid var(--nav-color); border-radius:12px;
  background:#20282b; color:#f4f5f2; text-align:center; text-decoration:none;
  font:800 10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.06em; white-space:normal; transform:none;
  animation:ohdeven-nav-pulse 2.8s ease-in-out infinite;
}
body header.site-header .header-status > a[data-nav="dashboard"] { --nav-color:#bbff5a; }
body header.site-header .header-status > a[data-nav="tree"] { --nav-color:#43e7c1; animation-delay:-.35s; }
body header.site-header .header-status > a[data-nav="sawmill"] { --nav-color:#ffba52; animation-delay:-.7s; }
body header.site-header .header-status > a[data-nav="frolf"] { --nav-color:#63c4ff; animation-delay:-1.05s; }
body header.site-header .header-status > a[data-nav="cycles"] { --nav-color:#b89aff; animation-delay:-1.4s; }
body header.site-header .header-status > a[data-nav="magnet"] { --nav-color:#ff84c6; animation-delay:-1.75s; }
body header.site-header .header-status > a[data-nav="pay"] { --nav-color:#ff8264; animation-delay:-2.1s; }
body header.site-header .header-status > a[data-nav="stripe"] { --nav-color:#b3bfff; animation-delay:-2.45s; }
body header.site-header .dashboard-status-light {
  width:8px; height:8px; background:var(--nav-color); border-color:var(--nav-color);
  box-shadow:0 0 8px var(--nav-color); animation:none;
}
body header.site-header .dashboard-status-arrow { color:var(--nav-color); }
body header.site-header .dashboard-status-state { display:none; }
body header.site-header .header-status .stripe-badge-header img { width:100px; max-width:100%; height:auto; }
body header.site-header .header-status > a:hover { background:#354146; filter:brightness(1.12); }
body header.site-header .header-status > a:focus-visible { outline:3px solid #fff; outline-offset:3px; }
body header.site-header .header-status > a[aria-current="page"] { outline:2px solid var(--nav-color); outline-offset:2px; }
body header.site-header .site-header-context { grid-column:1/-1; display:flex; align-items:center; flex-wrap:wrap; gap:12px 24px; min-width:0; font-size:11px; }
body header.site-header .site-header-context .lab-name { display:block; white-space:normal; }
body header.site-header .site-header-context a { color:#b8eddb; }
body header.site-header .site-header-context .header-label { display:flex; flex-wrap:wrap; gap:12px; }
@keyframes ohdeven-nav-pulse {
  0%,100% { box-shadow:0 0 1px var(--nav-color),inset 0 0 0 transparent; }
  50% { box-shadow:0 0 10px color-mix(in srgb,var(--nav-color) 45%,transparent),inset 0 0 14px color-mix(in srgb,var(--nav-color) 12%,transparent); }
}
/* Dashboard section navigation sticks independently of the variable-height header. */
body[data-health] .dashboard-nav { top:0; }
@media(min-width:1700px) { body header.site-header .header-status { grid-template-columns:repeat(8,minmax(0,1fr)); } }
@media(max-width:850px) {
  body header.site-header { grid-template-columns:minmax(0,1fr); gap:20px; }
  body header.site-header .brand { font-size:46px; justify-self:start; }
}
@media(max-width:480px) {
  body header.site-header { padding:16px 12px; gap:18px; }
  body header.site-header .brand { font-size:38px; }
  body header.site-header .header-status { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  body header.site-header .header-status > a { font-size:9px; padding:8px 5px; }
  body header.site-header .dashboard-status-arrow { display:none; }
}
@media(prefers-reduced-motion:reduce) { body header.site-header .header-status > a { animation:none; } }
/* Override the older homepage-only rule that hid payment navigation on phones. */
body header.site-header .header-status > a.pay-me-button { display:flex; }