/* vizmaya story formats: collage@1.css. Source: packages/html-stories/formats. */
/*
 * Shared by every format stylesheet (book@1.css, board@1.css, deck@1.css
 * start with this). The runtime adds html.js and html.vz-on plus the
 * format's own class (html.book-on, html.board-on, html.deck-on) when it
 * takes the page over; without them, the same content reads as one column.
 *
 * Tokens the controls use, set from the page's vizmaya:theme by the runtime
 * (override any of them in your own :root): --vz-bg --vz-surface --vz-text
 * --vz-muted --vz-line --vz-accent. --vz-chrome-h is the site header's
 * height, which the site sets as --vizmaya-chrome-h.
 */
:where(:root) { --vz-chrome-h: var(--vizmaya-chrome-h, 64px) }
@media (max-width: 480px) { :where(:root) { --vz-chrome-h: var(--vizmaya-chrome-h, 56px) } }

/* A chart that drew nothing (no JS, or it failed) shows its data-alt text. */
:where(.chart:empty)::before { content: attr(data-alt); display: block; font-style: italic; font-size: 15px; line-height: 1.45; opacity: .75 }
html:not(.js) .chart { height: auto !important; aspect-ratio: auto !important }
html:not(.vz-on) .vz-only { display: none !important }

.vz-btn {
  appearance: none; -webkit-appearance: none; margin: 0; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px; min-width: 40px; padding: 0 12px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--vz-line, rgba(127, 127, 127, .35)); background: var(--vz-surface, #111820); color: var(--vz-text, #e0ddd5);
  font: inherit; font-size: 14px; line-height: 1; white-space: nowrap;
}
.vz-btn:hover { border-color: var(--vz-muted, #5a6a70) }
.vz-btn:disabled { opacity: .35; cursor: default }
.vz-btn[hidden] { display: none }
.vz-btn:focus-visible, .vz-seg button:focus-visible { outline: 2px solid var(--vz-accent, #D85A30); outline-offset: 2px }
.vz-btn.vz-primary { background: var(--vz-accent, #D85A30); border-color: var(--vz-accent, #D85A30); color: var(--vz-bg, #0a0e14); font-weight: 600 }
.vz-i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }

.vz-controls {
  position: relative; z-index: 5; flex: none; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px;
  padding: 10px 16px 14px; font-size: 14px; color: var(--vz-muted, #5a6a70);
}
.vz-where { min-width: 132px; text-align: center; font-variant-numeric: tabular-nums; color: var(--vz-text, #e0ddd5); opacity: .8 }
.vz-sep { flex: 0 0 1px; height: 22px; background: var(--vz-line, rgba(127, 127, 127, .35)); margin: 0 4px }
.vz-hint {
  position: absolute; left: 50%; top: 18px; z-index: 11; transform: translate(-50%, -8px); opacity: 0; pointer-events: none;
  padding: 8px 14px; border-radius: 18px; font-size: 14px; white-space: nowrap;
  background: var(--vz-surface, #111820); color: var(--vz-text, #e0ddd5); border: 1px solid var(--vz-line, rgba(127, 127, 127, .35));
  transition: opacity .25s, transform .25s;
}
.vz-hint.vz-show { opacity: 1; transform: translate(-50%, 0) }
/* Labels that fold away on phones stay readable to screen readers. */
@media (max-width: 560px) {
  .vz-controls { gap: 6px; padding-left: 8px; padding-right: 8px }
  .vz-controls .vz-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
  .vz-where { min-width: 64px }
}
/* The one-page view keeps the controls at the bottom of the screen. */
html.js:not(.vz-on) .vz-controls {
  position: sticky; bottom: 0; padding-top: 24px;
  background: linear-gradient(transparent, var(--vz-bg, #0a0e14) 40%);
}
@media (prefers-reduced-motion: reduce) { .vz-hint { transition: none } }

/*
 * vizmaya collage format, v1. Pair with collage@1.js.
 *
 * A cut-out collage: a kraft board with torn-paper pieces taped to it, each
 * plate a scene of cut-paper charts and typed slips. The page scrolls as
 * usual; the runtime choreographs the pieces from scroll position in
 * stop-motion steps and runs a sewing-thread progress rail down the left
 * edge. Without the runtime (no JS, or reduced motion) every piece sits in
 * its finished place: every motion variable defaults to 1.
 *
 * Tokens (set them in your own :root):
 *   --collage-board, --collage-board-deep         the board (kraft by default)
 *   --collage-ink, --collage-ink-soft             text straight on the board
 *   --collage-paper, --collage-paper-ink, --collage-paper-soft   the plain sheet
 *   --collage-accent / -ink, --collage-warm / -ink,
 *   --collage-dark / -ink / -soft, --collage-cool / -ink   the coloured papers
 *   --collage-tape, --collage-shadow
 *   --collage-display, --collage-body, --collage-typed   the three faces
 * data-surface="dark" on the stage swaps the board for slate.
 */
:where(:root) {
  --collage-board: #c29d70; --collage-board-deep: #a98457;
  --collage-ink: #2a1d11; --collage-ink-soft: #4d3923;
  --collage-paper: #eee7d6; --collage-paper-ink: #1c1711; --collage-paper-soft: #5a4b39;
  --collage-accent: var(--vz-accent, #a33a1f); --collage-accent-ink: #fbeee0;
  --collage-warm: #dd9d2c; --collage-warm-ink: #1c1711;
  --collage-dark: #252320; --collage-dark-ink: #efe5d2; --collage-dark-soft: #b7aa94;
  --collage-cool: var(--vz-accent2, #2b6584); --collage-cool-ink: #f3eee4;
  --collage-tape: rgba(246, 238, 215, .62); --collage-shadow: rgba(58, 33, 10, .34);
  --collage-display: 'Bricolage Grotesque', 'Arial Narrow', system-ui, sans-serif;
  --collage-body: 'Newsreader', Georgia, 'Times New Roman', serif;
  --collage-typed: 'Courier Prime', 'Courier New', ui-monospace, monospace;
  --collage-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .22 0 0 0 0 .15 0 0 0 0 .08 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --collage-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .32' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .1 0 0 0 0 .03 0 0 0 .45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  /* Torn and cut edges, as clip-paths. The jitter is in px, so a 90px slip and a 900px sheet tear the same. */
  --torn-tb:polygon(0.0% calc(0% + 1.6px),2.9% calc(0% + 0.8px),5.9% calc(0% + 3.3px),8.8% calc(0% + 0.4px),11.8% calc(0% + 2.7px),14.7% calc(0% + 1.8px),17.6% calc(0% + 0.3px),20.6% calc(0% + 2.5px),23.5% calc(0% + 0.2px),26.5% calc(0% + 2.2px),29.4% calc(0% + 0.3px),32.4% calc(0% + 0.5px),35.3% calc(0% + 2.1px),38.2% calc(0% + 4.1px),41.2% calc(0% + 0.6px),44.1% calc(0% + 1.1px),47.1% calc(0% + 3.1px),50.0% calc(0% + 4.7px),52.9% calc(0% + 2.9px),55.9% calc(0% + 2.0px),58.8% calc(0% + 4.9px),61.8% calc(0% + 0.2px),64.7% calc(0% + 4.3px),67.6% calc(0% + 1.4px),70.6% calc(0% + 0.7px),73.5% calc(0% + 0.6px),76.5% calc(0% + 1.5px),79.4% calc(0% + 4.1px),82.4% calc(0% + 0.9px),85.3% calc(0% + 2.9px),88.2% calc(0% + 3.2px),91.2% calc(0% + 1.9px),94.1% calc(0% + 2.7px),97.1% calc(0% + 0.3px),100.0% calc(0% + 0.3px),100.0% calc(100% - 1.0px),97.1% calc(100% - 3.4px),94.1% calc(100% - 2.1px),91.2% calc(100% - 1.6px),88.2% calc(100% - 2.9px),85.3% calc(100% - 2.3px),82.4% calc(100% - 1.5px),79.4% calc(100% - 4.0px),76.5% calc(100% - 3.5px),73.5% calc(100% - 1.2px),70.6% calc(100% - 2.9px),67.6% calc(100% - 2.6px),64.7% calc(100% - 4.4px),61.8% calc(100% - 3.6px),58.8% calc(100% - 1.4px),55.9% calc(100% - 4.9px),52.9% calc(100% - 0.6px),50.0% calc(100% - 2.1px),47.1% calc(100% - 3.8px),44.1% calc(100% - 0.8px),41.2% calc(100% - 2.4px),38.2% calc(100% - 0.2px),35.3% calc(100% - 3.3px),32.4% calc(100% - 3.8px),29.4% calc(100% - 2.9px),26.5% calc(100% - 4.4px),23.5% calc(100% - 1.6px),20.6% calc(100% - 3.5px),17.6% calc(100% - 3.0px),14.7% calc(100% - 2.9px),11.8% calc(100% - 2.3px),8.8% calc(100% - 4.2px),5.9% calc(100% - 4.7px),2.9% calc(100% - 2.4px),0.0% calc(100% - 3.3px));
  --torn-all:polygon(0.0% calc(0% + 2.3px),2.9% calc(0% + 2.8px),5.9% calc(0% + 4.6px),8.8% calc(0% + 2.3px),11.8% calc(0% + 2.5px),14.7% calc(0% + 2.9px),17.6% calc(0% + 0.9px),20.6% calc(0% + 2.6px),23.5% calc(0% + 3.1px),26.5% calc(0% + 4.0px),29.4% calc(0% + 0.5px),32.4% calc(0% + 1.5px),35.3% calc(0% + 0.5px),38.2% calc(0% + 4.0px),41.2% calc(0% + 3.5px),44.1% calc(0% + 0.2px),47.1% calc(0% + 4.9px),50.0% calc(0% + 4.8px),52.9% calc(0% + 3.3px),55.9% calc(0% + 3.1px),58.8% calc(0% + 0.8px),61.8% calc(0% + 0.1px),64.7% calc(0% + 2.6px),67.6% calc(0% + 0.3px),70.6% calc(0% + 1.0px),73.5% calc(0% + 1.2px),76.5% calc(0% + 0.2px),79.4% calc(0% + 2.3px),82.4% calc(0% + 2.2px),85.3% calc(0% + 4.2px),88.2% calc(0% + 2.6px),91.2% calc(0% + 3.2px),94.1% calc(0% + 2.5px),97.1% calc(0% + 3.3px),100.0% calc(0% + 2.3px),calc(100% - 1.4px) 5.9%,calc(100% - 5.0px) 11.8%,calc(100% - 5.0px) 17.6%,calc(100% - 4.2px) 23.5%,calc(100% - 3.5px) 29.4%,calc(100% - 1.6px) 35.3%,calc(100% - 1.1px) 41.2%,calc(100% - 1.4px) 47.1%,calc(100% - 0.4px) 52.9%,calc(100% - 3.8px) 58.8%,calc(100% - 2.0px) 64.7%,calc(100% - 4.2px) 70.6%,calc(100% - 1.9px) 76.5%,calc(100% - 4.8px) 82.4%,calc(100% - 4.2px) 88.2%,calc(100% - 0.0px) 94.1%,100.0% calc(100% - 1.0px),97.1% calc(100% - 4.6px),94.1% calc(100% - 2.3px),91.2% calc(100% - 4.9px),88.2% calc(100% - 2.0px),85.3% calc(100% - 0.4px),82.4% calc(100% - 3.1px),79.4% calc(100% - 3.9px),76.5% calc(100% - 1.3px),73.5% calc(100% - 0.4px),70.6% calc(100% - 1.7px),67.6% calc(100% - 4.8px),64.7% calc(100% - 3.8px),61.8% calc(100% - 0.6px),58.8% calc(100% - 1.2px),55.9% calc(100% - 0.5px),52.9% calc(100% - 0.3px),50.0% calc(100% - 4.0px),47.1% calc(100% - 0.9px),44.1% calc(100% - 2.8px),41.2% calc(100% - 2.2px),38.2% calc(100% - 1.0px),35.3% calc(100% - 3.7px),32.4% calc(100% - 0.7px),29.4% calc(100% - 3.2px),26.5% calc(100% - 0.6px),23.5% calc(100% - 2.1px),20.6% calc(100% - 1.1px),17.6% calc(100% - 1.3px),14.7% calc(100% - 4.9px),11.8% calc(100% - 4.0px),8.8% calc(100% - 1.5px),5.9% calc(100% - 4.4px),2.9% calc(100% - 1.1px),0.0% calc(100% - 2.0px),calc(0% + 4.3px) 94.1%,calc(0% + 3.2px) 88.2%,calc(0% + 0.5px) 82.4%,calc(0% + 4.9px) 76.5%,calc(0% + 1.1px) 70.6%,calc(0% + 1.3px) 64.7%,calc(0% + 3.9px) 58.8%,calc(0% + 1.6px) 52.9%,calc(0% + 1.5px) 47.1%,calc(0% + 0.4px) 41.2%,calc(0% + 0.5px) 35.3%,calc(0% + 2.9px) 29.4%,calc(0% + 1.2px) 23.5%,calc(0% + 3.0px) 17.6%,calc(0% + 1.9px) 11.8%,calc(0% + 2.3px) 5.9%);
  --torn-t:polygon(0.0% calc(0% + 3.4px),2.9% calc(0% + 3.9px),5.9% calc(0% + 2.6px),8.8% calc(0% + 2.6px),11.8% calc(0% + 2.0px),14.7% calc(0% + 5.0px),17.6% calc(0% + 1.4px),20.6% calc(0% + 0.7px),23.5% calc(0% + 1.3px),26.5% calc(0% + 1.3px),29.4% calc(0% + 1.6px),32.4% calc(0% + 1.3px),35.3% calc(0% + 0.5px),38.2% calc(0% + 1.6px),41.2% calc(0% + 1.6px),44.1% calc(0% + 2.8px),47.1% calc(0% + 1.0px),50.0% calc(0% + 0.4px),52.9% calc(0% + 1.0px),55.9% calc(0% + 2.7px),58.8% calc(0% + 1.9px),61.8% calc(0% + 3.7px),64.7% calc(0% + 4.0px),67.6% calc(0% + 2.1px),70.6% calc(0% + 0.5px),73.5% calc(0% + 3.6px),76.5% calc(0% + 3.8px),79.4% calc(0% + 2.0px),82.4% calc(0% + 3.3px),85.3% calc(0% + 1.5px),88.2% calc(0% + 4.6px),91.2% calc(0% + 4.2px),94.1% calc(0% + 4.0px),97.1% calc(0% + 4.8px),100.0% calc(0% + 1.2px),100% 100%,0% 100%);
  --torn-r:polygon(0% 0%,calc(100% - 3.7px) 7.7%,calc(100% - 3.8px) 15.4%,calc(100% - 3.6px) 23.1%,calc(100% - 0.3px) 30.8%,calc(100% - 2.4px) 38.5%,calc(100% - 1.7px) 46.2%,calc(100% - 2.1px) 53.8%,calc(100% - 0.5px) 61.5%,calc(100% - 0.8px) 69.2%,calc(100% - 1.8px) 76.9%,calc(100% - 0.9px) 84.6%,calc(100% - 1.8px) 92.3%,0% 100%);
  --cut-a:polygon(0.0% calc(0% + 0.0px),12.5% calc(0% + 0.3px),25.0% calc(0% + 0.9px),37.5% calc(0% + 1.6px),50.0% calc(0% + 0.3px),62.5% calc(0% + 0.3px),75.0% calc(0% + 0.6px),87.5% calc(0% + 1.8px),100.0% calc(0% + 0.4px),calc(100% - 1.8px) 20.0%,calc(100% - 1.6px) 40.0%,calc(100% - 0.3px) 60.0%,calc(100% - 1.3px) 80.0%,100.0% calc(100% - 1.1px),87.5% calc(100% - 1.0px),75.0% calc(100% - 2.4px),62.5% calc(100% - 0.2px),50.0% calc(100% - 0.0px),37.5% calc(100% - 2.3px),25.0% calc(100% - 1.0px),12.5% calc(100% - 0.5px),0.0% calc(100% - 0.8px),calc(0% + 0.9px) 80.0%,calc(0% + 2.3px) 60.0%,calc(0% + 0.5px) 40.0%,calc(0% + 0.5px) 20.0%);
  --cut-b:polygon(0.0% calc(0% + 1.6px),12.5% calc(0% + 0.2px),25.0% calc(0% + 1.5px),37.5% calc(0% + 2.0px),50.0% calc(0% + 2.0px),62.5% calc(0% + 1.2px),75.0% calc(0% + 1.5px),87.5% calc(0% + 0.9px),100.0% calc(0% + 1.3px),calc(100% - 0.3px) 20.0%,calc(100% - 1.6px) 40.0%,calc(100% - 1.4px) 60.0%,calc(100% - 0.7px) 80.0%,100.0% calc(100% - 0.9px),87.5% calc(100% - 1.8px),75.0% calc(100% - 1.1px),62.5% calc(100% - 2.3px),50.0% calc(100% - 2.3px),37.5% calc(100% - 2.0px),25.0% calc(100% - 0.2px),12.5% calc(100% - 0.2px),0.0% calc(100% - 0.7px),calc(0% + 0.9px) 80.0%,calc(0% + 1.7px) 60.0%,calc(0% + 2.0px) 40.0%,calc(0% + 1.4px) 20.0%);
  --cut-c:polygon(0.0% calc(0% + 0.9px),12.5% calc(0% + 0.6px),25.0% calc(0% + 0.4px),37.5% calc(0% + 2.2px),50.0% calc(0% + 1.4px),62.5% calc(0% + 1.7px),75.0% calc(0% + 1.3px),87.5% calc(0% + 0.9px),100.0% calc(0% + 1.8px),calc(100% - 1.4px) 20.0%,calc(100% - 1.9px) 40.0%,calc(100% - 1.6px) 60.0%,calc(100% - 2.0px) 80.0%,100.0% calc(100% - 1.1px),87.5% calc(100% - 0.4px),75.0% calc(100% - 0.4px),62.5% calc(100% - 1.7px),50.0% calc(100% - 0.4px),37.5% calc(100% - 1.6px),25.0% calc(100% - 1.5px),12.5% calc(100% - 0.1px),0.0% calc(100% - 1.9px),calc(0% + 0.1px) 80.0%,calc(0% + 2.1px) 60.0%,calc(0% + 2.0px) 40.0%,calc(0% + 0.5px) 20.0%);
  --tape-cut:polygon(0% 0%,100% 0%,calc(100% - 0.1px) 16.7%,calc(100% - 3.0px) 33.3%,calc(100% - 2.6px) 50.0%,calc(100% - 6.0px) 66.7%,calc(100% - 3.8px) 83.3%,100% 100%,0% 100%,calc(0% + 4.9px) 83.3%,calc(0% + 1.0px) 66.7%,calc(0% + 3.2px) 50.0%,calc(0% + 4.7px) 33.3%,calc(0% + 5.6px) 16.7%);
}
:where(.stage[data-surface="dark"]) {
  --collage-board: #1f1b17; --collage-board-deep: #2b251f; --collage-ink: #eee1cb; --collage-ink-soft: #bba98e;
  --collage-tape: rgba(232, 220, 188, .4); --collage-shadow: rgba(0, 0, 0, .62);
}

/* ── The board ───────────────────────────────────────────────────────── */
:where(.stage) {
  position: relative; margin: 0; padding: 0; max-width: none; overflow-x: clip;
  background-color: var(--collage-board); background-image: var(--collage-fibre), var(--collage-grain);
  color: var(--collage-ink); font: 400 1.06rem/1.6 var(--collage-body);
}
html.collage-on .stage { isolation: isolate }
html.vz-aura.collage-on .stage { background-color: transparent }
:where(.stage) :where(h1, h2, h3) { font-family: var(--collage-display); text-wrap: balance; margin: 0 }
:where(.stage) :where(p) { margin: 0 }
:where(.stage) :where(a) { color: inherit }
:where(.stage) :where(a:focus-visible) { outline: 3px solid var(--collage-warm); outline-offset: 2px }
:where(.stage .sr) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
:where(.wrap) { max-width: 1180px; margin-inline: auto; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }

/* ── The paper kit ───────────────────────────────────────────────────── */
/* .piece is the thing on the board (tilt, shadow, tape); .paper inside it is the torn sheet. */
:where(.piece) { position: relative; transform: rotate(var(--tilt, 0deg)); filter: drop-shadow(0 1px 0 var(--collage-shadow)) drop-shadow(0 7px 9px var(--collage-shadow)) }
:where(.paper) {
  position: relative; box-sizing: border-box; background: var(--collage-paper); color: var(--collage-paper-ink);
  clip-path: var(--cut, var(--torn-tb)); padding: 1.5rem 1.6rem;
  /* colours the charts read (see "Charts and numbers" in the brief) */
  --c-ink: var(--collage-paper-ink); --c-muted: var(--collage-paper-soft); --c-grid: rgba(28, 23, 17, .14);
  --c-hi: var(--collage-accent); --c-paper: var(--collage-paper); --c-halo: var(--collage-paper); --font-chart: var(--collage-typed);
}
:where(.paper)::after { content: ""; position: absolute; inset: 0; background-image: var(--collage-grain); mix-blend-mode: multiply; opacity: .55; pointer-events: none }
:where(.paper.accent) { background: var(--collage-accent); color: var(--collage-accent-ink); --c-ink: var(--collage-accent-ink); --c-muted: var(--collage-accent-ink); --c-grid: rgba(255, 255, 255, .22); --c-hi: var(--collage-paper); --c-paper: var(--collage-accent); --c-halo: var(--collage-accent) }
:where(.paper.warm) { background: var(--collage-warm); color: var(--collage-warm-ink); --c-hi: var(--collage-dark); --c-paper: var(--collage-warm); --c-halo: var(--collage-warm) }
:where(.paper.dark) { background: var(--collage-dark); color: var(--collage-dark-ink); --c-ink: var(--collage-dark-ink); --c-muted: var(--collage-dark-soft); --c-grid: rgba(239, 229, 210, .16); --c-paper: var(--collage-dark); --c-halo: var(--collage-dark) }
:where(.paper.cool) { background: var(--collage-cool); color: var(--collage-cool-ink); --c-ink: var(--collage-cool-ink); --c-muted: var(--collage-cool-ink); --c-grid: rgba(255, 255, 255, .18); --c-hi: var(--collage-warm); --c-paper: var(--collage-cool); --c-halo: var(--collage-cool) }
:where(.paper.dark, .paper.cool)::after { mix-blend-mode: screen; opacity: .18 }
:where(.paper.accent)::after { opacity: .35 }
:where(.halftone)::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(0, 0, 0, .16) 1.1px, transparent 1.5px) 0 0 / 7px 7px; pointer-events: none }
:where(.ruled) { background-image: repeating-linear-gradient(to bottom, transparent 0 1.58rem, rgba(43, 101, 132, .22) 1.58rem calc(1.58rem + 1px)); background-position: 0 1.1rem }
:where(.paper .chart) { width: 100%; position: relative; z-index: 1 }
:where(.paper .src, .paper .plate-note) { font: 400 .76rem/1.4 var(--collage-typed); margin-top: 1rem; opacity: .85 }
:where(.plate-title) { font: 700 .78rem/1.3 var(--collage-typed); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 1rem }

/* tape over the top edge of a piece; .l / .r at a corner */
:where(.tape) {
  position: absolute; z-index: 2; width: 96px; height: 26px; background: var(--collage-tape);
  top: -11px; left: calc(50% - 48px); rotate: var(--tr, -3deg); clip-path: var(--tape-cut); pointer-events: none;
}
:where(.tape.l) { left: -18px; top: 14px; --tr: -38deg }
:where(.tape.r) { left: auto; right: -20px; top: 10px; --tr: 34deg }

/* a typed label on a cut strip; .dark on the dark paper */
:where(.slip) {
  display: inline-block; font: 700 .74rem/1.2 var(--collage-typed); letter-spacing: .09em; text-transform: uppercase;
  background: var(--collage-paper); color: var(--collage-paper-ink); padding: .4rem .65rem .35rem; clip-path: var(--cut-b);
}
:where(.slip.dark) { background: var(--collage-dark); color: var(--collage-dark-ink) }
:where(.slip.accent) { background: var(--collage-accent); color: var(--collage-accent-ink) }
:where(.typed) { font-family: var(--collage-typed); font-size: .8rem; letter-spacing: .02em }

/* a rubber stamp: how firm a claim is */
:where(.stamp) {
  display: inline-block; font: 700 .7rem/1 var(--collage-typed); letter-spacing: .14em; text-transform: uppercase;
  padding: .36rem .55rem .3rem; border: 2px solid currentColor; border-radius: 3px; rotate: -5deg; opacity: .9;
  -webkit-mask: radial-gradient(circle at 30% 40%, #000 55%, rgba(0, 0, 0, .55) 56% 60%, #000 61%) 0 0 / 9px 9px;
  mask: radial-gradient(circle at 30% 40%, #000 55%, rgba(0, 0, 0, .55) 56% 60%, #000 61%) 0 0 / 9px 9px;
}
:where(.stamp.documented) { color: var(--collage-cool) }
:where(.stamp.contested) { color: var(--collage-accent) }
:where(.stamp.inferred) { color: var(--collage-paper-soft) }
:where(.paper.dark .stamp.inferred, .paper.cool .stamp.inferred) { color: inherit }

/* a number on a patch of paper; the patch slides in from the left as it's read (--np) */
:where(.n) {
  --npatch: var(--collage-warm); background: linear-gradient(var(--npatch), var(--npatch)) no-repeat 0 0 / calc(var(--np, 1) * 100%) 100%;
  color: var(--collage-warm-ink); padding: 0 .14em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
:where(.paper.warm .n) { --npatch: var(--collage-paper) }
:where(.n.accent) { --npatch: var(--collage-accent); color: var(--collage-accent-ink) }

/* headline strips (ransom-note letters) */
:where(.stage h1) { font-size: clamp(2.1rem, 5.4vw, 4.3rem); line-height: 1.04; font-weight: 800; letter-spacing: -.01em; display: flex; flex-wrap: wrap; gap: .3rem .35rem; align-items: center }
:where(.strip) { display: inline-block; padding: .08em .28em .12em; max-width: 100%; clip-path: var(--cut-a); rotate: var(--sr, 0deg); background: var(--collage-paper); color: var(--collage-paper-ink) }
:where(.strip.dark) { background: var(--collage-dark); color: var(--collage-dark-ink); --sr: -1.2deg }
:where(.strip.light) { --sr: 1deg; clip-path: var(--cut-c) }
:where(.strip.accent) { background: var(--collage-accent); color: var(--collage-accent-ink); --sr: -.6deg }
:where(.ransom) { display: inline-flex; align-items: flex-end; gap: .04em; margin-block: .08em; font-size: clamp(4.6rem, 13vw, 9.6rem); line-height: .86 }
:where(.ransom span) { display: inline-block; padding: .05em .07em 0; clip-path: var(--cut-b); background: var(--collage-paper); color: var(--collage-paper-ink) }
:where(.ransom span:nth-child(5n+1)) { background: var(--collage-accent); color: var(--collage-accent-ink); transform: rotate(-4deg) }
:where(.ransom span:nth-child(5n+2)) { background: var(--collage-warm); color: var(--collage-warm-ink); transform: rotate(3deg); --bd: .2s }
:where(.ransom span:nth-child(5n+3)) { transform: rotate(-2deg); --bd: .4s }
:where(.ransom span:nth-child(5n+4)) { background: var(--collage-dark); color: var(--collage-dark-ink); transform: rotate(5deg); --bd: .1s }
:where(.ransom span:nth-child(5n+5)) { background: var(--collage-cool); color: var(--collage-cool-ink); transform: rotate(-3deg); --bd: .3s }
:where(.ransom span.plain) { background: transparent; color: var(--collage-ink); padding-inline: 0; font-size: .6em; clip-path: none; transform: none }
/* a big outlined scene number behind the notes */
:where(.bignum) {
  position: absolute; z-index: -1; top: -3.6rem; left: .2rem; font: 800 clamp(7rem, 15vw, 11rem)/1 var(--collage-display);
  color: transparent; -webkit-text-stroke: 2px var(--collage-ink-soft); opacity: .45; pointer-events: none; user-select: none;
}

/* ── Layout: cover, scenes, bands, end matter ────────────────────────── */
:where(.cover) { padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 7vw, 5rem) }
:where(.cover-grid) { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center }
:where(.cover-text) { min-width: 0; display: grid; gap: 1.4rem; justify-items: start }
:where(.byline, .colophon) { font: 400 .8rem/1.4 var(--collage-typed); color: var(--collage-ink-soft); letter-spacing: .03em }
:where(.band) { padding-block: clamp(3rem, 7vw, 5.5rem) }
:where(.head) { display: grid; gap: .8rem; max-width: 44rem; margin-bottom: clamp(1.6rem, 4vw, 2.6rem) }
:where(.head h2) { font-size: clamp(1.9rem, 4.4vw, 3.2rem); line-height: 1.04; font-weight: 800 }
:where(.head p) { max-width: 62ch; color: var(--collage-ink-soft) }
:where(.scene) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.6rem, 4.5vw, 4rem); align-items: center; padding-block: clamp(2.6rem, 6vw, 4.8rem) }
:where(.scene.flip .notes) { order: 2 }
:where(.notes) { min-width: 0; position: relative }
:where(.notes .piece) { --tilt: var(--nt, -1deg) }
:where(.notes .paper) { --cut: var(--torn-all); padding: 1.8rem 1.6rem 1.7rem; display: grid; gap: .85rem }
:where(.notes .meta) { display: flex; flex-wrap: wrap; gap: .6rem .9rem; align-items: center }
:where(.notes h2) { font-size: clamp(1.55rem, 3vw, 2.3rem); line-height: 1.08; font-weight: 800 }
:where(.notes .aside) { font-style: italic; color: var(--collage-paper-soft); border-top: 1.5px dashed rgba(28, 23, 17, .3); padding-top: .7rem }
:where(.scene.flip .bignum) { left: auto; right: .2rem }
:where(.plate) { min-width: 0; margin: 0 }
:where(.plate .piece) { --tilt: var(--pt, 1.2deg) }
:where(.plate .paper) { padding: clamp(1.2rem, 3vw, 2rem) }
:where(.tiles) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1.6rem 1.3rem }
:where(.tile) { height: 100% }
:where(.tile .paper) { --cut: var(--torn-all); padding: 1.3rem 1.2rem 1.4rem; height: 100% }
:where(.tile b) { display: block; font: 800 clamp(1.9rem, 3.4vw, 2.5rem)/1.05 var(--collage-display); font-variant-numeric: tabular-nums; margin-bottom: .45rem }
:where(.tile p) { font-size: .92rem; line-height: 1.45 }
:where(.tile .src) { display: block; margin-top: .5rem }
:where(.tile:nth-child(5n+1)) { --tilt: -1.4deg } :where(.tile:nth-child(5n+2)) { --tilt: 1.1deg } :where(.tile:nth-child(5n+3)) { --tilt: -.4deg } :where(.tile:nth-child(5n+4)) { --tilt: 1.6deg } :where(.tile:nth-child(5n+5)) { --tilt: -1deg }
:where(.fineprint) { margin-top: 1.6rem; font: 400 .8rem/1.45 var(--collage-typed); color: var(--collage-ink-soft); max-width: 70ch }
:where(.end) { padding-block: clamp(3rem, 7vw, 5rem) clamp(3rem, 6vw, 4rem) }
:where(.sheet .paper) { --cut: var(--torn-t); padding: clamp(1.4rem, 3vw, 2.4rem) }
:where(.sheet + .sheet) { margin-top: 2.4rem }
:where(.sheet h2) { font-size: 1.6rem; font-weight: 800; margin-bottom: 1rem }
:where(.tablewrap) { overflow-x: auto }
:where(.colophon) { margin-top: 2rem }

/* ── Charts cut from paper ───────────────────────────────────────────── */
/* comparison strips: .cmp > .crow (.crow-h label + value, .ctrack of .cbar), then a .ctick axis */
:where(.cmp) { display: grid; gap: 1rem }
:where(.crow) { display: grid; gap: .35rem }
:where(.crow-h) { display: flex; justify-content: space-between; gap: 1rem; font: 700 .8rem/1.3 var(--collage-typed) }
:where(.crow-h b) { font-variant-numeric: tabular-nums }
:where(.ctrack) { position: relative; height: 30px }
:where(.cbar) { position: absolute; left: 0; top: 0; bottom: 0; clip-path: var(--cut-b); background: var(--collage-accent) }
:where(.cbar.hatch) { background: repeating-linear-gradient(-45deg, var(--hatch, var(--collage-accent)) 0 4px, transparent 4px 8px); outline: 2px solid var(--hatch, var(--collage-accent)); outline-offset: -2px }
:where(.ctick) { position: relative; height: 1.3rem; border-top: 1.5px solid currentColor; opacity: .75 }
:where(.ctick span) { position: absolute; top: .2rem; translate: -50% 0; font: 400 .68rem/1 var(--collage-typed); font-variant-numeric: tabular-nums; white-space: nowrap }
:where(.ctick span:first-child) { translate: 0 0 } :where(.ctick span:last-child) { translate: -100% 0 }
/* an estimate, not a measurement: soft ends */
:where(.fuzzy) { -webkit-mask: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent) }
/* a stack of blocks (one block = one unit): .cstack of .blk, bottom up */
:where(.cstack) { display: flex; flex-direction: column-reverse; gap: 3px }
:where(.blk) { width: clamp(70px, 12vw, 96px); height: 22px; background: var(--collage-accent); clip-path: var(--cut-b); rotate: var(--br, 0deg) }
:where(.blk:nth-child(3n+2)) { --br: 1.4deg; clip-path: var(--cut-c) }
:where(.blk:nth-child(3n)) { --br: -1.1deg; clip-path: var(--cut-a) }
:where(.cstack.dark .blk) { background: var(--collage-dark) }
:where(.cstack.cool .blk) { background: var(--collage-cool) }
:where(.cstack.warm .blk) { background: var(--collage-warm) }
:where(.cstack.paper .blk) { background: var(--collage-paper) }

/* ── Motion ──────────────────────────────────────────────────────────── */
@keyframes vz-enter { from { translate: var(--ex, 0px) var(--ey, -26px); scale: 1.05 } to { translate: 0 0; scale: 1 } }
@keyframes vz-boil { 0% { rotate: -.7deg } 33% { rotate: .6deg } 66% { rotate: -.15deg } 100% { rotate: -.7deg } }
@keyframes vz-drop { from { translate: 0 -46px } to { translate: 0 0 } }
@keyframes vz-stitch { from { stroke-dashoffset: 1 } to { stroke-dashoffset: 0 } }
/* on load (the cover): a piece lands in five frames; a cut-out jitters like stop-motion paper */
html.collage-on .enter { animation: vz-enter .72s steps(5, end) backwards; animation-delay: var(--d, 0s) }
html.collage-on .boil { animation: vz-boil .75s steps(1, end) infinite; animation-delay: var(--bd, 0s) }
html.collage-on .drop { animation: vz-drop .55s steps(4, end) both; animation-delay: var(--d, 0s) }
html.collage-on .stitch { animation: vz-stitch 1.6s steps(12, end) .5s both }
/* on scroll: the runtime writes progress (0 to 1, in stop-motion steps) into
   these variables. Every default is 1, so the page reads complete without it. */
:where(.fly) { --fx: 0px; --fy: 70px; --fr: 4deg; translate: calc(var(--fx) * (1 - var(--p, 1))) calc(var(--fy) * (1 - var(--p, 1))); rotate: calc(var(--fr) * (1 - var(--p, 1))) }
:where(.piece.fly) { scale: calc(1 + .05 * (1 - var(--p, 1))); filter: drop-shadow(0 1px 0 var(--collage-shadow)) drop-shadow(0 calc(7px + 26px * (1 - var(--p, 1))) calc(9px + 18px * (1 - var(--p, 1))) var(--collage-shadow)) }
:where(.grow) { scale: var(--g, 1) 1; transform-origin: left center }
:where(.tape) { scale: calc(1 + .9 * (1 - var(--tp, 1))) }
:where(.stamp) { scale: calc(1 + 1.5 * (1 - var(--sp, 1))) }
:where(.seq-drop) { translate: 0 calc(var(--sy, -80px) * (1 - var(--p, 1))) }
:where(.seq-slide) { translate: calc(var(--sx, -110%) * (1 - var(--p, 1))) 0 }
:where(.seq-pop) { scale: calc(.25 + .75 * var(--p, 1)) }
:where(.swim) { translate: calc(var(--sw, -160px) * (1 - var(--p, 1))) 0 }
:where(.ring) { transform-box: fill-box; transform-origin: center; scale: calc(.05 + .95 * var(--p, 1)) }
:where(.par) { translate: var(--px, 0px) var(--py, 0px) }

/* the sewing-thread progress rail (the runtime builds it) */
.vz-thread { position: fixed; z-index: 20; top: 0; bottom: 0; left: calc(env(safe-area-inset-left, 0px) + 7px); width: 3px; pointer-events: none }
.vz-thread::before, .vz-thread-fill { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, var(--c) 0 7px, transparent 7px 12px) }
.vz-thread::before { --c: var(--collage-ink-soft); opacity: .35 }
.vz-thread-fill { --c: var(--collage-accent); transform-origin: top; scale: 1 var(--prog, 0) }
.vz-knot {
  position: absolute; left: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%;
  background: var(--collage-board); border: 2px solid var(--collage-ink-soft); font: 700 8px/11px var(--collage-typed); text-align: center;
  color: var(--collage-ink); scale: .85; transition: scale .15s steps(2, end);
}
.vz-knot.vz-on { background: var(--collage-accent); border-color: var(--collage-accent); color: var(--collage-accent-ink); scale: 1.1 }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  :where(.cover-grid, .scene) { grid-template-columns: minmax(0, 1fr) }
  :where(.scene.flip .notes) { order: 0 }
  :where(.scene.flip .bignum) { left: .2rem; right: auto }
}
@media (max-width: 460px) {
  :where(.notes .paper) { padding: 1.5rem 1.15rem }
  :where(.paper) { padding: 1.3rem 1.1rem }
  /* corner tape stays on screen: the sheets run close to the edges */
  :where(.tape.l) { left: -8px } :where(.tape.r) { right: -8px }
  :where(.wrap) { padding-left: max(20px, env(safe-area-inset-left, 0px)) }
}
@media (prefers-reduced-motion: reduce) {
  html.collage-on .enter, html.collage-on .boil, html.collage-on .drop, html.collage-on .stitch { animation: none }
  .vz-thread { display: none }
}