.film-reader{width:100%}
.film-panel{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:7.5rem var(--page-gutter) 5rem}
.film-frame{width:min(76vw,1080px,calc(68svh * var(--film-ratio)));margin:0}
.film-watch{position:relative;display:flex;width:100%;padding:0;align-items:center;justify-content:center}
.film-watch video{display:block;width:100%;height:auto;max-height:68svh;aspect-ratio:var(--film-ratio);object-fit:contain;background:#202020}
.film-placeholder{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font:400 clamp(1.5rem,3vw,2.5rem)/1.1 var(--serif);letter-spacing:-.015em;pointer-events:none}
.film-frame figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-top:1rem;font:var(--font-caption);color:var(--ink)}
.film-role{margin-left:.75rem;color:var(--muted)}
.film-caption-tools{display:flex;align-items:baseline;gap:1.25rem;white-space:nowrap}
.film-count{color:var(--muted);font-variant-numeric:tabular-nums lining-nums}
.film-preview-toggle{padding:0;min-width:2.25rem;text-align:right;font:inherit;color:var(--muted)}
.film-preview-toggle:hover{color:var(--ink)}
.film-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3rem;padding:9rem var(--page-gutter) 5rem}
.film-overview .film-panel{min-height:0;padding:0;display:block}
.film-overview .film-frame{width:100%}
.film-overview .film-watch video{max-height:none}
.film-overview .film-placeholder{font-size:1.5rem}
.film-overview .film-role{display:block;margin:0}
.film-viewer{--focus-ring:#939393;display:none;flex-direction:column;overflow:hidden}
.film-viewer[open]{display:flex}
.film-player-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding-block:1.5rem}
#film-player{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;background:#fff}
.film-viewer-note{margin:0;text-align:center;font:var(--font-caption);color:var(--muted)}
#film-viewer-close{position:relative;display:grid;place-items:center;align-self:center;width:var(--chrome-row);height:var(--chrome-row);flex:none;font-size:0;padding:0;transition:transform 120ms var(--ease-out)}
#film-viewer-close::before{content:'';position:absolute;inset:-10px}
#film-viewer-close .close-glyph{position:relative;display:block;width:18px;height:18px;margin:0;pointer-events:none}
#film-viewer-close:active{transform:scale(.94);transition:none}
[data-film-open]:focus-visible,[data-film-jump]:focus-visible,[data-film-toggle]:focus-visible{outline-offset:2px}
body[data-keyboard="false"] :is([data-film-open],[data-film-jump],[data-film-toggle]):focus-visible{outline:none}
body[data-medium="film"] .reader-footer{height:3.5rem;min-height:0;background:transparent}
@media(max-width:1000px){
  .film-panel{padding-top:9rem}
  .film-frame{width:min(82vw,calc(68svh * var(--film-ratio)))}
  .film-overview{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:10rem;gap:2rem}
}
@media(max-width:640px){
  .section-switch{inset:auto;justify-content:center}
  .film-panel{padding-top:9rem;padding-bottom:5rem;min-height:100svh}
  .film-frame{width:min(100%,calc(60svh * var(--film-ratio)))}
  .film-watch video{max-height:60svh}
  .film-frame figcaption{margin-top:.75rem;gap:.75rem}
  .film-caption-tools{gap:.75rem}
  .film-overview{grid-template-columns:minmax(0,1fr);padding-top:10rem;gap:3rem}
  .film-role{margin-left:.5rem}
  .film-viewer-note{padding-bottom:.5rem}
}
@media(prefers-reduced-motion:reduce){#film-viewer-close{transition:none;transform:none!important}}
@media(forced-colors:active){.film-viewer{--focus-ring:Highlight}}

.film-empty{padding:10rem var(--page-gutter);font:var(--font-ui)}
.film-empty h1{font:inherit;margin:0 0 1rem}

/* A folder is one project; its films move horizontally within the same page. */
.film-project{position:relative;min-height:100svh;overflow:hidden}
.film-project-track{display:flex;width:100%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x pan-y;}
.film-project-track::-webkit-scrollbar{display:none}
.film-project-track>.film-panel{flex:0 0 100%;min-width:0;scroll-snap-align:center;scroll-snap-stop:always}
.film-project-track .film-watch{user-select:none;-webkit-user-select:none}
.film-project-dots{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);display:flex;justify-content:center;max-width:calc(100% - 2 * var(--page-gutter))}
.film-project-dots button{flex:0 0 24px;width:24px;height:24px;display:grid;place-items:center;padding:0;color:var(--muted)}
.film-project-dots span{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.35;transition:opacity 140ms ease}
.film-project-dots [aria-current="true"] span{opacity:1}
@media(prefers-reduced-motion:reduce){.film-project-dots span{transition:none}}