/* =========================================================================
   KINEMA — BROADSHEET
   One stylesheet. Light is the base on :root; [data-theme="dark"] overrides
   colour tokens only. Accent is four tokens selected by [data-accent].

   Visual language: a newspaper, not a storefront. A serif carries every
   heading, every card title and all running prose; the sans is demoted to
   chrome and to the letterspaced micro-type that labels things. Hairline
   rules instead of shadows, near-square corners, and the accent spent
   sparingly — a masthead rule, the lead numeral, one status word.

   The type is the design. Three things do most of the work: the serif at
   display size, the --track-micro label voice, and rules used as structure
   rather than decoration. Change those and it stops being this theme.

   Sections  (9 hero and 10 meta-row were deleted with the hero band; the
   numbering is left alone so older notes still point at the right blocks)
     1  tokens · 1b accents · 2 base · 3 layout utilities
     4  site header + nav      5  site footer        6  breadcrumbs
     7  card · card-grid       8  section-row        8b ranking
     9b home hero/masthead
    11  sections / synopsis   12  info-table        13 episode-list
    14  player                15  archive head      16 pagination
    17  article               18  404               19 bottom-nav
    20  layout variants + lockup                    21 comments
    22  print
   ========================================================================= */

/* =========================================================================
   1. TOKENS
   ========================================================================= */
:root {
  color-scheme: light;

  /* Colour — light base */
  --bg:            #ffffff;
  --surface:       #f6f6f3;
  --surface-2:     #ecece7;
  --text:          #15151a;
  --text-muted:    #66666f;
  --border:        #dededa;
  --accent:        #c8322d;
  --accent-ink:    #ffffff;
  --accent-text:   #b02b26;
  --accent-soft:   rgba(200, 50, 45, .10);
  --focus:         var(--accent-text);
  --overlay:       rgba(10, 10, 12, .78);
  --overlay-ink:   #ffffff;
  --scrim:         rgba(10, 10, 12, .58);
  --header-bg:     rgba(255, 255, 255, .92);

  /* Type — three stacks, none downloaded. The serif is what makes this a
     broadsheet rather than another streaming grid: it carries every heading,
     every card title and the running prose. The sans is demoted to chrome and
     to the letterspaced micro-type that labels things. Both resolve to a real
     face on every target platform, so there is no webfont and no FOUT. */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
                  Georgia, "Times New Roman", Times, serif;
  --font-meta: var(--font-body);

  --fs-xs:  .75rem;
  --fs-sm:  .8125rem;
  --fs-base: 1rem;
  --fs-lg:  1.125rem;
  --fs-xl:  clamp(1.45rem, 1.1rem + 1.3vw, 2rem);
  --fs-2xl: clamp(2rem, 1.35rem + 2.8vw, 3.4rem);
  --fs-3xl: clamp(2.9rem, 1.7rem + 5vw, 5.5rem);

  /* One tracking value for every piece of micro-type, so the labels down the
     page (kickers, dt, card-meta, section-row-more) read as one voice. */
  --track-micro: .12em;

  --lh-tight: 1.06;
  --lh-body: 1.62;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* Spacing (4px base) */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-6:1.5rem; --sp-8:2rem; --sp-12:3rem; --sp-16:4rem;

  /* Structure — near-square: this is the single biggest carrier of the
     editorial feel, so it is deliberately not a rounded-card design. */
  --radius-sm: 2px;
  --radius:    3px;
  --radius-lg: 4px;
  --radius-pill: 999px;

  /* Rules do the work shadows would do elsewhere. */
  --shadow: none;
  --rule: 1px solid var(--border);
  --rule-heavy: 2px solid var(--text);

  /* Layout */
  --container: 1240px;
  --container-narrow: 720px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header-h: 64px;

  /* Aspect ratios */
  --ar-poster: 2 / 3;
  --ar-video: 16 / 9;

  /* Motion */
  --ease: cubic-bezier(.2,.6,.2,1);
  --dur: 150ms;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg:            #0b0b0d;
  --surface:       #141417;
  --surface-2:     #1c1c21;
  --text:          #f2f2f0;
  --text-muted:    #9a9aa4;
  --border:        #2b2b32;
  --accent:        #ef6a63;
  --accent-ink:    #15151a;
  --accent-text:   #ef6a63;
  --accent-soft:   rgba(239, 106, 99, .14);
  --focus:         var(--accent-text);
  --overlay:       rgba(4, 4, 6, .8);
  --overlay-ink:   #ffffff;
  --scrim:         rgba(4, 4, 6, .68);
  --header-bg:     rgba(11, 11, 13, .92);
  --rule-heavy:    2px solid var(--text);
}

/* =========================================================================
   1b. ACCENTS
   Four tokens per hue per theme. --accent carries --accent-ink at >=4.5:1;
   --accent-text clears 4.5:1 against --bg, --surface and --accent-soft
   composited over each. Re-derive after any hue change — it is a contrast
   job, not a taste job.

       <html data-theme="dark" data-accent="blue">
   ========================================================================= */
[data-accent="blue"] {
  --accent: #1f5fd0; --accent-ink: #ffffff; --accent-text: #1a53b8;
  --focus: var(--accent-text); --accent-soft: rgba(31, 95, 208, .10);
}
[data-theme="dark"][data-accent="blue"] {
  --accent: #6ba5f5; --accent-ink: #15151a; --accent-text: #6ba5f5;
  --focus: var(--accent-text); --accent-soft: rgba(107, 165, 245, .14);
}

[data-accent="green"] {
  --accent: #0f7a45; --accent-ink: #ffffff; --accent-text: #0d6a3c;
  --focus: var(--accent-text); --accent-soft: rgba(15, 122, 69, .10);
}
[data-theme="dark"][data-accent="green"] {
  --accent: #4fd18b; --accent-ink: #15151a; --accent-text: #4fd18b;
  --focus: var(--accent-text); --accent-soft: rgba(79, 209, 139, .14);
}

[data-accent="orange"] {
  --accent: #b4530b; --accent-ink: #ffffff; --accent-text: #9c470a;
  --focus: var(--accent-text); --accent-soft: rgba(180, 83, 11, .10);
}
[data-theme="dark"][data-accent="orange"] {
  --accent: #f0954b; --accent-ink: #15151a; --accent-text: #f0954b;
  --focus: var(--accent-text); --accent-soft: rgba(240, 149, 75, .14);
}

[data-accent="purple"] {
  --accent: #6b2fc7; --accent-ink: #ffffff; --accent-text: #5f29b3;
  --focus: var(--accent-text); --accent-soft: rgba(107, 47, 199, .10);
}
[data-theme="dark"][data-accent="purple"] {
  --accent: #b184f0; --accent-ink: #15151a; --accent-text: #b184f0;
  --focus: var(--accent-text); --accent-soft: rgba(177, 132, 240, .14);
}

[data-accent="red"] {
  --accent: #c8322d; --accent-ink: #ffffff; --accent-text: #b02b26;
  --focus: var(--accent-text); --accent-soft: rgba(200, 50, 45, .10);
}
[data-theme="dark"][data-accent="red"] {
  --accent: #ef6a63; --accent-ink: #15151a; --accent-text: #ef6a63;
  --focus: var(--accent-text); --accent-soft: rgba(239, 106, 99, .14);
}

[data-accent="teal"] {
  --accent: #0a6e80; --accent-ink: #ffffff; --accent-text: #096070;
  --focus: var(--accent-text); --accent-soft: rgba(10, 110, 128, .10);
}
[data-theme="dark"][data-accent="teal"] {
  --accent: #45c7dc; --accent-ink: #15151a; --accent-text: #45c7dc;
  --focus: var(--accent-text); --accent-soft: rgba(69, 199, 220, .14);
}

[data-accent="yellow"] {
  --accent: #8a6a00; --accent-ink: #ffffff; --accent-text: #7a5e00;
  --focus: var(--accent-text); --accent-soft: rgba(138, 106, 0, .10);
}
[data-theme="dark"][data-accent="yellow"] {
  --accent: #e2c04a; --accent-ink: #15151a; --accent-text: #e2c04a;
  --focus: var(--accent-text); --accent-soft: rgba(226, 192, 74, .14);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   2. BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  /* Serifs need far less negative tracking than a grotesk — the old -.022em
     collides the stems at display sizes. Large headings tighten further at
     their own rules. */
  letter-spacing: -.01em;
}

/* The kicker: the letterspaced sans line that sits above a serif heading.
   It is the second half of the broadsheet lockup and appears on the home
   masthead, the archive head and every detail page. */
.kicker {
  margin: 0 0 var(--sp-3);
  color: var(--text-muted);
  font-family: var(--font-meta);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}
.kicker-accent { color: var(--accent-text); }

a { color: inherit; text-decoration-color: var(--border); text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--accent-text); }

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

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--accent); color: var(--accent-ink); }

/* =========================================================================
   3. LAYOUT UTILITIES
   ========================================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow { max-width: var(--container-narrow); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--sp-2); top: var(--sp-2);
  z-index: 100;
  transform: translateY(-200%);
  padding: var(--sp-2) var(--sp-4);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

.site-main { display: block; padding-bottom: var(--sp-16); }

.icon {
  width: 1.2em; height: 1.2em;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}
.icon-solid { fill: currentColor; stroke: none; }

.note { margin: var(--sp-4) 0 0; color: var(--text-muted); font-size: var(--fs-sm); }

/* -- buttons: square, ruled, no shadow -------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-3) var(--sp-6);
  border: var(--rule);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { border-color: var(--text); background: var(--surface-2); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: var(--fw-bold);
}
.btn-primary:hover { background: var(--accent); border-color: var(--accent); filter: brightness(1.08); }

.btn-ghost { background: transparent; }

/* -- badges: a hard block, not a pill --------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: .25em .5em;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  line-height: 1.35;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge-accent { background: var(--accent); color: var(--accent-ink); }

/* -- filters ----------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0; padding: 0;
  list-style: none;
}
.filters-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--sp-3);
  border: var(--rule);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.filters-link:hover { border-color: var(--text); color: var(--text); }
.filters-link[aria-current="page"] {
  background: var(--accent); border-color: var(--accent);
  color: var(--accent-ink); font-weight: var(--fw-medium);
}

/* =========================================================================
   4. SITE HEADER + NAV
   ========================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  border-bottom: var(--rule-heavy);
  backdrop-filter: saturate(1.3) blur(8px);
  -webkit-backdrop-filter: saturate(1.3) blur(8px);
}

.site-header-bar {
  display: flex;
  /* wrap is load-bearing: it lets .site-nav drop onto its own full-width
     row when the mobile panel opens. */
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-6);
  min-height: var(--header-h);
  padding-block: var(--sp-2);
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-header-bar {
      animation: header-condense linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 160px;
    }
    @keyframes header-condense { to { min-height: 50px; padding-block: 0; } }
  }
}

.site-logo {
  display: inline-flex;
  align-items: baseline;
  gap: .04em;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.site-logo-mark { color: var(--accent-text); }
.site-logo-img { display: block; height: 32px; width: auto; max-width: 190px; object-fit: contain; }

.site-nav {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  min-width: 0;
}

.site-nav-toggle {
  display: none; /* revealed only once main.js flags JS support */
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
}
.site-nav-toggle:hover { border-color: var(--text); }
.site-nav-toggle .icon-close,
.site-header.is-open .site-nav-toggle .icon-menu { display: none; }
.site-header.is-open .site-nav-toggle .icon-close { display: block; }

.site-nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-1);
  margin: 0; padding: 0;
  list-style: none;
}

/* Uppercase micro-type is the nav's whole character here. */
.site-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-nav-link:hover { color: var(--text); background: var(--surface-2); }

/* Active state comes from body[data-page], so header markup stays identical
   on every page and lifts into one template part. */
body[data-page="home"]    .site-nav-link[data-nav="home"],
body[data-page="movies"]  .site-nav-link[data-nav="movies"],
body[data-page="dramas"]  .site-nav-link[data-nav="dramas"],
body[data-page="tvshows"] .site-nav-link[data-nav="tvshows"],
body[data-page="genres"]  .site-nav-link[data-nav="genres"] {
  color: var(--accent-text);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* -- submenus (one level) ---------------------------------------------- */
.site-nav-list .sub-menu { margin: 0; padding: 0; list-style: none; }

.site-nav-sub-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; min-height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
}
.site-nav-sub-toggle:hover { color: var(--text); }
.site-nav-sub-toggle .icon { width: 1em; height: 1em; transition: transform var(--dur) var(--ease); }
.has-children.is-open > .site-nav-sub-toggle .icon { transform: rotate(180deg); }

/* -- header search ----------------------------------------------------- */
.search-form {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1 1 13rem;
  min-width: 0;
  max-width: 21rem;
  margin-left: auto;
  padding: 0 var(--sp-2) 0 var(--sp-3);
  background: var(--bg);
  border: var(--rule);
  border-radius: var(--radius);
}
.search-form:focus-within { border-color: var(--text); }
.search-form-icon { color: var(--text-muted); width: 1.05em; height: 1.05em; }
.search-form-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  padding: 0;
  background: transparent;
  border: 0;
  font-size: var(--fs-sm);
}
.search-form-input:focus { outline: none; }
.search-form-submit {
  min-height: 30px;
  padding: var(--sp-1) var(--sp-4);
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}

/* -- mobile (<64rem) --------------------------------------------------- */
@media (max-width: 63.999rem) {
  /* No JS → the nav is simply always visible on its own row, and the toggle
     stays hidden, so nothing is ever unreachable. */
  html.js .site-nav-toggle { display: inline-flex; }
  html.js .site-nav { display: none; }
  html.js .site-header.is-open .site-nav { display: flex; }
  html.js .site-nav:has(:target) { display: flex; }

  .site-nav {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-1);
    padding-block: var(--sp-2) var(--sp-4);
    border-top: var(--rule);
  }
  .site-nav-list { flex-direction: column; align-items: stretch; }
  .site-nav-link { justify-content: flex-start; min-height: 44px; }

  .site-nav-list > .has-children { display: flex; flex-wrap: wrap; align-items: center; }
  .site-nav-list > .has-children > .site-nav-link { flex: 1 1 auto; }
  .site-nav-list .sub-menu { flex: 1 1 100%; padding-left: var(--sp-4); }
  html.js .site-nav-list > .has-children > .sub-menu { display: none; }
  html.js .site-nav-list > .has-children.is-open > .sub-menu { display: block; }

  /* .search-form is authored for the header's ROW layout, where flex-basis is
     a width. In the open panel .site-nav is a COLUMN and that basis becomes a
     height — reset it and let the field size to its content. */
  .site-nav .search-form {
    flex: none;
    max-width: none;
    margin-left: 0;
    order: -1;
  }
}

@media (min-width: 64rem) {
  .site-nav { flex: 1 1 auto; flex-wrap: nowrap; }
  .site-nav-toggle { display: none !important; }

  .site-nav-list > li { position: relative; }
  .site-nav-sub-toggle { display: none; }
  .has-children > .site-nav-link::after { content: "\25be"; margin-left: .3em; }

  .site-nav-list .sub-menu {
    position: absolute;
    top: 100%; left: 0;
    z-index: 60;
    display: none;
    min-width: 12rem;
    padding: var(--sp-2);
    background: var(--bg);
    border: var(--rule);
    border-top: var(--rule-heavy);
  }
  .site-nav-list > .has-children:hover > .sub-menu,
  .site-nav-list > .has-children:focus-within > .sub-menu { display: block; }
}

/* =========================================================================
   5. SITE FOOTER
   ========================================================================= */
.site-footer {
  margin-top: var(--sp-16);
  padding-block: var(--sp-12) var(--sp-8);
  background: var(--surface);
  border-top: var(--rule-heavy);
  font-size: var(--fs-sm);
}
.site-footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: var(--sp-8);
}
.site-footer-title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
}
.site-footer-list { margin: 0; padding: 0; list-style: none; }
.site-footer-list li + li { margin-top: var(--sp-2); }
.site-footer-list a { text-decoration: none; color: var(--text-muted); }
.site-footer-list a:hover { color: var(--accent-text); }
.site-footer-about { color: var(--text-muted); }

.site-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: var(--rule);
  color: var(--text-muted);
  font-size: var(--fs-xs);
}
/* Takes the rest of the row and drops to its own line when the row is tight,
   rather than being held to a ch measure. */
.site-footer-disclaimer { flex: 1 1 24rem; }

/* =========================================================================
   6. BREADCRUMBS
   ========================================================================= */
.breadcrumbs { padding-block: var(--sp-4); font-size: var(--fs-xs); }
.breadcrumbs-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  margin: 0; padding: 0;
  list-style: none;
  color: var(--text-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.breadcrumbs-list li { display: flex; align-items: center; gap: var(--sp-2); }
.breadcrumbs-list li + li::before { content: "/"; color: var(--text-muted); }
.breadcrumbs a { text-decoration: none; color: var(--text-muted); }
.breadcrumbs a:hover { color: var(--accent-text); }
.breadcrumbs [aria-current="page"] { color: var(--text); font-weight: var(--fw-medium); }

/* =========================================================================
   7. CARD · CARD-GRID   (poster 2:3 is the only card type)
   ========================================================================= */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: var(--sp-8) var(--sp-4);
  margin: 0; padding: 0;
  list-style: none;
}
/* Two posters must still fit on a phone: at 360px the container leaves too
   little for two 172px tracks plus the gap, so auto-fill would drop to one
   column and each card would balloon. Pin two below that point. */
@media (max-width: 30rem) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-3); }
}

.card { position: relative; min-width: 0; }

.card-link { display: block; color: inherit; text-decoration: none; }

.card-media {
  position: relative;
  aspect-ratio: var(--ar-poster);
  overflow: hidden;
  background: var(--surface-2);
  border: var(--rule);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease);
}
.card-link:hover .card-media { border-color: var(--text); }
.card-img { width: 100%; height: 100%; object-fit: cover; }

.card-badge {
  position: absolute;
  top: 0; left: 0;
  z-index: 1;
  border-radius: 0 0 var(--radius-sm) 0;
  background: var(--overlay);
  color: var(--overlay-ink);
}
.card-badge-right { left: auto; right: 0; border-radius: 0 0 0 var(--radius-sm); }
.card-badge-accent { background: var(--accent); color: var(--accent-ink); }

/* The rule over the caption is what makes a poster grid read as a page of
   plates rather than a shelf of thumbnails. */
.card-body { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: var(--rule); }
.card-link:hover .card-body { border-top-color: var(--text); }
.card-title {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: 1.22;
  letter-spacing: -.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-meta {
  margin: var(--sp-1) 0 0;
  color: var(--text-muted);
  font-family: var(--font-meta);
  font-size: var(--fs-xs);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.card-progress { color: var(--accent-text); font-weight: var(--fw-medium); }

/* =========================================================================
   8. SECTION-ROW
   ========================================================================= */
.section-row { margin-top: var(--sp-12); }
.section-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-3);
  border-bottom: var(--rule-heavy);
}
.section-row-title { margin: 0; font-size: var(--fs-xl); letter-spacing: -.015em; }
.section-row-more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--accent-text);
  font-family: var(--font-meta);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.section-row-more:hover { text-decoration: underline; }

/* =========================================================================
   8b. RANKING   (the home page's lead — a ranked text list, no posters)

   This is the one component that has no equivalent in a poster-grid theme,
   and it is what the top of the home page now leads with. It carries no
   images at all, so it costs nothing above the fold, and it gives the page a
   verbal opening rather than a wall of thumbnails.

   Two columns on desktop via `columns`, NOT grid: column flow fills 01-03
   before 04-06, so the numbers still read down. Grid would deal them across
   and the ranking would read 01 04 / 02 05.
   ========================================================================= */
.ranking {
  margin: 0; padding: 0;
  list-style: none;
}
.ranking-item { break-inside: avoid; border-bottom: var(--rule); }

.ranking-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-2);
  color: inherit;
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}
.ranking-link:hover { background: var(--surface); }

/* The numeral is ornament as much as data: display size, hairline weight,
   tabular so the column stays true from 01 to 12. */
.ranking-num {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-normal);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text-muted);
}
/* The accent marks "the top one". On a paginated row's page 2 the first item
   is #13, not the lead, so the continued list drops the highlight. */
.ranking-item:first-child .ranking-num { color: var(--accent-text); }
.ranking-continued .ranking-item:first-child .ranking-num { color: var(--text-muted); }

.ranking-body { min-width: 0; }
.ranking-title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1.2;
}
.ranking-link:hover .ranking-title { text-decoration: underline; text-decoration-color: var(--accent-text); }
.ranking-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  margin: var(--sp-1) 0 0;
  color: var(--text-muted);
  font-family: var(--font-meta);
  font-size: var(--fs-xs);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.ranking-meta-live { color: var(--accent-text); font-weight: var(--fw-bold); }

@media (min-width: 64rem) {
  .ranking { columns: 2; column-gap: var(--sp-16); }
}

/* =========================================================================
   9b. HOME HERO — ledger and spotlight

   Two treatments of one markup shape, chosen by the hero_style option: the
   section carries .home-hero--ledger or .home-hero--spotlight and this
   section does the rest. A third is CSS plus one $choices entry.

   BOTH FOLLOW THE PAGE THEME. Every light/dark difference is a token,
   declared light-first on .home-hero and overridden once under
   [data-theme="dark"] .home-hero — the two blend modes and the lead figure's
   glow included, which is why those are var()-driven rather than literal. No
   rule below is written twice, and none reaches for a page token (--bg,
   --text, --border…): a hero rule that did would paint one theme's colour on
   the other theme's ground.

   The two versions are NOT inversions of each other. On a dark ground the
   lamps and washes ADD, compositing toward white, so they read as light. On
   a light ground the same layers SUBTRACT — they multiply, tinting the paper
   the way pigment does, or a gel over a lightbox. That is what --hero-blend
   and --hero-lamp-blend carry. Flipping only the colours and leaving the
   blend modes alone is what produces a washed-out grey band.

   Neither loads an image: every wash, beam and grain here is drawn in CSS,
   which is what keeps the "no image above the fold" rule in §7.
   ========================================================================= */
.home-hero {
  /* -- light (base) -- */
  --hero-ink:         #191723;
  --hero-dim:         rgba(25, 23, 35, .62);
  --hero-faint:       rgba(25, 23, 35, .42);
  --hero-line:        rgba(25, 23, 35, .14);
  --hero-ground:      #f2f0f6;   /* the page is #ffffff — the band must not be */
  --hero-field:       rgba(25, 23, 35, .04);
  --hero-field-focus: rgba(25, 23, 35, .07);
  --hero-num-fade:    rgba(25, 23, 35, .40);
  --hero-lead-glow:   none;      /* a glow does not read on paper */

  --hero-blend:         multiply;
  --hero-grain-blend:   multiply;
  --hero-grain-opacity: .10;

  --hero-glow-1: rgba(108, 76, 240, .20);
  --hero-glow-2: rgba(200, 50, 45, .16);
  --hero-glow-3: rgba(0, 150, 210, .14);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--hero-ground);
  color: var(--hero-ink);
  border-bottom: 3px solid var(--accent);
}

[data-theme="dark"] .home-hero {
  --hero-ink:         #f7f6f3;
  --hero-dim:         rgba(247, 246, 243, .62);
  --hero-faint:       rgba(247, 246, 243, .45);
  --hero-line:        rgba(247, 246, 243, .18);
  --hero-ground:      #07070d;
  --hero-field:       rgba(255, 255, 255, .07);
  --hero-field-focus: rgba(255, 255, 255, .11);
  --hero-num-fade:    rgba(247, 246, 243, .48);
  --hero-lead-glow:   drop-shadow(0 0 26px var(--hero-glow-2));

  --hero-blend:         normal;
  --hero-grain-blend:   overlay;
  --hero-grain-opacity: .28;

  --hero-glow-1: rgba(124, 92, 255, .50);
  --hero-glow-2: rgba(255, 70, 122, .38);
  --hero-glow-3: rgba(0, 198, 255, .26);
}

/* The accent tints the whole LIGHT band — ground, ink and all three washes —
   so the paper reads as chosen rather than as a default grey, and the band
   stays harmonious across all eight hues in §1b instead of pairing, say, a
   green accent with a fixed violet wash.
   
   Dark keeps its own three-hue aurora: on black the washes ADD, and three
   different hues mixing toward white is the whole effect. Only --hero-glow-2
   is accent there.

   Percentages are low by design. A wash that multiplies into paper needs far
   less accent than one that adds onto black — hence 20/26/14 against 62 — and
   the ink takes only 12%, enough to bias the neutral without tinting the type.
   The values outside this block are the no-color-mix fallback and cannot know
   the accent, so they stay on the default red. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .home-hero {
    --hero-ground: color-mix(in srgb, var(--accent)  7%, #fbfaf9);
    --hero-ink:    color-mix(in srgb, var(--accent) 12%, #16141c);
    --hero-glow-1: color-mix(in srgb, var(--accent) 20%, transparent);
    --hero-glow-2: color-mix(in srgb, var(--accent) 26%, transparent);
    --hero-glow-3: color-mix(in srgb, var(--accent) 14%, transparent);
  }
  [data-theme="dark"] .home-hero { --hero-glow-2: color-mix(in srgb, var(--accent) 62%, transparent); }
}

/* The field: three oversized radial washes, inset well beyond the box so the
   blur never reveals an edge, drifting on a slow alternate loop. */
.home-hero::before {
  content: "";
  position: absolute;
  inset: -35%;
  z-index: -2;
  mix-blend-mode: var(--hero-blend);
  background:
    radial-gradient(38% 46% at 18% 26%, var(--hero-glow-1) 0%, transparent 62%),
    radial-gradient(44% 52% at 84% 18%, var(--hero-glow-2) 0%, transparent 60%),
    radial-gradient(48% 54% at 56% 92%, var(--hero-glow-3) 0%, transparent 64%);
  filter: blur(30px) saturate(130%);
  animation: kinema-aurora 30s ease-in-out infinite alternate;
}

/* Grain, as an inline SVG turbulence. Gradients this large band visibly on
   8-bit displays; the noise breaks it up and gives the panel a printed
   surface. It multiplies into paper and overlays onto black — overlay on a
   light ground mostly lightens, which would erase it.

   feColorMatrix saturate=0 is not optional: fractalNoise randomises R, G and
   B independently, so without it the layer is COLOURED noise, which multiplies
   into paper as dirt rather than grain. And the <rect> carries no opacity of
   its own — an earlier version set .42 there AND on this element, so the two
   multiplied out to roughly 6% in light and the texture was invisible.
   --hero-grain-opacity is the single control. */
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: var(--hero-grain-opacity);
  mix-blend-mode: var(--hero-grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.8'%20numOctaves='4'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='160'%20height='160'%20filter='url%28%23n%29'/%3E%3C/svg%3E");
}

@keyframes kinema-aurora {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1);    }
  50%  { transform: translate3d( 2%,  2%, 0) scale(1.09); }
  100% { transform: translate3d(-1%,  1%, 0) scale(1.04); }
}

.home-hero-inner { padding-block: var(--sp-8) var(--sp-12); }

.home-hero-folio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-6);
  margin: 0 0 var(--sp-6);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--hero-line);
  color: var(--hero-dim);
  font-family: var(--font-meta);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}
.home-hero-folio-mark { color: var(--hero-ink); }

.home-hero-title {
  margin: 0 0 var(--sp-8);
  font-size: var(--fs-2xl);
  letter-spacing: -.03em;
  color: var(--hero-ink);
}

.home-hero-lede {
  margin: 0 0 var(--sp-8);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--hero-dim);
}

/* -- the ledger band --------------------------------------------------- */
.home-ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8);
  margin: 0 0 var(--sp-8);
  padding-block: var(--sp-8);
  border-top: 1px solid var(--hero-line);
  border-bottom: 1px solid var(--hero-line);
}
@media (min-width: 48rem) {
  .home-ledger { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* column-reverse puts the figure on top while the DOM keeps <dt> label first,
   so assistive tech still hears "Dramas, 26". */
.home-ledger-cell {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--sp-2);
}
.home-ledger-num {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
  font-weight: var(--fw-bold);
  line-height: .92;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  color: var(--hero-ink);
}
.home-ledger-label {
  margin: 0;
  color: var(--hero-dim);
  font-family: var(--font-meta);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

/* Gradient-filled figures. Guarded, because the fill needs transparent text —
   without the guard a browser lacking background-clip:text renders nothing. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .home-ledger-num {
    background-image: linear-gradient(180deg, var(--hero-ink) 10%, var(--hero-num-fade) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .home-ledger-cell:first-child .home-ledger-num {
    background-image: linear-gradient(180deg, var(--hero-ink) 0%, var(--accent) 96%);
  }
}
/* drop-shadow follows the glyphs; box-shadow would halo the box. Empty in
   light, where the ground gives a glow nothing to bloom into. */
.home-ledger-cell:first-child .home-ledger-num { filter: var(--hero-lead-glow); }

/* -- search ------------------------------------------------------------ */
.home-hero-search {
  max-width: 34rem;
  margin: 0;
  background: var(--hero-field);
  border: 1px solid var(--hero-line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.home-hero-search:focus-within {
  border-color: var(--accent);
  background: var(--hero-field-focus);
}
.home-hero-search .search-form-icon { color: var(--hero-dim); }
.home-hero-search .search-form-input { min-height: 48px; color: var(--hero-ink); }
.home-hero-search .search-form-input::placeholder { color: var(--hero-faint); }
.home-hero-search .search-form-submit { min-height: 34px; padding-inline: var(--sp-6); }

@media (prefers-reduced-motion: reduce) {
  .home-hero::before { animation: none; }
  .home-hero-search  { transition: none; }
}


/* -------------------------------------------------------------------------
   9b-B. HOME HERO — spotlight   (hero_style = spotlight)

   A different instrument rather than a recolour. The ledger is one ambient
   centred field; this is a lighting RIG — three gelled lamps thrown from
   off-canvas across an oversized title, with the figures moved to a hairline
   rail down the right.

   The gels mix the way real ones do, via background-blend-mode: on a dark
   page they SCREEN, so crossing beams add to a third hue; on a light page
   they MULTIPLY, so the same beams tint the paper instead of blowing it out.
   ------------------------------------------------------------------------- */

/* Each style owns its own measure; the base rule sets none. */
.home-hero--ledger .home-hero-title { max-width: 22ch; }
.home-hero--spotlight .home-hero-title {
  max-width: 16ch;
  margin-bottom: var(--sp-6);
}

/* The gel colours, solid, for the figures in the rail. They are deeper in
   light than in dark for the same reason any ink is: the figure has to hold
   contrast against paper, not glow off black. */
.home-hero--spotlight {
  --hero-ground:     #f7f2ea;   /* warm, against the ledger's cool paper */
  --hero-lamp-blend: multiply;
  --hero-beam-amber: rgba(216, 126, 24, .26);
  --hero-beam-rose:  rgba(202, 44, 112, .22);
  --hero-beam-cyan:  rgba(18, 148, 188, .20);
  --hero-gel-amber:  #a85c05;
  --hero-gel-rose:   #b02a5f;
  --hero-gel-cyan:   #0d7490;
}
[data-theme="dark"] .home-hero--spotlight {
  --hero-ground:     #07060e;
  --hero-lamp-blend: screen;
  --hero-beam-amber: rgba(255, 182, 72, .34);
  --hero-beam-rose:  rgba(240, 70, 143, .30);
  --hero-beam-cyan:  rgba(56, 206, 255, .28);
  --hero-gel-amber:  #ffb648;
  --hero-gel-rose:   #f0468f;
  --hero-gel-cyan:   #38ceff;
  --hero-lead-glow:  drop-shadow(0 0 24px rgba(255, 182, 72, .42));
}

/* Warm paper, still accent-tinted — the gels supply this style's colour, so
   the ground takes less accent than the ledger's. This has to sit AFTER the
   two token blocks above: it is the same specificity as the light one, and
   source order is all that separates them. Dark is (0,2,0) and unaffected. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .home-hero--spotlight { --hero-ground: color-mix(in srgb, var(--accent) 5%, #fdfaf5); }
}

/* The rig: a key light from beyond the top-left corner, a back light raking
   the other way so the two cross, a spill low-left so the shadow side is not
   neutral grey, and the site accent washing the floor under all three. */
.home-hero--spotlight::before {
  inset: -40%;
  background:
    conic-gradient(from 102deg at 22% 16%, transparent 0deg, var(--hero-beam-amber) 18deg, transparent 42deg),
    conic-gradient(from 214deg at 80% 14%, transparent 0deg, var(--hero-beam-rose) 14deg, transparent 34deg),
    radial-gradient(46% 44% at 12% 92%, var(--hero-beam-cyan) 0%, transparent 70%),
    radial-gradient(62% 42% at 54% 110%, var(--hero-glow-2) 0%, transparent 68%);
  background-blend-mode: var(--hero-lamp-blend), var(--hero-lamp-blend), var(--hero-lamp-blend), normal;
  filter: blur(16px) saturate(125%);
  /* the rig tilts about the truss between the two lamps, not about one of
     them — rotating around a single apex would swing the other one wildly */
  transform-origin: 50% 14%;
  animation: kinema-searchlight 26s ease-in-out infinite alternate;
}

/* A searchlight sways, it does not drift. Rotating about the apex is what
   makes the movement read as a beam rather than a wandering blob. */
@keyframes kinema-searchlight {
  from { transform: rotate(-3deg);   }
  to   { transform: rotate( 2.5deg); }
}

/* The rail: figures left, labels right, hairline between — the ledger's
   horizontal band turned on its side. DOM order is <dt> then <dd>, so
   row-reverse is what puts the numeral first visually. */
.home-hero--spotlight .home-ledger {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding-block: 0;
  border: 0;
}
.home-hero--spotlight .home-ledger-cell {
  flex-direction: row-reverse;
  align-items: baseline;
  justify-content: flex-end;   /* reversed axis — this packs to the LEFT */
  gap: var(--sp-3);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--hero-line);
}
.home-hero--spotlight .home-ledger-cell:first-child {
  padding-top: 0;
  border-top: 0;
}
.home-hero--spotlight .home-ledger-num {
  font-size: clamp(2rem, 3.4vw, 2.9rem);
}

@media (min-width: 60rem) {
  .home-hero--spotlight .home-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr);
    column-gap: var(--sp-12);
    align-items: start;
  }
  .home-hero--spotlight .home-hero-folio  { grid-column: 1 / -1; }
  .home-hero--spotlight .home-hero-title,
  .home-hero--spotlight .home-hero-lede,
  .home-hero--spotlight .home-hero-search { grid-column: 1; }

  /* span 3 covers title + lede + search. The lede is optional, so the
     over-span is deliberate: a short left column just leaves the rail taller
     than its content, which align-self absorbs. Negative line numbers are
     avoided because `-1` cannot address an implicit row. */
  .home-hero--spotlight .home-ledger {
    grid-column: 2;
    grid-row: 2 / span 3;
    align-self: start;
    margin-bottom: 0;
  }
}

/* The rail is where the eye lands, so the gels reach it too: each figure
   fades from the ink into one lamp's colour, the accent closing the set.
   Held to the last 4% of the glyph so the numerals stay legible, not tinted. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .home-hero--spotlight .home-ledger-cell:nth-child(1) .home-ledger-num {
    background-image: linear-gradient(180deg, var(--hero-ink) 0%, var(--hero-gel-amber) 96%);
  }
  .home-hero--spotlight .home-ledger-cell:nth-child(2) .home-ledger-num {
    background-image: linear-gradient(180deg, var(--hero-ink) 0%, var(--hero-gel-rose) 96%);
  }
  .home-hero--spotlight .home-ledger-cell:nth-child(3) .home-ledger-num {
    background-image: linear-gradient(180deg, var(--hero-ink) 0%, var(--hero-gel-cyan) 96%);
  }
  .home-hero--spotlight .home-ledger-cell:nth-child(4) .home-ledger-num {
    background-image: linear-gradient(180deg, var(--hero-ink) 0%, var(--accent) 96%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero--spotlight::before { animation: none; }
}


/* =========================================================================
   11. SECTIONS / SYNOPSIS
   ========================================================================= */
.section { margin-top: var(--sp-12); }
.section-title {
  margin: 0 0 var(--sp-6);
  padding-bottom: var(--sp-3);
  font-size: var(--fs-xl);
  letter-spacing: -.015em;
  border-bottom: var(--rule-heavy);
}
/* Running prose is set in the serif at a real reading size. No ch measure
   cap — prose runs the full width of whatever column holds it, and the
   column (container, or the split's main track) is what sets the measure. */
.synopsis {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.0625rem;
}
.synopsis p { line-height: var(--lh-body); }
.synopsis p:first-child { margin-top: 0; }
/* Two-column prose for the magazine layout. `columns` fills column one before
   column two, so the text still reads down then across — the same behaviour
   the home ranking relies on. Single column below 48rem, where two would leave
   roughly a twenty-character measure. */
@media (min-width: 48rem) {
  .synopsis-columns { columns: 2; column-gap: var(--sp-12); }
  .synopsis-columns > :first-child { margin-top: 0; }
}

/* The drop-cap opening — only on the first paragraph of a full-width
   synopsis, never in the sidebar where the measure is too narrow to carry it. */
.synopsis-lead > p:first-child::first-letter {
  float: left;
  margin: .06em .08em 0 0;
  font-size: 3.1em;
  line-height: .82;
  font-weight: var(--fw-bold);
  color: var(--accent-text);
}

/* =========================================================================
   12. INFO-TABLE
   ========================================================================= */
.info-table {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  border-top: var(--rule);
}
.info-table-row {
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) 1fr;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: var(--rule);
}
.info-table dt {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.info-table dd { margin: 0; font-size: var(--fs-sm); }
.info-table dd a { color: var(--accent-text); text-decoration: none; }
.info-table dd a:hover { text-decoration: underline; }

@media (min-width: 64rem) {
  .info-table { grid-template-columns: 1fr 1fr; column-gap: var(--sp-8); }
}

/* =========================================================================
   13. EPISODE-LIST   (flat text rows — no images, no seasons)
   ========================================================================= */
.episode-list {
  margin: 0; padding: 0;
  list-style: none;
  border-top: var(--rule);
}
.episode-list-item { border-bottom: var(--rule); }

.episode-list-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-4);
  min-height: 56px;
  padding: var(--sp-3) var(--sp-2);
  color: inherit;
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}
.episode-list-link:hover { background: var(--surface); }
.episode-list-link[aria-current="page"] { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }

.episode-list-title {
  flex: 1 1 10rem;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}
/* The title is "<series> Ep N" everywhere, which is right as data but repeats
   the series name down every row. Dimming it keeps the number scannable. */
.episode-list-series { color: var(--text-muted); font-weight: var(--fw-normal); }
.episode-list-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
}
@media (min-width: 40rem) {
  .episode-list-meta { margin-left: auto; flex-wrap: nowrap; }
}
.episode-list-compact .episode-list-link { min-height: 46px; }

/* -- numbered jump grid ------------------------------------------------ */
.episode-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-6);
  padding: 0;
  list-style: none;
}
.episode-grid-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px; min-height: 46px;
  padding: 0 var(--sp-2);
  border: var(--rule);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.episode-grid-link:hover { color: var(--text); border-color: var(--text); }
.episode-grid-link[aria-current="page"] {
  background: var(--accent); border-color: var(--accent);
  color: var(--accent-ink);
}

/* -- prev / next ------------------------------------------------------- */
.ep-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}
.ep-nav-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 56px;
  padding: var(--sp-3) var(--sp-4);
  border: var(--rule);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  font-size: var(--fs-sm);
}
.ep-nav-link:hover { border-color: var(--text); background: var(--surface); }
.ep-nav-link-prev { justify-content: flex-start; text-align: left; }
.ep-nav-link-next { justify-content: flex-end; text-align: right; grid-column: 2; }
.ep-nav-label {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* =========================================================================
   14. PLAYER   (facade + server tabs; no iframe until play)
   ========================================================================= */
.player { display: block; }
.player-stage {
  position: relative;
  aspect-ratio: var(--ar-video);
  overflow: hidden;
  background: var(--surface-2);
  border: var(--rule);
  border-radius: var(--radius);
}
.player-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.55) saturate(.9);
}
.player-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player.is-playing .player-poster,
.player.is-playing .player-play,
.player.is-playing .player-hint { display: none; }

.player-play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  width: 100%;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
}
.player-play-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius);
  transition: transform var(--dur) var(--ease);
}
.player-play-icon .icon { width: 28px; height: 28px; }
.player-play:hover .player-play-icon { transform: scale(1.06); }
.player-play-label { font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; }

.player-hint {
  position: absolute;
  left: 0; right: 0; bottom: var(--sp-3);
  margin: 0;
  text-align: center;
  color: rgba(255,255,255,.75);
  font-size: var(--fs-xs);
}

/* Servers on the left, download pushed to the far end — one row on desktop,
   two when the servers wrap. The download is a sibling of the group, not a
   member of it: it is a different action, and inside role="group" the
   "Servers" label would be announcing it as one. */
.player-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-4);
}
.player-servers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.player-servers-label {
  color: var(--text-muted);
  font-family: var(--font-meta);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

/* The one accent-carrying control on the page, which is why it can stay
   quiet until hover — it is already the only coloured thing in the row. */
.player-download {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--accent-text);
  font-family: var(--font-meta);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.player-download:hover { background: var(--accent); color: var(--accent-ink); }
.player-download .icon { width: 1em; height: 1em; }

.player-bar-actions { display: flex; align-items: center; gap: var(--sp-2); }

/* Lights off. Hidden without JS — dimming the page is entirely scripted, so
   with scripts disabled this would be a control that does nothing. */
.player-lights { display: none; }
.js .player-lights {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--sp-4);
  border: var(--rule);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-meta);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.player-lights:hover { color: var(--text); border-color: var(--text); }
/* Pressed reads the same way an active server tab does — inverted fill — so
   "this control is on" looks identical everywhere in the bar. */
.player-lights[aria-pressed="true"] {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

/* The scrim covers the chrome — header (50), bottom-nav (45), dropdowns (60) —
   but stays under .skip-link (100) so keyboard users can always escape it. */
body.lights-off::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, .93);
}
/* Lifted above the scrim. No ancestor of .player creates a stacking context,
   so a plain relative + z-index is enough.

   It also takes the page background: without one the server tabs, the SERVERS
   label and the "try another server" note sit directly on the scrim, where
   --text-muted has to fight 82% black. The surface keeps every colour in the
   bar working exactly as it does with the lights on, and makes the block read
   as spotlit rather than floating. */
body.lights-off .player {
  position: relative;
  z-index: 90;
  background: var(--bg);
  /* A spread shadow rather than padding: it extends the surface outward
     without changing the box's size, so toggling the lights shifts nothing
     on the page. */
  box-shadow: 0 0 0 var(--sp-4) var(--bg);
  border-radius: var(--radius);
}

@media (prefers-reduced-motion: reduce) {
  .player-lights { transition: none; }
}
.player-server {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--sp-4);
  border: var(--rule);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.player-server:hover { border-color: var(--text); color: var(--text); }
.player-server[aria-current="true"] {
  background: var(--text); border-color: var(--text);
  color: var(--bg); font-weight: var(--fw-bold);
}
.player-note { margin: var(--sp-3) 0 0; color: var(--text-muted); font-size: var(--fs-xs); }

/* -- nothing to play yet ------------------------------------------------
   Sits on .player-stage, so the frame, ratio and surface are the real
   player's — the page keeps its shape until an embed exists. */
.player-pending {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-6);
  text-align: center;
}
.player-pending-icon {
  width: clamp(72px, 18vw, 108px);
  height: auto;
  color: var(--accent-text);
}
.player-pending-title {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text);
}
.player-pending-note {
  margin: 0;
  color: var(--text-muted);
  font-family: var(--font-meta);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

/* A broadcast pulse: rings expand from the core and fade, staggered so one is
   always mid-flight. transform-box: fill-box is what makes transform-origin
   resolve against each circle rather than the whole SVG viewport. */
@keyframes kinema-pulse {
  0%   { opacity: 0;    transform: scale(.5); }
  30%  { opacity: .9; }
  100% { opacity: 0;    transform: scale(1.15); }
}
@keyframes kinema-core {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
.player-pending-icon .pw {
  transform-box: fill-box;
  transform-origin: center;
  animation: kinema-pulse 2.8s cubic-bezier(.2, .6, .2, 1) infinite;
}
/* The stagger, stated in full so all three positions are visible here and the
   first ring is not an unstyled class. */
.player-pending-icon .pw-1 { animation-delay: 0s; }
.player-pending-icon .pw-2 { animation-delay: .6s; }
.player-pending-icon .pw-3 { animation-delay: 1.2s; }
.player-pending-icon .pw-core { animation: kinema-core 2.8s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .player-pending-icon .pw,
  .player-pending-icon .pw-core { animation: none; }
  /* Without motion the rings must still be visible, not stuck mid-fade. */
  .player-pending-icon .pw { opacity: .55; }
}

/* =========================================================================
   15. ARCHIVE HEAD
   ========================================================================= */
.archive-head { padding-block: var(--sp-8) var(--sp-4); border-bottom: var(--rule-heavy); }
.archive-head-title { margin: 0; font-size: var(--fs-2xl); letter-spacing: -.025em; }
.archive-intro {
  margin: var(--sp-6) 0 var(--sp-8);
  padding-left: var(--sp-6);
  border-left: 3px solid var(--accent);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-base);
}
.archive-intro p:first-child { margin-top: 0; }
.archive-intro p:last-child { margin-bottom: 0; }

.archive-head + .card-grid,
.archive-intro + .card-grid { margin-top: var(--sp-8); }

/* =========================================================================
   16. PAGINATION
   ========================================================================= */
.pagination { margin-top: var(--sp-12); }
.pagination-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin: 0; padding: 0;
  list-style: none;
}
.pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px; min-height: 44px;
  padding: 0 var(--sp-3);
  border: var(--rule);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.pagination-link:hover { border-color: var(--text); color: var(--text); }
.pagination-link[aria-current="page"] {
  background: var(--text); border-color: var(--text);
  color: var(--bg); font-weight: var(--fw-bold);
}
.pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-1);
  color: var(--text-muted);
}

/* =========================================================================
   17. ARTICLE   (legal / static pages)
   ========================================================================= */
.article { padding-top: var(--sp-8); }

/* Every rule below targets a BARE ELEMENT, and .article wraps the_content() —
   which on a landing page contains [content_grid], a whole card grid. Written
   as `.article h2` these are specificity (0,1,1) and beat `.card-title`
   (0,1,0), so shortcode cards came out at --fs-xl with a 3rem top margin
   while the same grid on a term archive was correct.
   `:where()` drops them to the element's own (0,0,1): they still style prose,
   and any component dropped into the article now wins by default. Keep new
   element rules here inside the :where(). */
:where(.article) h2 { margin-top: var(--sp-12); font-size: var(--fs-xl); }
:where(.article) h3 { margin-top: var(--sp-8); font-size: var(--fs-lg); }
:where(.article) p,
:where(.article) li { line-height: var(--lh-body); }

/* Prose links. Base `a` is colour: inherit, which is right for cards and nav
   where the whole block is the target, but inside running text a link has to
   be findable — the underline alone is not enough at body weight. The generated
   series/episode intros put links in .synopsis, so it is grouped here rather
   than given a utility class. (.lockup-tagline carries the same generated
   text and colours its own links, in §20.) */
:where(.article) a,
.synopsis a { color: var(--accent-text); }

/* =========================================================================
   18. 404
   ========================================================================= */
.notfound { padding-block: var(--sp-16) var(--sp-8); text-align: center; }
.notfound-code {
  display: block;
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: -.05em;
  color: var(--accent-text);
  line-height: 1;
}
.notfound-text { margin: var(--sp-4) auto var(--sp-8); color: var(--text-muted); }
.notfound .search-form { margin-inline: auto; max-width: 28rem; }

/* =========================================================================
   19. BOTTOM-NAV   (mobile only)
   ========================================================================= */
.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  display: flex;
  background: var(--header-bg);
  border-top: var(--rule-heavy);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav-link {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding-inline: 2px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
}
.bottom-nav-link:hover { color: var(--text); }
body[data-page="home"]    .bottom-nav-link[data-nav="home"],
body[data-page="movies"]  .bottom-nav-link[data-nav="movies"],
body[data-page="dramas"]  .bottom-nav-link[data-nav="dramas"],
body[data-page="tvshows"] .bottom-nav-link[data-nav="tvshows"] { color: var(--accent-text); }
/* Search has no page of its own, so it lights while its panel is open.
   .site-header and .bottom-nav are siblings on <body>. */
.site-header.is-open ~ .bottom-nav .bottom-nav-link[data-nav="search"] { color: var(--accent-text); }

@media (min-width: 64rem) { .bottom-nav { display: none; } }
@media (max-width: 63.999rem) {
  .site-footer { padding-bottom: calc(var(--sp-16) + env(safe-area-inset-bottom)); }
}

/* =========================================================================
   20. DETAIL LAYOUT VARIANTS   (Theme Options → Content Layout)
   ========================================================================= */
.layout-split { display: grid; gap: 0 var(--sp-8); }

@media (min-width: 64rem) {
  .layout-split { grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; }
  .layout-split-aside { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
  .layout-split-main > .section:first-child,
  .layout-split-aside > .section:first-child { margin-top: var(--sp-12); }
  /* the sidebar is one column wide; the two-up info table belongs to the
     full-width layouts */
  .layout-split-aside .info-table { grid-template-columns: 1fr; }
}

/* -- the lockup: the broadsheet head, and the default for detail pages ----
   Full-bleed type instead of a poster-left hero band. The title runs the
   width of the container, a heavy rule closes it, and the facts sit under
   that rule as one letterspaced line rather than a row of chips. The poster
   moves out of the head entirely and into the sidebar, which is what frees
   the title to be set this large. */
.lockup {
  padding-block: var(--sp-8) 0;
  border-bottom: var(--rule-heavy);
}
.lockup-title {
  margin: 0;
  font-size: var(--fs-2xl);
  letter-spacing: -.025em;
}
.lockup-tagline {
  margin: var(--sp-4) 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--text-muted);
}
/* The tagline is the generated intro, which carries a link back to the site.
   Without this it inherits the muted grey above and stops looking like a link
   at all — this is what .hero-tagline a used to do before the hero band went. */
.lockup-tagline a { color: var(--accent-text); }
/* The facts line. Separators are drawn in CSS so the markup stays a plain
   list — same trick the breadcrumbs use. */
.lockup-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  margin: var(--sp-6) 0 0;
  padding: 0 0 var(--sp-4);
  list-style: none;
  color: var(--text-muted);
  font-family: var(--font-meta);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}
.lockup-facts li { display: flex; align-items: baseline; gap: var(--sp-3); }
.lockup-facts li + li::before { content: "·"; color: var(--border); }
.lockup-facts a { color: var(--accent-text); text-decoration: none; }
.lockup-facts a:hover { text-decoration: underline; }
.lockup-facts-status { color: var(--accent-text); }

/* The sidebar poster, which the lockup displaced out of the head. Capped on
   small screens, where the sidebar is just the top of a single column and a
   full-width 2:3 poster would fill the viewport on its own. */
.aside-poster {
  margin: var(--sp-8) 0 var(--sp-6);
  max-width: 180px;
  aspect-ratio: var(--ar-poster);
  overflow: hidden;
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.aside-poster img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 64rem) {
  .aside-poster { max-width: none; margin-top: var(--sp-12); }
  /* the poster already provides the column's top offset */
  .layout-split-aside > .aside-poster + .section { margin-top: 0; }
}

/* The poster inside the Information section (content_layout 3, which has no
   sidebar to put it in). Poster left, facts right, stacked on small screens.

   .info-poster must reset both the max-width and the margins .aside-poster
   sets — that rule drops its cap above 64rem because a 21rem sidebar already
   constrains it, and here the grid track does the constraining instead. Both
   selectors are (0,1,0), so these are declared AFTER the media block above to
   win on source order. */
.info-with-poster { display: grid; gap: var(--sp-6); align-items: start; }
.info-poster { max-width: 180px; margin: 0; }

@media (min-width: 48rem) {
  .info-with-poster { grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-8); }
  .info-poster { max-width: none; margin: 0; }
}

/* content_layout 5 — the poster head: artwork beside the title. The heavy rule
   moves from .lockup up to this wrapper so it spans poster AND text; left on
   the lockup it would stop under the text column and read as a mistake.
   `align-items: end` sits the title block on the poster's baseline, the same
   relationship the old hero band had. */
.poster-head { display: grid; gap: var(--sp-6); border-bottom: var(--rule-heavy); }
.poster-head > .lockup { border-bottom: 0; }
.head-poster { max-width: 180px; margin: var(--sp-8) 0 0; }

@media (min-width: 48rem) {
  .poster-head {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: end;
  }
  .head-poster { max-width: none; margin: var(--sp-8) 0 var(--sp-4); }
}

/* =========================================================================
   21. COMMENTS
   The one area whose markup WordPress part-owns, so this section also carries
   rules for the classes core emits that the theme never writes:
   .children, .logged-in-as, .comment-notes, .form-submit, .bypostauthor.
   ========================================================================= */
.comments {
  margin-top: var(--sp-16);
  padding-top: var(--sp-8);
  border-top: var(--rule-heavy);
}

.comment-list { margin: 0 0 var(--sp-12); padding: 0; list-style: none; }
.comment-list .children {
  margin: var(--sp-6) 0 0 var(--sp-6);
  padding-left: var(--sp-6);
  list-style: none;
  border-left: var(--rule);
}

.comment {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-6) 0;
  border-top: var(--rule);
}
.comment-list > .comment:first-child { border-top: 0; padding-top: 0; }

/* Square, not a circle — the editorial set has no pill shapes, and this reads
   as a block of accent rather than an avatar that failed to load. */
.comment-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  border-radius: var(--radius);
}

.comment-body { flex: 1 1 auto; min-width: 0; }

.comment-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  margin: 0 0 var(--sp-2);
}
.comment-author { font-weight: var(--fw-bold); }
.comment-author a { color: inherit; }
.comment-date {
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.comment-text { line-height: var(--lh-body); }
.comment-text > :last-child { margin-bottom: 0; }

.comment-awaiting-moderation {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.comment-reply { margin: var(--sp-3) 0 0; }
.comment-reply a,
.comment-respond #cancel-comment-reply-link {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* A post marked as written by the post's author. Core adds this class; without
   a rule the distinction silently disappears. */
.comment.bypostauthor > .comment-avatar {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* ── form ──────────────────────────────────────────────────────────────── */
.comment-respond { max-width: 44rem; }

.comment-form-title,
.comment-respond .comment-reply-title {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-lg);
}

.comment-form-field { margin: 0 0 var(--sp-4); }

.comment-form-label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.comment-form-label .required { color: var(--accent-text); }

.comment-form-input {
  display: block;
  width: 100%;
  padding: var(--sp-3);
  background: var(--surface);
  color: var(--text);
  border: var(--rule);
  border-radius: var(--radius);
}
.comment-form-input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
textarea.comment-form-input { resize: vertical; min-height: 8rem; }

.comment-form-hint {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Core emits these two whether or not the theme asks for them. */
.comment-form .logged-in-as,
.comment-form .comment-notes {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.comment-form .logged-in-as a { color: var(--accent-text); }

.comment-form .form-submit { margin: 0; }

@media (max-width: 30rem) {
  .comment { gap: var(--sp-3); }
  .comment-avatar { width: 2rem; height: 2rem; font-size: var(--fs-xs); }
  .comment-list .children { margin-left: var(--sp-3); padding-left: var(--sp-3); }
}

/* =========================================================================
   22. PRINT
   ========================================================================= */
@media print {
  .site-header, .site-footer, .bottom-nav, .player, .pagination, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  a[href]::after { content: " (" attr(href) ")"; font-size: .8em; }
}