/* Promo film: a local poster stands in for the player, so YouTube is only contacted after a click. */
.film { padding: 64px 0 56px; scroll-margin-top: 80px; }
.film .wrap { display: grid; justify-items: center; text-align: center; }
.film h2 { margin: 0; font-weight: 700; font-size: clamp(32px, 4.4vw, 48px); letter-spacing: -.5px; }
.film h2 em { font-style: normal; color: var(--beak-text, var(--orange)); }
.film-lead { font-size: clamp(17px, 1.8vw, 19px); color: var(--ink-soft, var(--muted)); max-width: 38em; margin: 16px 0 32px; }
.film-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #0f1d1a; }
.film-frame iframe, .film-play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film-play { display: block; }
.film-play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.film-play .film-button { position: absolute; left: 50%; top: 50%; width: clamp(72px, 9vw, 128px); aspect-ratio: 1; translate: -50% -50%; display: grid; place-items: center; border-radius: 50%; background: var(--beak, var(--action)); color: var(--on-beak, var(--on-action, var(--ink))); border: 3px solid var(--ink); box-shadow: 0 8px 24px rgb(0 0 0 / .3); transition: scale .15s ease; }
.film-play .film-button svg { width: 40%; height: 40%; margin-left: 6%; }
.film-play:hover .film-button, .film-play:focus-visible .film-button { scale: 1.08; }
.film-play:focus-visible { outline: 4px solid var(--beak, var(--action)); outline-offset: -4px; }
.film .film-note { display: block; font-size: 14px; color: var(--ink-soft, var(--muted)); margin-block: 14px 0; }
.film[hidden], .studio-showcase[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .film-play .film-button { transition: none; } }