/* 2026-10-27: the 31-second film on the homepage. The hero link plays it in a dialog; phones in portrait get the 9:16 cut. */
body.story .film-open{gap:11px}
body.story .film-open::before{content:"";flex:none;width:22px;height:22px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10.3' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M9.1 7.3v7.4l5.8-3.7z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10.3' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M9.1 7.3v7.4l5.8-3.7z'/%3E%3C/svg%3E") center/contain no-repeat}
body.story:has(.film-dialog[open]){overflow:hidden}
body.story .film-dialog{box-sizing:border-box;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden}
body.story .film-dialog[open]{display:grid;place-items:center}
body.story .film-dialog::backdrop{background:rgba(10,20,23,.88)}
body.story .film-frame{width:min(92vw,calc(86dvh*16/9),1280px);aspect-ratio:16/9}
body.story .film-frame video{display:block;width:100%;height:100%;border-radius:14px;background:#0b2023;box-shadow:0 30px 90px rgba(0,0,0,.45)}
body.story .film-close{position:fixed;top:max(18px,env(safe-area-inset-top));right:18px;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
body.story .film-close::before,body.story .film-close::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1.5px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
body.story .film-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
body.story .film-close:hover{background:rgba(255,255,255,.22)}
body.story .film-close:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (orientation:portrait) and (max-width:820px){body.story .film-frame{width:min(92vw,calc(82dvh*9/16));aspect-ratio:9/16}}
@media (prefers-reduced-motion:no-preference){body.story .film-dialog[open] .film-frame{animation:film-in .32s cubic-bezier(.22,.68,.2,1)}}
@keyframes film-in{from{opacity:0;transform:translateY(10px) scale(.985)}}