/* Single walk-through films placed through the site */
.film{padding-block:clamp(4.5rem,7.5vw,8.5rem);overflow:hidden}
.film.is-dark{background:var(--deep);color:var(--paper)}
.film.is-paper{background:var(--paper);color:var(--ink)}
.film.is-warm{background:var(--warm);color:var(--ink)}
.film-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.2rem 3rem;margin-bottom:clamp(1.8rem,3vw,2.8rem)}
.film-head h2{margin:.55rem 0 0;line-height:1.02}
.film.is-dark .film-head h2{color:var(--paper)}
.film.is-dark .film-head h2 em{color:var(--goldlight)}
.film-head p.film-line{max-width:28rem;margin:0;font-size:1rem}
.film.is-dark .film-line{color:#c9cfc6}
.film.is-paper .film-line,.film.is-warm .film-line{color:var(--muted)}
.film-frame{position:relative;aspect-ratio:16/9;background:#0d1612;border-radius:4px;overflow:hidden;box-shadow:0 30px 70px rgba(16,26,21,.28)}
.film.is-dark .film-frame{box-shadow:0 30px 80px rgba(0,0,0,.45)}
.film-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#0d1612}
.film-sound{position:absolute;left:1.1rem;bottom:1.1rem;z-index:2;display:inline-flex;align-items:center;gap:.65rem;padding:.8rem 1.2rem;min-height:46px;border:0;border-radius:999px;background:var(--cream);color:var(--ink);font:700 .7rem/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .2s,background .2s}
.film-sound:hover{transform:translateY(-2px);background:#fff}
.film-sound svg{width:18px;height:18px;flex:none}
.film-sound[hidden]{display:none}
.film-progress{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;background:rgba(255,255,255,.12)}
.film-progress i{display:block;height:100%;width:0;background:var(--gold)}
.film-foot{margin-top:clamp(1.6rem,2.6vw,2.3rem)}
/* split layout: words beside the film */
.film-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.7fr);gap:clamp(2rem,4vw,4.5rem);align-items:center}
.film-split.flip{grid-template-columns:minmax(0,1.7fr) minmax(0,.8fr)}
.film-split.flip .film-words{order:2}
.film-split .film-head{display:block;margin-bottom:0}
.film-split .film-line{margin-top:1.1rem}
@media (max-width:900px){.film-split,.film-split.flip{grid-template-columns:1fr}.film-split.flip .film-words{order:0}}
@media (max-width:600px){.film-head{display:block}.film-head p.film-line{margin-top:.9rem}.film-sound{left:.65rem;bottom:.65rem;padding:.65rem .95rem;font-size:.64rem}}
.film-frame::after{content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border:3px solid rgba(247,244,235,.25);border-top-color:var(--cream);border-radius:50%;opacity:0;transition:opacity .2s;pointer-events:none;z-index:1}
.film-frame.is-loading::after{opacity:1;animation:filmspin .9s linear infinite}
@keyframes filmspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.film-frame.is-loading::after{animation:none}}