:root{--ink:#0d0d0b;--paper:#ece6d6;--orange:#ff4d00;--dim:rgba(236,230,214,.5);--pad:clamp(16px,2.4vw,40px)}
*{box-sizing:border-box;margin:0;padding:0}
html.lenis{height:auto}.lenis.lenis-smooth{scroll-behavior:auto}
body{background:var(--ink);color:var(--paper);font-family:'Geist',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
em{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400}
.mono{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.dim{color:var(--dim)}
.label{margin-bottom:4vh;opacity:.7}
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}}
.cursor{position:fixed;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--paper);mix-blend-mode:difference;z-index:100;pointer-events:none;transition:width .3s,height .3s,margin .3s;display:none}
.cursor.big{width:80px;height:80px;margin:-40px 0 0 -40px}
@media(hover:hover) and (pointer:fine){.cursor{display:block}body,a{cursor:none}}
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:36px;padding:10px 12px 10px 22px;border-radius:10px;background:rgba(20,20,18,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:13px}
.mark{font-weight:600;letter-spacing:.02em}
.nav-links{display:flex;gap:26px;opacity:.8}.nav-links a:hover{opacity:1;color:var(--orange)}
.pill{border:1px solid var(--orange);color:var(--paper);border-radius:999px;padding:7px 14px;font-family:'Geist Mono';font-size:11px;text-transform:uppercase;letter-spacing:.08em;transition:background .3s}
.pill:hover{background:var(--orange)}
/* loader */
.loader{position:fixed;inset:0;z-index:200;background:var(--ink);display:flex;align-items:flex-end;justify-content:space-between;padding:var(--pad);pointer-events:none}
.ld-n{font-size:clamp(90px,16vw,260px);font-weight:800;letter-spacing:-.06em;line-height:.8}
.ld-l,.ld-r{position:absolute;top:var(--pad)}.ld-l{left:var(--pad)}.ld-r{right:var(--pad)}
.no-js .loader,.loaded .loader{display:none}
/* hero */
.hero{position:relative;height:340vh;height:340svh}
.stage{position:sticky;top:0;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#e2cdb4;color:var(--ink)}
.frame{position:absolute;inset:0;clip-path:inset(var(--ci,0%) var(--cx,0%) var(--ci,0%) var(--cx,0%) round var(--cr,0px));z-index:1}
.frame-top{z-index:3;pointer-events:none}
.media{position:absolute;inset:0;transform:scale(var(--s,1));transform-origin:48% 32%;will-change:transform}
.ph,.ph img{position:absolute;inset:0;width:100%;height:100%;display:block}
.ph img{object-fit:cover;object-position:48% 30%}
.ph-bg::after,.ph-cut::after{content:"";position:absolute;inset:0;background:var(--orange);mix-blend-mode:multiply;opacity:var(--tint,0);transition:opacity .6s}
.ph-cut::after{-webkit-mask:url(img/fig-cut-1280.png) 48% 30%/cover no-repeat;mask:url(img/fig-cut-1280.png) 48% 30%/cover no-repeat}

.ph-bg::before{content:"";position:absolute;inset:0;z-index:1;background:none}
.stage:hover{--tint:.55}
.name{position:absolute;left:var(--pad);right:var(--pad);top:50%;transform:translateY(-46%);z-index:2;font-weight:900;line-height:.8;letter-spacing:-.045em;color:var(--orange);margin:0}
.line{display:block;overflow:hidden;white-space:nowrap;padding-top:.04em}
.w{display:inline-block;font-size:18vw}
.char{display:inline-block;will-change:transform}
.flood{position:absolute;inset:0;z-index:4;background:var(--orange);clip-path:circle(var(--fl,0%) at 48% 32%)}
.hero-meta{position:absolute;left:var(--pad);right:var(--pad);z-index:5;display:flex;justify-content:space-between;gap:20px}
.hero-meta.top{top:84px;opacity:.75}
.hero-meta .scroll i{background:var(--ink)}
.hero-meta .dim{color:rgba(13,13,11,.5)}
.hero-meta.bottom{bottom:var(--pad);align-items:flex-end}
.lead{font-size:clamp(18px,1.9vw,28px);line-height:1.15;font-weight:400}
.scroll{display:flex;align-items:center;gap:10px}
.scroll i{display:block;width:40px;height:1px;background:var(--paper);transform-origin:left;animation:ln 2s ease-in-out infinite}
@keyframes ln{0%{transform:scaleX(0)}50%{transform:scaleX(1)}100%{transform:scaleX(0);transform-origin:right}}
.statement{margin-top:-1px}
/* statement */
.statement{background:var(--orange);color:var(--ink);padding:24vh var(--pad) 26vh;min-height:100vh}
.statement .label{color:var(--ink)}
.big{font-size:clamp(34px,5.6vw,104px);line-height:1;letter-spacing:-.035em;font-weight:500;max-width:15ch}
.big em{letter-spacing:-.01em}
.wd{display:inline-block}
/* horizontal */
.hscroll{background:var(--paper);color:var(--ink);overflow:hidden;padding:12vh 0}
.hs-head{display:flex;justify-content:space-between;padding:0 var(--pad)}
.hs-head .dim{color:rgba(13,13,11,.5)}
.hs-track{display:flex;gap:2vw;padding:0 var(--pad);width:max-content}
.panel{width:min(38vw,560px);height:62vh;min-height:420px;border-top:1px solid var(--ink);padding-top:22px;display:flex;flex-direction:column;justify-content:space-between}
.panel .num{font-family:'Geist Mono';font-size:12px}
.panel h3{font-size:clamp(48px,6.4vw,120px);line-height:.9;letter-spacing:-.045em;font-weight:600}
.panel p{max-width:30ch;font-size:clamp(16px,1.3vw,20px);line-height:1.35;opacity:.75}
/* marquee */
.marquee{padding:14vh 0;overflow:hidden;background:var(--ink)}
.mq-row{display:flex;white-space:nowrap}
.mq{font-size:clamp(64px,12vw,220px);font-weight:600;letter-spacing:-.05em;line-height:1.02;padding-right:.3em;flex-shrink:0}
.mq em{color:var(--orange);letter-spacing:-.02em}
.rev .mq{color:transparent;-webkit-text-stroke:1px var(--dim)}.rev .mq em{-webkit-text-stroke:0;color:var(--paper)}
/* principles */
.principles{display:grid;grid-template-columns:5fr 7fr;gap:4vw;padding:18vh var(--pad);border-top:1px solid rgba(236,230,214,.12)}
.principles h2{font-size:clamp(44px,5.4vw,96px);line-height:.95;letter-spacing:-.04em;font-weight:500;position:sticky;top:14vh}
.p-list{list-style:none}
.p-list li{display:grid;grid-template-columns:60px 1fr;gap:6px 16px;padding:28px 0;border-top:1px solid rgba(236,230,214,.15);transition:padding .4s,color .4s}
.p-list li:hover{padding-left:16px;color:var(--orange)}
.p-list b{font-size:clamp(22px,2.2vw,36px);font-weight:500;letter-spacing:-.02em}
.p-list li>span:last-child{grid-column:2;color:var(--dim);font-size:16px}
/* outro */
.outro{padding:18vh var(--pad) var(--pad);background:var(--ink);border-top:1px solid rgba(236,230,214,.12)}
.outro-big{display:block;font-size:clamp(64px,15vw,300px);line-height:.85;letter-spacing:-.055em;font-weight:800;transition:color .4s}
.outro-big em{display:block;font-weight:400;color:var(--orange);letter-spacing:-.03em}
.outro-big:hover{color:var(--orange)}.outro-big:hover em{color:var(--paper)}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:12vh;padding-top:20px;border-top:1px solid rgba(236,230,214,.15);font-size:14px}
.foot .links{display:flex;gap:28px}.foot a:hover{color:var(--orange)}
/* mobile */
@media(max-width:768px){
 .nav{gap:16px;width:calc(100% - 24px);justify-content:space-between}.nav-links{display:none}
 .hero-meta.top span:nth-child(2){display:none}
 .hero-meta.bottom{flex-direction:column;align-items:flex-start}
 .hs-track{flex-direction:column;width:auto;gap:40px;margin-top:4vh}
 .panel{width:100%;height:auto;min-height:0;gap:40px}
 .principles{grid-template-columns:1fr}.principles h2{position:static}
}
@media(prefers-reduced-motion:reduce){.hero{height:100vh}.loader{display:none}*,*::before,*::after{animation:none!important;transition:none!important}.grain{display:none}}

/* portrait / phone hero */
@media (max-aspect-ratio:1/1){
 .hero-meta.top{top:74px}
 .ph-bg{opacity:0}
 .media{top:96px;bottom:auto;height:calc(100svh - 96px - 150px);min-height:340px;-webkit-mask:linear-gradient(180deg,#000 78%,transparent);mask:linear-gradient(180deg,#000 78%,transparent)}
 .name{top:auto;bottom:calc(var(--pad) + 92px);transform:none;z-index:4}
 .hero-meta.bottom{flex-direction:column;align-items:flex-start;gap:10px}
 .hero-meta.bottom .scroll{display:none}
 .lead{font-size:18px}
}
@media (max-aspect-ratio:1/1) and (min-width:700px){
 .name{bottom:calc(var(--pad) + 110px)}.lead{font-size:24px}
 .media{height:calc(100svh - 96px - 200px)}
}