
:root{--bg:#0C0B0B;--bg2:#141211;--tx:#ECE7E0;--tx2:#B3ABA2;--mut:#8E867E;--acc:#C2A27F;--rule:rgba(236,231,224,.85);--hair:rgba(236,231,224,.14);--btn-tx:#16120F;--card:#1A1715}
body{background:var(--bg);color:var(--tx);font-family:var(--serif);font-size:clamp(16.5px,.4vw + 13px,18.5px);line-height:1.7}
::selection{background:var(--acc);color:#111}
a:focus-visible,button:focus-visible{outline-color:var(--acc)}
.wrap{max-width:1320px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border:1px solid var(--acc);transition:.3s var(--ease);white-space:nowrap}
.btn--solid{background:var(--acc);color:var(--btn-tx)}.btn--solid:hover{filter:brightness(1.08)}
.btn--ghost{color:var(--tx);border-color:var(--hair)}.btn--ghost:hover{border-color:var(--tx)}
.btn--ghost[href^="mailto:sk"]{text-transform:none;letter-spacing:.04em;font-size:14px;font-weight:400}
.kick{font:500 11.5px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--acc);margin-bottom:16px}
.h2{font:400 clamp(30px,2.6vw + 12px,52px)/1.08 var(--display);letter-spacing:-.01em;text-wrap:balance;max-width:900px}
.stand{margin-top:18px;font-size:clamp(17.5px,.4vw + 15px,21px);font-style:italic;color:var(--tx2);max-width:720px}
.sec{padding:clamp(80px,9vw,130px) 0;border-top:1px solid var(--hair)}
.sec--alt{background:var(--bg2)}
.sec-head{border-top:3px double var(--rule);padding-top:22px;max-width:none}
.pills{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--hair)}
.pill{padding:26px 28px 6px 0}.pill+.pill{padding-left:28px;border-left:1px solid var(--hair)}
.pill h3{font:700 14px var(--serif);letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.pill p{color:var(--tx2);font-size:16.5px}
.work{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.wk-fig{aspect-ratio:16/10;overflow:hidden;background:var(--card);border:1px solid var(--hair)}
.wk-fig img{transition:transform 1.2s var(--ease)}.wk:hover .wk-fig img{transform:scale(1.03)}
.wk-notes{display:flex;align-items:center;justify-content:center;gap:12px;background:radial-gradient(ellipse at 50% 120%,rgba(194,162,127,.18),transparent 60%),var(--card)}
.mini{width:27%;aspect-ratio:3/4;display:flex;align-items:flex-end;padding:10px;font:400 clamp(14px,1.2vw,20px) var(--display);color:var(--tx);border:1px solid var(--acc);background:linear-gradient(180deg,rgba(194,162,127,.08),transparent)}
.mini:nth-child(2){transform:translateY(-10px)}
.wk h3{margin-top:18px;font:400 clamp(21px,.7vw + 16px,25px) var(--display)}
.wk p{margin-top:6px;color:var(--tx2);font-size:16px}
.cap{margin-top:22px;font:12.5px/1.5 var(--sans);color:var(--mut)}
.notes{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px)}
.note{position:relative;aspect-ratio:3/4;border:1px solid var(--acc);padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;background:linear-gradient(160deg,rgba(194,162,127,.10),rgba(194,162,127,0) 55%),var(--card);overflow:hidden}
.note::after{content:"";position:absolute;inset:10px;border:1px solid rgba(194,162,127,.22);pointer-events:none}
.note-k{font:500 11px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--acc)}
.note-t{margin-top:auto;font:400 clamp(56px,6vw,96px)/.9 var(--display);letter-spacing:-.02em}
.note-n{margin-top:12px;font:400 clamp(19px,.6vw + 15px,23px) var(--serif)}
.note-s{margin-top:14px;padding-top:12px;border-top:1px solid var(--hair);font:400 12px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--tx2)}
.about{display:grid;grid-template-columns:5fr 7fr;gap:clamp(36px,6vw,90px);align-items:center}
.about-fig{aspect-ratio:4/5;overflow:hidden}
.body{margin-top:18px;color:var(--tx2);max-width:600px}
.contact-in{text-align:center;max-width:820px}
.contact-in .h2{margin:0 auto}.contact-in .stand{margin-left:auto;margin-right:auto}
.acts{margin-top:32px;display:flex;gap:10px;flex-wrap:wrap}
.contact-in .acts{justify-content:center}
.ft{border-top:1px solid var(--hair);padding:64px 0 40px;font-family:var(--sans);color:var(--tx2)}
.ft-top{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-bottom:32px;border-bottom:1px solid var(--hair)}
.ft-n{font:400 24px var(--display);color:var(--tx)}.ft-t{margin-top:4px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.ft-l{display:flex;gap:28px;flex-wrap:wrap;font-size:14.5px}.ft-l a{text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:2px}.ft-l a:hover{color:var(--acc);border-color:var(--acc)}
.disclaimer{padding:30px 0;max-width:920px}.disclaimer-title{font:500 11px var(--sans);letter-spacing:.24em;text-transform:uppercase;margin-bottom:10px;color:var(--tx2)}
.disclaimer p{font-size:13.5px;line-height:1.75;color:var(--mut)}
.copy{font-size:12.5px;letter-spacing:.1em;color:var(--mut)}
@media (max-width:900px){.pills,.work,.notes,.about{grid-template-columns:1fr}.pill,.pill+.pill{padding:22px 0;border-left:0;border-top:1px solid var(--hair)}.pills{border-top:0}
 .notes{max-width:420px}.about-fig{aspect-ratio:4/3}}
@media (max-width:640px){.acts{flex-direction:column}.acts .btn{width:100%}.ft-l{flex-direction:column;gap:12px}.hide-sm{display:none}}

.smast{position:absolute;top:0;left:0;right:0;z-index:20}.sm-in{display:flex;justify-content:space-between;align-items:center;padding-top:20px}
.slogo{width:var(--lw,120px)}.snav{display:flex;gap:24px}.snav a{font:500 11.5px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#EDE6DA;text-decoration:none}.snav a:hover{color:var(--acc)}
@media (max-width:760px){.snav a:not(:last-child):not([href="#contact"]){display:none}}
.pin{position:relative}.stick{position:sticky;top:0;height:100vh;overflow:hidden}
.rm .pin{height:auto!important}.rm .stick{position:relative;height:auto;min-height:100vh}
.prog{position:fixed;top:0;left:0;right:0;height:2px;background:var(--acc);transform-origin:0 50%;transform:scaleX(0);z-index:50}

.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .gl{stroke:var(--hair);stroke-width:1}.chart .gl0{stroke:var(--tx2);stroke-width:1}
.chart .ax{font:500 12px var(--sans);fill:var(--mut);letter-spacing:.04em}
.chart .ql{font:500 13px var(--sans);fill:var(--tx2)}.chart .ql2{font-size:11px;fill:var(--mut)}
.chart .bar{fill:var(--acc);opacity:.88}.chart .bar--g{fill:none;stroke:var(--acc);stroke-dasharray:5 4;stroke-width:1.5}.chart .gr{stroke:var(--acc);stroke-dasharray:3 3}
.chart .bv{font:500 12.5px var(--sans);fill:var(--tx)}
.chart .ln{fill:none;stroke:var(--tx);stroke-width:2.2}.chart .ln--k{stroke-dasharray:none}
.chart .pt circle{fill:var(--bg);stroke:var(--tx);stroke-width:2}.chart .mv{font:600 12.5px var(--sans);fill:var(--tx)}
/* scrub: --cp is chart progress 0..1 */
.chart .b{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(clamp(0,calc(var(--cp,1)*11 - var(--i)),1))}
.chart .b .bv{opacity:clamp(0,calc(var(--cp,1)*11 - var(--i) - .6),1)}
.chart .ln{stroke-dasharray:1;stroke-dashoffset:clamp(0,calc(1.6 - var(--cp,1)*1.6),1)}
.chart .pt{opacity:clamp(0,calc((var(--cp,1)*1.6 - .6)*9 - var(--i)),1)}
.chartfoot{font:13px/1.5 var(--sans);color:var(--mut);margin-top:14px;max-width:80ch}
.chartcap{font:italic 16px var(--serif);color:var(--tx2);margin-top:6px}

.hero{position:relative;height:100vh;min-height:620px;overflow:hidden;color:#F3EEE4;background:#07070a}
.hbg{position:absolute;inset:0}.hbg .bg{width:100%;height:100%;object-fit:cover}
.hsh{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,6,9,.88),rgba(6,6,9,.35) 60%,rgba(6,6,9,.1)),linear-gradient(0deg,rgba(6,6,9,.7),transparent 40%)}
.hc{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:12vh}
.hero h1{font:400 clamp(52px,8.4vw,140px)/.9 var(--display);letter-spacing:-.02em;max-width:9ch}
.sub{font-style:italic;font-size:clamp(20px,1vw + 14px,26px);color:#D6B58C;margin-top:10px}
.hi{max-width:52ch;color:#cfc7ba;margin-top:18px}
.cue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font:500 10.5px var(--sans);letter-spacing:.3em;text-transform:uppercase;color:#bfb6a8}
.act1{height:320vh}.act2{height:300vh}.act3{height:360vh}
.a1in{height:100%;display:grid;grid-template-columns:5fr 7fr;gap:5vw;align-items:center}
.stack{position:relative;height:min(68vh,560px)}
.nc{position:absolute;top:0;width:min(44%,300px);aspect-ratio:3/4;left:calc(var(--k) * 28%);border:1px solid var(--acc);padding:26px;display:flex;flex-direction:column;background:linear-gradient(160deg,#211c17,#0f0d0c);box-shadow:0 30px 60px rgba(0,0,0,.55);
 transform:translateY(calc(40vh + var(--k)*0px)) rotate(4deg);opacity:0;transition:transform 1s var(--ease),opacity .8s;margin-top:calc(var(--k) * 40px)}
.nc.is-on{transform:none;opacity:1}
.nc::after{content:"";position:absolute;inset:10px;border:1px solid rgba(194,162,127,.22)}
.nc .note-t{font-size:clamp(54px,5.4vw,88px)}
.a2in{height:100%;display:flex;flex-direction:column;justify-content:center;gap:2vh}.a2in .h2{max-width:none}
.a2c{--cp:var(--p);max-width:1060px}
.act2 .chart{max-height:58vh}
.act3 .stick{background:#080808}
.zoom{position:absolute;right:0;top:0;bottom:0;width:58%;overflow:hidden;clip-path:inset(calc((1 - min(1,var(--p)*3))*18%) calc((1 - min(1,var(--p)*3))*18%));}
.zimg{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.35 - min(1,var(--p)*3)*.35))}
.zoom::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#080808,rgba(8,8,8,.1) 45%)}
.a3in{position:relative;height:100%;display:grid;grid-template-columns:5fr 7fr;align-items:center;gap:4vw}
.meth{margin-top:24px;border-top:1px solid var(--hair)}.meth li{padding:12px 0;border-bottom:1px solid var(--hair);opacity:.28;transition:opacity .6s}.meth li.is-on{opacity:1}
.meth b{display:block;font:400 22px var(--display)}.meth span{font-size:15.5px;color:var(--tx2)}
.ons{display:flex;gap:16px;align-self:end;justify-content:flex-end;padding-bottom:7vh}
.ons figure{width:min(42%,240px);aspect-ratio:3/4;overflow:hidden;border:1px solid rgba(194,162,127,.5);box-shadow:0 30px 50px rgba(0,0,0,.6);opacity:0;transform:translateY(60px);transition:all 1s var(--ease)}
.ons figure.is-on{opacity:1;transform:none}.ons img{width:100%;height:100%;object-fit:cover}
.rm .nc{position:relative;left:auto;margin:0 0 16px;display:inline-flex;width:30%;transform:none;opacity:1}.rm .stack{height:auto;display:flex;gap:14px}.rm .nc{width:auto;flex:1}
.rm .zoom{clip-path:none;position:relative;width:100%;height:60vh}.rm .zimg{transform:none}.rm .meth li{opacity:1}.rm .ons figure{opacity:1;transform:none}
.rm .a1in,.rm .a3in{padding:12vh 0}
@media (max-width:900px){
 .a1in{grid-template-columns:1fr;align-content:center;gap:24px}.stack{height:52vh}.nc{width:58%;left:calc(var(--k)*20%);padding:18px;margin-top:calc(var(--k)*26px)}.nc .note-t{font-size:48px}
 .a1t .stand{display:none}.act2 .chart{max-height:none}.a2c .chartcap{display:none}
 .zoom{width:100%;height:46%;top:auto}.zoom::after{background:linear-gradient(0deg,rgba(8,8,8,.2),#080808)}
 .a3in{grid-template-columns:1fr;align-content:start;padding-top:12vh}.ons{position:absolute;bottom:0;right:20px;left:20px;justify-content:center}.meth li{padding:8px 0}.meth span{font-size:14px}
 .rm .zoom{height:50vh}.rm .ons{position:static}.rm .stack{flex-direction:column}
}
.side-k{font:500 10.5px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--acc);border-top:2px solid var(--rule);padding-top:8px;margin-bottom:8px}
.side-k:not(:first-child){margin-top:18px}
.idx li a{display:flex;gap:12px;padding:4px 0;border-bottom:1px solid var(--hair);text-decoration:none;font-size:15.5px}
.idx li a span{font:500 11px var(--sans);color:var(--acc);padding-top:5px;width:18px}
.idx li a:hover{color:var(--acc)}
.intro{font-size:15.5px;line-height:1.55;color:var(--tx2)}
.latest li{display:grid;grid-template-columns:58px 1fr;column-gap:10px;padding:6px 0;border-bottom:1px solid var(--hair)}
.tk{grid-row:span 2;font:400 22px/1.2 var(--display);color:var(--acc)}
.cn{font-size:15px;line-height:1.3}.cs{font:11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}

.split{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);min-height:100vh;background:var(--bg)}
.col{padding:26px clamp(24px,4vw,64px) 36px;display:flex;flex-direction:column;min-width:0}
.mid{margin:auto 0;display:flex;flex-direction:column;gap:14px;padding-top:24px}
.row1{display:flex;justify-content:space-between;align-items:center;border-bottom:3px double var(--rule);padding-bottom:14px;gap:16px}
.slogo{width:118px}.snav2{display:flex;gap:20px;flex-wrap:wrap}.snav2 a{font:500 11px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--tx2);text-decoration:none}.snav2 a:hover{color:var(--acc)}
.split h1{font:400 clamp(46px,5.2vw,88px)/.95 var(--display);letter-spacing:-.015em}
.sub{font-style:italic;font-size:21px;color:var(--acc)}
.intro{font-size:17px;line-height:1.55;color:var(--tx2);max-width:58ch}
.two{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.cta{display:flex;gap:22px;align-items:center;flex-wrap:wrap}.mail{font:15px var(--sans);color:var(--tx2)}
.meet{font:14px var(--sans);color:var(--mut)}.meet a{color:var(--tx2);text-underline-offset:3px}.meet a:hover{color:var(--acc)}.contact-in .meet{margin-top:22px}
.pic{position:relative;margin:0;background:#07070a}.pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pic figcaption{position:absolute;left:18px;bottom:14px;font:11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#cbbfa8}
@media (max-width:900px){.split{grid-template-columns:1fr}.pic{height:60vh}.two{grid-template-columns:1fr}.snav2 a:not([href="#contact"]):not([target]){display:none}.mid{padding-top:28px}}
