/* ============================================================================
   pages.css — the chrome for the site's INNER pages (privacy-terms, 404).

   Variant 3 keeps its whole stylesheet inline: it is a self-contained preview
   that has to open by double-click. The inner pages need the same header,
   footer, conveyor tape and type voice, and copying 700 lines into each of
   them twice would guarantee they drift apart the first time a colour moves.
   So the shared chrome lives here, in one file both of them link.

   Values are taken from variant-3-signal.html verbatim — same theme tokens,
   same 12px radius ceiling, same 63px header. Anything variant 3 alone needs
   (the hero canvas, the chapter ladder, the diagrams) is deliberately absent.
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-spring: cubic-bezier(.22,1,.36,1);
  --r: 12px;
  --hdr-h: 63px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0a0a;
  --ink: #f2f2f0;
  --muted: rgba(242,242,240,.58);
  --ink-2: rgba(242,242,240,.78);
  --faint: rgba(242,242,240,.38);
  --line: #202020;
  --line-strong: #303030;
  --node: #3c3c3c;
  --accent-text: var(--base-brand-500);
  --on-lime: #101010;
  /* what a primary control inverts INTO on hover. On the dark page that is the
     ink; on paper an ink-black button was a hole in the sheet, so the light
     theme inverts into the page itself and keeps a Brand/750 edge and label. */
  --btn-invert-bg: #101010;
  --btn-invert-ink: var(--base-brand-500);
  --btn-invert-edge: var(--base-brand-500);
  --btn-invert-pressed: #050505;
  /* the primary button's second tone. On the dark page the tile is the ink; on
     paper the same ink read as a hole punched in the sheet, so the light theme
     gives the tile the page's own white and a Brand/750 mark. */
  --btn-tile-surface: #101010;
  --btn-tile-mark: var(--base-brand-500);
  --btn-tile-line: #101010;
  /* the accent a control is FILLED with. Brand/500 is right on the dark page;
     on paper the same fill sat too dark under black label text, so the light
     theme fills one step up the ramp. */
  --btn-accent: var(--base-brand-500);
  --btn-accent-pressed: var(--base-brand-600);
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f4f2;
  --ink: #131312;
  --muted: rgba(19,19,18,.6);
  --ink-2: rgba(19,19,18,.78);
  --faint: rgba(19,19,18,.42);
  --line: #dddddb;
  --line-strong: #c4c4c1;
  --node: #b9b9b6;
  --accent-text: var(--base-brand-750);
  --on-lime: #101010;
  --btn-invert-bg: #ffffff;
  --btn-invert-ink: var(--base-brand-750);
  --btn-invert-edge: var(--base-brand-750);
  --btn-invert-pressed: #ececea;
  --btn-tile-surface: #ffffff;
  --btn-tile-mark: var(--base-brand-750);
  --btn-tile-line: var(--base-brand-400);
  --btn-accent: var(--base-brand-400);
  --btn-accent-pressed: var(--base-brand-500);
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-family-text); font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  display: flex; flex-direction: column; min-block-size: 100svh;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--base-brand-500); color: #101010; }
:focus-visible { outline: 2px solid var(--base-brand-500); outline-offset: 2px; border-radius: 4px; }

.shell { inline-size: min(100% - clamp(24px, 4vw, 56px), 1240px); margin-inline: auto;
  border-inline: 1px solid var(--line); flex: 1; display: flex; flex-direction: column; }
.pad { padding: clamp(40px, 6vw, 72px) clamp(22px, 3.4vw, 48px); }

.mono {
  font-family: var(--font-family-code); font-size: 0.71875rem; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint);
}
h1, h2, h3 { text-wrap: balance; font-weight: 400; }
p { text-wrap: pretty; }
.d1 { font-size: clamp(2.125rem, 3.9vw, 3.375rem); line-height: 1.1; letter-spacing: -0.012em; }
.d3 { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.24; letter-spacing: -0.008em; }

/* the eyebrow with its dot glyph, exactly as the variant draws it */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--accent-text); }
.eyebrow .gl { display: grid; grid-template-columns: repeat(4, 4px); gap: 2px; flex: none; }
.eyebrow .gl i { inline-size: 4px; block-size: 4px; background: var(--base-brand-500); animation: glp 2.8s ease-in-out infinite; }
.eyebrow .gl i:nth-child(1) { animation-delay: .9s; }
.eyebrow .gl i:nth-child(2) { animation-delay: 2s; animation-duration: 3.4s; }
.eyebrow .gl i:nth-child(3) { animation-delay: .3s; }
.eyebrow .gl i:nth-child(4) { animation-delay: 1.5s; animation-duration: 2.2s; }
.eyebrow .gl i:nth-child(5) { animation-delay: 1.1s; animation-duration: 3.1s; }
.eyebrow .gl i:nth-child(6) { animation-delay: 0s; }
.eyebrow .gl i:nth-child(7) { animation-delay: 2.4s; animation-duration: 2.4s; }
.eyebrow .gl i:nth-child(8) { animation-delay: .6s; }
@keyframes glp { 0%, 100% { opacity: 1; } 50% { opacity: .18; } }

/* ---------------- header ---------------------------------------------------- */
.hdr { position: sticky; inset-block-start: 0; z-index: 50; background: var(--bg); border-block-end: 1px solid var(--line); }
.hdr__in { inline-size: min(100% - clamp(24px, 4vw, 56px), 1240px); margin-inline: auto;
  display: flex; align-items: center; gap: 22px; block-size: 62px; padding-inline: clamp(16px, 2vw, 28px);
  border-inline: 1px solid var(--line); }
.hdr__logo { display: flex; align-items: center; }
.hdr__logo svg { block-size: 28px; inline-size: auto; }
.hdr__nav { display: flex; gap: 24px; margin-inline-start: auto; }
.hdr__nav a { position: relative; font-family: var(--font-family-code); font-size: 0.71875rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); transition: color .2s var(--ease); }
.hdr__nav a::after { content: ''; position: absolute; inset-inline: 0; inset-block-end: -5px; block-size: 1.5px;
  background: var(--accent-text); transform: scaleX(0); transform-origin: left center; transition: transform .35s var(--ease-spring); }
.hdr__nav a[aria-current="page"] { color: var(--ink); }
.hdr__nav a[aria-current="page"]::after { transform: scaleX(1); }
/* the actions group: theme toggle sits next to Join, both pinned to the
   header's right edge */
.hdr__act { display: flex; align-items: center; gap: 10px; flex: none; }
.tgl, .burger {
  inline-size: 38px; block-size: 38px; border-radius: var(--r); flex: none;
  border: 1px solid var(--line-strong); background: transparent; color: var(--muted);
  display: grid; place-items: center; cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), transform .3s var(--ease-spring);
}
.tgl:active, .burger:active { transform: scale(.9); }
.tgl svg, .burger svg { inline-size: 16px; block-size: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
[data-theme="light"] .tgl .moon { display: none; }
[data-theme="dark"] .tgl .sun { display: none; }
.burger { display: none; }
@media (hover: hover) and (pointer: fine) {
  .hdr__nav a:hover, .hdr__nav a:focus-visible { color: var(--ink); }
  .hdr__nav a:hover::after, .hdr__nav a:focus-visible::after { transform: scaleX(1); }
  .tgl:hover, .tgl:focus-visible, .burger:hover, .burger:focus-visible { color: var(--ink); border-color: var(--faint); }
}

/* ---------------- the button: two variants, five states ---------------------
   ONE control for the whole site, reduced from the Figma matrix (962:3963) to
   what a site actually needs:

       Primary    the brand fill — the DEX review's rule, "primary CTA default
                  is the brand fill, not white"
       Secondary  the outline

   Structure is container + slot: [ label ][ optional tile with the dot arrow ].
   Drop the tile and the label closes its own corners (`:last-child`), which is
   how the header's JOIN is this same component at size S instead of a second
   button with its own hover.

   The five states are a colour table, not five rule sets:
       default   fill / tile / ink / edge, set per variant below
       hover     the sweep runs left to right, reaches the tile a beat later,
                 the ink flips and the arrow nudges forward
       focused   the same sweep plus the ring — declared OUTSIDE the hover
                 query, so a keyboard reaches it on a touchscreen too
       pressed   the sweep lands at once a shade down, the control squashes
       disabled  no sweep, no squash, muted ink                                */
.lbtn {
  --btn-fill: transparent;
  --btn-tile: transparent;
  --btn-ink: var(--ink);
  --btn-tile-ink: var(--accent-text);
  --btn-edge: var(--line-strong);
  --btn-tile-edge: var(--line-strong);
  --btn-sweep: var(--base-brand-500);
  --btn-sweep-ink: var(--on-lime);
  --btn-sweep-tile: var(--btn-sweep);
  --btn-sweep-tile-ink: var(--btn-sweep-ink);
  --btn-sweep-edge: var(--btn-sweep);
  --btn-pressed: var(--base-brand-600);
  --btn-pressed-tile: var(--btn-pressed);
  --btn-h: 44px;
  --btn-pad: 18px;
  /* fit-content, or the control stretches to its grid cell: the focus ring runs
     the full row and the empty half of the cell submits the form on click */
  display: inline-flex; align-items: stretch; flex: none; inline-size: fit-content;
  justify-self: start; align-self: start; cursor: pointer; border: 0; background: none;
  padding: 0; color: inherit; border-radius: var(--r);
  transition: transform .3s var(--ease-spring);
}
/* Primary is two-tone on purpose: the brand fill carries the label, the tile is
   the ink colour with a lime arrow, so the control reads as one object with a
   button inside it rather than one flat lime pill. Brand/500 against Brand/600
   was a 3% step - invisible. On hover the sweep runs over both and the tile
   dissolves into the label. */
.lbtn--primary {
  --btn-fill: var(--btn-accent); --btn-tile: var(--btn-tile-surface);
  --btn-ink: var(--on-lime); --btn-tile-ink: var(--btn-tile-mark);
  --btn-edge: var(--btn-accent); --btn-tile-edge: var(--btn-tile-line);
  /* the hover INVERTS the control instead of tinting it: Brand/400 over
     Brand/500 was a 6% step and read as nothing. The dark wipe crosses the
     label, the tile flips to lime a beat later, and the lime edge keeps the
     whole control readable against the ground. */
  --btn-sweep: var(--btn-invert-bg); --btn-sweep-ink: var(--btn-invert-ink);
  --btn-sweep-tile: var(--btn-accent); --btn-sweep-tile-ink: var(--on-lime);
  --btn-sweep-edge: var(--btn-invert-edge);
  --btn-pressed: var(--btn-invert-pressed); --btn-pressed-tile: var(--btn-accent-pressed);
}
.lbtn--s { --btn-h: 38px; --btn-pad: 20px; }
/* the header's call to action has nothing next to it competing for the eye,
   and at the default padding it read as a chip — see index.html */
.lbtn--wide { --btn-pad: 38px; }

.lbtn__l {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; min-block-size: var(--btn-h); padding-inline: var(--btn-pad);
  background: var(--btn-fill); color: var(--btn-ink); border: 1px solid var(--btn-edge);
  font-family: var(--font-family-code); font-size: 0.71875rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; white-space: nowrap;
  border-start-start-radius: var(--r); border-end-start-radius: var(--r);
  transition: color .25s var(--ease) .06s, background .25s var(--ease), border-color .25s var(--ease);
}
.lbtn--s .lbtn__l { letter-spacing: 0.08em; }
.lbtn__l:last-child { border-radius: var(--r); }   /* no tile — the label closes both ends */
.lbtn__t {
  position: relative; overflow: hidden; isolation: isolate;
  inline-size: var(--btn-h); min-block-size: var(--btn-h); margin-inline-start: -1px; flex: none;
  background: var(--btn-tile); color: var(--btn-tile-ink); border: 1px solid var(--btn-tile-edge);
  border-start-end-radius: var(--r); border-end-end-radius: var(--r);
  display: grid; place-items: center;
  transition: color .25s var(--ease) .14s, background .25s var(--ease), border-color .25s var(--ease);
}
.lbtn__l::before, .lbtn__t::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-sweep); transform: scaleX(0); transform-origin: left center;
  transition: transform .4s var(--ease-spring), background .2s var(--ease);
}
.lbtn__t::before { background: var(--btn-sweep-tile); transition-delay: .1s; }
.lbtn__t svg { inline-size: 22px; block-size: 22px; }
.lbtn--s .lbtn__t svg { inline-size: 17px; block-size: 17px; }
.lbtn__t .a1 { fill: currentColor; transition: transform .35s var(--ease-spring); }

/* focused */
.lbtn:focus-visible { outline: 2px solid var(--base-brand-500); outline-offset: 3px; border-radius: var(--r); }
.lbtn:focus-visible .lbtn__l::before, .lbtn:focus-visible .lbtn__t::before { transform: scaleX(1); }
.lbtn:focus-visible .lbtn__l { color: var(--btn-sweep-ink); border-color: var(--btn-sweep-edge); }
.lbtn:focus-visible .lbtn__t { color: var(--btn-sweep-tile-ink); border-color: var(--btn-sweep-edge); }
.lbtn:focus-visible .a1 { transform: translateX(3px); }
/* hovered */
@media (hover: hover) and (pointer: fine) {
  .lbtn:hover .lbtn__l::before, .lbtn:hover .lbtn__t::before { transform: scaleX(1); }
  .lbtn:hover .lbtn__l { color: var(--btn-sweep-ink); border-color: var(--btn-sweep-edge); }
  .lbtn:hover .lbtn__t { color: var(--btn-sweep-tile-ink); border-color: var(--btn-sweep-edge); }
  .lbtn:hover .a1 { transform: translateX(3px); }
}
/* pressed */
.lbtn:active { transform: scale(.96); }
.lbtn:active .lbtn__l::before, .lbtn:active .lbtn__t::before {
  transform: scaleX(1); transition-duration: .09s; transition-delay: 0s; }
.lbtn:active .lbtn__l::before { background: var(--btn-pressed); }
.lbtn:active .lbtn__t::before { background: var(--btn-pressed-tile); }
.lbtn:active .lbtn__l { color: var(--btn-sweep-ink); border-color: var(--btn-sweep-edge); }
.lbtn:active .lbtn__t { color: var(--btn-sweep-tile-ink); border-color: var(--btn-sweep-edge); }
/* disabled — wins over every state above, so it is declared last */
.lbtn:disabled, .lbtn[aria-disabled="true"] { cursor: not-allowed; transform: none; }
.lbtn:disabled .lbtn__l, .lbtn:disabled .lbtn__t,
.lbtn[aria-disabled="true"] .lbtn__l, .lbtn[aria-disabled="true"] .lbtn__t {
  background: transparent; color: var(--faint); border-color: var(--line); }
.lbtn--primary:disabled .lbtn__l, .lbtn--primary:disabled .lbtn__t,
.lbtn--primary[aria-disabled="true"] .lbtn__l, .lbtn--primary[aria-disabled="true"] .lbtn__t {
  background: color-mix(in srgb, var(--base-brand-500) 32%, var(--bg)); border-color: transparent; }
.lbtn:disabled .lbtn__l::before, .lbtn:disabled .lbtn__t::before,
.lbtn[aria-disabled="true"] .lbtn__l::before, .lbtn[aria-disabled="true"] .lbtn__t::before { transform: scaleX(0); }
.lbtn:disabled .a1, .lbtn[aria-disabled="true"] .a1 { transform: none; }

/* ---------------- the conveyor tape -----------------------------------------
   Same cut the home page uses between chapters: a slow belt of dots with a
   lime packet running through it, four nodes on the corners. Copied from
   variant 3 rather than approximated — a tape that looked "close enough"
   would read as a different site. */
.tape { position: relative; block-size: 40px; border-block: 1px solid var(--line); overflow: hidden; }
.tape .belt {
  position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 200%;
  background: radial-gradient(circle 1.6px at 6px 50%, var(--line-strong) 98%, transparent) 0 0 / 16px 100% repeat-x;
  opacity: .8; animation: belt 26s linear infinite;
}
@keyframes belt { to { translate: -50% 0; } }
/* the band is 220px of a full-width strip, so `translateX(100%)` is one
   tape-width of travel — the exact distance the old `left: 100%` covered, but
   on the compositor instead of a layout pass every frame */
.tape .ray {
  position: absolute; inset-block: 0; inset-inline: 0;
  background: linear-gradient(90deg, transparent, rgba(124,181,0,.18), transparent) 0 0 / 220px 100% no-repeat;
  animation: ray 9s linear infinite;
}
@keyframes ray { from { transform: translateX(-240px); } to { transform: translateX(100%); } }
.tape::before, .tape::after, .tape i::before, .tape i::after {
  content: ''; position: absolute; inline-size: 7px; block-size: 7px; background: var(--node); z-index: 1; }
.tape::before { inset-block-start: -4px; inset-inline-start: -4px; }
.tape::after  { inset-block-end: -4px; inset-inline-start: -4px; }
.tape i::before { inset-block-start: -4px; inset-inline-end: -4px; }
.tape i::after  { inset-block-end: -4px; inset-inline-end: -4px; }

/* ---------------- the page body --------------------------------------------- */
.page { flex: 1; }
.page__head { display: grid; gap: 16px; padding-block-end: clamp(26px, 3.4vw, 40px);
  border-block-end: 1px solid var(--line-strong); }
.doc { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 14px clamp(24px, 3vw, 52px);
  padding-block: clamp(30px, 4vw, 48px); border-block-start: 1px solid var(--line); }
.doc:first-of-type { border-block-start: 0; }
.doc__n { align-self: start; color: var(--accent-text); }
.doc__body { display: grid; gap: 14px; }
.doc__body p { font-size: 1rem; line-height: 1.66; color: var(--ink-2); max-inline-size: 68ch; }
.doc h2 { margin-block-end: 4px; }

/* ---------------- the 404 screen --------------------------------------------
   A poster, centred, three layers deep — after the references Tiko sent
   (intellitech: giant number over a live field; MPD218: a pad matrix where lit
   cells draw the figure; and our OWN footer wordmark, which is the format he
   asked the digits to take).

     back    the interference field, full bleed inside the section and masked
             to a soft oval so it has no edge — 6px dots, quiet, texture
     middle  404 as a pad matrix: the same 6x8 pixel font the footer wordmark
             uses, one font pixel = one PAD this time, so the cells are ~28px
             and read as a hardware display. Unlit pads stay, which is what
             makes it a matrix rather than a stencil.
     front   the message and the way back, centred under the number

   The two dot layers do not compete because they are an order of magnitude
   apart in size: 6px reads as material, 28px as figure — the same relationship
   the home page's hero uses. */
.nf { position: relative; overflow: hidden;
  display: grid; justify-items: center; align-content: center; gap: clamp(26px, 3.4vw, 44px);
  min-block-size: calc(100svh - var(--hdr-h) - 300px);
  padding: clamp(48px, 7vw, 96px) clamp(22px, 3.4vw, 48px); text-align: center; }
/* the mask is an ANNULUS, not a spot: the first cut lit the middle of the
   section brightest, which is exactly where the number and the message sit, and
   the digits stopped reading. The field is strongest at the edges now and
   absent in the centre — it frames the poster instead of sitting under it. */
.nf__field { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .32;
  background: radial-gradient(circle 1.1px at 3px 3px, var(--line-strong) 98%, transparent) 0 0 / 6px 6px;
  -webkit-mask-image: radial-gradient(78% 90% at 50% 44%, transparent 42%, #000 92%);
          mask-image: radial-gradient(78% 90% at 50% 44%, transparent 42%, #000 92%); }
.nf__field canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; }
.nf__num { position: relative; z-index: 1; inline-size: min(100%, 760px); }
/* the canvas sets its OWN size from a whole-pixel cell — see 404.html */
.nf__num canvas { display: block; margin-inline: auto; max-inline-size: 100%; }
/* the button carries justify-self:start from the component (in the join form it
   sits in a grid cell and must not stretch across it) — on a centred poster
   that pinned it to the left edge of the column */
.nf__copy .lbtn { justify-self: center; }
.nf__copy { position: relative; z-index: 1;
  display: grid; justify-items: center; gap: 20px; max-inline-size: 46ch; }
.nf .d1 { max-inline-size: 14ch; }
.nf__lead { font-family: var(--font-family-code); font-size: 0.84375rem; line-height: 1.7;
  color: var(--muted); max-inline-size: 44ch; }

/* ---------------- footer ---------------------------------------------------- */
.ftr { border-block-start: 1px solid var(--line); }
.ftr__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
.ftr__col { padding: clamp(26px, 4vw, 40px) clamp(22px, 3.4vw, 48px); }
.ftr__col + .ftr__col { border-inline-start: 1px solid var(--line); }
.ftr__logo svg { block-size: 26px; inline-size: auto; }
.ftr__tag { margin-block-start: 14px; font-family: var(--font-family-code); font-size: 0.78125rem; line-height: 1.7; color: var(--muted); max-inline-size: 30ch; }
.ftr__col nav { display: grid; gap: 11px; margin-block-start: 12px; }
.ftr__col nav a { position: relative; inline-size: fit-content; font-size: 0.84375rem; color: var(--muted); transition: color .2s var(--ease); }
.ftr__col nav a::after { content: ''; position: absolute; inset-inline: 0; inset-block-end: -3px; block-size: 1px;
  background: var(--accent-text); transform: scaleX(0); transform-origin: left center; transition: transform .35s var(--ease-spring); }
@media (hover: hover) and (pointer: fine) {
  .ftr__col nav a:hover, .ftr__col nav a:focus-visible { color: var(--ink); }
  .ftr__col nav a:hover::after, .ftr__col nav a:focus-visible::after { transform: scaleX(1); }
}

/* ---------------- mobile menu ------------------------------------------------ */
.menu { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none; transition: opacity .5s cubic-bezier(.16,1,.3,1); }
.menu.open { opacity: 1; pointer-events: auto; }
.menu__bar { display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(20px, 6vw, 44px); }
.menu__bar svg { block-size: 28px; inline-size: auto; }
/* the links hang off the RIGHT edge, under the close button that opens them —
   the thumb that tapped the burger is already there, and a centred column made
   the eye travel back to the middle for every item */
.menu__nav { flex: 1; display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  gap: 10px; padding-inline: clamp(20px, 6vw, 44px); text-align: end; }
/* the padding replaces most of the gap rather than adding to it: the rhythm
   between the links stays 54px, and each one is a 44px tap row */
.menu__nav a { padding-block: 10px;
  font-family: var(--font-family-code); font-size: 1.125rem; letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0; translate: 0 16px; transition: opacity .5s cubic-bezier(.16,1,.3,1), translate .5s cubic-bezier(.16,1,.3,1); }
.menu.open .menu__nav a { opacity: 1; translate: 0 0; }
.menu.open .menu__nav a:nth-child(1) { transition-delay: .10s; }
.menu.open .menu__nav a:nth-child(2) { transition-delay: .16s; }
.menu.open .menu__nav a:nth-child(3) { transition-delay: .22s; }
.menu.open .menu__nav a:nth-child(4) { transition-delay: .28s; }
.menu.open .menu__nav a:nth-child(5) { transition-delay: .34s; }
.menu.open .menu__nav a:nth-child(6) { transition-delay: .40s; }
/* the last item is the page's one call to action, so it is the button
   component rather than another link in the list — the same control the header
   shows on a desktop, at the size a thumb expects. It keeps the list's right
   edge and takes a wider gap above it, so it reads as the end of the menu and
   not as a sixth link. */
/* the component carries `align-self: start` (it must not stretch inside the
   join form's grid cell) — in this column that pinned it to the left */
.menu__nav .menu__cta { align-self: flex-end; margin-block-start: 18px; padding-block: 0;
  /* the component sizes to its label; at "JOIN" that is a stub next to six long
     links. Here it takes a share of the screen instead — the label stretches,
     the tile keeps its square. */
  inline-size: min(62%, 320px); }
.menu__nav .menu__cta .lbtn__l { flex: 1; justify-content: center; font-size: 0.8125rem; letter-spacing: 0.12em; }


@media (max-width: 900px) {
  .doc { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 720px) {
  /* the matrix takes the full width of the shell on a phone: at 305px it was
     the one element on the screen that had stopped feeling large */
  .nf__num { inline-size: calc(100% + 2 * clamp(22px, 3.4vw, 48px));
             margin-inline: calc(-1 * clamp(22px, 3.4vw, 48px)); }
  .hdr__nav, .hdr__act .lbtn { display: none; }
  /* the nav carried `margin-inline-start: auto` — it was what pushed everything
     after it to the right edge. Hidden on a phone, that push disappeared with
     it and the two round controls collapsed against the logo. The actions group
     takes the auto over, in this breakpoint only, so the desktop split between
     logo · nav · actions is untouched. */
  .hdr__act { margin-inline-start: auto; }
  .burger { display: grid; }
  .ftr__grid { grid-template-columns: 1fr; }
  .ftr__col + .ftr__col { border-inline-start: 0; border-block-start: 1px solid var(--line); }
  /* same 44px tap rows as the home page — see its comment */
  .ftr__col nav { gap: 0; }
  .ftr__col nav a { padding-block: 11px; }
  .hdr__logo { padding-block: 8px; margin-block: -8px; }
  /* the round controls stay 38px to the eye — that size is the header's, not
     mine to change — but a thumb gets its 44px through an invisible extension
     of the hit area, so nothing in the layout moves */
  .tgl, .burger { position: relative; }
  .tgl::after, .burger::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; }
}