/* Shared site menu: one list of every page, the same on every page. The markup is generated by tools/site_nav.py.
   Loaded after each page's own CSS, so it also gives the blog the brand logo and button it doesn't style itself. */
.nav .brand{display:flex;align-items:center;gap:11px}
.nav .brand img{width:30px;height:30px;border-radius:50%;box-shadow:0 0 14px rgba(56,189,248,.4)}
.nav .links{display:flex;align-items:center;gap:22px}
.nav .btn{display:inline-flex;align-items:center;font-family:var(--mono,ui-monospace,monospace);font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;padding:9px 15px;border-radius:9px;font-weight:500;white-space:nowrap}
.nav .btn.primary{background:linear-gradient(135deg,var(--gold,#f5b955),#e79f3c);color:#1a1206;
  box-shadow:0 8px 30px rgba(245,185,85,.24)}
.nav .btn.primary:hover{color:#1a1206}

/* the Menu button and its panel (details/summary: works without JavaScript and with the keyboard) */
.nav .menu{position:relative}
.nav .menu summary{list-style:none;cursor:pointer;color:var(--text,#f2f7fc);font-family:var(--mono,ui-monospace,monospace);
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;padding:8px 12px;border:1px solid var(--line,#152033);
  border-radius:8px;user-select:none}
.nav .menu summary::-webkit-details-marker{display:none}
.nav .menu summary::after{content:" ☰";color:var(--glow-soft,#38bdf8)}
.nav .menu[open] summary{border-color:var(--glow,#0ea5e9)}
.nav .menu[open] summary::after{content:" ✕"}
.nav .menu summary:focus-visible{outline:2px solid var(--glow,#0ea5e9);outline-offset:2px}
.nav .menu-panel{position:absolute;right:0;top:calc(100% + 10px);width:min(560px,calc(100vw - 32px));
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;padding:20px 22px;
  background:var(--panel,#0b1220);border:1px solid var(--line,#152033);border-radius:14px;
  box-shadow:0 18px 60px rgba(0,0,0,.55),0 0 40px rgba(14,165,233,.08);text-transform:none;letter-spacing:normal}
.nav .menu-group{display:flex;flex-direction:column;gap:7px;min-width:0}
.nav .menu-h{font-family:var(--mono,ui-monospace,monospace);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold,#f5b955);margin-bottom:2px}
.nav .menu-panel a{color:var(--ink,#c7d5e4);font-size:.95rem;letter-spacing:normal;text-transform:none;
  font-family:var(--sans,system-ui,sans-serif)}
.nav .menu-panel a:hover,.nav .menu-panel a.on{color:var(--text,#f2f7fc)}
.nav .menu-panel a.on::before{content:"▸ ";color:var(--glow-soft,#38bdf8)}

/* phones: top links hide (as before) but the Menu stays, and the panel becomes one column across the screen */
@media(max-width:640px){
  .nav .links{gap:10px}
  .nav .btn{padding:8px 10px;font-size:.55rem;letter-spacing:.1em}
  .nav .menu-panel{position:fixed;left:16px;right:16px;top:64px;width:auto;grid-template-columns:1fr;
    max-height:calc(100vh - 84px);overflow:auto}
}