/* The watch page keeps the player prominent and follows the site's typography. */
.watch-page { max-width: 96rem; margin-inline: auto; padding: calc(var(--header-h) + 1.5rem) var(--gutter) 5rem; }
.watch-page__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; color: var(--muted); font-size: .78rem; }
.watch-page__crumbs a:hover { color: var(--ink); }
.watch-page__intro h1 { margin: 0; font-family: var(--font-display); font-size: clamp(1.9rem, 3.6vw, 3.4rem); font-weight: 500; line-height: 1.08; letter-spacing: -.04em; text-wrap: balance; }
.watch-page__intro > p { margin-top: .65rem; color: var(--muted); font-size: .95rem; }
.watch-page__stage { width: min(100%, 65rem); margin: 1.4rem auto 0; }
.watch-page__stage video { display: block; width: 100%; height: auto; max-height: 62svh; aspect-ratio: 16 / 9; object-fit: contain; background: #141512; }
.watch-page__stage figcaption { padding-top: .65rem; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.watch-page__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 2rem; margin-top: 1.5rem; }
.watch-page__details { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); margin-top: 3.5rem; padding-block: 2.5rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.watch-page h2 { margin: 0 0 1rem; font-family: var(--font-display); font-size: clamp(1.5rem, 2.5vw, 2.25rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.15; }
.watch-page__details p, .watch-page__next p { max-width: 75ch; color: var(--muted); line-height: 1.7; }
.watch-page__details ul { display: grid; gap: .45rem; margin-top: 1rem; padding-left: 1.2rem; list-style: disc; }
.watch-page__details dl { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-content: start; }
.watch-page__details dt { margin-bottom: .35rem; color: var(--muted); font-size: .78rem; }
.watch-page__details dd { font-weight: 500; }
.watch-page__next { margin-top: 2.5rem; }
.watch-page__next p + p { margin-top: .75rem; }
.watch-page__next nav { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-top: 1.25rem; }
@media (max-width: 760px) {
  .watch-page { padding-top: calc(var(--header-h) + 1.1rem); }
  .watch-page__crumbs { font-size: .7rem; }
  .watch-page__intro > p { font-size: .85rem; }
  .watch-page__stage { margin-top: 1.1rem; }
  .watch-page__actions { align-items: flex-start; flex-direction: column; gap: 1.1rem; }
  .watch-page__details { grid-template-columns: 1fr; gap: 2rem; margin-top: 2.5rem; }
}
