/* Universe Formation: 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, and the same as on the site's topic page
   How Did the Universe Begin?: magenta an entry and the first event, cyan the record and its ticks, gold phi and a
   complete eight-tick moment, red what is excluded or not derived, green balance at cost zero and what is proved.
   Square corners, solid rules, no gradients or soft shadows. The shared header, navigation and footer keep their own styles. */

:root {
  color-scheme: light dark;
  --uf-paper: #faf8f3; --uf-ink: #1d1d1b; --uf-body: #2a2926; --uf-soft: #3c3a36; --uf-hair: #8a8a8a;
  --uf-rule: color-mix(in srgb, var(--uf-ink) 16%, var(--uf-paper));
  --uf-faint: color-mix(in srgb, var(--uf-ink) 5%, var(--uf-paper));
  --uf-event: #e6007e; --uf-event-text: #c0006a;
  --uf-record: #009fe3; --uf-record-text: #0072b5;
  --uf-gold: #ffc328; --uf-gold-text: #8a6100;
  --uf-open: #c8401f; --uf-open-text: #ad371a;
  --uf-ok: #0b7a3e;
  --uf-display: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --uf-text: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --uf-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media screen and (prefers-color-scheme: dark) {
  :root {
    --uf-paper: #141413; --uf-ink: #faf8f3; --uf-body: #e9e6df; --uf-soft: #c9c5bc; --uf-hair: #8a8a8a;
    --uf-event: #ff3d9e; --uf-event-text: #ff6fb6;
    --uf-record: #2bb3f0; --uf-record-text: #2bb3f0;
    --uf-gold-text: #ffc328;
    --uf-open: #ff6a3d; --uf-open-text: #ff8a63;
    --uf-ok: #3fb37a;
  }
}

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

/* Type roles */
.uf .k { font: 700 11px/1.35 var(--uf-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--uf-soft); }
.uf .k-ink { color: var(--uf-ink); }
.uf .eyebrow { font: 700 12px/1.25 var(--uf-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--uf-soft); }
.uf .eyebrow a { color: inherit; }
body[data-rpi-page] .uf h1 { font-family: var(--uf-display); font-weight: 820; font-size: clamp(2.6rem, 1.2rem + 4.6vw, 5.4rem); line-height: .94;
  letter-spacing: -.045em; color: var(--uf-ink); text-shadow: 0 0 .5px color-mix(in srgb, var(--uf-ink) 55%, transparent);
  text-wrap: balance; max-width: 14ch; }
body[data-rpi-page] .uf h2 { font-family: var(--uf-display); font-weight: 820; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.1rem); line-height: .96;
  letter-spacing: -.038em; color: var(--uf-ink); text-wrap: balance; max-width: 28ch;
  text-shadow: 0 0 .5px color-mix(in srgb, var(--uf-ink) 55%, transparent); }
body[data-rpi-page] .uf h3 { font-family: var(--uf-display); font-weight: 780; font-size: clamp(1.25rem, 1.05rem + .6vw, 1.6rem); line-height: 1.08;
  letter-spacing: -.02em; color: var(--uf-ink); text-wrap: balance; }
.uf .lede { font-weight: 450; font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.34; letter-spacing: -.008em; color: var(--uf-ink); }
/* Labels and source lines keep their own type inside any block that sets paragraph sizes. */
body .uf p.k { font: 700 11px/1.35 var(--uf-mono); letter-spacing: .14em; text-transform: uppercase; }
body .uf p.src { font: 400 12.5px/1.5 var(--uf-mono); color: var(--uf-soft); margin-top: 12px; }
body .uf p.status-line { font: 700 12.5px/1.45 var(--uf-mono); letter-spacing: .02em; color: var(--uf-ink);
  display: flex; gap: 9px; align-items: baseline; margin-top: 16px; }
body .uf p.status-line + p.status-line { margin-top: 6px; }

/* Status squares: green proved, outlined proved given a stated premise, red not derived */
.uf .sq { flex: none; display: inline-block; width: 10px; height: 10px; transform: translateY(1px); }
.uf .sq-ok { background: var(--uf-ok); }
.uf .sq-given { background: transparent; box-shadow: inset 0 0 0 1.5px var(--uf-ink); }
.uf .sq-open { background: var(--uf-open); }

/* Hero: the claim and lede beside the live figure (the film, when it comes, takes the figure's column) */
.uf .hero { padding: 32px 0 16px; }
.uf .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.uf .hero h1 { margin-top: 16px; }
.uf .hero .lede { margin-top: 22px; max-width: 40rem; }
.uf .status { display: flex; flex-direction: column; gap: 9px; margin-top: 24px; }
.uf .status li { display: flex; align-items: baseline; gap: 10px; font: 400 15.5px/1.45 var(--uf-text); color: var(--uf-body); }
/* Each status line: its label in the house mono capitals, the claim itself in the text face (small mono capitals over two or
   three lines tired a cold reader on a phone). */
.uf .status li .lab { font: 700 11.5px/1 var(--uf-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--uf-ink); margin-right: .2em; }
.uf .hero-fig { margin: 0; border-top: 1px solid var(--uf-ink); padding-top: 12px; }
.uf .hero-fig > .k { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; color: var(--uf-ink); }
.uf .live { color: var(--uf-record-text); }
.uf .uf-fig { margin-top: 12px; }
.uf .uf-fig > p { max-width: 40rem; font-size: 15.5px; line-height: 1.5; }
.uf .fig-cap { margin-top: 14px; font-size: 14.5px; line-height: 1.48; color: var(--uf-body); max-width: 44rem; }
.uf details.honest { margin-top: 12px; border-top: 1px solid var(--uf-rule); padding-top: 9px; }
.uf details.honest summary { cursor: pointer; font: 700 11px/1.6 var(--uf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--uf-ink); }
.uf details.honest p { margin-top: 8px; max-width: 44rem; font-size: 14.5px; line-height: 1.5; }
@media (min-width: 1100px) {
  .uf .hero-grid { grid-template-columns: minmax(0, 11fr) minmax(0, 12fr); gap: 40px 56px; }
  body[data-rpi-page] .uf .hero h1 { font-size: clamp(3.4rem, 1.2rem + 3.3vw, 4.7rem); }
  .uf .hero-fig { margin-top: 8px; }
  /* With the film in the hero's second column, the figure runs under both. */
  .uf .hero-grid:has(.uf-film) .hero-fig { grid-column: 1 / -1; }
}
.uf .hero-grid .film-wrap { margin-top: 8px; }
.uf .hero-grid .film-wrap .uf-film { margin-top: 0; }
/* The film's label, in the figures' style: its title, then its length (read from the video) and what it carries */
.uf .film-wrap > .film-k { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; margin-bottom: 8px; color: var(--uf-ink); }
.uf .film-wrap > .film-k .film-len { color: var(--uf-soft); }

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

/* Sections */
.uf .sec { border-top: 1px solid var(--uf-ink); padding: 32px 0 6px; margin-top: 22px; }
.uf .sec > .wrap > .eyebrow { margin-bottom: 14px; }
.uf .sec-intro { margin-top: 16px; max-width: 46rem; font-size: 18.5px; line-height: 1.45; color: var(--uf-body); }
.uf .sec-intro + .sec-intro { margin-top: 12px; }

/* The question: a dated history */
.uf .hist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; margin-top: 26px; }
.uf .hist li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 4px 18px; padding: 16px 0 18px; border-top: 1px solid var(--uf-rule); }
.uf .hist .when { font: 700 12px/1.5 var(--uf-mono); letter-spacing: .1em; color: var(--uf-ink); }
body[data-rpi-page] .uf .hist h3 { font-size: 1.12rem; font-weight: 750; letter-spacing: -.012em; line-height: 1.2; }
.uf .hist p { margin-top: 8px; font-size: 15.5px; line-height: 1.45; }
.uf .hist blockquote { margin: 8px 0 0; padding-left: 14px; border-left: 2px solid var(--uf-ink); font-style: italic; font-size: 15.5px; line-height: 1.45; }
body .uf .hist p.cite { margin-top: 8px; font: 400 12.5px/1.5 var(--uf-mono); color: var(--uf-soft); }
.uf .hist li.rs { border-top: 2px solid var(--uf-ink); }
.uf .hist li.rs { grid-column: 1 / -1; }
.uf .hist li.rs > div { max-width: 46rem; }
.uf .hist.collapsed li.more { display: none; }
.uf .hist li.more-toggle { display: block; grid-column: 1 / -1; padding: 14px 0 18px; }
.uf .hist li.more-toggle[hidden] { display: none; }
.uf .hist-more { font: 700 12px/1.3 var(--uf-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--uf-ink);
  background: transparent; border: 1px solid var(--uf-ink); padding: 12px 14px; cursor: pointer; }
.uf .hist .rs .when { color: var(--uf-ok); }
@media (max-width: 860px) {
  .uf .hist { grid-template-columns: minmax(0, 1fr); }
  .uf .hist li { grid-template-columns: minmax(0, 1fr); }
}

/* The five words */
.uf .words { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); gap: 0 26px; }
.uf .words > div { border-top: 2px solid var(--uf-ink); padding-top: 10px; }
.uf .words dt { font: 700 11px/1.35 var(--uf-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--uf-ink); }
.uf .words dd { margin: 8px 0 0; font-size: 15px; line-height: 1.45; }
@media (max-width: 1100px) { .uf .words { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 26px; } }
@media (max-width: 560px) { .uf .words { grid-template-columns: minmax(0, 1fr); } }

/* Three nothings and the start */
.uf .scope { margin-top: 24px; max-width: 46rem; padding: 14px 18px 16px; border-left: 3px solid var(--uf-ink); background: var(--uf-faint);
  font-size: 16.5px; line-height: 1.5; color: var(--uf-ink); }
.uf .nothings { margin-top: 26px; }
.uf .nothings > .k { color: var(--uf-ink); }
.uf .noth { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr); gap: 0; margin-top: 12px; border: 1px solid var(--uf-ink); }
.uf .noth li { padding: 16px 18px 18px; border-left: 1px solid var(--uf-rule); }
.uf .noth li:first-child { border-left: 0; }
.uf .noth .tag { font: 700 10.5px/1.3 var(--uf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--uf-open-text); }
.uf .noth .start .tag { color: var(--uf-ok); }
body[data-rpi-page] .uf .noth h3 { margin-top: 8px; font-size: 1.12rem; letter-spacing: -.012em; }
.uf .noth p { margin-top: 8px; font-size: 15px; line-height: 1.45; }
.uf .noth .start { background: var(--uf-faint); box-shadow: inset 0 3px 0 var(--uf-ok); }
.uf .verdict { margin-top: 14px; font: 780 clamp(1.15rem, 1rem + .5vw, 1.4rem)/1.2 var(--uf-display); letter-spacing: -.015em; color: var(--uf-ink); }
@media (max-width: 960px) {
  .uf .noth { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uf .noth li:nth-child(3) { border-left: 0; }
  .uf .noth li:nth-child(n+3) { border-top: 1px solid var(--uf-rule); }
}
@media (max-width: 560px) {
  .uf .noth { grid-template-columns: minmax(0, 1fr); }
  .uf .noth li { border-left: 0; }
  .uf .noth li + li { border-top: 1px solid var(--uf-rule); }
}

/* How it forms: numbered steps, each with its label and heading beside its text */
.uf .steps { margin-top: 22px; }
.uf .step { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 10px 48px; padding: 22px 0 22px; border-top: 1px solid var(--uf-rule); }
.uf .step-meta .k { color: var(--uf-ink); }
.uf .step-meta h3 { margin-top: 10px; }
.uf .step-body p { max-width: 44rem; font-size: 17.5px; line-height: 1.5; }
.uf .step-body p + p { margin-top: .8em; }
.uf .step-body p.case { padding-left: 14px; border-left: 2px solid var(--uf-record); }
.uf .step-body p.case::before { content: "Example  "; font: 700 10.5px/1 var(--uf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--uf-record-text); white-space: pre; }
.uf .step.frontier-step .step-meta .k { color: var(--uf-open-text); }
@media (max-width: 860px) { .uf .step { grid-template-columns: minmax(0, 1fr); } }

/* The numbers */
.uf .nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 40px; margin-top: 26px; }
.uf .nums li { border-top: 2px solid var(--uf-ink); padding-top: 12px; }
.uf .nums .big { margin-top: 10px; font: 860 clamp(3rem, 2rem + 3vw, 4.2rem)/.9 var(--uf-display); letter-spacing: -.05em; color: var(--uf-ink);
  font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.uf .nums .big small { font-size: .45em; letter-spacing: -.02em; }
.uf .nums .ok-n { color: var(--uf-ok); }
.uf .nums .gold-n { color: var(--uf-gold-text); }
.uf .nums .rec-n { color: var(--uf-record-text); }
.uf .nums .ev-n { color: var(--uf-event-text); }
.uf .nums p { margin-top: 12px; font-size: 15.5px; line-height: 1.45; }
@media (max-width: 960px) { .uf .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .uf .nums { grid-template-columns: minmax(0, 1fr); } }

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

/* Where it stands */
.uf .stands { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, .8fr); gap: 30px 36px; margin-top: 26px; }
.uf .stands > div { border-top: 2px solid var(--uf-ink); padding-top: 12px; }
body[data-rpi-page] .uf .stands h3 { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; }
.uf .stands ul { margin-top: 12px; }
.uf .stands li { padding: 9px 0; border-top: 1px solid var(--uf-rule); font-size: 15px; line-height: 1.42; }
.uf .stands li:first-child { border-top: 0; }
.uf .frontier { margin-top: 26px; padding: 22px 26px 24px; border: 1px solid var(--uf-ink); border-top: 5px solid var(--uf-open); }
.uf .frontier .k { color: var(--uf-open-text); }
.uf .frontier p.say { margin-top: 10px; font: 780 clamp(1.2rem, 1rem + .7vw, 1.6rem)/1.2 var(--uf-display); letter-spacing: -.015em; color: var(--uf-ink); }
.uf .frontier p + p { margin-top: 10px; }
@media (max-width: 1000px) { .uf .stands { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .uf .frontier { padding: 18px 16px 20px; } }

/* Go deeper: the essays */
.uf .essays { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 30px; margin-top: 26px; }
.uf .essays li { border-top: 1px solid var(--uf-rule); padding: 18px 0 20px; }
.uf .essays li.first { grid-column: span 2; border-top: 2px solid var(--uf-ink); }
.uf .essays a.t { display: block; margin-top: 8px; font: 750 1.08rem/1.25 var(--uf-text); letter-spacing: -.01em; color: var(--uf-ink); }
.uf .essays li.first a.t { font: 820 clamp(1.4rem, 1.1rem + 1vw, 2rem)/1.05 var(--uf-display); letter-spacing: -.03em; }
.uf .essays p { margin-top: 6px; font-size: 15px; line-height: 1.45; }
@media (max-width: 1100px) { .uf .essays { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .uf .essays { grid-template-columns: minmax(0, 1fr); } .uf .essays li.first { grid-column: auto; } }

/* The papers */
.uf .papers { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.uf .papers li { border-top: 1px solid var(--uf-rule); padding: 14px 0 16px; }
.uf .papers a.t { font: 750 1.05rem/1.3 var(--uf-text); letter-spacing: -.01em; color: var(--uf-ink); }
.uf .papers p { margin-top: 6px; font-size: 15px; line-height: 1.45; }
@media (min-width: 1100px) { .uf .papers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; } }
@media (max-width: 860px) { .uf .papers { grid-template-columns: minmax(0, 1fr); } }

/* A live figure that takes the full row under its step */
.uf .fig-row { margin: 4px 0 34px; padding-top: 14px; border-top: 1px solid var(--uf-ink); }
.uf .fig-row > .k { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; color: var(--uf-ink); }

/* A live figure inside a step's text column */
.uf .step-fig { margin: 16px 0 6px; padding-top: 12px; border-top: 1px solid var(--uf-ink); }
/* At two-column widths a step's live figure takes the full content width (both grid columns): the step's left column is empty
   beside it, and the figure's tables and controls need the room. Its caption keeps a reading measure. */
@media (min-width: 861px) {
  .uf .step-body .step-fig { margin-left: calc(-50% - 48px); }
  .uf .step-body .step-fig > .fig-cap, .uf .step-body .step-fig > details.honest { max-width: 46rem; }
  .uf .step-body .step-fig > p.k { max-width: none; }
}
.uf .step-fig > .k { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; color: var(--uf-ink); }

/* One plain line that opens a step, and the standard mathematics it uses */
body .uf .step-body p.oneline { font: 650 1.12rem/1.38 var(--uf-text); letter-spacing: -.008em; color: var(--uf-ink); margin-bottom: .9em; }
body .uf .step-body p.std { margin-top: 14px; font-size: 14.5px; line-height: 1.5; color: var(--uf-soft); max-width: 44rem; }
.uf .std .k { margin-right: 8px; color: var(--uf-ink); }

/* The exact statement, kept under each plain step */
.uf details.exact { margin-top: 14px; border-top: 1px solid var(--uf-rule); padding-top: 10px; max-width: 44rem; }
.uf details.exact summary { cursor: pointer; font: 700 11px/1.6 var(--uf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--uf-ink); }
.uf details.exact p { margin-top: 8px; font-size: 15.5px; line-height: 1.5; color: var(--uf-body); }

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

/* Steps 5, 8 and 9 folded behind their one-liners (D26) */
.uf details.fold { margin-top: 14px; border-top: 1px solid var(--uf-rule); border-bottom: 1px solid var(--uf-rule); padding: 10px 0; }
.uf details.fold > summary { cursor: pointer; font: 700 11px/1.6 var(--uf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--uf-ink); }
.uf details.fold[open] > summary { margin-bottom: 14px; }
.uf details.fold .step-fig { margin-top: 20px; }
.uf details.exact p.std { margin-top: 12px; font-size: 14.5px; }
.uf p.settle { margin-top: 24px; max-width: 46rem; font-size: 17px; line-height: 1.55; color: var(--uf-body); }

/* Hero order: copy, status, film, figure 1 (phones: the copy first); at >= 1100 px the status sits under the film */
.uf .hero-grid > .hero-copy { order: 1; }
.uf .hero-grid > .hero-side { order: 2; }
.uf .hero-grid > .film-wrap { order: 3; }
.uf .hero-grid > .hero-fig { order: 4; }
.uf .hero-side .status { margin-top: 18px; }
.uf .hero-side p.premise { margin-top: 0; }
@media (max-width: 1099px) { .uf .hero-side p.premise { margin-top: -6px; } }
@media (min-width: 1100px) {
  .uf .hero-grid:has(.uf-film) { grid-template-areas: "copy film" "copy side" "fig fig"; grid-template-rows: auto 1fr auto; }
  .uf .hero-grid:has(.uf-film) > .hero-copy { grid-area: copy; }
  .uf .hero-grid:has(.uf-film) > .film-wrap { grid-area: film; }
  .uf .hero-grid:has(.uf-film) > .hero-side { grid-area: side; }
  .uf .hero-grid:has(.uf-film) > .hero-fig { grid-area: fig; }
}

/* Dark scheme: the film is drawn on cream paper, which glares on the near-black page (cold reader, 9 Nov). The page dims the
   picture a little, as one dims a photograph in a dark room; the film's own colours and words are unchanged. */
@media screen and (prefers-color-scheme: dark) { .uf .uf-film-video { filter: brightness(.8); } }

/* Forced colours drop backgrounds: keep the status squares visible (their meaning is also in the words beside them) */
@media (forced-colors: active) {
  .uf .sq { forced-color-adjust: none; border: 1px solid CanvasText; }
  /* The start box loses its tint and green top edge to forced colours: mark it with the system highlight instead. */
  .uf .noth .start { outline: 3px solid Highlight; outline-offset: -3px; }
  /* The film's round buttons lose their backgrounds: give them a visible edge. */
  .uf .uf-film-ui button { border: 1px solid ButtonText; }
}

/* D28: the one premise, named once under the lede */
.uf p.premise { margin-top: 16px; max-width: 46rem; font-size: 16.5px; line-height: 1.5; color: var(--uf-body); border-left: 3px solid var(--uf-ink); padding-left: 14px; }
.uf p.premise strong { color: var(--uf-ink); }

@media print {
  .uf { background: #fff; color: #000; }
  .uf .jump, .uf .film-wrap { display: none; }
  .uf .hist.collapsed li.more { display: grid; }
  .uf .hist li.more-toggle { display: none; }
  .uf .k { break-after: avoid; }
  /* Keep a section's kicker and headline, and a step's label and headline, with what follows them. */
  .uf .sec .eyebrow, .uf .sec h2, .uf .step-meta { break-after: avoid; }
  .uf .step-meta { break-inside: avoid; }
  /* A figure's large blocks (a chart grid or body nearly a page tall) may break across pages, so no page is left nearly empty
     before them; their drawings and rows still stay whole (the figures' own rules on the inner parts). */
  .uf :is(.ufb, .ufp, .uft, .ufl, .ufc):is(.ufb, .ufp, .uft, .ufl, .ufc) > *,
  .uf :is(.ufb, .ufp, .uft, .ufl, .ufc):is(.ufb, .ufp, .uft, .ufl, .ufc) > * > * { break-inside: auto; }
  .uf :is(.ufb, .ufp, .uft, .ufl, .ufc):is(.ufb, .ufp, .uft, .ufl, .ufc) svg,
  .uf :is(.ufb, .ufp, .uft, .ufl, .ufc):is(.ufb, .ufp, .uft, .ufl, .ufc) tr { break-inside: avoid; }
}

@media (min-width: 1100px) {
  .uf .hero-fig > .fig-cap, .uf .step-body .step-fig > .fig-cap { max-width: none; column-count: 2; column-gap: 40px; }
}

/* Phones: the premise box beside the headline is what qualifies it, so it should start on the first screen even with the 110-word
   lede; the lede steps down a little and the gaps around the headline tighten (wider screens unchanged). */
@media (max-width: 480px) {
  .uf .hero h1 { margin-top: 12px; }
  .uf .hero .lede { margin-top: 16px; font-size: 1.1rem; line-height: 1.33; }
}