/* David Weaver Presents · channeldwp.app
   Art direction: DWP Aperture.
   The artwork is the page. Each production is seen through one angled opening cut at the exact
   slope of the W in the DWP mark, with its title set into the picture in the mark's own heavy,
   geometric voice (Montserrat, the face of the logo's subtitle). Every title brings its own
   colours, taken from its key art; the shell around it stays near-black and ivory. */
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
/* One italic serif, used only for a title's own tagline: the voice of the story, not of the channel. */
@font-face {
  font-family: "Playfair Display";
  src: url("/fonts/playfair-500-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

:root {
  --shell: #080808;
  --surface: #151515;
  --surface-2: #1e1e1e;
  --ivory: #fbf6eb;
  --text: #e6e0d4;
  --muted: #aaa49a;
  --dim: #8c867c;
  --line: rgba(251, 246, 235, 0.13);
  --line-strong: rgba(251, 246, 235, 0.32);
  /* A production sets these three; the channel's own pages stay neutral. */
  --accent: #fbf6eb;
  --ink: #080808;
  --stage: var(--ink);
  /* The diagonal of the W in the DWP mark runs 164 across for every 313 down. */
  --cut: 0.524;
  --rise: 1.908;
  --display: "Montserrat", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --serif:
    "Playfair Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  /* The one page edge: 5% of the screen, and on very wide screens the content stops growing at 1840px. */
  --gutter: max(clamp(20px, 5vw, 96px), calc((100vw - 1840px) / 2 + 96px));
  --top: 56px;
  --tabs: 0px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* Names the older component rules still use. */
  --bg: var(--shell);
  --cream: var(--ivory);
  --gold: var(--accent);
  --gold-hi: var(--ivory);
}

/* ---- Colour worlds: one block per production, drawn from its own key art ---- */
/* What Had Happened Was...: the red of her mother's jacket, candlelight, an aubergine night. */
[data-theme="what-had-happened-was"] {
  --accent: #f0525a;
  --ink: #12060e;
  --focus: 15% 30%;
  --focus-wide: 80% 0%;
  --focus-b: 100% 0%;
  --zoom-b: 1.4;
  --thumb: 36% 28%;
  --thumb-zoom: 2.1;
}
/* Bankroll Squad: our key art of Malcolm at his five-year party, in the red fur coat Jessica Brown
   designed (November 12, 2026). The accent is the coat's crimson lifted until near-black lettering
   reads on it; the dark is the coat's deepest shadow. The wide still is the opening at every size:
   on a phone the crop follows him, on a wider screen he stands right of the title. */
[data-theme="bankroll-squad"] {
  --accent: #e3405a;
  --ink: #150708;
  --stage: #0b0708;
  --focus: 70% 0%;
  --focus-wide: 62% 0%;
  --focus-b: 70% 0%;
  --thumb: 47% 9%;
  --thumb-zoom: 2.2;
}

/* The owner's Studio (/admin/) loads this file for its reset and form basics only. It keeps the
   values it was built with, so nothing in the public redesign changes how it looks. */
.page-admin {
  --text: #e9e3d6;
  --muted: #aaa397;
  --dim: #7f796e;
  --line: rgba(251, 246, 235, 0.1);
  --line-strong: rgba(251, 246, 235, 0.24);
  --gold: #e3bd6c;
  --gold-hi: #f9e9b8;
}
.page-admin ::selection {
  background: #e3bd6c;
}
html:has(> .page-admin) {
  background: #050505;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  background: var(--shell);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anything scrolled into view (a tabbed-to control, a link target) stops clear of the fixed
     header above and the phone tab bar below. */
  scroll-padding-top: calc(var(--top) + 20px);
  scroll-padding-bottom: calc(var(--tabs) + 24px);
}
body {
  margin: 0;
  color: var(--text);
  font: 400 1rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
  padding-bottom: var(--tabs);
  overflow-x: hidden;
}
img,
video,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
h1,
h2,
h3,
p,
ol,
ul,
dl,
dd,
figure {
  margin: 0;
}
ol,
ul {
  padding: 0;
  list-style: none;
}
button,
input,
select {
  font: inherit;
  color: inherit;
}
[hidden] {
  display: none !important;
}
:focus-visible {
  outline: 2px solid var(--ivory);
  outline-offset: 3px;
}
/* The Studio's original focus ring, at the same weight in the cascade as the rule it was built on. */
:where(.page-admin) :focus-visible {
  outline-color: #f9e9b8;
  border-radius: 4px;
}
::selection {
  background: var(--ivory);
  color: #000;
}
.icon {
  width: 20px;
  height: 20px;
  flex: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: fixed;
  left: 12px;
  top: -80px;
  z-index: 300;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  background: var(--ivory);
  color: #000;
  font: 700 0.8125rem/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip:focus {
  top: 12px;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Type ---- */
.display {
  font: 800 clamp(1.9rem, 7.6vw, 2.5rem) / 0.98 var(--display);
  letter-spacing: -0.022em;
  text-transform: uppercase;
  color: var(--ivory);
  text-wrap: balance;
}
.label,
.eyebrow {
  font: 700 0.75rem/1.3 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory);
}
.eyebrow,
.label-dim {
  color: var(--muted);
}
.tagline,
.pullquote {
  font: italic 500 1.25rem/1.28 var(--serif);
  color: var(--ivory);
  text-wrap: balance;
}
.synopsis {
  color: var(--text);
  max-width: 58ch;
}
.lede {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  max-width: 60ch;
}
.fineprint {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 50ch;
}
.empty {
  color: var(--muted);
  max-width: 52ch;
}
.facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font: 600 0.75rem/1.4 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
/* The divider trails each fact, so a wrapped line never starts with one. */
.facts li:not(:last-child)::after {
  content: "/";
  margin-left: 12px;
  color: var(--dim);
}
.fact-rating {
  color: var(--ivory);
}
/* Availability. A right-pointing triangle means it plays now; the mark's own downward one means not yet. */
.status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font: 700 0.75rem/1.3 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory);
}
.status-flag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.status-flag::before {
  content: "";
  flex: none;
  width: 11px;
  height: 10px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
/* "Now streaming" is a solid tag in the title's colour with dark lettering, so it reads over any picture.
   Its far end is cut at the slope of the mark. */
.status-live .status-flag {
  min-height: 24px;
  padding: 0 20px 0 9px;
  background: var(--accent);
  color: #080808;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12.6px) 100%, 0 100%);
}
.status-live .status-flag::before {
  width: 9px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.status-detail {
  color: var(--text);
}
.status-detail::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 1px;
  margin: -2px 14px 0 0;
  background: currentColor;
  opacity: 0.6;
}
/* A link here (an episode's series) is one line of text with a full-height touch area. */
.status a {
  display: inline-block;
  margin: -15px 0;
  padding: 15px 0;
  color: var(--ivory);
  text-underline-offset: 4px;
}

/* Inside every stacked block a child may shrink to the screen and wrap; it never widens the page,
   however large the visitor's text is set. */
.hero-copy > *,
.hero-head > *,
.hero-side > *,
.scene-copy > *,
.lead > *,
.lead-body > *,
.band > *,
.band-head > *,
.band-body > *,
.manifesto > *,
.doc-head > *,
.panel > *,
.plan > *,
.way > *,
.way-head > *,
.way-body > *,
.empty-box > *,
.prog-copy > *,
.eprow-copy > *,
.details > div > *,
.foot-inner > * {
  min-width: 0;
  overflow-wrap: break-word;
}

/* ---- Buttons ---- */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: none;
  font: 700 0.8125rem/1.2 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ivory);
  cursor: pointer;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn .icon {
  width: 18px;
  height: 18px;
  transition: transform 0.3s var(--ease);
}
/* The main action is an ivory plate whose far end is cut at the slope of the mark. */
.btn-primary {
  padding: 0 44px 0 24px;
  color: #080808;
}
.btn-primary::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: var(--ivory);
  clip-path: polygon(0 0, 100% 0, calc(100% - 28px) 100%, 0 100%);
  transition: background-color 0.25s ease;
}
.btn-primary:hover::before {
  background: var(--accent);
}
.btn:hover .icon:last-child {
  transform: translateX(4px);
}
.btn-line {
  border-color: var(--line-strong);
}
.btn-line:hover {
  border-color: var(--ivory);
  background: rgba(251, 246, 235, 0.08);
}
.btn-line[aria-pressed="true"],
.btn-primary[aria-pressed="true"] {
  border-color: var(--ivory);
  background: rgba(251, 246, 235, 0.14);
  color: var(--ivory);
}
.btn-primary[aria-pressed="true"]::before {
  display: none;
}
[data-save] .save-on,
[data-save][aria-pressed="true"] .save-off {
  display: none;
}
[data-save][aria-pressed="true"] .save-on {
  display: inline-flex;
}
.btn.is-disabled {
  border-color: var(--line);
  color: var(--muted);
  cursor: default;
}
.btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}
.chip {
  position: absolute;
  left: 0;
  top: 0;
  padding: 7px 10px;
  background: var(--shell);
  font: 700 0.625rem/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ivory);
}
.chip-live {
  background: var(--ivory);
  color: #080808;
}

/* ---- Header ---- */
.top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--top);
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  padding: 0 var(--gutter);
  border-bottom: 1px solid transparent;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}
.top::before {
  content: "";
  position: absolute;
  inset: 0 0 -40px 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8, 8, 8, 0.78), rgba(8, 8, 8, 0));
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.top[data-scrolled] {
  background: rgba(8, 8, 8, 0.94);
  border-bottom-color: var(--line);
}
.top[data-scrolled]::before {
  opacity: 0;
}
.top-logo {
  display: inline-flex;
  align-items: center;
  /* Wide enough for the hero's upper blade to pass between the mark and the name. */
  gap: 24px;
  min-height: 44px;
  color: var(--ivory);
  text-decoration: none;
}
.mark {
  height: 22px;
  width: auto;
}
.top-name {
  font: 600 clamp(10px, 0.625rem, 11px) / 1 var(--sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
}
.top-nav {
  display: none;
  gap: clamp(20px, 2.4vw, 36px);
}
.top-nav a,
.top-account,
.top-roku {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font: 600 0.75rem/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  transition: color 0.2s ease;
}
.top-nav a:hover,
.top-nav a[aria-current="page"],
.top-account,
.top-roku:hover {
  color: var(--ivory);
}
.top-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  height: 2px;
  background: var(--ivory);
}
.top-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
.top-roku {
  display: none;
  color: var(--ivory);
}
.top-roku .icon {
  width: 17px;
  height: 17px;
}
.top-account:hover,
.top-roku:hover span {
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* ---- Phone tab bar ---- */
.tabs {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(8, 8, 8, 0.97);
  border-top: 1px solid var(--line-strong);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabs a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 60px;
  font: 600 clamp(12px, 0.75rem, 16px) / 1 var(--sans);
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--dim);
  transition: color 0.2s ease;
}
.tabs .icon {
  width: 22px;
  height: 22px;
}
.tabs a[aria-current="page"] {
  color: var(--ivory);
  font-weight: 700;
}
/* The current tab hangs the mark's triangle from the top rule. */
.tabs a[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 14px;
  height: 8px;
  margin-left: -7px;
  background: var(--ivory);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
@media (max-width: 899px) {
  :root {
    --tabs: calc(60px + env(safe-area-inset-bottom));
  }
  /* The tab bar already carries Account on a phone. */
  .top-account {
    display: none;
  }
  .status {
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    gap: 6px 10px;
  }
  .status-live .status-flag {
    padding: 0 17px 0 8px;
  }
  .status-live .status-detail::before {
    display: none;
  }
  .status-detail::before {
    width: 14px;
    margin-right: 10px;
  }
}
@media (max-width: 359px) {
  .top-name {
    display: none;
  }
}
@media (min-width: 900px) {
  :root {
    --top: 72px;
  }
  .tabs {
    display: none;
  }
  .top-nav {
    display: flex;
  }
  .top-roku {
    display: inline-flex;
  }
  .mark {
    height: 26px;
  }
}
@media (min-width: 900px) and (max-width: 1179px) {
  .top-name {
    display: none;
  }
}

/* ---- Hero: the opening of the home page and of every title page ---- */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  background: var(--ink);
  color: var(--ivory);
}
.hero-stage {
  position: relative;
  height: 54vh;
  height: clamp(340px, 54svh, 560px);
  overflow: hidden;
  container-type: size;
  background: var(--ink);
  /* The upper blade is sized from the header so its edge falls between the mark and the name. */
  --a: calc(var(--gutter) + 86px);
  --b: 30vw;
}
.hero-art {
  position: absolute;
  inset: 0;
  background: var(--stage);
  filter: var(--art-filter, none);
}
.hero-img {
  position: absolute;
  inset: 0;
  /* Extra headroom for a picture cropped tight above the head (set per title). */
  top: var(--art-top, 0px);
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--focus, 50% 18%);
}
/* The picture dissolves into the title's own dark, never into a flat black bar. */
.hero-stage::before,
.hero-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-stage::before {
  background: linear-gradient(
    180deg,
    rgba(8, 8, 8, 0.62) 0%,
    rgba(8, 8, 8, 0) 26%
  );
}
.hero-stage::after {
  top: 44%;
  background: linear-gradient(180deg, transparent 0%, var(--ink) 92%);
}
/* The aperture: two blades closing in from opposite corners, both at the slope of the W. */
.blade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.blade::before,
.blade::after {
  content: "";
  position: absolute;
  inset: 0;
}
.blade::before {
  background: var(--accent);
}
.blade-a::before {
  clip-path: polygon(
    0 0,
    calc(var(--a) + 2px) 0,
    0 calc((var(--a) + 2px) * var(--rise))
  );
}
.blade-a::after {
  background: var(--shell);
  clip-path: polygon(0 0, var(--a) 0, 0 calc(var(--a) * var(--rise)));
}
.blade-b::before {
  clip-path: polygon(
    100% 100%,
    calc(100% - var(--b) - 2px) 100%,
    100% calc(100% - (var(--b) + 2px) * var(--rise))
  );
}
.blade-b::after {
  background: var(--ink);
  clip-path: polygon(
    100% 100%,
    calc(100% - var(--b)) 100%,
    100% calc(100% - var(--b) * var(--rise))
  );
}
@supports (width: 1cqw) {
  .hero-stage {
    --b: 30cqw;
  }
}
/* On a phone the lower blade's bright edge fades out before it reaches the title. */
@media (max-width: 1023px) {
  .blade-b::before {
    -webkit-mask-image: linear-gradient(
      180deg,
      #000 0%,
      #000 48%,
      transparent 72%
    );
    mask-image: linear-gradient(180deg, #000 0%, #000 48%, transparent 72%);
  }
}
.hero-copy {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 18px;
  margin-top: -124px;
  padding: 0 var(--gutter) 24px;
  min-width: 0;
}
.hero-head {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.hero-title {
  font: 800 clamp(2.5rem, 12.6vw, 3.25rem) / 0.92 var(--display);
  letter-spacing: -0.028em;
  text-transform: uppercase;
  color: var(--ivory);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.is-short .hero-title {
  font-size: clamp(3rem, 15.4vw, 4rem);
}
.is-long .hero-title {
  font-size: clamp(1.9rem, 9vw, 2.5rem);
  line-height: 0.96;
}
.hero-side {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.hero-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}
.hero-actions .btn-primary {
  grid-column: 1 / -1;
  justify-content: flex-start;
}
.hero-actions .btn-line {
  min-height: 48px;
  padding: 0 12px;
}
.hero-actions > :last-child:nth-child(2) {
  grid-column: 1 / -1;
}
/* Cover art that already carries its own title lettering is shown whole. */
.art-titled .hero-img {
  object-fit: contain;
  object-position: 50% 0;
}
.art-titled .hero-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (min-width: 600px) and (max-width: 1023px) {
  .hero-stage {
    height: clamp(420px, 62svh, 720px);
    --b: 24cqw;
  }
  .hero-title {
    font-size: clamp(3.25rem, 8.4vw, 4.5rem);
  }
  .hero-actions {
    display: flex;
    flex-wrap: wrap;
  }
}
@media (min-width: 1024px) {
  .hero {
    min-height: clamp(620px, 100svh, 1040px);
    align-items: end;
  }
  .hero-stage {
    position: absolute;
    inset: 0;
    height: auto;
    --a: calc(var(--gutter) + 102px);
    --b: max(37cqw, 460px);
  }
  .hero-stage::after {
    top: 48%;
    background: linear-gradient(180deg, transparent 0%, var(--ink) 96%);
  }
  .hero-wide .hero-img {
    object-position: var(--focus-wide, 50% 18%);
  }
  /* A title with only a portrait is staged, whole, on its own backdrop. */
  .hero-portrait .hero-img {
    inset: var(--art-top, 0px) auto 0 var(--stage-x, 58%);
    width: auto;
    height: 100%;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0%,
      #000 13%,
      #000 87%,
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0%,
      #000 13%,
      #000 87%,
      transparent 100%
    );
  }
  .hero-copy {
    grid-template-columns: minmax(0, 1fr) minmax(232px, 288px);
    align-items: end;
    column-gap: clamp(32px, 5vw, 88px);
    width: 100%;
    padding: calc(var(--top) + 48px) var(--gutter) clamp(44px, 7vh, 80px);
  }
  .hero-head {
    gap: 18px;
  }
  .hero-title {
    font-size: clamp(3.25rem, 5.6vw, 6.75rem);
    line-height: 0.9;
  }
  .is-short .hero-title {
    font-size: clamp(4.5rem, 8.6vw, 8.5rem);
    line-height: 0.86;
  }
  .is-long .hero-title {
    font-size: clamp(2.5rem, 3.9vw, 3.75rem);
  }
  .hero-actions {
    grid-template-columns: 1fr;
  }
  .hero-actions .btn {
    grid-column: auto;
    min-height: 52px;
    justify-content: flex-start;
    padding-left: 22px;
  }
  .hero-actions .btn .icon:last-child {
    margin-left: auto;
  }
}
/* Entrances only move, they never hide: a browser that pauses animation still shows everything. */
@keyframes rise {
  from {
    transform: translateY(28px);
  }
}
@keyframes settle {
  from {
    transform: scale(1.07);
  }
}
@keyframes blade-a-in {
  from {
    transform: translate(-36px, -36px);
  }
}
@keyframes blade-b-in {
  from {
    transform: translate(48px, 48px);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-art {
    animation: settle 2.6s var(--ease-out) both;
  }
  .blade-a {
    animation: blade-a-in 1.3s var(--ease-out) both;
  }
  .blade-b {
    animation: blade-b-in 1.3s var(--ease-out) both;
  }
  .hero-head > *,
  .hero-side {
    animation: rise 1s var(--ease-out) both;
  }
  .hero-head > :nth-child(2) {
    animation-delay: 0.08s;
  }
  .hero-side {
    animation-delay: 0.16s;
  }
  /* On the first visit the title sequence waits for the ident to finish, then plays as the blades part. */
  html.ident-on:not(.ident-open) .hero-art,
  html.ident-on:not(.ident-open) .blade,
  html.ident-on:not(.ident-open) .hero-head > *,
  html.ident-on:not(.ident-open) .hero-side {
    animation-name: none;
  }
}
/* Depth: the picture moves more slowly than the page. Scroll-driven, so it costs no script. */
@keyframes hero-depth {
  to {
    transform: translate3d(0, 9%, 0);
  }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-wide .hero-img {
      animation: hero-depth linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
    }
  }
}

/* ---- Opening ident: Home only, once per visit (see /js/ident.js) ---- */
.ident {
  display: none;
}
html.ident-on .ident {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 200;
  /* If the script that drives it ever stalls, the overlay still gets out of the way by itself. */
  animation: ident-failsafe 0.5s 4.6s both;
}
.ident-blade {
  position: absolute;
  inset: 0;
  background: #000;
  transition: transform 0.95s var(--ease);
}
.ident-blade-a {
  clip-path: polygon(
    0 0,
    calc(50% + 26.2vh + 1px) 0,
    calc(50% - 26.2vh + 1px) 100%,
    0 100%
  );
}
.ident-blade-b {
  clip-path: polygon(
    calc(50% + 26.2vh) 0,
    100% 0,
    100% 100%,
    calc(50% - 26.2vh) 100%
  );
}
html.ident-open .ident-blade-a {
  transform: translate3d(calc(-50vw - 27vh), 0, 0);
}
html.ident-open .ident-blade-b {
  transform: translate3d(calc(50vw + 27vh), 0, 0);
}
.ident-video {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(88vw, 64vh, 560px);
  height: auto;
  aspect-ratio: 1;
  max-width: none;
  transform: translate(-50%, -50%);
  background: #000;
  transition: opacity 0.25s ease;
}
.ident-skip {
  position: absolute;
  right: var(--gutter);
  bottom: calc(24px + env(safe-area-inset-bottom));
  min-width: 88px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: rgba(8, 8, 8, 0.6);
  font: 700 0.75rem/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivory);
  cursor: pointer;
  transition: opacity 0.25s ease;
}
html.ident-open .ident-video,
html.ident-open .ident-skip {
  opacity: 0;
}
@keyframes ident-failsafe {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.ident-on .ident {
    display: none;
  }
}

/* ---- Page body ---- */
.stack {
  position: relative;
  display: grid;
  gap: clamp(56px, 8vw, 120px);
  padding: 0 0 clamp(64px, 9vw, 128px);
}
/* Scenes that follow one another sit flush, one colour world against the next. */
.stack > .scene + .scene {
  margin-top: calc(-1 * clamp(56px, 8vw, 120px));
}
.section {
  width: 100%;
  padding: 0 var(--gutter);
  min-width: 0;
}
.section-head {
  display: grid;
  gap: 10px;
  margin-bottom: clamp(20px, 3vw, 36px);
}
.rule-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-strong);
}
/* Sections ease in as they are scrolled into view. Tied to scroll position, with no script and
   nothing left hidden where a browser doesn't support it. */
@keyframes reveal {
  from {
    opacity: 0.001;
    transform: translateY(32px);
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
  }
}

/* ---- The programme: the rest of the catalogue, numbered ---- */
.programme {
  padding-top: 16px;
}
.prog-row {
  display: grid;
  grid-template-columns: auto 56px minmax(0, 1fr) 20px;
  gap: 12px;
  align-items: center;
  min-height: 76px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background-color 0.25s ease;
}
.prog-num {
  font: 800 0.8125rem/1 var(--sans);
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.prog-art {
  display: block;
  width: 56px;
  height: 56px;
  overflow: hidden;
  background: var(--surface);
}
.prog-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--thumb, 50% 20%);
  transform: scale(var(--thumb-zoom, 1));
  transform-origin: var(--thumb, 50% 20%);
}
.prog-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.prog-title {
  font: 800 1.125rem/1 var(--display);
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--ivory);
  overflow-wrap: break-word;
  transition: color 0.2s ease;
  /* A very long title is cut to three lines here; its own page sets it in full. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prog-list > li {
  display: grid;
}
/* A picture that fails to load leaves a quiet plate, not a broken-image icon (see site.js). */
img.is-missing {
  visibility: hidden;
}
.prog-meta {
  font: 400 0.8125rem/1.3 var(--sans);
  color: var(--muted);
}
.prog-line {
  display: none;
}
.prog-go {
  display: grid;
  place-items: center;
  width: 20px;
  height: 44px;
  color: var(--ivory);
}
.prog-go .icon {
  transition: transform 0.3s var(--ease);
}
.prog-row:hover .prog-go .icon,
.prog-row:focus-visible .prog-go .icon {
  transform: translateX(5px);
}
.prog-row:hover .prog-title {
  color: var(--accent);
}
@media (min-width: 900px) {
  .programme {
    padding-top: 28px;
  }
  .prog-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(32px, 5vw, 88px);
  }
  .prog-list > :only-child {
    grid-column: 1 / -1;
  }
  .prog-row {
    grid-template-columns: auto 72px minmax(0, 1fr) auto;
    gap: 24px;
    min-height: 104px;
    padding: 16px 0;
  }
  /* A lone row has the width to carry the title's own line as well. */
  .prog-list > :only-child .prog-row {
    grid-template-columns: auto 72px minmax(0, 1fr) minmax(0, 1fr) auto;
  }
  .prog-list > :only-child .prog-line {
    display: block;
    font: italic 500 1.375rem/1.25 var(--serif);
    color: var(--text);
  }
  .prog-go {
    grid-column: -2;
    width: 44px;
  }
  .prog-art {
    width: 72px;
    height: 72px;
  }
  .prog-title {
    font-size: 1.75rem;
  }
}

/* ---- Lead: what the featured title is about ---- */
.lead {
  display: grid;
  gap: 28px;
}
.pullquote {
  font-size: clamp(1.75rem, 8.2vw, 2.25rem);
  line-height: 1.16;
  max-width: 18ch;
}
.pullquote::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-bottom: 22px;
  background: var(--accent);
}
.lead-body {
  display: grid;
  gap: 16px;
  align-content: start;
}
@media (min-width: 900px) {
  .lead {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(40px, 7vw, 120px);
    align-items: end;
  }
  .pullquote {
    font-size: clamp(2.5rem, 4.4vw, 4rem);
    line-height: 1.08;
    max-width: 16ch;
  }
  .lead-body {
    padding-bottom: 10px;
  }
}

/* ---- Scene: one production or episode, composed around its artwork ---- */
.scene {
  position: relative;
  display: grid;
  background: var(--ink);
  color: var(--ivory);
}
.scene-art {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--stage);
}
.scene-tall .scene-art {
  aspect-ratio: 4 / 5;
}
.scene-art::after {
  content: "";
  position: absolute;
  inset: 52% 0 0 0;
  background: linear-gradient(180deg, transparent 0%, var(--ink) 94%);
  pointer-events: none;
}
.scene-frame {
  position: absolute;
  inset: 0;
  display: block;
}
.scene-frame img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--focus, 50% 18%);
  filter: var(--art-filter, none);
  transition: transform 1.1s var(--ease-out);
}
/* The same still as the hero, turned to the other half of the story. */
.scene-reverse .scene-frame img {
  object-position: var(--focus-b, 50% 18%);
  transform: scale(var(--zoom-b, 1));
  transform-origin: var(--focus-b, 50% 18%);
}
.scene-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  margin-top: -64px;
  padding: 0 var(--gutter) 44px;
  min-width: 0;
}
.scene-num {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 800 0.8125rem/1 var(--sans);
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
  color: var(--ivory);
}
.scene-num::after {
  content: "";
  flex: 0 0 44px;
  height: 1px;
  background: var(--line-strong);
}
.scene-title {
  font: 800 clamp(2.1rem, 10.4vw, 2.75rem) / 0.94 var(--display);
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--ivory);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.scene.is-short .scene-title {
  font-size: clamp(2.75rem, 14vw, 3.75rem);
}
.scene.is-long .scene-title {
  font-size: clamp(1.75rem, 8.4vw, 2.25rem);
}
.scene .actions {
  margin-top: 6px;
}
@media (max-width: 599px) {
  .scene .actions .btn {
    flex: 1 1 auto;
  }
  .scene .actions .btn-primary {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
}
@media (min-width: 900px) {
  .scene {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(40px, 6vw, 104px);
    padding: clamp(64px, 8vw, 112px) var(--gutter);
  }
  .scene-tall {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  }
  .scene-flip .scene-art {
    order: 2;
  }
  .scene-art {
    aspect-ratio: 16 / 10;
  }
  .scene-tall .scene-art {
    aspect-ratio: 4 / 5;
    max-height: 760px;
    justify-self: center;
    width: 100%;
  }
  .scene-art::after {
    display: none;
  }
  .scene-copy {
    margin-top: 0;
    padding: 0;
    gap: 20px;
  }
  .scene-title {
    font-size: clamp(2.5rem, 4.2vw, 4rem);
  }
  .scene.is-short .scene-title {
    font-size: clamp(3.5rem, 6.4vw, 6.25rem);
    line-height: 0.88;
  }
  .scene.is-long .scene-title {
    font-size: clamp(2.1rem, 3.3vw, 3.1rem);
  }
  .scene .tagline {
    font-size: 1.5rem;
  }
}
@media (hover: hover) {
  .scene:not(.scene-reverse) .scene-frame:hover img {
    transform: scale(1.03);
  }
}
.playbadge {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: -34px 0 0 -34px;
  background: var(--ivory);
  color: #080808;
  transition:
    transform 0.3s var(--ease),
    background-color 0.3s ease;
}
.playbadge .icon {
  width: 28px;
  height: 28px;
  margin-left: 3px;
}
a:hover > .playbadge,
a:focus-visible > .playbadge,
a:hover .eprow-art .playbadge {
  transform: scale(1.08);
  background: var(--accent);
}

/* ---- Bands: watch on TV, plans ---- */
.band {
  display: grid;
  gap: 28px;
}
.band-head {
  display: grid;
  gap: 14px;
  align-content: start;
  padding-top: 20px;
  border-top: 1px solid var(--line-strong);
}
.band-body {
  display: grid;
  gap: 20px;
  align-content: start;
}
.points {
  display: grid;
  gap: 10px;
  color: var(--text);
}
.points li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.points .icon {
  width: 18px;
  height: 18px;
  margin-top: 4px;
  color: var(--ivory);
}
.steps {
  display: grid;
  gap: 12px;
}
.steps li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  font-weight: 600;
}
.steps span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-strong);
  font: 800 0.875rem/1 var(--sans);
  color: var(--ivory);
}
@media (min-width: 900px) {
  .band {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(40px, 7vw, 120px);
    row-gap: 40px;
  }
  .band-head {
    grid-column: 1 / -1;
    padding-top: 28px;
  }
  .band-head .display {
    font-size: clamp(2.5rem, 4.2vw, 4rem);
    max-width: 14ch;
  }
  .tvband .band-head {
    grid-column: 1;
  }
  .tvband .band-body {
    padding-top: 66px;
    border-top: 1px solid var(--line-strong);
  }
  .band > .plans {
    grid-column: 1 / -1;
  }
}

/* ---- Plans ---- */
.plans {
  display: grid;
  border-top: 1px solid var(--line);
}
.plan {
  position: relative;
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 28px 0 32px;
  border-bottom: 1px solid var(--line);
}
.plan .display {
  font-size: 1.5rem;
  letter-spacing: -0.015em;
}
.plan-price {
  font: 800 3.5rem/1 var(--display);
  letter-spacing: -0.04em;
  color: var(--ivory);
}
.plan-price small {
  margin-left: 12px;
  font: 600 0.75rem/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.plan-soon {
  display: inline-block;
  font: 800 2rem/1.1 var(--display);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.plan .btn {
  justify-self: start;
  margin-top: 8px;
}
.plan-plus .eyebrow {
  color: var(--ivory);
}
.plan-note {
  font-size: 0.875rem;
  color: var(--muted);
}
@media (min-width: 760px) {
  .plans {
    grid-template-columns: 1fr 1fr;
  }
  .plan {
    padding: 36px clamp(24px, 4vw, 56px) 40px 0;
  }
  .plan + .plan {
    padding-left: clamp(24px, 4vw, 56px);
    border-left: 1px solid var(--line);
  }
}

/* ---- The network ---- */
.manifesto {
  display: grid;
  gap: 24px;
}
.manifesto .label {
  padding-top: 20px;
  border-top: 1px solid var(--line-strong);
}
.manifesto .display {
  font-size: clamp(2.25rem, 10.6vw, 3rem);
  line-height: 0.94;
  max-width: 14ch;
}
.manifesto .lede {
  color: var(--muted);
}
@media (min-width: 900px) {
  .manifesto {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: clamp(40px, 7vw, 120px);
    align-items: end;
  }
  .manifesto .label {
    grid-column: 1 / -1;
    padding-top: 28px;
  }
  .manifesto .display {
    font-size: clamp(3.25rem, 6.2vw, 6rem);
    line-height: 0.9;
  }
  .manifesto .lede {
    padding-bottom: 8px;
  }
}

/* ---- Footer ---- */
.foot {
  border-top: 1px solid var(--line);
  padding: 44px var(--gutter) 48px;
}
.foot-inner {
  display: grid;
  gap: 20px;
}
.foot-logo {
  display: block;
  width: 132px;
  color: var(--ivory);
}
.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
}
.foot-nav a {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  font: 600 0.75rem/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.foot-nav a:hover {
  color: var(--ivory);
}
.foot-note {
  font-size: 0.875rem;
  color: var(--dim);
  max-width: 62ch;
}
@media (min-width: 900px) {
  .foot-inner {
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 60px;
  }
  .foot-nav {
    justify-content: flex-end;
  }
  .foot-note {
    grid-column: 1 / -1;
  }
}

/* ---- Rows of cards built in the browser: continue watching, My List on the home page ---- */
.rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  margin: 0 calc(var(--gutter) * -1);
  padding: 20px var(--gutter) 8px;
  scroll-snap-type: x proximity;
  scroll-padding: 0 var(--gutter);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar {
  display: none;
}
.pcard {
  flex: 0 0 clamp(150px, 42vw, 240px);
  display: grid;
  gap: 6px;
  align-content: start;
  text-decoration: none;
  scroll-snap-align: start;
}
.pcard-art {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--surface);
}
.pcard-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.6s var(--ease-out);
}
.pcard:hover .pcard-art img,
.pcard:focus-visible .pcard-art img {
  transform: scale(1.04);
}
.pcard-title {
  margin-top: 8px;
  font: 800 1rem/1.08 var(--display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ivory);
}
.pcard-meta {
  font: 400 0.8125rem/1.3 var(--sans);
  color: var(--muted);
}
.rcard {
  flex: 0 0 min(86vw, 520px);
  display: grid;
  grid-template-columns: 46% minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  text-decoration: none;
  scroll-snap-align: start;
}
.rcard-art {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--surface);
}
.rcard-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rcard-art .playbadge {
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
}
.rcard-art .playbadge .icon {
  width: 19px;
  height: 19px;
  margin-left: 2px;
}
.rcard-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.rcard-kicker {
  font: 700 0.6875rem/1.3 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rcard-title {
  font: 800 1.0625rem/1.08 var(--display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ivory);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rcard-meta {
  font: 400 0.8125rem/1.3 var(--sans);
  color: var(--muted);
}
.card-progress {
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: rgba(251, 246, 235, 0.28);
}
.card-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--ivory);
}

/* ---- Title pages: episodes and details ---- */
.page-title .hero-stage {
  height: clamp(320px, 50svh, 520px);
}
.stack-title {
  padding-top: clamp(40px, 6vw, 80px);
}
.episodes {
  display: grid;
}
.eprow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px 14px;
  align-items: start;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.eprow-art {
  position: relative;
  display: block;
  overflow: hidden;
  grid-row: 1;
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
  background: var(--surface);
}
.eprow-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
.eprow:hover .eprow-art img,
.eprow:focus-visible .eprow-art img {
  transform: scale(1.03);
}
.eprow-art .playbadge {
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
}
.eprow-art .playbadge .icon {
  width: 23px;
  height: 23px;
  margin-left: 2px;
}
.eprow-num {
  grid-row: 2;
  grid-column: 1;
  font: 800 1.75rem/0.9 var(--display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ivory);
}
.eprow-copy {
  grid-row: 2;
  grid-column: 2;
  display: grid;
  gap: 8px;
  min-width: 0;
}
.eprow-title {
  font: 800 1.375rem/1 var(--display);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ivory);
}
.eprow-meta {
  font: 600 0.75rem/1.3 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.eprow-desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text);
  max-width: 64ch;
}
.details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 32px;
}
.details div {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.details dt {
  font: 700 0.6875rem/1.3 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.details dd {
  font-weight: 400;
  color: var(--ivory);
  overflow-wrap: anywhere;
}
.details-stack {
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .eprow {
    grid-template-columns: 72px minmax(240px, 340px) minmax(0, 1fr);
    gap: 0 32px;
    align-items: center;
    padding: 28px 0;
  }
  .eprow-num,
  .eprow-art,
  .eprow-copy {
    grid-row: auto;
    grid-column: auto;
  }
  .eprow-num {
    font-size: 3rem;
  }
  .eprow-copy {
    gap: 10px;
  }
  .eprow-title {
    font-size: 1.875rem;
  }
  .eprow-desc {
    font-size: 1rem;
  }
}
@media (min-width: 1024px) {
  .page-title .hero {
    min-height: clamp(560px, 86svh, 920px);
  }
  .page-title .hero-stage {
    height: auto;
  }
}

/* ---- Shared basics the owner's Studio was built on. Unchanged; the public pages restyle these
   under .doc below, so nothing here shifts the Studio. ---- */
details {
  border-bottom: 1px solid var(--line);
}
summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 14px 36px 14px 0;
  font-weight: 600;
  color: var(--cream);
  cursor: pointer;
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}
summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -7px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease);
}
details[open] summary::after {
  transform: rotate(225deg);
  margin-top: -2px;
}
details p {
  padding: 0 0 18px;
  color: var(--muted);
  max-width: 68ch;
}
form {
  display: grid;
  gap: 12px;
}
label {
  font: 600 0.68rem/1.3 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
input[type="email"],
input[type="password"],
input:not([type]),
select {
  width: 100%;
  min-height: 54px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.5);
  font-size: 1.05rem;
  color: var(--cream);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
input:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(227, 189, 108, 0.18);
}
.form-error {
  color: #ffa3b1;
  font-weight: 500;
}

/* ---- Documents: plans, ways to watch, My List, account, support, privacy, terms, not found ---- */
.doc {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  align-content: start;
  min-width: 0;
  min-height: calc(100svh - var(--tabs));
  padding: calc(var(--top) + clamp(40px, 9vw, 112px)) var(--gutter)
    clamp(64px, 9vw, 128px);
}
.doc > * {
  min-width: 0;
}
.doc .section {
  padding: 0;
}
.doc-head {
  display: grid;
  gap: 18px;
  padding-bottom: clamp(28px, 4vw, 48px);
  border-bottom: 1px solid var(--line-strong);
}
.doc-head .display {
  font-size: clamp(2.5rem, 11.6vw, 3.5rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  max-width: 13ch;
  overflow-wrap: break-word;
}
.doc-head .lede {
  max-width: 46ch;
}
.doc .rule-head {
  margin-top: 8px;
}
@media (min-width: 900px) {
  .doc-head {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    column-gap: clamp(40px, 7vw, 120px);
    align-items: end;
  }
  .doc-head .eyebrow {
    grid-column: 1 / -1;
  }
  .doc-head .display {
    font-size: clamp(3.75rem, 6.6vw, 7rem);
    line-height: 0.88;
  }
  .doc-head .lede {
    padding-bottom: 8px;
  }
}
/* Reading pages: one comfortable column. */
.prose {
  display: grid;
  gap: 16px;
  max-width: 68ch;
  color: var(--text);
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.prose > *,
.prose details > *,
.contact-box > * {
  min-width: 0;
}
.prose h2 {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font: 800 1.25rem/1.15 var(--display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ivory);
}
.prose a,
.faq a,
.panel a:not(.btn),
.notice a,
.empty-box > p a,
.player-end-roku a {
  color: var(--ivory);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.prose a:hover,
.faq a:hover,
.panel a:not(.btn):hover {
  text-decoration-thickness: 2px;
}
/* A link inside a sentence keeps its line but gets a full-height touch area. */
.faq a,
.panel a:not(.btn),
.notice a,
.empty-box > p a,
.player-end-roku a {
  display: inline-block;
  margin: -13px 0;
  padding: 13px 0;
}
.updated {
  font-size: 0.875rem;
  color: var(--muted);
}
.contact-box {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 24px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
}
.contact-box h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
/* Questions that open and close. The sign turns from plus to minus. */
.doc details {
  border-bottom: 1px solid var(--line);
}
.doc summary {
  min-height: 60px;
  padding: 16px 48px 16px 0;
  font: 600 1.0625rem/1.35 var(--sans);
  color: var(--ivory);
}
.doc summary::before,
.doc summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 16px;
  height: 2px;
  margin-top: -1px;
  border: 0;
  background: var(--ivory);
  transform: none;
  transition: transform 0.3s var(--ease);
}
.doc summary::after {
  transform: rotate(90deg);
}
.doc details[open] summary::after {
  margin-top: -1px;
  transform: rotate(0deg);
}
.doc details p {
  padding: 0 0 22px;
  color: var(--text);
  max-width: 64ch;
}
.faq {
  display: grid;
  max-width: 880px;
}
.faq .rule-head {
  margin-bottom: 0;
}

/* Ways to watch */
.ways {
  display: grid;
}
.way {
  display: grid;
  gap: 16px;
  padding: 28px 0 32px;
  border-bottom: 1px solid var(--line);
}
.way-head {
  display: grid;
  gap: 14px;
  align-content: start;
}
.way-name {
  font: 800 clamp(1.875rem, 8.4vw, 2.5rem) / 0.96 var(--display);
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--ivory);
  text-wrap: balance;
}
.way-body {
  display: grid;
  gap: 20px;
  justify-items: start;
  align-content: start;
}
.way-body p {
  color: var(--text);
  max-width: 52ch;
}
@media (min-width: 900px) {
  .way {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: clamp(40px, 7vw, 120px);
    padding: 40px 0 44px;
  }
  .way-name {
    font-size: clamp(2.25rem, 3.8vw, 3.75rem);
  }
  .way-body {
    padding-top: 38px;
  }
}

/* Plans on its own page */
.doc .plans {
  border-top: 0;
}

/* My List */
.saved-list {
  display: grid;
  margin-top: calc(-1 * clamp(32px, 5vw, 56px));
}
.saved-list:empty {
  display: none;
}
.saved-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
}
.saved-row .prog-row {
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  min-height: 88px;
  border-bottom: 0;
}
.saved-row .prog-art {
  width: 64px;
  height: 64px;
}
.saved-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 48px;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: none;
  font: 700 0.75rem/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}
.saved-remove:hover {
  border-color: var(--ivory);
  background: rgba(251, 246, 235, 0.08);
}
.saved-remove .icon {
  width: 18px;
  height: 18px;
}
.saved-remove span {
  display: none;
}
.empty-box {
  display: grid;
  gap: 24px;
  justify-items: start;
  color: var(--text);
}
.empty-box > p {
  max-width: 44ch;
  font-size: 1.0625rem;
  line-height: 1.65;
}
.empty-box strong {
  color: var(--ivory);
}
.empty-box .programme {
  justify-self: stretch;
  margin-top: clamp(24px, 4vw, 48px);
  padding-top: 0;
}
@media (min-width: 900px) {
  .saved-row .prog-row {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 28px;
    min-height: 120px;
  }
  .saved-row .prog-art {
    width: 88px;
    height: 88px;
  }
  .saved-remove {
    padding: 0 18px;
  }
  .saved-remove span {
    display: inline;
  }
}

/* Account */
.panel {
  display: grid;
  gap: 18px;
  max-width: 560px;
}
.panel .display {
  font-size: clamp(1.5rem, 6vw, 1.875rem);
  letter-spacing: -0.02em;
}
.panel p {
  color: var(--text);
}
.panel .actions {
  margin-top: 4px;
}
.panel > .btn {
  justify-self: start;
}
.doc form {
  gap: 10px;
  margin-top: 6px;
}
.doc label {
  font: 700 0.6875rem/1.3 var(--sans);
  color: var(--muted);
}
.doc input[type="email"],
.doc input:not([type]) {
  min-height: 56px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--surface);
  font-size: 1.0625rem;
  color: var(--ivory);
}
.doc input:focus-visible {
  outline: 2px solid var(--ivory);
  outline-offset: 2px;
  border-color: var(--ivory);
  box-shadow: none;
}
.doc #code {
  font: 800 1.75rem/1 var(--display);
  letter-spacing: 0.4em;
}
.doc form > .btn {
  justify-self: start;
  margin-top: 8px;
}
.doc form .actions {
  margin-top: 8px;
}
/* An error is a marked line of plain words, not only a colour. */
.doc .form-error {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 12px 14px;
  border-left: 3px solid #ffb4bf;
  background: rgba(255, 180, 191, 0.08);
  color: #ffd2d8;
  font-weight: 600;
}
.notice {
  max-width: 720px;
  padding: 16px 20px;
  border-left: 3px solid var(--ivory);
  background: var(--surface);
  color: var(--ivory);
}

/* Not found */
.page-404 .doc {
  align-content: center;
  overflow: hidden;
}
.page-404 .doc-head {
  grid-template-columns: minmax(0, 1fr);
  border-bottom: 0;
  padding-bottom: 0;
}
.lost-code {
  position: absolute;
  right: -0.04em;
  bottom: -0.16em;
  z-index: -1;
  font: 800 clamp(11rem, 50vw, 36rem) / 0.8 var(--display);
  letter-spacing: -0.07em;
  color: var(--surface);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
/* One hairline at the slope of the W in the mark. */
.page-404 .doc::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  right: 24%;
  z-index: -1;
  width: 1px;
  background: var(--line-strong);
  transform: rotate(27.65deg);
}
@media (max-width: 899px) {
  .page-404 .doc::after {
    top: 62%;
    right: 30%;
  }
}

/* ---- Player ---- */
.page-watch {
  overflow: hidden;
  padding: 0;
  background: #000;
}
.player {
  position: fixed;
  inset: 0;
  background: #000;
  color: var(--ivory);
  user-select: none;
  -webkit-user-select: none;
}
.player-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.player-video::cue {
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-family: var(--sans);
}
.player-gate {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #000;
}
.player-gate picture {
  position: absolute;
  inset: 0;
}
.player-gate img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}
/* Held upright, a phone shows the whole poster instead of a sliver of the wide still. */
@media (orientation: portrait) {
  .player-gate img {
    object-fit: contain;
    opacity: 0.8;
  }
}
.player-gate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    60% 60% at 50% 50%,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.74)
  );
}
.player-bigplay {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border: 0;
  border-radius: 2px;
  background: var(--ivory);
  color: #080808;
  cursor: pointer;
  transition:
    transform 0.3s var(--ease),
    background-color 0.3s ease;
}
.player-bigplay .icon {
  width: 44px;
  height: 44px;
  margin-left: 5px;
}
.player-bigplay:hover {
  transform: scale(1.06);
  background: var(--accent);
}
.player-ads {
  position: absolute;
  inset: 0;
  z-index: 7;
  background: #000;
}
.player-ads-stage {
  position: absolute;
  inset: 0;
}
.player-ads-note {
  position: absolute;
  left: var(--gutter);
  bottom: calc(18px + env(safe-area-inset-bottom));
  font: 700 0.75rem/1.3 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  pointer-events: none;
}
.player-ui {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 1;
  transition: opacity 0.35s ease;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.78) 0%,
    transparent 24%,
    transparent 60%,
    rgba(0, 0, 0, 0.9) 100%
  );
}
.player[data-idle] .player-ui {
  opacity: 0;
  pointer-events: none;
}
.player[data-idle] {
  cursor: none;
}
/* On the start screen the controls layer sits over the start button. It lets presses through to
   the button beneath; only its own top bar (the back link) stays live. */
.player[data-stage="gate"] .player-ui {
  pointer-events: none;
}
.player[data-stage="gate"] .player-top {
  pointer-events: auto;
}
.player[data-stage="gate"] .player-bottom,
.player[data-stage="ident"] .player-ui,
.player[data-stage="ad"] .player-ui,
.player[data-stage="ended"] .player-ui,
.player[data-stage="error"] .player-bottom {
  display: none;
}
.player-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) var(--gutter) 0
    calc(var(--gutter) - 12px);
}
.player-back {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 2px;
  color: var(--ivory);
  transition: background-color 0.2s ease;
}
.player-back:hover {
  background: rgba(251, 246, 235, 0.16);
}
.player-back .icon {
  width: 26px;
  height: 26px;
}
.player-heading {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.player-heading p {
  font: 700 0.6875rem/1.3 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-heading h1 {
  font: 800 clamp(1.0625rem, 2.4vw, 1.625rem) / 1.05 var(--display);
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--ivory);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-bottom {
  display: grid;
  gap: 2px;
  padding: 0 var(--gutter) calc(10px + env(safe-area-inset-bottom));
}
.scrub {
  position: relative;
  display: grid;
  align-items: center;
  height: 32px;
}
.scrub-track {
  position: relative;
  height: 4px;
  background: rgba(251, 246, 235, 0.26);
  transition: height 0.15s ease;
}
.scrub:hover .scrub-track {
  height: 8px;
}
.scrub-buffer,
.scrub-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
}
.scrub-buffer {
  background: rgba(251, 246, 235, 0.3);
}
.scrub-fill {
  background: var(--ivory);
}
.scrub-marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Where the ad breaks fall. */
.scrub-marks i {
  position: absolute;
  top: 50%;
  width: 4px;
  height: 12px;
  margin: -6px 0 0 -2px;
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
}
.scrub-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.scrub:has(.scrub-input:focus-visible) .scrub-track {
  outline: 2px solid var(--ivory);
  outline-offset: 5px;
}
.controls {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 -10px;
}
.controls button {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border: 0;
  border-radius: 2px;
  background: none;
  color: var(--ivory);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.controls button .icon {
  width: 26px;
  height: 26px;
}
.controls button:hover {
  background: rgba(251, 246, 235, 0.16);
}
/* Captions that are on carry a bar under the button as well as the pressed state. */
.controls button[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 5px;
  height: 2px;
  background: var(--ivory);
}
.controls-gap {
  flex: 1;
}
.time {
  padding: 0 8px;
  font: 600 0.8125rem/1 var(--sans);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}
@media (max-width: 520px) {
  .player-heading h1 {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  /* On a phone the time sits above the scrub bar, so every control keeps a full-size touch area
     and the row never runs off a narrow screen. */
  .player-bottom {
    position: relative;
  }
  .time {
    position: absolute;
    right: var(--gutter);
    top: -18px;
    padding: 0;
    font-size: 0.75rem;
  }
  .controls button {
    width: 44px;
    height: 44px;
  }
}
.player-message,
.player-end {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 20px;
  padding: 24px var(--gutter);
  background: rgba(0, 0, 0, 0.92);
}
.player-message p {
  font-size: 1.125rem;
  color: var(--ivory);
  max-width: 46ch;
}
.player-end .display {
  font-size: clamp(2rem, 6.4vw, 4.5rem);
  line-height: 0.92;
  max-width: 18ch;
}
.player-end-roku {
  margin-top: 6px;
  color: var(--text);
}

/* ---- A private draft preview from the Content Studio (never shown to viewers) ---- */
.preview-flag {
  position: fixed;
  z-index: 90;
  top: calc(var(--top) + 12px);
  right: 16px;
  padding: 8px 14px;
  background: var(--ivory);
  color: #080808;
  font: 700 0.72rem/1.2 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}