/* ═══════════════════════════════════════════════════════════════════════
   MI DESIGN SYSTEM · v1
   1 tokens · 2 primitives · 3 section templates · 4 components
   RULE 1: .s owns all vertical rhythm. Nothing else sets section padding.
   RULE 2: no orphans. A single word stranded on the last line is never
           acceptable, at any size, on any element. Enforced globally in
           PRIMITIVES below, not per component. If you add a text element,
           add it to that selector list.
   RULE 3: a count that copy announces must be visibly enumerated. Never
           leave "three things" or "four sources" as prose.
   RULE 4: header and footer always match. Whatever ground .nav sits on,
           .foot sits on the same one. Override one and you override both,
           in the same file. See section 14.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · TOKENS ────────────────────────────────────────────────────── */
:root{
  --dark:#0A0A0A; --lime:#DEFF63; --slate:#49556D;
  --blue:#668DED; --orange:#EF9540; --red:#E85555;
  /* --orange is the brand swatch and stays. As TEXT it measures 2.32:1 on white
     and 2.06:1 on lime, so it fails AA everywhere. Use --orange-ink for type:
     5.8:1 on white, 5.1:1 on lime. Keep --orange for fills and borders. */
  --orange-ink:#9C5207;
  /* same story for --red: the brand swatch is for dark grounds and fills.
     --red-ink is the text-safe version for light and lime grounds. */
  --red-ink:#B3241A;
  /* --ink-2 is now only the pre-blended tint under .panel--win. Boxes and
     figures take the true --dark, so the site reads as charcoal type set
     against hard black objects rather than everything at one softness. */
  --paper:#FFFFFF; --paper-2:#F6F5F1; --ink-2:#12141A;
  /* Display type and the brush face sit in charcoal, not in the ground
     colour. #0A0A0A at 116px is a hard edge; 15.1:1 on lime is still
     miles past AAA and reads as black without the harshness. The dark
     GROUND stays #0A0A0A, since grain is what softens that. */
  --charcoal:#1A1C21;

  --t-90:rgba(10,10,10,.90); --t-60:rgba(10,10,10,.58);
  /* --t-38 / --dt-35 keep their names but are no longer 38%/35%: at label sizes
     those measured 2.56:1 and 3.14:1, under the 4.5:1 AA floor. Now 4.7:1 and 5.0:1. */
  --t-38:rgba(10,10,10,.57); --line:rgba(10,10,10,.11);
  --dt-90:rgba(255,255,255,.90); --dt-55:rgba(255,255,255,.55);
  --dt-35:rgba(255,255,255,.48); --dline:rgba(255,255,255,.13);

  /* Archivo for display, Inter for body. Inter is the default typeface of
     the entire AI category, so at 90px it was saying nothing. Archivo is
     wider and carries more ink, which is what the big lines needed. Body
     stays on Inter: it is proven at 15px across ten pages of dense copy
     and swapping both would have put two new variables in one change. */
  --display:'Archivo','Inter',sans-serif; --body:'Inter',sans-serif;
  --mono:'Martian Mono',monospace; --stamp:'Knewave',cursive;

  /* brush accent. Stroke flips with the ground; see .s--dark below. */
  --kw-fill:var(--charcoal); --kw-stroke:var(--lime); --kw-w:.085em;
  --mark-fill:var(--lime); --mark-edge:var(--dark);

  --s-1:8px; --s-2:14px; --s-3:22px; --s-4:34px; --s-5:52px; --s-6:76px;
  --s-band:clamp(64px,8vw,112px);
  --gutter:clamp(20px,4vw,40px);
  --measure:1120px;
  --r:6px;
}

/* ── 2 · PRIMITIVES ────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--dark);font-family:var(--body);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit}
.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--dark);
  color:var(--lime);padding:12px 18px;font-family:var(--mono);font-size:12px;
  text-decoration:none;border-radius:0 0 4px 0}
.skip:focus{left:0}

/* RULE 2 · NO ORPHANS ─────────────────────────────────────────────────
   Headings balance their lines, so a heading never ends on one short word.
   Body copy uses pretty, which pulls a word down rather than stranding it.
   Both degrade to normal wrapping on older browsers, so nothing breaks. */
h1,h2,h3,h4,h5,h6,
.d1,.d2,.d3,.card h3,.card h4,.scn h3,.scn h4,.stat .k,.panel .big{text-wrap:balance}
p,li,figcaption,blockquote,
.lede,.body,.cap,.q,.v,.hint,.note,.scn .out,.card p{text-wrap:pretty}

.d1{font-family:var(--display);font-weight:900;font-size:clamp(36px,5.6vw,66px);
  letter-spacing:-.05em;line-height:1.03;text-wrap:balance}
.d2{font-family:var(--display);font-weight:900;font-size:clamp(27px,4vw,46px);
  letter-spacing:-.045em;line-height:1.07;text-wrap:balance}
.d3{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.5vw,29px);
  letter-spacing:-.03em;line-height:1.16;text-wrap:balance}
/* Inter ships generous default spacing tuned for small UI text. Above ~18px it
   reads loose, so both running-text primitives carry negative tracking. */
.lede{font-size:clamp(16px,1.7vw,18.5px);line-height:1.5;letter-spacing:-.013em;
  color:var(--t-60);max-width:60ch}
.body{font-size:15.5px;line-height:1.6;letter-spacing:-.007em;
  color:var(--t-60);max-width:64ch}
.body + .body{margin-top:var(--s-3)}
/* Brush accent. One treatment for all three: Knewave, stroked, ground aware.
   .em replaces the old Fraunces italic. Kept inline (not inline-block) so long
   clauses still wrap on narrow screens. */
.em,.kw,.stamp{font-family:var(--stamp);font-weight:400;font-style:normal;
  letter-spacing:.005em;line-height:1;padding-right:.06em;
  color:var(--kw-fill);
  -webkit-text-stroke:var(--kw-w) var(--kw-stroke);paint-order:stroke fill}
.em{font-size:.92em}
.kw{font-size:.92em;--kw-stroke:#FFFFFF;--kw-w:.15em}
.stamp{font-size:clamp(26px,3.4vw,42px);display:inline-block}
.lbl{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--t-38)}

/* the MI mark, from Group 74. Circle stripped, outline drawn by CSS so it recolors. */
.mi-mark{height:1em;width:auto;display:inline-block;vertical-align:-.18em;
  fill:var(--mark-fill);stroke:var(--mark-edge);
  stroke-width:170;stroke-linejoin:round;paint-order:stroke}
/* .hl paints a lime block behind text. On a light ground the inherited ink is
   already correct, but on .s--dark the inherited colour is near-white, which
   put white type on lime at roughly 1.2:1. The highlight must therefore set
   its own foreground on dark rather than inheriting one. */
.hl{background:var(--lime);padding:0 .1em;border-radius:3px}
.s--dark .hl{color:var(--dark)}
.s--dark .hl b,.s--dark .hl strong{color:var(--dark)}
b,strong{font-weight:700;color:var(--dark)}

/* ── 3 · SECTION TEMPLATES ─────────────────────────────────────────── */
.s{padding:var(--s-band) 0}
.s > .in{max-width:var(--measure);margin:0 auto;padding:0 var(--gutter)}
.s--tight{padding:var(--s-5) 0}
.s--alt{background:var(--paper-2)}

/* ── LIME GROUND ───────────────────────────────────────────────────────
   Ink on lime measures 17.5:1, so this is the most legible ground on the site.
   The cost is that lime can no longer be the accent, so everything that WAS
   lime inverts to ink below. Consecutive lime bands get a hairline so they
   do not merge into one undifferentiated field. */
.s--lime{background:var(--lime);color:var(--dark);
  --kw-stroke:#FFFFFF;--kw-w:.13em;--mark-fill:#FFFFFF;--mark-edge:var(--dark)}
.s--lime + .s--lime{border-top:1px solid rgba(10,10,10,.14)}
.s--lime .btn{background:var(--dark);color:var(--lime);border-color:var(--dark)}
.s--lime .btn--ghost{background:transparent;color:var(--dark)}
.s--lime .pill{background:var(--dark);color:var(--lime)}
.s--lime .pill--ghost{background:transparent;color:var(--t-60);border-color:rgba(10,10,10,.25)}
.s--lime .hl{background:var(--dark);color:var(--lime)}
.s--lime .card{background:var(--paper);border-color:rgba(10,10,10,.16)}
.s--lime .scn{background:var(--paper);border-color:rgba(10,10,10,.16)}
.s--lime .rule{background:rgba(10,10,10,.16)}
/* On dark the letter goes lime and the stroke goes to the ground colour. Tested the
   alternatives: a white or lime *visible* outline muddies, because white and lime sit
   ~1.15:1 apart in luminance. This keeps the brush crisp and separates overlapping strokes. */
.s--dark{background:var(--dark);color:var(--dt-90);
  --kw-fill:var(--lime);--kw-stroke:var(--dark);--kw-w:.17em;--mark-edge:#FFFFFF;
  /* --orange-ink is darkened for light grounds. On dark, the bright brand
     swatch is the legible one, so flip back to it. */
  --orange-ink:var(--orange)}
.s--dark .lbl{color:var(--dt-35)}
.s--dark .lede,.s--dark .body{color:var(--dt-55)}
.s--dark b,.s--dark strong,.s--dark .d1,.s--dark .d2,.s--dark .d3{color:#fff}
.s--line{border-top:1px solid var(--line)}
.s--dark.s--line{border-top-color:var(--dline)}
.s-hd{margin-bottom:var(--s-5)}
.s-hd .lbl{display:block;margin-bottom:var(--s-3)}
.s-hd .lede{margin-top:var(--s-3)}

.t-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px);align-items:center}
.t-split--wide{grid-template-columns:1.1fr .9fr}
.t-split--top{align-items:start}
.t-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,26px)}
.t-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,26px)}
.t-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.t-statement{text-align:center;max-width:24ch;margin:0 auto}
.t-statement + .sub{text-align:center;max-width:58ch;margin:var(--s-3) auto 0}
.t-proof{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--dline)}
.t-cta{text-align:center}

/* ── 4 · COMPONENTS ────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:30;background:rgba(222,255,99,.96);
  backdrop-filter:blur(10px);border-bottom:1px solid rgba(10,10,10,.16);
  --mark-fill:#FFFFFF;--mark-edge:var(--dark)}
.nav .in{max-width:var(--measure);margin:0 auto;padding:15px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav .logo{display:inline-flex;align-items:flex-start;gap:2px;
  font-size:20px;text-decoration:none;line-height:1}
.nav .logo .mi-mark{height:23px}
.nav .logo sup{font-family:var(--display);font-weight:900;font-size:8.5px;line-height:1}
.nav .links{display:flex;gap:24px;flex-wrap:wrap}
.nav .links a{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--t-60);text-decoration:none;
  padding-bottom:2px;border-bottom:1px solid transparent}
.nav .links a:hover{color:var(--t-90)}
.nav .links a.on{color:var(--dark);border-bottom-color:var(--dark)}
.nav .btn{background:var(--dark);color:var(--lime);border-color:var(--dark)}

/* mobile menu button. Hidden above 880px, where the full nav shows. */
.nav-toggle{display:none;background:transparent;border:1px solid rgba(10,10,10,.28);
  border-radius:4px;padding:9px 10px;cursor:pointer;flex-direction:column;gap:4px;
  margin-left:auto}
.nav-toggle span{display:block;width:17px;height:2px;background:var(--dark);border-radius:2px}
.nav-toggle:focus-visible,.nav .links a:focus-visible,.btn:focus-visible,
input:focus-visible,textarea:focus-visible{outline:2px solid var(--dark);outline-offset:2px}

.pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--lime);color:var(--dark);padding:7px 12px;border-radius:3px}
.pill--ghost{background:transparent;border:1px solid var(--line);color:var(--t-60)}
.s--dark .pill--ghost{border-color:var(--dline);color:var(--dt-55)}

.btn{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:14px 26px;border-radius:4px;
  text-decoration:none;border:1px solid var(--dark);background:var(--lime);color:var(--dark)}
.btn--sm{padding:9px 16px;font-size:9px}
.btn--ghost{background:transparent}
.s--dark .btn{border-color:#fff}
.s--dark .btn--ghost{color:#fff}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.t-cta .btns{justify-content:center}

.card{border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,2.6vw,30px);background:var(--paper)}
.s--dark .card{border-color:var(--dline);background:var(--dark)}
.s--alt .card{background:var(--paper)}
.card .n{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--dark);
  background:var(--lime);display:inline-block;padding:3px 7px;border-radius:2px;margin-bottom:var(--s-3)}
.card h3,.card h4{font-family:var(--display);font-weight:800;font-size:18px;
  letter-spacing:-.02em;margin-bottom:var(--s-1)}
.card p{font-size:15px;line-height:1.55;color:var(--t-60)}
.s--dark .card p{color:var(--dt-55)}
.card .note{margin-top:var(--s-3)}

/* the two hero panels: knowable vs not */
.panel{border:1px solid var(--dline);border-radius:var(--r);background:var(--dark);padding:var(--s-4)}
/* Opaque, not a lime tint. A translucent lime background composites to near
   black on .s--dark but to LIME on .s--lime, which made the lime text inside
   invisible. #14150E is that tint pre-blended over the dark ground, so the
   panel now looks identical wherever it sits. */
.panel--win{border-color:rgba(222,255,99,.30);background:#14150E}
.panel .ph{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dt-35);margin-bottom:var(--s-3);
  display:flex;justify-content:space-between;gap:10px}
.panel--win .ph{color:var(--lime)}
.panel .big{font-family:var(--display);font-weight:900;font-size:clamp(24px,3vw,34px);
  letter-spacing:-.04em;line-height:1;color:var(--dt-35)}
.panel--win .big{color:var(--lime)}
.panel .cap{font-size:13.5px;line-height:1.5;color:var(--dt-55);margin-top:var(--s-2)}
.panel .row{display:flex;gap:11px;padding:9px 0;border-top:1px solid var(--dline);font-size:13.5px}
.panel .row:first-of-type{border-top:0}
.panel--win .row{border-top-color:rgba(222,255,99,.14)}
.panel .row .q{color:#FF8B8B;font-family:var(--mono);font-size:11px;width:12px;flex:none}
.panel .row .d{color:var(--lime);font-size:8px;line-height:2;width:12px;flex:none}
.panel .row .tx{color:var(--dt-55)}
.panel--win .row .tx{color:#F0EBE3}
.panel .row .mt{font-family:var(--mono);font-size:9px;color:var(--dt-35);display:block;margin-top:2px}
.panel .row .mt b{color:var(--lime);font-weight:400}

/* dead assistant motif */
.dead{border:1px solid var(--dline);border-radius:var(--r);background:var(--dark);padding:var(--s-4)}
.dead .row{font-family:var(--mono);font-size:12px;line-height:2.2;color:var(--dt-35)}
.dead .row.x{color:#FF8B8B}
.dead .cap{margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--dline);
  font-size:14px;color:var(--dt-55)}

/* scenario card */
.scn{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  padding:clamp(24px,2.8vw,32px);display:flex;flex-direction:column;gap:var(--s-3)}
.s--dark .scn{border-color:var(--dline);background:var(--dark)}
.scn .who{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--t-38)}
.s--dark .scn .who{color:var(--dt-35)}
.scn h3,.scn h4{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.025em;line-height:1.2}
.scn .q{font-size:15px;line-height:1.55;color:var(--t-60)}
.s--dark .scn .q{color:var(--dt-55)}
.scn .out{margin-top:auto;padding-top:var(--s-3);border-top:1px solid var(--line);
  font-size:14px;line-height:1.5}
.s--dark .scn .out{border-top-color:var(--dline)}
.scn .out b{display:block;margin-bottom:3px}

.stat{padding:clamp(22px,2.6vw,32px);background:var(--dark)}
.stat .k{font-family:var(--display);font-weight:900;font-size:clamp(24px,3.1vw,36px);
  letter-spacing:-.04em;color:var(--lime);line-height:1}
.stat .v{font-size:13.5px;color:var(--dt-55);margin-top:var(--s-2);line-height:1.45}

.note{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t-38);margin-top:var(--s-4)}
.s--dark .note{color:var(--dt-35)}

.rule{height:1px;background:var(--line);border:0}

/* ── FORM ──────────────────────────────────────────────────────────────
   16px inputs are deliberate: anything smaller makes iOS Safari zoom on focus. */
.field{margin-bottom:var(--s-3)}
.field label{display:block;font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--t-38);margin-bottom:var(--s-1)}
.field input,.field textarea{width:100%;font-family:var(--body);font-size:16px;
  color:var(--dark);background:var(--paper);border:1px solid rgba(10,10,10,.28);
  border-radius:var(--r);padding:13px 14px;line-height:1.5}
.field textarea{min-height:104px;resize:vertical}
.field .hint{font-size:13.5px;color:var(--t-60);margin-top:6px}
button.btn{cursor:pointer;font-family:var(--mono)}
button.btn[disabled]{opacity:.5;cursor:progress}
.form-msg{margin-top:var(--s-3);font-size:15px;line-height:1.5;display:none}
.form-msg[data-state]{display:block}
.form-msg[data-state="ok"]{font-weight:700}
.form-msg[data-state="err"]{color:#B3261E}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* The footer takes the nav's lime so the page is bracketed by the same
   colour top and bottom. It sets its own ink because it can follow a dark
   or a paper band, and inheriting either would leave it unreadable. */
.foot{background:var(--lime);color:var(--dark);border-top:1px solid rgba(10,10,10,.16);
  padding:var(--s-4) 0}
.foot .lbl,.foot a{color:var(--t-60)}
.foot a:hover{color:var(--dark)}
.foot .in{max-width:var(--measure);margin:0 auto;padding:0 var(--gutter);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot .links{display:flex;gap:20px;flex-wrap:wrap}
.foot .links a{text-decoration:none}

@media(max-width:880px){
  .t-split,.t-split--wide,.t-trio,.t-steps,.t-duo{grid-template-columns:1fr}
  .t-proof{grid-template-columns:1fr 1fr}
  .nav-toggle{display:inline-flex}
  .nav .in{gap:12px}
  .nav .links{display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;background:var(--lime);
    border-bottom:1px solid rgba(10,10,10,.16);
    padding:var(--s-1) var(--gutter) var(--s-3);
    box-shadow:0 14px 28px rgba(10,10,10,.13)}
  .nav .links[data-open="true"]{display:flex}
  .nav .links a{font-size:13px;letter-spacing:.1em;padding:14px 0;
    border-bottom:1px solid rgba(10,10,10,.10)}
  .nav .links a.on{border-bottom-color:rgba(10,10,10,.10);
    text-decoration:underline;text-underline-offset:5px}
}

/* ── 5 · COUNTED THINGS, TIMELINES, RECORDS ────────────────────────────
   RULE 3: if copy announces a count ("Two things", "Four words") or numbers a
   sequence, the reader must SEE which items are being counted. Never leave a
   count as prose. Use .nlist, and put any summarising sentence on its own line.
   ------------------------------------------------------------------- */

/* numbered marker, Knewave in a circle, matching the MI initials mark */
/* sized in px, not em: an em width against a reduced em font-size compounds
   and the circle comes out too small to read as a marker. */
.nmark{display:inline-flex;align-items:center;justify-content:center;
  width:clamp(34px,4vw,42px);height:clamp(34px,4vw,42px);border-radius:50%;flex:none;
  background:var(--nmark-bg,var(--dark));color:var(--nmark-fg,var(--lime));
  font-family:var(--stamp);font-weight:400;font-size:clamp(17px,2vw,21px);
  line-height:1;padding-top:.16em;letter-spacing:0}
.s--dark{--nmark-bg:var(--lime);--nmark-fg:var(--dark)}

.nlist{list-style:none;display:grid;gap:var(--s-3);margin:var(--s-4) 0 0}
.nlist > li{display:grid;grid-template-columns:auto 1fr;gap:var(--s-3);
  align-items:start}
.nlist .nt{font-family:var(--display);font-weight:800;
  font-size:clamp(18px,2.2vw,24px);letter-spacing:-.03em;line-height:1.25;
  text-wrap:balance}
.nlist .nd{font-size:15px;line-height:1.55;color:var(--t-60);margin-top:4px;
  max-width:46ch;text-wrap:pretty}
.s--dark .nlist .nd{color:var(--dt-55)}

/* mini timeline. Events in order, not a paragraph pretending to be one. */
.tl{list-style:none;margin:var(--s-4) 0 0;display:grid;gap:0}
.tl > li{display:grid;grid-template-columns:74px 1fr;gap:var(--s-3);
  padding:11px 0;position:relative;align-items:baseline}
.tl > li + li{border-top:1px solid var(--line)}
.s--dark .tl > li + li{border-top-color:var(--dline)}
.tl .when{font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--t-38)}
.s--dark .tl .when{color:var(--dt-35)}
.tl .what{font-size:15px;line-height:1.5}
.tl > li.is-seal .what{font-weight:700}
.tl > li.is-seal .when{color:var(--dark)}
.s--dark .tl > li.is-seal .when{color:var(--lime)}

/* a UMO, drawn. The record itself, so people can picture what is captured. */
.umo{border:1px solid var(--dline);border-radius:var(--r);background:var(--dark);
  overflow:hidden;font-family:var(--mono)}
.umo .uh{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:11px 14px;background:#14150E;border-bottom:1px solid rgba(222,255,99,.22)}
.umo .un{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--lime)}
.umo .us{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lime);opacity:.75}
.umo .uf{display:grid;grid-template-columns:78px 1fr;gap:10px;padding:9px 14px;
  font-size:10.5px;line-height:1.5;border-top:1px solid rgba(255,255,255,.07)}
.umo .uf:first-of-type{border-top:0}
.umo .uk{color:var(--dt-35);letter-spacing:.09em;text-transform:uppercase;font-size:9px;
  padding-top:1px}
.umo .uv{color:#F0EBE3;word-break:break-all}
.umo .uv b{color:var(--lime);font-weight:400}
.umo .ucap{padding:10px 14px;border-top:1px solid rgba(255,255,255,.07);
  font-family:var(--body);font-size:12.5px;line-height:1.45;color:var(--dt-55)}

/* the cost pain, said out loud */
.alarm{display:block;font-family:var(--display);font-weight:900;
  font-size:clamp(21px,2.7vw,30px);letter-spacing:-.035em;line-height:1.15;
  color:var(--red);margin-top:var(--s-3);text-wrap:balance}
.s--lime .alarm,.s--alt .alarm,section:not(.s--dark) .alarm{color:var(--red-ink)}
.s--dark .alarm{color:var(--red)}
.reactive{border-left:3px solid var(--red);padding-left:var(--s-3);margin-top:var(--s-3)}
.s--dark .reactive{border-left-color:var(--red)}
/* smaller footnote, for the quiet reassurance under a form */
.note--sm{font-size:11px;letter-spacing:.02em;opacity:.85}

/* ── 6 · DECK COMPONENTS ───────────────────────────────────────────────
   Added for the strategy re-baseline. These carry the loud, declarative
   register the deck uses: big type, few words, one idea per band.
   ------------------------------------------------------------------- */

/* THE THESIS. Three lines, set as large as the viewport allows. This is the
   only place on the site permitted to go bigger than .d1. */
.thesis{display:grid;gap:.02em;margin:0}
.thesis > span{display:block;font-family:var(--display);font-weight:900;
  font-size:clamp(34px,7.4vw,88px);letter-spacing:-.058em;line-height:1.0;
  text-wrap:balance}

/* WHAT IT IS NOT. Struck-through lines read as dismissals at a glance, which
   is faster than a sentence explaining the same three wrong assumptions.
   Colour is muted deliberately: these are the things being cleared away. */
.strike{list-style:none;display:grid;gap:var(--s-2);margin:0}
.strike > li{font-family:var(--display);font-weight:900;
  font-size:clamp(21px,3.3vw,40px);letter-spacing:-.042em;line-height:1.12;
  color:var(--t-38);text-decoration:line-through;
  text-decoration-thickness:.05em;text-underline-offset:0}
.s--dark .strike > li{color:var(--dt-35)}

/* the four verbs. Label left, plain-English right. */
.slab{display:grid;gap:var(--s-2);margin:0}
.slab > div{display:grid;grid-template-columns:104px 1fr;gap:var(--s-3);
  align-items:baseline;border:1px solid var(--line);border-radius:14px;
  padding:17px 22px;background:var(--paper)}
.s--dark .slab > div{border-color:var(--dline);background:var(--dark)}
.slab .sk{font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--orange-ink)}
.s--dark .slab .sk{color:var(--lime)}
.slab .sv{font-size:15.5px;line-height:1.5;letter-spacing:-.007em;color:var(--t-90)}
.s--dark .slab .sv{color:var(--dt-90)}

/* the pilot, as a set of dated phases rather than a promise */
.phase{list-style:none;margin:0;border:1px solid var(--line);border-radius:14px;
  overflow:hidden;background:var(--paper)}
.s--dark .phase{border-color:var(--dline);background:var(--dark)}
.phase > li{display:grid;grid-template-columns:82px 1fr auto;gap:var(--s-3);
  align-items:center;padding:var(--s-3) clamp(18px,2.4vw,28px)}
.phase > li + li{border-top:1px solid var(--line)}
.s--dark .phase > li + li{border-top-color:var(--dline)}
.phase .pd{font-family:var(--display);font-weight:900;
  font-size:clamp(19px,2.3vw,27px);letter-spacing:-.045em;line-height:1.05}
.s--dark .phase .pd{color:var(--lime)}
.phase .pt{font-family:var(--display);font-weight:800;font-size:17px;
  letter-spacing:-.022em;line-height:1.25}
.phase .pm{font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  color:var(--t-38);display:block;margin-top:5px;line-height:1.5}
.s--dark .phase .pm{color:var(--dt-35)}
.phase .ptag{font-family:var(--mono);font-size:9px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);
  border-radius:100px;padding:6px 13px;color:var(--t-38);white-space:nowrap}
.s--dark .phase .ptag{border-color:var(--dline);color:var(--dt-55)}

/* pilot success criteria. Numbers we are committing to hit, not results we
   already have, so they only ever appear next to wording that says so. */
.kpi{display:grid;gap:var(--s-2);margin:0}
.kpi > div{border:1px solid var(--line);border-radius:14px;
  padding:var(--s-3) clamp(18px,2.4vw,26px)}
.s--dark .kpi > div{border-color:var(--dline)}
.kpi .kn{font-family:var(--display);font-weight:900;
  font-size:clamp(26px,3.5vw,40px);letter-spacing:-.045em;line-height:1}
.s--dark .kpi .kn{color:var(--lime)}
.kpi .kd{font-size:13.5px;line-height:1.45;color:var(--t-60);margin-top:5px}
.s--dark .kpi .kd{color:var(--dt-55)}

/* a single loud sentence, left aligned, no card around it */
.pull{font-family:var(--display);font-weight:900;
  font-size:clamp(23px,3.7vw,46px);letter-spacing:-.045em;line-height:1.1;
  max-width:24ch;text-wrap:balance}

.t-quad{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,20px)}

@media(max-width:880px){
  .t-quad{grid-template-columns:1fr 1fr}
  .slab > div{grid-template-columns:1fr;gap:6px}
  .phase > li{grid-template-columns:1fr auto;row-gap:var(--s-1)}
  .phase .pd{grid-column:1/-1}
}
@media(max-width:520px){
  .t-quad{grid-template-columns:1fr}
}

/* ── 6b · SPECIFICITY REPAIRS ──────────────────────────────────────────
   .card p sets 15px/muted and beats a bare .d3 class on the same element
   (0,0,1,1 against 0,0,1,0), so a display line placed inside a card was
   silently rendering at body size. Same for .scn. These restore the
   primitive where it is used as a paragraph inside a container. */
.card p.d3,.scn p.d3{font-family:var(--display);font-weight:800;
  font-size:clamp(20px,2.5vw,29px);letter-spacing:-.03em;line-height:1.16;
  color:var(--dark)}
.s--dark .card p.d3,.s--dark .scn p.d3{color:#fff}
.card p.lede,.scn p.lede{font-size:clamp(16px,1.7vw,18.5px);line-height:1.5}

/* Struck lines sit on lime as often as on dark. At .57 alpha the ink turned
   olive against lime and read as damaged rather than dismissed. These are
   muted on purpose, but they still have to look like type. */
.s--lime .strike > li{color:rgba(10,10,10,.46)}

/* ── 7 · GRAIN, GROUNDS AND EDITORIAL BREAKS ───────────────────────────
   Two problems this solves. The first is that flat #0A0A0A on a screen
   reads as a UI panel, not as ink on a page. Grain gives the dark grounds
   a printed surface. The second is rhythm: strict lime/dark/lime/dark
   alternation is legible but mechanical, so the grounds below add a quiet
   paper tone and a full-bleed break, and dark becomes a rare event rather
   than every other band.
   ------------------------------------------------------------------- */

:root{
  /* desaturated fractal noise, sparse alpha. One tile, scaled per density. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='1' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 0 0 0.34 0 0 0 0 0 0.62 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* .in is lifted above the grain layer rather than the grain being pushed
   behind the section, because a negative z-index would slide it under the
   section background entirely and render nothing. */
/* Every band carries tooth, not just the ones that asked for it. ::before
   is the site-wide layer; .s--plate keeps ::after for its masked edge, and
   its vignette moved onto the section's own background-image so the two
   pseudo-elements stay free. */
.s{position:relative}
.s > .in{position:relative;z-index:1}
.s::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--grain);background-repeat:repeat;
  background-size:var(--grain-size,210px) var(--grain-size,210px);
  opacity:var(--grain-o,.26)}

/* Density by ground. Dark takes the most: flat #0A0A0A on a screen is the
   most obviously synthetic surface on the site. Lime takes the least,
   because at 17.5:1 against ink any texture on it competes with the type. */
.s--dark{--grain-o:.42;--grain-size:190px}
.s--paper{--grain-o:.34;--grain-size:200px}
.s--lime{--grain-o:.26;--grain-size:230px}

/* here and there rather than everywhere at one strength: alternating bands
   shift scale so the page does not read as a single sheet of texture */
/* coprime-ish values so no two bands build a shared repeat cell */
.s:nth-of-type(even){--grain-size:173px}
.s:nth-of-type(3n){--grain-size:251px}

.s--grain--dense{--grain-o:.72;--grain-size:150px}
.s--grain--soft{--grain-o:.22;--grain-size:230px}

/* the quiet ground. Warm off-white, used where a band needs to breathe
   without going all the way to dark. */
.s--paper{background:var(--paper-2);color:var(--dark)}
.s--paper + .s--paper{border-top:1px solid var(--line)}

/* MEGA. Bigger than .d1, for a band that carries one sentence and nothing
   else. Only ever one of these visible at a time. */
.mega{font-family:var(--display);font-weight:900;
  font-size:clamp(40px,9vw,116px);letter-spacing:-.06em;line-height:.94;
  text-wrap:balance}
/* No margin:0 here. The global reset already zeroes it, and declaring it
   again on .mega tied with .t-statement's margin:0 auto on specificity,
   so source order decided it and the centred variant lost. The text was
   centred inside a box that was itself sitting hard left. */

/* a band that is mostly empty on purpose */
.s--air{padding:clamp(110px,15vw,210px) 0}

/* full-bleed drawn figure. Breaks the measure so the artwork runs edge to
   edge the way a plate does in print. */
.plate{width:100%;margin:0}
.plate svg{width:100%;height:auto;display:block;overflow:visible}
.plate figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--t-38);margin-top:var(--s-4);
  max-width:44ch}
.s--dark .plate figcaption{color:var(--dt-35)}
.s--bleed > .in{max-width:none;padding-left:var(--gutter);padding-right:var(--gutter)}

/* The plate's viewBox is 1200 wide. On a phone that is squeezed to roughly
   0.28, which rendered the 11px timestamps at 3.5px and the 8.5-unit nodes
   at 2.4px. Geometry is therefore restated in user units at small sizes so
   the drawing keeps its proportions on screen rather than in the viewBox. */
@media(max-width:760px){
  /* Timestamps are dropped rather than shrunk. Scaled to fit they collided
     with the thread and clipped at both edges, and a plate that has to be
     squinted at is worse than a plate that says less. The times move into
     the caption, which is legible at any width. */
  .plate .pl{display:none}
  .plate .pn circle{r:26px}
  .plate .pn-dot{r:15px}
}


/* ── 8 · SOURCES ───────────────────────────────────────────────────────
   Eight named tools as rows, not cards. Cards made a wall: four of them
   already filled a phone screen and eight would have been a scroll of
   identical white boxes. Rows scan, and the three columns let the eye run
   down "not..." on its own, which is the column that carries the argument.
   ------------------------------------------------------------------- */
.src{list-style:none;margin:var(--s-2) 0 0;border-top:1px solid var(--line)}
.s--dark .src{border-top-color:var(--dline)}
.src > li{display:grid;grid-template-columns:minmax(120px,1fr) 1.05fr 1.5fr;
  gap:var(--s-3);align-items:baseline;padding:15px 0;
  border-bottom:1px solid var(--line)}
.s--dark .src > li{border-bottom-color:var(--dline)}
.src .sn{font-family:var(--display);font-weight:800;font-size:clamp(16px,1.9vw,20px);
  letter-spacing:-.028em;line-height:1.2}
.src .sy{font-size:14.5px;line-height:1.45;letter-spacing:-.007em;color:var(--t-60)}
.s--dark .src .sy{color:var(--dt-55)}
/* the missing half is the point of the row, so it carries the weight.
   Emphasis by weight rather than colour: eight red lines read as an error
   state rather than as an argument. */
.src .sx{font-size:14.5px;line-height:1.45;letter-spacing:-.007em;
  font-weight:700;color:var(--dark)}
.s--dark .src .sx{color:#fff}
@media(max-width:760px){
  .src > li{grid-template-columns:1fr;gap:2px;padding:14px 0}
  .src .sn{margin-bottom:3px}
}

/* ── 9 · POINTER RING ──────────────────────────────────────────────────
   Gated on (hover:hover) and (pointer:fine) so it never runs on touch,
   where a follower lags behind every tap and can never sit under a finger.
   The native cursor is hidden only once JS has confirmed it can draw the
   ring, so a script failure leaves a working pointer rather than none.
   ------------------------------------------------------------------- */
@media (hover:hover) and (pointer:fine){
  html.has-ring body{cursor:none}
  html.has-ring input,html.has-ring textarea,html.has-ring select,
  html.has-ring [contenteditable]{cursor:auto}
  .ring{position:fixed;left:0;top:0;width:26px;height:26px;border-radius:50%;
    border:1.5px solid var(--dark);pointer-events:none;z-index:90;opacity:0;
    transform:translate3d(-50%,-50%,0);will-change:transform;
    transition:width .17s ease,height .17s ease,opacity .2s ease,
               background-color .17s ease,border-color .12s linear}
  .ring[data-on="1"]{opacity:1}
  .ring[data-hot="1"]{width:48px;height:48px;background:rgba(222,255,99,.20)}
  /* an ink ring vanishes on a dark band, so it flips with the ground under it */
  .ring[data-ground="dark"]{border-color:var(--lime)}
  .ring[data-ground="dark"][data-hot="1"]{background:rgba(222,255,99,.16)}
}
@media (prefers-reduced-motion:reduce){
  html.has-ring body{cursor:auto}
  .ring{display:none}
}

/* ── 10 · PLATE GROUND ─────────────────────────────────────────────────
   The drawings sat on flat off-white, which read as a gap in the page
   rather than as a plate laid onto it. This gives each one a lime bloom
   that gathers toward the edges, ink darkening past it, and grain masked
   so it is heaviest at the border and absent behind the artwork itself.

   Two separate layers, not one: the wash has to sit UNDER the grain, and
   the grain carries its own mask. Both are pointer-events:none and both
   sit below .in, so nothing here can intercept a click or wash over the
   drawing's own ink.
   ------------------------------------------------------------------- */
/* The lime bloom and the ink past it are the section's own background now,
   not a pseudo-element. ::before became the site-wide grain layer and
   ::after is still the masked edge, so the vignette had nowhere else to go
   and does not need a layer of its own anyway. */
.s--plate{position:relative;overflow:hidden;
  background-color:var(--paper-2);
  background-image:
    radial-gradient(125% 88% at 50% 50%, rgba(222,255,99,0) 40%,
                    rgba(222,255,99,.34) 80%, rgba(222,255,99,.46) 100%),
    radial-gradient(112% 94% at 50% 50%, rgba(10,10,10,0) 52%,
                    rgba(10,10,10,.055) 82%, rgba(10,10,10,.15) 100%)}
.s--plate > .in{position:relative;z-index:1}

/* grain, masked to the border so the artwork keeps a clean field */
.s--plate::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--grain);background-repeat:repeat;background-size:165px 165px;
  opacity:.55;
  -webkit-mask-image:radial-gradient(122% 86% at 50% 50%,
    rgba(0,0,0,0) 36%, rgba(0,0,0,.75) 78%, #000 100%);
  mask-image:radial-gradient(122% 86% at 50% 50%,
    rgba(0,0,0,0) 36%, rgba(0,0,0,.75) 78%, #000 100%)}

/* Safari before 15.4 has no mask-image on this path, which would drop an
   unmasked grain sheet across the whole band. Cheaper to skip it there. */
@supports not (mask-image: radial-gradient(#000, transparent)){
  .s--plate::after{display:none}
}

/* ── 11 · BIG NUMERALS ─────────────────────────────────────────────────
   Card numbers were a 10px mono chip, which is a UI label. In a magazine
   the numeral is the ornament: set large in the display face and allowed
   to sit against the heading rather than above it in a box.
   ------------------------------------------------------------------- */
.card .n{font-family:var(--stamp);font-weight:400;
  font-size:clamp(38px,4.6vw,58px);line-height:.82;letter-spacing:0;
  background:none;color:var(--dark);padding:0;margin-bottom:var(--s-2);
  -webkit-text-stroke:.035em var(--lime);paint-order:stroke fill}
.s--dark .card .n,.s--lime .s--dark .card .n{color:var(--lime);
  -webkit-text-stroke-color:var(--dark)}

/* ── 12 · THE BOARD ────────────────────────────────────────────────────
   A project the way a person wants to see it, not the way a database
   stores it. The old panel listed fields and timestamps, which read as a
   developer console. This is the same information as a status anyone can
   take in at a glance: one verdict, one bar, three counts.
   ------------------------------------------------------------------- */
.board{border:1px solid var(--line);border-radius:16px;background:var(--paper);
  padding:clamp(20px,2.6vw,30px);box-shadow:0 1px 0 rgba(10,10,10,.05)}
.s--dark .board{border-color:var(--dline);background:var(--dark)}
.board .bh{display:flex;justify-content:space-between;align-items:center;gap:14px;
  margin-bottom:var(--s-3)}
.board .bt{font-family:var(--display);font-weight:800;font-size:clamp(17px,2vw,21px);
  letter-spacing:-.028em}
.board .ok{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;background:var(--lime);color:var(--dark);
  padding:6px 11px;border-radius:100px;white-space:nowrap}
.board .bar{height:12px;border-radius:100px;background:rgba(10,10,10,.10);overflow:hidden}
.s--dark .board .bar{background:rgba(255,255,255,.10)}
.board .bar > span{display:block;height:100%;background:var(--lime);
  border-right:1px solid var(--dark)}
.board .bpct{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--t-38);margin-top:9px}
.s--dark .board .bpct{color:var(--dt-35)}
.board .bstats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2);
  margin-top:var(--s-4)}
.board .bstats > div{text-align:center;padding:var(--s-3) 6px;border-radius:12px;
  background:rgba(10,10,10,.035)}
.s--dark .board .bstats > div{background:rgba(255,255,255,.05)}
.board .bstats b{display:block;font-family:var(--stamp);font-weight:400;
  font-size:clamp(30px,4vw,46px);line-height:.9;letter-spacing:0;color:var(--dark)}
.s--dark .board .bstats b{color:var(--lime)}
.board .bstats span{display:block;font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--t-38);margin-top:7px}
.s--dark .board .bstats span{color:var(--dt-35)}
.board .bcap{font-size:14px;line-height:1.5;color:var(--t-60);margin-top:var(--s-3)}
.s--dark .board .bcap{color:var(--dt-55)}

/* ── 13 · SHOW ME ──────────────────────────────────────────────────────
   One button at the top that pays off immediately, so the first thing a
   visitor does is see something rather than read something.
   Checkbox and sibling selector, no JS: the payoff must not depend on a
   script finishing, and with JS off the board is simply already open
   rather than permanently hidden.
   ------------------------------------------------------------------- */
/* Visually hidden but still in the tab order and still announced. A label
   is not focusable on its own, so the checkbox stays reachable by keyboard
   and lends the label its focus ring below. Not display:none, which would
   remove it from the tab order entirely. */
.peek{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.peek:focus-visible ~ .btns .peek-btn{outline:2px solid var(--dark);outline-offset:3px}
.s--dark .peek:focus-visible ~ .btns .peek-btn{outline-color:#fff}
.peek-btn{cursor:pointer;user-select:none}
.peek-panel{margin-top:var(--s-5);max-width:520px}
@supports selector(:has(*)){
  .peek-panel{display:none}
  .peek:checked ~ .peek-panel{display:block;animation:peek-in .32s ease both}
  .peek:checked ~ .btns .peek-btn .peek-open{display:none}
  .peek-btn .peek-shut{display:none}
  .peek:checked ~ .btns .peek-btn .peek-shut{display:inline}
}
@keyframes peek-in{
  from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .peek:checked ~ .peek-panel{animation:none}
}

/* ── 14 · RULE 4 · HEADER AND FOOTER ALWAYS MATCH ──────────────────────
   The page is bracketed. Whatever ground the nav sits on, the footer sits
   on the same one. A page that opens lime and closes dark reads as two
   documents stapled together. The default pair is lime; a page that
   overrides .nav must override .foot in the same file.
   ------------------------------------------------------------------- */

/* ── 15 · DARK PLATES ──────────────────────────────────────────────────
   The drawings are ink on light. On a dark ground the strokes would
   vanish, so they invert here rather than being redrawn: the SVGs carry
   presentation attributes, which CSS can target directly, so one rule
   flips every plate on every dark page. Lime fills stay lime, since they
   are the accent in both directions.
   ------------------------------------------------------------------- */
.s--dark .plate svg [stroke="#0A0A0A"]{stroke:rgba(255,255,255,.92)}
.s--dark .plate svg text{fill:#FFFFFF}
.s--dark .plate svg circle[fill="#0A0A0A"]{fill:#FFFFFF}
.s--dark.s--plate{background-color:var(--dark);
  background-image:
    radial-gradient(125% 88% at 50% 50%, rgba(222,255,99,0) 40%,
                    rgba(222,255,99,.16) 82%, rgba(222,255,99,.24) 100%),
    radial-gradient(112% 94% at 50% 50%, rgba(0,0,0,0) 52%,
                    rgba(0,0,0,.35) 100%)}
.s--dark.s--plate::after{opacity:.30}

/* sources behind a board figure. Named, because "four sources" that the
   reader cannot see is exactly the count RULE 3 exists to prevent. */
.board .bsrc{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:var(--s-3)}
.board .bsrc em{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;font-style:normal;color:var(--t-38);margin-right:2px}
.s--dark .board .bsrc em{color:var(--dt-35)}
.board .bsrc span{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;
  border:1px solid var(--line);border-radius:100px;padding:5px 10px;color:var(--t-60)}
.s--dark .board .bsrc span{border-color:var(--dline);color:var(--dt-55)}

/* ── 16 · THE KEY ──────────────────────────────────────────────────────
   The same message, twice. Underneath is what a model would be handed:
   shape, no secrets. Move across it and the real thing shows through a
   circular hole in that layer, because you hold the key and the model
   does not.

   Two behaviours, not one. A fine pointer drives the hole directly. A
   coarse pointer cannot hover at all, so the hole sweeps on its own and
   the effect is seen without anyone being asked to discover it. Setting
   touch-action:none instead would have trapped the page scroll on a
   phone, which is a bad trade for a flourish.
   ------------------------------------------------------------------- */
/* A programme manager's board is not a black box. The governed view is a
   familiar light card now; the reveal is the lime patch inside it, which
   keeps the two states clearly different without the whole thing reading
   as a terminal. */
.key{position:relative;border-radius:16px;overflow:hidden;
  border:1px solid rgba(10,10,10,.16);background:var(--paper);
  max-width:560px;min-height:236px;--lx:50%;--ly:50%;--lr:92px}
.key-face{padding:clamp(20px,2.6vw,28px);position:relative;z-index:0}
.key-lbl{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--t-38);display:block;margin-bottom:var(--s-3)}

/* what a model is handed */
.key-fields{display:grid;gap:9px;margin:0;list-style:none}
.key-fields li{display:grid;grid-template-columns:96px 1fr;gap:12px;
  font-family:var(--mono);font-size:11.5px;line-height:1.5}
.key-fields .k{color:var(--t-38);letter-spacing:.08em;text-transform:uppercase;font-size:9.5px;
  padding-top:2px}
.key-fields .v{color:var(--t-90)}

/* the real thing, revealed through the hole */
.key-real{position:absolute;inset:0;z-index:1;padding:clamp(20px,2.6vw,28px);
  background:var(--lime);
  -webkit-mask-image:radial-gradient(circle var(--lr) at var(--lx) var(--ly),
    #000 74%, rgba(0,0,0,.45) 92%, transparent 100%);
  mask-image:radial-gradient(circle var(--lr) at var(--lx) var(--ly),
    #000 74%, rgba(0,0,0,.45) 92%, transparent 100%)}
.key-real .from{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(10,10,10,.62);display:block;margin-bottom:var(--s-2)}
.key-real p{font-size:14.5px;line-height:1.6;color:var(--dark);margin-bottom:9px;max-width:44ch}
.key-real b{color:var(--dark)}

/* the ring that follows, so it reads as a lens and not a smudge */
.key-ring{position:absolute;z-index:2;pointer-events:none;width:calc(var(--lr) * 2);
  height:calc(var(--lr) * 2);left:var(--lx);top:var(--ly);
  transform:translate(-50%,-50%);border-radius:50%;
  border:1px solid rgba(10,10,10,.42);box-shadow:none}

.key-cap{font-size:14px;line-height:1.5;color:var(--t-60);margin-top:var(--s-3);
  max-width:none;text-wrap:normal}
.s--dark .key-cap{color:var(--dt-55)}

/* no fine pointer means no hover, so it demonstrates itself */
@media (hover:none),(pointer:coarse){
  .key{--lr:88px}
  .key-real,.key-ring{animation:key-sweep 7s ease-in-out infinite alternate}
}
@keyframes key-sweep{
  0%{--lx:22%}
  100%{--lx:78%}
}
/* length-percentage, not percentage: the CSS sweep animates in %, the
   pointer handler writes px, and a registration that accepts only one of
   them silently rejects the other and pins the hole at its initial value. */
@property --lx{syntax:'<length-percentage>';inherits:true;initial-value:50%}
@property --ly{syntax:'<length-percentage>';inherits:true;initial-value:50%}
@media (prefers-reduced-motion:reduce){
  .key-real,.key-ring{animation:none}
}

/* an inline plate: same drawn language, but sized to sit inside a normal
   band instead of taking a full-bleed one of its own */
.plate--inline{max-width:820px;margin:0}
.plate--inline figcaption{margin-top:var(--s-3)}
@media(max-width:760px){
  .src > li{padding:12px 0}
  .s-hd{margin-bottom:var(--s-4)}
}

/* ── 17 · BAND TRANSITIONS ─────────────────────────────────────────────
   The plates already did this by accident: their lime bloom reaches the
   top edge and meets the lime band above, so the ground changes without a
   seam. This makes that deliberate everywhere the ground changes.

   The gradient lives on the LOWER band, painting the colour of the one
   above it and fading out. Doing it the other way round would mean the
   upper band bleeding over its own content. Plates are excluded because
   ::after is already their masked edge grain, and they get the effect
   from their own bloom anyway.
   ------------------------------------------------------------------- */
.s--lime + .s--paper:not(.s--plate)::after,
.s--paper + .s--lime:not(.s--plate)::after{
  content:"";position:absolute;left:0;right:0;top:0;z-index:0;pointer-events:none;
  height:clamp(90px,13vw,180px)}
.s--lime + .s--paper:not(.s--plate)::after{
  background:linear-gradient(to bottom,var(--lime),rgba(222,255,99,0))}
.s--paper + .s--lime:not(.s--plate)::after{
  background:linear-gradient(to bottom,var(--paper-2),rgba(246,245,241,0))}
/* Only the light pair fades. Tried it on the dark boundaries too and ink
   into lime goes through olive on the way, which reads as a smudge rather
   than as a transition. A hard edge against black is a decision; a muddy
   one looks like a mistake. */

/* a consecutive pair of the same ground keeps its hairline, but a faded
   join does not need one on top of the fade */
.s--lime + .s--paper,.s--paper + .s--lime{border-top:0}

/* ── 18 · SOFTENED DARK ────────────────────────────────────────────────
   A warm grain for the dark bands that have to hold very large type. The
   site grain is desaturated, which keeps #0A0A0A looking like ink. This
   one carries lime and white flecks at a tighter tile, so the ground
   reads as a printed dark surface rather than as a hard black rectangle.
   ------------------------------------------------------------------- */
:root{
  --grain-warm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='3' seed='19' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='discrete' tableValues='0.87 1 0.72 0.95'/%3E%3CfeFuncG type='discrete' tableValues='1 1 0.86 0.98'/%3E%3CfeFuncB type='discrete' tableValues='0.39 1 0.44 0.90'/%3E%3CfeFuncA type='discrete' tableValues='0 0 0.34 0 0.55 0 0 0.28 0 0.62 0 0.30 0 0 0.48 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23w)'/%3E%3C/svg%3E");
}
.s--soft{--grain-o:.62;--grain-size:120px}
.s--soft::before{background-image:var(--grain-warm)}

/* ── 19 · THE STRUCK LIST ──────────────────────────────────────────────
   Was the display face at weight 900, which made three things we are NOT
   the loudest type on the band. Mono at normal weight reads as items
   being crossed off a list, which is what they are.
   ------------------------------------------------------------------- */
.strike > li{font-family:var(--mono);font-weight:400;
  font-size:clamp(14px,1.75vw,19px);letter-spacing:.01em;line-height:1.5;
  text-decoration:line-through;text-decoration-thickness:1px}

/* ── 20 · ORBS ─────────────────────────────────────────────────────────
   Three words that were sitting in a white box on a page that already had
   several. Set in the brush face inside lime discs instead, so the claim
   is an object on the ground rather than another card.
   ------------------------------------------------------------------- */
.orbs{display:flex;flex-wrap:wrap;gap:clamp(12px,1.8vw,20px);margin:0;list-style:none}
.orbs > li{display:flex;align-items:center;justify-content:center;text-align:center;
  width:clamp(124px,17vw,190px);aspect-ratio:1/1;border-radius:50%;
  background:var(--lime);border:1.5px solid var(--dark);
  font-family:var(--stamp);font-weight:400;color:var(--dark);
  /* the brush face never appears without a stroke anywhere on this site */
  -webkit-text-stroke:.055em #FFFFFF;paint-order:stroke fill;
  /* sized off the longest word in the set, not the shortest: at the old
     size "Independent" ran past both edges of its circle */
  font-size:clamp(15px,1.85vw,23px);line-height:1;padding:.4em .5em 0;
  letter-spacing:0}
.s--dark .orbs > li{border-color:var(--lime)}

/* ── 21 · GET STARTED ──────────────────────────────────────────────────
   The one button that appears on every page, so it carries the brush face
   rather than the mono the other buttons use. Ink fill with a white
   stroke, which needs a light ground under it to read at all.
   ------------------------------------------------------------------- */
.nav .btn{font-family:var(--stamp);font-weight:400;text-transform:none;
  letter-spacing:0;font-size:clamp(14px,1.5vw,17px);line-height:1;
  padding:11px 18px 9px;
  background:var(--lime);color:var(--dark);border-color:var(--dark);
  -webkit-text-stroke:.06em #FFFFFF;paint-order:stroke fill}

/* ── 22 · A PERSON AS A RECORD ─────────────────────────────────────────
   The founder profiles are laid out the way the product lays out anything
   else: an identifier, a sealed marker, and a short list of fields. It is
   never named as a UMO on the page. Either it reads as one on its own or
   the format is not as legible as we claim it is.
   ------------------------------------------------------------------- */
.pcard{border:1px solid var(--dline);border-radius:12px;overflow:hidden;
  background:rgba(255,255,255,.03)}
.pcard .ph{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 14px;border-bottom:1px solid var(--dline)}
.pcard .pid{font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.05em;color:var(--lime)}
.pcard .pseal{font-family:var(--mono);font-size:8.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--lime);opacity:.7}
.pcard .pbody{padding:var(--s-3) 14px}
.pcard .pname{font-family:var(--stamp);font-weight:400;
  font-size:clamp(26px,3.4vw,40px);line-height:1;letter-spacing:0;
  color:var(--lime);-webkit-text-stroke:.055em var(--dark);paint-order:stroke fill;
  display:block;margin-bottom:var(--s-3)}
.pcard .pf{display:grid;grid-template-columns:74px 1fr;gap:10px;
  padding:7px 0;border-top:1px solid rgba(255,255,255,.07);
  font-family:var(--mono);font-size:10.5px;line-height:1.5}
.pcard .pf:first-of-type{border-top:0}
.pcard .pk{color:var(--dt-35);letter-spacing:.09em;text-transform:uppercase;
  font-size:9px;padding-top:2px}
.pcard .pv{color:#F0EBE3}
.pcard .pv b{color:var(--lime);font-weight:400}

/* ── 23 · PALE WASH ────────────────────────────────────────────────────
   A lime band following a dark one gets a paler lime at the top, fading
   into the flat ground. Not the dark colour fading down, which is what
   was tried first and went olive through the midtones. Lime into lime
   cannot go muddy, because there is no third colour in between.
   ------------------------------------------------------------------- */
.s--dark + .s--lime::before,
.s--lime.s--wash::before{
  background-image:
    linear-gradient(to bottom,#F2FFC0,rgba(242,255,192,0) 62%),
    var(--grain)}

/* the slice figure sits beside the heading rather than adding height */
.t-hd-fig{display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(24px,4vw,56px);align-items:center}
@media(max-width:880px){
  .t-hd-fig{grid-template-columns:1fr;gap:var(--s-4)}
  .t-hd-fig .plate--inline{max-width:300px}
}

/* ── 24 · BARE CARDS ───────────────────────────────────────────────────
   Three dark rounded rectangles side by side is the most generic shape on
   the internet. Dropping the box and letting the type carry itself needs
   the heading to hold its own against a grained ground, which is what the
   raised edge below is for: a hairline of white above the letterform and
   ink below it, so the type reads as pressed into the surface rather than
   floating on it. Body copy is left flat, since the same treatment on a
   paragraph is noise.
   ------------------------------------------------------------------- */
.t-bare .card{background:none;border:0;padding:0;box-shadow:none}
.t-bare .card h3{
  text-shadow:0 -1px 0 rgba(255,255,255,.55), 0 1px 0 rgba(10,10,10,.85),
              0 2px 3px rgba(10,10,10,.55)}
.s--dark .t-bare .card p,.t-bare .card p{max-width:32ch}
@media(max-width:880px){
  .t-bare .card + .card{margin-top:var(--s-4)}
}

/* buttons in rows rather than one cramped line */
.btns--stack{flex-direction:column;align-items:flex-start;gap:var(--s-2)}
.t-cta .btns--stack{align-items:center}
.btns{gap:14px}

/* charcoal for the big type on light grounds only. Dark bands keep white. */
.s--lime .d1,.s--lime .d2,.s--lime .d3,.s--lime .mega,.s--lime .pull,.s--lime .thesis > span,
.s--paper .d1,.s--paper .d2,.s--paper .d3,.s--paper .mega,.s--paper .pull,.s--paper .thesis > span,
.s--lime .nlist .nt,.s--paper .nlist .nt,
.s--lime .src .sx,.s--paper .src .sx{color:var(--charcoal)}
.orbs > li{color:var(--charcoal)}

/* ── 24 · BARE NUMBERED CARDS ──────────────────────────────────────────
   No box. The numeral becomes the whole ornament, centred over the block
   it introduces, and the text stands on the ground with a hairline of
   white behind the heading so it lifts off a grained surface.
   ------------------------------------------------------------------- */
.t-bare .card{background:none;border:0;padding:0;text-align:center}
.t-bare .card .n{font-size:clamp(64px,8.5vw,104px);line-height:.8;
  margin:0 0 var(--s-3);display:block;
  -webkit-text-stroke:.03em var(--dark)}
.s--dark .t-bare .card .n{color:var(--lime);-webkit-text-stroke-color:var(--dark)}
.t-bare .card h3{font-size:clamp(17px,2vw,21px);margin-bottom:var(--s-2);
  text-shadow:0 1px 0 rgba(255,255,255,.30)}
.t-bare .card p{max-width:34ch;margin:0 auto}

/* ── 25 · BEFORE AND AFTER ─────────────────────────────────────────────
   Three columns: the moment, what it costs you now, what it costs with a
   record. Rows rather than paired cards, so the eye can run down the
   middle column on its own and feel the accumulation, which is the whole
   argument. The middle column is the one that has to sting, so it carries
   the red ink rather than being greyed out like secondary text.
   ------------------------------------------------------------------- */
.ba{list-style:none;margin:var(--s-5) 0 0;border-top:1px solid var(--line)}
.s--dark .ba{border-top-color:var(--dline)}
.ba > li{display:grid;grid-template-columns:minmax(150px,.9fr) 1.2fr 1.2fr;
  gap:var(--s-3);align-items:start;padding:var(--s-3) 0;
  border-bottom:1px solid var(--line)}
.s--dark .ba > li{border-bottom-color:var(--dline)}
.ba .bm{font-family:var(--display);font-weight:800;
  font-size:clamp(16px,1.9vw,20px);letter-spacing:-.028em;line-height:1.25}
.ba .bl{display:block;font-family:var(--mono);font-size:8.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.ba .bnow .bl{color:var(--red-ink)}
.s--dark .ba .bnow .bl{color:var(--red)}
.ba .bnew .bl{color:var(--orange-ink)}
.s--dark .ba .bnew .bl{color:var(--lime)}
.ba .bt{font-size:14.5px;line-height:1.5;letter-spacing:-.007em;color:var(--t-60)}
.s--dark .ba .bt{color:var(--dt-55)}
.ba .bnew .bt{color:var(--t-90);font-weight:600}
.s--dark .ba .bnew .bt{color:#fff}
@media(max-width:820px){
  .ba > li{grid-template-columns:1fr;gap:var(--s-2);padding:var(--s-3) 0}
  .ba .bm{margin-bottom:2px}
}

/* ── 26 · THE STATEMENT ────────────────────────────────────────────────
   A bank statement, drawn as one. Date, description, amount, a rule and a
   total, because that is the shape everybody already reads without being
   taught. The right column counts things rather than money, which is the
   only joke the component makes and the reason it belongs under that
   headline rather than beside it.
   ------------------------------------------------------------------- */
.stmt{max-width:540px;margin:0 auto;text-align:left;
  border:1px solid rgba(255,255,255,.16);border-radius:12px;
  background:var(--dark);overflow:hidden}
.s--lime .stmt,.s--paper .stmt{border-color:rgba(10,10,10,.18);background:var(--paper)}
.stmt .sh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:13px 18px;border-bottom:1px solid rgba(255,255,255,.14);
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lime)}
.s--lime .stmt .sh,.s--paper .stmt .sh{border-bottom-color:rgba(10,10,10,.14);color:var(--orange-ink)}
.stmt .sr{display:grid;grid-template-columns:58px 1fr auto;gap:12px;
  padding:9px 18px;font-family:var(--mono);font-size:11.5px;line-height:1.45;
  border-top:1px solid rgba(255,255,255,.06)}
.s--lime .stmt .sr,.s--paper .stmt .sr{border-top-color:rgba(10,10,10,.07)}
.stmt .sr:first-of-type{border-top:0}
.stmt .sd{color:var(--dt-35)}
.s--lime .stmt .sd,.s--paper .stmt .sd{color:var(--t-38)}
.stmt .sx{color:#F0EBE3}
.s--lime .stmt .sx,.s--paper .stmt .sx{color:var(--t-90)}
.stmt .sn{color:var(--lime);text-align:right;white-space:nowrap}
.s--lime .stmt .sn,.s--paper .stmt .sn{color:var(--dark);font-weight:700}
.stmt .st{display:flex;justify-content:space-between;gap:12px;
  padding:13px 18px;border-top:1px solid rgba(255,255,255,.20);
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;
  color:var(--lime)}
.s--lime .stmt .st,.s--paper .stmt .st{border-top-color:rgba(10,10,10,.22);color:var(--dark)}

/* ── 27 · LOG IN ───────────────────────────────────────────────────────
   Customers who already signed up need a way back to the developer portal
   from any page. Quieter than Get started, since it is for people who are
   already in rather than people being asked to join.
   ------------------------------------------------------------------- */
.nav .btn--login{background:transparent;color:var(--dark);
  border-color:rgba(10,10,10,.34);-webkit-text-stroke:0;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;padding:10px 14px}
.nav .btn--login:hover{border-color:var(--dark)}
@media(max-width:880px){ .nav .btn--login{display:none} }

/* ── 28 · MATCHED NAV BUTTONS ──────────────────────────────────────────
   Log in and Get started were different heights because one is 9px mono
   and the other is 17px brush, and each was sized by its own padding.
   Both are boxes of the same fixed height now, with the type centred
   inside, so the difference between them is treatment rather than scale:
   one outlined and quiet, one filled and loud.
   ------------------------------------------------------------------- */
.nav .btn--sm{display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 20px;line-height:1;box-sizing:border-box}
/* the brush face carries its own optical baseline, so it is nudged rather
   than centred by the box, which would leave it sitting low */
.nav .btn--sm:not(.btn--login){padding-bottom:3px}
.nav .btn--login{padding:0 18px}

/* ── 29 · BARE STEPS ON A LIGHT GROUND ─────────────────────────────────
   .t-bare was written for the dark Support page, where the numerals are
   lime and the copy is white. On lime and paper the same treatment needs
   ink numerals with a lime edge, which is the brush pairing used
   everywhere else on a light band.
   ------------------------------------------------------------------- */
.t-steps.t-bare{gap:clamp(24px,3.4vw,44px)}
.s--lime .t-bare .card .n,.s--paper .t-bare .card .n{
  color:var(--dark);-webkit-text-stroke:.035em var(--lime)}
.s--lime .t-bare .card h3,.s--paper .t-bare .card h3{
  text-shadow:none;color:var(--dark)}
.s--lime .t-bare .card p,.s--paper .t-bare .card p{
  color:var(--t-60);text-shadow:none}

/* ── 30 · STATEMENT, READ BY A PERSON ──────────────────────────────────
   The first pass set every column in mono, which made a project summary
   look like a terminal dump. Dates and counts stay tabular, because those
   are the columns that have to line up. The description moves to the
   reading face at a readable size, because that is the column anyone
   actually scans.
   ------------------------------------------------------------------- */
.stmt{max-width:580px}
.stmt .sh{font-size:10px;letter-spacing:.16em;padding:15px 20px}
.stmt .sr{grid-template-columns:66px 1fr auto;padding:13px 20px;
  font-family:var(--body);font-size:15px;letter-spacing:-.007em;align-items:baseline}
.stmt .sd{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  font-variant-numeric:tabular-nums}
.stmt .sx{font-size:15px;line-height:1.4}
.stmt .sn{font-family:var(--display);font-weight:700;font-size:13.5px;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.stmt .st{font-family:var(--display);font-weight:800;font-size:14px;
  letter-spacing:-.015em;text-transform:none;padding:15px 20px}

/* ── 31 · LOG IN ───────────────────────────────────────────────────────
   Log in is for people who already belong, so it carries the brush face
   like everything else that is ours, and sits last in the bar: Get
   started is the door for strangers, Log in is the one you already have
   a key to.

   White with a lime lean rather than a flat fill. On a lime nav a plain
   white button is a hole; the gradient and the inner highlight give it an
   edge to sit on. Ink on white needs no stroke, which is also what keeps
   the two buttons apart at a glance.
   ------------------------------------------------------------------- */
.nav .btn--login{
  font-family:var(--stamp);font-weight:400;text-transform:none;letter-spacing:0;
  font-size:clamp(14px,1.5vw,17px);line-height:1;padding:0 20px 3px;
  color:var(--dark);border-color:var(--dark);
  background:linear-gradient(150deg,#FFFFFF 0%,#FFFFFF 52%,#F4FFC8 100%);
  -webkit-text-stroke:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 0 rgba(10,10,10,.16)}
.nav .btn--login:hover{
  background:linear-gradient(150deg,#FFFFFF 0%,#F4FFC8 60%,#DEFF63 100%)}
/* on Support the nav is the dark grained ground, so the white button would
   glare; it goes to ink with a lime edge instead */
.s--dark .nav .btn--login,body.shop .nav .btn--login{
  background:linear-gradient(150deg,#141414 0%,#0A0A0A 100%);
  color:var(--lime);border-color:rgba(222,255,99,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}

/* ── 32 · NAV PROPORTIONS ──────────────────────────────────────────────
   The mark was 23px next to 40px buttons, so the brand was the smallest
   thing in its own bar. It is the largest now, and the links sit on the
   same optical centre line as the buttons rather than riding high off
   their own underline.
   ------------------------------------------------------------------- */
.nav .logo .mi-mark{height:54px}
.nav .logo sup{font-size:12px;margin-top:4px}
.nav .in{padding-top:11px;padding-bottom:11px;gap:clamp(14px,2vw,28px)}

/* Links carry a bottom border for the current page, which pushed them up
   off centre. The border is transparent on every link so all of them
   reserve the same space and the row centres honestly. */
.nav .links{align-items:center}
.nav .links a{font-size:11.5px;padding:4px 0 3px;
  border-bottom:2px solid transparent;line-height:1}
.nav .links a.on{border-bottom-color:var(--dark)}

/* mobile: actions on the left of the toggle, toggle hard right */
@media(max-width:880px){
  .nav .in{flex-wrap:nowrap;gap:8px}
  .nav .logo{margin-right:auto}
  .nav .logo .mi-mark{height:40px}
  .nav-toggle{margin-left:0;order:99}
  .nav .btn--sm{padding:0 13px;font-size:14px;height:36px}
}
@media(max-width:400px){
  /* at this width three controls plus a mark will not fit, and the menu
     holds the same links, so the quieter of the two buttons stands down */
  .nav .btn--login{display:none}
}

/* ── 33 · NAV LINKS IN THE DISPLAY FACE ────────────────────────────────
   The links were Martian Mono, which made the bar read as a dev tool
   rather than as the brand. Archivo puts them in the same voice as the
   headlines. Tracking drops from .12em to .04em because mono needs the
   air between letters and a grotesk does not, and the size goes up two
   points since Archivo sets smaller on the eye at the same value.
   ------------------------------------------------------------------- */
.nav .links a{font-family:var(--display);font-weight:700;
  font-size:13.5px;letter-spacing:.04em;text-transform:uppercase}
@media(max-width:880px){
  .nav .links a{font-size:16px;letter-spacing:.02em}
}

/* ── 34 · THE MENU IS ALWAYS A MENU ────────────────────────────────────
   The hamburger used to appear only below 880px. It is now the only way
   into the nav at every width, and the panel it opens is anchored hard
   right under the toggle rather than spanning the bar. Translucent with a
   blur, so the page reads through it and it sits above the content rather
   than replacing a slice of it.
   --nav-panel lets a page with its own header ground (Support runs black)
   restate the panel without restating the rest of this.
   ------------------------------------------------------------------- */
.nav{--nav-panel:rgba(222,255,99,.95);--nav-panel-line:rgba(10,10,10,.16)}
.nav .in{flex-wrap:nowrap;gap:10px}
.nav .logo{margin-right:auto}

/* the toggle, at every width, hard right */
.nav-toggle{display:inline-flex;order:99;margin-left:0}

/* the panel */
.nav .links{display:none;position:absolute;top:calc(100% + 10px);
  right:var(--gutter);left:auto;
  flex-direction:column;align-items:flex-end;gap:0;
  min-width:min(240px,calc(100vw - var(--gutter) * 2));
  padding:6px 18px 10px;
  background:var(--nav-panel);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);
  backdrop-filter:blur(16px) saturate(1.6);
  border:1px solid var(--nav-panel-line);border-radius:12px;
  box-shadow:0 18px 44px rgba(10,10,10,.22)}
.nav .links[data-open="true"]{display:flex}

/* links inside it read the same at every width */
.nav .links a{width:100%;text-align:right;font-size:15px;letter-spacing:.03em;
  padding:12px 0;border-bottom:1px solid var(--nav-panel-line)}
.nav .links a:last-child{border-bottom:0}
.nav .links a.on{border-bottom-color:var(--nav-panel-line);
  text-decoration:underline;text-underline-offset:5px}

/* ── 35 · BUTTONS IN THE BRUSH FACE, WITH A BLOCK SHADOW ───────────────
   Martian Mono made every button read as system UI. The brush face makes
   them read as the brand, which is what a call to action should sound
   like. The offset shadow is the house pattern already documented in the
   somewhere-shop repo: a hard block, no blur, that shifts under the
   cursor so the button behaves like a physical key.
   The shadow colour follows the ground, because a dark block is invisible
   on ink and a white one is invisible on paper. Set once as a token per
   band; every button inside inherits it.
   portal.html does not load this stylesheet, so the 74 buttons in the app
   keep their own quieter styling.
   ------------------------------------------------------------------- */
:root{--btn-shadow:var(--dark)}
.s--dark{--btn-shadow:#FFFFFF}
.s--lime,.s--paper{--btn-shadow:var(--dark)}

.btn{font-family:var(--stamp);font-weight:400;text-transform:none;
  font-size:17px;letter-spacing:0;line-height:1;padding:14px 26px 12px;
  border-width:2px;
  box-shadow:5px 5px 0 var(--btn-shadow);
  transition:transform .1s ease,box-shadow .1s ease}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--btn-shadow)}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--btn-shadow)}

/* the nav pair stays small, so the block scales down with them */
.btn--sm{font-size:14px;padding:9px 15px 7px;
  box-shadow:3px 3px 0 var(--btn-shadow)}
.btn--sm:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--btn-shadow)}
.btn--sm:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--btn-shadow)}

/* ghost keeps the outline and the block, drops the fill */
.btn--ghost{box-shadow:5px 5px 0 var(--btn-shadow)}

@media (prefers-reduced-motion:reduce){
  .btn,.btn--sm{transition:none}
  .btn:hover,.btn--sm:hover,.btn:active,.btn--sm:active{transform:none}
}

/* the login pill keeps its lighter colour but takes the same block, so the
   two nav buttons sit on the same plane instead of one floating */
.nav .btn--login{box-shadow:3px 3px 0 var(--btn-shadow)}
.nav .btn--login:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--btn-shadow)}
.nav .btn--login:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--btn-shadow)}

/* The menu panel was anchored to .nav, which spans the full window, while
   the toggle that opens it sits inside .in, which is capped at --measure
   and centred. On a wide screen that put the panel up to a hundred pixels
   right of the button. Anchoring to .in instead lines the two up at every
   width, and on a phone .in is full width so nothing changes there. */
.nav .in{position:relative}

/* The panel was translucent enough to read the hero through it, worst on a
   phone where it lands directly over the headline. Opacity up and the shadow
   deeper: still glass, but the links win against whatever is behind them. */
.nav .links{box-shadow:0 22px 50px rgba(10,10,10,.28)}