/* Header + nav + brand */
body { --heroProgress: 0; }
.siteHeader{
  position: fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  height: var(--header-h);
  padding: 0 clamp(16px,4vw,48px);
  background: transparent !important;
  backdrop-filter: none !important;
  color: currentColor;
  box-shadow: none !important;
  transition: color 180ms var(--ease);
  text-shadow: 0 0 0 transparent;
  --navOpacity: calc(.5 + .5 * var(--dock));
}
.siteHeader.scheme-light{ color: var(--header-fg-light); }
.siteHeader.scheme-dark { color: var(--header-fg-dark); text-shadow: 0 1px 0 rgba(0,0,0,0.06); }
.siteHeader.scheme-light{ text-shadow: 0 1px 0 rgba(0,0,0,0.02); }
.siteHeader .brand, .siteHeader .siteNav a, .siteHeader .menuDot{ color: inherit; }
.in-transition .siteHeader,
.in-chapter .siteHeader { transition: none; }
.brand{ display:flex; gap:10px; align-items:center; text-decoration:none; color:inherit; }
.brandMark{ width: 24px; height: 24px; object-fit: contain; opacity:.9; }
.menuDot{ display: none; width: 6px; height: 6px; border-radius: 50%; border:none; background: currentColor; opacity:.7; }
.brandTitle{ font: 600 clamp(18px,2.4vw,28px)/1 var(--serif-strong); letter-spacing:.01em; }
.brandTitle .light{ font-weight:400; opacity:.75; }
.brandBy{ font: 400 clamp(10px,1.2vw,12px)/1 var(--sans); letter-spacing:.06em; text-transform: lowercase; opacity:.7; }

.siteNav{ display:flex; align-items:center; gap: clamp(12px,1.8vw,20px); }
.siteNav{ opacity: var(--navOpacity); transition: opacity 180ms var(--ease); }
.siteNav a{
  font: 600 clamp(11px,1.1vw,13px)/1 var(--sans);
  letter-spacing:.12em; text-decoration:none; color: inherit; position:relative; padding: 6px 0; text-transform: uppercase;
}
.siteNav a::after{
  content:""; position:absolute; left:50%; bottom:-6px; width:0; height:2px; background: currentColor;
  transform: translateX(-50%); transition: width 180ms var(--ease);
  mix-blend-mode: normal;
}
.siteNav a[aria-current="page"]::after, .siteNav a:hover::after{ width: 100%; }

/* Fade in compact brand near the end so we don’t double-show */
.brandStack{ opacity: calc(clamp(0, (var(--dock) - .80) / .20, 1)); transition: opacity 160ms var(--ease); }