/* Fonts: Piazzolla and Ysabeau, self-hosted from Google Fonts; OFL licenses are adjacent. */
/* AI Studio HQ — identity tokens v0.3 (adopted 2026-11-06)
 *
 * Type T1 (Piazzolla + Ysabeau) and palette S1 (Process proof), as chosen in
 * explorations/01-type-colour/ and recorded in docs/01-design-constitution.md §4.1 and §6.1.
 * Values are copied from the measured specimen (explorations/01-type-colour/after.html,
 * ?type=t1&pal=s1); the constitution is the law if the two ever differ.
 *
 * Public production inclusion: self-hosted OFL WOFF2 subsets, with the original token values unchanged.
 */

:root {
  /* Rhythm: one interval, a perfect fourth (4:3), from 18px. */
  --u: 13.5px;                      /* baseline unit; all vertical spacing is a multiple */
  --s-1: 13.5px;  --s0: 18px;  --s1: 24px;  --s2: 32px;  --s3: 42.667px;
  --s4: 56.889px; --s5: 75.852px; --s6: 101.136px; --s7: 134.848px;
  --beat: 135ms;                    /* motion durations are multiples of the beat */

  /* Type: harmony and counterpoint. */
  --serif: 'Piazzolla', Georgia, serif;        /* text and display voice; opsz follows size */
  --sans: 'Ysabeau', system-ui, sans-serif;    /* counter-voice: notation, labels, captions, navigation */
  --sans-adjust: ex-height 0.49;               /* Ysabeau x-height 0.42 em → matched to Piazzolla's 0.49 */
  --w-display: 420;                            /* Piazzolla display weight */
  --w-label: 560;                              /* Ysabeau label weight */
  font-synthesis: none;                        /* never fake italics, bold or small caps */
  font-optical-sizing: auto;

  /* Colour: H = voice · C = evidence · L = hierarchy. Light inks mark; dark levels carry text. */
  --paper:   #FFFFFF;
  --ink:     #111B39;   /* text, studio voice      16.94:1 */
  --ink-2:   #444F6C;   /* secondary text           8.14:1 */
  --an:      #0093E6;   /* analysis voice: marks, fields (mark 3.32:1) */
  --an-text: #005B8B;   /* analysis voice: text, links      7.32:1 */
  --bu:      #FD3972;   /* building voice: marks, fields (mark 3.50:1) */
  --bu-text: #BA022F;   /* building voice: text             6.69:1 */
  --hu:      #FCD726;   /* human decision: highlighter fill only, never text */
  --unk:     #898C94;   /* unknown: unprinted, hollow marks (mark 3.36:1) */
  --link:    var(--an-text);

  /* Fields and the text that sits on them. Fields overprint with mix-blend-mode: multiply. */
  --an-field: var(--an);
  --bu-field: var(--bu);
  --on-an: var(--ink);
  --on-bu: var(--ink);
  --on-ov: #FFFFFF;     /* on an overprinted field */

  /* Emergent overprints (multiply), for reference and for fallbacks where blending is unavailable. */
  --ov-an-bu: #002167;  /* deep blue   */
  --ov-an-hu: #007C22;  /* green       */
  --ov-bu-hu: #FA3011;  /* vermilion   */
}

/* Wherever the counter-voice sets text, match its x-height to the text face. */
:where(.sans, [data-voice="counter"]) {
  font-family: var(--sans);
  font-size-adjust: var(--sans-adjust);
}

@font-face {
  font-family: 'Piazzolla';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/piazzolla-italic-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Piazzolla';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/piazzolla-italic-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Piazzolla';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/piazzolla-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Piazzolla';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/piazzolla-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Piazzolla';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/piazzolla-roman-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Piazzolla';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/piazzolla-roman-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Piazzolla';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/piazzolla-roman-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Piazzolla';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/piazzolla-roman-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ysabeau';
  font-style: italic;
  font-weight: 1 1000;
  font-display: swap;
  src: url("./fonts/ysabeau-italic-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Ysabeau';
  font-style: italic;
  font-weight: 1 1000;
  font-display: swap;
  src: url("./fonts/ysabeau-italic-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Ysabeau';
  font-style: italic;
  font-weight: 1 1000;
  font-display: swap;
  src: url("./fonts/ysabeau-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ysabeau';
  font-style: italic;
  font-weight: 1 1000;
  font-display: swap;
  src: url("./fonts/ysabeau-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ysabeau';
  font-style: normal;
  font-weight: 1 1000;
  font-display: swap;
  src: url("./fonts/ysabeau-roman-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Ysabeau';
  font-style: normal;
  font-weight: 1 1000;
  font-display: swap;
  src: url("./fonts/ysabeau-roman-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Ysabeau';
  font-style: normal;
  font-weight: 1 1000;
  font-display: swap;
  src: url("./fonts/ysabeau-roman-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ysabeau';
  font-style: normal;
  font-weight: 1 1000;
  font-display: swap;
  src: url("./fonts/ysabeau-roman-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Round 05 (the approved Round 04 with Work 01 before the close; see NOTES.md). Round 04: Round 03 refined.
   Tokens come from ../tokens/identity-v0.3.css (constitution v0.3 §4.1, §6.1).
   Rhythm: everything is a multiple of --u (13.5px); sizes are steps of one 4:3 scale; motion is in beats.
   The hand (constitution v0.4 §6.2, adopted 2026-11-06): azure, rose and ink are ruled; yellow, a person, is laid by hand. Its edges are generated
   (seeded, so the same page draws the same hand) and drift a few pixels off register. */
:root { --gut: calc(var(--u) * 4); --sec: calc(var(--u) * 8); --bleed: calc(var(--u) * 4);
  /* hatching, the hypothesis and research grade: a tiled 45° rule in one ink (not a gradient) */
  --hatch-an: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-2 2L2-2M0 8L8 0M6 10l4-4' stroke='%230093E6' stroke-width='2.4'/%3E%3C/svg%3E");
  --hatch-bu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-2 2L2-2M0 8L8 0M6 10l4-4' stroke='%23FD3972' stroke-width='2.4'/%3E%3C/svg%3E");
  --hatch-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-2 2L2-2M0 8L8 0M6 10l4-4' stroke='%23111B39' stroke-width='2.4'/%3E%3C/svg%3E"); }
@media (max-width: 1099px) { :root { --gut: calc(var(--u) * 3); --sec: calc(var(--u) * 6); --bleed: var(--u); } }
@media (max-width: 599px)  { :root { --gut: calc(var(--u) * 1.5); --sec: calc(var(--u) * 5); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: var(--s0);
  line-height: calc(var(--u) * 2); font-variant-numeric: oldstyle-nums proportional-nums; font-kerning: normal; }
p, h1, h2, h3, ul, ol, dl, dd, figure { margin: 0; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--an-text); outline-offset: 3px; }
.wrap { max-width: 1440px; margin: 0 auto; padding-inline: var(--gut); }
.lab { font-family: var(--sans); font-size-adjust: var(--sans-adjust); font-size: var(--s-1); line-height: var(--s0); font-weight: var(--w-label); }
.skip { position: absolute; left: -999px; } .skip:focus { left: var(--gut); top: var(--u); background: var(--paper); padding: 4px 8px; z-index: 9; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hp-an { fill: var(--an); } .hp-bu { fill: var(--bu); } .hp-ink { fill: var(--ink); }

/* Type: one scale. Display in Piazzolla (optical size follows size); counter-voice in Ysabeau, x-height matched. */
h1 { font-size: var(--s6); line-height: calc(var(--u) * 8); font-weight: var(--w-display); }
h2 { font-size: var(--s4); line-height: calc(var(--u) * 4.5); font-weight: var(--w-display); max-width: 15em; }
h3 { font-size: var(--s1); line-height: calc(var(--u) * 2); font-weight: 560; }
.tx { max-width: 30em; }
@media (max-width: 1099px) { h1 { font-size: var(--s5); line-height: calc(var(--u) * 6); } h2 { font-size: var(--s3); line-height: calc(var(--u) * 3.5); } }
@media (max-width: 599px) {
  h1 { font-size: var(--s4); line-height: calc(var(--u) * 4.5); }
  h2 { font-size: var(--s2); line-height: calc(var(--u) * 2.75); }
  /* Phone measure (proposed amendment, see NOTES.md): body never below 18px, so the line runs 38–52 characters; hyphenate to keep the rag even. */
  .tx, .lede, .body2, .col p, .trace dd, .stages p, .fin p, .why { hyphens: auto; -webkit-hyphens: auto; }
}

/* Evidence grades are set in the type (Art. 2): supported roman, hypothesis italic, unknown unprinted, unsupported struck. */
.claim[data-grade="hypothesis"], .gq[data-grade="hypothesis"] { font-style: italic; }
.claim[data-grade="unknown"], .gq[data-grade="unknown"], .claim-u { color: var(--ink-2); text-decoration: underline dotted 1.5px; text-decoration-color: var(--unk); text-underline-offset: .22em; }

/* Masthead: the control strip is the invariant mark. */
.mast { display: flex; align-items: center; gap: calc(var(--u) * 2); padding-block: calc(var(--u) * 1.5); }
.brand { display: inline-flex; align-items: center; gap: var(--u); color: var(--ink); text-decoration: none; font-weight: 560; font-size: var(--s0); white-space: nowrap; }
.strip { width: 27px; height: 27px; flex: none; }
.strip .s-an { fill: var(--an); } .strip .s-bu { fill: var(--bu); mix-blend-mode: multiply; } .strip .s-hu { fill: var(--hu); mix-blend-mode: multiply; }
.mast nav { display: flex; gap: calc(var(--u) * 1.5); margin-left: auto; }
.mast nav a { font-family: var(--sans); font-size-adjust: var(--sans-adjust); font-size: var(--s-1); font-weight: var(--w-label); color: var(--ink); text-decoration: none; }
.mast nav a:hover { text-decoration: underline; }
.show-s { display: none; }
@media (max-width: 899px) { .mast .hide-s { display: none; } .mast .show-s { display: inline; } }   /* the full label overran the masthead at 768 */
@media (max-width: 599px) {
  .mast { flex-wrap: wrap; row-gap: var(--u); }
  .mast nav { order: 3; width: 100%; margin-left: 0; justify-content: space-between; }
  .mast .cta { margin-left: auto; } .hide-s { display: none; } .show-s { display: inline; }
}

/* Calls to action. The highlighter is the human voice: the visitor's decision. */
.cta { position: relative; isolation: isolate; display: inline-block; color: var(--ink); text-decoration: none; white-space: nowrap;
  font-family: var(--sans); font-size-adjust: var(--sans-adjust); font-size: var(--s0); line-height: calc(var(--u) * 2); font-weight: var(--w-label);
  padding: calc(var(--u) * .75) calc(var(--u) * 1.25); }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hu); clip-path: polygon(0 7%, 100% 0, 99% 93%, 1% 100%); }
.cta:hover::before { clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 94%); }
.mast .cta { font-size: var(--s-1); line-height: var(--s0); padding: calc(var(--u) * .5) var(--u); }
.more { font-family: var(--sans); font-size-adjust: var(--sans-adjust); font-size: var(--s0); font-weight: var(--w-label); color: var(--an-text); }

/* Hero: the statement left, the proof of method right, the mechanism below at full width.
   Round 04: the press sits closer, opens on a person's decision, and on phones comes before the second paragraph,
   so the system is in the first screen at every width. */
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: calc(var(--u) * 4); align-items: end; padding-top: calc(var(--u) * 3); }
.lede { font-size: var(--s2); line-height: calc(var(--u) * 3); margin-top: calc(var(--u) * 2); max-width: 24em; }
.body2 { color: var(--ink-2); max-width: 30em; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u) calc(var(--u) * 2); margin-top: calc(var(--u) * 2); }
h2 + * { margin-top: calc(var(--u) * 2); }
@media (max-width: 1099px) { .hero { grid-template-columns: minmax(0, 1fr); } .h-b { margin-top: calc(var(--u) * 2); } }
@media (max-width: 599px) {
  .lede { font-size: var(--s1); line-height: calc(var(--u) * 2.5); } .hero { padding-top: var(--u); }
  /* phones: headline, promise and the two ways in, then the mechanism, then the paragraph it demonstrates */
  .h-b { display: contents; } .acts { order: 1; } .press { order: 2; } .body2 { order: 3; margin-top: calc(var(--u) * 3); }
}

/* ── The press: B's interlocking, redrawn as a printed route ─────────────────────
   The route is the mark stretched out: azure analysis, rose building, and where they run together the inks
   overprint. Read left to right: a request, three conditions, an outcome. Each gate is a short ink bar that lies
   along the route when its condition holds and sets across it when it does not; the route then turns into a
   siding printed by the voice that raised it and the person who takes over. On phones the same grid transposes
   (column ↔ row), so the route runs down the page instead of shrinking. */
.press { grid-column: 1 / -1; margin-top: calc(var(--u) * 3); --bw: 32px; --ov: 10px; --lt: calc(var(--bw) * 2 - var(--ov)); --g: calc(var(--u) * 2); --gl: calc(var(--lt) + 16px); --sl: calc(var(--u) * 3); --lw: 6.75rem; }
@media (max-width: 599px) { .press { --bw: 22px; --ov: 7px; --sl: calc(var(--u) * 1.5); margin-top: calc(var(--u) * 3); } }
.phead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u) calc(var(--u) * 2); margin-bottom: calc(var(--u) * 2); }
.ptl { font-family: var(--sans); font-size-adjust: var(--sans-adjust); font-size: var(--s0); line-height: calc(var(--u) * 1.5); font-weight: 640; }
.ptl .pdm { font-weight: 400; color: var(--ink-2); }
.rq { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rql { color: var(--ink-2); margin-right: 4px; }
.rq button { font-family: var(--sans); font-size-adjust: var(--sans-adjust); font-size: var(--s-1); line-height: var(--s0); font-weight: var(--w-label);
  padding: 5px 10px; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; }
.rq button[aria-checked="true"] { background: var(--ink); color: var(--paper); }
@media (max-width: 599px) { .rql { flex-basis: 100%; } .rq button { flex: 1 1 40%; text-align: left; } }

.pgrid { display: grid; isolation: isolate; grid-template-columns: minmax(0, .9fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr); grid-template-rows: auto var(--lt) var(--sl) auto; }
.cell { position: relative; grid-column: var(--i); grid-row: var(--r); }
.c-lv { --r: 1; padding: 0 var(--u) var(--u) calc(var(--g) - var(--bw) + var(--ov) / 2); }
.c-ln { --r: 2; } .c-sd { --r: 3; } .c-tm { --r: 4; display: flex; }
.c-src { padding-left: 0; }
@media (min-width: 600px) { .c-al { padding-left: calc(var(--u) * 1.5); } }
.c-out { grid-column: 5; grid-row: 2 / 5; display: flex; margin-right: calc(-1 * var(--gut)); }
.rqname { font-size: var(--s1); line-height: calc(var(--u) * 2); }
.rqname.struck { color: var(--ink-2); text-decoration: line-through 3px var(--ink); }
.lever { display: block; text-align: left; background: none; border: 0; padding: 2px 0; color: var(--ink); cursor: pointer; font: inherit; }
.lever .lt { display: block; font-family: var(--sans); font-size-adjust: var(--sans-adjust); font-size: var(--s0); line-height: calc(var(--u) * 1.5); font-weight: var(--w-label); }
.lever .lv { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-family: var(--sans); font-size-adjust: var(--sans-adjust); font-size: var(--s-1); line-height: var(--s0); color: var(--ink-2); }
.knob { position: relative; width: 30px; height: 15px; border: 1.5px solid var(--ink); flex: none; }
.knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 9px; height: 8px; border: 1.5px solid var(--ink); background: var(--paper); transition: left var(--beat) cubic-bezier(.5, 0, .2, 1.4); }
.lever[aria-checked="true"] .knob::after { left: 16px; border-color: transparent; background: var(--an); }
.lever[data-v="bu"][aria-checked="true"] .knob::after { background: var(--bu); }
.lever[aria-checked="true"] .yn { color: var(--ink); }
.c-lv .lab { color: var(--ink-2); padding-top: 4px; }

/* unprinted track: a dashed centre line, so every possible route stays legible */
.sk { position: absolute; left: 0; right: 0; top: calc(50% - .75px); border-top: 1.5px dashed var(--unk); }
.c-src .sk { left: calc(-1 * var(--gut)); }
.ssk { position: absolute; left: calc(var(--g) - .75px); top: calc(var(--lt) / -2); bottom: 0; border-left: 1.5px dashed var(--unk); }
/* printed route: one band per voice, multiplied where they run together */
.b { position: absolute; top: var(--x0); height: var(--bw); left: var(--a0, 0px); right: var(--a1, 0px);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform calc(var(--beat) * 2) cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); }
.b.an { --x0: 0px; background: var(--an); }
.b.bu { --x0: calc(var(--bw) - var(--ov)); background: var(--bu); mix-blend-mode: multiply; }
.b.in { --a1: calc(100% - var(--g)); } .b.out { --a0: var(--g); } .c-src .b { --a0: calc(-1 * var(--gut)); }
.s { position: absolute; top: calc(var(--lt) / -2); bottom: 0; width: var(--bw);
  transform: scaleY(0); transform-origin: 50% 0; transition: transform calc(var(--beat) * 2) cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); }
.s.v { left: calc(var(--g) - var(--bw) + var(--ov) / 2); } .s.v.an { background: var(--an); } .s.v.bu { background: var(--bu); mix-blend-mode: multiply; }
.s.h { left: calc(var(--g) - var(--ov) / 2); background: var(--hu); mix-blend-mode: multiply; }
.s.x { left: calc(var(--g) - 1.5px); width: 3px; background: var(--ink); }
.b.on, .s.on { transform: none; }
/* the gate sets: along the route when its condition holds, across it when it does not */
.gate { position: absolute; z-index: 2; left: calc(var(--g) - var(--gl) / 2); top: calc(50% - 3px); width: var(--gl); height: 6px;
  background: var(--ink); box-shadow: 0 0 0 2px var(--paper); transition: transform var(--beat) cubic-bezier(.5, 0, .2, 1.4); }
.gate.shut { transform: rotate(90deg); }

/* outcomes: unreached ones stay unprinted; the reached one prints in the inks that reached it */
.term { position: relative; isolation: isolate; flex: 1; min-height: calc(var(--u) * 4); display: flex; flex-direction: column; justify-content: center;
  margin: 0 var(--u) 0 calc(var(--g) - var(--bw) + var(--ov) / 2); padding: calc(var(--u) * .5) var(--u); border-top: 1.5px dashed var(--unk); color: var(--ink-2);
  transition: color calc(var(--beat) * 2) linear var(--d, 0ms); }
.term .tt { font-size: var(--s1); line-height: calc(var(--u) * 2); font-weight: var(--w-display); }
.term .ly { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity calc(var(--beat) * 2) linear var(--d, 0ms); }
.term .ly + .ly { mix-blend-mode: multiply; }
.term.on { border-color: transparent; }
.term.on .ly { opacity: 1; }
.t-act .ly:first-child, .t-dec .ly:first-child { background: var(--an); }
.t-app .ly:first-child, .t-act .ly + .ly { background: var(--bu); }
.t-dec .ly + .ly, .t-app .ly + .ly { background: var(--hu); }
.t-act.on, .t-dec.on { color: var(--on-ov); }
.t-app.on, .t-rej.on { color: var(--ink); }
.t-rej.on { border: 2px solid var(--ink); }
.c-out .term { margin: 0; border-top: 0; border-left: 1.5px dashed var(--unk); justify-content: flex-start; padding: calc(var(--u) * .25) var(--gut) var(--u) calc(var(--u) * 1.5); }
.c-out .term.on { border-color: transparent; }
.t-act .tt { font-size: var(--s2); line-height: calc(var(--u) * 2.5); }
.t-act .tn { margin-top: auto; padding-top: var(--u); font-family: var(--sans); font-size-adjust: var(--sans-adjust); font-size: var(--s-1); line-height: var(--s0); font-weight: var(--w-label); }

/* phones: the same grid, transposed */
@media (max-width: 599px) {
  .pgrid { grid-template-columns: var(--lw) var(--lt) var(--sl) minmax(0, 1fr); grid-template-rows: none; }
  .cell { grid-row: var(--i); grid-column: var(--r); }
  .c-lv { padding: 0 var(--u) calc(var(--u) * 1.5) 0; }
  .c-out { grid-row: 5; grid-column: 2 / 5; }
  .rqname { font-size: var(--s0); line-height: calc(var(--u) * 1.5); }
  .sk { left: calc(50% - .75px); right: auto; top: 0; bottom: 0; border-top: 0; border-left: 1.5px dashed var(--unk); }
  .c-src .sk { left: calc(50% - .75px); top: calc(-1 * var(--u)); }
  .ssk { left: calc(var(--lt) / -2); right: 0; top: calc(var(--g) - .75px); bottom: auto; border-left: 0; border-top: 1.5px dashed var(--unk); }
  .b { left: var(--x0); width: var(--bw); right: auto; top: var(--a0, 0px); bottom: var(--a1, 0px); height: auto; transform: scaleY(0); transform-origin: 50% 0; }
  .c-src .b { --a0: calc(-1 * var(--u)); }
  .s { left: calc(var(--lt) / -2); right: 0; width: auto; height: var(--bw); bottom: auto; transform: scaleX(0); transform-origin: 0 50%; }
  .s.v { left: calc(var(--lt) / -2); top: calc(var(--g) - var(--bw) + var(--ov) / 2); }
  .s.h { left: calc(var(--lt) / -2); top: calc(var(--g) - var(--ov) / 2); }
  .s.x { left: calc(var(--lt) / -2); width: auto; top: calc(var(--g) - 1.5px); height: 3px; }
  .gate { left: calc(50% - 3px); top: calc(var(--g) - var(--gl) / 2); width: 6px; height: var(--gl); }
  .term { margin: calc(var(--g) - var(--bw) + var(--ov) / 2) calc(-1 * var(--gut)) calc(var(--u) * 1.5) 0; padding: calc(var(--u) * .5) var(--gut) calc(var(--u) * .5) var(--u);
    border-top: 0; border-left: 1.5px dashed var(--unk); min-height: calc(var(--u) * 3.5); }
  .t-rej.on { border-right: 0; }
  .c-out .term { border-left: 0; border-top: 1.5px dashed var(--unk); padding: calc(var(--u) * .75) var(--gut) var(--u) var(--u); min-height: calc(var(--u) * 5); }
  .t-act .tt { font-size: var(--s1); line-height: calc(var(--u) * 2); }
}

.press-foot { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: calc(var(--u) * 4); row-gap: var(--u); margin-top: calc(var(--u) * 2.5); align-items: start; }
.why { font-size: var(--s1); line-height: calc(var(--u) * 2.5); min-height: calc(var(--u) * 5); max-width: 30em; }
.ldg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px var(--u); }
.ledger { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4.5px; }
.ledger:empty { display: none; }
.chip { --cs: 18px; position: relative; width: var(--cs); height: var(--cs); isolation: isolate; animation: deposit var(--beat) cubic-bezier(.5, 0, .2, 1.4); }
.chip i { position: absolute; top: 0; bottom: 0; width: calc(var(--cs) * 2 / 3); }
.chip i:first-child { left: 0; } .chip i + i { left: calc(var(--cs) / 3); mix-blend-mode: multiply; }
.c-act i:first-child, .c-dec i:first-child { background: var(--an); }
.c-app i:first-child, .c-act i + i { background: var(--bu); }
.c-dec i + i, .c-app i + i { background: var(--hu); }
.c-rej { border: 1.5px solid var(--ink); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10L10 0' stroke='%23111B39' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100%; }
.c-rej i { display: none; }
@keyframes deposit { from { transform: scale(0); } }
.tally { color: var(--ink-2); }
.cap { margin-top: var(--u); font-family: var(--sans); font-size-adjust: var(--sans-adjust); font-size: var(--s-1); line-height: var(--s0); color: var(--ink-2); max-width: 34em; }
.cap b { color: var(--ink); font-weight: 640; }
@media (max-width: 1099px) { .press-foot { grid-template-columns: minmax(0, 1fr); } .rqname { font-size: var(--s0); line-height: calc(var(--u) * 1.5); } }
/* tablets: the rejected column is widened so its 24px title sets in two lines, not three */
@media (min-width: 600px) and (max-width: 1099px) {
  .pgrid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.15fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.05fr); }
  .term { padding-inline: calc(var(--u) * .5); margin-right: 6px; }
}
@media (max-width: 599px) { .why { font-size: var(--s0); line-height: calc(var(--u) * 2); min-height: calc(var(--u) * 6); } }

/* Practice. Round 04: the two voices are two plates laid in register, the way the mark lays them. Azure is laid
   first (top left), rose after it (bottom right), and they overlap in the middle, where the ground overprints and the
   shared method is set. Nothing is a card: each plate's extent is set by its own content, and the white that runs
   in at the top right and out at the bottom left is the paper between them. */
.practice { padding-top: var(--sec); }
.ly { position: absolute; inset: 0; z-index: -1; }
.ly.an { background: var(--an); } .ly.bu { background: var(--bu); } .ly.hu { background: var(--hu); } .ly.mx { mix-blend-mode: multiply; }
.fields { display: grid; isolation: isolate; margin-top: calc(var(--u) * 3); grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 4.5fr); }
.pl { grid-column: 1 / 3; grid-row: 1 / 3; z-index: -1; background: var(--an); }
.pl.bu { grid-column: 2 / 4; grid-row: 2 / 4; background: var(--bu); mix-blend-mode: multiply; }
.f { padding: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 4); }
.f-an1 { grid-column: 1; grid-row: 1; padding-left: var(--gut); padding-top: calc(var(--u) * 4); }
.f-an2 { grid-column: 1; grid-row: 2; padding-left: var(--gut); padding-top: 0; }
.f-ov  { grid-column: 2; grid-row: 2; color: var(--on-ov); display: flex; flex-direction: column; }
.f-ov .hyp { margin-top: auto; padding-top: calc(var(--u) * 2); }   /* the hypothesis sits at the foot of the overlap, where the rose plate ends it */
.f-bu1 { grid-column: 3; grid-row: 2; padding-right: var(--gut); }
.f-bu2 { grid-column: 3; grid-row: 3; padding-right: var(--gut); padding-top: 0; }
.fields h3 { font-size: var(--s2); line-height: calc(var(--u) * 3); font-weight: var(--w-display); }
.desc { font-size: var(--s1); line-height: calc(var(--u) * 2.5); margin-top: var(--u); max-width: 19em; }
.f-ov .lab { display: block; margin-bottom: calc(var(--u) * .5); }
.f-ov .said { font-size: var(--s1); line-height: calc(var(--u) * 2.5); max-width: 15em; }
.f-ov .hyp { max-width: 19em; }
/* the offer: the practice's way in, under the ink rule that the rose plate's edge continues across the page */
.offer { border-top: 4px solid var(--ink); padding-top: calc(var(--u) * 1.5); max-width: 26em; }
.offer h4 { margin: 0; font-family: var(--sans); font-size-adjust: var(--sans-adjust); font-size: var(--s1); line-height: calc(var(--u) * 2); font-weight: 640; }
.offer p { margin-top: calc(var(--u) * .5); }
.offer .cta { margin-top: calc(var(--u) * 1.5); }
.eng { margin-top: calc(var(--u) * 2.5); max-width: 26em; }
.eng div { padding: calc(var(--u) * .5) 0; }
.eng dt { font-family: var(--sans); font-size-adjust: var(--sans-adjust); font-weight: var(--w-label); line-height: calc(var(--u) * 1.5); }
.f-bu1 .eng { margin-top: calc(var(--u) * 2); }
.infra { max-width: 26em; }
@media (max-width: 599px) { .infra { font-size: var(--s-1); line-height: calc(var(--u) * 1.5); } }
@media (max-width: 1099px) {
  /* one column: the same two plates, stacked as the mark stacks them, overprinting in the middle band */
  .fields { grid-template-columns: minmax(0, 1fr); }
  .pl { grid-column: 1; grid-row: 1 / 4; } .pl.bu { grid-column: 1; grid-row: 3 / 6; }
  .f { grid-column: 1; padding-inline: var(--gut); }
  .f-an1 { grid-row: 1; } .f-an2 { grid-row: 2; } .f-ov { grid-row: 3; padding-block: calc(var(--u) * 3) calc(var(--u) * 3.5); } .f-bu1 { grid-row: 4; padding-top: calc(var(--u) * 4); } .f-bu2 { grid-row: 5; }
  .f > * { max-width: 30em; }
}

/* Evidence */
.evidence { padding-top: var(--sec); }
.ev { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: calc(var(--u) * 4); row-gap: calc(var(--u) * 2); align-items: start; }
.grades { list-style: none; padding: 0; display: grid; gap: calc(var(--u) * .75); }
.grades li { display: grid; grid-template-columns: 40px 1fr; gap: var(--u); align-items: baseline; }
.grades svg { width: 40px; height: 13.5px; align-self: center; }
/* Fig. 2, the colour bar of this page. Each sentence that asserts something is one patch, printed in the mark's own
   geometry by the plates of the voices it rests on: azure 0–10, rose 7–20, yellow 17–27 of 27, and below them a key
   band in the studio's ink. Unknown claims stay unprinted on every plate. The visitor can pull the proof plate by
   plate, as a printer does. On phones the bar transposes, like the press. */
.cbar { margin-top: calc(var(--u) * 5); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: calc(var(--u) * 4); align-items: start; }
.cbar > .phead, .cbar > .sheet { grid-column: 1 / -1; }
.phead .how { flex-basis: 100%; margin-top: calc(var(--u) * -.5); color: var(--ink-2); }
.sw { display: inline-block; width: 10px; height: 10px; margin-right: 7px; background: var(--c); box-shadow: 0 0 0 1.5px var(--paper); }
.sw.an, .z.an { --c: var(--an); } .sw.bu, .z.bu { --c: var(--bu); } .sw.hu, .z.hu { --c: var(--hu); } .sw.k, .z.k { --c: var(--ink); }
.sheet { display: grid; grid-template-columns: repeat(var(--n, 21), minmax(0, 1fr)); grid-template-rows: calc(var(--u) * 20) auto;
  isolation: isolate; margin-inline: calc(-1 * var(--gut)); overflow-x: clip; --hid: scaleX(0); }
.sheet:focus-visible { outline-offset: 6px; }
.pt { position: relative; grid-row: 1; grid-column: var(--i); cursor: pointer; }
/* a pointer only previews which patch it is on; choosing one is a click, a tap or the arrow keys, all alike */
@media (hover: hover) { .pt:hover::after { content: ""; position: absolute; z-index: 2; inset: -5px -2px; border: 1.5px solid var(--ink-2); pointer-events: none; } }
.z { position: absolute; left: 0; right: 0; top: var(--z0); bottom: var(--z1); background: var(--c); transform-origin: 0 50%;
  transition: transform calc(var(--beat) * 2) cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); }
.z.an { --z0: 0%; --z1: 69.7%; }
.z.bu { --z0: 21.2%; --z1: 39.4%; mix-blend-mode: multiply; }
.z.hu { --z0: 51.5%; --z1: 18.2%; mix-blend-mode: multiply; margin: -2px; }
.z.k  { --z0: 84.8%; --z1: 0%; }
.z.an, .v-an { --hatch: var(--hatch-an); } .z.bu, .v-bu { --hatch: var(--hatch-bu); } .z.k, .z.hu, .v-hu { --hatch: var(--hatch-ink); }   /* a hatched yellow would not show on paper */
.z.hy { background: var(--hatch); }
.sheet[data-plates="1"] .z:is(.bu, .hu, .k), .sheet[data-plates="2"] .z:is(.hu, .k), .sheet[data-plates="3"] .z.k { transform: var(--hid); }
.pt.u::before { content: ""; position: absolute; inset: 6px 5px; border: 1.5px dashed var(--ink-2); }
.pt[aria-selected="true"]::after { content: ""; position: absolute; z-index: 3; inset: -5px -2px; border: 2px solid var(--ink); pointer-events: none; }
.rl { grid-row: 2; grid-column: var(--s) / span var(--w); padding: 8px 6px 0; border-left: 2px solid var(--ink); white-space: nowrap; color: var(--ink-2); }
.rl:first-of-type { border-left: 0; padding-left: var(--gut); }
.rl span { position: relative; z-index: 1; background: var(--paper); padding-right: 4px; }   /* a name that outruns its section masks the next tick */
/* The reading: the chosen patch's sentence, then what it is, what it rests on and where it is on the page.
   Only what the page's markup records is shown (its grade, its source documents, its section); a missing source is
   said, not hidden. */
.rd { grid-column: 1; margin-top: calc(var(--u) * 3); min-height: calc(var(--u) * 13); }
.rd .gq { display: block; font-size: var(--s2); line-height: calc(var(--u) * 3); max-width: 22em; }
.bas { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: calc(var(--u) * 1.5); row-gap: calc(var(--u) * .5); margin-top: calc(var(--u) * 1.5); max-width: 40em; }
.bas div { display: contents; }
.bas dt { padding-top: 2px; color: var(--ink-2); }
.bas dd { font-family: var(--sans); font-size-adjust: var(--sans-adjust); font-size: var(--s0); line-height: calc(var(--u) * 1.75); }
.bas dd > span { display: block; }
.bas .fn { color: var(--ink-2); }
.bas .fn span { white-space: nowrap; }   /* a file name breaks only before one of its hyphens, so a line never ends in a hyphen that is not one */
.bas .sw { vertical-align: 1px; }
.bas svg { width: 27px; height: 10px; margin-right: 7px; vertical-align: 0; }
.cbar-foot { grid-column: 2; margin-top: calc(var(--u) * 3); }
.plsay { min-height: calc(var(--u) * 4); max-width: 30em; }
.claim:target { outline: 2px solid currentColor; outline-offset: 4px; scroll-margin-block: 30vh; }
@media (max-width: 1099px) {
  .ev { grid-template-columns: minmax(0, 1fr); }
  .cbar { display: block; }
  .sheet { grid-template-rows: calc(var(--u) * 14) auto; }
  .rl:nth-of-type(even) { padding-top: calc(var(--u) * 1.5 + 8px); }   /* staggered, so narrow sections keep their names */
  .cbar-foot { margin-top: calc(var(--u) * 2); }
}
@media (max-width: 599px) {
  .sheet { grid-template-columns: 6.75rem minmax(0, 1fr); grid-template-rows: repeat(var(--n, 21), calc(var(--u) * 2)); margin-inline: 0 calc(-1 * var(--gut)); --hid: scaleY(0); }
  .pt { grid-row: var(--i); grid-column: 2; }
  .z { top: 0; bottom: 0; left: var(--z0); right: var(--z1); transform-origin: 50% 0; }
  .pt.u::before { inset: 4px 6px; }
  .pt[aria-selected="true"]::after { inset: -2px -5px; }
  .rl, .rl:first-of-type, .rl:nth-of-type(even) { grid-column: 1; grid-row: var(--s) / span var(--w); padding: 4px 8px 0 0; border-left: 0; border-top: 2px solid var(--ink); white-space: normal; }
  /* the bar runs down the page, so the reading stays in view at the foot of the screen while the bar is read */
  .rd { position: sticky; bottom: 0; z-index: 4; min-height: 0; margin: calc(var(--u) * 2) calc(-1 * var(--gut)) 0; padding: var(--u) var(--gut) calc(var(--u) * 1.25);
    background: var(--paper); border-top: 2px solid var(--ink); }
  .rd .gq { font-size: var(--s0); line-height: calc(var(--u) * 1.75); }
  .bas { margin-top: calc(var(--u) * .75); row-gap: 2px; }
  .bas dd { font-size: var(--s-1); line-height: var(--s0); }
}

/* Systems */
.systems { padding-top: var(--sec); }
.feature { margin-top: calc(var(--u) * 5); padding-top: calc(var(--u) * 3); border-top: 4px solid var(--ink); }
.fh { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: calc(var(--u) * 3); row-gap: var(--u); }
.fh h3 { font-size: var(--s6); line-height: calc(var(--u) * 8); font-weight: var(--w-display); }
.fh .lat { font-size: var(--s1); line-height: calc(var(--u) * 2); }
.fh .lab { flex-basis: 100%; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
/* Every system's route is drawn by one rule on one measure of eight stages, so routes can be compared:
   each stage in the voice that does the work, verification standing taller, joints overprinting, a person's stage by hand. */
.v-an { --c: var(--an); } .v-bu { --c: var(--bu); } .v-hu { --c: var(--hu); }
.flow { list-style: none; padding: 0; margin-top: calc(var(--u) * 3); display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); isolation: isolate; }
.flow li { position: relative; }
.flow .seg { display: block; height: calc(var(--u) * 4); margin-top: calc(var(--u) * 4); margin-right: calc(var(--u) * -1.5); mix-blend-mode: multiply; background: var(--c); }
.flow .tall .seg { height: calc(var(--u) * 8); margin-top: 0; }
.flow li:last-child .seg { margin-right: 0; }
.flow .sl { display: block; padding: var(--u) var(--u) 0 0; font-family: var(--sans); font-size-adjust: var(--sans-adjust); font-size: var(--s0); line-height: calc(var(--u) * 1.5); font-weight: var(--w-label); }
.trace { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: calc(var(--u) * 3); row-gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 4); }
.trace dt { color: var(--ink-2); margin-bottom: 4px; }
.sys-list { list-style: none; padding: 0; margin-top: calc(var(--u) * 7); display: grid; gap: calc(var(--u) * 4); }
.sh { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: calc(var(--u) * 2); row-gap: 4px; }
.sh h3 { font-size: var(--s2); line-height: calc(var(--u) * 2.5); font-weight: var(--w-display); }
.sh .ss { margin-left: auto; }
.ss { display: flex; align-items: center; gap: 8px; }
.rt { list-style: none; padding: 0; margin-top: var(--u); display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); isolation: isolate; }
.rt > span { position: relative; }
.rt .sg { display: block; height: calc(var(--u) * 2); margin: var(--u) calc(var(--u) * -.75) var(--u) 0; mix-blend-mode: multiply; background: var(--c); }
.rt .tall .sg { height: calc(var(--u) * 4); margin-block: 0; }
.rt > span:last-child .sg { margin-right: 0; }
.rt .sl { display: block; padding: 6px var(--u) 0 0; font-family: var(--sans); font-size-adjust: var(--sans-adjust); font-size: var(--s-1); line-height: var(--s0); font-weight: var(--w-label); color: var(--ink-2); }
.rnd .rt .sg { background: var(--hatch); }
.plan .rt .sg { background: none; border: 1.5px dashed var(--c); mix-blend-mode: normal; margin-right: calc(var(--u) * .5); }   /* not built: unprinted, and not joined */
.rt .none { grid-column: span 2; } .rt .none .sg { --c: var(--ink-2); }
.sys .fl { display: none; margin-top: 6px; font-family: var(--sans); font-size-adjust: var(--sans-adjust); font-size: var(--s-1); line-height: var(--s0); color: var(--ink-2); }
.listnote { margin-top: calc(var(--u) * 4); color: var(--ink-2); max-width: 34em; }
@media (max-width: 1099px) {
  .fh h3 { font-size: var(--s5); line-height: calc(var(--u) * 6); } .trace { grid-template-columns: minmax(0, 1fr); } .flow .sl { font-size: var(--s-1); line-height: var(--s0); }
  /* below 1100px single-word stage names outgrow their slot, so the route's names are shown below it as one line */
  .rt .sl { display: none; }
  .rt .sg { margin-bottom: 0; } .rt .tall .sg { margin-top: 0; }
  .sys .fl { display: block; }
}
@media (max-width: 599px) {
  .fh h3 { font-size: var(--s4); line-height: calc(var(--u) * 4.5); } .fh .lat { font-size: var(--s0); }
  .sh .ss { margin-left: 0; flex-basis: 100%; }
}

@media (min-width: 600px) and (max-width: 1099px) {
  .feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(var(--u) * 4); align-items: start; }
  .feature .fh { grid-column: 1 / -1; }
}
/* the flow turns vertical once eight stage names no longer fit side by side */
@media (max-width: 1099px) {
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow li { padding-left: calc(var(--u) * 7); min-height: calc(var(--u) * 3); }
  .flow .seg { position: absolute; left: calc(var(--u) * 1.5); top: 0; bottom: calc(var(--u) * -1); width: calc(var(--u) * 3); height: auto; margin: 0; }
  .flow .tall .seg { left: 0; width: calc(var(--u) * 6); height: auto; }
  .flow li:last-child .seg { bottom: 0; }
  .flow .sl { padding: calc(var(--u) * .5) 0; }
}

/* Method: a real sequence, so it is numbered. Each stage is printed in the voice that does it; joints overprint. */
.method { padding-top: var(--sec); }
.stages { list-style: none; padding: 0; margin-top: calc(var(--u) * 4); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: calc(var(--u) * 2); isolation: isolate; }
.stages li { position: relative; padding-top: calc(var(--u) * 3); }
.sb { position: absolute; top: 0; left: 0; right: calc(var(--u) * -3); height: calc(var(--u) * 1.5); mix-blend-mode: multiply; }
.stages li:last-child .sb { right: 0; }
.sb i { position: absolute; inset: 0; } .sb i + i { mix-blend-mode: multiply; }
.v-hu .sb i:first-child { background: var(--hu); } .v-an .sb i:first-child, .v-anbu .sb i:first-child { background: var(--an); }
.v-bu .sb i:first-child, .v-anbu .sb i + i { background: var(--bu); }
.stages .n { display: block; font-size: var(--s2); line-height: calc(var(--u) * 3); font-weight: var(--w-display); font-variant-numeric: lining-nums tabular-nums; }
.stages h3 { margin: 4px 0 6px; }
.stages .lock { margin-top: var(--u); color: var(--ink-2); }
@media (max-width: 1099px) { .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: calc(var(--u) * 3); } .sb { right: 0; } }
@media (max-width: 599px) {
  .stages { grid-template-columns: minmax(0, 1fr); row-gap: calc(var(--u) * 2.5); }
  .stages li { padding: 0 0 0 calc(var(--u) * 3); }
  .sb { top: 0; bottom: calc(var(--u) * -3.5); left: 0; right: auto; width: calc(var(--u) * 1.5); height: auto; }
  .stages li:last-child .sb { bottom: 0; }
}

/* Notes */
.notes { padding-top: var(--sec); }
.nl { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(var(--u) * 4); row-gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 3); }
.nl ul { list-style: none; padding: 0; margin-top: var(--u); display: grid; gap: var(--u); }
.nl li { display: grid; grid-template-columns: 18px 1fr; column-gap: var(--u); }
.nl li svg { width: 13.5px; height: 13.5px; margin-top: 7px; }
.nl .lab { grid-column: 2; color: var(--ink-2); }
@media (max-width: 599px) { .nl { grid-template-columns: minmax(0, 1fr); } }

/* Finale: the human voice gets the whole ground */
.finale { position: relative; isolation: isolate; margin-top: var(--sec); padding-block: calc(var(--u) * 6) calc(var(--u) * 7); }
.fin { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(var(--u) * 6); row-gap: calc(var(--u) * 5); }
.fin .said { font-size: var(--s1); line-height: calc(var(--u) * 2.5); margin-bottom: calc(var(--u) * 1.5); max-width: 22em; }
.fin p { max-width: 30em; }
.fin ul { margin: var(--u) 0 calc(var(--u) * 2); padding-left: 1.1em; }
.cta-ink { font-family: var(--sans); font-size-adjust: var(--sans-adjust); font-size: var(--s0); line-height: calc(var(--u) * 2); font-weight: var(--w-label);
  background: var(--ink); color: var(--hu); border: 0; padding: calc(var(--u) * .75) calc(var(--u) * 1.5); cursor: pointer; }
.cta-ink:focus-visible { outline-color: var(--ink); }
.msg { margin-top: var(--u); min-height: var(--s0); }
.finale > .ly.hu { clip-path: polygon(0 var(--u), 37% 3px, 100% calc(var(--u) * .5), 100% calc(100% - 5px), 58% 100%, 0 calc(100% - var(--u) * .75)); }   /* the person's plate, cut by hand */
.visit { margin: calc(var(--u) * 2) 0 0 calc(var(--u) * -1); padding: var(--u) var(--u) calc(var(--u) * 1.25); background: var(--paper); max-width: 30em; }
.visit .ledger { margin-top: var(--u); gap: 6.75px; }
.visit .chip { --cs: 27px; }
@media (max-width: 899px) { .fin { grid-template-columns: minmax(0, 1fr); } }
.foot { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(var(--u) * 3); row-gap: var(--u); padding-block: calc(var(--u) * 3) calc(var(--u) * 4); color: var(--ink-2); }
.foot .brand { font-size: var(--s-1); } .foot p { max-width: 34em; }
@media (max-width: 599px) { .foot { grid-template-columns: minmax(0, 1fr); } }

/* Motion: one orchestrated moment (the route enters) and motion that answers the visitor. */
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after { transition: none !important; animation: none !important; }

/* CSP-safe seeded hand registration and route timing. */
[data-i="1"] { --i: 1; }
[data-i="2"] { --i: 2; }
[data-i="3"] { --i: 3; }
[data-i="4"] { --i: 4; }
[data-i="5"] { --i: 5; }
.delay-0 { --d: 0.00ms; }
.delay-1 { --d: 101.25ms; }
.delay-2 { --d: 202.50ms; }
.delay-3 { --d: 303.75ms; }
.delay-4 { --d: 405.00ms; }
.delay-5 { --d: 506.25ms; }
.delay-6 { --d: 607.50ms; }
.delay-7 { --d: 708.75ms; }
.delay-8 { --d: 810.00ms; }
.delay-9 { --d: 911.25ms; }
.delay-10 { --d: 1012.50ms; }
.delay-11 { --d: 1113.75ms; }
.delay-12 { --d: 1215.00ms; }
.delay-13 { --d: 1316.25ms; }
.delay-14 { --d: 1417.50ms; }
.delay-15 { --d: 1518.75ms; }
.delay-16 { --d: 1620.00ms; }
.delay-17 { --d: 1721.25ms; }
.delay-18 { --d: 1822.50ms; }
.delay-19 { --d: 1923.75ms; }
.delay-20 { --d: 2025.00ms; }
.delay-21 { --d: 2126.25ms; }
.delay-22 { --d: 2227.50ms; }
.delay-23 { --d: 2328.75ms; }
.delay-24 { --d: 2430.00ms; }
.hand-0 { clip-path: polygon(0.0px 2.6px, calc(100% - 3.1px) 1.2px, calc(100% - 2.7px) calc(100% - 0.4px), 0.9px calc(100% - 1.6px)); }
.hand-1 { clip-path: polygon(1.6px 2.7px, calc(100% - 3.7px) 2.4px, calc(100% - 0.6px) calc(100% - 0.7px), 1.1px calc(100% - 2.6px)); }
.hand-2 { clip-path: polygon(1.4px 0.2px, calc(100% - 3.7px) 1.3px, calc(100% - 0.3px) calc(100% - 1.7px), 3.8px calc(100% - 2.6px)); }
.hand-3 { clip-path: polygon(0.9px 2.5px, calc(100% - 1.8px) 1.1px, calc(100% - 0.3px) calc(100% - 2.0px), 2.2px calc(100% - 3.2px)); }
.hand-4 { clip-path: polygon(1.2px 0.9px, calc(100% - 2.7px) 2.6px, calc(100% - 0.7px) calc(100% - 3.1px), 3.8px calc(100% - 3.3px)); }
.hand-5 { clip-path: polygon(0.9px 3.7px, calc(100% - 2.5px) 3.1px, calc(100% - 1.0px) calc(100% - 1.5px), 0.6px calc(100% - 1.7px)); }
.hand-6 { clip-path: polygon(1.5px 0.7px, calc(100% - 3.3px) 1.6px, calc(100% - 0.8px) calc(100% - 1.5px), 3.2px calc(100% - 3.3px)); }
.hand-7 { clip-path: polygon(1.7px 2.0px, calc(100% - 2.2px) 1.2px, calc(100% - 2.1px) calc(100% - 2.1px), 2.3px calc(100% - 2.4px)); }
.hand-8 { clip-path: polygon(3.7px 1.9px, calc(100% - 1.3px) 1.8px, calc(100% - 3.0px) calc(100% - 1.5px), 2.0px calc(100% - 3.7px)); }
.hand-9 { clip-path: polygon(1.5px 2.3px, calc(100% - 2.6px) 1.3px, calc(100% - 2.8px) calc(100% - 1.0px), 3.2px calc(100% - 3.4px)); }
.hand-10 { clip-path: polygon(0.6px 2.5px, calc(100% - 0.3px) 1.8px, calc(100% - 1.4px) calc(100% - 0.6px), 2.7px calc(100% - 2.5px)); }
.hand-11 { clip-path: polygon(4.0px 1.8px, calc(100% - 0.7px) 2.1px, calc(100% - 3.0px) calc(100% - 2.3px), 3.8px calc(100% - 0.9px)); }
@media (prefers-reduced-motion: reduce) {
  html *, html *::before, html *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}