/**
 * Mentionaut — the page whose only job is the install.
 *
 * Archivo for everything the page says, IBM Plex Mono for everything it measures —
 * timecodes, counts, labels, captions. The mono is never body copy; it marks the
 * things that came off a clock or out of a database.
 *
 * ONE SCALE, seven steps, declared as --t-* tokens. No literal font-size is allowed
 * outside them. THREE WEIGHTS, --w-reg/--w-med/--w-bold. Tracking is a function of
 * size (--tr-*), not a per-element decision. An earlier cut of this page accumulated
 * eighteen sizes and six weights while this comment claimed four; count the computed
 * values on the rendered page before trusting any claim made here.
 *
 * The reproduced panel keeps the extension's own metrics — 138px cards, 13/11/10.5px
 * type, a 26px dot track. Those are copied from extension/panel.css and are not part
 * of this scale.
 *
 * ONE ACCENT, THREE ROLES, and nothing else may claim it:
 *   1. the call to action        2. the citation mark        3. the playhead
 * It is YouTube's #FF0000, borrowed on purpose — the panel lives inside somebody
 * else's page and should look like it belongs there.
 *
 * Motion is opt-in, not overridden: base styles carry none, and every animation
 * lives inside `prefers-reduced-motion: no-preference`. Durations are tokens —
 * --quick for interaction, --reveal for a thing arriving. Nothing fades in on
 * approach; the only orchestrated moment is the hero's opening beats.
 *
 * No gradients as decoration and no glows: the surfaces are flat and tinted, and the
 * only texture is a hairline rule grid.
 */

/* ─────────────────────────────────────────────────────────── tokens ─────── */

:root {
  /* ground — one hue family, the visor's navy. Tinted, never #000. */
  --ink:    #070B16;
  --visor:  #131C33;
  --raise:  #1B2744;
  --rule:   #24304F;

  /* the brushed bezel, as text. Never #FFF. */
  --bezel:  #E2E6EC;
  --mute:   #94A0B8;
  --faint:  #8C97B4;   /* was #5C688A — 3.06:1, below AA on this ground */

  --red:    #FF0000;   /* the accent: citation marks, the playhead */
  --red-btn: #D90000;  /* buttons only — white on #FF0000 is 3.99:1, under AA */

  /* the archival ground: the bezel lightened, not a cream */
  --paper:      #E7EBF1;
  --paper-2:    #DFE4EC;
  --paper-ink:  #101830;
  --paper-mute: #4C5872;
  --paper-rule: #C3CBD9;

  /* Archivo, variable on both weight and width. It is a grotesque of the kind that
     gets silkscreened onto equipment — which is what this is. The page ran on a
     high-contrast book serif first and read as an essay about podcasts rather than a
     tool for them. A utility should look like it was made to be used. */
  --sans:  "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* No second family. Labels, timecodes and counts used to run in IBM Plex Mono, which
     is the default "technical" face of generated design and read as a machine's idea of
     credibility. Everything data-like now gets there through tabular figures, uppercase,
     tracking and colour — cheaper to load and harder to mistake for anyone else. */
  /* Inside the panel reproduction only, matching what the extension actually renders. */
  --ui:    system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;
  /* The shipped extension sets reference names in a book serif. On the page that
     reads as the same high-contrast serif every AI site is using, so the cards here
     take the sans. Worth aligning panel.css to match. */
  --panel-serif: var(--sans);

  /* THE SCALE. Seven steps, and nothing may invent an eighth. The old page carried
     eighteen sizes, seven of them inside a 4px band, which is an accumulation rather
     than a hierarchy. Ratios are ~1.28 through the text range and jump at display.
     The reproduced panel keeps its own 13/11/10.5 — it is a copy of another
     component, not part of this scale. */
  --t-d1:    clamp(2.75rem, 5.4vw, 4.5rem);   /* 44 → 72 */
  --t-d2:    clamp(1.75rem, 3vw, 2.5rem);     /* 28 → 40 */
  --t-d3:    1.25rem;                          /* 20 — section subhead      */
  --t-lede:  1.125rem;                         /* 18 — opening paragraphs   */
  --t-body:  1rem;                             /* 16 — everything readable  */
  --t-small: 0.875rem;                         /* 14 — secondary            */
  --t-micro: 0.75rem;                          /* 12 — labels, mono, meta   */

  /* Tracking is a function of size, not a per-element decision. */
  --tr-d1:  -.032em;
  --tr-d2:  -.022em;
  --tr-body: 0;
  --tr-label: .1em;

  /* Three weights. */
  --w-reg: 400;
  --w-med: 500;
  --w-bold: 700;

  --shell: min(1240px, 100% - 2.5rem);
  --ease:  cubic-bezier(.32, .72, 0, 1);
  --quick: .16s;    /* interaction: hover, focus, press */
  --reveal: .3s;    /* something arriving on screen   */

  /* one hue per kind — the panel's own, so the ribbon reads the same in both places */
  --c-story: #e0a020; --c-person: #e8543f; --c-book: #2f6f4e; --c-concept: #7a4fbf;
  --c-media: #1f6fb2; --c-place: #c2185b; --c-organisation: #0e7c7b;
  --c-product: #8a6d3b; --c-study: #6b7a99; --c-recipe: #C4622D;
  --c-supplement: #1E8A6B; --c-music: #B0369E; --c-event: #b23a48;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--bezel);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: var(--w-reg);
  line-height: 1.6;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--red-btn); color: #fff; padding: .6rem 1rem;
  font-size: var(--t-small); text-decoration: none;
}
.skip:focus { left: 0; }

/* every number on this page is data, so every number is tabular and slashed */
.stage-clock, .ribbon-key b, .readout-time, .readout-count b,
.mn-stamp, .mn-bar-count, .register .num, .foot-corpus b {
  font-variant-numeric: tabular-nums slashed-zero;
}

/* ──────────────────────────────────────────────────── shared type ──────── */

.eyebrow {
  margin: 0 0 1.4rem;
  font-size: var(--t-micro); font-weight: var(--w-med);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--faint);
}
.eyebrow::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 1.5rem; height: 1px; margin-right: .7rem;
  background: var(--faint);
}

.d1 {
  margin: 0;
  font-size: var(--t-d1); font-weight: var(--w-bold); line-height: 1.03;
  font-variation-settings: "wdth" 106;
  letter-spacing: var(--tr-d1); text-wrap: balance;
}

.d2 {
  margin: 0;
  font-size: var(--t-d2); font-weight: var(--w-bold); line-height: 1.1;
  font-variation-settings: "wdth" 104;
  letter-spacing: var(--tr-d2); text-wrap: balance;
}

.lede {
  max-width: 34ch;
  margin: 1.5rem 0 0;
  font-size: var(--t-lede); line-height: 1.56; color: var(--mute);
}

/* ──────────────────────────────────────────────────────── buttons ─────── */

.btn {
  display: inline-block;
  padding: .8rem 1.5rem;
  background: var(--red-btn); color: #fff;
  font-size: var(--t-small); font-weight: var(--w-med);
  letter-spacing: .04em; text-decoration: none;
  border: 1px solid var(--red-btn); border-radius: 2px;
  transition: background var(--quick) var(--ease), color var(--quick) var(--ease);
}
.btn:hover { background: transparent; color: #FF5A5A; border-color: #FF5A5A; }

.btn-sm { padding: .5rem 1rem; font-size: var(--t-micro); }
.btn-lg { padding: 1rem 2.1rem; font-size: var(--t-body); }

.cta-note {
  margin: .85rem 0 0;
  font-size: var(--t-micro); color: var(--faint);
}

/* ──────────────────────────────────────────────────────── topbar ─────── */

/* Full-bleed bar, shell-width contents. The earlier version bled with `inset: 0 -50vw`
   on a pseudo-element, which pushed the document 50vw wide and gave every mobile
   viewport a horizontal scrollbar. */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--quick) var(--ease), border-color var(--quick) var(--ease);
}
.topbar-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  width: var(--shell); margin-inline: auto;
  padding: .9rem 0;
}
body.scrolled .topbar { background: var(--ink); }
body.scrolled .topbar { border-bottom-color: var(--rule); }

.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; }
.brand-mark { width: 28px; height: 28px; }
.brand-word {
  font-size: var(--t-body); font-weight: var(--w-med);
  color: var(--bezel);
}

.topnav { display: flex; align-items: center; gap: 1.6rem; }
.topnav a {
  font-size: .75rem; letter-spacing: .06em;
  color: var(--mute); text-decoration: none;
  transition: color var(--quick) var(--ease);
}
.topnav a:hover { color: var(--bezel); }
.topnav .btn { color: #fff; }
.topnav .btn:hover { color: var(--red); }

/* ═══════════════════════════════════════════════════════════ hero ═══════ */

.hero {
  position: relative; isolation: isolate;
  width: var(--shell); margin-inline: auto;
  padding: clamp(2.5rem, 7vh, 6rem) 0 0;
  min-height: calc(100svh - 60px);
  display: flex; flex-direction: column; justify-content: space-between;
}

/* The cinematic runs behind the whole fold, breaking out of the shell to full
   viewport width. It is atmosphere, not the subject — the subject is the panel, and
   a utility has to show what it does above the fold. The helmet is weighted to the
   right so it sits under the demonstration rather than under the headline. */
.hero-film {
  position: absolute; z-index: -2;
  top: -70px; left: 50%; transform: translateX(-50%);
  width: 100vw; height: calc(100% + 70px);
  object-fit: cover; object-position: 68% 42%;
  opacity: .42;
  pointer-events: none;
}
.hero::before {
  content: ""; position: absolute; z-index: -1;
  top: -70px; left: 50%; transform: translateX(-50%);
  width: 100vw; height: calc(100% + 70px);
  background:
    linear-gradient(100deg, var(--ink) 24%, rgb(7 11 22 / 72%) 52%, rgb(7 11 22 / 30%) 100%),
    linear-gradient(to bottom, rgb(7 11 22 / 55%), transparent 22%, rgb(7 11 22 / 92%));
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 25rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding-bottom: clamp(2rem, 5vh, 4rem);
}

.hero-say { max-width: 27rem; }
.hero-say .lede { max-width: 31ch; }
.cta { margin-top: 2.2rem; }

/* ── the stage: one flat plate, everything happens inside it ── */

.stage { margin: 0; }






.stage-cap {
  margin: .9rem 0 0;
  font-size: var(--t-micro); line-height: 1.7;
  color: var(--faint);
  max-width: 54ch;
}



/* ═══════════════════════════════════════════════════════════ the wall ══ */
/* Recognition does the selling here. You know the face before you read the name, and
   the thumbnail grid is the only layout that lets forty of them work at once. */

.wall {
  width: var(--shell); margin-inline: auto;
  padding: clamp(3rem, 8vh, 5rem) 0 clamp(4rem, 10vh, 6rem);
}

.wall-head { max-width: 46rem; }

.shows { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.shows li {
  display: flex; align-items: baseline; gap: .55rem;
  padding: .45rem .85rem;
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--visor);
}
.shows b {
  font-size: var(--t-small); font-weight: var(--w-med); letter-spacing: -.01em; color: var(--bezel);
}
.shows span { font-size: var(--t-micro); color: var(--faint); }

.kinds { display: flex; flex-wrap: wrap; gap: .4rem; margin: clamp(2rem, 5vh, 3rem) 0 1.4rem; }
.kind {
  font: inherit; font-size: .75rem; cursor: pointer;
  padding: .4rem .9rem; border-radius: 999px;
  background: transparent; border: 1px solid var(--rule); color: var(--mute);
  transition: color var(--quick) var(--ease), border-color var(--quick) var(--ease);
}
.kind:hover { color: var(--bezel); border-color: var(--faint); }
.kind[aria-pressed="true"] {
  color: var(--ink); background: var(--bezel); border-color: var(--bezel); font-weight: var(--w-med);
}

.wall-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr));
  gap: .8rem;
  margin: 0; padding: 0; list-style: none;
}
.wall-grid li[hidden] { display: none; }

.tile-a {
  display: block; text-decoration: none;
  background: var(--visor);
  border: 1px solid var(--rule); border-radius: 6px;
  overflow: hidden;
  transition: border-color var(--quick) var(--ease), transform var(--quick) var(--ease);
}
.tile-a:hover { border-color: var(--kind); transform: translateY(-2px); }
.tile-a:hover .tile-shot img { transform: scale(1.03); }
.tile-shot img { transition: transform var(--quick) var(--ease); }
.taxo-seg, .shows li, .show-art { transition: opacity var(--quick) var(--ease),
  border-color var(--quick) var(--ease), box-shadow var(--quick) var(--ease); }

.tile-shot {
  position: relative; margin: 0;
  aspect-ratio: 4 / 3; background: var(--raise); overflow: hidden;
}
.tile-shot img { width: 100%; height: 100%; object-fit: cover; }
.tile-t {
  position: absolute; right: 5px; bottom: 5px;
  padding: 2px 6px; border-radius: 3px;
  background: rgb(0 0 0 / 82%); color: #fff;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums slashed-zero;
}
.tile-body { padding: .55rem .6rem .65rem; display: grid; gap: 2px; }
.tile-n {
  font-size: var(--t-small); font-weight: var(--w-med); line-height: 1.25; letter-spacing: var(--tr-body);
  color: var(--bezel);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tile-k {
  display: flex; align-items: center; gap: .4rem;
  font-size: var(--t-micro); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--mute);
}
/* the kind still colour-codes, as a dot — the same hue set as type failed AA at 3.2:1 */
.tile-k::before {
  content: ""; width: 6px; height: 6px; border-radius: 2px; flex: 0 0 6px;
  background: var(--kind);
}
.tile-ch {
  font-size: var(--t-micro); color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.wall-note {
  margin: 1.4rem 0 0; max-width: 62ch;
  font-size: var(--t-micro); color: var(--faint);
}

/* ══════════════════════════════════════════ the instrument (signature) ══ */

/* 3.4 viewports of scroll plays the whole episode. It was 4.6, which is a lot of
   page to spend before anyone reaches the trust section. */
.scrub-track { height: 620vh; position: relative; }

/* Two real columns: what is being said on the left, what the panel does with it on
   the right, both centred against each other. Stacking the panel below the copy left
   the whole right half of the viewport empty. */
.scrub-stick {
  position: sticky; top: 0;
  height: 100svh;
  width: var(--shell); margin-inline: auto;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(1.5rem, 4vh, 2.6rem);
  padding: 4.5rem 0 2.5rem;
}

.scrub-left {
  display: flex; flex-direction: column;
  gap: clamp(2rem, 6vh, 4rem);
  min-width: 0;
}

.scrub-head { max-width: 40rem; }
.scrub-lede {
  max-width: 44ch; margin: 1.1rem 0 0;
  font-size: var(--t-body); color: var(--mute);
}

/* the readout — telemetry, so it is mono throughout */

/* ── the frame. Deliberately not a browser mockup: no chrome, no tab bar, no
      window buttons. A plate reads as "a video page" without borrowing anyone's
      interface, and without dragging a third party's pixels into shot. ── */
.panel-frame {
  position: relative;
  padding: 14px;
  background: var(--visor);
  border: 1px solid var(--rule);
  border-radius: 3px;
}

/* ── a faithful reproduction of the panel: the extension's own tokens, metrics
      and class names, in its dark theme. ── */
.mn-panel {
  --mn-ink: #f1f1f1; --mn-muted: #aaa; --mn-faint: #888890;
  --mn-rule: #263449; --mn-fill: #263449;
  --mn-link: #8ab4f8;
  font-family: var(--ui); color: var(--mn-ink); line-height: 1.4;
  position: relative; z-index: 1;
}

.mn-bar {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 10px;
}
.mn-mark { width: 24px; height: 24px; }
.mn-word { font-size: 15px; font-weight: var(--w-med); }
.mn-bar-count {
  margin-left: auto;
  font-size: 10.5px; font-weight: 400;
  letter-spacing: .1em; color: var(--mn-faint);
}


/* Copied from extension/panel.css, values and all. The earlier mock replaced this with
   a plain progress bar, throwing away the panel's signature: one dot per mention,
   coloured by kind, so you can see where the episode gets dense. */
.mn-timeline { margin-bottom: 10px; }
.mn-track {
  position: relative; height: 26px;
  background: linear-gradient(var(--mn-rule), var(--mn-rule)) center / 100% 2px no-repeat;
}
/* The dots are <button>s, as in the panel — pressing one seeks the video. The reset
   below (`padding: 0; border: none`) was already here from when they were spans, which
   is why swapping the tag needed no visual change. `cursor` and the hover are what the
   extension has and this did not, because a span could not be pressed. */
.mn-dot {
  position: absolute; top: 50%; width: 7px; height: 7px; padding: 0;
  border: none; border-radius: 50%; background: var(--c, var(--mn-muted));
  transform: translate(-50%, -50%); cursor: pointer;
  box-shadow: 0 0 0 1.5px var(--mn-paper, #1c2431);
  transition: opacity 140ms linear, transform 140ms ease;
}
/* The same 1.55 the panel uses, so a dot behaves identically in both places. A 7px
   target is small, so the hover has to say clearly that it is pressable. */
.mn-dot:hover { transform: translate(-50%, -50%) scale(1.55); }
.mn-dot:focus-visible {
  outline: 2px solid var(--red); outline-offset: 2px;
  transform: translate(-50%, -50%) scale(1.55);
}

.mn-dot[data-cat="story"] { --c: var(--c-story); }
.mn-dot[data-cat="person"] { --c: var(--c-person); }
.mn-dot[data-cat="book"] { --c: var(--c-book); }
.mn-dot[data-cat="concept"] { --c: var(--c-concept); }
.mn-dot[data-cat="media"] { --c: var(--c-media); }
.mn-dot[data-cat="place"] { --c: var(--c-place); }
.mn-dot[data-cat="organisation"] { --c: var(--c-organisation); }
.mn-dot[data-cat="product"] { --c: var(--c-product); }
.mn-dot[data-cat="study"] { --c: var(--c-study); }
.mn-dot[data-cat="recipe"] { --c: var(--c-recipe); }
.mn-dot[data-cat="supplement"] { --c: var(--c-supplement); }
.mn-dot[data-cat="music"] { --c: var(--c-music); }
.mn-dot[data-cat="event"] { --c: var(--c-event); }
/* dots that have not been reached yet sit back rather than disappearing */
.mn-dot[data-ahead] { opacity: .22; }

.mn-play {
  position: absolute; top: 3px; bottom: 3px; left: var(--mn-play, 0%);
  width: 2px; background: var(--mn-ink); transform: translateX(-50%);
  pointer-events: none;
}

/* the real filter chips, which the mock simply did not have */
.mn-chips {
  display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none;
  padding-bottom: 10px;
}
.mn-chips::-webkit-scrollbar { display: none; }
.mn-chip {
  display: inline-flex; align-items: baseline; gap: 5px; flex: 0 0 auto;
  padding: 3px 9px; border: 1px solid var(--mn-rule); border-radius: 999px;
  background: none; color: var(--mn-muted); font: inherit; font-size: 11.5px;
  cursor: default;
}
.mn-chip b { color: var(--mn-ink); font-weight: var(--w-med); }

/* The real rail just scrolls, and so does this one — draggable by hand, and driven
   by the playhead. Overflow hidden meant neither. */
.mn-rail-clip {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--mn-rule) transparent;
  overscroll-behavior-x: contain;
}
.mn-rail-clip::-webkit-scrollbar { height: 6px; }
.mn-rail-clip::-webkit-scrollbar-track { background: transparent; }
.mn-rail-clip::-webkit-scrollbar-thumb { background: var(--mn-rule); border-radius: 3px; }
.mn-rail-clip::-webkit-scrollbar-thumb:hover { background: var(--mn-faint); }
.mn-rail { display: flex; gap: 12px; align-items: flex-start; width: max-content; }

.mn-card {
  flex: 0 0 138px; width: 138px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 4px;
}

.mn-thumb {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  border-radius: 8px; overflow: hidden;
  background: var(--mn-fill); margin-bottom: 7px;
}
.mn-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mn-thumb-empty { display: grid; place-items: center; }
.mn-initial { font-family: var(--panel-serif); font-size: 24px; font-weight: var(--w-reg); color: var(--mn-faint); }
.mn-stamp {
  position: absolute; right: 4px; bottom: 4px;
  padding: 1px 5px; border-radius: 4px;
  background: rgb(0 0 0 / 78%); color: #fff;
  font-size: 9.5px; font-weight: 400;
}
/* 600 is the extension's own spec for a reference name; this block is a copy of
   that component, so it keeps it. */
.mn-name {
  margin: 0; font-family: var(--panel-serif); font-size: 13px; font-weight: 600;
  line-height: 1.28;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mn-landed {
  margin: 2px 0 0; font-size: 10.5px; color: var(--mn-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mn-summary {
  margin: 2px 0 0; font-size: 11px; line-height: 1.32; color: var(--mn-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mn-src {
  display: inline-flex; align-items: baseline; gap: 3px; margin-top: 3px;
  color: var(--mn-link); font-size: 10.5px; text-decoration: none;
}
.mn-src:hover .mn-src-label { text-decoration: underline; }
.mn-src-arrow { font-size: 10px; }


/* ═══════════════════════════════════════════════════════ paper turn ═════ */
/* Dark is during the episode. Paper is the register you keep afterwards. */

.paper { background: var(--paper); color: var(--paper-ink); }
.paper-alt { background: var(--paper-2); }

.paper-in {
  width: var(--shell); margin-inline: auto;
  padding: clamp(5rem, 13vh, 9rem) 0;
}
.paper .eyebrow { color: var(--paper-mute); }
.paper .eyebrow::before { background: var(--paper-mute); }
.paper .d2 { color: var(--paper-ink); }
.paper-lede { color: var(--paper-mute); max-width: 46ch;
  font-size: var(--t-lede);
}

/* the register — set as a table, because that is what it is */
.register {
  width: 100%; max-width: 58rem;
  margin: clamp(2.5rem, 6vh, 4rem) 0 0;
  border-collapse: collapse;
  font-size: var(--t-small); font-weight: 400;
  text-align: left;
}
.register caption {
  padding-bottom: .8rem;
  font-size: var(--t-micro); font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--paper-mute); text-align: left;
}
.register th {
  padding: .5rem .8rem .5rem 0;
  font-weight: 500; font-size: var(--t-micro); letter-spacing: .1em;
  text-transform: uppercase; color: var(--paper-mute);
  border-bottom: 1px solid var(--paper-ink);
}
.register td {
  padding: .72rem .8rem .72rem 0;
  border-bottom: 1px solid var(--paper-rule);
  vertical-align: baseline;
}
.register .num { text-align: right; padding-right: 0; font-weight: 500; }
/* a source this episode did not need — quietened, not hidden */
.register .unused td { color: var(--paper-mute); }
.register .unused .num { font-weight: 400; }

.register-note {
  max-width: 52ch; margin: 1.2rem 0 0;
  font-size: var(--t-small); color: var(--paper-mute);
}
.register .src-name { font-weight: 500; white-space: nowrap; }
.register .src-what {
  color: var(--paper-mute); font-family: var(--sans); font-size: var(--t-small);
}

/* The claim on the left, what follows from it on the right — the same width as the
   register above, so the section reads as one column of content rather than two
   unrelated blocks with the page's right half left empty. */
.gapnote {
  max-width: 58rem;
  margin: clamp(3rem, 7vh, 4.5rem) 0 0;
  padding-top: 1.6rem;
  border-top: 2px solid var(--paper-ink);
  color: var(--paper-mute);
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.gapnote p { margin: 0 0 1rem; }
.gapnote-say > p:last-child { margin-bottom: 0; }
.gapnote-big {
  margin: 0;
  font-family: var(--sans); font-size: var(--t-d3);
  font-weight: var(--w-bold); line-height: 1.24; letter-spacing: var(--tr-d2);
  color: var(--paper-ink); text-wrap: balance;
}
.gapnote-pull {
  margin-top: 1.6rem; padding-left: 1.2rem;
  border-left: 1px solid var(--paper-ink);
  font-style: italic; color: var(--paper-ink);
}

/* the specs list */
.specs { margin: clamp(2.5rem, 6vh, 4rem) 0 0; max-width: 52rem; }
.specs > div {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--paper-rule);
}
.specs > div:first-child { border-top: 1px solid var(--paper-ink); }
.specs dt {
  font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--paper-mute);
  padding-top: .3em;
}
.specs dd { margin: 0; font-size: var(--t-body); color: var(--paper-ink); }

/* ═══════════════════════════════════════════════════════════ close ═════ */

/* The one cinematic moment: the real mark, filmed, running behind the install.
   It sits at the end rather than the top because the top belongs to the tool — a
   utility has to show what it does before it shows what it is. */
.close {
  position: relative; isolation: isolate;
  min-height: min(78svh, 720px);
  display: grid; place-items: center;
  padding: clamp(4rem, 12vh, 8rem) 1.25rem clamp(3rem, 8vh, 5rem);
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.close-film {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .55;
}
/* the type has to stay legible over a moving image, and the helmet has to stay
   recognisable under the type — a flat scrim does both jobs and adds no colour */
.close::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(90% 70% at 50% 45%, rgb(7 11 22 / 35%), rgb(7 11 22 / 88%) 72%);
}
.close-say {
  text-align: center; max-width: 40rem;
  display: flex; flex-direction: column; align-items: center;
}
.close-h { max-width: 18ch; }
.close-line {
  max-width: 44ch; margin: 1.4rem 0 2.2rem;
  color: var(--bezel); font-size: var(--t-body);
}


/* ═══════════════════════════════════════════════ terms & privacy ══════ */
/* Same voice, no ornament. These are read by people deciding whether to trust us and
   by a store reviewer checking the disclosures match, so they are set for reading. */

.doc {
  width: min(42rem, 100% - 2.5rem); margin-inline: auto;
  padding: clamp(3rem, 9vh, 6rem) 0 clamp(4rem, 10vh, 7rem);
}
.doc-head { margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.doc-updated {
  margin: 1rem 0 0;
  font-size: .75rem; color: var(--faint);
}
.doc h2 {
  margin: clamp(2.5rem, 5vh, 3.5rem) 0 .9rem;
  font-size: var(--t-d3); font-weight: var(--w-bold); letter-spacing: var(--tr-d2); line-height: 1.25;
}
.doc h3 {
  margin: 2rem 0 .6rem;
  font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}
.doc p, .doc li { color: var(--mute); }
.doc p { margin: 0 0 1rem; }
.doc ul { margin: 0 0 1rem; padding-left: 1.1rem; }
.doc li { margin-bottom: .5rem; }
.doc strong { color: var(--bezel); font-weight: 400; }
.doc a:not(.btn):not(.brand) { color: var(--bezel); text-decoration: underline; text-underline-offset: 2px; }
.doc code {
  font-size: .85em; color: var(--bezel);
}
.doc-note {
  margin: clamp(2.5rem, 6vh, 4rem) 0 0; padding: 1.2rem 1.4rem;
  border: 1px solid var(--rule); border-radius: 3px;
  font-size: .75rem; line-height: 1.7; color: var(--faint);
}

/* ═════════════════════════════════════════════════════════ motion ══════ */
/* Opt-in, not overridden. Without this block the page is complete and still —
   which is also exactly what a reader who asked for reduced motion receives. */

@media (prefers-reduced-motion: reduce) {
  .hero-film, .close-film { display: none; }
  .close { background-image: url(media/helmet-poster.jpg); background-size: cover;
           background-position: center; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  @keyframes rise  { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
  @keyframes sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes pop   { from { opacity: 0; } to { opacity: 1; } }
  @keyframes land  { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
  @keyframes tick  { from { transform: scaleY(0); } to { transform: scaleY(1); } }

  /* Moment one: the thesis lands first, then the demonstration proves it.
     The earlier cut ran the transcript for 2.5s before the headline appeared, so a
     visitor spent the most expensive seconds on the page watching captions scroll
     with no idea what they were looking at. Now the promise is readable at ~0.2s and
     the proof assembles underneath it. */
  body.play .hero-say > *  { animation: rise .6s var(--ease) backwards; }
  body.play .hero-say > *:nth-child(1) { animation-delay: .05s; }
  body.play .hero-say > *:nth-child(2) { animation-delay: .14s; }
  body.play .hero-say > *:nth-child(3) { animation-delay: .26s; }
  body.play .hero-say > *:nth-child(4) { animation-delay: .38s; }



  body.play .stage-cap    { animation: rise .6s var(--ease) 2.55s backwards; }
  /* the bar carries the install button — it is never part of the show */

  /* The rail slides; the cards do not fade. Every card is present from the moment the
     panel renders — that is what the extension does, and the `:not(.on)` fade left over
     from the old "cards arrive" demo hid all 84 of them. */
  .mn-card.mn-live .mn-thumb { transition: box-shadow var(--quick) var(--ease); }
}

/* ══════════════════════════════════════════════════════ responsive ═════ */

@media (max-width: 1080px) {
  .scrub-stick { grid-template-columns: minmax(0, 1fr) 340px; }
}

@media (max-width: 900px) {
  .gapnote { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .hero { min-height: 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .hero-say { order: -1; max-width: 34rem; }
  .gap-prose { columns: 1; }
  .scrub-stick { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1.5rem; }
  .scrub-left { gap: 1.5rem; }
    .topnav a:not(.btn) { display: none; }
  .specs > div { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
}

@media (max-width: 560px) {
  .scrub-lede { display: none; }
  .scrub-track { height: 480vh; }
  .register .src-what, .register th:nth-child(2) { display: none; }
  .gapnote { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
}

/* ═══════════════════════════════════════════ the first thirty seconds ══ */

.start {
  width: var(--shell); margin-inline: auto;
  padding: clamp(4rem, 10vh, 7rem) 0 clamp(3rem, 8vh, 5rem);
}
.steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin: clamp(2.5rem, 6vh, 3.5rem) 0 0; padding: 0; list-style: none;
}
.steps li { padding-top: 1rem; border-top: 1px solid var(--rule); }
.step-t {
  display: block; margin-bottom: .5rem;
  font-size: var(--t-d3); font-weight: var(--w-reg);
  font-variant-numeric: tabular-nums slashed-zero;
  color: var(--bezel);
}
.step-say { margin: 0; font-size: var(--t-small); line-height: 1.55; color: var(--mute); }

/* ══════════════════════════════════════════════════════════ questions ══ */

.qa { margin: clamp(2.5rem, 6vh, 4rem) 0 0; max-width: 56rem; }
.qa > div {
  display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  gap: 1.5rem clamp(1.5rem, 3vw, 3rem);
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--paper-rule);
}
.qa > div:first-child { border-top: 1px solid var(--paper-ink); }
.qa dt { font-size: 1rem; font-weight: var(--w-bold); letter-spacing: -.012em; color: var(--paper-ink); }
.qa dd { margin: 0; font-size: var(--t-small); line-height: 1.55; color: var(--paper-mute); }

@media (max-width: 760px) {
  .qa > div { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .wall-head { gap: 1.5rem; }
}

/* ══════════════════════════════════════════════════ where it works ═════ */
/* Placed directly under the fold because "does this work on what I watch" is the
   first question, and an unanswered first question is where a visitor leaves. */

/* Stacked, not two columns.
 *
 * The catalogue used to sit in a right-hand column beside the copy. It cannot any more:
 * the marquee is full-bleed, and a full-bleed child of a grid column does not escape the
 * page — it escapes its *column*, and lands on top of the text next to it. Stacking is
 * also the shape the drift wants, and the one every "trusted by" row uses: say the
 * thing, then run the evidence edge to edge underneath it. */
.strip {
  width: var(--shell); margin-inline: auto;
  padding: clamp(3rem, 7vh, 5rem) 0;
  border-bottom: 1px solid var(--rule);
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.8rem, 4vh, 2.8rem); align-items: start;
}
.strip-say { max-width: 34rem; }
.strip-say p {
  margin: 1.1rem 0 0; max-width: 44ch;
  font-size: var(--t-small); line-height: 1.55; color: var(--mute);
}
.strip-ask {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem;
  margin-top: 1.5rem !important;
}
.strip-ask span { flex: 1 1 16rem; font-size: var(--t-micro); color: var(--faint); }
.strip-btn {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: .5rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--faint); color: var(--bezel);
  font-size: var(--t-small); font-weight: var(--w-med); text-decoration: none;
  transition: border-color var(--quick) var(--ease), background var(--quick) var(--ease);
}
.strip-btn:hover { border-color: var(--bezel); background: var(--visor); }

/* ═════════════════════════════════════════════════ the watch page ══════ */
/* Drawn, not screenshotted. A 16:9 plate, a red scrub bar, a title line and a
   sidebar is all the eye needs to read "video site" — and it keeps every one of
   YouTube's marks, and every creator's thumbnail, out of our hero. */

.watch {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  background: color-mix(in srgb, #0d1220 92%, transparent);
  backdrop-filter: blur(4px);
  border: 1px solid var(--rule); border-radius: 8px;
}

.player {
  position: relative; isolation: isolate;
  aspect-ratio: 16 / 9;
  background: #05070d;
  border-radius: 6px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.player::before {
  content: ""; position: absolute; inset: -12%; z-index: -1;
  /* already blurred to 30px, so it does not need a 76KB source */
  background: url(img/plate.jpg) center/cover;
  filter: blur(18px) brightness(.62) saturate(.85);
}
.player::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(75% 65% at 50% 42%, rgb(3 5 10 / 22%), rgb(3 5 10 / 88%));
}
/* the caption line, where a caption line actually sits */
.player-cc {
  margin: auto 0 0; padding: 0 7%;
  text-align: center; width: 100%;
  font-size: clamp(.75rem, 1.15vw, .9375rem); line-height: 1.6;
  color: #fff;
  text-shadow: 0 2px 8px rgb(0 0 0 / 95%);
  padding-bottom: 20px;
}
/* THE CITATION MARK — accent role 2, on the spoken title */
.player-cc .mark { position: relative; white-space: nowrap; }
.player-cc .mark::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1.5px; background: var(--red);
}
.player-cc .mark sup { color: var(--red); font-size: .72em; font-weight: 500; margin-left: .15em; }

.player-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: rgb(255 255 255 / 22%);
}
.player-played { display: block; height: 100%; width: 93%; background: var(--red); }
.player-clock {
  position: absolute; top: 9px; left: 11px; margin: 0;
  display: flex; align-items: center; gap: .4rem;
  font-size: var(--t-micro); letter-spacing: .06em;
  color: rgb(255 255 255 / 62%);
  font-variant-numeric: tabular-nums slashed-zero;
}
.player-clock .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--red); }

.watch-title {
  margin: 11px 0 5px;
  font-size: var(--t-small); font-weight: var(--w-med); letter-spacing: -.012em; color: var(--bezel);
}
.watch-chan {
  margin: 0; display: flex; align-items: center; gap: .45rem;
  font-size: var(--t-micro); color: var(--faint);
}
.chan-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--rule); }
.chan-sep { opacity: .5; }

.watch-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.panel-frame-hero { padding: 10px; background: var(--visor); }
.panel-frame-hero .mn-rail { gap: 10px; }
/* the neighbours in the sidebar, as blank plates — no third party's artwork */
.side-stub {
  height: 54px; border-radius: 5px;
  background: linear-gradient(90deg, var(--rule) 0 88px, transparent 88px);
  opacity: .5;
}
.side-stub::after {
  content: ""; display: block; margin: 8px 0 0 98px; height: 7px; width: 70%;
  background: var(--rule); border-radius: 2px;
}

@media (max-width: 900px) { .side-stub { display: none; } }


/* ══════════════════════════════════════════════════════ the taxonomy ═══ */
/* Segment widths are counts. Nothing here is drawn to look balanced — the bar is
   lopsided because the corpus is, and that lopsidedness is information. */

.taxo-block { padding-bottom: 2rem; }

.taxo-say {
  margin: 0 0 .9rem;
  font-size: clamp(.9375rem, 1.5vw, 1.125rem); color: var(--mute);
}
.taxo-say b {
  color: var(--bezel); font-weight: 700;
  font-variant-numeric: tabular-nums slashed-zero;
}

.taxo-bar {
  display: flex; gap: 2px;
  height: 40px; border-radius: 3px; overflow: hidden;
}
.taxo-seg {
  flex-basis: 0; min-width: 2px;
  opacity: .82;
  transition: opacity var(--quick) var(--ease), transform var(--quick) var(--ease);
}
.taxo-seg:hover { opacity: 1; }
.taxo-bar[data-lit] .taxo-seg { opacity: .18; }
.taxo-bar[data-lit="person"] .taxo-seg[data-kind="person"],
.taxo-bar[data-lit="concept"] .taxo-seg[data-kind="concept"],
.taxo-bar[data-lit="place"] .taxo-seg[data-kind="place"],
.taxo-bar[data-lit="media"] .taxo-seg[data-kind="media"],
.taxo-bar[data-lit="organisation"] .taxo-seg[data-kind="organisation"],
.taxo-bar[data-lit="book"] .taxo-seg[data-kind="book"],
.taxo-bar[data-lit="product"] .taxo-seg[data-kind="product"],
.taxo-bar[data-lit="supplement"] .taxo-seg[data-kind="supplement"],
.taxo-bar[data-lit="event"] .taxo-seg[data-kind="event"],
.taxo-bar[data-lit="recipe"] .taxo-seg[data-kind="recipe"],
.taxo-bar[data-lit="study"] .taxo-seg[data-kind="study"],
.taxo-bar[data-lit="music"] .taxo-seg[data-kind="music"] { opacity: 1; }

.taxo-key {
  display: flex; flex-wrap: wrap; gap: .35rem 1.15rem;
  margin: .85rem 0 0; padding: 0; list-style: none;
}
.taxo-key li { display: flex; align-items: center; gap: .4rem; cursor: default; }
.taxo-key i { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 8px; }
.taxo-l { font-size: var(--t-micro); color: var(--mute); }
.taxo-n {
  font-size: var(--t-micro); color: var(--faint);
  font-variant-numeric: tabular-nums slashed-zero;
}

@media (max-width: 560px) { .taxo-bar { height: 28px; } }

/* ═══════════════════════════════════════════════ index vs summary ══════ */
/* The argument is the layout: a paragraph on one side, addressable lines on the
   other. Both describe the same stretch of the same episode, which is the only way
   the comparison is fair. */

.versus {
  width: var(--shell); margin-inline: auto;
  padding: clamp(4rem, 10vh, 7rem) 0;
}
.versus-head { max-width: 40rem; }

.versus-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2.5rem, 6vh, 4rem);
  align-items: start;
}

.col { padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.col-us { border-top-color: var(--bezel); }

.col-label {
  margin: 0 0 1.1rem;
  font-size: var(--t-micro); font-weight: var(--w-med);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--faint);
}
.col-us .col-label { color: var(--bezel); }

/* the summary: deliberately set as one undifferentiated block, because that is
   exactly what is wrong with it */
.fake-summary {
  margin: 0 0 1.4rem; padding: 1.1rem 1.2rem;
  background: var(--visor); border-radius: 4px;
  font-size: var(--t-body); line-height: 1.62; color: var(--mute);
}

.col-index { margin: 0 0 1.4rem; padding: 0; list-style: none; }
.col-index li {
  display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) auto;
  gap: .8rem; align-items: baseline;
  padding: .5rem 0; border-bottom: 1px solid var(--rule);
}
.ix-t {
  font-size: var(--t-micro); color: var(--faint);
  font-variant-numeric: tabular-nums slashed-zero;
}
.ix-n { font-size: .875rem; font-weight: var(--w-med); letter-spacing: -.01em; color: var(--bezel); }
.ix-s { font-size: var(--t-micro); color: var(--mn-link, #8ab4f8); }
.col-index a { text-decoration: none; display: contents; }
.col-index a:hover .ix-n { text-decoration: underline; text-underline-offset: 2px; }

.col-notes { margin: 0; padding: 0; list-style: none; }
.col-notes li {
  position: relative; padding-left: 1.1rem; margin-bottom: .45rem;
  max-width: 46ch; font-size: var(--t-small); line-height: 1.5; color: var(--mute);
}
.col-notes li::before {
  content: "—"; position: absolute; left: 0; color: var(--faint);
}
.col-us .col-notes li::before { content: "+"; color: var(--red); }
.col-notes em { font-style: italic; color: var(--bezel); }

/* ── card names stopped being <h4>; keep the panel's own look on a <p> ── */
p.mn-name { margin: 0; }
.ix-more {
  display: block !important; padding: .6rem 0 0;
  font-size: var(--t-micro); color: var(--faint);
}

/* ── 4: the sidebar stubs overflowed and read as broken images ── */
.side-stub {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px;
  align-items: center; height: 54px;
  background: none; opacity: 1;
}
.side-stub::before {
  content: ""; height: 100%; border-radius: 4px; background: var(--rule); opacity: .55;
}
.side-stub::after {
  content: ""; margin: 0; height: 7px; width: 100%;
  background: var(--rule); border-radius: 2px; opacity: .55;
}


/* ── 55: tap targets ── */
.topnav a, .foot-nav a, .kind, .taxo-key li {
  min-height: 44px; display: inline-flex; align-items: center;
}
.kind { min-height: 40px; }

/* ── 5/61: the headline overflowed its own grid column.
   Scoped to min-width, because an unscoped rule appended after the mobile media
   queries wins the cascade and re-applies the two-column grid at 430px. That is what
   put 121px of horizontal overflow on the phone. ── */
@media (min-width: 901px) {
  .hero-say { max-width: none; }
  .hero-grid { grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); }
}

/* ── 59: 3px overflow at 1024 ── */
@media (max-width: 1100px) and (min-width: 901px) {
  .hero-grid { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
}

/* ── 12/13: the show row, tightened and squared to match everything else ── */
.strip { padding-top: clamp(1.5rem, 3.5vh, 2.5rem); }

/* ── 9: the scrub readout floated alone at the bottom of a tall column ── */
.scrub-left { justify-content: center; }

/* the close is now a still, so it needs its own painting */
.close-film {
  position: absolute; inset: 0; z-index: -2;
  background: url(media/helmet-poster.jpg) center/cover;
  opacity: .5;
}

/* ── 10/11: the fold had a column of dead space under the CTA, and the show row
      wrapped 3+2 into a ragged block ── */
.hero-grid { align-items: start; }
.hero-say { padding-top: clamp(1rem, 4vh, 3rem); }

/* ── 37: focus moved instantly while hover glided ── */
a, button { transition: outline-color var(--quick) var(--ease); }

/* ── 56: a keyboard user met 130 links before the footer ── */
.skip-wall {
  position: absolute; left: -9999px;
  font-size: var(--t-micro);
  background: var(--red-btn); color: #fff; padding: .5rem .9rem; border-radius: 3px;
  text-decoration: none; z-index: 20;
}
.skip-wall:focus { position: static; left: auto; display: inline-block; margin-bottom: 1rem; }

/* ═══════════════════════════════════════════════════════════ footer ════ */
/* The privacy section used to be a filled-in spec form in the middle of the page.
   It belongs here, next to the policy it summarises, where people go looking. */

.foot { border-top: 1px solid var(--rule); }
.foot-in {
  width: var(--shell); margin-inline: auto;
  padding: clamp(3rem, 7vh, 4.5rem) 0 clamp(2rem, 5vh, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
}

.foot-brand { max-width: 30ch; }
.foot-brand .brand { margin-bottom: 1rem; }
.foot-what {
  margin: 0 0 1.5rem;
  font-size: var(--t-small); line-height: 1.55; color: var(--mute);
}

.foot-col { display: flex; flex-direction: column; align-items: flex-start; }
.foot-h {
  margin: 0 0 1rem;
  font-size: var(--t-micro); font-weight: var(--w-med);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--faint);
}
.foot-col a {
  font-size: var(--t-small); color: var(--mute); text-decoration: none;
  padding: .35rem 0; min-height: 40px; display: flex; align-items: center;
  transition: color var(--quick) var(--ease);
}
.foot-col a:hover { color: var(--bezel); text-decoration: underline; text-underline-offset: 3px; }

.foot-rule {
  width: var(--shell); margin-inline: auto;
  padding: 1.6rem 0 3rem;
  border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: 1rem clamp(2rem, 4vw, 4rem);
}
.foot-legal, .foot-privacy {
  margin: 0; max-width: 58ch;
  font-size: var(--t-micro); line-height: 1.7; color: var(--faint);
}
.foot-privacy strong { color: var(--mute); font-weight: var(--w-med); }
.foot-privacy a { color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }
.foot-privacy a:hover { color: var(--bezel); }

@media (max-width: 860px) {
  .foot-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .foot-in { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

/* the live promotion, copied from extension/panel.css */
.mn-card.mn-live .mn-thumb { box-shadow: 0 0 0 2px var(--c-story); }
.mn-card.mn-live .mn-stamp { background: var(--c-story); }

/* ═══════════════════════════════════════════════════════ the three pains ══ */
/* The statement is the largest text on the page after the headline, and it has no
   section heading above it — the first pain is the heading. The gutter label says
   when this happens to you, which is a real axis here: during, at the moment, after.
   The example card is evidence and is sized like evidence. */

.uses {
  width: var(--shell); margin-inline: auto;
  padding: clamp(4rem, 11vh, 7rem) 0 clamp(3rem, 8vh, 5rem);
}

.pains { display: grid; gap: 0; margin-top: clamp(1.5rem, 4vh, 2.5rem); }

.pain {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr) 132px;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
  padding: clamp(2.2rem, 5vh, 3.4rem) 0;
  border-top: 1px solid var(--rule);
}
.pain:last-child { border-bottom: 1px solid var(--rule); }

.pain-when {
  margin: .4rem 0 0;
  font-size: var(--t-micro); font-weight: var(--w-med);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--faint);
}

/* NOT ch: the unit resolves against this div's 16px, not the headline's 40px, so
   26ch capped the statement at ~208px and wrapped it six times. */
.pain-say { max-width: 34rem; }
.pain-h {
  margin: 0;
  font-size: var(--t-d2); font-weight: var(--w-bold); line-height: 1.08;
  font-variation-settings: "wdth" 104;
  letter-spacing: var(--tr-d2);
  color: var(--bezel); text-wrap: balance;
}
.pain-then {
  margin: 1.1rem 0 0; max-width: 46ch;
  font-size: var(--t-body); line-height: 1.55; color: var(--mute);
}

/* evidence, not illustration: small, quiet, and it stops being quiet on hover */
.pain-ex { margin: .4rem 0 0; }
.pain-ex-a {
  position: relative; display: block;
  border-radius: 6px; overflow: hidden;
  filter: saturate(.72); opacity: .78;
  transition: opacity var(--quick) var(--ease), filter var(--quick) var(--ease);
}
.pain-ex-a:hover { opacity: 1; filter: none; }
.pain-ex img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.pain-ex-t {
  position: absolute; right: 4px; bottom: 4px;
  padding: 2px 6px; border-radius: 3px;
  background: rgb(0 0 0 / 82%); color: #fff;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums slashed-zero;
}
.pain-ex figcaption {
  margin-top: .5rem;
  font-size: var(--t-micro); line-height: 1.35; color: var(--faint);
}

@media (max-width: 900px) {
  .pain { grid-template-columns: minmax(0, 1fr) 104px; gap: 1.2rem 1.5rem; }
  .pain-when { grid-column: 1 / -1; margin: 0; }
  .pain-say { max-width: none; }
}
@media (max-width: 560px) {
  .pain { grid-template-columns: minmax(0, 1fr); }
  .pain-ex { display: none; }
}

/* ── the grid stops at five rows and says so, rather than running on ── */
.wall-grid.is-capped {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 96px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 96px), transparent);
}
.wall-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem;
  margin-top: 1.4rem;
}
.wall-more {
  font: inherit; font-size: var(--t-small); font-weight: var(--w-med);
  cursor: pointer; padding: .65rem 1.3rem;
  background: transparent; color: var(--bezel);
  border: 1px solid var(--faint); border-radius: 999px;
  min-height: 44px;
  transition: border-color var(--quick) var(--ease), background var(--quick) var(--ease);
}
.wall-more:hover { border-color: var(--bezel); background: var(--visor); }
.wall-note { margin: 0; }

/* ══════════════════════════════════ the label + data registers, one family ══ */
/* What monospace was doing, done with case, tracking and figures instead. */

.eyebrow, .col-label, .foot-h, .pain-when, .specs dt, .register caption,
.register th, .doc h3, .tile-k, 
/* anything that is a measurement lines up and reads unambiguously */
.stage-clock, .player-clock, .readout-time, .readout-count b, .mn-stamp, .mn-bar-count,
.mn-chip b, .register .num, .tile-t, .pain-ex-t, .ix-t, .taxo-n, .taxo-say b,
.show-txt > span, .step-t, .doc-updated, .wall-note {
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: .01em;
}

/* the caption over the player is a caption track, and those are set in a UI sans */
.player-cc { font-family: var(--ui); letter-spacing: 0; }

/* ═══════════════════════════════════════════════════ the show row ══════ */
/* Artwork first, at a size where you recognise it from across the room, with the name
   under it — the shape every podcast app uses, because it is the one that works. The
   episode counts are gone: nobody chooses a show by how many of it we have indexed. */

.shows::-webkit-scrollbar { display: none; }

.show-art {
  display: block; width: 100%; aspect-ratio: 1 / 1;
  border-radius: 14px; overflow: hidden;
  background: var(--visor);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%);
  transition: transform var(--quick) var(--ease), box-shadow var(--quick) var(--ease);
}
.shows li:hover .show-art {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 16%);
}
.show-art img { width: 100%; height: 100%; object-fit: cover; }
.show-art-empty {
  display: grid; place-items: center;
  font-size: 2rem; font-weight: var(--w-bold); color: var(--faint);
}

.show-name {
  display: block; margin-top: .7rem;
  font-size: var(--t-small); font-weight: var(--w-bold); line-height: 1.25;
  letter-spacing: -.012em; color: var(--bezel); text-wrap: balance;
}


/* On a phone the shows are a carousel you swipe, and nothing more.
 *
 * **Not clickable, deliberately.** On a desktop a channel opens YouTube in a new tab
 * and the reader still has the page. On a phone there are no tabs: a tap leaves for
 * YouTube and the visit is over, on the one section whose job is to answer "does this
 * work on what I watch". The artwork answers that by being recognisable; it does not
 * need to be a destination.
 *
 * `pointer-events` is the CSS half and responds to a rotation on its own. The tab order
 * and the announced role are the other half — a link that cannot be followed but is
 * still reachable by keyboard and still called a link is worse than either — and
 * page.js keeps those in step with the same media query. */

/* ══════════════════════════════════════════ the channels, drifting ═══════ */
/*
 * One row that scrolls itself, for ever. The list is thirty covers and the question it
 * answers is "is my show in here" — a grid makes that a reading task, a drift makes it
 * a glance. It is also the honest shape for the claim: this is a catalogue that grows,
 * not a fixed set of four rows.
 *
 * The loop is seamless because page.js appends a second identical set and the track
 * travels exactly -50%. At the moment it snaps back, the copy under the viewport is
 * pixel-identical to the original, so there is no seam to see.
 *
 * Duration scales with the number of shows (`--marquee-s`, set in page.js) rather than
 * being a fixed number of seconds, or adding a show would speed the whole thing up.
 */
.shows-wrap {
  position: relative;
  /* Edge to edge, then faded at both ends — a marquee that stops at the text margin
     reads as a list that overflowed rather than something continuous. */
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.shows {
  display: flex; flex-wrap: nowrap;
  gap: clamp(.9rem, 1.6vw, 1.4rem);
  margin: 0; padding: .25rem 0 .5rem; list-style: none;
  width: max-content;
  animation: shows-drift var(--marquee-s, 60s) linear infinite;
}
/* Hovering stops it, so a cover that caught your eye can be read. */
.shows-wrap:hover .shows { animation-play-state: paused; }

.shows li {
  flex: 0 0 auto; width: clamp(104px, 11vw, 140px);
  display: block; padding: 0; border: 0; background: none; border-radius: 0;
}

@keyframes shows-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Motion is the whole device here, so switching it off has to leave something that
   still works rather than a frozen row with twenty-eight covers off-screen. Without
   animation it becomes what it was before: a strip you scroll yourself. */
@media (prefers-reduced-motion: reduce) {
  .shows { animation: none; width: auto; overflow-x: auto; scroll-snap-type: x proximity; }
  .shows li { scroll-snap-align: start; }
  .shows-wrap { overflow: visible; }
  .shows-dup { display: none; }
}


/* **The artwork is not a link, on any screen.**
 *
 * It was one, opening YouTube in a new tab. That is a reasonable thing for a channel
 * name to do and the wrong thing for this section to do: it is the answer to "does this
 * work on what I watch", and the best outcome of reading it is that the reader carries
 * on down the page and installs the extension. A grid of exits is not that.
 *
 * `pointer-events` is only the visible half. page.js drops the href, the target and the
 * tab stop, so it is not announced as a link either — a link that cannot be followed is
 * worse than no link. */
.show-a { pointer-events: none; cursor: default; }
.shows li:hover .show-art {
  transform: none;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%);
}

/* ══════════════════════════════════════════════════════════ the sky ════ */
/* Four-pointed, because that is the glint on the visor — the same shape, surfacing
   and fading rather than drifting. Nothing here loops or twinkles: a thing appears,
   it is legible for a moment, it goes. */

.sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

/* The shape lives on a pseudo-element: clip-path on .star clipped its own label,
   which is why the named references were invisible. */
.star {
  position: absolute;
  width: calc(14px * var(--s, 1)); height: calc(14px * var(--s, 1));
  opacity: 0;
  animation: surface var(--d, 7s) var(--ease) forwards;
}
.star::before {
  content: ""; position: absolute; inset: 0;
  background: #fff;
  clip-path: polygon(50% 0%, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0% 50%, 43% 43%);
}
@keyframes surface {
  0%   { opacity: 0; transform: scale(.4); }
  18%  { opacity: .9; transform: scale(1); }
  62%  { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(.85); }
}

/* the named ones carry a real reference, set small beside the glint */
.star-named i {
  position: absolute; left: calc(100% + 10px); top: 50%;
  transform: translateY(-50%);
  font-style: normal; white-space: nowrap;
  font-size: var(--t-small); font-weight: var(--w-med);
  letter-spacing: -.005em; color: rgb(255 255 255 / 94%);
  text-shadow: 0 1px 10px rgb(0 0 0 / 95%), 0 0 24px rgb(0 0 0 / 70%);
}
/* on the right-hand side the label reads inward, or it runs off the page */
.star-left i { left: auto; right: calc(100% + 10px); }
.star-named { filter: drop-shadow(0 0 8px rgb(255 255 255 / 35%)); }

.close-h { max-width: 20ch; }
.close .eyebrow { color: rgb(255 255 255 / 52%); }
.close .eyebrow::before { background: rgb(255 255 255 / 52%); }

/* the second destination on a tile: the record itself */
.wall-grid li { display: flex; flex-direction: column; }
.tile-a { flex: 1 1 auto; }
.tile-src {
  display: flex; align-items: baseline; gap: .3rem;
  margin-top: .45rem; padding: .3rem 0;
  font-size: var(--t-micro); color: var(--mn-link, #8ab4f8); text-decoration: none;
  transition: color var(--quick) var(--ease);
}
.tile-src:hover { text-decoration: underline; text-underline-offset: 2px; }
.tile-src-arrow { font-size: .625rem; }

/* ═══════════════════════════════════════════════ the embedded episode ═══ */
/* Click to load. The facade is the episode's own poster with a play control over it,
   and it says out loud what pressing it costs — the same promise the privacy section
   makes, kept at the one place on the page where a third party would otherwise be
   loaded without asking. */

.player-start {
  position: absolute; inset: 0; z-index: 3;
  display: block; width: 100%; height: 100%; padding: 0;
  border: 0; background: none; cursor: pointer;
}
.player-start img { width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.player-start::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 50% 50%, rgb(3 5 10 / 30%), rgb(3 5 10 / 72%));
}
.player-go {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 1;
  width: 62px; height: 44px; border-radius: 10px;
  background: var(--red-btn);
  display: grid; place-items: center;
  transition: transform var(--quick) var(--ease), background var(--quick) var(--ease);
}
.player-start:hover .player-go { transform: translate(-50%, -50%) scale(1.06); background: var(--red); }
.player-tri {
  width: 0; height: 0; margin-left: 3px;
  border-left: 15px solid #fff;
  border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
.player-load {
  position: absolute; left: 0; right: 0; bottom: 12px; z-index: 1;
  text-align: center;
  font-size: var(--t-micro); color: rgb(255 255 255 / 60%);
  text-shadow: 0 1px 6px rgb(0 0 0 / 90%);
}

.player-frame { position: absolute; inset: 0; z-index: 2; }
.player-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* once it is live the facade and our own scrub bar step aside — the player has its own */
.player.is-live .player-start { display: none; }
.player.is-live .player-cc { z-index: 4; pointer-events: none; }
.player.is-live .player-bar,
.player.is-live .player-clock { display: none; }

/* ══════════════════════════ the panel, under the player ══════════════════ */
/* Beside the video the player was squeezed to 376px — smaller than the panel next to
   it, which inverts what the page is about. Under it, the video gets the full stage
   and the panel reads as a strip, which is how the extension renders inline anyway. */

.watch-under { display: grid; gap: 10px; min-width: 0; }
.watch-under .panel-frame-hero { padding: 12px; }
.watch-under .side-stub { display: none; }

/* the rail can breathe now, so more of the episode is legible at once */
.watch-under .mn-rail { gap: 12px; }

/* ══════════════════════════════════════════════════ the scale block ════ */

.scale {
  width: var(--shell); margin-inline: auto;
  padding: clamp(3.5rem, 9vh, 6rem) 0;
  border-top: 1px solid var(--rule);
}
.scale .taxo-block { padding-bottom: 0; }

/* ── the rail has to be clipped, or it never scrolls ──
   A grid/flex child defaults to min-width:auto, so .mn-rail-clip grew to fit all 58
   cards instead of clipping them. That pushed the panel past the frame AND made
   clientWidth ~8700px, so the driver computed a scroll span of zero and the rail
   never followed the playhead. Every link in the chain needs min-width: 0. */
.watch, .watch-main, .watch-under { min-width: 0; }
.watch-under > .panel-frame, .panel-frame-hero { min-width: 0; overflow: hidden; }
.mn-panel { min-width: 0; }
.mn-rail-clip { min-width: 0; max-width: 100%; }

/* YouTube burns in its own captions; ours would print a second copy over them */
.player.is-live .player-cc { display: none; }

/* the seek control, copied from extension/panel.css */
.mn-card-jump {
  position: relative; display: block; width: 100%; padding: 0; border: none;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.mn-card-jump:hover .mn-name { text-decoration: underline; text-underline-offset: 2px; }
.mn-card-jump:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 4px; }

/* ── the filter, copied from extension/panel.css ──
   Non-matching cards are removed from the rail, but their dots only dim: the shape of
   the episode stays readable while the list narrows. That is the extension's own
   behaviour and the reason the track is worth having. */
.mn-panel[data-filter]:not([data-filter="all"]) .mn-card { display: none; }
.mn-panel[data-filter="person"] .mn-card[data-cat="person"],
.mn-panel[data-filter="book"] .mn-card[data-cat="book"],
.mn-panel[data-filter="concept"] .mn-card[data-cat="concept"],
.mn-panel[data-filter="media"] .mn-card[data-cat="media"],
.mn-panel[data-filter="place"] .mn-card[data-cat="place"],
.mn-panel[data-filter="organisation"] .mn-card[data-cat="organisation"],
.mn-panel[data-filter="product"] .mn-card[data-cat="product"],
.mn-panel[data-filter="study"] .mn-card[data-cat="study"],
.mn-panel[data-filter="recipe"] .mn-card[data-cat="recipe"],
.mn-panel[data-filter="supplement"] .mn-card[data-cat="supplement"],
.mn-panel[data-filter="music"] .mn-card[data-cat="music"],
.mn-panel[data-filter="event"] .mn-card[data-cat="event"] { display: flex; }

.mn-panel[data-filter]:not([data-filter="all"]) .mn-dot { opacity: .17; }
.mn-panel[data-filter="person"] .mn-dot[data-cat="person"],
.mn-panel[data-filter="book"] .mn-dot[data-cat="book"],
.mn-panel[data-filter="concept"] .mn-dot[data-cat="concept"],
.mn-panel[data-filter="media"] .mn-dot[data-cat="media"],
.mn-panel[data-filter="place"] .mn-dot[data-cat="place"],
.mn-panel[data-filter="organisation"] .mn-dot[data-cat="organisation"],
.mn-panel[data-filter="product"] .mn-dot[data-cat="product"],
.mn-panel[data-filter="study"] .mn-dot[data-cat="study"],
.mn-panel[data-filter="recipe"] .mn-dot[data-cat="recipe"],
.mn-panel[data-filter="supplement"] .mn-dot[data-cat="supplement"],
.mn-panel[data-filter="music"] .mn-dot[data-cat="music"],
.mn-panel[data-filter="event"] .mn-dot[data-cat="event"] { opacity: 1; }

.mn-chip { cursor: pointer; }
.mn-chip:hover { color: var(--mn-ink); border-color: var(--mn-faint); }
.mn-chip.is-active { color: var(--mn-ink); border-color: var(--mn-ink); }
.mn-chip-count { color: var(--mn-faint); font-variant-numeric: tabular-nums; }
.mn-chip.is-active .mn-chip-count { color: var(--mn-ink); }

/* ═════════════════════════════════════════ the episode as a graph ══════ */

.graph-wrap { width: 100%; }
#graph {
  width: 100%; height: clamp(260px, 42vh, 440px);
  display: block;
  background: var(--visor);
  border: 1px solid var(--rule); border-radius: 6px;
}

/* the heading and the readout share a row above a full-width graph; the graph was
   getting 665px of a 1240 shell when it sat in a column beside them */
.graph-top {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem clamp(2rem, 4vw, 4rem);
}
.graph-top .scrub-head { max-width: 34rem; }
.graph-read { min-width: 0; text-align: right; }
.graph-count { justify-content: flex-end; }
.graph-time {
  margin: 0;
  font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: var(--w-reg);
  line-height: 1; letter-spacing: -.03em; color: var(--bezel);
  font-variant-numeric: tabular-nums slashed-zero;
}
.graph-count { display: flex; align-items: baseline; gap: .55rem; margin: .8rem 0 0; }
.graph-count b {
  font-size: 1.6rem; font-weight: var(--w-med); color: var(--red);
  font-variant-numeric: tabular-nums slashed-zero;
}
.graph-count span {
  font-size: var(--t-micro); font-weight: var(--w-med);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--faint);
}
.graph-now {
  margin: 1.2rem 0 0; min-height: 2.6em;
  font-size: var(--t-body); font-weight: var(--w-med); line-height: 1.35;
  color: var(--mute);
}

@media (max-width: 900px) {
  .graph-wrap { width: 100%; }
  .graph-read { display: flex; align-items: baseline; gap: 1.4rem; flex-wrap: wrap; }
  .graph-count { margin: 0; }
  .graph-now { margin: 0; min-height: 0; flex-basis: 100%; }
}

/* ── the kind pills, flashing as the playhead crosses one of theirs ── */
.graph-kinds {
  display: flex; flex-wrap: wrap; gap: .4rem .5rem;
  margin: 0; padding: 0; list-style: none;
}
.gk {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem; border-radius: 999px;
  border: 1px solid var(--rule); background: transparent;
  transition: border-color .5s var(--ease), background .5s var(--ease);
}
.gk i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gk);
  transition: box-shadow .5s var(--ease), transform .5s var(--ease);
}
.gk-l { font-size: var(--t-micro); color: var(--mute); }
.gk-n {
  font-size: var(--t-micro); color: var(--faint);
  font-variant-numeric: tabular-nums slashed-zero;
}
.gk.is-lit {
  border-color: var(--gk);
  background: color-mix(in srgb, var(--gk) 14%, transparent);
  animation: gkflash 1.4s var(--ease);
}
.gk.is-lit i { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gk) 30%, transparent); }
.gk.is-lit .gk-l { color: var(--bezel); }
@keyframes gkflash {
  0%   { border-color: var(--gk); background: color-mix(in srgb, var(--gk) 34%, transparent); }
  100% { border-color: var(--rule); background: transparent; }
}

.graph-wrap { position: relative; }

@media (prefers-reduced-motion: reduce) { .gk.is-lit { animation: none; } }

/* the section subhead, one step under d2 */
.d3 {
  margin: 0;
  font-size: var(--t-d3); font-weight: var(--w-bold); line-height: 1.18;
  letter-spacing: var(--tr-d2); color: var(--bezel); text-wrap: balance;
}

.foot-meta {
  grid-column: 1 / -1; order: -1;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  margin: 0 0 .4rem;
  font-size: var(--t-micro); color: var(--faint);
}

/* ── the catalogue row: indexed shows lead and carry a count; queued ones sit back ── */
.show-a { display: block; text-decoration: none; }
.show-art { position: relative; }
.show-badge {
  position: absolute; right: 5px; bottom: 5px;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--red-btn); color: #fff;
  font-size: 11px; font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgb(0 0 0 / 45%);
}
.shows li.is-queued .show-art { opacity: .46; filter: saturate(.7); }
.shows li.is-queued .show-name { color: var(--mute); font-weight: var(--w-med); }
.shows li.is-queued:hover .show-art { opacity: .8; filter: none; }