@font-face{font-family:'Big Shoulders';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/big-shoulders-800.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/public-sans-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Nocturne — crooze.fm
   Direction: "Loud and flat", seed 342092709.
   The object is a slot reel: eight stations are positions, the hour you are in is
   the one standing in the window. Flat saturated colour, heaviest type, no glow —
   a cabinet at night, not a neon filter. */

/* ---------- tokens ---------- */
:root {
  /* The dealt palette was white / mint / orange, which fights a casino floor.
     Its proportions are kept exactly — one ground, one ink, one accent, four
     flooding fields — and the colours are taken from the subject instead. */
  --bg: #0b0b0f;
  --surface: #15151c;
  --ink: #f2f2f4;
  --muted: #aeaaba;
  --accent: #ff2e88;
  --accent-ink: #0b0b0f;

  --field-1: #15151c;  --field-1-ink: #f2f2f4;
  --field-2: #ff2e88;  --field-2-ink: #0b0b0f;
  --field-3: #ffc62e;  --field-3-ink: #0b0b0f;
  --field-4: #efeff1;  --field-4-ink: #0b0b0f;

  --gutter: clamp(18px, 2.6vw, 28px);
  --maxw: 1480px;
  --gap-section: clamp(64px, 7vw, 108px);
  --reel-cell: 70px;

  --step-small: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --step-lead: clamp(1.3125rem, 1.05rem + 1.2vw, 1.75rem);
  --step-section: clamp(2rem, 1.1rem + 4.2vw, 4.75rem);
  --step-head: clamp(2.5rem, 0.3rem + 10.4vw, 9.5rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body, h1, h2, h3, h4, p, ul, ol, li, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--step-body);
  line-height: 1.5;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--accent); color: var(--accent-ink); padding: 12px 18px;
}
.skip:focus { left: 0; }

/* ---------- type roles ---------- */
.display {
  font-family: 'Big Shoulders', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.88;
  overflow-wrap: anywhere;
}
h1, h2, h3 { font-weight: 800; }
h2.display { font-size: var(--step-section); }
p + p { margin-top: 0.85em; }
.lede { font-size: var(--step-lead); line-height: 1.2; max-width: 40ch; }
.note { max-width: 44ch; }
.small { font-size: var(--step-small); }
.dim { color: var(--muted); }
.nums { font-variant-numeric: tabular-nums; }

/* ---------- frame ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.grid12 { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(12px, 1.4vw, 24px); }
section { padding-block: var(--gap-section); }

/* panels meet edge to edge; each is one flat colour and its text is one other */
.field { padding-block: clamp(56px, 7vw, 104px); }
.f1 { background: var(--field-1); color: var(--field-1-ink); }
.f2 { background: var(--field-2); color: var(--field-2-ink); }
.f3 { background: var(--field-3); color: var(--field-3-ink); }
.f4 { background: var(--field-4); color: var(--field-4-ink); }
.f2, .f3, .f4 { --muted: #332f3a; }

/* ---------- navigation: a plain bar ---------- */
.topbar {
  display: flex; align-items: baseline; gap: clamp(14px, 2.4vw, 36px);
  padding-block: 20px; flex-wrap: wrap;
}
.wordmark {
  font-family: 'Big Shoulders', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: var(--step-lead); letter-spacing: 0.01em; text-decoration: none; line-height: 1;
}
.topnav { display: flex; gap: clamp(12px, 1.8vw, 26px); flex-wrap: wrap; font-size: var(--step-small); }
.topnav a { text-decoration: none; transition: color 160ms var(--ease); }
.topnav a:hover, .topnav a[aria-current] { color: var(--accent); }
.langs { margin-left: auto; display: flex; gap: 10px; font-size: var(--step-small); }
.langs a { text-decoration: none; opacity: 0.55; transition: opacity 160ms var(--ease); }
.langs a:hover { opacity: 1; }
.langs a[aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- button: flat, square, one fill ---------- */
.btn {
  display: inline-block; background: var(--accent); color: var(--accent-ink);
  font-family: 'Big Shoulders', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: var(--step-lead); line-height: 1; letter-spacing: 0.01em;
  padding: 18px 30px 16px; text-decoration: none; border: 0; cursor: pointer;
  transition: transform 160ms var(--ease), background-color 160ms var(--ease);
}
.btn:hover { background: var(--field-3); transform: translateY(-3px); }
.btn:active { transform: translateY(0); }

/* ================= HERO: the marquee and the reel ================= */
.hero { background: var(--bg); padding-bottom: clamp(48px, 6vw, 86px); }
.hero-lede { margin-top: clamp(22px, 2.6vw, 38px); max-width: 44ch; }

/* the moving line: the name, repeated, a dot between copies */
.marquee {
  position: relative; margin-top: clamp(20px, 3vw, 48px);
  overflow: hidden; display: flex; align-items: center;
}
.marquee-track {
  display: flex; flex: 0 0 auto; align-items: center;
  margin-left: calc(-1 * var(--gutter));
  animation: slide 38s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track > * {
  font-family: 'Big Shoulders', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: var(--step-section); line-height: 0.95; letter-spacing: -0.005em;
  white-space: nowrap; padding-right: 0.3em; margin: 0;
}
.marquee-track > *::after { content: "•"; padding-left: 0.3em; color: var(--accent); }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.hero-row {
  margin-top: clamp(20px, 2.4vw, 36px);
  display: flex; flex-direction: column; gap: clamp(24px, 3vw, 44px);
}
@media (min-width: 900px) {
  .hero-row { flex-direction: row; align-items: flex-start; gap: clamp(28px, 4vw, 72px); }
  .hero-row > :first-child { flex: 1 1 auto; }
}
.reel-box { margin-top: clamp(22px, 2.4vw, 36px); }
.hero-h1 {
  font-size: var(--step-head); line-height: 0.95;
  margin-top: clamp(22px, 2.8vw, 44px); padding-bottom: 0.06em;
  max-width: 20ch;
}
/* the heading must not run across the column the reel stands in */

.hero-foot .lede { margin-top: 18px; }
.hero-act { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 26px; }
.hero-shot { width: 100%; }
@media (min-width: 900px) { .hero-shot { width: clamp(200px, 24vw, 320px); flex: 0 0 auto; } }
.hero-shot video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--surface); }

/* ---------- the reel ---------- */
.reel-box { background: var(--surface); padding: clamp(16px, 1.8vw, 24px); }
.reel-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; font-size: var(--step-small); color: var(--muted);
}
/* all eight positions stay on the page; the hour you are in is the one on the
   payline. Clipping to a three-cell window hid the other five from the reader
   and from the meter, which is not worth the picture of a window. */
.reel { margin-top: 14px; position: relative; }
.reel-strip { display: flex; flex-direction: column; gap: 2px; }
.reel-cell {
  height: var(--reel-cell); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding-inline: clamp(12px, 1.2vw, 18px);
  text-decoration: none; background: var(--bg); color: var(--ink);
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.reel-cell:hover { background: var(--field-3); color: var(--accent-ink); }
.reel-name {
  font-family: 'Big Shoulders', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: var(--step-lead); line-height: 1; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.reel-hours { font-size: var(--step-small); font-variant-numeric: tabular-nums; white-space: nowrap; }
.reel-cell[data-on="1"] { background: var(--accent); color: var(--accent-ink); }
.reel-now { margin-top: 14px; font-size: var(--step-small); }
.reel-now strong { font-weight: 600; }
@media (max-width: 700px) { :root { --reel-cell: 62px; } }

/* ================= intro: one heavy paragraph, edge to edge ================= */
.shout {
  font-family: 'Big Shoulders', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: var(--step-section);
  line-height: 0.95; letter-spacing: -0.005em;
  max-width: 26ch;
  hyphens: none;
}
.shout-wrap {
  display: grid; gap: clamp(22px, 3vw, 46px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .shout-wrap { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; }
}
.shout-body { font-size: var(--step-body); max-width: 46ch; margin-top: 18px; }
.shout-chip { width: clamp(140px, 15vw, 230px); aspect-ratio: 1; transform: rotate(4deg); }
.shout-chip img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }

/* the four figures about the station, as a printed row */
.facts {
  margin-top: clamp(40px, 5vw, 76px);
  display: grid; gap: 28px clamp(14px, 1.8vw, 28px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fact-v {
  font-family: 'Big Shoulders', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: var(--step-section); line-height: 0.88; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.fact-l { font-size: var(--step-small); margin-top: 8px; max-width: 24ch; }

/* ================= list: one item per poster line ================= */
.poster { padding-block: clamp(56px, 6vw, 92px); }
.poster-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; text-decoration: none; transition: color 160ms var(--ease);
}
.poster-row:hover { color: var(--accent); }
.f2 .poster-row:hover, .f3 .poster-row:hover, .f4 .poster-row:hover { color: var(--bg); }
.poster-name {
  font-family: 'Big Shoulders', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: var(--step-head); line-height: 0.92; letter-spacing: -0.005em;
}
.poster-fact { font-size: var(--step-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 700px) {
  .poster-row { display: block; }
  .poster-name { font-size: clamp(3rem, 15vw, 5.5rem); }
  .poster-fact { display: block; margin: 4px 0 20px; }
}
.poster-foot { margin-top: 34px; font-size: var(--step-small); }

/* two items only: side by side fills the row that one-per-line would hollow out */
.poster-pair { }
@media (min-width: 760px) {
  .poster-pair .poster-row { display: block; }
  .poster-pair .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 56px); }
  .poster-pair .poster-foot { grid-column: 1 / -1; }
  .poster-pair .poster-fact { display: block; margin-top: 6px; }
}

/* ================= gallery: a wall of tiles ================= */
.tiles { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 820px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { position: relative; aspect-ratio: 1; overflow: hidden; display: flex; }
.tile img, .tile video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.12); display: block; }
.tile-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 12px; font-size: var(--step-small);
  display: flex; justify-content: space-between; gap: 10px;
  background: var(--bg); color: var(--ink);
}
.tile-word { flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18px; }
.tile-word b {
  font-family: 'Big Shoulders', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: var(--step-section); line-height: 0.9; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.tile-word span { font-size: var(--step-small); margin-top: 12px; max-width: 22ch; }
.tile-a { background: var(--field-2); color: var(--field-2-ink); }
.tile-b { background: var(--field-3); color: var(--field-3-ink); }
.tile-c { background: var(--field-4); color: var(--field-4-ink); }
.tile-d { background: var(--surface); color: var(--ink); }

/* ================= about / the letter: two columns, highlighted ================= */
.statement { font-size: var(--step-lead); line-height: 1.25; }
@media (min-width: 900px) { .statement { columns: 2; column-gap: clamp(28px, 3vw, 48px); } }
.statement-one { columns: 1; max-width: 62ch; }
.statement p { break-inside: avoid; margin-bottom: 0.7em; }
.mark {
  background: var(--field-3); color: var(--accent-ink);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  padding: 0 0.12em;
}
.mark-2 { background: var(--accent); color: var(--accent-ink); }
.sign { margin-top: 26px; font-size: var(--step-lead); font-weight: 600; }
.sign-role { font-size: var(--step-small); color: var(--muted); margin-top: 4px; }

/* ================= faq: a band per question ================= */
.qhead { background: var(--accent); color: var(--accent-ink); display: flex; align-items: flex-end; min-height: 20svh; padding-block: clamp(30px, 4vw, 54px); }
.qhead h2 { font-size: var(--step-section); }
.qband { padding-block: clamp(34px, 3.6vw, 56px); }
.qband:nth-of-type(odd) { background: var(--bg); }
.qband:nth-of-type(even) { background: var(--surface); }
.qband .wrap { display: grid; gap: 14px clamp(20px, 3vw, 56px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .qband .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.qband dt { font-size: var(--step-lead); font-weight: 600; line-height: 1.15; }
.qband dd { margin: 0; max-width: 60ch; }

/* ================= contact: a drifting strip and a three-cell bar ================= */
.strip { overflow: hidden; }
.strip-track { display: flex; gap: 8px; animation: slide 52s linear infinite; width: max-content; }
.strip:hover .strip-track { animation-play-state: paused; }
.strip-track img { height: clamp(110px, 14vw, 180px); width: auto; object-fit: cover; filter: grayscale(1) contrast(1.12); }
.bar { margin-top: clamp(26px, 3vw, 44px); display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .bar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 819px) { .cell-act { order: -1; } }
.cell {
  background: var(--bg); color: var(--ink);
  padding: clamp(18px, 2vw, 26px); min-height: 96px;
  display: flex; flex-direction: column; justify-content: center;
}
.cell b { font-size: var(--step-small); font-weight: 600; }
.cell p { font-size: var(--step-small); margin-top: 6px; }
.cell-act {
  background: var(--accent); color: var(--accent-ink); text-decoration: none;
  align-items: center; justify-content: center; text-align: center;
  font-family: 'Big Shoulders', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: var(--step-lead); line-height: 1;
  transition: background-color 160ms var(--ease);
}
.cell-act:hover { background: var(--field-3); }

/* ================= footer: the mark, built from blocks ================= */
.site-foot { background: var(--surface); padding-block: clamp(44px, 5vw, 76px); }
.blocks { display: flex; gap: 4px; align-items: flex-end; }
.blocks span {
  flex: 1 1 0; display: flex; align-items: flex-end; justify-content: center;
  font-family: 'Big Shoulders', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: var(--step-section); line-height: 0.82;
  padding-bottom: 0.06em; overflow: hidden;
}
.blocks span:nth-child(4n+1) { background: var(--field-2); color: var(--field-2-ink); height: clamp(84px, 13vw, 190px); }
.blocks span:nth-child(4n+2) { background: var(--field-3); color: var(--field-3-ink); height: clamp(68px, 10.5vw, 152px); }
.blocks span:nth-child(4n+3) { background: var(--field-4); color: var(--field-4-ink); height: clamp(98px, 15vw, 218px); }
.blocks span:nth-child(4n+4) { background: var(--bg); color: var(--ink); height: clamp(78px, 12vw, 172px); }
.foot-cols {
  margin-top: clamp(34px, 4vw, 58px);
  display: grid; gap: 28px clamp(20px, 3vw, 48px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 820px) { .foot-cols { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: var(--step-body); }
.foot-links a { text-decoration: none; }
.foot-links a:hover { color: var(--accent); }
.notice { margin-top: 20px; font-size: var(--step-small); color: var(--muted); max-width: 64ch; }
.credits { font-size: var(--step-small); color: var(--muted); }
.credits a { color: inherit; }
.imprint { margin-top: 28px; font-size: var(--step-small); color: var(--muted); }

/* ---------- channel page ---------- */
.ch-when {
  font-family: 'Big Shoulders', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: var(--step-section); line-height: 0.9; font-variant-numeric: tabular-nums;
}
.ch-when-sub { font-size: var(--step-small); color: var(--muted); margin-top: 8px; }
.rec-row { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.rec-a {
  font-family: 'Big Shoulders', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: var(--step-section); line-height: 0.95; letter-spacing: -0.005em;
}
.rec-b { font-style: italic; font-weight: 600; }
.rec-y { font-size: var(--step-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rec-n { max-width: 68ch; margin-top: 8px; }
.rec + .rec { margin-top: clamp(26px, 3vw, 44px); }
.records { margin-top: clamp(28px, 3.2vw, 48px); }
.rec-a { padding-bottom: 0.04em; }
@media (max-width: 700px) {
  .rec-row { display: block; }
  .rec-y { display: block; margin-top: 4px; }
}

/* ---------- documents ---------- */
.doc-sec { row-gap: 18px; margin-top: clamp(40px, 5vw, 72px); }
.doc-sec h2 { grid-column: 1 / -1; font-size: var(--step-section); }
.doc-sec .doc-p { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .doc-sec h2 { grid-column: 1 / 7; }
  .doc-sec .doc-p { grid-column: 7 / 13; }
}
.doc-p p { max-width: 62ch; }
.sources { margin-top: 20px; display: grid; gap: 16px; }
.sources li { max-width: 60ch; }
.src-note { display: block; font-size: var(--step-small); color: var(--muted); margin-top: 3px; }
.credit-list { margin-top: 24px; }
@media (min-width: 900px) { .credit-list { columns: 2; column-gap: clamp(28px, 3vw, 56px); } }
.credit-list li { break-inside: avoid; max-width: 54ch; margin-bottom: 14px; }

/* ---------- read by machines, not by eyes ---------- */
.vh {
  position: absolute;
  width: 1px;
  height: 1px; /* taste-skill-ignore: the standard visually-hidden box, not a rule */
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- motion ---------- */
.js-rise [data-rise] {
  opacity: 0; transform: translateY(26px);
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
  transition-delay: var(--d, 0ms);
}
.js-rise [data-rise].seen { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-rise [data-rise] { opacity: 1 !important; transform: none !important; transition: none; }
  .marquee-track, .strip-track { animation: none; }
  .btn:hover, .reel-cell:hover { transform: none; }
  .reel-strip { transition: none; }
}

.contact-h {
  margin-top: clamp(34px, 4vw, 64px);
  display: grid; gap: 18px clamp(24px, 3vw, 56px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) { .contact-h { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } }
.contact-h .note { max-width: none; }
.contact-h .note { max-width: none; }
.contact-h h2 { font-size: var(--step-section); }

/* ---------- the register ---------- */
/* a search query is data, not a headline: some run to eight words */
.rec-q { font-size: var(--step-lead); font-weight: 600; line-height: 1.2; }
/* a line under a poster list is running text, so it takes the body size */
.poster-foot { font-size: var(--step-body); max-width: 58ch; }
.check-list .rec-n { max-width: none; }
@media (min-width: 900px) {
  .check-list { columns: 2; column-gap: clamp(28px, 3vw, 56px); }
  .check-list .rec { break-inside: avoid; }
  .check-list .rec + .rec { margin-top: 0; margin-bottom: clamp(20px, 2.2vw, 32px); }
}

/* the register's lists run long and thin; two columns fill the row */
@media (min-width: 900px) {
  .records.two-up { columns: 2; column-gap: clamp(28px, 3vw, 56px); }
  .records.two-up .rec { break-inside: avoid; }
  .records.two-up .rec + .rec { margin-top: 0; margin-bottom: clamp(18px, 2vw, 28px); }
}

/* <picture> is inline by default, which would put a baseline gap under every
   photograph the moment the WebP sources appeared */
picture { display: block; }

/* A list takes a margin above itself and none below, so a heading placed after
   one started at the list's last baseline. With the display leading at 0.88 the
   heading's glyphs climb out of their own line box and over the last row. */
.records + .display { margin-top: clamp(40px, 5vw, 76px); }

/* A list row rises by 26px, which is exactly the gap between two rows, and the
   n % 4 stagger lets the lower row arrive first. For the length of one
   transition the upper row then sat on top of its neighbour. Rows travel less
   than the gap, so they cannot reach each other whatever order they land in. */
.js-rise .records .rec[data-rise] { transform: translateY(10px); }
.js-rise .records .rec[data-rise].seen { transform: none; }

/* ---------- the call to action ---------- */
/* The one at the top is the house button at the next size up; it sits alone on
   the dark hero, so nothing else has to change for it to be seen. */
.btn-lead {
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.5rem);
  padding: 24px 40px 21px;
}

/* In the body it arrives as a field of its own, the same device the page already
   uses to change subject. The button inverts so it still reads as a button on a
   ground its own colour. */
.cta-band { padding-block: clamp(44px, 5.5vw, 88px); }
.cta-band .wrap {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: clamp(22px, 3vw, 48px);
}
.cta-line {
  font-family: 'Big Shoulders', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: var(--step-section); line-height: 0.95; letter-spacing: -0.005em;
  max-width: 18ch; margin: 0; overflow-wrap: anywhere;
}
.btn-invert { background: var(--bg); color: var(--accent); }
.btn-invert:hover { background: var(--surface); color: var(--field-3); }

/* the register hero: the lede and the button in one column, the picture beside.
   The lede here is one short line, so an unbounded column left a field of empty
   ground between the text and the picture. The column is capped and the picture
   takes the width that frees. */
.hero-col { min-width: 0; }
/* a screenshot is 2:1 as it was taken; cropping it square cuts the offer out */
.hero-shot img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; display: block; }
.tile-photo img { aspect-ratio: 2 / 1; }
.hero-shot a { display: block; }
@media (min-width: 900px) {
  .hero-col { max-width: 44ch; }
  .hero-shot-wide { width: clamp(280px, 34vw, 460px); }
}

/* A fact's value is prose, not a figure: the welcome offer runs to a paragraph.
   .rec-y keeps numbers from breaking in half, which turned a bonus description
   into 941px of horizontal scroll. */
.rec-val { white-space: normal; overflow-wrap: anywhere; }
.rec-row:has(.rec-val) { align-items: start; }
@media (min-width: 760px) {
  .rec-row:has(.rec-val) .rec-a { flex: 0 0 34%; }
  .rec-row:has(.rec-val) .rec-val { flex: 1 1 auto; text-align: left; }
}
/* A fact's label is a label, not a headline. At the section step "Most you can
   withdraw from it" ran to four lines on a phone. */
.rec-row:has(.rec-val) .rec-a { font-size: var(--step-lead); line-height: 1.15; }

/* The hero caption says where the picture came from, so it reads as a line of
   text under it rather than a plate sitting on the image at the page edge. */
.hero-shot .tile-cap {
  position: static; background: none; padding: 10px 0 0; color: var(--muted);
}

/* A poster row is set at the head step, nearly twice the heading above it, and
   sat directly under it with nothing between. Its ascenders climbed into the
   heading's line. */
.display + .poster-row { margin-top: clamp(30px, 3.2vw, 56px); }

/* ---------- the register's own corrections ---------- */
/* A screenshot is of a place that has its own colours. The greyscale belongs to
   the archive photographs, not to this. */
.tile-screen img, .hero-shot img { filter: none; }

/* A name in the list is a link and now looks like one before it is clicked. */
.poster-row { position: relative; }
.poster-row .poster-name {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.1em;
  transition: text-decoration-color 160ms var(--ease), color 160ms var(--ease);
}
.poster-row:hover .poster-name,
.poster-row:focus-visible .poster-name { text-decoration-color: currentColor; }
.tile-photo a:hover img, .tile-photo a:focus-visible img { opacity: 0.82; }
.tile-photo a { display: block; }

/* A page whose answers are mostly "not stated" ran half-empty and let its small
   print outweigh its body text. The table takes two columns where there is room,
   and a missing value is set at reading size like any other. */
.rec-val .dim { font-size: inherit; }
@media (min-width: 1000px) {
  .records:not(.two-up):not(.check-list) {
    columns: 2; column-gap: clamp(32px, 4vw, 72px);
  }
  .records:not(.two-up):not(.check-list) .rec { break-inside: avoid; }
  .records:not(.two-up):not(.check-list) .rec + .rec {
    margin-top: 0; margin-bottom: clamp(22px, 2.4vw, 36px);
  }
  .rec-row:has(.rec-val) .rec-a { flex: 0 0 44%; }
}

/* The explanation on a page with no facts is running text, not a statement: it
   is there to be read through, so it takes the reading size and a measure. */
.prose { font-size: var(--step-body); line-height: 1.6; max-width: 68ch; }
.prose p + p { margin-top: 1.1em; }
@media (min-width: 1000px) {
  .prose { columns: 2; column-gap: clamp(32px, 4vw, 72px); max-width: none; }
  .prose p { break-inside: avoid; }
}

/* The second column of a register row carries an offer, not a figure. It has to
   wrap, and on a narrow screen it belongs under the name rather than beside it. */
.poster-offer {
  white-space: normal; text-align: right; max-width: 46%;
  font-size: var(--step-body); line-height: 1.25;
}
@media (max-width: 760px) {
  .poster-row:has(.poster-offer) { display: block; }
  .poster-offer { display: block; text-align: left; max-width: none; margin-top: 8px; }
}

/* A record row's first half is a name, and some names are long: "Ella
   Fitzgerald and Louis Armstrong" ran to three lines at the section step. It
   takes its own scale, which tops out lower. */
.records .rec-a { font-size: clamp(1.75rem, 1rem + 3vw, 3.5rem); }