@charset "UTF-8";
/* =========================================================================
   DramaHD — the ONE stylesheet.
   Order: 1 tokens · 1b accents · 2 reset/base · 3 layout utils · 4 header/nav · 5 footer
          6 breadcrumbs · 7 cards/grid/badges · 8 section-row · 9 hero
          10 meta-row · 11 synopsis · 12 info-table · 13 episode-list
          14 player · 15 archive-intro · 16 pagination · 17 article · 18 404
          19 bottom-nav · 20 print
   Rule: raw color values live ONLY in section 1. Components use tokens.
   ========================================================================= */

/* =========================================================================
   1. TOKENS
   Light is the base on :root. [data-theme="dark"] overrides COLOR ONLY.
   ========================================================================= */
:root {
  color-scheme: light;

  /* -- color -------------------------------------------------------- */
  --bg:            #f6f7f9;
  --surface:       #ffffff;
  --surface-2:     #eef0f4;
  --text:          #14161a;
  --text-muted:    #5a616e;
  --border:        #e2e5ea;
  --accent:        #e0a530;
  --accent-ink:    #14161a;
  --scrim:         rgba(8, 10, 14, .62);
  --shadow:        0 1px 2px rgba(16, 18, 22, .06), 0 8px 24px rgba(16, 18, 22, .08);

  /* --accent is the FILL (buttons, badges, play button) — dark ink sits on it.
     --accent-text is the same brand hue used as INK on the page background.
     They must be separate: the gold that reads well as a fill only manages
     2.0:1 as text on a light background, where AA needs 4.5:1. Rebranding
     means changing both lines, one hue. */
  --accent-text:   #8a6108;                  /* 5.2:1 on --bg, 5.5:1 on --surface */

  /* derived color tokens (still theme-swappable) */
  --accent-soft:   rgba(224, 165, 48, .16);  /* accent wash: hovers, active pills */
  --overlay:       rgba(8, 10, 14, .78);     /* chips laid over a poster */
  --overlay-ink:   #ffffff;                  /* text on --overlay */
  --header-bg:     rgba(246, 247, 249, .86); /* translucent sticky header */
  --focus:         var(--accent-text);

  /* -- type ---------------------------------------------------------- */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-body);

  --fs-xs: .75rem;   --fs-sm: .875rem;  --fs-base: 1rem;
  --fs-lg: 1.125rem; --fs-xl: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  --fs-2xl: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
  --fs-3xl: clamp(2rem, 1.4rem + 3vw, 3.25rem);

  --lh-tight: 1.15;  --lh-body: 1.6;
  --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;

  /* -- radius / structure -------------------------------------------- */
  --radius-sm:6px; --radius:10px; --radius-lg:16px; --radius-pill:999px;

  /* -- layout --------------------------------------------------------- */
  --container:1200px; --container-narrow:760px; --gutter:clamp(1rem, 4vw, 2rem);
  --header-h:60px;

  /* -- aspect ratios --------------------------------------------------- */
  --ar-poster: 2 / 3;   /* the ONLY image ratio */
  --ar-video:  16 / 9;  /* the embed box only — not an image */

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

[data-theme="dark"] {
  color-scheme: dark;
  --bg:            #0d0f14;
  --surface:       #14171e;
  --surface-2:     #1b1f28;
  --text:          #eef1f6;
  --text-muted:    #9aa2b1;
  --border:        #262b35;
  --accent:        #e6b23d;
  --accent-ink:    #14161a;
  /* on a dark surface the fill colour already clears AA as ink (9.9:1),
     so both accent tokens converge. */
  --accent-text:   #e6b23d;
  --scrim:         rgba(4, 6, 9, .72);
  --shadow:        0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .5);

  --accent-soft:   rgba(230, 178, 61, .14);
  --overlay:       rgba(4, 6, 9, .8);
  --overlay-ink:   #ffffff;
  --header-bg:     rgba(13, 15, 20, .86);
}

/* -------------------------------------------------------------------------
   1b. ACCENT VARIATIONS
   An accent is nothing but the four accent tokens, so a colour option is one
   small block per theme. Set alongside data-theme on <html>:

       <html data-theme="dark" data-accent="blue">

   Omit data-accent for the shipped gold. In WordPress this is a second theme
   option printed next to the first in header.php — still no runtime toggle.

   Every value below is derived, not eyeballed: --accent carries --accent-ink
   at >= 4.6:1, and --accent-text clears 4.6:1 against --bg, --surface, AND
   --accent-soft composited over each of them (the active nav pill draws
   accent text on the soft wash). Worst pairing across all 7 hues is 4.60.
   Re-deriving after a hue change is a contrast job, not a taste job.
   ------------------------------------------------------------------------- */

[data-accent="blue"] {
  --accent:      #619ae5;
  --accent-ink:  #14161a;
  --accent-text: #1f65c1;
  --focus:       var(--accent-text);
  --accent-soft: rgba(97, 154, 229, .16);
}
[data-theme="dark"][data-accent="blue"] {
  --accent:      #84b1eb;
  --accent-ink:  #14161a;
  --accent-text: #5d98e5;
  --focus:       var(--accent-text);
  --accent-soft: rgba(132, 177, 235, .14);
}

[data-accent="green"] {
  --accent:      #61e598;
  --accent-ink:  #14161a;
  --accent-text: #147b3f;
  --focus:       var(--accent-text);
  --accent-soft: rgba(97, 229, 152, .16);
}
[data-theme="dark"][data-accent="green"] {
  --accent:      #84ebaf;
  --accent-ink:  #14161a;
  --accent-text: #1db45c;
  --focus:       var(--accent-text);
  --accent-soft: rgba(132, 235, 175, .14);
}

[data-accent="orange"] {
  --accent:      #e59a61;
  --accent-ink:  #14161a;
  --accent-text: #9e531a;
  --focus:       var(--accent-text);
  --accent-soft: rgba(229, 154, 97, .16);
}
[data-theme="dark"][data-accent="orange"] {
  --accent:      #ebb184;
  --accent-ink:  #14161a;
  --accent-text: #de7e35;
  --focus:       var(--accent-text);
  --accent-soft: rgba(235, 177, 132, .14);
}

[data-accent="purple"] {
  --accent:      #9e47e1;
  --accent-ink:  #ffffff;
  --accent-text: #8c24db;
  --focus:       var(--accent-text);
  --accent-soft: rgba(158, 71, 225, .16);
}
[data-theme="dark"][data-accent="purple"] {
  --accent:      #be84eb;
  --accent-ink:  #14161a;
  --accent-text: #b877e9;
  --focus:       var(--accent-text);
  --accent-soft: rgba(190, 132, 235, .14);
}

[data-accent="red"] {
  --accent:      #dd2c38;
  --accent-ink:  #ffffff;
  --accent-text: #b81e28;
  --focus:       var(--accent-text);
  --accent-soft: rgba(221, 44, 56, .16);
}
[data-theme="dark"][data-accent="red"] {
  --accent:      #eb848b;
  --accent-ink:  #14161a;
  --accent-text: #e76a72;
  --focus:       var(--accent-text);
  --accent-soft: rgba(235, 132, 139, .14);
}

[data-accent="teal"] {
  --accent:      #61e5e3;
  --accent-ink:  #14161a;
  --accent-text: #137675;
  --focus:       var(--accent-text);
  --accent-soft: rgba(97, 229, 227, .16);
}
[data-theme="dark"][data-accent="teal"] {
  --accent:      #84ebe9;
  --accent-ink:  #14161a;
  --accent-text: #1dafad;
  --focus:       var(--accent-text);
  --accent-soft: rgba(132, 235, 233, .14);
}

[data-accent="yellow"] {
  --accent:      #e5c961;
  --accent-ink:  #14161a;
  --accent-text: #7f6815;
  --focus:       var(--accent-text);
  --accent-soft: rgba(229, 201, 97, .16);
}
[data-theme="dark"][data-accent="yellow"] {
  --accent:      #ebd584;
  --accent-ink:  #14161a;
  --accent-text: #bd9a1f;
  --focus:       var(--accent-text);
  --accent-soft: rgba(235, 213, 132, .14);
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  /* guarantees the "no horizontal scroll at any width" pillar */
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-wrap: balance;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

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

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

ul, ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-6); }

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

hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-8) 0; }

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

::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.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2;
        stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-solid { fill: currentColor; stroke: none; }

/* muted note under a section's main content */
.note { margin: var(--sp-4) 0 0; color: var(--text-muted); font-size: var(--fs-sm); }

/* -- buttons ---------------------------------------------------------- */
.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: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.btn:hover { background: var(--accent-soft); border-color: var(--accent); }
.btn:active { transform: translateY(1px); }

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

.btn-ghost { background: transparent; border-color: var(--border); }
.btn-ghost:hover { background: var(--accent-soft); border-color: var(--accent); }

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

.site-header-bar {
  display: flex;
  /* wrap is load-bearing: it is what lets .site-nav drop onto its own
     full-width row when the mobile menu opens. Without it the nav is stuck
     in the logo's row and the open menu is indented by the logo's width. */
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  min-height: var(--header-h);
  padding-block: var(--sp-2);
}

/* CSS-only condense on scroll where supported. No JS, no scroll listeners. */
@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: 48px; padding-block: 0; }
    }
  }
}

.site-logo {
  display: inline-flex;
  align-items: baseline;
  gap: .1em;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -.02em;
  text-decoration: none;
  white-space: nowrap;
}
.site-logo-mark { color: var(--accent-text); }

/* An uploaded logo replaces the wordmark. Height is fixed so the header bar
   keeps its rhythm whatever the file's dimensions — it still clears the 48px
   the bar condenses to on scroll — and width follows the aspect ratio. The
   intrinsic width/height WordPress emits on the <img> prevents any shift. */
.site-logo-img {
  display: block;
  height: 34px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
}

/* The nav IS the collapsible panel. Mobile default: its own full-width row. */
.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; /* only shown once main.js flags JS support — see html.js below */
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 44px; height: 44px;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.site-nav-toggle:hover { border-color: var(--accent); background: var(--accent-soft); }
.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-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  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
   byte-identical across every page (→ header.php). */
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);
  background: var(--accent-soft);
}

/* -- header search ---------------------------------------------------- */
.search-form {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1 1 14rem;
  min-width: 0;
  max-width: 22rem;
  margin-left: auto;
  padding: 0 var(--sp-2) 0 var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}
.search-form:focus-within { border-color: var(--accent); }
.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: 36px;
  padding: var(--sp-1) var(--sp-4);
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  cursor: pointer;
}

/* -- mobile (<64rem) --------------------------------------------------- */
@media (max-width: 63.999rem) {
  /* No JS → the nav is simply always visible on its own row under the logo,
     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; }
  /* the bottom-nav "Search" link targets #s inside the collapsed nav —
     reveal it so the jump lands somewhere visible. */
  html.js .site-nav:has(:target) { display: flex; }

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

  /* .search-form is authored for the header's ROW layout, where its
     `flex: 1 1 14rem` is a width basis. Inside the open menu .site-nav is a
     COLUMN, and flex-basis follows the main axis — so that 14rem becomes a
     224px-tall search pill. Reset the basis and let it size to its content.
     Scoped to .site-nav so the 404 page's standalone search form is
     untouched. */
  .site-nav .search-form {
    flex: none;
    max-width: none;
    margin-left: 0;
    order: -1;
  }
}

@media (min-width: 64rem) {
  /* desktop: the nav shares the logo's row again */
  .site-nav { flex: 1 1 auto; flex-wrap: nowrap; }
  .site-nav-toggle { display: none !important; }
}

/* =========================================================================
   5. SITE FOOTER
   ========================================================================= */
.site-footer {
  margin-top: var(--sp-16);
  padding-block: var(--sp-12) var(--sp-8);
  background: var(--surface);
  border-top: 1px solid var(--border);
  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-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.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); max-width: 40ch; }

.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: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--fs-xs);
}
.site-footer-disclaimer { max-width: 72ch; }

/* =========================================================================
   6. BREADCRUMBS
   ========================================================================= */
.breadcrumbs { padding-block: var(--sp-4); font-size: var(--fs-sm); }
.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);
}
.breadcrumbs-list li { display: flex; align-items: center; gap: var(--sp-2); }
.breadcrumbs-list li + li::before {
  content: "/";
  color: var(--border);
}
.breadcrumbs a { text-decoration: none; color: var(--text-muted); }
.breadcrumbs a:hover { color: var(--accent-text); }
.breadcrumbs [aria-current="page"] { color: var(--text); }

/* =========================================================================
   7. CARD · CARD-GRID · BADGE   (poster 2:3 is the only card type)
   ========================================================================= */
.card-grid {
  display: grid;
  /* 165px, not 150: at a 1200px container 150 yields 7 columns of ~155px,
     which is smaller than posters want to be read at on a desktop. */
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: var(--sp-6) var(--sp-4);
  margin: 0; padding: 0;
  list-style: none;
}
/* Phones must still show two posters side by side. The track minimum above is
   a desktop figure: on a 360px screen the container leaves 328px, while two
   165px tracks plus the 16px gap need 346px — so auto-fill drops to a single
   column and each card balloons to full width. Pin two columns below the point
   where auto-fill can reach two on its own (~390px). */
@media (max-width: 30rem) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

.card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius);
  transition: transform var(--dur) var(--ease);
}

.card-media {
  position: relative;
  aspect-ratio: var(--ar-poster);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-body { padding-top: var(--sp-2); }
.card-title {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.35;
  /* two-line clamp keeps every row the same height */
  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-size: var(--fs-xs);
}
/* The one fact that decides a click on a catalogue card: is this still
   running, and how far in is it. Worth the accent. */
.card-progress { color: var(--accent-text); font-weight: var(--fw-medium); }

/* Hover lift: pointer devices only, and reduced-motion already neutralised. */
@media (hover: hover) and (pointer: fine) {
  .card-link:hover { transform: translateY(-3px); }
  .card-link:hover .card-media,
  .card-link:focus-visible .card-media {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), var(--shadow);
  }
}

/* -- badge ------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: .2em .55em;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge-accent { background: var(--accent); color: var(--accent-ink); }
.badge-outline { background: transparent; border: 1px solid var(--border); color: var(--text-muted); }

/* Badge sitting on a poster corner.
   Quality (HD/4K/CAM) is reference information, not news — it sits back so
   that .card-badge-accent ("New") is the only thing that calls out. */
.card-badge {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: 1;
  background: var(--overlay);
  color: var(--overlay-ink);
  font-weight: var(--fw-medium);
  opacity: .82;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.card-badge-right { left: auto; right: var(--sp-2); }
.card-badge-accent {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: var(--fw-bold);
  opacity: 1;
}

/* =========================================================================
   8. SECTION-ROW  (home section = header + grid capped to 1–2 rows)
   ========================================================================= */
.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-4);
}
.section-row-title { margin: 0; font-size: var(--fs-xl); }
.section-row-more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--accent-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  white-space: nowrap;
}
.section-row-more:hover { text-decoration: underline; }

/* Home rows are capped by rendering a fixed item count (12) in the markup —
   in WP that is simply posts_per_page. No scroll row, no clipping hack:
   the same auto-fill grid just reflows into fewer/more rows by width. */

/* =========================================================================
   8b. TOP 10  (ranked grid — the numeral is the artwork)
   A catalogue site has no key art to lean on, so the visual identity here
   comes from type: an outlined numeral beside each poster. Semantically an
   <ol>, because the order IS the content.
   ========================================================================= */
.top10-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-6) var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* min-width:0 so a long title cannot force the grid column wider */
.top10 { min-width: 0; }
.top10-link {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 0 var(--sp-2);
  color: inherit;
  text-decoration: none;
}
.top10-rank {
  grid-row: 1;
  font-size: clamp(3rem, 2rem + 5vw, 5rem);
  font-weight: var(--fw-bold);
  line-height: .76;
  letter-spacing: -.06em;
  color: var(--text-muted);
  transition: color var(--dur) var(--ease);
}
/* Outlined where supported; a solid muted numeral is the fallback, so the
   rank is never invisible. */
@supports (-webkit-text-stroke: 2px currentColor) {
  .top10-rank {
    color: transparent;
    -webkit-text-stroke: 2px var(--text-muted);
    transition: -webkit-text-stroke-color var(--dur) var(--ease);
  }
}
.top10-media {
  grid-row: 1;
  aspect-ratio: var(--ar-poster);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: border-color var(--dur) var(--ease);
}
.top10-media img { width: 100%; height: 100%; object-fit: cover; }
.top10-body { grid-column: 1 / -1; padding-top: var(--sp-2); }

@media (hover: hover) and (pointer: fine) {
  .top10-link:hover .top10-media,
  .top10-link:focus-visible .top10-media { border-color: var(--accent); }
  .top10-link:hover .top10-rank { color: var(--accent-text); }
}
@supports (-webkit-text-stroke: 2px currentColor) {
  @media (hover: hover) and (pointer: fine) {
    .top10-link:hover .top10-rank {
      color: transparent;
      -webkit-text-stroke-color: var(--accent);
    }
  }
}

/* =========================================================================
   9. HERO  (blurred poster as ambient background — no backdrop asset)
   ========================================================================= */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.hero-bg {
  position: absolute;
  inset: -8%;
  z-index: -2;
  width: 116%;
  height: 116%;
  /* the base `img { max-width:100% }` would clamp the overscan away and let
     the blur's soft edge show inside the hero — opt out explicitly. */
  max-width: none;
  object-fit: cover;
  filter: blur(28px) saturate(1.15);
  transform: scale(1.1);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim);
}
/* Second scrim, weighted to the bottom where the hero text actually sits.
   The flat scrim alone is not enough: over a light poster it composites to
   mid-grey, where the accent-coloured kicker manages only 2.6:1. Stacking
   this gradient takes the same worst case to 6.3:1 (white text 13.7:1) and
   lets more of the blurred poster show through at the top. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, transparent 30%, var(--scrim));
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  padding-block: var(--sp-8);
  color: var(--overlay-ink);
}
.hero-poster {
  /* single-column grid on mobile: the poster has a fixed width, so without
     this it would sit hard against the leading edge. */
  justify-self: center;
  width: min(190px, 44vw);
  aspect-ratio: var(--ar-poster);
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--surface-2);
}
.hero-poster img { width: 100%; height: 100%; object-fit: cover; }


.hero-title { margin: 0 0 var(--sp-3); font-size: var(--fs-2xl); }
.hero-tagline { margin: 0 0 var(--sp-4); opacity: .88; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

/* Player hero (movie + episode): the crisp inset is the 16:9 facade rather
   than the 2:3 poster, so the thing the visitor came for is the first thing
   on the page — while the blurred poster still supplies the atmosphere. */
.hero-player .hero-inner {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: var(--sp-6);
}
.hero-player .hero-stage { width: 100%; max-width: 940px; }
.hero-player .hero-body { width: 100%; max-width: 940px; }
/* The title block now sits ABOVE the player, so its trailing margin would
   stack on top of the grid gap. Let the grid own the spacing. */
.hero-player .hero-body > :last-child { margin-bottom: 0; }
.hero-player .hero-title { font-size: var(--fs-2xl); }
@media (min-width: 40rem) {
  .hero-player .hero-inner { padding-block: var(--sp-8); }
}

/* The hero scrim is dark in BOTH themes, so anything on it needs light ink.
   That means accent text inside a hero must use --accent (the bright fill),
   never --accent-text, which in the light theme is a dark brown chosen for
   contrast against a pale page — on this scrim it would nearly disappear. */
.hero .meta-row-item { background: var(--overlay); color: var(--overlay-ink); border-color: transparent;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero .meta-row-item-plain { background: transparent; color: var(--overlay-ink);
  backdrop-filter: none; -webkit-backdrop-filter: none; }
.hero .meta-row-item-status { background: var(--overlay); color: var(--accent); }
.hero .meta-row-item-link a,
.hero .meta-row-item a:hover { color: var(--accent); }
.hero .btn-ghost { color: var(--overlay-ink); border-color: var(--overlay-ink); }
.hero .btn-ghost:hover { background: var(--overlay); border-color: var(--accent); }
/* The player is an opaque --surface panel, so it must NOT inherit the hero's
   light-on-scrim ink — in the light theme that is white text on a white
   panel. Every current child sets its own colour, but this stops the next
   one added from being invisible. */
.hero .player { color: var(--text); }

@media (min-width: 40rem) {
  .hero-inner {
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: var(--sp-8);
    padding-block: var(--sp-12);
  }
  /* two columns now: the poster returns to the leading edge beside the text */
  .hero-poster { justify-self: start; width: 220px; }
}

/* =========================================================================
   9b. HOME HERO  —  two interchangeable backdrops
   The shell never changes: the section holds NO decorative elements at all.
   The backdrop is drawn on ::before and the legibility layer on ::after, so
   choosing a look is swapping ONE class on the section:

       <section class="home-hero home-hero-wall">      poster grid
       <section class="home-hero home-hero-editorial"> hairlines + big type

   Both are pure CSS — no images, no requests, nothing to lazy-load and no
   layout shift — and both use only tokens, so they follow the theme and
   every accent variation without further work.
   ========================================================================= */
.home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

/* Backdrop layer. Variants fill in background-image; the inset overscan is
   shared so a rotated backdrop still covers the corners. */
.home-hero::before {
  content: "";
  position: absolute;
  inset: -14% -12%;
  z-index: -2;
  background-color: var(--surface-2);
}

/* Legibility layer: a clearing behind the copy, then a fade into the page. */
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(58% 68% at 50% 48%, var(--bg) 0%, transparent 72%),
    linear-gradient(to bottom, transparent 45%, var(--bg));
}

.home-hero-inner {
  position: relative;
  padding-block: var(--sp-16);
  text-align: center;
}
.home-hero-title { margin: 0 auto var(--sp-3); max-width: 22ch; font-size: var(--fs-3xl); }
.home-hero-lede {
  margin: 0 auto var(--sp-6);
  max-width: 52ch;
  font-size: var(--fs-lg);
  color: var(--text-muted);
}
.home-hero-search { margin-inline: auto; max-width: 34rem; }
.home-hero-search .search-form-input { min-height: 48px; }
.home-hero-search .search-form-submit { min-height: 40px; padding-inline: var(--sp-6); }

@media (max-width: 39.999rem) {
  .home-hero-inner { padding-block: var(--sp-12); }
}

/* ---- Option 1 — POSTER WALL -------------------------------------------
   A tilted grid of 2:3 rectangles: says "large catalogue" without loading a
   single poster. Best where the product IS the size of the library. */
.home-hero-wall { --tile-w: 190px; --tile-h: 285px; --tile-gap: 10px; }
.home-hero-wall::before {
  transform: rotate(-4deg);
  background-image:
    radial-gradient(38% 50% at 16% 18%, var(--accent-soft) 0%, transparent 70%),
    radial-gradient(42% 55% at 84% 76%, var(--accent-soft) 0%, transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 var(--tile-w),
      var(--bg) var(--tile-w) calc(var(--tile-w) + var(--tile-gap))),
    repeating-linear-gradient(180deg, transparent 0 var(--tile-h),
      var(--bg) var(--tile-h) calc(var(--tile-h) + var(--tile-gap)));
}
@media (max-width: 39.999rem) {
  .home-hero-wall { --tile-w: 120px; --tile-h: 180px; --tile-gap: 8px; }
}

/* ---- Option 2 — EDITORIAL ---------------------------------------------
   Diagonal hairlines, an accent rule along the top and oversized left-set
   type. Magazine rather than storefront; strongest when the headline is the
   message and there is no artwork to show. */
.home-hero-editorial { border-top: 3px solid var(--accent); }
.home-hero-editorial::before {
  background-color: var(--bg);
  background-image:
    radial-gradient(40% 60% at 88% 28%, var(--accent-soft) 0%, transparent 68%),
    repeating-linear-gradient(135deg, var(--surface-2) 0 1px, transparent 1px 12px);
}
/* copy is left-set here, so the clearing is weighted left rather than centred */
.home-hero-editorial::after {
  background-image:
    linear-gradient(to right, var(--bg) 0%, transparent 72%),
    linear-gradient(to bottom, transparent 60%, var(--bg));
}
.home-hero-editorial .home-hero-inner { text-align: left; }
.home-hero-editorial .home-hero-title {
  margin-inline: 0;
  max-width: 15ch;
  font-size: clamp(2.4rem, 1.4rem + 5vw, 4.25rem);
  letter-spacing: -.02em;
}
.home-hero-editorial .home-hero-lede { margin-inline: 0; }
.home-hero-editorial .home-hero-search { margin-inline: 0; }

/* =========================================================================
   10. META-ROW
   ========================================================================= */
.meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
}
.meta-row-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  white-space: nowrap;
}
.meta-row-item a { text-decoration: none; }
.meta-row-item a:hover { color: var(--accent-text); }

/* THREE TIERS, so the row stops reading as undifferentiated pill soup:
   1. rating + status  — what people judge on. Filled, coloured, bold.
   2. taxonomy links   — navigation. Keeps the pill, takes accent ink.
   3. plain facts      — year, runtime, episode count. Reference only, so
                         they drop the pill entirely and read as quiet text. */
.meta-row-item-rating { color: var(--text); font-weight: var(--fw-medium); }
.meta-row-item-rating .icon { color: var(--accent-text); fill: var(--accent-text); }

.meta-row-item-status {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-text);
  font-weight: var(--fw-medium);
}

.meta-row-item-link a { color: var(--accent-text); }

.meta-row-item-plain {
  padding-inline: 0;
  background: none;
  border-color: transparent;
  gap: var(--sp-2);
  font-variant-numeric: tabular-nums;
}

/* A small icon gives the pill-less facts their own structure, so they read as
   deliberate rather than as text that lost its chip. */
.meta-row-item .icon { width: 1em; height: 1em; opacity: .75; }
.meta-row-item-rating .icon { opacity: 1; }

/* the status is a state, not another fact — mark it as one */
.meta-row-item-status::before {
  content: "";
  flex: none;
  width: .45em;
  height: .45em;
  border-radius: 50%;
  background: currentColor;
}

.meta-row-item-link a:hover { text-decoration: underline; text-underline-offset: .2em; }

/* =========================================================================
   11. SECTIONS / SYNOPSIS
   ========================================================================= */
.section { margin-top: var(--sp-12); }
.section-title {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-xl);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.synopsis { color: var(--text); }
.synopsis p { line-height: var(--lh-body); }
.synopsis-more { margin-top: var(--sp-3); }
.synopsis-more > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  color: var(--accent-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  list-style: none;
}
.synopsis-more > summary::-webkit-details-marker { display: none; }
.synopsis-more > summary::after { content: "▾"; }
.synopsis-more[open] > summary::after { content: "▴"; }
.synopsis-more[open] > summary .synopsis-more-label-closed,
.synopsis-more:not([open]) > summary .synopsis-more-label-open { display: none; }
.synopsis-more > *:not(summary) { margin-top: var(--sp-3); }

@media (min-width: 40rem) {
  /* on wider screens the full text is always shown; the toggle is redundant */
  .synopsis-more > summary { display: none; }
  .synopsis-more > *:not(summary) { display: block !important; margin-top: 0; }
}

/* =========================================================================
   12. INFO-TABLE  (<dl>)
   ========================================================================= */
.info-table {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.info-table-row {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
}
.info-table-row:first-child { border-top: 0; }
.info-table dt { color: var(--text-muted); font-size: var(--fs-sm); }
.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 (max-width: 29.999rem) {
  .info-table-row { grid-template-columns: 1fr; gap: var(--sp-1); }
}

/* A drama's information block runs to 14 rows. Two columns on a wide screen
   halves the scroll without touching the markup or the <dl> semantics. */
@media (min-width: 64rem) {
  .info-table { grid-template-columns: 1fr 1fr; }
  .info-table-row:nth-child(2) { border-top: 0; }
  .info-table-row:nth-child(odd) { border-right: 1px solid var(--border); }
  /* an odd number of rows leaves the last cell alone on its line */
  .info-table-row:last-child:nth-child(odd) { border-right: 0; }
}

/* =========================================================================
   13. EPISODE-LIST  (flat text rows — no images, no seasons)
   ========================================================================= */
.episode-list {
  margin: 0; padding: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.episode-list-item + .episode-list-item { border-top: 1px solid var(--border); }

/* An episode's title IS "<series name> Ep N", so every row carries that one
   string and the row is the same shape everywhere — series pages and the
   cross-series home list alike. There is no separate number chip: it would
   just restate the "Ep N" already at the end of the title. */
.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-4);
  color: inherit;
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}
.episode-list-link:hover { background: var(--surface-2); }
.episode-list-link[aria-current="page"] { background: var(--accent-soft); }

.episode-list-title {
  flex: 1 1 10rem;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
/* The full title is "<series> Ep N" everywhere, which is right as data but
   repeats the series name down every row of a series page. Dimming that part
   keeps the episode number scannable without changing the title itself. */
.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);
}

@media (min-width: 40rem) {
  /* title takes the slack, meta sits at the trailing edge */
  .episode-list-meta { margin-left: auto; flex-wrap: nowrap; }
}

/* compact variant used for "Recently added episodes" on the home page */
.episode-list-compact .episode-list-link { min-height: 48px; }

/* -- numbered jump grid ------------------------------------------------
   Plain numbers, nothing else: on a 24-episode run this is a faster way to
   reach one episode than scanning rows of dates. Sits above the detailed
   list, which keeps air dates and runtimes. */
.episode-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  padding: 0;
  list-style: none;
}
.episode-grid-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0 var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  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(--accent); }
.episode-grid-link[aria-current="page"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: var(--fw-bold);
}

/* -- prev / next episode nav ------------------------------------------- */
.ep-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.ep-nav-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 56px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  font-size: var(--fs-sm);
}
.ep-nav-link:hover { border-color: var(--accent); background: var(--accent-soft); }
.ep-nav-link-prev { justify-content: flex-start; text-align: left; }
.ep-nav-link-next { justify-content: flex-end; text-align: right; }
.ep-nav-label { display: block; color: var(--text-muted); font-size: var(--fs-xs); }

/* =========================================================================
   14. PLAYER  (facade over the poster + server tabs; iframe only on click)
   ========================================================================= */
.player {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.player-stage {
  position: relative;
  aspect-ratio: var(--ar-video);
  background: var(--surface-2);
  overflow: hidden;
}
/* the poster reused as the video thumbnail — the only image we have */
.player-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.62) saturate(1.05);
}
.player-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim);
  opacity: .35;
  pointer-events: none;
}
.player-stage > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 2;
}
/* once playing, the facade art + scrim get out of the way */
.player.is-playing .player-poster,
.player.is-playing .player-play,
.player.is-playing .player-hint { display: none; }
.player.is-playing .player-stage::after { display: none; }

.player-play {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--overlay-ink);
  cursor: pointer;
}
.player-play-icon {
  display: grid;
  place-items: center;
  width: 68px; height: 68px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 50%;
  box-shadow: var(--shadow);
  transition: transform var(--dur) var(--ease);
}
.player-play-icon .icon { width: 28px; height: 28px; fill: currentColor; stroke: none; margin-left: 3px; }
.player-play:hover .player-play-icon { transform: scale(1.08); }
.player-play-label { font-size: var(--fs-sm); font-weight: var(--fw-medium); }

.player-hint {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: var(--sp-3) var(--sp-4);
  color: var(--overlay-ink);
  font-size: var(--fs-xs);
  opacity: .8;
  text-align: center;
  pointer-events: none;
}

/* -- server tabs (real links → work with JS off) ------------------------ */
.player-servers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
}
.player-servers-label {
  margin-right: var(--sp-2);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.player-server {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.player-server:hover { color: var(--text); border-color: var(--accent); }
.player-server[aria-current="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.player-note {
  padding: 0 var(--sp-4) var(--sp-3);
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

/* =========================================================================
   15. ARCHIVE HEAD + INTRO
   ========================================================================= */
.archive-head { padding-block: var(--sp-6) var(--sp-2); }
.archive-head-title { margin-bottom: var(--sp-2); font-size: var(--fs-2xl); }
.archive-head-count { color: var(--text-muted); font-size: var(--fs-sm); }

.archive-intro {
  margin: var(--sp-4) 0 var(--sp-8);
  padding: var(--sp-4) var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* -- genre tiles -------------------------------------------------------
   Genre is the main browse surface after search, so on the home page it gets
   tiles with a title count rather than another line of identical chips.
   The .filters chip list below is still used for in-archive filtering. */
.genre-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.genre-tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--sp-1);
  min-height: 88px;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.genre-tile-name { font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: 1.2; }
.genre-tile-count { font-size: var(--fs-xs); color: var(--text-muted); }
@media (hover: hover) and (pointer: fine) {
  .genre-tile:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    transform: translateY(-2px);
  }
}

/* -- filter chips (real links) ----------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-6);
  padding: 0;
  list-style: none;
}
.filters-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.filters-link:hover { border-color: var(--accent); color: var(--text); }
.filters-link[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: var(--fw-medium); }

/* Home hero's genre shortcuts. This lives HERE, not up in the home-hero
   section, on purpose: the element carries both .filters and
   .home-hero-genres, both are single-class selectors of equal specificity,
   so whichever is declared last wins. Declared earlier it was silently
   losing its margin to .filters above. */
.home-hero-genres {
  justify-content: center;
  margin: var(--sp-8) 0 0;
}
.home-hero-editorial .home-hero-genres { justify-content: flex-start; }

/* =========================================================================
   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);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.pagination-link:hover { border-color: var(--accent); color: var(--text); }
.pagination-link[aria-current="page"] {
  background: var(--accent); border-color: var(--accent);
  color: var(--accent-ink); font-weight: var(--fw-bold);
}
.pagination-ellipsis {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  color: var(--text-muted);
}

/* =========================================================================
   17. ARTICLE (legal / static pages)
   ========================================================================= */
.article { padding-block: var(--sp-6); }
.article-meta { margin-bottom: var(--sp-8); color: var(--text-muted); font-size: var(--fs-sm); }
.article-body > h2 { margin-top: var(--sp-12); font-size: var(--fs-xl); }
.article-body > h3 { margin-top: var(--sp-8); font-size: var(--fs-lg); }
.article-body > ul, .article-body > ol { margin-bottom: var(--sp-4); }
.article-body li + li { margin-top: var(--sp-2); }
.article-body 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);
  color: var(--accent-text);
  line-height: 1;
}
.notfound-text { margin: var(--sp-4) auto var(--sp-8); max-width: 46ch; color: var(--text-muted); }
.notfound .search-form { margin-inline: auto; max-width: 28rem; }

/* =========================================================================
   19. BOTTOM-NAV (mobile only, optional companion to the hamburger)
   ========================================================================= */
.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  display: flex;
  background: var(--header-bg);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  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: var(--sp-2);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  text-decoration: none;
}
.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 instead.
   .site-header and .bottom-nav are siblings on <body>, which is what lets the
   header's state reach down here. */
.site-header.is-open ~ .bottom-nav .bottom-nav-link[data-nav="search"] { color: var(--accent-text); }

/* Five tabs, not three: at 360px each gets ~72px, so the horizontal padding
   has to come off or "TV Shows" wraps onto a second line and the bar grows. */
.bottom-nav-link { padding-inline: 2px; }
.bottom-nav-link { white-space: nowrap; }

@media (min-width: 64rem) { .bottom-nav { display: none; } }
@media (max-width: 63.999rem) {
  /* keep the fixed bar from covering the last of the footer */
  .site-footer { padding-bottom: calc(var(--sp-16) + env(safe-area-inset-bottom)); }
}

/* =========================================================================
   20. DETAIL LAYOUT VARIANTS   (Theme Options → Content Layout)

   The only rules in this stylesheet that are NOT in the html/ prototype: that
   file documents one detail design, these are the theme's five selectable
   arrangements of it. Two of the five need structure the prototype has no
   counterpart for — a sticky information sidebar, and a compact head that
   replaces the hero band. Everything else reuses existing components.
   ========================================================================= */

/* -- split: information becomes a sidebar ------------------------------- */
.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; }

  /* The aside holds its place while a long episode list scrolls past it —
     the whole reason to pull information out of the main column. */
  .layout-split-aside { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }

  /* Each column starts a new flow, so both need the section's own top margin
     rather than inheriting one from a preceding sibling that is now elsewhere. */
  .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 and would wrap badly in 21rem. */
  .layout-split-aside .info-table { grid-template-columns: 1fr; }
  .layout-split-aside .info-table-row { border-right: 0; }
  .layout-split-aside .info-table-row:nth-child(2) { border-top: 1px solid var(--border); }
  .layout-split-aside .info-table-row:first-child { border-top: 0; }
}

/* -- compact head: one tight row instead of the hero band ---------------- */
.title-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-6);
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--border);
}
.title-bar-poster {
  flex: none;
  width: 76px;
  aspect-ratio: var(--ar-poster);
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  box-shadow: var(--shadow);
}
.title-bar-poster img { width: 100%; height: 100%; object-fit: cover; }

.title-bar-body { flex: 1 1 18rem; min-width: 0; }
/* Outside .hero these inherit page ink, which is what we want — but the title
   is set for a full-bleed band, so bring it down to section scale. */
.title-bar .hero-title { margin-bottom: var(--sp-2); font-size: var(--fs-xl); }
.title-bar .meta-row { margin-bottom: 0; }
.title-bar .hero-actions { margin-top: var(--sp-4); }

/* =========================================================================
   21. PRINT
   ========================================================================= */
@media print {
  /* Print is just another theme: override the tokens, not the components. */
  :root, [data-theme="dark"] {
    color-scheme: light;
    --bg:         #ffffff;
    --surface:    #ffffff;
    --surface-2:  #ffffff;
    --text:       #000000;
    --text-muted: #333333;
    --border:     #cccccc;
    --accent-soft: transparent;
    --shadow:     none;
  }
  .site-header, .site-footer, .bottom-nav, .player, .pagination, .skip-link { display: none !important; }
  body { background: var(--bg); color: var(--text); }
  /* expand every collapsed synopsis so the printed page is complete */
  .synopsis-more > *:not(summary) { display: block !important; }
  .synopsis-more > summary { display: none; }
}