/* ---------- Strature films (W-25, W-45): self-hosted MP4 + WebVTT, poster first, click to play ----------
   One component, used on Home (F1), /samples/ (F2, F3, F4), /gps/ (F2) and /rbc/ (F3).
   <video controls preload="none" playsinline poster=...> with <track kind="captions" default>: nothing loads
   until the reader presses play, nothing plays with sound on its own, and captions are on from the start.
   No player script, no third-party host: the CSP's default-src 'self' covers the media and the captions. */
.film{margin:0;display:grid;gap:10px;min-width:0}
.film-frame{position:relative;aspect-ratio:16 / 9;background:var(--navy);border:1px solid var(--hair)}
.film video{display:block;width:100%;height:100%;background:var(--navy);object-fit:contain}
.film figcaption{display:grid;gap:4px}
.film .film-t{font-family:var(--serif);font-weight:600;font-size:18px;line-height:1.3;color:var(--ink)}
.film .film-m{font-family:var(--sans);font-size:13px;line-height:1.45;color:var(--graphite)}
.film .film-m .num{color:var(--ink)}
.film .more{margin-top:2px}
.film .more p{max-width:var(--measure)}
.film .more p + p{margin-top:8px}
.film .more .film-note{font-family:var(--sans);font-size:13.5px;color:var(--graphite)}

/* on navy (the touch band or a navy section) */
.on-navy .film-frame{border-color:rgba(251,249,245,.28)}
.on-navy .film .film-t{color:var(--white)}
.on-navy .film .film-m{color:rgba(251,249,245,.78)}

/* Home: the brand film beside its opener; /samples/ and the product pages: film + its text */
.film-two{display:grid;gap:24px}
.film-two .opener{margin-bottom:0}
.film-two .opener p{margin-top:12px;max-width:44ch}
.film-two .opener .ctas{margin-top:20px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
@media (min-width:900px){
  .film-two{grid-template-columns:5fr 7fr;gap:64px;align-items:start}
}

/* /samples/: the four free briefs */
.cards.samples .card .dek{font-size:16px}
/* W-117: both dates, as on the library cards; each piece wraps whole */
.cards.samples .meta .date > *{white-space:nowrap}
.cards.samples .s-links{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:4px}
@media (min-width:900px){.cards.samples{grid-template-columns:repeat(2,1fr);column-gap:48px}}
.samples-film{margin-top:32px}
@media (min-width:900px){.samples-film{margin-top:56px}}