@charset "UTF-8";
/* Watch — the vignette series. Extends the site's forest/cream/gold system;
   introduces no new colours and no new typefaces. */

.film-hero { background: var(--forest); color: var(--cream); padding-block: 88px 76px; }
.film-hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); margin-block: 18px 26px; max-width: 16ch; }
.film-hero .film-lede { max-width: 58ch; font-size: 1.125rem; color: #d8d2c4; }
.film-hero em { color: var(--gold); }

.film-stage { background: var(--deep); color: var(--cream); padding-block: 0 72px; }
.player-frame { background: #000; border: 1px solid #ffffff1f; border-radius: 3px; overflow: hidden; transform: translateY(-46px); }
/* The films render 1600x1000, not 16:9 — matching the frame to the source
   avoids pillarboxing a film that is already letterboxed internally. */
.player-frame video { display: block; width: 100%; aspect-ratio: 8 / 5; background: #000; }
/* The dark stage takes the gold eyebrow; .eyebrow.dark (#647057) is for the
   cream sections and fails AA contrast here. Pinned so an edit cannot regress it. */
.film-stage .eyebrow { color: var(--gold); }
.now-playing { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 36px; margin-top: -26px; }
.now-playing h2 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); margin-top: 6px; }
.now-playing p { color: #cdc6b6; flex: 1; min-width: 260px; font-size: 1.0625rem; }

.chapters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.chapters button { background: transparent; color: #cdc6b6; border: 1px solid #ffffff2e; border-radius: 2px;
  padding: 9px 14px; font-size: .8125rem; cursor: pointer; transition: border-color .2s, color .2s; }
.chapters button:hover { color: var(--gold); border-color: var(--gold); }
.chapters button[aria-current] { color: var(--deep); background: var(--gold); border-color: var(--gold); }

.film-list { background: var(--cream); padding-block: 92px; }
.film-list .eyebrow.dark { margin-bottom: 22px; }
.film-list .list-gap { margin-top: 64px; }
.film-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(286px, 1fr)); gap: 26px; }

.film-card { display: flex; flex-direction: column; text-align: left; background: transparent;
  border: 0; padding: 0; cursor: pointer; color: inherit; }
.film-card .thumb { position: relative; aspect-ratio: 8 / 5; background: var(--forest) center / cover no-repeat;
  border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; }
.film-card .thumb::after { content: ""; position: absolute; inset: 0; background: #0b1e1a00; transition: background .2s; }
.film-card:hover .thumb::after { background: #0b1e1a26; }
.film-card:hover h3 { color: #254c3f; }
.film-card[aria-current] .thumb { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.film-card .num { position: absolute; left: 12px; top: 12px; z-index: 1; background: #0b1e1ae0; color: var(--gold);
  font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; padding: 6px 9px; border-radius: 2px; }
.film-card .len { position: absolute; right: 12px; bottom: 12px; z-index: 1; background: #0b1e1ae0; color: var(--cream);
  font-size: .75rem; padding: 6px 9px; border-radius: 2px; font-variant-numeric: tabular-nums; }
.film-card h3 { margin-top: 18px; transition: color .2s; }
.film-card p { margin-top: 8px; color: var(--muted); font-size: .9375rem; line-height: 1.6; }

.film-note { margin-top: 64px; padding: 22px 26px; background: #ffffff8c; border-left: 3px solid var(--gold);
  max-width: 74ch; font-size: .9375rem; line-height: 1.7; color: var(--muted); }
.film-note strong { color: var(--ink); }

@media (max-width: 720px) {
  .player-frame { transform: none; margin-top: 0; }
  .film-stage { padding-top: 34px; }
  .now-playing { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) { .film-card .thumb::after, .film-card h3 { transition: none; } }