/* Mobile hamburger menu — paired with mobile-menu.js
   Hamburger button sits in .menubar .actions; only shows ≤880px.
   Tap → full-screen overlay with stacked nav links. */

.menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  width: 38px;
  height: 38px;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--fg);
  transition: background 200ms ease, border-color 200ms ease;
}
.menu-toggle:hover {
  background: color-mix(in oklch, var(--fg) 6%, transparent);
}
.menu-toggle:active { transform: scale(0.96); }
.menu-toggle svg { width: 16px; height: 16px; display: block; }

@media (max-width: 880px) {
  .menu-toggle { display: inline-flex; }
}

/* ——— OVERLAY ——— */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: color-mix(in oklch, var(--bg) 96%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}
.menu-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.menu-overlay-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
}
.menu-overlay-brand {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 20px;
  color: var(--fg);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.menu-overlay-brand .num {
  font-style: normal;
  margin-left: 4px;
  font-feature-settings: "lnum";
}
.menu-overlay-close {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--fg);
  transition: background 200ms ease;
}
.menu-overlay-close:hover {
  background: color-mix(in oklch, var(--fg) 6%, transparent);
}
.menu-overlay-close svg { width: 14px; height: 14px; }

.menu-overlay-links {
  display: flex;
  flex-direction: column;
  padding: 24px 20px;
  flex: 1;
}
.menu-overlay-links a {
  font-family: "Bodoni Moda", serif;
  font-size: clamp(28px, 8vw, 40px);
  line-height: 1.15;
  color: var(--fg);
  text-decoration: none;
  padding: 20px 4px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  transform: translateY(10px);
  opacity: 0;
  transition: transform 360ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 320ms ease;
}
.menu-overlay.open .menu-overlay-links a {
  transform: translateY(0);
  opacity: 1;
}
.menu-overlay.open .menu-overlay-links a:nth-child(1) { transition-delay: 80ms; }
.menu-overlay.open .menu-overlay-links a:nth-child(2) { transition-delay: 140ms; }
.menu-overlay.open .menu-overlay-links a:nth-child(3) { transition-delay: 200ms; }
.menu-overlay.open .menu-overlay-links a:nth-child(4) { transition-delay: 260ms; }
.menu-overlay.open .menu-overlay-links a:nth-child(5) { transition-delay: 320ms; }

.menu-overlay-links a.active {
  font-style: italic;
}
.menu-overlay-links a .num {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--fg-mute);
  letter-spacing: 0.1em;
  font-style: normal;
}

.menu-overlay-footer {
  padding: 20px;
  border-top: 1px solid var(--rule);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

body.menu-open { overflow: hidden; }