/* Site header on every page (Oct 2026): frosted white glass bar with the dark logo, firm white behind the logo; it slims as the page scrolls (driven by assets/js/header.js, or motion.js on the home page). */
@keyframes scHdr{to{translate:0 calc(-1 * var(--hd,0px))}}
@keyframes scHdrIn{to{translate:0 calc(var(--hd,0px) / 2)}}
@keyframes scHdrLogo{to{scale:var(--logo-slim,.72)}}
html.sc-hdr .site-header{animation:scHdr linear both;animation-timeline:scroll(root block)}
html.sc-hdr .site-header .wrap{animation:scHdrIn linear both;animation-timeline:scroll(root block)}
html.sc-hdr .site-header__logo img{transform-origin:left center;animation:scHdrLogo linear both;animation-timeline:scroll(root block)}
/* the sticky section tabs (subnav) ride up with the slimming bar, so no gap opens between them */
@keyframes scSub{to{top:calc(var(--stack-top) - var(--hd,0px))}}
html.sc-hdr .subnav{animation:scSub linear both;animation-timeline:scroll(root block)}
/* on phones and tablets the tabs sit straight under the bar from the start, so they slide with it
   exactly as the bar does (same translate the bar uses; iPhone browsers handle this most reliably) */
@keyframes scSubY{to{translate:0 calc(-1 * var(--hd,0px))}}
@media (max-width:900px){html.sc-hdr main[data-subnav] > .subnav{animation-name:scSubY}}
html.sc-hdr-measure .site-header,html.sc-hdr-measure .site-header .wrap,html.sc-hdr-measure .site-header__logo img,
html[data-nav-open] .site-header,html[data-nav-open] .site-header .wrap,html[data-nav-open] .site-header__logo img,html[data-nav-open] .subnav{animation:none!important}
:root body .site-header{border-bottom:1px solid rgba(255,255,255,.45)}
:root{--logo-end:420px}
@media (max-width:900px){:root{--logo-end:230px}}
:root body .site-header::before{background:linear-gradient(90deg,rgba(255,255,255,.93) 0,rgba(255,255,255,.93) var(--logo-end),rgba(255,255,255,.42) calc(var(--logo-end) + 180px),rgba(255,255,255,.42) 100%);box-shadow:inset 0 -1px 0 rgba(15,23,42,.06);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
:root body .nav a{color:#0f172a}
:root body .nav a:hover{color:#0891b2}
:root body .nav a[aria-current]{color:#0f172a;border-bottom-color:#0891b2}
:root body .nav__more{filter:invert(1) brightness(.25)}
:root body .nav__panel{background:#fff;border:0;border-top:3px solid #0891b2;box-shadow:0 0 0 1px #e2e8f0}
:root body .nav__panel a:hover,:root body .nav__panel a:focus-visible{background:#f8fafc}
:root body .nav__panelLabel{color:#0f172a}
:root body .nav__panelNote{color:#475569}
:root body .site-header .btn-primary{background:#0891b2;color:#0f172a}
:root body .site-header .btn-primary:hover{background:#0e7490;color:#fff}
@media (max-width:900px){
:root.js body .nav{background:#fff;border-left:1px solid #e2e8f0;box-shadow:-18px 22px 44px rgba(15,23,42,.12)}
:root.js body .nav a{color:#0f172a;border-bottom-color:#e2e8f0}
:root.js body .nav__panel a{color:#475569}
:root.js body .nav-toggle{color:#0f172a;border-color:#cbd5e1}
}
/* Logo a little larger (Uri, 20 Oct 2026: the wording was hard to read); the bar keeps its height.
   Desktop 84 -> 88px at full size, and it no longer gets squashed between 900 and 1080px wide (it used
   to shrink to half its width there): it keeps its proportions, and the menu gaps tighten instead.
   The slimmed bar keeps it at ~60px, as before. Phones and tablets 48 -> 54px, slimming only to 80%. */
@media (min-width:901px){
:root body .site-header__logo{flex-shrink:0}
:root body .site-header__logo img{height:clamp(52px, 6.62vw - 7.4px, 88px)}
:root body .site-header .wrap{gap:clamp(16px, 7.5vw - 52px, 36px)}
:root body .nav,:root body .nav__list{gap:clamp(14px, 7.5vw - 54px, 34px)}
}
:root{--logo-slim:.68}
@media (max-width:900px){:root body .site-header__logo img{height:54px}:root{--logo-slim:.8}}
@media (max-width:380px){:root body .site-header__logo img{height:39px}}