/* ---------- THE PHONE MENU (2026-08-01, his ask) ----------
   The four-link ribbon is a desktop object. On a phone it had to be given a second
   header row of its own on the front page, and on the subpages every link but the
   CTA was simply hidden (`.sp-nav a:not(.cta){display:none}`), which is a
   disappearing act rather than a menu. Below 900px the ribbon is now replaced on
   EVERY page by one button in the top right that drops a sheet of paper carrying
   the same links, in the same order. Nothing is dropped and nothing is renamed.

   ⚠️ Loaded by all 10 pages, alongside `assets/menu.js`. Edit here, never per page.
   ⚠️ 900px must stay in step with menu.js's own 900 and with the site's phone
      breakpoint (index.html's MOBILE(), the @media blocks in both stylesheets).

   z-index budget it has to live inside:
     .sp-head 40 · .cform sheet 60 · .fmark 80 · .lb lightbox 80 · .chatm 90
     · the subpage entry veil 100.
   So: scrim 94, sheet 96, button 98 — over everything the page can show, under the
   veil, which is what stops the button flashing over the paper on the way in. */

/* Desktop and tablet keep the ribbon; nothing here exists above 900px. */
.mburger, .mpanel, .mscrim{display:none}

@media (max-width:900px){

  /* ---------- the button ---------- */
  /* Fixed, not parked in the masthead: on the front page the masthead scrolls away
     and the menu would have gone with it.
     ⚠️ Both offsets are worked back from the 22px BARS, not from the 42px tap
     target they sit in, so that what the eye lines up is the ink: the bars are
     inset 10px inside the button, hence `--pad - 10`. Measured, don't round:
     the subpage bar centres its logo on y29.5, and top:9 puts the bars on y30. */
  .mburger{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    position:fixed;top:9px;right:calc(var(--pad) - 10px);z-index:98;
    width:42px;height:42px;padding:0;border:0;background:none;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:opacity .35s ease,visibility 0s linear 0s;
  }
  .mburger span{
    display:block;width:22px;height:1.6px;border-radius:2px;background:var(--ink);
    transition:transform .38s cubic-bezier(.16,.7,.2,1),opacity .18s ease;
  }
  /* the bars are 1.6 tall on a 5 gap, so each outer bar travels exactly 6.6 to the
     middle before it turns */
  .mburger.open span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
  .mburger.open span:nth-child(2){opacity:0}
  .mburger.open span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

  /* The front page holds the button back until the intro has finished (`html.locked`
     is the intro gate), and every other full-screen thing on the site takes the
     button off the glass while it is open: the contact sheet on the front page,
     the chat pop-up on the subpages. */
  html.locked .mburger,
  html.chat-locked .mburger,
  body.cform-open .mburger{opacity:0;visibility:hidden;pointer-events:none;transition-delay:0s,.35s}

  /* The front page's own two states. Docked, its logo sits 18px down and is 33.7
     tall (centre 34.8); before it docks the same logo is ~59 tall. The subpage
     masthead is excluded by class — it is never `.slim` and must not be dragged
     around by either of these. */
  header:not(.sp-head).slim ~ .mburger{top:14px}
  header:not(.sp-head):not(.slim) ~ .mburger{top:calc(var(--pad) + 9px)}

  /* ---------- the sheet ---------- */
  .mpanel{
    display:block;position:fixed;top:0;left:0;right:0;z-index:96;
    background:var(--paper);border-bottom:1px solid var(--line);
    box-shadow:0 30px 60px -34px rgba(23,41,60,.55);
    padding:62px var(--pad) 22px;
    transform:translateY(-102%);visibility:hidden;
    transition:transform .5s cubic-bezier(.16,.7,.2,1),visibility 0s linear .5s;
  }
  .mpanel.open{transform:none;visibility:visible;transition-delay:0s,0s}
  /* clears the button in its pre-dock position too, so the first link can never sit
     under it if the sheet is ever opened before the masthead has collapsed */
  header:not(.sp-head):not(.slim) ~ .mpanel{padding-top:78px}

  .mpanel a{
    display:block;font-family:'Nohemi',sans-serif;font-weight:400;
    font-size:26px;letter-spacing:-.01em;line-height:1.2;
    color:var(--ink);text-decoration:none;
    padding:16px 2px;border-top:1px solid var(--line);
    opacity:0;transform:translateY(12px);
    transition:opacity .4s ease,transform .45s cubic-bezier(.16,.7,.2,1),color .2s ease;
  }
  .mpanel a:first-child{border-top:0}
  .mpanel a.cta{color:var(--orange)}
  .mpanel.open a{opacity:1;transform:none}
  .mpanel.open a:nth-child(1){transition-delay:.10s}
  .mpanel.open a:nth-child(2){transition-delay:.16s}
  .mpanel.open a:nth-child(3){transition-delay:.22s}
  .mpanel.open a:nth-child(4){transition-delay:.28s}
  .mpanel.open a:nth-child(5){transition-delay:.34s}

  /* ---------- what is behind it ---------- */
  /* `touch-action:none` as well as the scroll lock: without it a drag that starts on
     the scrim still scrolls the page underneath on iOS. */
  .mscrim{
    display:block;position:fixed;inset:0;z-index:94;background:rgba(23,41,60,.36);
    opacity:0;visibility:hidden;touch-action:none;
    transition:opacity .4s ease,visibility 0s linear .4s;
  }
  .mscrim.open{opacity:1;visibility:visible;transition-delay:0s,0s}

  @media (prefers-reduced-motion:reduce){
    .mburger span,.mpanel,.mpanel a,.mscrim{transition:none}
  }
}

/* The lock is written outside the media query on purpose: the class can only ever be
   set below 900px (the button does not exist above it), and a resize past the
   breakpoint closes the menu, so it lifts itself. */
html.mnav-open, html.mnav-open body{overflow:hidden}