/* Black header band (spec §4): logo left, exactly 3 items, no hamburger.
   Sticky; body.scrolled (set by main.js) shrinks it to a slim bar. */
.site-head{position:sticky;top:0;z-index:40;background:#000}
.site-head .wrap{height:var(--head-h);display:flex;align-items:center;
  justify-content:space-between;gap:12px;transition:height .2s ease}
.site-head .brand img{height:26px;transition:height .2s ease}
.site-nav{display:flex;gap:14px;font-weight:600;font-size:11px}
.site-nav a{color:var(--tint);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.site-nav a:hover,.site-nav a:focus-visible{color:#fff;text-decoration:none}
.site-nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--red)}

body.scrolled .site-head{box-shadow:0 4px 12px rgba(0,0,0,.15)}
body.scrolled{--head-h:40px}
body.scrolled .site-head .brand img{height:20px}

@media (min-width:720px){
  .site-head .brand img{height:44px}
  .site-nav{gap:36px;font-size:14px}
  .site-nav a{padding:8px 0;border-bottom-width:3px}
  body.scrolled{--head-h:48px}
  body.scrolled .site-head .brand img{height:28px}
}