@font-face { font-family: "Archivo Black"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/archivo-black-400.woff2") format("woff2"); }
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/anton-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/inter-var.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/jetbrains-mono-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/jetbrains-mono-500.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/jetbrains-mono-700.woff2") format("woff2"); }
/* AUDIT THIS
   Brand kit rules, September 2026: the mark is locked; red is a verdict, not a
   decoration, one red thing per frame; gold is provenance only; Archivo Black is
   the typeface, mono for source lines and captions. Release pack adds Anton for
   figures and Inter for running text.
   One look on purpose: a riso print, black and red on cream, with ink bands. */

:root {
  color-scheme: light;
  --paper: #F2ECDE;
  --paper-2: #E8DFCC;
  --paper-3: #F7F3EA;
  --ink: #14161A;
  --ink-2: #0B0C0E;
  --cream: #F4F0E6;
  --cream-dim: #B8B0A0;
  --red: #C6382C;
  --red-deep: #7E170F;
  --red-text: #A52E23;
  --gold: #E4B63A;
  --muted: #5B574F;
  --rule: #D2C7B0;
  --rule-ink: #2B2D31;

  --f-head: "Archivo Black", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --f-figure: "Anton", "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  --f-sans: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-thesis: clamp(2.05rem, 7vw, 4rem);
  --fs-h1: clamp(2.1rem, 5.4vw, 4.4rem);
  --fs-h2: clamp(1.55rem, 3vw, 2.3rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-mono: 0.75rem;
  --fs-figure: clamp(1.9rem, 3.2vw, 2.7rem);

  --maxw: 1200px;
  --gutter: clamp(16px, 4vw, 44px);
  --measure: 64ch;
  --focus: var(--ink);

  /* Riso grain: ink speckle for paper, ivory speckle for the ink bands. */
  --grain-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .07 0 0 0 0 .06 0 0 0 1.5 -.78'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .92 0 0 0 0 .87 0 0 0 1.4 -.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--paper);
  background-image: var(--grain-paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }

::selection { background: var(--ink); color: var(--cream); }
.band-ink ::selection, .masthead ::selection, .site-foot ::selection { background: var(--cream); color: var(--ink); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.band-ink, .masthead, .site-foot { --focus: var(--cream); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--cream); color: var(--ink); padding: 10px 14px;
  font: 600 var(--fs-small)/1 var(--f-sans); text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- shared type ---------- */

.eyebrow {
  font: 500 var(--fs-mono)/1.3 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.band-ink .eyebrow { color: var(--cream-dim); }
.eyebrow--gold, .band-ink .eyebrow--gold { color: var(--gold); }

.h-caps {
  font-family: var(--f-head);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.012em;
  line-height: 0.98;
  text-wrap: balance;
  margin: 0;
}
.h2 { font-size: var(--fs-h2); }
.lede { font-size: 1.1875rem; line-height: 1.5; font-weight: 500; max-width: 38ch; margin: 0; }
.prose p { margin: 0 0 1em; max-width: var(--measure); }
.prose p:last-child { margin-bottom: 0; }
.muted { color: var(--muted); }
.band-ink .muted { color: var(--cream-dim); }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- chips and buttons ---------- */

.chip {
  display: inline-flex; align-items: center; gap: 0.5em;
  font: 500 0.6875rem/1 var(--f-mono);
  letter-spacing: 0.13em; text-transform: uppercase;
  padding: 0.45em 0.6em;
  border: 1.5px solid currentColor;
  white-space: nowrap;
}
.chip--latest { background: var(--cream); border-color: var(--cream); color: var(--ink); }
/* Gold means provenance: the on-screen reconstruction labels. */
.chip--gold { background: var(--gold); border-color: var(--gold); color: var(--ink); border-radius: 999px; padding-inline: 0.8em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 44px;
  padding: 0.7em 1.05em;
  font: 500 0.78rem/1.1 var(--f-mono);
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--ink);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: var(--ink); color: var(--cream); }
.btn--solid { background: var(--ink); color: var(--cream); }
.btn--solid:hover { background: #2A2D33; border-color: #2A2D33; }
/* Red is kept for the one action that matters on a frame: signing up. */
.btn--red { background: var(--red); border-color: var(--red); color: var(--cream); }
.btn--red:hover { background: var(--red-deep); border-color: var(--red-deep); color: var(--cream); }
.band-ink .btn, .masthead .btn, .site-foot .btn { color: var(--cream); border-color: var(--cream); }
.band-ink .btn:hover, .masthead .btn:hover, .site-foot .btn:hover { background: var(--cream); color: var(--ink); }
.band-ink .btn--solid { background: var(--cream); color: var(--ink); }
.band-ink .btn--solid:hover { background: #FFFFFF; border-color: #FFFFFF; }
.btn .arrow { font-family: var(--f-sans); font-weight: 700; letter-spacing: 0; }
.btn:disabled { opacity: 0.6; cursor: progress; }

.textlink {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}
.textlink:hover { text-decoration-thickness: 3px; }

/* ---------- the ring: the brand's own pen mark, never smoothed ---------- */

.ringed { position: relative; display: inline-block; white-space: nowrap; }
.ring {
  position: absolute;
  overflow: visible;
  pointer-events: none;
  fill: var(--red);
}
/* Geometry copied from the logo: the ring is 131.6% of the word's width,
   centred on it, and runs from 0.17em above the capitals to 0.22em below the
   baseline (Archivo Black metrics). The word is indented by the ring's
   overhang, so the ring's left end sits exactly on the text edge. */
.thesis .ringed { display: block; width: fit-content; line-height: 1; margin-top: 0.12em; margin-left: 0.98em; }
@media (min-width: 1080px) { .thesis .ringed { margin-left: 0.3em; } }
.thesis .ring { left: -15.8%; top: -0.024em; width: 131.6%; height: 1.07em; }

/* ---------- masthead ---------- */

.masthead {
  background-color: var(--ink-2);
  background-image: var(--grain-ink);
  color: var(--cream);
}
.masthead .wrap {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "logo nav cta";
  align-items: center; gap: 10px 26px;
  padding-block: 12px;
}
.wordmark { display: inline-block; text-decoration: none; }
.wordmark img { height: 46px; width: auto; }
.masthead .wordmark { grid-area: logo; }
.masthead .nav { grid-area: nav; justify-self: end; }
.masthead .mast-cta { grid-area: cta; min-height: 40px; padding: 0.6em 0.9em; }
.nav { display: flex; align-items: center; gap: 6px 22px; flex-wrap: wrap; }
.nav a {
  font: 500 0.75rem/1 var(--f-mono); letter-spacing: 0.13em; text-transform: uppercase;
  text-decoration: none; color: var(--cream); padding-block: 14px;
  border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--cream); }
@media (max-width: 680px) {
  .masthead .wrap { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "logo cta" "nav nav"; padding-block: 10px 0; row-gap: 2px; }
  .masthead .nav { justify-self: stretch; gap: 0 20px; }
  .wordmark img { height: 40px; }
}

.preview-note {
  background: var(--cream); color: var(--ink);
  border-bottom: 1px solid var(--rule);
  font: 500 0.75rem/1.45 var(--f-mono); letter-spacing: 0.04em;
}
.preview-note .wrap { padding-block: 8px; }

/* ---------- bands ---------- */

.band { padding-block: clamp(48px, 7vw, 96px); }
.band--tight { padding-block: clamp(36px, 5vw, 64px); }
.band-ink {
  background-color: var(--ink-2);
  background-image: var(--grain-ink);
  color: var(--cream);
}
.band-ledger { background-color: var(--paper-2); background-image: var(--grain-paper); }
.rule-top { border-top: 2px solid var(--ink); }

/* ---------- home: hero ---------- */

.hero { padding-block: clamp(32px, 5.5vw, 76px) clamp(40px, 6vw, 80px); overflow-x: clip; }
.hero .eyebrow { margin-bottom: clamp(16px, 2.2vw, 26px); }
.thesis { font-size: var(--fs-thesis); max-width: 15ch; }
.hero-grid {
  display: grid; gap: 26px 60px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "lede" "panel" "links";
}
.hero-head { grid-area: head; }
.hero-lede { grid-area: lede; }
.hero-grid .signup-panel { grid-area: panel; }
.hero-links { grid-area: links; }
/* Wide screens: the sign-up sits beside the headline, inside the first screen. */
@media (min-width: 1080px) {
  :root { --fs-thesis: clamp(3rem, 4.35vw, 4.25rem); }
  .hero-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    grid-template-areas: "head panel" "lede panel" "links panel";
    row-gap: 22px;
  }
  .hero-grid .signup-panel { align-self: center; }
  .hero-links { margin-top: 6px; }
}
.listen { display: flex; flex-wrap: wrap; gap: 10px; }
.listen .btn { flex: 0 0 auto; }
.listen-label { font: 500 var(--fs-mono)/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.band-ink .listen-label { color: var(--cream-dim); }

/* ---------- latest episode ---------- */

.latest { display: grid; gap: 28px 44px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .latest { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.latest-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.latest-title { font-size: clamp(1.9rem, 3.8vw, 3.1rem); margin-bottom: 20px; }
.latest-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* ---------- video ---------- */

.screen {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  background: #000;
  box-shadow: 0 0 0 1px var(--rule-ink);
}
.screen iframe, .screen img, .screen .poster { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.screen img { object-fit: cover; }
.poster { display: block; color: var(--cream); text-decoration: none; }
.poster .play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--ink-2); color: var(--cream);
  border: 2px solid var(--cream);
  font: 500 0.8125rem/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 15px 19px 15px 17px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.poster:hover .play, .poster:focus-visible .play { background: var(--cream); color: var(--ink); }
.play-tri { width: 0; height: 0; border-left: 13px solid currentColor; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }

/* ---------- audio ---------- */

.player {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  border: 1.5px solid var(--rule-ink); padding: 10px 14px 10px 10px;
}
.player-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 16px;
  background: var(--cream); color: var(--ink); border: 0; cursor: pointer;
  font: 500 0.75rem/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase;
}
.player-btn:hover { background: #FFFFFF; }
.player-btn .pause { display: none; width: 12px; height: 13px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.player-btn[aria-pressed="true"] .pause { display: inline-block; }
.player-btn[aria-pressed="true"] .play-tri { display: none; }
.player-btn .play-tri { border-left-width: 11px; border-top-width: 7px; border-bottom-width: 7px; }
.player-bar { width: 100%; accent-color: var(--cream); height: 24px; }
.player-time { font: 500 0.75rem/1 var(--f-mono); color: var(--cream-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- sign-up ---------- */

.signup { display: grid; gap: 22px 56px; grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 900px) { .signup { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.signup .h-caps { font-size: var(--fs-h2); margin-top: 12px; }
.signup-sub { margin: 12px 0 0; font-size: 1.0625rem; }
.signup-form { display: grid; gap: 10px; }
.field-row { display: flex; flex-wrap: wrap; gap: 10px; }
.field-row input[type="email"] {
  flex: 1 1 200px; min-width: 0; min-height: 52px;
  padding: 0 16px;
  font: 500 1.0625rem/1 var(--f-sans);
  color: var(--ink); background: var(--paper-3);
  border: 2px solid var(--ink); border-radius: 0;
}
.field-row input[type="email"]::placeholder { color: #857F73; }
.field-row .btn { min-height: 52px; }
.fine { font-size: 0.8125rem; color: var(--muted); margin: 0; }
.form-status { font: 500 0.875rem/1.45 var(--f-sans); margin: 0; }
.form-status:empty { display: none; }
.form-status[data-state="ok"] { color: var(--ink); }
.form-status[data-state="ok"]::before { content: "\2713  "; font-weight: 900; }
.form-status[data-state="err"] { color: var(--red-text); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- sign-up placements ---------- */

.signup-panel { padding: clamp(22px, 3vw, 34px); }
.signup-panel .h-caps { font-size: clamp(1.55rem, 2.7vw, 2.2rem); margin-top: 10px; }
.signup-panel .signup-sub { color: var(--cream-dim); }
.signup-panel .signup-form { margin-top: 20px; }
.band-ink .fine, .signup-bar .fine { color: var(--cream-dim); }
.band-ink .form-status[data-state="ok"], .signup-bar .form-status[data-state="ok"] { color: var(--cream); }
.band-ink .form-status[data-state="err"], .signup-bar .form-status[data-state="err"] { color: #F08A7E; }
.band-ink .field-row input[type="email"], .signup-bar .field-row input[type="email"] { border-color: var(--cream); }

.signup-inline {
  display: grid; gap: 14px 40px; grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--rule-ink); padding-top: 22px; margin-top: 8px;
}
@media (min-width: 900px) { .signup-inline { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; } }
.signup-inline .h-caps { font-size: clamp(1.3rem, 2.2vw, 1.75rem); margin-top: 8px; }

.follow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.follow a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
  border: 1.5px solid currentColor; text-decoration: none;
  font: 500 0.75rem/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.follow a:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.band-ink .follow a:hover, .signup-bar .follow a:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.follow--compact a { min-height: 34px; padding: 0 10px; font-size: 0.6875rem; }
.after { display: grid; gap: 8px; }
.after-label { margin: 0; font-size: 0.875rem; }

/* The sticky bar. Off screen until no other sign-up is visible; closing it or
   signing up anywhere puts it away. */
.signup-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background-color: var(--ink-2); background-image: var(--grain-ink);
  color: var(--cream);
  border-top: 1px solid var(--rule-ink);
  box-shadow: 0 -10px 30px rgba(11, 12, 14, 0.28);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(110%); visibility: hidden;
  transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
.signup-bar.is-shown { transform: none; visibility: visible; transition: transform 0.25s ease, visibility 0s; }
.bar-inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 20px; padding-block: 10px; }
.bar-text { margin: 0; font-size: 0.9375rem; line-height: 1.35; }
.bar-text strong { font-family: var(--f-head); font-weight: 400; text-transform: uppercase; letter-spacing: -0.005em; }
.bar-text span { color: var(--cream-dim); }
.bar-form .signup-form { gap: 4px; }
.bar-form .field-row input[type="email"] { min-height: 44px; }
.bar-form .field-row .btn { min-height: 44px; }
.bar-form .form-status:empty { display: none; }
.bar-form .after { display: none; }
.bar-jump { display: none; min-height: 44px; }
.bar-close {
  width: 40px; height: 40px; display: inline-grid; place-items: center;
  background: transparent; border: 0; color: var(--cream); cursor: pointer;
  font: 400 1.75rem/1 var(--f-sans);
}
.bar-close:hover { color: #FFFFFF; }
@media (max-width: 760px) {
  .bar-inner { grid-template-columns: minmax(0, 1fr) auto auto; }
  .bar-form { display: none; }
  .bar-jump { display: inline-flex; }
  .bar-text span { display: none; }
}

/* ---------- the register (episode ledger) ---------- */

.register-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.register-head .h-caps { font-size: var(--fs-h2); margin-top: 10px; }
.ledger { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.ledger li { border-bottom: 1px solid var(--rule); }
.ledger li:last-child { border-bottom: 2px solid var(--ink); }
.row {
  display: grid;
  grid-template-columns: 64px 96px minmax(0, 1fr) minmax(0, 250px) 112px;
  grid-template-areas: "ref art main fig meta";
  gap: 0 24px; align-items: center;
  padding: 20px 12px 20px 4px;
  text-decoration: none; color: inherit;
  transition: background-color 0.15s ease;
}
.row:hover, .row:focus-visible { background: var(--paper-2); }
.row-ref { grid-area: ref; font: 500 0.8125rem/1 var(--f-mono); letter-spacing: 0.1em; color: var(--muted); }
.row-art { grid-area: art; width: 96px; aspect-ratio: 1; background: var(--ink); }
.row-main { grid-area: main; min-width: 0; }
.row-title { display: block; font: 400 1.25rem/1.08 var(--f-head); text-transform: uppercase; letter-spacing: -0.01em; margin: 0 0 8px; text-wrap: balance; }
.row-stand { display: block; margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--muted); max-width: 60ch; }
.row-fig { grid-area: fig; justify-self: end; text-align: right; }
.fig { position: relative; display: inline-block; font: 400 var(--fs-figure)/1 var(--f-figure); letter-spacing: 0.005em; text-transform: uppercase; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The figure gets the pen on hover: the one number that matters in the row. */
.fig .ring { left: -15.8%; top: -0.145em; width: 131.6%; height: 1.33em; opacity: 0; transition: opacity 0.2s ease; }
.row:hover .fig .ring, .row:focus-visible .fig .ring { opacity: 1; }
.fig-cap { display: block; margin-top: 8px; font: 500 0.6875rem/1.3 var(--f-mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.row-meta { grid-area: meta; justify-self: end; text-align: right; font: 500 0.75rem/1.7 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 980px) {
  .row {
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-areas: "art ref" "art main" "art fig" "art meta";
    gap: 4px 18px; align-items: start; padding: 20px 4px;
  }
  .row-art { width: 84px; }
  .row-ref { align-self: end; }
  .row-fig, .row-meta { justify-self: start; text-align: left; }
  .row-fig { margin-top: 8px; }
  .fig { font-size: 1.7rem; }
  .fig-cap { display: inline; margin: 0 0 0 10px; }
  .row-meta { margin-top: 6px; }
}
@media (max-width: 520px) {
  .row { grid-template-columns: 64px minmax(0, 1fr); gap: 4px 14px; }
  .row-art { width: 64px; }
  .row-title { font-size: 1.0625rem; }
  .row-stand { display: none; }
  .fig-cap { display: block; margin: 6px 0 0; }
}

/* ---------- rules band ---------- */

.rules { display: grid; gap: 30px 44px; grid-template-columns: minmax(0, 1fr); margin-top: 30px; }
@media (min-width: 860px) { .rules { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rule-item { border-top: 2px solid var(--ink); padding-top: 18px; }
.rule-item h3 { font: 400 1.125rem/1.15 var(--f-head); text-transform: uppercase; letter-spacing: -0.005em; margin: 12px 0 10px; }
.rule-item p { margin: 0; font-size: var(--fs-small); line-height: 1.6; }
.labels-demo { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* ---------- send a case ---------- */

.sendcase { display: grid; gap: 26px 56px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .sendcase { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.sendcase .h-caps { font-size: var(--fs-h2); margin-top: 12px; }
.addr {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  border: 2px solid var(--ink); padding: 10px 10px 10px 16px; background: var(--paper-3);
}
.addr code { font: 500 1.0625rem/1.3 var(--f-mono); letter-spacing: 0.01em; flex: 1 1 220px; user-select: all; overflow-wrap: anywhere; }
.addr .btn { min-height: 40px; padding: 0.55em 0.8em; }

/* ---------- footer ---------- */

.site-foot {
  background-color: var(--ink-2);
  background-image: var(--grain-ink);
  color: var(--cream);
  padding-block: 56px 32px;
}
.site-foot .wordmark img { height: 64px; }
.foot-grid { display: grid; gap: 34px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .foot-grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); } }
.foot-tag { margin: 18px 0 0; font-weight: 600; max-width: 26ch; }
.foot-col h2 { font: 500 var(--fs-mono)/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-dim); margin: 6px 0 14px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-col a { text-decoration: none; color: var(--cream); font-size: var(--fs-small); }
.foot-col a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.foot-base { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--rule-ink); display: grid; gap: 10px; }
.foot-base p { margin: 0; font-size: 0.8125rem; color: var(--cream-dim); max-width: 90ch; }

/* ---------- episode page ---------- */

.ep-head { padding-block: clamp(32px, 5vw, 64px) clamp(28px, 4vw, 48px); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font: 500 var(--fs-mono)/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: clamp(22px, 3vw, 34px); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs span[aria-hidden] { color: var(--rule); }
.ep-title { font-size: var(--fs-h1); max-width: 17ch; margin-top: 16px; }
.ep-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.ep-screen-band { padding-block: clamp(20px, 3vw, 36px); }
.ep-screen-grid { display: grid; gap: 16px; }
.ep-listen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.ep-body { display: grid; gap: 44px 64px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) { .ep-body { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); align-items: start; } }
.ep-body .prose { font-size: 1.125rem; line-height: 1.62; }
.ep-body .prose p { max-width: 62ch; }
.record-line { font-weight: 700; }
.note {
  margin-top: 24px; padding: 14px 16px; border-left: 4px solid var(--ink);
  background: var(--paper-3); font-size: var(--fs-small); max-width: 62ch;
}
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 4px; }
.sec-head .count { font: 500 var(--fs-mono)/1 var(--f-mono); letter-spacing: 0.1em; color: var(--muted); }

.chapters { list-style: none; margin: 0; padding: 0; }
.chapters li { border-bottom: 1px solid var(--rule); }
.chapter {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: baseline;
  padding: 11px 6px 11px 0; text-decoration: none; color: inherit;
}
.chapter:hover, .chapter:focus-visible { background: var(--paper-2); }
.chapter .t { font: 500 0.8125rem/1.4 var(--f-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.chapter .l { font-size: 0.96875rem; line-height: 1.4; }
.chapter .go { font: 700 0.875rem/1 var(--f-sans); color: var(--muted); opacity: 0; transition: opacity 0.15s ease; }
.chapter:hover .go, .chapter:focus-visible .go { opacity: 1; }
@media (min-width: 980px) { .ep-aside { position: sticky; top: 24px; } }

/* Sources: the provenance layer, set like the show's gold source lines on ink. */
.sources-band .h-caps { font-size: var(--fs-h2); margin-top: 10px; }
.sources-intro { margin: 14px 0 26px; max-width: 62ch; color: var(--cream-dim); }
.sources { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--cream-dim); counter-reset: src; }
.sources li {
  counter-increment: src;
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--rule-ink);
  font-size: 0.96875rem; line-height: 1.5;
}
.sources li::before {
  content: counter(src, decimal-leading-zero);
  font: 500 0.8125rem/1.5 var(--f-mono); color: var(--gold); letter-spacing: 0.06em;
}
.sources li:last-child { border-bottom: 2px solid var(--cream-dim); }
.source-groups { counter-reset: src; }
.source-groups .sources { counter-reset: none; }
.sources-head { font: 500 var(--fs-mono)/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-dim); margin: 30px 0 12px; }
.source-groups .sources-head:first-child { margin-top: 0; }

.file-box { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); border: 2px solid var(--ink); background: var(--paper-3); }
@media (min-width: 860px) { .file-box { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.file-box > div { padding: 20px 22px; }
.file-box > div + div { border-top: 1px solid var(--rule); }
@media (min-width: 860px) { .file-box > div + div { border-top: 0; border-left: 1px solid var(--rule); } }
.file-box h3 { font: 500 var(--fs-mono)/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.file-box p { margin: 0 0 8px; font-size: var(--fs-small); line-height: 1.55; }
.file-box p:last-child { margin-bottom: 0; }
.file-box .big { font: 400 1.25rem/1.1 var(--f-head); text-transform: uppercase; }

.pager { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .pager { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pager a { display: block; border: 2px solid var(--ink); padding: 18px 20px; text-decoration: none; color: inherit; transition: background-color 0.15s ease; }
.pager a:hover { background: var(--paper-2); }
.pager .dir { display: block; font: 500 var(--fs-mono)/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.pager .t { font: 400 1.0625rem/1.15 var(--f-head); text-transform: uppercase; }
.pager .next { text-align: right; }
.pager .next:only-child { grid-column: 1 / -1; }

/* ---------- search content: key facts, questions, transcript, cross-links ---------- */

.row-case { display: block; font: 500 0.6875rem/1.3 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.dek { margin: 18px 0 0; max-width: 60ch; font-size: 1.125rem; line-height: 1.5; font-weight: 500; }

.keyfacts { display: grid; margin: 4px 0 0; }
.keyfacts > div { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: 4px 24px; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.keyfacts dt { font: 500 var(--fs-mono)/1.6 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.keyfacts dd { margin: 0; font-size: 1.0625rem; line-height: 1.5; max-width: 70ch; }
@media (max-width: 640px) { .keyfacts > div { grid-template-columns: minmax(0, 1fr); } }

.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 16px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font: 600 1.0625rem/1.4 var(--f-sans); }
.faq summary::after { content: "+"; font: 400 1.5rem/1 var(--f-sans); color: var(--muted); }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover h3 { text-decoration: underline; text-underline-offset: 0.2em; }
.faq details p { margin: 0 0 20px; max-width: 70ch; line-height: 1.6; }
.faq-wrap { margin-top: clamp(40px, 5vw, 64px); }

.transcript { border: 2px solid var(--ink); background: var(--paper-3); }
.transcript summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; }
.transcript summary::-webkit-details-marker { display: none; }
.transcript summary .count { font: 500 var(--fs-mono)/1 var(--f-mono); letter-spacing: 0.1em; color: var(--muted); white-space: nowrap; }
.transcript summary .count::after { content: "  +"; }
.transcript[open] summary .count::after { content: "  \2212"; }
.tx-title { font: 400 1.25rem/1.1 var(--f-head); text-transform: uppercase; }
.transcript summary:hover .tx-title { text-decoration: underline; text-underline-offset: 0.18em; }
.tx-body { padding: 6px 22px 24px; border-top: 1px solid var(--rule); }
.tx-body h3 { margin: 28px 0 10px; font: 400 1rem/1.3 var(--f-head); text-transform: uppercase; }
.tx-body h3 a { text-decoration: none; }
.tx-body h3 a:hover { text-decoration: underline; }
.tx-body h3 .t { font: 500 0.8125rem/1 var(--f-mono); color: var(--muted); margin-right: 6px; }
.tx-body p { max-width: 68ch; margin: 0 0 0.9em; font-size: 1.0625rem; line-height: 1.65; }
.tx-note { font-size: var(--fs-small) !important; color: var(--muted); margin-top: 16px !important; }

.about-grid { display: grid; gap: 20px 56px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .about-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.case-links { margin: 0 0 0.5em; padding-left: 1.1em; }
.case-links li { margin-bottom: 8px; }
.case-links a { font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }

.more-cases { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .more-cases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.more-cases a { display: grid; align-content: start; gap: 8px; height: 100%; border: 2px solid var(--ink); padding: 18px 20px; text-decoration: none; color: inherit; transition: background-color 0.15s ease; }
.more-cases a:hover { background: var(--paper-2); }
.mc-ref { font: 500 var(--fs-mono)/1.35 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.mc-title { font: 400 1.125rem/1.12 var(--f-head); text-transform: uppercase; }
.mc-line { font-size: 0.875rem; color: var(--muted); }

/* ---------- how we work ---------- */

.doc-head { padding-block: clamp(36px, 6vw, 80px) clamp(24px, 3vw, 40px); }
.doc-head .h-caps { font-size: var(--fs-h1); margin-top: 16px; }
.doc-head .lede { margin-top: 22px; max-width: 46ch; }
.doc { border-top: 2px solid var(--ink); }
.clause { display: grid; gap: 10px 32px; grid-template-columns: minmax(0, 1fr); padding-block: 26px; border-bottom: 1px solid var(--rule); }
@media (min-width: 860px) { .clause { grid-template-columns: 220px minmax(0, 1fr); } }
.clause h2 { font: 500 var(--fs-mono)/1.4 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 4px 0 0; }
.clause .prose { font-size: 1.0625rem; }
.label-list { display: grid; gap: 14px; margin: 16px 0 0; padding: 0; list-style: none; }
.label-list li { display: grid; gap: 8px; max-width: 62ch; }
.log { width: 100%; border-collapse: collapse; font-size: var(--fs-small); margin-top: 6px; }
.log th { text-align: left; font: 500 var(--fs-mono)/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 10px 12px 10px 0; border-bottom: 2px solid var(--ink); }
.log td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.log-wrap { overflow-x: auto; }
.byline { font: 500 var(--fs-mono)/1.6 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 26px 0 0; }

/* ---------- 404 ---------- */

.lost { padding-block: clamp(60px, 10vw, 140px); }
.lost .h-caps { font-size: var(--fs-h1); margin: 16px 0 24px; }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; }
}