:root{--ink:#3c3540;--muted:#7e7278;--paper:#fffaf6;--cream:#f8efe7;--pink:#e9889d;--pink-soft:#f4c8d2;--coral:#df6e77;--red:#b94f5d;--green:#829b72;--sky:#b8d9d8;--yellow:#f2c56e;--purple:#9474a4;--room-accent:#e76f86;--room-second:#779889;--shadow:0 24px 70px rgba(71,43,50,.18);--font:"Noto Sans SC","Microsoft YaHei",sans-serif;--display:"ZCOOL KuaiLe","Noto Sans SC",sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:var(--font);background:#f6dfdf;overflow:hidden;letter-spacing:0}
button{font:inherit;color:inherit}
button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
.scene{position:fixed;inset:0;opacity:0;visibility:hidden;transition:opacity .8s ease,transform .8s ease;overflow:hidden}
.scene.is-active{opacity:1;visibility:visible}
.eyebrow{margin:0 0 12px;font-size:11px;font-weight:700;letter-spacing:2px;color:var(--red)}
.scene--outside{background:linear-gradient(#f6dce2 0 62%,#bfcc9e 62% 100%);transform:scale(1.04)}
.scene--outside.is-active{transform:scale(1)}
.scene--outside.is-entering{transform:scale(2.7) translateY(11%);opacity:0;transition:transform 1.35s cubic-bezier(.66,.01,.38,1),opacity .35s 1s}
.sky{position:absolute;inset:0 0 38%;overflow:hidden;background:radial-gradient(circle at 48% 10%,rgba(255,255,255,.75),transparent 38%)}
.sky:after{content:"";position:absolute;left:0;right:0;bottom:-15px;height:70px;background:linear-gradient(170deg,transparent 49%,#a8bd8b 50%)}
.cloud{position:absolute;width:115px;height:27px;background:#fffaf7;border-radius:50%;opacity:.72;filter:blur(.2px);animation:float 12s ease-in-out infinite}
.cloud:before,.cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}.cloud:before{width:48px;height:48px;left:18px;bottom:2px}.cloud:after{width:60px;height:60px;right:10px;bottom:-1px}
.cloud--one{left:8%;top:18%}.cloud--two{right:9%;top:10%;transform:scale(.7);animation-delay:-4s}.star{position:absolute;color:#fff9db;font-size:22px}.star--one{left:19%;top:12%}.star--two{right:23%;top:27%;font-size:16px}
.outside-copy{position:absolute;z-index:4;top:7vh;left:50%;width:min(92%,700px);text-align:center;transform:translateX(-50%)}
.outside-copy h1{margin:0;font:400 clamp(42px,6vw,78px)/1 var(--display);color:#644553;text-shadow:0 3px 0 rgba(255,255,255,.6)}
.outside-copy>p:last-child{font-size:15px;line-height:1.85;color:#6f5962}
.house-wrap{position:absolute;z-index:3;left:50%;bottom:8%;width:min(620px,68vw);height:min(57vh,570px);transform:translateX(-50%)}
.house-shadow{position:absolute;left:8%;right:3%;bottom:1%;height:10%;border-radius:50%;background:rgba(74,57,48,.19);filter:blur(13px)}
.house{position:absolute;left:12%;right:8%;bottom:8%;height:80%}
.house-body{position:absolute;inset:28% 0 0;background:#f2b8bf;border:5px solid #714f59;border-radius:5px 5px 12px 12px;box-shadow:inset 0 0 0 10px rgba(255,255,255,.22)}
.house-body:after{content:"";position:absolute;inset:13px;background:repeating-linear-gradient(0deg,transparent 0 26px,rgba(119,75,85,.1) 27px 29px);pointer-events:none}
.roof{position:absolute;z-index:2;top:0;left:-8%;width:116%;height:45%;background:#9a5f68;clip-path:polygon(50% 0,100% 78%,94% 100%,6% 100%,0 78%);border-radius:30px;filter:drop-shadow(0 8px 0 #6e4a53)}
.roof:after{content:"";position:absolute;inset:19% 13% 5%;background:repeating-linear-gradient(90deg,transparent 0 25px,rgba(255,255,255,.16) 26px 28px);clip-path:polygon(50% 0,100% 100%,0 100%)}
.roof-window{position:absolute;z-index:2;left:50%;bottom:13%;width:58px;height:58px;display:grid;place-items:center;transform:translateX(-50%);border:5px solid #6b4a54;border-radius:50% 50% 8px 8px;background:#ffe8ac;color:#fff;font-size:22px}
.chimney{position:absolute;z-index:1;right:15%;top:2%;width:48px;height:110px;background:#81545f;border:5px solid #684751}.chimney i{position:absolute;width:26px;height:18px;border-radius:50%;background:rgba(255,255,255,.55);filter:blur(3px);animation:smoke 3s ease-out infinite}.chimney i:nth-child(2){animation-delay:1s}.chimney i:nth-child(3){animation-delay:2s}
.door{position:absolute;z-index:3;left:50%;bottom:0;width:25%;height:67%;transform:translateX(-50%);border:6px solid #62484a;border-bottom:0;background:#b6636b;box-shadow:inset 8px 0 rgba(255,255,255,.11);cursor:pointer;transform-origin:left center;transition:filter .3s,transform .8s cubic-bezier(.6,.01,.32,1)}
.door:hover{filter:brightness(1.07)}.door.is-open{transform:translateX(-50%) perspective(600px) rotateY(-68deg)}
.door-sign{position:absolute;top:26%;left:50%;width:90%;padding:5px 1px;background:#fff4df;border:2px solid #6e5152;transform:translateX(-50%) rotate(-2deg);font-size:11px}.knob{position:absolute;right:12%;top:56%;width:12px;height:12px;border-radius:50%;background:#f3c96f;border:2px solid #765548}
.window{position:absolute;z-index:2;top:22%;width:24%;height:32%;border:6px solid #6b4b54;background:#c9e3df;box-shadow:inset 0 0 0 6px #fff0df}.window:before,.window:after{content:"";position:absolute;z-index:2;background:#7c5960}.window:before{left:50%;top:0;bottom:0;width:4px}.window:after{left:0;right:0;top:50%;height:4px}.window--left{left:8%}.window--right{right:8%}.curtain{position:absolute;inset:0;background:linear-gradient(90deg,#f5cad0 0 28%,transparent 29% 71%,#f5cad0 72%)}.plant,.lamp{position:absolute;z-index:3;left:50%;bottom:4px;transform:translateX(-50%);font-size:24px;color:#698c71}.lamp{color:#f9d05f;text-shadow:0 0 12px #fff}
.mailbox,.garden{position:absolute;z-index:4;border:0;background:none;cursor:pointer}.mailbox{right:1%;bottom:15%;width:60px;height:55px;background:#a96570;border:4px solid #664b51;border-radius:24px 24px 5px 5px;box-shadow:0 52px 0 -25px #654e46}.mailbox span{font-size:9px;color:#fff4ea}.garden{left:1%;bottom:8%;font-size:35px;color:#f5d4db;display:flex;gap:2px;text-shadow:2px 2px #7e996d}.garden span:nth-child(2){transform:translateY(-20px);color:#f4d987}.path{position:absolute;bottom:-5%;left:42%;width:22%;height:20%;background:#e9d8bd;clip-path:polygon(28% 0,68% 0,100% 100%,0 100%)}
.hotspot:after,.window[data-tip]:after,.garden:after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 12px);width:max-content;max-width:180px;padding:8px 12px;border-radius:5px;background:#3f3740;color:white;font-size:12px;opacity:0;transform:translate(-50%,8px);pointer-events:none;transition:.25s}.hotspot:hover:after,.window[data-tip]:hover:after,.garden:hover:after{opacity:1;transform:translate(-50%,0)}
.enter-cta{position:absolute;z-index:6;right:6vw;bottom:8vh;border:0;border-bottom:2px solid var(--ink);padding:10px 3px;background:none;font-weight:700;cursor:pointer}.enter-cta span{display:inline-block;margin-left:22px;transition:transform .25s}.enter-cta:hover span{transform:translateX(5px)}.outside-note{position:absolute;z-index:4;left:6vw;bottom:7vh;font-size:11px;color:#685e5e}

.scene--room{background:#ead5ce;transform:scale(1.08)}.scene--room.is-active{transform:scale(1)}
.room-ceiling{position:absolute;z-index:3;left:0;right:0;top:0;height:9%;background:#e7c4bd;border-bottom:5px solid #9b7270}.hanging-lamp{position:absolute;left:50%;top:0;width:52px;height:48px;padding-top:18px;text-align:center;color:#fff0ab;background:#715963;clip-path:polygon(44% 0,56% 0,60% 50%,100% 100%,0 100%);text-shadow:0 0 10px #fff}
.room-wall{position:absolute;inset:8% 0 27%;background:#f4ddd5}.wall-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(128,88,88,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(128,88,88,.05) 1px,transparent 1px);background-size:28px 28px}.room-wall:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(115,78,77,.12),transparent 10% 90%,rgba(115,78,77,.12))}
.room-floor{position:absolute;inset:73% 0 0;background:repeating-linear-gradient(90deg,#b98676 0 9%,#bd8e7d 9.2% 18%);clip-path:polygon(0 0,100% 0,92% 100%,8% 100%)}.rug{position:absolute;left:27%;right:25%;bottom:3%;height:64%;border:5px solid #6f7771;border-radius:50%;background:repeating-linear-gradient(90deg,var(--room-second) 0 8%,#d6b2a4 8% 16%);box-shadow:inset 0 0 0 8px rgba(255,255,255,.23);transition:background .5s}
.room-header{position:absolute;z-index:10;left:4vw;right:4vw;top:3.5vh;display:flex;justify-content:space-between;align-items:flex-start}.room-header h2{margin:0;font:400 26px var(--display)}.room-header .eyebrow{margin-bottom:4px}.icon-button{width:40px;height:40px;border:1px solid rgba(71,55,61,.3);border-radius:50%;background:rgba(255,250,246,.75);font-size:22px;cursor:pointer;box-shadow:0 5px 15px rgba(60,40,45,.1)}
.room-object{position:absolute;z-index:4;border:0;background:none;padding:0;cursor:pointer;transition:transform .3s,filter .3s}.room-object:hover{transform:translateY(-5px);filter:brightness(1.03)}.object-label{position:absolute;z-index:20;left:50%;bottom:calc(100% + 12px);width:max-content;padding:8px 11px;background:#3e363e;color:#fff;border-radius:4px;font-size:12px;opacity:0;transform:translate(-50%,7px);transition:.25s;pointer-events:none}.room-object:hover .object-label,.room-object:focus-visible .object-label{opacity:1;transform:translate(-50%,0)}
.memory-wall{left:7%;top:16%;width:24%;height:38%;border:7px solid #876858;background:#d9b184;box-shadow:inset 0 0 0 3px #f2d4ac,5px 8px 0 rgba(83,58,58,.15)}.mini-photo{position:absolute;width:31%;height:52%;padding:5px;background:#fff8ed;box-shadow:2px 3px 5px rgba(50,30,30,.2)}.mini-photo i{display:block;height:68%;background:var(--room-accent)}.mini-photo b{font:400 10px var(--display)}.mini-photo--one{left:8%;top:12%;transform:rotate(-6deg)}.mini-photo--two{left:36%;top:29%;transform:rotate(4deg)}.mini-photo--three{right:5%;top:10%;transform:rotate(8deg)}.mini-photo--two i{background:var(--room-second)}.mini-photo--three i{background:#e9bd69}.pin{position:absolute;z-index:5;width:8px;height:8px;border-radius:50%;background:var(--red)}.pin--one{left:11%;top:8%}.pin--two{right:9%;top:7%}.wall-ribbon{position:absolute;z-index:4;left:6%;right:5%;top:55%;height:35%;border:2px dashed #af6f78;border-color:#af6f78 transparent transparent;border-radius:50%}
.room-window{left:38%;top:11%;width:19%;height:39%;border:10px solid #805e5d;background:#b9d6d3;box-shadow:inset 0 0 0 6px #f0d8ca,4px 5px 0 rgba(80,50,50,.15)}.window-sky{position:absolute;inset:8px;background:linear-gradient(#9fcfd6 0 60%,#889e80 61%)}.window-sky i{position:absolute;right:14%;top:14%;width:30px;height:30px;border-radius:50%;background:#f7d979;box-shadow:0 0 30px #fff4b9}.window-sky b{position:absolute;left:16%;top:20%;color:#fff}.window-sky em{position:absolute;left:10%;right:10%;bottom:12%;height:22%;background:#6d8a70;clip-path:polygon(0 100%,20% 25%,39% 90%,62% 0,100% 100%)}.window-frame:before,.window-frame:after{content:"";position:absolute;z-index:2;background:#805e5d}.window-frame:before{left:50%;top:0;bottom:0;width:7px}.window-frame:after{left:0;right:0;top:51%;height:7px}
.wardrobe{right:5%;top:13%;width:18%;height:82%;border:7px solid #765655;border-radius:50% 50% 5px 5px;background:#b78076;box-shadow:inset 0 0 0 6px #d7a497,6px 5px rgba(68,45,45,.15)}.wardrobe-door{position:absolute;top:11%;bottom:7%;width:42%;border:2px solid #765655;background:rgba(255,255,255,.08)}.wardrobe-door:nth-of-type(2){left:7%}.wardrobe-door:nth-of-type(3){right:7%}.wardrobe-door i{position:absolute;top:48%;width:6px;height:13px;border-radius:3px;background:#f1ca76}.wardrobe-door:nth-of-type(2) i{right:6px}.wardrobe-door:nth-of-type(3) i{left:6px}.wardrobe-crown{position:absolute;top:2%;left:50%;transform:translateX(-50%);font-size:27px;color:#f5cb7f}
.avatar{left:30%;bottom:-39%;width:12%;height:70%;transform-origin:center bottom}.avatar:hover{transform:translateY(-5px) rotate(2deg)}.avatar-head,.big-avatar .avatar-head{position:absolute;z-index:4;top:0;left:50%;width:80%;aspect-ratio:1;transform:translateX(-50%);border-radius:48% 48% 43% 43%;background:#f4c5aa;border:3px solid #644d52}.hair{position:absolute;z-index:3;inset:-8% -6% 13%;border-radius:50% 50% 44% 44%;background:#5b4149;clip-path:polygon(0 0,100% 0,100% 100%,85% 64%,70% 78%,53% 45%,35% 71%,14% 57%,0 100%)}.face{position:absolute;z-index:4;inset:0}.face b{position:absolute;top:53%;width:6%;height:8%;border-radius:50%;background:#4b3940;animation:blink 5s infinite}.face b:first-child{left:31%}.face b:nth-child(2){right:31%}.face em{position:absolute;left:50%;top:68%;width:16%;height:7%;border-bottom:2px solid #9a5962;border-radius:50%;transform:translateX(-50%)}.avatar-body,.big-avatar .avatar-body{position:absolute;z-index:2;left:50%;top:30%;width:75%;height:54%;transform:translateX(-50%);border:3px solid #604c52;border-radius:45% 45% 17% 17%;background:var(--room-accent);transition:background .5s}.collar{position:absolute;top:-2%;left:50%;width:45%;height:21%;transform:translateX(-50%);border-radius:0 0 50% 50%;background:#fff1e7;border-bottom:2px solid #604c52}.badge{position:absolute;left:50%;top:33%;transform:translateX(-50%);color:#fff4b5}.avatar-arm{position:absolute;z-index:5;right:2%;top:39%;width:20%;height:35%;border-radius:12px;background:var(--room-accent);border:3px solid #604c52;transform:rotate(-10deg);transform-origin:top;animation:wave 3s ease-in-out infinite}.avatar-legs{position:absolute;z-index:1;left:29%;right:29%;bottom:0;height:27%;display:flex;justify-content:space-between}.avatar-legs i{width:31%;height:100%;border:3px solid #604c52;background:#6b5360;border-radius:0 0 8px 8px}.avatar-bubble{position:absolute;z-index:20;left:68%;top:2%;width:max-content;padding:8px 12px;border-radius:12px 12px 12px 2px;background:#fff8f2;border:2px solid #604d52;font-size:11px;opacity:0;transform:translateY(6px);transition:.25s}.avatar:hover .avatar-bubble{opacity:1;transform:translateY(0)}
.desk{left:38%;bottom:-39%;width:30%;height:72%}.desk:after{content:"";position:absolute;left:0;right:0;top:53%;height:13%;border:4px solid #6b514b;background:#ae7768;box-shadow:8px 13vh 0 -4px #6b514b,-8px 13vh 0 -4px #6b514b}.monitor{position:absolute;z-index:3;left:8%;top:8%;width:34%;height:40%;border:7px solid #625159;border-radius:5px;background:#3f5555;box-shadow:0 5px #7a5a54}.monitor:after{content:"";position:absolute;left:50%;bottom:-27px;width:28%;height:27px;background:#625159;transform:translateX(-50%)}.monitor i{position:absolute;inset:15%;color:#d5e8cc;text-align:left;font:400 12px/1.5 monospace}.monitor b{color:#f5c9d2}.journal-book{position:absolute;z-index:7;left:44%;top:42%;width:32%;height:22%;display:flex;flex-direction:column;justify-content:center;background:#db788b;border:3px solid #654d52;border-radius:3px 10px 10px 3px;transform:rotate(-4deg);box-shadow:4px 5px #765457;color:white}.journal-book b{font:400 13px var(--display)}.journal-book i{font-size:8px;font-style:normal}.desk-cup{position:absolute;z-index:4;right:10%;top:35%;width:15%;height:23%;padding-top:10px;background:#efe0c5;border:3px solid #6c5552}.desk-drawer{position:absolute;z-index:2;left:7%;right:7%;top:67%;height:18%;border:3px solid #6b514b;background:#a76e62}.desk-drawer:after{content:"";position:absolute;left:50%;top:25%;width:20%;height:5px;border-radius:3px;background:#644a47}
.magic-desk{right:24%;top:46%;width:12%;height:30%}.orb{position:absolute;left:50%;top:0;width:67%;aspect-ratio:1;transform:translateX(-50%);border:4px solid #66515a;border-radius:50%;background:radial-gradient(circle,#fff5bc 0,var(--room-second) 46%,#5f6f79);box-shadow:0 0 30px var(--room-second);animation:pulse 2.5s ease-in-out infinite}.orb i{position:absolute;inset:18%;border:1px solid #fff;border-radius:50%;animation:spin 5s linear infinite}.orb b{position:absolute;inset:0;display:grid;place-items:center;color:white;font-size:11px}.magic-desk:after{content:"";position:absolute;left:18%;right:18%;top:58%;height:40%;border:4px solid #644c4e;background:#9c6d65;clip-path:polygon(15% 0,85% 0,100% 100%,0 100%)}.spark{position:absolute;right:5%;top:5%;color:#fff7ae;animation:float 2s infinite}
.room-hint{position:absolute;z-index:8;left:4vw;bottom:5vh;font-size:11px;color:#fff1e7}.room-dock{position:absolute;z-index:20;left:50%;bottom:3.5vh;display:flex;transform:translateX(-50%);padding:5px;border:1px solid rgba(255,255,255,.55);border-radius:7px;background:rgba(65,51,56,.74);backdrop-filter:blur(12px);box-shadow:0 8px 28px rgba(43,31,35,.2)}.room-dock button{min-width:91px;padding:8px 11px;border:0;border-right:1px solid rgba(255,255,255,.15);background:none;color:#fff;font-size:10px;cursor:pointer}.room-dock button:last-child{border-right:0}.room-dock span{display:block;font-size:15px;color:#f5ced4}
.welcome-home{position:fixed;z-index:100;inset:0;display:grid;place-items:center;background:rgba(45,35,40,.56);color:#fff;font:400 clamp(30px,5vw,56px) var(--display);opacity:0;visibility:hidden;transition:.5s;pointer-events:none}.welcome-home.is-visible{opacity:1;visibility:visible}

.overlay{position:fixed;z-index:50;inset:0;background:var(--paper);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(30px);transition:opacity .45s,transform .55s cubic-bezier(.23,.74,.27,1),visibility .45s;overflow:auto}.overlay.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:none}.overlay-topbar,.case-nav,.lab-topbar{position:sticky;z-index:10;top:0;display:flex;align-items:center;justify-content:space-between;padding:18px 4vw;border-bottom:1px solid #dfd3ce;background:rgba(255,250,246,.9);backdrop-filter:blur(12px);font-size:10px;letter-spacing:1px}.back-button{border:0;background:none;font-weight:600;cursor:pointer}.overlay-topbar p{margin:0}.works-intro{text-align:center;padding:7vh 20px 2vh}.works-intro h2,.lab-hero h2{margin:0;font:400 clamp(40px,6vw,72px)/1.1 var(--display)}.works-intro>p:last-child,.lab-hero>p:last-child{color:var(--muted);line-height:1.8}.memory-track{position:relative;width:max(1200px,100vw);height:500px;margin-top:10px}.track-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.track-line path{fill:none;stroke:#c68087;stroke-width:2;stroke-dasharray:7 7}.project-photo{position:absolute;width:172px;padding:11px 11px 15px;background:#fff;border:1px solid #ddd0c7;box-shadow:0 10px 20px rgba(70,49,52,.16);transition:.3s;cursor:pointer}.project-photo:hover{z-index:3;transform:translateY(-10px) rotate(0)!important}.project-photo h3{margin:11px 2px 1px;font:400 22px var(--display)}.project-photo p{margin:0 2px 10px;font-size:10px;color:var(--muted)}.project-photo button{border:0;border-bottom:1px solid var(--ink);padding:3px 0;background:none;font-size:10px;cursor:pointer}.photo-art{position:relative;height:160px;display:grid;place-items:center;overflow:hidden}.photo-art i{position:relative;z-index:2;font:400 54px var(--display);font-style:normal;color:white}.photo-art b{position:absolute;right:8px;bottom:5px;color:white;font-size:10px}.photo-art:after{content:"";position:absolute;width:120px;height:120px;border:1px solid rgba(255,255,255,.7);transform:rotate(35deg)}.art--brand{background:#c76973}.art--visual{background:linear-gradient(45deg,#809b8a 50%,#edc76c 50%)}.art--ui{background:#887c9b}.art--motion{background:#d88969}.art--ai{background:radial-gradient(circle at 30% 20%,#f0d684,#a0678b 55%,#4f676b)}.art--interactive{background:#4f7570}.tape{position:absolute;z-index:2;top:-12px;left:50%;width:55px;height:24px;background:rgba(240,203,144,.65);transform:translateX(-50%) rotate(3deg)}.project-photo--1{left:4%;top:150px;transform:rotate(-5deg)}.project-photo--2{left:20%;top:40px;transform:rotate(4deg)}.project-photo--3{left:36%;top:210px;transform:rotate(-3deg)}.project-photo--4{left:53%;top:52px;transform:rotate(5deg)}.project-photo--5{left:70%;top:205px;transform:rotate(-4deg)}.project-photo--6{left:86%;top:70px;transform:rotate(3deg)}.drag-note{text-align:center;font-size:10px;color:var(--muted);padding-bottom:30px}
.overlay--project{background:#fff}.case-nav{background:rgba(255,255,255,.92)}.case-hero{min-height:88vh;display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch}.case-copy{align-self:center;padding:8vw}.case-copy h2{max-width:650px;margin:0;font:500 clamp(48px,7vw,100px)/1.05 var(--font);letter-spacing:0}.case-lead{max-width:580px;margin:28px 0;color:#6f6668;font-size:17px;line-height:1.8}.case-meta{display:grid;grid-template-columns:1fr 1fr;gap:20px 35px;margin-top:50px}.case-meta div{padding-top:12px;border-top:1px solid #ddd}.case-meta dt{font-size:10px;color:#918589}.case-meta dd{margin:6px 0 0;font-size:12px}.case-keyvisual{position:relative;display:flex;flex-direction:column;justify-content:center;padding:8%;overflow:hidden;background:#b9d0c3;color:#923c4d}.case-keyvisual:before{content:"";position:absolute;inset:18%;border:1px solid rgba(255,255,255,.7);transform:rotate(25deg)}.case-keyvisual span{position:relative;font:700 16vw/.8 var(--font)}.case-keyvisual b{position:relative;margin-top:30px;font-size:28px}.case-keyvisual i{position:absolute;right:6%;bottom:4%;font-size:11px}.case-section{display:grid;grid-template-columns:70px 1fr 1fr;gap:7vw;padding:12vh 7vw;align-items:start}.case-section h3,.case-process h3,.case-result h3{margin:0;font-size:clamp(28px,4vw,52px)}.case-section>p{max-width:600px;margin:30px 0;line-height:2;color:#6c6265}.section-no{font-size:12px}.case-section--dark{background:#38363a;color:#fff}.case-section--dark .eyebrow{color:#f4bdc8}.insight-grid{grid-column:2/4;display:grid;grid-template-columns:repeat(3,1fr);gap:2px}.insight-grid article{min-height:210px;padding:30px;background:#4a474b}.insight-grid b{color:#e6aab6}.insight-grid p{color:#c9c1c3;font-size:13px}.case-process{display:grid;grid-template-columns:.8fr 1.2fr;gap:8vw;padding:13vh 8vw;background:#f1e7df}.case-process>div>p:last-child{line-height:2;color:#776e70}.process-board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;transform:rotate(2deg)}.process-board span{display:grid;place-items:center;aspect-ratio:1;background:#fff9ef;border:1px solid #d3c5ba;box-shadow:4px 5px 0 rgba(86,63,63,.1);font:400 20px var(--display)}.process-board span:nth-child(2n){background:#e8bbc3}.process-board span:nth-child(3n){background:#b9d1c3}.case-result{padding:12vh 8vw}.case-result>p:not(.eyebrow){max-width:620px;line-height:2;color:#756c6e}.result-visual{position:relative;height:58vh;min-height:400px;margin-top:8vh;display:grid;place-items:center;overflow:hidden;background:#a84959;color:#fff}.result-visual:before,.result-visual:after{content:"";position:absolute;width:45%;aspect-ratio:1;border:1px solid rgba(255,255,255,.45);transform:rotate(45deg)}.result-visual:after{width:25%;transform:rotate(20deg)}.result-visual b{position:relative;z-index:2;font-size:clamp(30px,5vw,72px);text-align:center}.result-visual span{position:absolute;right:4%;bottom:4%;font-size:10px}.case-footer{display:flex;justify-content:space-between;align-items:center;padding:9vh 8vw;background:#333135;color:white}.case-footer p{font:400 26px var(--display)}.case-footer button{padding:15px 0;border:0;border-bottom:1px solid #fff;background:none;color:#fff;cursor:pointer}.case-footer button span{margin-left:30px}
.close-circle{position:fixed;z-index:20;right:4vw;top:4vh;width:42px;height:42px;border:1px solid #958386;border-radius:50%;background:rgba(255,250,246,.88);font-size:25px;cursor:pointer}.overlay--journal{display:grid;place-items:center;background:#8d786e;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 1px,transparent 1px 5px)}.journal-shell{position:relative;width:min(940px,90vw);height:min(640px,82vh);perspective:1400px}.journal-cover,.journal-pages{position:absolute;inset:0}.journal-cover{z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;border:8px solid #654b4d;border-radius:6px 20px 20px 6px;background:#cd7180;color:#fff;box-shadow:var(--shadow),inset 0 0 0 2px #e8a2ad;transform-origin:left center;transition:transform 1s cubic-bezier(.55,.02,.33,1),opacity .4s .6s}.journal-cover:before{content:"";position:absolute;inset:5%;border:1px solid rgba(255,255,255,.42)}.journal-cover span{font-size:10px;letter-spacing:2px}.journal-cover h2{margin:15px;font:400 clamp(45px,8vw,82px) var(--display)}.journal-cover p{font-size:12px}.journal-cover button{position:absolute;bottom:8%;border:0;border-bottom:1px solid white;background:none;color:#fff;cursor:pointer}.journal-cover.is-open{transform:rotateY(-105deg);opacity:0;pointer-events:none}.journal-pages{overflow:hidden;border:6px solid #d3bda9;border-radius:5px 15px 15px 5px;background:#fffbef;box-shadow:var(--shadow)}.journal-pages:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(137,176,180,.12) 1px,transparent 1px);background-size:100% 25px;pointer-events:none}.binding{position:absolute;z-index:10;left:49%;top:0;bottom:0;width:2%;background:linear-gradient(90deg,rgba(80,50,50,.15),transparent,rgba(80,50,50,.12));pointer-events:none}.journal-page{position:absolute;inset:0;padding:7% 9% 10%;opacity:0;visibility:hidden;transform:rotateY(8deg) translateX(4%);transition:.45s;overflow:auto}.journal-page.is-current{opacity:1;visibility:visible;transform:none}.journal-page:nth-child(odd){background:linear-gradient(90deg,transparent 49.8%,rgba(70,50,50,.07) 50%,transparent 50.3%)}.journal-page h3{width:44%;margin:5px 0 28px;font:400 clamp(30px,5vw,54px)/1.2 var(--display)}.journal-page>p:not(.page-date):not(.hand-note):not(.placeholder-note){width:43%;font-size:13px;line-height:1.9}.page-date{font-size:9px;color:#a56871;letter-spacing:2px}.portrait-placeholder{position:absolute;right:9%;top:14%;width:34%;height:53%;display:grid;place-items:center;border:10px solid #fff;background:#e2c4b5;box-shadow:3px 4px 12px rgba(70,50,50,.18);transform:rotate(4deg)}.portrait-placeholder span{text-align:center;color:#856d70;font:400 19px var(--display)}.hand-note{position:absolute;right:8%;bottom:10%;max-width:38%;transform:rotate(-3deg);font:400 18px/1.5 var(--display);color:#ad626c}.timeline{list-style:none;width:85%;padding:0;margin:35px 0}.timeline li{display:grid;grid-template-columns:80px 1fr;gap:25px;padding:15px;border-bottom:1px dashed #c6989f}.timeline b{font-size:20px;color:#b95766}.timeline span{font-size:13px}.placeholder-note{font-size:10px;color:#a08d8e}.sticker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:83%}.sticker-grid span{display:flex;flex-direction:column;justify-content:center;align-items:center;aspect-ratio:1.2;padding:10px;background:#f1c5cb;border:1px dashed #ad6974;transform:rotate(-2deg);font-size:11px}.sticker-grid span:nth-child(even){background:#cad8bc;transform:rotate(2deg)}.sticker-grid b{font:400 36px var(--display)}.skill-stickers{display:flex;flex-wrap:wrap;gap:15px;width:80%}.skill-stickers span{padding:12px 18px;border:2px solid #bc6975;border-radius:50%;background:#fffaf0;transform:rotate(-2deg);font:400 17px var(--display)}.skill-stickers span:nth-child(3n){background:#d2ddc7;transform:rotate(3deg)}.experience-list{list-style:none;width:85%;padding:0}.experience-list li{display:flex;justify-content:space-between;padding:15px 5px;border-bottom:1px dashed #bda7a2}.experience-list b{font:400 19px var(--display)}.experience-list span{font-size:11px;color:#927f80}.contact-lines{width:min(80%,620px);margin-top:25px}.contact-lines span{display:flex;justify-content:space-between;gap:25px;padding:13px 0;border-bottom:1px solid #d7c8c2;font-size:12px}.contact-lines b{font-weight:500}.page-controls{position:absolute;z-index:20;right:4%;bottom:3%;display:flex;gap:15px;align-items:center}.page-controls button{width:34px;height:34px;border:1px solid #bba5a1;border-radius:50%;background:#fffaf1;cursor:pointer}.page-controls span{font-size:10px}
.overlay--about{background:#e9d7cf}.about-layout,.wardrobe-layout{min-height:100%;display:grid;grid-template-columns:1fr 1fr}.about-portrait{position:relative;display:grid;place-items:center;background:#c6d2bd}.about-portrait:before{content:"";position:absolute;inset:10%;border:1px solid rgba(255,255,255,.65);border-radius:50% 50% 40% 40%}.big-avatar{position:relative;width:270px;height:470px}.big-avatar .avatar-head{width:65%;}.big-avatar .avatar-body{top:28%;height:58%;width:70%}.portrait-note{position:absolute;right:15%;top:18%;padding:10px 16px;border:2px solid #695159;background:#fff8ef;transform:rotate(4deg);font:400 18px var(--display)}.about-copy{align-self:center;padding:10vw}.about-copy h2{margin:0;font:400 clamp(45px,7vw,80px) var(--display)}.about-lead{max-width:570px;font-size:19px;line-height:1.8}.about-note{margin:45px 0;padding:22px;border-left:3px solid #c55f70;background:rgba(255,255,255,.42);font-size:13px;color:#716568}.about-copy>button{border:0;border-bottom:1px solid var(--ink);padding:10px 0;background:none;cursor:pointer}
.overlay--wardrobe{background:#f4e8df}.dress-stage{position:relative;display:grid;place-items:center;background:var(--room-second);transition:background .5s;overflow:hidden}.dress-stage:before{content:"";position:absolute;width:70%;height:80%;border:1px solid rgba(255,255,255,.65);border-radius:50% 50% 0 0}.stage-shadow{position:absolute;left:27%;right:27%;bottom:10%;height:7%;border-radius:50%;background:rgba(65,45,48,.2);filter:blur(8px)}.identity-panel{align-self:center;padding:8vw}.identity-panel h2{margin:0;font:400 clamp(42px,6vw,75px)/1.1 var(--display)}.identity-panel>p:not(.eyebrow){color:#7d6d70}.identity-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:35px 0}.identity-options button{display:flex;align-items:center;gap:12px;min-height:75px;padding:12px;border:1px solid #d6c5bd;border-radius:5px;background:#fffaf6;text-align:left;cursor:pointer}.identity-options button.is-selected{border:2px solid var(--room-accent);box-shadow:4px 5px 0 var(--room-second)}.identity-options i{width:17px;height:17px;border-radius:50%;background:var(--room-accent)}.identity-options span{font-size:10px;color:#918082}.identity-options b{display:block;margin-bottom:3px;color:#4b4044;font-size:13px}.wear-button{border:0;border-bottom:1px solid #504347;padding:10px 0;background:none;cursor:pointer}
.overlay--lab{background:#232428;color:#f9f2ee}.lab-topbar{background:rgba(35,36,40,.88);border-color:#4a4a4e}.lab-topbar .back-button{color:#fff}.lab-hero{padding:10vh 8vw 7vh}.lab-hero .eyebrow{color:#e9a7b6}.lab-flow{display:flex;align-items:center;justify-content:center;gap:2vw;margin:0 8vw 9vh;padding:25px;border-top:1px solid #55545a;border-bottom:1px solid #55545a}.lab-flow span{font-size:13px}.lab-flow i{color:#d48ba0}.lab-grid{display:grid;grid-template-columns:1.4fr .8fr;grid-template-rows:1fr 1fr;gap:14px;padding:0 8vw}.experiment{position:relative;min-height:260px;padding:24px;background:#313238;overflow:hidden}.experiment--main{grid-row:1/3;min-height:540px}.experiment>p{font-size:9px;letter-spacing:2px;color:#bda6ad}.experiment h3{position:absolute;left:24px;bottom:48px;margin:0;font-size:24px}.experiment>span{position:absolute;left:24px;bottom:25px;font-size:10px;color:#aaa3a6}.generative-art{position:absolute;inset:13%;display:grid;place-items:center}.generative-art i{position:absolute;width:65%;aspect-ratio:1;border:1px solid #eaa4b5;transform:rotate(35deg);animation:spin 12s linear infinite}.generative-art i:nth-child(2){width:45%;border-color:#b4dbd2;animation-direction:reverse}.generative-art i:nth-child(3){width:25%;border-color:#f3d477}.generative-art b{font-size:65px;color:#f4e8e9}.motion-art{position:absolute;right:10%;top:12%;width:55%;height:60%}.motion-art i{position:absolute;inset:20%;border:4px solid #e28ca2;border-radius:50%;animation:pulse 2s infinite}.motion-art i:nth-child(2){inset:5%;border-color:#e7c46f;animation-delay:.4s}.motion-art i:nth-child(3){inset:35%;border-color:#8ebbb3;animation-delay:.8s}.interaction-art{position:absolute;right:15%;top:17%;font-size:80px;color:#e5a1b2}.interaction-art b{position:absolute;right:-25px;top:0;font-size:26px;color:#f0d175}.lab-statement{padding:12vh 8vw;text-align:center;font-size:clamp(24px,4vw,47px);color:#9e999b}.lab-statement b{color:#fff;font-weight:500}
.overlay--contact{display:grid;place-items:center;background:#c7d1bc}.letter{position:relative;width:min(700px,88vw);padding:8vw;background:#fffaf0;box-shadow:var(--shadow);transform:rotate(-1deg)}.letter:before{content:"";position:absolute;inset:18px;border:1px solid #dfc9be;pointer-events:none}.letter h2{margin:0;font:400 clamp(38px,6vw,66px)/1.25 var(--display)}.letter .contact-lines{width:100%;margin:35px 0}.signature{text-align:right;font:400 20px var(--display);color:#b65d6a}
.cursor-tooltip{position:fixed;z-index:200;padding:7px 10px;border-radius:4px;background:#3e363d;color:white;font-size:10px;opacity:0;visibility:hidden;pointer-events:none;transform:translate(12px,12px);transition:opacity .15s}

body[data-theme="ui"]{--room-accent:#6e8fa5;--room-second:#d7b36e}.scene--room:has(+*){}
body[data-theme="motion"]{--room-accent:#9a6da1;--room-second:#e98aa1}
body[data-theme="ai"]{--room-accent:#4e8b87;--room-second:#b07997}
body[data-theme="ui"] .room-wall:after{content:"UI / UX\A □  ◉  ▤\A interface system";white-space:pre;position:absolute;left:58%;top:12%;color:rgba(75,85,92,.18);font:700 22px/1.5 monospace}
body[data-theme="motion"] .room-wall:after{content:"00:00:04:12  →  →  →";position:absolute;left:32%;top:7%;color:rgba(100,56,94,.2);font:700 18px monospace;animation:slideText 4s linear infinite}
body[data-theme="ai"] .room-wall:after{content:"PROMPT → GENERATE → CURATE";position:absolute;left:34%;top:8%;color:rgba(45,100,97,.2);font:700 18px monospace}

@keyframes float{50%{transform:translateY(-8px)}}@keyframes smoke{0%{right:0;top:-10px;opacity:0}35%{opacity:.6}100%{right:30px;top:-80px;transform:scale(1.8);opacity:0}}@keyframes blink{0%,45%,49%,100%{transform:scaleY(1)}47%{transform:scaleY(.1)}}@keyframes wave{0%,45%,100%{transform:rotate(-10deg)}55%,65%{transform:rotate(-55deg)}60%,70%{transform:rotate(-40deg)}}@keyframes pulse{50%{transform:translateX(-50%) scale(1.08);filter:brightness(1.15)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes slideText{50%{transform:translateX(30px)}}

@media(max-width:820px){
  .outside-copy{top:6vh}.outside-copy h1{font-size:46px}.house-wrap{width:95vw;height:53vh;bottom:14%}.house{left:8%;right:5%}.enter-cta{right:50%;bottom:5vh;transform:translateX(50%)}.outside-note{display:none}
  .room-header{top:2vh}.room-header h2{font-size:19px}.room-wall{inset:8% 0 32%}.room-floor{inset:68% 0 0}.memory-wall{left:3%;top:17%;width:31%;height:32%}.room-window{left:39%;top:12%;width:25%;height:34%}.wardrobe{right:2%;top:17%;width:24%;height:80%}.avatar{left:19%;bottom:-48%;width:18%;height:80%}.desk{left:34%;bottom:-48%;width:39%;height:79%}.magic-desk{display:none}.room-hint{display:none}.room-dock{bottom:2vh;width:94%;overflow:auto;justify-content:flex-start}.room-dock button{min-width:83px;padding:7px 6px}
  .works-intro{padding-top:5vh}.memory-track{transform:scale(.88);transform-origin:left top;margin-bottom:-50px}.case-hero{grid-template-columns:1fr}.case-copy{padding:15vh 7vw 8vh}.case-copy h2{font-size:52px}.case-keyvisual{min-height:500px}.case-keyvisual span{font-size:34vw}.case-section{grid-template-columns:35px 1fr;padding:10vh 6vw}.case-section>p{grid-column:2}.insight-grid{grid-column:2;grid-template-columns:1fr}.case-process{grid-template-columns:1fr;padding:10vh 7vw}.case-result{padding:10vh 7vw}.case-footer{align-items:flex-start;flex-direction:column}
  .journal-shell{width:94vw;height:84vh}.journal-page{padding:12% 8% 15%}.journal-page h3{width:100%;font-size:38px}.journal-page>p:not(.page-date):not(.hand-note):not(.placeholder-note){width:100%}.portrait-placeholder{position:relative;right:auto;top:auto;width:74%;height:220px;margin:20px auto}.hand-note{position:relative;right:auto;bottom:auto;max-width:100%;margin-top:20px}.sticker-grid{width:100%;grid-template-columns:1fr 1fr}.skill-stickers{width:100%}.timeline,.experience-list{width:100%}.contact-lines{width:100%}
  .about-layout,.wardrobe-layout{grid-template-columns:1fr}.about-portrait,.dress-stage{min-height:52vh}.big-avatar{transform:scale(.75)}.about-copy,.identity-panel{padding:14vh 8vw}.identity-options{grid-template-columns:1fr}.wardrobe-layout{padding-top:0}.dress-stage{min-height:48vh}.overlay--wardrobe .close-circle,.overlay--about .close-circle{position:absolute}.lab-flow{overflow:auto;justify-content:flex-start}.lab-flow span{min-width:max-content}.lab-grid{grid-template-columns:1fr;grid-template-rows:auto}.experiment--main{grid-row:auto;min-height:460px}.letter{padding:12vw 9vw}
}
@media(max-width:480px){.outside-copy>p:last-child{font-size:13px}.house-wrap{height:46vh}.mailbox{right:0}.garden{left:0;transform:scale(.75)}.roof-window{width:47px;height:47px}.door{width:28%}.room-window{left:38%;width:27%}.memory-wall{height:28%}.avatar{left:16%;width:21%}.desk{left:33%;width:42%}.room-dock button{min-width:76px;font-size:9px}.journal-cover h2{font-size:47px}.journal-page h3{font-size:32px}.sticker-grid span{font-size:9px}.sticker-grid b{font-size:30px}.about-copy h2,.identity-panel h2{font-size:44px}.case-meta{grid-template-columns:1fr}.case-keyvisual{min-height:400px}.case-copy h2{font-size:46px}.result-visual{min-height:330px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* Reference-led soft pixel art direction */
body:after{content:"";position:fixed;z-index:300;inset:0;pointer-events:none;opacity:.14;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");mix-blend-mode:multiply}
.scene--outside{background:#f7e8dc}
.scene--outside .sky{background:linear-gradient(180deg,#faeee6 0%,#f4e2d8 100%)}
.scene--outside .sky:after{display:none}
.outside-copy{top:4.5vh;padding:13px 24px 16px;border:1px solid rgba(136,91,91,.18);background:rgba(255,248,240,.83);box-shadow:5px 6px 0 rgba(173,119,125,.1);backdrop-filter:blur(8px)}
.outside-copy h1{font-size:clamp(38px,5vw,67px)}
.house-wrap{bottom:2%;width:min(1120px,87vw);height:min(72vh,700px)}
.reference-house-image{position:absolute;z-index:3;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:auto;filter:saturate(.8) contrast(.96) drop-shadow(0 22px 24px rgba(89,59,57,.14))}
.house-wrap>.house,.house-wrap>.house-shadow,.house-wrap>.path,.house-wrap>.garden{display:none}
.mailbox{z-index:8;right:20%;bottom:19%;width:7%;height:10%;opacity:.01}
.house-wrap:after{content:"轻像素 · 纸艺小屋";position:absolute;z-index:7;right:8%;bottom:13%;padding:8px 13px;border:1px solid #c9a9a3;background:#fff8ef;box-shadow:4px 4px 0 #e8cbc3;font:400 13px var(--display);transform:rotate(2deg)}
.enter-cta{z-index:9;right:4vw;bottom:5vh;padding:12px 17px;border:1px solid #a77f7f;background:#fff8ef;box-shadow:4px 4px 0 #d9adb2}
.outside-note{z-index:9;bottom:5vh;padding:8px 10px;background:rgba(255,248,239,.75)}
.reference-door-hotspot{position:absolute;z-index:10;left:36.5%;bottom:21%;width:7%;height:20%;display:block;border:0;background:transparent;opacity:.01;cursor:pointer}

.scene--room{background:#eadbd2}
.room-ceiling,.room-floor,.room-wall>.wall-grid,.room-wall:before{display:none}
.room-wall{inset:0;background:#eadbd2}
.reference-room-image{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.72) contrast(.92) brightness(.96)}
.room-wall:after{content:""!important;position:absolute!important;z-index:2!important;inset:0!important;background:linear-gradient(90deg,rgba(58,38,44,.12),transparent 18% 82%,rgba(58,38,44,.11)),linear-gradient(0deg,rgba(48,35,39,.15),transparent 28%)!important;pointer-events:none!important;animation:none!important;transform:none!important}
.room-header{z-index:12;top:2.5vh;padding:10px 14px;border:1px solid rgba(139,94,94,.24);background:rgba(255,246,238,.86);box-shadow:4px 4px 0 rgba(116,75,76,.12);backdrop-filter:blur(8px)}
.room-object{z-index:9;background:rgba(255,255,255,.01);border-color:transparent;box-shadow:none}
.room-object>*:not(.object-label):not(.avatar-bubble){opacity:0}
.memory-wall{left:22%;top:14%;width:45%;height:37%}
.room-window{left:auto;right:1%;top:13%;width:16%;height:44%}
.wardrobe{right:3%;top:54%;width:24%;height:30%}
.avatar{z-index:11;left:27%;bottom:2%;width:18%;height:52%}
.avatar .avatar-head,.avatar .avatar-body,.avatar .avatar-arm,.avatar .avatar-legs{display:none}
.avatar:before{display:none}
.desk{left:30%;bottom:0;width:45%;height:45%}
.magic-desk{right:16%;top:45%;width:18%;height:24%}
.desk:after,.magic-desk:after,.memory-wall:before,.memory-wall:after,.room-window:before,.room-window:after,.wardrobe:before,.wardrobe:after{display:none}
.object-label{opacity:0;bottom:auto;top:50%;padding:9px 12px;border:1px solid rgba(255,255,255,.42);background:rgba(67,48,54,.85);box-shadow:3px 3px 0 rgba(255,221,211,.18);font-size:11px;transform:translate(-50%,-50%) rotate(-1deg)}
.room-object:hover .object-label,.room-object:focus-visible .object-label{transform:translate(-50%,-58%) scale(1.05)}
.avatar-bubble{left:55%;top:4%;background:#fff6ed}
.room-dock{z-index:15;background:rgba(79,56,63,.86);border-color:#dcc4bb}
.room-hint{z-index:12;left:4vw;bottom:5vh;padding:8px 10px;background:rgba(69,48,53,.68)}

.about-portrait,.dress-stage{background:#f0d8cf;background-image:linear-gradient(rgba(255,255,255,.24) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.24) 1px,transparent 1px);background-size:12px 12px}
.reference-character-image{position:relative;z-index:3;width:min(72%,520px);height:83vh;object-fit:contain;filter:saturate(.76) contrast(.95) drop-shadow(0 18px 20px rgba(83,55,64,.16));mix-blend-mode:multiply}
.about-portrait>.big-avatar,.dress-stage>.big-avatar{display:none}
.about-portrait:before{inset:7%;border-radius:8px;border:1px dashed rgba(148,91,100,.35)}
.portrait-note{z-index:5}
.dress-stage:before{width:82%;height:88%;border-radius:8px;border-style:dashed}
.stage-shadow{z-index:2}
.works-intro,.journal-cover,.letter{background-image:linear-gradient(rgba(216,178,167,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(216,178,167,.08) 1px,transparent 1px);background-size:12px 12px}
.project-photo{box-shadow:5px 6px 0 #ead4ca,0 15px 28px rgba(84,58,62,.1)}
.photo-art{image-rendering:pixelated}

@media(max-width:820px){
  .outside-copy{top:3vh;width:88%;padding:10px 12px}.outside-copy h1{font-size:40px}.house-wrap{width:128vw;height:65vh;bottom:7%;left:48%}.house-wrap:after{right:18%;bottom:9%}.reference-door-hotspot{left:36%;bottom:22%;width:8%;height:19%}.mailbox{right:27%;bottom:20%}.enter-cta{left:50%;right:auto;transform:translateX(-50%)}
  .reference-room-image{object-position:45% center}.memory-wall{left:2%;top:11%;width:70%;height:34%}.room-window{right:0;top:10%;width:31%;height:43%}.wardrobe{right:0;top:48%;width:34%;height:31%}.avatar{left:4%;bottom:3%;width:32%;height:43%}.desk{left:20%;width:64%;height:43%}.magic-desk{right:3%;top:40%;width:27%}.object-label{font-size:9px;padding:6px 8px}.room-header{left:3vw;right:3vw}.reference-character-image{height:48vh;width:78%}
}

/* Immersive room interaction layer */
.scene--room{--parallax-x:0px;--parallax-y:0px;--object-x:0px;--object-y:0px;--light-x:0px;--light-y:0px}
.reference-room-image{width:calc(100% + 50px);height:calc(100% + 50px);inset:-25px;transform:translate3d(var(--parallax-x),var(--parallax-y),0) scale(1.035);transition:filter .8s ease,transform .18s ease-out;will-change:transform,filter}
.room-object{translate:var(--object-x) var(--object-y);will-change:translate}
.room-light-layer{position:absolute;z-index:3;inset:-35px;pointer-events:none;transform:translate3d(var(--light-x),var(--light-y),0);transition:background .8s ease,opacity .8s ease}
.scene--room.is-night .reference-room-image{filter:saturate(.6) brightness(.48) contrast(1.02) hue-rotate(8deg)}
.scene--room.is-night .room-light-layer{background:linear-gradient(rgba(26,32,55,.46),rgba(23,26,46,.58)),radial-gradient(circle at 73% 31%,rgba(123,154,220,.35),transparent 23%)}
.scene--room.lights-on .room-light-layer{background:radial-gradient(circle at 82% 44%,rgba(255,198,126,.45),transparent 24%),radial-gradient(circle at 27% 42%,rgba(255,205,137,.32),transparent 20%),linear-gradient(rgba(49,38,52,.14),rgba(42,32,45,.24))}
.scene--room.is-night.lights-on .room-light-layer{background:radial-gradient(circle at 82% 44%,rgba(255,185,103,.64),transparent 27%),radial-gradient(circle at 27% 42%,rgba(255,196,116,.42),transparent 22%),linear-gradient(rgba(25,30,53,.42),rgba(21,24,43,.56))}
.room-tools{display:flex;gap:7px}
.room-tools .icon-button{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,249,242,.82);transition:background .25s,color .25s,transform .25s}
.room-tools .icon-button:hover{transform:translateY(-2px);background:#fffaf4}
.room-tools .icon-button[aria-pressed="true"]{background:#4d6a62;color:#fff}
.tool-icon{font-size:16px;line-height:1}.language-toggle .tool-icon{font-size:11px;font-weight:700}
.room-dock b{display:block;font-size:10px;font-weight:500}
.computer-hotspot{left:37%;top:28%;width:17%;height:27%}
.light-switch{position:absolute;z-index:12;right:4.5%;top:46%;width:34px;height:52px;padding:5px 3px;border:1px solid rgba(83,57,58,.55);border-radius:3px;background:#e8d7c5;box-shadow:3px 3px 0 rgba(70,44,48,.2);cursor:pointer;transition:transform .25s,background .25s}
.light-switch:hover{transform:translateY(-3px)}.light-switch span{display:block;font:700 6px monospace;color:#765b5a}.light-switch i{display:block;width:10px;height:16px;margin:5px auto 0;border-radius:2px;background:#7c6662;box-shadow:inset 0 4px rgba(255,255,255,.3)}
.scene--room.lights-on .light-switch{background:#f7dfa2}.scene--room.lights-on .light-switch i{background:#d6a94a;box-shadow:0 0 12px #ffe197}
.room-pet{position:absolute;z-index:12;left:61%;bottom:26%;width:64px;height:46px;border:0;background:none;color:#4a363d;font:700 19px monospace;cursor:pointer;filter:drop-shadow(0 2px 0 #f1d7cc)}
.room-pet:hover span{display:block;animation:petBounce .65s ease}.room-pet.is-playing span{display:block;animation:petSurprise .9s ease}
.room-toast{position:absolute;z-index:40;left:50%;bottom:14%;max-width:min(80vw,430px);padding:11px 16px;border:1px solid #b89591;border-radius:5px;background:rgba(255,249,240,.94);box-shadow:4px 5px 0 rgba(92,60,66,.16);font:400 15px var(--display);opacity:0;visibility:hidden;transform:translate(-50%,12px);transition:.3s}.room-toast.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0)}
.room-guide{position:absolute;z-index:35;inset:0;display:grid;place-items:center;padding:6vh 6vw;background:rgba(43,32,37,.3);backdrop-filter:blur(12px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s,visibility .4s}.room-guide.is-open{opacity:1;visibility:visible;pointer-events:auto}.guide-card{position:relative;width:min(820px,94vw);max-height:88vh;padding:34px;background:#fffaf2;border:1px solid #d7c4bb;border-radius:7px;box-shadow:0 28px 80px rgba(43,28,34,.26);overflow:auto}.guide-card:before{content:"";position:absolute;inset:10px;border:1px dashed rgba(184,128,136,.28);pointer-events:none}.guide-close{position:absolute;z-index:2;right:17px;top:15px;width:32px;height:32px;border:1px solid #c8b2aa;border-radius:50%;background:#fffaf2;font-size:20px;cursor:pointer}.guide-card h3{margin:0 0 7px;font:400 clamp(28px,4vw,43px) var(--display)}.guide-card>p:not(.eyebrow){margin:0;color:#837478;font-size:12px}.guide-grid{display:grid;grid-template-columns:1fr 1fr;margin-top:26px;border-top:1px solid #decfc7;border-left:1px solid #decfc7}.guide-grid button{display:flex;align-items:center;gap:14px;min-height:76px;padding:13px 16px;border:0;border-right:1px solid #decfc7;border-bottom:1px solid #decfc7;background:transparent;text-align:left;cursor:pointer;transition:background .2s}.guide-grid button:hover{background:#f4e4df}.guide-grid i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#efd0d5;color:#87515d;font-style:normal}.guide-grid b{display:block;margin-bottom:3px;font-size:13px}.guide-grid small{display:block;color:#998a8c;font-size:10px}.guide-card footer{position:relative;display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:23px;font-size:10px;color:#9b8b8d}.guide-card footer button{border:0;border-bottom:1px solid #5a474c;padding:5px 0;background:none;font-weight:600;cursor:pointer}
body.has-room-overlay #room .reference-room-image{filter:saturate(.65) brightness(.7) blur(8px);transform:translate3d(var(--parallax-x),var(--parallax-y),0) scale(1.09)}
body.has-room-overlay #room .room-object,body.has-room-overlay #room .room-header,body.has-room-overlay #room .room-dock,body.has-room-overlay #room .room-hint,body.has-room-overlay #room .light-switch,body.has-room-overlay #room .room-pet{filter:blur(4px);opacity:.28;pointer-events:none}
.overlay--works,.overlay--journal,.overlay--about,.overlay--skills{inset:4vh 4vw;border:1px solid rgba(255,255,255,.5);border-radius:8px;box-shadow:0 25px 90px rgba(40,27,32,.34)}
.overlay--skills{display:grid;place-items:center;padding:5vh 5vw;background:rgba(237,219,209,.94);backdrop-filter:blur(18px)}
.skills-window{width:min(1050px,100%);max-height:82vh;border:1px solid #b9a6a0;border-radius:6px;background:#fffaf3;box-shadow:8px 9px 0 rgba(111,77,82,.12);overflow:auto}.skills-window>header{position:sticky;z-index:2;top:0;display:flex;align-items:center;gap:7px;height:43px;padding:0 16px;border-bottom:1px solid #dfd1c9;background:#f5e9e2}.skills-window>header span{width:9px;height:9px;border-radius:50%;background:#d37b86}.skills-window>header span:nth-child(2){background:#e7bd6c}.skills-window>header span:nth-child(3){background:#86a47e}.skills-window>header p{margin-left:auto;font:700 9px monospace;letter-spacing:1px}.skills-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:7vw;padding:7vh 6vw}.skills-copy h2{margin:0;font:400 clamp(36px,5vw,67px)/1.15 var(--display)}.skills-copy>p:last-child{max-width:470px;color:#786c70;font-size:13px;line-height:1.9}.skills-system{border-top:1px solid #d8c8c0}.skills-system article{display:grid;grid-template-columns:38px 1fr auto;gap:14px;align-items:center;padding:17px 5px;border-bottom:1px solid #d8c8c0}.skills-system article>span{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:#eac6cc;font-size:10px}.skills-system h3{margin:0 0 3px;font-size:14px}.skills-system p{margin:0;color:#948588;font-size:10px}.skills-system article>b{font:700 10px monospace;color:#a75c69}.skills-window>footer{display:flex;gap:8px;flex-wrap:wrap;padding:18px 6vw;border-top:1px solid #e0d2ca;background:#f7eee7}.skills-window>footer span{padding:6px 10px;border:1px solid #ccb9b1;border-radius:3px;font-size:9px}
@keyframes petBounce{50%{transform:translateY(-8px) rotate(-5deg)}}@keyframes petSurprise{0%,100%{transform:none}25%{transform:translate(-8px,-6px) rotate(-7deg)}60%{transform:translate(11px,-11px) rotate(8deg)}}

@media(max-width:820px){
  .room-header{align-items:flex-start}.room-header>div{max-width:38%}.room-header h2{font-size:16px}.room-tools{gap:4px}.room-tools .icon-button{width:33px;height:33px}.computer-hotspot{left:24%;top:28%;width:27%;height:25%}.light-switch{right:3%;top:47%;transform:scale(.85)}.room-pet{left:57%;bottom:24%;transform:scale(.8)}
  .room-guide{padding:2vh 3vw}.guide-card{padding:27px 18px}.guide-grid{grid-template-columns:1fr}.guide-grid button{min-height:62px}.guide-card footer{align-items:flex-start;flex-direction:column}.overlay--works,.overlay--journal,.overlay--about,.overlay--skills{inset:1.5vh 2vw}.skills-layout{grid-template-columns:1fr;padding:8vh 7vw}.skills-window{max-height:90vh}.room-toast{bottom:13%}
}

/* Reference-inspired leather ring journal */
.overlay.overlay--journal{
  display:grid;
  place-items:center;
  padding:clamp(16px,3vw,42px);
  overflow:hidden;
  background:rgba(55,39,45,.36);
  background-image:linear-gradient(rgba(255,245,235,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,245,235,.04) 1px,transparent 1px);
  background-size:14px 14px;
  backdrop-filter:blur(7px);
}
.overlay--journal .close-circle{right:22px;top:20px;border-color:rgba(255,255,255,.62);background:rgba(77,49,57,.74);color:#fff;backdrop-filter:blur(8px)}
.journal-shell{
  position:relative;
  width:min(980px,88vw);
  height:auto;
  max-height:78vh;
  aspect-ratio:1.58;
  perspective:1900px;
  filter:drop-shadow(0 32px 45px rgba(35,20,25,.34));
}
.journal-cover,.journal-pages{position:absolute;inset:0;border-radius:18px 30px 30px 18px}
.journal-cover{
  z-index:30;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:visible;
  border:2px solid #651321;
  background-color:#941c2e;
  background-image:radial-gradient(circle at 18% 22%,rgba(255,255,255,.12),transparent 21%),repeating-linear-gradient(115deg,rgba(255,255,255,.025) 0 1px,rgba(68,6,20,.04) 1px 4px),linear-gradient(145deg,#ad2c3d,#7b1426 72%);
  color:#fff9ef;
  box-shadow:inset 0 0 0 7px #851728,inset 0 0 0 8px rgba(244,182,170,.38),inset -20px -18px 30px rgba(59,6,18,.24),0 22px 50px rgba(43,18,25,.38);
  transform-origin:2% center;
  transform-style:preserve-3d;
  transition:transform 1.05s cubic-bezier(.55,.04,.2,1),opacity .3s .72s,visibility .3s .72s;
}
.journal-cover:before{content:"";position:absolute;inset:22px;border:1px dashed rgba(255,210,195,.52);border-radius:9px 20px 20px 9px;box-shadow:none}
.journal-cover:after{content:"";position:absolute;inset:8% 13%;border-radius:5px;background:rgba(72,7,20,.1);box-shadow:inset 0 0 24px rgba(64,4,16,.13);pointer-events:none}
.journal-cover-kicker{position:relative;z-index:2;padding:7px 12px;border-top:1px solid rgba(255,239,224,.62);border-bottom:1px solid rgba(255,239,224,.62);font:700 9px monospace;letter-spacing:2px}
.journal-cover h2{position:relative;z-index:2;margin:18px 0 8px;font:400 clamp(48px,7vw,84px)/1 var(--display);text-shadow:0 3px 0 rgba(70,9,20,.2)}
.journal-cover p{position:relative;z-index:2;margin:0;font:600 11px monospace;letter-spacing:3px}
.journal-cover button{position:absolute;z-index:3;bottom:10%;display:flex;align-items:center;gap:18px;padding:8px 0;border:0;border-bottom:1px solid rgba(255,255,255,.8);background:none;color:#fff;font-size:11px;cursor:pointer}
.journal-cover button span{font-size:16px;letter-spacing:0;transition:transform .25s}.journal-cover button:hover span{transform:translateX(5px)}
.journal-cover-stitch{position:absolute!important;left:3.5%;top:8%;bottom:8%;width:1px;border-left:1px dashed rgba(255,217,200,.55)}
.journal-cover-strap{position:absolute!important;z-index:4;right:-5%;top:50%;width:13%;height:18%;border:2px solid #69111f;border-radius:5px 14px 14px 5px;background:linear-gradient(135deg,#a42437,#761123);box-shadow:inset 0 0 0 4px #8a182a,5px 8px 12px rgba(49,11,18,.26);transform:translateY(-50%)}
.journal-cover-strap i{position:absolute;left:45%;top:50%;width:25px;height:25px;border:3px solid #a67c48;border-radius:50%;background:radial-gradient(circle,#6f4a23 0 21%,#d5b36c 24% 40%,#7c552a 44% 50%,#c59a56 53% 100%);box-shadow:0 2px 5px rgba(34,15,7,.4);transform:translate(-50%,-50%)}
.journal-cover.is-open{transform:rotateY(-112deg) translateX(-2%);opacity:0;visibility:hidden;pointer-events:none}

.journal-pages{
  z-index:2;
  overflow:visible;
  border:2px solid #661221;
  background-color:#8e192b;
  background-image:radial-gradient(circle at 70% 15%,rgba(255,255,255,.1),transparent 22%),repeating-linear-gradient(105deg,rgba(255,255,255,.024) 0 1px,rgba(58,5,16,.035) 1px 4px),linear-gradient(145deg,#a32638,#741123);
  box-shadow:inset 0 0 0 7px #811628,inset 0 0 0 8px rgba(246,184,173,.25),0 22px 50px rgba(43,18,25,.3);
}
.journal-pages:before{content:"";position:absolute;z-index:0;inset:4.4% 4.7% 7.3%;border-radius:6px;background:#dfd2bd;box-shadow:0 2px 0 #b9aa94,0 5px 0 #e5dac7,0 8px 12px rgba(51,20,25,.26);pointer-events:none}
.journal-paper-stack{position:absolute;z-index:1;left:5.5%;right:5.5%;top:5.5%;bottom:8.5%;border-radius:4px;background:#eee5d3;box-shadow:0 2px 0 #cbbca7,0 4px 0 #f1e7d6,0 6px 0 #c8baa8}
.journal-page{
  position:absolute;
  z-index:4;
  inset:auto;
  top:5.2%;
  bottom:8.9%;
  width:44.6%;
  padding:clamp(15px,2.1vw,25px) clamp(16px,2.3vw,28px);
  overflow:hidden;
  border:0;
  border-radius:3px;
  background-color:#fffaf0;
  background-image:linear-gradient(rgba(165,137,120,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(172,141,126,.04) 1px,transparent 1px),radial-gradient(circle at 16% 18%,rgba(219,190,159,.18),transparent 25%);
  background-size:100% 22px,22px 100%,100% 100%;
  box-shadow:inset 0 0 28px rgba(123,89,72,.07);
  color:#443b3d;
  opacity:0;
  visibility:hidden;
  transform:none;
  transition:opacity .18s ease;
}
.journal-page[data-side="left"]{left:5.2%;border-radius:4px 1px 1px 4px;box-shadow:inset -15px 0 22px rgba(104,72,58,.06),inset 0 0 28px rgba(123,89,72,.06)}
.journal-page[data-side="right"]{right:5.2%;border-radius:1px 4px 4px 1px;box-shadow:inset 15px 0 22px rgba(104,72,58,.06),inset 0 0 28px rgba(123,89,72,.06)}
.journal-page.is-current{opacity:1;visibility:visible;transform:none}
.journal-page:after{content:"";position:absolute;left:17px;right:17px;bottom:13px;height:1px;background:linear-gradient(90deg,transparent,#d4c4b8 15%,#d4c4b8 85%,transparent)}
.journal-page h3{width:100%;margin:5px 0 15px;font:400 clamp(23px,3vw,39px)/1.08 var(--display);letter-spacing:0;color:#5c1b29}
.journal-page>p:not(.page-date):not(.hand-note):not(.placeholder-note){width:auto;margin:8px 0;font-size:clamp(9px,1.15vw,12px);line-height:1.7;color:#615759}
.page-date{margin:0;font:700 8px monospace;color:#a04a58;letter-spacing:1.4px}
.portrait-placeholder{position:absolute;right:8%;top:12%;width:37%;height:45%;display:block;margin:0;border:7px solid #fff;background:#ead8cf;box-shadow:3px 5px 10px rgba(74,48,48,.2);transform:rotate(3deg);overflow:visible}
.portrait-placeholder img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:saturate(.72) contrast(.94)}
.portrait-placeholder small{position:absolute;left:50%;bottom:-26px;width:max-content;max-width:130%;font:400 10px var(--display);color:#8a6468;transform:translateX(-50%) rotate(-2deg)}
.photo-tape{position:absolute;z-index:2;left:50%;top:-15px;width:52%;height:21px;background:rgba(225,199,153,.72);transform:translateX(-50%) rotate(-4deg);clip-path:polygon(4% 8%,98% 0,94% 100%,0 90%)}
.journal-page.journal-page--hello>p:not(.page-date):not(.hand-note):not(.placeholder-note){width:43%;margin-top:22px}.journal-page--hello .hand-note{left:8%;right:auto;bottom:12%;max-width:48%}
.hand-note{position:absolute;right:7%;bottom:11%;max-width:74%;margin:0;transform:rotate(-3deg);font:400 clamp(12px,1.55vw,17px)/1.35 var(--display);color:#b34d5e}
.page-doodle{position:absolute;font-family:var(--display);color:#b65060}.page-doodle--heart{right:8%;bottom:10%;font-size:34px;transform:rotate(10deg)}.page-doodle--star{right:7%;top:11%;font-size:27px}
.memo-sticker{position:absolute;right:8%;bottom:9%;display:grid;place-items:center;width:64px;aspect-ratio:1;padding:8px;background:#f3d58a;box-shadow:2px 3px 0 rgba(103,77,55,.14);font:400 13px/1.1 var(--display);text-align:center;transform:rotate(5deg)}
.timeline{list-style:none;width:84%;padding:0;margin:15px 0 6px}.timeline li{position:relative;display:grid;grid-template-columns:47px 1fr;gap:9px;padding:8px 4px 8px 14px;border-bottom:1px dashed #d4afb3}.timeline li:before{content:"";position:absolute;left:2px;top:14px;width:6px;height:6px;border-radius:50%;background:#b84f60}.timeline b{font:700 12px monospace;color:#9e3446}.timeline span{font-size:10px}.placeholder-note{margin:7px 0;font-size:8px;color:#9a8889}
.sticker-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;width:92%;margin-top:13px}.sticker-grid span{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:58px;aspect-ratio:auto;padding:7px;background:#efc7cb;border:1px dashed #b86e79;box-shadow:2px 3px 0 rgba(100,72,72,.08);transform:rotate(-1.5deg);font-size:9px;text-align:center}.sticker-grid span:nth-child(even){background:#d5dfc7;transform:rotate(1.5deg)}.sticker-grid span:last-child{grid-column:1/3;width:47%;justify-self:center;background:#f0d689}.sticker-grid b{font:400 clamp(20px,2.5vw,31px) var(--display)}
.skill-stickers{display:flex;flex-wrap:wrap;gap:9px;width:96%;margin-top:20px}.skill-stickers span{padding:8px 11px;border:1.5px solid #b95a69;border-radius:50%;background:#fffdf6;box-shadow:2px 2px 0 rgba(91,62,63,.08);transform:rotate(-2deg);font:400 clamp(10px,1.25vw,14px) var(--display)}.skill-stickers span:nth-child(3n){background:#dce5d3;transform:rotate(3deg)}.skill-stickers span:nth-child(4n){background:#f3d99a}.journal-page--skills .hand-note{left:10%;right:auto;bottom:11%;max-width:75%}
.paper-clip{position:absolute;right:9%;top:8%;width:13px;height:42px;border:2px solid #8e8a82;border-radius:8px;transform:rotate(9deg)}.paper-clip:after{content:"";position:absolute;left:2px;top:4px;width:5px;height:28px;border:1px solid #8e8a82;border-radius:6px}
.experience-list{list-style:none;width:96%;padding:0;margin:13px 0}.experience-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 5px;border-bottom:1px dashed #cbb3af}.experience-list b{font:400 14px var(--display);color:#67303a}.experience-list span{font-size:8px;color:#978487;text-align:right}
.journal-page--contact h3{font-size:clamp(24px,3vw,37px)}.journal-page--contact .contact-lines{width:100%;margin:12px 0}.journal-page--contact .contact-lines span{gap:8px;padding:7px 0;border-bottom:1px dashed #d5c5bb;font-size:8px}.journal-page--contact .contact-lines b{max-width:68%;overflow-wrap:anywhere;text-align:right}.journal-page--contact .hand-note{left:8%;right:auto;bottom:9%}
.postage-stamp{position:absolute;right:8%;bottom:8%;display:grid;place-items:center;width:58px;height:48px;border:4px dotted #d6a5a9;background:#efd1d3;color:#8e3f4e;font:700 8px/1.4 monospace;text-align:center;transform:rotate(4deg)}

.binding{position:absolute;z-index:20;left:50%;top:7.5%;bottom:11%;width:50px;display:flex;flex-direction:column;justify-content:space-around;align-items:center;background:none;transform:translateX(-50%);pointer-events:none}
.binding:before{content:"";position:absolute;left:50%;top:1%;bottom:1%;width:8px;border-radius:8px;background:linear-gradient(90deg,#78756f,#eee9dc 43%,#77736d);box-shadow:2px 0 4px rgba(68,52,48,.28);transform:translateX(-50%)}
.binding i{position:relative;z-index:2;width:44px;height:15px;border:3px solid #a6a39b;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.75),transparent 46%);box-shadow:0 2px 2px rgba(54,44,43,.28),inset 0 1px #fff;transform:rotate(-2deg)}
.journal-flip{position:absolute;z-index:12;top:5.2%;bottom:8.9%;width:44.7%;display:none;transform-style:preserve-3d;pointer-events:none}
.journal-flip:before,.journal-flip:after{content:"";position:absolute;inset:0;border-radius:3px;background-color:#fffaf0;background-image:linear-gradient(rgba(165,137,120,.08) 1px,transparent 1px),radial-gradient(circle at 18% 20%,rgba(219,190,159,.16),transparent 25%);background-size:100% 22px,100% 100%;box-shadow:0 9px 20px rgba(56,37,38,.2);backface-visibility:hidden}
.journal-flip:after{transform:rotateY(180deg);background-color:#f8f1e5}
.journal-flip.is-turning-forward{display:block;left:50%;transform-origin:left center;animation:journalFlipForward .72s cubic-bezier(.55,.05,.28,1) both}
.journal-flip.is-turning-back{display:block;left:5.2%;transform-origin:right center;animation:journalFlipBack .72s cubic-bezier(.55,.05,.28,1) both}
.page-corner{position:absolute;z-index:22;bottom:8.9%;width:48px;height:48px;border:0;background:transparent;cursor:pointer}.page-corner:before{content:"";position:absolute;bottom:0;width:0;height:0;border-style:solid;opacity:.45;transition:opacity .2s,transform .2s}.page-corner:hover:before{opacity:.9;transform:scale(1.1)}.page-corner--prev{left:5.2%}.page-corner--prev:before{left:0;border-width:0 0 28px 28px;border-color:transparent transparent #d7b4aa transparent}.page-corner--next{right:5.2%}.page-corner--next:before{right:0;border-width:28px 0 0 28px;border-color:transparent transparent transparent #d7b4aa}.page-corner:disabled{opacity:0;pointer-events:none}
.page-controls{position:absolute;z-index:24;right:5%;bottom:1.6%;display:flex;gap:12px;align-items:center}.page-controls button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid rgba(255,233,220,.58);border-radius:50%;background:rgba(83,15,28,.48);color:#fff6eb;font-size:14px;cursor:pointer;transition:background .2s,transform .2s}.page-controls button:hover:not(:disabled){background:#c15d6b;transform:translateY(-2px)}.page-controls button:disabled{opacity:.28;cursor:default}.page-controls span{min-width:78px;color:#ffeadf;font:700 9px monospace;letter-spacing:1px;text-align:center}

@keyframes journalFlipForward{0%{transform:rotateY(0);filter:brightness(1)}45%{filter:brightness(.82)}100%{transform:rotateY(-180deg);filter:brightness(1)}}
@keyframes journalFlipBack{0%{transform:rotateY(0);filter:brightness(1)}45%{filter:brightness(.82)}100%{transform:rotateY(180deg);filter:brightness(1)}}

@media(max-width:700px){
  .overlay.overlay--journal{inset:1.5vh 2vw;padding:42px 8px 10px}.overlay--journal .close-circle{right:10px;top:8px;width:36px;height:36px}
  .journal-shell{width:min(430px,94vw);height:min(720px,82vh);max-height:none;aspect-ratio:auto}
  .journal-cover,.journal-pages{border-radius:15px 24px 24px 15px}
  .journal-cover h2{font-size:48px}.journal-cover-strap{right:-3%;width:17%;height:13%}.journal-cover-strap i{width:21px;height:21px}
  .journal-pages:before{inset:4.5% 6.3% 7.2% 7.2%}.journal-paper-stack{left:7.9%;right:7%;top:5.3%;bottom:8.1%}
  .journal-page,.journal-page[data-side="left"],.journal-page[data-side="right"]{left:8%;right:auto;top:5%;bottom:8.5%;width:84.5%;padding:22px 24px 28px;border-radius:4px;box-shadow:inset 15px 0 22px rgba(104,72,58,.055),inset 0 0 28px rgba(123,89,72,.06)}
  .journal-page h3{font-size:32px}.journal-page>p:not(.page-date):not(.hand-note):not(.placeholder-note){font-size:11px}.journal-page.journal-page--hello>p:not(.page-date):not(.hand-note):not(.placeholder-note){width:39%}.portrait-placeholder{right:7%;width:38%;height:39%}.journal-page--hello .hand-note{max-width:58%}
  .timeline{margin-top:23px}.timeline li{grid-template-columns:55px 1fr;padding:11px 5px 11px 16px}.timeline b{font-size:13px}.timeline span{font-size:11px}
  .sticker-grid{gap:10px;margin-top:22px}.sticker-grid span{min-height:69px;font-size:10px}.sticker-grid b{font-size:29px}
  .skill-stickers{gap:11px;margin-top:25px}.skill-stickers span{padding:9px 13px;font-size:13px}
  .experience-list{margin-top:22px}.experience-list li{padding:12px 5px}.experience-list b{font-size:16px}.experience-list span{font-size:9px}
  .journal-page--contact h3{font-size:31px}.journal-page--contact .contact-lines span{padding:9px 0;font-size:9px}
  .binding{left:8%;top:8%;bottom:12%;width:30px;align-items:flex-start;transform:translateX(-50%)}.binding:before{display:none}.binding i{width:27px;height:12px;border-width:2px;background:none}
  .journal-flip{top:5%;bottom:8.5%;width:84.5%}.journal-flip.is-turning-forward,.journal-flip.is-turning-back{left:8%;transform-origin:left center}
  .journal-flip.is-turning-back{animation-name:journalFlipBackMobile;transform-origin:left center}
  .page-corner{bottom:8.5%}.page-corner--prev{left:8%}.page-corner--next{right:7.5%}
  .page-controls{right:7%;bottom:1.5%}.page-controls span{min-width:68px}
}

/* The supplied portfolio-page projects are shown as their original page images. */
#project[data-display-mode="portfolio-pages"] .case-hero,
#project[data-display-mode="portfolio-pages"] .case-gallery-heading,
#project[data-display-mode="portfolio-pages"] .case-award-section,
#project[data-display-mode="portfolio-pages"] .case-project-nav,
#project[data-display-mode="portfolio-pages"] .case-footer{display:none}
#project[data-display-mode="portfolio-pages"] .case-nav{background:rgba(255,255,255,.9);color:#3f3436}
#project[data-display-mode="portfolio-pages"] .case-nav span{display:none}
#project[data-display-mode="portfolio-pages"] .case-gallery-section{padding:0;background:#fff}
#project[data-display-mode="portfolio-pages"] .case-gallery{display:block;margin:0}
#project[data-display-mode="portfolio-pages"] .case-gallery-item,
#project[data-display-mode="portfolio-pages"] .case-gallery-item--wide{display:block;width:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent;overflow:visible}
#project[data-display-mode="portfolio-pages"] .case-gallery-item img{display:block;width:100%;height:auto;min-height:0;object-fit:contain;border:0;border-radius:0;background:transparent;cursor:zoom-in}
#project[data-display-mode="portfolio-pages"] .case-gallery-item figcaption{display:none}

/* Collage resume journal */
.overlay.overlay--journal{background:#7d6a64;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:18px 18px}
.journal-pages{background:#f4eadb}
.journal-page{padding:clamp(24px,4vw,54px) clamp(28px,5vw,68px) 58px;overflow:auto;background:#f4eadb}
.journal-page:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 8%,rgba(190,83,94,.08),transparent 25%),radial-gradient(circle at 90% 85%,rgba(116,159,133,.12),transparent 30%)}
.journal-page-head{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;color:#8f6f70;font:700 8px monospace;letter-spacing:1.5px}
.journal-page-head .page-date{margin:0;color:#8f6f70;font:700 8px monospace;letter-spacing:1.5px}
.journal-kicker{margin:0 0 8px;color:#b24f5f;font:700 10px monospace;letter-spacing:1px}
.journal-page h3{position:relative;z-index:2;width:auto;margin:0 0 18px;color:#5d2430;font:400 clamp(28px,4vw,48px)/1.02 var(--display);letter-spacing:0}
.journal-page h3 em{font:400 .45em/1 var(--font);color:#a77872;font-style:normal;letter-spacing:1px}
.resume-intro-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(150px,.75fr);gap:22px;align-items:start}
.resume-summary{max-width:360px;margin:0;color:#61565a;font-size:11px;line-height:1.65}
.resume-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}.resume-tags span{padding:5px 7px;border:1px solid #c77b82;background:#fff8eb;color:#7d3d48;font:700 7px monospace;letter-spacing:.5px;transform:rotate(-1deg)}.resume-tags span:nth-child(even){transform:rotate(2deg);background:#e4eddc;border-color:#aebfa7;color:#557059}
.journal-polaroid{position:relative;margin:0;padding:7px 7px 20px;background:#fffdf7;box-shadow:3px 5px 0 rgba(87,51,55,.13),0 9px 16px rgba(87,51,55,.14);transform:rotate(2deg)}
.journal-polaroid img{display:block;width:100%;height:100%;object-fit:cover}.journal-polaroid figcaption{position:absolute;right:8px;bottom:5px;left:8px;color:#80676a;font:700 7px monospace;letter-spacing:.5px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.journal-polaroid--portrait{width:min(180px,100%);aspect-ratio:3/4;justify-self:end}.journal-polaroid--landscape{width:100%;aspect-ratio:1.45;transform:rotate(-3deg)}.journal-polaroid--small{width:128px;aspect-ratio:1.1}.journal-polaroid--tilt{transform:rotate(-5deg)}.journal-polaroid--rotate{transform:rotate(5deg)}
.metric-strip{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:21px;padding-top:12px;border-top:1px dashed #bd8b88}.metric-strip span{display:flex;flex-direction:column;gap:2px;color:#745e60;text-align:center}.metric-strip b{color:#ae3f50;font:400 clamp(25px,4vw,42px)/.9 var(--display)}.metric-strip small{font-size:8px}
.journal-scrap-row{position:relative;z-index:2;display:flex;align-items:center;gap:18px;margin-top:15px}.journal-scrap-row .hand-note{position:static;max-width:230px;margin:0;color:#8b5c61;font-size:13px;line-height:1.55}.sticker-star{margin-left:auto;color:#cf8290;font-size:31px;transform:rotate(12deg)}
.project-index-list{position:relative;z-index:2;display:grid;gap:5px;margin-top:3px}.project-index-list>div{display:grid;grid-template-columns:25px 100px 1fr;gap:7px;align-items:center;padding:7px 8px;background:rgba(255,253,247,.78);border-left:4px solid #c26a75;box-shadow:1px 2px 0 rgba(100,63,66,.08);transform:rotate(-.4deg)}.project-index-list>div:nth-child(even){border-left-color:#7d9a86;transform:rotate(.5deg)}.project-index-list b{color:#ae5965;font:700 10px monospace}.project-index-list strong{color:#5e343b;font:400 17px var(--display)}.project-index-list span{color:#746267;font-size:8px;line-height:1.35}.project-index-list i{color:#b24e5a;font-style:normal}.memo-sticker{position:absolute;right:6%;bottom:8%;z-index:3;display:grid;place-items:center;width:78px;height:64px;background:#eab0b3;color:#7b3540;text-align:center;font:700 9px/1.15 monospace;transform:rotate(7deg);box-shadow:2px 3px 0 rgba(106,47,56,.13)}
.journal-project-pair{position:relative;z-index:2;display:grid;grid-template-columns:1fr 130px;gap:10px 16px;align-items:start}.resume-project-card{padding:11px 12px;background:#fff8ec;border:1px solid #e1c9b3;box-shadow:2px 3px 0 rgba(86,57,60,.1);transform:rotate(-.7deg)}.resume-project-card--green{background:#e8efdf;border-color:#b9cdb8;transform:rotate(1deg)}.resume-project-card--blue{background:#e5eff0;border-color:#b9ced0;transform:rotate(1deg)}.resume-project-card--cream{background:#fff5de;border-color:#e3c79e;transform:rotate(-1deg)}.resume-project-card--poster{background:#f5e6e7;border-color:#d8afb4}.resume-project-title{display:flex;gap:8px;align-items:flex-start}.resume-project-title>b{color:#b04d5b;font:700 11px monospace}.resume-project-title h4{margin:0;color:#612b37;font:400 23px/1.03 var(--display)}.resume-project-title small{color:#987678;font:700 7px monospace;letter-spacing:.5px}.resume-project-card p{margin:9px 0 7px;color:#66595d;font-size:9px;line-height:1.5}.resume-project-card ul{list-style:none;margin:0;padding:0;color:#68595e;font-size:8px;line-height:1.55}.resume-project-card li{padding-left:9px;position:relative}.resume-project-card li:before{content:"✦";position:absolute;left:0;color:#c26a75}.resume-project-card li b{color:#a63c4d;font-size:13px}.resume-skill-line{margin-top:8px;padding-top:6px;border-top:1px dashed rgba(150,99,100,.35);color:#8a666a;font:700 7px/1.35 monospace;letter-spacing:.3px}.journal-project-pair>.journal-polaroid{grid-column:2;grid-row:1}.journal-project-pair>.resume-project-card:nth-of-type(2){grid-column:1/-1}.journal-project-pair--story{grid-template-columns:130px 1fr;gap:13px}.journal-project-pair--story>.journal-polaroid{grid-column:1;grid-row:1}.journal-project-pair--story>.resume-project-card{grid-column:2}.journal-project-pair--story>.resume-project-card:last-child{grid-column:1/-1}
.poster-resume-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 140px;gap:14px;align-items:start}.poster-counts{display:flex;gap:8px;margin-top:12px}.poster-counts span{display:flex;flex-direction:column;align-items:center;color:#805e62;font-size:8px}.poster-counts b{color:#b24250;font:400 25px var(--display)}.experience-notes{grid-column:1/-1;display:grid;gap:6px;margin-top:2px}.experience-notes>div{display:grid;grid-template-columns:95px 1fr;column-gap:8px;padding:7px 9px;background:rgba(255,252,243,.75);border-bottom:1px dashed #c99fa0}.experience-notes b{grid-row:span 2;color:#b04f5b;font:700 8px monospace}.experience-notes strong{color:#5f4145;font:400 14px var(--display)}.experience-notes span{color:#78666a;font-size:8px}
.augmenta-resume-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 145px;gap:16px}.augmenta-resume-grid section p{margin:11px 0 7px;color:#66595d;font-size:9px;line-height:1.55}.augmenta-resume-grid ul{list-style:none;margin:0;padding:0;color:#68595e;font-size:9px;line-height:1.7}.augmenta-resume-grid li b{color:#a63c4d;font-size:15px}.augmenta-resume-grid .journal-polaroid{transform:rotate(4deg)}.journal-page--contact .contact-lines{position:relative;z-index:2;width:100%;margin-top:18px}.journal-page--contact .hand-note{position:relative;z-index:2;left:auto;right:auto;bottom:auto;max-width:80%;margin-top:15px;font-size:13px}
@media(max-width:700px){.journal-page{padding:22px 25px 50px}.resume-intro-grid{grid-template-columns:1fr 112px;gap:10px}.journal-polaroid--portrait{width:112px}.journal-page h3{font-size:31px}.resume-summary{font-size:9px}.metric-strip{gap:3px}.metric-strip b{font-size:27px}.metric-strip small{font-size:7px}.journal-scrap-row{gap:10px}.journal-scrap-row .hand-note{font-size:10px}.project-index-list>div{grid-template-columns:20px 72px 1fr;gap:5px;padding:6px}.project-index-list strong{font-size:14px}.project-index-list span{font-size:7px}.project-index-list>div span{line-height:1.25}.memo-sticker{right:4%;bottom:5%;transform:scale(.8) rotate(7deg)}.journal-project-pair,.journal-project-pair--story{grid-template-columns:1fr 100px;gap:8px}.journal-project-pair--story{grid-template-columns:100px 1fr}.journal-project-pair>.journal-polaroid{grid-column:2}.journal-project-pair--story>.journal-polaroid{grid-column:1}.resume-project-title h4{font-size:18px}.resume-project-card{padding:8px}.resume-project-card p,.resume-project-card ul{font-size:8px}.resume-skill-line{font-size:6px}.poster-resume-grid{grid-template-columns:1fr 100px}.poster-counts{gap:4px}.poster-counts b{font-size:20px}.experience-notes>div{grid-template-columns:79px 1fr}.experience-notes strong{font-size:12px}.augmenta-resume-grid{grid-template-columns:1fr 110px}.augmenta-resume-grid .journal-polaroid{width:110px}.augmenta-resume-grid section p,.augmenta-resume-grid ul{font-size:8px}.journal-page--contact .hand-note{font-size:10px}}

/* Cover follows the supplied scrapbook-resume reference. */
.overlay--journal .journal-cover{display:grid;place-items:center;padding:0;border:0;background:#4f5e70 url("assets/journal/01-reference.jpg") center/cover no-repeat;overflow:hidden;box-shadow:0 25px 70px rgba(39,27,31,.34),inset 0 0 0 1px rgba(255,255,255,.4)}
.overlay--journal .journal-cover:after{content:"";position:absolute;inset:0;background:rgba(36,48,64,.42);backdrop-filter:blur(3px)}
.overlay--journal .journal-cover-paper{position:relative;z-index:2;width:70%;min-height:70%;padding:34px 38px 62px;background:#f4e8d1;color:#5a3038;box-shadow:8px 10px 0 rgba(84,53,52,.14),0 18px 28px rgba(41,29,36,.25);transform:rotate(-1.2deg);overflow:hidden}
.overlay--journal .journal-cover-paper:before{content:"";position:absolute;inset:14px;border:1px dashed rgba(162,109,101,.38);background-image:linear-gradient(rgba(172,134,117,.11) 1px,transparent 1px);background-size:100% 23px;pointer-events:none}
.journal-cover-paper>*{position:relative;z-index:1}.journal-cover-kicker{display:block;width:max-content;padding:5px 8px;border-top:1px solid #a66a70;border-bottom:1px solid #a66a70;color:#8c4b56;font:700 9px monospace;letter-spacing:1.4px}.journal-cover-name{margin:18px 0 2px;color:#9d6670;font:700 10px monospace;letter-spacing:2px}.overlay--journal .journal-cover h2{margin:0;color:#672b37;font:400 clamp(56px,8vw,92px)/.95 var(--display);letter-spacing:0;text-shadow:2px 3px 0 rgba(116,55,63,.12)}.journal-cover-role{margin:7px 0 15px;color:#8d6264;font-size:12px;letter-spacing:2px}.journal-cover-tags{display:flex;flex-wrap:wrap;gap:6px;max-width:66%}.journal-cover-tags span{padding:5px 7px;border:1px solid #c48883;background:#fff8e9;color:#7d3e48;font:700 7px monospace;letter-spacing:.5px;transform:rotate(-1deg)}.journal-cover-tags span:nth-child(even){background:#e2ecdf;border-color:#aabdac;color:#5c765f;transform:rotate(2deg)}.journal-cover-metrics{display:flex;gap:18px;margin-top:20px;padding-top:12px;border-top:1px dashed #c99b91}.journal-cover-metrics span{display:flex;flex-direction:column;gap:2px;text-align:center}.journal-cover-metrics b{color:#ae3e4d;font:400 30px/.9 var(--display)}.journal-cover-metrics small{color:#806468;font-size:7px}.journal-cover-photo{position:absolute;right:8%;top:20%;width:24%;aspect-ratio:3/4;margin:0;padding:6px 6px 19px;background:#fffdf6;box-shadow:3px 5px 0 rgba(82,52,52,.13);transform:rotate(5deg)}.journal-cover-photo img{display:block;width:100%;height:100%;object-fit:cover}.journal-cover-photo figcaption{position:absolute;right:3px;bottom:4px;left:3px;color:#80676a;font:700 6px monospace;text-align:center}.journal-cover-line{max-width:65%;margin:18px 0 0;color:#76585d;font:600 9px/1.5 monospace}.overlay--journal .journal-cover button{position:absolute;z-index:3;bottom:8%;left:50%;display:flex;gap:14px;align-items:center;padding:8px 0;border:0;border-bottom:1px solid #f8eee5;background:none;color:#fff;font-size:11px;cursor:pointer;transform:translateX(-50%)}.overlay--journal .journal-cover button span{font-size:16px;transition:transform .25s}.overlay--journal .journal-cover button:hover span{transform:translateX(5px)}
@media(max-width:700px){.overlay--journal .journal-cover-paper{width:78%;min-height:72%;padding:25px 25px 56px}.journal-cover-kicker{font-size:7px}.journal-cover-name{margin-top:13px;font-size:8px}.overlay--journal .journal-cover h2{font-size:58px}.journal-cover-role{font-size:9px;margin:6px 0 11px}.journal-cover-tags{max-width:62%;gap:4px}.journal-cover-tags span{padding:4px 5px;font-size:6px}.journal-cover-metrics{gap:9px;margin-top:14px;padding-top:9px}.journal-cover-metrics b{font-size:23px}.journal-cover-metrics small{font-size:6px}.journal-cover-photo{right:7%;top:21%;width:27%;padding:4px 4px 14px}.journal-cover-line{max-width:62%;margin-top:13px;font-size:7px}.overlay--journal .journal-cover button{bottom:7%;font-size:10px}}

/* PDF-inspired presentation: one complete artwork per reading beat. */
#project.overlay--project .case-gallery{
  grid-template-columns:1fr;
  gap:clamp(28px,5vw,86px);
}
#project.overlay--project .case-gallery-item,
#project.overlay--project .case-gallery-item--wide,
#project.overlay--project .case-gallery-item:nth-child(3n+2):not(.case-gallery-item--wide){
  grid-column:1;
  width:min(100%,1280px);
  margin-inline:auto;
}
#project.overlay--project .case-gallery-item img{
  width:100%;
  height:auto;
  object-fit:contain;
}
@media(max-width:700px){
  #project.overlay--project .case-gallery{gap:22px}
}

.case-award-section{padding:clamp(80px,12vw,180px) clamp(22px,7vw,110px);background:var(--case-bg);border-top:1px solid color-mix(in srgb,var(--case-text) 16%,transparent)}
.case-award-figure{max-width:760px;margin:0 auto}.case-award-figure img{display:block;width:100%;height:auto;background:var(--case-panel);cursor:zoom-in}.case-award-figure figcaption{margin-top:14px;color:var(--case-accent);font:700 10px/1.5 monospace;letter-spacing:.5px}

/* Preserve the original four-panel lighting sheet without stretching a single panel. */
.lighting-scene{width:100%;height:auto;aspect-ratio:1717 / 916;min-height:0;background-size:100% 100%;background-position:center;background-repeat:no-repeat;transition:filter .6s ease,opacity .35s}
.lighting-scene[data-lighting="day"]{filter:saturate(.95)}
.lighting-scene[data-lighting="sunset"]{filter:saturate(1.08) sepia(.08)}
.lighting-scene[data-lighting="night"]{filter:saturate(1.12) brightness(.9)}
.lighting-scene[data-lighting="ghost"]{filter:saturate(.9) brightness(.82) hue-rotate(4deg)}
@media(max-width:390px){
  .journal-page,.journal-page[data-side="left"],.journal-page[data-side="right"]{padding:18px 20px 25px}.journal-page h3{font-size:28px;margin-bottom:11px}.journal-page--hello>p:not(.page-date):not(.hand-note){font-size:9px}.portrait-placeholder{height:35%}.hand-note{font-size:14px}.skill-stickers{gap:8px}.skill-stickers span{padding:7px 10px;font-size:11px}.experience-list li{padding:9px 4px}.journal-page--contact h3{font-size:27px}.postage-stamp{width:49px;height:41px}
}
@keyframes journalFlipBackMobile{0%{transform:rotateY(-180deg);filter:brightness(1)}45%{filter:brightness(.82)}100%{transform:rotateY(0);filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){.journal-flip.is-turning-forward,.journal-flip.is-turning-back{display:none}.journal-cover{transition:none}}

/* Travel-journal inspired resume cover */
.overlay--journal .journal-cover{display:grid;place-items:center;padding:0;border:0;background:transparent;overflow:visible;box-shadow:none}
.overlay--journal .journal-cover{visibility:visible}
.overlay--journal .journal-cover.is-open{visibility:hidden}
.journal-page--real-resume{display:flex;flex-direction:column;align-items:center;overflow:auto}
.resume-sheet{position:relative;width:min(88%,560px);margin:10px auto 0;padding:10px 10px 28px;background:#fffdf5;box-shadow:5px 8px 0 rgba(79,54,44,.14),0 10px 18px rgba(76,54,46,.12);transform:rotate(1deg)}
.resume-sheet:before{content:"";position:absolute;z-index:-1;inset:7px -7px 4px 8px;background:#d4be9e;transform:rotate(-3deg)}
.resume-sheet img{display:block;width:100%;height:auto;object-fit:contain}
.resume-sheet figcaption{position:absolute;right:8px;bottom:7px;left:8px;color:#806a5f;text-align:center;font:700 7px monospace;letter-spacing:1px}
.overlay--journal .journal-cover:before,.overlay--journal .journal-cover:after{display:none}
.journal-book-cover{position:relative;width:min(56%,410px);height:90%;min-height:500px;padding:44px 28px 62px;background:#f2e5c8;color:#3d3030;box-shadow:10px 14px 0 rgba(85,62,50,.14),0 24px 34px rgba(39,29,34,.3);transform:rotate(-1.5deg);border-radius:18px 12px 22px 16px;overflow:visible}
.journal-book-cover:before{content:"";position:absolute;inset:12px;border:1px dashed rgba(148,115,83,.42);border-radius:11px 8px 15px 10px;pointer-events:none}
.journal-book-cover:after{content:"";position:absolute;inset:0;border-radius:18px 12px 22px 16px;opacity:.34;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(129,98,64,.08) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 1px,transparent 1px 5px)}
.journal-side-tab{position:absolute;z-index:3;right:-52px;top:26%;display:grid;place-items:center;width:72px;height:145px;padding:14px 12px 14px 22px;background:#c49a52;color:#fff3d7;writing-mode:vertical-rl;font:500 20px/1.25 var(--display);letter-spacing:5px;border-radius:0 34px 34px 0;box-shadow:5px 4px 0 rgba(90,64,32,.1)}
.journal-ticket-corner{position:absolute;z-index:2;right:12px;top:0;padding:8px 9px 18px;color:#865849;font:700 7px/1.1 monospace;letter-spacing:.6px;background:#eee0bc;border-bottom:1px solid #bda47f;transform:rotate(3deg);box-shadow:0 2px 4px rgba(86,57,40,.14)}
.journal-ticket-corner:after{content:"✈  •  POST";display:block;margin-top:5px;font-size:8px}
.journal-title-note{position:relative;z-index:2;margin:56px auto 0;width:86%;padding:24px 15px 20px;background:repeating-linear-gradient(0deg,transparent 0 27px,rgba(115,145,148,.28) 28px 29px),#fff8e7;box-shadow:0 3px 7px rgba(75,55,42,.16);transform:rotate(-1deg)}
.journal-title-note h2{margin:18px 0 10px;color:#3d2e2d;text-align:center;font:700 clamp(35px,5vw,58px)/.95 Georgia,serif;letter-spacing:-1px;text-transform:uppercase}.journal-title-note h2 small{display:block;margin-bottom:5px;font:700 16px/1 Georgia,serif;letter-spacing:1px}.journal-title-note h2:after{content:"";display:block;width:70%;height:1px;margin:14px auto 0;background:#9f7763}
.journal-gold-clip{position:absolute;left:50%;top:-27px;width:74px;height:33px;background:linear-gradient(#d9b65b,#ad8734);border-radius:15px 15px 4px 4px;box-shadow:0 2px 3px rgba(74,52,22,.25);transform:translateX(-50%)}.journal-gold-clip:after{content:"";position:absolute;left:50%;top:7px;width:9px;height:9px;border:2px solid #f7e7ab;border-radius:50%;transform:translateX(-50%)}
.journal-star{position:absolute;color:#d4aa37;font-size:28px;text-shadow:1px 2px 0 #8c6b2d;line-height:1}.journal-star--one{left:-19px;bottom:5px;transform:rotate(-15deg)}.journal-star--two{right:-15px;top:-8px;font-size:22px;transform:rotate(18deg)}.journal-flower{position:absolute;left:-17px;bottom:-15px;color:#e69ab0;font-size:28px;text-shadow:1px 1px 0 #986477}.journal-heart{position:absolute;right:-20px;bottom:-16px;color:#dc97ad;font:400 65px/1 Georgia,serif;text-shadow:1px 2px 0 #956275;transform:rotate(12deg)}
.journal-photo-stack{position:absolute;z-index:2;right:9%;bottom:15%;width:42%;padding:7px 7px 28px;background:#fffdf2;box-shadow:3px 6px 0 rgba(70,48,36,.17);transform:rotate(7deg)}.journal-photo-stack:before{content:"";position:absolute;z-index:-1;inset:5px -8px 3px 8px;background:#caa985;transform:rotate(-9deg)}.journal-photo-stack img{display:block;width:100%;height:125px;object-fit:cover;filter:saturate(.8) sepia(.12)}.journal-photo-stack span{position:absolute;right:5px;bottom:7px;left:5px;color:#765f53;text-align:center;font:700 7px monospace;letter-spacing:.7px}
.journal-postmark{position:absolute;z-index:2;left:7%;bottom:13%;width:92px;height:92px;display:grid;place-items:center;border:2px solid rgba(81,71,58,.6);border-radius:50%;color:rgba(81,71,58,.8);text-align:center;font:700 7px/1.45 monospace;transform:rotate(-13deg);opacity:.82}.journal-postmark:after{content:"✈  ✈  ✈";position:absolute;bottom:-18px;left:-9px;width:112px;border-top:1px solid rgba(81,71,58,.6);padding-top:3px;letter-spacing:3px}.journal-postmark b{font-size:9px}
.overlay--journal .journal-cover button{position:absolute;z-index:4;bottom:4%;left:50%;display:flex;gap:12px;align-items:center;padding:8px 0;border:0;border-bottom:1px solid #725553;background:none;color:#725553;font:600 10px monospace;cursor:pointer;transform:translateX(-50%);white-space:nowrap}.overlay--journal .journal-cover button span{font-size:16px;transition:transform .25s}.overlay--journal .journal-cover button:hover span{transform:translateX(5px)}
@media(max-width:700px){.journal-book-cover{width:min(67%,340px);height:88%;min-height:430px;padding:34px 20px 48px}.journal-side-tab{right:-40px;width:58px;height:118px;font-size:16px;letter-spacing:3px}.journal-ticket-corner{right:8px;font-size:6px}.journal-title-note{margin-top:44px;padding:18px 10px 15px}.journal-title-note h2{font-size:39px}.journal-title-note h2 small{font-size:12px}.journal-photo-stack{width:44%;bottom:14%}.journal-photo-stack img{height:92px}.journal-postmark{width:68px;height:68px;font-size:6px;bottom:12%}.journal-postmark:after{width:88px;font-size:6px}.journal-postmark b{font-size:7px}.journal-heart{font-size:49px}.journal-star{font-size:22px}}
@media(max-width:700px){.resume-sheet{width:92%;padding:7px 7px 22px}.resume-sheet figcaption{font-size:6px;bottom:5px}}

/* Restored resume-forward cover */
.overlay--journal .journal-cover{display:grid;place-items:center;padding:0;border:0;background:#4f5e70 url("assets/journal/01-reference.jpg") center/cover no-repeat;overflow:hidden;box-shadow:0 25px 70px rgba(39,27,31,.34),inset 0 0 0 1px rgba(255,255,255,.4);visibility:visible}
.overlay--journal .journal-cover:after{content:"";position:absolute;inset:0;background:rgba(36,48,64,.42);backdrop-filter:blur(3px);display:block}
.overlay--journal .journal-cover.is-open{visibility:hidden}
.overlay--journal .journal-cover-paper{position:relative;z-index:2;width:70%;min-height:70%;padding:34px 38px 62px;background:#f4e8d1;color:#5a3038;box-shadow:8px 10px 0 rgba(84,53,52,.14),0 18px 28px rgba(41,29,36,.25);transform:rotate(-1.2deg);overflow:hidden}
@media(max-width:700px){.overlay--journal .journal-cover-paper{width:78%;min-height:72%;padding:25px 25px 56px}.overlay--journal .journal-cover h2{font-size:58px}}

/* Fluid selected-works archive */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.overlay.overlay--works{
  --work-bg:#aeb99b;
  --work-accent:#a53f55;
  --work-second:#efc866;
  --next-bg:#aeb99b;
  --next-accent:#a53f55;
  --next-second:#efc866;
  overflow:hidden;
  isolation:isolate;
  background:transparent;
  color:#3d3337;
}
.works-fluid,.works-fluid-base,.works-liquid-layer,.works-grain{position:absolute;inset:0}
.works-fluid{z-index:-1;overflow:hidden;background:#aeb99b}
.works-fluid-base{background:var(--work-bg);transition:background .2s linear}
.works-grain{opacity:.26;background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(58,44,49,.06) 1px,transparent 1px);background-size:11px 11px;mix-blend-mode:soft-light;pointer-events:none}
.works-liquid-layer{
  z-index:2;
  opacity:0;
  background:var(--next-bg);
  border-radius:0 0 44% 38% / 0 0 8% 11%;
  transform:translateY(-116%);
  pointer-events:none;
}
.works-liquid-layer.is-pouring{opacity:1;animation:worksPour .92s cubic-bezier(.48,.04,.22,1) both}
.works-liquid-layer i{position:absolute;bottom:-17%;width:6.4%;height:23%;border-radius:0 0 50% 50%;background:var(--next-bg);transform-origin:top center;animation:workDrip .72s ease-in both}
.works-liquid-layer i:nth-child(1){left:10%;height:19%;animation-delay:.03s}.works-liquid-layer i:nth-child(2){left:36%;width:4.8%;height:28%;animation-delay:.12s}.works-liquid-layer i:nth-child(3){right:29%;height:21%;animation-delay:.07s}.works-liquid-layer i:nth-child(4){right:7%;width:5%;height:31%;animation-delay:.16s}
.works-toolbar{position:absolute;z-index:30;left:0;right:0;top:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:19px 25px;border-bottom:1px solid rgba(61,51,55,.2);font:700 9px monospace;letter-spacing:1px}.works-toolbar .back-button{justify-self:start;color:inherit}.works-toolbar p{margin:0}.works-toolbar>span{justify-self:end}
.works-stage{position:relative;z-index:5;width:100%;height:100%;min-height:620px;overflow:hidden;touch-action:pan-y}
.works-title-row{position:absolute;z-index:8;left:50%;top:62px;transform:translateX(-50%);text-align:center}.works-title-row p{margin:0;color:rgba(61,51,55,.68);font-size:8px;letter-spacing:1.5px}.works-series-label{display:block;margin-top:11px;color:var(--work-accent);font:700 9px/1 monospace;letter-spacing:1.5px;opacity:.78;transition:color .35s,transform .35s}.works-series-label.is-poster-series{transform:translateY(2px);color:#a2384a}
.works-word{position:absolute;z-index:2;left:0;right:0;height:112px;overflow:hidden;color:var(--work-accent);font:900 84px/1 var(--font);letter-spacing:0;white-space:nowrap;pointer-events:none;transition:color .35s}.works-word>span{position:absolute;left:50%;transform:translateX(-50%)}
.works-word>span:last-child{opacity:0}.works-word--top{top:11%;}.works-word--bottom{bottom:7%;color:var(--work-second)}
.works-word.is-changing>span:first-child{animation:workWordOut .7s cubic-bezier(.5,.05,.2,1) both}.works-word.is-changing>span:last-child{opacity:1;animation:workWordIn .7s cubic-bezier(.5,.05,.2,1) both}
.works-route{position:absolute;z-index:3;inset:8% -4% 9%;width:108%;height:83%;overflow:visible;pointer-events:none}.works-route path{fill:none;stroke:var(--work-second);stroke-width:4;stroke-linecap:round;stroke-dasharray:2 13;transition:stroke .4s;animation:worksRoute 10s linear infinite}
.works-orbit{position:absolute;z-index:9;inset:0;width:100%;height:100%;margin:0;transform:none}
.overlay--works .project-photo{
  position:absolute;
  width:218px;
  height:304px;
  padding:13px 13px 15px;
  border:0;
  background:#fff9ec;
  box-shadow:7px 9px 0 rgba(54,42,46,.12),0 20px 34px rgba(55,39,45,.2);
  cursor:pointer;
  opacity:1;
  transform-origin:center;
  transition:left .8s cubic-bezier(.46,.04,.2,1),top .8s cubic-bezier(.46,.04,.2,1),opacity .45s,transform .8s cubic-bezier(.46,.04,.2,1),filter .55s;
}
.overlay--works .project-photo:before{content:"";position:absolute;z-index:-1;inset:-7px;background:#fff9ec;clip-path:polygon(0 5%,3% 4%,1% 1%,6% 2%,9% 0,12% 2%,15% 0,18% 2%,21% 0,24% 2%,27% 0,30% 2%,33% 0,36% 2%,39% 0,42% 2%,45% 0,48% 2%,51% 0,54% 2%,57% 0,60% 2%,63% 0,66% 2%,69% 0,72% 2%,75% 0,78% 2%,81% 0,84% 2%,87% 0,90% 2%,93% 0,96% 2%,100% 1%,98% 6%,100% 10%,98% 14%,100% 18%,98% 22%,100% 26%,98% 30%,100% 34%,98% 38%,100% 42%,98% 46%,100% 50%,98% 54%,100% 58%,98% 62%,100% 66%,98% 70%,100% 74%,98% 78%,100% 82%,98% 86%,100% 90%,98% 94%,100% 99%,95% 98%,91% 100%,87% 98%,83% 100%,79% 98%,75% 100%,71% 98%,67% 100%,63% 98%,59% 100%,55% 98%,51% 100%,47% 98%,43% 100%,39% 98%,35% 100%,31% 98%,27% 100%,23% 98%,19% 100%,15% 98%,11% 100%,7% 98%,2% 100%,3% 95%,0 91%,2% 87%,0 83%,2% 79%,0 75%,2% 71%,0 67%,2% 63%,0 59%,2% 55%,0 51%,2% 47%,0 43%,2% 39%,0 35%,2% 31%,0 27%,2% 23%,0 19%,2% 15%,0 11%)}
.overlay--works .photo-art{height:202px;border:1px solid rgba(255,255,255,.72)}
.overlay--works .photo-art i{font-size:67px}.overlay--works .photo-art b{right:8px;top:7px;bottom:auto;font:700 9px monospace}.overlay--works .photo-art em{position:absolute;left:8px;bottom:7px;color:#fff;font:700 8px monospace;letter-spacing:1px}.overlay--works .photo-art:before{content:"";position:absolute;left:-12%;right:-12%;bottom:-22%;height:54%;border-radius:50% 50% 0 0;background:rgba(255,255,255,.2);transform:rotate(-7deg)}
.overlay--works .photo-art:after{width:105px;height:105px;border-color:rgba(255,255,255,.55)}
.project-caption{padding:10px 2px 0}.project-caption p{margin:0;color:#98868b;font:700 7px monospace;letter-spacing:1px}.project-caption h3{margin:3px 0 0;font:400 24px/1 var(--display);color:#4b3e42}.project-caption button{display:none;margin-top:8px;padding:0 0 3px;border:0;border-bottom:1px solid #55464a;background:none;color:#55464a;font-size:9px;cursor:pointer}
.overlay--works .project-photo.is-active{z-index:15;left:50%;top:50%;opacity:1;filter:none;transform:translate(-50%,-50%) rotate(-1deg) scale(1)}.overlay--works .project-photo.is-active:hover{transform:translate(-50%,-52%) rotate(0) scale(1.02)}.project-photo.is-active .project-caption button{display:inline-block}
.overlay--works .project-photo.is-next{z-index:8;left:81%;top:24%;filter:saturate(.75);transform:translate(-50%,-50%) rotate(7deg) scale(.56)}
.overlay--works .project-photo.is-far-next{z-index:6;left:98%;top:69%;opacity:.72;filter:saturate(.68);transform:translate(-50%,-50%) rotate(-8deg) scale(.42)}
.overlay--works .project-photo.is-prev{z-index:8;left:16%;top:25%;filter:saturate(.75);transform:translate(-50%,-50%) rotate(-7deg) scale(.57)}
.overlay--works .project-photo.is-far-prev{z-index:6;left:2%;top:72%;opacity:.72;filter:saturate(.68);transform:translate(-50%,-50%) rotate(8deg) scale(.42)}
.overlay--works .project-photo.is-hidden-card{z-index:1;left:50%;top:-35%;opacity:0;transform:translate(-50%,-50%) scale(.45)}
.overlay--works .project-photo.is-leaving-forward{animation:workCardLeaveDown .72s cubic-bezier(.5,.02,.28,1) both}.overlay--works .project-photo.is-leaving-back{animation:workCardLeaveUp .72s cubic-bezier(.5,.02,.28,1) both}.overlay--works .project-photo.is-entering-forward{animation:workCardEnterDown .78s cubic-bezier(.22,.62,.22,1) both}.overlay--works .project-photo.is-entering-back{animation:workCardEnterUp .78s cubic-bezier(.22,.62,.22,1) both}
.works-controls{position:absolute;z-index:22;left:50%;bottom:4%;display:flex;align-items:center;gap:22px;transform:translateX(-50%)}.works-controls>button{display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid rgba(61,51,55,.5);border-radius:50%;background:rgba(255,250,240,.16);color:inherit;font-size:17px;cursor:pointer;transition:background .2s,transform .2s}.works-controls>button:hover{background:rgba(255,250,240,.62);transform:translateY(-2px)}.works-controls p{min-width:170px;margin:0;text-align:center}.works-controls b{display:block;font:400 17px var(--display)}.works-controls span{display:block;margin-top:3px;font:700 7px monospace;letter-spacing:1px}
.works-hint{position:absolute;z-index:20;right:25px;bottom:20px;margin:0;font-size:8px;color:rgba(61,51,55,.7)}
.scene--room .memory-wall{z-index:13}

@keyframes worksPour{0%{transform:translateY(-116%);border-radius:0 0 36% 48% / 0 0 7% 12%}62%{transform:translateY(-11%);border-radius:0 0 42% 34% / 0 0 10% 7%}82%{transform:translateY(-2%);border-radius:0 0 25% 48% / 0 0 5% 8%}100%{transform:translateY(0);border-radius:0}}
@keyframes workDrip{0%{transform:scaleY(.25)}100%{transform:scaleY(1)}}
@keyframes workWordOut{0%{transform:translate(-50%,0);opacity:1}100%{transform:translate(-50%,115%);opacity:0}}
@keyframes workWordIn{0%{transform:translate(-50%,-115%);opacity:0}100%{transform:translate(-50%,0);opacity:1}}
@keyframes workCardLeaveDown{0%{transform:translate(-50%,-50%) rotate(-1deg) scale(1);opacity:1}100%{transform:translate(-50%,88vh) rotate(11deg) scale(.82);opacity:0}}
@keyframes workCardLeaveUp{0%{transform:translate(-50%,-50%) rotate(-1deg) scale(1);opacity:1}100%{transform:translate(-50%,-105vh) rotate(-9deg) scale(.82);opacity:0}}
@keyframes workCardEnterDown{0%{transform:translate(-50%,-112vh) rotate(-10deg) scale(.76);opacity:0}62%{opacity:1}100%{transform:translate(-50%,-50%) rotate(-1deg) scale(1);opacity:1}}
@keyframes workCardEnterUp{0%{transform:translate(-50%,92vh) rotate(10deg) scale(.76);opacity:0}62%{opacity:1}100%{transform:translate(-50%,-50%) rotate(-1deg) scale(1);opacity:1}}
@keyframes worksRoute{to{stroke-dashoffset:-150}}

@media(max-width:700px){
  .overlay.overlay--works{inset:1.5vh 2vw}.works-toolbar{grid-template-columns:1fr auto;padding:15px 13px}.works-toolbar p{display:none}.works-stage{min-height:560px}.works-title-row{top:54px;width:100%}.works-series-label{font-size:8px;letter-spacing:1px}
  .works-word{height:70px;font-size:46px}.works-word--top{top:13%}.works-word--bottom{bottom:13%}
  .works-route{inset:10% -25% 14%;width:150%;height:76%}
  .overlay--works .project-photo{width:190px;height:280px;padding:12px}.overlay--works .photo-art{height:183px}.overlay--works .photo-art i{font-size:58px}
  .overlay--works .project-photo.is-next{left:96%;top:28%;transform:translate(-50%,-50%) rotate(8deg) scale(.45)}.overlay--works .project-photo.is-far-next{left:112%;top:70%;transform:translate(-50%,-50%) rotate(-8deg) scale(.34)}.overlay--works .project-photo.is-prev{left:4%;top:29%;transform:translate(-50%,-50%) rotate(-7deg) scale(.45)}.overlay--works .project-photo.is-far-prev{left:-12%;top:70%;transform:translate(-50%,-50%) rotate(8deg) scale(.34)}
  .works-controls{bottom:5%;gap:14px}.works-controls p{min-width:130px}.works-controls>button{width:36px;height:36px}.works-hint{right:auto;left:50%;bottom:1.5%;width:100%;text-align:center;transform:translateX(-50%)}
}
@media(max-width:390px){.works-word{font-size:40px}.overlay--works .project-photo{width:176px;height:260px}.overlay--works .photo-art{height:166px}.project-caption h3{font-size:21px}.works-controls{bottom:4.5%}}
@media(prefers-reduced-motion:reduce){.works-liquid-layer.is-pouring,.overlay--works .project-photo.is-leaving-forward,.overlay--works .project-photo.is-leaving-back,.overlay--works .project-photo.is-entering-forward,.overlay--works .project-photo.is-entering-back,.works-word.is-changing>span{animation:none!important}.works-route path{animation:none}}

/* Paper keepsake website intro */
body.intro-lock{overflow:hidden}
.site-intro{
  --intro-grain-opacity:.2;
  position:fixed;
  z-index:1000;
  inset:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:6vh 6vw;
  background-color:#f1e4dd;
  background-image:linear-gradient(rgba(190,139,144,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(190,139,144,.08) 1px,transparent 1px);
  background-size:13px 13px;
  color:#57464c;
  opacity:1;
  visibility:visible;
  transition:opacity .5s ease,visibility .5s ease,background-color .7s ease;
}
.site-intro:before{content:"";position:absolute;inset:18px;border:1px dashed rgba(157,99,110,.3);pointer-events:none}
.site-intro.is-revealing{background-color:rgba(241,228,221,.35)}
.site-intro.is-exiting{opacity:0;visibility:hidden;pointer-events:none}
.intro-skip{position:absolute;z-index:30;right:28px;top:25px;display:flex;align-items:center;gap:12px;padding:8px 0;border:0;border-bottom:1px solid #725a61;background:none;color:#5e4b51;font-size:10px;cursor:pointer}.intro-skip span{font-size:15px;transition:transform .2s}.intro-skip:hover span{transform:translateX(4px)}
.intro-ambient{position:absolute;inset:0;pointer-events:none}.intro-ambient i{position:absolute;color:#c77785;font:400 24px var(--display);font-style:normal;opacity:0;transition:opacity .5s,transform 1s}.intro-ambient i:nth-child(1){left:7%;top:16%;transform:rotate(-12deg) translateY(12px)}.intro-ambient i:nth-child(2){right:8%;top:24%;transform:rotate(9deg) translateY(15px)}.intro-ambient i:nth-child(3){left:10%;bottom:14%;transform:rotate(8deg) translateY(10px)}.intro-ambient i:nth-child(4){right:9%;bottom:13%;transform:rotate(-7deg) translateY(14px)}
.site-intro.is-ready .intro-ambient i{opacity:.58;transform:rotate(0) translateY(0)}
.intro-keepsake{
  position:relative;
  width:min(940px,84vw);
  max-height:72vh;
  aspect-ratio:1.68;
  overflow:visible;
  border:7px solid #9b3d55;
  border-radius:23px;
  background:#d57b8d;
  box-shadow:0 30px 60px rgba(89,52,62,.24),inset 0 0 0 2px rgba(255,229,219,.65);
  opacity:0;
  transform:scale(.86) translateY(18px);
  transition:opacity .6s ease,transform .8s cubic-bezier(.2,.72,.24,1),box-shadow .7s;
  perspective:1500px;
}
.site-intro.is-ready .intro-keepsake{opacity:1;transform:scale(1) translateY(0)}
.site-intro.is-revealing .intro-keepsake{box-shadow:0 10px 30px rgba(89,52,62,.12)}
.intro-peek{position:absolute;z-index:1;inset:0;width:100%;height:100%;border-radius:14px;object-fit:cover;object-position:center 45%;filter:saturate(.72) brightness(1.06);transform:scale(.9);opacity:0;transition:opacity .4s .12s,transform 1.25s cubic-bezier(.2,.7,.2,1)}
.site-intro.is-revealing .intro-peek{opacity:1;transform:scale(1.08)}
.intro-door{position:absolute;z-index:6;top:0;bottom:0;width:50.2%;overflow:hidden;background-color:#d9788c;background-image:linear-gradient(rgba(255,236,226,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(112,47,66,.06) 1px,transparent 1px);background-size:10px 10px;box-shadow:inset 0 0 45px rgba(112,36,56,.15);backface-visibility:hidden;transition:transform 1.15s cubic-bezier(.48,.02,.22,1),opacity .35s .78s}
.intro-door:before{content:"";position:absolute;inset:20px;border:2px solid rgba(255,224,214,.72);border-radius:16px;box-shadow:inset 0 0 0 5px rgba(158,67,88,.24)}
.intro-door:after{content:"";position:absolute;inset:31px;border:1px dashed rgba(255,235,224,.65);border-radius:10px}
.intro-door--left{left:0;border-radius:14px 0 0 14px;transform-origin:left center}.intro-door--right{right:0;border-radius:0 14px 14px 0;transform-origin:right center}
.site-intro.is-revealing .intro-door--left{transform:translateX(-104%) rotateY(-16deg);opacity:0}.site-intro.is-revealing .intro-door--right{transform:translateX(104%) rotateY(16deg);opacity:0}
.intro-stitch{position:absolute;z-index:2;inset:12px;border:1px dashed rgba(107,47,62,.48);border-radius:16px}
.intro-sticker,.intro-doodle{position:absolute;z-index:3;display:grid;place-items:center;font-style:normal;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.intro-sticker--flower{left:11%;top:15%;width:58px;height:58px;border:1px solid #aa5265;border-radius:50%;background:#f0c8c9;color:#9a4054;font-size:28px;transform:rotate(-9deg)}
.intro-sticker--note{left:14%;bottom:16%;padding:10px 13px;background:#f4d991;box-shadow:3px 4px 0 rgba(99,57,59,.12);color:#70555b;font:700 8px/1.5 monospace;transform:rotate(5deg)}
.intro-sticker--stamp{right:13%;top:14%;width:58px;height:65px;border:4px dotted #b75d70;background:#f2d1d4;color:#923f53;font:700 8px/1.5 monospace;text-align:center;transform:rotate(6deg)}
.intro-sticker--heart{right:14%;bottom:14%;width:55px;height:55px;border:1px solid #a94c61;border-radius:50%;background:#f5d7c7;color:#a84a60;font-size:30px;transform:rotate(-5deg)}
.intro-doodle{color:#974457;font:400 19px var(--display)}.intro-doodle--one{right:10%;top:22%;transform:rotate(8deg)}.intro-doodle--two{left:12%;bottom:23%;transform:rotate(-6deg)}
.site-intro.is-ready .intro-sticker,.site-intro.is-ready .intro-doodle{animation:introStickerFloat 2.4s ease-in-out infinite alternate}.site-intro.is-ready .intro-sticker:nth-of-type(even){animation-delay:.25s}
.intro-title{position:absolute;z-index:9;left:50%;top:50%;width:70%;padding:38px 26px;border:1px solid rgba(255,239,228,.7);background:rgba(179,76,100,.22);color:#fff9f0;text-align:center;opacity:0;transform:translate(-50%,-44%) scale(.94);transition:opacity .5s .15s,transform .6s .15s}
.site-intro.is-ready .intro-title{opacity:1;transform:translate(-50%,-50%) scale(1)}
.site-intro.is-note .intro-title,.site-intro.is-revealing .intro-title{opacity:0;transform:translate(-50%,-57%) scale(.96)}
.intro-title>span{font:700 8px monospace;letter-spacing:2px}.intro-title h1{margin:12px 0 7px;font:400 64px/1 var(--display);letter-spacing:0;text-shadow:0 3px rgba(111,39,58,.16)}.intro-title p{margin:0;font:700 9px monospace;letter-spacing:2px}
.intro-message{position:absolute;z-index:10;left:50%;top:50%;width:min(520px,68%);padding:35px 28px;border:1px solid rgba(122,79,91,.22);background:#edf0df;background-image:linear-gradient(rgba(128,160,150,.13) 1px,transparent 1px);background-size:100% 22px;box-shadow:5px 7px 0 rgba(82,56,61,.12);color:#604d54;text-align:center;opacity:0;transform:translate(-50%,-45%) rotate(-1deg);transition:opacity .45s,transform .6s}
.site-intro.is-note .intro-message{opacity:1;transform:translate(-50%,-50%) rotate(-1deg)}.site-intro.is-revealing .intro-message{opacity:0;transform:translate(-50%,-58%) rotate(-2deg)}
.intro-message span{font:700 8px monospace;letter-spacing:2px;color:#a54f63}.intro-message p{margin:13px 0 10px;font:400 25px var(--display)}.intro-message small{font-size:9px;color:#8d7b7f}
.intro-latch{position:absolute;z-index:12;left:50%;width:44px;height:23px;border:2px solid #9b5361;border-radius:3px;background:#f2d3b8;box-shadow:2px 3px 0 rgba(86,49,54,.14);transform:translateX(-50%);transition:transform .55s,opacity .35s}.intro-latch:after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:#b87551;transform:translate(-50%,-50%)}.intro-latch--top{top:-13px}.intro-latch--bottom{bottom:-13px}.site-intro.is-note .intro-latch--top{transform:translate(-50%,-5px) rotate(-10deg)}.site-intro.is-note .intro-latch--bottom{transform:translate(-50%,5px) rotate(10deg)}.site-intro.is-revealing .intro-latch{opacity:0}
.intro-status{position:absolute;left:50%;bottom:3.2vh;margin:0;color:#88747a;font-size:9px;letter-spacing:1px;transform:translateX(-50%);transition:opacity .3s}.site-intro.is-revealing .intro-status{opacity:0}

@keyframes introStickerFloat{to{translate:0 -5px;rotate:2deg}}

@media(max-width:700px){
  .site-intro{padding:9vh 6vw}.site-intro:before{inset:9px}.intro-skip{right:16px;top:15px}
  .intro-keepsake{width:min(360px,88vw);height:min(640px,74vh);max-height:none;aspect-ratio:auto;border-radius:20px}
  .intro-peek{object-position:50% center}
  .intro-door{top:0;bottom:0;width:50.5%}.intro-door:before{inset:12px;border-radius:12px}.intro-door:after{inset:20px}
  .intro-title{width:82%;padding:34px 12px}.intro-title h1{font-size:42px}.intro-title p{font-size:7px}
  .intro-message{width:76%;padding:28px 17px}.intro-message p{font-size:21px}.intro-message small{font-size:8px}
  .intro-sticker--flower{left:16%;top:12%;width:45px;height:45px;font-size:22px}.intro-sticker--note{left:11%;bottom:13%}.intro-sticker--stamp{right:12%;top:12%;width:48px;height:56px}.intro-sticker--heart{right:14%;bottom:12%;width:45px;height:45px;font-size:24px}.intro-doodle--one{right:8%;top:28%}.intro-doodle--two{left:8%;bottom:25%}
  .intro-status{bottom:2vh;width:86%;text-align:center}
}
@media(max-width:390px){.intro-title h1{font-size:37px}.intro-message p{font-size:19px}.intro-keepsake{height:min(610px,72vh)}}
@media(prefers-reduced-motion:reduce){.intro-keepsake,.intro-title,.intro-message,.intro-door,.intro-peek,.site-intro{transition-duration:.15s!important}.site-intro.is-ready .intro-sticker,.site-intro.is-ready .intro-doodle{animation:none}}

/* Soft world-entry intro: text, glow, then layered home reveal */
.site-intro{
  padding:7vh 7vw;
  background-color:#f8eee8;
  background-image:linear-gradient(rgba(198,153,157,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(198,153,157,.055) 1px,transparent 1px);
  background-size:16px 16px;
  transition:opacity .85s ease,visibility .85s ease,background-color 1.1s ease;
}
.site-intro:before{inset:20px;border-color:rgba(165,117,125,.2)}
.site-intro.is-world-visible{background-color:rgba(248,238,232,.1);background-image:none}
.site-intro.is-exiting{transition-duration:.85s}
.intro-skip{right:28px;top:auto;bottom:25px;border:1px solid rgba(121,88,96,.38);padding:9px 13px;background:rgba(255,250,244,.68);backdrop-filter:blur(8px)}
.intro-glow{position:absolute;left:50%;top:50%;width:min(640px,70vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,230,199,.72),rgba(244,201,207,.22) 44%,transparent 72%);filter:blur(26px);opacity:0;transform:translate(-50%,-48%) scale(.7);transition:opacity 1.25s ease,transform 2s cubic-bezier(.2,.7,.2,1)}
.site-intro.is-glowing .intro-glow{opacity:1;transform:translate(-50%,-50%) scale(1.18)}
.intro-welcome{position:relative;z-index:5;max-width:780px;text-align:center;opacity:0;filter:blur(12px);transform:translateY(18px) scale(.96);transition:opacity 1.25s ease,filter 1.45s ease,transform 1.45s cubic-bezier(.2,.72,.25,1)}
.site-intro.is-copy-visible .intro-welcome{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}
.site-intro.is-copy-leaving .intro-welcome{opacity:0;filter:blur(8px);transform:translateY(-12px) scale(.985);transition-duration:.8s}
.intro-welcome>span{font:700 9px monospace;letter-spacing:2.4px;color:#b36473}.intro-welcome h1{margin:17px 0 15px;font:400 clamp(41px,6vw,74px)/1.14 var(--display);letter-spacing:0;color:#664b56;text-shadow:0 4px rgba(255,255,255,.75)}.intro-welcome p{margin:0;color:#806a71;font-size:14px;line-height:1.85}.intro-welcome i{display:block;margin-top:22px;color:#c27684;font:400 21px var(--display);font-style:normal;animation:introHeartFloat 1.8s ease-in-out infinite alternate}
.intro-status{bottom:4.2vh;opacity:.6}.site-intro.is-copy-leaving .intro-status{opacity:0}

body.intro-lock #outside{transform:scale(1.035)}
body.intro-lock #outside .sky{opacity:0;filter:blur(10px);transform:scale(1.04)}
body.intro-lock #outside .outside-copy,body.intro-lock #outside .enter-cta,body.intro-lock #outside .outside-note,body.intro-lock #outside .house-wrap:after{opacity:0;transform:translateY(12px)}
body.intro-lock #outside .outside-copy{transform:translate(-50%,12px)}
body.intro-lock #outside .house-wrap{transform:translateX(-50%) scale(.91)}
body.intro-lock #outside .reference-house-image{opacity:0;filter:saturate(.68) contrast(.94) blur(12px) brightness(1.08)}
body.intro-lock #outside .mailbox,body.intro-lock #outside .reference-door-hotspot{opacity:0}

body.intro-lock #outside.intro-world-reveal{transform:scale(1);transition:transform 3.4s cubic-bezier(.2,.7,.2,1)}
body.intro-lock #outside.intro-world-reveal .sky{opacity:1;filter:blur(0);transform:scale(1);transition:opacity 1.1s ease,filter 1.3s ease,transform 2.3s ease}
body.intro-lock #outside.intro-world-reveal .house-wrap{transform:translateX(-50%) scale(1);transition:transform 3s cubic-bezier(.2,.7,.2,1)}
body.intro-lock #outside.intro-world-reveal .reference-house-image{opacity:1;filter:saturate(.8) contrast(.96) blur(0) brightness(1);transition:opacity 1.15s .35s ease,filter 1.5s .35s ease}
body.intro-lock #outside.intro-world-reveal .outside-copy{opacity:1;transform:translate(-50%,0);transition:opacity .85s 2.35s ease,transform .9s 2.35s ease}
body.intro-lock #outside.intro-world-reveal .enter-cta{opacity:1;transform:translateY(0);transition:opacity .75s 2.6s ease,transform .8s 2.6s ease}
body.intro-lock #outside.intro-world-reveal .outside-note,body.intro-lock #outside.intro-world-reveal .house-wrap:after{opacity:1;transform:translateY(0);transition:opacity .75s 2.75s ease,transform .8s 2.75s ease}
body.intro-lock #outside.intro-world-reveal .mailbox,body.intro-lock #outside.intro-world-reveal .reference-door-hotspot{opacity:.01;transition:opacity .3s 2.9s}
.intro-house-layer{position:absolute;z-index:4;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;opacity:0;filter:saturate(.82) contrast(.96);transition:opacity .9s ease,transform 1.8s cubic-bezier(.2,.7,.2,1)}
.intro-house-layer--garden{clip-path:inset(62% 0 0 0);transform:translateY(14px)}
.intro-house-layer--character{clip-path:inset(42% 37% 5% 36%);transform:translateY(10px) scale(.98)}
body.intro-lock #outside.intro-world-reveal .intro-house-layer--garden{opacity:1;transform:translateY(0);transition-delay:1.1s}
body.intro-lock #outside.intro-world-reveal .intro-house-layer--character{opacity:1;transform:translateY(0) scale(1);transition-delay:2.05s}
.intro-window-glow{position:absolute;z-index:5;inset:0;pointer-events:none;opacity:0;transition:opacity .9s 1.65s ease}.intro-window-glow i{position:absolute;border-radius:50%;background:rgba(255,216,126,.42);box-shadow:0 0 22px 12px rgba(255,216,126,.26);filter:blur(2px)}.intro-window-glow i:nth-child(1){left:36%;top:37%;width:3.8%;height:6%}.intro-window-glow i:nth-child(2){left:57%;top:40%;width:3.8%;height:6%}.intro-window-glow i:nth-child(3){left:48.2%;top:32%;width:3.4%;height:5%}
body.intro-lock #outside.intro-world-reveal .intro-window-glow{opacity:1;animation:introWarmPulse 2.4s 1.7s ease-in-out infinite alternate}
.homepage-hint{position:fixed;z-index:120;left:50%;bottom:6.5vh;padding:10px 15px;border:1px solid rgba(162,110,119,.38);border-radius:4px;background:rgba(255,249,240,.9);box-shadow:4px 5px 0 rgba(134,87,97,.11);color:#745a64;font:400 15px var(--display);opacity:0;visibility:hidden;transform:translate(-50%,12px);transition:opacity .45s,visibility .45s,transform .55s;pointer-events:none}.homepage-hint.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0)}

@keyframes introHeartFloat{to{transform:translateY(-5px)}}
@keyframes introWarmPulse{to{filter:brightness(1.2)}}

@media(max-width:700px){
  .site-intro{padding:8vh 8vw}.site-intro:before{inset:9px}.intro-skip{right:14px;bottom:14px}
  .intro-welcome h1{font-size:41px}.intro-welcome p{font-size:12px}.intro-glow{width:90vw}
  body.intro-lock #outside .house-wrap{transform:translateX(-50%) scale(.9)}
  body.intro-lock #outside.intro-world-reveal .house-wrap{transform:translateX(-50%) scale(1)}
  body.intro-lock #outside.intro-world-reveal .enter-cta{transform:translateX(-50%) translateY(0)}
  .intro-house-layer--character{clip-path:inset(42% 36% 4% 35%)}
  .homepage-hint{bottom:calc(5vh + 130px);width:max-content;max-width:86vw;font-size:14px;text-align:center}
}
@media(max-width:390px){.intro-welcome h1{font-size:36px}.intro-welcome p{font-size:11px}.homepage-hint{font-size:13px}}
@media(prefers-reduced-motion:reduce){.intro-welcome,.intro-glow,.site-intro,#outside.intro-world-reveal,.intro-house-layer,.intro-window-glow{transition-duration:.2s!important;animation:none!important}.intro-welcome i{animation:none}}

/* One-take opening and explorable room hub */
body:after{opacity:.055}
.scene--outside{display:none}
.scene--room{opacity:1;visibility:visible;background:#f0dfd5}
.scene--room.is-active{transform:scale(1)}
.reference-room-image{filter:saturate(.9) contrast(.96) brightness(1.02)}
.room-dock{display:none}
.room-header{left:auto;right:2.2vw;top:2.2vh;padding:0;border:0;background:none;box-shadow:none;backdrop-filter:none}
.room-header>div{display:none}
.room-tools .icon-button{background:rgba(255,250,244,.9);box-shadow:0 5px 18px rgba(76,50,57,.12)}
.room-hint{left:3vw;bottom:3vh;background:rgba(77,55,60,.62)}
.replay-intro{position:absolute;z-index:22;left:2.4vw;top:2.5vh;padding:7px 9px;border:0;border-bottom:1px solid rgba(94,61,71,.55);background:rgba(255,249,242,.72);color:#72535e;font:500 9px var(--font);cursor:pointer;backdrop-filter:blur(7px)}
.replay-intro:hover{background:#fffaf4}

.site-intro{display:grid;padding:0;background:#f8dfe7;background-image:linear-gradient(rgba(187,101,130,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(187,101,130,.04) 1px,transparent 1px);background-size:18px 18px;transition:none}
.site-intro:before{z-index:40;inset:14px;border-color:rgba(177,92,121,.2)}
.intro-skip{z-index:60;right:25px;top:auto;bottom:22px;padding:9px 12px;border:1px solid rgba(126,77,94,.32);background:rgba(255,244,247,.72);backdrop-filter:blur(9px)}
.intro-status{z-index:60;bottom:3vh;color:#a27080;font-size:8px;letter-spacing:1.2px}
.opening-typography{position:absolute;z-index:20;left:50%;top:50%;width:min(720px,88vw);height:min(610px,76vh);transform:translate(-50%,-50%);color:#d45283;text-align:center;filter:drop-shadow(0 4px 0 rgba(255,255,255,.62))}
.opening-word{position:absolute;display:block;width:max-content;font:400 clamp(68px,10vw,142px)/.82 "Great Vibes","Segoe Script",cursive;letter-spacing:0;white-space:nowrap;will-change:transform,opacity,filter,clip-path}
.opening-word--welcome{left:50%;top:5%;transform:translateX(-50%)}
.opening-word--to{left:50%;top:31%;font-size:clamp(45px,6vw,84px);transform:translateX(-50%)}
.opening-word--little{left:28%;top:45%;transform:translateX(-50%)}
.opening-word--house{right:3%;top:67%}
.opening-doodle{position:absolute;color:#d96893;font:400 clamp(20px,3vw,40px) var(--display);text-shadow:0 3px #fff}
.opening-doodle--one{right:6%;top:9%}.opening-doodle--two{left:8%;top:60%}.opening-doodle--three{right:18%;bottom:1%}
.opening-line{position:absolute;height:2px;border-radius:50%;background:#e27a9f;opacity:.62}
.opening-line--one{left:7%;top:36%;width:18%;transform:rotate(-8deg)}.opening-line--two{right:6%;top:61%;width:20%;transform:rotate(7deg)}
.opening-house{position:absolute;z-index:10;inset:-3%;overflow:hidden;background:#f7dfe7;perspective:1000px}
.opening-house-sky{position:absolute;inset:0;background:linear-gradient(#bde3f7,#f6e0e6 58%,#b9cb86);opacity:.65}
.opening-house img{position:absolute;z-index:2;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;will-change:transform,filter}
.opening-window-light{position:absolute;z-index:4;border-radius:50%;background:rgba(255,216,127,.56);box-shadow:0 0 28px 18px rgba(255,207,114,.4);filter:blur(3px)}
.opening-window-light--one{left:40.7%;top:28%;width:4.8%;height:7%}.opening-window-light--two{left:56.2%;top:30%;width:4.8%;height:7%}
.opening-door{position:absolute;z-index:5;left:40.7%;top:53.5%;width:6.4%;height:18%;border-radius:45% 45% 4px 4px;background:rgba(215,116,139,.34);backface-visibility:hidden;box-shadow:inset -4px 0 rgba(98,61,62,.18)}
.opening-door i{position:absolute;right:16%;top:52%;width:6px;height:6px;border-radius:50%;background:#efc56d;box-shadow:0 0 8px #fff0a9}
.opening-door-light{position:absolute;z-index:3;left:43.8%;top:63%;width:7vw;height:7vw;border-radius:50%;background:radial-gradient(circle,#fff9dc 0,#ffd58c 35%,rgba(255,204,121,.25) 68%,transparent 72%);transform:translate(-50%,-50%);filter:blur(5px);will-change:transform,opacity}
.opening-warm-wash{position:absolute;z-index:30;inset:-15%;pointer-events:none;background:radial-gradient(circle at 44% 62%,#fffdf1 0,#ffe6b4 27%,rgba(255,222,173,.94) 50%,rgba(250,222,210,.96) 78%);filter:blur(5px)}

body.intro-lock #room{opacity:1;visibility:visible;transform:scale(1.1)}
body.intro-lock #room .reference-room-image{opacity:0;filter:blur(18px) saturate(.72) brightness(1.15);transform:translate3d(var(--parallax-x),var(--parallax-y),0) scale(1.16)}
body.intro-lock #room .room-light-layer,body.intro-lock #room .room-object,body.intro-lock #room .room-header,body.intro-lock #room .room-hint,body.intro-lock #room .replay-intro,body.intro-lock #room .light-switch,body.intro-lock #room .room-pet,body.intro-lock #room .room-secret{opacity:0}
body.intro-lock #room.room-intro-reveal{transform:scale(1);transition:transform 1.65s cubic-bezier(.2,.72,.2,1)}
body.intro-lock #room.room-intro-reveal .reference-room-image{opacity:1;filter:saturate(.9) contrast(.96) brightness(1.02) blur(0);transform:translate3d(var(--parallax-x),var(--parallax-y),0) scale(1.035);transition:opacity 1s ease,filter 1.35s ease,transform 1.6s cubic-bezier(.2,.72,.2,1)}
body.intro-lock #room.room-intro-reveal .room-light-layer{opacity:1;transition:opacity .9s .2s}
body.intro-lock #room.room-intro-reveal .room-object,body.intro-lock #room.room-intro-reveal .light-switch,body.intro-lock #room.room-intro-reveal .room-pet,body.intro-lock #room.room-intro-reveal .room-secret{opacity:1;transition:opacity .65s .52s}
body.intro-lock #room.room-intro-reveal .room-header,body.intro-lock #room.room-intro-reveal .room-hint,body.intro-lock #room.room-intro-reveal .replay-intro{opacity:1;transition:opacity .55s .82s}

.character-origin-mask{position:absolute;z-index:2;left:35.8%;top:42%;width:17%;height:30%;border-radius:46% 48% 30% 34%;background:radial-gradient(ellipse at 50% 70%,rgba(231,171,178,.88),rgba(245,210,205,.74) 46%,rgba(241,218,207,.22) 70%,transparent 73%);backdrop-filter:blur(13px) saturate(.68);box-shadow:inset 0 -10px 18px rgba(147,90,102,.12);pointer-events:none}
.room-character{--walk-duration:700ms;--look-x:0px;--look-y:0px;z-index:18;left:45%;top:67%;bottom:auto;width:clamp(68px,7.2vw,102px);height:clamp(128px,15vw,188px);translate:0 0;transform:translate(-50%,-100%);transform-origin:center bottom;transition:left var(--walk-duration) linear,top var(--walk-duration) linear,filter .3s;will-change:left,top,transform;animation:actorIdle 3.2s ease-in-out infinite}
.room-character:hover{transform:translate(-50%,-100%);filter:brightness(1.04)}
.room-character>*{opacity:1!important}
.room-character .avatar-head,.room-character .avatar-body,.room-character .avatar-arm,.room-character .avatar-legs{display:block!important}
.room-character .avatar-head{width:78%;animation:actorHead 4.2s ease-in-out infinite}
.room-character .hair{animation:actorHair 2.8s ease-in-out infinite}
.room-character .face b{transform:translate(var(--look-x),var(--look-y));animation:actorBlink 5.2s infinite}
.room-character .avatar-body{animation:actorBreath 2.9s ease-in-out infinite}
.room-character .avatar-arm{animation:actorArm 4.5s ease-in-out infinite}
.room-character.is-facing-left .face b{margin-left:-2px}.room-character.is-facing-right .face b{margin-left:1px}
.room-character.is-walking{animation:actorWalkBob .38s ease-in-out infinite;cursor:wait}
.room-character.is-walking .avatar-legs i:first-child{animation:actorLegLeft .38s ease-in-out infinite}.room-character.is-walking .avatar-legs i:last-child{animation:actorLegRight .38s ease-in-out infinite}
.room-character.is-walking .hair{animation-duration:.48s}
.room-character.is-talking .avatar-arm{animation:actorWave 1.1s ease-in-out infinite}
.room-character.is-looking .avatar-head{transform:translateX(-50%) rotate(-5deg)}
.room-character.is-making-up .avatar-arm{transform:rotate(-58deg)}
.room-character.is-sitting{transform:translate(-50%,-86%) scaleY(.86);animation:none}
.room-character .avatar-bubble{left:76%;top:-5%;max-width:190px;white-space:nowrap}
.room-character.is-welcoming .avatar-bubble{opacity:1;transform:translateY(0)}
.room-character.is-welcoming .avatar-bubble{font-size:0}.room-character.is-welcoming .avatar-bubble:after{content:"欢迎来到我的小世界 ♡";font-size:11px}
.room-character .object-label{display:none}

.room-object.is-active-hotspot{background:radial-gradient(circle,rgba(255,242,200,.36),rgba(255,223,176,.08) 52%,transparent 72%);filter:brightness(1.1);animation:hotspotGlow 1.4s ease-in-out infinite alternate}
.room-tour-dialog{position:absolute;z-index:45;left:50%;bottom:15vh;width:min(440px,82vw);padding:15px 17px 13px;border:1px solid rgba(137,91,100,.42);border-radius:6px 13px 13px 13px;background:rgba(255,250,242,.95);box-shadow:7px 8px 0 rgba(116,76,84,.13),0 18px 45px rgba(68,44,51,.16);opacity:0;visibility:hidden;transform:translate(-50%,12px) scale(.98);transition:opacity .32s,visibility .32s,transform .4s;pointer-events:none;backdrop-filter:blur(10px)}
.room-tour-dialog.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);pointer-events:auto}
.room-tour-dialog p{margin:0 0 12px;font:400 16px/1.65 var(--display);color:#654b54}
.room-tour-dialog>div{display:flex;align-items:center;justify-content:space-between;gap:14px}.room-tour-enter{padding:7px 0;border:0;border-bottom:1px solid #73505b;background:none;font-size:10px;font-weight:600;cursor:pointer}.room-tour-enter span{margin-left:15px}.room-tour-close{width:28px;height:28px;border:1px solid #c5aca6;border-radius:50%;background:#fffaf2;cursor:pointer}

.room-secret{position:absolute;z-index:13;border:0;background:transparent;cursor:pointer}.room-secret--curtain{right:1.5%;top:15%;width:4.5%;height:11%}.room-secret--plant{right:6%;top:43%;width:9%;height:16%;color:#8b9c72;font-size:18px}.room-secret--seat{right:21%;bottom:12%;width:12%;height:20%;border-radius:50%}
.room-secret--plant span{opacity:0;transition:opacity .2s}.room-secret--plant:hover span{opacity:.8}
.curtain-cat{position:absolute;z-index:12;right:7.5%;top:34%;display:grid;place-items:center;width:38px;height:27px;border-radius:50% 50% 8px 8px;background:#e4a97d;color:#714c43;font:700 9px var(--font);opacity:0;transform:translateY(16px);transition:opacity .35s,transform .5s;pointer-events:none}.scene--room.curtain-open .curtain-cat{opacity:1;transform:translateY(0)}
.scene--room.plant-awake .room-secret--plant{animation:plantShake .75s ease}

.scene--room.is-focus-works .reference-room-image{transform:translate3d(3%,-1%,0) scale(1.1)}
.scene--room.is-focus-journal .reference-room-image{transform:translate3d(-2%,-4%,0) scale(1.12)}
.scene--room.is-focus-wardrobe .reference-room-image,.scene--room.is-focus-about .reference-room-image{transform:translate3d(-4%,-1%,0) scale(1.1)}
.scene--room.is-focus-lab .reference-room-image{transform:translate3d(-5%,2%,0) scale(1.11)}

@keyframes actorIdle{0%,100%{transform:translate(-50%,-100%) translateY(0)}50%{transform:translate(-50%,-100%) translateY(-3px)}}
@keyframes actorHead{0%,76%,100%{transform:translateX(-50%) rotate(0)}84%{transform:translateX(-50%) rotate(2deg)}92%{transform:translateX(-50%) rotate(-1deg)}}
@keyframes actorHair{0%,100%{translate:0 0}50%{translate:1.5px 0}}
@keyframes actorBreath{0%,100%{scale:1 1}50%{scale:1.015 .985}}
@keyframes actorArm{0%,76%,100%{transform:rotate(-10deg)}84%{transform:rotate(-18deg)}92%{transform:rotate(-8deg)}}
@keyframes actorBlink{0%,45%,49%,100%{scale:1 1}47%{scale:1 .08}}
@keyframes actorWalkBob{0%,100%{transform:translate(-50%,-100%) translateY(0)}50%{transform:translate(-50%,-100%) translateY(-5px)}}
@keyframes actorLegLeft{0%,100%{transform:rotate(7deg)}50%{transform:rotate(-7deg)}}@keyframes actorLegRight{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes actorWave{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(-55deg)}}
@keyframes hotspotGlow{to{filter:brightness(1.18);background-color:rgba(255,231,183,.1)}}
@keyframes plantShake{0%,100%{transform:none}25%{transform:rotate(-5deg)}55%{transform:rotate(5deg)}75%{transform:rotate(-2deg)}}

@media(max-width:700px){
  .site-intro:before{inset:8px}.intro-skip{right:13px;bottom:13px}
  .opening-typography{height:min(560px,72vh)}.opening-word{font-size:clamp(61px,20vw,90px)}.opening-word--welcome{top:8%}.opening-word--to{top:31%;font-size:48px}.opening-word--little{left:39%;top:46%;font-size:70px}.opening-word--house{right:4%;top:67%;font-size:82px}
  .opening-house{inset:0}.opening-house img{object-position:43% center}.opening-door{left:37.5%;top:53%;width:11%;height:17%}.opening-door-light{left:43%;top:63%;width:19vw;height:19vw}.opening-window-light--one{left:37%;top:28%;width:8%;height:6%}.opening-window-light--two{left:59%;top:30%;width:8%;height:6%}
  .room-header{right:3vw}.replay-intro{left:3vw;top:2.2vh}.room-hint{display:none}
  .room-character{width:64px;height:120px}.character-origin-mask{left:36%;top:44%;width:22%;height:26%}
  .room-tour-dialog{bottom:12vh;width:88vw;padding:13px 14px}.room-tour-dialog p{font-size:14px}
  .room-secret--curtain{right:0;width:11%;height:10%}.room-secret--plant{right:2%;width:22%}.room-secret--seat{right:13%;width:24%}
}
@media(prefers-reduced-motion:reduce){.room-character,.room-character *{animation:none!important}.room-character{transition-duration:.08s!important}}

/* Character sprite refinement */
.character-origin-mask{left:34.8%;top:40.8%;width:18%;height:33%;border:5px solid #a98270;border-radius:3px;background-color:#fff4e8;background-image:linear-gradient(rgba(191,139,135,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(191,139,135,.06) 1px,transparent 1px);background-size:11px 11px;backdrop-filter:none;box-shadow:5px 7px 0 rgba(94,62,59,.13),inset 0 0 18px rgba(182,126,119,.08);transform:rotate(-2deg)}
.character-origin-mask:before{content:"IDEAS\A ✿\A work in progress";position:absolute;inset:0;display:grid;place-items:center;white-space:pre;text-align:center;color:#c3818f;font:400 15px/1.7 var(--display)}
.character-origin-mask:after{content:"";position:absolute;z-index:-1;left:18%;right:18%;top:100%;height:34%;border-left:6px solid #9b745f;border-right:6px solid #9b745f;transform:skewX(-8deg);opacity:.8}
.room-character{width:clamp(52px,5.2vw,76px);height:clamp(138px,16vw,205px);border-radius:42% 42% 18% 18%}
.room-character .room-character-sprite{position:absolute;z-index:6;inset:0;display:block!important;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 5px rgba(68,45,54,.22));transform-origin:center bottom;animation:actorSpriteSway 3.4s ease-in-out infinite}
.room-character .sprite-blink{position:absolute;z-index:8;left:36%;top:13.5%;display:block;width:29%;height:3%;opacity:0;animation:spriteBlink 5.2s infinite;pointer-events:none}
.room-character .sprite-blink:before,.room-character .sprite-blink:after{content:"";position:absolute;top:50%;width:25%;height:1px;border-radius:50%;background:#33262d}.room-character .sprite-blink:before{left:3%}.room-character .sprite-blink:after{right:3%}
.room-character .avatar-head,.room-character .avatar-body,.room-character .avatar-arm,.room-character .avatar-legs{display:none!important}
.room-character .avatar-bubble{opacity:0!important}
.room-character.is-welcoming .avatar-bubble{opacity:1!important}
.room-character.is-walking .room-character-sprite{animation:spriteWalk .38s ease-in-out infinite}
.room-character.is-talking .room-character-sprite{animation:spriteTalk 1.15s ease-in-out infinite}
.room-character.is-looking .room-character-sprite{transform:rotate(-2deg)}
.room-character.is-making-up .room-character-sprite{animation:spriteMakeup 1.8s ease-in-out infinite}
.room-object:focus-visible{outline:1px dashed rgba(177,105,124,.62);outline-offset:2px}
@keyframes actorSpriteSway{0%,100%{transform:rotate(-.6deg) scaleY(1)}50%{transform:rotate(.7deg) scaleY(.992)}}
@keyframes spriteBlink{0%,45%,49%,100%{opacity:0}46.5%,47.5%{opacity:.9}}
@keyframes spriteWalk{0%,100%{transform:translateY(0) rotate(-1.4deg) skewX(-.6deg)}50%{transform:translateY(-3px) rotate(1.4deg) skewX(.6deg)}}
@keyframes spriteTalk{0%,100%{transform:rotate(-.5deg)}50%{transform:rotate(1.2deg) translateY(-2px)}}
@keyframes spriteMakeup{0%,100%{transform:rotate(0)}50%{transform:rotate(-2deg) translateY(-2px)}}
@media(max-width:700px){
  .opening-word--little{left:50%;font-size:62px}.opening-word--house{left:50%;right:auto;font-size:76px;transform:translateX(-50%)}
  .reference-room-image{object-position:70% center}
  .character-origin-mask{display:none}
  .room-character{width:48px;height:128px}
}

/* The guide character is a movable foreground layer; the seated figure remains in the room artwork. */
.room-character-hotspot{pointer-events:auto}

/* 7.5-second one-take opening: lettering -> house -> doorway -> room. */
.site-intro{
  isolation:isolate;
  overflow:hidden;
  background-color:#f9e6ec;
  background-image:
    radial-gradient(circle at 50% 43%,rgba(255,255,255,.52),transparent 34%),
    linear-gradient(rgba(190,104,132,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(190,104,132,.03) 1px,transparent 1px);
  background-size:auto,18px 18px,18px 18px;
}
.site-intro:after{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  opacity:var(--intro-grain-opacity);
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.opening-typography{z-index:22;filter:drop-shadow(0 3px 0 rgba(255,255,255,.72))}
.opening-word{overflow:visible}
.opening-word>span{display:block;will-change:clip-path,transform,opacity,filter}
.opening-word>i{
  position:absolute;
  left:8%;
  right:1%;
  bottom:-.05em;
  height:3px;
  border-radius:50%;
  background:linear-gradient(90deg,transparent 0,#df77a0 13% 86%,transparent 100%);
  transform:rotate(-2deg);
  opacity:.64;
}
.opening-word--to>i{left:18%;right:12%}
.opening-word--little>i{left:5%;right:-5%;transform:rotate(2deg)}
.opening-word--house>i{left:2%;right:-7%}
.opening-transition-star{
  position:absolute;
  z-index:4;
  left:50%;
  top:51%;
  color:#e16f9c;
  font:400 clamp(28px,4vw,54px) var(--display);
  text-shadow:0 0 18px #fff,0 0 34px rgba(255,255,255,.9);
  transform:translate(-50%,-50%);
  will-change:transform,opacity,filter;
}
.opening-house{z-index:10;transform-origin:44% 62%}
.opening-house-sky{z-index:1;background:linear-gradient(#cce9f7 0,#f8e5e9 58%,#bed18e 100%)}
.opening-house img{object-position:44% center;transform-origin:44% 62%}
.opening-depth{position:absolute;z-index:3;inset:0;pointer-events:none;will-change:transform,opacity}
.opening-depth--sky{background:linear-gradient(180deg,rgba(255,255,255,.2),transparent 42%)}
.opening-depth--garden{top:58%;background:linear-gradient(0deg,rgba(86,118,51,.15),transparent 62%);filter:blur(1px)}
.opening-window-light{z-index:5;mix-blend-mode:screen}
.opening-door{z-index:7;transform-style:preserve-3d}
.opening-door-light{z-index:6}
.opening-warm-wash{z-index:31}
.opening-room-glow{
  position:absolute;
  z-index:32;
  inset:-12%;
  pointer-events:none;
  background:radial-gradient(circle at 44% 62%,#fffdf3 0,#ffe5ae 24%,rgba(255,223,181,.82) 49%,rgba(255,236,221,.34) 72%,transparent 82%);
  filter:blur(8px);
}
.room-welcome-bubble{
  position:absolute;
  z-index:24;
  left:45%;
  top:43%;
  max-width:min(260px,38vw);
  margin:0;
  padding:10px 14px;
  border:1px solid rgba(142,91,104,.42);
  border-radius:5px 13px 13px 13px;
  background:rgba(255,250,243,.94);
  box-shadow:5px 6px 0 rgba(112,73,82,.12);
  color:#78525f;
  font:400 15px/1.4 var(--display);
  opacity:0;
  visibility:hidden;
  transform:translate(10px,9px) scale(.96);
  transition:opacity .35s,visibility .35s,transform .45s cubic-bezier(.2,.75,.25,1);
  pointer-events:none;
  white-space:pre-line;
}
.room-welcome-bubble:before{
  content:"";
  position:absolute;
  left:-8px;
  bottom:8px;
  width:13px;
  height:13px;
  border-left:1px solid rgba(142,91,104,.42);
  border-bottom:1px solid rgba(142,91,104,.42);
  background:#fffaf3;
  transform:rotate(45deg);
}
.room-welcome-bubble.is-visible{opacity:1;visibility:visible;transform:translate(10px,0) scale(1)}
.room-character-sprite{mix-blend-mode:multiply;pointer-events:none;user-select:none}
.room-character{cursor:default}
/* Keep the guide character out of image-led project pages. */
body.project-view-open #room-character,
body.project-view-open #room-welcome-bubble{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
/* The supplied character cutout is intentionally excluded from the opening and room artwork. */
.intro-house-layer--character,
#room-character,
#room-welcome-bubble{display:none!important}
body.intro-lock .room-welcome-bubble{opacity:0;visibility:hidden}
body.intro-lock #room .reference-room-image{transition:none!important}
.interactive-status{position:absolute;z-index:23;right:2.6vw;bottom:2.5vh;margin:0;color:rgba(91,68,75,.72);font:700 8px/1 monospace;letter-spacing:1.5px;opacity:0;transform:translateY(5px);transition:opacity .45s,transform .45s;pointer-events:none}
.interactive-status.is-visible{opacity:1;transform:none}

@media(max-width:700px){
  .opening-typography{width:92vw;height:min(560px,70vh)}
  .opening-word{font-size:clamp(58px,18vw,82px)}
  .opening-word--welcome{top:9%}
  .opening-word--to{top:31%;font-size:42px}
  .opening-word--little{left:50%;top:45%;font-size:clamp(54px,16vw,72px)}
  .opening-word--house{left:50%;right:auto;top:67%;font-size:clamp(66px,19vw,84px);transform:translateX(-50%)}
  .opening-house img{object-position:43% center}
  .opening-door{left:37.5%;top:53%;width:11%;height:17%}
  .opening-door-light{left:43%;top:62%;width:20vw;height:20vw}
  .opening-window-light--one{left:37%;top:28%;width:8%;height:6%}
  .opening-window-light--two{left:59%;top:30%;width:8%;height:6%}
  .reference-room-image{object-position:43% center}
  .room-welcome-bubble{left:30%;top:42%;max-width:62vw;font-size:13px}
  .interactive-status{right:12px;bottom:12px;font-size:7px}
}

/* Local portfolio project index and case studies */
.overlay--works .photo-art{overflow:hidden;background:#eee7de}
.overlay--works .photo-art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .55s ease,filter .55s ease}
.overlay--works .photo-art--poster-series{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:8px;background:#f4f0e4}
.overlay--works .photo-art--poster-series img{height:100%;min-width:0;object-fit:cover;filter:saturate(.9)}
.overlay--works .photo-art--poster-series img:nth-child(2){transform:translateY(9px)}
.overlay--works .photo-art--poster-series img:nth-child(3){transform:translateY(-7px)}
.overlay--works .photo-art--poster-series b,.overlay--works .photo-art--poster-series em{z-index:4}
.overlay--works .project-photo:hover .photo-art img{transform:scale(1.035)}
.overlay--works .photo-art:before,.overlay--works .photo-art:after{display:none}
.overlay--works .photo-art b,.overlay--works .photo-art em{z-index:2;padding:4px 6px;background:rgba(36,31,32,.72);color:#fff;letter-spacing:0}
.overlay--works .project-caption h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.overlay--project{
  --case-accent:#8b2837;
  --case-soft:#c6b690;
  --case-highlight:#f1d989;
  background:#f8f3ed;
  color:#302a2c;
}
.overlay--project .case-nav{position:sticky;z-index:50;top:0;display:flex;justify-content:space-between;align-items:center;padding:17px 3vw;border-bottom:1px solid rgba(201,163,91,.28);background:rgba(12,16,22,.92);backdrop-filter:blur(12px);color:#c9a35b;font:700 10px/1.2 monospace;letter-spacing:0}
.overlay--project .case-nav .back-button{color:#302a2c}
.case-hero--portfolio{display:grid;grid-template-columns:minmax(330px,.78fr) minmax(0,1.22fr);min-height:auto;background:#f8f3ed}
.case-hero--portfolio .case-copy{display:flex;flex-direction:column;justify-content:center;padding:8vh 5vw 8vh 6vw}
.case-hero--portfolio .case-copy .eyebrow{color:var(--case-accent);letter-spacing:0}
.case-hero--portfolio .case-copy h2{max-width:720px;margin:12px 0 22px;color:#302a2c;font-size:clamp(52px,6.3vw,104px);line-height:.92;letter-spacing:0}
.case-hero--portfolio .case-lead{max-width:620px;margin:0;color:#655b5e;font-size:clamp(16px,1.35vw,22px);line-height:1.8}
.case-hero--portfolio .case-meta{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:6vh;border-top:1px solid rgba(63,48,53,.16)}
.case-hero--portfolio .case-meta div{padding:17px 14px 17px 0;border-bottom:1px solid rgba(63,48,53,.16)}
.case-hero--portfolio .case-meta dt{margin-bottom:5px;color:#918387;font-size:10px;letter-spacing:0}
.case-hero--portfolio .case-meta dd{margin:0;color:#3f3639;font-size:13px;line-height:1.5}
.case-cover{position:relative;align-self:stretch;min-height:0;margin:0;display:grid;place-items:center;overflow:hidden;background:var(--case-soft)}
.case-cover img{display:block;width:100%;height:auto;object-fit:contain}
.case-cover figcaption{position:absolute;right:18px;bottom:16px;padding:6px 8px;background:rgba(25,22,23,.74);color:#fff;font:700 9px/1 monospace;letter-spacing:0}
.overlay--project .case-section{grid-template-columns:55px minmax(220px,.72fr) minmax(320px,1.28fr);gap:5vw;padding:12vh 7vw}
.overlay--project .case-section h3,.case-gallery-heading h3{font-size:clamp(34px,4.2vw,62px);line-height:1.05;letter-spacing:0}
.overlay--project .case-section>p{max-width:760px;margin:26px 0 0;color:#655b5e;font-size:16px;line-height:2}
.overlay--project .section-no{font:700 10px/1 monospace;letter-spacing:0}
.overlay--project .eyebrow{letter-spacing:0}
.overlay--project .case-section--dark{background:#292728;color:#f8f3ed}
.overlay--project .case-section--dark .eyebrow{color:var(--case-highlight)}
.case-concept-grid{grid-column:2/4;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:3vh;background:rgba(255,255,255,.14)}
.case-concept-grid article{min-height:250px;padding:35px 30px;background:#353233}
.case-concept-grid b{color:var(--case-highlight);font:700 11px/1 monospace}
.case-concept-grid h4{margin:54px 0 14px;color:#fff;font-size:24px;letter-spacing:0}
.case-concept-grid p{margin:0;color:#cec6c8;font-size:14px;line-height:1.85}
.case-gallery-section{padding:12vh 6vw 14vh;background:#eee7df}
.case-gallery-heading{display:grid;grid-template-columns:55px minmax(260px,.9fr) minmax(320px,1.1fr);gap:5vw;align-items:start;margin-bottom:7vh}
.case-gallery-heading h3{margin:0}
.case-gallery-heading>p{max-width:600px;margin:28px 0 0;color:#6a6063;font-size:14px;line-height:1.9}
.case-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.case-gallery-item{position:relative;margin:0;overflow:hidden;background:#ded6ce}
.case-gallery-item--wide{grid-column:1/-1}
.case-gallery-item img{display:block;width:100%;height:auto;min-height:0;object-fit:contain}
.case-gallery-item figcaption{position:absolute;right:10px;bottom:10px;padding:5px 7px;background:rgba(29,26,27,.7);color:#fff;font:700 9px/1 monospace;letter-spacing:0}
.case-gallery-group{margin-bottom:9vh}.case-gallery-group:last-child{margin-bottom:0}.case-gallery-group-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin:0 0 22px;padding-bottom:12px;border-bottom:1px solid color-mix(in srgb,var(--case-accent) 28%,transparent)}.case-gallery-group-heading b{color:var(--case-text);font:400 clamp(24px,3vw,42px)/1 var(--display)}.case-gallery-group-heading span{color:var(--case-accent);font:700 9px/1 monospace;letter-spacing:1px}.case-gallery--group{margin:0}
.case-project-nav{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(63,48,53,.18);background:#f8f3ed}
.case-project-nav button{min-height:170px;padding:32px 6vw;border:0;background:none;color:#302a2c;text-align:left;cursor:pointer;transition:background .25s}
.case-project-nav button+button{border-left:1px solid rgba(63,48,53,.18);text-align:right}
.case-project-nav button:hover{background:color-mix(in srgb,var(--case-soft) 25%,#f8f3ed)}
.case-project-nav span{display:block;margin-bottom:12px;color:#8c7d81;font-size:11px}
.case-project-nav b{display:block;font:400 clamp(23px,3vw,42px)/1.1 var(--display);letter-spacing:0}
.overlay--project .case-footer{background:#292728}

@media(max-width:900px){
  .case-hero--portfolio{grid-template-columns:1fr}
  .case-hero--portfolio .case-copy{padding:10vh 7vw 7vh}
  .case-cover{min-height:0;aspect-ratio:16/9}
  .overlay--project .case-section{grid-template-columns:40px 1fr;gap:4vw;padding:10vh 6vw}
  .overlay--project .case-section>p{grid-column:2}
  .case-concept-grid{grid-column:2;grid-template-columns:1fr}
  .case-concept-grid article{min-height:0}
  .case-concept-grid h4{margin-top:30px}
  .case-gallery-heading{grid-template-columns:40px 1fr;gap:4vw}
  .case-gallery-heading>p{grid-column:2}
}

@media(max-width:600px){
  .overlay--project .case-nav{padding:14px 13px}
  .case-hero--portfolio .case-copy{padding:10vh 6vw 6vh}
  .case-hero--portfolio .case-copy h2{font-size:clamp(44px,15vw,66px)}
  .case-hero--portfolio .case-lead{font-size:15px;line-height:1.75}
  .case-hero--portfolio .case-meta{grid-template-columns:1fr;margin-top:5vh}
  .case-cover{aspect-ratio:16/9}
  .overlay--project .case-section{grid-template-columns:28px 1fr;padding:9vh 5vw}
  .overlay--project .case-section h3,.case-gallery-heading h3{font-size:34px}
  .overlay--project .case-section>p{font-size:14px;line-height:1.9}
  .case-concept-grid article{padding:28px 24px}
  .case-concept-grid h4{font-size:22px}
  .case-gallery-section{padding:9vh 4vw 10vh}
  .case-gallery-heading{grid-template-columns:28px 1fr;margin-bottom:5vh}
  .case-gallery{grid-template-columns:1fr;gap:10px}
  .case-gallery-item--wide{grid-column:auto}
  .case-gallery-item img{min-height:0}
  .case-project-nav{grid-template-columns:1fr}
  .case-project-nav button{min-height:124px;padding:25px 7vw}
  .case-project-nav button+button{border-top:1px solid rgba(63,48,53,.18);border-left:0}
  .case-project-nav b{font-size:26px}
}

/* Fusheng Yaoshi concept art book */
.project-photo--fusheng .photo-art img{object-position:center 46%}
.project-photo--fusheng .project-caption h3{color:#7e201c}
.fusheng-lift{animation:fushengCardLift .65s cubic-bezier(.22,.8,.28,1) both!important;z-index:40!important}
@keyframes fushengCardLift{0%{transform:translate(-50%,-50%) rotate(-1deg) scale(1)}45%{transform:translate(-50%,-52%) rotate(0) scale(1.12);box-shadow:0 28px 60px rgba(20,10,15,.38)}100%{transform:translate(-50%,-52%) rotate(0) scale(1.5);opacity:0}}
.overlay--fusheng{background:#11151b;color:#e9dfd0;overflow-x:hidden;scroll-behavior:smooth}
.fusheng-nav{position:sticky;z-index:40;top:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 3vw;border-bottom:1px solid rgba(201,163,91,.28);background:rgba(10,14,20,.9);backdrop-filter:blur(12px);color:#c9a35b;font:700 10px/1.2 monospace;letter-spacing:0}
.fusheng-nav .back-button,.fusheng-index-link{border:0;background:none;color:#e9dfd0;cursor:pointer;font:inherit;letter-spacing:0}
.fusheng-index-link{color:#c9a35b}
.fusheng-hero{position:relative;height:max(640px,100vh);min-height:640px;display:grid;place-items:center;overflow:hidden;background:#0d1118}
.fusheng-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:fushengSlowZoom 18s ease-out both}
@keyframes fushengSlowZoom{from{transform:scale(1.04)}to{transform:scale(1)}}
.fusheng-hero-vignette{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,14,.54),transparent 32%,rgba(5,8,14,.2) 55%,rgba(5,8,14,.86))}
.fusheng-fog{position:absolute;z-index:2;left:0;width:100%;height:28%;border-radius:50%;background:rgba(180,198,204,.12);filter:blur(35px);mix-blend-mode:screen;pointer-events:none}
.fusheng-fog--one{bottom:20%;animation:fushengFog 14s ease-in-out infinite alternate}.fusheng-fog--two{bottom:38%;opacity:.5;animation:fushengFog 19s 1s ease-in-out infinite alternate-reverse}
@keyframes fushengFog{from{transform:translateX(-5%) scaleX(.9)}to{transform:translateX(7%) scaleX(1.08)}}
.fusheng-hero-copy{position:relative;z-index:3;margin-top:5vh;text-align:center;text-shadow:0 5px 28px rgba(0,0,0,.65)}
.fusheng-kicker{margin:0 0 24px;color:#d0ae6d;font:700 11px monospace;letter-spacing:2px}
.fusheng-hero-copy h2{margin:0;color:#f4e8d5;font:400 clamp(66px,12vw,180px)/.95 var(--display);letter-spacing:.04em}
.fusheng-hero-copy>p:not(.fusheng-kicker){margin:20px 0 0;color:#e4c88c;font:700 clamp(13px,1.5vw,21px) monospace;letter-spacing:5px}
.fusheng-hero-copy span{display:block;margin-top:25px;color:#e5d7c2;font:700 12px monospace;letter-spacing:3px}
.fusheng-scroll-cue{position:absolute;z-index:3;bottom:30px;left:50%;transform:translateX(-50%);color:#e5d7c2;font:700 9px monospace;letter-spacing:2px;white-space:nowrap}.fusheng-scroll-cue b{display:block;margin-top:10px;text-align:center;color:#c9a35b;font-size:18px;animation:fushengCue 1.5s ease-in-out infinite}
@keyframes fushengCue{50%{transform:translateY(6px);opacity:.45}}
.fusheng-section-shell{width:min(1260px,88vw);margin:0 auto;padding:13vh 0}
.fusheng-overview{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr);gap:8vw;align-items:center;background:#11151b}
.fusheng-overview-copy .fusheng-label,.fusheng-label{margin:0 0 16px;color:#c9a35b;font:700 10px monospace;letter-spacing:2px}
.fusheng-overview-copy h3{margin:0 0 24px;color:#f3eadc;font:400 clamp(45px,5vw,78px) var(--display)}
.fusheng-lead{margin:0 0 20px;color:#d9b66d;font-size:18px;line-height:1.6}
.fusheng-overview-copy>p:not(.fusheng-label):not(.fusheng-lead){max-width:440px;color:#bcb3a8;line-height:1.9}
.fusheng-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:35px}.fusheng-tags span{padding:8px 11px;border:1px solid rgba(201,163,91,.42);color:#cdbb9c;font:10px monospace}
.fusheng-overview figure{margin:0;position:relative}.fusheng-overview figure img{display:block;width:100%;max-height:530px;object-fit:cover;filter:saturate(.86)}.fusheng-overview figcaption,.fusheng-wide-figure figcaption,.fusheng-full-bleed figcaption{margin-top:11px;color:#927f65;font:700 9px monospace;letter-spacing:1px}
.fusheng-chapter{border-top:1px solid rgba(201,163,91,.22)}
.fusheng-chapter-heading{display:grid;grid-template-columns:90px 1fr;gap:3vw;align-items:start;margin-bottom:8vh}.fusheng-chapter-heading>span{color:#b83c32;font:400 42px var(--display)}.fusheng-chapter-heading h3{margin:0;color:#f1e7d7;font:400 clamp(42px,5vw,74px)/1.05 var(--display)}.fusheng-chapter-heading p:not(.fusheng-label){margin:15px 0 0;color:#9f9485;font:13px/1.7 monospace}
.fusheng-wide-figure{margin:0 0 9vh}.fusheng-wide-figure img{display:block;width:100%;height:auto;background:#e9e2d6}.fusheng-figure--medium{width:88%;margin-left:auto;margin-right:auto}.fusheng-full-bleed{position:relative;width:100vw;max-width:100%;margin:9vh auto 12vh}.fusheng-full-bleed img{display:block;width:100%;max-height:93vh;object-fit:cover}.fusheng-full-bleed figcaption{position:absolute;right:25px;bottom:18px;padding:7px 9px;background:rgba(8,11,15,.73);color:#e3c88e}
.fusheng-palette{display:grid;grid-template-columns:1fr 1fr;gap:6vw;padding:20px 0 10vh;color:#9d9281;font:10px monospace}.fusheng-palette p{margin:0 0 14px;color:#c9a35b;letter-spacing:1.5px}.fusheng-palette span{display:inline-block;width:45px;height:22px;margin-right:5px;background:var(--swatch);border:1px solid rgba(255,255,255,.25)}.fusheng-palette b{font-weight:400;color:#d1c7b8;font-size:13px;line-height:1.8}
.fusheng-map img{filter:saturate(.9)}
.fusheng-process-block{display:grid;grid-template-columns:.7fr 1.3fr;gap:5vw;align-items:start;margin-bottom:9vh}.fusheng-process-copy p{margin:0;color:#c9a35b;font:700 11px monospace;letter-spacing:1.5px}.fusheng-process-copy span{display:block;margin-top:15px;color:#9f9485;font-size:13px;line-height:1.7}.fusheng-dual-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.fusheng-dual-grid img{display:block;width:100%;height:auto;background:#e9e2d6}
.fusheng-environment,.fusheng-character{background:#15181e}.fusheng-lighting{padding-top:2vh}.lighting-tabs{display:flex;gap:8px;margin:26px 0 15px}.lighting-tabs button{padding:9px 13px;border:1px solid rgba(201,163,91,.35);background:none;color:#9f9485;font:700 10px monospace;cursor:pointer}.lighting-tabs button.is-active{background:#c9a35b;color:#12151a}.lighting-scene{height:min(54vw,620px);min-height:300px;background-image:url('assets/portfolio/fusheng/08-lighting.png');background-size:400% 100%;background-position:0 0;transition:background-position .6s ease,filter .6s ease}.lighting-scene[data-lighting="sunset"]{background-position:33.333% 0}.lighting-scene[data-lighting="night"]{background-position:66.666% 0}.lighting-scene[data-lighting="ghost"]{background-position:100% 0;filter:saturate(.85)}
.fusheng-figure--light{margin-top:8vh}.fusheng-figure--lineup img{background:#e9e2d6}.fusheng-monsters{background:#eee8df;color:#2b2523}.fusheng-monsters .fusheng-chapter-heading h3{color:#332b28}.fusheng-monsters .fusheng-chapter-heading>span{color:#8e5b36}.fusheng-monsters .fusheng-label{color:#8e5b36}.fusheng-monsters .fusheng-chapter-heading p:not(.fusheng-label){color:#75665a}.fusheng-combat{background:#101319}.fusheng-vfx{margin-top:10vh}.vfx-stage{position:relative;margin-top:30px;overflow:hidden;background:#111}.vfx-stage>img{display:block;width:100%;height:auto;transition:filter .35s}.vfx-hotspots button{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 10px;border:1px solid rgba(216,181,103,.5);background:rgba(12,13,16,.66);color:#e6cb91;font:700 9px monospace;letter-spacing:1px;cursor:pointer;transition:transform .25s,background .25s,box-shadow .25s}.vfx-hotspots button small{color:#b3a18d;font-size:7px;letter-spacing:.5px}.vfx-hotspots button:hover,.vfx-hotspots button.is-focused{transform:translate(-50%,-50%) scale(1.14);background:#7d2c2b;box-shadow:0 0 0 5px rgba(201,163,91,.16)}
.fusheng-ui{background:#11151b}.fusheng-final-art{position:relative;min-height:100vh;display:grid;place-items:center;overflow:hidden}.fusheng-final-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.62)}.fusheng-final-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,14,.25),rgba(8,10,14,.8))}.fusheng-final-art div{position:relative;z-index:2;text-align:center}.fusheng-final-art h3{margin:0;color:#f1dfbe;font:400 clamp(40px,6vw,86px) var(--display)}.fusheng-final-art p{margin-top:22px;color:#d4b77a;font:11px/1.8 monospace;letter-spacing:1.5px}
.fusheng-workflow{background:#13171d}.workflow-rail{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:8vh 0;color:#d0b16f;font:700 10px monospace;letter-spacing:1px}.workflow-rail i{color:#8c6d42;font-style:normal}.workflow-columns{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(201,163,91,.25)}.workflow-columns>div{padding:32px;background:#1a1e24}.workflow-columns p{margin:0 0 18px;color:#b83c32;font:700 11px monospace}.workflow-columns b{color:#d8cdbd;font:400 15px/2 monospace}
.fusheng-end{padding:16vh 7vw;text-align:center;background:#080a0f}.fusheng-end>p{margin:0;color:#f0dfbf;font:400 clamp(48px,8vw,110px) var(--display)}.fusheng-end>span{display:block;margin-top:20px;color:#b4965e;font:10px monospace;letter-spacing:2px}.fusheng-end>div{display:flex;justify-content:center;gap:30px;margin-top:7vh}.fusheng-end button{padding:13px 0;border:0;border-bottom:1px solid #b4965e;background:none;color:#ead9ba;font:11px monospace;cursor:pointer}
.overlay--project .case-nav .back-button{color:#e9dfd0}.overlay--project .case-cover img,.overlay--project .case-gallery-item img{height:auto;min-height:0;object-fit:contain}.lighting-scene{height:auto;aspect-ratio:1717 / 916;min-height:0;background-size:100% 100%;background-position:center;background-repeat:no-repeat;transition:filter .6s ease,opacity .35s}.lighting-scene[data-lighting="day"]{filter:saturate(.95)}.lighting-scene[data-lighting="sunset"]{filter:saturate(1.08) sepia(.08)}.lighting-scene[data-lighting="night"]{filter:saturate(1.12) brightness(.9)}.lighting-scene[data-lighting="ghost"]{filter:saturate(.9) brightness(.82) hue-rotate(4deg)}
.overlay--project{background:#11151b;color:#e9dfd0}.overlay--project .case-hero--portfolio,.overlay--project .case-copy,.overlay--project .case-gallery-section{background:#11151b}.overlay--project .case-hero--portfolio .case-copy h2,.overlay--project .case-section h3,.overlay--project .case-gallery-heading h3{color:#f3eadc}.overlay--project .case-hero--portfolio .case-lead,.overlay--project .case-section>p,.overlay--project .case-gallery-heading>p{color:#bcb3a8}.overlay--project .case-hero--portfolio .case-meta{border-color:rgba(201,163,91,.25)}.overlay--project .case-hero--portfolio .case-meta div{border-color:rgba(201,163,91,.25)}.overlay--project .case-hero--portfolio .case-meta dt{color:#9d9281}.overlay--project .case-hero--portfolio .case-meta dd{color:#d1c7b8}.overlay--project .case-cover{background:#e9e2d6}.overlay--project .case-section.case-overview{background:#151a21}.overlay--project .case-gallery-section{border-top:1px solid rgba(201,163,91,.22)}.overlay--project .case-gallery-item{background:#e9e2d6}.overlay--project .case-gallery-heading .eyebrow{color:#c9a35b}.overlay--project .case-project-nav{background:#11151b;border-color:rgba(201,163,91,.22)}.overlay--project .case-project-nav button{color:#e9dfd0}.overlay--project .case-project-nav button+button{border-color:rgba(201,163,91,.22)}
@media(max-width:700px){.lighting-scene{height:auto;min-height:0;aspect-ratio:1717 / 916}.overlay--project .case-cover img,.overlay--project .case-gallery-item img{height:auto;object-fit:contain}}
@media(max-width:700px){
  .fusheng-nav{padding:14px 13px;font-size:8px}.fusheng-nav>span{display:none}.fusheng-hero{height:88vh;min-height:600px}.fusheng-hero-copy h2{font-size:64px}.fusheng-hero-copy>p:not(.fusheng-kicker){font-size:11px;letter-spacing:3px}.fusheng-kicker{font-size:9px}.fusheng-section-shell{width:88vw;padding:10vh 0}.fusheng-overview{display:block}.fusheng-overview-copy h3{font-size:45px}.fusheng-overview figure{margin-top:7vh}.fusheng-chapter-heading{grid-template-columns:35px 1fr;gap:4vw;margin-bottom:6vh}.fusheng-chapter-heading>span{font-size:30px}.fusheng-chapter-heading h3{font-size:40px}.fusheng-palette{grid-template-columns:1fr;gap:30px}.fusheng-process-block{grid-template-columns:1fr;gap:4vh}.fusheng-dual-grid{grid-template-columns:1fr;gap:10px}.fusheng-figure--medium{width:100%}.fusheng-full-bleed{width:100vw;margin-left:-6vw;margin-right:0}.fusheng-full-bleed img{min-height:320px;object-fit:cover}.lighting-tabs{overflow-x:auto;padding-bottom:4px}.lighting-tabs button{flex:0 0 auto;font-size:9px}.lighting-scene{height:72vw;min-height:230px}.vfx-hotspots button{font-size:7px;padding:5px}.vfx-hotspots button small{font-size:6px}.workflow-rail{gap:8px;line-height:1.5}.workflow-columns{grid-template-columns:1fr}.fusheng-end{padding:12vh 7vw}.fusheng-end>div{flex-direction:column;gap:20px}.fusheng-end button{font-size:10px}
}

/* Shared case-study skin: each project supplies its own theme tokens. */
#project.overlay--project{background:var(--case-bg);color:var(--case-text)}
#project.overlay--project .case-nav{background:color-mix(in srgb,var(--case-bg) 92%,#000);color:var(--case-accent);border-color:color-mix(in srgb,var(--case-accent) 28%,transparent)}
#project.overlay--project .case-nav .back-button{color:var(--case-text)}
#project.overlay--project .case-hero--portfolio,#project.overlay--project .case-copy{background:var(--case-bg)}
#project.overlay--project .case-hero--portfolio .case-copy h2{color:var(--case-text)}
#project.overlay--project .case-hero--portfolio .case-lead{color:var(--case-muted)}
#project.overlay--project .case-hero--portfolio .case-meta{border-color:color-mix(in srgb,var(--case-text) 18%,transparent)}
#project.overlay--project .case-hero--portfolio .case-meta div{border-color:color-mix(in srgb,var(--case-text) 18%,transparent)}
#project.overlay--project .case-hero--portfolio .case-meta dt{color:var(--case-muted)}
#project.overlay--project .case-hero--portfolio .case-meta dd{color:var(--case-text)}
#project.overlay--project .case-cover{background:var(--case-panel)}
#project.overlay--project .case-section{background:var(--case-bg);color:var(--case-text)}
#project.overlay--project .case-section>p{color:var(--case-muted)}
#project.overlay--project .case-section--dark{background:var(--case-panel);color:var(--case-text)}
#project.overlay--project .case-section--dark .eyebrow,#project.overlay--project .case-gallery-heading .eyebrow{color:var(--case-accent)}
#project.overlay--project .case-concept-grid{background:color-mix(in srgb,var(--case-accent) 24%,transparent)}
#project.overlay--project .case-concept-grid article{background:color-mix(in srgb,var(--case-panel) 88%,var(--case-accent));}
#project.overlay--project .case-concept-grid h4{color:var(--case-text)}
#project.overlay--project .case-concept-grid p{color:var(--case-muted)}
#project.overlay--project .case-process-section,#project.overlay--project .case-gallery-section{background:var(--case-panel);color:var(--case-text)}
#project.overlay--project .case-gallery-heading>p{color:var(--case-muted)}
#project.overlay--project .case-gallery-item{background:var(--case-bg)}
#project.overlay--project .case-project-nav{background:var(--case-bg);border-color:color-mix(in srgb,var(--case-text) 18%,transparent)}
#project.overlay--project .case-project-nav button{color:var(--case-text)}
#project.overlay--project .case-project-nav button+button{border-color:color-mix(in srgb,var(--case-text) 18%,transparent)}
#project.overlay--project .case-project-nav button:hover{background:color-mix(in srgb,var(--case-soft) 30%,var(--case-bg))}
#project.overlay--project .case-footer{background:color-mix(in srgb,var(--case-panel) 82%,#000);color:var(--case-text)}

.case-process-section{padding:12vh 6vw 13vh;border-top:1px solid color-mix(in srgb,var(--case-text) 15%,transparent)}
.case-process-rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:color-mix(in srgb,var(--case-accent) 25%,transparent)}
.case-process-rail article{min-height:190px;padding:25px 22px;background:var(--case-bg)}
.case-process-rail span{display:block;color:var(--case-accent);font:700 11px/1 monospace}
.case-process-rail b{display:block;margin:34px 0 12px;color:var(--case-text);font:700 11px/1 monospace;letter-spacing:.08em}
.case-process-rail p{margin:0;color:var(--case-muted);font-size:13px;line-height:1.75}
@media(max-width:900px){.case-process-rail{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.case-process-section{padding:9vh 4vw 10vh}.case-process-rail{grid-template-columns:1fr}.case-process-rail article{min-height:0;padding:24px 20px}.case-process-rail b{margin-top:25px}}

.image-viewer{position:fixed;z-index:120;inset:0;display:grid;place-items:center;padding:6vh 7vw;background:rgba(8,9,12,.94);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility .25s ease}
.image-viewer.is-open{opacity:1;visibility:visible;pointer-events:auto}
.image-viewer figure{max-width:min(1200px,90vw);max-height:88vh;margin:0;text-align:center}
.image-viewer img{display:block;max-width:90vw;max-height:82vh;width:auto;height:auto;cursor:grab;transform-origin:center;transition:transform .16s ease}
.image-viewer img.is-dragging{cursor:grabbing;transition:none}
.image-viewer figcaption{margin-top:14px;color:#e8dfd3;font:10px/1.5 monospace}
.image-viewer-close,.image-viewer-control{position:absolute;border:1px solid rgba(255,255,255,.45);background:rgba(20,21,26,.75);color:#fff;cursor:pointer}
.image-viewer-close{top:22px;right:26px;width:38px;height:38px;border-radius:50%;font-size:24px;line-height:1}
.image-viewer-control{right:26px;width:38px;height:38px;font:18px/1 monospace}
.image-viewer-zoom-in{bottom:78px}.image-viewer-zoom-out{bottom:32px}
.case-gallery-item img{cursor:zoom-in}
@media(max-width:600px){.image-viewer{padding:4vh 4vw}.image-viewer img{max-width:92vw;max-height:78vh}.image-viewer-close{top:14px;right:14px}.image-viewer-control{right:14px}}

/* Editorial portfolio rhythm inspired by the supplied long-form reference boards. */
#project.overlay--project .case-hero--portfolio{display:block;min-height:0;background:var(--case-bg)}
#project.overlay--project .case-hero--portfolio .case-copy{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr);column-gap:7vw;align-items:end;padding:clamp(42px,7vw,108px) clamp(22px,7vw,110px) clamp(34px,5vw,72px);border-bottom:1px solid color-mix(in srgb,var(--case-text) 18%,transparent)}
#project.overlay--project .case-editorial-bar{grid-column:1/-1;display:flex;align-items:baseline;gap:17px;margin-bottom:clamp(30px,5vw,70px);padding-bottom:12px;border-bottom:1px solid color-mix(in srgb,var(--case-text) 16%,transparent);color:var(--case-accent);font:700 11px/1 monospace;letter-spacing:1px}
#project.overlay--project .case-editorial-bar b{font-size:12px;color:var(--case-text)}
#project.overlay--project .case-editorial-bar small{margin-left:auto;color:var(--case-muted);font-size:8px;letter-spacing:.8px}
#project.overlay--project .case-hero--portfolio .case-copy .eyebrow{grid-column:1/-1;margin:0 0 16px}
#project.overlay--project .case-hero--portfolio .case-copy h2{grid-column:1/-1;margin:0 0 22px;font-size:clamp(54px,9vw,142px);line-height:.88;letter-spacing:0}
#project.overlay--project .case-hero--portfolio .case-lead{grid-column:1;max-width:680px;margin:0;font-size:clamp(16px,1.45vw,22px);line-height:1.8}
#project.overlay--project .case-hero--portfolio .case-meta{grid-column:2;align-self:end;margin:0}
#project.overlay--project .case-cover{width:100%;padding:clamp(15px,3vw,44px) clamp(22px,7vw,110px);background:var(--case-panel)}
#project.overlay--project .case-cover img{max-height:none;background:var(--case-panel)}
#project.overlay--project .case-cover figcaption{right:clamp(30px,8vw,120px);bottom:clamp(25px,4vw,58px)}
#project.overlay--project .case-section{padding:clamp(80px,12vw,180px) clamp(22px,7vw,110px)}
#project.overlay--project .case-process-section,#project.overlay--project .case-gallery-section{padding-left:clamp(22px,7vw,110px);padding-right:clamp(22px,7vw,110px)}
#project.overlay--project .case-gallery{grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(18px,2.4vw,38px);align-items:start}
#project.overlay--project .case-gallery-item{grid-column:span 6}
#project.overlay--project .case-gallery-item--wide{grid-column:1/-1}
#project.overlay--project .case-gallery-item:nth-child(3n+2):not(.case-gallery-item--wide){grid-column:2/span 10}
#project.overlay--project .case-gallery-item img{background:var(--case-bg)}
#project.overlay--project .case-gallery-group{padding-top:clamp(16px,3vw,40px)}
#project.overlay--project .case-gallery-group-heading{margin-bottom:clamp(18px,2.5vw,34px)}
@media(max-width:700px){
  #project.overlay--project .case-hero--portfolio .case-copy{display:block;padding:52px 6vw 42px}
  #project.overlay--project .case-editorial-bar{gap:10px;margin-bottom:34px;font-size:9px}
  #project.overlay--project .case-editorial-bar small{display:none}
  #project.overlay--project .case-hero--portfolio .case-copy h2{font-size:clamp(48px,16vw,76px)}
  #project.overlay--project .case-hero--portfolio .case-meta{margin-top:34px}
  #project.overlay--project .case-cover{padding:15px 4vw 24px}
  #project.overlay--project .case-cover figcaption{right:6vw;bottom:34px}
  #project.overlay--project .case-gallery{grid-template-columns:1fr;gap:12px}
  #project.overlay--project .case-gallery-item,#project.overlay--project .case-gallery-item:nth-child(3n+2):not(.case-gallery-item--wide){grid-column:1}
}

/* Keep the original page-image mode last so shared case-study rules cannot override it. */
#project[data-display-mode="portfolio-pages"] .case-hero,
#project[data-display-mode="portfolio-pages"] .case-gallery-heading,
#project[data-display-mode="portfolio-pages"] .case-award-section,
#project[data-display-mode="portfolio-pages"] .case-project-nav,
#project[data-display-mode="portfolio-pages"] .case-footer{display:none!important}
#project[data-display-mode="portfolio-pages"] .case-nav{background:rgba(255,255,255,.9);color:#3f3436}
#project[data-display-mode="portfolio-pages"] .case-nav span{display:none}
#project[data-display-mode="portfolio-pages"] .case-gallery-section{padding:0!important;background:#fff}
#project[data-display-mode="portfolio-pages"] .case-gallery{display:block!important;margin:0!important}
#project[data-display-mode="portfolio-pages"] .case-gallery-item,
#project[data-display-mode="portfolio-pages"] .case-gallery-item--wide{display:block!important;width:100%!important;grid-column:auto!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;overflow:visible!important}
#project[data-display-mode="portfolio-pages"] .case-gallery-item img{display:block;width:100%;height:auto;min-height:0;object-fit:contain;border:0;border-radius:0;background:transparent;cursor:zoom-in}
#project[data-display-mode="portfolio-pages"] .case-gallery-item figcaption{display:none}