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

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); }
/* 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; }
}


/* ---------- 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; }
}
.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-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); }
/* 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; }
.hero-shot a { display: block; }
/* 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);
}
/* 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; }
@media (min-width: 900px) {
  .hero-col { max-width: 44ch; }
  .hero-shot-wide { width: clamp(280px, 34vw, 460px); }
}

/* ---------- the reel ---------- */
.reel-box {
  margin-top: clamp(22px, 2.4vw, 36px);
  background: var(--surface); padding: clamp(16px, 1.8vw, 24px);
}
/* 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);
  position: relative;
}
/* The names are set at the head step with leading below 1, so each box is
   shorter than the type in it and consecutive rows sat at zero distance. The
   hover underline, which is drawn below the baseline, then landed on the name
   underneath. The gap is what the underline needs and what the list wanted
   anyway: it is one brand per line, not a paragraph of names. */
.poster-row + .poster-row { margin-top: clamp(28px, 2.8vw, 48px); }
.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;
  /* inline-block so the padding below counts: the hover underline is drawn up
     to 0.16em under the baseline, and on an inline span that fell outside the
     line box and onto whatever sat beneath. Stated in em, it holds at 49px and
     at 152px alike; a gap in pixels does not. */
  display: inline-block; padding-bottom: 0.26em;
}
/* A name in the list is a link and now looks like one before it is clicked. */
.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; }
.poster-fact { font-size: var(--step-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 700px) {
  .poster-row { display: block; }
  /* The longest name in the register, Andromedasino, is one unbreakable word.
     At 15vw it ran 13px past the right edge at every phone width from 320px up,
     which is where the uneven margins came from. 13.5vw is the widest scale at
     which it still fits inside the gutters at 320px. */
  .poster-name { font-size: clamp(2.5rem, 13.5vw, 5.5rem); }
  .poster-fact { display: block; margin: 4px 0 20px; }
}
/* A station's second half is its hours, two figures that sit happily at the
   far edge of the row. A brand's second half is its welcome offer, a sentence.
   Set at the right-hand edge of a 1440px row, across the width from a 111px
   name, it read as attached to nothing. Under the name, at the lead size, it
   reads as that brand's line. */
.brand-row { display: block; }
/* The hover underline is drawn as far as 0.16em below the baseline — 0.1em of
   offset plus 0.06em of rule — so the name needs a box deep enough to hold it.
   In pixels this goes wrong the moment the type resizes: the rule is in em and
   the spacing was not, so at 152px the underline crossed the offer beneath it.
   Both are in em now and the clearance holds at every width. */
.brand-row .poster-name { display: block; }
.poster-offer {
  display: block; text-align: left; max-width: 46ch;
  white-space: normal; font-size: var(--step-lead); line-height: 1.2;
  margin: 0;
}
/* a line under a poster list is running text, so it takes the body size */
.poster-foot { margin-top: 34px; font-size: var(--step-body); max-width: 58ch; }
/* 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); }


/* 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; }
/* A screenshot is of a place that has its own colours. The greyscale belongs to
   the archive photographs, not to this. The hero's shot needs no exemption: it
   stands outside the tiles. */
.tile-screen img { filter: none; }
.tile-photo img { aspect-ratio: 2 / 1; }
.tile-photo a { display: block; }
.tile-photo a:hover img, .tile-photo a:focus-visible img { opacity: 0.82; }
.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);
}
/* ================= 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); }
.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 h2 { font-size: var(--step-section); }

/* ================= 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 ---------- */
.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;
  padding-bottom: 0.04em;
}
.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); }
/* 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); }
/* 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); }

@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; }

/* 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; }

@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; }
}

/* ---------- the register ---------- */
/* 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 table takes two columns where there is room. Two columns need four rows
   to fill them: with three or fewer the second column stands empty and the
   section reads as half-built, which is what the short tables did once the rows
   for facts the operator never stated came off. :has(.rec:nth-child(4)) is the
   row count the cascade can see. */
.rec-val .dim { font-size: inherit; }
@media (min-width: 1000px) {
  .records:not(.check-list):has(.rec:nth-child(4)) {
    columns: 2; column-gap: clamp(32px, 4vw, 72px);
  }
  .records:not(.check-list):has(.rec:nth-child(4)) .rec { break-inside: avoid; }
  .records:not(.check-list):has(.rec:nth-child(4)) .rec + .rec {
    margin-top: 0; margin-bottom: clamp(22px, 2.4vw, 36px);
  }
  .rec-row:has(.rec-val) .rec-a { flex: 0 0 44%; }
}

.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 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); }