.films-page{background:#30302e;color:#e5e0d5}
.film-stage{position:relative;height:max(100svh,980px);isolation:isolate;overflow:hidden;background:#30302e}
.film-navigation{position:absolute;top:28px;left:6%;right:6%;z-index:5;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.film-navigation a,.film-navigation h1{pointer-events:auto}
.film-navigation a{font-size:17px;text-decoration:none;color:#e1ddd4;text-shadow:0 1px 3px #0009}
.film-navigation h1{font-size:32px;line-height:1;font-weight:400}
.film-viewport,.film-track{height:100%;width:100%}
.film-viewport{overflow:hidden}
.film-track{display:flex;transition:transform 1.1s cubic-bezier(.22,1,.36,1);will-change:transform}
.film-room{position:relative;flex:0 0 100%;width:100%;height:100%;isolation:isolate}
.film-room-surface{position:absolute;inset:0;z-index:-1;background:url("assets/rooms/dark-tall-seamless-v5.webp") center/cover;filter:grayscale(1) brightness(.78)}
.film-room:nth-child(even) .film-room-surface{transform:scaleX(-1)}
.film-screening{position:absolute;top:18%;bottom:28%;left:0;right:0;width:min(680px,78%);margin:0 auto;display:flex;flex-direction:column;align-items:stretch;justify-content:center;text-align:center}
.film-frame{border:16px solid transparent;border-image-source:url("assets/films/tv-bezel.webp?v=2");border-image-slice:6.6%;border-image-repeat:stretch;filter:drop-shadow(3px 9px 6px #0009)}
.film-aperture{position:relative;width:100%;max-width:100%;min-width:0;aspect-ratio:16/9;background:#141412;overflow:hidden}
.film-poster{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:#141412}
.film-poster[hidden]{display:none}
.film-poster img{display:block;width:100%;height:100%;object-fit:cover}
.film-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(#ffffff0a,transparent 60%,#0002);pointer-events:none}
.film-poster-play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;filter:drop-shadow(0 2px 4px #000c)}
.film-player-mount,.film-player-mount iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
.film-player-mount.is-youtube iframe{width:max(100%,355.556px);height:max(100%,200px);transform:scale(var(--player-scale,1));transform-origin:top left}
.socket-controls{width:252px;margin:20px auto 0;display:grid;grid-template-columns:repeat(3,76px);gap:12px;filter:drop-shadow(1px 4px 3px #0006);flex-shrink:0}
.socket-control{display:grid;place-items:center;width:76px;height:76px;padding:0;border:0;background:url("assets/films/button-idle.webp") center/100% 100% no-repeat;color:#393a36;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.socket-control svg{width:19px;height:19px;filter:drop-shadow(0 1px 0 #fff6);transition:transform .08s}
.socket-control:disabled{cursor:default;color:#8c8a82}
.socket-control.is-latched,.socket-control:not(:disabled):active{background-image:url("assets/films/button-pressed.webp");color:#252622}
.socket-control.is-latched svg,.socket-control:not(:disabled):active svg{transform:translateY(3px);filter:drop-shadow(0 1px 0 #fff3)}
.socket-control:focus-visible{outline:1px solid #eee4d1;outline-offset:3px}
.film-thumbnails{position:absolute;bottom:34px;left:0;right:0;z-index:4;display:flex;justify-content:safe center;gap:20px;overflow-x:auto;padding:22px 24px 4px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#aaa9a0 transparent}
.film-thumbnail{flex:0 0 124px;width:124px;border:0;padding:0;background:none;color:#e7e2d8;text-align:center;scroll-snap-align:center}
.film-thumb-frame{display:block;border:7px solid transparent;border-image:url("assets/frames/compact-ivory.webp") 15% stretch;filter:drop-shadow(1px 5px 3px #0008);opacity:.64;transform-origin:center bottom;transition:opacity .2s,transform .3s cubic-bezier(.22,1,.36,1)}
.film-thumb-frame img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#191918}
.film-thumbnail:hover .film-thumb-frame,.film-thumbnail[aria-pressed="true"] .film-thumb-frame{opacity:1}
.film-thumbnail[aria-pressed="true"] .film-thumb-frame{outline:1px solid #d2cfc4;outline-offset:3px}
.film-thumbnail.is-playing .film-thumb-frame{transform:translateY(-7px) scale(1.06)}
.film-thumbnail.is-paused .film-thumb-frame{transform:scale(1.06)}
.film-thumbnail-title{display:block;margin-top:8px;min-height:36px;font-size:15px;line-height:1.2;text-shadow:0 1px 3px #0009}
.film-status{position:absolute;left:10%;right:10%;bottom:182px;z-index:4;text-align:center;font-size:15px;line-height:1.3;color:#e9e5dc;text-shadow:0 1px 4px #000}
.film-status a{margin-left:8px}
@media(max-width:700px){
  .film-stage{height:max(100svh,900px)}
  .film-navigation{left:7%;right:7%;top:28px}
  .film-navigation h1{font-size:28px}
  .film-navigation a{font-size:15px}
  .film-screening{width:min(600px,90%)}
  .film-frame{border-width:12px}
  .film-thumbnails{justify-content:flex-start;gap:16px;padding-left:24px;padding-right:24px;bottom:30px}
  .film-thumbnail{flex-basis:110px;width:110px}
  .film-thumbnail-title{font-size:14px;min-height:34px}
  .film-status{bottom:170px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){.film-track,.film-thumb-frame{transition:none}}