/* ==========================================================================
   CUT BY — interviews
   Brand system per 04-Resources/Social Media/CUT-BY-Strategy.md
     bg #000  ·  headline #fff  ·  body #bbb  ·  accent #00FF94
     display Bebas Neue  ·  labels Space Mono  ·  body DM Sans

   The page is built to be looked at before it is read: the post's own artwork
   carries each section and the words sit underneath it. This is the one file to
   edit when you're changing how the site looks. Motion lives in motion.js.
   ========================================================================== */

:root {
  --bg:        #000000;
  --head:      #ffffff;
  --body:      #bbbbbb;
  --accent:    #00ff94;

  /* derived — kept here so a palette change is a one-place edit */
  --dim:       #6e6e6e;   /* meta, timestamps, de-emphasised labels */
  --rule:      #1e1e1e;   /* hairlines */
  --rule-soft: #141414;
  --card:      #0a0a0a;   /* card fill, barely off black */
  --card-hi:   #101010;   /* card hover */

  --display: "Bebas Neue", "Oswald", Impact, sans-serif;
  --label:   "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --text:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --measure: 40rem;   /* reading column */
  --wide:    76rem;   /* page container */

  --ease:    cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

img, svg, video { max-width: 100%; }

.wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 1.5rem; }
.read { width: 100%; max-width: var(--measure); margin: 0 auto; }

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

.label {
  font-family: var(--label);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}

.accent { color: var(--accent); }

.num { font-family: var(--label); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Scroll progress — the one piece of chrome that tracks the whole page
   -------------------------------------------------------------------------- */

.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 90;
  background: transparent;
  pointer-events: none;
}

.progress i {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* --------------------------------------------------------------------------
   Reveal primitives — only ever hidden when JS is running to un-hide them
   -------------------------------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.js [data-reveal].in {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--rule);
}

.masthead-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 58px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

/* The mark is white letterforms on a black plate. The plate is the page colour,
   so on this site it reads as the glyph alone and needs no knockout. */
.brand-mark {
  display: block;
  width: auto;
  height: 30px;
  transition: opacity 0.15s;
}

.brand:hover .brand-mark { opacity: 0.72; }

.foot-brand { display: inline-flex; align-items: center; gap: 0.55rem; }
.foot-mark { display: block; height: 20px; width: auto; opacity: 0.8; }

.brand-sub {
  font-family: var(--label);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.masthead nav {
  display: flex;
  gap: 1.5rem;
  font-family: var(--label);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.masthead nav a {
  color: var(--dim);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.15s;
}

.masthead nav a:hover { color: var(--head); }
.masthead nav a[aria-current] { color: var(--head); border-bottom-color: var(--accent); }

/* --------------------------------------------------------------------------
   Badges / chips / eyebrow
   -------------------------------------------------------------------------- */

.eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--label);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  white-space: nowrap;
}

.chip-draft { color: #d8a13a; border-color: #3a2f16; }
.chip-live  { color: var(--accent); border-color: #0d3b28; }

/* the receipt: found-at → now, the whole point of CUT BY */
.receipt {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: var(--label);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--dim);
  white-space: nowrap;
}

.receipt b { color: var(--head); font-weight: 400; }
.receipt .to { color: var(--rule); }
.receipt .now { color: var(--accent); }
.receipt .mult { color: var(--accent); }

/* --------------------------------------------------------------------------
   Archive — hero
   -------------------------------------------------------------------------- */

.hero { padding: 5rem 0 3rem; border-bottom: 1px solid var(--rule); }

/* The archive's hero is a lead-in, not a page. It says what this is in one
   line and gets out of the way of the list underneath it. */
.hero-slim { padding: 3.25rem 0 2.25rem; border-bottom: 0; }

.hero h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(4rem, 13vw, 10rem);
  line-height: 0.86;
  letter-spacing: 0.01em;
  color: var(--head);
  margin: 0.5rem 0 1.5rem;
}

.hero-slim h1 {
  font-size: clamp(2.75rem, 8vw, 5.5rem);
  margin: 0 0 0.85rem;
}

.hero .standfirst {
  max-width: 34rem;
  font-size: 1.0625rem;
  line-height: 1.65;
}

.hero-slim .standfirst { max-width: 40rem; color: var(--dim); }

/* --------------------------------------------------------------------------
   The archive — one row per piece

   A row is the post: its cover held at the left and its slides beside it. Four
   cells fit across, so a four-slide post never moves — everything it has is on
   screen already. A longer one travels right to left while its row crosses the
   middle of the window, the early slides passing behind the cover, and only one
   row is ever in motion. Hovering covers the row and names where the click
   goes.

   Cells are sized off the row rather than the viewport so every row lines up:
   the cover takes a quarter of the width, and the three in the track divide
   what is left into the same measure.
   -------------------------------------------------------------------------- */

.rows { --gap: 1rem; padding: 0.5rem 0 1rem; }

/* minmax(0, 1fr), not the implicit auto column. On a phone the cells get fixed widths (see
   Small screens) and an auto column grows to hold a row's whole swipe strip, so the archive
   measured 1,515px wide on a 375px screen and the entire page slid sideways under a thumb. */
.rows .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }

/* Measured room so the first row can start its travel from a standstill and
   the last can finish it, instead of both being cut off by the page ends. */
.rows-room { display: block; height: 0; }

.row {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Slides travel out of the row on both sides and are clipped by it, so the
   ones behind the cover never reappear in the page margin. */
.row-in {
  display: flex;
  gap: var(--gap);
  overflow: hidden;
}

.cell {
  flex: 0 0 auto;
  margin: 0;
  background: var(--card);
  border: 1px solid var(--rule);
  overflow: hidden;
}

/* The cover sits above the track so the slides go behind it, and it is opaque
   so there is nothing to see through. */
.cell-cover {
  position: relative;
  z-index: 2;
  flex: 0 0 calc((100% - 3 * var(--gap)) / 4);
  background: var(--bg);
}

.row-track {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: var(--gap);
  will-change: transform;
}

/* Three across the track is the same measure as the cover's quarter. */
.row-track .cell { flex: 0 0 calc((100% - 2 * var(--gap)) / 3); }

.cover-type {
  display: grid;
  gap: 0.6rem;
  place-items: center;
  text-align: center;
  padding: 1.25rem;
}

.cover-logo { height: 2.75rem; width: auto; }

.cover-type b {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--head);
}

.cell-type .panel-media,
.cell-receipt .panel-media {
  display: grid;
  align-content: center;
  padding: 1.4rem 1.25rem;
  background: var(--card);
}

.cell-type blockquote { margin: 0; }

.cell-type p {
  margin: 0 0 0.85rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.7vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--head);
}

.cell-type cite {
  font-family: var(--label);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--accent);
}

.cell-receipt .panel-media { gap: 0.3rem; }

.receipt-n {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--head);
}

.receipt-n.accent { color: var(--accent); }
.receipt-n i { font-style: normal; font-size: 0.5em; letter-spacing: 0.06em; }
.cell-receipt .label + .receipt-n { margin-bottom: 0.75rem; }

/* --- hover ---------------------------------------------------------------- */

.row-veil {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  background: rgba(22, 22, 22, 0.94);
  opacity: 0;
  transition: opacity 0.18s var(--ease);
  pointer-events: none;
}

.row:hover .row-veil,
.row:focus-visible .row-veil { opacity: 1; }

.row:focus-visible { outline: none; }

.row-veil b {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.6vw, 3.25rem);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Interview — the stage
   The cover fills the screen and the name sits on it. One line of copy, then
   the reader is into the work.
   -------------------------------------------------------------------------- */

.stage {
  position: relative;
  min-height: min(94vh, 60rem);
  display: flex;
  align-items: flex-end;
  overflow: clip;
  border-bottom: 1px solid var(--rule);
}

.stage-bg {
  position: absolute;
  inset: -14% 0 -14% 0;   /* headroom so the parallax never shows an edge */
  z-index: 0;
  will-change: transform;
}

.stage-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Was 62%, which was pushing DOWN off the designed cover's headline. The stage no longer
     uses that cover, it uses a plain frame from the footage, so the crop should land on the
     subject's face instead. These are 4:5 verticals and the face usually sits in the upper
     third (Cade 2026-08-24). Per-piece override: `stage_focus` in interviews.json. */
  object-position: center 34%;
  /* 0.45 -> 0.72 (Cade 2026-08-24): the artwork was barely legible. The veil below does the
     legibility work now, so the image itself does not need to be held that far down. */
  opacity: 0.72;
}

/* Type has to stay legible over whatever the artwork is doing underneath. */
.stage-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Weighted to the bottom, where the type actually sits, and opened up through the middle so
     the artwork reads. Was a flat 0.45 across the midtones, which greyed the whole frame. */
  background:
    linear-gradient(to top, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.78) 22%, rgba(0,0,0,0.22) 62%, rgba(0,0,0,0.55) 100%),
    radial-gradient(120% 70% at 50% 100%, rgba(0,0,0,0.72), transparent 72%);
}

.stage-in {
  position: relative;
  z-index: 2;
  padding-top: 8rem;
  padding-bottom: 3.5rem;
}

.stage-name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3.75rem, 13vw, 11rem);
  line-height: 0.84;
  letter-spacing: 0.01em;
  color: var(--head);
  margin: 0 0 1.25rem;
}

.stage-dek {
  max-width: 30rem;
  margin: 0 0 1.75rem;
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  line-height: 1.5;
  color: var(--head);
}

/* The found -> now pair inside the stage hero (Cade 2026-08-24). Tighter than the standalone
   section it replaced, and it has to sit over artwork, so the labels get a little more weight. */
.figures-hero {
  margin: 0 0 1.75rem;
  gap: 1.25rem 2.5rem;
}
.figures-hero .fig-n { font-size: clamp(2.5rem, 6vw, 4.25rem); }
.figures-hero .fig-l { color: var(--body); max-width: 15rem; }
.figures-hero .fig-to { align-self: center; }

.stage-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.scroll-cue {
  position: absolute;
  z-index: 2;
  right: 1.5rem;
  bottom: 3.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.scroll-cue i {
  display: block;
  width: 1px;
  height: 2.5rem;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: cue 2.2s var(--ease) infinite;
  transform-origin: 50% 0;
}

@keyframes cue {
  0%, 100% { transform: scaleY(0.3); opacity: 0.35; }
  45%      { transform: scaleY(1);   opacity: 1; }
}

/* --------------------------------------------------------------------------
   Interview — the receipt, as figures that count up
   -------------------------------------------------------------------------- */

.figures {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 2rem 3.5rem;
  padding: 3.5rem 0;
}

.fig { min-width: 7rem; }

.fig-n {
  display: block;
  font-family: var(--display);
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 0.9;
  color: var(--head);
  font-variant-numeric: tabular-nums;
}

.fig-n.accent { color: var(--accent); }
.fig-l { margin-top: 0.5rem; max-width: 12rem; }

/* the arrow between found and now, drawn rather than typed */
.fig-to {
  flex: 0 0 auto;
  align-self: center;
  width: clamp(2rem, 6vw, 5rem);
  height: 1px;
  background: var(--rule);
  position: relative;
  margin-bottom: 2.5rem;
}

.fig-to::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   Ticker — the name drifting sideways as the page moves
   -------------------------------------------------------------------------- */

.ticker {
  overflow: hidden;
  padding: 1.25rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  user-select: none;
}

.ticker-track {
  display: flex;
  width: max-content;
  gap: 2.5rem;
  will-change: transform;
}

.ticker-track span {
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--rule);
  white-space: nowrap;
}

.ticker-track span:nth-child(even) {
  color: var(--rule-soft);
  -webkit-text-stroke: 0;
}

/* --------------------------------------------------------------------------
   The reel — the post itself, moving sideways as you scroll down
   -------------------------------------------------------------------------- */

.reel { position: relative; }

.reel-pin {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 2.5rem 0 2rem;
}

.reel.is-pinned .reel-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  justify-content: center;
  overflow: hidden;
}

.reel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex: 0 0 auto;
}

.reel-head h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.75rem, 4vw, 3rem);
  letter-spacing: 0.04em;
  color: var(--head);
  margin: 0;
}

.reel-track {
  display: flex;
  gap: 1.25rem;
  padding: 0 1.5rem;
  will-change: transform;
}

/* Off a pin, it's a plain swipeable strip — which is what a phone wants. */
.reel:not(.is-pinned) .reel-track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.reel:not(.is-pinned) .reel-track::-webkit-scrollbar { display: none; }
.reel:not(.is-pinned) .panel { scroll-snap-align: center; }

/* Already fits, so nothing scrolls and nothing pins — just centre it. */
.reel.is-static .reel-track { justify-content: center; overflow: visible; }

.panel {
  position: relative;
  flex: 0 0 auto;
  width: clamp(15rem, 50vh, 28rem);
  margin: 0;
  background: var(--card);
  border: 1px solid var(--rule);
  overflow: hidden;
}

.panel-media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: #000;
}

.panel-media img,
.panel-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.panel-n {
  position: absolute;
  top: 0.65rem;
  left: 0.7rem;
  z-index: 2;
  font-family: var(--label);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  color: var(--head);
  background: rgba(0, 0, 0, 0.6);
  padding: 0.2rem 0.45rem;
  pointer-events: none;
}

.panel-sound {
  position: absolute;
  z-index: 2;
  right: 0.7rem;
  bottom: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 34px;
  padding: 0.4rem 0.8rem;
  font-family: var(--label);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--head);
  background: rgba(0, 0, 0, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.panel-sound:hover { color: var(--accent); border-color: var(--accent); }
.panel-live .panel-n { display: none; }

.reel-progress {
  flex: 0 0 auto;
  height: 2px;
  margin: 0 1.5rem;
  background: var(--rule);
}

.reel-progress i {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.reel:not(.is-pinned) .reel-progress { display: none; }

/* --------------------------------------------------------------------------
   Scoreboard — what the post did
   -------------------------------------------------------------------------- */

.score { padding: 5rem 0 1rem; }

.score-head {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.75rem, 4vw, 3rem);
  letter-spacing: 0.04em;
  color: var(--head);
  margin: 0 0 2rem;
}

.score-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.score-cell { background: var(--bg); padding: 1.75rem 1.5rem; }

.score-n {
  font-family: var(--display);
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* Reach is the headline; the account metrics beside it are supporting. */
.score-cell.mut .score-n { color: var(--head); }
.score-l { margin-top: 0.6rem; }

.score-react {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}

.score-react > div { display: flex; align-items: baseline; gap: 0.5rem; }

.score-react b {
  font-family: var(--label);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--head);
  font-variant-numeric: tabular-nums;
}

.score-src { padding: 1.75rem 0 0; }

.src-row {
  display: grid;
  grid-template-columns: 6rem 1fr 3.5rem;
  align-items: center;
  gap: 1rem;
  margin-top: 0.85rem;
}

.src-row .label { color: var(--body); }

.src-bar { height: 6px; background: var(--rule); }

.src-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 1.1s var(--ease);
}

.src-pct {
  font-family: var(--label);
  font-size: 0.8125rem;
  color: var(--head);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.score-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

.score-foot .up { color: var(--accent); }
.score-foot .down { color: #d8a13a; }

/* --------------------------------------------------------------------------
   The words — everything that is actually reading, kept below the work
   -------------------------------------------------------------------------- */

.words { padding: 5rem 0 0; }

.standfirst {
  font-size: 1.1875rem;
  line-height: 1.7;
  color: var(--body);
}

.words .standfirst::first-letter {
  float: left;
  font-family: var(--display);
  font-size: 3.4rem;
  line-height: 0.78;
  padding: 0.1rem 0.6rem 0 0;
  color: var(--accent);
}

.pull {
  margin: 3.5rem 0;
  padding: 0;
  border-left: 2px solid var(--accent);
  padding-left: 1.75rem;
}

.pull p {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  line-height: 1.06;
  letter-spacing: 0.01em;
  color: var(--head);
  margin: 0;
}

.pull cite {
  display: block;
  margin-top: 1rem;
  font-family: var(--label);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--dim);
}

.sub-head {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  color: var(--head);
  margin: 3rem 0 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}

.ticks { list-style: none; margin: 0; padding: 0; }

.ticks li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.9rem;
  font-size: 1rem;
  line-height: 1.6;
}

/* Was a 0.75rem rule, which read as a long dash. A literal hyphen instead (Cade 2026-08-24). */
.ticks li::before {
  content: "-";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--label);
  line-height: 1.6;
  color: var(--accent);
}

.qa { margin-top: 2.5rem; }
.qa-item { margin-bottom: 2.5rem; }

.qa-q {
  font-family: var(--label);
  font-size: 0.8125rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin: 0 0 0.85rem;
}

.qa-a { margin: 0; }
.qa-a + .qa-a { margin-top: 1rem; }

/* A long conversation is opt-in rather than a wall. */
.more { margin-top: 2.5rem; }

.more > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0 1.25rem;
  font-family: var(--label);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--head);
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
  transition: color 0.15s, border-color 0.15s;
}

.more > summary::-webkit-details-marker { display: none; }
.more > summary:hover { color: var(--accent); border-color: #0d3b28; }
.more > summary::after { content: "+"; color: var(--accent); }
.more[open] > summary::after { content: "–"; }
.more[open] > summary { margin-bottom: 1rem; }

/* editorial hold / status callout */
.note {
  margin: 3rem 0 0;
  padding: 1.1rem 1.25rem;
  background: #0c0a05;
  border: 1px solid #2c2412;
  border-left: 2px solid #d8a13a;
}

.note p { margin: 0.5rem 0 0; font-size: 0.9375rem; line-height: 1.6; }
.note .label { color: #d8a13a; }

/* pending state for unformatted interviews */
.pending {
  margin: 2.5rem 0 0;
  padding: 2.5rem 1.5rem;
  text-align: center;
  border: 1px dashed var(--rule);
}

.pending p { margin: 0.6rem 0 0; font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   Prev / next
   -------------------------------------------------------------------------- */

.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 5rem;
  background: var(--rule-soft);
  border-top: 1px solid var(--rule);
}

.pager a, .pager span {
  background: var(--bg);
  padding: 1.5rem 1.25rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}

.pager a:hover { background: var(--card); }
.pager a:hover .pager-name { color: var(--accent); }
.pager .next { text-align: right; }

.pager-name {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--head);
  transition: color 0.15s;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-foot {
  margin-top: 5rem;
  padding: 2.5rem 0 4rem;
  border-top: 1px solid var(--rule);
}

.site-foot-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-foot a { color: var(--dim); text-decoration: none; }
.site-foot a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .reel-track { padding: 0 1.5rem 0.5rem; }
  .panel { width: min(78vw, 20rem); }
  /* The reel pins on a phone too (2026-09-10). svh is the height with Safari's toolbar showing,
     so the slides and the progress bar are never centred behind it, and the top padding clears
     the sticky masthead the pinned section sits under. */
  .reel.is-pinned .reel-pin { height: 100vh; height: 100svh; padding-top: 58px; }

  /* Four across is unreadable on a narrow screen, so fewer cells show, and the rows still
     TRAVEL (Cade, 2026-09-10). This was a swipe strip with nothing driven by the page scroll,
     so on a phone the archive lost the one thing it does. motion.js drives rows at every width
     now; only the cell count changes. Up to 900px: the cover and two slides. Phones: below. */
  .cell-cover { flex: 0 0 calc((100% - 2 * var(--gap)) / 3); }
  .row-track .cell { flex: 0 0 calc((100% - var(--gap)) / 2); }
}

@media (max-width: 640px) {
  body { font-size: 16px; }

  .hero { padding: 3rem 0 2rem; }
  .hero-slim { padding: 2.25rem 0 1.5rem; }

  /* A phone viewport is far taller than 4:5, so covering it would crop the
     artwork down to a narrow strip through the middle. The cover instead runs
     at close to its own shape across the top and the type sits under it. */
  .stage { display: block; min-height: 0; }
  .stage-bg { inset: 0 0 auto 0; height: 124vw; transform: none !important; }
  .stage-bg img { object-position: center 18%; opacity: 0.78; }

  .stage-veil {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.2) 0%,
      rgba(0, 0, 0, 0.55) 40%,
      #000 74%
    );
  }

  .stage-in { padding-top: 64vw; padding-bottom: 2.5rem; }
  .stage-name { font-size: clamp(3rem, 17vw, 5rem); }
  .scroll-cue { display: none; }

  .figures { gap: 1.75rem 2rem; padding: 2.5rem 0; }
  .fig-to { display: none; }

  .score { padding: 3.5rem 0 1rem; }
  .score-grid { grid-template-columns: repeat(2, 1fr); }
  .score-cell { padding: 1.25rem 1.1rem; }
  .score-react { gap: 0.75rem 1.5rem; }
  .src-row { grid-template-columns: 4.75rem 1fr 3rem; gap: 0.7rem; }

  .words { padding: 3.5rem 0 0; }

  .pager { grid-template-columns: 1fr; }
  .pager .next { text-align: left; }
}

/* --------------------------------------------------------------------------
   Reduced motion — the page keeps its layout and loses every effect
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .js [data-reveal] { opacity: 1; transform: none; }
  .stage-bg { transform: none !important; }
  .ticker-track { transform: none !important; }
}

/* ── HOME view (standalone root, --emit-home) ──────────────────────────────
   The archive under /interviews leads with the word "Interviews". As the root of
   its own site it has to say what the site is instead, so the mark is centred and
   the series standfirst does the explaining. Rows below are unchanged. */
.hero-home {
  padding: 5.5rem 0 3rem;
  border-bottom: 1px solid var(--rule);
  text-align: center;
}
.hero-home .hero-mark {
  display: block;
  margin: 0 auto 2rem;
  width: clamp(84px, 11vw, 132px);
  height: auto;
}
.hero-home .hero-lede {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.75rem, 4.4vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  /* 22ch broke the lede over three lines. 30ch lets it sit on two, which is what
     text-wrap: balance below then evens out (Cade 2026-08-25). */
  max-width: 30ch;
  margin: 0 auto 1.25rem;
  color: var(--head);
  text-wrap: balance;
}
.hero-home .standfirst {
  max-width: 44rem;
  margin: 0 auto;
  color: var(--dim);
  text-wrap: pretty;
}
@media (max-width: 640px) {
  .hero-home { padding: 3.5rem 0 2.25rem; }
  .hero-home .hero-mark { margin-bottom: 1.375rem; }
}

/* Available to the whole sheet, not just the home hero: the centred lockup carries
   the page title visually, so the real <h1> has to stay in the document for
   assistive tech and search without being painted. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Home aggregate stats (Cade 2026-08-24) ────────────────────────────────
   Series totals, not per-post. Sits under the hero lede on the standalone root. */
.home-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.75rem 3.5rem;
  margin: 2.5rem 0 0.875rem;
}
.hstat { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.hstat b {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1;
  color: var(--head);
}
.hstat .label { color: var(--dim); }
.home-stats-foot { text-align: center; color: var(--head); margin: 0; }

@media (max-width: 640px) {
  .home-stats { gap: 1.25rem 2rem; margin-top: 1.75rem; }
}

/* ── The summary, in the slot the per-post metrics used to hold ─────────── */
.summary { padding: 3.5rem 0 0.5rem; }
.summary-body {
  max-width: var(--measure);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.65;
  color: var(--head);
  margin: 0;
}

/* Live-report prose: a live piece has no Q&A, so this is the body copy in its place.
   Same reading treatment as the summary above it. */
.report-body {
  max-width: var(--measure);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.65;
  color: var(--head);
  margin: 0 0 1.15rem;
}
.report-body:last-child { margin-bottom: 0; }


/* ── Stage eyebrow legibility (Cade 2026-08-24) ────────────────────────────
   Raising the background photo to 0.72 made the series label unreadable: it was set in
   --dim over artwork rather than over black. The label now carries real contrast and a
   short shadow, so it holds on a bright photograph as well as a dark one. */
.eyebrow .label { color: var(--body); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.85); }
.eyebrow .label.accent { color: var(--accent); }
.stage-facts .label { color: var(--body); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.85); }
.figures-hero .fig-l { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.85); }

/* --------------------------------------------------------------------------
   Phones, part two (2026-09-10)
   These correct rules that sit further down the sheet than Small screens, so
   they have to come after them.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  /* <section class="wrap summary">: the .summary padding shorthand comes later than .wrap's
     and zeroes the side padding, so on a phone "The interview" and its standfirst ran flush
     against the screen edge. Desktop carries the same 1.5rem offset against the sections
     around it and is deliberately left alone here. */
  .summary { padding-inline: 1.5rem; }

  /* "The post" beside its @handle line broke the heading over two lines. Stacked instead. */
  .reel-head { flex-direction: column; align-items: flex-start; gap: 0.3rem; }

  /* A phone row is the cover and ONE slide, half the row each; the rest travel in behind the
     cover. One visible slide instead of three means a six-slide post travels about twice as far
     per pixel of scroll as on desktop. The row gap sets the pitch, so it is the knob if that
     reads too quick. */
  .cell-cover { flex: 0 0 calc((100% - var(--gap)) / 2); }
  .row-track .cell { flex: 0 0 100%; }
}

/* A touchscreen has no hover, so the veil that names where a row goes never appears and the
   row reads as a strip of pictures rather than a link. There it becomes a caption under the
   strip instead. */
@media (hover: none) {
  .row-veil {
    position: static;
    opacity: 1;
    background: none;
    place-items: start;
    text-align: left;
    padding: 0.65rem 0 0;
  }
  .row-veil b {
    font-family: var(--label);
    font-size: 0.6875rem;
    line-height: 1.4;
    letter-spacing: 0.14em;
    color: var(--head);
  }
  .row-veil b::after { content: " \2192"; color: var(--accent); }
}