/* ── MENU ──────────────────────────────────────────────
   One toggle at the centre, one click shows everything.
   Left: the legal pages, quiet grey. Right: the work and
   Instagram, in black, marked ↗ because they leave the site.
   State lives on .menu[data-state="closed" | "open"].
   ─────────────────────────────────────────────────────── */

.menu {
  --quiet: rgb(0 0 0 / .54);            /* grey that still passes contrast (4.5:1) */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.menu button { font: inherit; color: inherit; background: none; border: 0; border-radius: 0; }

/* the toggle: Menu ↔ Close, rolling */
.menu-toggle { grid-area: 1 / 2; padding: .9rem .7rem; }
.menu-label { display: grid; justify-items: center; overflow: hidden; }
.menu-label > span { grid-area: 1 / 1; transition: transform .5s var(--ease); }
.menu-label > span + span { transform: translateY(105%); }
.menu[data-state="open"] .menu-label > span:first-child { transform: translateY(-105%); }
.menu[data-state="open"] .menu-label > span + span { transform: none; }

/* groups either side of the toggle */
.menu-l, .menu-r { display: flex; grid-row: 1; }
.menu-l { grid-column: 1; justify-content: flex-end; --dx: 12px; }
.menu-r { grid-column: 3; --dx: -12px; }

/* items: hidden by default, slide out of the toggle */
.menu-item {
  display: inline-block; padding: .9rem .7rem;
  color: inherit; text-decoration: none; white-space: nowrap;
  opacity: 0; visibility: hidden;
  transform: translate(var(--dx, 0), var(--dy, 0));
  transition: opacity .2s ease, transform .3s var(--ease), color .25s ease, visibility 0s .3s;
}
.menu[data-state="open"] .menu-item {
  opacity: 1; visibility: visible; transform: none;
  transition:
    opacity .4s ease calc(var(--i, 0) * 60ms),
    transform .6s var(--ease) calc(var(--i, 0) * 60ms),
    color .25s ease,
    visibility 0s;
}
.menu-l .menu-item { color: var(--quiet); }
.menu-l .menu-item[aria-current="page"] { color: var(--ink); }   /* the page you're on */

/* keyboard focus: a thin sharp line around the text, not the browser's rounded box */
:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; border-radius: 0; }
.menu-item:focus-visible, .menu-toggle:focus-visible { outline-offset: -.55rem; }

/* nearest the toggle arrives first */
.menu-l .menu-item:nth-last-child(2) { --i: 1; }
.menu-l .menu-item:nth-last-child(3) { --i: 2; }
.menu-r .menu-item:nth-child(2) { --i: 1; }
.menu-r .menu-item:nth-child(3) { --i: 2; }

/* ↗ on links that leave the site */
.menu-ext { width: .5em; height: .5em; margin-left: .2em; vertical-align: .45em; overflow: visible; }

/* hover: the item goes black, the rest steps back */
@media (hover: hover) {
  .menu-toggle { transition: color .25s ease; }
  .menu:has(.menu-item:hover) .menu-item:not(:hover),
  .menu:has(.menu-item:hover) .menu-toggle { color: rgb(0 0 0 / .25); }
  .menu .menu-item:hover { color: var(--ink); }
}

/* phones: everything stacks above the toggle */
@media (max-width: 480px) {
  .menu { grid-template-columns: 1fr; justify-items: center; }
  .menu-toggle { grid-area: 3 / 1; }
  .menu-l, .menu-r { grid-column: 1; flex-direction: column; align-items: center; --dx: 0; --dy: 8px; }
  .menu-l { grid-row: 1; }
  .menu-r { grid-row: 2; }
  .menu-item { padding: .6rem .7rem; }
  .menu-item:focus-visible { outline-offset: -.35rem; }
  /* bottom first, rising */
  .menu-r .menu-item:nth-child(3) { --i: 0; }
  .menu-r .menu-item:nth-child(2) { --i: 1; }
  .menu-r .menu-item:nth-child(1) { --i: 2; }
  .menu-l .menu-item:nth-last-child(1) { --i: 3; }
  .menu-l .menu-item:nth-last-child(2) { --i: 4; }
  .menu-l .menu-item:nth-last-child(3) { --i: 5; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-item, .menu-label > span { transform: none !important; }
  .menu-label > span { transition: opacity .2s ease; }
  .menu-label > span + span { opacity: 0; }
  .menu[data-state="open"] .menu-label > span:first-child { opacity: 0; }
  .menu[data-state="open"] .menu-label > span + span { opacity: 1; }
}