:root{
  --cream:#ffffff;
  --ink:#131715;
  --red:#e83924;
  --petrol:#17484a;
  --pink:#f5aa9d;
  --blue:#075bd8;
}

@font-face{font-family:'Della Respira';src:url('assets/fonts/DellaRespira-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Josefin Sans';src:url('assets/fonts/JosefinSans-Variable.ttf') format('truetype');font-weight:100 700;font-display:swap}
*{box-sizing:border-box}
html,body{width:100%;height:100%;min-height:100%;margin:0;background:var(--cream)}
body{overflow:hidden;color:var(--ink);font-family:'Josefin Sans',Arial,sans-serif}
button{font:inherit;color:inherit}
.sound-toggle{position:fixed;z-index:30;right:1.5rem;bottom:1.5rem;display:flex;align-items:center;gap:.45rem;padding:.58rem .72rem;border:2px solid var(--ink);background:var(--cream);cursor:pointer;font-size:.62rem;font-weight:900;text-transform:uppercase;letter-spacing:.07em}.sound-toggle i{display:block;width:.65rem;height:.65rem;border-radius:50%;background:var(--ink)}.sound-toggle[aria-pressed="true"] i{background:var(--red);animation:sound-beat 1.8s ease-in-out infinite}
.sound-toggle[hidden]{display:none}
.language-picker{position:fixed;z-index:60;right:1rem;top:1rem;display:flex;align-items:center;gap:.4rem;padding:.36rem .42rem .36rem .55rem;background:#fff;border:2px solid var(--ink);font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.language-picker select{border:0;background:transparent;font:inherit;color:var(--ink);cursor:pointer}.language-picker select:focus-visible{outline:2px solid var(--red);outline-offset:3px}
body:not(.waking) .sound-toggle{opacity:0;pointer-events:none}
.prologue{position:fixed;z-index:40;inset:0;overflow:hidden;background:var(--cream);transition:opacity .9s ease,visibility 0s .9s}.prologue.leaving{opacity:0;visibility:hidden}.prologue>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.035);animation:prologue-camera 16s ease-in-out infinite alternate}.prologue:after{content:"";position:absolute;inset:0;background:#17484a38;mix-blend-mode:multiply}.prologue-copy{position:absolute;z-index:2;left:5%;top:50%;width:min(39rem,53vw);padding:2.1rem 2.3rem;background:var(--cream);border:2px solid var(--ink);transform:translateY(-50%) rotate(-.25deg)}.prologue-copy>p{margin:0 0 1rem;font-size:.72rem;font-weight:900;letter-spacing:.14em}.prologue-copy h1{margin:0;max-width:11ch;font-size:clamp(3.3rem,5.7vw,5.8rem);line-height:.88;letter-spacing:-.035em}.prologue-copy>strong{display:block;max-width:35rem;margin:1.4rem 0 .65rem;font-size:1.18rem;line-height:1.3}.prologue-copy>span{display:block;max-width:34rem;font-size:.88rem;line-height:1.45}.prologue-start{margin-top:1.5rem;padding:.78rem .95rem;border:2px solid var(--ink);background:var(--ink);color:var(--cream);font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}.prologue-start:hover,.prologue-start:focus-visible{background:var(--red)}

.hotel,.facade{position:fixed;inset:0;overflow:hidden}
.facade-camera{position:absolute;inset:0;transform-origin:50% 50%}
.hotel-house{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

.facade-title{position:absolute;z-index:4;left:2rem;top:1.5rem;display:flex;align-items:baseline;gap:1rem;padding:.65rem .8rem;background:var(--cream);border:2px solid var(--ink)}
.facade-title strong{font-size:1.05rem;letter-spacing:.08em}
.facade-title span{font-size:.72rem}
.facade-help{position:absolute;z-index:4;right:2rem;top:1.5rem;margin:0;padding:.7rem .85rem;background:var(--ink);color:var(--cream);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.facade-intro{position:absolute;z-index:4;left:2rem;bottom:1.7rem;width:min(28rem,38vw);padding:1rem 1.1rem;background:var(--cream);border:2px solid var(--ink);transform:rotate(-.35deg)}
.facade-intro strong{font-size:1.15rem}.facade-intro p{margin:.35rem 0 0;font-size:.82rem;line-height:1.4}

.windows{position:absolute;z-index:5;inset:0}
.window{position:absolute;width:10%;height:24%;padding:0;border:0;background:transparent;text-align:left;cursor:pointer;overflow:visible;transform:translate(-50%,-50%);transition:transform .22s ease;box-shadow:none}
.window:before{content:"";position:absolute;inset:3%;border:2px solid transparent;transition:border-color .2s,background .2s}
.window:after{content:"";position:absolute;left:50%;top:50%;width:.72rem;height:.72rem;border-radius:50%;background:var(--pink);border:2px solid var(--cream);box-shadow:0 0 0 2px var(--ink);transform:translate(-50%,-50%);animation:window-pulse 2.6s ease-out infinite}
.window b,.window span{position:absolute;z-index:2;left:50%;background:var(--cream);color:var(--ink);padding:.18rem .3rem;border:1px solid var(--ink);transform:translateX(-50%);white-space:nowrap;transition:opacity .2s,transform .2s}
.window b{top:calc(50% + 1rem);font-size:.7rem;line-height:1}.window span{top:calc(50% + 2.35rem);font-size:.46rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;opacity:0;transform:translate(-50%,.35rem)}
.window:hover,.window:focus-visible,.window.active{transform:translate(-50%,-50%) scale(1.025);outline:0}
.window:hover:before,.window:focus-visible:before{border-color:var(--cream);background:#f5aa9d24}
.window:hover span,.window:focus-visible span{opacity:1;transform:translate(-50%,0)}
.window.active:after{background:var(--blue)}
.window-1600{left:10.5%;top:22%}.window-1873{left:67%;top:22%;width:14%;height:31%}.window-1900{left:42.5%;top:22%}.window-1938{left:45.5%;top:58%}.window-1955{left:70%;top:58%}.window-1991{left:91.5%;top:57%}
.window-portal{position:fixed;z-index:9;inset:0;pointer-events:none;visibility:hidden;clip-path:inset(var(--portal-top) var(--portal-right) var(--portal-bottom) var(--portal-left));background:var(--cream)}
.window-portal img{width:58%;height:100%;object-fit:cover;display:block;transform:scale(1.12);filter:saturate(.92)}
.window-portal.opening{visibility:visible;animation:portal-open .8s cubic-bezier(.16,1,.3,1) forwards}

.light{position:absolute;border-radius:50%;background:#ffe29a;mix-blend-mode:screen;filter:blur(7px);opacity:.35;pointer-events:none}.light-one{left:42.5%;top:51%;width:4%;height:7%;animation:lamp-flicker 4.7s steps(1) infinite}.light-two{right:7%;top:48%;width:4%;height:7%;animation:lamp-flicker 5.8s 1.4s steps(1) infinite}
.curtain{position:absolute;right:3%;top:41%;width:10%;height:28%;transform-origin:top center;animation:curtain-breathe 5s ease-in-out infinite;pointer-events:none}
.facade-motion{display:none;position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ink-leaf{position:absolute;width:1.2rem;height:3.5rem;border:3px solid var(--ink);border-radius:90% 0 90% 0;background:var(--petrol);transform-origin:50% 100%;filter:drop-shadow(2px 2px 0 var(--cream))}
.leaf-a{left:9.2%;top:25%;animation:leaf-sway 3.8s ease-in-out infinite alternate}.leaf-b{left:42.8%;top:67%;width:1rem;height:3rem;animation:leaf-sway 4.6s -1.2s ease-in-out infinite alternate-reverse}.leaf-c{right:5.5%;top:67%;height:4rem;animation:leaf-sway 5.2s -2.5s ease-in-out infinite alternate}
.cloth{position:absolute;width:3.7rem;height:.65rem;background:repeating-linear-gradient(90deg,var(--red) 0 .5rem,var(--cream) .5rem 1rem);border:2px solid var(--ink);transform-origin:top left}
.cloth-a{left:24.5%;top:10.6%;animation:cloth-flutter 2.7s ease-in-out infinite alternate}.cloth-b{right:7.4%;top:57%;background:var(--red);animation:cloth-flutter 3.2s -1s ease-in-out infinite alternate-reverse}
.hanging-light{position:absolute;width:1.2rem;aspect-ratio:1;border-radius:50%;background:#ffe699;border:2px solid var(--ink);box-shadow:0 0 0 .3rem #ffe69933;animation:house-light 4s steps(1) infinite}.glow-a{left:26%;top:50%}.glow-b{right:7.8%;top:51%;animation-delay:-1.7s}
.passing-line{position:absolute;width:4.5rem;height:.32rem;background:var(--ink);border-radius:60%;opacity:.8}.line-a{left:-6rem;top:76%;animation:ink-pass 13s linear infinite}.line-b{left:-8rem;top:79%;width:2.8rem;animation:ink-pass 13s 1.1s linear infinite}

.chapter{position:absolute;z-index:10;inset:0;display:grid;grid-template-columns:58% 42%;background:var(--cream);visibility:hidden;opacity:0;clip-path:inset(38% 19% 44% 61%);transition:clip-path 1.05s cubic-bezier(.16,1,.3,1),opacity .35s,visibility 0s 1.05s}
.chapter.open{visibility:visible;opacity:1;clip-path:inset(0);transition:clip-path 1.05s cubic-bezier(.16,1,.3,1),opacity .25s}
.chapter.from-portal{clip-path:inset(0);transition:none}
.chapter-room{position:relative;overflow:hidden;background:var(--cream)}
.room-pan-layer{position:absolute;inset:-3%;transform:translate3d(var(--look-x,0),var(--look-y,0),0) scale(1.02);transition:transform .9s cubic-bezier(.16,1,.3,1);transform-origin:var(--focus-x,50%) var(--focus-y,50%)}
.room-pan-layer.entering{animation:enter-room 1.35s cubic-bezier(.16,1,.3,1)}
.room-pan-layer.focused{transform:translate3d(0,0,0) scale(1.13);transition-duration:1.15s}
.chapter-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;animation:room-camera 12s 1.4s cubic-bezier(.37,0,.2,1) infinite alternate;transform-origin:52% 48%}
.chapter-light{position:absolute;left:16%;top:34%;width:10%;aspect-ratio:1;border-radius:50%;background:#ffe19a;mix-blend-mode:screen;filter:blur(8px);opacity:.13;animation:lamp-flicker 5.1s steps(1) infinite;pointer-events:none}
.trace-help{position:absolute;z-index:4;left:1.5rem;bottom:1.5rem;margin:0;padding:.55rem .7rem;background:var(--ink);color:var(--cream);font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;animation:help-nudge 2.8s ease-in-out infinite}
.object-traces{position:absolute;inset:0;z-index:5}
.trace-dot{position:absolute;left:var(--x);top:var(--y);width:2.25rem;height:2.25rem;padding:0;border:2px solid var(--cream);border-radius:50%;background:var(--red);color:var(--cream);cursor:pointer;box-shadow:0 0 0 2px var(--ink);transform:translate(-50%,-50%) scale(0);animation:trace-in .55s calc(.9s + var(--delay)) cubic-bezier(.2,1.5,.4,1) forwards}
.trace-dot:after{content:"";position:absolute;inset:-10px;border:2px solid var(--cream);border-radius:50%;opacity:.65;animation:trace-pulse 2.2s ease-out infinite}
.trace-dot i{font-style:normal;font-size:.75rem;font-weight:900}.trace-dot span{position:absolute;left:50%;top:calc(100% + .6rem);padding:.28rem .4rem;background:var(--cream);border:1px solid var(--ink);color:var(--ink);font-size:.58rem;font-weight:800;text-transform:uppercase;white-space:nowrap;transform:translateX(-50%) rotate(-1deg);opacity:0;transition:opacity .2s,transform .2s}
.trace-dot:hover span,.trace-dot:focus-visible span,.trace-dot.seen span{opacity:1;transform:translateX(-50%) rotate(0)}
.trace-card{position:absolute;z-index:7;left:1.5rem;bottom:1.5rem;width:min(23rem,46%);padding:1rem 1.1rem;background:var(--cream);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--red);transform:translateY(calc(100% + 2rem)) rotate(-.5deg);opacity:0;transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .25s}
.trace-card.visible{transform:translateY(0) rotate(-.5deg);opacity:1}.trace-card small{font-size:.6rem;font-weight:900;text-transform:uppercase;color:var(--red);letter-spacing:.08em}.trace-card h2{margin:.3rem 1.5rem .45rem 0;font-size:1.45rem;line-height:1}.trace-card p{margin:0;font-size:.78rem;line-height:1.4}.trace-close{position:absolute;right:.45rem;top:.35rem;border:0;background:transparent;font-size:1.3rem;cursor:pointer}

.chapter-copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:5.5vw 6vw 2.4rem;background:var(--cream);overflow:auto}
.chapter-index{margin:0 0 1.4rem;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.11em;color:var(--red)}
.chapter h1{max-width:none;margin:0;font-size:clamp(2.85rem,4.2vw,4.9rem);line-height:.91;letter-spacing:-.035em}
.chapter-lead{max-width:34rem;margin:1.45rem 0 1rem;font-size:1.05rem;line-height:1.42}
.chapter-question{align-self:flex-start;margin:0 0 .7rem;padding:.35rem .55rem;border:1px solid var(--ink);background:var(--pink);font-size:.62rem;font-weight:900;line-height:1.2;letter-spacing:.055em;text-transform:uppercase;transform:rotate(-.5deg)}
.chapter-highlight{margin:.2rem 0 .9rem;padding:.75rem .85rem .7rem;border-top:2px solid var(--red);border-bottom:1px solid var(--ink);background:rgba(245,170,157,.22)}
.chapter-highlight[hidden]{display:none}.chapter-highlight strong{display:block;color:var(--red);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase}.chapter-highlight p{margin:.35rem 0 .45rem;font-size:.79rem;line-height:1.38}.chapter-highlight a{color:var(--ink);font-size:.62rem;font-weight:900;text-underline-offset:.18rem}
.chapter ul{max-width:34rem;margin:0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.chapter li{padding:.56rem 0;border-bottom:1px solid var(--ink);font-size:.82rem;line-height:1.3}
.chapter-source{align-self:flex-start;margin-top:1rem;color:var(--ink);font-size:.72rem;font-weight:800;text-underline-offset:.35rem}
.chapter-accuracy{max-width:34rem;margin:.65rem 0 0;font-size:.63rem;line-height:1.35;color:#5f4e3f}
.chapter-close,.chapter-next{position:absolute;z-index:4;top:1.5rem;padding:.7rem .85rem;border:2px solid var(--ink);background:var(--cream);font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
.chapter-close{left:1.5rem}.chapter-next{right:1.5rem;background:var(--ink);color:var(--cream)}
.chapter-next{top:4.25rem}

@keyframes lamp-flicker{0%,88%,100%{opacity:.38}89%{opacity:.18}91%{opacity:.5}93%{opacity:.3}}
@keyframes curtain-breathe{50%{transform:skewX(2deg) translateX(3px)}}
@keyframes room-curtain{50%{transform:translateX(13%) skewX(-2deg)}}
@keyframes room-camera{from{transform:scale(1.01) translate3d(-.35%,.2%,0)}to{transform:scale(1.055) translate3d(.55%,-.4%,0)}}
@keyframes enter-room{from{transform:translate3d(var(--look-x,0),var(--look-y,0),0) scale(1.22);filter:blur(2px)}to{transform:translate3d(var(--look-x,0),var(--look-y,0),0) scale(1.02);filter:blur(0)}}
@keyframes trace-in{to{transform:translate(-50%,-50%) scale(1)}}
@keyframes trace-pulse{to{transform:scale(1.55);opacity:0}}
@keyframes help-nudge{50%{transform:translateY(-4px) rotate(-.4deg)}}
@keyframes preview-drift{from{transform:scale(1.03) translate3d(-1%,.5%,0)}to{transform:scale(1.12) translate3d(2%,-1.5%,0)}}
@keyframes window-pulse{0%{box-shadow:0 0 0 2px var(--ink),0 0 0 3px #f7e5c699}70%,100%{box-shadow:0 0 0 2px var(--ink),0 0 0 13px #f7e5c600}}
@keyframes portal-open{0%{clip-path:inset(var(--portal-top) var(--portal-right) var(--portal-bottom) var(--portal-left))}100%{clip-path:inset(0 42% 0 0)}}

@keyframes camera-breathe{
  from{transform:scale(1.01) translate3d(-.7%,.2%,0)}
  to{transform:scale(1.075) translate3d(.9%,-.65%,0)}
}
@keyframes leaf-sway{from{transform:rotate(-8deg) skewX(-3deg)}to{transform:rotate(10deg) skewX(4deg) translateX(2px)}}
@keyframes cloth-flutter{from{transform:rotate(-2deg) skewY(-2deg)}to{transform:rotate(3deg) skewY(5deg) scaleX(1.05)}}
@keyframes house-light{0%,83%,100%{opacity:.85;transform:scale(1)}84%{opacity:.28;transform:scale(.92)}87%{opacity:1;transform:scale(1.08)}90%{opacity:.6}}
@keyframes ink-pass{0%{transform:translateX(0) rotate(4deg);opacity:0}8%{opacity:.75}88%{opacity:.75}100%{transform:translateX(115vw) rotate(-3deg);opacity:0}}

@media (prefers-reduced-motion:no-preference){.facade-camera,.windows{animation:camera-breathe 13s cubic-bezier(.37,0,.2,1) infinite alternate}.facade-title{animation:title-arrive .8s cubic-bezier(.2,1.2,.3,1) both}.facade-help{animation:help-blink 2.4s .8s ease-in-out infinite}.facade-intro{animation:intro-arrive .9s .25s cubic-bezier(.16,1,.3,1) both}.window{animation:window-wake .65s cubic-bezier(.2,1.45,.4,1) both}.window:nth-child(1){animation-delay:.18s}.window:nth-child(2){animation-delay:.28s}.window:nth-child(3){animation-delay:.38s}.window:nth-child(4){animation-delay:.48s}.window:nth-child(5){animation-delay:.58s}.window:nth-child(6){animation-delay:.68s}}
@keyframes title-arrive{from{opacity:0;transform:translateY(-1.5rem) rotate(-1deg)}to{opacity:1;transform:none}}
@keyframes intro-arrive{from{opacity:0;transform:translateY(2rem) rotate(-2deg)}to{opacity:1;transform:rotate(-.35deg)}}
@keyframes window-wake{from{opacity:0;scale:.72}to{opacity:1;scale:1}}
@keyframes help-blink{0%,100%{background:var(--ink);color:var(--cream)}50%{background:var(--pink);color:var(--ink)}}

@media(max-width:760px){
  .facade{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .facade-camera{width:185%;right:auto;left:0;animation:none!important}
  .hotel-house{width:100%;left:0;max-width:none}
  .facade-title{position:fixed;left:1rem;right:1rem;top:1rem;align-items:flex-start;flex-direction:column;gap:.2rem}
  .facade-help{position:fixed;right:1rem;top:5.35rem}
  .facade-intro{position:fixed;left:1rem;bottom:1rem;width:calc(100% - 2rem);padding:.72rem}.facade-intro strong{font-size:.95rem}.facade-intro p{font-size:.7rem}
  .windows{inset:0;width:185%;left:0;animation:none!important}
  .window{width:10%;height:24%}.window b{font-size:.65rem}.window span{font-size:.38rem}
  .window-1873{width:14%;height:31%}
  .window:hover,.window:focus-visible,.window.active{transform:translate(-50%,-50%) scale(1.025)}
  .window span{opacity:1;top:calc(50% + 2.15rem)}
  .window-portal img{width:100%;height:42%}.window-portal.opening{animation-name:portal-open-mobile}
  .chapter{grid-template-columns:1fr;grid-template-rows:42% 58%}
  .trace-help{left:.7rem;bottom:.7rem;font-size:.52rem}.trace-card{left:.7rem;bottom:.7rem;width:calc(100% - 1.4rem)}.trace-dot{width:1.8rem;height:1.8rem}
  .chapter-copy{padding:2rem 1.4rem;justify-content:flex-start;overflow:auto}.chapter h1{font-size:2.8rem}.chapter-lead{margin:1rem 0;font-size:.96rem}.chapter li{padding:.48rem 0}
  .sound-toggle{right:.75rem;bottom:.75rem}.finale>img{width:185%;left:-42.5%;max-width:none}.finale-windows{width:185%;left:-42.5%}.finale-copy{left:1.4rem;top:48%;width:calc(100% - 2.8rem)}.finale-copy h1{font-size:3rem}.finale-copy>strong{font-size:1.05rem}
  .prologue-copy{left:1rem;top:auto;bottom:1rem;width:calc(100% - 2rem);padding:1.2rem;transform:rotate(-.25deg)}.prologue-copy h1{font-size:2.9rem}.prologue-copy>strong{margin:1rem 0 .5rem;font-size:1rem}.prologue-copy>span{font-size:.78rem}.prologue-start{margin-top:1rem}
}

@keyframes portal-open-mobile{0%{clip-path:inset(var(--portal-top) var(--portal-right) var(--portal-bottom) var(--portal-left))}100%{clip-path:inset(0 0 58% 0)}}

.finale{position:fixed;z-index:20;inset:0;visibility:hidden;opacity:0;overflow:hidden;background:#071d2b;transition:opacity .7s,visibility 0s .7s}.finale.open{visibility:visible;opacity:1;transition:opacity .7s}.finale>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.31) saturate(.72) contrast(1.08);transform:scale(1.04);animation:finale-camera 18s ease-in-out infinite alternate}.finale-shade{position:absolute;inset:0;background:#062b43a8;mix-blend-mode:multiply}.finale-windows{position:absolute;inset:0}.finale-windows i{position:absolute;width:10%;height:24%;background:#ffd979cc;box-shadow:0 0 2.7rem #ffd97988;opacity:0}.finale.open .finale-windows i{animation:finale-light .7s forwards}.finale-windows i:nth-child(1){left:5.5%;top:10%;animation-delay:.3s}.finale-windows i:nth-child(2){left:37.5%;top:10%;animation-delay:.5s}.finale-windows i:nth-child(3){left:60%;top:6.5%;width:14%;height:31%;animation-delay:.7s}.finale-windows i:nth-child(4){left:40.5%;top:46%;animation-delay:.9s}.finale-windows i:nth-child(5){left:65%;top:46%;animation-delay:1.1s}.finale-windows i:nth-child(6){left:86.5%;top:45%;animation-delay:1.3s}.finale-copy{position:absolute;z-index:2;left:8%;top:50%;width:min(49rem,70vw);color:var(--cream);transform:translateY(-50%)}.finale-copy>p{margin:0 0 1rem;font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.12em;color:#ffd979}.finale-copy h1{margin:0;max-width:13ch;font-size:clamp(3.4rem,6.7vw,6rem);line-height:.9;letter-spacing:-.035em}.finale-copy>strong{display:block;max-width:38rem;margin:1.5rem 0;font-size:1.3rem;line-height:1.25}.finale-copy button{margin-right:.6rem;padding:.7rem .9rem;border:2px solid var(--cream);background:transparent;color:var(--cream);font-size:.65rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}.finale-copy button:hover,.finale-copy button:focus-visible{background:var(--cream);color:var(--ink)}

.waking:not(.house-awake) .window{opacity:0;pointer-events:none}.waking .light-one{animation:house-wake-light 1.6s .15s both}.waking .light-two{animation:house-wake-light 1.6s .5s both}.waking .curtain{animation:wake-curtain 1.4s .3s both}.house-awake .window{opacity:1;animation:marker-arrive .55s cubic-bezier(.2,1.5,.4,1) both}.house-awake .window:nth-child(1){animation-delay:0s}.house-awake .window:nth-child(2){animation-delay:.1s}.house-awake .window:nth-child(3){animation-delay:.2s}.house-awake .window:nth-child(4){animation-delay:.3s}.house-awake .window:nth-child(5){animation-delay:.4s}.house-awake .window:nth-child(6){animation-delay:.5s}
.finale-windows i{width:6.5%;height:17%}.finale-windows i:nth-child(1){left:7.25%;top:13.5%}.finale-windows i:nth-child(2){left:39.25%;top:13.5%}.finale-windows i:nth-child(3){left:61%;top:9.5%;width:12%;height:25%}.finale-windows i:nth-child(4){left:42.25%;top:49.5%}.finale-windows i:nth-child(5){left:66.75%;top:49.5%}.finale-windows i:nth-child(6){left:88.25%;top:48.5%}
@keyframes house-wake-light{0%{opacity:0;transform:scale(.8)}45%{opacity:.15}55%{opacity:.65;transform:scale(1.15)}100%{opacity:.35;transform:scale(1)}}
@keyframes wake-curtain{0%{transform:skewX(0)}45%{transform:skewX(5deg) translateX(5px)}100%{transform:skewX(0)}}
@keyframes marker-arrive{from{opacity:0;transform:translate(-50%,-50%) scale(.55)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes finale-light{from{opacity:0;transform:scaleY(.6)}to{opacity:.72;transform:none}}
@keyframes finale-camera{to{transform:scale(1.09) translate3d(.8%,-.4%,0)}}
@keyframes sound-beat{50%{transform:scale(.7);opacity:.65}}
@keyframes prologue-camera{to{transform:scale(1.08) translate3d(.7%,-.4%,0)}}

@media(prefers-reduced-motion:reduce){.facade-camera,.light,.curtain,.facade-title,.facade-help,.facade-intro,.window,.window:after,.ink-leaf,.cloth,.hanging-light,.passing-line,.chapter-image,.chapter-light,.trace-dot,.trace-help,.finale>img,.finale-windows i{animation:none!important}.waking:not(.house-awake) .window{opacity:1;pointer-events:auto}.window-portal.opening{animation:none;clip-path:inset(0 42% 0 0)}.chapter{transition:opacity .2s;clip-path:none}}
.prologue-actions{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;margin-top:1.1rem}.prologue-actions .prologue-start{margin-top:0}.prologue-start-quiet{background:transparent!important;color:#fff!important;border-color:#fff!important}.prologue-start-quiet:hover,.prologue-start-quiet:focus-visible{background:#ffffff1f!important}
@media(max-width:480px){.prologue-actions{align-items:stretch}.prologue-actions .prologue-start{flex:1 1 100%;min-height:2.7rem}}

::selection{background:var(--blue);color:var(--cream)}

.facade-help{right:7.7rem}
.prologue-copy{width:min(41rem,52vw);max-height:calc(100vh - 4rem);padding:1.6rem 1.8rem;overflow:auto}
.prologue-copy h1,.chapter h1,.finale-copy h1{font-family:'Della Respira',serif;font-weight:400;letter-spacing:-.02em}
.prologue-copy h1{max-width:15ch;font-size:clamp(2.45rem,3.9vw,4.15rem);line-height:1.02}
.prologue-copy>strong{margin:1.05rem 0 .5rem;font-size:1.02rem;line-height:1.32}.prologue-copy>span{font-size:.82rem;line-height:1.42}.prologue-start{margin-top:1.1rem}
.chapter h1{font-size:clamp(2.65rem,3.8vw,4.5rem);line-height:1}
.finale-copy h1{max-width:15ch;font-size:clamp(3.1rem,5.8vw,5.5rem);line-height:1}
@media(max-width:760px){.language-picker{right:.65rem;top:.65rem}.facade-help{right:1rem;top:5.35rem}.prologue-copy{max-height:calc(100vh - 2rem);overflow:auto}.prologue-copy h1{font-size:clamp(2.05rem,10vw,2.8rem);line-height:1}.chapter h1{font-size:2.35rem}.finale-copy h1{font-size:2.65rem}}

/* Responsive composition pass: keep the artwork dominant and reserve real space for controls. */
.prologue:after{
  background:linear-gradient(90deg,rgba(10,37,38,.46) 0%,rgba(10,37,38,.12) 43%,transparent 72%);
  mix-blend-mode:multiply;
}
.prologue-copy{
  left:clamp(1.25rem,4vw,4.5rem);
  width:min(31rem,42vw);
  max-height:none;
  padding:1.3rem 1.45rem 1.4rem;
  overflow:visible;
  color:#fff;
  background:rgba(20,67,69,.94);
  border:0;
  border-top:3px solid #fff;
  border-bottom:3px solid #fff;
  box-shadow:0 1rem 3rem rgba(15,25,22,.16);
  transform:translateY(-50%) rotate(-.18deg);
}
.prologue-start{border-color:#fff;background:#fff;color:var(--petrol)}
.prologue-start:hover,.prologue-start:focus-visible{border-color:var(--pink);background:var(--pink);color:var(--ink)}
.prologue-copy>p{margin-bottom:.65rem;font-size:.62rem}
.prologue-copy h1{max-width:13ch;font-size:clamp(2.2rem,3.2vw,3.45rem);line-height:1.01}
.prologue-copy>strong{margin:.85rem 0 .4rem;font-size:.94rem;line-height:1.3}
.prologue-copy>span{font-size:.76rem;line-height:1.42}
.prologue-start{margin-top:.9rem}

.chapter-copy{
  justify-content:flex-start;
  padding:clamp(7.75rem,14vh,9.25rem) clamp(2rem,4vw,5rem) clamp(2rem,4vh,3rem);
  scrollbar-gutter:stable;
}
.chapter-index{
  max-width:42rem;
  margin-bottom:clamp(.75rem,1.8vh,1.25rem);
  font-size:clamp(.61rem,.65vw,.7rem);
  line-height:1.35;
}
.chapter h1{
  max-width:12ch;
  font-size:clamp(2.55rem,3.25vw,4.05rem);
  line-height:.98;
  text-wrap:balance;
}
.chapter-lead{margin:clamp(.9rem,2vh,1.3rem) 0 .85rem;font-size:clamp(.91rem,1vw,1.02rem)}
.chapter li{padding:clamp(.42rem,1vh,.56rem) 0}
.chapter-source{margin-top:.8rem}
.chapter-accuracy{margin-top:.5rem}
.chapter-close,.chapter-next{top:max(1rem,env(safe-area-inset-top));min-height:2.8rem}
.chapter-close{left:max(1rem,env(safe-area-inset-left))}
.chapter-next{
  top:max(4.5rem,calc(env(safe-area-inset-top) + 4.5rem));
  right:max(1rem,env(safe-area-inset-right));
  max-width:min(18rem,34vw);
  white-space:normal;
  line-height:1.2;
  text-align:center;
}

@media(max-height:780px) and (min-width:761px){
  .chapter-copy{padding-top:6.7rem;padding-bottom:1.3rem}
  .chapter-next{top:3.85rem}
  .chapter-index{margin-bottom:.55rem}
  .chapter h1{font-size:clamp(2.2rem,2.8vw,3.3rem)}
  .chapter-lead{margin:.65rem 0;font-size:.9rem;line-height:1.34}
  .chapter li{padding:.35rem 0;font-size:.75rem}
  .chapter-source{margin-top:.55rem}
  .chapter-accuracy{font-size:.58rem}
}

@media(max-width:1020px) and (min-width:761px){
  .chapter{grid-template-columns:52% 48%}
  .chapter-copy{padding-left:2.2rem;padding-right:2.2rem}
  .chapter h1{font-size:clamp(2.4rem,5vw,3.5rem)}
  .prologue-copy{width:min(30rem,52vw)}
}

@media(max-width:760px){
  .prologue:after{background:linear-gradient(0deg,rgba(10,37,38,.56) 0%,rgba(10,37,38,.06) 65%,transparent)}
  .prologue-copy{
    left:1rem;
    bottom:1rem;
    width:calc(100% - 2rem);
    max-height:min(62svh,32rem);
    padding:1rem 1.05rem 1.1rem;
    overflow:auto;
    background:rgba(20,67,69,.95);
    transform:rotate(-.18deg);
  }
  .prologue-copy h1{font-size:clamp(2rem,9.2vw,2.65rem)}
  .prologue-copy>strong{font-size:.9rem}
  .prologue-copy>span{font-size:.76rem}
  .chapter{display:block;overflow-y:auto;overscroll-behavior-y:contain}
  .chapter-room{height:48svh;min-height:20rem}
  .chapter-copy{min-height:52svh;padding:5.4rem 1.2rem 2rem;overflow:visible}
  .chapter-index{margin-bottom:.7rem}
  .chapter h1{font-size:clamp(2.05rem,9.2vw,2.7rem)}
  .chapter-close,.chapter-next{position:absolute;min-height:2.9rem}
  .chapter-close{left:.75rem;top:.75rem;bottom:auto;max-width:42vw}
  .chapter-next{right:.75rem;top:calc(48svh + .8rem);bottom:auto;max-width:58vw}
  .language-picker{top:max(.65rem,env(safe-area-inset-top));right:max(.65rem,env(safe-area-inset-right))}
}

@media(max-width:390px){
  .prologue-copy>span{display:none}
  .chapter-close,.chapter-next{font-size:.57rem;padding:.6rem .65rem}
}

/* The dates are the doors: make the action readable without covering the drawing. */
.window{min-width:5.5rem;min-height:7rem}
.window:before{
  inset:8% 10%;
  border:2px solid rgba(255,255,255,.78);
  background:rgba(255,255,255,.045);
  box-shadow:0 0 0 1px rgba(19,23,21,.28);
}
.window:after{
  width:.82rem;
  height:.82rem;
  border:3px solid #fff;
  box-shadow:0 0 0 2px var(--ink),0 .4rem 1.2rem rgba(19,23,21,.2);
}
.window b,.window span{opacity:1;box-shadow:0 .35rem 1rem rgba(19,23,21,.16)}
.window b{
  top:calc(50% + 1.15rem);
  min-width:3.65rem;
  padding:.34rem .48rem .29rem;
  border:2px solid #fff;
  outline:1px solid var(--ink);
  background:var(--petrol);
  color:#fff;
  font-size:.76rem;
  line-height:1;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.window span{
  top:calc(50% + 3.05rem);
  max-width:9.5rem;
  padding:.3rem .44rem .26rem;
  border:1px solid var(--ink);
  background:#fff;
  color:var(--ink);
  font-size:.49rem;
  line-height:1.15;
  text-align:center;
  white-space:normal;
  opacity:1;
  transform:translateX(-50%);
}
.window:hover:before,.window:focus-visible:before,.window.active:before{border-color:#fff;background:rgba(245,170,157,.18)}
.window:hover b,.window:focus-visible b,.window.active b{background:var(--red)}
.window:focus-visible b{outline:3px solid var(--blue);outline-offset:3px}
.house-awake .window.active b{animation:date-invitation 1.45s 2 ease-out}
.facade-help{max-width:24rem;text-align:center;line-height:1.25;animation:none!important;background:var(--ink);color:#fff}

@keyframes date-invitation{
  0%,100%{transform:translateX(-50%) translateY(0)}
  45%{transform:translateX(-50%) translateY(-.28rem)}
}

@media(max-width:760px){
  .window{min-width:4.6rem;min-height:6.5rem}
  .window b{font-size:.68rem;min-width:3.25rem}
  .window span{top:calc(50% + 2.85rem);max-width:7.5rem;font-size:.43rem}
  .facade-help{left:50%;right:auto;top:5.4rem;width:max-content;max-width:calc(100vw - 2rem);transform:translateX(-50%);white-space:normal}
}

@media(prefers-reduced-motion:reduce){.house-awake .window.active b{animation:none}}

/* One intrinsic 3:2 stage keeps the drawing and every window target locked together. */
.facade-camera{
  inset:0 auto auto 0;
  width:max(118vw,150vh);
  height:calc(max(118vw,150vh) / 1.5);
  transform:none;
}
.hotel-house{object-fit:fill}
.windows{inset:0;width:100%;height:100%;animation:none!important}
.window:before{inset:0}
.window-1600{left:10.7%;top:25%;width:12%;height:29%}
.window-1900{left:46%;top:25%;width:12%;height:29%}
.window-1873{left:67.5%;top:24.5%;width:20%;height:35%}
.window-1938{left:46%;top:59%;width:12%;height:29%}
.window-1955{left:68%;top:59%;width:12%;height:29%}
.window-1991{left:92%;top:58%;width:12%;height:29%}

.facade{overflow:auto;overscroll-behavior:contain;scrollbar-width:none;cursor:grab;touch-action:none}
.facade::-webkit-scrollbar{display:none}
.facade.is-dragging{cursor:grabbing}
.facade.is-dragging .facade-camera{pointer-events:none}

.prologue-languages{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin:0 0 1rem;padding:0 0 .75rem;border-bottom:1px solid rgba(255,255,255,.58)}
.prologue-languages>span{font-size:.55rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.prologue-languages>div{display:flex;gap:.25rem}
.prologue-languages button{min-width:2.35rem;min-height:2.1rem;padding:.35rem .45rem;border:1px solid #fff;background:transparent;color:#fff;font-size:.62rem;font-weight:800;cursor:pointer}
.prologue-languages button:hover,.prologue-languages button:focus-visible{background:var(--pink);color:var(--ink)}
.prologue-languages button[aria-pressed="true"]{background:#fff;color:var(--petrol)}
.prologue-copy>p{margin-top:0}
body:not(.waking)>.language-picker{display:none}

@media(max-width:760px){
  .facade-camera{width:max(185vw,150vh);height:calc(max(185vw,150vh) / 1.5);transform:none}
  .prologue-languages{align-items:flex-start;flex-direction:column;gap:.5rem;margin-bottom:.8rem;padding-bottom:.65rem}
  .prologue-languages>div{width:100%}
  .prologue-languages button{flex:1;min-height:2.35rem}
  .facade{cursor:grab;touch-action:none}
  .windows{pointer-events:none}
  .window{pointer-events:auto;touch-action:manipulation}
}

/* Opening scene: the hand-drawn hotel develops from ink into colour. */
.prologue>img{animation:none}
.prologue-ink{filter:grayscale(1) contrast(1.08) brightness(1.08);transform:scale(1.1)}
.prologue-colour{clip-path:inset(0 100% 0 0);transform:scale(1.1)}
.prologue-reveal{position:absolute;z-index:1;inset:0 auto 0 -18%;width:18%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(247,229,198,.58),rgba(245,170,157,.3),transparent);mix-blend-mode:screen;opacity:0}
.prologue-reveal i{position:absolute;right:12%;width:clamp(3rem,7vw,8rem);height:3px;background:#fff;transform-origin:right center}
.prologue-reveal i:nth-child(1){top:25%;transform:rotate(-7deg)}
.prologue-reveal i:nth-child(2){top:51%;right:3%;width:clamp(5rem,11vw,12rem);transform:rotate(4deg)}
.prologue-reveal i:nth-child(3){top:76%;right:18%;width:clamp(2rem,5vw,6rem);transform:rotate(-3deg)}
.prologue-copy{opacity:1}
@media(prefers-reduced-motion:no-preference){
  .prologue-ink{animation:opening-ink 2.6s cubic-bezier(.16,1,.3,1) both}
  .prologue-colour{animation:opening-colour 2.1s .45s cubic-bezier(.65,0,.2,1) both}
  .prologue-reveal{animation:opening-light 2.1s .45s cubic-bezier(.65,0,.2,1) both}
  .prologue-copy{animation:opening-copy .85s 2.05s cubic-bezier(.16,1,.3,1) both}
}
@keyframes opening-ink{from{transform:scale(1.16);filter:grayscale(1) contrast(1.18) brightness(1.13)}to{transform:scale(1.035);filter:grayscale(1) contrast(1.08) brightness(1.08)}}
@keyframes opening-colour{0%{clip-path:inset(0 100% 0 0);transform:scale(1.06)}100%{clip-path:inset(0);transform:scale(1.035)}}
@keyframes opening-light{0%{left:-18%;opacity:0}12%{opacity:1}84%{opacity:.9}100%{left:100%;opacity:0}}
@keyframes opening-copy{from{opacity:0;transform:translate(-1.5rem,-50%) rotate(-1.2deg)}to{opacity:1;transform:translate(0,-50%) rotate(-.18deg)}}

/* Room text is revealed in layers: orientation first, detail on demand. */
.chapter-copy{justify-content:center;padding-top:clamp(6.8rem,11vh,8rem)}
.chapter-index{margin-bottom:.7rem}
.chapter-hotel{margin:0 0 .55rem;font-family:'Della Respira',serif;font-size:clamp(1.05rem,1.35vw,1.4rem);line-height:1.1;color:var(--petrol)}
.chapter-question{margin-bottom:1rem}
.chapter h1{max-width:11ch}
.chapter-lead{max-width:32rem;margin:1.15rem 0 1.35rem;font-size:clamp(.96rem,1.05vw,1.08rem);line-height:1.5}
.chapter-highlight,.chapter-more{width:100%;max-width:34rem;margin:0;border:0;border-top:1px solid var(--ink);background:transparent}
.chapter-more{border-bottom:1px solid var(--ink)}
.chapter-highlight[hidden]{display:none}
.chapter-highlight summary,.chapter-more summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3rem;padding:.7rem 0;cursor:pointer;list-style:none;font-size:.67rem;font-weight:900;letter-spacing:.075em;text-transform:uppercase}
.chapter-highlight summary::-webkit-details-marker,.chapter-more summary::-webkit-details-marker{display:none}
.chapter-highlight summary strong{color:var(--red);font-size:inherit;letter-spacing:inherit}
.chapter-highlight summary span,.chapter-more summary>span:last-child{font-size:1.1rem;font-weight:400;transition:transform .25s ease}
.chapter-highlight[open] summary span,.chapter-more[open] summary>span:last-child{transform:rotate(45deg)}
.chapter-highlight p{margin:0 0 .55rem;padding:0;font-size:.82rem;line-height:1.48}
.chapter-highlight a{display:inline-block;margin-bottom:.8rem;color:var(--ink);font-size:.65rem;font-weight:900;text-underline-offset:.2rem}
.chapter-more>div{padding:0 0 .95rem}
.chapter ul{margin:0;border-top:0}
.chapter li{padding:.5rem 0;border-bottom:1px solid rgba(19,23,21,.28);font-size:.8rem;line-height:1.4}
.chapter-source{margin-top:.85rem}
.chapter-accuracy{margin-top:.55rem}

@media(max-width:760px){
  .prologue-ink,.prologue-colour{object-position:56% center}
  .prologue-copy{animation-name:opening-copy-mobile!important}
  .chapter-copy{min-height:52svh;padding:5.4rem 1.2rem 2.4rem}
  .chapter-question{margin-bottom:.75rem}
  .chapter-lead{margin:.85rem 0 1.1rem}
}
@keyframes opening-copy-mobile{from{opacity:0;transform:translateY(1.25rem) rotate(-1.2deg)}to{opacity:1;transform:translateY(0) rotate(-.18deg)}}

@media(prefers-reduced-motion:reduce){
  .prologue-ink{filter:grayscale(.35) contrast(1.05);transform:scale(1.035)}
  .prologue-colour{display:none}
  .prologue-reveal{display:none}
  .prologue-copy{opacity:1}
}

/* The six windows read as one clear interactive layer without covering the drawing. */
.house-awake .window:before{
  border:2px solid rgba(255,255,255,.9);
  background:rgba(245,170,157,.08);
  box-shadow:0 0 0 1px rgba(19,23,21,.42),0 .45rem 1.25rem rgba(19,23,21,.08);
}
.house-awake .window:after{
  background:var(--red);
  border-color:#fff;
  box-shadow:0 0 0 2px var(--ink),0 0 0 7px rgba(255,255,255,.72);
}
.house-awake .window:hover:before,.house-awake .window:focus-visible:before{
  border-color:#fff;
  background:rgba(232,57,36,.18);
  box-shadow:0 0 0 2px var(--red),0 .7rem 1.6rem rgba(19,23,21,.16);
}
.house-awake .window:hover:after,.house-awake .window:focus-visible:after{transform:translate(-50%,-50%) scale(1.18)}
.house-awake .window:nth-child(1):before{animation:window-guide 3.8s .15s ease-out 1}
.house-awake .window:nth-child(2):before{animation:window-guide 3.8s .3s ease-out 1}
.house-awake .window:nth-child(3):before{animation:window-guide 3.8s .45s ease-out 1}
.house-awake .window:nth-child(4):before{animation:window-guide 3.8s .6s ease-out 1}
.house-awake .window:nth-child(5):before{animation:window-guide 3.8s .75s ease-out 1}
.house-awake .window:nth-child(6):before{animation:window-guide 3.8s .9s ease-out 1}
@keyframes window-guide{
  0%,100%{background:rgba(245,170,157,.08)}
  18%,42%{background:rgba(255,218,92,.32);box-shadow:0 0 0 3px #fff,0 0 1.8rem rgba(255,218,92,.7)}
}
@media(prefers-reduced-motion:reduce){.house-awake .window:before{animation:none!important}}

/* Overview first: every historical window is visible before the visitor chooses. */
.facade{overflow:hidden;cursor:default;touch-action:auto}
.facade-camera{
  left:0;
  top:40%;
  width:100vw;
  height:66.6667vw;
  transform:translateY(-40%);
  animation:none!important;
}
.facade.is-dragging{cursor:default}
.facade.is-dragging .facade-camera{pointer-events:auto}

/* The opening stays in colour; light and saturation create the reveal. */
.prologue-ink{filter:saturate(.76) brightness(.82) contrast(1.06);transform:scale(1.1)}
@keyframes opening-ink{from{transform:scale(1.14);filter:saturate(.62) brightness(.72) contrast(1.08)}to{transform:scale(1.035);filter:saturate(.82) brightness(.9) contrast(1.04)}}

.window:before{border-color:transparent;background:transparent;box-shadow:none}
.window span{
  opacity:.94;
  pointer-events:none;
  max-width:8.5rem;
  padding:.27rem .4rem .24rem;
  background:rgba(255,255,255,.94);
  box-shadow:0 .25rem .75rem rgba(19,23,21,.13);
}
.window:hover:before,.window:focus-visible:before,.window.active:before{border-color:rgba(255,255,255,.92);background:rgba(245,170,157,.1)}
.window:hover span,.window:focus-visible span{opacity:1}
.window.active span{opacity:.94}
.window b{box-shadow:0 .25rem .7rem rgba(19,23,21,.14)}

.chapter-next{top:max(4.5rem,calc(env(safe-area-inset-top) + 4.5rem));padding:.85rem 1.05rem;border-color:var(--red);background:var(--red);color:#fff;font-size:.72rem;box-shadow:0 .55rem 1.4rem rgba(232,57,36,.24)}
.chapter-next:before{content:'→';display:inline-block;margin-right:.55rem;font-size:1rem;line-height:0;transition:transform .2s ease}
.chapter-next:hover,.chapter-next:focus-visible{background:var(--ink);border-color:var(--ink)}
.chapter-next:hover:before,.chapter-next:focus-visible:before{transform:translateX(.2rem)}

@media(max-width:760px){
  .facade-camera{
    left:0;
    top:44%;
    width:100vw;
    height:66.6667vw;
    transform:translateY(-44%);
  }
  .facade{overflow:hidden;cursor:default;touch-action:auto}
  .window{min-width:3.15rem;min-height:4rem}
  .window b{top:calc(50% + .55rem);min-width:2.8rem;padding:.17rem .2rem;font-size:.51rem}
  .window span{display:none}
  .window:after{width:.62rem;height:.62rem}
  .facade-intro{bottom:.8rem}
  .chapter-next{top:calc(48svh + .8rem);padding:.72rem .78rem;font-size:.6rem}
}

/* Prologue: begin inside one lit window, then reveal the whole hotel. */
.prologue-visual{position:absolute;inset:0;overflow:hidden;transform-origin:70% 36%}
.prologue-visual>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.94) brightness(.94);transform:scale(1.025);transform-origin:52% 48%}
.prologue-life{position:absolute;inset:0;pointer-events:none}
.prologue-life i{position:absolute;width:4.2%;height:8%;background:rgba(255,221,139,.68);mix-blend-mode:screen;filter:blur(4px);opacity:0}
.prologue-life i:nth-child(1){left:8.5%;top:20%}
.prologue-life i:nth-child(2){left:43.7%;top:20%}
.prologue-life i:nth-child(3){left:66%;top:18%;width:8%;height:13%}
.prologue-life i:nth-child(4){left:43.7%;top:57%}
.prologue-life i:nth-child(5){left:66.2%;top:57%}
.prologue-life i:nth-child(6){left:90%;top:56%}
.prologue-reveal,.prologue-colour,.prologue-ink{display:none!important}

@media(prefers-reduced-motion:no-preference){
  .prologue-visual{animation:prologue-pullback 2.9s cubic-bezier(.16,1,.3,1) both}
  .prologue-visual>img{animation:prologue-alive 13s 2.9s ease-in-out infinite alternate}
  .prologue-life i{animation:prologue-window-on .7s cubic-bezier(.16,1,.3,1) forwards,prologue-window-breathe 5.4s 3.2s ease-in-out infinite alternate}
  .prologue-life i:nth-child(1){animation-delay:.55s,3.4s}
  .prologue-life i:nth-child(2){animation-delay:.82s,3.7s}
  .prologue-life i:nth-child(3){animation-delay:1.1s,3.2s}
  .prologue-life i:nth-child(4){animation-delay:1.38s,4s}
  .prologue-life i:nth-child(5){animation-delay:1.66s,3.5s}
  .prologue-life i:nth-child(6){animation-delay:1.94s,4.2s}
  .prologue-copy{animation:opening-copy .8s 2.15s cubic-bezier(.16,1,.3,1) both}
}
@keyframes prologue-pullback{from{transform:scale(1.62) translate3d(-7%,5%,0)}to{transform:scale(1) translate3d(0,0,0)}}
@keyframes prologue-alive{from{transform:scale(1.025) translate3d(-.25%,.1%,0)}to{transform:scale(1.065) translate3d(.35%,-.25%,0)}}
@keyframes prologue-window-on{from{opacity:0;transform:scale(.72)}to{opacity:.46;transform:scale(1)}}
@keyframes prologue-window-breathe{from{opacity:.32}to{opacity:.58}}

@media(max-width:760px) and (prefers-reduced-motion:no-preference){
  .prologue-visual{transform-origin:67% 34%;animation-name:prologue-pullback-mobile}
  .prologue-copy{animation-name:opening-copy-mobile!important}
}
@keyframes prologue-pullback-mobile{from{transform:scale(1.45) translate3d(-5%,3%,0)}to{transform:scale(1) translate3d(0,0,0)}}

@media(prefers-reduced-motion:reduce){
  .prologue-visual{transform:none}
  .prologue-visual>img{filter:saturate(.94) brightness(.94);transform:scale(1.025)}
  .prologue-life i{opacity:.38}
}

/* Responsive collision pass: every control gets its own reserved area. */
.facade-title{
  max-width:calc(100vw - 15rem);
}
.facade-title span{
  min-width:0;
  line-height:1.3;
}
.facade-help{
  top:4.75rem;
  right:1rem;
  max-width:16rem;
}
.facade-intro{
  max-width:calc(100vw - 10rem);
}
.chapter-copy{
  padding-right:clamp(2rem,4vw,5rem);
}
.chapter-copy>*{
  flex:0 0 auto;
}
.chapter-question{
  max-width:100%;
  white-space:normal;
}
.chapter-close,.chapter-next{
  isolation:isolate;
}

@media(max-width:1100px) and (min-width:761px){
  .facade-title{
    left:1rem;
    top:1rem;
    max-width:calc(100vw - 15rem);
    align-items:flex-start;
    flex-direction:column;
    gap:.2rem;
  }
  .facade-help{top:4.9rem}
  .facade-intro{left:1rem;bottom:1rem;width:min(25rem,44vw)}
  .window span{max-width:7.2rem;font-size:.43rem}
  .chapter-copy{padding-top:7.2rem;padding-left:1.7rem;padding-right:1.7rem}
  .chapter h1{font-size:clamp(2.25rem,4.7vw,3.35rem)}
  .chapter-lead{font-size:.92rem}
}

@media(max-width:760px){
  .language-picker{
    min-width:3.7rem;
    min-height:2.75rem;
    justify-content:center;
    padding:.35rem .45rem;
  }
  .language-picker>span{display:none}
  .language-picker select{min-height:2rem}
  .facade-title{
    left:.75rem;
    right:5.25rem;
    top:.75rem;
    max-width:none;
    padding:.5rem .6rem;
  }
  .facade-title strong{font-size:.82rem}
  .facade-title span{font-size:.56rem;line-height:1.25}
  .facade-help{
    left:50%;
    right:auto;
    top:5.15rem;
    width:max-content;
    max-width:calc(100vw - 2rem);
    padding:.55rem .68rem;
    transform:translateX(-50%);
    font-size:.58rem;
  }
  .facade-intro{
    left:.75rem;
    bottom:4.35rem;
    width:calc(100% - 1.5rem);
    max-width:none;
    padding:.65rem .72rem;
  }
  .facade-intro strong{font-size:.86rem}
  .facade-intro p{margin-top:.25rem;font-size:.65rem;line-height:1.3}
  .sound-toggle{right:.75rem;bottom:.75rem;min-height:2.75rem}
  body:has(.chapter.open) .sound-toggle{
    top:max(calc(48svh - 3.55rem),16.75rem);
    bottom:auto;
  }
  .chapter-room{height:48svh;min-height:20rem}
  .chapter-copy{padding:5.75rem 1.1rem max(4.75rem,calc(env(safe-area-inset-bottom) + 3.5rem))}
  .chapter-close{top:max(.75rem,env(safe-area-inset-top));max-width:calc(100vw - 6.25rem)}
  .chapter-next{
    top:max(calc(48svh + .8rem),20.8rem);
    right:.75rem;
    max-width:calc(100vw - 1.5rem);
  }
  .trace-help{max-width:calc(100% - 5.5rem);white-space:normal;line-height:1.25}
  .trace-card{max-height:calc(100% - 1.4rem);overflow:auto}
  .finale-copy{top:47%;max-height:calc(100svh - 8rem);overflow:auto;padding-bottom:1rem}
  .finale-copy>strong{line-height:1.35}
  .finale-copy>div{padding-bottom:4rem}
}

@media(max-width:420px){
  .prologue-copy{bottom:.65rem;max-height:calc(100svh - 1.3rem)}
  .prologue-languages{margin-bottom:.55rem;padding-bottom:.5rem}
  .prologue-copy h1{font-size:clamp(1.85rem,8.8vw,2.35rem)}
  .prologue-copy>strong{font-size:.82rem}
  .facade-title span{display:none}
  .facade-help{top:4.65rem}
  .facade-intro p{font-size:.61rem}
  .chapter h1{font-size:clamp(1.95rem,8.5vw,2.35rem)}
}

@media(max-height:620px) and (orientation:landscape){
  .prologue-copy{top:50%;bottom:auto;max-height:calc(100svh - 1.5rem);overflow:auto}
  .facade-intro{display:none}
  .facade-help{top:auto;right:5.25rem;bottom:.75rem;left:auto;transform:none}
  .chapter{grid-template-columns:48% 52%;display:grid;overflow:hidden}
  .chapter-room{height:100svh;min-height:0}
  .chapter-copy{min-height:0;height:100svh;padding:5.6rem 1.25rem 1rem;overflow:auto}
  .chapter-next{top:3.95rem;right:.75rem;max-width:48vw}
  .chapter-close{top:.75rem;left:.75rem}
  .chapter h1{font-size:clamp(1.85rem,4.6vw,2.6rem)}
  .chapter-lead{font-size:.82rem}
  .trace-help{bottom:.75rem}
}

/* Discovery is the chapter: progress unlocks the conclusion and the next room. */
.trace-help{transition:background .25s,color .25s,transform .35s cubic-bezier(.16,1,.3,1)}
.trace-help.complete{background:var(--red);color:#fff;animation:none;transform:translateY(-.2rem)}
.trace-dot.seen{background:var(--petrol);box-shadow:0 0 0 2px #fff,0 0 0 5px var(--petrol)}
.trace-dot.seen i:after{content:' ✓'}
.chapter-next:disabled{
  border-color:#6f746f;
  background:#6f746f;
  color:#fff;
  cursor:not-allowed;
  box-shadow:none;
  opacity:.68;
}
.chapter-next:disabled:before{transform:none}
.chapter-takeaway{
  max-width:34rem;
  margin:0 0 1rem;
  padding:.75rem .85rem;
  border-top:2px solid var(--red);
  border-bottom:1px solid var(--ink);
  color:var(--ink);
  background:rgba(245,170,157,.2);
  font-size:.82rem;
  font-weight:700;
  line-height:1.4;
  animation:takeaway-in .55s cubic-bezier(.16,1,.3,1) both;
}
.chapter-takeaway[hidden]{display:none}
.source-block{
  display:grid;
  grid-template-columns:1fr auto;
  gap:.22rem 1rem;
  margin-top:.8rem;
  padding:.75rem 0 0;
  border-top:1px solid var(--ink);
}
.source-label{grid-column:1/-1;color:var(--red);font-size:.56rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.chapter-source-name{font-size:.72rem;line-height:1.3}
.source-block .chapter-source{margin:0;font-size:.66rem;text-align:right}
.source-block .chapter-accuracy{grid-column:1/-1;margin:.45rem 0 0;color:#493d34}

/* Each chapter changes its room in a way that belongs to its subject. */
.chapter-room .chapter-image{transition:filter .8s cubic-bezier(.16,1,.3,1),transform 1.2s cubic-bezier(.16,1,.3,1)}
.chapter-room[data-year="1600"].effect-step-1 .chapter-light{opacity:.28;filter:blur(12px)}
.chapter-room[data-year="1600"].effect-step-3 .chapter-image{filter:sepia(.12) brightness(1.04)}
.chapter-room[data-year="1900"].trace-effect-2 .chapter-light{left:66%;top:4%;width:28%;opacity:.38;filter:blur(18px)}
.chapter-room[data-year="1900"].effect-step-3 .chapter-image{filter:brightness(1.08) saturate(1.04)}
.chapter-room[data-year="1873"].effect-step-1 .chapter-image{filter:saturate(1.08) contrast(1.02)}
.chapter-room[data-year="1873"].effect-step-3 .chapter-light{left:58%;top:20%;width:25%;opacity:.27;filter:blur(20px)}
.chapter-room[data-year="1938"].effect-step-1 .chapter-image{filter:saturate(.72)}
.chapter-room[data-year="1938"].effect-step-2 .chapter-image{filter:saturate(.42) contrast(1.05)}
.chapter-room[data-year="1938"].effect-step-3 .chapter-image{filter:saturate(.18) brightness(.84) contrast(1.12)}
.chapter-room[data-year="1955"].effect-step-1 .chapter-image{filter:saturate(1.08)}
.chapter-room[data-year="1955"].effect-step-2 .chapter-image{filter:saturate(1.18) brightness(1.04)}
.chapter-room[data-year="1955"].effect-step-3 .chapter-image{filter:saturate(1.24) contrast(1.03)}
.chapter-room[data-year="1991"].effect-step-1 .chapter-image{filter:saturate(1.08)}
.chapter-room[data-year="1991"].effect-step-2 .chapter-image{filter:saturate(1.16) contrast(1.03)}
.chapter-room[data-year="1991"].effect-step-3 .chapter-image{filter:saturate(1.22) brightness(1.05)}
.window.complete b{background:var(--red)}
.window.complete:after{background:var(--petrol);box-shadow:0 0 0 2px #fff,0 0 0 5px var(--petrol)}

@keyframes takeaway-in{from{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:none}}
@media(max-width:760px){
  .source-block{grid-template-columns:1fr}
  .source-block .chapter-source{text-align:left}
  .chapter-takeaway{font-size:.76rem}
}
@media(prefers-reduced-motion:reduce){
  .chapter-takeaway{animation:none}
  .chapter-room .chapter-image{transition:none}
}