/* The entrance and corridor are full-viewport spaces, before the portfolio pages. */
/* Independent translate composes with the existing scroll zoom and hand animation. */
.hall-stage{--look-x:0;--look-y:0}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  body:not(.reduce-motion) .hall-background{inset:-30px;width:calc(100% + 60px);height:calc(100% + 60px);translate:calc(var(--look-x) * 14px) calc(var(--look-y) * 10px)}
  body:not(.reduce-motion) .hall-intro h1{translate:calc(var(--look-x) * 22px) calc(var(--look-y) * 14px)}
  body:not(.reduce-motion) .designer-character{translate:calc(var(--look-x) * 32px) calc(var(--look-y) * 20px)}
  body:not(.reduce-motion) .designer-subtitle{translate:calc(var(--look-x) * 26px) calc(var(--look-y) * 17px)}
  body:not(.reduce-motion) .designer-greeting{translate:calc(var(--look-x) * 20px) calc(var(--look-y) * 13px)}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
body.scene-mode>header,body.scene-mode>footer{display:none}
body.entrance-mode{overflow:hidden}
.entrance{height:100svh;position:relative;isolation:isolate;overflow:hidden;background:#dddcd7}
.entrance-world{position:absolute;left:50%;top:50%;width:max(100vw,187.72svh);height:max(100svh,53.27vw);transform:translate(-50%,-50%);transition:transform 550ms var(--ease-out),opacity 450ms var(--ease-out)}
.entrance-art{display:block;width:100%;height:100%;object-fit:fill}
.entrance-door{position:absolute;left:39.5%;top:39%;width:17%;height:40%;display:flex;align-items:center;justify-content:center;border-radius:2px;cursor:pointer}
.entrance-door:focus-visible{outline:3px dashed var(--blue);outline-offset:5px}
.door-prompt{display:flex;align-items:center;gap:12px;background:var(--paper);color:var(--blue);padding:10px 16px;font-size:14px;box-shadow:0 4px 14px #2222;opacity:0;transform:translateY(6px);transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out)}
.entrance-door:focus-visible .door-prompt{opacity:1;transform:none}
.entrance-brand{position:absolute;top:25px;left:30px;font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:.05em;line-height:1.5;color:#424440}
.paper-instruction{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);padding:15px 25px;background:#f8f7f2;box-shadow:0 4px 20px #2628201c;border-radius:2px;display:flex;align-items:center;gap:16px;text-align:left;max-width:calc(100vw - 32px);width:max-content;color:var(--ink)}
.paper-instruction>svg{height:32px;width:24px;flex-shrink:0}
.paper-instruction strong{font-family:Georgia,serif;font-size:14px;letter-spacing:.04em;display:block;margin-bottom:4px}
.paper-instruction span>span{font-size:13px;display:block;line-height:1.5}
.entrance.is-opening .entrance-world{transform:translate(-50%,-50%) scale(1.6);opacity:0}
.entrance.is-opening .paper-instruction,.entrance.is-opening .entrance-brand{opacity:0;transition:opacity 160ms ease}
.hallway{height:420svh;background:#e9e8e3;position:relative}
.hall-stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
.hall-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform-origin:50% 43%;will-change:transform}
.hall-topbar{position:absolute;z-index:5;top:24px;left:32px;right:32px;display:flex;justify-content:space-between;align-items:center}
.scene-back,.scene-skip{display:flex;align-items:center;gap:10px;background:#f6f5f1e8;padding:10px 14px;font-size:13px;border-radius:2px}
.scene-back svg,.scene-skip svg{width:17px;height:17px}
.hall-chapter{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;will-change:transform,opacity}
.hall-intro h1{position:absolute;top:21%;left:50%;transform:translateX(-50%);font-family:'Space Grotesk',sans-serif;font-size:clamp(120px,25vw,330px);line-height:1;letter-spacing:-.04em;font-weight:700;color:#eeeae1; -webkit-text-stroke:3px #323330;margin:0;white-space:nowrap;text-shadow:4px 4px 0 #eeeae1,5px 5px 0 #323330}
.designer-character{position:absolute;height:72%;width:auto;max-width:75%;object-fit:contain;bottom:7%;z-index:1;filter:drop-shadow(0 10px 12px #5551)}
.designer-subtitle{position:absolute;top:61%;left:50%;transform:translateX(-50%);z-index:2;width:max-content;max-width:94%;text-align:center;font-family:Georgia,serif;font-size:clamp(24px,3.8vw,55px);font-weight:400;letter-spacing:.07em;margin:0;color:#343530;text-shadow:0 1px 3px #f6f5f1}
.designer-greeting{position:absolute;top:73%;z-index:2;font-size:14px;line-height:1.7;background:#f6f5f1ed;padding:8px 14px;max-width:90%;text-align:center}
.hall-bottom{position:absolute;left:0;right:0;bottom:22px;z-index:5;display:flex;align-items:center;flex-direction:column;gap:14px}
.hall-bottom .paper-instruction{position:static;transform:none;max-width:calc(100vw - 32px)}
.chapter-nav{display:flex;gap:3px;background:#f6f5f1e8;padding:4px;border-radius:3px}
.chapter-nav button{font-size:12px;min-height:32px;min-width:64px;padding:5px 12px}
.chapter-nav button[aria-current]{background:var(--ink);color:var(--paper)}
.hall-work{padding:90px 6% 145px;justify-content:center}
.hall-work h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(34px,4.5vw,64px);letter-spacing:-.04em;font-weight:500;margin:0 0 6px;text-align:center}
.hall-work>p{font-size:14px;line-height:1.7;margin:0 0 24px;background:#f6f5f1d9;padding:4px 10px;text-align:center}
.hall-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:1040px;width:100%;perspective:1000px}
.hall-frame{background:var(--paper);padding:12px;text-align:left;box-shadow:0 10px 35px #28292426;transition:transform 180ms var(--ease-out)}
.hall-frame:first-child{transform:rotateY(10deg) rotate(-3deg)}
.hall-frame:last-child{transform:rotateY(-10deg) rotate(3deg)}
.hall-frame img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;height:auto}
.hall-frame>span{display:block;font-family:'Space Grotesk',sans-serif;font-size:21px;padding:12px 2px 4px;line-height:1.3}
.hall-frame small{display:block;font-family:'DM Sans',sans-serif;font-size:12px;margin-top:5px;color:var(--muted)}
.hall-action{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;padding:12px 18px;background:var(--blue);color:#fff;border-radius:2px;font-size:14px;min-height:44px}
.hall-work>.hall-action{margin-top:28px}
.hall-paper{background:#f6f5f1f7;padding:clamp(24px,4vw,56px);box-shadow:0 12px 40px #24242426;width:min(550px,calc(100vw - 40px));transform:rotate(-2deg);margin-bottom:75px}
.hall-paper h2{font-size:clamp(28px,3.5vw,45px);font-weight:500;line-height:1.4;letter-spacing:-.03em;margin:22px 0}
.hall-paper p{font-size:16px;line-height:1.8;margin:0 0 25px}
.hall-paper .handwriting{font-size:20px}
.hall-paper-links{display:flex;gap:10px;flex-wrap:wrap}
.hall-paper-links .hall-action{gap:15px}
.hall-paper-links .hall-action:last-child{background:var(--ink)}
.back-to-front{display:block;font-size:13px;text-decoration:underline;text-underline-offset:4px;margin-top:22px;width:max-content}
.hall-contact .hall-paper{transform:rotate(2deg)}
@media(hover:hover) and (pointer:fine){.entrance-door:hover .door-prompt{opacity:1;transform:none}.hall-frame:hover{transform:translateY(-6px)}.scene-back:hover,.scene-skip:hover{color:var(--blue)}}
@media(max-width:760px){header nav{gap:12px}header nav a{font-size:12px}.entrance-world{left:53%}.entrance-brand{left:18px;top:18px;font-size:11px}.paper-instruction{bottom:22px;padding:13px 18px;gap:12px}.paper-instruction span>span{font-size:12px}.door-prompt{padding:9px 13px;font-size:13px;opacity:1;transform:none}.hall-topbar{top:16px;left:16px;right:16px}.scene-back,.scene-skip{padding:9px 11px;font-size:12px}.hall-intro h1{font-size:29vw;top:28%;-webkit-text-stroke:2px #323330;text-shadow:2px 2px 0 #eeeae1,3px 3px 0 #323330}.designer-character{height:63%;max-width:90%;bottom:16%}.designer-subtitle{top:58%;font-size:clamp(21px,5.5vw,34px);letter-spacing:.025em}.designer-greeting{top:68%;font-size:12px}.hall-bottom{bottom:18px;gap:10px}.hall-work{padding:85px 18px 150px}.hall-work h2{font-size:34px}.hall-work>p{font-size:12px;margin-bottom:16px}.hall-gallery{gap:10px;grid-template-columns:1fr;width:min(380px,100%)}.hall-frame{display:flex;align-items:center;gap:14px;padding:8px;min-width:0}.hall-frame:first-child,.hall-frame:last-child{transform:none}.hall-frame img{width:32%;aspect-ratio:1.2}.hall-frame>span{font-size:18px;padding:0}.hall-frame small{font-size:12px}.hall-work>.hall-action{margin-top:18px}.hall-paper{padding:27px;transform:rotate(-1deg)}.hall-paper h2{font-size:29px}.hall-paper p{font-size:14px}.hall-paper .handwriting{font-size:18px}}
@media(max-width:370px){header{padding:0 12px}.wordmark{font-size:28px}.wordmark span{font-size:22px}header nav{gap:9px}.paper-instruction{padding:12px}.paper-instruction span>span{font-size:11px}}
@media(max-height:620px) and (min-width:761px){.hall-intro h1{top:18%;font-size:25vh}.designer-character{height:70%}.designer-subtitle{top:52%;font-size:35px}.designer-greeting{top:64%;font-size:12px}.hall-bottom{bottom:12px;gap:7px}.paper-instruction{padding:10px 18px}.hall-work{padding-top:65px;padding-bottom:125px}.hall-work h2{font-size:36px}.hall-work>p{margin-bottom:10px}.hall-gallery{max-width:680px;gap:18px}.hall-frame{padding:8px}.hall-frame>span{font-size:16px;padding-top:7px}.hall-work>.hall-action{margin-top:14px}.hall-paper{padding:24px;width:480px}.hall-paper h2{font-size:30px;margin:15px 0}.hall-paper p{font-size:14px;margin-bottom:15px}}
@media(prefers-reduced-motion:reduce){.entrance-world,.door-prompt,.hall-frame{transition:none}.hall-background,.hall-chapter{will-change:auto}}
body.reduce-motion .entrance-world,body.reduce-motion .door-prompt,body.reduce-motion .hall-frame{transition:none}
/* Warm wood is revealed only on the door; the wall and stickers retain their drawing. */
.door-color{position:absolute;left:40.55%;top:41.8%;width:15%;height:35.7%;background:#c99245;mix-blend-mode:multiply;opacity:0;pointer-events:none;transition:opacity 220ms var(--ease-out);border-radius:1px}
.entrance-world:has(.entrance-door:focus-visible) .door-color,.entrance-world:has(.entrance-door:active) .door-color,.entrance.is-opening .door-color{opacity:.76}
@media(hover:hover) and (pointer:fine){.entrance-world:has(.entrance-door:hover) .door-color{opacity:.76}}
@media(prefers-reduced-motion:reduce){.door-color{transition:none}}
body.reduce-motion .door-color{transition:none}
/* Individually painted sprites make the entrance move without shifting the brick wall. */
.entrance-life{position:absolute;inset:0;pointer-events:none}
.scene-sprite{display:block;background-image:url('assets/entrance-sprites.png');background-size:300% 200%;background-repeat:no-repeat}
.hanging-mouse{position:absolute;left:25.2%;top:29%;width:11%;height:48%;transform-origin:50% 0;animation:mouse-swing 3.6s ease-in-out infinite;animation-play-state:paused}
.mouse-cord{position:absolute;left:50%;top:0;width:1.4px;height:62%;background:#62625c;opacity:.85}
.mouse-sprite{position:absolute;bottom:0;left:0;width:100%;aspect-ratio:1;background-position:0 0}
.cat-actor{position:absolute;left:28.3%;top:60.7%;width:12%;aspect-ratio:1}
.cat-actor>.scene-sprite{position:absolute;inset:0;opacity:0;animation-duration:12s;animation-iteration-count:infinite;animation-timing-function:linear;animation-play-state:paused}
.cat-neutral{background-position:100% 0;animation-name:cat-neutral}
.cat-start{background-position:0 100%;animation-name:cat-start}
.cat-yawn{background-position:50% 100%;animation-name:cat-yawn}
.cat-relax{background-position:100% 100%;animation-name:cat-relax}
.bug-trail{position:absolute;left:68%;top:15%;width:3%;aspect-ratio:1;animation:bug-walk 19s linear infinite;animation-play-state:paused}
.bug-sprite{width:100%;height:100%;background-position:50% 0;animation:bug-scuttle .22s ease-in-out infinite alternate;animation-play-state:paused}
.life-running .hanging-mouse,.life-running .cat-actor>.scene-sprite,.life-running .bug-trail,.life-running .bug-sprite{animation-play-state:running}
@keyframes mouse-swing{0%,100%{transform:translateX(-50%) rotate(-5deg)}50%{transform:translateX(-50%) rotate(5deg)}}
@keyframes cat-neutral{0%,25%,49%,100%{opacity:1}27%,47%{opacity:0}}
@keyframes cat-start{0%,25%,35%,100%{opacity:0}27%,33%{opacity:1}}
@keyframes cat-yawn{0%,33%,43%,100%{opacity:0}35%,41%{opacity:1}}
@keyframes cat-relax{0%,41%,49%,100%{opacity:0}43%,47%{opacity:1}}
@keyframes bug-walk{0%{transform:translate(0,0) rotate(100deg)}23%{transform:translate(160%,20%) rotate(110deg)}27%{transform:translate(175%,25%) rotate(190deg)}48%{transform:translate(155%,130%) rotate(185deg)}53%{transform:translate(150%,140%) rotate(270deg)}77%{transform:translate(-15%,120%) rotate(275deg)}82%{transform:translate(-25%,110%) rotate(350deg)}97%{transform:translate(-5%,5%) rotate(355deg)}100%{transform:translate(0,0) rotate(460deg)}}
@keyframes bug-scuttle{from{transform:rotate(-3deg) scaleX(.97)}to{transform:rotate(3deg) scaleX(1.02)}}
@media(prefers-reduced-motion:reduce){.hanging-mouse,.cat-actor>.scene-sprite,.bug-trail,.bug-sprite{animation:none!important}.hanging-mouse{transform:translateX(-50%)}.cat-neutral{opacity:1!important}}
body.reduce-motion .hanging-mouse,body.reduce-motion .cat-actor>.scene-sprite,body.reduce-motion .bug-trail,body.reduce-motion .bug-sprite{animation:none!important}
body.reduce-motion .hanging-mouse{transform:translateX(-50%)}body.reduce-motion .cat-neutral{opacity:1!important}