.films{display:grid;grid-template-columns:1fr;gap:14px;margin-top:24px}
@media(max-width:720px){.films{grid-template-columns:1fr}}
.film{position:relative;display:block;background:#000;min-width:0;text-decoration:none;color:var(--fg);aspect-ratio:21/9;border:1px solid var(--line);border-radius:3px;overflow:hidden}
@media(max-width:720px){.film{aspect-ratio:16/10}}
.film img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;opacity:.9;transition:opacity .3s,transform 6s ease}
.film:hover img{transform:scale(1.03)}
.film:hover img{opacity:1}
.film::after,.film-poster::after{content:"";position:absolute;left:50%;top:46%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:rgba(8,9,11,.72);border:1px solid rgba(255,255,255,.35)}
.film::before,.film-poster::before{content:"";position:absolute;left:50%;top:46%;width:0;height:0;margin:-9px 0 0 -5px;border-left:16px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;z-index:2}
.film-bar{position:absolute;left:0;right:0;bottom:0;padding:22px 24px 20px;background:linear-gradient(0deg,rgba(8,9,11,.94) 0%,rgba(8,9,11,.55) 60%,rgba(8,9,11,0) 100%);display:grid;gap:6px}
.film-bar b{font-family:var(--display);font-stretch:84%;font-weight:900;font-size:clamp(28px,4vw,52px);letter-spacing:-.03em;line-height:1}
.film-bar span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#C2C9CF}
.film-bar .fs{color:var(--blue-lit)}
@media(max-width:600px){.film-bar{padding:14px 14px 12px}.film-bar .fm{display:none}}
/* Project names and statuses sit below the image and wrap at every width. */
.film[data-yt="YgOfUEEdGZ8"],.film[data-yt="YgOfUEEdGZ8"] .film-poster{aspect-ratio:16/9}
.films--projects a.film,.films--guide a.film{aspect-ratio:auto;background:var(--panel)}
.films--projects a.film::before,.films--projects a.film::after,.films--guide a.film::before,.films--guide a.film::after{display:none}
.film-poster{position:relative;display:block;aspect-ratio:21/9;overflow:hidden}
.film-poster img{display:block}
.films--projects .film-bar,.films--guide .film-bar{position:static;background:none;gap:10px;border-top:1px solid var(--line)}
.films--projects .film-bar .fs{font-family:var(--body);font-size:clamp(14px,1.5vw,17px);letter-spacing:0;text-transform:none;line-height:1.6;color:var(--fg)}
@media(max-width:720px){.film-poster{aspect-ratio:16/10}}
.films.has-playing a.film,.films.has-playing .film-credit{display:none}
.film.playing{aspect-ratio:16/9;width:min(100%,calc((78vh - 60px) * 16 / 9));justify-self:center;cursor:default;overflow:visible;margin-bottom:60px;scroll-margin-top:calc(92px + env(safe-area-inset-top,0px));scroll-margin-bottom:64px}
.film.playing img{display:none}
.film-x{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(8,9,11,.78);border:1px solid rgba(255,255,255,.3);border-radius:3px;padding:7px 10px;cursor:pointer;min-height:44px;min-width:80px}
.film-x:hover{background:#000}
.film-controls{position:absolute;top:calc(100% + 8px);inset-inline:0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.film-controls>a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--mono);font-size:11px;color:var(--blue-lit);text-decoration:underline;text-underline-offset:3px}
.film.playing::before,.film.playing::after,.film.playing .film-bar{display:none}
.film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.film.playing img{visibility:hidden}

.film-credit{margin:-4px 0 6px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.film-credit a{display:inline-flex;align-items:center;min-height:44px;color:var(--blue-lit);text-decoration:none}
.film-credit a:hover{text-decoration:underline}
@media(prefers-reduced-motion:reduce){.film img{transition:none}.film:hover img{transform:none}}

/* Keep the supplied stage composition fully visible, including the hands. */
.film[data-yt="5PFhKzeyohI"] .film-poster{aspect-ratio:1280/721}
.film[data-yt="5PFhKzeyohI"] .film-poster img{object-fit:contain;object-position:center}
.film[data-yt="5PFhKzeyohI"]:hover img{transform:none}

/* The guide uses Vimeo's own poster, with its complete original composition. */
.forge-guide>.lede{margin-top:12px;font-size:16.5px}
.films--guide .film-poster{aspect-ratio:1280/675}
.films--guide .film-poster img{object-fit:contain;object-position:center}
.films--guide .film:hover img{transform:none}
.films--guide .film-bar .fm{display:block;line-height:1.6}
.film.playing--vimeo{aspect-ratio:1920/1013;width:min(100%,calc((78vh - 60px) * 1920 / 1013))}
@media(max-height:500px){
  .film.playing{width:min(100%,calc((100svh - 160px) * 16 / 9))}
  .film.playing--vimeo{width:min(100%,calc((100svh - 160px) * 1920 / 1013))}
}

/* Keep the writer's line with the name, including on narrow screens. */
.mark-copy{display:grid;gap:3px;min-width:0}
.mark-tagline{max-width:28ch;white-space:normal;font-family:var(--body);font-size:12px;font-weight:400;line-height:1.35;letter-spacing:0;color:#C6CDD3}
.nav{height:auto;min-height:78px;padding-block:10px}
.nav .mark{flex-shrink:1;min-width:0}
.nav>.btn{flex-shrink:0}
@media(max-width:1160px){.navlinks{display:none}}
@media(max-width:600px){.nav{gap:12px}.nav>.btn--pri{margin-left:auto}}
@media(max-width:400px){.nav .mark-tagline{font-size:11px;max-width:23ch}.nav>.btn--pri{padding-inline:10px;font-size:12px}}