/* ==========================================================================
   ดูหนังบ้านเรา — stylesheet
   Written from scratch. Black page, one red accent, no shadows, no webfonts.
   Mobile first: base styles are for a 390px-wide phone, then 640 / 960 / 1280.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */

:root {
  /* colour */
  --bg:            #000000;
  --panel:         #1b1b1b;
  --panel-2:       #121212;
  --red-deep:      #b80000;
  --red:           #d8322f;
  --ink:           #ffffff;
  --ink-muted:     #dfdfdf;
  --ink-dim:       #858585;
  --line:          #262626;

  /* type */
  --font: "Kanit", "Noto Sans Thai", "Sarabun", "Leelawadee UI",
          "Tahoma", system-ui, sans-serif;
  --fs-base: 16px;
  --fs-xs:   12px;
  --fs-s:    13.6px;
  --fs-m:    15px;
  --fs-l:    19.2px;
  --fs-xl:   27.2px;

  /* spacing */
  --sp-1: 3px;
  --sp-2: 5px;
  --sp-3: 8px;
  --sp-4: 10px;
  --sp-5: 20px;

  --radius: 5px;
  --radius-s: 4px;

  /* layout */
  --gutter: 14px;
  --header-h: 56px;
  --maxw: 1440px;
}

/* --- 2. Reset / base ----------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.5;
  /* Thai needs a little more room between lines than Latin. */
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Stop any single long Thai word from pushing the page sideways. */
body,
p,
h1, h2, h3,
li,
figcaption { overflow-wrap: break-word; }

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

a {
  color: inherit;
  text-decoration: none;
}

a:hover { color: var(--red); }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.3;
}

h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-l); }
h3 { font-size: var(--fs-m); }

p { margin: 0 0 var(--sp-3); }

/* Visible keyboard focus everywhere. */
:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

/* Skip link: hidden until focused. */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -60px;
  z-index: 100;
  padding: var(--sp-3) var(--sp-4);
  background: var(--red);
  color: #fff;
  border-radius: var(--radius-s);
  font-weight: 700;
  transition: top .15s ease;
}
.skip-link:focus {
  top: var(--sp-4);
  color: #fff;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- 3. Shell ----------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* --- 4. Header ---------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--header-h);
  padding-block: var(--sp-2);
}

/* Logo: a red rounded square with two letters, no image file. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 0 0 auto;
  font-weight: 700;
  font-size: var(--fs-m);
  letter-spacing: .01em;
  white-space: nowrap;
}

.logo__mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-s);
  background: linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%);
  color: #fff;
  font-size: var(--fs-s);
  font-weight: 700;
  line-height: 1;
}

.logo__text { color: var(--ink); }
.logo__text em {
  font-style: normal;
  color: var(--red);
}

/* Search form: sits in the header on phones too, but shrinks. */
.search {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  min-width: 0;
  max-width: 520px;
  margin-inline: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.search__label {
  /* The input has its own visually hidden label; this wrapper needs none. */
  display: contents;
}

.search__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 var(--sp-4);
  height: 38px;
  background: transparent;
  border: 0;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-s);
}

.search__input::placeholder {
  color: var(--ink-dim);
  opacity: 1;
}

.search__input:focus {
  outline: none;
}

.search:focus-within {
  border-color: var(--red);
  outline: 2px solid var(--red);
  outline-offset: 1px;
}

.search__btn {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  background: var(--red-deep);
  color: #fff;
}
.search__btn:hover,
.search__btn:focus-visible { background: var(--red); }

.search__icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Menu button — phones only. */
.menu-btn {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--panel);
}
.menu-btn:hover { border-color: var(--red); color: var(--red); }

.menu-btn__bars,
.menu-btn__bars::before,
.menu-btn__bars::after {
  display: block;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  content: "";
  position: relative;
}
.menu-btn__bars::before { position: absolute; top: -5px; }
.menu-btn__bars::after  { position: absolute; top: 5px; }

/* --- 5. Primary navigation ---------------------------------------------- */

.site-nav {
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.site-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-block: var(--sp-3) var(--sp-4);
}

.site-nav__list a {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-s);
  background: var(--panel-2);
  color: var(--ink-muted);
  font-size: var(--fs-s);
  font-weight: 500;
}

.site-nav__list a:hover,
.site-nav__list a:focus-visible {
  background: var(--panel);
  color: #fff;
}

.site-nav__list a[aria-current="page"] {
  background: var(--red-deep);
  color: #fff;
}

/* Closed state on a phone. JS flips [hidden] off; without JS the list shows. */
.site-nav[data-open="false"] .site-nav__list { display: none; }

/* --- 6. Page intro ------------------------------------------------------ */

.intro {
  padding-block: var(--sp-5) var(--sp-4);
}

.intro__kicker {
  display: inline-block;
  margin-bottom: var(--sp-2);
  padding: 1px var(--sp-3);
  border-radius: 999px;
  background: var(--red-deep);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .02em;
}

.intro__title {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-2);
}

.intro__lead {
  color: var(--ink-muted);
  font-size: var(--fs-s);
  max-width: 62ch;
  margin: 0;
}

/* --- 7. Hero / featured ------------------------------------------------- */

.hero {
  padding-block: var(--sp-4) var(--sp-5);
}

.hero__inner {
  display: grid;
  gap: var(--sp-4);
}

/* The big poster: a pure CSS gradient painting, set from JS. */
.hero__poster {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 15% 15%, hsl(var(--h1, 350) 70% 42%) 0%, transparent 60%),
    radial-gradient(110% 120% at 85% 80%, hsl(var(--h2, 20) 65% 30%) 0%, transparent 65%),
    linear-gradient(160deg, #1b1b1b 0%, #000 100%);
}

/* Soft diagonal sheen so the flat gradient reads as artwork. */
.hero__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(255,255,255,.16) 0%, transparent 38%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 6px);
  mix-blend-mode: overlay;
}

.hero__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-self: center;
}

.hero__flag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  align-self: flex-start;
  padding: 2px var(--sp-3);
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
}

.hero__title {
  font-size: var(--fs-xl);
}

.hero__title a:hover { color: var(--red); }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  color: var(--ink-dim);
  font-size: var(--fs-xs);
}

.hero__text {
  color: var(--ink-muted);
  font-size: var(--fs-s);
  margin: 0;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

/* --- 8. Buttons --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius);
  font-size: var(--fs-s);
  font-weight: 700;
  line-height: 1.2;
  min-height: 42px;
}

.btn--primary {
  background: var(--red);
  color: #fff;
}
.btn--primary:hover,
.btn--primary:focus-visible { background: var(--red-deep); color: #fff; }

.btn--ghost {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink-muted);
}
.btn--ghost:hover { border-color: var(--red); color: #fff; }

/* --- 9. Section headings ------------------------------------------------ */

.section {
  padding-block: var(--sp-4) var(--sp-5);
}

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-left: 4px solid var(--red);
  padding-left: var(--sp-3);
}

.section__title {
  font-size: var(--fs-l);
}

.section__note {
  color: var(--ink-dim);
  font-size: var(--fs-xs);
  margin: 0;
  white-space: nowrap;
}

.section__more {
  color: var(--red);
  font-size: var(--fs-xs);
  font-weight: 500;
}

/* --- 10. Movie cards ---------------------------------------------------- */

/* The card anatomy is fixed: rating badge top-left, quality badge top-right,
   poster, red audio strip, two-line clamped title. */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}

.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.card:hover,
.card:focus-within {
  border-color: var(--red);
}

/* One click on the front page starts the film: the play chip sits on the
   poster, as a link of its own so the card is never a link inside a link. */
.card__poster {
  position: relative;
  display: block;
}

.card__play {
  position: absolute;
  right: var(--sp-2);
  bottom: var(--sp-2);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .62);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
}

.card__play:hover,
.card__play:focus-visible {
  background: var(--red);
  border-color: var(--red);
}

.card__play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.card__play-icon {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-left: 11px solid currentColor;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.card__media {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background:
    radial-gradient(100% 80% at 20% 10%, hsl(var(--h1, 350) 68% 40%) 0%, transparent 62%),
    radial-gradient(120% 100% at 80% 90%, hsl(var(--h2, 20) 62% 28%) 0%, transparent 68%),
    linear-gradient(155deg, #1b1b1b 0%, #050505 100%);
}

/* Diagonal light streak + fine grade lines: makes the gradient look printed. */
.card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(125deg, rgba(255,255,255,.14) 0%, transparent 42%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 5px);
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Real posters: one picture, no sheen over it. */
.card__media--photo::after,
.detail__poster--photo::after { display: none; }

.card__img,
.detail__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* The hero box is 16:9 and a poster is 2:3, so the poster sits inside its own
   blurred self instead of being cropped to a strip. */
.hero__poster--photo { background: #000; }

.hero__poster--photo::after { display: none; }

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.hero__img--back {
  object-fit: cover;
  filter: blur(18px) saturate(1.15) brightness(.42);
  transform: scale(1.12);
}

/* A big faint letter from the title so two art pieces never look identical. */
.card__mono {
  position: absolute;
  inset: auto -4% 7% auto;
  font-size: 74px;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, .14);
  letter-spacing: -.04em;
  user-select: none;
  pointer-events: none;
}

.card__badge {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px var(--sp-2);
  border-radius: var(--radius-s);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.5;
}

.card__badge--rating {
  top: var(--sp-3);
  left: var(--sp-3);
  background: rgba(0, 0, 0, .78);
  color: #ffd24a;
  border: 1px solid rgba(255, 210, 74, .35);
}

.card__badge--rating[data-empty="true"] {
  color: var(--ink-dim);
  border-color: var(--line);
}

.card__badge--quality {
  top: var(--sp-3);
  right: var(--sp-3);
  background: var(--red);
  color: #fff;
  text-align: right;
}

.card__badge--quality[data-long="true"] {
  font-size: 10px;
  max-width: 70%;
  white-space: normal;
  text-align: center;
}

.card__ep {
  position: absolute;
  left: var(--sp-3);
  bottom: var(--sp-3);
  z-index: 2;
  padding: 1px var(--sp-2);
  border-radius: var(--radius-s);
  background: rgba(0, 0, 0, .78);
  color: var(--ink-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
}

/* The red audio strip sits under the poster, in the flow of the card. */
.card__audio {
  display: block;
  padding: 2px var(--sp-2);
  background: var(--red-deep);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card__audio[data-audio="ซับไทย"]    { background: var(--red-deep); }
.card__audio[data-audio="SoundTrack"] { background: #5a1414; }
.card__audio[data-audio="พากย์ไทย"]   { background: var(--red-deep); }

.card__body {
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.card__title {
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
  /* exactly two lines, then an ellipsis */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: calc(2 * 1.45em);
}

.card__title a:hover { color: var(--red); }

.card__sub {
  font-size: 11px;
  color: var(--ink-dim);
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* --- 11. Trending rail -------------------------------------------------- */

.rail {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  padding-bottom: var(--sp-3);
  scroll-snap-type: x proximity;
  /* a little edge padding so the first card does not touch the border */
  padding-inline: 2px;
}

.rail > * {
  flex: 0 0 42%;
  min-width: 132px;
  scroll-snap-align: start;
}

.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.rail::-webkit-scrollbar-track { background: var(--panel-2); }

/* --- 12. Catalogue pages ------------------------------------------------ */

.page-head {
  padding-block: var(--sp-5) var(--sp-3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-5);
}

.page-head h1 { margin-bottom: var(--sp-2); }

.page-head p {
  color: var(--ink-muted);
  font-size: var(--fs-s);
  margin: 0;
  max-width: 66ch;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

/* Breadcrumb: where am I, and how do I get back up. */
.page-head__crumb { padding-top: var(--sp-4); }

.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-xs);
  color: var(--ink-dim);
}

.crumb a { color: var(--ink-muted); text-decoration: none; }
.crumb a:hover { color: #fff; text-decoration: underline; }

/* A plain boxed block, used for the honest "nothing plays yet" notices. */
.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  padding: var(--sp-4);
}

.muted { color: var(--ink-dim); }

.chip {
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--ink-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  min-height: 32px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chip:hover { border-color: var(--red); color: #fff; }

.chip[aria-pressed="true"] {
  background: var(--red-deep);
  border-color: var(--red-deep);
  color: #fff;
}

.result-count {
  color: var(--ink-dim);
  font-size: var(--fs-xs);
  margin: 0 0 var(--sp-4);
}

/* --- 13. Pager ---------------------------------------------------------- */

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding-block: var(--sp-5);
}

.pager__btn {
  min-width: 36px;
  min-height: 36px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--panel-2);
  color: var(--ink-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
}

.pager__btn:hover { border-color: var(--red); color: #fff; }

.pager__btn[aria-current="page"] {
  background: var(--red-deep);
  border-color: var(--red-deep);
  color: #fff;
}

.pager__btn[disabled] {
  opacity: .4;
  cursor: default;
}

.pager__gap {
  color: var(--ink-dim);
  padding-inline: var(--sp-1);
}

/* --- 14. Empty state ---------------------------------------------------- */

.empty {
  padding: var(--sp-5);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--fs-s);
}

.empty strong {
  display: block;
  color: #fff;
  font-size: var(--fs-m);
  margin-bottom: var(--sp-2);
}

/* --- 15. Movie detail page --------------------------------------------- */

.detail {
  display: grid;
  gap: var(--sp-5);
  padding-block: var(--sp-5);
}

.detail__main { min-width: 0; }

.detail__poster {
  position: relative;
  aspect-ratio: 2 / 3;
  max-width: 280px;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  margin-inline: auto;
  background:
    radial-gradient(100% 80% at 20% 10%, hsl(var(--h1, 350) 68% 40%) 0%, transparent 62%),
    radial-gradient(120% 100% at 80% 90%, hsl(var(--h2, 20) 62% 28%) 0%, transparent 68%),
    linear-gradient(155deg, #1b1b1b 0%, #050505 100%);
  border: 1px solid var(--line);
}

.detail__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(125deg, rgba(255,255,255,.13) 0%, transparent 42%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 5px);
  mix-blend-mode: overlay;
}

.detail__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--sp-3);
  border-radius: var(--radius-s);
  font-size: var(--fs-xs);
  font-weight: 500;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink-muted);
}

.tag--red { background: var(--red); border-color: var(--red); color: #fff; font-weight: 700; }
.tag--rating { background: rgba(0,0,0,.6); border-color: rgba(255,210,74,.35); color: #ffd24a; font-weight: 700; }

.detail__title { margin-bottom: var(--sp-2); }

.detail__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  color: var(--ink-dim);
  font-size: var(--fs-xs);
  margin-bottom: var(--sp-4);
}

/* Watch CTA: the one action a movie page exists for. */
.detail__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
}

.detail__hint {
  color: var(--ink-dim);
  font-size: var(--fs-xs);
  max-width: 62ch;
  margin: 0 0 var(--sp-5);
}

.btn--lg {
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-s);
}

.btn__ext {
  font-size: 1.1em;
  line-height: 1;
}

.detail__synopsis {
  color: var(--ink-muted);
  font-size: var(--fs-s);
  max-width: 68ch;
}

.detail__section-title {
  font-size: var(--fs-m);
  margin-bottom: var(--sp-3);
  color: #fff;
}

/* Episode buttons */
.episodes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

.ep {
  min-width: 46px;
  min-height: 34px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--panel-2);
  color: var(--ink-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
}

.ep:hover { border-color: var(--red); color: #fff; }

/* Episode numbers are links when the title has a source page. */
a.ep {
  display: inline-grid;
  place-items: center;
  text-decoration: none;
  line-height: 1.1;
}

.ep[aria-current="true"] {
  background: var(--red-deep);
  border-color: var(--red-deep);
  color: #fff;
}

/* Watch panel: poster until the viewer presses play, then the real player. */
.watch { margin-bottom: var(--sp-5); }

.watch__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(90% 120% at 18% 0%, hsl(var(--h1, 350) 62% 26%) 0%, transparent 62%),
    radial-gradient(110% 130% at 88% 100%, hsl(var(--h2, 20) 58% 20%) 0%, transparent 68%),
    linear-gradient(155deg, #171717 0%, #050505 100%);
}

.watch__stage--live {
  background: #000;
  border-color: var(--red);
}

.watch__start {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border: 0;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, .58);
  color: #fff;
  cursor: pointer;
}

.watch__start:hover,
.watch__start:focus-visible { background: rgba(0, 0, 0, .74); }
.watch__start:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.watch__play {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
  transition: transform .15s ease;
}

.watch__start:hover .watch__play,
.watch__start:focus-visible .watch__play { transform: scale(1.07); }

.watch__play::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: 6px;
  border-left: 20px solid #fff;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

.watch__label {
  font-size: var(--fs-s);
  font-weight: 700;
  letter-spacing: .01em;
}

/* Sits over the picture only when the browser would not start on its own. */
.watch__resume {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border: 0;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, .62);
  color: #fff;
  cursor: pointer;
}

.watch__resume:hover,
.watch__resume:focus-visible { background: rgba(0, 0, 0, .8); }
.watch__resume:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.watch__resume[hidden] { display: none; }

.watch__frame,
.watch__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.watch__video {
  background: #000;
  object-fit: contain;
}

.watch .episodes { margin: var(--sp-3) 0 var(--sp-3); }

@media (prefers-reduced-motion: reduce) {
  .watch__play { transition: none; }
  .watch__start:hover .watch__play,
  .watch__start:focus-visible .watch__play { transform: none; }
}

/* The honest video placeholder. */
.player {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(45deg, #101010 0 10px, #0b0b0b 10px 20px);
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--sp-5) var(--sp-4);
  margin-bottom: var(--sp-3);
}

.player__inner { max-width: 46ch; }

.player__title {
  font-size: var(--fs-m);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--sp-2);
}

.player__text {
  color: var(--ink-muted);
  font-size: var(--fs-s);
  margin: 0;
}

.player__note {
  color: var(--ink-dim);
  font-size: var(--fs-xs);
  margin: 0 0 var(--sp-5);
}

.video-flag {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--sp-3);
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink-dim);
}

.video-flag svg { width: 18px; height: 18px; fill: currentColor; }

/* --- 16. Footer --------------------------------------------------------- */

.site-footer {
  margin-top: var(--sp-5);
  border-top: 1px solid var(--line);
  background: var(--panel-2);
  padding-block: var(--sp-5);
  color: var(--ink-dim);
  font-size: var(--fs-xs);
}

.site-footer__cols {
  display: grid;
  gap: var(--sp-5);
}

.site-footer h2 {
  font-size: var(--fs-s);
  color: #fff;
  margin-bottom: var(--sp-3);
}

.site-footer p { margin: 0 0 var(--sp-2); }

.site-footer ul li { margin-bottom: var(--sp-2); }

.site-footer a { color: var(--ink-muted); }
.site-footer a:hover { color: var(--red); }

.site-footer__bottom {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: space-between;
}

/* --- 17. Breakpoint: 640px --------------------------------------------- */

@media (min-width: 640px) {
  :root {
    --gutter: 20px;
    --header-h: 64px;
    --fs-xl: 30px;
  }

  .grid { gap: var(--sp-4); }

  .rail > * { flex-basis: 26%; }

  .hero__poster { aspect-ratio: 16 / 8; }

  .detail__facts { font-size: var(--fs-s); }

  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 18. Breakpoint: 960px --------------------------------------------- */

@media (min-width: 960px) {
  :root {
    --gutter: 26px;
    --fs-xl: 34px;
    --fs-l: 21px;
  }

  /* Navigation becomes one horizontal row; the menu button disappears. */
  .menu-btn { display: none; }

  .site-nav[data-open="false"] .site-nav__list { display: flex; }

  .site-nav__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-1);
    padding-block: var(--sp-2);
  }

  .site-nav__list a {
    background: transparent;
    padding: var(--sp-2) var(--sp-3);
  }

  .site-nav__list a[aria-current="page"] {
    background: var(--red-deep);
  }

  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); }

  .card__title { font-size: var(--fs-s); }

  .rail > * { flex-basis: 19%; }

  .hero__inner {
    grid-template-columns: 1.35fr 1fr;
    align-items: center;
    gap: var(--sp-5);
  }

  .hero__poster { aspect-ratio: 16 / 9; }

  .detail {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: start;
  }

  .detail__poster { max-width: none; margin-inline: 0; }

  .site-footer__cols { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* --- 19. Breakpoint: 1280px -------------------------------------------- */

@media (min-width: 1280px) {
  :root {
    --gutter: 32px;
    --fs-xl: 38px;
    --fs-l: 22px;
  }

  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .rail > * { flex-basis: 15%; }

  .search { max-width: 620px; }

  .hero__poster { aspect-ratio: 21 / 9; }
}

/* --- 20. Reduced motion & print ---------------------------------------- */

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

/* Official trailer embed: same 16:9 box as the placeholder, filled by YouTube's
   no-cookie player. Nothing else on the page loads from outside. */
.player--embed {
  padding: 0;
  border-style: solid;
  border-color: var(--line);
  background: #000;
  overflow: hidden;
}

.player__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}