/* /watch: the film library. Tokens come from site.css. */

.wt-library { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 72px) clamp(20px, 3vw, 40px); padding-block: clamp(16px, 3vh, 32px) clamp(80px, 13vh, 150px); }
.wt-card { display: grid; gap: 18px; align-content: start; }
.wt-player { position: relative; border-radius: 16px; overflow: hidden; background: var(--night); border: 1px solid var(--rule); box-shadow: 0 40px 80px -56px rgba(15, 30, 46, .55); }
.wt-player video { border-radius: 0; aspect-ratio: 16 / 9; width: 100%; object-fit: cover; background: var(--night); }
.wt-card-copy { display: grid; gap: 8px; }
.wt-card-copy h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); letter-spacing: -.04em; line-height: 1.06; }
.wt-card-copy .wt-meta { margin-top: 2px; }
.wt-feature-head .wt-meta { margin-bottom: 6px; }
.wt-meta { font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.wt-card.is-playing .wt-player { border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent), 0 40px 80px -56px rgba(15, 30, 46, .55); }
.wt-transcript > summary { font-size: 1rem !important; }
@media (max-width: 860px) { .wt-library { grid-template-columns: 1fr; } }

/* The feature film */
.wt-feature { background: var(--night); color: var(--night-ink); padding-block: clamp(72px, 12vh, 140px); }
.wt-feature .wrap { display: grid; gap: 24px; }
.wt-feature-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 40px; }
.wt-feature h2 { font-size: clamp(2.2rem, 5vw, 4.6rem); letter-spacing: -.05em; line-height: 1; max-width: 16ch; }
.wt-feature .wt-meta { color: var(--night-muted); }
.wt-player-feature { border-color: var(--night-line); border-radius: 20px; box-shadow: 0 60px 120px -60px rgba(0, 0, 0, .7); }
.wt-feature-note { font-size: 14px; color: var(--night-muted); max-width: 80ch; }

.wt-feature + .page-sections { padding-top: clamp(40px, 7vh, 80px); }

/* Films by role (walkthrough films; each plays once its script is approved). */
.wt-roles { padding-block: clamp(60px, 10vh, 110px); display: grid; gap: 14px; }
.wt-roles h2 { font-size: clamp(1.9rem, 3.6vw, 3.2rem); letter-spacing: -.045em; }
.wt-role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px 20px; margin-top: 20px; }