@view-transition{navigation:auto}
:root{--work-ratio:9 / 8;--film-ease:cubic-bezier(.22,.61,.36,1)}
.film-cover{display:block;position:relative;overflow:hidden;aspect-ratio:4/3;width:100%;background:#000;view-transition-name:film-cover}
.film-play{display:none}
.film-cover img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;filter:none;transition:transform .8s cubic-bezier(.2,.7,.2,1),brightness .5s}
.film-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-40%);padding:12px 20px;border:1px solid #ffffff99;border-radius:40px;color:#fff;background:#0006;backdrop-filter:blur(8px);font:14px 'Space Mono',monospace;white-space:nowrap;opacity:0;transition:opacity .35s,transform .35s}
.film-cover:hover img,.film-cover:focus-visible img{transform:scale(1.08)}
.film-cover:hover .film-play,.film-cover:focus-visible .film-play{opacity:1;transform:translate(-50%,-50%)}
.film-cover:active{transform:scale(.985)}
.film-screen{width:min(1000px,88vw);margin:40px auto 100px;text-align:center;animation:film-arrive .5s ease-out}
.film-screen h1{font:400 26px/1.2 Karla,sans-serif;margin:0 0 12px;letter-spacing:-.01em}
.film-screen>p{margin:0 0 40px;font-size:14px}
.film-player{position:relative;aspect-ratio:4/3;view-transition-name:film-cover;background:#000}
.film-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.film-fallback{display:inline-block;margin-top:26px;font-size:14px;text-decoration:underline;text-underline-offset:5px}
@keyframes film-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:767px){.film-cover{width:82%;margin:auto}.film-page .site-header nav{display:flex;position:static;padding:0;border:0;background:none;font-size:14px}.film-page .site-header{flex-wrap:wrap}.film-screen{margin-top:25px}}
@media(hover:none){.film-play{opacity:1;transform:translate(-50%,-50%)}}
@media(prefers-reduced-motion:reduce){.film-screen{animation:none}.film-cover img,.film-play{transition:none}.film-cover:hover img,.film-cover:active{transform:none}::view-transition-group(*){animation:none}}

/* Shared ratio for existing and future portfolio media. */
.gallery .photo>button,.gallery .film-cover,.gallery .video-card-frame,.film-player{aspect-ratio:var(--work-ratio);overflow:hidden}
.gallery .photo>button>img,.gallery .film-cover>img{display:block;width:100%;height:100%;aspect-ratio:var(--work-ratio);object-fit:cover}
.film-cover{transition:transform 1s var(--film-ease)}
.film-cover img{transition:transform 1.2s var(--film-ease)}
.film-cover:hover img,.film-cover:focus-visible img{transform:scale(1.045)}
.film-play{transition:opacity .7s var(--film-ease),transform .9s var(--film-ease)}
.film-cover:active{transform:scale(.995)}
.film-screen{animation:film-arrive 1s var(--film-ease)}
::view-transition-group(*){animation-duration:1s;animation-timing-function:var(--film-ease)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.7s}
::view-transition-old(film-cover),::view-transition-new(film-cover){height:100%;object-fit:cover;animation-duration:1s;animation-timing-function:var(--film-ease)}
@media(prefers-reduced-motion:reduce){.film-screen{animation:none}.film-cover,.film-cover img,.film-play{transition:none}.film-cover:hover img,.film-cover:focus-visible img,.film-cover:active{transform:none}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

.film-stills{width:min(1500px,92vw);margin:40px auto 130px;display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:11px;align-items:start}.still{grid-column:span 8;margin:0;overflow:hidden;background:#050505;opacity:0;transform:translateY(28px);transition:opacity .9s var(--film-ease),transform 1.1s var(--film-ease)}.still.is-visible{opacity:1;transform:translateY(0)}.still img{display:block;width:100%;height:auto;transition:transform 1.2s var(--film-ease),filter 1.2s var(--film-ease)}.still:hover img{transform:scale(1.04);filter:brightness(1.04)}.still-a{grid-column:2/10}.still-b{grid-column:12/21;margin-top:12%}.still-c{grid-column:5/16;margin-top:4%}.still-d{grid-column:17/25;margin-top:22%}.still-e{grid-column:2/12;margin-top:16%}.still-f{grid-column:14/23;margin-top:4%}.still-g{grid-column:7/19;margin-top:14%}@media(max-width:767px){.film-stills{width:88vw;grid-template-columns:repeat(8,minmax(0,1fr));gap:28px 11px;margin:40px auto 80px}.still,.still-a,.still-b,.still-c,.still-d,.still-e,.still-f,.still-g{grid-column:1/-1;margin-top:0}.still:nth-child(even){width:82%;justify-self:end}.still:nth-child(odd){width:88%}}@media(prefers-reduced-motion:reduce){.still{opacity:1;transform:none;transition:none}.still img{transition:none}.still:hover img{transform:none;filter:none}}
.film-stills{grid-template-columns:repeat(3,minmax(0,1fr));gap:58px 14px;align-items:start}.still,.still-a,.still-b,.still-c,.still-d,.still-e,.still-f,.still-g{grid-column:auto;margin:0;width:100%;justify-self:stretch}.still:nth-child(2){transition-delay:.08s}.still:nth-child(3){transition-delay:.16s}.still:nth-child(4){transition-delay:.04s}.still:nth-child(5){transition-delay:.12s}.still:nth-child(6){transition-delay:.2s}.still:nth-child(7){transition-delay:.1s}@media(max-width:767px){.film-stills{grid-template-columns:1fr;gap:42px;width:82vw}.still:nth-child(even),.still:nth-child(odd){width:100%;justify-self:stretch}}

.still-open{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}