:root{--bg:#0A0A0A;--ink:#ECE7DF;--dim:rgba(236,231,223,.45);--hair:rgba(236,231,223,.14);--m:#7A2632}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:"Inter Tight",sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
@media(pointer:fine){*{cursor:none!important}}
.mono{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;font-weight:300}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0}
.grid-bg{position:fixed;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);background-size:64px 64px;opacity:.35;mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 80%)}
main{position:relative;z-index:1}
#orb{position:fixed;left:0;top:0;width:44px;height:44px;margin:-22px;border-radius:50%;border:1px solid var(--ink);pointer-events:none;z-index:300;mix-blend-mode:difference;transition:width .3s,height .3s,margin .3s,background .3s}
#orb.hov{width:74px;height:74px;margin:-37px;background:rgba(236,231,223,.08)}#orb.down{width:30px;height:30px;margin:-15px}
#dot{position:fixed;left:0;top:0;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:var(--m);pointer-events:none;z-index:301}
@media(pointer:coarse){#orb,#dot{display:none}}
#fx{position:fixed;inset:0;pointer-events:none;z-index:250}
#walkers{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.walker{position:absolute;left:0;top:0;width:38px;pointer-events:auto;will-change:transform}.walker img{width:100%;display:block}
#walkers.b0 img{filter:url(#boil0)}#walkers.b1 img{filter:url(#boil1)}#walkers.b2 img{filter:url(#boil2)}
.hdr{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;justify-content:space-between;align-items:center;padding:16px 26px;mix-blend-mode:normal}
.hdr-l{display:flex;align-items:center;gap:12px}.hdr-l img{height:30px}.hdr-l span{color:var(--dim)}
.hdr-r{display:flex;align-items:center;gap:18px}#snd{color:var(--dim)}#snd:hover{color:var(--ink)}
.cta{font-size:13px;border:1px solid var(--ink);padding:9px 16px;border-radius:40px;letter-spacing:.02em;transition:background .25s,color .25s,border-color .25s;white-space:nowrap}
.cta:hover{background:var(--m);border-color:var(--m)}
#menuBtn{display:flex;align-items:center;gap:8px;position:relative;width:76px;height:30px}#menuBtn span{position:absolute;left:0;width:22px;height:1px;background:var(--ink);transition:transform .4s}
#menuBtn span:first-child{top:11px}#menuBtn span:nth-child(2){top:18px}#menuBtn em{margin-left:32px;font-style:normal}
#menuBtn[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}#menuBtn[aria-expanded=true] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
#menu{position:fixed;inset:0;z-index:190;background:rgba(10,10,10,.55);backdrop-filter:blur(22px) saturate(.6);-webkit-backdrop-filter:blur(22px);display:flex;flex-direction:column;justify-content:center;padding:0 7vw}
#menu[hidden]{display:none}#menu ol{list-style:none}
#menu li a{display:flex;align-items:baseline;gap:20px;font-family:Cinzel;font-size:clamp(38px,7vw,96px);line-height:1.08;transition:transform .4s cubic-bezier(.2,1.4,.4,1),color .2s}
#menu li a:hover{transform:translateX(24px);color:var(--m)}#menu li i{font-style:normal;color:var(--dim)}
.menu-foot{position:absolute;bottom:30px;left:7vw;color:var(--dim);line-height:1.8}.menu-foot a:hover{color:var(--ink)}
.hero{position:relative;height:100vh;min-height:600px;overflow:hidden;touch-action:pan-y}
#world{position:absolute;inset:0;z-index:5}
.body{position:absolute;left:0;top:0;will-change:transform;user-select:none;touch-action:none}
.body img{display:block;pointer-events:none;width:100%;transition:filter .25s}
.body.sel img{filter:drop-shadow(0 0 0 var(--ink)) drop-shadow(0 0 6px rgba(236,231,223,.5))}
.body.sel:after{content:"";position:absolute;inset:-8px;border:1px dashed var(--ink)}
.wm{position:absolute;left:6vw;top:50%;transform:translateY(-50%);z-index:4;pointer-events:none}
.wm-l{font-family:Cinzel;font-weight:700;font-size:clamp(56px,11vw,168px);line-height:.88;letter-spacing:.01em}
.wm-l .ch{display:inline-block;will-change:transform}
.wm-s{font-size:clamp(11px,1.3vw,16px);letter-spacing:1.6em;margin-top:22px;color:var(--ink)}
.tag{margin-top:26px;font-size:clamp(15px,1.4vw,19px);color:var(--dim);font-weight:300}.mdot{color:var(--m)}
.coords{position:absolute;left:26px;bottom:26px;display:flex;gap:22px;color:var(--dim);z-index:6}.coords b{color:var(--ink);font-weight:400}
.hint{position:absolute;right:26px;bottom:110px;color:var(--dim);z-index:6}
#selbox{position:absolute;border:1px dashed var(--ink);background:rgba(236,231,223,.04);pointer-events:none;z-index:20;display:none}
.marquee{overflow:hidden;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:18px 0;white-space:nowrap}
.mq-track{display:inline-flex;will-change:transform}.mono-big{font-family:"JetBrains Mono";font-weight:300;font-size:clamp(28px,4.5vw,64px);letter-spacing:-.01em}
.sec{padding:140px 6vw;position:relative}
.sec-h{display:flex;align-items:baseline;gap:24px;border-bottom:1px solid var(--hair);padding-bottom:18px;margin-bottom:48px}.sec-h .mono{color:var(--dim)}
h2{font-family:Cinzel;font-weight:500;font-size:clamp(40px,7vw,104px);line-height:1}
.work{display:grid;grid-template-columns:1.1fr 1fr;gap:5vw;align-items:start}
#index{list-style:none}
#index li{display:grid;grid-template-columns:48px 1fr auto;gap:16px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--hair);transition:padding .35s cubic-bezier(.2,1.4,.4,1),color .2s;position:relative}
#index li .t{font-size:clamp(20px,2.4vw,32px);font-weight:300}#index li .mono{color:var(--dim)}
#index li:hover,#index li.on{padding-left:18px}#index li.on:before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--m)}
.preview{position:sticky;top:110px;aspect-ratio:4/3;border:1px solid var(--hair);overflow:hidden}
.pv-grid{position:absolute;inset:0;background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);background-size:20px 20px}
#pv{position:absolute;inset:0;width:100%;height:100%}#pv path,#pv line,#pv rect,#pv circle,#pv polyline{fill:none;stroke:var(--ink);stroke-width:1.2;vector-effect:non-scaling-stroke}
#pv .dim{stroke:var(--dim);stroke-dasharray:3 3}#pv text{fill:var(--dim);font:9px "JetBrains Mono"}
.pv-meta{position:absolute;left:12px;bottom:10px;right:12px;display:flex;justify-content:space-between;color:var(--dim)}
#fins{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair)}
.fin{position:relative;aspect-ratio:1;background:var(--bg);overflow:hidden;padding:18px;display:flex;flex-direction:column;justify-content:space-between}
.fin .field{position:absolute;inset:-40%;opacity:0;transition:opacity .8s;filter:blur(40px);animation:drift 14s ease-in-out infinite alternate}
.fin:hover .field,.fin.in .field{opacity:.35}.fin:hover .field{opacity:.6}
@keyframes drift{to{transform:rotate(40deg) scale(1.2) translate(6%,-4%)}}
.fin h3{position:relative;font-weight:300;font-size:22px}.fin p{position:relative;color:var(--dim);font-size:14px;line-height:1.5}.fin .mono{position:relative;color:var(--dim)}
.pin-wrap{position:relative;height:400vh}
.pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding:0 6vw;overflow:hidden}.pin>.mono{color:var(--dim)}
.pin-type{font-family:Cinzel;font-weight:700;font-size:clamp(70px,19vw,300px);line-height:.9;letter-spacing:-.01em;white-space:nowrap}
.pin-bar{height:1px;background:var(--hair);margin-top:30px;width:100%}.pin-bar i{display:block;height:1px;background:var(--ink);width:0}
.steps{position:absolute;inset:0;pointer-events:none}.step{position:absolute;right:6vw;width:min(360px,80vw);font-size:17px;line-height:1.5;font-weight:300}
.step .mono{color:var(--m)}
.wipe{height:220vh;position:relative}.wipe-dot{position:sticky;top:calc(50vh - 6px);margin:0 auto;width:12px;height:12px;border-radius:50%;background:var(--m);will-change:transform}
.wipe-t{position:absolute;top:30vh;width:100%;text-align:center;color:var(--dim)}
.about{background:var(--bg)}.about-g{display:grid;grid-template-columns:1.2fr 1fr;gap:6vw}
.lead{font-size:clamp(22px,2.6vw,36px);font-weight:300;line-height:1.3;max-width:24ch;margin-bottom:50px}
.spec{display:grid;grid-template-columns:120px 1fr;gap:14px 20px;font-size:12px}.spec dt{color:var(--dim)}.live{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--m);margin-right:8px;animation:pl 1.4s infinite}
@keyframes pl{50%{opacity:.2}}
form{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px 30px;max-width:1000px}form .full{grid-column:1/-1}
label{display:flex;flex-direction:column;gap:8px;color:var(--dim)}
input,select,textarea{background:transparent;border:0;border-bottom:1px solid var(--hair);color:var(--ink);font:300 18px "Inter Tight";padding:10px 0;outline:none;transition:border-color .3s}
input:focus,textarea:focus,select:focus{border-color:var(--m)}select option{background:#111}
form button{justify-self:start;border:1px solid var(--ink);padding:16px 26px;border-radius:40px;font-size:12px;transition:background .25s,border-color .25s,transform .3s cubic-bezier(.2,1.8,.4,1)}
form button:hover{background:var(--m);border-color:var(--m);transform:scale(1.04)}
footer{display:flex;justify-content:space-between;margin-top:140px;color:var(--dim);border-top:1px solid var(--hair);padding-top:20px}
.rv{opacity:0;transform:translateY(40px);transition:opacity 1s,transform 1.1s cubic-bezier(.2,.9,.2,1)}.rv.in{opacity:1;transform:none}
#fab{position:fixed;right:22px;bottom:22px;width:68px;height:68px;z-index:210;transition:transform .4s cubic-bezier(.2,1.8,.4,1)}#fab:hover{transform:scale(1.1) rotate(-12deg)}
#fab img{position:absolute;inset:0;width:100%}#fab .fh{inset:auto;left:50%;top:50%;width:20%;translate:-50% -50%;animation:beat 1.2s ease-in-out infinite}
#fab img:first-child{animation:spin 30s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
@keyframes beat{0%,100%{scale:1}14%{scale:1.3}28%{scale:1}42%{scale:1.18}}
#card{position:fixed;right:22px;bottom:104px;z-index:220;width:min(360px,calc(100vw - 44px));perspective:900px}#card[hidden]{display:none}
.card-in{background:rgba(14,14,14,.92);backdrop-filter:blur(14px);border:1px solid var(--hair);padding:22px 24px;transform-origin:100% 100%}
.card-top{display:flex;justify-content:space-between;color:var(--dim);margin-bottom:18px}.card-x:hover{color:var(--m)}
#card h3{font-family:Cinzel;font-weight:500;font-size:22px}.role{color:var(--dim);margin:6px 0 16px}
#card a{display:grid;grid-template-columns:42px 1fr;gap:6px;padding:10px 0;border-top:1px solid var(--hair);font-size:14px;font-weight:300;transition:color .2s,padding .3s}
#card a i{font-style:normal;color:var(--dim)}#card a:hover{color:var(--ink);padding-left:6px}#card a:hover i{color:var(--m)}
@media(max-width:800px){.work,.about-g{grid-template-columns:1fr}.preview{position:relative;top:0}form{grid-template-columns:1fr}.hdr-l span,#snd,.hint{display:none}.hdr{padding:12px 14px}.hdr-r{gap:10px}.cta{font-size:12px;padding:8px 12px}#menuBtn{width:30px}#menuBtn em{display:none}.coords{gap:12px;bottom:16px;left:14px}.coords span:nth-child(n+3){display:none}.wm{top:28%}.step{right:auto;left:6vw}}
/* v2 layout per reference */
.hdr-wm{font-family:Cinzel;font-size:16px;letter-spacing:.04em}
.wm{left:26px;top:auto;bottom:26px;transform:none}
.wm-k{color:var(--dim);display:block;margin-bottom:12px}
.wm-row{display:flex;align-items:center;gap:18px}.wm-mark{width:clamp(64px,7vw,104px);animation:spin 60s linear infinite}
.wm-l{font-size:clamp(40px,5.6vw,84px);line-height:.9}.wm-s{margin-top:10px;letter-spacing:1.2em;font-size:11px}
.tag{margin-top:14px;font-size:15px}
.scroll{position:absolute;right:26px;bottom:110px;z-index:6;color:var(--ink);animation:sb 2s ease-in-out infinite}@keyframes sb{50%{transform:translateY(6px)}}
.hint{bottom:auto;top:76px;right:26px}.coords{left:auto;right:26px;bottom:auto;top:96px;gap:16px}
.filters{margin-left:auto;display:flex;gap:18px}.filters button{color:var(--dim);transition:color .2s}.filters button.on{color:var(--ink)}.filters button:hover{color:var(--m)}
#tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:40px 22px}
.tile{position:relative;transition:opacity .4s,transform .5s cubic-bezier(.2,1.4,.4,1)}.tile.hide{display:none}
.tile .fr{position:relative;aspect-ratio:4/5;border:1px solid var(--hair);overflow:hidden;transition:border-color .3s}
.tile:hover .fr{border-color:rgba(236,231,223,.5)}.tile:hover{transform:translateY(-6px)}
.tile .fr .pv-grid{opacity:.5}.tile svg{position:absolute;inset:8%;width:84%;height:84%}
.tile svg *{fill:none;stroke:var(--ink);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:1400;stroke-dashoffset:0;transition:stroke-dashoffset 1.6s cubic-bezier(.6,0,.2,1)}
.tile svg .dim{stroke:var(--dim);stroke-dasharray:3 3!important;stroke-dashoffset:0!important}.tile svg text{fill:var(--dim);stroke:none;font:9px "JetBrains Mono"}
.tile.draw svg *:not(.dim):not(text){stroke-dashoffset:1400}
.tile .cnr{position:absolute;top:10px;left:12px;right:12px;display:flex;justify-content:space-between;color:var(--dim)}
.tile .cnr .md{width:6px;height:6px;border-radius:50%;background:var(--m);opacity:0;transition:opacity .2s}.tile:hover .md{opacity:1}
.tile h4{font-weight:400;font-size:13px;letter-spacing:.08em;margin-top:14px;text-transform:uppercase}.tile .sub{color:var(--dim);margin-top:4px;display:block}
.big-foot{position:relative;z-index:1;border-top:1px solid var(--hair);padding:60px 26px 26px;overflow:hidden}
.giant{font-family:Cinzel;font-weight:700;font-size:clamp(90px,24vw,380px);line-height:.85;letter-spacing:-.02em;will-change:transform}
.foot-g{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-top:40px;font-size:13px;line-height:1.7}.foot-g b{display:block;color:var(--dim);font-weight:300;font-size:10px}
.foot-g .r{display:flex;flex-direction:column;align-items:flex-end}.foot-g a:hover{color:var(--m)}.copy{color:var(--dim);margin-top:40px}
/* walkers v2 */
.walker{width:30px;height:40px}.walker .bd{position:absolute;left:0;top:0;width:30px;transform-origin:50% 100%}
.walker svg.legs{position:absolute;left:5px;top:24px;width:20px;height:16px;overflow:visible}
.walker svg.legs line{stroke:var(--ink);stroke-width:1.6;stroke-linecap:round}
@media(max-width:800px){#tiles{grid-template-columns:1fr 1fr;gap:24px 12px}.filters{gap:10px;flex-wrap:wrap}.sec-h{flex-wrap:wrap}.foot-g{grid-template-columns:1fr}.foot-g .r{align-items:flex-start}.scroll{bottom:auto;top:70px}.hint,.coords{display:none}.wm{bottom:20px;left:16px}}
.body.card{border:1px solid rgba(236,231,223,.35);background:#0d0d0d;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.6)}
.body.card .pv-grid{position:absolute;inset:0;opacity:.6;background-size:12px 12px}
.body.card svg{position:absolute;left:6%;top:10%;width:88%;height:62%}.body.card svg *{fill:none;stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}.body.card svg .dim{stroke:var(--dim);stroke-dasharray:2 2}.body.card svg text{fill:var(--dim);stroke:none;font:10px "JetBrains Mono"}
.body .lbl{position:absolute;left:8px;bottom:8px;font-size:8px}.body .num{position:absolute;right:8px;top:6px;font-size:8px;color:var(--dim)}
.body.card:hover{border-color:var(--ink)}.body.grab{filter:drop-shadow(0 30px 30px rgba(0,0,0,.8))}
.body.piece img{object-fit:contain;height:100%}.body.heart{z-index:50}
.wm-l{perspective:600px}
.wm{z-index:6}
.wipe{overflow:hidden}.wipe-dot{width:160vmax;height:160vmax;top:calc(50vh - 80vmax);margin-left:calc(50% - 80vmax)}
@media(max-width:800px){.hdr-l .hdr-wm{display:inline}.hdr-l .mono{display:none}}
/* ===== v2.1 tidy ===== */
:root{--pad:clamp(20px,4vw,56px)}
.hdr{padding:22px var(--pad)}
.wm{left:var(--pad);bottom:var(--pad)}.wm-row{gap:22px}.wm-mark{width:clamp(56px,5.5vw,84px)}
.wm-l{font-size:clamp(38px,4.6vw,70px);font-weight:500;letter-spacing:.02em}.wm-s{letter-spacing:1.1em;margin-top:12px;color:var(--dim)}
.tag{margin-top:18px;font-size:14px}
.scroll{right:calc(var(--pad) + 96px);bottom:var(--pad);animation:none;color:var(--dim)}.scroll:hover{color:var(--ink)}
.hint{top:auto;bottom:calc(var(--pad) + 22px);right:calc(var(--pad) + 96px);color:var(--dim)}
#fab{right:var(--pad);bottom:var(--pad);width:60px;height:60px}#card{right:var(--pad);bottom:calc(var(--pad) + 76px)}
.sec{padding:clamp(100px,14vw,180px) var(--pad)}.big-foot{padding:80px var(--pad) var(--pad)}
.sec-h{gap:20px;margin-bottom:64px}h2{font-weight:500;font-size:clamp(36px,5vw,72px)}
.marquee{padding:22px 0}.mono-big{font-family:"Inter Tight";font-weight:300;font-size:clamp(18px,2.2vw,30px);color:var(--dim);letter-spacing:.01em}
#tiles{gap:56px 28px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.pin{padding:0 var(--pad)}.step{right:var(--pad)}.pin-type{font-weight:500;font-size:clamp(64px,15vw,230px)}
.giant{font-weight:500}
.grid-bg{opacity:.18;background-size:80px 80px}
.body.card{border-color:rgba(236,231,223,.25);box-shadow:none}.body.card .pv-grid{opacity:.35}
/* walkers: tiny ants */
.walker{width:12px;height:16px;padding:0}.walker:before{content:"";position:absolute;inset:-8px}
.walker svg.fig{width:12px;height:16px;overflow:visible;display:block}
.walker svg.fig path{fill:none;stroke:var(--ink);stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}.walker svg.fig circle{fill:var(--ink)}
#walkers.b0 svg{filter:url(#wob0)}#walkers.b1 svg{filter:url(#wob1)}
@media(max-width:800px){.hint{display:none}.scroll{right:auto;left:var(--pad);top:auto;bottom:auto;display:none}.wm-l{font-size:40px}}
/* ===== v2.2 photo cards (cream frames) ===== */
.body.card{background:#ECE7DF;border:0;padding:6px 6px 22px;box-shadow:0 24px 50px rgba(0,0,0,.65)}
.body.card .ph{width:100%;height:calc(100% - 0px);object-fit:cover;display:block;filter:saturate(.9)}
.body.card .lbl{left:8px;bottom:6px;color:#1a1614;font-size:8px;font-weight:400}
.tile .fr{aspect-ratio:4/5;border:6px solid #ECE7DF;background:#000}.tile:hover .fr{border-color:#fff}
.tile .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter .6s;filter:brightness(.92)}
.tile:hover .ph{transform:scale(1.05);filter:brightness(1.05)}
.tile .cnr{z-index:2;color:rgba(236,231,223,.7)}
/* ===== v2.3 carousel hero ===== */
.stage{position:absolute;inset:0;z-index:2}.stage canvas.gl{display:block}
.hero .wm{z-index:6}
.hero:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;background:radial-gradient(ellipse at 55% 45%,rgba(255,190,130,.06),transparent 45%),radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(0,0,0,.55))}
#fallback{position:absolute;left:55%;top:45%;width:min(340px,70vw);aspect-ratio:1;translate:-50% -50%}
.fb-s{position:absolute;inset:0;transition:transform .12s steps(2)}.fb-s canvas{width:100%;height:100%}
#proj{position:fixed;inset:0;z-index:240;background:#050505;display:flex;align-items:center;justify-content:center}
#proj[hidden]{display:none}
.proj-light{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 48%,rgba(255,220,180,.10),transparent 60%);animation:pflick 3s steps(12) infinite}
@keyframes pflick{0%,100%{opacity:1}33%{opacity:.92}50%{opacity:.98}71%{opacity:.9}}
#proj figure{position:relative;width:min(86vw,150vh*1.0);max-width:1200px}
#proj img{display:block;width:100%;max-height:78vh;object-fit:contain;-webkit-mask-image:radial-gradient(ellipse 75% 75% at 50% 50%,#000 55%,rgba(0,0,0,.55) 100%);mask-image:radial-gradient(ellipse 75% 75% at 50% 50%,#000 55%,rgba(0,0,0,.55) 100%);filter:contrast(1.05) saturate(.95);box-shadow:0 0 120px rgba(255,200,150,.06)}
#proj figcaption{margin-top:18px;color:var(--dim);text-align:center;white-space:pre}
#proj button{position:absolute;color:var(--dim);font-size:14px;padding:16px;transition:color .2s}#proj button:hover{color:var(--m)}
.pj-prev{left:var(--pad);top:50%}.pj-next{right:var(--pad);top:50%}.pj-x{top:20px;right:var(--pad)}
/* ===== corner + wordmark logo: fixed original orientation, no rotation ===== */
#fab,#fab:hover{transform:none!important;rotate:none}
#fab:hover .fab-in{transform:scale(1.06)}
.fab-in{position:absolute;inset:0;display:block;aspect-ratio:392/400;margin:auto;width:100%;transition:transform .3s ease}
#fab img.fm{position:absolute;inset:0;width:100%;height:100%;animation:none!important;transform:none!important}
#fab .fh{position:absolute;left:40.82%;top:35.25%;width:16.58%;inset:auto;translate:none;transform-origin:50% 55%;animation:beat 1.2s ease-in-out infinite}
#fab .fh{left:40.82%;top:35.25%}
.wm-mark{animation:none!important;transform:none!important}
/* ===== v2.5 Instax Mini frames ===== */
.ix{background:#F4F2EE;border-radius:clamp(4px,1.6%,8px);padding:4.5% 4.5% 13.5%;position:relative;box-shadow:0 18px 40px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.05);
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ix-ph{position:relative;overflow:hidden;background:#111}
.ix-ph img{display:block;width:100%;height:100%;object-fit:cover}
.ix-ph canvas.stamp{position:absolute;right:3%;bottom:3%;width:38%;height:auto;pointer-events:none}
/* work tiles */
.tile .fr.ix{aspect-ratio:auto;border:0}.tile:hover .fr.ix{border:0}
.tile .fr.ix .ix-ph{aspect-ratio:46/62}
.tile .fr.ix .ph{position:absolute;inset:0}
.tile .md{position:absolute;right:5%;bottom:5%;width:6px;height:6px;border-radius:50%;background:var(--m);opacity:0;transition:opacity .2s}.tile:hover .md{opacity:1}
/* projected view */
#proj figure.ix{width:min(54vh,78vw);max-width:520px}
#proj .ix-ph{aspect-ratio:46/62}#proj .ix-ph img{max-height:none;-webkit-mask-image:none;mask-image:none;box-shadow:none}
#proj .ix-note{position:absolute;left:6%;bottom:3.5%;font-family:Caveat,cursive;font-size:clamp(16px,2.4vh,24px);color:rgba(40,34,30,.55);transform:rotate(-1.5deg)}
#proj .pj-cap{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:var(--dim)}
#proj figure.ix{box-shadow:0 0 0 1px rgba(255,255,255,.04),0 40px 120px rgba(255,200,150,.08)}
#proj .ix-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-height:none}
#proj .ix-ph canvas.stamp{z-index:1}
.tile .fr.ix{background-color:#F4F2EE}
#proj figure.ix{--w:min(54vh,78vw,520px);width:var(--w);padding:calc(var(--w)*.045) calc(var(--w)*.045) calc(var(--w)*.135)}
.walker svg.fig{transform-origin:50% 100%}
/* walkers ~20px desktop / ~18px mobile */
.walker{width:17px;height:23px}.walker svg.fig{width:17px;height:23px}
@media(max-width:800px){.walker{width:15.5px;height:20.5px}.walker svg.fig{width:15.5px;height:20.5px}}
.giant{font-size:clamp(56px,15.5vw,300px);white-space:nowrap;letter-spacing:-.01em}
.giant{font-size:min(calc((100vw - 2 * var(--pad)) / 4.55),320px)}
.big-foot{display:block;margin-top:0;color:var(--ink)}.big-foot .copy,.foot-g b{color:var(--dim)}
/* ===== platforming walkers ===== */
#walkers{z-index:60}
.walker{width:17px;height:23px;transform-origin:0 0}.walker svg.fig{width:17px;height:23px;display:block;overflow:visible}
.walker .bang{position:absolute;left:50%;top:-12px;translate:-50% 0;font:700 10px "JetBrains Mono",monospace;color:var(--m);opacity:0;transition:opacity .1s;font-style:normal}
@media(max-width:800px){.walker,.walker svg.fig{width:15.5px;height:20.5px}}
svg.graf{position:absolute;left:8%;bottom:10%;width:46%;max-width:180px;height:auto;aspect-ratio:100/70;pointer-events:none;z-index:3;transition:opacity 1.2s;overflow:visible}
svg.graf path{fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;opacity:.92}
.puff{position:fixed;width:6px;height:6px;border-radius:50%;pointer-events:none;filter:blur(1.5px)}

/* graffiti on the background layer: behind content, never over it */
#graf-bg{position:absolute;left:0;top:0;width:100%;height:0;z-index:0;pointer-events:none;overflow:visible}
#graf-bg svg.graf{position:absolute;max-width:none;bottom:auto;aspect-ratio:auto;z-index:0;transition:opacity 1.2s;overflow:visible}
#graf-bg svg.graf path{fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
#graf-bg .graf-word{position:absolute;text-align:center;font-family:Cinzel,serif;letter-spacing:.12em;white-space:nowrap;opacity:.9;transition:opacity 1.2s;clip-path:inset(0 100% 0 0)}

/* hero wordmark fully static */
#wm,.wm-l .ch,.wm-s{transition:none!important;animation:none!important}
.wm-l .ch{will-change:auto}

/* =====================================================================
   v3: light theme (default) · perf · flow · socials · heart cursor
   ===================================================================== */
html{scroll-behavior:auto}
[data-theme=light]{--bg:#FAFAF7;--ink:#111111;--dim:rgba(17,17,17,.55);--hair:rgba(17,17,17,.13);--m:#7A2632;color-scheme:light}
[data-theme=dark]{color-scheme:dark}
/* glow blobs + heavy blur removed (perf + look) */
.fin .field{display:none!important}
.hero:after{display:none}
#menu{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(10,10,10,.97)}
.card-in{backdrop-filter:none;-webkit-backdrop-filter:none;background:#0f0f0f}
.puff{filter:none;opacity:.6}
/* header gets a solid backing once you leave the hero, so content never shows through it */
.hdr{transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.hdr.solid{background:var(--bg);border-bottom-color:var(--hair)}
/* flow: shorter hero, no pinned screens */
.hero{height:88vh;min-height:520px}
.sec{padding:clamp(72px,9vw,120px) var(--pad)}
.sec-h{margin-bottom:44px}
.atl-g{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.atl .st{border-top:1px solid var(--ink);padding-top:16px}
.atl .st .mono{color:var(--m)}
.atl .st h3{font-family:Cinzel;font-weight:500;font-size:clamp(28px,3.2vw,46px);margin:10px 0 12px;line-height:1}
.atl .st p{color:var(--dim);font-size:15px;line-height:1.5;font-weight:300;max-width:30ch}
.wipe{height:28vh;min-height:160px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.wipe-dot{position:static;margin:0;width:12px;height:12px;border-radius:50%;background:var(--m);will-change:transform;transform-origin:50% 50%}
/* socials */
.si{width:18px;height:18px;display:inline-block;vertical-align:middle;flex:none}
.soc{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.soc-a{display:inline-flex;align-items:center;gap:8px;transition:color .2s}
.soc-a:hover{color:var(--m)}
.soc-h{color:var(--dim)}
.foot-soc{margin-top:36px;font-size:12px}
.menu-soc{position:absolute;bottom:30px;right:7vw;color:var(--ink)}
.card-soc{border-top:1px solid var(--hair);padding-top:12px;margin-top:2px;gap:16px}
#card .card-soc a{display:inline-flex;grid-template-columns:none;border:0;padding:4px 0}
#card .card-soc .si{width:20px;height:20px}
@media(max-width:800px){.atl-g{grid-template-columns:1fr 1fr;gap:22px 16px}.menu-soc{position:static;margin-top:28px}.menu-foot{position:static;margin-top:40px}#menu{justify-content:center}}
/* heart cursor (replaces ring + dot) */
#orb,#dot{display:none!important}
#hc{position:fixed;left:0;top:0;z-index:400;pointer-events:none;will-change:transform}
#hc svg{display:block;transform-origin:5px 0;transition:transform .25s cubic-bezier(.2,1.6,.4,1)}
#hc path{fill:var(--ink);stroke:var(--bg);stroke-width:.8px;paint-order:stroke}
#hc.hov svg{transform:scale(1.3)}#hc.hov path{fill:var(--m)}
#hc.down svg{transform:scale(.75)}
@media(pointer:coarse){#hc{display:none}}
/* ---------- light theme specifics ---------- */
[data-theme=light] .grid-bg{opacity:.55}
[data-theme=light] #menu{background:rgba(250,250,247,.985)}
[data-theme=light] .card-in{background:#fff;border-color:rgba(17,17,17,.14);box-shadow:0 18px 50px rgba(0,0,0,.12)}
[data-theme=light] select option{background:#fff;color:#111}
[data-theme=light] .ix{box-shadow:0 10px 28px rgba(0,0,0,.13),0 0 0 1px rgba(0,0,0,.07)}
[data-theme=light] .tile .fr.ix{background-color:#fff}
[data-theme=light] .ix{background-color:#fff}
[data-theme=light] #proj{background:#EFEDE8}
[data-theme=light] .proj-light{background:radial-gradient(ellipse at 50% 48%,rgba(255,255,255,.7),transparent 60%);animation:none}
[data-theme=light] #proj figure.ix{box-shadow:0 30px 80px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.06)}
[data-theme=light] .cta:hover,[data-theme=light] form button:hover{color:#fff}
[data-theme=light] .walker .bang{color:var(--m)}
.fin .swatch{position:absolute;right:18px;top:18px;width:22px;height:22px;border-radius:50%;transition:transform .35s cubic-bezier(.2,1.6,.4,1)}
.fin:hover .swatch{transform:scale(1.5)}
[data-theme=light] #fab .fab-in{background:var(--bg);border-radius:50%;box-shadow:0 0 0 1px var(--hair),0 6px 18px rgba(0,0,0,.08)}
[data-theme=light] #fab .fab-in img.fm{inset:12%;width:76%;height:76%}
[data-theme=light] #fab .fh{left:43.02%;top:38.79%;width:12.6%}
#hc{transform:translate3d(-99px,-99px,0)}
.about{background:none}
/* corner logo: no backing at all, just the logo with a hairline halo for legibility over photos */
[data-theme=light] #fab .fab-in{background:none;box-shadow:none;border-radius:0}
[data-theme=light] #fab .fab-in img.fm{inset:0;width:100%;height:100%;filter:drop-shadow(0 0 .6px rgba(250,250,247,.95)) drop-shadow(0 0 1px rgba(250,250,247,.7))}
[data-theme=light] #fab .fh{left:40.82%;top:35.25%;width:16.58%}
[data-theme=dark] #fab .fab-in img.fm{filter:drop-shadow(0 0 .6px rgba(0,0,0,.9)) drop-shadow(0 0 1px rgba(0,0,0,.6))}

/* =====================================================================
   v4: CSS-3D carousel · logo lockup · legibility · new characters
   ===================================================================== */
:root{--heart:#7A2632}
/* ---- carousel (CSS 3D, no WebGL) ---- */
.c3d{position:absolute;inset:0;perspective:1250px;perspective-origin:58% 12%;overflow:hidden;touch-action:pan-y;cursor:grab}
.c3-cam{position:absolute;left:58%;top:60%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(-15deg)}
.c3-s{position:absolute;left:calc(var(--W) / -2);top:calc(var(--H) * -1);width:var(--W);height:var(--H);padding:0;border:0;background:none;backface-visibility:visible;will-change:transform;cursor:pointer}
.c3-s img{display:block;width:100%;height:100%;border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,.08),0 10px 22px rgba(0,0,0,.16);background:#F4F2EE}
.c3-s:focus-visible{outline:2px solid var(--m);outline-offset:4px}
.c3-floor{position:absolute;width:calc(var(--R) * 3.4);height:calc(var(--R) * 3.4);left:calc(var(--R) * -1.7);top:calc(var(--R) * -1.7);transform:rotateX(90deg);
 background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);background-size:calc(var(--R) / 5) calc(var(--R) / 5);background-position:center;
 -webkit-mask-image:radial-gradient(circle,#000 30%,transparent 68%);mask-image:radial-gradient(circle,#000 30%,transparent 68%)}
.c3-logo{position:absolute;left:50%;top:50%;width:calc(var(--R) * .9);height:calc(var(--R) * .9);color:var(--ink);will-change:transform}
@media(max-width:800px){.c3d{perspective:800px;perspective-origin:50% 8%}.c3-cam{left:50%;top:50%}}
#fallback{display:none!important}
/* ---- logo lockups ---- */
svg.signet{display:block;color:var(--ink)}
.wm-mark.signet{width:clamp(72px,7vw,108px);height:clamp(72px,7vw,108px);flex:none}
#fab{width:auto;height:auto;right:var(--pad);bottom:var(--pad);background:none;border:0;padding:0;cursor:pointer}
#fab .fab-in{position:static;display:flex;flex-direction:column;align-items:center;gap:6px;width:auto;aspect-ratio:auto;background:none!important;box-shadow:none!important;color:var(--ink)}
#fab .fab-sg{width:64px;height:64px;display:block;overflow:visible;filter:drop-shadow(0 0 .7px var(--bg)) drop-shadow(0 0 1px var(--bg))}
#fab .fab-h{transform-box:fill-box;transform-origin:50% 55%;animation:beat 1.2s ease-in-out infinite}
#fab .fab-t{font-family:Cinzel,serif;font-weight:700;font-size:13px;line-height:1.15;letter-spacing:.08em;text-align:center;text-transform:uppercase;text-shadow:0 0 3px var(--bg),0 0 2px var(--bg)}
#fab:hover .fab-in{transform:scale(1.05)}
#card{bottom:calc(var(--pad) + 112px)}
@media(max-width:800px){#fab .fab-sg{width:52px;height:52px}#fab .fab-t{font-size:11.5px}#card{bottom:calc(var(--pad) + 98px)}}
/* ---- legibility: bigger, darker type ---- */
[data-theme=light]{--dim:#2b2b2b;--hair:rgba(17,17,17,.16)}
[data-theme=dark]{--dim:rgba(236,231,223,.78)}
body{font-size:17px}
.mono{font-size:13px;letter-spacing:.06em;font-weight:400}
p,.fin p,.atl .st p{font-size:18px;line-height:1.55}
.tile h4{font-size:15px;font-weight:500}.tile .sub{font-size:13px}
.fin h3{font-size:24px;font-weight:400}.fin p{font-size:16px}
.foot-g{font-size:16px}.foot-g b{font-size:13px;font-weight:500}.copy{font-size:13px}
#card a{font-size:16px}.role{font-size:13px}.card-top{font-size:13px}
.spec{font-size:15px}.spec dt{font-weight:500}
.cta{font-size:15px}#menuBtn em{font-size:13px}#snd{font-size:13px}
.hdr-wm{font-size:18px}.hdr-l .mono{font-size:13px}
.menu-foot{font-size:14px;line-height:1.8}.foot-soc,.menu-soc{font-size:14px}
label{font-size:13px;font-weight:500}input,select,textarea{font-size:18px;font-weight:400}
form button{font-size:14px}
.hint,.scroll{font-size:13px}
.wm-s{font-size:13px;font-weight:500}
.filters button{font-size:13px}.sec-h .mono{font-size:13px}
.mono-big{font-weight:400}
[data-theme=light] .mono-big{color:#2b2b2b}
#proj .pj-cap{font-size:14px}
.lead{font-weight:400}
/* ---- heart cursor: smaller, red-maroon ---- */
#hc path{fill:#8E1F33;stroke:var(--bg);stroke-width:1px}
#hc.hov path{fill:#B0233D}
/* ---- wipe dot: crisp (scale down, never up) ---- */
.wipe-dot{width:150px;height:150px;transform:scale(.08)}

#hc svg{transform-origin:5.1px 1.1px}
/* v4 characters */
.walker{width:14.6px;height:19.4px}.walker svg.fig{width:14.6px;height:19.4px}
@media(max-width:800px){.walker{width:12.9px;height:17.1px}.walker svg.fig{width:12.9px;height:17.1px}}
.walker svg.fig path.lb{fill:none;stroke:#111;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.walker svg.fig path.tor,.walker svg.fig circle{fill:#111;stroke:none}
.walker svg.fig path.cig{fill:none;stroke:#e9e4da;stroke-width:.7;stroke-linecap:round}
[data-theme=dark] .walker svg.fig path.lb{stroke:var(--ink)}[data-theme=dark] .walker svg.fig path.tor,[data-theme=dark] .walker svg.fig circle{fill:var(--ink)}
.walker svg.bl{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;pointer-events:none}
.walker svg.bl .str{fill:none;stroke:#111;stroke-width:.7}.walker svg.bl .hb{fill:#B0233D;stroke:#6d1422;stroke-width:.6}
.sring{position:absolute;width:6px;height:4px;border:1.3px solid rgba(60,60,60,.7);border-radius:50%;pointer-events:none}
.dust{position:absolute;width:0;height:0;pointer-events:none}
.dust i{position:absolute;width:16px;height:16px;margin:-8px;border-radius:50%;background:#cfc8bc;border:1.2px solid #111;animation:dst .25s infinite alternate}
.dust i:nth-child(1){transform:translate(-12px,-4px)}.dust i:nth-child(2){transform:translate(10px,-6px);animation-delay:-.1s}.dust i:nth-child(3){transform:translate(0,-14px);width:20px;height:20px;animation-delay:-.05s}.dust i:nth-child(4){transform:translate(-4px,4px);animation-delay:-.15s}.dust i:nth-child(5){transform:translate(14px,4px);animation-delay:-.2s}
.dust b{position:absolute;font:700 13px/1 serif;color:#111;animation:dsb .3s infinite alternate}.dust b:nth-of-type(1){left:-22px;top:-26px}.dust b:nth-of-type(2){left:16px;top:-28px;animation-delay:-.15s}
.dust em{position:absolute;width:8px;height:1.5px;background:#111;top:-2px;left:-24px;transform:rotate(30deg);animation:dsb .2s infinite alternate}.dust em+em{left:18px;transform:rotate(-40deg)}
.dust.out{opacity:0;transition:opacity .3s}
@keyframes dst{to{margin:-9px -7px}}@keyframes dsb{to{transform:translate(2px,-3px) rotate(20deg)}}
.hint{top:90px!important;bottom:auto!important}
/* v6: real swatch photos in home finishes strip */
.fin img.swatch{position:absolute;left:0;top:0;right:auto;width:100%;height:100%;border-radius:0;object-fit:cover}
.fin:hover img.swatch{transform:scale(1.05)}
.fin>.mono{background:#fff;color:#111;padding:4px 8px;align-self:flex-start}
.fin>div{position:relative;background:rgba(255,255,255,.94);margin:0 -18px -18px;padding:12px 18px}
.fin>div p{color:#2b2b2b}
.fin-all{margin-left:auto;font-size:14px;color:#111;border-bottom:1px solid #111}