/* ── A title's page: the site's own titles (templates/title.html), the
   archives' films (archive_item.html) and the rights holders' films
   (rights_film.html) ──────────────────────────────────────────────
   The owner's "Night broadcast" of 2026-11-11 (Title.dc.html): the title
   large on a dark hero, its picture behind it where there is one, Play in
   white beside the quieter buttons; below, what goes with the title
   (chapters, episodes, more like it) beside "This copy": where the copy
   comes from and what allows it here. The hero is dark in both themes
   (.dark-surface), a screen in a dark room; the colours are the site's
   tokens (style.css). Nothing here moves after the first paint: the hero
   has its height from its words, the player's box its shape before Play. */

/* ── The hero ───────────────────────────────────────────── */
.title-hero,
.film-hero,
.rf-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(2.5rem, 6vw, 5.5rem) var(--gutter) clamp(2rem, 4vw, 3.5rem);
  background: radial-gradient(120% 90% at 85% 0%, oklch(0.24 0.04 287 / 0.55), transparent 60%), var(--bg);
}
.title-hero-inner { position: relative; z-index: 1; max-width: 46rem; }
/* With the title's picture: full bleed behind the words, a scrim from the
   left (where the words are) and from the foot (where the page goes on). */
.title-hero--art {
  display: flex;
  align-items: flex-end;
  min-height: clamp(30rem, 74vh, 56rem);
  overflow: hidden;
  background: var(--bg);
}
.title-hero-art,
.title-hero-art img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.title-hero-art img { object-fit: cover; object-position: 70% 30%; background-size: cover; background-position: center; }
.title-hero--art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, var(--bg) 3%, transparent 42%),
    /* Strong under the words whatever the window's width (they reach
       46rem from the gutter), clearing beyond them. */
    linear-gradient(90deg, oklch(0.1 0.005 265 / 0.96) 0, oklch(0.1 0.005 265 / 0.86) calc(var(--gutter) + 46rem), transparent calc(var(--gutter) + 46rem + 30vw));
}

/* The kicker over the title: what it is, and its genres. */
.title-kicker { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--text-muted); }
.title-genre::before { content: "·"; margin: 0 0.5em; color: var(--text-dim); }

/* The title itself, in the display face; a long one a size down. */
.title-name,
.film-title {
  margin: 0.6rem 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.75rem, 1.25rem + 6vw, 8.5rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.title-name--long,
.film-title--long { font-size: clamp(2.25rem, 1rem + 3.6vw, 5rem); line-height: 0.95; letter-spacing: -0.035em; }

/* Year, length, rating and the rest: one line of facts. */
.title-meta,
.film-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.title-meta-dot { color: var(--text-dim); }
.title-meta-text { font-variant-numeric: tabular-nums; }
.title-badge,
.film-badge {
  padding: 1px 7px;
  border: 1px solid color-mix(in oklab, var(--text) 40%, transparent);
  border-radius: 5px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
}
.title-access-help { font-size: 0.8125rem; color: var(--text-muted); text-decoration: underline; }

.title-synopsis,
.film-creator { margin: 1.25rem 0 0; max-width: 40rem; font-size: clamp(1rem, 0.9rem + 0.4vw, 1.1875rem); line-height: 1.5; color: var(--text-muted); text-wrap: pretty; }
.film-genres { display: flex; flex-wrap: wrap; margin: 0.6rem 0 0; color: var(--text-muted); font-size: 0.9375rem; }
.film-genres span + span::before { content: "·"; margin: 0 0.5em; color: var(--text-dim); }

/* ── The buttons: Play in white, the rest quiet glass ───────── */
.title-actions,
.film-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 1.75rem 0 0; }
/* The buttons set their own display, which would otherwise outrank [hidden]. */
.title-actions [hidden],
.film-actions [hidden] { display: none; }
.title-play-btn,
.film-play {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.5rem;
  padding: 0 2rem;
  border: 0;
  border-radius: 12px;
  background: var(--action);
  color: var(--on-action);
  font: inherit;
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition);
}
.title-play-btn .icon,
.film-play .icon { width: 1.15em; height: 1.15em; vertical-align: 0; fill: currentColor; }
.title-play-btn:hover,
.film-play:hover { background: var(--action-hover); }
.title-watchlist-btn,
.film-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3.5rem;
  padding: 0 1.25rem;
  border: 1px solid color-mix(in oklab, var(--text) 22%, transparent);
  border-radius: 12px;
  background: color-mix(in oklab, var(--bg-raised) 60%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition);
}
.title-watchlist-btn .icon { width: 1.15em; height: 1.15em; vertical-align: 0; }
.title-watchlist-btn:hover,
.film-secondary:hover { background: color-mix(in oklab, var(--text) 16%, var(--bg-raised)); }
.title-resume-hint,
.film-resume { font-size: 0.9375rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* Only where the browser can keep a title offline (set in the head, before the first paint). */
.title-actions .title-download-btn { display: none; font-variant-numeric: tabular-nums; }
:root.can-download .title-actions .title-download-btn:not([hidden]) { display: inline-flex; }

/* Who made it: a line each, the role dim. */
.title-info { display: grid; gap: 0.15rem; margin: 1.5rem 0 0; max-width: 40rem; font-size: 0.9375rem; line-height: 1.6; color: var(--text-muted); }
.title-info-label { color: var(--text-dim); }
.title-unavailable,
.film-unavailable { max-width: 40rem; margin: 1.25rem 0 0; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in oklab, var(--bg-raised) 80%, transparent); color: var(--text); }
.film-note { max-width: 40rem; margin: 1rem 0 0; font-size: var(--step--1); color: var(--text-muted); }
.film-unavailable a,
.film-note a { color: var(--accent-text); text-decoration: underline; }

/* ── The player's place, opened by Play ─────────────────── */
.title-player,
.film-player { display: none; max-width: 72rem; margin: 1.5rem auto 0; padding: 0 var(--gutter); }
.title-player.active,
.film-player.active { display: block; }
.title-player-viewport { width: 100%; aspect-ratio: 16 / 9; background: var(--media-bg); border-radius: 16px; overflow: hidden; }
.film-viewport { width: 100%; aspect-ratio: 4 / 3; max-height: 75vh; background: var(--media-bg); border-radius: 16px; overflow: hidden; }

/* ── Below the hero: what goes with it, and This copy ──────── */
.title-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 22.5rem);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--gutter) 3rem;
}
.title-body:not(:has(> .title-main > *)) { grid-template-columns: minmax(0, 40rem); }
.title-main { min-width: 0; display: grid; gap: 2.5rem; }
.title-main > * { margin: 0; }
.title-main h2,
.title-section-h { margin: 0 0 0.9rem; font-size: 1.25rem; font-weight: 700; }
.title-copy {
  padding: 1.375rem;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--bg-raised);
  font-size: var(--step--1);
  overflow-wrap: anywhere;
}
.title-copy-h { margin: 0 0 0.9rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); }
.title-copy p { margin: 0 0 0.75rem; line-height: 1.5; color: var(--text-muted); }
.title-copy p:last-child { margin-bottom: 0; }
.title-copy a { color: var(--accent-text); text-decoration: underline; }
.title-copy .made-off { margin: 0 0 0.75rem; }

/* Chapters: boxes in a grid, the time in the accent above the name. */
.title-chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.title-chapters a {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  height: 100%;
  box-sizing: border-box;
  padding: 0.875rem;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--bg-raised);
  color: var(--text);
  text-decoration: none;
  line-height: 1.4;
}
.title-chapters a:hover { background: var(--bg-hover); }
.title-chapters a[aria-current] { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.title-chapter-time { color: var(--accent-text); font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.title-chapter-name { font-size: 0.875rem; color: var(--text-muted); }

/* Catch me up (inv-recap.js): lines said so far, each opening the film there. */
.title-recap { margin: 0 0 1.5rem; max-width: 62ch; }
.title-recap h2 { font-size: var(--step-1); margin: 0 0 0.5rem; }
.title-recap-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.title-recap-lines a { display: flex; gap: 0.75rem; padding: 0.35rem 0; color: var(--text); text-decoration: none; line-height: 1.5; }
.title-recap-lines a:hover q,
.title-recap-lines a:focus-visible q { text-decoration: underline; }
.title-recap-time { flex: 0 0 auto; min-width: 3.5em; color: var(--accent-text); font-family: var(--font-mono); font-size: var(--step--1); padding-top: 0.15em; font-variant-numeric: tabular-nums; }
.title-recap-last,
.title-recap-note { color: var(--text-muted); font-size: var(--step--1); }
.title-recap-note { margin-top: 0.6rem; }

/* Episodes, by season. */
.season-tab { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem; margin: 0 0.5rem 0.5rem 0; border: 1px solid var(--hairline); border-radius: 999px; background: none; color: var(--text-muted); font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: background var(--transition), color var(--transition); }
.season-tab:hover { color: var(--text); background: var(--tint); }
.season-tab.active { background: var(--action); border-color: var(--action); color: var(--on-action); }
.episode-list { margin-top: 0.75rem; }
.episode-card { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 0.75rem; border-bottom: 1px solid var(--hairline); border-radius: 12px; cursor: pointer; transition: background var(--transition); }
.episode-card:hover { background: var(--tint); }
.episode-card.now-playing { background: var(--accent-tint); box-shadow: inset 3px 0 0 var(--accent); }
.episode-num { flex-shrink: 0; width: 2.5rem; color: var(--text-dim); font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.episode-info { flex: 1; min-width: 0; }
.episode-title { margin-bottom: 4px; font-size: 1rem; font-weight: 600; }
.episode-synopsis { font-size: var(--step--1); color: var(--text-muted); line-height: 1.5; }
.episode-runtime { margin-top: 4px; font-size: var(--step--2); color: var(--text-dim); }
.episode-progress { height: 3px; margin-top: 6px; overflow: hidden; border-radius: 2px; background: var(--tint-strong); }
.episode-progress-fill { height: 100%; border-radius: 2px; background: var(--accent); }
.episode-play { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--tint-strong); color: var(--text); cursor: pointer; transition: background var(--transition), color var(--transition); }
.episode-play .icon { width: 14px; height: 14px; margin-left: 2px; fill: currentColor; }
.episode-play:hover { background: var(--action); color: var(--on-action); }

/* More like this: the posters whole (2:3). */
.related-card-art { aspect-ratio: 2 / 3; border-radius: 12px; }

/* Watch together's panel, under the player. It comes with the page, hidden,
   so that opening a room shows it in the same moment as the click, before
   inv-together.js has arrived: nothing then moves when the script fills it. */
.together { margin-top: 0.9rem; padding: 0.9rem 1rem; display: grid; gap: 0.65rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-raised); }
.together[hidden] { display: none; }
/* The count follows the heading rather than sitting at the far edge: its
   text changes, and right-aligned text that changes width moves. */
.together-head { display: flex; align-items: baseline; gap: 0.4rem 1rem; flex-wrap: wrap; }
.together-h { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-size: var(--step-0); font-weight: 700; }
.together-h .icon { width: 1.2em; height: 1.2em; }
.together-count { font-size: var(--step--1); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.together-note { margin: 0; font-size: var(--step--2); color: var(--text-dim); }
/* Room for two lines on a phone and one on a wider screen, whatever is
   said, so a message arriving never moves the page. */
.together-role,
.together-status { margin: 0; font-size: var(--step--1); color: var(--text-muted); min-height: 2.9em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; }
@media (min-width: 640px) { .together-role, .together-status { min-height: 1.45em; -webkit-line-clamp: 1; } }
.together-status.together-status--final { display: block; min-height: 0; overflow: visible; }
.together-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.together-actions [hidden],
.together-link[hidden] { display: none; }
/* Its place is kept while it is hidden, so it can come and go without moving anything. */
.together-actions .together-catchup[hidden] { display: inline-flex; visibility: hidden; }
.together-open { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; font-size: var(--step--1); cursor: pointer; }
.together-open input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); }
.together-link { width: 100%; padding: 0.55rem 0.7rem; font: inherit; font-size: var(--step--1); color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); }
.together-reactions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.together-react { min-width: 44px; min-height: 44px; padding: 0 0.5rem; font-size: 1.35rem; line-height: 1; border: 1px solid var(--hairline); border-radius: 999px; background: var(--tint); cursor: pointer; transition: background var(--transition), transform var(--transition); }
.together-react:hover { background: var(--tint-strong); }
.together-react:active { transform: scale(0.92); }
.together-react:disabled { opacity: 0.5; cursor: default; }

/* ── An archive's film: its still framed beside the words, and the still
   again, blurred, as the hero's light (the archives' stills are small). */
.film-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--still, none) center / cover no-repeat;
  filter: blur(40px) saturate(1.2);
  opacity: 0.25;
  transform: scale(1.15);
}
.film-hero { overflow: hidden; }
/* Under the words the light is dimmed by half again: a bright still keeps
   every line at AA. */
.film-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--bg) 0%, transparent 55%), oklch(0.1 0.005 265 / 0.55); }
.film-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.film-hero-inner > :not(.film-still) { order: -1; }
.film-still { aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--placeholder); box-shadow: 0 0 0 1px var(--hairline) inset, var(--shadow-2); }
.film-still img { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-part[aria-pressed="true"] { background: var(--action); color: var(--on-action); border-color: var(--action); }
.film-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.6rem 1rem; margin: 0; }
.film-facts dt { color: var(--text-dim); font-weight: 600; }
.film-facts dd { margin: 0; color: var(--text-muted); overflow-wrap: anywhere; }
.film-facts a { color: var(--accent-text); text-decoration: underline; }
.film-about > p { max-width: 70ch; margin: 0 0 0.9rem; line-height: 1.65; color: var(--text-muted); overflow-wrap: anywhere; }
.film-related .card-visual { aspect-ratio: 4 / 3; }

/* ── A rights holder's film: its own picture on a stage, Play in it, the
   words beside (the channel stage's shape, templates/channels/watch.html).
   Then YouTube's player in its place, at least 200 px each way, nothing over it. */
.rf-hero-inner { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(18rem, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.rf-stage { position: relative; aspect-ratio: 16 / 9; min-height: 200px; min-width: 200px; border-radius: 16px; overflow: hidden; background: var(--media-bg); box-shadow: var(--shadow-2); }
.rf-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.rf-stage iframe,
.rf-stage video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--media-bg); }
/* An AI-made film's label, on the site's own picture only: Play puts
   YouTube's player in the stage's place, with nothing over it. */
.rf-ai-badge { position: absolute; left: 0.75rem; top: 0.75rem; padding: 0.15rem 0.55rem; border-radius: 6px; background: var(--surface); color: var(--text); border: 1px solid var(--hairline); font-size: var(--step--1); font-weight: 700; }
.rf-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.5rem;
  padding: 0 2rem;
  border: 0;
  border-radius: 12px;
  background: var(--action);
  color: var(--on-action);
  font: inherit;
  font-size: 1.125rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-2);
}
.rf-play .icon { width: 1.15em; height: 1.15em; fill: currentColor; }
.rf-play:hover { background: var(--action-hover); }
.rf-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; margin: 0 0 0.5rem; font-size: 0.9375rem; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rf-title { margin: 0 0 0.6rem; overflow-wrap: anywhere; }
.rf-label { margin: 0 0 0.75rem; font-weight: 600; }
.rf-note { max-width: 62ch; margin: 0 0 0.9rem; font-size: var(--step--1); line-height: 1.55; color: var(--text-muted); }
.rf-note a,
.rf-facts a,
.rf-sources a { color: var(--accent-text); text-decoration: underline; }
.rf-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.rf-facts { min-width: 0; }
.rf-desc { max-width: 70ch; margin: 0 0 0.9rem; line-height: 1.6; color: var(--text-muted); overflow-wrap: anywhere; white-space: pre-line; }
.rf-facts dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.6rem 1rem; margin: 0; }
.rf-facts dt { color: var(--text-dim); font-weight: 600; }
.rf-facts dd { margin: 0; color: var(--text-muted); overflow-wrap: anywhere; }
.rf-sources { max-width: 70ch; font-size: var(--step--2); color: var(--text-dim); }
.rf-kind { display: inline-block; padding: 1px 7px; border: 1px solid color-mix(in oklab, var(--text) 40%, transparent); border-radius: 5px; color: var(--text); font-weight: 600; }
.rf-kind--live { border-color: var(--live-text); color: var(--text); }
.rf-kind--live::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--live-text); }
.rf-series { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: baseline; margin: 0 0 0.9rem; font-size: var(--step--1); }
.rf-series a { color: var(--accent-text); text-decoration: underline; }

/* ── Narrower screens ───────────────────────────────────── */
@media (max-width: 1023px) {
  .title-body { grid-template-columns: minmax(0, 1fr); }
  .rf-hero-inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .title-hero,
  .film-hero,
  .rf-hero { padding: 1.5rem 16px 1.75rem; }
  /* On a phone the picture is a band at the top, fading into the ground
     the words stand on: they begin where it is three quarters faded. */
  .title-hero--art { display: block; min-height: 0; padding-top: calc(min(75vw, 30rem) - 3rem); }
  .title-hero--art .title-hero-art,
  .title-hero--art .title-hero-art img { bottom: auto; height: min(75vw, 30rem); }
  .title-hero--art::after { background: linear-gradient(180deg, transparent 0, transparent calc(min(75vw, 30rem) * 0.3), var(--bg) min(75vw, 30rem)); }
  .title-actions,
  .film-actions { gap: 0.5rem; }
  .title-play-btn,
  .film-play { flex: 1 0 100%; justify-content: center; }
  .title-watchlist-btn,
  .film-secondary { min-height: 3rem; padding: 0 1rem; font-size: 0.9375rem; }
  .title-body { padding: 1.5rem 16px 2.5rem; }
  .film-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .film-hero-inner > :not(.film-still) { order: 0; }
  .film-still { max-width: 24rem; }
  .film-facts,
  .rf-facts dl { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .film-facts dd,
  .rf-facts dd { margin-bottom: 0.6rem; }
  .title-player,
  .film-player { padding: 0 16px; }
}
/* On a TV the hero leaves room below it for the next row to show. */
:root[data-tv] .title-hero--art { min-height: 62vh; }
/* A rail inside the main column keeps to the column's edge. */
.title-main .shelf-rail { padding-inline: 0; }