/* Fixed reading navigation. The single underline moves without moving the labels. */

html { scroll-padding-top:calc(var(--navigation-height) + 16px); }
.site-header[data-navigation-ready] { position:fixed; height:var(--navigation-height); margin:0; padding-inline:var(--page-padding); background:var(--ink); transition:background-color var(--motion-hover) var(--ease-out); }
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .site-header[data-navigation-ready][data-scrolled=true] { background-color:color-mix(in srgb,var(--ink) 50%,transparent); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
}
body.motion-paused .site-header[data-navigation-ready] { transition:none; }
.site-header #main-navigation { position:relative; gap:clamp(12px,1.25vw,24px); }
.site-header { gap:24px; }
.navigation-label { display:inline-block; white-space:nowrap; }
.site-header #main-navigation a {position: relative; transition: color var(--motion-press) var(--ease-out);}
#main-navigation a[aria-current=location] { color:var(--accent); }
.navigation-line {position: absolute; top: 0; left: 0; display: block; width: 1px; height: 2px; background: var(--accent); transform-origin: 0 50%; pointer-events: none; transition: transform var(--motion-navigation) var(--ease-in-out);}
#main-navigation[data-navigation-motion=instant] a,body.motion-paused .navigation-line { transition:none; }
@media(min-width:1440px) and (max-width:1599px) { .site-header .brand-wordmark { width:200px; } }
@media(max-width:1439px) {

  .menu-toggle {display: flex; align-items: center; gap: 8px; min-height: 48px; font-size: var(--type-control); order: 3;}
  .menu-toggle svg { display:none; }
  .site-header #main-navigation { display:flex; position:absolute; top:calc(100% - 8px); left:20px; right:20px; padding:16px 20px; border:1px solid var(--line); border-radius:12px; background:var(--ui-surface); flex-direction:column; align-items:stretch; gap:4px; max-height:calc(100dvh - var(--navigation-height) - 24px); overflow-y:auto; overscroll-behavior:contain; }
  .site-header #main-navigation a { min-height:48px; font-size:16px; }
}
@media(max-width:760px) { .site-header[data-navigation-ready] { padding-inline:20px; gap:12px; } }
@media(max-width:380px) { .site-header[data-navigation-ready] { padding-inline:14px; gap:6px; } }
@media(prefers-reduced-motion:reduce) { .site-header[data-navigation-ready],.navigation-line,.site-header #main-navigation a { transition:none; } }
