/* Shared across all pages: the phone menu. Loaded after each page's own styles. */
.menu-btn { display: none; }
@media (max-width: 900px) {
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; width: 44px; height: 44px; margin-left: 4px; padding: 0; background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r); cursor: pointer; flex-direction: column; }
  .menu-btn span { display: block; width: 18px; height: 1.5px; background: var(--ink); transition: transform 240ms var(--ease), opacity 160ms var(--ease); }
  .bar.menu-open .menu-btn span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .bar.menu-open .menu-btn span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .bar nav#nav { display: flex; position: fixed; z-index: 49; left: 0; right: 0; top: 64px; flex-direction: column; gap: 0; margin: 0; padding: var(--s4) var(--gut) var(--s6); background: var(--stone); box-shadow: 0 1px 0 var(--line), 0 24px 40px -24px rgba(27, 41, 64, 0.25); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity 220ms var(--ease), transform 260ms var(--ease), visibility 0s linear 260ms; }
  .bar.menu-open nav#nav { visibility: visible; opacity: 1; transform: none; transition: opacity 220ms var(--ease), transform 260ms var(--ease); }
  .bar nav#nav a { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--line); font-family: var(--display); font-size: 1.6rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
  .bar nav#nav a::after { content: ""; width: 8px; height: 8px; background: var(--line-strong); }
  .bar nav#nav a[aria-current="page"]::after { background: var(--ochre); }
  .bar nav#nav a.nav-extra { display: flex; }
}
.bar nav a.nav-extra { display: none; }
@media (prefers-reduced-motion: reduce) { .bar nav#nav, .menu-btn span { transition: none !important; } }