/* ============================================================
   The Director's & Actor's Craft — podcast brief
   Visual system: a director's prompt book (egzemplarz reżyserski)
   set in the two inks of a Polish theatre poster.
   ============================================================ */

:root {
  /* Inks */
  --ink:        #1a1436;   /* darkened auditorium */
  --ink-2:      #2b2154;   /* lifted panel on dark */
  --ink-3:      #413a66;   /* rules on dark */
  --paper:      #edebe3;   /* cool oat reading ground */
  --leaf:       #f7f6f1;   /* the prompt-book page */
  --scarlet:    #c9283e;   /* poster ink 1 */
  --scarlet-d:  #a01e30;
  --ochre:      #d99a1f;   /* poster ink 2 / stage gel */
  --ochre-d:    #8a5d0f;   /* darkened for AA on paper and leaf */
  --slate:      #5c5872;   /* muted text */
  --hairline:   #cfccc0;
  --hairline-2: #dcd9cf;

  /* Type */
  --sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: 'Spectral', Georgia, 'Times New Roman', serif;

  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-s:    0.875rem;
  --t-base: 1rem;
  --t-md:   1.125rem;
  --t-lg:   1.375rem;
  --t-xl:   1.75rem;
  --t-2xl:  2.25rem;

  /* Metrics */
  --rail-w: 15rem;
  --gutter: 3.25rem;      /* hanging episode-number column */
  --measure: 38rem;       /* ~72ch of Spectral */
  --topbar-h: 3.5rem;

  --pad-x: clamp(1rem, 4vw, 2.75rem);
}

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

html {
  font-size: 17px;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + 1.5rem);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-base);
  line-height: 1.68;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; }
[hidden] { display: none !important; }

a { color: inherit; }

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

.skip {
  position: fixed;
  top: 0; left: 0;
  z-index: 100;
  transform: translateY(-120%);
  background: var(--scarlet);
  color: #fff;
  font-family: var(--sans);
  font-size: var(--t-s);
  font-weight: 600;
  padding: 0.7rem 1.1rem;
  text-decoration: none;
}
.skip:focus { transform: translateY(0); }

/* ── Top bar ───────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid var(--ink-3);
  padding-top: env(safe-area-inset-top, 0px);
}
.topbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--topbar-h);
  padding: 0 var(--pad-x);
}
.topbar__series {
  text-decoration: none;
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}
.topbar__name {
  font-family: var(--sans);
  font-variation-settings: 'wdth' 112;
  font-weight: 700;
  font-size: var(--t-s);
  letter-spacing: 0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__sub {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 400;
  color: #a9a2c4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__right {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: none;
}

.lang {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--ink-3);
  padding: 0.22rem;
}
.lang__label {
  font-family: var(--sans);
  font-size: var(--t-xs);
  color: #a9a2c4;
  padding: 0 0.45rem 0 0.35rem;
}
.lang__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: #cfc9e4;
  font-family: var(--sans);
  font-variation-settings: 'wdth' 100;
  font-size: var(--t-sm);
  font-weight: 600;
  padding: 0.34rem 0.7rem;
  cursor: pointer;
  transition: color .15s, background-color .15s;
}
.lang__btn:hover { color: #fff; }
.lang__btn[aria-pressed="true"] {
  background: var(--ochre);
  color: var(--ink);
}
.lang__short { display: none; }

.railtoggle {
  display: none;
  align-items: center;
  gap: 0.45rem;
  appearance: none;
  background: transparent;
  border: 1px solid var(--ink-3);
  color: var(--paper);
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 600;
  padding: 0.42rem 0.7rem;
  cursor: pointer;
}
.railtoggle svg {
  width: 14px; height: 14px;
  stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; fill: none;
}

/* ── Stage (hero) ──────────────────────────────────────── */

.stage {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  padding: clamp(3rem, 9vw, 6.5rem) var(--pad-x) clamp(2rem, 5vw, 3.25rem);
}
.stage__light {
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 150%;
  background:
    radial-gradient(46% 44% at 38% 42%, rgba(230,178,66,.34) 0%, rgba(217,154,31,.12) 46%, transparent 74%),
    radial-gradient(70% 50% at 38% 34%, rgba(201,40,62,.13) 0%, transparent 68%);
  pointer-events: none;
  opacity: 0;
  animation: houselights 1500ms cubic-bezier(.22,.61,.36,1) 180ms forwards;
}
@media (prefers-reduced-motion: reduce) {
  .stage__light { opacity: 1; animation: none; }
}
@keyframes houselights {
  from { opacity: 0; transform: translateY(-2.5rem) scale(.9); }
  to   { opacity: 1; transform: none; }
}
.stage__in {
  position: relative;
  max-width: 62rem;
  margin: 0 auto;
}
.stage__standfirst {
  margin: 0 0 1.1rem;
  font-family: var(--sans);
  font-size: var(--t-s);
  font-weight: 500;
  color: var(--ochre);
}
.stage__title {
  margin: 0;
  font-family: var(--sans);
  font-variation-settings: 'wdth' 118;
  font-weight: 800;
  font-size: clamp(2.2rem, 7.2vw, 5rem);
  line-height: 0.96;
  letter-spacing: -0.022em;
  max-width: 14ch;
}
.stage__sub {
  margin: 1.15rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  color: #d6cfe8;
}

/* ── Curtain ───────────────────────────────────────────
   Drawn at first paint and parted once a session. The `overture` class is set
   on <html> by the gate in index.html, so a visitor who has already seen it
   never renders these panels at all. */

.curtain { display: none; }
.overture .curtain {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;              /* over .stage__light and .stage__in, which follow it */
  overflow: hidden;
  pointer-events: none;
}
.curtain__panel {
  position: absolute;
  top: -2%;
  bottom: -2%;
  width: 51%;              /* the overlap hides the seam at the meeting edge */
  background:
    repeating-linear-gradient(90deg,
      rgba(0, 0, 0, .34) 0, rgba(0, 0, 0, 0) 13px,
      rgba(255, 255, 255, .06) 25px, rgba(0, 0, 0, 0) 37px,
      rgba(0, 0, 0, .34) 50px),
    linear-gradient(90deg, var(--scarlet-d), var(--scarlet) 44%, var(--scarlet-d));
  will-change: transform;
}
.curtain__panel--l { left: 0; box-shadow: 6px 0 22px rgba(0, 0, 0, .45); }
.curtain__panel--r { right: 0; box-shadow: -6px 0 22px rgba(0, 0, 0, .45); }

/* A beat of held curtain, then it parts and the house light rises behind it. */
.overture .curtain__panel--l { animation: curtain-l 1400ms cubic-bezier(.32, .06, .24, 1) 260ms forwards; }
.overture .curtain__panel--r { animation: curtain-r 1400ms cubic-bezier(.32, .06, .24, 1) 260ms forwards; }
.overture .stage__light { animation-delay: 1150ms; }

@keyframes curtain-l { to { transform: translateX(-102%); } }
@keyframes curtain-r { to { transform: translateX(102%); } }

@media (prefers-reduced-motion: reduce) {
  .overture .curtain { display: none; }
  .overture .stage__light { animation: none; opacity: 1; }
}

/* ── Overture (intro themes) ───────────────────────────
   One line in the hero. Silent until asked, and it scrolls away with the hero
   rather than following the reader down the page. */

.ov {
  position: relative;
  z-index: 1;
  margin: clamp(1.35rem, 3vw, 1.9rem) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  font-family: var(--sans);
  font-size: var(--t-sm);
  color: #b9b1d2;
}
.ov__label {
  color: var(--ochre);
  font-weight: 500;
  letter-spacing: .015em;
}
.ov__controls {
  display: flex;
  align-items: center;
  gap: .3rem;
}
.ov__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border: 1px solid var(--ink-3);
  border-radius: 50%;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.ov__btn:hover { background: var(--ink-2); border-color: var(--slate); }
.ov__btn svg { width: .8rem; height: .8rem; fill: currentColor; }
.ov__btn--play {
  background: var(--scarlet);
  border-color: var(--scarlet);
  color: #fff;
}
.ov__btn--play:hover { background: var(--scarlet-d); border-color: var(--scarlet-d); }

.ov__now {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-s);
  color: var(--paper);
}
.ov__pos {
  font-variant-numeric: tabular-nums;
  font-size: var(--t-xs);
  color: #8e87ab;
}
.ov__vol-l { display: inline-flex; align-items: center; }
.ov__vol {
  width: 5.25rem;
  accent-color: var(--ochre);
  cursor: pointer;
}
.ov__names { font-style: italic; font-family: var(--serif); color: var(--paper); }

/* Control names stay readable to assistive tech; the glyph carries them on screen. */
.ov__sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 30rem) {
  .ov__label { flex-basis: 100%; }
  .ov__vol { width: 4rem; }
  /* Touch targets, where the pointer is a thumb. */
  .ov__btn { width: 2.6rem; height: 2.6rem; }
}

/* Running order — tick height encodes episode runtime */

.ro { margin-top: clamp(2.25rem, 5vw, 3.5rem); }
.ro__strands {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: flex-end;
}
.ro__note {
  margin: 1.1rem 0 0;
  font-family: var(--sans);
  font-size: var(--t-sm);
  color: #a9a2c4;
}
.ro__group {
  display: grid;
  gap: 0.6rem;
  min-width: 0;
}
.ro__ticks {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 72px;
}
.ro__tick {
  position: relative;
  display: block;
  width: 9px;
  background: var(--strand);
  opacity: .62;
  text-decoration: none;
  transition: opacity .15s, transform .15s;
  transform-origin: bottom;
}
.ro__tick:hover,
.ro__tick:focus-visible { opacity: 1; transform: scaleX(1.5); }
.ro__tick span {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.ro__meta {
  display: grid;
  gap: 0.1rem;
  border-top: 2px solid var(--strand);
  padding-top: 0.5rem;
}
.ro__name {
  font-family: var(--sans);
  font-variation-settings: 'wdth' 105;
  font-size: var(--t-sm);
  font-weight: 700;
}
.ro__count {
  font-family: var(--sans);
  font-size: var(--t-xs);
  color: #a9a2c4;
  font-variant-numeric: tabular-nums;
}

/* ── Shell ─────────────────────────────────────────────── */

.shell {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: 78rem;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) var(--pad-x) 4rem;
  align-items: start;
}

/* ── Rail ──────────────────────────────────────────────── */

.rail {
  position: sticky;
  top: calc(var(--topbar-h) + 1.25rem);
  max-height: calc(100vh - var(--topbar-h) - 2.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  font-family: var(--sans);
  font-size: var(--t-sm);
  padding-right: 0.5rem;
}
.rail__group + .rail__group { margin-top: 1.5rem; }
.rail__head {
  display: block;
  font-weight: 700;
  font-variation-settings: 'wdth' 108;
  font-size: var(--t-s);
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 0.45rem;
  border-bottom: 2px solid var(--strand, var(--ink));
  margin-bottom: 0.5rem;
}
.rail__head:hover { color: var(--scarlet); }
.rail__link {
  display: block;
  color: var(--slate);
  text-decoration: none;
  padding: 0.3rem 0 0.3rem 0.75rem;
  border-left: 2px solid var(--hairline);
  line-height: 1.35;
}
.rail__link:hover { color: var(--ink); border-left-color: var(--slate); }
.rail__link.is-current {
  color: var(--ink);
  font-weight: 600;
  border-left-color: var(--strand, var(--ink));
}

/* Episode list, one step deeper than its section. */
.rail__subs {
  margin: 0.1rem 0 0.35rem;
  border-left: 2px solid var(--hairline);
}
.rail__sub {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  gap: 0.4rem;
  align-items: baseline;
  color: var(--slate);
  text-decoration: none;
  font-size: var(--t-xs);
  line-height: 1.32;
  padding: 0.24rem 0 0.24rem 1rem;
  margin-left: -2px;
  border-left: 2px solid transparent;
}
.rail__sub:hover { color: var(--ink); border-left-color: var(--slate); }
.rail__sub.is-current {
  color: var(--ink);
  font-weight: 600;
  border-left-color: var(--strand, var(--ink));
}
.rail__n {
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--strand, var(--slate));
  font-weight: 700;
}

/* ── Main / parts ──────────────────────────────────────── */

.main { min-width: 0; }

.part { margin-bottom: clamp(3.5rem, 8vw, 6rem); }
.part__head {
  border-top: 3px solid var(--strand);
  padding-top: 1.1rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.part__eyebrow {
  margin: 0;
  font-family: var(--sans);
  font-variation-settings: 'wdth' 106;
  font-weight: 700;
  font-size: var(--t-s);
  color: var(--strand);
}
.part__title {
  margin: 0.3rem 0 0;
  font-family: var(--sans);
  font-variation-settings: 'wdth' 112;
  font-weight: 700;
  font-size: clamp(1.6rem, 3.6vw, 2.35rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  max-width: 22ch;
}
.part__meta {
  margin: 0.75rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-md);
  color: var(--slate);
  max-width: var(--measure);
}
.part__range {
  display: inline-block;
  margin-top: 0.85rem;
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--strand-tint);
  padding: 0.25rem 0.6rem;
}

.sect { margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.sect__title {
  margin: 0 0 1.35rem;
  font-family: var(--sans);
  font-variation-settings: 'wdth' 104;
  font-weight: 700;
  font-size: var(--t-xl);
  line-height: 1.15;
  letter-spacing: -0.012em;
  max-width: 26ch;
}

/* ── Prose ─────────────────────────────────────────────── */

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.1rem; }
.prose p { margin: 0; }
.prose .prose__h {
  margin: 2.15rem 0 0;
  font-family: var(--sans);
  font-variation-settings: 'wdth' 102;
  font-weight: 700;
  font-size: var(--t-md);
  line-height: 1.3;
  color: var(--ink);
}
.prose .prose__h::before {
  content: "";
  display: block;
  width: 2.25rem;
  border-top: 2px solid var(--strand);
  margin-bottom: 0.7rem;
}
.prose ul, .prose ol { margin: 0; padding-left: 1.35rem; }
.prose li + li { margin-top: 0.6rem; }
.prose ol { counter-reset: n; list-style: none; padding-left: 2.1rem; }
.prose ol > li { counter-increment: n; position: relative; }
.prose ol > li::before {
  content: counter(n);
  position: absolute;
  left: -2.1rem;
  top: 0.1em;
  width: 1.5rem;
  text-align: right;
  font-family: var(--sans);
  font-size: var(--t-s);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--strand);
}
.prose ul { list-style: none; padding-left: 1.4rem; }
.prose ul > li { position: relative; }
.prose ul > li::before {
  content: "";
  position: absolute;
  left: -1.15rem;
  top: 0.68em;
  width: 6px; height: 6px;
  background: var(--strand);
}

.deflist { margin: 0; }
.deflist > div { padding: 0.85rem 0; border-top: 1px solid var(--hairline-2); }
.deflist > div:first-child { border-top: 0; padding-top: 0; }
.deflist dt {
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--t-s);
  color: var(--ink);
  margin-bottom: 0.25rem;
}
.deflist dd { margin: 0; color: #35304f; }

/* ── Tables ────────────────────────────────────────────── */

.tablewrap {
  overflow-x: auto;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--hairline);
  max-width: 100%;
}
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: var(--t-s);
}
thead th {
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--t-xs);
  text-align: left;
  padding: 0.7rem 1rem 0.7rem 0;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  vertical-align: bottom;
}
tbody td, tbody th {
  padding: 0.85rem 1rem 0.85rem 0;
  vertical-align: top;
  border-bottom: 1px solid var(--hairline-2);
  line-height: 1.5;
  text-align: left;
}
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody th[scope="row"] {
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--t-sm);
  white-space: nowrap;
  color: var(--strand);
  font-variant-numeric: tabular-nums;
  width: 6.5rem;
}
th:last-child, td:last-child { padding-right: 0; }

/* Column proportions: label, subject, keywords (, context) */
table col.c-label   { width: 6.5rem; }
table col.c-mid     { width: 26%; }
table col.c-wide    { width: auto; }

/* ── Keywords ──────────────────────────────────────────── */

.kw {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1.5;
  color: #4a4166;
  background: var(--leaf);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--ochre);
  padding: 0.1rem 0.45rem;
  margin: 0 0.28rem 0.32rem 0;
  border-radius: 2px;
}

/* ── Structure arcs ────────────────────────────────────── */

.arcs {
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--strand);
  background: var(--leaf);
  padding: clamp(1.1rem, 3vw, 1.9rem);
  max-width: 46rem;
}
.arcs .arcs__title {
  margin: 0 0 1.5rem;
  font-family: var(--sans);
  font-variation-settings: 'wdth' 104;
  font-weight: 700;
  font-size: var(--t-md);
  line-height: 1.25;
}
.arcs .arcs__arc + .arcs__arc { margin-top: 1.75rem; }
.arcs .arcs__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.85rem;
  margin: 0 0 0.55rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--t-s);
  color: var(--ink);
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--hairline);
}
.arcs .arcs__count {
  font-weight: 500;
  font-size: var(--t-xs);
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}
.arcs .arcs__list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.1rem;
  border-left: 2px solid var(--strand-tint);
}
.arcs .arcs__list > li {
  position: relative;
  margin: 0;
  padding: 0.42rem 0 0.42rem 0;
  font-size: var(--t-s);
  line-height: 1.5;
}
.arcs .arcs__list > li::before {
  content: "";
  position: absolute;
  left: -1.1rem;
  top: 1.15em;
  width: 0.75rem;
  height: 0;
  background: none;
  border-top: 2px solid var(--strand-tint);
}

/* ── Episode leaf ──────────────────────────────────────── */

.ep {
  display: grid;
  grid-template-columns: var(--gutter) minmax(0, 1fr);
  column-gap: 1.1rem;
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
}
.ep__n {
  font-family: var(--sans);
  font-variation-settings: 'wdth' 92;
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--strand);
  text-align: right;
  padding-top: 1.15rem;
  letter-spacing: -0.03em;
}
.ep__leaf {
  background: var(--leaf);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--strand);
  padding: clamp(1.1rem, 3vw, 1.85rem);
  min-width: 0;
}
.ep__label {
  margin: 0 0 0.4rem;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}
.ep__title {
  margin: 0;
  font-family: var(--sans);
  font-variation-settings: 'wdth' 106;
  font-weight: 700;
  font-size: var(--t-lg);
  line-height: 1.15;
  letter-spacing: -0.012em;
}
.ep__sub {
  margin: 0.35rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-md);
  color: var(--slate);
  line-height: 1.4;
}

.ep__meta {
  margin: 1.4rem 0 0;
  border-top: 1px solid var(--hairline);
}
.ep__meta > div {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  gap: 0.35rem 1.25rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--hairline-2);
}
.ep__meta dt {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--slate);
  padding-top: 0.15em;
}
.ep__meta dd { margin: 0; font-size: var(--t-s); line-height: 1.55; }

.ep__block { margin-top: 1.6rem; }
.ep__blockhead {
  margin: 0 0 0.85rem;
  font-family: var(--sans);
  font-size: var(--t-s);
  font-weight: 700;
  color: var(--ink);
  padding-bottom: 0.45rem;
  border-bottom: 2px solid var(--strand-tint);
}

/* Timed outline — the call sheet */
.outline { list-style: none; margin: 0; padding: 0; }
.outline li {
  display: grid;
  grid-template-columns: 7.25rem minmax(0, 1fr);
  gap: 0.15rem 1rem;
  padding: 0.42rem 0;
  font-size: var(--t-s);
  line-height: 1.5;
  border-bottom: 1px dotted var(--hairline);
}
.outline li:last-child { border-bottom: 0; }
.outline .t {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ochre-d);
  padding-top: 0.2em;
  white-space: nowrap;
}

/* Interview questions */
.qs { list-style: none; margin: 0; padding: 0; counter-reset: q; }
.qs > li {
  counter-increment: q;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: 0.35rem 0.85rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--hairline-2);
}
.qs > li:last-child { border-bottom: 0; padding-bottom: 0; }
.qs > li::before {
  content: "Q" counter(q);
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--scarlet);
  padding-top: 0.28em;
}
.qs__l {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--slate);
  margin: 0 0 0.3rem;
}
.qs__q { margin: 0; font-size: var(--t-s); line-height: 1.6; }
.qs__d {
  margin: 0.55rem 0 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--slate);
  padding-left: 0.8rem;
  border-left: 2px solid var(--hairline);
}
.qs__d b {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--ochre-d);
  display: block;
  margin-bottom: 0.15rem;
}

/* Follow-up — the optional second question under a question */
.qs__f {
  margin: 0.55rem 0 0;
  padding-left: 0.85rem;
  border-left: 2px solid var(--hairline);
  font-size: var(--t-s);
  line-height: 1.6;
  color: var(--slate);
}
.qs__f-l {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ochre-d);
  margin-bottom: 0.15rem;
}

/* Host script — playscript cues */
.cue + .cue { margin-top: 0.9rem; }
.cue {
  padding-left: 0.95rem;
  border-left: 3px solid var(--scarlet);
}
.cue__role {
  margin: 0 0 0.25rem;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--scarlet);
}
.cue__line {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-s);
  line-height: 1.62;
  color: #2c2748;
}

/* ── Clips ─────────────────────────────────────────────── */

.clips { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.clip {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.4rem 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--hairline-2);
}
.clip__n {
  font-family: var(--sans);
  font-weight: 800;
  font-size: var(--t-md);
  font-variant-numeric: tabular-nums;
  color: var(--strand);
  line-height: 1.2;
}
.clip__title {
  margin: 0 0 0.45rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--t-s);
  line-height: 1.3;
}
.clip__body { min-width: 0; }
.clip__content {
  margin: 0.5rem 0 0;
  font-size: var(--t-s);
  line-height: 1.55;
}
.clip__subject {
  margin: 0 0 0.45rem;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: #35304f;
}
.clip__from {
  margin: 0 0 0.5rem;
  font-family: var(--sans);
  font-size: var(--t-xs);
  color: var(--slate);
}
.clip__hook {
  margin: 0.55rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-s);
  color: #2c2748;
}
.clip__hook span {
  font-family: var(--sans);
  font-style: normal;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--slate);
}
.clip__blockhead {
  margin: 0.9rem 0 0.5rem;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--ink);
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--strand-tint);
}
.clip .outline li { grid-template-columns: 6.5rem minmax(0, 1fr); }

/* ── Intro ─────────────────────────────────────────────── */

.intro { margin-bottom: clamp(3rem, 7vw, 5rem); }
.intro__title {
  margin: 0 0 1.1rem;
  font-family: var(--sans);
  font-variation-settings: 'wdth' 110;
  font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.intro__lede {
  margin: 0 0 1.9rem;
  font-size: clamp(1.1rem, 2.3vw, 1.35rem);
  line-height: 1.5;
  max-width: 34rem;
  color: #2c2748;
}
.intro__lede::after {
  content: "";
  display: block;
  width: 4.5rem;
  border-top: 3px solid var(--scarlet);
  margin-top: 1.5rem;
}

/* ── Footer ────────────────────────────────────────────── */

.foot {
  background: var(--ink);
  color: #b7b0d0;
  padding: 2.5rem var(--pad-x) calc(2.5rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: baseline;
  justify-content: space-between;
}
.foot__colophon {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-s);
  max-width: 44ch;
}
.foot__dl {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-sm);
}
.foot__dl a {
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-3);
  padding-bottom: 2px;
}
.foot__dl a:hover { border-bottom-color: var(--ochre); }

.foot__top {
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ochre);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.foot__top:hover { border-bottom-color: currentColor; }

/* ── Inline marks ──────────────────────────────────────── */

em, i { font-style: italic; }
strong, b { font-weight: 600; }
.prose strong, .ep__leaf strong { font-weight: 600; color: var(--ink); }

/* A title inside already-italic text flips back to roman. */
.cue__line em,
.ep__sub em,
.part__meta em,
.foot__colophon em,
.stage__sub em { font-style: normal; }

/* ── Strand colours ────────────────────────────────────── */

[data-strand="season-1"] { --strand: var(--scarlet);  --strand-tint: #f0cdd2; }
[data-strand="season-2"] { --strand: var(--ink-2);    --strand-tint: #cfc9e0; }
[data-strand="bonus"]    { --strand: var(--ochre-d);  --strand-tint: #ecd7a8; }

/* ── Responsive ────────────────────────────────────────── */

@media (max-width: 62rem) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .railtoggle { display: inline-flex; }
  .rail {
    position: static;
    max-height: none;
    overflow: visible;
    display: none;
    background: var(--leaf);
    border: 1px solid var(--hairline);
    padding: 1.25rem;
    margin-bottom: 2rem;
  }
  .rail.is-open { display: block; }
  .topbar__sub { display: none; }
}

@media (max-width: 40rem) {
  html { font-size: 16px; }
  :root { --gutter: 0rem; }
  .ep { grid-template-columns: minmax(0, 1fr); }
  .ep__n {
    text-align: left;
    padding: 0 0 0.4rem;
    font-size: 1.5rem;
  }
  .ep__meta > div { grid-template-columns: minmax(0, 1fr); }
  .outline li { grid-template-columns: minmax(0, 1fr); }
  .lang__label { display: none; }
  /* Keep the full language name for assistive tech; show the code on screen. */
  .lang__long {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .lang__short { display: inline; }
  .ro__ticks { height: 56px; }
  .ro__tick { width: 7px; }
}

/* ── Print ─────────────────────────────────────────────── */

@media print {
  :root { --paper: #fff; --leaf: #fff; }
  .topbar, .rail, .railtoggle, .skip, .foot__top, .foot__dl, .ro { display: none !important; }
  body { background: #fff; font-size: 10.5pt; line-height: 1.45; }
  .stage { background: #fff; color: #000; padding: 0 0 1.5rem; }
  .stage__light { display: none; }
  .curtain, .ov { display: none; }
  .stage__title { font-size: 26pt; color: #000; }
  .stage__sub, .stage__standfirst { color: #333; }
  .shell { display: block; padding: 0; max-width: none; }
  .foot { background: #fff; color: #000; padding: 1rem 0 0; border-top: 1px solid #999; }
  .ep, .arcs, .sect { break-inside: avoid; }
  .part { break-before: page; }
  .ep__leaf, .arcs { border-color: #999; }
  a { text-decoration: none; }
  /* The page itself sets the measure on paper. */
  .prose, .intro__lede, .part__meta, .stage__in, .arcs, .ep__leaf { max-width: none; }
  table { min-width: 0; }
  .tablewrap { overflow: visible; }
}