/* One page per film: the film first, then the credits, then the next film. */
.film-main { padding:120px var(--gutter) 0; }
.film-back { display:flex; justify-content:space-between; gap:24px; padding-bottom:14px; border-bottom:1px solid var(--line); font:12px 'DM Mono',monospace; letter-spacing:.1em; }
.film-back a:hover { color:var(--accent); }
.film-back span { opacity:.55; }
.film-heading { padding:clamp(40px,6vw,88px) 0 clamp(28px,3vw,44px); }
.film-heading .detail-kicker { margin-bottom:18px; }
.film-heading h1 { margin:0; font-family:'DM Mono',monospace; font-weight:400; font-size:clamp(36px,5.6vw,88px); letter-spacing:-.045em; line-height:1.02; overflow-wrap:anywhere; }
.film-media { width:100%; aspect-ratio:16 / 9; min-height:0; overflow:hidden; }
.film-media > img,.film-media > iframe { position:absolute; inset:0; width:100%; height:100%; min-height:0; object-fit:cover; }
.film-media > img { filter:brightness(.82); }
.film-media .film-play { text-decoration:none; letter-spacing:.06em; }
.film-copy { display:grid; grid-template-columns:1fr 1.2fr; column-gap:clamp(32px,5vw,80px); row-gap:24px; padding:clamp(32px,4vw,56px) 0 0; }
.film-copy .detail-summary { margin:0; font-size:clamp(17px,1.4vw,20px); }
.film-copy dl { grid-column:2; grid-row:1 / 3; }
.film-copy .external-film-link { margin-top:0; justify-self:start; align-self:start; }
.film-copy .external-film-link:hover { color:var(--accent); }
.film-pager { margin:clamp(64px,8vw,120px) 0 var(--space-content); }
/* More films: the same cards as Selected Work, in a row that Previous / Next slide through.
   It opens on the film before and the film after this one. */
.film-pager .pager-head { display:flex; justify-content:space-between; margin-bottom:12px; }
.film-pager .pager-btn { border:0; background:none; padding:0; color:var(--accent); font:12px 'DM Mono',monospace; letter-spacing:.1em; cursor:pointer; transition:opacity .3s; }
.film-pager .pager-btn:hover { color:var(--paper); }
.film-pager .pager-btn:focus-visible { outline:2px solid var(--accent); outline-offset:6px; }
.film-pager .pager-track { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - var(--gutter)) / 2); column-gap:var(--gutter);
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; }
.film-pager .pager-track::-webkit-scrollbar { display:none; }
.film-pager .portfolio-row { scroll-snap-align:start; }
@media (max-width:720px) {
  .film-main { padding-top:96px; }
  .film-copy { grid-template-columns:1fr; }
  .film-copy dl { grid-column:auto; grid-row:auto; }
  .film-pager .pager-track { grid-auto-columns:86%; column-gap:14px; }
}