/* Main header: the router panel. Shared by the homepage, the channel pages, Studio Notes and How we use AI.
   The markup comes from journal/partials/nav.html (node journal/nav.mjs writes it into hand-made pages).
   Keep backdrop-filter and transform off .top while the phone menu is open: either one traps the fixed channel list
   inside the 60px header (it did on 5 Oct 2026). */
.top{position:sticky;top:0;z-index:100;height:60px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--gut,28px);background:rgba(11,11,10,.95);border-bottom:1px solid rgba(241,239,230,.12);transition:transform .35s cubic-bezier(.2,.7,.2,1),background-color .3s,border-color .3s}
.top.hide{transform:translateY(-100%)}
.top .brand{display:block;width:158px;flex:none}
.top .brand svg{width:100%;height:auto;display:block}
.keys{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.keys a{position:relative;display:flex;align-items:center;gap:8px;height:38px;padding:0 13px 0 11px;border:1px solid #34342f;border-radius:3px;background:linear-gradient(#262624,#181816);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 2px 0 #000;color:#F1EFE6;text-decoration:none;font:600 12px "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;transition:border-color .15s,color .15s,transform .08s}
.keys a::before{content:"";width:7px;height:7px;border-radius:50%;background:#3d3d38;flex:none;transition:background .15s,box-shadow .15s}
.keys .n{font-weight:500;color:#8f8d84;letter-spacing:.06em}
.keys small{display:none}
.keys a:hover{border-color:#5a5a52;color:#C8FF3D}
.keys a:hover::before{background:#C8FF3D;box-shadow:0 0 8px #C8FF3D}
.keys a:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.keys a[aria-current="page"]{border-color:rgba(255,59,48,.65);color:#F1EFE6}
.keys a[aria-current="page"]::before{background:#FF3B30;box-shadow:0 0 10px #FF3B30;animation:navtally 1.6s infinite}
@keyframes navtally{50%{opacity:.4;box-shadow:none}}
.menu-btn{display:none;align-items:center;gap:9px;min-height:44px;padding:0 14px;background:linear-gradient(#262624,#181816);border:1px solid #34342f;border-radius:3px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 2px 0 #000;color:#F1EFE6;font:600 13px "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.mb-lamp{width:7px;height:7px;border-radius:50%;background:#C8FF3D;box-shadow:0 0 8px #C8FF3D}
.menu-btn[aria-expanded="true"] .mb-lamp{background:#FF3B30;box-shadow:0 0 10px #FF3B30}

/* homepage: the header floats over the video wall until you scroll */
.top.over{position:fixed;inset:0 0 auto 0;background:linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,0));border-bottom-color:transparent}
.top.over.solid{background:rgba(11,11,10,.95);border-bottom-color:rgba(241,239,230,.12)}

/* phones and small tablets: the Channels key opens a full-screen channel list */
@media (max-width:980px){
  .menu-btn{display:inline-flex}
  .top .brand{width:136px}
  .nav{display:none;position:fixed;left:0;right:0;top:60px;bottom:0;height:calc(100vh - 60px);height:calc(100dvh - 60px);z-index:99;overflow-y:auto;overscroll-behavior:contain;background:#0B0B0A;padding:8px var(--gut,18px) 40px}
  .nav::before{content:"";position:fixed;left:0;right:0;top:60px;bottom:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px)}
  /* While the list is open, pin the header to the screen. Locking scroll on html and body turns body into the sticky
     header's scroll box, which pulled it back to the top of the page, above the screen (Close at y -162, 8 Oct 2026). */
  html.menu-open .top{position:fixed;top:0;left:0;right:0}
  .nav.open{display:block;animation:navin .28s cubic-bezier(.2,.7,.2,1)}
  @keyframes navin{from{opacity:0;transform:translateY(-8px)}}
  .keys{flex-direction:column;gap:0}
  .keys a{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:16px;align-items:end;height:auto;min-height:84px;padding:14px 4px 14px 2px;border:0;border-bottom:1px solid rgba(241,239,230,.12);border-radius:0;background:none;box-shadow:none;font:400 clamp(44px,13vw,64px)/.9 Anton,"Arial Narrow",Impact,sans-serif;letter-spacing:.005em}
  .keys a::before{position:absolute;right:6px;top:22px;width:9px;height:9px}
  .keys .n{grid-row:1/3;align-self:center;font:400 clamp(26px,8vw,36px)/1 Anton,"Arial Narrow",Impact,sans-serif;color:transparent;-webkit-text-stroke:1px #8f8d84}
  .keys small{display:block;grid-column:2;font:500 12px/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:none;color:#A9A69B;margin-top:6px}
  .keys a[aria-current="page"]{color:#C8FF3D}
  .keys a[aria-current="page"]::after{content:"On air";position:absolute;right:24px;top:17px;font:600 10px "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:#FF3B30}
  .keys a:active{transform:none}
}
@media (max-width:720px){.top{padding:0 18px}}
html.menu-open,html.menu-open body{overflow:hidden}
@media (prefers-reduced-motion:reduce){.top,.keys a{transition:none}.keys a[aria-current="page"]::before{animation:none}.nav.open{animation:none}}