/* ═══════════════════════════════════════════════════════════════════
   COIL · a printed tin toy
   Flat inks, a short print palette, thick even outlines, no gloss and no
   wear. The page is a toy theatre: a mustard valance, two printed drapes
   tied back, a stage of graph paper and one object on it, the box drawn
   between two ink rules. Everything that is read sits on cream. The only
   red letters on the site are the figures of what has burned.
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Rye";
  src: url("assets/fonts/rye-latin.woff2?v=50") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cabin";
  src: url("assets/fonts/cabin-latin.woff2?v=50") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cabin";
  src: url("assets/fonts/cabin-italic-latin.woff2?v=50") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/*  Two faces from the kit, one job each: Titan One is the fat rounded face of the figures (the
    drums of the counter, the ledger, the numerals), Barlow Semi Condensed 700 is every label,
    like the lettering stamped under a tin toy. Rye stays the tin's printed lettering, Cabin the
    reading.  */
@font-face {
  font-family: "Titan One";
  src: url("assets/fonts/titanone-latin.woff2?v=50") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("assets/fonts/barlowsemicondensed-700.woff2?v=50") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --cream: #F6EFDC;
  --paper: #FBF6E8;
  --grid: #D9CFB6;
  --ink: #1F1B16;
  --ink-70: #5A5346;
  --red: #C4412F;
  --red-deep: #A43424;
  /*  red letters under 24 px take the deep draw of the same ink (5.9 to 1 on cream, 6.3 on paper);
      #C4412F stays for the figures of 28 px and more and for the fills  */
  --red-ink: var(--red-deep);
  --blue: #2C4F7C;
  --blue-deep: #213D61;
  --mustard: #E0A92E;
  --mustard-deep: #C48F1F;
  --brass: #B98A35;
  /*  The brass is a material, not an ink: on the four panel grounds it reads between 2.08 and
      2.45 to 1, so a figure lit in it for the length of the signal cannot be read at the moment
      the reader is being asked to look at it. The signal takes a deeper draw of the same metal,
      5.09 to 5.99 on the same four. On a light panel a tick that goes darker is the legible one.  */
  --brass-tick: #6B4F19;
  --brass-deep: #8E6922;
  --shade: #E7DDC2;
  --night: #120E0B;

  --display: "Rye", Georgia, "Times New Roman", serif;
  --text: "Cabin", "Trebuchet MS", system-ui, sans-serif;
  --figure: "Titan One", var(--display);
  --label: "Barlow Semi Condensed", var(--text);
  --bar-h: 64px;
  --gut: clamp(18px, 4vw, 56px);
  --col-gap: clamp(16px, 2.2vw, 28px);
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  /*  a lever thrown home overshoots its notch by a hair and settles  */
  --ease-throw: cubic-bezier(.3, 1.45, .55, 1);
  /*  the rest of the motion, one set: a part rising into place, the curtain's pull, a hand snapping
      one notch on; reveals last 480 ms, and what comes in together comes in 60 ms apart  */
  --ease-spring: cubic-bezier(.2, .8, .2, 1);
  --ease-curtain: cubic-bezier(.66, 0, .2, 1);
  --ease-snap: cubic-bezier(.3, 1.6, .5, 1);
  --reveal-t: 0.48s;
  --stagger: 60ms;
  --key-t: 0.09s;
  color-scheme: light;
  accent-color: #2C4F7C;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.hidden { display: none !important; }
html {
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
  scrollbar-width: thin; scrollbar-color: var(--brass) var(--cream);
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--brass); border: 3px solid var(--cream); border-radius: 8px; }
body {
  margin: 0;
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--mustard); color: var(--ink); }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 2px; }
button { font: inherit; color: inherit; }
/*  A shut control is shut to the hand as well as to the eye, fields included.  */
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; }
input:disabled, select:disabled, textarea:disabled { opacity: .55; }
button, .key, .val-icon, .toc a, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
code { font-family: inherit; font-weight: 700; letter-spacing: 0.01em; }
b, strong { font-weight: 700; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(1320px, 100%); margin: 0 auto; padding: 0 var(--gut); }

/* figures are set one digit to a cell, like the wheels of a counter */
.fig-cell { display: inline-block; width: 0.66em; text-align: center; }
.fig-cell.thin { width: 0.34em; }

/* ─────────────────────────────── keys ───────────────────────────────
   A key is a riveted tin plate: a 3 px ink edge, a flat ground, a pressed lip in the ground's
   deep tone along its foot, a brass rivet near each end, and its name stamped in Barlow caps.
   Hover lifts it two pixels, a press sinks it onto its lip. No shadow is cast.            */
.key {
  --lip: #E7DDC2; --rv: 10px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 44px; padding: 0 calc(var(--rv) + 19px) 3px;
  font: 700 16px/1 var(--label); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: var(--ink); background: var(--cream);
  border: 3px solid var(--ink); border-radius: 6px;
  box-shadow: inset 0 -5px 0 var(--lip);
  cursor: pointer;
  transition: transform var(--key-t) var(--ease-out), box-shadow var(--key-t) var(--ease-out), background-color var(--key-t) var(--ease-out);
}
.key::before, .key::after {
  content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -6px;
  border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 2px var(--ink);
  pointer-events: none;
}
.key::before { left: var(--rv); }
.key::after { right: var(--rv); }
.key:hover { transform: translateY(-2px); }
.key:active, .key.is-down { transform: translateY(3px); box-shadow: inset 0 -2px 0 var(--lip); }
.key:focus-visible { border-radius: 6px; }
.key-cream { --lip: #E7DDC2; background: var(--cream); color: var(--ink); }
.key-blue { --lip: var(--blue-deep); background: var(--blue); color: var(--cream); }
/*  a blue plate keeps the house ring: blue on cream, on paper and on the mustard of the valance  */
.key-mustard { --lip: var(--mustard-deep); background: var(--mustard); color: var(--ink); }
/*  the plain key: the same plate on paper, never a dashed ghost  */
.key-ghost { --lip: #E7DDC2; background: var(--paper); }
.key-ghost[aria-pressed="true"] { --lip: var(--mustard-deep); background: var(--mustard); }
.key-lg { --rv: 12px; min-height: 60px; padding: 0 calc(var(--rv) + 24px) 3px; font-size: 18px; }
/*  A shut key is drawn shut, never faded: the plate goes to the shade ground ruled with a fine
    hatch (the hatch of the painted stop on the counter, in a whisper), its name to the soft ink,
    its rivets drilled out to rings, and a padlock takes the place of the left one. It neither
    lifts nor sinks. The line beside it says why it is shut.  */
:root {
  --shut-lip: #D2C6A6;
  --shut-ground: repeating-linear-gradient(135deg, transparent 0 6px, rgba(31, 27, 22, 0.1) 6px 7.5px) 0 0 / auto, var(--shade);
  --lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M3.3 6.4V4.6a2.7 2.7 0 0 1 5.4 0v1.8' fill='none' stroke='%231F1B16' stroke-width='2'/%3E%3Crect x='1' y='6' width='10' height='7.4' rx='1.6' fill='%231F1B16'/%3E%3Cpath d='M6 8.6v2.3' stroke='%23E7DDC2' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.key[disabled] { cursor: not-allowed; transform: none; color: var(--ink-70); background: var(--shut-ground); box-shadow: inset 0 -5px 0 var(--shut-lip); }
.key[disabled]::before { left: calc(var(--rv) - 2px); width: 11px; height: 13px; margin-top: -9px; border-radius: 0; box-shadow: none; background: var(--lock) 50% 50% / contain no-repeat; }
.key[disabled]::after { background: transparent; box-shadow: 0 0 0 2px var(--ink-70); }

/* ───────────────────── the bar: a valance, with its scallops ───────────────────── */
.valance {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--bar-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: 0 clamp(10px, 3vw, 40px) 7px;
  background: var(--mustard);
  border-bottom: 3px solid var(--ink);
  transition: transform 0.55s var(--ease-spring);
}
.valance::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px;
  background: var(--red); border-top: 3px solid var(--ink);
}
.valance::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(100% + 3px); height: 17px; pointer-events: none;
  background: radial-gradient(circle at 50% 0, var(--mustard) 11.6px, var(--ink) 12.3px, var(--ink) 15.2px, transparent 15.9px) 50% 0 / 34px 17px repeat-x;
}
.val-links { display: flex; align-items: center; gap: clamp(2px, 1.2vw, 18px); }
.val-links a {
  padding: 10px 8px 7px; font: 700 14px/1 var(--label); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  border-bottom: 3px solid transparent;
}
.val-links a:hover, .val-links a[aria-current="page"] { border-bottom-color: var(--ink); }
.val-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
/*  the mark stands on the valance as it is, no tile around it  */
.val-brand img { width: 38px; height: 38px; border: 0; border-radius: 0; }
.val-brand span { font: 400 28px/1 var(--display); letter-spacing: 0.02em; }
.val-keys { justify-self: end; display: flex; align-items: center; gap: 8px; }
/*  the sound and X keys are discs with a brass rim inside their ink ring, like the knobs of a tin toy  */
.val-icon {
  width: 40px; height: 40px; display: grid; place-items: center; flex: none;
  color: var(--ink); background: var(--cream); border: 3px solid var(--ink); border-radius: 50%;
  box-shadow: inset 0 0 0 3.5px var(--brass), inset 0 0 0 5.5px var(--ink);
  text-decoration: none; cursor: pointer; padding: 0;
}
.val-icon svg { width: 18px; height: 18px; }
.val-icon[aria-pressed="false"] { background: var(--shade); }
.val-x { font: 400 17px/1 var(--figure); padding-top: 1px; }
.val-icon:hover { background: var(--paper); }
.val-connect, .val-launch { --rv: 8px; min-height: 40px; padding: 0 23px 3px; font-size: 14px; }
/*  on Connect the lamp stands where the left rivet would be  */
.val-connect { padding-left: 13px; }
.val-connect::before { display: none; }
.wallet-dot { width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--shade); flex: none; }
.is-on .wallet-dot { background: var(--blue); }
.key.is-off { --lip: var(--mustard-deep); background: var(--mustard); }
.wallet-label { max-width: 24ch; overflow: hidden; text-overflow: ellipsis; }

/* ═════════════════════ THE THEATRE ═════════════════════
   Without script, or when motion is not wanted, the theatre is a plain column:
   the headline, the stage, then the reading and the keys. With script it becomes
   a tall room, several screens of scroll seen through one window that stays put.
   Everything in it is placed from one number, the progress p.                  */

/*  the home page is a theatre: its ground is the cream of the room, under everything  */
.home { background: var(--cream); }
.stage { position: relative; background: var(--cream); }
.stage-view { display: flex; flex-direction: column; --mx: 0; --my: 0; --close: 1; }
.portal { order: 2; position: relative; height: min(72vw, 440px); background: var(--paper); overflow: hidden; }
.scene-host { position: absolute; inset: 0; }
.scene-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ui-cap { display: none; }
.curtain { display: none; }
/*  the tied drapes stand at both edges of the stage, in the column as in the room: printed folds,
    a braid, a tie-back and its tassel, shown from their inner edge and cut by the edge of the view  */
.drape {
  position: absolute; top: 0; bottom: 0; z-index: 3; width: var(--drape); pointer-events: none;
  background: url("assets/drape-tied.svg?v=50") 100% 50% / auto 100% no-repeat;
}
.drape-l { left: 0; }
.drape-r { right: 0; transform: scaleX(-1); }

/* the drawing's own letters: the tin's little window turns the same fat figures as the drums  */
.scene-digit { font-family: var(--figure); font-size: 25px; fill: var(--ink); }
.scene-lab { font-family: var(--label); font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round; }
/* the counter window blown up: Titan One on the drums, one digit a drum; its size is set by the drawing */
.scene-odo { font-family: var(--figure); fill: var(--ink); }
.scene-bezel { font-family: var(--label); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--paper); }
.scene-odo-lab { font-family: var(--label); font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round; }
.scene-burn { font-family: var(--text); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; fill: var(--red-ink); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
/*  the toy's sheet keeps its boxes: each one's count at its top left corner, stamped in the
    caps of the labels on the band's own ground; the box standing now says so  */
.scene-box-lab { font-family: var(--label); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--ink); paint-order: stroke; stroke: var(--shade); stroke-width: 4px; stroke-linejoin: round; }
.scene-box-lab.is-now { font-size: 13px; stroke: #F5E5BF; }
.scene-pop { opacity: 0; transition: opacity 0.16s var(--ease-out); }
.scene-pop.on { opacity: 1; }
.scene-pop-big { font-family: var(--figure); font-size: 56px; fill: var(--red); paint-order: stroke; stroke: var(--cream); stroke-width: 7px; stroke-linejoin: round; }
.scene-pop-small { font-family: var(--text); font-size: 15px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--ink); paint-order: stroke; stroke: var(--cream); stroke-width: 5px; stroke-linejoin: round; }
/*  on the stage the burned figure stands between the thrown lid and the grip of the crank  */
.scene-pop-side .scene-pop-big { font-size: 44px; stroke: var(--paper); }
.scene-pop-side .scene-pop-small { font-family: var(--label); font-size: 15px; letter-spacing: 0.12em; stroke: var(--paper); }

/* ── the talk: what is read stands outside the box. The headline above the upper rule, the reading
      and the keys under the lower one; in the plain column they come before and after the stage ── */
/*  --drape is the width of a tied drape at the edge of the stage: the talk keeps clear of it  */
.stage-view { --drape: clamp(24px, 9vw, 150px); --talk-l: calc(var(--drape) + clamp(14px, 1.6vw, 28px)); --talk-r: calc(var(--drape) + 16px); }
.stage-on .stage-view { --drape: clamp(90px, 9vw, 150px); }
.ui-1 { display: contents; }
.talk-top { order: 1; padding: calc(var(--bar-h) + 17px + 26px) var(--gut) 24px; }
.talk-bot { order: 3; padding: 24px var(--gut) 0; }
/*  the tin's own reading: the ledger and the hint. In the room it stands on the shelf under the
    tub, like the figures stamped under a toy's stand; in the column it follows the keys.  */
.talk-tin { order: 3; padding: 26px var(--gut) 44px; }
.talk-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; margin-bottom: 16px; }
.kicker { font: 700 14px/1.3 var(--label); letter-spacing: 0.12em; text-transform: uppercase; }
.kicker b { font-weight: 700; }
.nw { white-space: nowrap; }
.live { font-size: 14px; line-height: 1.3; color: var(--ink); }
.live b { font-variant-numeric: tabular-nums; }
/*  Both lines one size. The first line is 12.6 of its size wide: the middle term keeps it between
    the drapes, the last one keeps the box its height on a short screen.  */
.h1 { font: 400 clamp(44px, min(6.2vw, calc((100vw - 240px) / 12.7), 10vh), 100px)/0.9 var(--display); letter-spacing: -0.01em; }
.h1-a, .h1-b { display: block; text-wrap: balance; }
.h1-star { display: inline-block; width: 0.66em; height: 0.66em; vertical-align: -0.02em; margin: 0 0.08em; }
.pitch { max-width: 28.5em; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.55; color: var(--ink); }
.pitch em { font-style: normal; text-decoration: underline var(--mustard); text-decoration-thickness: 0.28em; text-underline-offset: 0.06em; text-decoration-skip-ink: none; }
.talk-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 22px 34px; margin-top: 24px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hint { display: none; font: 700 13px/1.2 var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-70); }
/*  the ledger: every figure but the turns, in one small line. Titan One has no tabular figures,
    so each one gets a cell wide enough for its widest state.  */
.ledger { display: flex; flex-wrap: wrap; gap: 10px 30px; }
.led { margin: 0; }
.led-lab { display: block; font: 700 13px/1.1 var(--label); letter-spacing: 0.12em; text-transform: uppercase; }
.led-fig { display: block; min-width: 4.1em; margin-top: 6px; font: 400 30px/1 var(--figure); white-space: nowrap; }
#m-reserve { min-width: 3.4em; }


/* ── with script and motion: the tall room and its window ── */
.stage-on .stage { height: 300vh; }
.stage-on .stage-view {
  position: sticky; top: 0; display: block;
  height: 100vh; height: 100svh; overflow: hidden;
  /* the ground of scene two: a sheet of graph paper the size of the room */
  background:
    linear-gradient(var(--grid) 1.6px, transparent 1.6px) 0 0 / 100% 120px,
    linear-gradient(90deg, var(--grid) 1.6px, transparent 1.6px) 0 0 / 120px 100%,
    linear-gradient(rgba(217, 207, 182, 0.55) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(90deg, rgba(217, 207, 182, 0.55) 1px, transparent 1px) 0 0 / 24px 100%,
    var(--cream);
}
.stage-on .layer, .stage-on .ui { position: absolute; inset: 0; }
.stage-on .portal { z-index: 4; height: auto; margin: 0; pointer-events: none; }
/* in the room the talk stands on the stage itself: the headline between the valance and the
   upper rule, the reading between the lower rule and the foot of the view (main.js places the
   box so that both fit, and writes --rule-bot and --pen-x) */
.stage-on .ui-1 { display: block; z-index: 8; pointer-events: none; }
.stage-on .talk-top, .stage-on .talk-bot { position: absolute; left: var(--talk-l); right: var(--talk-r); padding: 0; pointer-events: auto; }
.stage-on .talk-top { top: calc(var(--bar-h) + 17px + clamp(10px, 2.4vh, 26px)); }
/*  the lift budget: an opening throws the lid back and the spring up into the sky over the tin,
    so the kicker and the headline keep left of the lid's reach (main.js writes --sky-x). There the
    headline takes three lines, its second sentence whole on the last one, as large as the column
    lets that line stand (--h1-em 11.3); where three lines would cost the box its height, two,
    each sentence whole on its line (12.75). main.js measures both and keeps the better.  */
.stage-on .talk-top { right: max(var(--talk-r), calc(100% - var(--sky-x, 100%))); }
.stage-on .h1 { font-size: min(clamp(44px, min(6.2vw, calc((100vw - 240px) / 12.7), 10vh), 100px), calc((var(--sky-x, 100vw) - var(--talk-l)) / var(--h1-em, 11.3))); }
.stage-on .h1-b { white-space: nowrap; }
/*  the kicker and the chain's line share one row in that column where it is wide enough; the
    chain's line keeps its place while the chain has not answered yet, so the box never jumps  */
.stage-on .talk-line { gap: 4px 20px; margin-bottom: 14px; }
.stage-on .kicker, .stage-on .live { font-size: 13px; }
.stage-on .live[hidden] { display: block; visibility: hidden; }
/*  the reading and the keys go no further right than the pen: the tub stands beside them  */
.stage-on .talk-bot { top: calc(var(--rule-bot, 72vh) + 20px); right: calc(100% - var(--pen-x, 62vw) + 14px); }
/*  the pitch is set at a reading measure (about seventy characters); the room still keeps the
    reading its whole column, --col-vw of the screen up to 43.3em (js/main.js roomSpace), so the
    measure of the text never decides how large the box is drawn  */
.stage-on .pitch { max-width: min(28.5em, 45vw); --col-vw: 45; }
.stage-on .talk-row { flex-wrap: nowrap; margin-top: 16px; }
/*  the ledger and the hint stand centred on the shelf under the tub  */
.stage-on .talk-tin {
  position: absolute; left: var(--tin-x, 80vw); top: calc(var(--table-y, 86vh) + 16px);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 0; transform: translateX(-50%); text-align: center; pointer-events: auto;
}
.stage-on .talk-tin .ledger { flex-wrap: nowrap; justify-content: center; gap: 0 28px; }
.stage-on .talk-tin .led-fig { text-align: center; }
.stage-on .hint { display: block; white-space: nowrap; }
/*  a narrow room stacks the ledger under the tub; a short one sets the reading tighter and drops
    the hint, so the reading and the keys stay inside the screen  */
@media (max-width: 1099px) {
  .stage-on .talk-tin .ledger { flex-direction: column; align-items: center; gap: 8px; }
}
@media (max-height: 680px) {
  .stage-on .pitch { font-size: 15px; line-height: 1.45; max-width: min(30em, 52vw); --col-vw: 52; }
  .stage-on .talk-row { margin-top: 10px; }
  .stage-on .key-lg { min-height: 50px; }
  .stage-on .hint { display: none; }
}
/* the pointer moves the tin a hair along the table, never the paper: the rules and the drums stay together */
.stage-on .par-box { transform: translateX(calc(var(--mx) * 4px)); }

/*  the closed curtain: two straight drapes of printed folds (a 240 px tile repeated along x). They
    cover the stage at load and part on the entrance timer, handing over to the tied drapes, and
    close again from both edges at the end of the room. --close is 1 shut, 0 open.  */
.stage-on .curtain {
  display: block; left: auto; right: auto; z-index: 12; width: calc(50% + 2px);
  background: var(--red) url("assets/drape-fold.svg?v=50") 0 0 / 240px 100% repeat-x;
}
.stage-on .curtain-l { left: 0; background-position: right top; border-right: 3px solid var(--ink); transform: translateX(calc((var(--close) - 1) * 101%)); }
.stage-on .curtain-r { right: 0; background-position: left top; border-left: 3px solid var(--ink); transform: translateX(calc((1 - var(--close)) * 101%)); }
.is-entering .curtain { transition: transform 1.4s var(--ease-curtain); }
.stage-on .is-parted .curtain { display: none; }

/* the entrance, on timers: the valance, the headline, then the reading and the keys, then the hint.
   Nothing written ever fades over the tin: the talk only rises into its own place. */
.will-enter .valance { transform: translateY(-140%); }
.will-enter .talk-top > *, .will-enter .talk-bot > *, .will-enter .ledger { opacity: 0; transform: translateY(16px); }
.will-enter .hint { opacity: 0; }
.e1 .valance { transform: none; }
.e2 .talk-top > * { opacity: 1; transform: none; transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-spring); }
.e2 .talk-top > *:nth-child(2) { transition-delay: 0.08s; }
.e3 .talk-bot > *, .e3 .ledger { opacity: 1; transform: none; transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-spring); }
.e3 .talk-bot > *:nth-child(2) { transition-delay: 0.1s; }
.e3 .ledger { transition-delay: 0.18s; }
.e4 .hint { opacity: 1; transition: opacity 0.5s var(--ease-out); }

/*  the four breaths of the rule take the headline's place one at a time while the room is
    scrolled: Rye, no plate, never wider than the reading column, so nothing is written over the tin  */
.h1-slot { position: relative; }
.stage-on .ui-cap { display: block; position: absolute; left: 0; top: 0; width: min(100%, calc(var(--pen-x, 60vw) - var(--talk-l) + 10px)); pointer-events: none; }
.cap {
  position: absolute; left: 0; top: 0; width: 100%; opacity: 0;
  font: 400 clamp(34px, min(4.5vw, 7vh), 72px)/0.94 var(--display); letter-spacing: -0.01em; text-wrap: balance;
}
.cap b { font-weight: 400; }


/* ═════════════════════ THE WHOLE RULE, ON ONE TIN ═════════════════════
   A full-bleed band of tin blue with the tin taken apart along one axis, drawn large, its
   spring running up to the band's top edge. Nine numbered parts on the drawing, the nine
   rules as its parts list, four on one side of it and five on the other.            */
.rule { position: relative; overflow: hidden; overflow: clip; background: var(--blue); color: var(--cream); padding: clamp(56px, 8vw, 96px) 0 clamp(64px, 8vw, 112px); }
.rule-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
/*  the head is set to break in three lines in its own column: its size follows the column  */
.rule-h { container-type: inline-size; font: 400 clamp(32px, 3.3vw, 50px)/0.94 var(--display); letter-spacing: -0.01em; }
.rule-h span { display: block; font-size: min(50px, 17.5cqi, max(32px, 3.3vw)); text-wrap: balance; }
.rule-fig { position: relative; margin: 30px calc(-1 * var(--gut) - 4vw) 40px; }
.rule-fig img, .rule-calls { display: block; width: 100%; height: auto; }
.rule-calls { position: absolute; inset: 0; overflow: visible; }
/*  the callouts: an ink leader with a cream keyline, an ink dot on the part, a cream roundel  */
.call-k { fill: none; stroke: var(--cream); stroke-width: 6.5; stroke-linecap: round; }
.call-l { fill: none; stroke: var(--ink); stroke-width: 2.8; stroke-linecap: round; }
.call-d { fill: var(--ink); stroke: var(--cream); stroke-width: 2.2; }
.call-r { fill: var(--cream); stroke: var(--ink); stroke-width: 3.5; }
.call-n { font-family: var(--figure); font-size: 27px; fill: var(--ink); }
.rule-list { display: grid; gap: 30px; }
.rl { display: grid; grid-template-columns: 50px minmax(0, 1fr); column-gap: 16px; align-items: start; }
/*  a parts list, as on a drawing: the part's number in the fat face of the figures, its name
    stamped in the caps of the labels, a line under it; the tin's lettering is kept for the heads  */
.rl-n {
  grid-row: span 2; display: grid; place-items: center; width: 50px; height: 50px; padding: 0 0 1px;
  border-radius: 50%; background: var(--cream); color: var(--ink); border: 3px solid var(--ink);
  font: 400 24px/1 var(--figure);
}
.rl h3 { padding-top: 13px; font: 700 19px/1.15 var(--label); letter-spacing: 0.07em; text-transform: uppercase; text-wrap: balance; }
.rl p { margin-top: 8px; max-width: 28em; font-size: 17px; line-height: 1.55; text-wrap: pretty; }
.rl code { font-weight: 700; }
.rule-a { margin-bottom: 30px; }
/*  on a phone the band is a parts list, not a long read: each part keeps its name and the sentence
    that carries it (the rest stays for a screen reader, and the law page gives it in full), the
    roundels shrink a size, and a line under the list sends the reader to the law  */
.rule-more { display: none; }
/*  the house ring is blue: on the blue band it is drawn in cream  */
.rule :focus-visible { outline-color: var(--cream); }
@media (max-width: 639px) {
  .rl-more { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .rule-list { gap: 22px; }
  .rule-a { margin-bottom: 22px; }
  .rl { grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; }
  .rl-n { width: 42px; height: 42px; font-size: 21px; }
  .rl h3 { padding-top: 10px; font-size: 18px; }
  .rl p { margin-top: 5px; }
  .rule-more { display: block; margin-top: 34px; }
  .rule-more a {
    display: inline-block; padding: 8px 0; color: var(--cream);
    font: 700 15px/1.2 var(--label); letter-spacing: 0.12em; text-transform: uppercase;
    text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
  }
}
@media (min-width: 640px) and (max-width: 999px) {
  .rule-fig { width: min(520px, 100%); margin: 36px auto 48px; }
  .rule-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 36px; }
  .rule-h, .rule-fig { grid-column: 1 / -1; }
  .rule-a { margin-bottom: 0; }
}
/*  On a wide screen the parts list reads down one column of five and the drawing takes the other
    seven, as tall as the window allows, and stays in view while the list goes by. The box's paper
    and its two rules run on past the tin to the band's right edge and are cut by it, the drawing's
    own strip continued at its scale (--s is one unit of the drawing).  */
@media (min-width: 1000px) {
  .rule { padding: 0; }
  .rule-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .rule-h { grid-column: 1 / 6; grid-row: 1; padding-top: clamp(72px, 7.4vw, 108px); }
  .rule-a { grid-column: 1 / 6; grid-row: 2; margin: 44px 0 0; }
  .rule-b { grid-column: 1 / 6; grid-row: 3; margin: 30px 0 0; padding-bottom: clamp(80px, 8vw, 120px); }
  .rule-list { gap: 34px; }
  .rule-fig {
    --H: min(62vw, 820px, calc(100vh - var(--bar-h) - 28px));
    --s: calc(var(--H) / 940);
    grid-column: 7 / 13; grid-row: 1 / 4; position: sticky; top: calc(var(--bar-h) + 14px);
    height: var(--H); margin: 0 calc(-1 * var(--gut) - max(0px, (100vw - 1320px) / 2)) 0 0;
  }
  @supports (height: 100svh) { .rule-fig { --H: min(62vw, 820px, calc(100svh - var(--bar-h) - 28px)); } }
  .rule-fig img, .rule-fig .rule-calls { position: absolute; inset: 0 auto auto 0; width: auto; height: 100%; aspect-ratio: 600 / 940; }
  .rule-fig::before {
    content: ""; position: absolute; right: 0;
    left: calc(var(--s) * 489); top: calc(var(--s) * 477); height: calc(var(--s) * 246);
    border-top: calc(var(--s) * 6) solid var(--ink); border-bottom: calc(var(--s) * 6) solid var(--ink);
    background:
      linear-gradient(90deg, var(--grid) 0 1.6px, transparent 1.6px) calc(var(--s) * 11) 0 / calc(var(--s) * 100) 100%,
      linear-gradient(var(--grid) 0 1.6px, transparent 1.6px) 0 calc(var(--s) * 97) / 100% calc(var(--s) * 100),
      linear-gradient(90deg, var(--grid) 0 1px, transparent 1px) calc(var(--s) * 11) 0 / calc(var(--s) * 20) 100%,
      linear-gradient(var(--grid) 0 1px, transparent 1px) 0 calc(var(--s) * 17) / 100% calc(var(--s) * 20),
      var(--paper);
    background-origin: padding-box;
  }
  /*  where the drawing's paper is cut on the left, an ink edge: the wall the box was drawn from  */
  .rule-fig::after {
    content: ""; position: absolute; z-index: 1; left: 0; width: calc(var(--s) * 6);
    top: calc(var(--s) * 477); height: calc(var(--s) * 246); background: var(--ink);
  }
}
/*  the part being read is lit on the drawing, and its number in the list  */
.call-r, .rl-n { transition: fill 0.2s var(--ease-out), background-color 0.2s var(--ease-out); }
.call.is-lit .call-r { fill: var(--mustard); }
.rl.is-lit .rl-n { background: var(--mustard); }
/*  the parts come in once they are in view; without script, or with less motion, they are simply there  */
.reveal-on .rl { opacity: 0; transform: translateY(12px); transition: opacity var(--reveal-t) var(--ease-out), transform var(--reveal-t) var(--ease-spring); }
.reveal-on .rl.in { opacity: 1; transform: none; }
.reveal-on .call { opacity: 0; transition: opacity var(--reveal-t) var(--ease-out); transition-delay: calc(var(--c) * var(--stagger)); }
.reveal-on .rule-fig.in .call { opacity: 1; }

/* ═════════════════════ THE TOY ═════════════════════ */
.toy { position: relative; padding: clamp(70px, 9vw, 120px) 0 clamp(64px, 7vw, 104px); background: var(--cream); }
/*  the small line over a heading is stamped, like the lettering under a tin: Barlow caps, no rule  */
.eyebrow { font: 700 13px/1.2 var(--label); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; }
/*  a section head never outranks the headline: the stage's H1 is 49 to 58px from 1280 to 1440
    (the lid's budget), so the heads stay at 3.3vw, 42px at 1280, 45 at 1366, 50 at most. The
    honest line and the foot line are the two statement bands that may stand larger.  */
.h2 { font: 400 clamp(32px, 3.3vw, 50px)/0.94 var(--display); letter-spacing: -0.01em; }
.lead { margin-top: 16px; max-width: 28.5em; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; }
/*  the head on twelve columns: the title on five, its lead on seven, standing on one line  */
.toy-head { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
.toy-head .lead { margin: 0; }
@media (min-width: 900px) {
  .toy-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
  .toy-title { grid-column: 1 / 6; }
  .toy-head .lead { grid-column: 6 / 13; font-size: 19px; padding-bottom: 0.3em; }
}

/*  the strip: a full-bleed sheet of graph paper between two ink edges. The tin stands in its right
    quarter and the paper carries the boxes of the past away to the left; a spring that stands up
    tall is cut by the top edge.  */
.scene-toy {
  position: relative; inset: auto; height: clamp(340px, 38vw, 520px); margin-top: clamp(30px, 4vw, 56px);
  overflow: hidden; background: var(--paper); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
}

.board { position: relative; z-index: 3; }
.burned { color: var(--red); }
.tick-up { animation: nod 0.28s var(--ease-out); }
@keyframes nod { 0% { transform: translateY(-5px); } 100% { transform: none; } }

.note { font-size: 17px; line-height: 1.5; }
.note b { font-weight: 700; }
.note .burned { font-weight: 700; }
.keys { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px; }
.trade-pair { display: flex; flex: 1 1 100%; gap: 14px; }
.key-trade { flex: 0 1 200px; min-width: 128px; }
/*  the size of a trade: three figures on an ink track, a brass slider under the one pressed  */
.size-set { display: inline-flex; align-items: center; gap: 12px; }
.size-lab { font: 700 14px/1 var(--label); letter-spacing: 0.12em; text-transform: uppercase; }
.sizes { --at: 1; position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 58px; padding: 4px; background: var(--ink); border-radius: 8px; }
.sizes-knob {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: 58px; border-radius: 5px;
  background: var(--brass); box-shadow: inset 0 -4px 0 var(--brass-deep);
  transform: translateX(calc(var(--at) * 100%)); transition: transform 0.18s var(--ease-out);
}
.sizes .chip {
  position: relative; z-index: 1; min-width: 0; min-height: 44px; padding: 3px 0 0; border: 0; border-radius: 5px;
  background: transparent; color: var(--cream); font: 400 20px/1 var(--figure);
}
.sizes .chip[aria-pressed="true"] { background: transparent; color: var(--ink); }
/*  a cream ring reads on the ink track and on the brass slider alike  */
.sizes .chip:focus-visible { outline-color: var(--cream); outline-offset: -5px; border-radius: 5px; }
/*  on the brass slider the ring is ink, which reads on brass where cream does not  */
.sizes .chip[aria-pressed="true"]:focus-visible { outline-color: var(--ink); }
/*  hush the bots: a slide switch, a brass knob in a tin slot that turns blue when it is thrown  */
.switch {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 4px 0 0;
  background: none; border: 0; cursor: pointer; color: var(--ink);
  font: 700 15px/1 var(--label); letter-spacing: 0.12em; text-transform: uppercase;
}
.sw { position: relative; flex: none; width: 62px; height: 34px; background: var(--cream); border: 3px solid var(--ink); border-radius: 6px; box-shadow: inset 0 -4px 0 var(--shade); transition: background-color 0.18s var(--ease-out); }
.sw i { position: absolute; top: 4px; left: 5px; width: 20px; height: 20px; border-radius: 4px; background: var(--brass); box-shadow: 0 0 0 2.5px var(--ink); transition: transform 0.18s var(--ease-out); }
.sw i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2.5px; margin: -1.25px 0 0 -5px; background: var(--ink); border-radius: 1px; transform: rotate(-45deg); }
.switch[aria-pressed="true"] .sw { background: var(--blue); box-shadow: inset 0 -4px 0 var(--blue-deep); }
.switch[aria-pressed="true"] .sw i { transform: translateX(26px); }
.switch:hover .sw { transform: translateY(-1px); }
.sw-lab { padding-top: 2px; }

/*  the note is a ticket the toy prints, six hundred pixels of paper at most, laid a little askew
    under the keys: a mustard stub with the toy's block it was printed at, a perforation of ink dots
    with a half-round notch bitten out at each end of it, and the line on paper. Its small print is
    set under it as a caption (.tk-fine). Four lines are kept for the line, so a longer one does not
    move the page.  */
.tk-out { min-width: 0; max-width: 600px; }
.ticket {
  --bite: 11px;
  position: relative; display: grid; grid-template-columns: minmax(118px, auto) minmax(0, 1fr);
  margin: 4px 0 0; background: var(--paper); border: 3px solid var(--ink); border-radius: 8px;
  transform: rotate(-1.2deg);
}
.tk-no {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  margin: 0; padding: 14px 16px 12px; background: var(--mustard); border-radius: 5px 0 0 5px;
}
.tk-no span { font: 700 13px/1 var(--label); letter-spacing: 0.14em; text-transform: uppercase; }
.tk-no b { font: 400 40px/0.9 var(--figure); }
.auto-n { font-variant-numeric: tabular-nums; }
.ticket .note {
  position: relative; align-self: stretch; min-height: calc(6em + 34px); max-width: none; margin: 0;
  padding: 16px 24px 18px 22px; font-size: 17px; line-height: 1.5; border-left: 2px dotted var(--ink);
}
/*  the perforation's two notches: a disc of the board's cream with an ink rim, the half of it inside
    the ticket showing, centred where the dotted line meets the edge  */
.ticket .note::before, .ticket .note::after {
  content: ""; position: absolute; left: calc(-1px - var(--bite)); width: calc(2 * var(--bite)); height: calc(2 * var(--bite));
  background: var(--cream); border: 3px solid var(--ink); border-radius: 50%; pointer-events: none;
}
.ticket .note::before { top: calc(-3px - var(--bite)); clip-path: inset(50% 0 0 0); }
.ticket .note::after { bottom: calc(-3px - var(--bite)); clip-path: inset(0 0 50% 0); }
/*  on a phone the stub is the ticket's head: the number on one line, the perforation across  */
@media (max-width: 479px) {
  .ticket { grid-template-columns: minmax(0, 1fr); transform: rotate(-0.9deg); }
  .tk-no { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 10px; padding: 12px 18px 9px; border-radius: 5px 5px 0 0; }
  .ticket .note { min-height: calc(6em + 30px); padding: 14px 18px 16px; border-left: 0; border-top: 2px dotted var(--ink); }
  .ticket .note::before, .ticket .note::after { top: calc(-1px - var(--bite)); }
  .ticket .note::before { left: calc(-3px - var(--bite)); clip-path: inset(0 0 0 50%); }
  .ticket .note::after { left: auto; right: calc(-3px - var(--bite)); bottom: auto; clip-path: inset(0 50% 0 0); }
}
.chip { min-width: 46px; min-height: 40px; padding: 0 10px; background: transparent; border: 0; border-left: 3px solid var(--ink); font: 700 14px/1 var(--text); cursor: pointer; font-variant-numeric: tabular-nums; }
.chip:first-child { border-left: 0; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.fine { font-size: 15px; line-height: 1.5; color: var(--ink-70); }
.fine b { color: var(--ink); }

/*  the turns: the tin's counter window again, small. Three drums of paper in an ink frame, a brass
    mullion between them, a screw in each corner, a flat band of the deeper cream at the top and the
    foot of each drum. When the crank stops, the painted stop is laid across it.  */
.win {
  position: relative; display: inline-flex; margin-top: 10px; padding: 9px;
  font: 400 56px/1 var(--figure); color: var(--ink);
  border-radius: 9px;
  background:
    radial-gradient(circle at 5px 5px, var(--brass) 0 2.3px, transparent 2.8px),
    radial-gradient(circle at calc(100% - 5px) 5px, var(--brass) 0 2.3px, transparent 2.8px),
    radial-gradient(circle at 5px calc(100% - 5px), var(--brass) 0 2.3px, transparent 2.8px),
    radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), var(--brass) 0 2.3px, transparent 2.8px),
    var(--ink);
}
.win-c {
  display: grid; place-items: center; width: 0.84em; height: 1.34em; padding-top: 0.04em;
  background: linear-gradient(var(--shade) 0 11%, var(--ink) 11% calc(11% + 2px), var(--paper) calc(11% + 2px) calc(89% - 2px), var(--ink) calc(89% - 2px) 89%, var(--shade) 89%);
  box-shadow: inset 2px 0 0 var(--ink), inset -2px 0 0 var(--ink);
}
.win-c + .win-c { border-left: 7px solid var(--brass); }
.win.is-stopped::before, .win.is-stopped::after {
  content: ""; position: absolute; left: 9px; right: 9px; height: 19%;
  background: repeating-linear-gradient(45deg, var(--ink) 0 4px, var(--mustard) 4px 9px);
  border: 2.5px solid var(--ink);
}
.win.is-stopped::before { top: 9px; }
.win.is-stopped::after { bottom: 9px; }

/*  the distances: a box drawn small, two ink rules on paper, and the price as a dot between them  */
.gauge-row { display: flex; align-items: stretch; gap: 12px; margin-top: 12px; }
.gauge {
  position: relative; flex: none; width: 44px; height: 76px;
  border-top: 4px solid var(--ink); border-bottom: 4px solid var(--ink);
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 -1px / 100% 11px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) -1px 0 / 11px 100%,
    var(--paper);
}
.gauge i {
  position: absolute; left: 50%; top: calc((1 - var(--pos, 0.5)) * 100%);
  width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 0 2.5px var(--paper);
  transition: top 0.3s var(--ease-out);
}
.gauge-txt { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-width: 0; font-size: 15px; line-height: 1.22; }
.gauge-txt b { font: 400 22px/1 var(--figure); margin-right: 3px; }

/*  The board under the strip: one figure written enormous, what the turns are worth now, and the
    rest in a ruled ledger beside it, held between an upper and a lower rule like the box itself.
    The keys stand under the figure, and the ticket the toy prints lies under the keys with its
    small print under it.  */
.board { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 30px; padding-top: clamp(30px, 3.4vw, 48px); }
@media (min-width: 900px) {
  .board { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 30px; align-items: start; }
  .worth { grid-column: 1 / 7; grid-row: 1; }
  .board > .keys { grid-column: 1 / 7; grid-row: 2; }
  .book { grid-column: 7 / 13; grid-row: 1 / 3; }
  .board > .tk-out { grid-column: 1 / 13; grid-row: 3; }
}
@media (min-width: 1100px) {
  .worth, .board > .keys { grid-column: 1 / 8; }
  .book { grid-column: 8 / 13; }
}
/*  on a phone the ticket follows the keys it answers, and the ledger comes last  */
@media (max-width: 899px) { .board > .tk-out { order: 1; } .book { order: 2; } }

/*  the figure: Titan One on drums of its own, one digit a drum, so the line never shifts while
    it counts; its size follows its column, and the unit is stamped small at the top of it  */
.worth { container-type: inline-size; min-width: 0; }
.worth-lab { display: block; font: 700 13px/1.15 var(--label); letter-spacing: 0.14em; text-transform: uppercase; }
.worth-fig { display: flex; align-items: flex-start; margin: 10px 0 0 -0.04em; font: 400 clamp(64px, 12vw, 168px)/0.84 var(--figure); color: var(--ink); white-space: nowrap; }
@supports (width: 1cqi) { .worth-fig { font-size: clamp(64px, 25cqi, 168px); } }
.worth-fig .wd { display: inline-block; width: 0.7em; text-align: center; }
.worth-fig .wp { display: inline-block; width: 0.3em; text-align: center; }
.worth-fig .wu { margin: 0.07em 0 0 0.12em; font-size: 0.42em; line-height: 1; }
.worth-sub { display: block; margin-top: 14px; max-width: 26em; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.45; text-wrap: pretty; }
.worth-sub b { font-variant-numeric: tabular-nums; }

/*  the ledger: a label and its line on the left, the figure in the fat face on the right, rows
    parted by an ink rule; the upper and the lower rule are heavier, like the rules of the box  */
.book { min-width: 0; border-top: 5px solid var(--ink); border-bottom: 5px solid var(--ink); }
.bk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; padding: 13px 0 12px; }
.bk-row + .bk-row { border-top: 2px solid var(--ink); }
.bk-lab { grid-column: 1; font: 700 13px/1.2 var(--label); letter-spacing: 0.12em; text-transform: uppercase; text-wrap: balance; }
.bk-sub { grid-column: 1; margin-top: 3px; font-size: 14px; line-height: 1.38; color: var(--ink-70); text-wrap: pretty; }
.bk-fig { grid-column: 2; grid-row: 1 / span 2; justify-self: end; font: 400 32px/1 var(--figure); white-space: nowrap; }
.book .win { grid-column: 2; grid-row: 1 / span 2; justify-self: end; margin: 0; padding: 7px 8px; font-size: 28px; }
.book .win-c { width: 1em; height: 1.34em; }
.book .win-c + .win-c { border-left-width: 5px; }
.book .gauge-row { grid-column: 2; grid-row: 1 / span 2; justify-self: end; margin: 0; gap: 10px; }
.book .gauge { width: 30px; height: 54px; }
.book .gauge-txt { font-size: 14px; line-height: 1.2; }
.book .gauge-txt b { font-size: 20px; }

/*  the ticket's small print, as its caption: under the ticket, at the measure of the ticket  */
.tk-fine { max-width: 36em; margin: 20px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-70); text-wrap: pretty; }
.tk-fine b { color: var(--ink); }

/* ═════════════════════ WHAT THE CONTRACTS ENFORCE ═════════════════════
   The six invariants are engraved on a maker's plate, like the brass plate riveted under a tin
   toy. The fourth is inlaid in mustard: it is the one people doubt.                          */
.seam { position: relative; }
.enforce { position: relative; padding: clamp(72px, 9vw, 128px) 0 clamp(40px, 5vw, 72px); background: var(--cream); }
.enforce-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: start; }
.enforce-head .lead { max-width: 26em; text-wrap: pretty; }
@media (min-width: 900px) {
  .enforce-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .enforce-head { grid-column: 1 / 5; position: sticky; top: calc(var(--bar-h) + 40px); }
  .maker { grid-column: 5 / 13; }
}
.maker {
  --mk-pad: clamp(20px, 3.2vw, 44px);
  position: relative; padding: clamp(22px, 2.6vw, 32px) var(--mk-pad) clamp(30px, 3.2vw, 42px); color: var(--ink);
  border: 4px solid var(--ink); border-radius: 10px;
  background:
    radial-gradient(circle at 16px 16px, var(--mustard) 0 5.2px, var(--ink) 5.7px 8.6px, transparent 9.1px),
    radial-gradient(circle at calc(100% - 16px) 16px, var(--mustard) 0 5.2px, var(--ink) 5.7px 8.6px, transparent 9.1px),
    radial-gradient(circle at 16px calc(100% - 16px), var(--mustard) 0 5.2px, var(--ink) 5.7px 8.6px, transparent 9.1px),
    radial-gradient(circle at calc(100% - 16px) calc(100% - 16px), var(--mustard) 0 5.2px, var(--ink) 5.7px 8.6px, transparent 9.1px),
    var(--brass);
  container-type: inline-size;
}
/*  The plate is engraved, not ruled: the maker's name small at its head, then its one loud line
    stamped across it in capitals, cut under by a double line; then the six invariants in two
    columns of three (one on a narrow plate), each numeral hanging in the margin, its I a plain
    bar of the label face and its figure in the fat face, a thin space between, so I1 can never
    read as eleven. The fourth stays inlaid in mustard, out to the plate's right edge.  */
.mk-head { padding-bottom: 22px; margin-bottom: 26px; text-align: center;
  background: linear-gradient(var(--ink) 0 2px, var(--cream) 2px 3px, transparent 3px 7px, var(--ink) 7px 9px, var(--cream) 9px 10px) 0 100% / 100% 10px no-repeat; }
.mk-maker { display: block; font: 700 13px/1 var(--label); letter-spacing: 0.26em; text-transform: uppercase; }
.mk-stamp { display: block; margin-top: 12px; font: 700 clamp(20px, 4.4cqi, 31px)/1.08 var(--label); letter-spacing: 0.12em; text-transform: uppercase; text-wrap: balance; }
.mk-list { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
.mk-list li { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: baseline; font-size: 19px; font-weight: 500; line-height: 1.42; }
.mk-list code { font-weight: 700; }
.mk-n { font: 400 30px/1 var(--figure); white-space: nowrap; }
/*  the I is a small plain bar of the label face standing on the figure's baseline, at about
    three fifths of its height, so the pair reads as a label and a number and never as eleven  */
.inv-i { font: 700 0.6em/1 var(--label); letter-spacing: 0; margin-right: 0.05em; }
.mk-list li:nth-child(4) {
  margin: -12px calc(-1 * var(--mk-pad)); padding: 12px var(--mk-pad);
  background: var(--mustard); border-block: 2px solid var(--ink);
}
.mk-stamp > span { white-space: nowrap; }
@container (min-width: 620px) {
  .mk-list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 40px; row-gap: 24px; }
  .mk-list li:nth-child(4) { margin-left: -18px; padding-left: 16px; border-left: 2px solid var(--ink); border-radius: 8px 0 0 8px; }
}
@media (max-width: 559px) { .mk-list li { grid-template-columns: 40px minmax(0, 1fr); font-size: 17.5px; } .mk-n { font-size: 26px; } }

/* ═════════════════════ WHAT CAN GO WRONG ═════════════════════ */
.plain { padding: clamp(56px, 7vw, 104px) 0 clamp(64px, 8vw, 112px); overflow-x: clip; }
/*  No plates any more: one box is drawn across the page by two ink rules that run out to both
    edges of the screen, and the three things that can go wrong are drawn large inside it, one to
    a column: the line pushed half a box up through the upper rule, where the opening point sits;
    the counter standing astride the box, stopped at its maximum; the price stopped at now, the
    rules running on past it as dots to the edge, nothing drawn after now. The words are set
    under each drawing on the paper. Each drawing is a band 184 px high, its rules at 40 and 156;
    under 1100 px each risk carries its own band from edge to edge.  */
.rk-row {
  --rk-rules: linear-gradient(var(--ink), var(--ink)) 0 38px / 100% 4px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 154px / 100% 4px no-repeat;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 50px;
  margin-top: clamp(30px, 3.6vw, 52px);
}
.rk-art {
  position: relative; display: block; width: 100vw; max-width: none; height: 184px;
  margin: 0 0 22px calc(50% - 50vw); overflow: visible; background: var(--rk-rules);
}
.rk-lab { font-family: var(--label); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--ink); }
.rk-odo { font-family: var(--figure); font-size: 76px; fill: var(--ink); }
.rk-head { display: flex; align-items: center; gap: 14px; }
.rk-n { flex: none; font: 400 56px/0.8 var(--figure); color: var(--ink); }
.rk h3 { font: 700 20px/1.12 var(--label); letter-spacing: 0.06em; text-transform: uppercase; text-wrap: balance; }
.rk p { margin-top: 12px; max-width: 34em; font-size: 17px; line-height: 1.55; text-wrap: pretty; }
@media (min-width: 640px) and (max-width: 1099px) { .rk { justify-self: center; width: min(100%, 560px); } }
/*  side by side only where the narrowest column still holds forty letters a line  */
@media (min-width: 1100px) {
  .rk-row { grid-template-columns: 1.2fr 1fr 1fr; column-gap: var(--col-gap); }
  .rk-row::before {
    content: ""; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 184px;
    background: var(--rk-rules); pointer-events: none;
  }
  .rk-art { width: 100%; margin-left: 0; background: none; }
}

/* ═════════════════════ THE HONEST LINE ═════════════════════
   One band of graph paper, a box drawn empty by two full-bleed rules, and inside it the only
   thing the box can say about itself.                                                        */
.honest {
  position: relative; overflow: hidden; padding: clamp(52px, 7vw, 100px) 0;
  border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  background:
    linear-gradient(var(--grid) 1.6px, transparent 1.6px) 0 0 / 100% 120px,
    linear-gradient(90deg, var(--grid) 1.6px, transparent 1.6px) 0 0 / 120px 100%,
    linear-gradient(rgba(217, 207, 182, 0.55) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(90deg, rgba(217, 207, 182, 0.55) 1px, transparent 1px) 0 0 / 24px 100%,
    var(--paper);
}
.honest-box { position: relative; padding: clamp(30px, 4.6vw, 64px) 0 clamp(36px, 5vw, 70px); border-top: 6px solid var(--ink); border-bottom: 6px solid var(--ink); }
/*  the first sentence holds one line on a wide screen (the wrap's 1208 px caps it at 90), and the
    whole says it in five on a phone: Rye is wide, so the floor is 38 px rather than 44  */
.honest-line { font: 400 clamp(38px, 6.6vw, 90px)/0.95 var(--display); letter-spacing: -0.012em; color: var(--ink); }
.honest-line span { display: block; text-wrap: balance; }
.honest-lab { position: absolute; right: var(--gut); font: 700 13px/1 var(--label); letter-spacing: 0.14em; text-transform: uppercase; }
.honest-lab-u { bottom: calc(100% + 15px); }
.honest-lab-l { top: calc(100% + 15px); }
@media (max-width: 559px) { .honest-box { border-width: 4px 0; } }

/* ═════════════════════ THE CONTRACT, AND THE WAY IN ═════════════════════ */
/*  the last section before the foot: the band touches the section above and the foot's ink edge  */
.contract { padding: 0; background: var(--cream); }
/*  the address is a name plate, never a field (the plate itself is drawn below): the address set
    in bold figures, or the notice that it comes at launch stamped in capitals; its keys beside it  */
.ca-lab { font: 700 14px/1.2 var(--label); letter-spacing: 0.14em; text-transform: uppercase; }
.ca-note { margin-top: 10px; max-width: 28em; font-size: 17px; line-height: 1.5; color: var(--ink); }
.ca-box { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.ca-box code { min-width: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ca-copy, .ca-link { --rv: 12px; min-height: 60px; min-width: 128px; padding: 0 calc(var(--rv) + 22px) 3px; }

/*  The contract band: one object before the foot. A full-bleed strip between two 3 px ink rules
    (the box's own two rules) carries the contract's name plate written large: black enamel with
    an engraved brass line inset and four brass screws, its name engraved at the head, the address
    on its face (or, until the launch, the notice stamped in capitals), the Copy key riveted into
    its right end and the sentence engraved under it. On the home page the band also holds the
    booth's doorway: a strip of the app's awning hung from the upper rule, two brass posts standing
    on the lower one, the Launch key between them and its caption. The band's lower rule is the
    foot's own ink edge; after the honest band its upper rule is that band's lower edge.  */
.ca-band { border-top: 3px solid var(--ink); }
.honest + .contract .ca-band { border-top: 0; }
.ca-grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--col-gap); }
.ca-plate {
  --pl-screw: var(--brass) 0 4.2px, var(--brass-deep) 4.6px 6.2px, transparent 6.7px;
  position: relative; align-self: center; margin: clamp(30px, 4vw, 54px) 0;
  padding: clamp(22px, 2.4vw, 32px) clamp(24px, 3.4vw, 50px) clamp(24px, 2.6vw, 34px);
  color: var(--cream); border-radius: 12px;
  background:
    radial-gradient(circle at 19px 19px, var(--pl-screw)), radial-gradient(circle at calc(100% - 19px) 19px, var(--pl-screw)),
    radial-gradient(circle at 19px calc(100% - 19px), var(--pl-screw)), radial-gradient(circle at calc(100% - 19px) calc(100% - 19px), var(--pl-screw)),
    var(--ink);
  box-shadow: inset 0 0 0 7px var(--ink), inset 0 0 0 8.5px var(--brass);
}
.ca-plate .ca-lab { color: var(--mustard); letter-spacing: 0.18em; }
.ca-plate .ca-box { gap: 16px 22px; margin-top: 14px; padding: 16px 0 18px; border-top: 1.5px solid var(--brass); border-bottom: 1.5px solid var(--brass); }
.ca-plate .ca-box code {
  flex: 1 1 auto; display: block;
  font: 700 clamp(18px, 2vw, 27px)/1.25 var(--label); letter-spacing: 0.05em; color: var(--cream);
}
.ca-plate .ca-box code.waiting { font-size: clamp(21px, 2.7vw, 34px); line-height: 1.1; letter-spacing: 0.12em; text-transform: uppercase; }
.ca-plate .ca-copy { margin-left: auto; }
.ca-plate .ca-note { margin-top: 14px; max-width: 34em; color: var(--cream); }
.ca-plate :focus-visible { outline-color: var(--mustard); }
/*  the doorway: the awning hangs from the band's upper rule, the posts stand on its lower one  */
.door { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 clamp(26px, 2.6vw, 34px) clamp(30px, 3.4vw, 46px); background: var(--shade); }
.door::before, .door::after { content: ""; position: absolute; top: 0; bottom: 0; width: 15px; background: var(--brass); border: 2.5px solid var(--ink); border-bottom: 0; }
.door::before { left: 0; }
.door::after { right: 0; }
.door .awning {
  align-self: stretch; margin: 0 -7px; height: clamp(26px, 2.4vw, 34px); border-top: 0; border-left: 3px solid var(--ink); border-right: 3px solid var(--ink);
  background: repeating-linear-gradient(90deg, var(--red) 0 26px, var(--cream) 26px 52px);
}
.door .awning::after {
  height: 14px;
  background:
    radial-gradient(circle at 13px 0, var(--red) 0 9.6px, var(--ink) 10.1px 12.5px, transparent 13px) 0 0 / 52px 14px repeat-x,
    radial-gradient(circle at 13px 0, var(--cream) 0 9.6px, var(--ink) 10.1px 12.5px, transparent 13px) 26px 0 / 52px 14px repeat-x;
}
.door .key { margin-top: clamp(40px, 4.4vw, 56px); }
.door-cap { margin-top: 18px; max-width: 24em; font-size: 16px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
@media (min-width: 1000px) {
  .ca-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ca-grid .ca-plate { grid-column: 1 / 9; }
  .ca-grid .door { grid-column: 9 / 13; }
  .ca-solo .ca-plate { grid-column: 3 / 11; }
}
@media (max-width: 999px) {
  .door { margin-bottom: 0; }
  .ca-plate { margin-bottom: 34px; }
}

/* ═════════════════════ THE FOOT ═════════════════════
   A full-bleed mustard band under a straight 6 px ink edge (the scallops belong to the valance and
   the awning). It answers the headline instead of repeating it: only its second half, set big on
   the left, and on the right the spring standing out of the open tin, cut by the ink edge above
   it, by the foot of the band and by its edge.                                                  */
.foot {
  position: relative; overflow: hidden;
  padding: clamp(64px, 8vw, 116px) 0 48px;
  background: var(--mustard);
  border-top: 6px solid var(--ink);
}
.foot .wrap { position: relative; z-index: 1; }
/*  45 px on a phone keeps "Leaving opens" inside the gutters  */
.foot-line { font: 400 clamp(45px, 8.6vw, 136px)/0.92 var(--display); letter-spacing: -0.012em; }
.foot-line > span { display: block; max-width: 8em; text-wrap: balance; }
.foot-line > span + span { margin-top: 0.1em; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 30px; margin-top: clamp(34px, 4vw, 52px); }
.foot-links a { padding: 8px 0; font: 700 15px/1 var(--label); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.foot-links a:hover { text-decoration-thickness: 3px; }
.legal { margin-top: 20px; max-width: 30.5em; font-size: 14px; line-height: 1.55; color: var(--ink); }
/*  the drawing's own frame does the cutting, at the foot and at the edge of the band  */
.foot-art { position: absolute; z-index: 0; right: 0; bottom: 0; width: min(36.8vw, 518px); height: auto; pointer-events: none; overflow: hidden; }
@media (max-width: 899px) {
  .foot-art { position: relative; right: auto; display: block; width: min(251px, 67vw); margin: 18px 0 -48px auto; }
}

/* ═════════════════════ THE LAW PAGE ═════════════════════ */
.doc-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 56px; padding-top: 40px; padding-bottom: 110px; align-items: start; }
@media (min-width: 1000px) {
  .doc-grid { grid-template-columns: 262px minmax(0, 1fr); column-gap: clamp(40px, 4.4vw, 76px); padding-top: 72px; }
  .toc { position: sticky; top: calc(var(--bar-h) + 44px); max-height: calc(100vh - var(--bar-h) - 64px); overflow: auto; scrollbar-width: none; }
}
/*  an article: its numeral hangs in the margin in the fat face of the figures, its title in the
    tin's lettering, the reading at one measure; ninety-six pixels of paper between two articles  */
.art { max-width: 860px; scroll-margin-top: calc(var(--bar-h) + 30px); }
.art + .art { margin-top: 96px; }
.art h2 { margin: 0 0 20px; font: 400 clamp(32px, 3.6vw, 48px)/1.02 var(--display); letter-spacing: -0.01em; }
.art h2 .n { display: block; margin: 0 0 12px; font: 400 48px/0.9 var(--figure); letter-spacing: 0; }
/*  the measure is set in em, not ch: Cabin's nought is wide, and 62ch ran a hundred characters a line  */
.art p, .art li { max-width: 28.5em; font-size: 18px; line-height: 1.62; }
.art p + p, .art ul + p, .art p + ul, .art p + ol, .art ol + p { margin-top: 16px; }
@media (min-width: 700px) {
  .art { padding-left: 112px; }
  .art h2 { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: baseline; margin-left: -112px; }
  .art h2 .n { margin: 0; font-size: 56px; }
}
@media (max-width: 559px) { .art p, .art li { font-size: 17px; } }
/*  a pull line: said once, in the reading face turned italic and set large, after a small brass
    star (Rye clogs at this size; it keeps the heads from forty pixels up)  */
.art .aside {
  position: relative; max-width: 23em; margin-top: 30px; padding: 0 0 0 42px;
  font: italic 600 clamp(22px, 2vw, 26px)/1.3 var(--text); letter-spacing: -0.005em; text-wrap: balance;
  background: none; border: 0;
}
.art .aside::before {
  content: ""; position: absolute; left: 0; top: 0.08em; width: 28px; height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 3l4.9 11.2L37 15.4l-9.2 8 2.8 11.9L20 29l-10.6 6.3 2.8-11.9-9.2-8 12.1-1.2z' fill='%23B98A35' stroke='%231F1B16' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 50% 50% / contain no-repeat;
}
@media (max-width: 559px) { .art .aside { font-size: 21px; padding-left: 36px; } .art .aside::before { width: 24px; height: 24px; } }
/*  the parameters: a spec plate of rows on twelve columns, the name stamped in the caps of the
    labels, what it does, and its value: a rubber stamp for every figure fixed at deploy, the venue's facts set plain  */
.spec { margin-top: 26px; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.spec-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: baseline; padding: 16px 0 17px; }
.spec-row + .spec-row { border-top: 2px solid var(--ink); }
.spec dt { font: 700 17px/1.2 var(--label); letter-spacing: 0.08em; text-transform: uppercase; text-wrap: balance; }
.spec .spec-do { grid-column: 1 / -1; grid-row: 2; max-width: 30em; font-size: 16px; line-height: 1.5; }
.spec .spec-val { grid-column: 2; grid-row: 1; justify-self: end; font: 400 22px/1 var(--figure); white-space: nowrap; }
@media (min-width: 700px) {
  .spec-row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; }
  .spec dt { grid-column: 1 / 4; }
  .spec .spec-do { grid-column: 4 / 10; grid-row: 1; }
  .spec .spec-val { grid-column: 10 / 13; justify-self: start; }
}
/*  a rubber stamp: mustard, an ink edge, set a little askew, never twice at the same angle  */
.stamp {
  display: inline-block; padding: 6px 10px 5px; white-space: nowrap;
  font: 700 14px/1 var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
  background: var(--mustard); border: 2.5px solid var(--ink); border-radius: 4px; transform: rotate(-3deg);
}
.spec-row:nth-child(3n + 2) .stamp { transform: rotate(-2deg); }
.spec-row:nth-child(3n) .stamp { transform: rotate(-3.6deg); }
/*  the plate the parameters are mounted on: the enamel of the app's chain reading, paper, an ink
    edge, a brass screw at each corner, the maker's line stamped at its head and one engraved double
    cut a row. A figure fixed at deploy is not engraved yet: its rubber stamp is set on the plate's
    right edge, part on the plate and part off it, tilted one way and then the other, never at quite
    the same reach (the reach is held inside the page's gutter)  */
.sp-plate {
  --sp-pad: clamp(16px, 2.6vw, 34px);
  --sp-over: min(40px, calc(var(--gut) - 12px));
  --screw: var(--brass) 0 4.4px, var(--ink) 4.9px 7.4px, transparent 7.9px;
  position: relative; margin-top: 26px; padding: 14px var(--sp-pad) 8px;
  border: 3px solid var(--ink); border-radius: 10px;
  background:
    radial-gradient(circle at 15px 15px, var(--screw)), radial-gradient(circle at calc(100% - 15px) 15px, var(--screw)),
    radial-gradient(circle at 15px calc(100% - 15px), var(--screw)), radial-gradient(circle at calc(100% - 15px) calc(100% - 15px), var(--screw)),
    var(--paper);
}
/*  (set under the plate's name, so the reading paragraph's size and measure do not reach it)  */
.sp-plate .sp-top { max-width: none; padding: 3px 26px 14px; font: 700 13px/1.3 var(--label); letter-spacing: 0.16em; text-transform: uppercase; text-align: center; text-wrap: balance; }
.sp-plate .spec { margin-top: 0; border: 0; }
/*  what is engraved stands flush with the plate's right margin, under the stamps that overhang it  */
.sp-plate .spec .spec-val { justify-self: end; }
.sp-plate .spec-row {
  margin: 0 calc(-1 * var(--sp-pad)); padding: 17px var(--sp-pad) 16px; border: 0;
  background: linear-gradient(var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px) 0 0 / 100% 5px no-repeat;
}
.sp-plate .spec-val:has(> .stamp) { --sp-jit: 0px; justify-self: end; margin-right: calc(var(--sp-jit) - var(--sp-pad) - 3px - var(--sp-over)); }
.sp-plate .spec-row:nth-child(odd) .stamp { transform: rotate(-3deg); }
.sp-plate .spec-row:nth-child(even) .stamp { transform: rotate(3deg); }
.sp-plate .spec-row:nth-child(even) .spec-val:has(> .stamp) { --sp-jit: 7px; }
@media (max-width: 699px) { .sp-plate { --sp-over: calc(var(--gut) + 4px); margin-right: 12px; } }
@media (max-width: 559px) { .sp-plate .sp-top { padding: 3px 10px 14px; } }
/*  the margin note of 14 floats under the plate: kept clear of its lower edge  */
.sp-plate + .mn { margin-top: 34px; }
/*  in running text the same stamp, smaller: what every figure of the protocol reads  */
.set { display: inline-block; padding: 3px 7px 2px; font: 700 13px/1.2 var(--label); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; background: var(--mustard); border: 2px solid var(--ink); border-radius: 4px; transform: rotate(-2deg); vertical-align: 0.12em; }
/*  a note for builders: a plain paragraph under a stamped label, never a boxed callout  */
.builders { margin-top: 30px; }
.art .builders-lab { font: 700 13px/1.2 var(--label); letter-spacing: 0.14em; text-transform: uppercase; }
.art .builders-lab + p { margin-top: 8px; }
/*  the first time an article says turns, share, reserve or rules, the word is underlined in the ink
    of its part: brass for the crank and the spring, blue for the tub, ink for the rules  */
.ul-brass, .ul-blue, .ul-ink { text-decoration: underline 3px var(--brass); text-underline-offset: 0.2em; text-decoration-skip-ink: none; }
.ul-blue { text-decoration-color: var(--blue); }
.ul-ink { text-decoration-color: var(--ink); }
.art ul { margin-top: 18px; }
.art ul li { position: relative; padding-left: 34px; }
.art ul li + li { margin-top: 14px; }
/*  a small brass tin star for a marker  */
.art ul li::before { content: ""; position: absolute; left: 0; top: 0.28em; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 3l4.9 11.2L37 15.4l-9.2 8 2.8 11.9L20 29l-10.6 6.3 2.8-11.9-9.2-8 12.1-1.2z' fill='%23B98A35' stroke='%231F1B16' stroke-width='3.4' stroke-linejoin='round'/%3E%3C/svg%3E") 50% 50% / contain no-repeat; }
/*  the lead-in runs in as stamped caps a size under the reading, the way a small-caps lead-in does  */
.art ul li > b:first-child { font: 700 16px/1.2 var(--label); letter-spacing: 0.08em; text-transform: uppercase; margin-right: 0.3em; }
/*  12: the maker's plate of the home page, the same component, set in the article  */
.art .maker { margin-top: 26px; }
.art .maker p, .art .maker li { max-width: none; }
.art .mk-list { margin-top: 0; }
.art .mk-list li { font-size: 19px; line-height: 1.42; }
@media (max-width: 559px) { .art .mk-list li { font-size: 17.5px; } }
/*  13, what can go wrong: one short block per risk, numbered in the fat face (the star is the
    bullet of 11 alone), its head on a line of its own at the size of the home page's heads. The
    three risks the home page draws carry the same drawing, small, in the right margin from
    1200px, beside the risk it draws (aria-hidden: the risk says it)  */
.art .risks { margin-top: 18px; counter-reset: rk; }
.art .risks li { position: relative; padding-left: 40px; counter-increment: rk; }
.art .risks li + li { margin-top: 30px; }
.art .risks li::before { content: counter(rk); content: counter(rk) / ""; position: absolute; left: 0; top: -0.04em; font: 400 28px/1 var(--figure); color: var(--ink); }
.art .risks li > b:first-child { display: block; margin-bottom: 6px; font: 700 19px/1.2 var(--label); letter-spacing: 0.06em; text-transform: uppercase; text-wrap: balance; }
.rk-mn { display: none; }
.rk-mn-lab { font-family: var(--label); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--ink); }
@media (min-width: 1200px) {
  .art .risks li:has(> .rk-mn) { display: grid; grid-template-columns: minmax(0, calc(28.5em - 40px)) 196px; grid-template-rows: auto 1fr; column-gap: 36px; align-items: start; max-width: none; }
  .art .risks li > .rk-t { grid-column: 1; min-width: 0; }
  /*  the drawing's own rules head it: no rule over it, unlike the notes of the other articles  */
  .art .risks li > .rk-mn { display: block; grid-column: 2; grid-row: 1 / span 2; margin-top: -6px; }
  .rk-mn svg { display: block; width: 196px; height: 132px; overflow: visible; }
}
/*  the formula is typeset, not boxed: one line on paper between two ink rules, its terms in italic,
    free to break on a narrow screen  */
.art .formula {
  max-width: none; margin: 26px 0; padding: 18px 20px 17px; text-align: center;
  font-size: 20px; line-height: 1.5; letter-spacing: 0.01em; text-wrap: balance;
  background: var(--paper); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
}
.art .formula i { font-style: italic; font-weight: 500; }
/*  The ten marks of the curve, read off a rate card clipped under the plate: paper, an ink edge
    with a hairline inside it, one row a mark and no row of column names. The turns in the fat
    figures; a brass rod as long as the share is of the cap, then a dotted leader to the share;
    what the row adds printed small after it. The row the slider stands on is inked in mustard.  */
.rate-card {
  display: block; width: 100%; margin-top: 16px; padding: 6px clamp(12px, 2vw, 24px) 12px; container-type: inline-size;
  font-size: 17px; line-height: 1.3;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 6px;
  box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5.5px var(--ink);
}
.rate-card caption {
  display: block; padding: 10px 8px 12px; margin-bottom: 4px; text-align: center;
  font: 700 13px/1.3 var(--label); letter-spacing: 0.16em; text-transform: uppercase;
  background: linear-gradient(var(--ink), var(--ink)) 0 100% / 100% 2px no-repeat;
}
.rate-card thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rate-card tbody { display: block; }
.rate-card tr {
  display: grid; grid-template-columns: 10.6em minmax(0, 1fr) 7.6em; align-items: center; column-gap: 16px;
  min-height: 46px; margin: 0 -8px; padding: 5px 8px; border-radius: 5px;
  transition: background-color 0.16s var(--ease-out);
}
.rate-card td { min-width: 0; padding: 0; }
.rate-card tr.is-on { background: var(--mustard); }
.rc-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.rc-t b, .rc-s b { font: 400 24px/1 var(--figure); font-variant-numeric: tabular-nums; }
.rc-u { font: 700 12px/1 var(--label); letter-spacing: 0.14em; text-transform: uppercase; }
.rc-stop { font-size: 11px; }
.rc-s { display: flex; align-items: center; gap: 12px; }
.rc-track {
  flex: 1 1 auto; position: relative; min-width: 40px; height: 14px;
  background: radial-gradient(circle, var(--ink) 0 1.2px, transparent 1.7px) 0 50% / 9px 9px repeat-x;
}
.rc-bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--s, 0) * 100%); min-width: 14px;
  background: var(--brass); border: 2.5px solid var(--ink); border-radius: 7px; box-shadow: inset 0 -3px 0 var(--brass-deep);
}
.rc-s b { flex: none; width: 4.6em; text-align: right; }
.rc-a { font: 700 14px/1.2 var(--label); letter-spacing: 0.06em; white-space: nowrap; }
/*  on a narrow card (a phone, or the column beside the index at 1000 to 1200) the rod runs between
    the turns and the share, and what the row adds goes under it  */
@container (max-width: 600px) {
  .rate-card tr { grid-template-columns: 6.4em minmax(0, 1fr); row-gap: 3px; min-height: 0; padding: 8px; }
  .rc-t b, .rc-s b { font-size: 20px; }
  .rc-s { gap: 8px; }
  .rc-s b { width: 4.5em; }
  .rc-a { grid-column: 2; justify-self: end; font-size: 12px; }
  .rc-a:empty { display: none; }
}
/*  15, the questions: numbered in the margin like the articles, in the fat face of the figures; the
    question in Cabin bold on the reading column, its crank at the right end turning a quarter when
    it opens; the answer printed on a paper ticket cut round at its four corners, set under the
    question and a little askew, never twice at the same tilt  */
.qs { margin-top: 12px; border-bottom: 2px solid var(--ink); }
.qs details { border-top: 2px solid var(--ink); }
.qs summary {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: baseline;
  min-height: 64px; padding: 18px 2px 18px 0; list-style: none; cursor: pointer;
}
.qs summary::-webkit-details-marker { display: none; }
.qs summary:hover .q-t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.q-n { grid-column: 1; grid-row: 1; font: 400 28px/1 var(--figure); letter-spacing: 0; }
.q-t { grid-column: 2; grid-row: 1; min-width: 0; font: 700 20px/1.3 var(--text); }
/*  the crank sits on the question's first line, whatever the line count  */
.qs summary::before { grid-column: 3; grid-row: 1; align-self: start; margin: 5px 0 0 18px; }
/*  the ticket has no border: its ink edge and its four round bites are painted in its ground, so
    the bites show the page through and stay true at any size  */
.qs details > p {
  --nr: 12px;
  --bite: var(--cream) calc(var(--nr) - 2px), var(--ink) calc(var(--nr) - 1px) calc(var(--nr) + 1.5px), transparent calc(var(--nr) + 2.5px);
  position: relative; max-width: 31em; margin: 2px 6px 26px 44px; padding: 18px 26px 20px;
  font-size: 17px; line-height: 1.6;
  background:
    radial-gradient(circle at 0 0, var(--bite)), radial-gradient(circle at 100% 0, var(--bite)),
    radial-gradient(circle at 0 100%, var(--bite)), radial-gradient(circle at 100% 100%, var(--bite)),
    linear-gradient(var(--ink), var(--ink)) var(--nr) 0 / calc(100% - 2 * var(--nr)) 3px no-repeat,
    linear-gradient(var(--ink), var(--ink)) var(--nr) 100% / calc(100% - 2 * var(--nr)) 3px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 var(--nr) / 3px calc(100% - 2 * var(--nr)) no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% var(--nr) / 3px calc(100% - 2 * var(--nr)) no-repeat,
    var(--paper);
  transform: rotate(-0.5deg);
}
.qs details:nth-child(even) > p { transform: rotate(0.4deg); }
.qs details:nth-child(3n) > p { transform: rotate(-0.25deg); }
@keyframes q-print { from { opacity: 0; transform: translateY(-8px) rotate(-1.4deg); } }
.qs details[open] > p { animation: q-print 0.3s var(--ease-out) both; }
@media (min-width: 700px) {
  .qs summary { grid-template-columns: 112px minmax(0, 1fr) auto; margin-left: -112px; }
  .qs details > p { margin-left: 24px; }
}
@media (max-width: 559px) {
  .qs summary { grid-template-columns: 38px minmax(0, 1fr) auto; min-height: 60px; padding: 15px 0; }
  .q-n { font-size: 26px; }
  .q-t { font-size: 18px; }
  .qs summary::before { margin: 4px 0 0 12px; }
  .qs details > p { --nr: 10px; margin: 0 4px 22px 10px; padding: 15px 18px 17px; }
}

/* ═════════════════════ THE LAW, INSIDE ITS BOX ═════════════════════
   The page is set like the box it describes: its title stands between two full-bleed rules on
   graph paper, the kicker over the upper rule, the lead under the lower one, and each rule carries
   its name at the right, engraved like the lettering on a drawing.                             */
.doc main { padding-top: 0; }
.law-head {
  position: relative; overflow: hidden;
  padding: calc(var(--bar-h) + 17px + clamp(30px, 4.4vw, 60px)) 0 clamp(40px, 5vw, 68px);
  border-bottom: 3px solid var(--ink);
  background:
    linear-gradient(var(--grid) 1.6px, transparent 1.6px) 0 0 / 100% 120px,
    linear-gradient(90deg, var(--grid) 1.6px, transparent 1.6px) 0 0 / 120px 100%,
    linear-gradient(rgba(217, 207, 182, 0.55) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(90deg, rgba(217, 207, 182, 0.55) 1px, transparent 1px) 0 0 / 24px 100%,
    var(--paper);
}
.law-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 32px; padding-bottom: 14px; }
.law-lab { font: 700 13px/1.2 var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.law-top .law-lab { margin-left: auto; }
.law-box { position: relative; border-top: 6px solid var(--ink); border-bottom: 6px solid var(--ink); }
.law-box .wrap { position: relative; z-index: 1; padding-top: clamp(20px, 2.8vw, 40px); padding-bottom: clamp(24px, 3.2vw, 46px); }
/*  inside the box, right of the title: the anchor dotted across at mid-height, and the price since
    the box was drawn wandering between the rules to the pen, in the scenes' stroke; drawn by the
    page at the box's size, and left out under 700 px where the title fills the box  */
.law-price { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 699px) { .law-price { display: none; } }
.law-title { font: 400 clamp(56px, 10.4vw, 160px)/0.88 var(--display); letter-spacing: -0.012em; text-wrap: balance; }
.law-foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 48px; padding-top: 14px; }
.law-foot .law-lab { justify-self: end; }
.law-lead { max-width: 28em; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.55; text-wrap: pretty; }
.law-foot .live { margin-top: 14px; }
@media (min-width: 900px) {
  .law-foot { grid-template-columns: minmax(0, 1fr) auto; }
  .law-foot .law-lab { grid-column: 2; grid-row: 1; }
}
/*  on a phone the rules keep their names and leave the sums to article 01  */
@media (max-width: 559px) {
  .law-lab-x { display: none; }
  .law-box { border-width: 4px 0; }
}

/*  The index is a turns ruler: one ink rule, a tick for each article and a short one between two,
    a longer tick every fifth; the article in view carries the brass knob. Under 1000 px the index
    folds into one row, its marker a small crank that turns a quarter when the row opens.       */
.toc-fold > summary {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 2px;
  font: 700 15px/1 var(--label); letter-spacing: 0.14em; text-transform: uppercase;
  border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  cursor: pointer; list-style: none;
}
.toc-fold > summary::-webkit-details-marker { display: none; }
.toc-fold > summary::before, .faq summary::before {
  content: ""; flex: none; width: 26px; height: 26px; transform-origin: 8px 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Crect x='7' y='10.5' width='15.5' height='5' rx='2.5' fill='%23B98A35' stroke='%231F1B16' stroke-width='2'/%3E%3Ccircle cx='8' cy='13' r='5.3' fill='%23B98A35' stroke='%231F1B16' stroke-width='2'/%3E%3Ccircle cx='8' cy='13' r='1.7' fill='%231F1B16'/%3E%3Ccircle cx='21.2' cy='13' r='3.7' fill='%23F6EFDC' stroke='%231F1B16' stroke-width='2'/%3E%3C/svg%3E") 50% 50% / 26px 26px no-repeat;
  transition: transform 0.2s var(--ease-out);
}
.toc-fold[open] > summary::before, .faq details[open] > summary::before { transform: rotate(90deg); }
.toc-list { padding: 16px 0 10px; columns: 2; column-gap: 18px; }
.toc-list li { position: relative; break-inside: avoid; }
/*  the rule is drawn one length per entry, so it runs on unbroken in one column or two  */
.toc-list li::before { content: ""; position: absolute; left: 34px; top: 0; bottom: 0; width: 3px; background: var(--ink); }
.toc-list li::after { content: ""; position: absolute; left: 34px; bottom: -1px; width: 8px; height: 2px; background: var(--ink); }
.toc-list li:last-child::after { display: none; }
.toc-list a { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 30px; align-items: baseline; padding: 7px 0 8px; font-size: 15px; text-decoration: none; }
.toc-list a::before { content: ""; position: absolute; left: 34px; top: 15px; width: 14px; height: 3px; background: var(--ink); }
.toc-list li:nth-child(5n) a::before { left: 25px; width: 23px; }
.toc-list a b { font: 400 15px/1.25 var(--figure); text-align: right; }
.toc-list a span { line-height: 1.25; color: var(--ink-70); }
.toc-list a:hover span { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.toc-list a.active span { color: var(--ink); font-weight: 700; }
.toc-list a.active::after {
  content: ""; position: absolute; left: 27px; top: 8px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--brass); border: 2.5px solid var(--ink);
}
@media (min-width: 1000px) {
  .toc-fold[open] > summary { display: none; }
  .toc-list { columns: auto; padding: 0; }
}

/* ═════════════════════ THE LAW'S DRAWINGS ═════════════════════
   Plates on graph paper, drawn by docs.js at the width they are given so their lettering keeps
   its own size: the box of article 01, the curve of the share with its slider and its spring in
   article 05. No frame: a sheet of graph paper between two ink rules, from the reading column to
   the screen's right edge (on a phone from edge to edge). The page keeps its frames for its two
   plates, the rate card and the parameters.                                                   */
.plate-law {
  position: relative; max-width: none; margin: 30px 0 0;
  border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  background:
    linear-gradient(var(--grid) 1.6px, transparent 1.6px) 0 0 / 100% 120px,
    linear-gradient(90deg, var(--grid) 1.6px, transparent 1.6px) 0 0 / 120px 100%,
    linear-gradient(rgba(217, 207, 182, 0.55) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(90deg, rgba(217, 207, 182, 0.55) 1px, transparent 1px) 0 0 / 24px 100%,
    var(--paper);
}
.plate-law svg { display: block; width: 100%; overflow: hidden; }
@media (max-width: 699px) { .plate-law { margin-left: calc(-1 * var(--gut)); margin-right: calc(-1 * var(--gut)); } }
.pl-lab { font-family: var(--label); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round; }
.pl-fig { font-family: var(--figure); font-size: 15px; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.pl-lab.pl-red { fill: var(--red-ink); }
.pl-lab.pl-blue { fill: var(--blue); }
.pl-lab.pl-flat { stroke: none; }

/*  Three articles further down get a small drawing of the mechanism each, never the same format
    twice: 08 is a plate of two boxes, one the other turned over; 10 is the reserve as a sealed
    tin standing on the paper, cut by the foot of its figure, a pipe running in from beyond the
    left edge and one running out beyond the right; 11 is a ruler that runs off the screen.     */
.law-fig { position: relative; margin-top: 30px; }
.law-fig svg { display: block; width: 100%; overflow: hidden; }
.fig-tin { margin-top: 24px; overflow: hidden; border-bottom: 3px solid var(--ink); }
.fig-dust { margin-top: 24px; margin-right: calc(-1 * var(--bleed, 0px)); }
@media (max-width: 699px) { .fig-tin { margin-left: calc(-1 * var(--gut)); margin-right: calc(-1 * var(--gut)); } }
/*  from 700px every plate runs from the reading column to the screen's right edge (docs.js writes
    --bleed-r, the paper between the two): the screen cuts the drawing, no frame on that side. The
    rate card's hairline runs on past the edge too.  */
@media (min-width: 700px) {
  .plate-law { margin-right: calc(-1 * var(--bleed-r, 0px)); }
  .rate-card { margin-right: calc(-1 * var(--bleed-r, 0px)); border-right: 0; border-radius: 6px 0 0 6px; }
  .fig-tin { margin-right: calc(-1 * var(--bleed-r, 0px)); }
  .rate-card { position: relative; width: auto; box-shadow: none; }
  .rate-card::after { content: ""; position: absolute; inset: 4px -40px 4px 4px; border: 1.5px solid var(--ink); border-radius: 3px; pointer-events: none; }
}

/*  Margin notes: from 1200px an article without a drawing carries its key figure in the right
    margin, taken from its own words: a short ink rule, the figure in the fat face, a stamped
    caption. The reading flows past it. It repeats the article, so screen readers skip it.  */
.mn { display: none; }
@media (min-width: 1200px) {
  .art:has(> .mn) { display: flow-root; }
  .mn { display: block; float: right; clear: right; width: 196px; margin: 6px 0 26px 36px; padding-top: 16px; border-top: 3px solid var(--ink); }
  .mn-fig { display: block; font: 400 56px/0.9 var(--figure); letter-spacing: 0; }
  .mn-cap { display: block; margin-top: 12px; font: 700 13px/1.4 var(--label); letter-spacing: 0.12em; text-transform: uppercase; text-wrap: balance; }
  .mn .win { margin: 0; padding: 7px; font-size: 46px; }
  .mn .win-c + .win-c { border-left-width: 5px; }
  .mn .win.is-stopped::before, .mn .win.is-stopped::after { left: 7px; right: 7px; height: 22%; }
  .mn .win.is-stopped::before { top: 7px; }
  .mn .win.is-stopped::after { bottom: 7px; }
  .mn-stamp { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%) rotate(-7deg); font-size: 14px; }
  .mn-row { display: grid; grid-template-columns: 0.62em minmax(0, 1fr); align-items: center; column-gap: 14px; font: 400 56px/0.9 var(--figure); }
  .mn-row + .mn-row { margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--ink); }
  .mn-row .mn-cap { margin: 0; font-size: 13px; }
  .mn .set { margin-top: 10px; transform: rotate(-3deg); }
}

/*  One band across the whole page, between articles 10 and 11: the box's two rules in ink from
    edge to edge of the screen, blueprint paper between them, and the line of article 10 set in
    the tin's lettering inside. It passes over the index as it scrolls by.                       */
/*  the band's paper runs past the column on both sides: the page clips it at the screen's edges
    (clip, not hidden, so the index stays sticky and nothing scrolls sideways)  */
#articles { overflow-x: clip; }
.law-band { position: relative; z-index: 3; margin: 104px 0; padding: clamp(46px, 5.4vw, 72px) 0 clamp(50px, 5.8vw, 78px); color: var(--cream); }
.law-band::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -100vw; right: -100vw;
  border-top: 6px solid var(--ink); border-bottom: 6px solid var(--ink);
  background:
    linear-gradient(rgba(246, 239, 220, 0.17) 1.6px, transparent 1.6px) 0 0 / 100% 120px,
    linear-gradient(90deg, rgba(246, 239, 220, 0.17) 1.6px, transparent 1.6px) 0 0 / 120px 100%,
    linear-gradient(rgba(246, 239, 220, 0.07) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(90deg, rgba(246, 239, 220, 0.07) 1px, transparent 1px) 0 0 / 24px 100%,
    var(--blue);
}
.law-band p { max-width: 13em; font: 400 clamp(36px, 5vw, 70px)/1.03 var(--display); letter-spacing: -0.01em; text-wrap: balance; }
.law-band p span { color: var(--mustard); }
@media (min-width: 700px) { .law-band { padding-left: 112px; } }

/*  the curve: its reading on top in the fat figures, the plot and the spring under it, and the
    knob of the slider riding the turns ruler itself, under the marker it moves  */
.curve-plate { padding: 20px 0 18px; }
/*  the reading is labelled like every figure of the ledger: its stamped name, then the figure  */
.curve-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 0 clamp(14px, 2.4vw, 24px); }
.curve-read { font: 400 clamp(32px, 3.4vw, 40px)/1 var(--figure); letter-spacing: 0.005em; white-space: nowrap; }
.curve-read b { display: inline-block; font-weight: 400; text-align: right; }
#cr-t { min-width: 1.95em; }
#cr-s { min-width: 2.9em; }
.curve-lab { font: 700 13px/1.2 var(--label); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
.curve-box { position: relative; margin-top: 10px; }
.curve-range {
  position: absolute; left: 0; top: 0; width: 100%; height: 36px; margin: 0; padding: 0;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
}
.curve-range::-webkit-slider-runnable-track { height: 36px; background: transparent; }
.curve-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: 4px; border-radius: 50%; background: var(--brass); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px var(--cream); }
.curve-range::-moz-range-track { height: 36px; background: transparent; }
.curve-range::-moz-range-thumb { box-sizing: border-box; width: 28px; height: 28px; border-radius: 50%; background: var(--brass); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px var(--cream); }
.curve-range:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 18px; }
.curve-range:active::-webkit-slider-thumb { background: var(--brass-deep); }

/*  the order inside an opening: five stations on one ink rule, down the page on a phone and
    across it on a wide screen, where the rule runs out into the margin of the numerals  */
.art .stations { position: relative; counter-reset: st; display: grid; gap: 18px; margin-top: 26px; }
.stations li { position: relative; counter-increment: st; min-height: 52px; max-width: none; padding: 12px 0 0 72px; font-size: 16px; line-height: 1.5; }
.stations li::before {
  content: counter(st); position: absolute; left: 0; top: 0; z-index: 1;
  display: grid; place-items: center; width: 52px; height: 52px; padding-top: 3px;
  border-radius: 50%; background: var(--cream); border: 3px solid var(--ink); font: 400 24px/1 var(--figure);
}
.stations li:not(:last-child)::after { content: ""; position: absolute; left: 24.5px; top: 26px; width: 3px; height: calc(100% + 18px); background: var(--ink); }
@media (min-width: 1100px) {
  .art .stations { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 22px; margin-left: -112px; }
  .stations::before { content: ""; position: absolute; left: 0; right: 0; top: 24.5px; height: 3px; background: var(--ink); }
  .stations li { padding: 72px 0 0; }
  .stations li:not(:last-child)::after { display: none; }
}

/* ═════════════════════ THE APP ═════════════════════ */
.app main { padding-top: calc(var(--bar-h) + 17px); }
/*  the status strip: a cream strip under the valance, its readings stamped in Barlow caps and
    parted by small tin stars. The chain's lamp is brass, lit while the chain answers and dark when
    it does not, never green or red; the source of the box is the last reading.  */
.status { background: var(--cream); color: var(--ink); border-bottom: 3px solid var(--ink); }
.status-in { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; padding-top: 9px; padding-bottom: 9px; font: 700 13px/1.25 var(--label); letter-spacing: 0.1em; text-transform: uppercase; }
.st-i { display: inline-block; white-space: nowrap; }
.st-i + .st-i::before { content: ""; display: inline-block; width: 13px; height: 13px; margin: 0 12px; vertical-align: -1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 3l4.9 11.2L37 15.4l-9.2 8 2.8 11.9L20 29l-10.6 6.3 2.8-11.9-9.2-8 12.1-1.2z' fill='%23B98A35' stroke='%231F1B16' stroke-width='3.6' stroke-linejoin='round'/%3E%3C/svg%3E") 50% 50% / contain no-repeat; }
.status b { font-weight: 700; font-variant-numeric: tabular-nums; }
.st-dot { display: inline-block; width: 12px; height: 12px; margin-right: 9px; vertical-align: -1px; border-radius: 50%; background: var(--shade); box-shadow: 0 0 0 2px var(--ink); }
.st-dot.on { background: var(--brass); box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 2px var(--mustard); }
/*  Narrower than one line can hold, the strip is two lines: the chain and the source at the two
    ends of the first, the readings of the moment on the second, from its start.  */
@media (max-width: 899px) {
  .status-in { row-gap: 0; column-gap: 0; padding-top: 6px; padding-bottom: 6px; }
  .status-in > * { margin-top: 3px; margin-bottom: 3px; }
  .status-in::after { content: ""; order: 1; flex: 0 0 100%; height: 0; }
  .status-in > .st-i:not(:first-child) { order: 2; }
  .status-in > .st-i:nth-child(2)::before { display: none; }
  .status-in > .st-src { order: 0; margin-left: auto; }
  .status-in > .st-src::before { display: none; }
}
/*  a phone has no room for it on the first line; the band says the same in words  */
@media (max-width: 479px) { .status-in > .st-src { display: none; } }
/*  No pills on headings: what a panel reads is said in the eyebrow over its title, in the same
    Barlow caps as every eyebrow, and the strip names its source as one more reading.  */
.cc-live { margin-left: 12px; vertical-align: 0.5em; font: 700 13px/1 var(--label); letter-spacing: 0.14em; text-transform: uppercase; }

/*  the title: the tin's lettering, two lines, over the band of the box. On a wide screen it is held
    to the height of the view too (about 80px at 1280 by 800), so the band and the share written
    under it stand whole in the first screen  */
.app-title { padding: clamp(16px, 1.4vw, 26px) 0 clamp(12px, 1vw, 20px); }
.app-title .kicker { margin-bottom: clamp(8px, 0.9vw, 14px); }
.app-h1 { font: 400 clamp(48px, min(7.4vw, 10vh), 116px)/0.9 var(--display); letter-spacing: -0.01em; }
.app-h1 > span { display: block; text-wrap: balance; }

/*  The box band: the app's one figure. A full-bleed sheet of graph paper between two ink edges,
    the counter window of the turns blown up on it and the tin standing at its right, both wound
    by the chain's own blocks. app.js sizes the rows from the drawing (--bb-lid, --bb-box,
    --bb-under) and the drawing then reads where the row of the box landed, so the two rules at
    rest run along the window's top and foot. Names stand above the upper rule; under the lower one
    the share the turns would burn is written enormous, then the reading of the band; on a wide
    screen the chain's own crank takes a column at the right (--cc-w).  */
.box-sec { position: relative; background: var(--cream); }
.box-band {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: var(--gut) minmax(0, 1fr) var(--cc-w, 0px) var(--gut);
  grid-template-rows: auto var(--bb-lid, 44px) var(--bb-box, 240px) minmax(var(--bb-under, 96px), auto) auto;
  padding: clamp(14px, 1.4vw, 22px) 0 clamp(22px, 2.6vw, 34px);
  border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  background:
    linear-gradient(var(--grid) 1.6px, transparent 1.6px) 0 0 / 100% 120px,
    linear-gradient(90deg, var(--grid) 1.6px, transparent 1.6px) 0 0 / 120px 100%,
    linear-gradient(rgba(217, 207, 182, 0.55) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(90deg, rgba(217, 207, 182, 0.55) 1px, transparent 1px) 0 0 / 24px 100%,
    var(--paper);
}
.box-band > .scene-host { z-index: 0; }
.box-band > :not(.scene-host), .cc-h, .cc-mid, .cc-foot { position: relative; z-index: 1; }
.bb-top { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.bb-h, .cc-h { font: 700 14px/1.2 var(--label); letter-spacing: 0.12em; text-transform: uppercase; }
/*  an empty mark in the row of the box: the drawing reads its top for the upper rule  */
.bb-row { grid-column: 2; grid-row: 3; }
/*  the reading under the lower rule, stopping short of the pen so the tub stands clear of it  */
.bb-mode {
  grid-column: 2; grid-row: 5; align-self: start; margin-top: 30px; max-width: 28.5em;
  font-size: 19px; line-height: 1.55; color: var(--ink); text-wrap: pretty;
}
.bb-mode b { font-weight: 700; }

/*  Under the lower rule, left of the tub: what the turns in the window would burn now, written
    enormous on drums of its own (one digit a drum, so it never shifts while it counts), its line,
    then the rest of the reading between two rules like the box's own. The distances to the rules
    join that line only where the window's frame is too thin to carry them (app.js sets bezel-on).  */
.bb-worth {
  grid-column: 2; grid-row: 4; align-self: start; margin-top: 16px; min-width: 0;
  max-width: calc(var(--pen-x, 100vw) - var(--gut) - 28px);
  container-type: inline-size;
}
.bw-lab { display: block; font: 700 13px/1.15 var(--label); letter-spacing: 0.14em; text-transform: uppercase; }
.bw-fig { display: flex; align-items: flex-start; margin: 10px 0 0 -0.04em; font: 400 clamp(64px, 11vw, 120px)/0.84 var(--figure); color: var(--ink); white-space: nowrap; }
@supports (width: 1cqi) { .bw-fig { font-size: clamp(64px, 25cqi, 120px); } }
.bw-fig .wd { display: inline-block; width: 0.7em; text-align: center; }
.bw-fig .wp { display: inline-block; width: 0.3em; text-align: center; }
.bw-fig .wu { margin: 0.07em 0 0 0.12em; font-size: 0.42em; line-height: 1; }
.bw-sub { display: block; margin-top: 14px; max-width: 24em; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.45; text-wrap: balance; }
.bw-sub b { font-variant-numeric: tabular-nums; }
.bw-line { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; margin-top: 20px; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.bw-line > div { min-width: 0; padding: 10px 16px 11px 0; }
.bw-line > div:nth-child(n + 3) { border-top: 2px solid var(--ink); }
.bw-line dt { font: 700 13px/1.2 var(--label); letter-spacing: 0.12em; text-transform: uppercase; }
.bw-line dd { margin-top: 6px; font: 400 28px/1 var(--figure); white-space: nowrap; }
.bw-line dd small { margin-left: 6px; font: 700 12px/1 var(--label); letter-spacing: 0.12em; text-transform: uppercase; }
.bw-burned dd { color: var(--red); }
.bezel-on .bw-dist { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/*  the chain's own crank: a dial turned by the chain's blocks, the count of them in the fat face,
    then what it is. On a wide screen: its name above the upper rule, the dial and the count between
    the rules, the words under the lower one. Narrower, one row at the foot of the band.  */
.cc {
  grid-column: 2; grid-row: 6; display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "h h" "dial fig" "dial lab" "note note"; gap: 6px 18px; margin-top: 26px;
}
.cc-h { grid-area: h; margin-bottom: 8px; }
.cc-mid, .cc-foot { display: contents; }
.cc-dial { grid-area: dial; align-self: center; width: 112px; height: 112px; }
.cc-fig { grid-area: fig; align-self: end; font: 400 30px/1 var(--figure); white-space: nowrap; }
.cc-lab { grid-area: lab; align-self: start; }
.cc-note { grid-area: note; }
.cc-lab { font: 700 13px/1.25 var(--label); letter-spacing: 0.12em; text-transform: uppercase; max-width: 30ch; }
.cc-note { margin-top: 12px; max-width: 28.5em; font-size: 15px; line-height: 1.5; color: var(--ink-70); text-wrap: pretty; }
#real-arm { transition: transform 0.18s var(--ease-snap); transform-origin: 56px 56px; }
@media (min-width: 1200px) {
  .cc { display: contents; }
  .cc-h { grid-column: 3; grid-row: 2; align-self: end; margin-bottom: 14px; }
  .cc-mid { grid-column: 3; grid-row: 3; align-self: center; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
  .cc-fig, .cc-dial { align-self: flex-start; }
  .cc-dial { width: 140px; height: 140px; }
  .cc-foot { grid-column: 3; grid-row: 4; align-self: start; display: block; margin-top: 24px; }
}
/*  on a phone and a small tablet the reading goes under the tub, the whole width  */
@media (max-width: 899px) {
  .bb-worth { grid-row: 5; margin-top: 10px; max-width: none; }
  .bb-mode { grid-row: 6; margin-top: 26px; max-width: 28.5em; font-size: 17px; }
  .cc { grid-row: 7; }
}
@media (max-width: 559px) {
  .box-band { border-width: 3px 0; }
  .st-gas { display: none; }
  /*  on a phone the second line is two readings held to the two edges, the block and the wallet,
      with no star between them. A block number too long for the line sends the wallet under it,
      never against it.  */
  .status-in { column-gap: 16px; }
  .st-i + .st-i::before { display: none; }
  .st-w { margin-left: auto; }
  .cc-dial { width: 96px; height: 96px; }
  .cc-fig { font-size: 28px; }
  .cc { column-gap: 14px; }
}

/*  under the band, on cream: the practice box  */
.bb-read { padding-top: clamp(26px, 3vw, 40px); padding-bottom: clamp(34px, 4vw, 56px); }
/*  the practice box: what it is, the two keys that work it, and while no wallet is connected a
    stamped line saying they are shut  */
.practice { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px var(--col-gap); align-items: center; }
.practice-note { max-width: 28.5em; font-size: 17px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.pk-row { display: flex; flex-wrap: wrap; gap: 12px 14px; }
.pk-shut { font: 700 13px/1.2 var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.pk-shut::before { content: ""; display: inline-block; width: 12px; height: 14px; margin-right: 9px; vertical-align: -2px; background: var(--lock) 50% 50% / contain no-repeat; }
@media (min-width: 1000px) {
  .practice { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .practice-note { grid-column: 1 / 7; grid-row: 1 / 3; }
  .pk-row { grid-column: 7 / 13; justify-content: flex-end; }
  .pk-shut { grid-column: 7 / 13; text-align: right; }
}
.app-band { padding: clamp(28px, 4vw, 52px) 0; }
.app-band + .app-band { border-top: 4px solid var(--ink); }
.app-band.alt { background: var(--paper); }

/*  The panel asks for a wallet before it answers to anything. Nothing has launched, so a key
    marked Buy that works is a promise the site cannot keep.  */


/* ═════════════════════ THE BOOTH: YOUR SWAP ═════════════════════
   The swap is quoted at a ticket booth: a striped awning carried down two brass posts, the
   counter one panel (a two-position lever for the side, the size in a counter window, four small
   plates), and the quote printed as a ticket whose stub carries the box drawn as a gauge.      */
.booth { position: relative; background: var(--cream); padding-bottom: clamp(48px, 5.6vw, 84px); }
/*  the awning: flat red and cream stripes between ink edges, a scallop hanging under each stripe  */
.awning {
  position: relative; z-index: 1; height: clamp(28px, 2.8vw, 40px);
  border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  background: repeating-linear-gradient(90deg, var(--red) 0 40px, var(--cream) 40px 80px);
}
.awning::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(100% + 3px); height: 20px; pointer-events: none;
  background:
    radial-gradient(circle at 20px 0, var(--red) 0 15.4px, var(--ink) 16px 18.6px, transparent 19.2px) 0 0 / 80px 20px repeat-x,
    radial-gradient(circle at 20px 0, var(--cream) 0 15.4px, var(--ink) 16px 18.6px, transparent 19.2px) 40px 0 / 80px 20px repeat-x;
}
.booth-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px var(--col-gap); padding-top: clamp(50px, 5.4vw, 80px); }
.booth-head { display: block; }
@media (min-width: 1000px) {
  .booth-in { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .booth-head { grid-column: 1 / -1; margin-bottom: 8px; }
  .counter { grid-column: 1 / -1; grid-row: 2; margin-bottom: 14px; }
  .qt { grid-column: 1 / 8; grid-row: 3 / span 3; }
  .verdict, .swap-keys, .send-note { grid-column: 8 / 13; }
  .verdict { grid-row: 3; }
  .swap-keys { grid-row: 4; }
  .send-note { grid-row: 5; }
}

/*  the gate: a mustard tag, its name stamped, its reason, its own key (hung on the panel below)  */
.gate {
  position: relative; display: grid; gap: 10px; border: 3px solid var(--ink); box-shadow: inset 0 -5px 0 var(--mustard-deep);
}
.gate[hidden] { display: none; }
.gate-lab { font: 700 14px/1.2 var(--label); letter-spacing: 0.12em; text-transform: uppercase; }
.gate-lab::before { content: ""; display: inline-block; width: 12px; height: 14px; margin-right: 9px; vertical-align: -2px; background: var(--lock) 50% 50% / contain no-repeat; }
.gate-txt { max-width: 28.5em; font-size: 16px; line-height: 1.5; color: var(--ink); }
.gate .key { justify-self: start; margin-top: 4px; }

/*  the side: a lever mounted on the panel. An ink stem on a brass hub, a brass ball for a knob,
    leaning along an engraved gate toward the side in force; BUY and SELL in two windows at its two
    ends, the one in force lit mustard. Each half of the lever is its key. Buy and sell are
    the same key in the same colours: which way the price leaves changes nothing.  */
.lever {
  --at: 0;
  position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 360px); height: 116px;
}
.lever-frame { position: absolute; z-index: 1; left: 50%; bottom: 0; width: 120px; height: 104px; margin-left: -60px; overflow: visible; pointer-events: none; }
.lv-rail { fill: var(--brass); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.lv-notch { fill: none; stroke: var(--ink); stroke-width: 3; }
.lv-base { fill: var(--brass); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.lv-arm {
  transform-box: view-box; transform-origin: 60px 86px;
  transform: rotate(calc((var(--at) * 2 - 1) * 24deg)); transition: transform 0.34s var(--ease-throw);
}
.lv-stem-k { fill: none; stroke: var(--paper); stroke-width: 13; stroke-linecap: round; }
.lv-stem { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }
.lv-ball { fill: var(--brass); stroke: var(--ink); stroke-width: 3; }
.lv-glint { fill: var(--cream); }
.lv-hub { fill: var(--brass); stroke: var(--ink); stroke-width: 3; }
.lv-slot { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.lever .side {
  position: relative; display: flex; align-items: flex-start; justify-content: flex-start;
  padding: 25px 0 0 clamp(12px, 5.5%, 20px); border: 0; background: transparent; cursor: pointer;
}
.lever #k-sell { justify-content: flex-end; padding: 25px clamp(12px, 5.5%, 20px) 0 0; }
.lever .side span {
  display: block; min-width: 86px; padding: 11px 14px 9px; text-align: center;
  font: 700 18px/1 var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-70);
  background: var(--paper); border: 2.5px solid var(--ink); border-radius: 6px; box-shadow: inset 0 3px 0 var(--shade);
  transition: background-color 0.16s var(--ease-out), color 0.16s var(--ease-out);
}
.lever .side:not(:disabled):hover span { background: #F5E5BF; color: var(--ink); }
.lever .side[aria-pressed="true"] span { color: var(--ink); background: var(--mustard); box-shadow: inset 0 -3px 0 var(--mustard-deep); }
.lever .side:focus-visible { outline: none; }
.lever .side:focus-visible span { outline: 3px solid var(--blue); outline-offset: 3px; }
/*  shut: the ball and the hub go unlit, the words stay legible; the side in force stays marked,
    in ink-70  */
.lever .side:disabled { cursor: not-allowed; }
.lever .side:disabled span { color: var(--ink-70); background: var(--shade); border-color: var(--ink-70); box-shadow: none; }
.lever .side[aria-pressed="true"]:disabled span { color: var(--cream); background: var(--ink-70); border-color: var(--ink); }
.lever:has(.side:disabled) .lv-ball, .lever:has(.side:disabled) .lv-hub, .lever:has(.side:disabled) .lv-base { fill: var(--shade); }
.lever:has(.side:disabled) .lv-stem { stroke: var(--ink-70); }
.lever:has(.side:disabled) .lv-stem-k { stroke: var(--shade); }
.lever:has(.side:disabled) .lv-glint { fill: transparent; }
.lever:has(.side:disabled) .lv-rail { fill: var(--shade); }

/*  the size: a counter window like the tin's own. An ink frame with a brass screw in each corner,
    a face of paper with its shaded ends, the figures in the fat face  */
.amount { display: block; margin-top: 24px; }
.amount-win {
  display: block; padding: 8px; border-radius: 10px;
  background:
    radial-gradient(circle at 6px 6px, var(--brass) 0 2.4px, transparent 2.9px),
    radial-gradient(circle at calc(100% - 6px) 6px, var(--brass) 0 2.4px, transparent 2.9px),
    radial-gradient(circle at 6px calc(100% - 6px), var(--brass) 0 2.4px, transparent 2.9px),
    radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), var(--brass) 0 2.4px, transparent 2.9px),
    var(--ink);
}
.amount-win input {
  display: block; width: 100%; min-width: 0; height: 76px; padding: 7px 20px 0; border: 0; border-radius: 4px;
  font: 400 44px/1 var(--figure); color: var(--ink); letter-spacing: 0.02em;
  background: linear-gradient(var(--shade) 0 13%, var(--ink) 13% calc(13% + 2px), var(--paper) calc(13% + 2px) calc(87% - 2px), var(--ink) calc(87% - 2px) 87%, var(--shade) 87%);
  -moz-appearance: textfield; appearance: textfield;
}
.amount-win input::-webkit-outer-spin-button, .amount-win input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.amount-win input:focus { outline: 3px solid var(--blue); outline-offset: 11px; }
.amount-win input:disabled {
  opacity: 1; color: var(--ink-70);
  background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(31, 27, 22, 0.1) 6px 7.5px),
    linear-gradient(var(--shade) 0 13%, var(--ink) 13% calc(13% + 2px), var(--paper) calc(13% + 2px) calc(87% - 2px), var(--ink) calc(87% - 2px) 87%, var(--shade) 87%);
}

/*  the sizes to try: four small plates, a 3 px ink edge and a shade lip, the pressed one in ink.
    No rivets: they belong to the 60 px keys, and on a plate this small they crowd the figure.  */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.chips .chip {
  position: relative; min-width: 64px; min-height: 48px; padding: 4px 16px 6px;
  border: 3px solid var(--ink); border-radius: 6px; background: var(--cream); color: var(--ink);
  box-shadow: inset 0 -4px 0 var(--shade); font: 400 20px/1 var(--figure);
  transition: transform var(--key-t) var(--ease-out);
}
.chips .chip:not(:disabled):hover { transform: translateY(-2px); }
.chips .chip:not(:disabled):active { transform: translateY(2px); box-shadow: inset 0 -2px 0 var(--shade); }
.chips .chip[aria-pressed="true"] { background: var(--ink); color: var(--cream); box-shadow: inset 0 -4px 0 #000; }
/*  shut, the chips are shut plates too: hatched shade, soft ink; the size in the window keeps its
    plate pressed, in the soft ink  */
.chips .chip:disabled { color: var(--ink-70); background: var(--shut-ground); box-shadow: inset 0 -4px 0 var(--shut-lip); }
.chips .chip[aria-pressed="true"]:disabled { color: var(--cream); background: var(--ink-70); box-shadow: inset 0 -4px 0 var(--ink); }

/*  The counter is one control panel: a single enamel plate of paper, a 3 px ink edge, a screw in
    each corner, and on it the lever, the size window and the sizes to try, each under its stamped
    name (one row from 1000 px). The lever loses its own plate on it. While no wallet is connected
    the gate hangs over the panel as a mustard tag on two brass rings that pass over the panel's
    top edge, its own Connect key on it; from 1000 px it hangs at the panel's right end, over the
    sizes to try (shut with the rest), so the panel does not move when it goes.  */
.counter {
  --pn-screw: var(--brass) 0 3.6px, var(--ink) 4.1px 6px, transparent 6.5px;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px;
  padding: 26px clamp(18px, 2.6vw, 32px) 26px; border: 3px solid var(--ink); border-radius: 12px;
  background:
    radial-gradient(circle at 13px 13px, var(--pn-screw)), radial-gradient(circle at calc(100% - 13px) 13px, var(--pn-screw)),
    radial-gradient(circle at 13px calc(100% - 13px), var(--pn-screw)), radial-gradient(circle at calc(100% - 13px) calc(100% - 13px), var(--pn-screw)),
    var(--paper);
  box-shadow: inset 0 -5px 0 var(--shade);
}
.pn-side, .pn-try { min-width: 0; }
.pn-lab, .amount-lab { display: block; margin-bottom: 10px; font: 700 13px/1.2 var(--label); letter-spacing: 0.12em; text-transform: uppercase; }
.counter .amount { margin-top: 0; }
.counter .chips { margin-top: 0; }
/*  the panel's foot: one engraved line across it, and the sentence that goes with the lever  */
.counter > .pn-foot { padding-top: 16px; max-width: none; font-size: 15px; line-height: 1.5;
  background: linear-gradient(var(--ink) 0 2px, var(--cream) 2px 3px, transparent 3px) 0 0 / 100% 3px no-repeat; }
/*  the tag: mustard enamel, two punched holes at its head, a brass ring through each  */
.counter .gate {
  z-index: 3; margin: -22px 0 0; padding: 26px 22px 20px; border-radius: 6px;
  background:
    radial-gradient(circle at 22% 13px, var(--ink) 0 4.6px, transparent 5.1px),
    radial-gradient(circle at 78% 13px, var(--ink) 0 4.6px, transparent 5.1px),
    var(--mustard);
  transform: rotate(-1deg); transform-origin: 50% 0;
}
.counter .gate::before, .counter .gate::after {
  content: ""; position: absolute; top: -17px; width: 30px; height: 34px; margin-left: -15px;
  border: 5px solid var(--brass); border-radius: 50%;
  box-shadow: 0 0 0 2.5px var(--ink), inset 0 0 0 2.5px var(--ink); pointer-events: none;
}
.counter .gate::before { left: 22%; }
.counter .gate::after { left: 78%; }
@media (min-width: 1000px) {
  .counter { grid-template-columns: 340px minmax(0, 440px) auto; justify-content: space-between; column-gap: clamp(26px, 3vw, 44px); align-items: start; padding: 24px 32px 26px; }
  .counter .gate { position: absolute; top: 2px; right: 26px; width: min(390px, 38%); margin: 0; }
  /*  the sentence stops short of where the tag hangs  */
  .counter > .pn-foot { grid-column: 1 / -1; padding-right: max(0px, calc(100% - 33em)); }
  /*  the three instruments stand the lever's height: the size is the panel's one big figure,
      the four sizes to try sit two by two  */
  .counter .amount-win input { height: 100px; font-size: 60px; }
  .counter .chips { display: grid; grid-template-columns: repeat(2, minmax(68px, auto)); gap: 12px; }
  .counter .chips .chip { min-height: 52px; }
}
/*  the booth: the awning carried down the sides as two brass posts, standing on the next band's
    ink edge, so the panel and the ticket stand inside one booth  */
@media (min-width: 700px) {
  .booth::before, .booth::after {
    content: ""; position: absolute; z-index: 0; top: clamp(28px, 2.8vw, 40px); bottom: 0; width: 10px;
    background: var(--brass); border: 2.5px solid var(--ink); border-bottom: 0;
    left: calc(max(0px, (100% - 1320px) / 2) + var(--gut) / 2 - 5px);
  }
  .booth::after { left: auto; right: calc(max(0px, (100% - 1320px) / 2) + var(--gut) / 2 - 5px); }
}

/*  The quote is a ticket. Its stub is graph paper carrying the box drawn as a gauge (app.js), a
    perforated line parts it from the body, and the ticket is bitten at both ends of that line.
    The body prints the three figures that decide a swap large, the other four small.  */
.qt {
  --stub: 216px; --bite: 12px;
  position: relative; display: grid; grid-template-columns: var(--stub) minmax(0, 1fr);
  background: var(--cream); border: 3px solid var(--ink); border-radius: 10px;
  -webkit-mask: radial-gradient(circle at calc(var(--stub) + 1.5px) 0, #0000 var(--bite), #000 calc(var(--bite) + 0.5px)) top / 100% 51% no-repeat,
                radial-gradient(circle at calc(var(--stub) + 1.5px) 100%, #0000 var(--bite), #000 calc(var(--bite) + 0.5px)) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle at calc(var(--stub) + 1.5px) 0, #0000 var(--bite), #000 calc(var(--bite) + 0.5px)) top / 100% 51% no-repeat,
        radial-gradient(circle at calc(var(--stub) + 1.5px) 100%, #0000 var(--bite), #000 calc(var(--bite) + 0.5px)) bottom / 100% 51% no-repeat;
}
/*  the ink rim of each bite  */
.qt::before, .qt::after {
  content: ""; position: absolute; left: calc(var(--stub) - 1.5px - var(--bite) - 3px); width: calc(2 * var(--bite) + 6px); height: calc(2 * var(--bite) + 6px);
  border: 3px solid var(--ink); border-radius: 50%; pointer-events: none;
}
.qt::before { top: calc(-3px - var(--bite) - 3px); }
.qt::after { bottom: calc(-3px - var(--bite) - 3px); }
.qt-stub {
  position: relative; min-height: 236px; border-right: 3px dotted var(--ink); border-radius: 7px 0 0 7px; overflow: hidden;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 -1px / 100% 12px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) -1px 0 / 12px 100%,
    var(--paper);
}
.q-gauge { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.q-lab { font: 700 12px/1 var(--label); letter-spacing: 0.1em; text-transform: uppercase; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.q-opens { font: 700 12px/1 var(--label); letter-spacing: 0.12em; text-transform: uppercase; fill: var(--ink); }
.qt-body { padding: 20px clamp(18px, 2vw, 28px) 20px; min-width: 0; }
.qt-big { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
.qt-big dt, .qt-rows dt { font: 700 13px/1.15 var(--label); letter-spacing: 0.12em; text-transform: uppercase; }
.qt-big dd { margin-top: 8px; font: 400 40px/1 var(--figure); white-space: nowrap; }
.qt-big dd small { margin-left: 7px; font: 700 13px/1 var(--label); letter-spacing: 0.12em; text-transform: uppercase; }
.qt-burn { grid-column: 1 / -1; }
.qt-burn dd .is-burn { color: var(--red); }
.qt-burn .qt-sub { display: block; margin-top: 8px; font: 400 15px/1.35 var(--text); color: var(--ink-70); white-space: normal; }
.qt-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; margin-top: 18px; padding-top: 16px; border-top: 2px solid var(--ink); }
.qt-rows dd { margin-top: 4px; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
/*  the verdict is read, not boxed  */
.verdict { max-width: 28.5em; font-size: 18px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.verdict b { font-weight: 700; }
/*  the two keys under the ticket: big plates side by side, each with its small line of its own  */
.swap-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 6px; }
.swap-keys .key { flex-direction: column; gap: 6px; min-height: 78px; padding: 12px calc(var(--rv) + 22px) 16px; white-space: normal; text-align: center; }
.swap-keys .key > span { font: 700 18px/1.1 var(--label); letter-spacing: 0.1em; }
.swap-keys .key small { display: block; font: 500 13px/1.3 var(--text); letter-spacing: 0; text-transform: none; opacity: 1; }
.send-note { max-width: 29.5em; }
@media (max-width: 699px) {
  .qt { --stubH: 208px; grid-template-columns: minmax(0, 1fr);
    -webkit-mask: radial-gradient(circle at 0 calc(var(--stubH) + 1.5px), #0000 var(--bite), #000 calc(var(--bite) + 0.5px)) left / 51% 100% no-repeat,
                  radial-gradient(circle at 100% calc(var(--stubH) + 1.5px), #0000 var(--bite), #000 calc(var(--bite) + 0.5px)) right / 51% 100% no-repeat;
    mask: radial-gradient(circle at 0 calc(var(--stubH) + 1.5px), #0000 var(--bite), #000 calc(var(--bite) + 0.5px)) left / 51% 100% no-repeat,
          radial-gradient(circle at 100% calc(var(--stubH) + 1.5px), #0000 var(--bite), #000 calc(var(--bite) + 0.5px)) right / 51% 100% no-repeat; }
  .qt::before, .qt::after { top: calc(var(--stubH) - 1.5px - var(--bite) - 3px); bottom: auto; }
  .qt::before { left: calc(-3px - var(--bite) - 3px); }
  .qt::after { left: auto; right: calc(-3px - var(--bite) - 3px); }
  .qt-stub { min-height: var(--stubH); height: var(--stubH); border-right: 0; border-bottom: 3px dotted var(--ink); border-radius: 7px 7px 0 0; }
  .qt-big dd { font-size: 36px; }
  .swap-keys { grid-template-columns: minmax(0, 1fr); }
}

/* ═════════════════════ READ FROM OUTSIDE ═════════════════════
   What comes from the chain is read off a plate of its own, beside the name of the section.  */
.outside { background: var(--cream); border-top: 3px solid var(--ink); padding: clamp(52px, 6vw, 92px) 0 clamp(52px, 6vw, 88px); }
.outside-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px var(--col-gap); }
.ro-note { margin-top: 18px; max-width: 28em; font-size: 17px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.wallet-keys { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media (min-width: 1000px) {
  .outside-in { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ro-head { grid-column: 1 / 5; }
}

/*  The chain's reading plate, the twin of the maker's plate on the home page: an enamel plate
    screwed at its four corners, a stamped top line with the chain's own lamp, then one engraved
    row a reading. The head of the chain is its meter, ink drums with cream figures set in a brass
    bezel and grouped in threes; the wallet and its balance are pilot lamps, shade glass until
    they are read and blue once they are; an address is set in fours and never cut inside one.  */
.rplate {
  --rp-pad: clamp(16px, 2.6vw, 34px);
  --screw: var(--brass) 0 4.4px, var(--ink) 4.9px 7.4px, transparent 7.9px;
  position: relative; min-width: 0; padding: 14px var(--rp-pad) 8px; color: var(--ink);
  border: 3px solid var(--ink); border-radius: 10px;
  background:
    radial-gradient(circle at 15px 15px, var(--screw)), radial-gradient(circle at calc(100% - 15px) 15px, var(--screw)),
    radial-gradient(circle at 15px calc(100% - 15px), var(--screw)), radial-gradient(circle at calc(100% - 15px) calc(100% - 15px), var(--screw)),
    var(--paper);
}
.rp-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; padding: 3px 26px 14px;
  font: 700 13px/1.3 var(--label); letter-spacing: 0.16em; text-transform: uppercase; text-align: center;
}
.rp { margin: 0; }
/*  an engraved row: a cut of ink, a hair of the plate, a finer cut under it  */
.rp-row {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 24px; align-items: center;
  margin: 0 calc(-1 * var(--rp-pad)); padding: 17px var(--rp-pad) 16px;
  background: linear-gradient(var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px) 0 0 / 100% 5px no-repeat;
}
.rp-row dt { display: flex; align-items: center; gap: 14px; font: 700 13px/1.25 var(--label); letter-spacing: 0.12em; text-transform: uppercase; }
.rp-row dd { min-width: 0; margin: 0; font-size: 17px; line-height: 1.45; text-wrap: pretty; }
@media (min-width: 560px) {
  .rp-row { grid-template-columns: 172px minmax(0, 1fr); }
}
/*  a figure read off the chain: Titan One on the plate, its unit stamped after it  */
.rp-fig { font: 400 clamp(26px, 2.6vw, 34px)/1 var(--figure); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.rp-unit { margin-left: 0.3em; font: 700 13px/1 var(--label); letter-spacing: 0.14em; text-transform: uppercase; }
/*  the meter: a brass bezel, ink drums parted by brass hairs, a wider brass stop every three  */
.meter {
  display: inline-flex; gap: 2px; padding: 5px; vertical-align: middle;
  font: 400 clamp(32px, 4vw, 52px)/1 var(--figure); color: var(--cream);
  background: var(--brass); border: 3px solid var(--ink); border-radius: 8px; box-shadow: inset 0 -3px 0 var(--brass-deep);
}
.meter .md {
  display: block; width: 0.74em; padding: 0.16em 0 0.1em; text-align: center; border-radius: 2px;
  background: linear-gradient(#0B0907 0 12%, var(--ink) 30% 70%, #0B0907 88%);
}
.meter .md.g { margin-left: 7px; }
/*  a pilot lamp: shade glass in a brass bezel, lit blue once its figure has been read  */
.lamp {
  flex: none; display: inline-block; width: 13px; height: 13px; margin: 6px; border-radius: 50%;
  background: var(--shade); box-shadow: 0 0 0 2px var(--ink), 0 0 0 5px var(--brass), 0 0 0 7px var(--ink);
}
.lamp.on { background: radial-gradient(circle at 34% 32%, var(--paper) 0 1.7px, transparent 2.3px), var(--blue); }
/*  an address in fours: the groups part without a character between them, so it copies whole  */
.addr { font: 700 16px/1.5 var(--label); letter-spacing: 0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.addr > span { white-space: nowrap; }
.addr > span:not(:last-child) { margin-right: 0.42em; }
/*  the manager's address is set on a line of its own, and opens on the explorer  */
.rp-pool dd { display: grid; justify-items: start; gap: 6px; }
a.addr { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--brass); }
a.addr:hover { text-decoration-color: var(--ink); }
@media (min-width: 1000px) {
  .rplate { grid-column: 5 / 13; align-self: start; }
}

/* ═════════════════════ NARROWER ═════════════════════ */
@media (max-width: 1100px) {
  .app-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .val-links { display: none; }
  .valance { grid-template-columns: auto 1fr; }
}
@media (max-width: 560px) {
  :root { --bar-h: 58px; }
  .gauge { width: 36px; }
  .stage-view { --drape: 18px; }
  body { font-size: 16px; }
  .val-brand span { font-size: 22px; }
  .val-brand img { width: 32px; height: 32px; }
  .val-keys { gap: 6px; }
  .val-icon { width: 34px; height: 34px; }
  .val-connect, .val-launch { --rv: 6px; min-height: 36px; padding: 0 17px 2px; font-size: 12px; letter-spacing: 0.06em; }
  .val-launch .wide { display: none; }
  .val-connect { padding-left: 10px; }
  .val-icon { box-shadow: inset 0 0 0 2.5px var(--brass), inset 0 0 0 4px var(--ink); }
  .val-icon svg { width: 16px; height: 16px; }
  .val-x { font-size: 14px; }
  .wallet-label { max-width: 9ch; }
  .pitch { font-size: 17px; line-height: 1.5; }
  .key-lg { --rv: 9px; min-height: 54px; padding: 0 calc(var(--rv) + 16px) 3px; font-size: 16px; letter-spacing: 0.08em; }
  .swap-keys { grid-template-columns: 1fr; }
  .cap { bottom: 7vh; }
}
/*  a phone of 375: the valance has to hold the mark, its name and four keys on one line  */
@media (max-width: 420px) {
  .valance { gap: 8px; padding-left: 8px; padding-right: 8px; }
  .val-brand { gap: 6px; }
  .val-keys { gap: 4px; }
  .val-icon { width: 32px; height: 32px; }
  .val-connect, .val-launch { --rv: 5px; padding: 0 17px 2px; letter-spacing: 0.04em; }
  .val-connect { padding-left: 8px; }
  .val-connect::after, .val-launch::before, .val-launch::after { width: 5px; height: 5px; margin-top: -4.5px; }
}
/*  a phone of 360, the commonest: the name steps down a size and the keys close up, so the name
    keeps well clear of the sound key; under 340 only the mark stands (the link keeps its name)  */
@media (max-width: 372px) {
  .valance { gap: 6px; padding-left: 7px; padding-right: 7px; }
  .val-brand { gap: 5px; }
  .val-brand img { width: 28px; height: 28px; }
  .val-brand span { font-size: 19px; }
  .val-keys { gap: 3px; }
  .val-connect, .val-launch { padding: 0 16px 2px; }
  .val-connect { padding-left: 7px; }
}
@media (max-width: 339px) {
  .val-brand span { display: none; }
}

/* ═════════════════════ WHEN MOTION IS NOT WANTED ═════════════════════ */

/* ---------- the finishing: how type sets, and where a link lands ---------- */

/*  Display lines break on their own balance, running text on the last line's. The headline is
    set span by span by hand and is left alone.  */
h2, h3, .rel-head, .foot-line, .doc-top h1, .art h2, .panel h2, .faq summary,
.card h3, .cards-head h2 { text-wrap: balance; }
.pitch, .lede, .art p, .art li, .say, .legal, .fine, .verdict, .faq .ans { text-wrap: pretty; }

/*  Every figure that moves is set on one width, so a nine going to ten shifts nothing beside it. */
.rows p b, .say b, .live b, .ca-box code, .field input,
.art .formula, .fig, .panel-lab b { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/*  A figure that has just moved says so in the mustard, for half a second, and never moves.  */
.tick { animation: fig-tick .52s var(--ease-out); }
@keyframes fig-tick { 0%, 60% { color: var(--brass-tick); } 100% { color: inherit; } }

/*  A section reached by a link stops below the valance, never under it.  */
[id] { scroll-margin-top: calc(var(--bar-h) + 18px); }


/*  the skip link: off the page until it is focused, and then a key like any other  */
.skip {
  position: fixed; z-index: 120; top: 10px; left: 10px; padding: 11px 16px;
  background: var(--blue); color: var(--cream); border: 2px solid var(--ink); border-radius: 8px;
  font-weight: 700; letter-spacing: .01em;
  transform: translateY(-220%);
}
.skip:focus { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}