/* Floating milk-glass navigation. The page itself retains its existing surfaces. */
:root { --nav-clearance: 100px; --nav-ease: cubic-bezier(.16,1,.3,1); }
html { scroll-padding-top: calc(var(--nav-clearance) + 16px); }
.site-header { height: 104px; position: relative; z-index: 50; }
.nav-shell {
  position: fixed; z-index: 50; top: 20px; left: max(28px, calc((100vw - 1440px)/2));
  right: max(28px, calc((100vw - 1440px)/2));
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center; gap: 20px; pointer-events: none;
}
.nav-shell > * { pointer-events: auto; }
.glass-surface {
  background: rgba(237,240,232,.76); color: #20231f;
  backdrop-filter: blur(20px) saturate(1.35); -webkit-backdrop-filter: blur(20px) saturate(1.35);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 3px 16px rgba(27,38,25,.08), inset 0 0 0 1px rgba(39,51,34,.045);
}
.nav-primary {
  display: flex; align-items: center; justify-self: start; gap: 20px;
  min-height: 56px; padding: 6px 8px 6px 22px; border-radius: 32px;
}
.nav-menu-content { display: flex; align-items: center; gap: 20px; }
.nav-menu-toggle { display: none; }
.nav-menu-content > .nav-page {
  display: inline-flex; align-items: center; min-height: 42px; white-space: nowrap;
  font-size: 14px; text-decoration: none;
}
.nav-primary .nav-page::after { bottom: 8px; }
.nav-primary .language-switch { border: 0; border-left: 1px solid rgba(38,49,33,.15); border-radius: 0; padding: 0 0 0 8px; gap: 0; }
.nav-primary .language-switch button { min-height: 40px; padding: 10px; font-size: 11px; }
.nav-primary .language-switch button[aria-pressed=true] { background: rgba(32,35,31,.09); color: #20231f; }
.nav-primary .language-switch button:hover { background: rgba(32,35,31,.15); }
.site-header .nav-brand {
  --wordmark-width: 164px;
  display: grid; grid-template-columns: 54px var(--wordmark-width); gap: 0; align-items: center;
  justify-self: center; text-decoration: none; border-radius: 20px;
  transition: grid-template-columns 460ms var(--nav-ease), background-color 200ms;
}
.nav-symbol {
  position: relative; display: grid; place-items: center; width: 54px; height: 54px;
}
.nav-symbol .brand-symbol { width: 27px; height: auto; }
.nav-wordmark-slot { display: block; overflow: clip; min-width: 0; }
.nav-wordmark {
  width: var(--wordmark-width); height: 54px; display: flex; align-items: center; justify-content: center;
  padding: 12px 18px; opacity: 1;
  transition: opacity 180ms ease, transform 460ms var(--nav-ease);
}
.nav-wordmark .brand-wordmark { display: block; font-size: 19px; line-height: 1; }
.site-header .nav-brand .nav-progress {
  position: absolute; width: 64px; height: 64px; max-width: none; inset: -5px;
  fill: none; stroke-width: 1.6; opacity: 0;
  transition: opacity 180ms ease; pointer-events: none;
}
.nav-progress-track { stroke: rgba(32,35,31,.1); }
.nav-progress-value { stroke: #fff; stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; }
.nav-progress-dot { fill: #fff; stroke: none; }
.site-header[data-nav-state=reading] .nav-brand { grid-template-columns: 54px 0px; }
.site-header[data-nav-state=reading] .nav-wordmark { opacity: 0; transform: translateX(-12px); }
.site-header[data-nav-state=reading] .nav-progress { opacity: 1; }
.nav-demo {
  display: inline-flex; align-items: center; justify-content: center; justify-self: end;
  min-height: 56px; padding: 5px; border-radius: 32px;
  font-size: 14px; text-decoration: none; white-space: nowrap;
  transition: background-color 180ms ease;
}
.nav-demo-label { display: inline-flex; align-items: center; gap: 22px; padding: 11px 18px; border-radius: 26px; background: #20231f; color: #fff; }
.nav-demo:hover, .nav-brand:hover { background-color: rgba(255,255,252,.94); }
.nav-demo svg { transition: transform 240ms var(--nav-ease); }
.nav-demo:is(:hover,:focus-visible) svg { transform: translateX(3px); }
.site-header :is(a,button):focus-visible { outline: 2px solid #456437; outline-offset: 3px; }
.skip-link { z-index: 60; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-surface { background: #f5f6f1; }
}
@media (max-width: 1150px) {
  :root { --nav-clearance: 152px; }
  .site-header { height: 154px; }
  .nav-shell { gap: 12px 16px; left: 24px; right: 24px; top: 16px; }
  .nav-primary { grid-column: 1/-1; grid-row: 2; justify-self: center; }
  .site-header .nav-brand { grid-column: 2; grid-row: 1; }
  .nav-demo { grid-column: 3; grid-row: 1; }
}
@media (max-width: 600px) {
  :root { --nav-clearance: 140px; }
  .site-header { height: 142px; }
  .nav-shell { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 10px 0; left: 14px; right: 14px; top: 12px; }
  .site-header .nav-brand { --wordmark-width: 148px; grid-column: 2; justify-self: center; grid-template-columns: 44px var(--wordmark-width); border-radius: 17px; }
  .nav-symbol { width: 44px; height: 44px; }
  .nav-symbol .brand-symbol { width: 23px; }
  .nav-wordmark { height: 44px; padding: 10px 12px; }
  .nav-wordmark .brand-wordmark { font-size: 17px; }
  .site-header[data-nav-state=reading] .nav-brand { grid-template-columns: 44px 0px; }
  .site-header .nav-brand .nav-progress { width: 54px; height: 54px; }
  .nav-demo { grid-column: 2/4; grid-row: 2; min-height: 46px; padding: 4px; font-size: 13px; }
  .nav-demo-label { padding: 8px 14px; gap: 10px; }
  .nav-demo svg { width: 15px; height: 15px; }
  .nav-primary { position: relative; grid-column: 1/3; grid-row: 2; justify-self: start; min-height: 46px; padding: 0; }
  .site-header[data-nav-ready] .nav-menu-toggle { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; padding: 10px 16px; border: 0; background: transparent; font: inherit; font-size: 14px; cursor: pointer; border-radius: 28px; }
  .nav-menu-toggle svg { width: 18px; height: 18px; }
  .site-header[data-nav-ready] .nav-menu-content { position: absolute; top: calc(100% + 10px); left: 0; width: min(300px,calc(100vw - 28px)); padding: 18px; border-radius: 24px; background: rgba(245,247,240,.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 6px 24px rgba(27,38,25,.12); flex-direction: column; align-items: stretch; gap: 8px; visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity 160ms ease, transform 260ms var(--nav-ease), visibility 160ms; }
  .site-header[data-menu-open] .nav-menu-content { visibility: visible; opacity: 1; transform: none; }
  .nav-menu-content > .nav-page { font-size: 15px; min-height: 44px; }
  .nav-primary .language-switch { align-self: start; border: 0; padding-left: 0; }
  .nav-primary .language-switch button { padding-inline: 14px; min-height: 42px; }
  .site-header:not([data-nav-ready]) { height: 210px; }
  .site-header:not([data-nav-ready]) .nav-primary { grid-column: 1/-1; padding: 6px 14px; }
  .site-header:not([data-nav-ready]) .nav-menu-content { gap: 18px; }
  .site-header:not([data-nav-ready]) .nav-demo { grid-row: 3; }
}
@media (max-width: 360px) {
  .site-header:not([data-nav-ready]) .nav-menu-content > .nav-page { font-size: 12px; }
}
@media (min-width: 701px) and (min-height: 741px) and (prefers-reduced-motion: no-preference) {
  .panel-stack .capability-panel { top: calc(var(--nav-clearance) + var(--panel-index) * 65px); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header *, .site-header *::after { transition: none !important; }
}