/* Background fades first (200ms); the content fades + rises just after. Transitions
     (not animations) so close animates out too, not a jarring instant disappear. */
  .menu-overlay { position:fixed; z-index:20; inset:0; overflow-y:auto; background:var(--ink);
    color:var(--paper); opacity:0; visibility:hidden;
    transition:opacity 200ms var(--ease), visibility 0s linear 200ms; }
  .menu-overlay[hidden] { display:none; }
  .menu-overlay.is-open { opacity:1; visibility:visible;
    transition:opacity 200ms var(--ease), visibility 0s; }
  .menu-shell { opacity:0; transform:translateY(8px);
    transition:opacity 260ms var(--ease) 90ms, transform 260ms var(--ease) 90ms; }
  .menu-overlay.is-open .menu-shell { opacity:1; transform:none; }
  /* Same inner container as the site-shell, color-inverted — so the X sits exactly
     where the hamburger was and the menu reads as the same frame flipped to dark. */
  .menu-shell { width:min(100%, 1120px); min-height:100dvh; margin:0 auto; display:flex;
    flex-direction:column; }
  .menu-topbar { flex:none; display:flex; align-items:center; justify-content:space-between;
    padding:8px 18px 14px; border-bottom:3px solid var(--paper); }
  .menu-wordmark { color:var(--paper); font-family:var(--font-sub); font-size:33px;
    font-weight:650; letter-spacing:-0.01em; line-height:1; }
  .menu-close { width:44px; height:44px; padding:0; display:grid; place-items:center;
    border:2px solid var(--paper); background:transparent; color:var(--paper); cursor:pointer; }
  .menu-close svg { width:22px; height:22px; }
  .menu-links { flex:1; display:flex; flex-direction:column; padding:12px 18px; }
  .menu-link { min-height:64px; display:flex; align-items:center; padding:8px 0;
    border-bottom:2px solid color-mix(in srgb, var(--paper) 25%, transparent);
    color:var(--paper); font-family:var(--font-sub); font-size:28px; font-weight:600;
    transition:color var(--dur-hover) var(--ease), padding var(--dur-hover) var(--ease); }
  .menu-copy { flex:none; padding:20px 18px; font-family:var(--font-mono); font-size:9px;
    font-weight:700; letter-spacing:.18em; text-transform:uppercase; opacity:.6; }
  .menu-close:focus-visible, .menu-link:focus-visible { outline:3px solid var(--pumpkin);
    outline-offset:3px; }
  @media (hover:hover) {
    .menu-link:hover { padding-left:8px; color:var(--pumpkin); }
    .menu-close:hover { color:var(--pumpkin); border-color:var(--pumpkin); }
  }
  @media (min-width:820px) {
    .menu-shell { border-left:3px solid var(--paper); border-right:3px solid var(--paper); }
    .menu-topbar { padding:12px 32px 16px; }
    .menu-links { padding:12px 32px; }
    .menu-copy { padding:24px 32px; }
  }