/* Slide-out menu (shared by every page). The panel markup is injected by /assets/js/menu.js. */
.menu-btn { position: relative; z-index: 1; width: 30px; height: 30px; margin-right: -6px; padding: 0; background: none; border: 0; cursor: pointer; color: inherit; transition: opacity 0.2s ease; }
.menu-btn-icon > span { position: absolute; left: 6px; right: 6px; top: 50%; height: 1.5px; margin-top: -0.75px; background: currentColor; }
.menu-btn-icon > span:nth-child(2) { transform: rotate(90deg); }
.menu-btn-icon > span:nth-child(3) { display: none; }
/* The two lines form a plus; opening the menu turns it 45° into the close cross */
.menu-btn .menu-btn-icon { position: absolute; inset: 0; transition: transform 0.6s cubic-bezier(0.34, 1.4, 0.5, 1); }
.menu-btn[aria-expanded="true"] .menu-btn-icon { transform: rotate(135deg); }
.menu-btn:hover { opacity: 0.5; }

/* The panel runs --overhang past the right edge so the spring overshoot never shows a gap */
.menu-panel {
  --overhang: 6rem;
  position: fixed; top: 0; bottom: 0; right: calc(-1 * var(--overhang)); z-index: 99;
  width: calc(50vw + 2px + var(--overhang)); /* left edge meets the homepage grid's left column (4px padding + 4px gap) */
  display: flex; flex-direction: column;
  padding: 9rem calc(1.5rem + var(--overhang)) 1.5rem 1.5rem;
  background: #fff; color: #000;
  font-family: 'Aeonik', 'Helvetica Neue', Helvetica, sans-serif; -webkit-font-smoothing: antialiased;
  overflow-y: auto;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), -24px 0 60px rgba(0, 0, 0, 0.12);
  transform: translateX(100%); visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.55, 0, 0.3, 1), visibility 0s linear 0.5s;
}
.menu-panel.open {
  transform: none; visibility: visible;
  /* Spring: overshoots slightly, then settles back */
  transition: transform 0.85s cubic-bezier(0.34, 1.32, 0.5, 1), visibility 0s;
}
.menu-links, .menu-social { list-style: none; }
.menu-social { margin-top: 2.5rem; }
.menu-panel a { color: #000; text-decoration: none; transition: color 0.2s ease-out; }
.menu-panel a:hover, .menu-panel a:focus-visible { color: #b5b5b5; }
.menu-links a { font-size: clamp(2.5rem, 1.6rem + 3vw, 4.5rem); line-height: 1.05; letter-spacing: -0.02em; }
.menu-social a { font-size: clamp(1.25rem, 1.071rem + 0.714vw, 1.625rem); line-height: 1.3; }

/* Items drift in after the panel */
.menu-links li, .menu-social li, .menu-foot { opacity: 0; transform: translateX(2rem); transition: opacity 0.2s ease, transform 0.2s ease; }
.menu-panel.open .menu-links li, .menu-panel.open .menu-social li, .menu-panel.open .menu-foot { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.menu-panel.open li:nth-child(1) { transition-delay: 0.12s; }
.menu-panel.open li:nth-child(2) { transition-delay: 0.17s; }
.menu-panel.open li:nth-child(3) { transition-delay: 0.22s; }
.menu-panel.open .menu-social li:nth-child(1) { transition-delay: 0.27s; }
.menu-panel.open .menu-social li:nth-child(2) { transition-delay: 0.31s; }
.menu-panel.open .menu-foot { transition-delay: 0.35s; }

.menu-foot { margin-top: auto; padding-top: 3rem; font-size: 0.75rem; line-height: 1.4; }

@media (max-width: 768px) {
  .menu-panel { width: calc(100vw + var(--overhang)); padding-top: 7rem; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-panel, .menu-panel.open, .menu-panel li, .menu-foot { transition: none !important; }
}