/* ---- film detail view --------------------------------------------------- Same gutter, easing and reveal cascade as the work grid. The one deliberate departure is the stills gutter: the grid is a mosaic on a 3px hairline, these are a gallery and want air. */ /* top padding clears the fixed bar and sets the header-to-content gap — same final numbers as the work grid's --grid-top (5rem desktop / 3.4375rem mobile, Tomi's ask, 2026-09-08, round 2), reused verbatim here rather than through the variable itself since standalone film pages don't share index.html's :root scope. Round 14: background switched black -> var(--bg) (real bug, not a preference — this view's body text (.fd-title, .fd-credit) has always used the page's default --ink/--mut, which are dark-on-light tokens with no local override here, so it's been rendering low/no-contrast dark text on a black background). */ /* no horizontal padding by default — the hero and stills run full-bleed edge to edge. Text elements (.fd-close, .fd-title, .fd-credits) carry their own --edge padding instead, so THEY align to the wordmark's gutter while the images stay full width. */ .fd{display:none;position:relative;z-index:1;background:var(--bg); padding:5rem 0 clamp(72px,9vw,120px); transition:opacity .42s cubic-bezier(.33,0,.2,1),transform .42s cubic-bezier(.33,0,.2,1)} @media(max-width:820px){.fd{padding-top:3.4375rem}} .fd.on{display:block} /* About has no images to bleed — its content (.about-intro/.about-credits, not the .fd-title/.fd-credits below) relies entirely on the parent's own padding for its left/right edges, so it gets --edge back here instead of staying at 0. */ .fd:has(.about-intro){padding-left:var(--edge,12px);padding-right:var(--edge,12px)} .fd.leaving{opacity:0;transform:translateY(-40px);pointer-events:none} @keyframes fdRiseHero{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} @keyframes fdRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} /* hero: the poster's own shape, not a hard-coded 16/9 — these films are anamorphic and a 16/9 box would crop them. --fd-ar is set per film from the still. On mobile, though, the deliberately wide anamorphic ratio squashes the poster down to a strip (an ultra-wide box scaled to a 375px-wide screen is short by definition) — visibly smaller than Sarang Song's poster, which was never anamorphic. --fd-ar-m (Tomi's ask, 2026-09-08, round 6) is an optional per-film MOBILE-only override to a taller 16/9, set inline only on the 3 anamorphic films; object-fit:cover on the img crops the sides rather than distorting. Sarang Song carries no override — its own ratio is already close to 16/9 and needs none. */ /* --fd-maxw holds a sub-floor film to its poster's real width, so a 414p title is not blown across the full column while Burden and Tribes keep the full width. Now lives on .fd-hero-wrap (not .fd-hero itself) so .fd-close can sit absolutely positioned against the SAME box the poster actually renders at, sub-floor width included — .fd-hero alone can't host it (it's a