/* A continuous black photographic space, with independently placed objects. */
.stage{position:relative;background:var(--bg)}
.pin{position:sticky;top:0;height:calc(var(--film-vh,1dvh) * 100);height:calc(var(--film-vh,1dvh) * 100);overflow:hidden;isolation:isolate}
#scenes{position:absolute;inset:0;z-index:1;perspective:1800px}
.scene{position:absolute;inset:0;pointer-events:none}
.plate{position:absolute;inset:0;visibility:hidden;perspective:1800px;overflow:visible}
.plate.on,.hero.on,.copy.on{visibility:visible}
.depth-object{position:absolute;display:block;max-width:none;transform-origin:50% 50%;will-change:transform,opacity;pointer-events:none}
.meat{width:min(94vw,1520px);height:min(calc(var(--film-vh,1dvh) * 80),53vw);z-index:2;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.meat-v{position:absolute;inset:0;width:100%;height:100%;-webkit-mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent)}
.meat-v>img,.meat-v>video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.meat .raw{z-index:1}
.herb{width:min(29vw,480px);z-index:4}
.butter{width:min(11vw,170px);z-index:3}
.rear-steam{width:min(40vw,650px);z-index:0}
.dish-light{position:absolute;top:55%;width:48vw;height:calc(var(--film-vh,1dvh) * 55);transform:translate(-50%,-50%);background:radial-gradient(ellipse,rgba(166,95,42,.24),transparent 69%);pointer-events:none}
.glow{position:absolute;inset:-10%;z-index:0;pointer-events:none;background:radial-gradient(38% 45% at var(--gx,65%) 43%,rgba(var(--gc,169,104,58),.10),transparent 75%)}
.vig{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(rgba(9,9,9,.22),transparent 18%),linear-gradient(0deg,rgba(9,9,9,.63),transparent 23%)}
.pin::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.018;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ui{position:absolute;inset:0;z-index:5;pointer-events:none}
.copy{position:absolute;z-index:5;left:var(--gut);bottom:calc(var(--film-vh,1dvh) * 24);width:min(32vw,470px);visibility:hidden;will-change:opacity,transform}
.copy[data-side="left"]{left:auto;right:var(--gut)}
.eyebrow{display:flex;align-items:center;gap:14px;font:400 clamp(.6rem,.72vw,.72rem)/1 var(--sans);letter-spacing:.10em;text-transform:uppercase;color:var(--gold);margin-bottom:22px}
.eyebrow::before{content:"";width:32px;height:1px;background:var(--gold)}
.ttl{font:400 clamp(2rem,4.8vw,4.8rem)/1.08 var(--serif);letter-spacing:0;text-transform:none}
.ttl .ln{display:block;overflow:hidden;padding-bottom:.15em;margin-bottom:-.15em}
.ttl .ln>span{display:block;will-change:transform}
.ttl em{font-style:normal;padding-right:.08em;color:var(--gold-hi);background:linear-gradient(90deg,var(--ivory),var(--gold-hi) 52%,var(--copper));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.line{margin-top:23px;max-width:30ch;color:var(--muted);font-size:clamp(.9rem,1.03vw,1.06rem);line-height:1.7;font-weight:400}
.acts{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap;pointer-events:auto}
.copy[data-interactive="false"] .acts{pointer-events:none}
.copy .btn-line{min-height:44px;padding:0;border:0;background:transparent;box-shadow:none;gap:8px;justify-content:flex-start}
.copy .btn-line:hover{background:transparent;color:var(--gold-hi)}
.copy .btn-line:focus-visible{outline:1px solid var(--gold);outline-offset:7px}
.hero{position:absolute;inset:0;z-index:5;display:grid;place-items:center;align-content:center;gap:28px;text-align:center;visibility:hidden}
.hero>*,.biglogo{animation:none}
.burn{transform-origin:center}
.biglogo{width:min(calc(var(--film-vh,1dvh) * 38),55vw);aspect-ratio:869/1063;background:url(logo-khan.webp?v=o31f) center/contain no-repeat}
.tag{font:400 clamp(22px,2.4vw,34px)/1.2 var(--serif);color:var(--ivory);letter-spacing:0;text-transform:none}
.cue{position:absolute;left:50%;bottom:calc(var(--film-vh,1dvh) * 6);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;font:400 10px/1 var(--sans);letter-spacing:.10em;text-transform:uppercase;color:var(--muted)}
.cue span{width:1px;height:40px;background:linear-gradient(var(--gold),transparent)}
.count{position:absolute;z-index:5;right:var(--gut);bottom:calc(var(--film-vh,1dvh) * 14);display:flex;align-items:flex-start;gap:8px;opacity:0;pointer-events:none;font:400 clamp(3rem,5vw,5rem)/1 var(--num);color:rgba(247,234,215,.24);font-variant-numeric:tabular-nums;font-weight:400}
.count .win{height:1em;overflow:hidden}.count .roll{display:flex;flex-direction:column;will-change:transform}
.count small{font:400 11px/1 var(--sans);letter-spacing:.16em;color:var(--gold);margin-top:.5em}
.chapter-nav{position:absolute;z-index:6;right:var(--gut);bottom:calc(var(--film-vh,1dvh) * 2.5);display:flex;gap:28px;opacity:0;pointer-events:none}
.chapter-nav button{position:relative;min-height:44px;padding:0 3px;border:0;background:none;color:var(--muted);font:400 10px/1 var(--sans);letter-spacing:.10em;text-transform:uppercase;cursor:pointer;pointer-events:auto}
.chapter-nav button::after{content:"";position:absolute;left:3px;right:3px;bottom:6px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.chapter-nav button[aria-current="true"]{color:var(--ivory)}.chapter-nav button[aria-current="true"]::after{transform:scaleX(1)}
.rail{position:absolute;z-index:5;left:var(--gut);right:55%;bottom:calc(var(--film-vh,1dvh) * 5.5);height:1px;background:var(--line);opacity:0;pointer-events:none}
.rail b{position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(var(--p,0))}
.descent-front{position:absolute;inset:0;z-index:3;pointer-events:none;visibility:hidden}
.flight-sprig,.flight-steam{position:absolute;max-width:none;pointer-events:none;will-change:transform,opacity}
.flight-sprig{width:35vw}.flight-steam{width:88vw}
.flight-light{position:absolute;inset:0;background:radial-gradient(ellipse at 49% 44%,rgba(237,187,109,.48),transparent 66%);opacity:0}
.descent-dust{position:absolute;inset:0;z-index:3;pointer-events:none}
.card.has-plated-photo .ph{padding:0;background:var(--bg)}.card.has-plated-photo .ph img{width:100%;height:100%;object-fit:contain;filter:none}
.pilot-label{position:fixed;left:var(--gut);bottom:16px;z-index:11;color:rgba(247,234,215,.44);font:400 9px/1.5 var(--sans);letter-spacing:.10em;text-transform:uppercase;pointer-events:none}
.pilot-label::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--gold);margin:0 7px 2px 0}
.dbg{position:fixed;left:8px;top:90px;z-index:40;font:400 12px/1.4 var(--sans);background:rgba(0,0,0,.8);color:#9f9;padding:6px;white-space:pre;pointer-events:none}
@media(min-width:901px){.ttl .ln>span{white-space:nowrap}}
@media(max-width:900px) and (orientation:portrait){
 #scenes,.plate{perspective:1100px}
 .meat{width:100vw;height:min(calc(var(--film-vh,1dvh) * 42),76vw)}
  .meat-v{-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
 .meat-v>img,.meat-v>video{object-fit:cover;object-position:68% 50%}.scene[data-id="tomahawk"] .meat-v>img,.scene[data-id="tomahawk"] .meat-v>video{object-position:28% 50%}
 .herb{width:55vw}.butter{width:20vw}.rear-steam{width:72vw}
 .copy,.copy[data-side="left"]{left:var(--gut);right:var(--gut);width:auto;bottom:calc(var(--film-vh,1dvh) * 17)}
 .ttl{font-size:clamp(1.8rem,8vw,2.7rem)}
 .eyebrow{font-size:.57rem;letter-spacing:.10em;margin-bottom:17px;font-weight:400}
 .line{font-size:.88rem;line-height:1.65;max-width:34ch;margin-top:19px}
 .acts{margin-top:19px}
 .count{right:var(--gut);bottom:calc(var(--film-vh,1dvh) * 10.5);font-size:2.2rem}
 .count small{font-size:9px;font-weight:400}
 .chapter-nav{left:var(--gut);right:auto;bottom:calc(var(--film-vh,1dvh) * 5);gap:25px}
 .chapter-nav button{font-size:9px;letter-spacing:.10em;font-weight:400}
 .rail{left:var(--gut);right:var(--gut);bottom:calc(var(--film-vh,1dvh) * 11.4)}
 .flight-sprig{width:75vw}.flight-steam{width:150vw}
 .pilot-label{bottom:12px;font-size:8px;font-weight:400}
 .vig{background:linear-gradient(rgba(9,9,9,.20),transparent 20%),linear-gradient(0deg,rgba(9,9,9,.40),transparent 35%)}
}
@media(max-width:900px) and (orientation:portrait){.film-short .copy,.film-short .copy[data-side="left"]{bottom:calc(var(--film-vh,1dvh) * 18)}.film-short .ttl{font-size:clamp(2.2rem,10vw,3rem)}.film-short .line{font-size:.78rem;line-height:1.5;margin-top:14px;font-weight:400}.film-short .eyebrow{margin-bottom:13px}.film-short .acts{margin-top:13px}.film-short .count{display:none}.film-short .rail{bottom:calc(var(--film-vh,1dvh) * 13.2)}
}
@media(max-width:900px) and (orientation:landscape){
 .copy,.copy[data-side="left"]{width:32vw;bottom:calc(var(--film-vh,1dvh) * 22)}
 .ttl{font-size:clamp(1.8rem,calc(var(--film-vh,1dvh) * 8),2.2rem)}.eyebrow{font-size:.5rem;letter-spacing:.10em;margin-bottom:14px;font-weight:400}
 .line{font-size:.73rem;line-height:1.5;margin-top:14px;font-weight:400}.acts{margin-top:14px}
 .count{bottom:calc(var(--film-vh,1dvh) * 15);font-size:2.4rem}.chapter-nav{bottom:calc(var(--film-vh,1dvh) * 2)}.chapter-nav button{font-size:9px;font-weight:400}
 .pilot-label{font-size:8px;bottom:10px;font-weight:400}.rail{bottom:calc(var(--film-vh,1dvh) * 7.2)}.biglogo{width:calc(var(--film-vh,1dvh) * 29)}.tag{font-size:23px}
}
.rm .stage{height:auto!important}.rm .stage>.pin{position:relative;height:auto;overflow:visible}
.rm #scenes{position:relative;perspective:none}.rm .scene{position:relative;padding:70px 0 40px}
.rm .scene[data-id="logo"]{display:none}
.rm .plate{position:relative;height:55vw;min-height:240px;max-height:600px;visibility:visible;perspective:none}
.rm .copy,.rm .copy[data-side="left"]{position:relative;left:auto;right:auto;bottom:auto;width:auto;margin:10px var(--gut) 0;visibility:visible}
.rm .meat{width:min(80vw,860px)}.rm .scene[data-id="tomahawk"] .meat{width:min(90vw,1050px)}
.rm .ttl .ln>span{transform:none!important}.rm .ui,.rm .rail,.rm .count,.rm .chapter-nav,.rm .glow,.rm .vig,.rm .pin::after,.rm .descent-front,.rm .descent-dust{display:none}

/* The video feather follows the native 16:9 image, not a letterboxed outer box.
   A larger calc(var(--film-vh,1dvh) * 92) plate gives ribeye the same visual weight as tomahawk. */

.scene[data-id="ribeye"] .meat{width:max(104vw,calc(var(--film-vh,1dvh) * 184.9));height:auto;aspect-ratio:16/9}
@media(max-width:900px) and (orientation:portrait){.scene[data-id="ribeye"] .meat{width:100vw;height:min(calc(var(--film-vh,1dvh) * 42),76vw);aspect-ratio:auto}}
.rm .scene[data-id="ribeye"] .meat{width:min(80vw,860px);height:auto;aspect-ratio:16/9}

/* Phone: a tall stage while the dish cooks; descent-pilot.js shrinks it up when the title appears. */
@media(max-width:900px) and (orientation:portrait){.meat,.scene[data-id="ribeye"] .meat{height:min(calc(var(--film-vh,1dvh) * 64),150vw)}}
@media(max-width:900px) and (orientation:portrait){.film-short .meat,.film-short .scene[data-id="ribeye"] .meat{height:min(calc(var(--film-vh,1dvh) * 58),140vw)}}

/* Tomahawk is a film now: same plate as the ribeye. */
.scene[data-id="tomahawk"] .meat{width:max(104vw,calc(var(--film-vh,1dvh) * 184.9));height:auto;aspect-ratio:16/9}
.rm .scene[data-id="tomahawk"] .meat{width:min(80vw,860px);height:auto;aspect-ratio:16/9}
@media(max-width:900px) and (orientation:portrait){.scene[data-id="tomahawk"] .meat{width:100vw;height:min(calc(var(--film-vh,1dvh) * 64),150vw);aspect-ratio:auto}}
@media(max-width:900px) and (orientation:portrait){.film-short .scene[data-id="tomahawk"] .meat{height:min(calc(var(--film-vh,1dvh) * 58),140vw)}}
.khan-fx{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;visibility:hidden}
.rm .khan-fx{display:none}