/* ── shared mobile navigation ──────────────────────────────────────
   Loaded by every top-level page. Desktop nav styling stays in each
   page's own <style>; this file owns the small-screen behaviour only.
   Breakpoint matches the existing 640px one where .nav links hid. */

.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--rule);
  color:var(--ink);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:5px 10px;
  cursor:pointer;
  align-items:center;
  gap:8px;
  transition:background .15s ease,color .15s ease,border-color .3s ease;
}
.nav-toggle:hover{background:var(--ink);color:var(--bg)}
.nav-toggle .bars{position:relative;display:block;width:13px;height:9px;flex:none}
.nav-toggle .bars i{
  position:absolute;left:0;right:0;height:1.5px;background:currentColor;
  transition:transform .22s ease,opacity .18s ease;
}
.nav-toggle .bars i:nth-child(1){top:0}
.nav-toggle .bars i:nth-child(2){top:3.75px}
.nav-toggle .bars i:nth-child(3){top:7.5px}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-3.75px) rotate(-45deg)}

.nav-panel{
  display:none;
  border-bottom:1px solid var(--rule);
  background:var(--bg);
}
.nav-panel[data-open="true"]{display:block;animation:navPanelIn .18s ease both}
@keyframes navPanelIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

.nav-panel .grp{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
  padding:18px 0 8px;border-bottom:1px dashed var(--rule);
}
.nav-panel a{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:15px 0;border-bottom:1px solid var(--rule);
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
}
.nav-panel a:last-child{border-bottom:0}
.nav-panel a .hint{
  font-family:var(--serif);font-size:14px;letter-spacing:0;text-transform:none;
  color:var(--ink-2);text-align:right;
}
.nav-panel a[aria-current="page"]{color:var(--accent)}
.nav-panel a:active{background:var(--paper)}

@media (max-width:640px){
  .nav-toggle{display:inline-flex}
  .nav > a{display:none}
}

@media (prefers-reduced-motion:reduce){
  .nav-panel[data-open="true"]{animation:none}
  .nav-toggle .bars i{transition:none}
}