/* The illustration fills the viewport; design-sized text keeps its proportions. */
html,body{background:#000}
/* Immersive stage keeps one viewport width when transitions lock scrolling. */
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}
#world{inset:0;width:100%;height:100svh;background:#000}
#story-shade{background:#000}
#scene-shade{transition:none}
.story-progressed .vignette{opacity:0!important}
.home-sign{left:calc(var(--stage-x) + var(--stage-width)*.5);top:calc(var(--stage-y) + var(--stage-height)*.44);width:calc(var(--stage-width)*.96)}
#portfolio-sign{font-size:calc(123px*var(--stage-scale));letter-spacing:-.055em;-webkit-text-stroke:calc(.65px*var(--stage-scale)) #ffd16c}
.home-foot{left:0;right:0;bottom:calc(13px*var(--stage-scale))}
.home-foot .signature{font-size:calc(22px*var(--stage-scale))}
#avatar-home-slot .portrait-peek{width:calc(73px*var(--stage-scale));height:calc(103px*var(--stage-scale));bottom:calc(100% + 12px*var(--stage-scale))}
.home-foot .triangle{width:calc(16px*var(--stage-scale));height:calc(8px*var(--stage-scale));margin-top:calc(12px*var(--stage-scale))}
.home-foot .triangle-shadow{width:calc(15px*var(--stage-scale))}
.object-door,.object-door:hover,.object-door:focus{border:0;background:none;box-shadow:none;outline:none;filter:none}
.object-door::before,.object-door::after{display:none!important}
.object-door .object-hint{display:block;min-width:0;bottom:-20px;left:50%;transform:translate(-50%,15px);white-space:nowrap;pointer-events:none}
.object-door:hover .object-hint,.object-door:focus-visible .object-hint{transform:translate(-50%,0)}
.object-hint strong{font-family:var(--hand);font-size:clamp(22px,2.65vw,38px);font-weight:400;color:#efd7b2;text-shadow:0 2px 5px #000c,0 0 12px #0005;-webkit-text-stroke:.28px currentColor}
.object-hint small{display:none}
.object-door:focus-visible .object-hint strong{text-decoration:underline;text-underline-offset:7px}
.eye-door{position:absolute;z-index:4;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;transform:translate(-50%,-50%)}
.eye-door:hover{background:none;box-shadow:none}
.eye-door:focus-visible{outline:1px dashed #fff6da;outline-offset:3px}
.story-progressed .eye-door,.transitioning .eye-door{visibility:hidden;pointer-events:none}
.welcome-inner .welcome-button img,.journey-welcome .welcome-button img{width:calc(612px*var(--stage-scale));height:auto;max-width:none}
@media(min-width:768px){.site-nav{left:clamp(16px,2vw,32px);right:clamp(16px,2vw,32px);top:clamp(13px,2vh,26px)}.nav-button{font-size:calc(13px*var(--stage-scale));gap:calc(7px*var(--stage-scale));min-height:calc(27px*var(--stage-scale))}.nav-button svg{width:calc(18px*var(--stage-scale));height:calc(18px*var(--stage-scale))}}

.transitioning #story-next{pointer-events:none}

/* Projected label anchors follow the three annotated clear spaces. */
.object-door .object-hint,.object-door:hover .object-hint,.object-door:focus-visible .object-hint{bottom:auto;transform:translate(-50%,-50%) rotate(var(--hint-angle,0deg));transform-origin:center;transition:opacity .22s,visibility .22s}
.story-avatar-plane{clip-path:none}
/* The white arrow remains attached to the screen, including the timeline. */
.story-next{bottom:2px;min-height:44px;padding-bottom:0}
.story-next .triangle{height:calc(8.005px*var(--stage-scale))}
.story-next .triangle-shadow{height:3px;margin-top:1px}