/* zsomb — darkroom site styles
   Static layout first; everything that moves lives under `.motion` (set in <head>
   only when the visitor hasn't asked for reduced motion) and the motion media query. */
:root{
  --bg:#0E0E0D; --panel:#151513; --panel-2:#1A1A18; --line:#2A2926;
  --text:#ECE8E1; --sub:#C9C4BA; --muted:#9A958C; --acc:#E2582C;
  --ease:cubic-bezier(.16,.84,.24,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  --sans:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --wrap:1600px; --gut:clamp(16px,3.2vw,48px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.55;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
::selection{background:var(--acc);color:var(--bg)}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.k{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0}
.muted{color:var(--muted)} .acc{color:var(--acc)}
.outline{color:transparent;-webkit-text-stroke:1px currentColor;-webkit-text-stroke-color:var(--text)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:400;background:var(--acc);color:var(--bg);padding:10px 16px;font-weight:500;text-decoration:none}
.skip:focus{top:12px}
.uline{text-decoration:none;background:linear-gradient(var(--acc),var(--acc)) 0 100%/0 1px no-repeat;transition:background-size .6s var(--ease),color .3s}
.uline:hover{background-size:100% 1px;color:var(--acc)}
.lede{font-size:clamp(17px,1.3vw,20px);line-height:1.6;color:var(--sub);max-width:460px;margin:0}

/* ——— ambience ——— */
.grain{position:fixed;left:-50%;top:-50%;width:200%;height:200%;pointer-events:none;z-index:90;background:url(/assets/img/grain.png) repeat;background-size:256px;opacity:.06;mix-blend-mode:overlay}
.safelight{position:fixed;right:-18vw;top:-24vw;width:62vw;height:62vw;border-radius:50%;pointer-events:none;z-index:-2;background:radial-gradient(closest-side,rgba(226,88,44,.2),transparent);opacity:.35}
.gl-canvas{position:fixed;left:0;top:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.gl-local{position:absolute;z-index:0}
.has-gl [data-gl]:not(.gl-fail){background:transparent}
.has-gl [data-gl]:not(.gl-fail) img{opacity:0}

/* ——— header ——— */
header.site{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px var(--gut);mix-blend-mode:difference;color:#ECE8E1;transition:transform .7s var(--ease)}
.logo{display:flex;gap:10px;align-items:center;text-decoration:none;font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:8px 0}
.logo b{font-weight:500}
.dot{width:10px;height:10px;border-radius:50%;background:var(--acc);display:inline-block}
.hdr-mid{color:#ECE8E1;opacity:.6}
.hdr-mid .sep{margin:0 .6em}
nav.main{display:flex;gap:4px 28px;font-size:12px}
nav.main a{text-decoration:none;padding:10px 0;position:relative;white-space:nowrap}
nav.main a::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .6s var(--ease)}
nav.main a:hover::after,nav.main a[aria-current="page"]::after{transform:scaleX(1);transform-origin:0 50%}

/* ——— HUD ——— */
.hud{position:fixed;left:var(--gut);right:var(--gut);bottom:16px;z-index:55;display:flex;justify-content:space-between;pointer-events:none;mix-blend-mode:difference;color:#ECE8E1;font-size:11px;transition:opacity .5s}
.hud.off{opacity:0}

/* ——— split text ——— */
.w{display:inline-block;white-space:nowrap}
.c{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em .04em .1em;margin:-.06em -.04em -.1em}
.c>span,.wi{display:inline-block;will-change:transform}
[data-split="words"] .w{overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.fit{display:block;white-space:nowrap;font-size:var(--fs,12vw)}
.fit>span{display:inline-block;white-space:nowrap}
html:not(.js) .fit,html:not(.js) .fit>span{white-space:normal}

/* ——— type ——— */
h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.02em}
.h-xl{font-size:clamp(64px,12vw,210px);line-height:.82;font-weight:700;letter-spacing:-.055em;text-transform:uppercase;display:flex;align-items:flex-start;gap:.12em}
.h-xl sup{font-size:clamp(12px,1vw,14px);letter-spacing:.08em;margin-top:.6em}
.sec-head{display:grid;grid-template-columns:1fr auto;gap:28px 40px;align-items:end;padding-top:clamp(96px,14vw,200px);padding-bottom:clamp(40px,6vw,80px)}
.sec-head .k{grid-column:1/-1}
.sec-head .lede{max-width:300px}

/* ——— hero ——— */
.hero{position:relative;height:100svh;min-height:560px}
.hero-pin{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;display:grid;place-items:center;isolation:isolate}
.hero-title{position:absolute;inset:0;margin:0;z-index:3;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:76px var(--gut) 54px;font-weight:700;text-transform:uppercase;letter-spacing:-.055em;line-height:.8;color:#ECE8E1;mix-blend-mode:difference}
.ht-group{display:block;will-change:transform}
.ht-bot{text-align:right}
.ht-m{display:none}
.tf-m{display:none}
.rolls-sec:not(.is-pinned) .tf-d{display:none}
.rolls-sec:not(.is-pinned) .tf-m{display:inline}
.hero-media{position:relative;z-index:1;width:min(34vw,60svh);aspect-ratio:3/2;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-side{position:absolute;z-index:3;left:var(--gut);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:4px;font-size:11px;mix-blend-mode:difference;color:#ECE8E1}
.hero-cap{position:absolute;z-index:3;right:var(--gut);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:4px;font-size:11px;text-align:right;mix-blend-mode:difference;color:#ECE8E1}
.hero-scroll{display:flex;align-items:center;gap:10px;margin-top:22px;color:var(--acc)}
.hero-scroll i{width:1px;height:38px;background:linear-gradient(var(--acc),transparent);transform-origin:50% 0}

/* ——— intro ——— */
.intro{padding-top:clamp(96px,14vw,200px);padding-bottom:clamp(64px,10vw,140px);display:flex;flex-direction:column;gap:clamp(28px,4vw,48px)}
.intro-text{margin:0;font-size:clamp(30px,4.6vw,76px);line-height:1.04;font-weight:500;letter-spacing:-.035em;max-width:16ch;text-indent:2.4em}
.intro-text{max-width:24ch}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:24px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.stats dt{color:var(--muted);margin-bottom:8px}.stats dd{margin:0;font-size:13px}
.stats dd[data-count]{font-family:var(--sans);font-size:clamp(40px,5vw,72px);font-weight:700;letter-spacing:-.04em;line-height:1}

/* ——— rolls track ——— */
.rolls-sec{position:relative}
.track-pin{position:relative;display:flex;flex-direction:column;gap:clamp(24px,4vh,48px);padding:clamp(80px,10vw,140px) 0 60px;overflow:hidden}
.track-bg{position:absolute;left:0;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:42vh;font-weight:700;letter-spacing:-.06em;line-height:.8;text-transform:uppercase;opacity:.18;pointer-events:none;z-index:-1;display:none}
.track-bg .outline{-webkit-text-stroke-color:var(--muted)}
.track-head{width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.track-rail{display:flex;gap:clamp(24px,5vw,96px);padding:0 var(--gut);align-items:flex-end;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.track-rail::-webkit-scrollbar{display:none}
.rp{flex:0 0 auto;display:flex;flex-direction:column;gap:18px;text-decoration:none;scroll-snap-align:start}
.rp-media{height:min(52vh,560px);aspect-ratio:var(--ar);overflow:hidden;background:#0A0A09;position:relative}
.rp-media img{width:100%;height:100%;object-fit:cover}
.rp-info{display:flex;gap:20px;align-items:flex-start;max-width:min(52vh * 1.5,720px)}
.rp-num{font-size:clamp(56px,6vw,104px);font-weight:700;line-height:.75;letter-spacing:-.05em;transition:color .6s var(--ease)}
.rp:hover .rp-num{color:var(--acc);-webkit-text-stroke-color:var(--acc)}
.rp-text{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.rp-title{font-size:clamp(24px,2.4vw,38px);font-weight:500;letter-spacing:-.03em;line-height:1}
.rp-line{margin:0;color:var(--sub);font-size:16px}
.rp-thumbs{display:flex;gap:6px}
.rp-th{width:44px;height:58px;overflow:hidden;background:#0A0A09;transform:translateY(8px);opacity:0;transition:transform .6s var(--ease),opacity .6s var(--ease)}
.rp-th:nth-child(2){transition-delay:.06s}.rp-th:nth-child(3){transition-delay:.12s}
.rp-th img{width:100%;height:100%;object-fit:cover}
.rp:hover .rp-th,.rp:focus-visible .rp-th{transform:none;opacity:1}
.rp-end{justify-content:flex-end;gap:20px;width:min(36vw,440px);min-width:260px;height:min(52vh,560px);padding:32px;border:1px solid var(--line);align-self:flex-start}
.rp-end-t{margin:0;font-size:clamp(36px,4vw,64px);line-height:.95;font-weight:700;letter-spacing:-.045em}
.track-foot{width:100%;display:flex;align-items:center;gap:24px}
.track-bar{flex:1;height:1px;background:var(--line);position:relative;overflow:hidden}
.track-bar i{position:absolute;inset:0;background:var(--acc);transform-origin:0 50%;transform:scaleX(var(--tp,0))}

/* pinned (desktop + motion): vertical scroll drives the rail sideways */
.rolls-sec.is-pinned .track-pin{position:sticky;top:0;height:100svh;justify-content:center;padding:70px 0 64px}
.rolls-sec.is-pinned .track-rail{overflow:visible;width:max-content;scroll-snap-type:none;will-change:transform}
.rolls-sec.is-pinned .track-bg{display:block}

/* ——— loose frames collage ——— */
.collage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,32px);padding-bottom:clamp(96px,14vw,200px);align-items:start}
.cl{display:flex;flex-direction:column;gap:12px;text-decoration:none}
.cl-media{overflow:hidden;background:#0A0A09}
.cl-media img{width:100%;height:100%;object-fit:cover}
.cl-cap{color:var(--muted);font-size:11px;transition:color .4s}
.cl:hover .cl-cap{color:var(--text)}
.cl-1{grid-column:1/8}
.cl-2{grid-column:9/12;margin-top:18vw}
.cl-3{grid-column:2/5;margin-top:-6vw}
.cl-4{grid-column:6/10;margin-top:8vw}
.cl-5{grid-column:10/13;margin-top:-4vw}

/* ——— manifesto ——— */
.manifesto{padding-top:clamp(80px,10vw,160px);padding-bottom:clamp(96px,12vw,180px);display:flex;flex-direction:column;gap:clamp(28px,4vw,56px);border-top:1px solid var(--line)}
.mf-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,26vw);gap:clamp(32px,6vw,120px);align-items:center}
.mf-quote{margin:0;font-size:clamp(30px,4vw,68px);line-height:1.06;font-weight:500;letter-spacing:-.035em}
.mf-media{display:block;text-decoration:none}
.mf-img{overflow:hidden;background:#0A0A09}
.mf-img img{width:100%;height:100%;object-fit:cover}
.link-more{align-self:flex-start;font-size:13px;padding:12px 0}
.mf-after{max-width:560px}

/* scrub text: words light up as you scroll */
.sw{transition:opacity .5s var(--ease),color .5s}

/* ——— buttons ——— */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;background:var(--acc);color:var(--bg);font-family:var(--sans);font-size:17px;font-weight:500;text-decoration:none;border:0;cursor:pointer;transition:transform .35s var(--ease),box-shadow .35s var(--ease),filter .3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 40px -10px var(--acc);filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--acc);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.orb{--s:clamp(150px,14vw,210px);position:relative;flex:0 0 auto;width:var(--s);height:var(--s);border-radius:50%;background:var(--acc);color:var(--bg);display:grid;place-items:center;text-decoration:none;font-size:clamp(18px,1.5vw,22px);font-weight:500;line-height:1.1;text-align:center;border:0;cursor:pointer;overflow:hidden;isolation:isolate}
.orb::before{content:'';position:absolute;inset:0;border-radius:50%;background:var(--text);transform:translateY(101%);transition:transform .7s var(--ease);z-index:-1}
.orb:hover::before,.orb:focus-visible::before{transform:none}
.orb-in{display:block;pointer-events:none}
.orb-sm{--s:clamp(110px,9vw,140px);font-size:17px}

/* ——— footer ——— */
footer.site{position:relative;background:var(--panel);border-top:1px solid var(--line);overflow:hidden}
.f-cta{padding-top:clamp(72px,9vw,140px);display:flex;flex-direction:column;gap:clamp(24px,3vw,40px)}
.f-marquee{display:block;overflow:hidden;text-decoration:none;white-space:nowrap;font-size:clamp(56px,10vw,180px);font-weight:700;letter-spacing:-.05em;line-height:.95;text-transform:uppercase;padding:.04em 0 .08em}
.mq-track{display:inline-flex;will-change:transform}
.mq-item{padding-right:.3em;display:inline-flex;align-items:center;gap:.3em}
.mq-star{font-style:normal;color:var(--acc);font-size:.5em;display:inline-block}
.f-marquee:hover .outline{color:var(--acc);-webkit-text-stroke-color:var(--acc)}
.f-row{display:flex;flex-wrap:wrap;align-items:center;gap:40px clamp(40px,8vw,140px);padding-top:16px;padding-bottom:clamp(40px,6vw,80px)}
.f-cols{display:grid;grid-template-columns:repeat(3,auto);gap:24px clamp(32px,5vw,80px);margin:0}
.f-cols dt{margin-bottom:8px}.f-cols dd{margin:0;font-size:18px}
.f-mark{line-height:.74;font-weight:700;letter-spacing:-.06em;text-transform:lowercase;color:var(--bg);-webkit-text-stroke:1px var(--line);padding:0 var(--gut);margin-bottom:-.1em;user-select:none}
.f-mark .fit{font-size:var(--fs,29vw)}
.f-legal{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;padding-top:20px;padding-bottom:22px;border-top:1px solid var(--line);color:var(--muted);position:relative;background:var(--panel)}
.f-legal a{text-decoration:none}
body:has(.ct) .f-mark,body:has(.nf) .f-mark{margin-top:clamp(40px,6vw,80px)}

/* ——— shutter (page transition) ——— */
.shutter{position:fixed;inset:0;z-index:150;pointer-events:none;display:flex}
.shutter i{flex:1;height:100%;background:#0A0A09;transform:scaleY(0);transform-origin:50% 0;border-right:1px solid #151513}
.shutter-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--text);opacity:0;white-space:nowrap}
.is-leaving .shutter,.is-entering .shutter{pointer-events:auto}
.is-leaving .shutter i,.is-entering .shutter i{transform:scaleY(1);transform-origin:50% 100%}
.is-leaving .shutter-label,.is-entering .shutter-label{opacity:1}
.is-entering .shutter{animation:failsafe 0s 3s forwards}

/* ——— loader (first visit): film-leader countdown ——— */
.loader{display:none}
.is-first .loader{position:fixed;inset:0;z-index:200;background:#0A0A09;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;animation:failsafe 0s 7s forwards}
.ld-leader{position:relative;width:min(44vmin,320px);aspect-ratio:1;display:grid;place-items:center}
.ld-svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#3A3833;stroke-width:1}
.ld-sweep{position:absolute;inset:4%;border-radius:50%;background:conic-gradient(from 0deg,rgba(226,88,44,.55) var(--a,0deg),transparent 0)}
.ld-num{position:relative;font-size:min(22vmin,160px);font-weight:700;letter-spacing:-.05em;line-height:1}
.ld-row{width:min(44vmin,320px);display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:10px}
.ld-bar{width:min(44vmin,320px);height:1px;background:#2A2926;position:relative;overflow:hidden}
.ld-bar i{position:absolute;inset:0;background:var(--acc);transform-origin:0 50%;transform:scaleX(0)}
.loader.out{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease-io)}
.loader.out .ld-leader{transform:scale(.9) translateY(-40px);opacity:0;transition:transform 1s var(--ease-io),opacity .6s}

/* ——— cursor ——— */
.cur-dot,.cur-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:300;opacity:0;transition:opacity .3s}
.cur-dot{width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff;mix-blend-mode:difference}
.cur-ring{width:0;height:0}
.cur-ring>i{position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;border:1px solid rgba(236,232,225,.45);transform:translate(-50%,-50%);display:grid;place-items:center;transition:width .55s var(--ease),height .55s var(--ease),background-color .4s,border-color .4s}
.cur-label{font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--bg);opacity:0;transform:scale(.6);transition:opacity .3s,transform .5s var(--ease);white-space:nowrap}
.cursor-on .cur-dot,.cursor-on .cur-ring{opacity:1}
.cur-ring.is-link>i{width:62px;height:62px;border-color:var(--acc)}
.cur-ring.is-label>i{width:104px;height:104px;background:var(--acc);border-color:var(--acc)}
.cur-ring.is-label .cur-label{opacity:1;transform:none}
.cur-dot.is-label{opacity:0}
.cur-ring.is-down>i{width:30px;height:30px}
.cur-ring.is-text>i{opacity:0}
html.has-cursor,html.has-cursor *{cursor:none!important}
html.has-cursor input,html.has-cursor textarea{cursor:text!important}

/* ——— roll page ——— */
.rh{padding-top:100px;padding-bottom:clamp(40px,5vw,64px)}
.rh-top{display:flex;justify-content:space-between;gap:16px;color:var(--muted)}
.rh-top a{text-decoration:none;padding:10px 0}
.rh-title{margin:clamp(16px,3vw,40px) 0 0;font-weight:700;letter-spacing:-.055em;line-height:.84;text-transform:uppercase}
.rh-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:32px clamp(40px,6vw,120px);margin-top:clamp(28px,4vw,56px);align-items:end}
.facts{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding-top:16px;border-top:1px solid var(--line)}
.facts dt{color:var(--muted);margin-bottom:6px}.facts dd{margin:0}
.contact-strip{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0B0B0A;padding:14px 0;position:relative}
.contact-strip::before,.contact-strip::after{content:'';position:absolute;left:0;right:0;height:8px;background-image:repeating-linear-gradient(90deg,#1A1A18 0 12px,transparent 12px 26px);z-index:1;pointer-events:none}
.contact-strip::before{top:3px}.contact-strip::after{bottom:3px}
.contact-strip .mq-track{display:flex}
.cs-set{display:flex;gap:10px;padding-right:10px}
.cs-th{position:relative;flex:0 0 auto;height:clamp(84px,9vw,128px);padding:0;border:0;background:#0A0A09;cursor:pointer;overflow:hidden}
.cs-th img{height:100%;width:auto;filter:grayscale(.6) brightness(.7);transition:filter .6s var(--ease),transform .8s var(--ease)}
.cs-th span{position:absolute;left:5px;bottom:4px;font-size:10px;background:rgba(14,14,13,.7);padding:1px 5px}
.cs-th:hover img,.cs-th:focus-visible img{filter:none;transform:scale(1.06)}
.seq{display:flex;flex-direction:column;gap:clamp(56px,9vw,140px);padding-top:clamp(64px,9vw,140px);padding-bottom:clamp(96px,12vw,180px)}
.row{display:grid;gap:clamp(16px,3vw,48px)}
.row.c2{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 4vw}
.row.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.row.single{max-width:640px;margin:0 auto;width:100%}
.row.wide{margin:0 calc(var(--gut) * -1)}
.row.wide .fig figcaption{padding:0 var(--gut)}
.row.c2 .fig:nth-child(2){margin-top:clamp(60px,12vw,200px)}
.row.c2.flip .fig:nth-child(1){margin-top:clamp(40px,8vw,140px)}.row.c2.flip .fig:nth-child(2){margin-top:0}
.row.c3 .fig:nth-child(2){margin-top:clamp(30px,5vw,80px)}
.fig{margin:0}
.fig-media{display:block;overflow:hidden;background:#0A0A09}
.fig-media img{width:100%;height:100%;object-fit:cover}
.fig figcaption{margin-top:14px;display:flex;justify-content:space-between;gap:16px;color:var(--sub)}
.seq-quote{margin:0 auto;max-width:18ch;text-align:center;font-size:clamp(30px,4.4vw,72px);line-height:1.04;font-weight:500;letter-spacing:-.035em}
.next{display:block;position:relative;text-decoration:none;border-top:1px solid var(--line);padding:clamp(56px,7vw,100px) 0 clamp(40px,5vw,72px);overflow:hidden}
.next-k{display:block;margin-bottom:clamp(16px,2vw,32px)}
.next-title{position:relative;z-index:2;padding:0 var(--gut);font-weight:700;text-transform:uppercase;letter-spacing:-.055em;line-height:.84;mix-blend-mode:difference;color:#ECE8E1;pointer-events:none}
.next-media{position:absolute;z-index:1;right:12vw;top:50%;height:62%;aspect-ratio:var(--ar);transform:translateY(-42%);overflow:hidden;background:#0A0A09;transition:transform 1s var(--ease)}
.next-media img{width:100%;height:100%;object-fit:cover}
.next:hover .next-media{transform:translateY(-48%) scale(1.05)}

/* ——— lightbox ——— */
.lb{position:fixed;inset:0;z-index:120;background:#080807;display:none;flex-direction:column;color:var(--text)}
.lb.open{display:flex}
.lb-top{height:64px;flex:0 0 64px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--gut);border-bottom:1px solid var(--line)}
.lb-main{flex:1;min-height:0;display:flex}
.lb-stage{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:clamp(10px,2vw,28px)}
.lb-big{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:min(52vh,40vw);font-weight:700;letter-spacing:-.06em;line-height:1;opacity:.14;pointer-events:none}
.lb-big.outline{-webkit-text-stroke-color:var(--muted)}
.lb-stack{position:relative;flex:1;min-width:0;height:100%;overflow:hidden}
.lb-stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;visibility:hidden}
.lb-stack img.on{opacity:1;visibility:visible}
.lb.flipping .lb-stack img{visibility:hidden}
.lb-nav{position:relative;z-index:2;width:56px;height:56px;flex:0 0 56px;background:transparent;border:1px solid var(--line);border-radius:50%;color:var(--text);font-size:20px;cursor:pointer;transition:border-color .3s,color .3s,background-color .3s}
.lb-nav:hover{border-color:var(--acc);background:var(--acc);color:var(--bg)}
.lb-close{background:none;border:0;color:var(--text);cursor:pointer;padding:12px 0}
.lb-side{width:340px;flex:0 0 340px;border-left:1px solid var(--line);padding:32px 28px;display:flex;flex-direction:column;gap:24px;overflow:auto}
.lb-side h2{font-size:34px;line-height:1.05;letter-spacing:-.03em}
.lb-meta{margin:0;display:flex;flex-direction:column;gap:14px}
.lb-meta div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:12px}
.lb-meta dt{color:var(--muted)}.lb-meta dd{margin:0;text-align:right}
.lb-prog{height:2px;background:var(--line);position:relative;overflow:hidden}
.lb-prog i{position:absolute;left:0;top:0;bottom:0;background:var(--acc);transition:width .7s var(--ease)}
.lb-side .btn{margin-top:auto}
.lb-strip{flex:0 0 96px;height:96px;border-top:1px solid var(--line);background:#0F0F0E;display:flex;gap:8px;align-items:center;padding:10px var(--gut);overflow-x:auto;scrollbar-width:thin}
.lb-strip button{flex:0 0 auto;width:72px;height:72px;padding:0;background:#080807;border:2px solid transparent;opacity:.45;cursor:pointer;transition:opacity .4s,border-color .4s,transform .4s var(--ease)}
.lb-strip button:hover{opacity:1;transform:translateY(-3px)}
.lb-strip button[aria-current="true"]{border-color:var(--acc);opacity:1}
.lb-strip img{width:100%;height:100%;object-fit:cover}
.lb-ghost{position:fixed;z-index:130;object-fit:cover;pointer-events:none}
html.lb-open,html.lb-open body{overflow:hidden}

/* ——— about ——— */
.ab-hero{padding-top:110px;padding-bottom:clamp(80px,10vw,160px)}
.ab-title{margin:clamp(12px,2vw,24px) 0 clamp(40px,6vw,96px);font-weight:700;letter-spacing:-.055em;line-height:.84;text-transform:uppercase}
.ab-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(40px,8vw,160px);align-items:start}
.ab-fig{margin:0}
.ab-media{overflow:hidden;background:#0A0A09}
.ab-media img{width:100%;height:100%;object-fit:cover}
.ab-fig figcaption{margin-top:14px;color:var(--muted)}
.ab-body{display:flex;flex-direction:column;gap:clamp(28px,4vw,48px);padding-top:4vw}
.ab-lead{margin:0;font-size:clamp(34px,4.4vw,72px);line-height:1;font-weight:500;letter-spacing:-.04em}
.prose{display:flex;flex-direction:column;gap:22px;font-size:clamp(17px,1.25vw,19px);line-height:1.65;color:var(--sub);max-width:600px}
.prose p{margin:0}
.steps-sec{padding-bottom:clamp(80px,10vw,160px);display:flex;flex-direction:column;gap:32px}
.steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.step{position:relative;display:grid;grid-template-columns:minmax(120px,.5fr) minmax(0,1fr) minmax(0,1fr);gap:16px clamp(24px,4vw,64px);align-items:baseline;padding:clamp(28px,4vw,56px) 0;border-bottom:1px solid var(--line);overflow:hidden}
.step::before{content:'';position:absolute;inset:0;background:var(--acc);transform:scaleY(0);transform-origin:50% 100%;transition:transform .7s var(--ease);z-index:-1}
.step:hover::before{transform:scaleY(1)}
.step:hover,.step:hover .step-k,.step:hover .step-d{color:var(--bg)}
.step:hover .step-n{-webkit-text-stroke-color:var(--bg)}
.step-n{grid-row:1/3;font-size:clamp(72px,9vw,150px);font-weight:700;letter-spacing:-.06em;line-height:.8;transition:-webkit-text-stroke-color .4s}
.step-k{grid-column:2;transition:color .4s}
.step-h{grid-column:2;font-size:clamp(22px,2.2vw,34px);font-weight:500;letter-spacing:-.025em;line-height:1.1}
.step-d{grid-column:3;grid-row:1/3;color:var(--sub);align-self:center;transition:color .4s}

/* ——— contact ——— */
.ct{padding-top:110px;padding-bottom:clamp(64px,8vw,120px)}
.ct-title{margin:clamp(12px,2vw,24px) 0 clamp(40px,6vw,96px);font-weight:700;letter-spacing:-.055em;line-height:.84;text-transform:uppercase;display:flex;flex-direction:column}
.ct-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.7fr);gap:clamp(40px,8vw,140px);align-items:start}
form.cf{display:flex;flex-direction:column;gap:36px}
fieldset{border:0;margin:0;padding:0}
legend{padding:0;margin-bottom:14px}
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{min-height:46px;padding:0 20px;font-family:var(--sans);font-size:16px;cursor:pointer;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text);transition:background-color .35s var(--ease),color .35s,border-color .35s,transform .2s}
.pill:hover{border-color:var(--text)}
.pill[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--bg)}
.pill:active{transform:scale(.96)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
.field{display:flex;flex-direction:column;gap:6px;position:relative}
.field input,.field textarea{min-height:56px;padding:10px 0;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--text);font:inherit;font-size:clamp(20px,1.8vw,28px);letter-spacing:-.02em;border-radius:0;transition:border-color .4s}
.field textarea{min-height:140px;resize:vertical;line-height:1.35}
.field input::placeholder,.field textarea::placeholder{color:#55524C}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--acc)}
.field input:focus-visible,.field textarea:focus-visible{outline:none;box-shadow:0 2px 0 0 var(--acc)}
.cf-send{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.form-note{min-height:1.5em;color:var(--sub);margin:0;flex:1}
.hp{position:absolute;left:-9999px}
.ct-side{display:flex;flex-direction:column;gap:40px}
.ct-fig{margin:0}
.ct-media{overflow:hidden;background:#0A0A09}
.ct-media img{width:100%;height:100%;object-fit:cover}
.ct-fig figcaption{margin-top:12px;color:var(--muted)}
.ct-links{margin:0;display:flex;flex-direction:column;gap:20px}
.ct-links dt{margin-bottom:6px}.ct-links dd{margin:0;font-size:18px}

/* ——— 404 ——— */
.nf{min-height:86vh;display:flex;flex-direction:column;justify-content:center;gap:32px;padding-top:110px;padding-bottom:60px}
.nf-title{font-weight:700;letter-spacing:-.055em;line-height:.84;text-transform:uppercase}

/* ——— responsive ——— */
@media (max-width:1100px){
  .hdr-mid{display:none}
  .step{grid-template-columns:auto minmax(0,1fr)}
  .step-d{grid-column:2;grid-row:auto}
}
@media (max-width:900px){
  .lb-side{display:none}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .collage{grid-template-columns:repeat(2,minmax(0,1fr))}
  .collage .cl{grid-column:auto;margin-top:0}
  .collage .cl-1{grid-column:1/-1}
  .collage .cl:nth-child(even){margin-top:12vw}
  .mf-grid,.ab-grid,.ct-grid,.rh-row{grid-template-columns:1fr}
  .mf-media{max-width:60%;justify-self:end}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-side,.hero-cap{display:none}
  .hero-media{width:72vw;aspect-ratio:4/5}
  .rp-media{height:auto;width:78vw;aspect-ratio:4/5}
  .rp-info{max-width:78vw}
  .rp-thumbs{display:none}
  .rp-end{width:78vw;height:auto;aspect-ratio:4/5}
  .next-media{right:var(--gut);height:50%}
  .f-cols{grid-template-columns:1fr 1fr}
  .hud{display:none}
  .sec-head{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  header.site{padding-top:14px;padding-bottom:14px}
  nav.main{gap:4px 16px;font-size:11px}
  .hdr-ig{display:none}
  .ht-d{display:none}
  .ht-m{display:block}
  .hero-title{padding-top:66px;padding-bottom:28px}
  .row.c2{padding:0}
  .row.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .row.c3 .fig:nth-child(3){grid-column:1/-1}
  .row.c3 .fig:nth-child(2){margin-top:0}
  .fields{grid-template-columns:1fr}
  .lb-nav{display:none}
  .lb-stage{padding:8px}
  .f-cols{grid-template-columns:1fr}
  .intro-text{text-indent:0}
}

/* ——— motion ——— */
@media (prefers-reduced-motion:no-preference){
  html:not(.smooth){scroll-behavior:smooth}
  .grain{animation:grain .9s steps(6) infinite}
  .safelight{animation:breathe 9s ease-in-out infinite alternate}
  .dot{animation:pulse 2.4s ease-in-out infinite}
  .blink{animation:blink 1.2s steps(2) infinite}
  .hero-scroll i{animation:drip 2s var(--ease-io) infinite}
  .hdr-hidden header.site{transform:translateY(-110%)}

  /* hero: pinned while the photo grows to fill the screen */
  .motion .hero{height:260vh}
  .motion .hero-media{width:calc(var(--w0) + (100vw - var(--w0)) * var(--e,0));height:calc(var(--h0) + (100svh - var(--h0)) * var(--e,0));aspect-ratio:auto;--w0:min(34vw,60svh);--h0:calc(var(--w0) / 1.5)}
  .motion .ht-top{transform:translate3d(calc(var(--e,0) * -18vw),calc(var(--e,0) * -6vh),0)}
  .motion .ht-bot{transform:translate3d(calc(var(--e,0) * 18vw),calc(var(--e,0) * 6vh),0)}
  .motion .hero-side{transform:translate3d(calc(var(--e,0) * -40px),-50%,0);opacity:calc(1 - var(--e,0) * 2)}
  .motion .hero-cap{transform:translate3d(calc(var(--e,0) * 40px),-50%,0);opacity:calc(1 - var(--e,0) * 2)}
  .motion .hero-scroll{opacity:calc(1 - var(--e,0) * 4)}
  @media (max-width:900px){.motion .hero-media{--w0:72vw;--h0:90vw}}

  /* split text rises in, char by char */
  .motion .is-split:not(.in) .c>span{transform:translate3d(0,112%,0) rotate(8deg)}
  .motion .is-split .c>span{transition:transform 1.25s var(--ease) calc(var(--i) * 28ms + var(--d,0ms))}
  .motion .is-split:not(.in) .wi{transform:translate3d(0,105%,0)}
  .motion .is-split .wi{transition:transform 1.1s var(--ease) calc(var(--i) * 45ms + var(--d,0ms))}

  /* generic reveal */
  .motion [data-reveal]{transition:opacity 1.1s var(--ease) var(--d,0ms),transform 1.2s var(--ease) var(--d,0ms)}
  .motion [data-reveal]:not(.in){opacity:0;transform:translate3d(0,48px,0)}

  /* photos without WebGL (phones, tablets): wipe up + settle */
  .motion:not(.has-gl) [data-gl]{transition:clip-path 1.5s var(--ease-io)}
  .motion:not(.has-gl) [data-gl] img{transition:transform 2s var(--ease)}
  .motion:not(.has-gl) [data-gl]:not(.in){clip-path:inset(100% 0 0 0)}
  .motion:not(.has-gl) [data-gl]:not(.in) img{transform:scale(1.3)}
  .motion:not(.has-gl) .fig-media img,.motion:not(.has-gl) .cl-media img,.motion:not(.has-gl) .rp-media img{transition:transform 2s var(--ease)}

  /* scrub text */
  .motion [data-scrub] .sw{opacity:.16}
  .motion [data-scrub] .sw.lit{opacity:1}

  /* shutter transitions */
  .motion .shutter i{transition:transform .75s var(--ease-io) calc(var(--i) * 45ms)}
  .motion .shutter-label{transition:opacity .4s}
  .motion.is-entering .shutter i{transition:none}
  .motion.is-opening .shutter i{transform-origin:50% 0}

  .lb.open{animation:lb-in .6s var(--ease) both}
  .lb.open .lb-top,.lb.open .lb-side,.lb.open .lb-strip{animation:rise .9s var(--ease) .15s both}
  .lb-stack img.on{animation:wipe-next 1s var(--ease-io) both}
  .lb[data-dir="prev"] .lb-stack img.on{animation-name:wipe-prev}
  .lb.burst .lb-big{animation:big-swap .8s var(--ease) both}
}
@keyframes grain{0%{transform:translate(0,0)}17%{transform:translate(-4%,3%)}33%{transform:translate(3%,-5%)}50%{transform:translate(-6%,-2%)}67%{transform:translate(5%,4%)}83%{transform:translate(-2%,6%)}100%{transform:translate(0,0)}}
@keyframes breathe{0%{opacity:.18;transform:scale(.92)}100%{opacity:.5;transform:scale(1.06)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(226,88,44,.6)}50%{box-shadow:0 0 0 7px rgba(226,88,44,0)}}
@keyframes blink{50%{opacity:.35}}
@keyframes drip{0%{transform:scaleY(0);transform-origin:50% 0}45%{transform:scaleY(1);transform-origin:50% 0}55%{transform:scaleY(1);transform-origin:50% 100%}100%{transform:scaleY(0);transform-origin:50% 100%}}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes lb-in{from{opacity:0}to{opacity:1}}
@keyframes wipe-next{from{clip-path:inset(0 0 0 100%);transform:scale(1.08)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes wipe-prev{from{clip-path:inset(0 100% 0 0);transform:scale(1.08)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes big-swap{from{opacity:0;transform:translate(-50%,-40%)}to{opacity:.14;transform:translate(-50%,-50%)}}
@keyframes failsafe{to{visibility:hidden;opacity:0}}
