/* Header links: inline on wide screens; on phones (with JS) a menu button
   opens them as a stacked list. Without JS the links stay inline. */
.nav-links { display: flex; align-items: center; gap: inherit; }
.menu-toggle { display: none; place-items: center; width: 32px; height: 32px; padding: 0;
  color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 6px;
  cursor: pointer; }
.menu-toggle:hover { color: var(--ink); border-color: var(--line-strong); }
.menu-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; }
@media (max-width: 600px) {
  /* Without JS the links stay inline, so let the bar wrap instead of overflowing. */
  html:not(.js-nav) header .bar, html:not(.js-nav) header nav,
  html:not(.js-nav) .nav-links { flex-wrap: wrap; }
  .js-nav header nav { position: relative; gap: 8px; }
  .js-nav .menu-toggle { display: inline-grid; }
  .js-nav .nav-links { display: none; position: absolute; top: calc(100% + 10px); right: 0;
    flex-direction: column; align-items: stretch; gap: 0; min-width: 190px; padding: 6px 0;
    background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
    box-shadow: 0 8px 24px rgb(0 0 0 / .18); }
  .js-nav nav.open .nav-links { display: flex; }
  .js-nav .nav-links a { padding: 10px 16px; font-size: 15px; }
  .js-nav .nav-links a + a { border-top: 1px solid var(--line); }
  .js-nav .nav-links a[aria-current="page"] { color: var(--accent); }
}