:root{--bg:#F3EEE5;--fg:#1A1818;--mut:#6B655C;--line:#D8D0C3;--acc:#FFD84D;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
:root[data-theme=dark]{--bg:#1A1818;--fg:#F2EDE4;--mut:#A39D93;--line:#3A3636}
.dk{--bg:#1A1818;--fg:#F2EDE4;--mut:#A39D93;--line:#3A3636}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--bg);color:var(--fg);line-height:1.6;overflow-x:hidden;transition:background .5s,color .5s}
h1,h2,h3,.logo{font-family:'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:-.02em}
a{color:inherit}button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid #7C8CFF;outline-offset:3px}
.dk{background:var(--bg);color:var(--fg)}
#loader{position:fixed;inset:0;z-index:50;background:radial-gradient(75% 60% at 50% 45%,#2b2e35,#08090b 80%);color:#F2EDE4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;transition:opacity .7s,visibility .7s;--p:0%}
#loader.done{opacity:0;visibility:hidden}
#pct{font:500 1rem 'DM Mono',monospace;color:#F2EDE4}
.lcard{position:relative;width:clamp(200px,58vw,280px);aspect-ratio:3/4;border:1px solid #3a3636;border-radius:16px;overflow:hidden;background:#151313;margin-bottom:1.4rem;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.lcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
#lg{opacity:.14}#lf{clip-path:inset(calc(100% - var(--p)) 0 0 0)}
.lt1{font:500 .78rem 'DM Mono',monospace;letter-spacing:.22em;text-transform:uppercase}
.lt2{font-size:.78rem;color:#a39d93;letter-spacing:.06em}
.lrow{display:flex;justify-content:space-between;align-items:baseline;width:min(70vw,260px);margin-top:1.2rem;font:500 .72rem 'DM Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#a39d93}
.lbar{width:min(70vw,260px);height:2px;background:#3a3636}.lbar i{display:block;height:100%;background:#F2EDE4;width:var(--p)}
#loader .btn.p{margin-top:1.2rem}#loader .btn.p b{background:#1A1818;color:#F2EDE4}
.btn{padding:.85em 1.6em;border-radius:999px;border:1.5px solid currentColor;text-decoration:none;font-weight:500;background:none;transition:transform .15s;display:inline-flex;align-items:center;gap:.7em}
.btn:hover{transform:translateY(-2px)}
.btn.p{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.btn.p b{display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;background:var(--bg);color:var(--fg);font-weight:400}
.dk .btn.p,#loader .btn.p{background:#E9E5DE;border-color:#E9E5DE;color:#1A1818}
.dk .btn.p b{background:#1A1818;color:#F2EDE4}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:19}
.bar{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:20;display:flex;align-items:center;gap:12px;padding:14px 5vw;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(8px)}
.logo{font-weight:800;text-decoration:none;font-size:1.2rem}
.pg{margin-left:auto;color:var(--mut);font-size:.85rem;white-space:nowrap}.pg b{color:var(--fg);font-family:'DM Mono',monospace}
.right{display:flex;gap:14px;align-items:center;font-size:.85rem;color:var(--mut);margin-right:44px}
.menu{border:1px solid var(--line);background:none;border-radius:999px;padding:.4em 1.1em}
.cord{position:fixed;top:env(safe-area-inset-top,0px);right:4vw;z-index:26;width:36px;height:104px;border:0;background:none;display:flex;flex-direction:column;align-items:center;transform-origin:top center;will-change:transform}
.cord::before{content:"";width:5px;flex:1;border-radius:2px;background:repeating-linear-gradient(160deg,#e9dfc6 0 2px,#b09e74 2px 4px);box-shadow:0 0 0 .5px rgba(0,0,0,.3)}
.cord i{position:relative;transform-origin:50% 0;width:22px;height:34px;border-radius:50% 50% 55% 55%/36% 36% 64% 64%;margin-top:-1px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 1px,transparent 1px 4px),linear-gradient(90deg,#3a200e,#b07a45 36%,#6a3d1c 62%,#2e170a);box-shadow:inset 3px 5px 7px rgba(255,225,180,.35),0 6px 10px rgba(0,0,0,.4)}
.cord i::before{content:"";position:absolute;top:-6px;left:50%;width:9px;height:8px;transform:translateX(-50%);border-radius:2px;background:linear-gradient(90deg,#7a5a22,#e6c878,#7a5a22)}
.cord.pull{animation:none;transform:translateY(16px)}
@keyframes sw{50%{transform:rotate(3deg)}}
.right{margin-left:auto}.right span{font-size:.72rem}@media (max-width:640px){.right #date{display:none}}
#nav{position:fixed;inset:0;z-index:60;background:#252222;color:#F2EDE4;display:flex;flex-direction:column;justify-content:center;padding:5vw;transform:translateY(-100%);transition:transform .5s cubic-bezier(.7,0,.2,1)}
#nav.open{transform:none}
#nav a{font:700 clamp(1.7rem,7vw,3.2rem)/1.35 'Bricolage Grotesque',sans-serif;text-decoration:none;width:fit-content;opacity:0;transform:translateY(24px);transition:opacity .5s,transform .5s,color .2s}
#nav.open a{opacity:1;transform:none}
#nav.open a:nth-of-type(2){transition-delay:.06s}#nav.open a:nth-of-type(3){transition-delay:.12s}#nav.open a:nth-of-type(4){transition-delay:.18s}#nav.open a:nth-of-type(5){transition-delay:.24s}#nav.open a:nth-of-type(6){transition-delay:.3s}#nav.open a:nth-of-type(7){transition-delay:.36s}
#nav a i{font:500 .7rem 'DM Mono',monospace;color:#A39D93;margin-right:1rem;font-style:normal;vertical-align:middle}
#nav a:hover{color:var(--acc)}
.nm{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));left:5vw;font-weight:500}
.nb{position:absolute;left:5vw;right:5vw;bottom:calc(18px + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;align-items:center;color:#A39D93;font-size:.8rem}
#nav .x{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:5vw;border:1px solid #3A3636;background:none;border-radius:999px;padding:.4em 1.1em}
.hero{min-height:100vh;padding:18vh 5vw 6vh;display:grid;grid-template-columns:1.2fr 1fr;gap:4vw;align-items:end;overflow:hidden}
.tag{color:var(--mut);margin-bottom:1.2rem;font-size:.9rem}.tag i{display:inline-block;width:8px;height:8px;background:#3DBE6B;border-radius:50%;margin-right:8px}
h1{font-size:clamp(2.8rem,8.5vw,6.5rem);line-height:1;font-weight:800}
h1 span.m{color:var(--mut);display:block}
.note{position:relative;display:inline-block;margin:1.6rem 0 2rem;background:#fff;color:#1A1818;border-radius:14px;padding:.25em .8em;font:800 clamp(1.6rem,5vw,3.2rem)/1.2 'Bricolage Grotesque',sans-serif;box-shadow:0 8px 0 -3px #cfc7b8,0 20px 30px rgba(0,0,0,.18);min-width:min(100%,9em)}
.note::before{content:"";position:absolute;top:-11px;left:16px;right:16px;height:18px;background:repeating-linear-gradient(90deg,#8a8378 0 4px,transparent 4px 24px);border-radius:4px}
.caret{display:inline-block;width:.07em;height:.85em;background:#1A1818;margin-left:.06em;vertical-align:-.05em;animation:bl 1s steps(1) infinite}
@keyframes bl{50%{opacity:0}}
.cta{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.cta .l{text-decoration:none;color:var(--mut)}
.pic{position:relative;justify-self:end;width:min(100%,400px);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s}
.pic img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(#000 92%,transparent);mask-image:linear-gradient(#000 92%,transparent);filter:drop-shadow(0 18px 22px rgba(0,0,0,.22))}
[data-theme=dark] .pic img{filter:none}
.pic span{position:absolute;left:8%;bottom:13%;background:color-mix(in srgb,var(--bg) 78%,transparent);color:var(--fg);border:1px solid var(--line);backdrop-filter:blur(6px);font-size:.75rem;padding:.4em .9em;border-radius:999px}
@media (max-width:760px){.hero{grid-template-columns:1fr;align-items:start}.pic{justify-self:center;width:min(78%,320px)}}
.sec{padding:12vh 5vw}
.sec h2{font-size:clamp(2rem,6vw,4.5rem);line-height:1.05;margin-bottom:.6rem}
.sub{color:var(--mut);margin-bottom:1.5rem}
.floor{position:relative;margin:0 -5vw;padding-top:30px;background:linear-gradient(var(--wall1),var(--wall2));border-bottom:12px solid var(--skirt);transition:background .5s}
.floor::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(22% 62% at 12.5% 0,var(--spot),transparent),radial-gradient(22% 62% at 37.5% 0,var(--spot),transparent),radial-gradient(22% 62% at 62.5% 0,var(--spot),transparent),radial-gradient(22% 62% at 87.5% 0,var(--spot),transparent)}
.wall{position:relative;z-index:1}
.wall{display:grid;grid-template-columns:repeat(4,minmax(0,200px));justify-content:center;align-items:end;gap:clamp(10px,3vw,44px);padding:24px 4vw 0}
.door{width:100%;height:auto;aspect-ratio:3/5;align-self:end;margin:0;position:relative;perspective:1000px;border:0;background:none;padding:0;-webkit-tap-highlight-color:transparent}
.arch{position:absolute;inset:0;border-radius:999px 999px 0 0;background:#0a0909;border:clamp(4px,1.2vw,9px) solid var(--frame);box-shadow:0 12px 24px rgba(0,0,0,.18);border-bottom:0;overflow:hidden}
.glow{position:absolute;inset:0;background:radial-gradient(110% 80% at 50% 100%,var(--in1),var(--in2) 80%)}
.leaf{position:absolute;inset:0;border-radius:999px 999px 0 0;background:repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 2px,transparent 2px 9px),var(--c);transform-origin:left center;transition:transform .8s cubic-bezier(.3,.7,.2,1);box-shadow:inset 0 0 0 3px rgba(255,255,255,.08)}
.pl{position:absolute;top:34%;left:50%;transform:translateX(-50%);width:70%;text-align:center;font:700 clamp(.38rem,1.9vw,.62rem)/1.25 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;background:linear-gradient(#f6da74,#b98a1c);color:#2e1d02;padding:.5em .4em;border-radius:3px;box-shadow:0 2px 5px rgba(0,0,0,.4)}
.hd{position:absolute;right:14%;top:60%;width:10px;height:34px;border-radius:6px;background:linear-gradient(90deg,#fff0a8,#b98a1c)}
.hd::before{content:"";position:absolute;right:0;top:4px;width:30px;height:8px;border-radius:5px;background:inherit}
.door:hover .leaf,.door:focus-visible .leaf{transform:rotateY(-22deg)}
.door.open .leaf{transform:rotateY(-105deg)}
.enter{position:absolute;left:50%;bottom:-16px;transform:translate(-50%,6px);background:#fff;color:#1A1818;font-size:.75rem;padding:.35em 1em;border-radius:999px;opacity:0;transition:.3s;z-index:2;white-space:nowrap}
.door:hover .enter,.door:focus-visible .enter{opacity:1;transform:translate(-50%,0)}
@media (hover:none){.enter{display:none}}
.hint{text-align:center;color:var(--mut);font-size:.9rem;margin-top:1.2rem}
.mono{font:500 .8rem 'DM Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin-bottom:1.4rem}
.story{position:relative;overflow:hidden}
#dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sg{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:5vw}
.sticky{position:sticky;top:90px;align-self:start}
.yr{display:flex;font:800 clamp(4.2rem,16vw,10rem)/1 'Bricolage Grotesque',sans-serif;color:var(--fg);margin:1rem 0}
.yr i{display:block;height:1.2em;overflow:hidden;font-style:normal}
.yr em{display:block;font-style:normal;transition:transform .8s cubic-bezier(.7,0,.2,1)}
.yr em span{display:block;height:1.2em;line-height:1.2}
.cnt{font:500 .85rem 'DM Mono',monospace;color:var(--mut)}
.tl{list-style:none;padding:0;border-left:2px solid var(--line)}
.tl li{min-height:48vh;padding:0 0 2rem 1.6rem;position:relative;opacity:.3;transition:opacity .4s}
.tl li.on{opacity:1}
.tl li::before{content:"";position:absolute;left:-8px;top:.5rem;width:14px;height:14px;border-radius:50%;background:#3DBE6B}
.when{font:500 .8rem 'DM Mono',monospace;letter-spacing:.1em;color:var(--mut)}
.tl h3{font-size:1.6rem}.tl p{color:var(--mut);max-width:46ch}
@media (max-width:760px){.sg{grid-template-columns:1fr}.sticky{top:70px;background:var(--bg);z-index:3;padding-bottom:.5rem}.tl li{min-height:38vh}}
.proj{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;padding:2rem;border:2px solid var(--line);border-radius:18px;text-decoration:none;transition:border-color .2s}
.proj:hover{border-color:var(--fg)}.proj h3{font-size:2.2rem}.proj p{color:var(--mut);max-width:46ch}
.final{text-align:left;border-radius:36px 36px 0 0;margin-top:-36px;position:relative;z-index:3}.final h2{font-size:clamp(3rem,14vw,6.5rem);line-height:1;max-width:12ch;margin:0 0 1.4rem}.final h2 span{display:block;color:#6f6a69}.final .sub{font-size:clamp(1.05rem,4.2vw,1.35rem);line-height:1.7;color:#a39d93;max-width:34em;margin-bottom:2rem}
footer{border-top:1px solid var(--line);padding:3rem 5vw 2rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:2rem}
footer h4{color:var(--mut);font-weight:500;margin-bottom:.6rem}footer ul{list-style:none;padding:0}
footer a{text-decoration:none}footer a:hover{color:#B8860B}
.fine{grid-column:1/-1;color:var(--mut);font-size:.9rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
dialog{border:1px solid #3A3636;border-radius:18px;background:#252222;color:#F2EDE4;padding:2rem;width:min(92vw,480px);margin:auto}
dialog::backdrop{background:rgba(0,0,0,.7)}dialog h2{font-size:1.8rem;margin-bottom:1rem}
label{display:block;margin-bottom:1rem;color:#A39D93;font-size:.9rem}
input,textarea{width:100%;margin-top:4px;padding:.7em .9em;border-radius:10px;border:1px solid #3A3636;background:#1A1818;color:#F2EDE4;font:inherit}
.x2{float:right;border:0;background:none;font-size:1.4rem}

#gate{position:fixed;inset:0;z-index:45;background:linear-gradient(var(--wall1),var(--wall2));opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
#gate.on{opacity:1;visibility:visible}
#ebd{position:absolute;transform-origin:50% 50%;will-change:transform,opacity}
#ebd .door{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;max-width:none;flex:none;pointer-events:none}
#ebd .leaf{transition:transform 1.15s cubic-bezier(.5,0,.2,1)}
#et{position:absolute;bottom:10vh;left:0;right:0;text-align:center;font:500 .75rem 'DM Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
#room{position:fixed;inset:0;z-index:40;background:var(--bg);color:var(--fg);overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
#room.on{opacity:1;visibility:visible}
.rtop{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;padding:calc(14px + env(safe-area-inset-top,0px)) 5vw 14px;background:var(--bg)}
.rtop button{border:1px solid var(--line);background:none;color:var(--fg);border-radius:999px;padding:.35em 1em;font-size:.85rem}
.rin{padding:6vh 5vw 14vh;max-width:900px;margin:auto}
.rin h2{font-size:clamp(2.6rem,10vw,6rem);line-height:1;margin-bottom:1rem}
.rd{color:var(--mut);max-width:46ch;margin-bottom:2.5rem}
.rcard{position:sticky;top:calc(74px + var(--i)*18px);background:var(--card);border:1px solid var(--line);border-radius:20px;padding:1.6rem;margin-bottom:22vh;box-shadow:0 -14px 30px rgba(0,0,0,.14);transform-origin:top}
.rcard small{font:500 .7rem 'DM Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.rcard h3{font-size:1.7rem;margin:.3rem 0 .4rem}.rcard p{color:var(--mut);max-width:48ch;margin-bottom:1rem}
.rcta{text-align:center;padding-top:2rem}
@property --sc{syntax:'<color>';inherits:true;initial-value:#6b3410}
.story{background:radial-gradient(130% 70% at 15% 100%,var(--sc),transparent 70%),radial-gradient(90% 50% at 100% 0%,color-mix(in srgb,var(--sc) 40%,transparent),transparent),var(--bg);transition:--sc 1.2s}
.tl{position:relative}.tl::after{content:"";position:absolute;left:-2px;top:0;width:2px;height:calc(var(--pr,0)*100%);background:#3DBE6B}
.rv{opacity:0;transform:perspective(900px) translateY(50px) rotateX(10deg);transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

.rcard{display:grid;gap:1.4rem}
@media (min-width:760px){.rcard{grid-template-columns:1fr 1.1fr;align-items:center}}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 1rem}.chips span{font-size:.72rem;border:1px solid var(--line);border-radius:999px;padding:.15em .7em;color:var(--mut)}
.mk{perspective:900px;width:100%}
.mon{width:100%;max-width:340px;margin:auto;transform:rotateY(-9deg) rotateX(4deg);transition:transform .5s}
.rcard:hover .mon,.rcard:hover .ph{transform:none}
.scr{aspect-ratio:16/10;border:5px solid #0a0909;border-radius:8px;background:var(--b);overflow:hidden;padding:7%;display:flex;flex-direction:column;gap:6%;box-shadow:0 14px 26px rgba(0,0,0,.5)}
.nv{display:flex;gap:5px}.nv i{width:14%;height:3px;border-radius:2px;background:rgba(128,128,128,.5)}
.hl{font:800 clamp(.8rem,3.4vw,1.15rem)/1.05 'Bricolage Grotesque',sans-serif;max-width:70%}
.bl{flex:1;border-radius:6px}
.st{width:24%;height:14px;margin:0 auto;background:linear-gradient(#555,#2a2a2a);border-radius:0 0 6px 6px}
.ph{width:min(46%,150px);margin:auto;aspect-ratio:9/18;border:5px solid #0a0909;border-radius:26px;background:#1d1b1b;padding:10px 8px;transform:rotateY(12deg) rotateX(3deg);transition:transform .5s;box-shadow:0 14px 26px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:6px}
.nc{width:38%;height:7px;background:#0a0909;border-radius:6px;margin:0 auto}
.pt{font:800 .8rem 'Bricolage Grotesque',sans-serif;color:#fff}
.rw{flex:1;border-radius:9px;background:rgba(255,255,255,.1)}
.ps{display:flex;gap:2.5%;justify-content:center;padding-top:14px;position:relative}
.ps::before{content:"";position:absolute;top:5px;left:0;right:0;height:2px;background:#8a7a5a}
.po{width:31%;aspect-ratio:3/4;border-radius:4px;transform:rotate(var(--r));box-shadow:0 8px 14px rgba(0,0,0,.45);padding:9%;position:relative;display:flex;align-items:flex-end;transform-origin:top center;animation:sway 5s ease-in-out infinite}
.po:nth-child(2){animation-delay:-1.6s}.po:nth-child(3){animation-delay:-3.2s}
@keyframes sway{50%{transform:rotate(calc(var(--r) * -1))}}
.po::before{content:"";position:absolute;top:-8px;left:42%;width:16%;height:14px;background:#d9c9a0}
.po b{font:800 clamp(.6rem,2.6vw,.9rem)/1.1 'Bricolage Grotesque',sans-serif;color:#fff}
.vd{width:100%;max-width:340px;margin:auto}
.vf{aspect-ratio:16/9;border-radius:10px;display:grid;place-items:center;box-shadow:0 14px 26px rgba(0,0,0,.5)}
.play{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:#1A1818;padding-left:3px}
.tk{position:relative;display:grid;gap:4px;margin-top:10px}.tk i{display:block;height:9px;border-radius:3px;background:var(--c);width:var(--w);margin-left:var(--l)}
.tk::after{content:"";position:absolute;top:-4px;bottom:-4px;width:2px;background:#fff;left:4%;animation:phd 5s linear infinite}
@keyframes phd{to{left:96%}}
:root{--wall1:#e9e5de;--wall2:#d4cfc6;--skirt:#f6f3ee;--frame:#fbfaf7;--spot:rgba(255,255,255,.9);--card:#FBF9F5;--in1:#fffdf7;--in2:#ece5d6}
:root[data-theme=dark]{--wall1:#211e1e;--wall2:#1A1818;--skirt:#0d0b0b;--frame:#3a3636;--spot:rgba(255,215,140,.10);--card:#252222;--in1:#2f2823;--in2:#090808}
dialog .btn.p{background:#E9E5DE;border-color:#E9E5DE;color:#1A1818}
dialog .btn.p b{background:#1A1818;color:#F2EDE4}
@property --r{syntax:'<length>';inherits:false;initial-value:0px}
.pic{cursor:crosshair;touch-action:pan-y}
.pic img.tint{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:none;-webkit-mask-image:radial-gradient(circle var(--r) at var(--mx,50%) var(--my,40%),#000 30%,transparent 100%);mask-image:radial-gradient(circle var(--r) at var(--mx,50%) var(--my,40%),#000 30%,transparent 100%);transition:--r .5s cubic-bezier(.2,.8,.2,1)}
.vp{position:relative;width:100%;max-width:380px;margin:auto;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;box-shadow:0 14px 26px rgba(0,0,0,.35)}
.vp img{display:block;width:100%;height:100%;object-fit:cover}
.vp .rec{position:absolute;top:9px;left:10px;width:9px;height:9px;border-radius:50%;background:#ff3b30;animation:bl 1.2s steps(1) infinite}
.vp .tm{position:absolute;top:4px;right:10px;font:500 .62rem 'DM Mono',monospace;color:#fff;text-shadow:0 1px 3px #000}
.vpb{position:absolute;left:8px;right:8px;bottom:7px;height:3px;background:rgba(255,255,255,.3);border-radius:2px}.vpb i{display:block;height:100%;background:#fff;width:0;animation:vpb 4s linear infinite;border-radius:2px}
@keyframes vpb{to{width:100%}}

.menu{border-radius:12px}
.right{border:1px solid var(--line);border-radius:12px;padding:.45em .9em}.right b{color:var(--fg);font-weight:500}
.hero{grid-template-rows:1fr auto;align-content:stretch}
.hbar{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;padding:14px 0 0;border-top:1px solid var(--line);font:500 .72rem 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.dinfo{display:none}
.story{overflow:clip}
.rng{margin-top:.35rem;font:500 .7rem 'DM Mono',monospace;letter-spacing:.1em;color:var(--mut);text-transform:uppercase}
.cn{display:flex;align-items:center;gap:12px;margin-top:.4rem}
.bar2{flex:1;height:2px;background:var(--line);position:relative;max-width:220px}.bar2 i{position:absolute;inset:0 auto 0 0;background:var(--fg);width:0;transition:width .5s}
@media (max-width:760px){
.menu .ml{display:none}.menu{padding:.4em .8em;font-size:1.15rem;line-height:1}
.right{margin-right:46px}.right #date{display:none}
.hero{grid-template-rows:auto;min-height:auto;padding:16vh 5vw 0;gap:1.4rem;align-content:start}
.note{font-size:clamp(1.3rem,6.4vw,3rem);min-width:0}
.cta{flex-direction:column;align-items:flex-start;gap:12px}
.pic{justify-self:stretch;width:calc(100% + 10vw);margin:0 -5vw}
.hbar{margin:0 -5vw;padding:14px 5vw 18px}.hbar .mid{display:none}
#work{padding:0;height:calc(100svh + 280vh)}
.pinbox{position:sticky;top:0;height:100svh;overflow:hidden;padding:calc(84px + env(safe-area-inset-top,0px)) 5vw 0;display:flex;flex-direction:column}
#work .sub{display:none}
#work h2{font-size:clamp(2rem,10vw,2.7rem);line-height:1;text-align:left;margin-bottom:1rem}
.dinfo{display:block;border-top:1px solid var(--line);padding-top:.8rem}
.dinfo h3{font-size:clamp(1.8rem,8.4vw,2.4rem);line-height:1.1}
.dinfo .mono{margin:.4rem 0 .9rem;font-size:.6rem;letter-spacing:.1em;color:#604B4B}
[data-theme=dark] .dinfo .mono{color:var(--mut)}
.dots{display:flex;gap:6px;margin-bottom:1.1rem}.dots i{width:7px;height:7px;border-radius:99px;background:var(--line);transition:.3s}.dots i.on{width:26px;background:var(--fg)}
.floor{flex:1;min-height:0;margin:0 -5vw;padding-top:0;display:flex;align-items:stretch;overflow:hidden}
.floor::before{background:radial-gradient(45% 75% at 50% 0,var(--spot),transparent)}
.wall{display:flex;justify-content:flex-start;gap:0;padding:0;width:100%;align-items:stretch;will-change:transform}
.door{flex:0 0 100vw;width:100vw;max-width:none;aspect-ratio:auto;height:auto;align-self:stretch}
.door .arch{inset:0 auto 0 50%;width:auto;aspect-ratio:1/2;max-width:76vw;transform:translateX(-50%);border-width:clamp(10px,3.4vw,14px)}
#ebd .door .arch{inset:0;width:auto;aspect-ratio:auto;max-width:none;transform:none}
#work .hint{display:none}
.story{padding:10vh 5vw 12vh}
.sg{display:block}
.sticky{position:sticky;top:calc(64px + env(safe-area-inset-top,0px));z-index:4;margin:0 -5vw 1.2rem;padding:.8rem 5vw .7rem;background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:0 0 20px 20px;box-shadow:0 10px 24px rgba(0,0,0,.12)}
.sticky .sub{display:none}
.sticky h2{font-size:1.45rem;margin:0 0 .1rem;line-height:1.1}
.yr{font-size:clamp(3rem,15vw,4.4rem);margin:.2rem 0 .1rem}
.tl{margin-left:.5rem;padding-top:.6rem}.tl li{min-height:34vh;padding-left:1.2rem}
.rcard{padding:1.2rem}.rcard h3{font-size:1.45rem}
}

.final .tag{text-transform:uppercase;letter-spacing:.06em;font-size:.85rem;margin-bottom:1.6rem}.final .tag i{width:12px;height:12px;background:#7fc77f;box-shadow:0 0 0 4px rgba(127,199,127,.22)}
.cta .l{border:1.5px solid var(--line);border-radius:999px;padding:.85em 1.6em;color:var(--fg)}
.dk .cta .l{border-color:#3a3636}
.wall{grid-template-columns:repeat(4,minmax(0,240px))}
@media (max-width:760px){
.final{padding:12vh 5vw 8vh}
#work h2{font-size:clamp(1.9rem,9vw,2.5rem);margin-bottom:.9rem}
.dinfo h3{font-size:clamp(1.6rem,7.5vw,2.1rem)}
.dinfo .mono{margin:.3rem 0 .7rem}.dots{margin-bottom:.8rem}
.pinbox{padding-top:calc(76px + env(safe-area-inset-top,0px))}
.door .arch{aspect-ratio:9/17;max-width:80vw}
.door .pl{font-size:clamp(.5rem,2.6vw,.72rem)}
}

footer{grid-template-columns:repeat(5,minmax(0,1fr));gap:2.2rem 2rem;padding-bottom:calc(2rem + env(safe-area-inset-bottom,0px))}footer>div{min-width:0}footer li a{overflow-wrap:anywhere}.fine p{overflow-wrap:anywhere;line-height:1.6}
footer h4{text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;margin-bottom:1rem}
footer li{margin-bottom:.9rem;font-size:1.05rem;line-height:1.35}
footer a:hover{color:#fff}
footer b{font-weight:500;margin-left:.4em}
.fst ul{max-width:14em}.fst li{margin-bottom:.2rem;line-height:1.4;font-size:1.1rem;color:#d9d4cb}.fst li:last-child{display:flex;gap:1.4rem;align-items:baseline;margin-top:.2rem}.fst b{margin-left:0;color:#F2EDE4}
.fine{grid-column:1/-1;display:block;border-top:1px solid #3a3636;padding-top:1.4rem;font-size:1rem}
.frow{display:flex;justify-content:space-between;gap:12px;margin-top:1.2rem}
#crl{text-decoration:underline;text-underline-offset:4px}
@media (max-width:760px){footer{grid-template-columns:repeat(2,minmax(0,1fr))}footer>div:nth-child(3){grid-column:1/-1}.fst{order:4;grid-column:1/-1}.em{order:5;grid-column:1/-1}.fine{order:6}}
:root{padding-bottom:0}
.cord.pull{animation:cpull .95s cubic-bezier(.3,1.4,.5,1) both}
@keyframes cpull{0%{transform:translateY(0)}22%{transform:translateY(42px) scaleY(1.04)}42%{transform:translateY(-10px) rotate(5deg)}62%{transform:translateY(7px) rotate(-4deg)}82%{transform:translateY(-2px) rotate(1.6deg)}100%{transform:none}}
.cord.pull i{box-shadow:inset 3px 5px 7px rgba(255,225,180,.5),0 0 14px 4px rgba(255,190,110,.45)}
#flash{position:fixed;inset:0;pointer-events:none;z-index:24;opacity:0}
#flash.l{background:radial-gradient(circle at 92% 0,rgba(255,244,205,.95),rgba(255,244,205,0) 65%)}
#flash.d{background:radial-gradient(circle at 92% 0,rgba(0,0,0,.85),rgba(0,0,0,0) 65%)}
#flash.go{animation:fl .8s ease-out}
@keyframes fl{0%{opacity:1}100%{opacity:0}}
.tl .org{color:var(--fg);opacity:.75;margin:.2rem 0 .9rem;font-size:1.05rem}
.tl .bp{display:flex;gap:.8rem;color:var(--mut);margin:0 0 .7rem;line-height:1.6}
.tl .bp::before{content:"–";flex:none}
.tl li::before{background:var(--mut);transition:background .4s,box-shadow .4s,transform .4s}
.tl li.on::before{background:#3DBE6B;box-shadow:0 0 0 8px rgba(61,190,107,.2);transform:scale(1.25)}
.tl::after{background:var(--fg)}
@media (max-width:760px){
#work h2{font-size:clamp(1.7rem,8.6vw,2.7rem);white-space:nowrap;margin-bottom:.7rem}
.pinbox{padding-top:calc(72px + env(safe-area-inset-top,0px))}
.floor{padding-top:28px}
}
.lcard::after{content:"";position:absolute;top:-25%;bottom:-25%;left:-70%;width:48%;background:linear-gradient(100deg,rgba(235,238,245,0),rgba(235,238,245,.62) 50%,rgba(235,238,245,0));transform:skewX(-18deg);mix-blend-mode:screen;pointer-events:none;animation:shine 2.6s ease-in-out infinite}
@keyframes shine{0%,30%{left:-70%}68%,100%{left:135%}}
.lcard{animation:edge 2.6s ease-in-out infinite}
@keyframes edge{0%,28%,76%,100%{border-color:#3a3636;box-shadow:0 20px 50px rgba(0,0,0,.5)}50%{border-color:#c9ced8;box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 34px rgba(215,222,235,.28)}}

@property --b{syntax:'<length>';inherits:true;initial-value:0px}
.pic{cursor:pointer}
#ac{position:fixed;inset:0;z-index:70;background:radial-gradient(75% 60% at 50% 45%,#2a1a10,#0a0605 80%);color:#F2EDE4;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s;overflow:hidden;touch-action:none}
#ac.on{opacity:1;visibility:visible}
#ember{position:absolute;inset:0;width:100%;height:100%}
.ach{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));left:5vw;right:5vw;display:flex;justify-content:space-between;align-items:flex-start;z-index:3}
.ach b{display:block;font:500 .7rem 'DM Mono',monospace;letter-spacing:.2em}.ach i{font-size:.8rem;color:#a39d93}
#acx{border:1px solid #4a3a2c;background:rgba(0,0,0,.45);color:#F2EDE4;border-radius:999px;padding:.4em 1em;font-size:.85rem}
.acl{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);text-align:center;width:min(70vw,260px);transition:opacity .5s}
.acl .n{font:500 .8rem 'DM Mono',monospace;letter-spacing:.24em;margin-bottom:.8rem}
.lb{display:block;height:1px;background:#4a3a2c;margin:0 auto .8rem}.lb i{display:block;height:100%;background:#d9b26a;width:0}
.acl .t{display:flex;justify-content:space-between;font:500 .62rem 'DM Mono',monospace;letter-spacing:.14em;color:#a39d93}.acl .t b{color:#F2EDE4;font-weight:500}
#ac.cardon .acl{opacity:0;pointer-events:none}
.acs{position:absolute;inset:0;display:grid;place-items:center;perspective:1100px;pointer-events:none}
.card3d{position:relative;width:min(76vw,320px);aspect-ratio:5/7.1;transform-style:preserve-3d;opacity:0;pointer-events:auto;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
#ac.cardon .card3d{opacity:1;transition:opacity .4s}
.face{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.back{transform:rotateY(180deg);background:#070605;box-shadow:0 0 0 3px #b8892b,0 24px 60px rgba(0,0,0,.6)}
.front{background:linear-gradient(160deg,#f3d98a,#b9892b 40%,#e9c56a 60%,#8c6212);box-shadow:0 24px 60px rgba(0,0,0,.6)}
.inner{position:absolute;inset:3.2%;border-radius:11px;background:linear-gradient(160deg,#a8788a,#7b4f61);padding:4% 5%;display:flex;flex-direction:column;gap:3%;box-shadow:inset 0 0 0 2px rgba(255,220,150,.55)}
.plate{background:linear-gradient(#f7ecd2,#e6d3a6);border:2px solid #c9a24a;border-radius:8px;text-align:center;font:700 clamp(.9rem,4.2vw,1.1rem) 'Bricolage Grotesque',sans-serif;color:#2a1a0e;padding:.25em 0}
.photo{position:relative;flex:0 0 46%;border:3px solid #d8b25a;border-radius:6px;overflow:hidden;background:radial-gradient(circle at 18% 30%,#7a5a3a,transparent 45%),radial-gradient(circle at 82% 62%,#c4903a88,transparent 38%),radial-gradient(circle at 60% 20%,#5a4030,transparent 40%),#1a120c}
.photo img{position:absolute;left:50%;bottom:-8%;height:118%;width:auto;transform:translateX(-50%)}
.holo{position:absolute;inset:0;background:linear-gradient(115deg,transparent 18%,rgba(255,120,160,.09) 30%,rgba(255,210,100,.15) 40%,rgba(120,255,200,.08) 50%,rgba(120,170,255,.08) 60%,transparent 72%);background-size:220% 100%;background-position:var(--hp,20%) 0;mix-blend-mode:screen;pointer-events:none}
.stats{flex:1;background:linear-gradient(#f3e8cf,#e7d7b2);border:2px solid #c9a24a;border-radius:8px;padding:3% 4%;display:grid;align-content:space-evenly}
.row{display:grid;grid-template-columns:auto 1fr auto;gap:.6em;align-items:center;font:600 clamp(.52rem,2.4vw,.68rem) 'DM Sans',sans-serif;color:#3a2a18}
.adots{position:relative;height:6px;background:radial-gradient(circle,#b9a27a 1.4px,transparent 1.8px) 0 50%/7px 6px repeat-x}
.adots::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--f);background:radial-gradient(circle,#2a1a0e 1.6px,transparent 2px) 0 50%/7px 6px repeat-x}
.foot{display:flex;justify-content:space-between;font:500 .5rem 'DM Mono',monospace;color:#f0dfc0;letter-spacing:.05em}
.glare{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,222,140,.6),transparent 48%);mix-blend-mode:overlay;opacity:var(--go,0);transition:opacity .3s}
.burn{position:absolute;inset:0;filter:url(#burnf);pointer-events:none;--b:0px}
.burn[hidden]{display:none}
.cover,.edge{position:absolute;inset:-12%}
.cover{background:#050403;-webkit-mask-image:radial-gradient(circle at 12% 112%,transparent var(--b),#000 calc(var(--b) + 2px));mask-image:radial-gradient(circle at 12% 112%,transparent var(--b),#000 calc(var(--b) + 2px))}
.edge{background:radial-gradient(circle at 12% 112%,transparent calc(var(--b) - 14px),#ff6a10 calc(var(--b) - 8px),#ffd27a calc(var(--b) - 3px),transparent var(--b))}
.achint{position:absolute;left:0;right:0;bottom:calc(5vh + env(safe-area-inset-bottom,0px));text-align:center;font:500 .62rem 'DM Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#8c7a66;line-height:1.8;opacity:0;transition:opacity .6s}
#ac.hinted .achint{opacity:1}
.front{background-size:240% 240%;animation:goldsweep 4.5s ease-in-out infinite}
@keyframes goldsweep{0%,100%{background-position:0 0}50%{background-position:100% 100%}}
.front::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(115deg,transparent 36%,rgba(255,218,130,.55) 47%,rgba(255,250,225,.7) 50%,rgba(255,218,130,.55) 53%,transparent 64%);background-size:320% 100%;background-position:var(--sp,120%) 0;mix-blend-mode:screen;opacity:.85}
#loader>*{position:relative;z-index:1}#loader>#lember{position:absolute;inset:0;width:100%;height:100%;z-index:0}
@media (max-width:760px){.hbar{margin-top:-.9rem}}
@property --ca{syntax:'<angle>';inherits:true;initial-value:0deg}
@keyframes ca{to{--ca:360deg}}
.card3d{--cw:min(76vw,320px)}
.front{background:conic-gradient(from calc(var(--ca) + var(--ang,0) * 1deg) at 50% 50%,#7a560f,#f9e08a,#b9892b,#fff6c2,#9a6b14,#f3d98a,#c8932a,#fff3b0,#7a560f);background-size:100% 100%;animation:ca 6s linear infinite;box-shadow:0 0 34px rgba(240,196,100,.35),0 24px 60px rgba(0,0,0,.6)}
.inner{display:block;padding:0;gap:0;inset:2.2%;background:radial-gradient(120% 80% at 50% 18%,#c797a5,#9b6678 72%),#9b6678;box-shadow:inset 0 0 0 1.5px rgba(255,225,160,.5)}
.inner::after{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 2px,transparent 2px 7px)}
.plate,.photo,.strip,.stats,.foot{position:absolute;margin:0}
.plate{left:16%;top:4.7%;width:68%;height:7.5%;padding:0;border:1.5px solid #c9a24a;border-radius:999px;display:flex;align-items:center;justify-content:center;font:700 calc(var(--cw)*.052)/1 'Bricolage Grotesque',sans-serif;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;color:#231a12;background:linear-gradient(#fbf3dc,#ead9ad)}
.photo{left:7.3%;top:14.6%;width:85.4%;height:35.2%;border:0;border-radius:3px;background:radial-gradient(circle at 12% 28%,rgba(255,222,170,.3) 0 6%,transparent 7%),radial-gradient(circle at 30% 60%,rgba(255,222,170,.2) 0 7%,transparent 8%),radial-gradient(circle at 84% 22%,rgba(255,200,140,.28) 0 7%,transparent 8%),radial-gradient(circle at 92% 66%,rgba(255,210,150,.25) 0 5%,transparent 6%),radial-gradient(120% 100% at 80% 30%,#5b3a2a,transparent 60%),radial-gradient(90% 90% at 12% 70%,#3d3448,transparent 60%),#17110d}
.photo img{height:150%;bottom:-53%}
.strip{left:16.7%;top:51.2%;width:66.7%;height:3%;border-radius:999px;background:linear-gradient(#fbf3dc,#ead9ad);display:flex;align-items:center;justify-content:center;font:600 calc(var(--cw)*.022)/1 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#4a3820}
.stats{left:7.3%;top:55.4%;width:85.4%;height:32.4%;padding:0 6%;border:0;border-radius:8px;display:grid;grid-template-rows:repeat(4,1fr);align-content:stretch;background:linear-gradient(#f5ebd2,#e5d4a8)}
.row{display:grid;grid-template-columns:38% 1fr auto;gap:.5em;align-items:center;font:700 calc(var(--cw)*.036)/1 'Bricolage Grotesque',sans-serif;color:#2b1d10}
.row b{font-size:calc(var(--cw)*.046);font-weight:800}
.pips{display:flex;gap:calc(var(--cw)*.009);justify-content:center}
.pips i{width:calc(var(--cw)*.017);height:calc(var(--cw)*.017);border-radius:50%;background:#2b1d10}
.pips i.e{background:none;box-shadow:inset 0 0 0 1px #2b1d10}
.foot{left:7.3%;top:89.2%;width:85.4%;height:6.5%;display:flex;justify-content:space-between;align-items:center;font:700 calc(var(--cw)*.032)/1.15 'Bricolage Grotesque',sans-serif;color:#fff1cf}
.foot span{display:flex;flex-direction:column;align-items:center;flex:1}.foot small{font:500 calc(var(--cw)*.02)/1 'DM Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#f0d6a0;opacity:.85}
.orn{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.glare{z-index:4}.burn{z-index:5}
.vp video{display:block;width:100%;height:100%;object-fit:cover}
.snd{position:absolute;right:8px;bottom:16px;border:0;background:rgba(0,0,0,.55);color:#fff;border-radius:999px;padding:.2em .55em;font-size:.8rem;cursor:pointer;z-index:2}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto}}

/* the last card must stay stuck at its slot like the others: the spacer keeps it inside #rc, so the stack can finish scrolling */
.rcard:last-child{margin-bottom:0}
#rc::after{content:"";display:block;height:70vh}
.rin{padding-bottom:0}
.rcta{position:relative;margin-top:-88px}

/* poster slider: slides every 2 seconds */
.pcar{position:relative;width:100%;max-width:340px;margin:auto;aspect-ratio:var(--ar,3/4);max-height:56vh;overflow:hidden;border-radius:12px;background:#000;box-shadow:0 14px 26px rgba(0,0,0,.35)}
.pcar .pt{display:flex;height:100%;transition:transform .6s cubic-bezier(.65,0,.35,1)}
.pcar .pt img{flex:0 0 100%;width:100%;height:100%;object-fit:contain;display:block}
.pcar .tm{position:absolute;top:6px;right:10px;font:500 .62rem 'DM Mono',monospace;color:#fff;text-shadow:0 1px 3px #000}
.pcar .dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:5px}
.pcar .dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45);transition:background .3s,transform .3s}
.pcar .dots i.on{background:#fff;transform:scale(1.25)}

/* website preview: the page scrolls up slowly inside the frame */
.spg{position:relative;width:100%;max-width:340px;margin:auto;height:var(--fh,400px);overflow:hidden;border-radius:12px;background:#fff;box-shadow:0 14px 26px rgba(0,0,0,.35)}
.spg img{display:block;width:100%;height:auto;opacity:0;animation:spgs var(--d,16s) ease-in-out infinite;will-change:transform}
.spg .tm{position:absolute;top:8px;right:8px;z-index:2;font:500 .6rem 'DM Mono',monospace;color:#fff;background:rgba(0,0,0,.55);padding:.15em .6em;border-radius:99px}
@keyframes spgs{0%{opacity:0;transform:translateY(0)}4%{opacity:1}8%{transform:translateY(0)}88%{opacity:1;transform:translateY(calc(var(--fh,400px) - 100%))}94%{opacity:1;transform:translateY(calc(var(--fh,400px) - 100%))}100%{opacity:0;transform:translateY(calc(var(--fh,400px) - 100%))}}
@media (prefers-reduced-motion:reduce){.spg img{animation:none;opacity:1}}

/* spacing between cards comes from margin-top, so tall cards can all stay stacked at the end */
.rcard{margin-bottom:0}
.rcard+.rcard{margin-top:22vh}

/* laptop only: hover a door to see what is behind it */
.dpanel{display:none}
@media (hover:hover) and (pointer:fine) and (min-width:761px){
 .door{transition:opacity .5s ease,filter .5s ease}
 .wall.hv .door:not(.hv){opacity:.08;filter:blur(2px)}
 .door.hv .leaf{transform:rotateY(-38deg)}
 .door.hv .glow{filter:brightness(1.35)}
 .dpanel{display:block;position:absolute;top:10%;width:min(360px,34%);z-index:3;pointer-events:none;opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
 .dpanel.on{opacity:1;transform:none}
 .dpanel h3{font-size:clamp(1.3rem,2.2vw,1.9rem);line-height:1.15;margin-bottom:.25rem}
 .dpanel p{color:var(--mut);font-size:.82rem;margin-bottom:.9rem;max-width:34ch}
 .dpanel ul{list-style:none;display:grid;gap:.45rem;padding:0;margin:0}
 .dpanel li{display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem;line-height:1.35;opacity:0;transform:translateX(-8px);transition:opacity .4s ease,transform .4s ease}
 .dpanel li::before{content:"";flex:none;width:6px;height:6px;margin-top:.5em;border-radius:50%;background:var(--acc,#FFD84D);box-shadow:0 0 0 1px rgba(0,0,0,.25)}
 .dpanel.on li{opacity:1;transform:none}
 .dpanel.on li:nth-child(2){transition-delay:.06s}.dpanel.on li:nth-child(3){transition-delay:.12s}.dpanel.on li:nth-child(4){transition-delay:.18s}.dpanel.on li:nth-child(5){transition-delay:.24s}
}

/* privacy & credits page */
#legal{position:fixed;inset:0;z-index:95;overflow-y:auto;overscroll-behavior:contain;background:var(--bg);color:var(--fg);padding:calc(18px + env(safe-area-inset-top,0px)) 5vw calc(80px + env(safe-area-inset-bottom,0px));opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .35s ease,transform .35s ease,visibility 0s linear .35s}
#legal.on{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease,transform .35s ease}
.lg{max-width:760px;margin:0 auto}
.lgb{border:1px solid var(--line);background:none;color:var(--fg);border-radius:999px;padding:.45em 1.1em;font-size:.85rem;cursor:pointer}
.lge{margin:3.5rem 0 .8rem;font:500 .72rem 'DM Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.lg h1{font-size:clamp(2.2rem,7vw,3.8rem);line-height:1.05;margin-bottom:1.2rem}
.lgl{font-size:1.1rem;color:var(--mut);max-width:56ch;margin-bottom:3rem}
.lg h2{font-size:clamp(1.6rem,4.2vw,2.2rem);margin:3.2rem 0 1rem;line-height:1.15}
.lg h3{font-size:1.05rem;margin:1.6rem 0 .35rem}
.lg p{color:var(--mut);margin-bottom:.9rem;max-width:68ch}
.lg a{color:var(--fg);text-underline-offset:3px}
.lgbox{border:1px solid var(--line);border-radius:16px;padding:1rem 1.2rem;margin:0 0 1.1rem;background:rgba(127,127,127,.09);line-height:1.6}
.lgbox b{color:var(--fg)}
.lgt{margin:1rem 0 0;border-top:1px solid var(--line)}
.lgr{display:grid;grid-template-columns:1.2fr 1.4fr 1.1fr;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--line);font-size:.9rem;color:var(--mut)}
.lgr span:first-child{color:var(--fg)}
.lgh{font:500 .7rem 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase}
.lgf{margin-top:3rem;font:500 .72rem 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase}
@media (max-width:640px){.lgr{grid-template-columns:1fr;gap:.15rem}.lgh{display:none}.lge{margin-top:2.6rem}}

/* mouse devices: colour brush follows the cursor (replaces the round spotlight) */
.pic canvas.brush{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-mask-image:linear-gradient(#000 92%,transparent);mask-image:linear-gradient(#000 92%,transparent)}
.pic.bm img.tint{display:none}

/* laptop: the heading sits on one line and is as large as the width allows (script.js fits it exactly) */
@media (min-width:761px){
 #work h2{white-space:nowrap;font-size:clamp(2.2rem,5.6vw,6.5rem);line-height:1.05}
 #work h2 br{display:none}
}

/* laptop footer: the email column is as wide as the address, so it never breaks into two lines */
@media (min-width:761px){
 footer{grid-template-columns:repeat(3,minmax(0,1fr)) max-content minmax(0,1fr)}
 footer .em li a{overflow-wrap:normal;word-break:normal;white-space:nowrap}
}

/* projects: two cards side by side on laptop, a scroll-driven sideways slide on phones (same idea as the doors) */
.pjd{display:none;gap:6px}.pjd i{width:7px;height:7px;border-radius:99px;background:var(--line);transition:.3s}.pjd i.on{width:26px;background:var(--fg)}
.pjt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;align-items:stretch}
.pjt .proj{flex-direction:column;align-items:flex-start;justify-content:space-between;flex-wrap:nowrap}
@media (max-width:760px){
 #project{padding:0;height:calc(100svh + 90vh)}
 .pjbox{position:sticky;top:0;height:100svh;overflow:hidden;padding:calc(84px + env(safe-area-inset-top,0px)) 5vw 0;display:flex;flex-direction:column}
 .pjd{display:flex;margin:.2rem 0 1.1rem}
 .pjt{display:flex;gap:0;will-change:transform;align-items:flex-start}
 .pjt .proj{flex:0 0 90vw;margin-right:10vw;padding:1.6rem}
 .pjt .proj h3{font-size:clamp(1.7rem,8vw,2.2rem)}
}

/* laptop: the cards inside a door are larger (wider container, bigger text and media) */
@media (min-width:761px){
 .rin{max-width:1320px}
 .rcard{padding:2.2rem 2.4rem;gap:2.6rem;border-radius:24px;grid-template-columns:1fr 1.3fr}
 .rcard h3{font-size:clamp(2rem,2.6vw,2.7rem);line-height:1.1;margin:.4rem 0 .6rem}
 .rcard p{font-size:1.05rem;line-height:1.55;max-width:42ch}
 .rcard small{font-size:.74rem}
 .chips span{font-size:.8rem;padding:.2em .85em}
 .vp{max-width:none}
 .pcar{max-width:540px}
 .spg{max-width:600px}
}