/* ==== tokens/fonts.css ==== */
/* Söhne — Klim Type Foundry. Licensed faces self-hosted (uploaded by owner).
   Cuts used by the system: Buch 400 · Kräftig 500 · Halbfett 600 · Dreiviertelfett 700 (+ Buch Kursiv).
   OTFs from the design system are repackaged as WOFF2 for the web (same outlines, ~6x smaller). */
@font-face { font-family: "Söhne"; font-weight: 400; font-style: normal; font-display: swap; src: local("Söhne Buch"), local("Soehne-Buch"), url("/assets/fonts/soehne-buch.woff2") format("woff2"); }
@font-face { font-family: "Söhne"; font-weight: 400; font-style: italic; font-display: swap; src: local("Söhne Buch Kursiv"), local("Soehne-BuchKursiv"), url("/assets/fonts/soehne-buch-kursiv.woff2") format("woff2"); }
@font-face { font-family: "Söhne"; font-weight: 500; font-style: normal; font-display: swap; src: local("Söhne Kräftig"), local("Soehne-Kraftig"), url("/assets/fonts/soehne-kraftig.woff2") format("woff2"); }
@font-face { font-family: "Söhne"; font-weight: 600; font-style: normal; font-display: swap; src: local("Söhne Halbfett"), local("Soehne-Halbfett"), url("/assets/fonts/soehne-halbfett.woff2") format("woff2"); }
@font-face { font-family: "Söhne"; font-weight: 700; font-style: normal; font-display: swap; src: local("Söhne Dreiviertelfett"), local("Soehne-Dreiviertelfett"), url("/assets/fonts/soehne-dreiviertelfett.woff2") format("woff2"); }

/* ==== tokens/colors.css ==== */
:root {
  /* base palette (verbatim from app/globals.css) */
  --ink: #111310;
  --ink-2: #343630;      /* rules + hatching on ink surfaces */
  --ink-3: #3d4039;      /* speaker labels */
  --paper: #fdfbf7;
  --paper-2: #f5f1e8;
  --paper-dim: #b9bbb3;  /* secondary text on ink */
  --acid: #c9ff18;       /* the signature accent */
  --muted: #6d6f66;
  --line: #a6a89f;
  --white: #ffffff;

  /* semantic aliases — components reference these; themes override --accent */
  --accent: var(--acid);
  --accent-on-ink: var(--accent);   /* legible accent for ink surfaces; dark themes override */
  --accent-halo: color-mix(in oklab, var(--accent) 42%, var(--surface-page));
  --surface-page: var(--paper);
  --surface-sunken: var(--paper-2);
  --surface-inverse: var(--ink);
  --surface-focus: var(--white);      /* searchbox :focus-within */
  --text-primary: var(--ink);
  --text-muted: var(--muted);
  --text-on-inverse: var(--paper);
  --text-on-inverse-muted: var(--paper-dim);
  --text-on-inverse-accent: var(--accent-on-ink);
  --text-on-accent: var(--ink);
  --text-speaker: var(--ink-3);
  --edge-strong: var(--ink);
  --edge-divider: var(--line);
  --edge-on-inverse: var(--ink-2);
}

/* ==== tokens/typography.css ==== */
:root {
  /* families — one grotesque for everything (no monospace) */
  --font-sans: "Söhne";
  --font-display: var(--font-sans), "Helvetica Neue", Helvetica, Arial, sans-serif;   /* headlines, numerals, prose */
  --font-ui: var(--font-sans), "Helvetica Neue", Helvetica, Arial, sans-serif;        /* body default: labels, meta, controls */
  --font-original: system-ui, sans-serif;         /* verbatim source lines */

  /* weights (Söhne static cuts: Buch 400 · Kräftig 500 · Halbfett 600 · Dreiviertelfett 700) */
  --weight-numeral: 400;   /* Buch */
  --weight-display: 500;   /* Kräftig */
  --weight-hero: 700;      /* Dreiviertelfett */   /* latest-episode headline */
  --weight-heading: 500;
  --weight-strong: 600;   /* Halbfett */

  /* sizes */
  --text-numeral: clamp(100px, 15vw, 220px);   /* record number panel */
  --text-numeral-sm: clamp(100px, 12vw, 190px);/* feature index panel */
  --text-display: clamp(50px, 7vw, 112px);     /* record page h1 */
  --text-headline: clamp(44px, 5.4vw, 88px);   /* feature h1 */
  --text-panel: 64px;                          /* pending-panel h2 */
  --text-title: 46px;                          /* method h2 */
  --text-section: 30px;                        /* archive-head h2 */
  --text-row-number: 24px;
  --text-row-title: 20px;
  --text-transcript: 19px;
  --text-identity: 17px;
  --text-prose: 16px;
  --text-original: 14px;
  --text-index: 12px;
  --text-ui: 11px;
  --text-label: 10px;
  --text-micro: 9px;

  /* letter-spacing */
  --track-numeral: -.12em;      /* record panel uses -.13em */
  --track-display: -.07em;
  --track-headline: -.065em;
  --track-hero: -.06em;
  --track-title: -.055em;
  --track-tight: -.05em;
  --track-heading: -.04em;
  --track-row: -.035em;
  --track-identity: -.03em;
  --track-caps: .02em;
  --track-micro: .08em;
  --track-label: .1em;
  --track-index: .12em;
  --track-kicker: .16em;

  /* line-height */
  --leading-numeral: .72;
  --leading-numeral-sm: .75;
  --leading-display: .89;
  --leading-headline: .91;
  --leading-panel: .93;
  --leading-heading: .96;
  --leading-row: 1.08;
  --leading-identity: 1.05;
  --leading-transcript: 1.48;
  --leading-prose: 1.5;
}

/* ==== tokens/spacing.css ==== */
:root {
  /* raw scale — recurring values observed in the source (exact, not grid-snapped) */
  --sp-7: 7px; --sp-8: 8px; --sp-10: 10px; --sp-12: 12px; --sp-16: 16px;
  --sp-18: 18px; --sp-22: 22px; --sp-24: 24px; --sp-26: 26px; --sp-28: 28px;
  --sp-32: 32px; --sp-34: 34px; --sp-40: 40px; --sp-42: 42px; --sp-54: 54px;
  --sp-70: 70px; --sp-120: 120px;

  /* layout constants */
  --masthead-h: 86px;
  --record-header-h: 58px;
  --rail-w: 270px;
  --content-max: 1720px;
  --pad-cell: 12px;      /* row/list inner padding */
  --pad-panel: 28px;     /* ink number panels, rail-ish blocks */
  --pad-page: 32px;      /* .content page gutter */
  --pad-record: 54px;    /* record title/main */
  --stack-archive: 70px; /* gap above archive section */
  --stack-method: 120px; /* method section vertical padding */

  /* control heights */
  --h-action: 50px;      /* primary action */
  --h-source: 46px;      /* source/outline button */
  --h-search: 45px;
  --h-year: 42px;
  --h-row: 98px;         /* episode row min-height */
}

/* ==== tokens/borders.css ==== */
:root {
  /* rules — the system's only ornament. 1px everywhere; 2px under section heads. */
  --rule-strong: 1px solid var(--edge-strong);
  --rule-divider: 1px solid var(--edge-divider);
  --rule-inverse: 1px solid var(--edge-on-inverse);
  --rule-head: 2px solid var(--edge-strong);

  /* radii — square by default; circles only for signals + the ringmark blob */
  --radius-0: 0;
  --radius-full: 50%;
  --radius-blob: 48% 52% 46% 54%;

  /* the one shadow: hard offset on lifted actions (no blur, ever) */
  --shadow-lift: 3px 3px 0 var(--edge-strong);
  --inset-focus: inset 4px 0 0 var(--accent);
}

/* ==== tokens/motion.css ==== */
:root {
  --speed-fast: 120ms; /* @kind other */   /* hover flood fills */
  --speed-base: 140ms; /* @kind other */   /* action lift (press collapse: 100ms) */
  --ease: ease; /* @kind other */
  --lift: translate(-3px, -3px); /* @kind other */
}

/* ==== tokens/themes.css ==== */
/* Accent theming — intentional addition (the brand direction asks for color theming).
   Scope any subtree: <body data-theme="pool">. Everything derived from --accent
   (halo, hovers, focus inset) follows automatically. Default is acid. */
/* Derived accent aliases must RE-COMPUTE inside a theme scope — custom
   properties inherit computed values, so the :root-level derivations would
   stay frozen to acid. Any [data-theme] element re-derives them from its
   own --accent. */
[data-theme] {
  --accent-halo: color-mix(in oklab, var(--accent) 42%, var(--surface-page));
  --accent-on-ink: var(--accent);
  --text-on-inverse-accent: var(--accent-on-ink);
  --inset-focus: inset 4px 0 0 var(--accent);
}
[data-theme="acid"] { --accent: #c9ff18; }
[data-theme="tangerine"] { --accent: #ffa424; }
[data-theme="pool"] { --accent: #3fe3e3; }
[data-theme="orchid"] { --accent: #d0a6ff; }
/* Dark accent: fills flip text to paper via --text-on-accent; on ink surfaces
   (numerals, stat bands) the accent lightens via --accent-on-ink for legibility. */
[data-theme="pine"] { --accent: #086552; --text-on-accent: var(--paper); --accent-on-ink: color-mix(in oklab, var(--accent) 50%, var(--white)); }

/* ==== tokens/schemes.css ==== */
/* Color schemes — light is the base palette in colors.css; dark re-points the
   semantic surfaces, text, and edges (components never change). Three modes:
   System (no data-scheme attribute — the media query decides), or an explicit
   data-scheme="light|dark" pinned on <html> by the toggle.
   The dark block appears twice because custom properties can't be shared
   between a media query and an attribute selector — keep both copies in sync. */
:root { color-scheme: light; }

:root[data-scheme="dark"] {
  color-scheme: dark;
  --surface-page: var(--ink);
  --surface-sunken: #191b16;
  --surface-inverse: #060705;
  --surface-focus: #20231d;
  --text-primary: var(--paper);
  --text-muted: #9a9c92;
  --text-speaker: #c9cbc2;
  --edge-strong: var(--paper);
  --edge-divider: #43463e;
  --edge-on-inverse: #2b2d27;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) {
    color-scheme: dark;
    --surface-page: var(--ink);
    --surface-sunken: #191b16;
    --surface-inverse: #060705;
    --surface-focus: #20231d;
    --text-primary: var(--paper);
    --text-muted: #9a9c92;
    --text-speaker: #c9cbc2;
    --edge-strong: var(--paper);
    --edge-divider: #43463e;
    --edge-on-inverse: #2b2d27;
  }
}

/* ==== css/base.css ==== */
/* Element defaults — verbatim from app/globals.css */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--surface-page); color: var(--text-primary); font-family: var(--font-ui); font-variant-numeric: tabular-nums; text-rendering: geometricPrecision; }
::selection { background: var(--accent); color: var(--text-on-accent); }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
button, input { font: inherit; }
button { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}

/* ==== css/ui.css ==== */
/* Component classes — copied from app/globals.css, values exact; colors routed
   through semantic tokens so [data-theme] scopes retheme everything. */

/* masthead */
.masthead { position: sticky; top: 0; z-index: 20; height: var(--masthead-h); display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 32px; padding: 0 34px; background: var(--surface-inverse); color: var(--text-on-inverse); border-bottom: var(--rule-inverse); }
.identity { display: flex; align-items: center; gap: 16px; font-family: var(--font-display); font-size: var(--text-identity); font-weight: var(--weight-strong); line-height: var(--leading-identity); letter-spacing: var(--track-identity); }
.ringmark { position: relative; width: 46px; height: 46px; flex: 0 0 auto; border: 1px solid var(--text-on-inverse); border-radius: var(--radius-blob); transform: rotate(-8deg); }
.ringmark i { position: absolute; border: 1px solid var(--text-on-inverse); border-radius: 50%; inset: 5px; }
.ringmark i:nth-child(2) { inset: 10px; }
.ringmark i:nth-child(3) { inset: 15px; }
.ringmark i:nth-child(4) { inset: 20px; background: var(--accent); border: 0; }
.ringmark.on-paper, .ringmark.on-paper i { border-color: var(--edge-strong); }
.ringmark.on-paper i:nth-child(4) { border: 0; }
.masthead nav { display: flex; height: 100%; }
.masthead nav a { display: grid; place-items: center; min-width: 96px; padding: 0 18px; border-left: var(--rule-inverse); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; transition: background-color var(--speed-fast) var(--ease), color var(--speed-fast) var(--ease), transform 100ms ease-out; }
.masthead nav a:hover, .masthead nav a:focus-visible { background: var(--accent); color: var(--text-on-accent); }

/* scheme toggle — System / Light / Dark, drawn with the system's 1px rules.
   Both placements (masthead, record header) sit on inverse surfaces. */
.scheme-toggle { display: inline-flex; border: var(--rule-inverse); }
.scheme-toggle button { padding: 7px 10px; border: 0; background: transparent; cursor: pointer; font-size: 9px; text-transform: uppercase; letter-spacing: var(--track-micro); transition: background-color var(--speed-fast) var(--ease), color var(--speed-fast) var(--ease); }
.scheme-toggle button + button { border-left: var(--rule-inverse); }
.scheme-toggle button:hover, .scheme-toggle button[aria-pressed="true"] { background: var(--accent); color: var(--text-on-accent); }
.record-tools { justify-self: end; display: flex; align-items: center; gap: 20px; }

/* shell + rail */
.shell { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); max-width: var(--content-max); margin: 0 auto; }
.rail { position: sticky; top: var(--masthead-h); height: calc(100vh - var(--masthead-h)); padding: 32px 24px 24px; border-right: var(--rule-divider); background: var(--surface-page); }
.rail-heading, .archive-head, footer.colophon { display: flex; justify-content: space-between; align-items: baseline; }
.rail-heading { padding-bottom: 18px; font-size: 12px; letter-spacing: var(--track-micro); }
.searchbox { height: var(--h-search); display: flex; align-items: center; gap: 10px; padding: 0 12px; margin-bottom: 26px; border: var(--rule-strong); background: transparent; }
.searchbox input, .mobile-search input { width: 100%; border: 0; outline: 0; background: transparent; font-size: 11px; }
.searchbox:focus-within { background: var(--surface-focus); box-shadow: var(--inset-focus); }
.year { width: 100%; min-height: var(--h-year); display: flex; justify-content: space-between; align-items: center; padding: 0 10px; border: 0; border-top: var(--rule-divider); background: transparent; cursor: pointer; font-size: 11px; transition: background-color var(--speed-fast) var(--ease), color var(--speed-fast) var(--ease), transform 100ms ease-out; }
.year:last-child { border-bottom: var(--rule-divider); }
.year:hover { background: var(--accent); color: var(--text-on-accent); }
.year.active { background: var(--surface-focus); box-shadow: var(--inset-focus); }
.rail-note { position: absolute; bottom: 24px; left: 24px; }
.rail-note, .signal-note { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 9px; text-transform: uppercase; letter-spacing: var(--track-label); }
.signal { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
.signal.live { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-halo); position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .signal.live::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: var(--accent-halo); z-index: -1; animation: signal-breathe 2.4s var(--ease) infinite alternate; }
  @keyframes signal-breathe { from { transform: scale(1); opacity: .9; } to { transform: scale(1.35); opacity: .4; } }
}

/* content + feature */
.content { min-width: 0; padding: var(--pad-page); }
.feature { min-height: 570px; display: grid; grid-template-columns: minmax(250px, .82fr) 1.6fr; border: var(--rule-strong); }
.feature-index { position: relative; min-height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: var(--pad-panel); overflow: hidden; background: var(--surface-inverse); color: var(--text-on-inverse-accent); }
.feature-index::after { content: ""; position: absolute; inset: 19% -28% auto 34%; height: 1px; background: var(--edge-on-inverse); box-shadow: 0 22px var(--edge-on-inverse), 0 44px var(--edge-on-inverse), 0 66px var(--edge-on-inverse), 0 88px var(--edge-on-inverse); transform: rotate(-23deg); }
.feature-index p, .feature-index span { position: relative; z-index: 1; margin: 0; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; }
.feature-index strong { position: relative; z-index: 1; font-size: var(--text-numeral-sm); font-weight: var(--weight-numeral); line-height: var(--leading-numeral-sm); letter-spacing: var(--track-numeral); transform: translateX(-.08em) scaleY(1.08); transform-origin: left center; }
.feature-copy { display: flex; flex-direction: column; padding: 40px 42px 34px; background: var(--surface-page); }
.kicker { margin: 0 0 44px; color: var(--text-muted); font-size: 9px; text-transform: uppercase; letter-spacing: var(--track-kicker); }
.feature h1 { max-width: 900px; margin: 0; font-family: var(--font-display); font-size: var(--text-headline); font-weight: var(--weight-hero); line-height: var(--leading-headline); letter-spacing: var(--track-headline); }
.original { max-width: 760px; margin: 22px 0 0; color: var(--text-muted); font-size: 15px; line-height: 1.5; }
.feature-meta { display: flex; flex-wrap: wrap; gap: 12px 26px; padding: 19px 0; margin-top: auto; border-top: var(--rule-strong); font-size: 10px; text-transform: uppercase; }
.feature-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.primary-action { min-height: var(--h-action); display: inline-flex; align-items: center; justify-content: space-between; gap: 40px; padding: 0 16px; background: var(--accent); color: var(--text-on-accent); border: var(--rule-strong); cursor: pointer; font-size: 10px; text-transform: uppercase; letter-spacing: var(--track-micro); transition: transform var(--speed-base) var(--ease), box-shadow var(--speed-base) var(--ease); }
.primary-action:hover { transform: var(--lift); box-shadow: var(--shadow-lift); }
.primary-action:active { transform: translate(0, 0); box-shadow: none; transition-duration: 100ms; }
.queue-status { color: var(--text-muted); font-size: 9px; text-transform: uppercase; letter-spacing: var(--track-micro); }

/* archive list */
.archive { padding-top: var(--stack-archive); }
.archive-head { padding-bottom: 14px; border-bottom: var(--rule-head); }
.archive-head h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-section); font-weight: var(--weight-strong); letter-spacing: var(--track-heading); }
.archive-head p { margin: 0; color: var(--text-muted); font-size: 9px; text-transform: uppercase; letter-spacing: var(--track-micro); }
.mobile-search { display: none; }
.episode-row { min-height: var(--h-row); display: grid; grid-template-columns: 88px minmax(0, 1fr) 78px 30px; align-items: center; border-bottom: var(--rule-divider); transition: background var(--speed-fast) var(--ease); }
.episode-row:hover, .episode-row:focus-visible { background: var(--accent); color: var(--text-on-accent); outline: 0; }
.episode-number { font-size: var(--text-row-number); letter-spacing: -.08em; }
.episode-title { min-width: 0; display: grid; gap: 7px; padding-right: 32px; }
.episode-title strong { font-family: var(--font-display); font-size: var(--text-row-title); font-weight: var(--weight-strong); line-height: var(--leading-row); letter-spacing: var(--track-row); }
.episode-title small { overflow: hidden; color: var(--text-muted); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.episode-date, .episode-duration { color: var(--text-muted); font-size: 9px; text-transform: uppercase; }
.episode-arrow { text-align: right; font-size: 16px; }
.empty { padding: 40px 0; color: var(--text-muted); font-size: 12px; }

/* method + footer */
.method { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 36px; padding: var(--stack-method) 0; margin-top: var(--stack-archive); border-top: var(--rule-strong); }
.method > p { margin: 0; font-size: 9px; letter-spacing: var(--track-label); }
.method h2 { max-width: 500px; margin: 0; font-family: var(--font-display); font-size: var(--text-title); font-weight: var(--weight-heading); line-height: var(--leading-heading); letter-spacing: var(--track-title); }
.method div { max-width: 560px; font-family: var(--font-display); font-size: var(--text-prose); line-height: var(--leading-prose); }
.method div p:first-child { margin-top: 0; }
footer.colophon { min-height: 80px; padding-top: 18px; border-top: var(--rule-strong); color: var(--text-muted); font-size: 9px; text-transform: uppercase; letter-spacing: var(--track-micro); }
footer.colophon a:hover { color: var(--text-primary); }

/* record page */
.record-page { min-height: 100vh; }
.record-header { height: var(--record-header-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 28px; background: var(--surface-inverse); color: var(--text-on-inverse); border-bottom: var(--rule-inverse); font-size: 9px; text-transform: uppercase; letter-spacing: var(--track-label); }
.record-header a:last-child { justify-self: end; }
.record-header a:hover { color: var(--text-on-inverse-accent); }
.record-hero { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 480px; border-bottom: var(--rule-strong); }
.record-number { display: flex; flex-direction: column; justify-content: space-between; padding: 28px 24px; background: var(--surface-inverse); color: var(--text-on-inverse-accent); overflow: hidden; }
.record-number span { font-size: 9px; letter-spacing: var(--track-index); }
.record-number strong { font-size: var(--text-numeral); font-weight: var(--weight-numeral); line-height: var(--leading-numeral); letter-spacing: -.13em; transform: translateX(-.08em); }
.record-title { display: flex; flex-direction: column; justify-content: center; padding: var(--pad-record); }
.record-title > p:first-child { margin: 0 0 34px; color: var(--text-muted); font-size: 9px; text-transform: uppercase; letter-spacing: var(--track-label); }
.record-title h1 { max-width: 1100px; margin: 0; font-family: var(--font-display); font-size: var(--text-display); font-weight: var(--weight-display); line-height: var(--leading-display); letter-spacing: var(--track-display); }
.record-body { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); }
.record-meta { min-height: calc(100vh - var(--record-header-h)); padding: 30px 24px; border-right: var(--rule-divider); }
.record-meta dl { margin: 0 0 40px; }
.meta-list { margin: 0; }
.record-meta dl div, .meta-list div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: var(--rule-divider); font-size: 9px; text-transform: uppercase; }
.record-meta dl div:last-child, .meta-list div:last-child { border-bottom: var(--rule-divider); }
.record-meta dt, .meta-list dt { color: var(--text-muted); }
.record-meta dd, .meta-list dd { margin: 0; text-align: right; }
.record-meta audio { width: 100%; height: 38px; margin-bottom: 16px; }
.source-button { min-height: var(--h-source); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px; border: var(--rule-strong); background: transparent; cursor: pointer; font-size: 9px; text-transform: uppercase; transition: background-color var(--speed-fast) var(--ease), color var(--speed-fast) var(--ease), transform 100ms ease-out; }
.source-button:hover { background: var(--accent); color: var(--text-on-accent); }
.record-main { min-width: 0; padding: var(--pad-record); }

/* pending + transcript */
.pending-panel { max-width: 900px; }
.pending-panel > p:first-child { margin: 0 0 52px; color: var(--text-muted); font-size: 9px; letter-spacing: var(--track-index); }
.pending-panel h2 { max-width: 680px; margin: 0 0 70px; font-family: var(--font-display); font-size: var(--text-panel); font-weight: var(--weight-hero); line-height: var(--leading-panel); letter-spacing: var(--track-hero); }
.pending-panel ol, .step-list { margin: 0; padding: 0; list-style: none; border-top: var(--rule-strong); }
.pending-panel li, .step-list li { min-height: 58px; display: grid; grid-template-columns: 60px 1fr; align-items: center; border-bottom: var(--rule-divider); font-size: 11px; text-transform: uppercase; }
.pending-panel li span, .step-list li span { color: var(--text-muted); }
.pending-note { margin-top: 28px; color: var(--text-muted); font-size: 10px; }
.transcript-controls { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 18px; border-bottom: var(--rule-head); }
.transcript-controls h2 { margin: 0; font-family: var(--font-display); font-size: 44px; font-weight: var(--weight-heading); letter-spacing: var(--track-tight); }
.transcript-controls button, .control-button { padding: 10px 12px; border: var(--rule-strong); background: transparent; cursor: pointer; font-size: 9px; text-transform: uppercase; transition: background-color var(--speed-fast) var(--ease), color var(--speed-fast) var(--ease), transform 100ms ease-out; }
.transcript-controls button:hover, .control-button:hover { background: var(--accent); color: var(--text-on-accent); }
.masthead nav a:active, .year:active, .source-button:active, .transcript-controls button:active, .control-button:active { transform: translate(1px, 1px); }
.segment { display: grid; grid-template-columns: 68px 120px minmax(0, 1fr); gap: 24px; padding: 28px 0; border-bottom: var(--rule-divider); }
.timecode { color: var(--text-muted); font-size: 10px; }
.segment > strong { color: var(--text-speaker); font-size: 10px; text-transform: uppercase; }
.segment p { max-width: 780px; margin: 0; font-family: var(--font-display); font-size: var(--text-transcript); line-height: var(--leading-transcript); }
.segment .segment-original { margin-top: 14px; color: var(--text-muted); font-family: var(--font-original); font-size: 14px; transition: opacity 180ms ease-out, transform 180ms ease-out; }
@supports (transition-behavior: allow-discrete) {
  .segment .segment-original { @starting-style { opacity: 0; transform: translateY(-2px); } }
}

/* responsive (verbatim breakpoints) */
@media (max-width: 1100px) {
  .masthead { grid-template-columns: 1fr auto auto; padding: 0 22px; }
  .shell { grid-template-columns: 220px minmax(0, 1fr); }
  .feature { grid-template-columns: .7fr 1.5fr; }
  .feature-copy { padding: 32px; }
  .episode-row { grid-template-columns: 72px minmax(0, 1fr) 30px; }
  .episode-duration { display: none; }
}
@media (max-width: 760px) {
  .masthead { position: relative; height: 72px; grid-template-columns: 1fr auto auto; padding: 0 16px; gap: 12px; }
  .scheme-toggle button { padding: 6px 6px; }
  .identity { font-size: 14px; }
  .ringmark { width: 36px; height: 36px; }
  .masthead nav a { min-width: 62px; padding: 0 9px; }
  .shell { display: block; }
  .rail { display: none; }
  .content { padding: 16px; }
  .feature { min-height: 0; display: block; }
  .feature-index { min-height: 220px; }
  .feature-index strong { font-size: 110px; }
  .feature-copy { padding: 26px 20px 20px; }
  .kicker { margin-bottom: 26px; }
  .feature h1 { font-size: clamp(42px, 13vw, 64px); }
  .feature-meta { margin-top: 50px; }
  .feature-actions { align-items: stretch; flex-direction: column; }
  .primary-action { width: 100%; }
  .archive { padding-top: 58px; }
  .archive-head p { display: none; }
  .mobile-search { height: 46px; display: flex; align-items: center; margin: 16px 0 8px; padding: 0 12px; border: var(--rule-strong); }
  .episode-row { grid-template-columns: 56px minmax(0, 1fr) 24px; min-height: 112px; }
  .episode-mark strong { font-size: 18px; }
  .episode-title { padding-right: 12px; }
  .episode-title strong { font-size: 17px; }
  .episode-date, .episode-duration { display: none; }
  .method { display: block; padding: 72px 0; }
  .method h2 { margin: 30px 0; font-size: 42px; }
  footer.colophon { align-items: flex-start; flex-direction: column; gap: 12px; }
  .record-header { grid-template-columns: 1fr auto; padding: 0 16px; }
  .record-header > span { display: none; }
  .record-hero { display: block; }
  .record-number { min-height: 210px; }
  .record-number strong { font-size: 110px; }
  .record-title { padding: 34px 18px 44px; }
  .record-title h1 { font-size: clamp(46px, 14vw, 70px); }
  .record-body { display: block; }
  .record-meta { min-height: 0; border-right: 0; border-bottom: var(--rule-divider); }
  .record-main { padding: 52px 18px; }
  .pending-panel h2 { margin-bottom: 46px; font-size: 46px; }
  .segment { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
  .segment > strong { grid-column: 2; grid-row: 1; }
  .segment > div { grid-column: 2; }
}

/* ==== css/site.css ==== */
/* Archive page-level extensions.
   Everything derives from the design system's tokens; no new colors, no new
   type sizes outside the token scale, 1px rules only, radius 0. */

/* ---- rail: extra facets (sort, source, length, topics) must scroll ---- */
.rail { display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
.rail-note { position: static; margin-top: auto; padding-top: 18px; }
.searchbox { margin-bottom: 18px; }
.clear-filters { width: 100%; min-height: 34px; margin: 0 0 18px; padding: 0 10px; border: var(--rule-strong); background: transparent; cursor: pointer; font-size: 9px; text-transform: uppercase; letter-spacing: var(--track-micro); transition: background-color var(--speed-fast) var(--ease), color var(--speed-fast) var(--ease); }
.clear-filters:hover:not(:disabled) { background: var(--accent); color: var(--text-on-accent); }
.clear-filters:disabled { opacity: .4; cursor: default; }
.facet-group { margin: 0 0 18px; }
.facet-group h3 { margin: 0 0 6px; color: var(--text-muted); font-size: 9px; font-weight: var(--weight-strong); letter-spacing: var(--track-label); text-transform: uppercase; }
.facet { width: 100%; min-height: 34px; display: flex; justify-content: space-between; align-items: center; padding: 0 10px; border: 0; border-top: var(--rule-divider); background: transparent; cursor: pointer; font-size: 11px; transition: background-color var(--speed-fast) var(--ease), color var(--speed-fast) var(--ease), transform 100ms ease-out; }
.facet:last-child { border-bottom: var(--rule-divider); }
.facet:hover { background: var(--accent); color: var(--text-on-accent); }
.facet.active { background: var(--surface-focus); box-shadow: var(--inset-focus); }
.facet:active { transform: translate(1px, 1px); }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; gap: 8px; padding: 7px 8px; border: var(--rule-divider); background: transparent; cursor: pointer; font-size: 9px; text-transform: uppercase; letter-spacing: var(--track-micro); }
.tag:hover { background: var(--accent); color: var(--text-on-accent); }
.tag.active { background: var(--surface-focus); box-shadow: var(--inset-focus); }

/* ---- archive rows: publication date is the cross-podcast marker ---- */
.episode-mark { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.episode-mark small { font-size: 9px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--text-muted); }
.episode-mark strong { font-size: var(--text-row-number); font-weight: var(--weight-numeral); letter-spacing: -.08em; }
.episode-row { min-height: 118px; }
.episode-kicker { font-size: 9px; text-transform: uppercase; letter-spacing: var(--track-micro); color: var(--text-muted); }
.episode-row:hover .episode-kicker,
.episode-row:hover .episode-title small,
.episode-row:hover .episode-mark small,
.episode-row:focus-visible .episode-kicker,
.episode-row:focus-visible .episode-title small,
.episode-row:focus-visible .episode-mark small { color: inherit; }

/* filtered-out rows: the ui.css display:grid on .episode-row beats the
   user-agent [hidden] rule, so the filter needs an explicit override */
.episode-row[hidden] { display: none; }

.mobile-filters { display: none; }

/* ---- method cells: the edition's processing register ---- */
.method-cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--edge-divider); border: var(--rule-divider); }
.method-cell { padding: var(--pad-panel) var(--sp-22); background: var(--surface-page); }
.method-cell h3 { margin: 0 0 18px; font-size: var(--text-label); font-weight: var(--weight-strong); letter-spacing: var(--track-label); text-transform: uppercase; }
.method-cell strong { display: block; margin: 0 0 10px; font-family: var(--font-display); font-size: var(--text-row-title); font-weight: var(--weight-strong); letter-spacing: var(--track-row); }
.method-cell p { margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
@media (max-width: 1100px) { .method-cells { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .method-cells { grid-template-columns: 1fr; } }

/* ---- record page: abstract leads, prose follows ---- */
.chapter-abstract { max-width: 780px; padding-bottom: 40px; }
.chapter-abstract .abstract-text { margin: 0; color: var(--text-muted); font-family: var(--font-display); font-size: var(--text-prose); line-height: var(--leading-prose); }

/* prose edition — reading column in Söhne, mirrors .segment p */
.prose-chapter { padding-top: 28px; }
.prose-chapter p { max-width: 780px; margin: 0 0 24px; font-family: var(--font-display); font-size: var(--text-transcript); line-height: var(--leading-transcript); }
.prose-chapter h2 { max-width: 780px; margin: 64px 0 26px; padding-bottom: 12px; border-bottom: var(--rule-strong); font-family: var(--font-display); font-size: var(--text-section); font-weight: var(--weight-strong); line-height: var(--leading-heading); letter-spacing: var(--track-heading); }
.prose-chapter h3 { max-width: 780px; margin: 44px 0 20px; font-family: var(--font-display); font-size: var(--text-row-title); font-weight: var(--weight-strong); letter-spacing: var(--track-row); }
.prose-chapter blockquote { max-width: 780px; margin: 32px 0; padding: 0 0 0 22px; border-left: var(--rule-strong); }
.prose-chapter blockquote p { color: var(--text-muted); font-style: italic; }
.prose-chapter ol, .prose-chapter ul { max-width: 780px; margin: 0 0 24px; padding-left: 26px; font-family: var(--font-display); font-size: var(--text-transcript); line-height: var(--leading-transcript); }
.prose-chapter li { margin-bottom: 8px; }
.prose-chapter a { border-bottom: var(--rule-strong); }
.prose-chapter a:hover { background: var(--accent); color: var(--text-on-accent); }

/* source note — provenance colophon under the prose */
.chapter-source { margin-top: var(--stack-archive); padding-top: 18px; border-top: var(--rule-strong); color: var(--text-muted); font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--track-micro); line-height: 2; }
.chapter-source a:hover { color: var(--text-primary); }

/* prev / next chapter cells */
.chapter-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 28px; background: var(--edge-strong); border: var(--rule-strong); }
.chapter-nav a, .chapter-nav .chapter-nav-empty { min-height: 98px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 18px; background: var(--surface-page); transition: background-color var(--speed-fast) var(--ease), color var(--speed-fast) var(--ease); }
.chapter-nav a:hover { background: var(--accent); color: var(--text-on-accent); }
.chapter-nav span { font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--text-muted); }
.chapter-nav a:hover span { color: inherit; }
.chapter-nav strong { font-family: var(--font-display); font-size: var(--text-index); font-weight: var(--weight-strong); line-height: var(--leading-row); letter-spacing: var(--track-row); }
.chapter-nav .next { text-align: right; align-items: flex-end; }
@media (max-width: 760px) { .chapter-nav { grid-template-columns: 1fr; } }

/* source-language lines follow the provenance rule: system-ui, muted */
.original[lang], .episode-title small[lang], .record-title .original[lang] { font-family: var(--font-original); }

/* the record hero numeral: special records set a letter-prefixed ordinal */
.record-number strong.is-word,
.record-number strong.is-date,
.feature-index strong.is-date { font-size: var(--text-numeral-sm); letter-spacing: -.08em; }

/* speaker metadata on the record rail */
.speaker-bio { margin: 0 0 28px; color: var(--text-muted); font-size: 11px; line-height: 1.5; text-transform: none; letter-spacing: 0; }
.speaker-bio strong { display: block; margin: 0 0 6px; color: var(--text-primary); font-size: 9px; text-transform: uppercase; letter-spacing: var(--track-label); }
.record-meta dd { overflow-wrap: anywhere; }

/* 404 */
.not-found { padding: var(--pad-record); }

@media (max-width: 760px) {
  .episode-row { min-height: 128px; }
  .mobile-filters { display: grid; gap: 10px; margin: 0 0 18px; }
  .mobile-filters .clear-filters { margin: 0; min-height: 42px; }
  .mobile-filters label { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border: var(--rule-strong); font-size: 9px; text-transform: uppercase; letter-spacing: var(--track-micro); }
  .mobile-filters select { max-width: 60%; border: 0; outline: 0; background: transparent; font-size: 11px; text-align: right; }
  .feature-index strong.is-date,
  .record-number strong.is-date { font-size: 72px; }
}