/* ══════════════════════════════════════════════
   Shared site nav — the mobile menu.
   Desktop (>900px) is untouched: the toggle is
   hidden and .links keeps the page's own styles.
   Uses the page's tokens (--ink, --hair, --cyan …).
   ══════════════════════════════════════════════ */
.navtoggle{display:none}

@media(max-width:900px){
  /* .navrow's own padding drops .wrap's gutter; restore it where the
     header would otherwise touch the screen edge */
  .navrow{gap:10px;padding-left:var(--gut);padding-right:var(--gut)}
  .navcta{padding:10px 12px;letter-spacing:.22em}
  .navtoggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
    width:40px;height:40px;padding:0;background:none;border:1px solid var(--hair);cursor:pointer;
    color:var(--bone);transition:border-color .35s,color .35s}
  .navtoggle:hover,.navtoggle[aria-expanded="true"]{border-color:var(--cyan);color:var(--cyan)}
  .navtoggle:focus-visible,.links a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
  .navtoggle i,.navtoggle i::before,.navtoggle i::after{display:block;width:16px;height:1.5px;
    background:currentColor;transition:transform .25s,opacity .25s}
  .navtoggle i{position:relative}
  .navtoggle i::before,.navtoggle i::after{content:"";position:absolute;left:0}
  .navtoggle i::before{top:-5px}
  .navtoggle i::after{top:5px}
  .navtoggle[aria-expanded="true"] i{background:transparent}
  .navtoggle[aria-expanded="true"] i::before{transform:translateY(5px) rotate(45deg)}
  .navtoggle[aria-expanded="true"] i::after{transform:translateY(-5px) rotate(-45deg)}

  /* open: the links drop below the sticky header, scrolling if the screen is short */
  header.menu-open .links{display:flex;flex-direction:column;gap:0;
    position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - 100%);max-height:calc(100dvh - 100%);
    overflow-y:auto;padding:8px var(--gut) 18px;background:var(--deep);
    border-bottom:1px solid var(--hair)}
  header.menu-open .links a{font-size:11px;padding:13px 0;border-bottom:1px solid var(--soft);color:var(--dim)}
  header.menu-open .links a:hover,header.menu-open .links a.here{color:var(--cyan)}
}

/* phones: brand, CTA and toggle share one row */
@media(max-width:480px){
  .navrow{gap:8px}
  .brand{gap:8px}
  .brand b{letter-spacing:.12em}
  .navcta{padding:10px 9px;letter-spacing:.14em}
}