/* Three independent header treatments on the same content and navigation routes. */
html[data-theme=lab][data-nav] .site-header{isolation:isolate}
.nav-number{display:none}
html[data-theme=lab][data-nav] .site-header nav a{font-size:12px;min-height:44px;white-space:nowrap}
html[data-theme=lab][data-nav] .site-header nav a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
/* 01: Editorial — a fine rule and quiet, widely spaced links. */
html[data-theme=lab][data-nav=editorial] .site-header nav{gap:30px}
html[data-theme=lab][data-nav=editorial] .site-header nav a{letter-spacing:.01em}
html[data-theme=lab][data-nav=editorial] .site-header nav a::after{height:1px;bottom:4px}
/* 02: Capsule — the active section sits inside a soft floating navigation tray. */
html[data-theme=lab][data-nav=capsule] .site-header{border-bottom-color:transparent;background:transparent}
html[data-theme=lab][data-nav=capsule] .site-header::before{content:"";position:absolute;inset:0 -2vw;z-index:-1;background:var(--bg);opacity:.97}
html[data-theme=lab][data-nav=capsule] .site-header nav{gap:2px;padding:5px;background:#e8eee3;border:1px solid #d4ddce;border-radius:999px;box-shadow:0 4px 16px #22393306}
html[data-theme=lab][data-nav=capsule] .site-header nav a{justify-content:center;padding:10px 17px;border-radius:999px;transition:background .2s,color .2s}
html[data-theme=lab][data-nav=capsule] .site-header nav a::after{display:none}
html[data-theme=lab][data-nav=capsule] .site-header nav a:hover{background:#dce5d5;color:#223933}
html[data-theme=lab][data-nav=capsule] .site-header nav a[aria-current=location]{background:#294b3e;color:#f5f7f2}
/* 03: Index — chapter numbers form a compact, five-column reading index. */
html[data-theme=lab][data-nav=index] .site-header{padding-block:12px;border-bottom:1px solid #c8d3c4}
html[data-theme=lab][data-nav=index] .site-header nav{gap:0;align-self:stretch}
html[data-theme=lab][data-nav=index] .site-header nav a{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:7px 22px;min-width:88px;border-left:1px solid var(--line);letter-spacing:.015em}
html[data-theme=lab][data-nav=index] .site-header .nav-number{display:block;font-size:9px;line-height:1;letter-spacing:.07em;opacity:.65;font-variant-numeric:tabular-nums}
html[data-theme=lab][data-nav=index] .site-header nav a::after{height:2px;left:22px;right:22px;bottom:0}
html[data-theme=lab][data-nav=index] .site-header nav a[aria-current=location] .nav-number{opacity:1;color:var(--accent)}
@media(max-width:1050px){html[data-theme=lab][data-nav=index] .site-header .header-note{display:none}}
@media(min-width:621px) and (max-width:800px){
 html[data-theme=lab][data-nav] .site-header nav{gap:12px}
 html[data-theme=lab][data-nav=capsule] .site-header nav{gap:0}
 html[data-theme=lab][data-nav=capsule] .site-header nav a{padding-inline:13px}
 html[data-theme=lab][data-nav=index] .site-header nav{gap:0}
 html[data-theme=lab][data-nav=index] .site-header nav a{padding-inline:15px}
}
@media(max-width:620px){
 html[data-theme=lab][data-nav] .site-header{gap:0 12px;padding-block:8px}
 html[data-theme=lab][data-nav] .site-header nav{width:100%;gap:0;justify-content:space-between}
 html[data-theme=lab][data-nav] .site-header nav a{font-size:11px;min-height:44px}
 html[data-theme=lab][data-nav=capsule] .site-header nav{padding:4px;display:grid;grid-template-columns:1.4fr 1.1fr .8fr .8fr .8fr}
 html[data-theme=lab][data-nav=capsule] .site-header nav a{padding:8px 5px}
 html[data-theme=lab][data-nav=index] .site-header .header-note{display:block}
 html[data-theme=lab][data-nav=index] .site-header nav{display:grid;grid-template-columns:1.4fr 1.1fr .8fr .8fr .8fr;margin-top:6px}
 html[data-theme=lab][data-nav=index] .site-header nav a{min-width:0;padding:9px 9px 12px;gap:6px}
 html[data-theme=lab][data-nav=index] .site-header nav a:first-child{border-left:0;padding-left:0}
 html[data-theme=lab][data-nav=index] .site-header nav a::after{left:9px;right:9px}
 html[data-theme=lab][data-nav=index] .site-header nav a:first-child::after{left:0}
}
@media(max-width:360px){
 html[data-theme=lab][data-nav] .site-header nav a{font-size:10px}
 html[data-theme=lab][data-nav=capsule] .site-header nav a{padding-inline:3px}
 html[data-theme=lab][data-nav=index] .site-header nav a{padding-inline:6px}
}
@media(prefers-reduced-motion:reduce){html[data-theme=lab][data-nav] .site-header nav a{transition:none}}