/* A dedicated screening surface; existing pages retain their own styles. */
.watch-page { padding-block: 16px 64px; }
.watch-heading { margin-block-end: 28px; }
.watch-heading h1 { margin-block: 8px 0; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.watch-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); gap: 32px; align-items: start; }
.watch-player { margin: 0; min-width: 0; }
.watch-player video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #10202c; border: 1px solid var(--line); }
.watch-player figcaption { display: flex; gap: 10px; align-items: center; padding-block: 14px; color: var(--muted); font-size: .88rem; }
.watch-details { padding-inline-start: 24px; border-inline-start: 3px solid var(--venus-blue); }
.watch-details h2 { font-size: 1.25rem; line-height: 1.4; margin-block: 0 14px; }
.watch-details p { margin-block: 0 18px; font-size: .95rem; line-height: 1.7; }
.watch-details .watch-note { color: var(--muted); font-size: .85rem; }
.watch-details dl { margin-block: 24px; font-size: .85rem; }
.watch-details dt { color: var(--muted); }
.watch-details dd { margin: 4px 0 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.watch-links { display: grid; gap: 12px; }
.watch-links a { justify-content: space-between; }
.watch-page a:focus-visible, .watch-player video:focus-visible { outline: 3px solid var(--venus-nav); outline-offset: 4px; }
@media (max-width: 900px) {
    .watch-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .watch-heading { margin-block-end: 20px; }
    .watch-details { padding-inline-start: 18px; }
}
@media (max-width: 480px) {
    .watch-page { padding-block-start: 8px; }
    .watch-player figcaption { align-items: start; line-height: 1.6; }
}