/* =====================================================================
   SHŌGUN — Fullscreen menu overlay
   Reusable across every subpage. Pair with menu.js, which builds the
   markup, wires triggers, and drives the open / inverse-close animation
   (timeline mirrored from the Figma "Menu anim" frame).
   Palette is the inverse of the page: red field, pink ink.
   ===================================================================== */
.menu{
  position:fixed; inset:0; z-index:50;
  color:var(--ds-pink);
}
.menu[hidden]{ display:none; }

/* The red field wipes in from the left (scaleX, driven by menu.js). */
.menu__bg{
  position:absolute; inset:0;
  background:var(--ds-red);
  transform-origin:left center;
}

/* Content sits above the field. */
.menu__inner{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
}

/* Close: a plain CSS transition (not WAAPI) — content fades out, then the
   red field wipes away last. This runs whenever menu.js adds .is-closing,
   which is deliberately simple/robust: no JS animation-object lifecycle
   (direction/playbackRate/fill) to get out of sync. */
.menu.is-closing .menu__inner{
  transition:opacity .3s ease;
  opacity:0;
}
.menu.is-closing .menu__bg{
  transition:transform .5s cubic-bezier(.42,0,.58,1) .1s;
  transform:scaleX(0);
}

/* ---- Header: logo (col 2) + CLOSE (end of col 11), like .subhead ---- */
.menu__head{
  position:absolute; top:2.5rem; left:0; right:0;
  align-items:center;
  pointer-events:none;
}
.menu__head > *{ pointer-events:auto; }
.menu__logo{
  grid-column:2 / 3; justify-self:start;
  width:3.9rem; height:3.1rem; display:block;
  color:var(--ds-pink);            /* logo paths use currentColor so the
                                      open animation can recolour red→pink */
}
.menu__logo svg{ display:block; width:100%; height:100%; }
.menu__logo svg path{ fill:currentColor; }
.menu__close{
  grid-column:span 1 / -2; justify-self:end; font-size:var(--ds-ui-sm);
  color:var(--ds-pink); white-space:nowrap;
}

/* ---- Centred navigation list ---- */
.menu__list{
  margin:auto;                     /* centres the block on both axes */
  display:flex; flex-direction:column;
  align-items:flex-start;
  gap:clamp(0.5rem, 5.4vw, 2.8125rem);
}
.menu__item{
  display:inline-flex; align-items:flex-start; gap:.625rem;
  color:var(--ds-pink); text-decoration:none;
  font:var(--ds-w-bold) var(--ds-h1)/.95 var(--ds-font);
  text-transform:uppercase;
}
.menu__item .sup{
  font:var(--ds-w-regular) clamp(0.8125rem, 1.7vw, 1.5625rem)/1 var(--ds-font);
  text-transform:none;
}

/* =====================================================================
   MOBILE (≤47.99em) — per Figma 285:100
   Logo centred at top, CLOSE top-right, items 2.5rem centred.
   The open/close animation (menu.js) is unchanged.
   ===================================================================== */
@media (max-width:47.99em){
  .menu__head{ display:block; }                 /* drop the column grid */
  .menu__logo{
    position:absolute; left:50%; top:0; transform:translateX(-50%);
    width:2.5rem; height:2rem;
  }
  .menu__close{
    position:absolute; right:1.25rem; top:.625rem;
    font-size:.625rem;
  }
  .menu__list{ align-items:center; gap:3.25rem; }
  .menu__item{ font-size:2.5rem; gap:.4rem; }
  .menu__item .sup{ font-size:.625rem; }
}

/* Reduced motion: menu.js skips the timeline; nothing to ease here. */