/* Cinematic discovery with the original charcoal-and-peach palette. */
body.cinematic-experience {
  --bg: #141516;
  --panel: #1e2022;
  --text: #f5f3ef;
  --muted: #b7b8ba;
  --line: #ffffff1c;
  --accent: #f4a38c;
  --accent-soft: #fac1ae;
  --accent-ink: #261c18;
  --cinema-bg: var(--bg);
  --cinema-surface: var(--panel);
  --cinema-soft: var(--muted);
  color: var(--text);
  background: var(--bg);
  color-scheme: dark;
}

body.cinematic-experience .primary,
body.cinematic-experience .resume-action {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid transparent;
  font-weight: 620;
  box-shadow: none;
}
body.cinematic-experience .primary:active,
body.cinematic-experience .resume-action:active { background: #e9937b; }
body.cinematic-experience .resume-action {
  display: inline-flex;
  min-height: 44px;
  padding: 9px 13px;
  margin-top: 8px;
  border-radius: 9px;
  font-size: 14px;
}
body.cinematic-experience .resume-action svg { width: 16px; height: 16px; }
body.cinematic-experience .secondary { background: #ffffff08; border-color: #ffffff30; color: var(--text); }
body.cinematic-experience .tool-button[aria-pressed="true"],
body.cinematic-experience .tool-button[aria-pressed="true"]:hover { color: var(--accent-soft); }
body.cinematic-experience .save-icon[aria-pressed="true"] { border-color: #f4a38c80; }
body.cinematic-experience .navigation small { background: var(--accent); color: var(--accent-ink); }
body.cinematic-experience .filter-chip[aria-pressed="true"] {
  color: var(--accent-soft);
  border-color: #f4a38c80;
  background: #f4a38c18;
}
body.cinematic-experience .filter-options,
body.cinematic-experience .unavailable-card { background: var(--panel); }
body.cinematic-experience .availability-notice { background: #f4a38c09; }
body.cinematic-experience .detail-premise,
body.cinematic-experience .watch-description { color: #d7d6d3; }
body.cinematic-experience .poster-fallback { background: linear-gradient(150deg, #363031, #1e2022); }
body.cinematic-experience .story-art:hover,
body.cinematic-experience .story-art:focus-visible { border-color: #f4a38c80; }

/* Return is the first task. Other unfinished stories stay one disclosure away. */
body.cinematic-experience .cinematic-home .continue-section { margin: 0 0 24px; }
body.cinematic-experience .cinematic-home .resume-card {
  max-width: none;
  border-color: #f4a38c24;
  background: var(--panel);
  padding: 14px;
}
body.cinematic-experience .resume-card h3 a { display: inline-flex; align-items: center; min-height: 44px; }
body.cinematic-experience .resume-card h3 { margin: 0; }
body.cinematic-experience .resume-card p { margin-top: 0; color: var(--muted); }
body.cinematic-experience .resume-image .poster-fallback { background: var(--panel); }
body.cinematic-experience .continue-section .section-heading { margin-bottom: 12px; }

body.cinematic-experience .cinematic-hero { background: #202224; border-color: #ffffff13; }
body.cinematic-experience .hero-stage { background: linear-gradient(90deg, #202326, #141516); }
body.cinematic-experience .hero-scrim {
  background: linear-gradient(90deg, #202224 0%, #202224f5 28%, #202224b8 45%, #20222438 61%, transparent 80%);
}
body.cinematic-experience .cinematic-hero-copy .eyebrow { color: var(--accent-soft); }
body.cinematic-experience .cinematic-hero-copy h1 { font-weight: 590; letter-spacing: -.04em; }
body.cinematic-experience .hero-title { display: flex; align-items: center; min-height: 44px; }
body.cinematic-experience .hero-stage:focus-visible { outline-offset: -4px; }
body.cinematic-experience .featured-picker { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 10px 0 24px; }
body.cinematic-experience .featured-picker button { min-height: 44px; padding: 8px 10px; border: 1px solid #ffffff20; border-radius: 12px; background: #ffffff04; color: var(--muted); font: inherit; font-size: 13px; line-height: 1.3; cursor: pointer; }
body.cinematic-experience .featured-picker button[aria-pressed="true"] { color: var(--accent-soft); border-color: var(--accent); background: #fac1ae0a; }
body.cinematic-experience .hero-hook { color: #dfdfde; }
body.cinematic-experience .hero-meta { color: var(--muted); }
body.cinematic-experience .hero-info { background: #1e2022dc; border-color: #ffffff38; }
body.cinematic-experience .hero-preview-toggle,
body.cinematic-experience .hero-preview-sound,
body.cinematic-experience .card-play { background: #111315dc; color: var(--text); }

/* Words explain the slower path; no mystery "i" target squeezed beside Watch. */
body.cinematic-experience .card-actions { flex-direction: column; align-items: stretch; gap: 0; }
body.cinematic-experience .card-actions .card-link { flex: none; min-width: 44px; margin-top: 3px; color: var(--accent-soft); }
body.cinematic-experience .card-info {
  justify-content: space-between;
  padding: 8px 0;
  color: var(--muted);
  border-radius: 8px;
  font-size: 13px;
}
body.cinematic-experience .card-info svg { width: 16px; height: 16px; }
body.cinematic-experience .card-body > a { display: flex; align-items: flex-start; min-height: 44px; }
body.cinematic-experience .card-body h3 { -webkit-line-clamp: unset; font-size: 16px; font-weight: 540; }

/* Temporary controls use translucent charcoal; media visibility stays intact. */
body.cinematic-experience .sheet,
body.cinematic-experience .end-screen.has-next,
body.cinematic-experience .player-status.is-next-loading { background: #232527; border-color: #ffffff24; }
body.cinematic-experience .sheet::backdrop { background: #08090a70; }
body.cinematic-experience .sheet-story { color: var(--muted); }
body.cinematic-experience .episode-row[aria-current],
body.cinematic-experience .episode-row.is-current { border: 1px solid var(--accent); background: #f4a38c15; box-shadow: none; }
body.cinematic-experience .episode-row[aria-current] .episode-indicator,
body.cinematic-experience .episode-row.is-watched .episode-number:after { color: var(--accent-soft); }
body.cinematic-experience .episode-number { color: #d7d8da; }
body.cinematic-experience .episode-row.is-watched:not([aria-current]) .episode-number,
body.cinematic-experience .episode-indicator { color: #b9babc; }
body.cinematic-experience .episode-row:disabled .episode-number,
body.cinematic-experience .episode-row:disabled .episode-indicator { color: #b1b3b7; }
body.cinematic-experience .switch-control:checked::before { background: var(--accent-ink); }
body.cinematic-experience .dialog-copy { color: #dfdfde; }
body.cinematic-experience .share-input { background: #151617; }
body.cinematic-experience .player-status.is-error { background: #151618; }
body.cinematic-experience .up-next-actions .text-button { color: var(--text); }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.cinematic-experience .sheet,
  body.cinematic-experience .end-screen.has-next,
  body.cinematic-experience .player-status.is-next-loading {
    background: rgba(29, 31, 33, .9);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }
}
@media (hover: hover) and (pointer: fine) {
  body.cinematic-experience .primary:hover,
  body.cinematic-experience .resume-action:hover { background: #ffb9a3; }
  body.cinematic-experience .hero-info:hover,
  body.cinematic-experience .hero-preview-toggle:hover,
  body.cinematic-experience .hero-preview-sound:hover { background: #292d30; }
  body.cinematic-experience .card-link:hover { color: var(--text); }
}

@media (max-width: 760px) {
  body.cinematic-experience .header { height: calc(76px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  body.cinematic-experience .navigation { background: #191b1d; border-color: #ffffff1c; }
  body.cinematic-experience .cinematic-home .resume-card { padding: 12px; }
  body.cinematic-experience .resume-image { width: 54px; height: 96px; }
  body.cinematic-experience .continue-section .section-heading h2 { font-size: 21px; font-weight: 560; }
  body.cinematic-experience .cinematic-hero {
    min-height: 420px;
    align-items: flex-end;
    border-radius: 16px;
  }
  body.cinematic-experience .hero-stage { width: 100%; }
  body.cinematic-experience .hero-stage > img,
  body.cinematic-experience .hero-stage .hero-preview { object-position: center center; }
  body.cinematic-experience .hero-scrim {
    background: linear-gradient(0deg, #202224 0%, #202224fa 20%, #202224e8 40%, #20222466 68%, #20222416 85%, #2022244d 100%);
  }
  body.cinematic-experience .cinematic-hero-copy { width: 100%; padding: 20px; }
  body.cinematic-experience .cinematic-hero-copy .eyebrow { margin-bottom: 8px; letter-spacing: .06em; }
  body.cinematic-experience .cinematic-hero-copy h1 { font-size: 28px; line-height: 1.08; font-weight: 580; letter-spacing: -.04em; }
  body.cinematic-experience .hero-hook { font-size: 14px; line-height: 1.5; margin-top: 10px; }
  body.cinematic-experience .hero-meta { margin-top: 8px; }
  body.cinematic-experience .cinematic-hero .hero-actions { flex-direction: row; align-items: stretch; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  body.cinematic-experience .cinematic-hero .hero-actions .primary { flex: 1; justify-content: center; font-size: 14px; padding-inline: 10px; text-align: center; }
  body.cinematic-experience .hero-info { flex: none; padding-inline: 12px; min-width: 88px; }
  body.cinematic-experience .hero-preview-controls { top: 12px; right: 12px; bottom: auto; max-width: none; gap: 8px; }
  body.cinematic-experience [data-preview-label] { flex-basis: auto; max-width: 112px; padding: 5px 9px; border-radius: 20px; background: #111315dc; text-align: left; }
  body.cinematic-experience .hero-preview-toggle,
  body.cinematic-experience .hero-preview-sound { border-color: #ffffff55; }
  body.cinematic-experience .detail-layout { grid-template-columns: 96px minmax(0,1fr); }
  body.cinematic-experience .detail-copy h1 { font-size: 25px; font-weight: 570; }
  body.cinematic-experience .card-body h3,
  body.cinematic-experience .library-grid .card-body h3 { font-size: 16px; }
}
@media (max-width: 370px) {
  body.cinematic-experience .cinematic-hero-copy { width: 100%; padding: 18px; }
  body.cinematic-experience .cinematic-hero-copy h1 { font-size: 26px; }
  body.cinematic-experience .cinematic-hero .hero-actions .primary { font-size: 13px; padding-inline: 8px; }
}
@media (prefers-reduced-transparency: reduce) {
  body.cinematic-experience .sheet,
  body.cinematic-experience .end-screen.has-next,
  body.cinematic-experience .player-status.is-next-loading {
    background: #232527;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Discovery continues vertically after the curated shelves. */
.discovery-section { margin: 36px 0 24px; }
.discovery-heading { margin-bottom: 24px; }
.discovery-heading h2 { margin: 8px 0; font-size: clamp(24px, 3vw, 32px); letter-spacing: -.035em; }
.discovery-heading > p:last-child { color: var(--muted); margin: 0; }
.discovery-cue { display: flex; align-items: center; gap: 12px; color: var(--accent); font-size: 13px; margin: 0; }
.discovery-cue span { font-size: 20px; }
.discovery-grid { align-items: start; }
.discovery-more { display: flex; justify-content: center; padding: 28px 0 8px; }
.discovery-more button, .discovery-more > a { min-height: 48px; }
@media (max-width:700px) {
  .discovery-section { margin-top: 28px; }
  .discovery-heading { margin-bottom: 20px; }
  .discovery-grid .card-body h3 { font-size: 16px; }
}

/* A complete mark, centered in a quiet header with the same content gutter. */
@media (min-width:761px) {
  body.cinematic-experience .header { height: 80px; }
}

body.cinematic-experience .header { border: 0; }

/* One quiet exit; story and chapter context remain available to assistive tech. */
.watch-topbar .watch-back { width: 44px; height: 44px; min-height: 44px; color: var(--text); opacity: .8; border-radius: 50%; }
.watch-topbar .watch-back svg { width: 20px; height: 20px; stroke-width: 1.5; }
.watch-topbar .watch-back:hover, .watch-topbar .watch-back:focus-visible { opacity: 1; background: #ffffff08; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* The visual ring runs once over the same three-second controller countdown. */
.countdown-ring .ring-progress { stroke-dashoffset: 0; transition: none; }
.countdown-ring.is-counting .ring-progress { animation: episode-countdown 3s linear forwards; }
.video-shell.is-continuing video, .video-shell.is-continuing iframe { opacity: .65; transition: opacity 160ms ease-out; }
.video-shell.is-continuing.has-advanced video, .video-shell.is-continuing.has-advanced iframe { opacity: 1; }
@keyframes episode-countdown { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 3; } }
@media (prefers-reduced-motion: reduce) {
  .countdown-ring.is-counting .ring-progress { animation: none; }
  .video-shell.is-continuing video, .video-shell.is-continuing iframe { opacity: 1; transition: none; }
}
.watch-topbar { width: min(100%, calc((100dvh - 112px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 9 / 16)); margin-inline: auto; }