@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{color-scheme:dark;--gold:#ebc993;--paper:#f6f0e5;--mono:'IBM Plex Mono',monospace}
*{box-sizing:border-box}body{margin:0;background:#171c20;color:var(--paper);font-family:'DM Sans',Arial,sans-serif}button,a{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:6px}[hidden]{display:none!important}
#journey{height:430vh}.stage{position:sticky;top:0;height:100svh;min-height:520px;overflow:hidden}#viewport{position:absolute;inset:0;touch-action:pan-y;cursor:grab}#viewport:active{cursor:grabbing}canvas{width:100%;height:100%;display:block}
.shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(17,22,27,.45),transparent 25%,transparent 66%,rgba(17,22,27,.68))}
.brand{position:absolute;top:34px;left:4%;display:flex;gap:14px;align-items:center;pointer-events:none}.brand strong{font:500 21px Georgia,serif;letter-spacing:.25em}.brand small{display:block;font:7px var(--mono);letter-spacing:.4em;color:var(--gold);margin-top:7px}.brand-icon{height:34px;display:flex;gap:4px;align-items:flex-end}.brand-icon i{width:2px;background:var(--gold);height:24px}.brand-icon i:nth-child(2){height:34px}.brand-icon i:nth-child(3){height:29px}.brand-icon i:nth-child(4){height:18px}
.project-note{position:absolute;right:4%;top:44px;font:8px var(--mono);letter-spacing:.15em;color:#e1d5c4;pointer-events:none}
.caption{position:absolute;left:4%;bottom:102px;display:flex;flex-direction:column;gap:12px;pointer-events:none}.eyebrow{font:8px var(--mono);letter-spacing:.2em;color:var(--gold)}#view-label{font:400 clamp(22px,2.3vw,34px) Georgia,serif;letter-spacing:-.02em}
.controls{position:absolute;left:4%;right:4%;bottom:31px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #ffffff30;padding-top:19px}.controls>span{font:8px var(--mono);letter-spacing:.09em;color:#e4d8c7}.controls b{font-weight:400;margin:0 14px;color:var(--gold)}.controls button{font:8px var(--mono);letter-spacing:.12em;background:transparent;border:0;padding:8px 0;color:var(--gold)}.controls button span{margin-left:18px;font-size:15px}
.progress-track{position:absolute;bottom:0;left:0;right:0;height:2px;background:#ffffff20}.progress-track span{display:block;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:left}
#loading{position:fixed;inset:0;background:#171c20;z-index:50;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px}.load-mark{font:400 80px Georgia;color:var(--gold);margin-bottom:10px}#loading strong{font:400 15px Georgia;letter-spacing:.3em}#loading small{font:9px var(--mono);color:#9eacb2;margin-top:5px}
#error{position:fixed;z-index:60;inset:20% 15%;padding:40px;background:#171c20;border:1px solid #d3b782;box-shadow:0 0 0 100vmax #10161bc9}#error h1{font:400 32px Georgia}#error p{font-size:13px;line-height:1.8;overflow-wrap:anywhere;color:#b7bdc0}#error a{display:inline-block;color:var(--gold);font:10px var(--mono);margin-top:20px;padding:14px;border:1px solid var(--gold);text-decoration:none}
@media(max-width:760px){.brand{top:24px;left:6%}.brand strong{font-size:17px}.brand small{font-size:6px}.project-note{display:none}.caption{left:6%;bottom:116px}.controls{left:6%;right:6%;bottom:25px;align-items:flex-end}.controls>span{font-size:7px;line-height:1.9;max-width:170px}.controls b{margin:0 5px}.controls button{font-size:7px;white-space:nowrap}.controls button span{margin-left:8px}#error{inset:17% 6%;padding:25px}}
.floor-panel{position:absolute;right:4%;bottom:115px;width:220px;padding:19px;background:#111b24e8;border:1px solid #d5ba8545;backdrop-filter:blur(12px)}.floor-panel small,.interior-panel>small{font:8px var(--mono);letter-spacing:.12em;color:var(--gold)}.floor-panel h2{font:400 29px Georgia;margin:12px 0 18px}.floor-panel>div{display:flex;gap:8px}.floor-panel button{flex:1;padding:12px 7px;font:8px var(--mono);color:var(--gold);border:1px solid #d5ba8560;background:transparent}.floor-panel button span{margin-left:8px}.floor-panel button:hover{background:#d5ba8525}.floor-panel p{font-size:10px;color:#aeb8be;margin:15px 0 0}
body.inside #journey{height:1100vh}body.inside .floor-panel,body.inside .project-note{display:none}body.inside .shade{background:linear-gradient(0deg,#091018a0,transparent 25%)}
.interior-panel{position:absolute;left:4%;top:118px;width:228px;padding:19px;background:#0c1520eb;border:1px solid #d5ba8540;backdrop-filter:blur(10px)}.interior-panel h2{font:400 32px Georgia;margin:14px 0 19px}.interior-panel button{display:block;width:100%;padding:12px 0;text-align:left;background:transparent;color:#bec5c9;border:0;border-top:1px solid #ffffff1c;font:8px var(--mono);letter-spacing:.04em}.interior-panel button[aria-pressed=true]{color:var(--gold)}.interior-panel nav{margin:15px 0}.interior-panel #back{color:var(--gold);padding-bottom:0}
#entry-status{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);font:9px var(--mono);letter-spacing:.12em;color:var(--gold);padding:13px 18px;background:#0c1520e0;border:1px solid #d5ba8540;white-space:nowrap}
body.entering .floor-panel,body.entering .caption,body.entering .controls{opacity:0;visibility:hidden;pointer-events:none}body.entering .shade{opacity:0}
@media(max-width:760px){.floor-panel{right:6%;bottom:164px;width:180px;padding:14px}.floor-panel h2{font-size:24px;margin:10px 0 14px}.floor-panel p{font-size:9px}.floor-panel small{font-size:7px}.floor-panel button{font-size:7px}.interior-panel{left:6%;top:90px;width:195px;padding:14px}.interior-panel button{padding:11px 0;font-size:7px}.interior-panel h2{font-size:27px;margin:12px 0}.interior-panel>small{font-size:7px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}