/* The film (film.js): black frame, letterbox bars, plain title cards, one quiet line of words in the bottom bar. */
.film{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#000;color:var(--paper);overflow:hidden;cursor:none;outline:none}
.film::backdrop{background:transparent}
.film[open]{animation:fm-in .6s ease backwards}
.film.leaving{opacity:0;transition:opacity .45s ease}
/* the page underneath is not drawn while the film plays */
body.filming>#journey,body.filming>#home,body.filming>.readout{visibility:hidden}
@keyframes fm-in{from{opacity:0}}
.fm-shots{position:absolute;inset:0}
.fm-win{position:absolute;overflow:hidden;opacity:0;will-change:opacity;contain:strict;background:#000}
.fm-win img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;will-change:transform;backface-visibility:hidden;user-select:none;pointer-events:none}
.fm-card{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:0 24px;opacity:0;pointer-events:none;transform:translateY(var(--rise,0))}
.fm-card h2{margin:0;font:380 clamp(30px,4.2vw,60px)/1.02 var(--serif);letter-spacing:-.025em;text-wrap:balance}
.fm-card p{margin:16px 0 0;font:400 clamp(15px,1.25vw,19px)/1.3 var(--serif);color:var(--soft)}
.fm-card p.n{margin-top:18px;font:500 var(--lab-size)/1.3 var(--label);text-transform:uppercase;letter-spacing:var(--lab-track)}
.fm-cap{position:absolute;opacity:0;font:500 var(--lab-size)/1.55 var(--label);text-transform:uppercase;letter-spacing:var(--lab-track);color:#d2ded9;white-space:nowrap;pointer-events:none}
.fm-cap b{font-weight:500}
.fm-cap span{display:block;color:#8fa29d;font-variant-numeric:tabular-nums}
.fm-cap span:empty{display:none}
.fm-map{position:absolute;opacity:0;pointer-events:none}
.fm-map .mapsvg{-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent)}
.fm-map .mapsvg .land{fill:#bdf3e40a;stroke-opacity:.35}.fm-map .mapsvg .lakes{fill:#000;stroke-opacity:.25}.fm-map .mapsvg .borders{stroke-opacity:.2}.fm-map .mapsvg .states{stroke-opacity:.07}
.fm-line{fill:none;stroke:#f2d9a6;stroke-width:1.4px;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.fm-dot{position:absolute;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:#f2d9a6}
.fm-dot.from{background:none;border:1px solid #f2d9a6aa}
/* paused: two thin bars in the bottom-right corner of the frame, nothing else */
.fm-pause{position:absolute;right:24px;bottom:22px;width:12px;height:14px;opacity:0;transition:opacity .3s;border-left:3px solid #d2ded9;border-right:3px solid #d2ded9}
.film.paused .fm-pause{opacity:.8}
.fm-say{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}