/* Nolan Sarner — v8: frame-first editorial gallery, Newsreader / Geist */
:root{--paper:#f0efe9;--ink:#1a1c18;--quiet:#72766c;--white:#faf9f3;--dark:#171916;--sans:'Geist','Helvetica Neue',Arial,sans-serif;--serif:'Newsreader',Georgia,serif;--gutter:clamp(22px,4.6vw,82px);--ease:cubic-bezier(.22,1,.36,1)}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}body.viewer-open{overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:2px solid #c6d9bc;outline-offset:5px}::selection{background:#d6dfcf;color:#141711}.skip-link{position:fixed;z-index:500;top:-90px;left:18px;background:white;color:black;padding:12px 16px}.skip-link:focus{top:18px}
/* Featured film: original layout's scale and atmosphere, without a headline about the director. */
.hero{height:100svh;min-height:670px;max-height:1160px;position:relative;isolation:isolate;overflow:hidden;background:#292d28;color:#fff}.hero-poster,.hero-backdrop,.hero-image,.hero-shade{position:absolute;inset:0}.hero-poster{z-index:-1}.hero-backdrop{background:radial-gradient(ellipse at 72% 38%,#57665d 0%,transparent 65%),linear-gradient(120deg,#1c2724,#394137 63%,#171e1c);transition:background .5s}.hero-image{width:100%;height:100%;object-fit:cover;object-position:center 46%;opacity:0;transition:opacity .7s ease,transform 1.8s var(--ease);transform:scale(1.045)}.hero-image.is-loaded{opacity:1;transform:scale(1.01)}.hero-shade{background:linear-gradient(180deg,rgba(5,8,8,.38),transparent 30%,transparent 47%,rgba(3,7,7,.60) 100%),linear-gradient(90deg,rgba(4,7,6,.26),transparent 63%)}
.hero-identity{position:absolute;z-index:3;left:var(--gutter);right:var(--gutter);top:clamp(30px,3.1vw,55px);display:flex;justify-content:space-between;align-items:center;gap:24px}.wordmark{font-size:clamp(17px,1.55vw,23px);font-weight:700;letter-spacing:-.069em;line-height:1}.wordmark-dot{font-family:var(--serif);color:#d4dbc9;font-size:1.15em}.hero-nav{display:flex;gap:clamp(22px,3vw,51px)}.hero-nav a{font-size:12px;font-weight:600;transition:opacity .2s}.hero-nav a:hover{opacity:.6}
.hero-main{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(31px,3.9vw,70px)}.hero-title-wrap{max-width:1100px}.hero-client{display:block;font-size:clamp(10px,.77vw,12px);letter-spacing:.11em;text-transform:uppercase;font-weight:600;color:#e8e7dc;margin-bottom:clamp(12px,2vw,28px)}.hero-title-button{display:flex;align-items:end;gap:clamp(19px,3vw,55px);border:0;background:none;padding:0;text-align:left;max-width:100%}.hero-title{font-family:var(--serif);font-size:clamp(88px,11.2vw,185px);font-weight:400;letter-spacing:-.052em;line-height:.83;margin:0;max-width:980px;text-wrap:balance}.hero-title em{font-weight:400}.hero-play{flex:0 0 auto;width:clamp(56px,6.6vw,100px);height:clamp(56px,6.6vw,100px);border:1px solid rgba(255,255,255,.8);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:4px;transition:color .3s,background .3s,transform .45s var(--ease)}.hero-play svg{width:24%;height:24%;margin-left:3px}.hero-title-button:hover .hero-play{background:#fff;color:#151816;transform:scale(1.06)}.hero-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:clamp(39px,6.1vw,99px)}.hero-scroll{font-size:11px;font-weight:600;transition:opacity .2s}.hero-scroll:hover{opacity:.66}.hero-scroll span{display:inline-block;font-size:18px;margin-left:21px;vertical-align:-1px}.hero-controls{display:flex;align-items:center;gap:25px}.hero-controls button{border:0;background:none;color:#fff;padding:5px 0;font-size:24px;line-height:1;transition:opacity .2s}.hero-controls button:hover{opacity:.5}.hero-controls span{font-size:11px;letter-spacing:.1em;font-variant-numeric:tabular-nums}
/* Considered editorial rhythm: ample whitespace and a few cinematic wide cuts. */
.work{padding:clamp(100px,11vw,170px) var(--gutter) clamp(130px,15vw,250px)}.work-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:clamp(46px,6.1vw,95px)}.section-label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#757a6d}.work-intro h2{font-family:var(--serif);font-weight:400;line-height:.9;letter-spacing:-.044em;font-size:clamp(75px,9vw,150px);margin:22px 0 0}.work-intro h2 em{font-weight:400}.filters{display:flex;gap:22px;margin-bottom:7px;white-space:nowrap}.filter{border:0;border-bottom:1px solid transparent;padding:0 0 7px;background:none;color:#999c92;font-size:12px;font-weight:600;transition:color .2s,border-color .2s}.filter:hover,.filter.is-active{color:var(--ink)}.filter.is-active{border-bottom-color:var(--ink)}
.film-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,3.6vw,66px);row-gap:clamp(92px,9.7vw,176px);align-items:start}.film-card{min-width:0;grid-column:span 6}.film-card:nth-child(10n+1){grid-column:span 7}.film-card:nth-child(10n+2){grid-column:span 5;padding-top:17%}.film-card:nth-child(10n+3){grid-column:span 12;padding:0 7%}.film-card:nth-child(10n+4){grid-column:span 5}.film-card:nth-child(10n+5){grid-column:span 7;padding-top:12%}.film-card:nth-child(10n+6){grid-column:span 7}.film-card:nth-child(10n+7){grid-column:span 5;padding-top:19%}.film-card:nth-child(10n+8){grid-column:span 12;padding:0 10%}.film-card:nth-child(10n+9){grid-column:span 6}.film-card:nth-child(10n+10){grid-column:span 6;padding-top:15%}
.film-media{position:relative;width:100%;display:block;aspect-ratio:1.46;border:0;background:#353e38;overflow:hidden;padding:0;isolation:isolate}.film-card:nth-child(10n+2) .film-media,.film-card:nth-child(10n+4) .film-media,.film-card:nth-child(10n+7) .film-media{aspect-ratio:1.07}.film-card:nth-child(10n+3) .film-media,.film-card:nth-child(10n+8) .film-media{aspect-ratio:2.15}.film-card:nth-child(10n+5) .film-media{aspect-ratio:1.65}.film-placeholder{position:absolute;inset:0;background:radial-gradient(circle at 76% 25%,var(--tone-a),transparent 70%),linear-gradient(140deg,var(--tone-b),#1d2523);display:flex;align-items:center;justify-content:center}.film-placeholder span{font-family:var(--serif);font-style:italic;color:rgba(255,255,255,.12);font-size:clamp(50px,5vw,125px);text-align:center;line-height:.85;letter-spacing:-.04em;padding:10%;max-width:100%}.film-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transform:scale(1.015);transition:opacity .6s ease,transform 1.1s var(--ease),filter .7s;filter:saturate(.94)}.film-media img.is-loaded{opacity:1}.film-media:hover img.is-loaded,.film-media:focus-visible img.is-loaded{transform:scale(1.07);filter:saturate(1.03)}.film-media:after{content:'';position:absolute;inset:0;background:rgba(10,13,11,.08);transition:background .4s;pointer-events:none}.film-media:hover:after{background:rgba(10,13,11,.25)}.film-play{position:absolute;z-index:3;top:50%;left:50%;transform:translate(-50%,-40%) scale(.94);width:66px;height:66px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.85);color:white;border-radius:50%;opacity:0;transition:opacity .3s,transform .4s var(--ease);backdrop-filter:blur(8px);background:rgba(10,12,11,.12)}.film-play svg{width:16px;height:16px;margin-left:3px}.film-media:hover .film-play,.film-media:focus-visible .film-play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.film-caption{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-top:clamp(17px,1.8vw,27px)}.film-caption h3{font-family:var(--serif);font-size:clamp(32px,3.05vw,54px);font-weight:400;line-height:1.02;letter-spacing:-.027em;margin:0;max-width:72%}.film-caption span{font-size:11px;color:#6b7069;font-weight:600;text-align:right}.film-card:nth-child(10n+3) .film-caption h3,.film-card:nth-child(10n+8) .film-caption h3{font-size:clamp(43px,4vw,65px)}
/* Low-key information footer: recognition and contact without interrupting the film gallery. */
.information{background:#20231f;color:#f5f4ed;padding:clamp(42px,4.4vw,76px) var(--gutter) 34px}
.info-topline{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:11px;font-weight:600;color:#bdc1b8}
.info-topline a:hover,.info-bottomline a:hover{color:#fff}
.info-topline-separator{padding:0 10px;color:#697067}
.info-intro{display:flex;justify-content:flex-end;align-items:flex-start;padding:clamp(82px,8vw,138px) 0 clamp(80px,8vw,126px)}
.info-intro p{font-size:clamp(18px,1.8vw,27px);line-height:1.43;letter-spacing:-.025em;color:#c6cac1;max-width:650px;margin:0}
.info-columns{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(65px,8vw,150px);padding-bottom:clamp(92px,9vw,150px)}
.info-label{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#a9afa5;margin:0 0 30px}
.recognition-list{list-style:none;padding:0;margin:0}
.recognition-list li{border-top:1px solid #444a42;padding:15px 0;display:flex;align-items:baseline;justify-content:space-between;gap:24px}
.recognition-list li:last-child{border-bottom:1px solid #444a42}
.recognition-list li span:first-child{font-size:clamp(14px,1.12vw,17px);letter-spacing:-.018em;line-height:1.35}
.recognition-list li span:last-child{font-size:12px;color:#a8aea5;text-align:right;white-space:nowrap}
.contact-detail{border-top:1px solid #444a42;padding:20px 0 25px;display:flex;flex-direction:column;align-items:start;gap:10px}
.contact-detail:last-child{border-bottom:1px solid #444a42}
.detail-label{font-size:11px;color:#a8aea5;margin-bottom:6px}
.detail-primary{font-family:var(--serif);font-size:clamp(27px,2.3vw,40px);line-height:1.05;letter-spacing:-.017em;transition:color .2s}
.detail-primary:hover,.detail-secondary:hover{color:#bfd0b8}
.detail-primary span{display:inline-block;font-family:var(--sans);font-size:.55em;margin-left:3px;vertical-align:4px}
.detail-secondary{font-size:12px;color:#c7c9c1;line-height:1.5;transition:color .2s}
.detail-secondary span{color:#70776b;padding:0 4px}
.info-bottomline{border-top:1px solid #444a42;padding-top:23px;display:flex;justify-content:space-between;gap:30px;font-size:11px;color:#aeb2a9}
/* Full-screen restrained film viewer. */
.viewer{position:fixed;z-index:200;inset:0;visibility:hidden;pointer-events:none;background:#0e100f;color:#fff;opacity:0;transition:opacity .25s}.viewer[aria-hidden="false"]{visibility:visible;opacity:1;pointer-events:auto}.viewer-backdrop{position:absolute;inset:0}.viewer-dialog{position:relative;z-index:1;width:100%;height:100%;padding:clamp(24px,3.4vw,55px) clamp(23px,5vw,90px);display:flex;flex-direction:column;gap:clamp(21px,3.6vh,42px);outline:0}.viewer-top{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:13px;font-weight:600;flex-shrink:0}.viewer-close{border:0;background:transparent;display:flex;align-items:center;gap:14px;font-size:12px}.viewer-close span{font-size:25px;font-weight:300;line-height:1}.viewer-player{position:relative;flex:1;min-height:0;width:min(100%,calc((100svh - 230px)*1.77778));margin:0 auto;display:grid;place-items:center;overflow:hidden;background:#222622}.viewer-player iframe{border:0;width:100%;height:100%;position:absolute;inset:0}.viewer-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.46}.viewer-fallback{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 25%,#656d60,#1b221f 70%)}.viewer-visit{position:relative;z-index:3;padding:15px 23px;border:1px solid #deded9;border-radius:60px;background:rgba(8,11,9,.35);backdrop-filter:blur(9px);font-size:13px}.viewer-visit:hover{background:#fff;color:#151615}.viewer-bottom{display:flex;align-items:end;justify-content:space-between;gap:40px;flex-shrink:0}.viewer-caption span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#adb0a8}.viewer-caption h2{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1;margin:8px 0 0;font-size:clamp(36px,4vw,72px)}.viewer-tools{display:flex;align-items:center;gap:clamp(20px,3vw,50px);font-size:12px;font-weight:500}.viewer-tools a{border-bottom:1px solid #8d928b;padding-bottom:4px;white-space:nowrap}.viewer-tools a:hover{color:#d7dfcb}.viewer-controls{display:flex;gap:18px;align-items:center}.viewer-controls span{font-size:10px;letter-spacing:.11em;color:#a3a69e;font-variant-numeric:tabular-nums;white-space:nowrap}.viewer-controls button{font-size:25px;background:none;border:0;padding:5px 2px}.viewer-controls button:hover{opacity:.6}
@media(max-width:1000px){.hero-title{font-size:clamp(83px,11.8vw,125px)}.film-card:nth-child(10n+3),.film-card:nth-child(10n+8){padding:0 3%}.film-caption{display:block}.film-caption h3{max-width:100%}.film-caption span{display:block;text-align:left;margin-top:8px}}
@media(max-width:720px){:root{--gutter:23px}.hero{height:90svh;min-height:620px;max-height:none}.hero-identity{top:30px}.hero-nav{gap:23px}.hero-nav a{font-size:11px}.hero-main{bottom:31px}.hero-title{font-size:clamp(82px,16vw,129px);max-width:95%}.hero-title-button{gap:14px}.hero-play{width:52px;height:52px;margin-bottom:0}.hero-bottom{margin-top:55px}.work{padding-top:91px;padding-bottom:120px}.work-heading{display:block;margin-bottom:55px}.work-intro h2{font-size:clamp(70px,13vw,100px);margin-top:18px}.filters{margin-top:38px;gap:28px}.film-grid{grid-template-columns:1fr;row-gap:68px}.film-card,.film-card:nth-child(n){grid-column:1; padding:0}.film-card .film-media,.film-card:nth-child(n) .film-media{aspect-ratio:1.45}.film-card:nth-child(3n) .film-media{aspect-ratio:1.22}.film-card:nth-child(5n) .film-media{aspect-ratio:1.7}.film-caption{display:flex;gap:12px;margin-top:15px}.film-caption h3,.film-card:nth-child(n) .film-caption h3{font-size:clamp(34px,7.5vw,45px);max-width:70%}.film-caption span{margin:5px 0 0;font-size:10px;text-align:right;max-width:30%}.film-play{width:58px;height:58px;opacity:1;transform:translate(-50%,-50%);background:rgba(10,12,11,.16)}.viewer-dialog{padding:25px 21px 30px;gap:25px}.viewer-player{width:100%;aspect-ratio:16/9;flex:0 0 auto;margin:auto 0;max-height:64svh}.viewer-bottom{display:block}.viewer-caption h2{font-size:47px}.viewer-tools{margin-top:28px;justify-content:space-between}}
@media(max-width:420px){.hero-title{font-size:clamp(72px,16vw,100px)}.hero-play{width:47px;height:47px}.hero-scroll{font-size:10px}.hero-controls{gap:17px}.work-intro h2{font-size:16.8vw}.film-caption h3,.film-card:nth-child(n) .film-caption h3{font-size:33px}.film-caption span{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.hero-image{transform:none}.film-media img{transform:none}}
.hero-title.is-long{font-size:clamp(68px,8.65vw,142px);max-width:1200px}
@media(max-width:720px){.hero-title.is-long{font-size:clamp(62px,12vw,92px)}}
@media(max-width:420px){.hero-title.is-long{font-size:clamp(59px,11.5vw,78px)}}

.work-intro h2{margin-top:0}

@media(max-width:1120px){.info-intro{padding-top:96px;padding-bottom:94px}.info-intro p{max-width:650px}.info-columns{gap:55px}.detail-primary{font-size:clamp(25px,2.7vw,34px)}.recognition-list li{gap:14px}}
@media(max-width:760px){.information{padding:35px var(--gutter) 29px}.info-topline{font-size:10px}.info-intro{justify-content:flex-start;padding:84px 0 76px}.info-intro p{font-size:19px;line-height:1.48}.info-columns{grid-template-columns:1fr;gap:72px;padding-bottom:90px}.info-label{margin-bottom:24px}.recognition-list li{padding:14px 0}.recognition-list li span:first-child{font-size:15px}.recognition-list li span:last-child{font-size:11px}.detail-primary{font-size:clamp(28px,6vw,40px)}.info-bottomline{flex-wrap:wrap;gap:15px 28px}}
@media(max-width:420px){.info-intro{padding-top:72px;padding-bottom:67px}.info-intro p{font-size:17px}.recognition-list li span:first-child{font-size:14px}.recognition-list li span:last-child{font-size:10px}.detail-primary{font-size:clamp(25px,6vw,33px)}.detail-secondary{font-size:11px}.info-bottomline{font-size:10px}}

/* Motion previews — deliberately invisible until movement starts.
   A single player is created on demand. Still frames are always the fallback. */
.film-media .motion-layer{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .55s ease}
.film-media .motion-layer video,.film-media .motion-layer iframe{position:absolute;top:50%;left:50%;width:100%;height:100%;object-fit:cover;transform:translate(-50%,-50%);border:0;pointer-events:none}
/* Vimeo's iframe is a 16:9 player; cover the existing variable-size editorial crops. */
.film-media .motion-layer iframe{width:max(100%,177.78cqh);height:max(100%,56.25cqw)}
.film-media{container-type:size}
.film-media.is-previewing .motion-layer{opacity:1}
.film-media.is-previewing img{transform:scale(1.012)}
.film-media.is-previewing:after{background:transparent}
.film-media.is-previewing:hover:after{background:rgba(0,0,0,.07)}
.film-media[data-motion="available"] .film-play{transition:opacity .3s,transform .4s var(--ease),width .3s,height .3s}
.film-media.is-previewing .film-play{top:auto;left:auto;bottom:18px;right:18px;transform:none;opacity:.86;width:43px;height:43px;background:rgba(10,12,11,.22);border-color:rgba(255,255,255,.72)}
.film-media.is-previewing:hover .film-play,.film-media.is-previewing:focus-visible .film-play{opacity:1;transform:scale(1.04)}
@media(max-width:720px){.film-media.is-previewing .film-play{bottom:14px;right:14px;width:39px;height:39px}}
@media(prefers-reduced-motion:reduce){.film-media .motion-layer{display:none}}

/* Typography, after treatment review:
   Newsreader = a restrained, humane editorial counterpoint to the images;
   Geist = clear contemporary navigation and captions. */
body{font-optical-sizing:auto;font-feature-settings:'kern' 1}
.wordmark{font-weight:600;letter-spacing:-.055em}
.wordmark-dot{font-family:var(--serif);font-size:1.08em}
.hero-title{font-weight:370;letter-spacing:-.045em;line-height:.90;font-optical-sizing:auto}
.hero-title em{font-style:italic;font-weight:330}
.work-intro h2{font-weight:360;letter-spacing:-.052em;line-height:.98}
.film-caption h3{font-weight:370;letter-spacing:-.035em;line-height:1.06}
.info-intro p{font-family:var(--serif);font-size:clamp(26px,2.7vw,39px);line-height:1.23;letter-spacing:-.024em;color:#e2e4dc;max-width:740px;font-weight:340}
.detail-primary{font-weight:350;letter-spacing:-.025em}
.hero-client,.hero-nav a,.filters,.film-caption span,.info-topline,.info-label,.detail-label,.detail-secondary,.viewer-top,.viewer-caption span,.viewer-tools{font-weight:450}
/* Each film owns its format. The fallback ratio is used only until its still loads.
   If film.frame is explicitly defined, that always wins over poster dimensions.
   Never crop the film still or its motion preview. */
.film-media,.film-card:nth-child(n) .film-media{aspect-ratio:var(--frame-ratio,16/9);height:auto;max-height:none}
.film-media img,.film-card:nth-child(n) .film-media img{object-fit:contain;object-position:center;filter:none}
.film-media:hover img.is-loaded,.film-media:focus-visible img.is-loaded{transform:scale(1.012);filter:none}
.film-media .motion-layer video{object-fit:contain}
.film-media .motion-layer iframe{width:100%;height:100%;object-fit:contain}
/* Format affects the gallery's rhythm, but not by cropping the picture.
   Cinema frames are given space; portrait frames feel like their own objects. */
.film-card.frame-cinema{grid-column:span 12 !important;padding:0 clamp(0px,5vw,100px) !important}
.film-card.frame-portrait{grid-column:span 5 !important;padding:0 8% !important}
.film-card.frame-portrait .film-media{max-width:540px;margin-inline:auto}
.film-card.frame-square{padding-left:min(2%,12px);padding-right:min(2%,12px)}
.film-card.frame-cinema .film-caption{max-width:100%;margin-inline:auto}
.film-card.frame-cinema .film-caption h3{font-size:clamp(36px,3.3vw,58px)}
/* The screening room uses the real project frame instead of a fixed 16:9 box. */
.viewer-player{--frame-ratio:1.777778;aspect-ratio:var(--frame-ratio);width:min(100%,calc((100svh - 235px) * var(--frame-ratio)));max-height:calc(100svh - 235px);flex:0 1 auto;min-height:0;align-self:center;margin:auto;overflow:hidden}
.viewer-player iframe{width:100%;height:100%}
.viewer-still{object-fit:contain;opacity:.8}
@media(max-width:1000px){.film-card.frame-cinema{padding-inline:2% !important}}
@media(max-width:720px){
  .hero-title{line-height:.91}
  .film-card.frame-cinema,.film-card.frame-portrait,.film-card.frame-square{grid-column:1 !important;padding:0 !important}
  .film-card.frame-portrait .film-media{max-width:min(78vw,410px);margin-inline:auto}
  .film-card.frame-portrait .film-caption{max-width:min(78vw,410px);margin-inline:auto}
  .film-card .film-media,.film-card:nth-child(n) .film-media{aspect-ratio:var(--frame-ratio,16/9)}
  .info-intro p{font-size:clamp(24px,5.5vw,34px);line-height:1.25}
  .viewer-player{width:min(100%,calc(63svh * var(--frame-ratio)));max-height:63svh;aspect-ratio:var(--frame-ratio);flex:0 1 auto;margin:auto}
}
@media(max-width:420px){.info-intro p{font-size:clamp(23px,5.6vw,29px)}}


/* VERSION 9 — SEQUENCED EDITORIAL RHYTHM -----------------------------------
   Each project's image stays at its own aspect ratio. Only its position,
   breathing room and neighbouring project are curated. No image cropping.
   A sequence of solos and visual conversations replaces an indiscriminate grid.
--------------------------------------------------------------------------- */
.film-grid{display:flex;flex-direction:column;gap:0;align-items:stretch}
.sequence-beat{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(26px,3.7vw,68px);align-items:start;min-width:0;margin:0 0 clamp(138px,15vw,270px);position:relative}
.sequence-beat:last-child{margin-bottom:0}
/* Reset v8's nth-child geometry, which assigned scale without regard to adjacency. */
.sequence-beat .film-card,.sequence-beat .film-card:nth-child(n),
.sequence-beat .film-card.frame-cinema,.sequence-beat .film-card.frame-square,
.sequence-beat .film-card.frame-portrait{padding:0!important;width:auto;min-width:0;max-width:none}
.sequence-beat .film-card:nth-child(n) .film-media{aspect-ratio:var(--frame-ratio,16/9);height:auto}
.sequence-beat .film-card.frame-portrait .film-media{max-width:min(100%,420px);margin:0 auto}
.sequence-beat .film-card.frame-portrait .film-caption{max-width:min(100%,420px);margin-inline:auto}
.sequence-beat .film-caption{margin-top:clamp(13px,1.35vw,20px);display:flex;align-items:baseline;justify-content:space-between;gap:13px}
.sequence-beat .film-caption h3,.sequence-beat .film-card:nth-child(n) .film-caption h3{font-size:clamp(26px,2.4vw,38px);line-height:1.09;letter-spacing:-.024em;font-weight:370;max-width:74%;margin:0}
.sequence-beat .film-caption span{font-size:10px;line-height:1.35;color:#74796e;text-align:right;margin:0;max-width:27%;letter-spacing:0}
/* Opening image is substantial but NOT another full-bleed hero. */
.beat-opening .film-card{grid-column:2 / 12!important}
.beat-opening.align-right .film-card{grid-column:3 / 13!important}
.beat-opening .film-media{box-shadow:0 1px 0 rgba(0,0,0,.04)}
/* The duets are purposely not symmetrical: each image gets its own gravity. */
.beat-dialogue .film-card:first-child{grid-column:1 / 7!important}
.beat-dialogue .film-card:nth-child(2){grid-column:8 / 13!important;padding-top:clamp(85px,11vw,195px)!important}
.beat-dialogue.align-right .film-card:first-child{grid-column:2 / 7!important;padding-top:clamp(72px,9vw,150px)!important}
.beat-dialogue.align-right .film-card:nth-child(2){grid-column:7 / 13!important;padding-top:0!important}
/* A small interval, not a filler tile: the image is held with generous space. */
.beat-breath .film-card{grid-column:3 / 10!important}
.beat-breath.align-right .film-card{grid-column:5 / 12!important}
/* A second feature is near the end, letting the gallery breathe before the last pair. */
.beat-feature .film-card{grid-column:1 / 12!important}
.beat-feature.align-right .film-card{grid-column:2 / 13!important}
/* Final two frames carry a little more separation as the site moves to credits. */
.beat-closing .film-card:first-child{grid-column:1 / 7!important}
.beat-closing .film-card:nth-child(2){grid-column:8 / 13!important;padding-top:clamp(70px,8.5vw,155px)!important}
.beat-closing.align-right .film-card:first-child{grid-column:2 / 7!important;padding-top:clamp(75px,9.5vw,175px)!important}
.beat-closing.align-right .film-card:nth-child(2){grid-column:7 / 13!important;padding-top:0!important}
/* Cinema projects are never 'zoomed' to fill a shape. Portraits remain objects.
   If a future portrait is exceptionally narrow, keep it visually modest. */
.sequence-beat .film-card.frame-cinema .film-caption h3{font-size:clamp(27px,2.5vw,40px)}
.sequence-beat .film-media img,.sequence-beat .film-media video{object-fit:contain!important}
.sequence-beat .film-media:hover img.is-loaded{transform:scale(1.009)}
/* Change is in the pictures; transitions stay almost invisible. */
@media(min-width:721px){
 .beat-dialogue .film-card:nth-child(2) .film-caption,.beat-closing .film-card:nth-child(2) .film-caption{align-items:flex-start}
}
@media(max-width:1000px){
 .sequence-beat{column-gap:clamp(18px,3vw,34px);margin-bottom:clamp(120px,13vw,175px)}
 .sequence-beat .film-caption{flex-wrap:wrap;gap:6px}
 .sequence-beat .film-caption h3,.sequence-beat .film-card:nth-child(n) .film-caption h3{font-size:clamp(25px,3vw,34px);max-width:100%}
 .sequence-beat .film-caption span{max-width:100%;text-align:left}
}
@media(max-width:720px){
 .sequence-beat{display:flex;flex-direction:column;gap:clamp(74px,14vw,105px);margin-bottom:clamp(90px,16vw,140px)}
 .sequence-beat .film-card,.sequence-beat .film-card:nth-child(n){width:100%;padding-top:0!important}
 .sequence-beat .film-card.frame-portrait{width:min(76%,390px);align-self:center}
 .sequence-beat .film-card.frame-portrait .film-media{max-width:100%}
 .sequence-beat .film-caption{align-items:baseline;flex-wrap:nowrap;gap:10px}
 .sequence-beat .film-caption h3,.sequence-beat .film-card:nth-child(n) .film-caption h3{font-size:clamp(28px,6.6vw,39px);max-width:73%}
 .sequence-beat .film-caption span{max-width:27%;text-align:right;font-size:10px}
 /* A subtle editorial margin on occasional single frames, not artificial cropping. */
 .beat-breath .film-card{width:86%;align-self:flex-end}
 .beat-breath.align-right .film-card{align-self:flex-start}
 .beat-feature .film-card,.beat-opening .film-card{width:100%}
 .beat-dialogue .film-card:nth-child(2),.beat-closing .film-card:nth-child(2){width:87%;align-self:flex-end}
 .beat-dialogue.align-right .film-card:nth-child(2),.beat-closing.align-right .film-card:nth-child(2){align-self:flex-start}
 .work{padding-bottom:clamp(100px,18vw,155px)}
}
@media(max-width:420px){
 .sequence-beat .film-caption h3,.sequence-beat .film-card:nth-child(n) .film-caption h3{font-size:clamp(26px,7vw,32px)}
 .sequence-beat .film-caption span{font-size:9px}
}
@media(prefers-reduced-motion:reduce){.sequence-beat .film-media img{transform:none!important}}

/* Version 10: quiet custom transport. Absolutely no visible timecode. */
.viewer-player{isolation:isolate;background:#000}
.viewer-media{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;background:#090a09}
.viewer-media iframe,.viewer-media video{position:absolute;inset:0;width:100%;height:100%;border:0}
.viewer-media video{object-fit:contain}
.viewer-transport[hidden]{display:none!important}
.viewer-transport{position:absolute;z-index:10;bottom:0;left:0;right:0;min-height:66px;display:flex;align-items:center;gap:17px;padding:20px clamp(15px,2.5vw,28px) 16px;background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,.38) 62%,rgba(0,0,0,0));color:#fff;user-select:none;-webkit-user-select:none}
.transport-icon{height:38px;width:32px;flex:0 0 32px;border:0;background:none;color:#fff;padding:7px 5px;display:grid;place-items:center;opacity:.85;transition:opacity .18s,transform .18s}
.transport-icon:hover,.transport-icon:focus-visible{opacity:1}
.transport-icon svg{display:block;height:20px;width:20px}
.transport-play .icon-play{display:none}.transport-play.is-paused .icon-play{display:block}.transport-play.is-paused .icon-pause{display:none}
.transport-seek,.transport-volume-panel input{appearance:none;-webkit-appearance:none;border:0;border-radius:99px;outline:0;cursor:pointer;touch-action:pan-y;background:linear-gradient(to right,rgba(255,255,255,.95) var(--seek-progress,0%),rgba(255,255,255,.28) var(--seek-progress,0%));height:3px}
.transport-seek{flex:1;min-width:20px;width:100%;height:3px;align-self:center;transition:height .12s}
.transport-seek:hover,.transport-seek:focus-visible{height:5px}
.transport-seek::-webkit-slider-thumb,.transport-volume-panel input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;background:#fff;border:0;border-radius:50%;height:10px;width:10px;opacity:0;transition:opacity .15s}
.transport-seek::-moz-range-thumb,.transport-volume-panel input::-moz-range-thumb{background:#fff;border:0;border-radius:50%;height:10px;width:10px;opacity:0;transition:opacity .15s}
.transport-seek:hover::-webkit-slider-thumb,.transport-seek:focus-visible::-webkit-slider-thumb,.transport-volume-panel input:hover::-webkit-slider-thumb,.transport-volume-panel input:focus-visible::-webkit-slider-thumb{opacity:1}
.transport-seek:hover::-moz-range-thumb,.transport-seek:focus-visible::-moz-range-thumb,.transport-volume-panel input:hover::-moz-range-thumb,.transport-volume-panel input:focus-visible::-moz-range-thumb{opacity:1}
.viewer-transport input:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:6px}
.transport-volume{position:relative;display:grid;place-items:center;flex:0 0 32px}
.transport-volume-panel{position:absolute;bottom:45px;left:50%;transform:translate(-50%,6px);width:42px;height:124px;display:flex;justify-content:center;align-items:center;border-radius:4px;background:rgba(17,19,18,.93);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 30px rgba(0,0,0,.3);visibility:hidden;pointer-events:none;opacity:0;transition:opacity .18s,transform .18s,visibility .18s}
.transport-volume.is-open .transport-volume-panel,.transport-volume:hover .transport-volume-panel,.transport-volume:focus-within .transport-volume-panel{visibility:visible;pointer-events:auto;opacity:1;transform:translate(-50%,0)}
.transport-volume-panel input{flex:none;width:88px;height:4px;transform:rotate(-90deg);background:linear-gradient(to right,rgba(255,255,255,.98) var(--volume-progress,100%),rgba(255,255,255,.3) var(--volume-progress,100%))}
.transport-speaker.is-muted .volume-wave{display:none}
.transport-fullscreen .collapse{display:none}.transport-fullscreen.is-fullscreen .expand{display:none}.transport-fullscreen.is-fullscreen .collapse{display:block}
.viewer-player:fullscreen,.viewer-player:-webkit-full-screen{width:100vw!important;height:100vh!important;aspect-ratio:auto!important;max-height:none!important;max-width:none!important;margin:0!important;background:#000}
.viewer-player:fullscreen .viewer-media,.viewer-player:-webkit-full-screen .viewer-media{width:100%;height:100%}
.viewer-player:fullscreen .viewer-transport,.viewer-player:-webkit-full-screen .viewer-transport{padding-bottom:max(18px,env(safe-area-inset-bottom))}
@media(max-width:720px){.viewer-transport{gap:11px;min-height:61px;padding:16px 10px 12px}.transport-icon{width:30px;flex-basis:30px}.transport-seek{min-width:15px}.transport-volume-panel{bottom:39px}}
@media(hover:none){.transport-seek::-webkit-slider-thumb,.transport-volume-panel input::-webkit-slider-thumb{opacity:1}.transport-seek::-moz-range-thumb,.transport-volume-panel input::-moz-range-thumb{opacity:1}.transport-volume:hover .transport-volume-panel{visibility:hidden;opacity:0;pointer-events:none}.transport-volume.is-open .transport-volume-panel,.transport-volume:focus-within .transport-volume-panel{visibility:visible;opacity:1;pointer-events:auto}}
@media(prefers-reduced-motion:reduce){.viewer-transport *, .viewer-transport *::before, .viewer-transport *::after{transition:none}}

.viewer-load-error{font-family:var(--sans);font-size:13px;color:#c8ccc5;text-align:center;max-width:260px;padding:18px;line-height:1.55;z-index:2}

/* Semantic film links with the same minimalist art direction. */
.film-media{text-decoration:none;color:inherit;cursor:pointer}
.film-title-link{color:inherit;text-decoration:none}
.film-title-link:hover,.film-title-link:focus-visible{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}