/* Recognition Boundary Theory: the page's own styles.
   Screen stack: two warm tones, Inter (display cut at large sizes), JetBrains Mono for instrument labels.
   Colour carries meaning only, the same on the page and in its figures: cyan the kept states (the four modes, the participants),
   red neutral weight (what leaks and falls silent), magenta the record and what the reader acts on, gold the beginning and the one
   identification; for status, green proved, red open, gold identified. Square corners, solid rules, no gradients or soft shadows.
   The shared header, navigation and footer keep their own light styles in both modes. */

:root {
  color-scheme: light dark;
  --rbt-paper: #faf8f3; --rbt-ink: #1d1d1b; --rbt-body: #2a2926; --rbt-soft: #3c3a36; --rbt-hair: #8a8a8a;
  --rbt-rule: color-mix(in srgb, var(--rbt-ink) 16%, var(--rbt-paper));
  --rbt-faint: color-mix(in srgb, var(--rbt-ink) 6%, var(--rbt-paper));
  --rbt-kept: #009fe3; --rbt-kept-text: #00739f;
  --rbt-leak: #c8401f; --rbt-leak-text: #ad371a;
  --rbt-rec: #e6007e; --rbt-rec-text: #c0006a;
  --rbt-gold: #ffc328; --rbt-gold-text: #8a5f00;
  --rbt-ok: #0b7a3e;
  --rbt-display: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --rbt-text: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --rbt-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --rbt-paper: #141413; --rbt-ink: #faf8f3; --rbt-body: #e9e6df; --rbt-soft: #c9c5bc; --rbt-hair: #8a8a8a;
    --rbt-kept: #2bb3f0; --rbt-kept-text: #2bb3f0;
    --rbt-leak: #ff6a3d; --rbt-leak-text: #ff8a63;
    --rbt-rec: #ff3d9e; --rbt-rec-text: #ff6fb6;
    --rbt-gold-text: #ffc328; --rbt-ok: #3fae6c;
  }
}

html body[data-rpi-page] { background: var(--rbt-paper); }
.rbt { background: var(--rbt-paper); color: var(--rbt-body); font: 420 17px/1.45 var(--rbt-text); font-optical-sizing: auto;
  overflow-wrap: break-word; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; padding-bottom: 80px; }
.rbt *, .rbt *::before, .rbt *::after { box-sizing: border-box; }
.rbt :is(h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote) { margin: 0; }
.rbt :is(ol, ul) { list-style: none; padding: 0; }
.rbt a { color: var(--rbt-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rbt a:hover { text-decoration-thickness: 2px; }
.rbt sup, .rbt sub { font-size: .7em; line-height: 0; }
body[data-rpi-page] .rbt :is(a, button, summary):focus-visible { outline: 3px solid var(--rbt-ink) !important; outline-offset: 3px; }
.rbt [hidden] { display: none !important; }
.rbt .sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rbt [id] { scroll-margin-top: 24px; }
@media (max-width: 960px) { body.rpi-mobile-ready .rbt [id] { scroll-margin-top: 100px; } }
.rbt :is(a, button, summary) { scroll-margin-top: 100px; }
/* Same column as the shared header's container. */
.rbt .wrap { width: min(calc(100% - 4rem), 75rem); margin-inline: auto; }
@media (max-width: 600px) { .rbt .wrap { width: calc(100% - 2rem); } }

/* Type roles */
.rbt .k { font: 700 11px/1.35 var(--rbt-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--rbt-soft); }
.rbt .k-ink { color: var(--rbt-ink); }
.rbt .eyebrow { font: 700 12px/1.25 var(--rbt-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--rbt-soft); }
.rbt .eyebrow a { color: inherit; }
body[data-rpi-page] .rbt h1 { font-family: var(--rbt-display); font-weight: 820; font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: .94;
  letter-spacing: -.045em; color: var(--rbt-ink); text-shadow: 0 0 .5px color-mix(in srgb, var(--rbt-ink) 55%, transparent);
  text-wrap: balance; max-width: 15ch; }
body[data-rpi-page] .rbt h2 { font-family: var(--rbt-display); font-weight: 820; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem); line-height: .96;
  letter-spacing: -.038em; color: var(--rbt-ink); text-wrap: balance; max-width: 20ch;
  text-shadow: 0 0 .5px color-mix(in srgb, var(--rbt-ink) 55%, transparent); }
body[data-rpi-page] .rbt h3 { font-family: var(--rbt-display); font-weight: 780; font-size: clamp(1.25rem, 1.05rem + .6vw, 1.6rem); line-height: 1.08;
  letter-spacing: -.02em; color: var(--rbt-ink); text-wrap: balance; }
.rbt .lede { font-weight: 450; font-size: clamp(1.15rem, 1rem + .55vw, 1.45rem); line-height: 1.34; letter-spacing: -.008em; color: var(--rbt-ink); }
.rbt .src { font: 400 12.5px/1.45 var(--rbt-mono); color: var(--rbt-soft); margin-top: .7rem; }
.rbt em { font-style: italic; }

/* Labels and source lines keep their own type inside any block that sets paragraph sizes. */
body .rbt p.k { font: 700 11px/1.35 var(--rbt-mono); letter-spacing: .14em; text-transform: uppercase; }
body .rbt p.src { font: 400 12.5px/1.45 var(--rbt-mono); color: var(--rbt-soft); }
.rbt .nw { white-space: nowrap; }

/* Hero */
.rbt .hero { padding: 44px 0 28px; }
.rbt .hero h1 { margin-top: 18px; }
.rbt .hero-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 26px; align-items: start; }
.rbt .hero-copy .lede { max-width: 46rem; }
/* When the film arrives it sits beside the lede at 1100 px and wider (Jon, 8 Nov 2026: the film in the hero, not full screen). */
@media (min-width: 1100px) {
  .rbt .hero-row { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px 56px; }
}
.rbt .hero-row .pp-film { margin-top: 0; }
/* Status: one mono row of coloured squares, as on the gravity page */
.rbt .status-line { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; font: 700 11.5px/1.5 var(--rbt-mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--rbt-soft); }
.rbt .status-line .sq { margin-right: 8px; transform: none; vertical-align: -1px; }
.rbt .sq { flex: none; display: inline-block; width: 10px; height: 10px; transform: translateY(1px); }
.rbt .sq-ok { background: var(--rbt-ok); }
.rbt .sq-sup { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rbt-ink); }
.rbt .sq-gold { background: var(--rbt-gold); }
.rbt .sq-red { background: var(--rbt-leak); }

/* The hero figure: the live instrument (figure 1, hero size); without JavaScript, the exact count drawn */
.rbt .hero-fig { margin: 0; border-top: 1px solid var(--rbt-ink); padding-top: 12px; }
.rbt .hero-fig > .k { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; }
.rbt .hero-fig .live { color: var(--rbt-ink); }
.rbt .hero-fig .rbt-fig { margin-top: 12px; }
.rbt .hero-cap { margin-top: 12px; font-size: 14.5px; line-height: 1.45; color: var(--rbt-body); max-width: 40rem; }
.rbt .hero-fig .count { border-top: 0; padding-top: 0; }
body .rbt .hero-fig .count p.note { margin-top: 12px; font: 400 12.5px/1.5 var(--rbt-mono); color: var(--rbt-soft); }

/* The words, in plain terms */
.rbt .key { margin-top: 26px; padding: 18px 0 4px; border-top: 1px solid var(--rbt-ink); }
body[data-rpi-page] .rbt .key :is(h2, h3).k { font: 700 11.5px/1.35 var(--rbt-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--rbt-ink);
  text-shadow: none; max-width: none; }
.rbt .key-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 28px; margin: 14px 0 0; }
.rbt .key-list dt { font: 750 15px/1.25 var(--rbt-text); color: var(--rbt-ink); letter-spacing: -.005em; }
.rbt .key-list dd { margin: 4px 0 0; font-size: 14px; line-height: 1.42; color: var(--rbt-body); }
@media (max-width: 1100px) { .rbt .key-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .rbt .key-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .rbt .key-list { grid-template-columns: minmax(0, 1fr); } }

/* The exact count, drawn (the hero figure's no-JavaScript fallback) */
.rbt .count { margin: 0; border-top: 1px solid var(--rbt-ink); padding-top: 12px; }
.rbt .count-head { display: flex; flex-direction: column; gap: 8px; }
.rbt .count-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.rbt .count-legend li { display: flex; align-items: center; gap: 8px; }
.rbt .count-legend i { display: inline-block; width: 12px; height: 12px; }
.rbt .count-legend .kept { background: var(--rbt-kept); }
.rbt .count-legend .open { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rbt-ink); }
.rbt .count-legend .leak { background: repeating-linear-gradient(135deg, var(--rbt-hair) 0 1px, transparent 1px 4px); box-shadow: inset 0 0 0 1px var(--rbt-hair); }
.rbt .count-legend .kept-t { color: var(--rbt-kept-text); }
.rbt .count-legend .leak-t { color: var(--rbt-leak-text); }
.rbt .grids { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 18px; }
.rbt .grid-cell svg { display: block; width: 100%; max-width: 230px; height: auto; }
.rbt .grid-cell .num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 10px; }
.rbt .grid-cell .num b { font: 860 clamp(2rem, 1.4rem + 1.6vw, 3.1rem)/.86 var(--rbt-display); letter-spacing: -.05em; color: var(--rbt-ink);
  font-variant-numeric: tabular-nums lining-nums; }
.rbt .grid-cell:last-child .num b { color: var(--rbt-kept-text); }
.rbt .grid-cell .num span { font: 700 10.5px/1.3 var(--rbt-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rbt-soft); }
.rbt .grid-cell .k { margin-top: 6px; }
.rbt svg .sq-open { fill: var(--rbt-paper); stroke: var(--rbt-ink); stroke-width: 1; }
.rbt svg .sq-kept { fill: var(--rbt-kept); stroke: var(--rbt-kept); stroke-width: 1; }
.rbt svg .sq-leak { fill: url(#rbt-hatch); stroke: var(--rbt-hair); stroke-width: 1; }
.rbt svg .hatch-line { stroke: var(--rbt-hair); stroke-width: 1; }
.rbt svg .blk { fill: none; stroke: var(--rbt-ink); stroke-width: 1.5; }
.rbt svg text { font: 700 9px var(--rbt-mono); fill: var(--rbt-soft); letter-spacing: .06em; }
.rbt .count-cap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px 40px; margin-top: 18px; }
.rbt .count-cap p { font-size: 14.5px; line-height: 1.45; color: var(--rbt-body); max-width: 46rem; }
body .rbt .count-cap p.note { font: 400 12.5px/1.5 var(--rbt-mono); color: var(--rbt-soft); }
@media (max-width: 860px) {
  .rbt .grids { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
  .rbt .count-cap { grid-template-columns: minmax(0, 1fr); }
}

/* Jump links */
.rbt .jump { margin-top: 30px; padding-top: 14px; border-top: 1px solid var(--rbt-rule); font: 700 11.5px/2 var(--rbt-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--rbt-soft); }
.rbt .jump a { color: var(--rbt-ink); white-space: nowrap; }

/* Sections */
.rbt .sec { border-top: 1px solid var(--rbt-ink); padding: 56px 0 8px; margin-top: 64px; }
.rbt .sec > .wrap > .eyebrow { margin-bottom: 14px; }
.rbt .sec-intro { margin-top: 20px; max-width: 46rem; font-size: 18.5px; line-height: 1.45; color: var(--rbt-body); }

/* The question: history. Two columns read top to bottom; each scan is a thumbnail beside its entry that opens in place. */
.rbt .hist { columns: 2; column-gap: 56px; margin-top: 34px; }
.rbt .hist li { break-inside: avoid; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; padding: 18px 0 22px; border-top: 1px solid var(--rbt-rule); }
.rbt .hist li > :is(.when, div) { grid-column: 1; }
.rbt .hist li > .hist-pic { grid-column: 2; grid-row: 1 / span 2; }
.rbt .hist li > .hist-pic[open] { grid-column: 1 / -1; grid-row: auto; }
.rbt .hist .when { font: 700 12px/1.5 var(--rbt-mono); letter-spacing: .1em; color: var(--rbt-ink); }
.rbt .hist h3 { margin-top: 6px; font-size: 1.15rem; font-weight: 750; letter-spacing: -.012em; line-height: 1.2; }
.rbt .hist h4 { margin-top: 20px; font-size: 1.05rem; font-weight: 750; letter-spacing: -.01em; line-height: 1.25; color: var(--rbt-ink); }
.rbt .hist .when-in { margin-right: 8px; font: 700 12px/1.5 var(--rbt-mono); letter-spacing: .1em; }
.rbt .hist p { margin-top: 8px; font-size: 15.5px; line-height: 1.45; }
.rbt .hist blockquote { margin: 8px 0 0; padding-left: 14px; border-left: 2px solid var(--rbt-ink); font-style: italic; font-size: 15.5px; line-height: 1.45; }
.rbt .hist .cite { margin-top: 8px; font: 400 12.5px/1.5 var(--rbt-mono); color: var(--rbt-soft); }
.rbt .hist .cite.credit { margin-top: 4px; }
.rbt .hist .rs { border-top-color: var(--rbt-ink); }
.rbt .hist .rs .when { color: var(--rbt-ink); }
.rbt .closer { margin-top: 26px; font: 820 clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem)/1.05 var(--rbt-display); letter-spacing: -.03em; color: var(--rbt-ink); }
.rbt .hist-pic summary { display: block; width: 100px; cursor: zoom-in; list-style: none; }
.rbt .hist-pic summary::-webkit-details-marker { display: none; }
.rbt .hist-pic img { display: block; width: 100%; height: auto; border: 1px solid var(--rbt-rule); background: #fff; }
.rbt .hist-pic .enl { display: block; margin-top: 5px; font: 700 10px/1.3 var(--rbt-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--rbt-soft); }
.rbt .hist-pic summary:hover .enl { color: var(--rbt-ink); }
.rbt .hist-pic[open] summary { width: auto; max-width: 560px; margin-top: 14px; cursor: zoom-out; }
.rbt .hist-pic[open] .enl { display: none; }
.rbt .hist-pic .pic-cap { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--rbt-soft); max-width: 40rem; }
@media (max-width: 860px) {
  .rbt .hist { columns: 1; }
  .rbt .hist-pic:not([open]) summary { width: 76px; }
}

/* How it works: numbered steps, each with its label and source beside its text */
.rbt .steps { margin-top: 34px; }
.rbt .step { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 10px 48px; padding: 30px 0 32px; border-top: 1px solid var(--rbt-rule); }
.rbt .step-meta .k { color: var(--rbt-ink); }
.rbt .step-meta h3 { margin-top: 10px; }
.rbt .step-body p { max-width: 44rem; font-size: 17.5px; line-height: 1.5; }
.rbt .step-body p + p { margin-top: .8em; }
.rbt .step .src { margin-top: 12px; }
@media (max-width: 860px) { .rbt .step { grid-template-columns: minmax(0, 1fr); } }

/* A live figure block */
.rbt .fig-block { margin: 6px 0 36px; padding-top: 18px; border-top: 1px solid var(--rbt-ink); }
.rbt .fig-block > .k { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; }
.rbt .fig-block .live { color: var(--rbt-ink); }
.rbt .rbt-fig { margin-top: 14px; }
.rbt .rbt-fig > p { max-width: 46rem; font-size: 16px; }
.rbt details.honest { margin-top: 14px; border-top: 1px solid var(--rbt-rule); padding-top: 10px; }
.rbt details.honest summary { cursor: pointer; font: 700 11.5px/1.6 var(--rbt-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rbt-ink); }
.rbt details.honest p { margin-top: 8px; max-width: 40rem; font-size: 15px; line-height: 1.5; }

/* The numbers */
.rbt .nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 40px; margin-top: 34px; }
.rbt .nums li { border-top: 2px solid var(--rbt-ink); padding-top: 12px; }
.rbt .nums .big { margin-top: 10px; font: 860 clamp(3rem, 2rem + 3vw, 5rem)/.86 var(--rbt-display); letter-spacing: -.05em; color: var(--rbt-ink);
  font-variant-numeric: tabular-nums lining-nums; }
.rbt .nums .big sup { font-size: .42em; letter-spacing: -.02em; vertical-align: .95em; }
.rbt .nums .kept-n { color: var(--rbt-kept-text); }
.rbt .nums p { margin-top: 12px; font-size: 15.5px; line-height: 1.45; }
@media (max-width: 960px) { .rbt .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rbt .nums { grid-template-columns: minmax(0, 1fr); } }

/* What it means */
.rbt .means { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; margin-top: 34px; }
.rbt .means li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 6px 14px; padding: 24px 0 26px; border-top: 1px solid var(--rbt-rule); }
.rbt .means .n { font: 700 12px/1.6 var(--rbt-mono); letter-spacing: .1em; color: var(--rbt-soft); }
.rbt .means p { margin-top: 10px; font-size: 16.5px; line-height: 1.5; }
@media (max-width: 860px) { .rbt .means { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .rbt .means li { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* The one identification */
.rbt .ident { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 14px 48px; padding: 26px 28px 30px;
  border: 1px solid var(--rbt-ink); border-top: 4px solid var(--rbt-gold); background: var(--rbt-paper); }
.rbt .ident .k { color: var(--rbt-gold-text); display: flex; align-items: center; gap: 9px; }
.rbt .ident h3 { margin-top: 10px; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.rbt .ident p { font-size: 17.5px; line-height: 1.5; max-width: 44rem; }
.rbt .ident p + p { margin-top: .8em; }
@media (max-width: 860px) { .rbt .ident { grid-template-columns: minmax(0, 1fr); padding: 20px 18px 24px; } }

/* Where it stands */
.rbt .stands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 32px; margin-top: 34px; }
.rbt .stands > div { border-top: 3px solid var(--rbt-ink); padding-top: 12px; }
.rbt .stands > .t-ok { border-top-color: var(--rbt-ok); } .rbt .stands > .t-id { border-top-color: var(--rbt-gold); } .rbt .stands > .t-open { border-top-color: var(--rbt-leak); }
.rbt .stands h3 { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; }
.rbt .stands ul { margin-top: 12px; }
.rbt .stands li { padding: 9px 0; border-top: 1px solid var(--rbt-rule); font-size: 15px; line-height: 1.42; }
.rbt .stands li:first-child { border-top: 0; }
@media (max-width: 1100px) { .rbt .stands { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .rbt .stands { grid-template-columns: minmax(0, 1fr); } }

/* Go deeper: the essays */
.rbt .essays { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin-top: 34px; }
.rbt .essays li { border-top: 1px solid var(--rbt-rule); padding: 18px 0 20px; }
.rbt .essays .k { color: var(--rbt-soft); }
.rbt .essays a.t { display: block; margin-top: 8px; font: 750 1.08rem/1.25 var(--rbt-text); letter-spacing: -.01em; color: var(--rbt-ink); }
.rbt .essays p { margin-top: 6px; font-size: 15px; line-height: 1.45; }
@media (max-width: 960px) { .rbt .essays { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .rbt .essays { grid-template-columns: minmax(0, 1fr); } }

/* Standard results line */
.rbt .standard { margin-top: 30px; max-width: 60rem; font-size: 15px; line-height: 1.5; color: var(--rbt-body); }

/* The manuscript */
.rbt .ms { margin-top: 30px; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 18px 48px; border: 1px solid var(--rbt-ink); padding: 26px 28px 28px; }
.rbt .ms .title { font: 780 clamp(1.35rem, 1.1rem + .8vw, 1.85rem)/1.12 var(--rbt-display); letter-spacing: -.02em; color: var(--rbt-ink); }
.rbt .ms .kicker { margin: 0 0 8px; font: 700 12px/1.3 var(--rbt-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--rbt-ink); }
.rbt .ms .meta { margin-top: 10px; }
.rbt .ms p { margin-top: 12px; font-size: 16.5px; line-height: 1.5; max-width: 44rem; }
.rbt .ms .links { display: flex; flex-direction: column; gap: 12px; align-self: end; }
.rbt .ms .links a { font: 700 12px/1.4 var(--rbt-mono); letter-spacing: .12em; text-transform: uppercase; }
.rbt .ms + .ms { margin-top: 16px; }
.rbt .ms-short .title { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); }
@media (max-width: 860px) { .rbt .ms { grid-template-columns: minmax(0, 1fr); padding: 20px 18px 22px; } }

@media print {
  .rbt { background: #fff; color: #000; padding-bottom: 0; }
  .rbt .jump, .rbt .pp-film { display: none; }
  .rbt .sec { margin-top: 24px; padding-top: 24px; }
  .rbt :is(.hist li, .means li, .key-list > div, .stands > div, .ms, .nums li, .ident, .hist-pic) { break-inside: avoid; }
  .rbt :is(h2, h3, .eyebrow, .step-meta) { break-after: avoid; }
  .rbt .hist-pic img { max-height: 70mm; width: auto; max-width: 100%; }
}

/* Skip link (as on the sibling pages): hidden until focused */
body[data-rpi-page] > .skip { position: absolute; left: 1rem; top: -10rem; z-index: 100; padding: .75rem 1rem; background: #fff; color: #1d1d1b; font: 600 15px/1.2 var(--rbt-text); text-decoration: underline; }
body[data-rpi-page] > .skip:focus { top: 1rem; }
@media print { body[data-rpi-page] > .skip { display: none; } }

/* Forced colours (Windows high contrast): the status squares keep a visible shape in system colours; the words carry the meaning. */
@media (forced-colors: active) {
  .rbt .sq { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
  .rbt .sq-sup { background: Canvas; box-shadow: inset 0 0 0 1.5px CanvasText; }
  .rbt .ident { box-shadow: none; border: 2px solid CanvasText; }
  .rbt .count-legend i { forced-color-adjust: none; background: Canvas; box-shadow: inset 0 0 0 1.5px CanvasText; }
  .rbt .count-legend .kept { background: CanvasText; }
  .rbt .count-legend .leak { background: repeating-linear-gradient(135deg, CanvasText 0 1px, Canvas 1px 4px); }
  .rbt svg :is(.sq-leak, .sq-open) { stroke: CanvasText; }
  .rbt svg .hatch-line { stroke: CanvasText; }
  .rbt svg .sq-kept { fill: CanvasText; stroke: CanvasText; }
}

/* Pass 12: the hero holds one subject. Below 1100 px the film (when it lands) comes before the lede: headline, film, lede, status;
   the static drawing that holds its place until then follows the status. */
.rbt .hero-count .grids { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 14px; }
.rbt .hero-count .grid-cell .num b { font-size: clamp(1.7rem, 1.2rem + 1.2vw, 2.5rem); }
@media (max-width: 1099.98px) {
  .rbt .hero-row > .pp-film { order: -1; }
}
@media (max-width: 699.98px) {
  .rbt .hero-count .grids { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .rbt .hero-count .grid-cell .num { flex-direction: column; gap: 4px; }
  .rbt .hero-count .grid-cell .num span, .rbt .hero-count .grid-cell .k { font-size: 9px; letter-spacing: .06em; }
  .rbt .status-line { gap: 2px 14px; font-size: 10.5px; letter-spacing: .08em; margin-top: 14px; }
}
/* Steps: the first, concrete paragraph and its source stay open; the rest of each step is in "More" (moved, not cut). */
.rbt details.more { margin-top: 14px; border-top: 1px solid var(--rbt-rule); padding-top: 10px; max-width: 44rem; }
.rbt details.more summary { cursor: pointer; font: 700 11.5px/1.6 var(--rbt-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rbt-ink); }
.rbt details.more > p:first-of-type { margin-top: 10px; }
.rbt details.honest p.k { margin-top: 16px; }
@media print {
  .rbt details:is(.more, .honest)::details-content { content-visibility: visible; }
  .rbt details.honest summary { list-style: none; }
  .rbt details.more summary { display: none; }
  .rbt details.more { border-top: 0; padding-top: 0; }
}
.rbt .hero-count .count-legend { margin-top: 16px; }
@media (max-width: 699.98px) { .rbt .hero-count .grid-cell .num span { display: none; } }
@media (min-width: 1100px) { .rbt .hero-copy .status-line { letter-spacing: .07em; gap: 6px 16px; } }
/* Pass 13 (design plan B): the glossary sits after the steps, folded; a one-line term row stands in its old place. */
.rbt .terms { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--rbt-rule); font-size: 14.5px; line-height: 1.7; color: var(--rbt-soft); }
.rbt .terms .k { margin-right: 14px; color: var(--rbt-ink); }
.rbt .terms a:not(.k) { color: var(--rbt-ink); text-decoration-color: var(--rbt-hair); text-underline-offset: 3px; }
.rbt details.key { margin-top: 34px; }
.rbt details.key > summary { cursor: pointer; color: var(--rbt-ink); }
.rbt details.key > summary h3 { display: inline; }
.rbt details.key .key-list > div { scroll-margin-top: 90px; }
/* The closing line */
.rbt .closing { margin-top: 80px; padding-top: 30px; border-top: 1px solid var(--rbt-ink); max-width: 1200px;
  font: 820 clamp(1.7rem, 1.15rem + 1.7vw, 2.8rem)/1.06 var(--rbt-display); letter-spacing: -.035em; color: var(--rbt-ink); text-wrap: balance; }
@media print { .rbt details.key::details-content { content-visibility: visible; } .rbt .terms { display: none; } }
@media print { .rbt details.hist-pic::details-content { content-visibility: visible; } .rbt .hist-pic .enl { display: none; } .rbt .hist { columns: 1; } }
/* A film in the hero row replaces the static drawing at every width (the drawing stays in the markup for a page without a film). */
.rbt .hero-row:has(.pp-film) .hero-count { display: none; }

/* Pass 30, a design critique of the redesigned page (CSS only; no wording changed). */
/* Phone: the hero drawing as 2 x 2 panels, so the cells and labels stay legible. */
@media (max-width: 699.98px) {
  .rbt .hero-count .grids { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; }
  .rbt .hero-count .grid-cell .num { flex-direction: row; gap: 2px 8px; }
  .rbt .hero-count .grid-cell .num span { display: inline; }
  .rbt .hero-count .grid-cell .num span, .rbt .hero-count .grid-cell .k { font-size: 10.5px; letter-spacing: .08em; }
}
/* Steps: body type at the flagship's step size; the step's label and heading stay beside its text while it scrolls. */
.rbt .step-body p { font-size: 16.5px; line-height: 1.6; }
@media (min-width: 861px) { .rbt .step-meta { position: sticky; top: 96px; align-self: start; } }
/* Timeline: one thumbnail size for every scan (the full picture opens in place). */
.rbt .hist-pic:not([open]) summary img { width: 100px; height: 84px; object-fit: cover; object-position: center top; }
@media (max-width: 860px) {
  .rbt .hist-pic:not([open]) summary img { width: 76px; height: 64px; }
  .rbt .hist li > .hist-pic { grid-row: 1; }
  .rbt .hist li > :is(.when, div):not(.when) { grid-column: 1 / -1; grid-row: 2; }
  .rbt .hist li > .hist-pic[open] { grid-row: 3; }
}
/* Under the hero: one rule, not two, between the jump nav and the term row. */
.rbt .terms { border-top: 0; margin-top: 6px; padding-top: 0; }
/* Numbers: equal tiles, sources on one line, numerals at the flagship's size. */
.rbt .nums li { display: flex; flex-direction: column; }
.rbt .nums li > .src { margin-top: auto; padding-top: 12px; }
.rbt .nums .big { font-size: clamp(2.6rem, 1.8rem + 2.4vw, 4rem); }
/* The closing line at section-heading weight, with room before the footer. */
.rbt .closing { margin-top: 96px; padding: 40px 0 120px; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem); line-height: .98; }
@media print { .rbt .step-meta { position: static; } .rbt .closing { padding-bottom: 0; } }

/* Films: in the hero's right column (about 450-650 px wide) the house film block lays its controls over the picture's lower right,
   where the caption cues are; inside a narrow film box the controls sit under the picture instead (container query on the box). */
.rbt .pp-film { container-type: inline-size; }
@container (max-width: 900px) {
  .rbt .pp-film .pp-film-ui { position: static; justify-content: flex-end; padding: 10px 8px 8px; }
}
/* Film credits (DECISIONS 8 Nov 11:10 and 11:22 pm CT): each film's CREDITS_PAGE.txt, folded under the film ("Pictures and credits").
   tools/place_film.py puts the film and its credits in one .film-wrap, which takes the film's place in the hero row. */
.rbt .film-wrap > .pp-film { margin-bottom: 0; }
.rbt details.film-credits { margin-top: 8px; max-width: 960px; }
.rbt details.film-credits summary { cursor: pointer; font: 700 11px/1.6 var(--rbt-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--rbt-soft); }
.rbt details.film-credits .k { margin-top: 8px; }
.rbt details.film-credits ul { margin: 6px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.5; color: var(--rbt-soft); }
.rbt details.film-credits ul + ul { margin-top: 12px; }
.rbt details.film-credits li { overflow-wrap: anywhere; }
.rbt details.film-credits li + li { margin-top: 4px; }
.rbt details.film-credits a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 1099.98px) { .rbt .hero-row > .film-wrap { order: -1; } }
@media print { .rbt .film-wrap { display: none; } }
/* Owner note 8 Nov 11:22 pm CT: the phone hero's count labels one step larger (they were the smallest text on the first screen). */
@media (max-width: 699.98px) {
  .rbt .hero-count .grid-cell .num span, .rbt .hero-count .grid-cell .k { font-size: 11.5px; letter-spacing: .06em; }
}
/* Pass 35: figure titles are h3 headings (screen-reader users can jump between figures); they keep the label style. */
.rbt .fig-block > .fig-head h3 { margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
/* Pass 36: the status line's items and the hero note's terms link to where each is explained; quiet dotted underline. */
.rbt :is(.status-line, .hero-cap) a { color: inherit; text-decoration: underline dotted; text-decoration-color: currentColor; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rbt :is(.status-line, .hero-cap) a:hover { text-decoration-style: solid; }
/* Pass 42: under a film, its one-sentence description and the provenance line (DECISIONS 9 Nov 2:40 am CT), in caption style. */
.rbt .film-wrap .film-desc { margin-top: 10px; max-width: 40rem; font-size: 14.5px; line-height: 1.5; color: var(--rbt-body); }
.rbt .film-wrap .film-note { margin-top: 6px; max-width: 40rem; font-size: 13px; line-height: 1.5; color: var(--rbt-soft); }
.rbt .film-wrap .film-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }