/* generated by expose-src/filmpage.py — do not edit by hand */
.filmpage{--fp-ink:#111111;--fp-soft:rgba(17,17,17,.55);--fp-line:rgba(17,17,17,.18);
  color:var(--fp-ink);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.5}
.filmpage *{box-sizing:border-box}
.filmpage .fp-mono{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--fp-soft)}
.filmpage .fp-title{font-size:clamp(2.4rem,8vw,5.4rem);font-weight:800;text-transform:uppercase;
  letter-spacing:-.03em;line-height:.9;margin:14px 0 12px}
.filmpage .fp-sub{font-size:clamp(.95rem,2vw,1.1rem);color:var(--fp-soft);margin-bottom:34px}
.filmpage .fp-grid{display:grid;grid-template-columns:290px 1fr;gap:44px;align-items:start}
@media(max-width:760px){.filmpage .fp-grid{grid-template-columns:1fr;gap:28px}}
.filmpage .fp-poster{width:100%;border:1px solid var(--fp-ink);display:block}
.filmpage .fp-poster-pending{aspect-ratio:1/1.414;border:1px solid var(--fp-ink);display:flex;
  align-items:center;justify-content:center;text-align:center;padding:20px}
.filmpage .fp-poster-pending b{font-size:1.2rem;font-weight:800;text-transform:uppercase;
  color:#F5F5F2;-webkit-text-stroke:1px var(--fp-ink)}
.filmpage .fp-specs{margin-top:22px;border-top:1px solid var(--fp-line)}
.filmpage .fp-row{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--fp-line);font-size:.86rem}
.filmpage .fp-row dt{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.58rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fp-soft);padding-top:3px}
.filmpage .fp-row dd{margin:0}
.filmpage .fp-h{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fp-soft);
  font-family:ui-monospace,"SF Mono",Menlo,monospace;font-weight:400;margin-bottom:12px}
/* no max-width here: the stills define the column, and a narrower measure made
   the text visibly out of line with them */
.filmpage .fp-synopsis{font-size:1.05rem;line-height:1.62;margin-bottom:30px}
.filmpage .fp-h-syn{margin-top:26px}
.filmpage .fp-still{width:100%;display:block;border:1px solid var(--fp-ink)}
.filmpage .fp-trailer{position:relative;width:100%;aspect-ratio:16/9;border:1px solid var(--fp-ink);
  background:#000}
.filmpage .fp-trailer iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.filmpage .fp-still-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
/* Films mix 16:9 and scope ratios, so the pair would otherwise sit at
   different heights. Pin the box and letterbox into it — contain, not cover,
   so nobody's framing gets cropped. */
.filmpage .fp-still-row .fp-still{aspect-ratio:16/9;object-fit:contain;background:#000}
.filmpage .fp-caption{margin-top:10px}
.filmpage .fp-director{display:flex;gap:20px;align-items:flex-start;margin-top:40px;
  border-top:1px solid var(--fp-line);padding-top:24px}
.filmpage .fp-director img{width:104px;border:1px solid var(--fp-ink);flex:none}
.filmpage .fp-name{font-size:1.2rem;font-weight:800;margin:6px 0 8px}
.filmpage .fp-bio{font-size:.9rem;line-height:1.6;color:#333}
.filmpage .fp-person{display:flex;gap:16px;align-items:flex-start}
.filmpage .fp-person + .fp-person{margin-top:18px}
.filmpage .fp-face{width:84px;height:84px;object-fit:cover;flex:none;
  border:1px solid var(--fp-ink)}

/* previous / next through the running order */
.filmpage .fp-nav{display:flex;justify-content:space-between;gap:20px;margin-top:44px;
  border-top:1px solid var(--fp-line);padding-top:20px}
.filmpage .fp-nav-link{display:flex;gap:14px;align-items:center;text-decoration:none;
  color:inherit;max-width:48%}
.filmpage .fp-nav-next{margin-left:auto;text-align:right;flex-direction:row}
.filmpage .fp-nav-link img{width:96px;height:54px;object-fit:cover;flex:none;
  border:1px solid var(--fp-ink)}
.filmpage .fp-nav-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.filmpage .fp-nav-title{font-size:1rem;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.filmpage .fp-nav-gap{flex:1}
@media(hover:hover){.filmpage .fp-nav-link:hover .fp-nav-title{text-decoration:underline}}
@media(max-width:640px){
  .filmpage .fp-nav-link img{width:64px;height:36px}
  .filmpage .fp-nav-title{font-size:.85rem}
}

/* stills open in a lightbox — show it */
.filmpage .fp-still{cursor:zoom-in}

/* ---- lightbox (lives on <body>, so it is not scoped to .filmpage) ---- */
.fp-lightbox{position:fixed;inset:0;z-index:960;background:rgba(17,17,17,.94);
  display:flex;align-items:center;justify-content:center;gap:min(3vw,32px);padding:5vh 4vw}
.fp-lightbox[hidden]{display:none}
.fp-lightbox.in{animation:fp-lb-in .28s cubic-bezier(.22,1,.36,1) both}
@keyframes fp-lb-in{from{opacity:0}to{opacity:1}}
.fp-lb-fig{margin:0;max-width:100%;max-height:90vh;display:flex;flex-direction:column;
  align-items:center;gap:14px}
.fp-lb-fig img{max-width:100%;max-height:82vh;display:block;object-fit:contain;
  border:1px solid rgba(245,245,242,.25)}
.fp-lb-cap{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.62rem;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(245,245,242,.62)}
.fp-lb-nav,.fp-lb-close{background:none;border:0;color:#F5F5F2;cursor:pointer;
  font-family:ui-monospace,"SF Mono",Menlo,monospace;line-height:1;padding:12px}
.fp-lb-nav{font-size:1.6rem;flex:none;opacity:.7}
.fp-lb-nav:hover,.fp-lb-close:hover{opacity:1}
.fp-lb-nav[hidden]{display:none}
.fp-lb-close{position:absolute;top:16px;right:20px;font-size:1.15rem;opacity:.7}
.fp-lb-nav:focus-visible,.fp-lb-close:focus-visible{outline:2px solid #F5F5F2;outline-offset:3px}
@media(max-width:640px){
  .fp-lightbox{padding:6vh 2vw;gap:6px}
  .fp-lb-nav{font-size:1.2rem;padding:8px}
}
@media(prefers-reduced-motion:reduce){.fp-lightbox.in{animation:none}}
.filmpage .fp-tba{border-top:1px solid var(--fp-line);border-bottom:1px solid var(--fp-line);
  padding:26px 0}
.filmpage .fp-tba .fp-synopsis{margin:10px 0 0}
.filmpage .fp-cta{display:inline-block;margin-top:24px;background:var(--fp-ink);color:#F5F5F2;
  text-decoration:none;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  padding:14px 22px;font-size:.85rem}

/* The overlay itself does the clip-path wipe (same one as the site menu), so
   the article only stages its blocks in behind it — exactly like the menu's
   links. Wiping here as well would nest one clip-path inside another. */
@keyframes fp-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
.filmpage.fp-animate>*{animation:fp-rise .5s cubic-bezier(.22,1,.36,1) both}
.filmpage.fp-animate>*:nth-child(1){animation-delay:.12s}
.filmpage.fp-animate>*:nth-child(2){animation-delay:.17s}
.filmpage.fp-animate>*:nth-child(3){animation-delay:.22s}
/* The grid is a single child, so on a wide screen the entire poster/synopsis
   layout would arrive as one block and read as a pop rather than a cascade.
   Stagger its two columns instead — nesting fp-rise inside fp-rise would
   compound the transforms, so the grid itself does not animate. */
.filmpage.fp-animate>.fp-grid{animation:none}
.filmpage.fp-animate .fp-grid>*{animation:fp-rise .5s cubic-bezier(.22,1,.36,1) both}
.filmpage.fp-animate .fp-grid>*:nth-child(1){animation-delay:.27s}
.filmpage.fp-animate .fp-grid>*:nth-child(2){animation-delay:.34s}
/* stepping left/right: the page arrives from the side you moved toward */
@keyframes fp-from-right{from{opacity:0;transform:translateX(56px)}to{opacity:1;transform:none}}
@keyframes fp-from-left{from{opacity:0;transform:translateX(-56px)}to{opacity:1;transform:none}}
.filmpage.fp-slide-next{animation:fp-from-right .38s cubic-bezier(.22,1,.36,1) both}
.filmpage.fp-slide-prev{animation:fp-from-left .38s cubic-bezier(.22,1,.36,1) both}
@media(prefers-reduced-motion:reduce){
  .filmpage.fp-animate,.filmpage.fp-animate>*,
  .filmpage.fp-animate .fp-grid>*,
  .filmpage.fp-slide-next,.filmpage.fp-slide-prev{animation:none}
}