body.is-work{background:var(--night);color:var(--on-night)}
.is-work .lede{color:var(--on-night-soft)}
.is-work .label{color:var(--on-night-faint)}
.is-work .cta{color:var(--on-night)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.edge-top{position:absolute;left:0;right:0;top:0;height:30%;z-index:4;pointer-events:none;background:linear-gradient(to bottom,var(--night),rgba(var(--night-rgb),0))}

.ph{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--night);color:var(--on-night)}
.ph-media{position:absolute;inset:0;transform:scale(1.04);will-change:transform}
.ph-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.ph::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(var(--night-rgb),.78) 0%,rgba(var(--night-rgb),.32) 34%,rgba(var(--night-rgb),0) 62%),radial-gradient(ellipse 60% 46% at 20% 78%,rgba(var(--night-rgb),.38),rgba(var(--night-rgb),0))}
.ph-dark{position:absolute;inset:0;z-index:2;background:var(--night);opacity:0;pointer-events:none}
.ph-copy{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(60px,9.5vh,108px);z-index:3}
.ph-title{font-family:var(--font-display);font-weight:var(--vw);font-variation-settings:"hght" 1000;font-stretch:var(--dstretch);letter-spacing:-.005em;text-transform:uppercase;line-height:.9;font-size:clamp(40px,6.8vw,120px)}
.ph-sub{margin:.5em 0 0;font-family:var(--font-display);font-weight:var(--dw);font-stretch:var(--dstretch);letter-spacing:var(--dtrack);font-size:clamp(18px,1.8vw,28px);line-height:1.2;color:var(--on-night-soft)}
.ph-log{margin:clamp(20px,3vh,32px) 0 0;max-width:52ch;font-family:var(--voice);font-weight:var(--vw);font-stretch:var(--vstretch);font-size:clamp(16px,1.2vw,19px);line-height:1.6}
.ph-meta{display:flex;flex-wrap:wrap;gap:16px clamp(28px,3.4vw,56px);margin:clamp(24px,3.6vh,38px) 0 0}
.ph-meta dd{margin:5px 0 0;font-size:14.5px;color:var(--on-night)}
.is-work .ph-meta dt{color:var(--on-night-soft)}
.ph-cue{color:var(--on-night-faint)}
.ph-cue i{background:var(--hair-night)}
.ph-cue i::after{background:var(--on-night-soft)}

.sc{position:relative;height:320vh;background:var(--night)}
.sc-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--night)}
.sc-media{position:absolute;inset:0}
.sc-poster,.sc-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sc-video{opacity:0;transition:opacity .6s var(--ease)}
.sc.is-video .sc-video{opacity:1}
.sc-vignette{position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 50% 50%,rgba(var(--night-rgb),0) 40%,rgba(var(--night-rgb),.62) 100%),linear-gradient(90deg,rgba(var(--night-rgb),.58),rgba(var(--night-rgb),.12) 55%,rgba(var(--night-rgb),0))}
.sc-veil{position:absolute;inset:0;background:var(--night);opacity:.7}
.sc-copy{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;justify-content:center;padding:0 var(--gutter)}
.sc-title{margin:18px 0 0;font-family:var(--font-display);font-weight:var(--dw);font-stretch:var(--dstretch);letter-spacing:var(--dtrack);line-height:1.02;font-size:clamp(36px,5vw,84px)}
.sc-l{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.sc-l>span{display:block;transform:translateY(110%);will-change:transform}
[data-sc-step]{opacity:0;will-change:opacity,transform}
.sc-ps{display:grid;margin-top:clamp(24px,4vh,40px);max-width:42ch}
.sc-ps>*{grid-area:1/1;margin:0}
.sc-p{font-family:var(--voice);font-weight:var(--vw);font-stretch:var(--vstretch);font-size:clamp(17px,1.4vw,22px);line-height:1.55}

.ko{position:relative;height:380vh;background:var(--night)}
.ko-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--night)}
.ko-world{position:absolute;inset:0}
.ko-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.3);will-change:transform;filter:sepia(.18) contrast(1.04)}
.ko-shade{position:absolute;inset:0;opacity:0;background:linear-gradient(90deg,rgba(var(--night-rgb),.9),rgba(var(--night-rgb),.62) 46%,rgba(var(--night-rgb),.2) 80%),linear-gradient(0deg,rgba(var(--night-rgb),.5),rgba(var(--night-rgb),0) 50%)}
.ko-knock{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;background:var(--night)}
.ko-knock span{display:block;font-family:var(--font-display);font-weight:500;font-stretch:var(--dstretch);letter-spacing:0;font-size:min(var(--kw,27vw),var(--kh,48vh));line-height:.82;color:transparent;background-size:cover;background-position:50% 45%;-webkit-background-clip:text;background-clip:text;will-change:transform}
.ko-copy{position:absolute;z-index:5;left:var(--gutter);right:var(--gutter);top:50%;transform:translateY(-50%);max-width:44ch}
.ko-line{opacity:0;margin:0 0 .9em;font-family:var(--voice);font-weight:var(--vw);font-stretch:var(--vstretch);font-size:clamp(17px,1.35vw,21px);line-height:1.55;will-change:opacity,transform}
.ko-copy .label.ko-line{font-family:var(--cap);font-size:11.5px;margin-bottom:1.4em}
.ko-title.ko-line{font-family:var(--font-display);font-weight:var(--dw);font-stretch:var(--dstretch);letter-spacing:var(--dtrack);line-height:1.04;font-size:clamp(32px,3.8vw,60px);margin-bottom:.6em}

.about-film{position:relative;padding:clamp(96px,min(17vh,17vw),200px) var(--gutter);background:var(--night)}
.af-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(40px,6vw,110px);align-items:center}
.af-copy .label{display:block;margin-bottom:28px}
.af-lede{margin:0 0 1.2em;font-family:var(--font-display);font-weight:var(--dw);font-stretch:var(--dstretch);letter-spacing:var(--dtrack);font-size:clamp(24px,2.3vw,38px);line-height:1.3;text-wrap:balance}
.af-copy p:not(.af-lede){margin:0;max-width:46ch;color:var(--on-night-soft)}
.af-fig{margin:0}
.af-ph{position:relative;aspect-ratio:16/9;overflow:hidden;background:#15120e}
.af-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.vf{position:relative;height:460vh;background:var(--night)}
.vf-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--night)}
.vf-takes{position:absolute;inset:0;z-index:0;will-change:transform}
.vf-take{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:grayscale(.3) sepia(.16) brightness(.86) contrast(1.04);will-change:opacity,transform,filter}
.vf-eye{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(ellipse 74% 50% at 50% 50%,rgba(var(--night-rgb),0) 56%,rgba(var(--night-rgb),.8) 78%,var(--night) 92%)}
.vf-frame{font-family:var(--cap);position:absolute;inset:clamp(70px,11vh,110px) clamp(16px,3.4vw,54px) clamp(30px,6vh,64px);z-index:4;pointer-events:none;color:var(--on-night-soft);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.vf-c{position:absolute;width:28px;height:28px;border-color:rgba(239,233,223,.55);border-style:solid;border-width:0;will-change:transform}
.vf-c.tl{left:0;top:0;border-top-width:1px;border-left-width:1px}
.vf-c.tr{right:0;top:0;border-top-width:1px;border-right-width:1px}
.vf-c.bl{left:0;bottom:0;border-bottom-width:1px;border-left-width:1px}
.vf-c.br{right:0;bottom:0;border-bottom-width:1px;border-right-width:1px}
.vf-top,.vf-bot{position:absolute;left:44px;right:44px;display:flex;justify-content:space-between;gap:20px}
.vf-top{top:6px}
.vf-bot{bottom:6px}
.vf-rec{display:inline-flex;align-items:center;gap:8px;color:var(--on-night)}
.vf-rec b{width:9px;height:9px;border-radius:50%;background:#e0322b;box-shadow:0 0 10px rgba(224,50,43,.65);animation:rec 1s steps(2) infinite}
@keyframes rec{50%{opacity:.15}}
.vf-tc{font-variant-numeric:tabular-nums}
.vf-focus{position:absolute;right:16px;top:24%;bottom:24%;width:12px}
.vf-focus i{position:absolute;right:0;top:0;bottom:0;width:1px;background:rgba(239,233,223,.32)}
.vf-focus b{position:absolute;right:-3px;width:12px;height:1px;background:#e0322b;top:50%}
.vf-heading{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.vf-chs{position:absolute;inset:0;z-index:5}
.vf-ch{position:absolute;left:50%;top:50%;width:min(84vw,700px);transform:translate(-50%,-50%);opacity:0;visibility:hidden;text-align:center;will-change:opacity,transform,filter}
.vf-ch .label{margin:0 0 18px;color:var(--on-night-soft)}
.vf-t{font-family:var(--font-display);font-weight:var(--dw);font-stretch:var(--dstretch);letter-spacing:var(--dtrack);line-height:1.06;font-size:clamp(28px,3.6vw,58px);text-wrap:balance}
.vf-ch p:not(.label){margin:22px auto 0;max-width:46ch;font-family:var(--voice);font-weight:var(--vw);font-stretch:var(--vstretch);font-size:clamp(16px,1.25vw,20px);line-height:1.6;color:var(--on-night-soft)}
.vf-btm,.pin-btm{position:absolute;left:0;right:0;bottom:0;height:45%;z-index:6;pointer-events:none;opacity:0;background:linear-gradient(to top,var(--night),rgba(var(--night-rgb),0))}

.reel{position:relative;background:var(--night)}
.reel-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.reel-head{display:flex;justify-content:space-between;align-items:baseline;padding:0 var(--gutter);margin-bottom:clamp(20px,3.4vh,36px)}
.reel-count{font-variant-numeric:tabular-nums}
.reel-track{display:flex;gap:clamp(16px,2vw,32px);padding:0 var(--gutter);will-change:transform}
.reel-frames{display:contents}
.reel-card{flex:0 0 min(64vw,150vh);margin:0;transform:scale(.88);opacity:.4;filter:saturate(.3);transition:transform .9s var(--ease-slow),opacity .9s var(--ease-slow),filter .9s var(--ease-slow)}
.reel-card.on{transform:none;opacity:1;filter:none}
.reel-ph{position:relative;aspect-ratio:2.39;overflow:hidden;background:#15120e}
.reel-ph img{position:absolute;top:0;left:-10%;width:120%;height:100%;max-width:none;object-fit:cover;will-change:transform}

.is-light .ph-copy,.is-light .sc-copy{text-shadow:0 2px 22px rgba(var(--night-rgb),.55)}
.ph.is-light::after{background:linear-gradient(0deg,rgba(var(--night-rgb),.86) 0%,rgba(var(--night-rgb),.44) 38%,rgba(var(--night-rgb),0) 66%),radial-gradient(ellipse 60% 46% at 20% 78%,rgba(var(--night-rgb),.42),rgba(var(--night-rgb),0))}
.ons{padding:clamp(96px,min(15vh,17vw),170px) var(--gutter);background:var(--night)}
.ons-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,110px);align-items:end;margin-bottom:clamp(36px,6vh,64px)}
.ons-head .label{display:block;margin-bottom:22px}
.ons-t{font-family:var(--font-display);font-weight:var(--dw);letter-spacing:var(--dtrack);line-height:1.04;font-size:clamp(32px,3.8vw,60px)}
.ons-head p{margin:0;max-width:44ch;color:var(--on-night-soft)}
.ons-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(12px,1.4vw,22px);align-items:end}
.ons-fig{margin:0}
.ons-media{position:relative;overflow:hidden;background:#15120e}
.ons-fig:first-child .ons-media{aspect-ratio:2.67}
.ons-fig:last-child .ons-media{aspect-ratio:16/9}
.ons-media img,.ons-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ons-media video{opacity:0;transition:opacity 1.2s var(--ease)}
.ons-media.is-playing video{opacity:1}
.ons-fig figcaption{margin-top:14px}
.credits{padding:clamp(96px,min(16vh,15vw),190px) var(--gutter) clamp(72px,min(12vh,11vw),140px);background:var(--night)}
.cr-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(36px,6vw,110px);align-items:start}
.cr-list{margin:0;display:grid;gap:clamp(22px,3.4vh,34px)}
.cr-list>div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:20px;align-items:baseline}
.cr-list dd{margin:0;font-family:var(--font-display);font-weight:var(--dw);font-stretch:var(--dstretch);letter-spacing:var(--dtrack);font-size:clamp(17px,1.4vw,22px);line-height:1.4}
.cr-list a{border-bottom:1px solid currentColor}

.trailer{padding:0 var(--gutter) clamp(96px,min(16vh,15vw),190px);background:var(--night)}
.tr-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:clamp(20px,3vh,32px)}
.tr-frame{position:relative;aspect-ratio:2.39;overflow:hidden;background:#000}
.tr-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tr-play{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;color:var(--on-night)}
.tr-poster{position:absolute;inset:0;background:center/cover no-repeat;transition:transform 1.6s var(--ease-slow)}
.tr-play:hover .tr-poster{transform:scale(1.03)}
.tr-btn{font-family:var(--cap);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:14px;font-size:11px;letter-spacing:var(--ltrack);text-transform:uppercase}
.tr-btn i{position:relative;display:block;width:76px;height:76px;border:1px solid rgba(239,233,223,.7);border-radius:50%}
.tr-btn i::after{content:"";position:absolute;left:31px;top:26px;border-style:solid;border-width:12px 0 12px 19px;border-color:transparent transparent transparent var(--on-night)}
.tr-btn em{font-style:normal;color:var(--on-night-soft);letter-spacing:.18em}


@media (max-width:959px){
  .ons-head,.ons-grid{grid-template-columns:1fr}
  .reel{height:auto!important}
  .reel-pin{position:relative;height:auto;padding:clamp(56px,8vh,90px) 0}
  .reel-track{display:block;padding:0;transform:none!important}
  .reel-frames{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .reel-frames::-webkit-scrollbar{display:none}
  .reel-card{flex:0 0 84vw;scroll-snap-align:center}
  .reel-ph{aspect-ratio:1.5}
  .reel-ph img{object-position:50% 50%}
  .reel-ph img{left:0;width:100%;transform:none!important}
  .af-grid,.cr-grid{grid-template-columns:1fr}
  .cr-list>div{grid-template-columns:1fr;gap:6px}
}
@media (max-width:720px) and (orientation:portrait){
  .ph{height:auto;min-height:0;padding-bottom:clamp(60px,9vh,90px)}
  .ph-media{position:relative;height:min(100vw,64svh);-webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent);mask-image:linear-gradient(to bottom,#000 62%,transparent)}
  .ph::after{display:none}
  .ph-copy{position:relative;left:auto;right:auto;bottom:auto;margin-top:-8svh;padding:0 var(--gutter)}
  .ph-cue{display:none}
  .ph-title{font-size:clamp(34px,10.5vw,58px)}
  .ko-shade{background:linear-gradient(0deg,rgba(var(--night-rgb),.94) 0%,rgba(var(--night-rgb),.8) 48%,rgba(var(--night-rgb),.3) 78%,rgba(var(--night-rgb),.1))}
  .sc-title{font-size:clamp(32px,9.6vw,48px)}
  .sc-vignette{background:radial-gradient(ellipse 90% 50% at 50% 50%,rgba(var(--night-rgb),.2) 30%,rgba(var(--night-rgb),.7) 100%),rgba(var(--night-rgb),.38)}
  .sc-copy{text-shadow:0 2px 22px rgba(var(--night-rgb),.55)}
  .is-work .sc-copy .label{color:var(--on-night-soft)}
  .ko-knock span{font-size:min(var(--kwm,30vw),var(--khm,40vh))}
  .ko-copy{top:auto;bottom:clamp(60px,10vh,100px);transform:none}
  .vf-frame{font-size:9.5px;letter-spacing:.1em}
  .vf-top,.vf-bot{left:34px;right:34px}
  .vf-top span:first-child{display:none}
}
@media (max-width:600px){
  .vf-focus{display:none}
}
@media (max-width:720px){
  .trailer{padding-bottom:40px}
  .ons{padding:72px var(--gutter) 48px}
  .credits{padding:64px var(--gutter) 40px}
  .about-film{padding:64px var(--gutter)}
}
@media (max-width:720px) and (orientation:portrait) and (min-height:520px){
  .ko-world{inset:auto;top:0;left:0;right:0;height:var(--kb,min(100vw,50svh));overflow:hidden}
  .ko-world::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,var(--night) 0%,rgba(var(--night-rgb),.55) 18%,rgba(var(--night-rgb),0) 46%),linear-gradient(180deg,rgba(var(--night-rgb),.6) 0%,rgba(var(--night-rgb),0) 24%)}
  .ko-shade{display:none}
  .ko-copy{top:auto;bottom:clamp(36px,5vh,56px)}
  .ko-knock{inset:auto;top:0;left:0;right:0;height:var(--kb,min(100vw,50svh));overflow:hidden}
}
@media (max-height:540px) and (orientation:landscape){
  .ph{min-height:0}
  .ph-title{font-size:clamp(34px,9vh,64px)}
  .ph-copy{bottom:8vh}
  .ph-log,.ph-cue{display:none}
  .sc-title,.vf-t,.ko-title.ko-line{font-size:clamp(24px,7vh,44px)}
}
@media (prefers-reduced-motion:reduce){
  .vf-rec b{animation:none}
  .reel-card{transition:none}
}