/* ═══════════════════════════════════════════════════════════════════════════
   DISCISE · SITE — the page-level layer
   ---------------------------------------------------------------------------
   core.css is the design system: the faces, the seven sizes, the bar, the
   glass. Its own header says nothing page-specific lives in it, so this is
   where the page-specific things live — the patterns the content is set in,
   and nothing else.

   THE RULE THIS FILE OBEYS. Every size below is one of --t1…--t7. Every face
   is one of --brand / --read / --mono / --display. Every colour is one of the
   palette literals already declared in :root. This file introduces no type, no
   face, no hue and no glass — it introduces ARRANGEMENTS.

   THE SECOND CUT (Jony, 11 Sep): "it still feels messy — overusing tables is
   not cool — make it a real core for future branching, but finished now." So
   the pattern list is short and each one has a job:

     the spread      every band is a 5/7 grid at desktop — head left, body
                     right — so a page uses its width and reads as one rhythm
     the head        label · heading · lede, and nothing else
     prose           the reading voice, one measure
     list            an enumeration set as lines with a mark, NOT rules
     ledger          the ONE ruled pattern: real data (a spec sheet, a grading
                     key, a colophon, a legal definition). Rules mean data.
     study / qa      a subheading and its paragraph; space, not rules
     trio / grid2    two and three-up blocks for the few wide moments
     statement       one looked-at sentence per page, at most
     art             the slot where dissector's own vector drawings will sit
     call            the way in: one short chip, never a sentence in a box

   THE TYPE STYLES (Jony, 11 Sep: "every heading style has to shine, a real
   style we can branch with"). Nine, and each one is a face × a size × a case:

     display    Tanklager  t7  lowercase   the opener's one sentence (h1)
     headline   Tanklager  t6  CAPS        a band's heading (h2) — structural
     subhead    Tanklager  t4  lowercase   a block's heading (h3)
     term       Tanklager  t4  lowercase   a name that labels a value (svg, tanklager)
     statement  Tanklager  t5  sentence    the one looked-at line on a page
     call       Tanklager  t4  lowercase   the chip, in the bar's own box
     label      Plex Mono  t2  CAPS·track  the section mark — apparatus, not voice
     read       Plex Serif t3/t4           prose and the lede
     data       Plex Mono  t2/t3           ledgers, citations, captions

   Case is the level: lowercase is a thing you read as a sentence (the display
   line, a subhead, a term); CAPS is structure (a band's headline). The label
   is not Tanklager at all — two sizes of the same caps voice stacked on each
   other read as caps-and-small-caps, which is the mess it was. Every
   multi-word Tanklager setting carries word-spacing:.06em, because the face's
   own space is cut for a two-word wordmark and closes up in a sentence.

   AND THE ONE THING IT WILL NEVER ADD is more glass. Two glass objects — the
   mark and the bar — and they are the engine's.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══ REPAIRS — omissions in the sacred file, patched from outside it ════════
   1. FAKE BOLD ON EVERY <h2>. core.css sets font-weight:400 on h1 and h3 and
      not on h2, so h2 kept the browser's bold; Tanklager ships one weight and
      Chromium was smearing it. Put font-weight:400 into core.css:100 and this
      line can go.
   2/3. FAKE BOLD AND FAKE ITALIC in the citations: Plex Mono has 300/400/500
      and no italic. Weight 500 exists; a title is marked by tone instead. */
h2{font-weight:400}
/* THE CASE OF THE HOUSE FACE (Jony, 14 Sep). A section headline (h2) is
   Tanklager CAPS — the core's own setting, and it stays. Everything else in
   Tanklager is lowercase and never opens a sentence with a capital: the
   display line, the standfirst, a subhead, a term, the statement, the chip.
   Caps is structure; lowercase is voice. */
h1,h3{text-transform:none;letter-spacing:.004em;word-spacing:.06em}
h2,.doc h2{text-transform:uppercase;word-spacing:.06em}
/* the page is dark; the browser's own scrollbar should not be the one light thing on it */
html{color-scheme:dark}
.cite b,.refs b{font-weight:500}
.cite em,.refs em{font-style:normal;color:var(--cream)}
.light .cite em,.light .refs em{color:var(--ink)}

/* 4. THE WAY HOME WAS NOT CLICKABLE. core.css:114 `.slot{pointer-events:none}`
      is right for the hero slot and reaches the nav anchor too. */
.nav a.slot{pointer-events:auto;cursor:pointer;transition:color .18s ease,filter .22s ease}
/* THE WAY HOME LIGHTS LIKE THE REST OF THE CHROME. The words take the mark's
   highlight on hover — cream to paper, with the glint the glass throws. The
   mark is inline vector, so the same instruction is a drop-shadow instead of
   a text-shadow: the near-opaque 1px core that keeps the stems hard, the 9px
   falloff that carries the air. Same numbers as core.css:184. */
.nav a.slot:hover{color:var(--hi);
     filter:drop-shadow(0 0 1px rgba(250,247,240,.95)) drop-shadow(0 0 9px rgba(250,247,240,.20))}
.nav.on-light a.slot:hover,body.printmode .nav a.slot:hover{color:var(--mid);filter:none}
@media (hover:none){.nav a.slot:hover{filter:none}}
.nav a.slot:focus-visible{outline:1px solid currentColor;outline-offset:6px}

/* 5. THE SCALE INVERTED ON PHONES. core.css:349 sets --t4:15px below 720px to
      shrink the chip — 15px is below --t3's floor, so "one step up from
      reading" was a step down. The chip keeps its size from a token instead. */
@media (max-width:720px){
  :root{--t4:clamp(17px,1.8vw,24px)}
  /* the four page words need 267px; core's gap wraps `about` onto a third row
     at 360px, the most common Android width. A line gap keeps one row. */
  .nav .pages{gap:var(--s2)}
  .nav a.cta{margin:-2px 0}   /* the chip's 35px box overhangs the 31px wordmark row 2px each way; the bar stays 84px on every page */
}
@media (max-width:339px){.nav .pages{max-width:230px}}   /* 320: two even rows */

/* ═══ NO ORPHANS ════════════════════════════════════════════════════════════
   The copy is cut so headings fit one line at the desktop measure; `balance`
   is the net under it, so a break that must happen leaves two even lines and
   never a stranded word. `pretty` does the same for the last line of prose. */
h1,h2,h3,.statement,.lede,.ledger--read dt{text-wrap:balance}
.prose p,.qa p,.list li,.ledger dd,.inst .s,.file p,.cite,.refs li,.foot .line,.art figcaption{text-wrap:pretty}

/* ── THE SKIP LINK ──────────────────────────────────────────────────────── */
.skip{position:fixed;top:10px;left:var(--gut);z-index:80;
      font-family:var(--mono);font-size:var(--t3);letter-spacing:.08em;
      text-transform:uppercase;text-decoration:none;
      background:var(--acc);color:var(--ink);padding:.5em .8em;
      transform:translateY(-300%);transition:transform .15s ease}
.skip:focus-visible{transform:none;outline:1px solid var(--ink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.skip{transition:none}}

/* ── FOCUS SURVIVES WHERE THE LIGHT DOES NOT ─────────────────────────────
   core.css hands nav focus to the pointer-light layer and switches that layer
   off for touch and reduced motion; the plain ring stands in there. */
@media (hover:none){.nav a.lit:focus-visible{outline:1px solid currentColor;outline-offset:5px}}
@media (prefers-reduced-motion:reduce){.nav a.lit:focus-visible{outline:1px solid currentColor;outline-offset:5px}}

/* ═══ THE SIGNAL INK IS THE HOUSE YELLOW ════════════════════════════════════
   Process Y pulled on the house paper: multiply of #FFF200 over --paper
   #e9e3d5 with 12% undercolour, because uncoated stock never takes full
   density → #E9D717. Dimmed off fluorescence, three degrees warmer, and it
   cannot be reproduced without our paper tone. One token, overridden here so
   core.css stays untouched; ::selection takes it and becomes a highlighter.

   YELLOW IS NEVER PRINTED ALONE ON PAPER. On the cream bands it flips form:
   ink on a yellow patch for the number, ink over a yellow rule for a link
   (solid on hover, like a marker), and the registration mark prints in ink. */
:root{--acc:#E9D717}

/* ═══ THE FOUR INKS (Jony, 11 Sep: "the cmyk colour bar, it will be beautiful") ═
   The other three process inks, derived by the same pull as the yellow —
   multiply of the process literal over --paper #e9e3d5, 12% of the paper left
   showing where an ink is empty, because uncoated stock never takes full
   density. One impression each, on our own sheet:
     C #00AEEF → #1C9BC8   M #EC008C → #D81B75   Y #FFF200 → #E9D71A   K #221E17 → #1F1B13
   They exist for ONE object: the control strip — a printer's colour bar, four
   patches at the foot of the sheet. Never as text, never as a background. */
:root{--ink-c:#1C9BC8;--ink-m:#D81B75;--ink-y:var(--acc);--ink-k:#1F1B13}
.strip{display:grid;grid-template-columns:repeat(4,1fr);height:10px}
.strip i{display:block}
.strip .c{background:var(--ink-c)}.strip .m{background:var(--ink-m)}
.strip .y{background:var(--ink-y)}.strip .k{background:var(--ink-k);box-shadow:inset 0 0 0 1px rgba(242,237,225,.22)}
/* the same four inks under the four registration targets */
.art .patch{stroke:none}
.art .patch.k{stroke:rgba(242,237,225,.35);stroke-width:1}
.light .art .patch.k{stroke:none}
.light .lbl .no{background:var(--acc);color:var(--ink);padding:.06em .38em;margin-right:.7em}
.light .inst .no{background:var(--acc);color:var(--ink);padding:.06em .38em}
.light .refs li::before,.light .list li::before{color:var(--ink)}
.light .prose a,.light .cite a{color:var(--ink);
      background:linear-gradient(var(--acc),var(--acc)) 0 100%/100% 3px no-repeat}
.light .prose a:hover,.light .cite a:hover{background-size:100% 100%}
.light .reg{color:var(--ink)}

:root{
  /* space, in five steps — hairline gap, line gap, block gap, band gap, breath */
  --s1:clamp(6px,.7vw,10px);
  --s2:clamp(12px,1.3vw,18px);
  --s3:clamp(20px,2.2vw,32px);
  --s4:clamp(32px,3.8vw,54px);
  --s5:clamp(48px,6vw,86px);
  /* the reading measure: ~72 characters of Plex Serif at --t3 (62ch set 78–84) */
  --measure:58ch;
}

/* ═══ THE SPREAD ════════════════════════════════════════════════════════════
   The single biggest reason the page read as unfinished: every band stacked
   into the left 640px and the right half of a 1360px wrap was empty from top
   to bottom. A finished page uses its width the way a magazine spread does —
   the head on the left, the body on the right, one gutter between them, the
   same on every band so the eye learns it once.

   Twelve columns; the head takes five, the body takes seven. The head is
   sticky, so on a long band (the syndrome ledger, a legal document) the
   heading stays in view while the body scrolls past it — wayfinding without
   a device. Below 1024px the grid stands down and everything stacks, which is
   what it did before and what a phone wants. */
/* 1100, not 1024: measured at 1024 the head column is 371px — headings go to
   two lines and prose falls to 49ch — so an iPad in landscape stacks, and the
   spread begins where it has room. */
@media (min-width:1100px){
  section > .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
      column-gap:var(--s3);row-gap:0;align-items:start}
  section > .wrap > .head{grid-column:1/6;position:sticky;
      top:calc(var(--barh,var(--navh)) + var(--s4));margin-bottom:0}
  section > .wrap > .body{grid-column:7/-1}
  section > .wrap > .head + .body{margin-top:0}
  /* an opener is a monument: the head runs the full width, the body (if any)
     starts where every other body starts — in the right column, beneath it */
  .open > .wrap > .head{grid-column:1/-1;position:static;margin-bottom:var(--s4)}
  /* A WIDE BAND is for objects that need the whole width — two-up, three-up,
     the instrument rows, a reference list. The head becomes its own row: label
     and heading on the left, the lede on the right, sitting exactly over the
     body column so the alignment is shared with every other band. */
  .wide > .wrap > .head{grid-column:1/-1;position:static;display:grid;
      grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s3);
      align-items:start;margin-bottom:var(--s4)}
  .wide > .wrap > .head > .lbl,.wide > .wrap > .head > h1,.wide > .wrap > .head > h2{grid-column:1/6}
  .wide > .wrap > .head > .lbl{grid-row:1}
  .wide > .wrap > .head > h1,.wide > .wrap > .head > h2{grid-row:2}
  .wide > .wrap > .head > .lede{grid-column:7/-1;grid-row:1/3;margin-top:0;align-self:end}
  .wide > .wrap > .head > .art{grid-column:1/6;grid-row:3}   /* a plate under the headline, the lede keeps the body column */
  .wide > .wrap > .head > .art img{max-width:400px}
  .wide > .wrap > .body{grid-column:1/-1}
  /* the head's heading fills its column and lets balance do the breaking */
  section > .wrap > .head h2,section > .wrap > .head h1{max-width:none}
  /* an opener's own prose runs under its own headline — never in the right
     column under a full-width h1, which left a hole on syndrome and about */
  .open > .wrap > .body{grid-column:1/9}
  /* two-up objects in a wide band split on the twelve-column seam, so their
     second column starts exactly where the lede above them starts */
  .wide .grid2,.wide .two{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s3)}
  .wide .grid2 > *,.wide .two > *{grid-column:span 6}
  .wide .ledger--read > div{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .wide .statement{max-width:none}
  .lost > .wrap{display:block}
}
/* stacked, the lede shares one right edge with the prose beneath it */
@media (max-width:1099px){
  /* the prose measure in px, so the lede's right edge is the prose's whatever the lede's size (58ch × .6em) */
  section .head .lede,.lost .lede{max-width:calc(var(--t3) * 34.8)}
}

/* ── the head ─────────────────────────────────────────────────────────────
   label · heading · lede — in that order, always. The number takes the signal
   ink because a section mark is data about the document. */
.hero .meta{text-shadow:0 1px 10px rgba(0,0,0,.55)}   /* the cap over near-white water */
.head{margin-bottom:var(--s4)}
.head .lbl{display:block;margin-bottom:var(--s2)}
/* THE LABEL IS APPARATUS. core's .lbl is Tanklager caps; under a Tanklager
   caps headline that reads as small caps under caps. The section mark is a
   piece of data about the document, so it takes the data voice — the same
   mono the ledger keys, the citations and the captions already use. */
.lbl{font-family:var(--mono);font-size:var(--t2);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.lbl .no{color:var(--acc);margin-right:.6em;font-variant-numeric:tabular-nums}
.head h2{font-size:var(--t6);max-width:24ch}
.head h1{font-size:var(--t6);max-width:24ch;line-height:1.04}
.head .lede{margin-top:var(--s3)}
.light .lbl{color:var(--mid)}
/* two bands on the same ground meet at one gap, not two */
section:not(.light) + section:not(.light),section.light + section.light{padding-top:var(--s3)}

/* the lede carries the section: one step up from reading, still the reading
   face. core.css scopes its own .lede to the hero, and that one keeps winning. */
/* THE STANDFIRST (decided on the typography board, 14 Sep; Jony: "mono looks
   the best — the industrial — it connects the whole system"). The head is
   three objects in two materials: the label (mono, small, dim, caps, tracked —
   apparatus), the headline (Tanklager caps — structure), the standfirst (mono
   at the reading size, full ink, lowercase — the spec line under the object).
   Same material as the label, plainly a different job: size, ink and case
   keep them apart. The serif is for reading only; nothing on top leans. */
.lede{font-family:var(--mono);font-style:normal;font-size:var(--t3);line-height:1.6;
      letter-spacing:.01em;word-spacing:0;text-transform:none;max-width:52ch;color:currentColor}
.hero .lede{font-family:var(--mono);font-style:normal;letter-spacing:.01em;max-width:52ch;color:currentColor}   /* the door's lede takes the same material from outside; its size is core's */
/* ITALIC ONLY AS EMPHASIS INSIDE SERIF PROSE. Nothing on top leans; the mono
   has no italic at all. */
em,i{font-style:normal}
.prose em,.ledger--read dd em,.qa p em,.file p em{font-style:italic}

/* ── prose ────────────────────────────────────────────────────────────────
   The serif is the reading voice, and the ONLY thing that sets long text. */
.prose{font-family:var(--read);font-size:var(--t3);line-height:1.66;
       color:color-mix(in srgb,currentColor 90%,transparent);max-width:var(--measure)}
.prose > * + *{margin-top:var(--s2)}
.prose + .prose,.prose + .list,.list + .prose,.prose + .ledger,.ledger + .prose,
.trio + .prose{margin-top:var(--s3)}
.prose h3{font-size:var(--t4);color:currentColor;margin-top:var(--s4)}
.prose h3:first-child{margin-top:0}
.prose em{color:currentColor}
.prose strong,.prose b{font-weight:400;color:currentColor}

/* LINKS IN TEXT TAKE THE SIGNAL INK: chrome lights, content signals. */
.prose a,.cite a,.list a{color:var(--acc);text-decoration:none;
       background:linear-gradient(var(--acc),var(--acc)) 0 92%/100% 1px no-repeat;
       transition:background-size .18s ease}
.prose a:hover,.cite a:hover,.list a:hover{background-size:100% 2px}
.light .list a{color:var(--ink);background:linear-gradient(var(--acc),var(--acc)) 0 100%/100% 3px no-repeat}
.light .list a:hover{background-size:100% 100%}

/* ── the statement ────────────────────────────────────────────────────────
   One sentence per page that is looked at rather than read: the brand face in
   lowercase, the hero's voice one step quieter. Once. Twice and neither is. */
/* the word gap, everywhere the brand face sets a phrase */
.pill,.file .k,.ledger--read dt,.foot .word,.two h3,.inst .n,.statement{word-spacing:.06em}
.statement{font-family:var(--brand);font-size:var(--t5);line-height:1.16;
       letter-spacing:.006em;word-spacing:.06em;max-width:34ch;margin:var(--s4) 0 0}
@media (max-width:1099px){.statement{max-width:none}}   /* after the base rule: the base wins a tie */

/* ── the list ─────────────────────────────────────────────────────────────
   NOT A TABLE. An enumeration used to be a stack of hairline rows, and five
   of them on a page made every band read as a spreadsheet. A list is lines:
   each one opens with a short rule in the signal ink — a printer's dash — and
   the rhythm comes from space, not from borders. Read face, reading size. */
.list{list-style:none;margin:var(--s3) 0 0;padding:0;max-width:var(--measure)}
.list li{position:relative;padding-left:2.2em;font-family:var(--read);font-size:var(--t3);
      line-height:1.55;color:color-mix(in srgb,currentColor 90%,transparent)}
.list li + li{margin-top:var(--s2)}
.list li::before{content:'';position:absolute;left:0;top:.66em;width:1.2em;height:2px;
      background:var(--acc)}
.light .list li::before{background:var(--ink)}

/* ── the ledger ───────────────────────────────────────────────────────────
   THE ONE RULED PATTERN. Hairlines mean data: a specification, a colophon, a
   definition in a policy. It is a <dl> — term and definition — so it is heard
   as such and copies as such. Two forms: the DATA form, mono, for values that
   are values (millimetres, angles, options); the READING form, term in the
   brand face and the gloss in the serif, for definitions written as
   sentences (the colophon, a policy's terms, a grading key). If the value is
   a sentence, it is the reading form. On phones the term sits over its value. */
.ledger{margin:var(--s3) 0 0;padding:0;border-top:var(--rule)}
.ledger > div{display:grid;grid-template-columns:minmax(0,16ch) minmax(0,1fr);
      gap:var(--s1) var(--s3);align-items:baseline;border-bottom:var(--rule);padding:var(--s2) 0}
.ledger dt{font-family:var(--mono);font-size:var(--t2);letter-spacing:.14em;
      text-transform:uppercase;color:var(--dim);word-spacing:.06em}
.ledger dd{margin:0;font-family:var(--mono);font-size:var(--t3);letter-spacing:.01em;line-height:1.5}
.ledger--read > div{grid-template-columns:minmax(0,12em) minmax(0,1fr);padding:var(--s2) 0}
.ledger--read dt{font-family:var(--brand);font-size:var(--t4);letter-spacing:.006em;
      text-transform:lowercase;line-height:1.1;color:currentColor}
.ledger--read dd{font-family:var(--read);font-size:var(--t3);line-height:1.66;letter-spacing:0;
      max-width:var(--measure);color:color-mix(in srgb,currentColor 90%,transparent)}
.ledger dd b{font-weight:400;color:currentColor}
.light .ledger dt{color:var(--mid)}
.light .ledger--read dt{color:var(--ink)}
@media (max-width:640px){.ledger > div{grid-template-columns:1fr}}

/* ── the study and the question ───────────────────────────────────────────
   A subheading and its paragraph. They used to open with a rule each, so a
   band of five studies drew five hairlines under a heading that had drawn its
   own. Space does it now: the brand face at the second size is enough of a
   threshold, and the citation under it is mono and dim — apparatus. */
.study,.block,.qa{margin-top:var(--s4)}
.study:first-child,.block:first-child,.qa:first-child{margin-top:0}
.study h3,.block h3,.qa h3{font-size:var(--t4);letter-spacing:.006em;text-transform:none;
       font-weight:400;max-width:34ch;line-height:1.15}
.study .prose,.block .prose,.block .list,.qa p{margin-top:var(--s2)}
.qa p{font-family:var(--read);font-size:var(--t3);line-height:1.66;
      max-width:var(--measure);color:color-mix(in srgb,currentColor 90%,transparent)}
.cite{font-family:var(--mono);font-size:var(--t3);line-height:1.6;letter-spacing:.01em;
       color:var(--dim);margin-top:var(--s2);max-width:var(--measure)}
.cite + .prose{margin-top:var(--s3)}   /* apparatus, then the voice again: a block gap */
.light .cite{color:var(--mid)}

/* ── two-up and three-up ──────────────────────────────────────────────────
   For the few moments that want the whole width: the three files a shot
   writes, the four quiet blocks, the two lists on the bottle. No rules, no
   boxes — columns of type with air between them. */
.trio,.grid2,.two{display:grid;gap:var(--s4) var(--s4)}
.trio{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
@media (max-width:1099px){.trio{grid-template-columns:1fr}}
.grid2{grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr))}
.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.trio > *,.grid2 > .study,.grid2 > .block{margin-top:0}
.file .k{display:block;font-family:var(--brand);font-weight:400;font-size:var(--t4);letter-spacing:.006em;
      text-transform:lowercase;line-height:1;margin-bottom:var(--s2)}
.file p{font-family:var(--read);font-size:var(--t3);line-height:1.66;max-width:var(--measure);
      color:color-mix(in srgb,currentColor 90%,transparent)}
.file p b{font-weight:400;color:currentColor}
.two h3{font-size:var(--t4);letter-spacing:.006em;text-transform:none;font-weight:400;line-height:1.15;margin:0 0 var(--s2)}
.two .list{margin-top:0}

/* ── the instrument rows ──────────────────────────────────────────────────
   The door's two links — the one place a whole block is clickable, and the
   one enumeration that keeps its rules, because it is an index. Not a card:
   the name at headline size, a gloss, and the whole row LIGHTS on hover. */
.instruments{border-bottom:var(--rule)}
.inst{display:grid;grid-template-columns:auto auto 1fr;gap:var(--s2) var(--s3);
      align-items:baseline;border-top:var(--rule);padding:var(--s4) 0;
      text-decoration:none;color:inherit;
      transition:color .2s ease,text-shadow .24s ease,padding-left .28s cubic-bezier(.22,.61,.36,1)}
.inst .no{font-family:var(--mono);font-size:var(--t2);letter-spacing:.14em;color:var(--acc)}
.inst .n{font-family:var(--brand);font-size:var(--t6);letter-spacing:.006em;
      text-transform:lowercase;line-height:1;word-spacing:.06em}
.inst .s{grid-column:2/-1;font-family:var(--read);font-size:var(--t3);line-height:1.55;
      max-width:var(--measure);color:color-mix(in srgb,currentColor 82%,transparent)}
.inst .go{font-family:var(--mono);font-weight:500;font-size:var(--t4);color:var(--dim);justify-self:start;align-self:center;
      rotate:90deg;transition:translate .28s cubic-bezier(.22,.61,.36,1),color .2s ease}   /* ↑ turned: the faces have no → */
@media (hover:hover){
  .inst:hover{color:var(--hi);padding-left:var(--s2);
      text-shadow:0 0 1px rgba(250,247,240,.55),0 0 22px rgba(250,247,240,.07)}
  .inst:hover .go{translate:6px 0;color:var(--hi)}
  .light .inst:hover{color:var(--ink);text-shadow:none}
  .light .inst:hover .go{color:var(--ink)}
}
.inst:focus-visible{outline:1px solid currentColor;outline-offset:6px}
@media (max-width:640px){.inst{padding:var(--s3) 0}.inst .go{display:none}.inst .ic{width:52px}}
/* on the spread the rows sit on the same seam as every band: icon and name
   in the head columns, the arrow at the seam, the gloss in the body column
   under the lede. Declared after the base rules because the base wins a tie. */
@media (min-width:1100px){
  .inst{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s3);align-items:start}
  .inst .ic{grid-column:1;grid-row:1;width:min(64px,100%);margin-top:0}
  .inst .n{grid-column:2/6;grid-row:1}
  .inst .go{grid-column:6;grid-row:1;justify-self:end;align-self:start;margin-top:.24em}
  .inst .s{grid-column:7/-1;grid-row:1;margin-top:.26em}
}

/* ── the way in ───────────────────────────────────────────────────────────
   ONE SHORT CHIP (Jony, 11 Sep: "I don't like long chips"). It used to be a
   sentence in a box — "get the beta on testflight" — with a note beside it.
   Now it is the same object as the bar's chip, one word and an arrow, and the
   sentence lives in the lede where sentences live. There is one button idiom
   in this system and this is it, at two sizes. */
.act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin:var(--s4) 0 0}
.pill{font-family:var(--brand);font-size:var(--t4);letter-spacing:.02em;
      text-transform:lowercase;line-height:1;text-decoration:none;
      border:1px solid currentColor;padding:8px 13px;
      transition:color .2s ease,text-shadow .24s ease,background .2s ease}
.pill .ne{display:inline-block;transform:rotate(45deg);margin-left:2px;
      font-family:var(--mono);font-weight:500;font-size:var(--t2)}
@media (hover:hover){
  .pill:hover{color:var(--hi);text-shadow:0 0 1px rgba(250,247,240,.9),0 0 12px rgba(250,247,240,.18)}
  .light .pill:hover{color:var(--paper);background:var(--ink);text-shadow:none}
}
.pill:focus-visible,.nav a.cta:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.prose a:focus-visible,.list a:focus-visible,.cite a:focus-visible,.refs a:focus-visible,.lede a:focus-visible{outline:1px solid currentColor;outline-offset:3px}
.act + .prose{margin-top:var(--s3)}

/* ── the art slot ─────────────────────────────────────────────────────────
   Where dissector's own drawings will live. The instrument produces real
   vector — one black line, closed contours — and a page about a drawing tool
   should carry drawings made by it. Until they exist, the slot holds the one
   figure the site is already allowed: the apparatus's own registration mark.
   It sits in the head column under the lede, so a drawing reads as part of
   the section's statement, not as decoration beside its body. */
.art{margin:var(--s4) 0 0;display:block}
.art svg{display:block;width:100%;height:auto;max-width:520px;color:currentColor}
.art figcaption{font-family:var(--mono);font-size:var(--t3);letter-spacing:.01em;line-height:1.6;
      text-transform:none;color:var(--dim);margin-top:var(--s2);max-width:var(--measure)}   /* the cite's voice, not the label's */
.light .art figcaption{color:var(--mid)}
.art text{font-family:var(--mono);font-size:var(--t2);letter-spacing:.06em;fill:currentColor}
.art text.num{fill:var(--dim)}
.light .art text.num{fill:var(--mid)}
.art .sig line{stroke:var(--acc);stroke-width:2}
.light .art .sig line{stroke:var(--ink)}
.art .sig text{fill:currentColor}
.art--ladder svg{max-width:640px}
/* ── the plates ────────────────────────────────────────────────────────────
   A drawing the app wrote, shown as the app's own proof: a cream sheet with
   the plate on it. On the dark ground the sheet is its own edge; on the cream
   band it gets the hairline a sheet has on a table. The strip is seven of
   them side by side — a row on the spread, a scroll-snap strip below it, and
   never a thing that moves by itself. */
.art--plate picture,.art--plate img{display:block;width:100%;height:auto}
.art--plate img{max-width:520px}
.open .art--plate img{max-width:460px}   /* the head lane's width */
.light .art--plate img,.light .plates img{box-shadow:0 0 0 1px rgba(31,27,19,.14)}
.art--plate figcaption a,.art--ink figcaption a,.art--zoom figcaption a{color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 92%/100% 1px no-repeat}
/* the ink alone: the same plate with its sheet taken away (ink.mjs), so the
   drawing sits on the page's own ground — cream on the dark, black on the
   band. No edge, no shadow: there is no sheet to have one. */
.art--ink picture,.art--ink img{display:block;width:100%;height:auto}
.art--ink img{max-width:520px}
.open .art--ink img{max-width:460px}   /* the head lane's width */
/* the zoom: the plate small, a square marked on it, and that square from the
   same file at eight times the size — curves where pixels would be */
.art--zoom .whole{position:relative;display:block;width:100%;max-width:200px}
.art--zoom .whole img{display:block;width:100%;height:auto}
.art--zoom .whole i{position:absolute;box-sizing:border-box;border:1px solid var(--acc)}
.light .art--zoom .whole i{border:1.5px solid var(--ink)}
.art--zoom .detail{display:block;width:100%;max-width:520px;height:auto;margin-top:var(--s2)}
.light .art--zoom .detail{box-shadow:0 0 0 1px rgba(31,27,19,.14)}
.plates{display:flex;gap:var(--s3);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
      padding-bottom:var(--s2);scrollbar-width:none}
.plates::-webkit-scrollbar{display:none}
@media (max-width:1099px){.plates{margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);scroll-padding-inline:var(--gut)}}
.plates figure{flex:0 0 min(62vw,300px);margin:0;scroll-snap-align:start}
.plates img{display:block;width:100%;height:auto}
.plates figcaption{font-family:var(--mono);font-size:var(--t2);letter-spacing:.06em;color:var(--dim);margin-top:var(--s1)}
/* a screen: the app's own screenshot inside the phone, drawn to iPhone Air's own
   geometry by _build/phones.py (the display's continuous corner, the island where
   iOS puts it, the glass border, the rim) and baked into the picture, so the pages
   and the store show one object at one precision. No edge is added here: the rim is
   the edge. */
.art--screen picture,.art--screen img{display:block;width:100%;height:auto}
.art--screen img{max-width:300px}
.art--screen figcaption{max-width:300px}
.block .art{margin-top:var(--s3)}
.block .art img{max-width:300px}   /* a plate beside a screen keeps the screen's width */
.block .art figcaption{max-width:300px}
.block .art--ink img,.block .art--ink figcaption{max-width:none}   /* after the two above: same weight */
.art--screen .phone{display:block;width:100%;max-width:300px}
.art--screen .phone img{max-width:none}
@media (min-width:1100px){
  .plates{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--s2);overflow:visible;padding-bottom:0}
  .plates figure{flex:none}
}
/* the 520-unit viewBox is drawn into a ~350px column on a phone; the labels
   are sized in user units, so they are scaled up here to paint at --t2 */
@media (max-width:1099px){.art--ladder text{font-size:calc(var(--t3) * .8125)}}   /* a 640px figure: 520 units → t3 */
@media (max-width:600px){.art--ladder text{font-size:calc(var(--t3) * 1.1)}}
@media (max-width:480px){.art--ladder text{font-size:calc(var(--t3) * 1.35)}.art--ladder text.num{display:none}}
.body > .art{margin:0 0 var(--s3)}
.reg{width:clamp(44px,5vw,64px);height:auto;color:var(--acc);opacity:.85;display:block}
.angles{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s3);align-items:flex-start}
.angles div{font-family:var(--mono);font-size:var(--t2);letter-spacing:.16em;color:var(--dim)}
.angles b{display:block;font-weight:400;font-size:var(--t4);letter-spacing:.02em;
      color:currentColor;margin-bottom:4px}
.light .angles div{color:var(--mid)}

/* ── documents ────────────────────────────────────────────────────────────
   privacy, terms, support. The head stays on the left while the document
   scrolls on the right — a contract with a margin. h2 comes down to --t5
   because a policy has thirty of them and a headline thirty times is a shout. */
.doc h2{font-size:var(--t5);letter-spacing:.014em;margin-top:var(--s5);max-width:none}
.doc .stamp + h2{margin-top:0}
.doc h3{font-family:var(--brand);font-size:var(--t4);letter-spacing:.006em;
      text-transform:none;margin-top:var(--s4)}
.doc .prose,.doc .ledger,.doc .list{margin-top:var(--s3)}
.doc .stamp{font-family:var(--mono);font-size:var(--t2);letter-spacing:.14em;text-transform:uppercase;
      color:var(--dim);margin:0 0 var(--s4)}   /* the label's dress: a date is data about the document */

/* ── the footer ───────────────────────────────────────────────────────────
   Outside <main>, outside the engine's snapshot. It is the colophon. */
.foot{padding:var(--s5) var(--gut) calc(var(--s5) + env(safe-area-inset-bottom));border-top:var(--rule)}
.foot .wrap{display:grid;gap:var(--s3);grid-template-columns:minmax(0,1fr) minmax(0,auto);align-items:start}
.foot .word{font-family:var(--brand);font-size:var(--t4);letter-spacing:.006em;
      text-transform:lowercase;line-height:1;text-decoration:none}
.foot .line{font-family:var(--read);font-size:var(--t3);line-height:1.55;margin-top:var(--s2);
      max-width:38ch;color:color-mix(in srgb,var(--cream) 72%,transparent)}
.foot nav{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);justify-content:flex-end}
.foot nav a,.foot nav span{font-family:var(--mono);font-size:var(--t3);letter-spacing:.03em;color:var(--dim)}
.foot nav span{color:var(--cream)}
.legal{font-family:var(--mono);font-size:var(--t3);letter-spacing:.03em;color:var(--dim)}
.foot a{text-decoration:none;transition:color .18s ease,text-shadow .22s ease}
@media (hover:hover){.foot a:hover{color:var(--hi);text-shadow:0 0 1px rgba(250,247,240,.85),0 0 12px rgba(250,247,240,.16)}}
.foot a:focus-visible{outline:1px solid currentColor;outline-offset:3px}
.foot .legal{grid-column:1/-1;border-top:var(--rule);padding-top:var(--s3);
      display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4)}
.foot .legal p{margin:0}
.foot .legal p:last-child{flex-basis:100%;margin-top:var(--s1)}
/* a document's name never breaks inside itself; a row breaks only between names */
.foot .legal a,.foot .legal span,.foot .legal b{white-space:nowrap}
.foot .legal b{font-weight:400;font-size:var(--t2);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-right:.8em}
.foot .legal .here{color:var(--cream)}   /* you are here — the only cream in the rows */
@media (max-width:720px){
  .foot .wrap{grid-template-columns:1fr}
  .foot nav{display:grid;grid-template-columns:repeat(2,max-content);column-gap:var(--s4);row-gap:var(--s1);justify-content:start}
  .foot .legal b{display:block;margin:0 0 2px}
}
/* the footer is the last band and sits on the spread like every band above:
   the word and the line in the head columns, the pages and the documents in
   the body column. Declared after the base rules because the base wins a tie. */
@media (min-width:1100px){
  .foot .wrap{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s3);row-gap:var(--s3)}
  .foot .wrap > div:first-child{grid-column:1/6}
  .foot nav{grid-column:7/-1;justify-content:flex-start;align-self:end}   /* level with the tagline, just above the rule */
  .foot .legal{grid-column:7/-1}
  /* the references: numbers hang in the seam, text and rules share the column's edges */
  .refs{max-width:var(--measure)}
  .refs li{padding-left:0}
  .refs li::before{left:calc(-1 * var(--s3))}
  /* an opener's reading ledger ends where its longest gloss can */
  .open > .wrap > .body .ledger--read{max-width:calc(12em + var(--s3) + var(--measure))}
}
/* between the phone and the spread the footer is one left stack */
@media (max-width:1099px){.foot .wrap{grid-template-columns:1fr}.foot nav{justify-content:flex-start}}

/* a thumb needs 44px; the type does not change, the hit box does */
@media (max-width:720px) and (hover:none){
  .nav .pages a{padding:12.5px 0;margin:-12.5px 0}
  .nav a.cta,.pill{position:relative}
  .nav a.cta::after,.pill::after{content:'';position:absolute;inset:-5px 0}   /* 45px hit box, the box unchanged */
  .foot nav a,.foot .legal a{display:inline-block;padding:.55em 0;margin:-.55em 0}
  .prose a,.list a,.cite a{padding:.35em 0}
  .nav a.lit:focus-visible{outline-offset:-8px}                                /* the ring sits off the word, not off the hit box */
  .foot nav a:focus-visible,.foot .legal a:focus-visible{outline-offset:-6px}
}

/* ── the not-found ──────────────────────────────────────────────────────── */
.lost{min-height:100svh;display:grid;align-content:center;
      padding:calc(var(--barh,var(--navh)) + var(--s5)) var(--gut) var(--s5)}
.lost > .wrap{width:100%;margin-inline:0}
.lost .lbl{display:block;margin-bottom:var(--s2)}
.lost h1{font-size:var(--t7);line-height:.96;letter-spacing:.004em;max-width:16ch}
.lost .lede{margin-top:var(--s4);max-width:46ch}
.lost .act{margin-top:var(--s4)}
/* THE RIM — the door ends the way the window does. A 3px filament of the
   wordmark's own diamond dust along the foot of the page, turning up round both
   corners at the window's radius, so the page sits in the browser as one pane.
   The engine draws it as a real mark (the script on the door); this is the
   14px box it lives in, and the quiet hairline that stands in where there is
   no WebGL. The four inks keep the control strip on the link card and under
   the registration targets. */
body > .rim{width:100%;height:12px;border-radius:0 0 12px 12px;position:relative;
      box-shadow:inset 0 -1px 0 rgba(253,242,226,.22)}
body > .rim.lit{box-shadow:none}

/* ── the references ───────────────────────────────────────────────────────
   A ledger of papers: rules mean data, and these are data. */
.refs{margin:var(--s3) 0 0;padding:0;counter-reset:ref;list-style:none;border-top:var(--rule);max-width:calc(var(--measure) + 3.4ch)}
.refs li{counter-increment:ref;border-bottom:var(--rule);padding:var(--s2) 0 var(--s2) 3.4ch;
      position:relative;font-family:var(--mono);font-size:var(--t3);line-height:1.65;
      color:var(--dim);letter-spacing:.01em}
.light .refs li{color:var(--mid)}
.refs + .prose{margin-top:var(--s3)}
.refs li::before{content:counter(ref);position:absolute;left:0;top:var(--s2);
      color:var(--acc);font-variant-numeric:tabular-nums}

/* ── the opener ───────────────────────────────────────────────────────────
   An interior page has no plate and no glass; that lives on the door, once.
   What opens dissector, love&truth and syndrome is the seventh size. */
main > section.open:first-child{
      padding-top:calc(var(--barh,var(--navh)) + clamp(40px,12vh,140px));
      padding-bottom:clamp(32px,6vh,80px)}
.open .head:not(:last-child){margin-bottom:var(--s4)}
.open .head:last-child{margin-bottom:0}
.open .head h1{font-size:var(--t7);max-width:16ch;line-height:.96;letter-spacing:.004em}
.open .head .lede{margin-top:var(--s4);max-width:46ch}
/* one same-ground seam everywhere: s4 below + s3 above; the last band meets the footer as the footer meets it */
section:not(.hero):not(.light):has(+ section:not(.light)),section.light:has(+ section.light){padding-bottom:var(--s4)}
main > section:last-child{padding-bottom:var(--s5)}
.open .art{margin-top:var(--s3)}
.open .art svg{max-width:640px}

/* ── the app icons ────────────────────────────────────────────────────────
   The shipping icons, exactly as iOS 26 draws them: the Icon Composer
   bundles in the app repos rendered by Apple's own engine (ictool, Liquid
   Glass, dark appearance) — never redrawn here, never recoloured, and only
   ever on the dark ground they were rendered for. _build/icons.sh makes
   them. The squircle and the glass rim are baked into the alpha, so the
   image gets no radius, no border and no shadow of its own. */
.ic{display:block;flex:none;width:64px}
.ic img{display:block;width:100%;height:auto}
.inst .ic{grid-row:1/3;align-self:start;margin-top:-.06em}
.open .head .ic{width:96px;margin-bottom:var(--s3)}
@media (max-width:640px){.open .head .ic{width:72px;margin-bottom:var(--s2)}}
@media (hover:hover){.inst:hover .ic{filter:drop-shadow(0 0 14px rgba(250,247,240,.10))}}


/* ═══ PRINT ═════════════════════════════════════════════════════════════════
   A site about a printing tool prints. The bar, the skip link, the plate, the
   glass canvas and the control strip are screen things and go; the page goes
   to ink on paper; the sticky spread stands down so a policy comes out as one
   column somebody can staple. Links print their address after them, once. */
@media print{
  .nav,.skip,.strip,video,canvas,.foot nav,.hero::after{display:none !important}
  html{color-scheme:light}
  body{background:#fff;color:#000}
  section,section.light{background:none;color:#000;padding:0 0 12mm}
  section > .wrap{display:block}
  section > .wrap > .head{position:static}
  .hero{min-height:0;padding-top:0}
  .prose,.lede,.list li,.qa p,.cite,.ledger .v,.refs li,.file p,.foot .line{color:#000}
  .lbl,.ledger .k,.cite,.refs li,.legal{color:#444}
  .lbl .no{background:none;color:#000;padding:0}
  .prose a,.list a{color:#000;background:none;text-decoration:underline}
  .prose a[href^="http"]::after{content:" (" attr(href) ")";font-family:var(--mono);font-size:var(--t2)}
  .art svg,.reg{color:#000}
  .foot{border-top:1px solid #000}
  @page{margin:18mm}
}