/* Blue Productions — film cards + theater mode (Oct 19, 2026).
   A film card (.film-card) grows a little under the mouse. Clicking its
   button (.film with data-src) opens the theater: the film plays big and
   the rest of the page goes dark. Used on the homepage and Films page. */
.film{display:block;width:100%;padding:0;border:0;border-radius:0;cursor:pointer;background:#000;aspect-ratio:16/9;overflow:hidden}
.film[data-shape="tall"]{aspect-ratio:9/16}
.film img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.92) brightness(.92);transition:filter .35s ease}
.film:focus-visible{outline:2px solid #EA7A39;outline-offset:4px}
.film-card{position:relative;z-index:0;transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.film-card .film{transition:box-shadow .4s ease}
.film-card:hover,.film-card:focus-within{transform:scale(1.045);z-index:2}
.film-card:hover .film,.film-card:focus-within .film{box-shadow:0 28px 70px rgba(0,0,0,.6),0 0 0 1px rgba(201,211,192,.25)}
.film-card:hover .film img,.film-card:focus-within .film img{filter:none}

.theater{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  padding:max(3.5rem,4vh) max(16px,4vw) max(2rem,4vh);background:rgba(3,5,8,.97);animation:theater-in .35s ease both}
.theater[hidden]{display:none}
@keyframes theater-in{from{opacity:0}to{opacity:1}}
.theater__stage{display:flex;align-items:center;justify-content:center;max-width:100%}
.theater video{display:block;max-width:min(92vw,1600px);max-height:78vh;width:auto;height:auto;background:#000;box-shadow:0 30px 90px rgba(0,0,0,.7)}
.theater.is-wide video{width:min(92vw,1600px,calc(78vh * 16 / 9))}
.theater.is-tall video{height:min(78vh,calc(92vw * 16 / 9))}
.theater__cap{margin:0;text-align:center;font-family:Fraunces,Georgia,serif;font-weight:400;font-size:1.1rem;color:#C9D3C0}
.theater__cap b{font-weight:400}
.theater__cap em{display:block;margin-top:.2rem;font-style:normal;font-family:"Space Mono",ui-monospace,monospace;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(201,211,192,.55)}
.theater__close{position:absolute;top:max(14px,env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));
  width:44px;height:44px;border:1px solid rgba(201,211,192,.3);background:none;color:#C9D3C0;font-size:26px;line-height:1;cursor:pointer}
.theater__close:hover{border-color:#EA7A39;color:#EA7A39}
html.theater-open .mf-bar{display:none!important}
@media (prefers-reduced-motion:reduce){.film img,.film-card{transition:none}.film-card:hover,.film-card:focus-within{transform:none}.theater{animation:none}}