/* The mobile art swap moved into hydrate() in experience.js. It used to live here as
   content:url() overrides, which painted a mobile file over a desktop file the browser
   had already fetched via src -- both landed on the wire. hydrate() now picks the file
   before the request starts. Elements whose ONLY source is content:url (like
   .fedora-waystation below) keep the media-query form, because CSS fetches only the
   declaration that wins the cascade. */
:root{--rfb-home-css:1}/* sentinel: the curtain controller waits on this */
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--rfb-night);color:#fff;font-family:Montserrat,Arial,sans-serif;overflow-x:hidden}h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif}.skip-link{position:fixed;z-index:200;left:8px;top:8px;transform:translateY(-150%);background:#fff;color:#111;padding:12px}.skip-link:focus{transform:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}button,a{font:inherit}.scene{height:100svh;min-height:680px;position:relative;overflow:hidden;background:#05080d}.scene-art{position:absolute;inset:-2%;width:104%;height:104%;object-fit:cover;transition:transform 1.35s var(--rfb-ease-arrive);will-change:transform}.scene:hover .scene-art{transform:scale(1.018)}.scene-vignette{position:absolute;inset:0;box-shadow:inset 0 0 190px var(--rfb-scrim-3);pointer-events:none}.entry-title{position:absolute;left:5.5%;top:7%;text-shadow:0 2px 12px #000}.entry-title p{font-size:var(--rfb-t-micro);letter-spacing:var(--rfb-track-wide);color:var(--rfb-brass)}.entry-title h1{font-size:clamp(60px,7vw,112px);line-height:.82;margin:18px 0;color:var(--rfb-paper)}.hat-hotspot{position:absolute;left:38%;top:51%;width:27%;height:31%;background:none;border:0;color:var(--rfb-brass-lit)}.pulse{position:absolute;inset:15%;border:1px solid #ffdd8599;border-radius:var(--rfb-r-round);animation:pulse 2.4s infinite;box-shadow:0 0 40px #e8332677}.hotspot-label{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);white-space:nowrap;text-transform:uppercase;font-size:var(--rfb-t-micro);letter-spacing:var(--rfb-track-word);text-shadow:0 2px 8px #000}.entry-skip{position:absolute;right:3%;bottom:4%;color:#e6d3ab;font-size:var(--rfb-t-micro);text-decoration:none;border-bottom:1px solid #e6d3ab66;padding:8px}.ember-field{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,#ffcd73 0 1px,transparent 1.5px);background-size:117px 93px;opacity:.15;animation:drift 12s linear infinite}
.crossroads-scene{height:110svh}.crossroads-scene .scene-art{object-position:center}.world-door{position:absolute;z-index:4;border:0;background:transparent;color:#fff;text-decoration:none}.world-door>span{position:absolute;left:50%;bottom:5%;transform:translate(-50%,20px);min-width:220px;padding:11px 18px;background:color-mix(in srgb, var(--rfb-ink) 85%, transparent);border:1px solid color-mix(in srgb, var(--rfb-brass) 60%, transparent);opacity:0;transition:.3s;text-align:center;box-shadow:var(--rfb-drop-1)}.world-door b{display:block;color:#ead39a;font-family:'Cormorant Garamond';font-size:22px}.world-door small{font-size:var(--rfb-t-micro);letter-spacing:var(--rfb-track-body)}.world-door:hover>span,.world-door:focus>span{opacity:1;transform:translate(-50%,0)}.library-door{left:36%;top:25%;width:27%;height:60%;cursor:pointer}.world-door:after{content:"";position:absolute;inset:12%;border-radius:var(--rfb-r-round);box-shadow:0 0 80px #e4352844;opacity:0;transition:.4s}.world-door:hover:after{opacity:1}.magic-thread{position:absolute;inset:0;background:radial-gradient(ellipse at center,#dc362922,transparent 50%);mix-blend-mode:screen;animation:breathe 3s infinite}.hint{position:absolute;left:50%;bottom:2%;transform:translateX(-50%);font:10px Montserrat;letter-spacing:var(--rfb-track-label);color:#ead9b6}
.scarlet-scene{height:110svh}.scarlet-copy{position:absolute;z-index:3;left:4%;top:13%;width:48%;text-shadow:0 2px 12px #000}.scarlet-copy>p{color:#e25954;font-size:var(--rfb-t-micro);letter-spacing:var(--rfb-track-word)}.scarlet-copy h2{font-size:clamp(50px,5vw,82px);line-height:.9;margin:14px 0}.scarlet-copy>span{color:var(--rfb-paper-dim);font:italic 22px 'Cormorant Garamond'}.scarlet-copy>div{display:flex;gap:12px;margin-top:24px}.scarlet-copy a,.scarlet-copy button{padding:12px 17px;border:1px solid var(--rfb-brass);background:color-mix(in srgb, var(--rfb-ink) 87%, transparent);color:var(--rfb-brass-lit);text-decoration:none;font-size:var(--rfb-t-micro);cursor:pointer}.scarlet-copy button{background:#9d1b2d;color:#fff}.clue-hotspot{position:absolute;z-index:4;background:none;border:0;color:#f4d594}.clue-one{left:13%;bottom:11%;width:22%;height:25%}.clue-two{right:8%;top:15%;width:35%;height:35%}.clue-hotspot i{position:absolute;width:14px;height:14px;border:2px solid #f0c873;border-radius:var(--rfb-r-round);box-shadow:var(--rfb-ring-lg);animation:pulse 1.8s infinite}.clue-hotspot span{position:absolute;top:100%;left:50%;transform:translateX(-50%);width:max-content;max-width:min(62vw,260px);white-space:normal;text-wrap:pretty;background:color-mix(in srgb, var(--rfb-night) 87%, transparent);border:1px solid color-mix(in srgb, var(--rfb-brass) 40%, transparent);border-radius:var(--rfb-r-sm);padding:var(--rfb-s2) var(--rfb-s3);opacity:0;transition:opacity var(--rfb-fast) var(--rfb-ease);font:600 var(--rfb-t-micro)/1.35 var(--rfb-ui);color:var(--rfb-paper);pointer-events:none}
/* Right-hand clue: anchor the label inside the frame so it cannot run off
   the edge on a phone. */
.clue-two span{left:auto;right:0;transform:none}
.clue-one span{left:0;transform:none}.clue-hotspot:hover span{opacity:1}.edition-drawer{position:absolute;z-index:8;right:3%;bottom:3%;width:min(520px,44vw);padding:25px;background:linear-gradient(145deg,var(--rfb-wood-deep),var(--rfb-ink));border:5px solid #6c4324;box-shadow:var(--rfb-drop-2);transform:translateY(115%);transition:.55s var(--rfb-ease-arrive)}.edition-drawer.open{transform:none}.edition-drawer>p{font-size:var(--rfb-t-micro);letter-spacing:var(--rfb-track-word);color:var(--rfb-brass)}.edition-drawer h3{font-size:35px;margin:4px 0 15px}.drawer-close{position:absolute;right:8px;top:8px;background:none;border:0;color:#d5bd8f;font-size:24px}.edition-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.edition-row button{background:#dfca9e;color:var(--rfb-wood-deep);border:1px solid #fff5;padding:18px;cursor:pointer}.edition-row button.selected{outline:3px solid var(--rfb-crimson)}.edition-row b,.edition-row span{display:block}.edition-row span{font-size:var(--rfb-t-micro);margin-top:5px}.booksellers{margin-top:16px}.booksellers>p{font:italic 16px 'Cormorant Garamond';color:#e0cb9d}.seller-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.seller-slots span{border:1px dashed #a88a5b;color:#a88a5b;padding:13px 5px;text-align:center;font-size:var(--rfb-t-micro)}.booksellers small{display:block;color:#998a76;font-size:var(--rfb-t-micro);margin-top:10px}
.library-panel{position:fixed;z-index:var(--rfb-z-panel);inset:0;background:radial-gradient(circle at 50% 20%,#503116,var(--rfb-ink) 65%);transform:translateY(105%);transition:.75s var(--rfb-ease-arrive);overflow:auto}.library-panel.open{transform:none}.library-close{position:fixed;right:25px;top:calc(var(--rfb-head-h) + 12px);background:var(--rfb-ink);color:#ecd9ac;border:1px solid #ecd9ac;width:44px;height:44px;border-radius:var(--rfb-r-round);font-size:25px;z-index:95}.library-room{min-height:100svh;padding:85px 5vw 55px;background:linear-gradient(90deg,var(--rfb-scrim-1),transparent,var(--rfb-scrim-1)),repeating-linear-gradient(90deg,transparent 0 24%,#0005 24.5% 25%)}.library-room header{text-align:center}.library-room header p{font-size:var(--rfb-t-micro);letter-spacing:var(--rfb-track-word);color:var(--rfb-brass)}.library-room h2{font-size:60px;line-height:.85;margin:10px}.library-books{display:grid;grid-template-columns:repeat(4,1fr);gap:4vw;max-width:1300px;margin:50px auto}.library-books a{text-decoration:none;color:#fff;text-align:center;perspective:700px}.library-books img{width:100%;height:390px;object-fit:cover;border:7px solid #e5d4af;box-shadow:-10px 10px #532817,0 30px 40px #000;transition:.55s}.library-books a:hover img{transform:translateY(-20px) rotateY(-9deg)}.library-books span,.library-books b{display:block}.library-books span{margin-top:25px;color:#bba98b;font-size:var(--rfb-t-micro)}.library-books b{font:24px 'Cormorant Garamond';color:#fff}.shelf-note{text-align:center;color:#a68e69;font:italic 18px 'Cormorant Garamond'}
.teachers{min-height:760px;padding:110px 10vw;background:radial-gradient(circle at 25%,#426f55,#183326 70%);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:10vw}.teachers>div>p:first-child{font-size:var(--rfb-t-micro);letter-spacing:var(--rfb-track-word);color:var(--rfb-brass)}.teachers h2{font-size:70px;margin:12px 0}.teachers>div>p{line-height:1.8;color:#dbe7df}.teachers button{background:#e8d3a4;color:#263d31;border:0;padding:15px 22px;font-weight:700}.satchel{height:480px;position:relative}.bag{position:absolute;left:10%;right:5%;top:130px;height:310px;border-radius:30px 30px 60px 60px;background:linear-gradient(145deg,#a85b29,#4f2812);box-shadow:20px 25px #11291e,0 40px 80px #0b2016}.bag:after{content:"";position:absolute;left:8%;right:8%;top:40px;height:90px;border-bottom:3px solid #d5a061;border-radius:0 0 50% 50%}.bag i{position:absolute;bottom:65px;left:43%;border:2px solid #d5a061;border-radius:var(--rfb-r-round);padding:15px;font:20px Georgia}.handle{position:absolute;left:31%;top:25px;width:220px;height:170px;border:25px solid var(--rfb-wood);border-bottom:0;border-radius:110px 110px 0 0}.sheet{position:absolute;top:80px;width:140px;padding:15px;background:var(--rfb-paper);color:var(--rfb-moss);text-align:center;font-size:var(--rfb-t-micro);box-shadow:0 12px 25px #0a2016;transition:.4s}.s1{left:12%;transform:rotate(-9deg)}.s2{left:40%;transform:rotate(4deg)}.s3{right:4%;transform:rotate(12deg)}.satchel:hover .sheet{top:30px}.finale{min-height:620px;padding:120px 20px;text-align:center;background:radial-gradient(circle,var(--rfb-slate-blue),var(--rfb-night) 70%)}.finale p{color:var(--rfb-brass);font-size:var(--rfb-t-micro);letter-spacing:var(--rfb-track-word)}.finale h2{font-size:75px;line-height:.9}.finale a{display:inline-block;margin:20px 8px;padding:13px 18px;border:1px solid #d1af6f;color:#ead7ad;text-decoration:none;font-size:var(--rfb-t-micro)}.mini-fedora{display:block;width:80px;height:30px;border-radius:var(--rfb-r-round);background:var(--rfb-crimson);margin:0 auto 50px;box-shadow:0 0 30px #e42d4155}.mini-fedora:after{content:"";display:block;width:120px;height:17px;border-radius:var(--rfb-r-round);background:#891225;transform:translate(-20px,20px)}
dialog{width:min(720px,90vw);border:1px solid #b9985c;background:#17100b;color:#ead9b5;padding:45px;box-shadow:var(--rfb-drop-3)}dialog::backdrop{background:#020405dd;backdrop-filter:blur(5px)}dialog>p{font-size:var(--rfb-t-micro);letter-spacing:var(--rfb-track-word);color:var(--rfb-brass)}dialog h2{font-size:44px;margin:10px 0}.dialog-x{position:absolute;right:15px;top:12px;background:none;border:0;color:#e7d3a7;font-size:28px}.dialog-return{background:#9d1b2d;color:#fff;border:0;padding:12px 17px;margin-top:20px}.activities{display:grid;grid-template-columns:1fr 1fr;gap:12px}.activities article{border:1px solid #806a45;padding:18px}.activities b{font-size:28px}.activities h3{font-size:22px;margin:9px 0}.activities span{font-size:var(--rfb-t-micro);color:#ad9b7d}.toast{position:fixed;z-index:150;bottom:25px;left:50%;transform:translate(-50%,30px);background:var(--rfb-paper);color:#25170e;padding:13px 22px;opacity:0;transition:.3s}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes pulse{50%{transform:scale(1.12);opacity:.4}}@keyframes drift{50%{transform:translate(20px,-12px)}}@keyframes breathe{50%{opacity:.45}}
@media(max-width:900px){.scene{height:82svh;min-height:600px}.scene-art{inset:0;width:100%;height:100%}.entry-scene .scene-art{object-position:center}.entry-title{top:13%;left:5%}.entry-title h1{font-size:62px}.hat-hotspot{left:35%;top:48%;width:35%;height:32%}.crossroads-scene{height:75vw;min-height:570px}.scarlet-scene{height:75vw;min-height:620px}.scarlet-copy h2{font-size:50px}.edition-drawer{width:70vw;max-width:500px}.library-books{grid-template-columns:1fr 1fr}.teachers{grid-template-columns:1fr}.satchel{height:400px}.teachers{padding-top:80px}.finale h2{font-size:56px}}
@media(max-width:600px){.scene{height:100svh}.scene-art{width:auto;min-width:100%;left:50%;transform:translateX(-50%);object-position:center}.scene:hover .scene-art{transform:translateX(-50%) scale(1.01)}.entry-scene .scene-art{object-position:55%}.entry-title{top:16%}.entry-title h1{font-size:48px}.hat-hotspot{left:20%;top:52%;width:63%}.crossroads-scene{height:150vw}.crossroads-scene .scene-art{object-position:center}.library-door{left:35%;width:30%}.world-door>span{display:none}.hint{width:90%;text-align:center}.scarlet-scene{height:120vw;min-height:700px}.scarlet-scene .scene-art{object-position:center}.scarlet-copy{left:5%;top:12%;width:80%}.scarlet-copy h2{font-size:40px}.scarlet-copy>span{font-size:16px}.scarlet-copy>div{flex-wrap:wrap}.clue-one{left:5%;bottom:7%}.edition-drawer{position:fixed;width:94vw;right:3vw;bottom:2svh}.library-room{padding:80px 22px}.library-room h2{font-size:45px}.library-books{gap:35px 18px}.library-books img{height:260px}.teachers{padding:80px 24px}.teachers h2{font-size:50px}.handle{left:23%}.activities{grid-template-columns:1fr}.finale h2{font-size:45px}}
.entry-title{position:absolute;width:1px;height:1px;left:0;top:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.entry-title h1{margin:0;font-size:1px}
.scarlet-copy{top:40%}.scarlet-copy>p,.scarlet-copy>h2,.scarlet-copy>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.clue-hotspot i{width:10px;height:10px;box-shadow:var(--rfb-ring)}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none;transition:none;scroll-behavior:auto}}body.calm *,body.calm *:before,body.calm *:after{animation:none;transition:none}

/* Single-stage experience: scenes move through one cinematic viewport. */
html,body{width:100%;height:100%;overflow:hidden}main{position:fixed;inset:0;overflow:hidden;background:#05080d}.experience-stage{opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(12%,0,0) scale(1.08);filter:blur(8px);transition:transform 1s var(--rfb-ease-arrive),opacity .75s ease,filter 1s ease,visibility 0s 1s}
/* Geometry only, raised so the per-stage art-direction rules below
   cannot move a stage off its frame. Was !important. */
body.experience-home .experience-stage{position:absolute;inset:0;width:100%;height:100%;min-height:0}.experience-stage.stage-active{opacity:1;visibility:visible;pointer-events:auto;transform:none;filter:none;transition-delay:0s}.experience-stage.stage-enter-left{transform:translate3d(-12%,0,0) scale(1.08)}.experience-stage.stage-enter-right{transform:translate3d(12%,0,0) scale(1.08)}.experience-stage.stage-leave-left{transform:translate3d(-10%,0,0) scale(.94);opacity:0}.experience-stage.stage-leave-right{transform:translate3d(10%,0,0) scale(.94);opacity:0}.crossroads-scene,.scarlet-scene{height:100%}.teachers,.finale{overflow:hidden}.teachers{padding-top:95px}.finale{display:grid;place-content:center}.journey-rail{position:fixed;z-index:78;left:50%;bottom:18px;transform:translateX(-50%);display:grid;grid-template-columns:34px auto 110px auto 34px;gap:10px;align-items:center;background:#080b0ed9;border:1px solid color-mix(in srgb, var(--rfb-brass) 38%, transparent);padding:7px 10px;color:#d9c49a;backdrop-filter:blur(10px);box-shadow:0 12px 30px var(--rfb-scrim-1)}.journey-rail button{width:var(--rfb-tap);height:var(--rfb-tap);background:none;border:0;color:#e8cc91;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.journey-rail>span{font-size:var(--rfb-t-micro);letter-spacing:var(--rfb-track-label);white-space:nowrap}.journey-rail>i{display:block;width:110px;height:1px;background:#8d7650}.journey-rail>i>b{display:block;width:20%;height:2px;background:#d83239;transition:width .75s}.fly{position:fixed;z-index:var(--rfb-z-modal);left:50%;top:60%;width:4px;height:4px;border-radius:var(--rfb-r-round);background:#ffd47c;pointer-events:none;animation:fly 1s ease-out forwards}@keyframes fly{to{transform:translate(var(--x),var(--y)) scale(0);opacity:0}}body.library-open .journey-rail{opacity:0;pointer-events:none}
@media(max-width:600px){.journey-rail{bottom:8px;grid-template-columns:30px auto 62px 30px}.journey-rail .journey-count{display:none}.journey-rail>i{width:62px}.experience-stage{height:100svh}.teachers{overflow:auto}.finale{padding:70px 20px}.entry-skip{bottom:10%}}

/* Living entrance layers */
.living-room{position:absolute;inset:0;overflow:hidden}.living-room>.plate,.portal-life,.foreground-life{position:absolute;inset:-2%;width:104%;height:104%;object-fit:cover;will-change:transform,filter}.living-room>.plate{animation:roomBreath 9s ease-in-out infinite}.portal-life{pointer-events:none}.scarlet-life{clip-path:polygon(10% 15%,57% 14%,57% 66%,4% 68%);animation:scarletDepth 6s ease-in-out infinite;filter:brightness(1.04)}.gus-life{clip-path:polygon(58% 0,98% 0,98% 66%,56% 66%);animation:gusDepth 11s ease-in-out infinite;filter:saturate(1.08)}.foreground-life{clip-path:polygon(0 64%,100% 56%,100% 100%,0 100%);animation:foregroundDepth 8s ease-in-out infinite}.magic-layer{position:absolute;left:8%;top:22%;width:84%;height:67%;object-fit:contain;pointer-events:none;mix-blend-mode:screen;transform-origin:50% 70%;filter:saturate(1.2) drop-shadow(0 0 14px #ff512c);will-change:transform,filter,opacity}.magic-a{animation:magicFlowA 3.8s ease-in-out infinite}.magic-b{opacity:.36;animation:magicFlowB 5.2s ease-in-out infinite reverse}.hat-hotspot{left:37%;top:51%;width:28%;height:34%;z-index:7;perspective:900px;transition:filter .3s}.fedora-layer{position:absolute;inset:-8%;width:116%;height:116%;object-fit:contain;filter:drop-shadow(0 22px 20px var(--rfb-scrim-3)) drop-shadow(0 0 15px var(--rfb-ember));animation:fedoraAlive 3.4s ease-in-out infinite;transform-origin:50% 70%;will-change:transform,filter}.hat-shadow{position:absolute;left:18%;right:18%;bottom:8%;height:15%;border-radius:var(--rfb-r-round);background:var(--rfb-scrim-3);filter:blur(15px);animation:shadowAlive 3.4s ease-in-out infinite}.hat-hotspot:hover .fedora-layer{animation-play-state:paused;transform:translateY(-8%) rotate(-3deg) scale(1.05);filter:drop-shadow(0 35px 24px var(--rfb-scrim-4)) drop-shadow(0 0 30px var(--rfb-ember-lit))}.lantern-flame{position:absolute;z-index:5;left:7.7%;bottom:17.5%;width:16px;height:42px;border-radius:var(--rfb-r-round) 50% 45% 45%;background:radial-gradient(ellipse at 50% 70%,#fff 0 12%,var(--rfb-focus) 28%,#f06b22 57%,transparent 72%);filter:blur(.3px) drop-shadow(0 0 11px #ffb13b) drop-shadow(0 0 28px #e56b21);transform-origin:50% 100%;animation:flameFlicker .16s ease-in-out infinite alternate}.brim-transition{position:absolute;z-index:70;inset:-20%;border:0 solid #07080a;border-radius:var(--rfb-r-round);pointer-events:none;opacity:0}.hat-wearing .fedora-layer{animation:wearFedora 1.35s var(--rfb-ease-depart) forwards}.hat-wearing .hat-shadow{animation:shadowGone .55s forwards}.hat-wearing .magic-layer{animation:magicSurge 1.35s ease-in forwards}.hat-wearing .brim-transition{animation:brimClose 1.35s .3s ease-in forwards}.hat-wearing .entry-skip, .hat-wearing .hotspot-label, .hat-wearing .journey-rail{opacity:0}
@keyframes roomBreath{50%{transform:scale(1.018)}}@keyframes scarletDepth{50%{transform:translate(-7px,2px) scale(1.014);filter:brightness(1.13)}}@keyframes gusDepth{50%{transform:translate(9px,-4px) scale(1.018);filter:saturate(1.12) brightness(1.05)}}@keyframes foregroundDepth{50%{transform:translateY(5px) scale(1.012)}}@keyframes magicFlowA{0%,100%{transform:skewX(-1deg) scale(.98);opacity:.72;filter:saturate(1.1) brightness(.9) drop-shadow(0 0 9px #ff512c)}50%{transform:skewX(2deg) scale(1.035,1.07);opacity:1;filter:saturate(1.45) brightness(1.25) drop-shadow(0 0 24px #ffb43d)}}@keyframes magicFlowB{0%,100%{transform:translate(-12px,3px) scale(1.02);opacity:.22}50%{transform:translate(15px,-8px) scale(1.08,1.03);opacity:.52}}@keyframes fedoraAlive{0%,100%{transform:translateY(0) rotate(0) rotateX(0)}35%{transform:translateY(-8px) rotate(-1deg) rotateX(1deg)}65%{transform:translateY(-15px) rotate(1.5deg) rotateX(-2deg)}}@keyframes shadowAlive{0%,100%{transform:scale(1);opacity:.72}65%{transform:scale(.78);opacity:.4}}@keyframes flameFlicker{from{transform:skewX(-5deg) scale(.9,1.04);opacity:.8}to{transform:skewX(6deg) scale(1.12,.88);opacity:1}}@keyframes wearFedora{0%{transform:translateY(0) rotate(0) scale(1)}35%{transform:translateY(-48%) rotate(-7deg) scale(1.12)}62%{transform:translateY(-78%) rotate(4deg) rotateX(-10deg) scale(1.32)}100%{transform:translateY(-85%) rotateX(52deg) scale(5.8);filter:drop-shadow(0 60px 55px #000)}}@keyframes shadowGone{to{opacity:0;transform:scale(.2)}}@keyframes magicSurge{to{transform:scale(1.4,1.6);opacity:0;filter:brightness(2) blur(5px)}}@keyframes brimClose{0%{opacity:0;border-width:0}60%{opacity:.6;border-width:16svh}100%{opacity:1;border-width:75svh;background:#050608}}
@media(max-width:600px){.magic-layer{left:-12%;top:27%;width:124%;height:56%}.hat-hotspot{left:27%;top:55%;width:50%;height:27%}.lantern-flame{left:2%;bottom:18%}}

/* Chrome-verified alignment and fixed portal apertures. */
.hat-hotspot .pulse{display:none}.lantern-flame{left:6.45%;top:76.8%;bottom:auto;width:13px;height:36px}.scarlet-life{clip-path:ellipse(17.5% 25.5% at 35.5% 38.5%);transform:none;animation:scarletPortalOnly 7s ease-in-out infinite}.gus-life{clip-path:ellipse(15.2% 25.5% at 74.2% 37.5%);transform:none;animation:gusPortalOnly 10s ease-in-out infinite}.portal-life{inset:-2%;width:104%;height:104%;transform:none}.foreground-life{clip-path:polygon(0 67%,100% 60%,100% 100%,0 100%)}
@keyframes scarletPortalOnly{0%,100%{object-position:50% 50%;filter:brightness(1.02)}50%{object-position:49.35% 50.15%;filter:brightness(1.11)}}@keyframes gusPortalOnly{0%,100%{object-position:50% 50%;filter:saturate(1.06) brightness(1)}50%{object-position:50.7% 49.6%;filter:saturate(1.12) brightness(1.05)}}
@media(max-width:600px){.lantern-flame{left:6.2%;top:77.5%}.scarlet-life{clip-path:ellipse(22% 24% at 34% 39%)}.gus-life{clip-path:ellipse(20% 24% at 76% 38%)}}

.scarlet-life{clip-path:none;-webkit-mask-image:radial-gradient(ellipse 18% 26% at 35.5% 38.5%,#000 0 72%,transparent 96%);mask-image:radial-gradient(ellipse 18% 26% at 35.5% 38.5%,#000 0 72%,transparent 96%)}.gus-life{clip-path:none;-webkit-mask-image:radial-gradient(ellipse 15.5% 26% at 74.2% 37.5%,#000 0 68%,transparent 95%);mask-image:radial-gradient(ellipse 15.5% 26% at 74.2% 37.5%,#000 0 68%,transparent 95%)}
@media(max-width:600px){.scarlet-life{-webkit-mask-image:radial-gradient(ellipse 22% 24% at 34% 39%,#000 0 68%,transparent 95%);mask-image:radial-gradient(ellipse 22% 24% at 34% 39%,#000 0 68%,transparent 95%)}.gus-life{-webkit-mask-image:radial-gradient(ellipse 20% 24% at 76% 38%,#000 0 65%,transparent 94%);mask-image:radial-gradient(ellipse 20% 24% at 76% 38%,#000 0 65%,transparent 94%)}}

/* The room and its portal frames are a fixed physical set. Only the view through
   each aperture moves; hover and cursor parallax must never separate the layers. */
.entry-scene .scene-art,.entry-scene:hover .scene-art,.living-room>.plate{animation:none;transform:none;translate:none;transition:none}
.entry-scene .living-room{transform:none}
.entry-scene .portal-life{transition:none}

/* Live screen typography replaces the lettering removed from the artwork. */
.entry-title{position:absolute;z-index:12;left:clamp(34px,5.5vw,104px);top:clamp(92px,9svh,132px);width:min(610px,46vw);height:auto;overflow:visible;clip:auto;white-space:normal;pointer-events:none;filter:drop-shadow(0 8px 22px var(--rfb-scrim-4))}
.entry-title p{margin:0 0 16px;font-size:clamp(12px,.72vw,12px);font-weight:700;letter-spacing:var(--rfb-track-wide);color:var(--rfb-brass);text-shadow:0 2px 8px #000}
.entry-title h1{margin:0;font-family:'Limelight','Arial Black',sans-serif;font-weight:400;font-size:clamp(48px,4.35vw,78px);line-height:.91;letter-spacing:var(--rfb-track-display);text-transform:uppercase;color:#f4e8cb;-webkit-text-stroke:.45px #fff7dc;text-shadow:3px 3px 0 #211914,6px 6px 0 var(--rfb-crimson-deep),0 15px 26px #000;white-space:normal}
.entry-title h1 em{font:inherit;color:inherit;text-decoration:none}
.entry-instruction{display:inline-flex;align-items:center;gap:14px;margin-top:26px;padding-top:13px;border-top:1px solid color-mix(in srgb, var(--rfb-brass) 66%, transparent);color:var(--rfb-brass-lit);font:600 clamp(13px,1.15vw,20px) 'Cormorant Garamond',Georgia,serif;letter-spacing:var(--rfb-track-body);text-transform:uppercase;text-shadow:0 2px 10px #000}
.entry-instruction i{font-style:normal;color:#e64b3e;animation:instructionNudge 1.8s ease-in-out infinite}
@keyframes instructionNudge{50%{transform:translate(5px,5px)}}
@media(max-width:600px){.entry-title{left:24px;top:94px;width:76vw}.entry-title h1{font-size:48px}.entry-instruction{margin-top:18px;font-size:12px}.hotspot-label{display:none}}

/* Storybook polish pass */
.entry-title:before{content:"";position:absolute;left:-18px;top:-17px;width:52px;height:52px;border-left:1px solid #dbbb70;border-top:1px solid #dbbb70;border-radius:var(--rfb-r-lg) 0 0 0;opacity:.7}
.entry-title:after{content:"CASE FILE  /  FIELD NOTES";display:block;margin-top:21px;color:#a99269;font:700 var(--rfb-t-micro) Montserrat,sans-serif;letter-spacing:var(--rfb-track-wide);text-shadow:0 2px 8px #000;animation:flourishWake 5.5s ease-in-out infinite}
.entry-title p{display:inline-flex;align-items:center;padding:8px 13px 7px;border:1px solid #c6a65f66;border-radius:2px;background:linear-gradient(145deg,#3d2917d9,color-mix(in srgb, var(--rfb-ink) 85%, transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--rfb-paper-warm) 5%, transparent),0 7px 20px var(--rfb-scrim-2);text-shadow:0 1px #000;transform:rotate(-.35deg)}
.entry-title h1:first-letter{color:inherit}
.entry-instruction{opacity:0;animation:invitationArrives 1s 1.35s var(--rfb-ease-arrive) forwards}
@keyframes invitationArrives{from{opacity:0;transform:translateY(12px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes flourishWake{50%{opacity:.58;letter-spacing:var(--rfb-track-wide);color:#c6ae7c}}

/* One restrained rhythm: still room, living light, then invitation. */
.lantern-flame{animation-duration:.22s}.magic-a{animation-duration:5.4s}.magic-b{animation-duration:7.8s}.scarlet-life{animation-duration:12s}.gus-life{animation-duration:15s}.ember-field{animation-duration:22s}

/* Human pickup: lift by the crown, level the brim, bring it overhead, then lower it onto the viewer. */
.hat-hotspot{transform-style:preserve-3d}.fedora-layer{backface-visibility:visible;transform-style:preserve-3d}
.hat-hotspot:after{content:"";position:absolute;z-index:8;left:1%;right:1%;top:34%;height:35%;border-radius:var(--rfb-r-round);background:radial-gradient(ellipse,#190809 0 35%,#080506 64%,transparent 67%);opacity:0;transform:scale(.25) rotateX(78deg);pointer-events:none}
.hat-wearing .hat-hotspot{z-index:71;animation:hatCarrier 2.4s var(--rfb-ease-arrive) forwards}
.hat-wearing .fedora-layer{animation:wearFedoraHuman 2.4s var(--rfb-ease-arrive) forwards}
.hat-wearing .hat-hotspot:after{animation:undersideArrives 2.4s var(--rfb-ease-arrive) forwards}
.hat-wearing .entry-title{animation:titleYields .55s ease forwards}.hat-wearing .journey-rail, .hat-wearing .entry-skip{transition:opacity .3s;opacity:0}
.hat-wearing .brim-transition{animation:brimCloseHuman .75s 1.8s var(--rfb-ease-depart) forwards}
@keyframes wearFedoraHuman{0%{transform:translate3d(0,0,0) rotateZ(0) rotateX(0) scale(1)}12%{transform:translate3d(0,-7%,0) rotateZ(-.7deg) rotateX(0) scale(1.015)}28%{transform:translate3d(0,-23%,0) rotateZ(-1.2deg) rotateX(4deg) scale(1.08)}46%{transform:translate3d(0,-45%,0) rotateZ(-.5deg) rotateX(12deg) scale(1.22)}64%{transform:translate3d(0,-72%,0) rotateZ(.3deg) rotateX(27deg) scale(1.5)}79%{transform:translate3d(0,-111%,0) rotateZ(0) rotateX(48deg) scale(2.05)}90%{transform:translate3d(0,-137%,0) rotateX(65deg) scale(3.05)}100%{transform:translate3d(0,-108%,0) rotateX(76deg) scale(4.65);filter:drop-shadow(0 60px 52px #000)}}
@keyframes hatCarrier{0%,100%{transform:translateX(0)}}
@keyframes undersideArrives{0%,46%{opacity:0;transform:scale(.3) rotateX(72deg)}64%{opacity:.2;transform:scale(.72) rotateX(66deg)}82%{opacity:.52;transform:scale(1.5) rotateX(62deg)}100%{opacity:.94;transform:scale(4.8) rotateX(60deg)}}
@keyframes titleYields{to{opacity:0;transform:translateY(-12px);filter:blur(3px)}}
@keyframes brimCloseHuman{0%{opacity:0;border-width:0;background:transparent}48%{opacity:.65;border-width:19svh;background:#08050655}100%{opacity:1;border-width:78svh;background:#050608}}
@media(max-width:900px){.entry-title:after{display:none}}

/* An active scene is always the settled scene. This prevents a stale exit class
   from leaving the doorway shifted and clipped after bottom-arrow navigation. */
.experience-stage.stage-active{transform:translate3d(0,0,0) scale(1);opacity:1;filter:none}
.plaque-screw{display:block;position:relative;z-index:2;width:11px;height:11px;border-radius:var(--rfb-r-round);background:radial-gradient(circle at 32% 28%,var(--rfb-paper-warm),#9a6a2b 45%,#42270e 78%);box-shadow:0 1px 2px #2a1609}
.plaque-screw:after{content:"";position:absolute;left:2px;right:2px;top:5px;height:1px;background:var(--rfb-wood-deep);transform:rotate(-12deg)}
@media(max-width:900px){}
@media(max-width:600px){}

/* Final plaque proportions: a small antique fixture{grid-template-columns:7px 34px auto 7px;gap:6px;width:174px;height:46px;padding:4px 9px;border-color:#b8914f;border-radius:var(--rfb-r-md) 19px 19px 6px;background:linear-gradient(105deg,#4b3117 0%,#9b773d 18%,#c4a365 43%,var(--rfb-wood-lit) 72%,var(--rfb-wood-deep) 100%);box-shadow:inset 0 0 0 2px #4b3016,inset 0 0 0 3px #c6a666,inset 0 4px 7px color-mix(in srgb, var(--rfb-paper-warm) 13%, transparent),inset 0 -6px 8px #28170d66,0 3px 0 var(--rfb-ink),0 7px 15px var(--rfb-scrim-3)}
.plaque-screw{width:7px;height:7px}.plaque-screw:after{left:1px;right:1px;top:3px}
@media(max-width:900px){}
@media(max-width:600px){}

/* Traditional brass label-holder silhouette: symmetric capsule ends with the
   fixing screws seated in the rounded terminals{grid-template-columns:34px auto;gap:7px;width:184px;height:43px;padding:4px 25px 4px 23px;border-radius:var(--rfb-r-pill);background:linear-gradient(180deg,#e0c47f 0%,#af8747 17%,#80602f 54%,#c49e5e 82%,#6a4922 100%);box-shadow:inset 0 1px var(--rfb-paper-warm),inset 0 -2px 3px color-mix(in srgb, var(--rfb-wood-deep) 60%, transparent),0 2px 0 #27170b,0 6px 13px var(--rfb-scrim-2)}
@media(max-width:900px){}
@media(max-width:600px){}

/* Physical drawer-label plate: a long{grid-template-columns:27px auto;gap:8px;width:206px;height:38px;padding:3px 25px;border:1px solid #74501f;border-radius:19px;background:linear-gradient(180deg,#d8bb72 0%,#b48a45 36%,#c9a65e 68%,#8a632d 100%);box-shadow:inset 0 1px var(--rfb-brass-lit),inset 0 -2px 2px #57371699,0 2px 0 #2b190c,0 5px 11px var(--rfb-scrim-1)}
@media(max-width:900px){}
@media(max-width:600px){}

/* A single 16:9 artwork coordinate plane covers the viewport. Every visual
   tied to the painting—including the flame—therefore shares identical crop
   and scale math at every reasonable screen aspect ratio. */
.artwork-plane{position:absolute;left:50%;top:50%;width:max(100vw,177.7778svh);height:max(100svh,56.25vw);transform:translate(-50%,-50%);overflow:hidden}
.artwork-plane>.plate,.artwork-plane>.portal-life{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;transform:none}
.artwork-plane>.magic-layer{position:absolute}
.artwork-plane>.lantern-flame{left:7.5%;top:78.7%;bottom:auto;width:1.08%;height:6.1%;min-width:10px;min-height:34px;border-radius:52% 48% 44% 46%;background:radial-gradient(ellipse at 50% 73%,#fffbe3 0 10%,#ffe08a 22%,#ff9f32 43%,var(--rfb-ember) 61%,transparent 74%);filter:drop-shadow(0 0 7px var(--rfb-focus)) drop-shadow(0 0 18px #f07922);transform-origin:50% 100%;animation:anchoredFlameFlicker .22s ease-in-out infinite alternate}
@keyframes anchoredFlameFlicker{from{transform:translate(-50%,-100%) skewX(-4deg) scale(.94,1.04);opacity:.84}to{transform:translate(-50%,-100%) skewX(5deg) scale(1.08,.92);opacity:1}}

/* The hat feeds the portals. The painted ribbon stays spatially still while
   bright current travels from beneath the brim out through both arms. */
.artwork-plane>.magic-layer{animation:none;transform:none;filter:saturate(1.12) drop-shadow(0 0 11px var(--rfb-ember))}
.artwork-plane>.magic-a{opacity:.72}
.artwork-plane>.magic-b{opacity:.18;animation:magicCurrentGlow 2.8s ease-in-out infinite}
.magic-flow{position:absolute;z-index:4;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;mix-blend-mode:screen}
.flow-strand{fill:none;stroke:var(--rfb-focus);stroke-width:5;stroke-linecap:round;stroke-dasharray:3 32 18 48;stroke-dashoffset:0;opacity:.9;animation:magicTravels 1.8s linear infinite}
.flow-left-b,.flow-right-b{stroke:#ff7b36;stroke-width:3;stroke-dasharray:2 42 10 58;animation-duration:2.4s;animation-delay:-.75s;opacity:.78}
.flow-right-a{animation-delay:-.3s}.flow-left-b{animation-delay:-1.35s}.flow-right-b{animation-delay:-1.8s}
@keyframes magicTravels{to{stroke-dashoffset:-101}}
@keyframes magicCurrentGlow{0%,100%{filter:saturate(1.05) brightness(.82) drop-shadow(0 0 8px var(--rfb-ember));opacity:.12}50%{filter:saturate(1.28) brightness(1.18) drop-shadow(0 0 16px #ff9f3d);opacity:.24}}
body.reduced-motion .flow-strand{animation:none}body.reduced-motion .artwork-plane>.magic-b{animation:none}

/* Organic current: distort light already inside the painted flames instead of
   drawing dotted tracks over them. */
.magic-flow{display:none}
.artwork-plane>.magic-a{opacity:.78;filter:saturate(1.12) brightness(.96) drop-shadow(0 0 10px var(--rfb-ember))}
.artwork-plane>.magic-b{opacity:.48;filter:url(#livingFlame) saturate(1.4) brightness(1.28) drop-shadow(0 -2px 16px #ff9b3c);transform:none;animation:none}
body.reduced-motion .artwork-plane>.magic-b{filter:saturate(1.18) brightness(1.02);transform:none;opacity:.25}

/* Quiet authority: the fedora rests on the book and subtly responds to the
   current beneath it. Dramatic travel is reserved for the pickup sequence. */
.fedora-layer{animation:fedoraAlive 7.2s var(--rfb-ease-breathe) infinite}
.hat-shadow{animation:shadowAlive 7.2s var(--rfb-ease-breathe) infinite}
@keyframes fedoraAlive{0%,100%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-2px) rotate(-.22deg)}50%{transform:translateY(-4px) rotate(.28deg)}75%{transform:translateY(-2px) rotate(-.12deg)}}
@keyframes shadowAlive{0%,100%{transform:scale(1);opacity:.68;filter:blur(15px)}50%{transform:scale(.965);opacity:.61;filter:blur(16px)}}
.hat-wearing .fedora-layer{animation:wearFedoraHuman 1.8s var(--rfb-ease-arrive) forwards}
.hat-wearing .hat-shadow{animation:shadowGone .55s forwards}
body.reduced-motion .fedora-layer,body.reduced-motion .hat-shadow{animation:none}

/* A restrained invitation on hover: one small bump, never a large float. */
.hat-hotspot:hover .fedora-layer,.hat-hotspot:focus-visible .fedora-layer{animation:fedoraHoverBump .55s var(--rfb-ease-arrive) 1 both}
.hat-hotspot:hover .hat-shadow,.hat-hotspot:focus-visible .hat-shadow{animation:shadowHoverBump .55s var(--rfb-ease-arrive) 1 both}
@keyframes fedoraHoverBump{0%{transform:translateY(-2px) rotate(0);filter:drop-shadow(0 23px 20px var(--rfb-scrim-3)) drop-shadow(0 0 16px var(--rfb-ember))}42%{transform:translateY(-7px) rotate(-.45deg);filter:drop-shadow(0 26px 22px var(--rfb-scrim-4)) drop-shadow(0 0 21px var(--rfb-ember-lit))}100%{transform:translateY(-4px) rotate(-.18deg);filter:drop-shadow(0 24px 21px var(--rfb-scrim-3)) drop-shadow(0 0 18px #f65a32)}}
@keyframes shadowHoverBump{0%{transform:scale(.98);opacity:.64}42%{transform:scale(.94);opacity:.56}100%{transform:scale(.965);opacity:.6}}
.hat-wearing .hat-hotspot .fedora-layer,.hat-wearing .hat-hotspot:hover .fedora-layer,.hat-wearing .hat-hotspot:focus-visible .fedora-layer{animation:wearFedoraHuman 2.4s var(--rfb-ease-arrive) forwards}
.hat-wearing .hat-hotspot .hat-shadow,.hat-wearing .hat-hotspot:hover .hat-shadow,.hat-wearing .hat-hotspot:focus-visible .hat-shadow{animation:shadowGone .55s forwards}
body.reduced-motion .hat-hotspot:hover .fedora-layer,body.reduced-motion .hat-hotspot:focus-visible .fedora-layer{animation:none;transform:translateY(-3px)}

/* Production accessibility and interaction polish. */
:where(a,button,[tabindex]):focus-visible{outline:3px solid var(--rfb-paper-warm);outline-offset:4px;box-shadow:0 0 0 6px color-mix(in srgb, var(--rfb-crimson-deep) 80%, transparent)}
.entry-skip{min-width:44px;min-height:44px;padding:10px 8px;background:#080b0e99;border-radius:var(--rfb-r-sm);text-shadow:0 2px 5px #000}
.journey-rail button{min-width:32px;min-height:32px}
.journey-rail button:disabled{opacity:.32;cursor:not-allowed}
.first-visit-cue{position:absolute;z-index:15;left:50%;bottom:11%;transform:translateX(-50%);margin:0;padding:9px 14px;border:1px solid color-mix(in srgb, var(--rfb-brass) 33%, transparent);border-radius:2px;background:#070a0dcc;color:var(--rfb-paper);font:600 var(--rfb-t-micro) Montserrat,sans-serif;letter-spacing:var(--rfb-track-body);text-align:center;box-shadow:0 9px 24px var(--rfb-scrim-2);animation:cueArrives .75s .75s both}
.first-visit-cue[hidden]{display:none}.first-visit-cue.leaving{animation:cueLeaves .4s both}
@keyframes cueArrives{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}@keyframes cueLeaves{to{opacity:0;transform:translate(-50%,6px)}}
/* Fedora portal: the hat stays physically believable while the world opens
   beneath its brim. The transition no longer pretends a flat image is a 3-D
   hat being placed on a head. */
.hat-wearing .hat-hotspot,.hat-wearing .hat-hotspot:hover,.hat-wearing .hat-hotspot:focus-visible{z-index:var(--rfb-z-panel);isolation:isolate;animation:none;transform:none}
.hat-wearing .hat-hotspot .fedora-layer,.hat-wearing .hat-hotspot:hover .fedora-layer,.hat-wearing .hat-hotspot:focus-visible .fedora-layer{animation:fedoraPortalLift 1.35s var(--rfb-ease-arrive) forwards}
.hat-wearing .hat-hotspot .hat-shadow,.hat-wearing .hat-hotspot:hover .hat-shadow,.hat-wearing .hat-hotspot:focus-visible .hat-shadow{animation:portalShadow 1s ease forwards}
.hat-wearing .hat-hotspot:after{z-index:var(--rfb-z-base);left:10%;right:10%;top:58%;height:18%;animation:brimPortalOpens 1.35s var(--rfb-ease-arrive) forwards;transform-origin:50% 50%;background:radial-gradient(ellipse at center,#020304 0 42%,#090307 58%,color-mix(in srgb, var(--rfb-crimson-deep) 54%, transparent) 67%,#d7a95742 72%,transparent 82%);filter:drop-shadow(0 0 8px #c3313f88) drop-shadow(0 0 18px #d5a45255)}
.hat-wearing .fedora-layer{z-index:3;opacity:1}
.hat-wearing .artwork-plane>.magic-a{animation:portalMagicGather 1.35s ease-in-out forwards}
.hat-wearing .artwork-plane>.magic-b{animation:portalMagicCurrent 1.35s ease-in-out forwards}
.hat-wearing .brim-transition{z-index:var(--rfb-z-head);inset:0;border:0;background:radial-gradient(ellipse at 50% 61%,#020304 0 34%,#020304f5 48%,#020304b8 65%,transparent 84%);animation:portalVignette .4s 1s ease-in forwards;transform-origin:50% 61%}
.hat-wearing .experience-stage{transform:none;filter:none;transition:opacity .75s ease}
@keyframes fedoraPortalLift{0%{transform:translateY(0) rotate(0) scale(1)}24%{transform:translateY(-3px) rotate(-.25deg) scale(1.006)}52%{transform:translateY(-10px) rotate(-.7deg) rotateX(3deg) scale(1.025)}76%{transform:translateY(-15px) rotate(.15deg) rotateX(8deg) scale(1.055)}100%{transform:translateY(-18px) rotateX(12deg) scale(1.075)}}
@keyframes portalShadow{0%{transform:scale(1);opacity:.65}58%{transform:scale(.9);opacity:.45}100%{transform:scale(.7);opacity:0}}
@keyframes brimPortalOpens{0%,30%{opacity:0;transform:scale(.28,.14)}50%{opacity:.35;transform:scale(.75,.3)}72%{opacity:.86;transform:scale(2.2,.92)}100%{opacity:1;transform:scale(6.5,3.8)}}
@keyframes portalMagicGather{0%{transform:none;opacity:.72;filter:saturate(1.12) drop-shadow(0 0 11px var(--rfb-ember))}50%{transform:scale(1.015);opacity:1;filter:saturate(1.45) brightness(1.28) drop-shadow(0 0 25px #ffad3d)}78%{transform:scale(.98);opacity:.78;filter:saturate(1.6) brightness(1.45) drop-shadow(0 0 34px #ffca63)}100%{transform:scale(.92);opacity:0}}
@keyframes portalMagicCurrent{0%{opacity:.18}48%{opacity:.48;filter:brightness(1.35)}78%{opacity:.72;filter:brightness(1.7)}100%{opacity:0}}
@keyframes portalVignette{0%{opacity:0;transform:scale(.62)}100%{opacity:1;transform:scale(2.15)}}
body.calm *,body.calm *:before,body.calm *:after{animation:none;transition:none;scroll-behavior:auto}
body.calm .artwork-plane>.magic-b{filter:saturate(1.18) brightness(1.02);transform:none;opacity:.25}
body.calm .hat-hotspot:hover .fedora-layer,body.calm .hat-hotspot:focus-visible .fedora-layer{transform:translateY(-3px)}
body.calm .artwork-plane>.lantern-flame{animation:none;transform:translate(-50%,-100%);opacity:.92}
body.calm .hat-hotspot .fedora-layer,body.calm .hat-hotspot:hover .fedora-layer,body.calm .hat-hotspot:focus-visible .fedora-layer{animation:none;transform:none}
body.calm .hat-hotspot .hat-shadow,body.calm .hat-hotspot:hover .hat-shadow,body.calm .hat-hotspot:focus-visible .hat-shadow{animation:none;transform:none}
body.calm.hat-wearing .hat-hotspot,body.calm.hat-wearing .hat-hotspot:after,body.calm.hat-wearing .fedora-layer,body.calm.hat-wearing .hat-shadow,body.calm.hat-wearing .brim-transition,body.calm.hat-wearing .entry-title{animation:none;transform:none}

/* Crossroads: one clean master, one real hat, and continuous living ribbons. */
.crossroads-scene{background:#05070a}
.crossroads-camera{position:absolute;inset:0;overflow:hidden;transform:scale(1.002);transform-origin:50% 50%;transition:transform 1s var(--rfb-ease-arrive),filter .75s ease;will-change:transform}
.crossroads-master{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.crossroads-fedora{position:absolute;z-index:3;left:50%;top:clamp(-82px,-4vw,-52px);width:min(23vw,410px);aspect-ratio:1674/942;transform:translateX(-50%);filter:drop-shadow(0 12px 15px var(--rfb-scrim-4)) drop-shadow(0 0 12px color-mix(in srgb, var(--rfb-crimson) 47%, transparent));animation:crossroadsHat 7.5s ease-in-out infinite}
.crossroads-fedora img{display:block;width:100%;height:100%;object-fit:contain}
@keyframes crossroadsHat{50%{transform:translateX(-50%) translateY(-2px) rotate(.12deg)}}
.living-ribbons{position:absolute;z-index:2;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;mix-blend-mode:screen;opacity:.58}
.living-ribbon{fill:none;stroke:url(#ribbonRed);stroke-width:1.35;stroke-linecap:round;opacity:.72;animation:ribbonHeat 6.8s ease-in-out infinite}.ribbon-to-library{animation-delay:-2.4s}.ribbon-to-gus{animation-delay:-4.2s}
@keyframes ribbonHeat{50%{stroke-width:1.7;opacity:.94}}
.world-door{outline:none}.world-door>span:not(.sr-only),.magic-thread,.hint{display:none}.world-door:after{content:"";position:absolute;inset:10%;border-radius:46%;background:radial-gradient(ellipse,transparent 48%,#f0bc5b18 72%,transparent);opacity:0;transition:opacity .55s ease}.world-door:hover:after,.world-door:focus-visible:after{opacity:1}
.choice-light{position:absolute;z-index:2;pointer-events:none;opacity:0;transition:opacity .55s ease;background:radial-gradient(ellipse at center,#ffc65c25,transparent 65%)}.choice-light-scarlet{left:2%;top:14%;width:36%;height:72%}.choice-light-library{left:34%;top:20%;width:31%;height:67%}.choice-light-gus{right:1%;top:10%;width:38%;height:78%}
.crossroads-scene:has(.library-door:hover) .crossroads-camera, .crossroads-scene:has(.library-door:focus-visible) .crossroads-camera{transform:scale(1.002);transform-origin:50% 50%}
.crossroads-scene:has(.library-door:hover) .choice-light-library, .crossroads-scene:has(.library-door:focus-visible) .choice-light-library{opacity:1}
body.calm .crossroads-fedora,body.calm .living-ribbon{animation:none}body.calm .living-ribbons{opacity:.42}body.calm .crossroads-camera{transition:none}
@media(max-width:900px){.crossroads-fedora{top:-46px;width:30vw}}
@media(max-width:600px){.crossroads-master{width:auto;min-width:100%;left:50%;transform:translateX(-50%)}.crossroads-fedora{top:-18px;width:46vw}.living-ribbon{stroke-width:3.2}}

body.calm.hat-wearing .hat-hotspot:after,body.calm.hat-wearing .brim-transition{opacity:0;border-width:0}
body.calm.hat-wearing .entry-title, body.calm.hat-wearing .journey-rail, body.calm.hat-wearing .entry-skip{opacity:1}
@media(max-width:600px){.first-visit-cue{bottom:12%;width:max-content;max-width:82vw}.entry-skip{right:12px}}

/* Use only real bundled font weights and preserve crisp Windows rasterization. */
html{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:auto}
.entry-title{filter:none}
.entry-skip, .journey-rail{text-shadow:none}

/* Crossroads actors: independent transparent pieces over a fixed stage. */
.crossroads-camera,.crossroads-scene:has(.world-door:hover) .crossroads-camera,.crossroads-scene:has(.world-door:focus-visible) .crossroads-camera{transform:none;transition:none}
.crossroads-actor{position:absolute;z-index:2;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;will-change:transform;transform:none;transition:transform .55s var(--rfb-ease-arrive),filter .4s ease,opacity .4s ease}
.asset-scarlet{clip-path:polygon(11% 38%,25% 38%,25% 75%,11% 75%);animation:scarletStillness 8s ease-in-out infinite}
.asset-gus{clip-path:polygon(66% 41%,78% 41%,78% 76%,66% 76%);animation:gusStillness 7.5s ease-in-out infinite}
.asset-patch-sigiriya{clip-path:polygon(82% 43%,94% 43%,94% 60%,82% 60%)}
.asset-patch-maymont{clip-path:polygon(83% 56%,95% 56%,95% 76%,83% 76%)}
.asset-plaque-scarlet{clip-path:polygon(11% 76%,27% 76%,27% 92%,11% 92%)}
.asset-plaque-library{clip-path:polygon(39% 76%,57% 76%,57% 92%,39% 92%)}
.asset-plaque-gus{clip-path:polygon(68% 76%,83% 76%,83% 92%,68% 92%)}
.asset-book-fedora{clip-path:polygon(34.8% 37%,41.9% 37%,41.9% 76%,34.8% 76%)}
.asset-book-scarlet{clip-path:polygon(41.8% 37%,48.8% 37%,48.8% 76%,41.8% 76%)}
.asset-book-gus{clip-path:polygon(48.7% 37%,55% 37%,55% 76%,48.7% 76%)}
.asset-book-maymont{clip-path:polygon(54.8% 37%,61% 37%,61% 76%,54.8% 76%)}
@keyframes scarletStillness{50%{transform:translateY(-1px)}}
@keyframes gusStillness{50%{transform:translateY(-1.5px) rotate(.08deg)}}
.book-choice{position:absolute;z-index:9;top:37%;height:39%;border:0;background:transparent;cursor:pointer;outline:none}
.book-choice:focus,.book-choice:focus-visible,.world-door:focus,.world-door:focus-visible{outline:none;outline-color:transparent;outline-width:0;outline-offset:0;box-shadow:none}
.book-fedora{left:34.8%;width:7.1%}.book-scarlet{left:41.8%;width:7%}.book-gus{left:48.7%;width:6.3%}.book-maymont{left:54.8%;width:6.2%}
.crossroads-scene:has(.book-fedora:hover) .asset-book-fedora,.crossroads-scene:has(.book-fedora:focus-visible) .asset-book-fedora,.crossroads-scene:has(.book-scarlet:hover) .asset-book-scarlet,.crossroads-scene:has(.book-scarlet:focus-visible) .asset-book-scarlet,.crossroads-scene:has(.book-gus:hover) .asset-book-gus,.crossroads-scene:has(.book-gus:focus-visible) .asset-book-gus,.crossroads-scene:has(.book-maymont:hover) .asset-book-maymont,.crossroads-scene:has(.book-maymont:focus-visible) .asset-book-maymont{transform:none;filter:brightness(1.11) drop-shadow(0 0 8px #d7aa5166)}
.crossroads-scene:has(.library-door:hover) .asset-plaque-library, .crossroads-scene:has(.library-door:focus-visible) .asset-plaque-library{transform:none;filter:brightness(1.08) drop-shadow(0 0 7px #d7aa514d)}
.crossroads-scene:has(.book-gus:hover) .asset-gus, .crossroads-scene:has(.book-gus:focus-visible) .asset-gus{transform:none;filter:brightness(1.035)}

.crossroads-scene:has(.book-scarlet:hover) .asset-scarlet, .crossroads-scene:has(.book-scarlet:focus-visible) .asset-scarlet{transform:none;filter:brightness(1.045)}
.crossroads-scene[data-depart="fedora"] .asset-book-fedora,.crossroads-scene[data-depart="scarlet"] .asset-book-scarlet,.crossroads-scene[data-depart="gus"] .asset-book-gus,.crossroads-scene[data-depart="maymont"] .asset-book-maymont{animation:bookChosen .75s var(--rfb-ease-arrive) forwards;z-index:12}
@keyframes bookChosen{0%{transform:none;filter:none}42%{transform:none;filter:brightness(1.17) drop-shadow(0 0 11px #e8b96088)}72%{transform:none;filter:brightness(1.1) drop-shadow(0 0 7px #d7aa5166)}100%{transform:none;filter:brightness(1.04)}}
.sloth-claw{position:absolute;z-index:4;left:51.05%;top:62.5%;width:2.45%;height:8.5%;min-width:27px;transform:rotate(-3deg);border-radius:45%;background:radial-gradient(ellipse,var(--rfb-moss) 42%,color-mix(in srgb, var(--rfb-moss) 91%, transparent) 67%,transparent 73%);pointer-events:none}
.sloth-claw i{position:absolute;top:18%;width:18%;height:62%;border:2px solid #c49a4b;border-bottom:0;border-radius:65% 65% 18% 18%;box-shadow:0 0 3px #160e06;transform-origin:50% 100%}
.sloth-claw i:nth-child(1){left:12%;transform:rotate(-16deg)}.sloth-claw i:nth-child(2){left:41%;height:69%}.sloth-claw i:nth-child(3){left:70%;transform:rotate(16deg)}
.choice-light,.choice-light-library{display:none}
.crossroads-camera:after{content:"";position:absolute;z-index:5;left:52.55%;top:61.25%;width:2.2%;aspect-ratio:86/110;background:url('assets/sloth-insignia.svg') center/contain no-repeat;transform:translateX(-50%);filter:drop-shadow(0 2px 3px var(--rfb-scrim-2));pointer-events:none}
.crossroads-scene:has(.book-gus:hover) .crossroads-camera:after,.crossroads-scene:has(.book-gus:focus-visible) .crossroads-camera:after{transform:translateX(-50%);filter:brightness(1.11) drop-shadow(0 0 8px #d7aa5166);transition:filter .4s ease}
.crossroads-scene[data-depart="gus"] .crossroads-camera:after{animation:slothInsigniaChosen .75s var(--rfb-ease-arrive) forwards}
@keyframes slothInsigniaChosen{0%{transform:translateX(-50%);filter:drop-shadow(0 2px 3px var(--rfb-scrim-2))}42%{transform:translateX(-50%);filter:brightness(1.17) drop-shadow(0 0 11px #e8b96088)}100%{transform:translateX(-50%);filter:brightness(1.04)}}
body.calm .asset-scarlet,body.calm .asset-gus{animation:none}
.crossroads-scene[data-depart] .world-door,.crossroads-scene[data-depart] .book-choice{pointer-events:none}
@media(max-width:900px){.book-choice{top:36%;height:41%}}
@media(max-width:600px){.crossroads-actor{width:auto;min-width:100%;left:50%;transform:translateX(-50%)}.sloth-claw{display:none}}

/* Seamless interactions: never transform or filter a rectangular image mask. */
.crossroads-actor, .crossroads-scene:has(.book-fedora:hover) .asset-book-fedora, .crossroads-scene:has(.book-fedora:focus-visible) .asset-book-fedora, .crossroads-scene:has(.book-scarlet:hover) .asset-book-scarlet, .crossroads-scene:has(.book-scarlet:focus-visible) .asset-book-scarlet, .crossroads-scene:has(.book-gus:hover) .asset-book-gus, .crossroads-scene:has(.book-gus:focus-visible) .asset-book-gus, .crossroads-scene:has(.book-maymont:hover) .asset-book-maymont, .crossroads-scene:has(.book-maymont:focus-visible) .asset-book-maymont, .crossroads-scene:has(.library-door:hover) .asset-plaque-library{animation:none;transform:none;filter:none}
.book-choice:after{content:"";position:absolute;inset:3% -10%;border-radius:48%;background:radial-gradient(ellipse at 50% 48%,#f3c76f28 0 28%,#d49a3530 42%,transparent 72%);opacity:0;transform:scale(.88);transition:opacity .3s ease,transform .4s var(--rfb-ease-arrive);pointer-events:none;mix-blend-mode:screen}
.book-choice:hover:after,.book-choice:focus-visible:after,.crossroads-scene[data-depart="fedora"] .book-fedora:after,.crossroads-scene[data-depart="scarlet"] .book-scarlet:after,.crossroads-scene[data-depart="gus"] .book-gus:after,.crossroads-scene[data-depart="maymont"] .book-maymont:after{opacity:1;transform:scale(1)}
.crossroads-camera:after,.crossroads-scene:has(.book-gus:hover) .crossroads-camera:after,.crossroads-scene:has(.book-gus:focus-visible) .crossroads-camera:after,.crossroads-scene[data-depart="gus"] .crossroads-camera:after{animation:none;transform:translateX(-50%);filter:drop-shadow(0 2px 3px var(--rfb-scrim-2))}

/* Clean Crossroads reset: preserve the finished illustration without composites. */
.crossroads-master{content:url('assets/storyworld-crossroads-final.webp')}
.crossroads-actor,.crossroads-camera:after,.book-choice:after,.world-door:after{display:none}
.crossroads-camera,.crossroads-camera:hover{transform:none;filter:none}

/* Crossroads rebuild: one cinematic plate, three living pools of light. */
.crossroads-camera:before{content:"";position:absolute;z-index:var(--rfb-z-base);left:10%;top:-3%;width:32%;height:22%;background:radial-gradient(ellipse at 50% 35%,#07111df2 0 38%,#07111dc9 58%,transparent 78%);filter:blur(10px);pointer-events:none}
.world-light{position:absolute;z-index:var(--rfb-z-base);pointer-events:none;mix-blend-mode:screen;opacity:.16;filter:blur(10px);transition:opacity .55s ease,filter .55s ease}
.light-scarlet{left:5%;top:25%;width:31%;height:60%;background:radial-gradient(ellipse at 52% 48%,#7298af32 0 18%,#2e5e8730 42%,transparent 72%);animation:midnightLamp 6.5s ease-in-out infinite}
.light-library{left:35%;top:26%;width:29%;height:57%;background:radial-gradient(ellipse at 50% 48%,#ffd17b38 0 16%,#d7772728 42%,transparent 72%);animation:libraryEmber 5.8s ease-in-out infinite}
.light-gus{right:3%;top:22%;width:35%;height:65%;background:radial-gradient(ellipse at 52% 48%,color-mix(in srgb, var(--rfb-brass-lit) 14%, transparent) 0 16%,#9ab56c20 44%,transparent 73%);animation:morningMist 7.2s ease-in-out infinite}
@keyframes midnightLamp{50%{opacity:.24;filter:blur(8px) brightness(1.12)}}
@keyframes libraryEmber{50%{opacity:.25;filter:blur(8px) brightness(1.16)}}
@keyframes morningMist{50%{opacity:.22;filter:blur(12px) brightness(1.08)}}
.crossroads-scene:has(.library-door:hover) .light-library, .crossroads-scene:has(.library-door:focus-visible) .light-library{opacity:.34;filter:blur(7px) brightness(1.16)}
.world-door{cursor:pointer}
.world-door:focus,.world-door:focus-visible{outline:none;box-shadow:none}
body.calm .world-light{animation:none;transition:none;opacity:.14}

/* Award-pass interactions: physical plaque cues, environmental life, story transitions. */
.world-door>span.world-whisper{display:block;position:absolute;z-index:3;left:50%;bottom:7%;width:min(340px,88%);padding:0;background:none;border:0;box-shadow:none;color:var(--rfb-paper);font:600 14px/1.25 'Cormorant Garamond',Georgia,serif;letter-spacing:.035em;text-align:center;text-shadow:0 2px 5px #000,0 0 14px #000,0 0 22px #000;opacity:0;transform:translate(-50%,5px);transition:opacity .22s ease,transform .22s ease;pointer-events:none}
.world-door:hover>.world-whisper,.world-door:focus-visible>.world-whisper{opacity:.94;transform:translate(-50%,0);transition-delay:.4s}
.library-door>.world-whisper{bottom:3%;width:110%}
.world-door:after{display:block;content:"";position:absolute;z-index:2;inset:auto;border:0;background:linear-gradient(105deg,transparent 18%,color-mix(in srgb, var(--rfb-paper-warm) 40%, transparent) 44%,color-mix(in srgb, var(--rfb-focus) 55%, transparent) 50%,transparent 78%);background-size:240% 100%;border-radius:var(--rfb-r-lg);box-shadow:none;opacity:0;transform:translateY(0);transition:opacity .22s ease,transform .22s ease;background-position:130% 0;pointer-events:none}
.library-door:after{left:6%;bottom:-18%;width:88%;height:19%}
.world-door:hover:after,.world-door:focus-visible:after{opacity:.62;transform:translateY(1px);animation:plaqueGlint .75s ease both}
@keyframes plaqueGlint{from{background-position:130% 0}to{background-position:-80% 0}}
.light-scarlet:before{content:"";position:absolute;left:44%;top:34%;width:8%;aspect-ratio:1;border-radius:var(--rfb-r-round);background:#ffcc78;box-shadow:0 0 9px #ffd486,0 0 28px #f0a64a99;animation:trolleyLamp 3.8s ease-in-out infinite}
.light-scarlet:after{content:"";position:absolute;left:42%;top:48%;width:13%;height:42%;background:linear-gradient(180deg,#a7d8ff26,transparent);clip-path:polygon(47% 0,56% 0,100% 100%,0 100%);animation:railReflection 4.3s ease-in-out infinite}
.light-library:before{content:"";position:absolute;inset:18% 20%;background:radial-gradient(ellipse,#ffd57c35,transparent 66%);animation:cabinetGlow 3.2s ease-in-out infinite}
.light-gus:before{content:"";position:absolute;left:4%;right:0;top:18%;height:42%;background:radial-gradient(ellipse at center,#fff7d51f,transparent 66%);filter:blur(12px);animation:mistDrift 9s ease-in-out infinite}
@keyframes trolleyLamp{50%{opacity:.68;transform:scale(.88)}}@keyframes railReflection{50%{opacity:.48}}@keyframes cabinetGlow{45%{opacity:.66;transform:scale(1.03)}52%{opacity:.5;transform:scale(.99)}}@keyframes mistDrift{50%{transform:translateX(5%);opacity:.58}}
.portal-transition{position:absolute;z-index:70;inset:0;display:grid;place-items:center;overflow:hidden;background:#04070b;opacity:0;visibility:hidden;pointer-events:none}
.portal-transition span{position:relative;z-index:3;color:var(--rfb-paper);font:400 clamp(16px,1.5vw,24px) Limelight,Georgia,serif;letter-spacing:var(--rfb-track-label);text-shadow:0 3px 12px #000;opacity:0}
.portal-transition:before,.portal-transition:after{content:"";position:absolute;pointer-events:none}
.crossroads-scene[data-travel] .portal-transition{visibility:visible;animation:portalCurtain 1s ease forwards}
.crossroads-scene[data-travel] .portal-transition span{animation:portalWords 1s ease forwards}
.crossroads-scene[data-travel="scarlet"] .portal-transition{background:radial-gradient(circle at 34% 48%,#e6ba6b 0 1%,#31506c 2%,#09111b 16%,#020305 58%)}
.crossroads-scene[data-travel="scarlet"] .portal-transition:before{left:-20%;top:47%;width:140%;height:2px;background:linear-gradient(90deg,transparent,#f1d496,#fff,transparent);box-shadow:0 0 18px #e7c276;animation:railRush 1s ease forwards}
.crossroads-scene[data-travel="library"] .portal-transition{background:radial-gradient(ellipse at 50% 52%,#e8a13c 0,#6f3214 17%,var(--rfb-ink) 43%,#020304 72%)}
.crossroads-scene[data-travel="library"] .portal-transition:before{inset:0;background:radial-gradient(ellipse at 50% 52%,transparent 0 20%,#020304 52%);animation:doorIris 1s ease forwards}
.crossroads-scene[data-travel="gus"] .portal-transition{background:radial-gradient(circle at center,#d8c18f 0 18%,#76573a 19% 20%,#17231d 21% 48%,#020403 75%)}
.crossroads-scene[data-travel="gus"] .portal-transition:before{width:190px;aspect-ratio:1;border:7px double var(--rfb-crimson-deep);border-radius:var(--rfb-r-round);opacity:.8;transform:rotate(-9deg) scale(2);animation:passportStamp 1s var(--rfb-ease-arrive) forwards}
@keyframes portalCurtain{0%{opacity:0}28%,78%{opacity:1}100%{opacity:1}}@keyframes portalWords{0%,22%{opacity:0;transform:translateY(8px)}48%,78%{opacity:1;transform:none}100%{opacity:0}}@keyframes railRush{from{transform:translateX(-35%) scaleX(.2);opacity:0}45%{opacity:1}to{transform:translateX(35%) scaleX(1.4);opacity:0}}@keyframes doorIris{from{transform:scale(2.4);opacity:.2}to{transform:scale(.3);opacity:1}}@keyframes passportStamp{0%{transform:rotate(-9deg) scale(2.2);opacity:0}52%{transform:rotate(-9deg) scale(.96);opacity:.9}68%{transform:rotate(-9deg) scale(1.04)}100%{transform:rotate(-9deg) scale(1);opacity:.7}}
body.calm .world-whisper{transition:none}body.calm .portal-transition{display:none}
@media(max-width:760px){.world-door>.world-whisper{display:none}.world-door:after{opacity:.18}.portal-transition span{font-size:13px}}

/* The painted plaques need no synthetic surface; suppress legacy pseudo layers. */
.crossroads-scene .world-door:after,.crossroads-scene .world-door:hover:after,.crossroads-scene .world-door:focus:after,.crossroads-scene .world-door:focus-visible:after{display:none;content:none;opacity:0;animation:none}

/* Crossroads controls belong to the three physical brass plaques.  Do not let
   invisible, scene-wide hit regions create disconnected hover reactions. */
.crossroads-scene .world-door>.world-whisper{display:none;opacity:0}

.crossroads-scene .library-door{left:42.1%;top:82.5%;width:15.9%;height:16.2%}

@media(max-width:760px){
  
  .crossroads-scene .library-door{left:38%;top:80%;width:24%;height:19%}
  
}

/* Page two, rebuilt as an independently layered storybook waystation. */
.crossroads-v2{height:100svh;min-height:680px;isolation:isolate;background:#080705}
.waystation-stage{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.waystation-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.015)}
.waystation-heading{position:absolute;z-index:6;left:50%;top:10.5%;transform:translateX(-50%);text-align:center;text-shadow:0 3px 18px #000,0 0 42px #000}
.waystation-heading p{margin:0 0 7px;color:var(--rfb-brass);font:700 var(--rfb-t-micro)/1 Montserrat,Arial,sans-serif;letter-spacing:var(--rfb-track-wide)}
.waystation-heading h2{margin:0;color:var(--rfb-paper);font:600 clamp(27px,2.6vw,48px)/1 'Cormorant Garamond',Georgia,serif}
.waystation-actor{position:absolute;z-index:3;object-fit:contain;filter:drop-shadow(0 18px 18px var(--rfb-scrim-2));transform-origin:50% 100%;will-change:transform,filter;transition:transform .55s var(--rfb-ease-arrive),filter .55s ease}
.scarlet-patches-actor{left:15.3%;bottom:12.5%;width:17.5%;height:55%;animation:detectiveStillness 7.4s ease-in-out infinite}
.gus-actor{right:17%;bottom:13%;width:14.5%;height:48%;animation:gusStillnessV2 8.6s ease-in-out infinite}
@keyframes detectiveStillness{0%,100%{transform:translateY(0) rotate(-.18deg)}50%{transform:translateY(-3px) rotate(.16deg)}}
@keyframes gusStillnessV2{0%,100%{transform:translateY(0) rotate(.15deg)}50%{transform:translateY(-2px) rotate(-.12deg)}}
.waystation-fedora{position:absolute;z-index:4;left:50%;bottom:12.6%;width:13.8%;aspect-ratio:3/2;transform:translateX(-50%);filter:drop-shadow(0 13px 9px var(--rfb-scrim-4));animation:waystationHat 5.8s ease-in-out infinite}
.waystation-fedora img{display:block;width:100%;height:100%;object-fit:contain}#crossroads.stage-active .waystation-fedora img{content:url('assets/fedora-waystation-v2.webp')}
@keyframes waystationHat{0%,100%{transform:translateX(-50%) translateY(0) rotate(-.25deg)}50%{transform:translateX(-50%) translateY(-4px) rotate(.25deg)}}
.pedestal-magic{position:absolute;z-index:2;left:50%;bottom:12%;width:21%;height:22%;transform:translateX(-50%);border-radius:var(--rfb-r-round);background:radial-gradient(ellipse at center,color-mix(in srgb, var(--rfb-paper-warm) 55%, transparent) 0 2%,#e8a83d48 18%,transparent 68%);mix-blend-mode:screen;filter:blur(5px);animation:pedestalGlow 4.6s ease-in-out infinite}
@keyframes pedestalGlow{50%{opacity:.68;transform:translateX(-50%) scale(1.06)}}
.portal-weather{position:absolute;z-index:2;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.scarlet-rain{left:8.2%;top:17%;width:25.5%;height:55%;clip-path:ellipse(49% 55% at 50% 45%);opacity:.3;background-image:repeating-linear-gradient(102deg,transparent 0 17px,#b9dcf43d 18px 19px,transparent 20px 38px);background-size:210% 100%;animation:waystationRain 2.8s linear infinite}
@keyframes waystationRain{to{background-position:-130px 110px}}
.library-motes{left:38.7%;top:18%;width:23%;height:53%;clip-path:ellipse(49% 54% at 50% 45%);opacity:.42;background-image:radial-gradient(circle,#ffd77d 0 1px,transparent 1.8px),radial-gradient(circle,var(--rfb-paper-warm) 0 1px,transparent 1.7px);background-size:79px 91px,123px 113px;animation:motesRise 12s linear infinite}
@keyframes motesRise{to{background-position:35px -120px,-24px -170px}}
.gus-leaves{right:8.3%;top:16%;width:25.5%;height:57%;clip-path:ellipse(49% 55% at 50% 45%)}
.gus-leaves i{position:absolute;width:9px;height:17px;border-radius:100% 0 100% 0;background:#d8bf5b99;filter:blur(.2px);animation:leafFall 8s linear infinite}
.gus-leaves i:nth-child(1){left:12%;top:-8%;animation-delay:-1s}.gus-leaves i:nth-child(2){left:38%;top:-9%;animation-delay:-4.2s;animation-duration:10s}.gus-leaves i:nth-child(3){left:61%;top:-7%;animation-delay:-6.5s;animation-duration:9s}.gus-leaves i:nth-child(4){left:78%;top:-6%;animation-delay:-2.8s;animation-duration:11s}.gus-leaves i:nth-child(5){left:91%;top:-8%;animation-delay:-7.4s;animation-duration:9.5s}
@keyframes leafFall{0%{transform:translate(0,-15px) rotate(0);opacity:0}12%{opacity:.8}100%{transform:translate(-55px,470px) rotate(520deg);opacity:0}}
.crossroads-v2 .world-door{z-index:8;top:auto;height:auto;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 28px;border:1px solid var(--rfb-wood);border-radius:var(--rfb-r-pill);color:#24170b;background:radial-gradient(circle at 14px 50%,#5c3a17 0 2px,#f0d28c 3px 5px,transparent 6px),radial-gradient(circle at calc(100% - 14px) 50%,#5c3a17 0 2px,#f0d28c 3px 5px,transparent 6px),linear-gradient(180deg,#f2d891 0,#b37d34 16%,var(--rfb-brass) 48%,#936329 100%);box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--rfb-brass-lit) 67%, transparent),inset 0 0 0 5px color-mix(in srgb, var(--rfb-wood) 40%, transparent),0 7px 14px var(--rfb-scrim-3);text-shadow:0 1px var(--rfb-brass-lit);transform:translateY(0);transition:transform .3s var(--rfb-ease-arrive),filter .3s ease,box-shadow .3s ease;overflow:hidden}
.crossroads-v2 .world-door:before{content:"";position:absolute;inset:4px;border:1px solid color-mix(in srgb, var(--rfb-wood) 49%, transparent);border-radius:var(--rfb-r-pill);pointer-events:none}
.crossroads-v2 .world-door:after{display:block;content:"";position:absolute;inset:-35% auto -35% -45%;width:26%;opacity:0;background:linear-gradient(90deg,transparent,color-mix(in srgb, var(--rfb-paper-warm) 66%, transparent),transparent);transform:skewX(-18deg);pointer-events:none}
.crossroads-v2 .world-door:hover,.crossroads-v2 .world-door:focus-visible{transform:translateY(-5px);filter:brightness(1.12);box-shadow:inset 0 0 0 2px var(--rfb-paper-warm),inset 0 0 0 5px color-mix(in srgb, var(--rfb-wood) 40%, transparent),0 13px 24px var(--rfb-scrim-4),0 0 18px #e4b75b55;outline:2px solid var(--rfb-paper-warm);outline-offset:4px}
.crossroads-v2 .world-door:hover:after,.crossroads-v2 .world-door:focus-visible:after{opacity:.85;animation:waystationGlint .55s ease-out both}
@keyframes waystationGlint{from{left:-45%}to{left:125%}}
.crossroads-v2 .world-door span,.crossroads-v2 .world-door strong{position:relative;left:auto;bottom:auto;min-width:0;padding:0;border:0;background:none;box-shadow:none;opacity:1;transform:none;text-align:center}
.crossroads-v2 .world-door .plaque-kicker{font:700 var(--rfb-t-micro)/1 Montserrat,Arial,sans-serif;letter-spacing:var(--rfb-track-word);color:#513316}
.crossroads-v2 .world-door strong{font:700 clamp(15px,1.3vw,22px)/1 'Cormorant Garamond',Georgia,serif;letter-spacing:.025em}

.crossroads-v2 .scarlet-door{left:10.4%;bottom:max(5.2%,110px);width:19.4%}.crossroads-v2 .library-door{left:50%;bottom:max(5.2%,110px);width:19.4%;transform:translateX(-50%)}.crossroads-v2 .gus-door{left:auto;right:10.4%;bottom:max(5.2%,110px);width:19.4%}
.crossroads-v2 .library-door:hover,.crossroads-v2 .library-door:focus-visible{transform:translateX(-50%) translateY(-5px)}

.crossroads-v2:has(.library-door:hover) .library-motes,.crossroads-v2:has(.library-door:focus-visible) .library-motes{opacity:.72;filter:brightness(1.25)}
.waystation-instruction{position:absolute;z-index:7;left:50%;bottom:max(1%,86px);transform:translateX(-50%);margin:0;color:#ddc99c;font:600 var(--rfb-t-micro)/1 Montserrat,Arial,sans-serif;letter-spacing:var(--rfb-track-label);text-transform:uppercase;text-shadow:0 2px 6px #000}
body.calm .crossroads-v2 *{animation:none;transition-duration:.01ms}
@media(max-width:900px){.crossroads-v2{min-height:720px}.waystation-backdrop{width:auto;min-width:100%;left:50%;transform:translateX(-50%);object-position:center}.waystation-heading{top:12%;width:85%}.scarlet-patches-actor{left:6%;width:29%;bottom:22%}.gus-actor{right:7%;width:24%;bottom:22%}.waystation-fedora{width:35%;bottom:21%}.crossroads-v2 .world-door{min-height:55px;padding:8px 7px}.crossroads-v2 .scarlet-door{left:3%;bottom:max(7%,110px);width:30%}.crossroads-v2 .library-door{left:50%;bottom:max(7%,110px);width:31%}.crossroads-v2 .gus-door{right:3%;bottom:max(7%,110px);width:30%}.crossroads-v2 .world-door strong{font-size:13px}.crossroads-v2 .world-door .plaque-kicker{font-size:var(--rfb-t-micro)}.waystation-instruction{display:none}}

/* Teacher's Satchel: layered workshop and physical resource controls. */
.teacher-workshop{position:relative;min-height:100svh;height:100svh;padding:0;display:block;overflow:hidden;isolation:isolate;background:#090705;color:var(--rfb-paper)}
.teacher-stage{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.teacher-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.015)}
.teacher-satchel{position:absolute;z-index:3;left:50%;bottom:-5%;width:min(45vw,720px);height:72%;object-fit:contain;transform:translateX(-50%);filter:drop-shadow(0 28px 22px var(--rfb-scrim-4));transform-origin:50% 92%;animation:satchelBreathe 7.2s ease-in-out infinite}
@keyframes satchelBreathe{50%{transform:translateX(-50%) translateY(-3px) rotate(.12deg)}}
.desk-lamplight{position:absolute;z-index:2;left:50%;bottom:2%;width:55%;height:50%;transform:translateX(-50%);border-radius:var(--rfb-r-round);background:radial-gradient(ellipse,#e8a94438,transparent 68%);mix-blend-mode:screen;animation:deskGlow 5.4s ease-in-out infinite}
@keyframes deskGlow{50%{opacity:.62;filter:brightness(1.15)}}
.workshop-dust{position:absolute;z-index:2;inset:0;opacity:.27;background-image:radial-gradient(circle,#ffe7a8 0 1px,transparent 1.5px),radial-gradient(circle,#d9a85e 0 .8px,transparent 1.3px);background-size:113px 97px,167px 139px;animation:dustRise 18s linear infinite}
@keyframes dustRise{to{background-position:37px -150px,-41px -210px}}
.chalk-constellation{position:absolute;z-index:2;left:39%;top:9%;width:22%;height:28%;border-radius:var(--rfb-r-round);background:radial-gradient(circle at 51% 48%,#f8d67c65 0 1px,transparent 2px),conic-gradient(from 20deg,transparent,#e3c47218,transparent 28%);filter:drop-shadow(0 0 9px #d7a647);animation:chalkTurn 26s linear infinite}
@keyframes chalkTurn{to{transform:rotate(360deg)}}
.teacher-copy{position:absolute;z-index:5;left:5.5%;top:13%;max-width:390px;text-shadow:0 3px 16px #000}
.teacher-copy>p{margin:0 0 12px;color:var(--rfb-brass);font:700 var(--rfb-t-micro)/1 Montserrat,Arial,sans-serif;letter-spacing:var(--rfb-track-word)}
.teacher-copy h2{margin:0 0 14px;font:600 clamp(48px,5.2vw,86px)/.83 'Cormorant Garamond',Georgia,serif}
.teacher-copy>span{display:block;max-width:330px;color:#dfceb0;font:italic 20px/1.3 'Cormorant Garamond',Georgia,serif}
.satchel-tools{position:absolute;z-index:6;left:50%;bottom:22%;width:min(51vw,820px);height:43%;transform:translateX(-50%);pointer-events:none}
.satchel-tool{position:absolute;pointer-events:auto;min-width:128px;padding:9px 13px;border:1px solid #7a5429;border-radius:8px;background:linear-gradient(145deg,#ead29c,#b68543);color:var(--rfb-wood-deep);box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--rfb-paper-warm) 33%, transparent),0 8px 18px var(--rfb-scrim-3);cursor:pointer;transform:translateY(0) rotate(var(--r));transition:transform .3s var(--rfb-ease-arrive),filter .3s ease,box-shadow .3s ease}
.satchel-tool b,.satchel-tool span{display:block}.satchel-tool b{font:700 var(--rfb-t-micro)/1 Montserrat,Arial,sans-serif;letter-spacing:var(--rfb-track-word)}.satchel-tool span{margin-top:4px;font:700 16px/1 'Cormorant Garamond',Georgia,serif}
.satchel-tool:hover,.satchel-tool:focus-visible{transform:translateY(-10px) rotate(0);filter:brightness(1.12);box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--rfb-paper-warm) 53%, transparent),0 16px 24px var(--rfb-scrim-4),0 0 18px #d9aa5952;outline:2px solid var(--rfb-brass-lit);outline-offset:4px}
.tool-detective{--r:-3deg;left:6%;top:5%}.tool-passport{--r:2deg;left:31%;top:-2%}.tool-engineer{--r:-1.5deg;right:27%;top:1%}.tool-nature{--r:3deg;right:3%;top:7%}
.teacher-open{position:absolute;z-index:7;left:50%;bottom:8%;transform:translateX(-50%);padding:13px 24px;border:1px solid #4d2d15;border-radius:var(--rfb-r-pill);background:linear-gradient(var(--rfb-brass),#8c5e29);color:#21150a;box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--rfb-brass-lit) 40%, transparent),0 10px 24px var(--rfb-scrim-4);font:700 14px 'Cormorant Garamond',Georgia,serif;letter-spacing:.05em;cursor:pointer;transition:.3s}
.teacher-open:hover,.teacher-open:focus-visible{transform:translateX(-50%) translateY(-4px);filter:brightness(1.14);outline:2px solid var(--rfb-brass-lit);outline-offset:4px}
.teacher-note{position:absolute;z-index:5;right:4%;top:14%;max-width:260px;margin:0;color:#cbb891;font:600 var(--rfb-t-micro)/1.6 Montserrat,Arial,sans-serif;letter-spacing:var(--rfb-track-label);text-align:right;text-transform:uppercase;text-shadow:0 2px 10px #000}
#teacherDialog{width:min(1120px,92vw);max-height:90svh;padding:42px;background:radial-gradient(circle at 50% 0,#4a3018,var(--rfb-ink) 72%);color:var(--rfb-paper);border:1px solid #b78b4e;border-radius:var(--rfb-r-lg);box-shadow:var(--rfb-drop-3)}
#teacherDialog::backdrop{background:#050706d9;backdrop-filter:blur(8px)}
#teacherDialog>p:first-of-type{color:var(--rfb-brass);font:700 var(--rfb-t-micro) Montserrat;letter-spacing:var(--rfb-track-word)}#teacherDialog h2{font-size:clamp(42px,5vw,68px);margin:5px 0 10px}.satchel-intro{max-width:720px;color:#cab995;font:18px/1.45 'Cormorant Garamond',Georgia,serif}
#teacherDialog .activities{grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}#teacherDialog .activities article{padding:24px 18px;background:linear-gradient(150deg,#eadbb8,#c7a977);color:var(--rfb-wood-deep);border:1px solid var(--rfb-paper-warm);border-radius:7px;box-shadow:0 13px 25px var(--rfb-scrim-1);transition:.3s}#teacherDialog .activities article.selected{transform:translateY(-7px);box-shadow:0 20px 30px var(--rfb-scrim-3),0 0 0 3px #c8333c}#teacherDialog .activities article>b{font-size:31px}#teacherDialog .activities article h3{font-size:22px;margin:12px 0 4px}#teacherDialog .activities article>span{font:700 var(--rfb-t-micro) Montserrat;letter-spacing:var(--rfb-track-body)}#teacherDialog .activities article p{font:15px/1.4 'Cormorant Garamond',Georgia,serif}#teacherDialog .activities article button{width:100%;padding:10px;border:1px solid var(--rfb-brass-edge);background:#4b321c;color:var(--rfb-paper-dim);font-size:var(--rfb-t-micro)}
body.calm .teacher-workshop *{animation:none;transition-duration:.01ms}
@media(max-width:900px){.teacher-workshop{min-height:760px}.teacher-copy{top:11%;left:6%}.teacher-copy h2{font-size:50px}.teacher-copy>span{font-size:17px}.teacher-note{display:none}.teacher-satchel{width:80vw;height:61%;bottom:3%}.satchel-tools{width:88vw;height:38%;bottom:24%}.satchel-tool{min-width:105px;padding:7px}.satchel-tool span{font-size:13px}.tool-detective{left:0}.tool-passport{left:25%}.tool-engineer{right:25%}.tool-nature{right:0}.teacher-open{bottom:8%}#teacherDialog{padding:28px 18px}#teacherDialog .activities{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.teacher-copy{top:10%;width:88%}.teacher-copy h2{font-size:43px}.teacher-copy>span{max-width:260px}.teacher-satchel{width:105vw;height:56%;bottom:4%}.satchel-tools{bottom:24%;height:34%}.satchel-tool{min-width:96px}.tool-detective{left:1%;top:8%}.tool-passport{left:27%;top:-4%}.tool-engineer{right:25%;top:-2%}.tool-nature{right:0;top:8%}.satchel-tool b{font-size:var(--rfb-t-micro)}.satchel-tool span{font-size:var(--rfb-t-micro)}#teacherDialog .activities{grid-template-columns:1fr}}
#teacherDialog .activities article>a{display:block;width:100%;padding:10px;border:1px solid var(--rfb-brass-edge);background:#4b321c;color:var(--rfb-paper);text-align:center;text-decoration:none;font:700 var(--rfb-t-micro) Montserrat,sans-serif;letter-spacing:var(--rfb-track-tight);text-transform:uppercase}#teacherDialog .activities article>a:hover{background:#6d4828;color:#fff3d3}

/* Preserve the square brand mark and prevent footer layout shift. */


/* Serve the existing phone-sized artwork and keep mobile motion compositor-friendly. */
@media(max-width:600px){.entry-scene.active .scarlet-life,.entry-scene.active .gus-life{animation:none}.entry-scene.active .magic-a{animation:magicFlowMobile 4.6s ease-in-out infinite}.entry-scene.active .fedora-layer{animation:fedoraAliveMobile 3.4s ease-in-out infinite}.entry-scene.active .hat-shadow{animation:shadowAliveMobile 3.4s ease-in-out infinite}.entry-scene.active .entry-instruction{animation:none}}
@keyframes magicFlowMobile{0%,100%{transform:scale(.985);opacity:.76}50%{transform:scale(1.035,1.055);opacity:1}}
@keyframes fedoraAliveMobile{0%,100%{transform:translateY(0) rotate(0)}65%{transform:translateY(-10px) rotate(1deg)}}
@keyframes shadowAliveMobile{0%,100%{transform:scale(1);opacity:.68}65%{transform:scale(.82);opacity:.44}}

/* Inactive story scenes resume their motion only when the visitor enters them. */
body.experience-home .scene:not(.active):not(.stage-active) *{animation:none}
body.experience-home .workshop-dust{animation:none}

/* Final responsive art direction: tablet */
@media(min-width:601px) and (max-width:1024px){.entry-title{left:5%;top:15%;width:48%}.entry-title h1{font-size:clamp(56px,8vw,78px)}.hat-hotspot{left:36%;top:48%;width:32%;height:34%}
  .crossroads-v2 .waystation-heading{top:14%}.scarlet-patches-actor{left:5%;width:29%}.gus-actor{right:5%;width:25%}.crossroads-v2 .world-door{min-height:58px}
  .teacher-copy{left:5%;top:14%;width:35%}.teacher-copy h2{font-size:58px}.teacher-satchel{width:72vw;height:63%;right:-4%;bottom:1%}.satchel-tools{width:72vw;right:0;left:auto;transform:none}.teacher-open{left:auto;right:29%;transform:translateX(50%)}
  .library-room{padding-inline:4vw}.library-books{gap:2vw}.library-books img{height:min(43vw,370px)}.story-evidence{gap:4vw;padding-inline:5vw}.evidence-cards{gap:10px}.evidence-cards article{padding:24px 16px}
  .case-heading{width:50vw}.detective-portrait{right:-3%;width:52vw}.passport-heading{width:48%}.passport-book{width:69vw}.gus-traveler{right:-4%;width:47vw}
  .satchel-intro{padding:20svh 6vw 8svh;background-position:58% center}.satchel-intro h1{font-size:clamp(5.5rem,11vw,7rem)}.guides{gap:2rem;padding:5rem 3vw}.guides article{padding:2.2rem}.guides h2{font-size:3.2rem}
}
/* Final responsive art direction: phone */
@media(max-width:600px){
  html,body{max-width:100%;overflow-x:hidden}
  .entry-title{left:20px;top:92px;width:calc(100vw - 40px)}.entry-title p{width:max-content;max-width:100%;font-size:var(--rfb-t-micro)}.entry-title h1{font-size:clamp(43px,13vw,52px);line-height:.82}.entry-instruction{font-size:var(--rfb-t-micro)}.first-visit-cue{left:50%;right:auto;bottom:12%;width:calc(100vw - 32px);max-width:none;transform:translateX(-50%);padding:8px 12px;text-align:center;white-space:normal;font-size:var(--rfb-t-micro);line-height:1.3}.entry-skip{right:12px;bottom:20%}.journey-rail{width:calc(100vw - 30px);max-width:360px;justify-content:center}
  .crossroads-v2{min-height:100svh;height:100svh}.waystation-heading{top:78px;width:90%}.waystation-heading p{font-size:var(--rfb-t-micro)}.waystation-heading h2{font-size:34px}.scarlet-patches-actor{left:-3%;width:42%;bottom:25%}.gus-actor{right:-1%;width:34%;bottom:25%}.waystation-fedora{width:48%;bottom:23%}.crossroads-v2 .world-door{bottom:10%;min-height:64px;padding:7px 4px}.crossroads-v2 .scarlet-door{left:2%;width:31%}.crossroads-v2 .library-door{left:34.5%;width:31%}.crossroads-v2 .gus-door{right:2%;width:31%}.crossroads-v2 .world-door strong{font-size:var(--rfb-t-micro);line-height:1.05}
  .teacher-workshop{min-height:100svh;height:100svh;overflow:hidden}.teacher-copy{left:18px;top:78px;width:74%}.teacher-copy p{font-size:var(--rfb-t-micro)}.teacher-copy h2{font-size:43px;line-height:.82}.teacher-copy>span{font-size:15px;line-height:1.25}.teacher-satchel{left:50%;right:auto;bottom:3%;width:112vw;height:57%;transform:translateX(-50%);object-position:center bottom}.satchel-tools{left:50%;right:auto;bottom:25%;width:96vw;height:28%;transform:translateX(-50%)}.satchel-tool{min-width:82px;max-width:96px;min-height:43px;padding:5px}.satchel-tool span{font-size:var(--rfb-t-micro)}.tool-detective{left:0;top:9%}.tool-passport{left:25%;top:-4%}.tool-engineer{right:24%;top:-3%}.tool-nature{right:0;top:9%}.teacher-open{bottom:8%;min-height:44px;white-space:nowrap}.library-panel{overflow-x:hidden}.library-room{padding:74px 16px 48px}.library-room h2{font-size:39px}.library-books{grid-template-columns:1fr 1fr;gap:28px 14px;margin-top:30px}.library-books img{height:auto;aspect-ratio:2/3;border-width:4px}.library-books b{font-size:19px}.library-books span{margin-top:14px}.library-close{right:12px;top:calc(var(--rfb-head-h) + 10px)}.story-evidence{padding:68px 24px}.story-evidence h2{font-size:42px}.story-evidence>div>span{font-size:18px}.evidence-cards article{padding:24px 20px}.pending-seal{flex-basis:52px;height:52px}body:has(.evidence-room) .brand span, body:has(.passport-stage) .brand span{display:none}.scarlet-door{top:255px;height:335px}.gus-door{top:590px;height:335px}.scarlet-door img{left:-7%}.gus-door img{right:-7%}.evidence-room{min-height:100svh;height:844px}.case-heading{top:100px;left:20px;width:calc(100% - 40px)}.case-heading p{font-size:var(--rfb-t-micro)}.case-heading h1{font-size:3.25rem;line-height:.82}.case-heading span{max-width:17rem;font-size:1.05rem}.detective-portrait{right:-28%;bottom:17%;width:112vw}.evidence{min-width:112px;min-height:44px;padding:.55rem}.evidence-method{left:18px;top:43%}.evidence-fedora{left:18px;top:51%}.evidence-patches{left:18px;top:59%}.evidence-note{left:14px;bottom:16px;width:calc(100% - 28px);padding:.8rem 1rem}.case-desk{padding:3rem 16px}.case-desk blockquote{font-size:2rem}.passport-stage{min-height:1080px;padding-top:68px}.passport-heading{position:absolute;left:20px;top:92px;width:calc(100% - 40px)}.passport-heading h1{font-size:3rem}.passport-heading span{font-size:1.05rem}.gus-traveler{right:-23%;bottom:43%;width:104vw;opacity:.86}.slow-note{left:20px;top:345px;width:54%;font-size:1.05rem}.passport-book{left:12px;bottom:18px;width:calc(100% - 24px);min-height:535px;border-width:.45rem}.passport-profile,.passport-stamps{padding:1rem}.passport-profile h2{font-size:2.4rem}.passport-stamps{grid-template-columns:1fr 1fr}.stamp-button{min-height:68px}.travel-note{padding:.75rem 1rem}.satchel-intro{min-height:100svh;padding:18svh 24px 8svh;background-position:61% center}.satchel-intro p{font-size:var(--rfb-t-micro);letter-spacing:var(--rfb-track-label)}.satchel-intro h1{font-size:clamp(3.05rem,15vw,4rem);line-height:.82}.satchel-intro span{max-width:21rem;font-size:1.14rem;line-height:1.4}.satchel-intro nav{display:grid;grid-template-columns:1fr 1fr;width:min(100%,19rem);gap:.65rem;margin-top:1.5rem}.satchel-intro nav a{min-height:48px;display:grid;place-items:center;padding:.6rem}.guides{padding:3rem 14px;gap:1.5rem}.guides article{padding:2rem 1.3rem}.guide-mark{right:1.2rem;top:1rem;font-size:2.4rem}.guides h2{font-size:2.55rem}.guides h3{font-size:var(--rfb-t-micro)}.guides li{margin:.6rem 0}.reflection{padding:.8rem}
}

.library-books:has(a:nth-child(5)){grid-template-columns:repeat(5,1fr);gap:2vw;max-width:1500px}.library-books:has(a:nth-child(5)) img{height:340px}.library-books .melody-library-art{object-fit:contain;background:radial-gradient(circle at 50% 38%,#31516a,var(--rfb-night) 70%)}
@media(min-width:601px) and (max-width:1024px){.library-books:has(a:nth-child(5)){grid-template-columns:repeat(3,1fr)}.library-books:has(a:nth-child(5)) img{height:min(43vw,350px)}}
@media(max-width:600px){
  .library-books:has(a:nth-child(5)){grid-template-columns:1fr 1fr}.library-books:has(a:nth-child(5)) img{height:auto}
}.music-trail{position:absolute;z-index:4;right:20%;top:20%;color:#f0c96d;font:4rem Cormorant,serif;text-shadow:0 0 1.5rem #ffc85d;animation:musicDrift 7s ease-in-out infinite}.music-trail i,.music-trail b{position:absolute;font-style:normal}.music-trail i{left:6rem;top:5rem}.music-trail b{left:-5rem;top:9rem}@keyframes musicDrift{50%{transform:translateY(-1rem) rotate(4deg);opacity:.65}}@media(max-width:600px){.music-trail{right:12%;top:48%;font-size:2.4rem}}@media(prefers-reduced-motion:reduce){.music-trail{animation:none}}

/* Final overrides intentionally follow every earlier responsive rule. */
@media(max-width:900px){

body:has(.evidence-room) .evidence-room{height:auto;min-height:960px;padding:96px 20px 26px;display:grid;grid-template-rows:auto minmax(370px,1fr) auto}body:has(.evidence-room) .case-heading{position:relative;inset:auto;width:min(100%,37rem)}body:has(.evidence-room) .evidence-note{position:relative;inset:auto;width:min(100%,38rem);align-self:end}body:has(.evidence-room) .detective-portrait{right:-8%;bottom:15%;width:min(76vw,38rem)}
body:has(.passport-stage) .passport-stage{height:auto;min-height:1260px;padding:92px 20px 32px;display:flex;flex-direction:column}body:has(.passport-stage) .passport-heading{position:relative;inset:auto;width:min(100%,38rem)}body:has(.passport-stage) .gus-traveler{right:-7%;top:255px;bottom:auto;width:min(69vw,34rem)}body:has(.passport-stage) .passport-book{position:relative;inset:auto;width:min(100%,49rem);min-height:0;margin-top:auto;grid-template-columns:1fr 1fr}body:has(.passport-stage) .slow-note{position:relative;inset:auto;width:min(48%,18rem);margin-top:2rem}}
@media(max-width:600px){

body:has(.evidence-room) .evidence-room{min-height:1020px;padding-inline:16px}body:has(.evidence-room) .case-heading h1{font-size:2.65rem;overflow-wrap:anywhere}body:has(.evidence-room) .detective-portrait{right:-18%;bottom:20%;width:98vw}body:has(.evidence-room) .evidence-note{width:100%;margin-top:auto}
body:has(.passport-stage) .passport-stage{min-height:1440px;padding-inline:16px}body:has(.passport-stage) .passport-heading h1{font-size:2.15rem;line-height:.9;overflow-wrap:anywhere}body:has(.passport-stage) .gus-traveler{top:255px;right:-18%;width:100vw}body:has(.passport-stage) .passport-book{grid-template-columns:1fr;margin-top:auto}body:has(.passport-stage) .slow-note{width:55%}.tool-nature{right:4px}}

body>.global-motion{display:none}
[data-rfb-rain]{position:absolute;overflow:hidden;pointer-events:none;isolation:isolate;background:none}
[data-rfb-rain]>.rfb-raindrop{position:absolute;z-index:var(--rfb-z-base);left:var(--rain-x);top:-12%;display:block;width:1.5px;height:var(--rain-length);border-radius:var(--rfb-r-pill);background:linear-gradient(180deg,transparent 0,#d9efff 28%,#a9cfe8 76%,transparent 100%);opacity:var(--rain-opacity);filter:drop-shadow(0 0 2px #bde5ff66);transform:rotate(7deg);animation:rfbRainFall var(--rain-speed) linear var(--rain-delay) infinite}
@keyframes rfbRainFall{from{top:-12%;margin-left:0}to{top:112%;margin-left:-18px}}
.office-window-weather{height:56%}
.office-window-weather>i{z-index:2}
.rain-layer[data-rfb-rain]{inset:0;opacity:.48}

.scarlet-rain[data-rfb-rain]{opacity:.52}
.calm [data-rfb-rain]{display:none}
.case-folder, .map-destination{min-height:44px}

@media(max-width:900px){.office-window-weather{height:54%}}
@media(max-width:600px){.office-window-weather{height:54%}}
@media(prefers-reduced-motion:reduce){[data-rfb-rain]{display:none}}
.journey-rail{transition:box-shadow .22s ease,border-color .22s ease,filter .22s ease}
.journey-rail.wheel-intent{border-color:#e1bd72aa;box-shadow:0 12px 30px var(--rfb-scrim-1),0 0 18px #d4aa5552;filter:brightness(1.08)}
.journey-rail.wheel-intent>i{box-shadow:0 0 9px #edc36b88}.rfb-consent{display:flex;gap:.6rem;align-items:flex-start;margin-top:1rem;color:#ded3bc;font-size:.8rem;line-height:1.5}.rfb-consent input{margin-top:.2rem}.rfb-hp{position:absolute;left:-10000px}@media(max-width:760px){}
.delivery{min-height:100svh;display:grid;place-items:center;padding:6rem 1.25rem;background:radial-gradient(circle at 50% 10%,#79233955,transparent 34%),var(--rfb-night)}.delivery-card{width:min(680px,100%);padding:clamp(2rem,6vw,4.5rem);border:1px solid color-mix(in srgb, var(--rfb-brass) 53%, transparent);background:color-mix(in srgb, var(--rfb-ink) 94%, transparent);box-shadow:0 2rem 6rem #000;color:var(--rfb-paper);text-align:center}.delivery-card>img{width:84px}.delivery-card h1{font:600 clamp(2.5rem,7vw,5rem)/.9 Cormorant,Georgia,serif}.delivery-card p{line-height:1.65;color:var(--rfb-paper-dim)}
.rfb-consent-dialog{width:min(650px,calc(100% - 2rem));padding:0;border:1px solid var(--rfb-brass);background:var(--rfb-ink);color:var(--rfb-paper);box-shadow:0 2rem 8rem #000;font-family:inherit}.rfb-consent-dialog::backdrop{background:#05070bd9;backdrop-filter:blur(8px)}.rfb-consent-dialog form{position:relative;padding:clamp(1.5rem,5vw,3rem)}.rfb-consent-dialog h2{margin:.25rem 0 1rem;font-size:clamp(2rem,6vw,3.75rem);line-height:.95}.rfb-consent-kicker{color:var(--rfb-brass);font-weight:900;letter-spacing:var(--rfb-track-label)}.rfb-consent-dialog label{display:flex;gap:.85rem;margin:1.5rem 0;padding:1rem;border:1px solid color-mix(in srgb, var(--rfb-brass) 40%, transparent);background:#24170f;line-height:1.55}.rfb-consent-dialog input{inline-size:1.25rem;block-size:1.25rem;flex:none;margin-top:.2rem;accent-color:#a51f36}.rfb-consent-dialog a{color:#f1d58a}.rfb-consent-dialog form>div{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.75rem;margin-top:1.5rem}.rfb-consent-dialog button{padding:.8rem 1rem;border:1px solid var(--rfb-brass);background:#21170e;color:var(--rfb-paper);font:inherit;font-weight:800}.rfb-consent-dialog .rfb-consent-continue{background:#a51f36;color:#fff}.rfb-consent-dialog button:disabled{opacity:.45;cursor:not-allowed}.rfb-consent-dialog .rfb-consent-close{position:absolute;right:.75rem;top:.75rem;border:0;background:transparent;font-size:1.7rem}

/* Final-system geometry safeguards used across every page. */



.hub-body .office-window-weather{height:49%}
@media(max-width:600px){.hub-body .office-window-weather{height:47%}}

/* Final iPhone-class composition layer. */
@media(max-width:600px){
html{font-size:16px;-webkit-text-size-adjust:100%}body{min-width:0}
body.experience-home main,body.experience-home .experience-stage{width:100dvw;height:100svh;min-height:0}
.experience-home .journey-rail{bottom:max(8px,env(safe-area-inset-bottom));width:calc(100vw - 20px);max-width:420px;grid-template-columns:40px minmax(0,1fr) 74px 40px;gap:7px;padding:7px 8px}
.experience-home .journey-rail button{width:var(--rfb-tap);height:var(--rfb-tap);min-width:var(--rfb-tap);min-height:var(--rfb-tap)}
.experience-home .journey-rail>span{overflow:hidden;text-overflow:ellipsis;text-align:center;font-size:var(--rfb-t-micro)}.experience-home .journey-rail>i{width:74px}
.entry-title{left:18px;top:82px;width:68vw;max-width:300px}.entry-title p{margin-bottom:12px;padding:6px 9px;font-size:var(--rfb-t-micro);letter-spacing:var(--rfb-track-word)}.entry-title h1{font-size:clamp(36px,10.8vw,47px);line-height:.86}.entry-instruction{margin-top:12px;font-size:var(--rfb-t-micro)}
.entry-skip{right:14px;bottom:76px;min-height:44px;display:flex;align-items:center;padding:10px 12px;border:1px solid color-mix(in srgb, var(--rfb-brass) 60%, transparent);border-radius:var(--rfb-r-pill);background:color-mix(in srgb, var(--rfb-night) 87%, transparent);color:var(--rfb-paper-warm)}.first-visit-cue{bottom:130px}
.crossroads-v2{width:100dvw;height:100svh;min-height:0}.crossroads-v2 .waystation-backdrop{width:100%;height:100%;min-width:0;left:0;transform:none;object-fit:cover;object-position:center}
.waystation-heading{top:74px;width:calc(100% - 28px)}.waystation-heading p{font-size:var(--rfb-t-micro);letter-spacing:var(--rfb-track-word)}.waystation-heading h2{font-size:clamp(29px,8.5vw,38px);line-height:.95}
.crossroads-v2 .world-door{bottom:72px;width:31%;min-height:54px;padding:7px 5px}.crossroads-v2 .scarlet-door{left:1.5%}.crossroads-v2 .library-door{left:50%}.crossroads-v2 .gus-door{right:1.5%}.crossroads-v2 .world-door .plaque-kicker{display:none}.crossroads-v2 .world-door strong{max-width:100%;font-size:var(--rfb-t-micro);line-height:1.08;white-space:normal}
.scarlet-scene{width:100dvw;height:100svh;min-height:0}.scarlet-copy{left:16px;top:78px;width:calc(100vw - 32px);padding:14px;border:1px solid color-mix(in srgb, var(--rfb-brass) 33%, transparent);background:color-mix(in srgb, var(--rfb-night) 91%, transparent)}.scarlet-copy>p,.scarlet-copy>h2,.scarlet-copy>span{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}.scarlet-copy>p{margin:0;font-size:var(--rfb-t-micro)}.scarlet-copy h2{margin:8px 0;font-size:clamp(33px,9.5vw,43px);line-height:.9}.scarlet-copy>span{font-size:15px}.scarlet-copy>div{gap:8px;margin-top:12px}.scarlet-copy a,.scarlet-copy button{display:flex;align-items:center;justify-content:center;min-height:44px;padding:9px 11px;font-size:var(--rfb-t-micro);text-align:center}.scarlet-scene .clue-one{left:14%;bottom:16%;width:44px;height:44px}.scarlet-scene .clue-two{right:18%;top:34%;width:44px;height:44px}
.edition-drawer{left:10px;right:10px;bottom:66px;width:auto;max-height:calc(100svh - 86px);overflow:auto;padding:20px 16px}
.library-room{height:100svh;padding:70px 16px 76px;overflow:auto}.library-room header h2{font-size:clamp(36px,11vw,48px);line-height:.9}.library-books,.library-books:has(a:nth-child(5)){grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}.library-books a{min-width:0}.library-books img,.library-books:has(a:nth-child(5)) img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover}.library-books span{font-size:var(--rfb-t-micro);line-height:1.3}.library-close{top:64px;right:10px;width:44px;height:44px}
body.experience-home .teacher-workshop{position:fixed;inset:0 auto 0 0;width:100dvw;height:100svh;min-height:0;padding:76px 16px 72px;overflow:auto;display:block}.teacher-copy{position:relative;inset:auto;width:min(82%,350px);padding:12px;background:#07120fbd;transform:none}.teacher-copy h2{font-size:clamp(34px,9.5vw,42px);line-height:.88}.teacher-copy span{font-size:14px}.satchel-tools{position:relative;inset:auto;width:auto;height:auto;margin-top:clamp(210px,32svh,300px);display:grid;grid-template-columns:1fr 1fr;gap:8px;transform:none}.satchel-tool{position:relative;inset:auto;width:auto;max-width:none;min-height:56px;padding:8px;transform:none}.teacher-open{position:relative;inset:auto;display:block;width:100%;min-height:46px;margin-top:10px;transform:none}.teacher-note{position:relative;inset:auto;margin:9px 0 0;font-size:var(--rfb-t-micro);text-align:center}
.finale{width:100dvw;height:100svh;min-height:0;padding:88px 18px 78px}.finale h2{font-size:clamp(39px,12vw,54px)}.finale a{min-height:44px;display:inline-flex;align-items:center;margin:6px 3px;padding:10px 12px}.rfb-consent-dialog{max-height:calc(100svh - 20px);overflow:auto}

body:has(.evidence-room) .evidence-room{min-height:100svh;padding:86px 16px 76px;grid-template-rows:auto minmax(310px,52svh) auto}body:has(.evidence-room) .detective-portrait{right:-15%;bottom:18%;width:92vw}
body:has(.passport-stage) .passport-stage{min-height:1180px;padding:86px 16px 76px}body:has(.passport-stage) .gus-traveler{top:220px;right:-13%;width:88vw}
.scarlet-scene .scarlet-copy{left:0;top:68px;width:100vw;padding:18px 20px;border-block:1px solid color-mix(in srgb, var(--rfb-brass) 33%, transparent);border-inline:0;background:color-mix(in srgb, var(--rfb-night) 96%, transparent)}
.delivery{padding:5rem 1rem}.delivery-card,.policy-card{padding:1.5rem 1rem}
.hub-body .office-window-weather{display:none}
}
@media(max-width:600px){}

/* Library volumes: quiet hardcover depth without turning the covers into picture frames. */
.library-books a{position:relative;display:block;padding:0 6px 10px 0}
.library-books a::before{content:"";position:absolute;z-index:0;inset:4px 1px 15px 5px;border-radius:1px 5px 5px 1px;background:var(--rfb-wood);box-shadow:0 10px 18px var(--rfb-scrim-2)}
.library-books img,.library-books:has(a:nth-child(5)) img{position:relative;z-index:var(--rfb-z-base);border:0;border-left:5px solid #47291f;border-radius:1px 4px 4px 1px;box-shadow:inset 2px 0 #c89a4c,4px 5px 0 var(--rfb-paper-dim),7px 8px 0 var(--rfb-wood),0 13px 18px var(--rfb-scrim-1);transform:none;transition:transform .22s ease,filter .22s ease}
.library-books a:hover img,.library-books a:focus-visible img{transform:translateY(-5px);filter:brightness(1.05)}
.library-books a:focus-visible{outline:3px solid var(--rfb-focus);outline-offset:5px}
.library-books span{position:relative;z-index:2;margin-top:16px}

/* Human-centered phone polish: keep every choice readable, reachable, and in frame. */
@media(max-width:600px){
.crossroads-v2 .world-door{overflow:hidden;border-radius:22px;box-shadow:inset 0 0 0 2px #f4ce7a33,0 10px 25px var(--rfb-scrim-3)}
.crossroads-v2 .scarlet-door{left:8px;width:calc(33.333% - 12px);transform:none}.crossroads-v2 .library-door{left:50%;width:calc(33.333% - 12px);transform:translateX(-50%)}.crossroads-v2 .gus-door{right:8px;width:calc(33.333% - 12px);transform:none}
.crossroads-v2 .world-door strong{display:block;width:100%;font-size:var(--rfb-t-micro);line-height:1.1;letter-spacing:0;white-space:normal;overflow-wrap:anywhere}.crossroads-v2 .world-door::before,.crossroads-v2 .world-door::after{display:none}
.library-room header{padding-inline:42px}.library-room header h2{max-width:310px;margin-inline:auto}.library-books a{border-radius:5px}.library-books a:active img{transform:translateY(-3px) scale(.99)}.library-books b{line-height:1.05}.library-books span{opacity:.82}
}
@media(hover:none){:where(a,button,[role="button"]):active{filter:brightness(1.14);transform:scale(.985)}}
@media(max-width:600px){.library-books,.library-books:has(a:nth-child(5)){gap:28px 18px}.library-books a{padding-right:7px;padding-bottom:9px}.library-books img,.library-books:has(a:nth-child(5)) img{border-left-width:4px;box-shadow:inset 1px 0 #c89a4c,3px 4px 0 var(--rfb-paper-dim),6px 7px 0 var(--rfb-wood),0 11px 15px var(--rfb-scrim-1)}.library-books span{margin-top:15px}}

/* Phone pacing: reveal the next section promptly instead of reserving desktop-sized empty stages. */
@media(max-width:600px){
body:has(.book-hero) .book-hero{height:720px;min-height:0;padding:82px 18px 24px;gap:12px}
body:has(.evidence-room) .evidence-room{min-height:780px;padding:82px 16px 22px}
body:has(.passport-stage) .passport-stage{min-height:1080px;padding:82px 16px 24px}

.world-hub{min-height:760px}
.case-desk,.traveler-profile{min-height:0;padding:42px 18px}
}

/* EPUB-grounded cinematic mobile pass */
.library-room{background:linear-gradient(#120903b8,#120903ed)}
.library-books{align-items:end}
.library-books a{position:relative;padding:9px 8px 16px 18px;background:linear-gradient(90deg,var(--rfb-wood-deep) 0 13px,#7a472d 13px 16px,transparent 16px);border-radius:4px 12px 12px 4px;filter:drop-shadow(0 20px 18px var(--rfb-scrim-3))}
.library-books a::before{content:"";position:absolute;inset:0 0 7px 13px;background:var(--rfb-paper-dim);border:1px solid var(--rfb-paper);border-radius:2px 10px 10px 2px;box-shadow:inset -5px 0 #b99a62,inset -9px 0 #e5d5ae}
/* Sits over the cover art, not the caption: at bottom:25px it landed exactly
   on the title, so hovering a book hid the book's name. */
.library-books a::after{content:"OPEN THIS DOOR";position:absolute;z-index:5;left:29px;right:17px;bottom:24%;padding:8px 3px;background:#170c08;border:1px solid #cba35b;color:var(--rfb-brass-lit);font:700 var(--rfb-t-micro)/1 Montserrat,Arial;letter-spacing:var(--rfb-track-label);opacity:0;transform:translateY(6px);transition:opacity .22s,transform .22s;pointer-events:none}
.library-books a:hover::after,.library-books a:focus-visible::after{opacity:1;transform:none}
.library-books img,.library-books:has(a:nth-child(5)) img{position:relative;z-index:2;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;border:0;border-radius:1px 8px 8px 1px;box-shadow:inset -3px 0 #e5d6b5,3px 4px 0 #b49b72,0 14px 24px var(--rfb-scrim-3);transform-origin:left center}
.library-books a:hover img,.library-books a:focus-visible img{transform:perspective(700px) rotateY(-12deg) translateX(3px)}
.library-books span{position:relative;z-index:4;margin:14px -4px 0;padding:8px 4px 0;background:#2a140dcc;color:#d3ba8b}.library-books b{color:#fff4d8}
.teacher-workshop .teacher-open{z-index:7;background:linear-gradient(var(--rfb-brass-lit),#c99f59);color:#2a170c;border:2px solid var(--rfb-paper-warm);box-shadow:0 10px 30px var(--rfb-scrim-3)}
#teacherDialog .satchel-intro{margin:18px 0;max-width:620px;font-size:17px;line-height:1.45;letter-spacing:.03em}
.finale{background:linear-gradient(#07101bd1,#07101be8),url('assets/crossroads-waystation-v2.webp') center/cover}.finale .mini-fedora{filter:drop-shadow(0 18px 25px #000)}.finale h2{max-width:720px;margin:24px auto}
@media(max-width:600px){
.library-room{padding:68px 14px 34px}.library-room header{padding:8px 48px 0}.library-room header h2{font-size:42px;line-height:.88;margin:8px 0 20px}.library-books,.library-books:has(a:nth-child(5)){grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px;margin:10px auto 30px}.library-books a{padding:6px 5px 12px 12px}.library-books a::before{left:9px}.library-books a::after{left:20px;right:10px;bottom:24%}.library-books span{font-size:var(--rfb-t-micro);margin-top:9px}.library-books b{font-size:16px}.shelf-note{display:none}
.teacher-workshop{padding-top:68px}.teacher-copy{width:74%}.satchel-tools{margin-top:225px}.teacher-open{position:absolute;z-index:8;top:230px;left:16px;width:min(58vw,255px);margin:0}.teacher-note{position:absolute;top:286px;left:18px;width:55vw;text-align:left;line-height:1.45}
#teacherDialog{padding:26px 20px;max-height:88svh;overflow:auto}#teacherDialog h2{font-size:38px}#teacherDialog .activities{grid-template-columns:1fr;margin-top:14px}#teacherDialog .satchel-intro{min-height:0;padding:0;background:none;font-size:15px;margin:10px 0 18px}#teacherDialog .activities article{padding:16px}#teacherDialog .activities article h3{font-size:20px;margin:5px 0}#teacherDialog .activities article p{margin:7px 0}
.finale{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:78px 24px 68px}.finale h2{font-size:48px;line-height:.9}.finale .mini-fedora{margin-bottom:32px}.finale div{display:flex;justify-content:center;flex-wrap:wrap}
}

/* Final mobile viewport guard: animated stage scaling must never crop choices. */
@media(max-width:600px){
.crossroads-v2.stage-active{animation:none;transform:none;inset:0;width:100dvw}
.crossroads-v2 .scarlet-door{left:8px;transform:none}.crossroads-v2 .library-door{transform:translateX(-50%)}.crossroads-v2 .gus-door{right:8px;transform:none}
.library-books a::after{display:none}
.library-books span{margin-top:11px;padding:7px 3px 2px;min-height:43px;display:flex;flex-direction:column;justify-content:center}
}

/* ---- Phase 3 target sweep: nothing below the 44px floor (F-06) ---------- */
.case-actions a,.case-actions button,
.finale > div > a,.finale > div > button,
.scarlet-copy a,.scarlet-copy button{
  min-height:var(--rfb-tap);display:inline-flex;align-items:center;justify-content:center;
  padding-inline:var(--rfb-s4)
}
.library-panel .library-close,.library-close,.drawer-close{
  min-width:var(--rfb-tap);min-height:var(--rfb-tap);
  display:inline-flex;align-items:center;justify-content:center
}

/* ---- Phase 4 target sweep (F-06) --------------------------------------- */
.journey-rail button{
  min-width:var(--rfb-tap); min-height:var(--rfb-tap);
  display:inline-flex; align-items:center; justify-content:center;
}
.edition-drawer label,
.edition-drawer .consent-row{
  display:flex; align-items:center; gap:var(--rfb-s3);
  min-height:var(--rfb-tap); cursor:pointer;
}
.edition-drawer input[type=checkbox]{ width:24px; height:24px; flex:none; accent-color:var(--rfb-crimson); }

/* "I know the way" is the entry stage's secondary action — a returning visitor
   skipping the ceremony. It was a low-contrast underline hanging in the corner
   at every width. Give it the same framed-action treatment the rest of the
   storyworld uses, at every viewport rather than only on phones (F-16). */
.entry-skip{
  right:clamp(14px, 3vw, 44px);
  bottom:clamp(76px, 11vh, 120px);
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--rfb-tap); min-width:var(--rfb-tap);
  padding:0 var(--rfb-s4);
  border:1px solid color-mix(in srgb, var(--rfb-brass) 58%, transparent);
  border-bottom-color:color-mix(in srgb, var(--rfb-brass) 58%, transparent);
  border-radius:var(--rfb-r-sm);
  background:color-mix(in srgb, var(--rfb-night) 78%, transparent);
  color:var(--rfb-paper);
  font:600 var(--rfb-t-micro)/1 var(--rfb-ui);
  letter-spacing:var(--rfb-track-label); text-transform:uppercase;
  text-decoration:none; backdrop-filter:blur(6px);
  transition:background var(--rfb-med) var(--rfb-ease), color var(--rfb-med) var(--rfb-ease);
}
.entry-skip:hover,.entry-skip:focus-visible{ background:var(--rfb-brass); color:var(--rfb-ink); }

/* The hat carries the action as its accessible name; the entry title states it
   once on screen with an arrow pointing here. Two visible copies of the same
   instruction is one too many (F-17). */
.hotspot-label{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}
.first-visit-cue{ display:none; }

/* ---------------------------------------------------------------------------
   The experience is driven by pressing things painted into the artwork -- the
   fedora above all. A <button> gets cursor:default from the browser, not
   pointer, so a 403x306 hotspot over the hat gave a visitor no sign at all
   that it could be pressed. Same for the two clue hotspots on Scarlet's stage
   and the two close buttons. Added 2026-09-08.
   --------------------------------------------------------------------------- */
.hat-hotspot,.clue-hotspot,.drawer-close,.library-close,
.experience-stage button:not([disabled]),
.library-panel button:not([disabled]),
.edition-drawer button:not([disabled]){cursor:pointer}

/* ====================================================================
   THE DOORWAY — entrance curtain                        2026-09-08
   --------------------------------------------------------------------
   Two problems, one mechanism.

   1. experience.js used to add .experience-stage AFTER first paint.
      Until it landed, the browser laid out every 100svh <section> as a
      tall scrolling page, then collapsed them into one fixed stage.
      Measured CLS 1.00 on every cold load. The :not(.experience-stage)
      rules below give the page that final geometry from the very first
      paint; they stop matching the instant the script lands, so the
      existing stage machine is untouched.

   2. The visitor stared at #05080d for up to 3.9s on slow 4G. The
      curtain covers that wait with the site's own first sentence:
      a brass seam scored across the dark, then a horizontal split.

   The curtain is plain markup, so it covers from first paint. It
   self-clears at 3.2s, so a script failure can never trap anyone.
   ==================================================================== */

/* --- pre-script stage geometry (self-retiring) --- */
/* experience.js drives exactly two stages now: #entry and #crossroads.
   Stages 2-4 carried stale duplicates of pages that exist for real and
   were only reachable by wheeling past the waystation; they are gone.
   The :not() retires each rule the moment the script lands. */
body.experience-home #entry:not(.experience-stage),
body.experience-home #crossroads:not(.experience-stage){position:absolute;inset:0;width:100%;height:100%;min-height:0;opacity:0;visibility:hidden;pointer-events:none}
body.experience-home #entry:not(.experience-stage){opacity:1;visibility:visible;pointer-events:auto}

/* --- the curtain ---
   Its CSS is deliberately NOT here. A curtain whose job is to cover the
   wait for resources must not itself wait for a 107KB stylesheet: while
   this file was in flight the seam had no styles and rendered as nothing.
   The complete curtain lives inline in the <head> of index.html. */

/* the invitation now waits for the door instead of the clock */
.entry-instruction{animation:none}
body.curtain-done .entry-instruction{opacity:1}
body.curtain-done .entry-scene .entry-instruction{animation:invitationArrives 1s .3s var(--rfb-ease-arrive) forwards}
@media(max-width:600px){body.curtain-done .entry-scene .entry-instruction{animation:none}}

/* reduced-motion and .calm handling for the curtain is inline too,
   for the same reason. The invitation rule below stays here. */
body.curtain-done.calm .entry-instruction{animation:none;opacity:1}
@media (prefers-reduced-motion:reduce){
  body.curtain-done .entry-instruction{animation:none;opacity:1}
}

/* ====================================================================
   THE FEDORA ANSWERS THE CURSOR                          2026-09-08
   --------------------------------------------------------------------
   The hat was the site's thesis and its main call to action, but it only
   changed state: hover it and it jumped to a pose. Now it leans toward
   the pointer, its shadow slides the other way, and its ember glow moves
   with the cursor so the light seems to come from wherever you are.

   It composes with the existing fedoraAlive breathing loop by using the
   standalone rotate/translate properties, which an animated `transform`
   does not overwrite. The light lives in the image's own drop-shadow: an
   overlay with mix-blend-mode rasterises against a clipped backdrop
   inside the parent's perspective context and paints a hard-edged box.
   ==================================================================== */
.hat-hotspot{--tilt-x:0;--tilt-y:1;--tilt:0;--drift-x:0;--drift-y:0;--sheen:0}
.entry-scene .fedora-layer{
  rotate:var(--tilt-x) var(--tilt-y) 0 calc(var(--tilt) * 1deg);
  translate:calc(var(--drift-x) * 7px) calc(var(--drift-y) * 5px);
  transition:rotate .4s var(--rfb-ease-arrive),translate .4s var(--rfb-ease-arrive)
}
.entry-scene .hat-shadow{
  translate:calc(var(--drift-x) * -13px) 0;
  transition:translate .55s var(--rfb-ease-arrive),opacity .4s
}
/* While tracking, the variables change every frame and the JS lerp is doing
   the smoothing. A CSS transition on top restarts its interpolation on every
   update, so the value never arrives - the light stayed pinned at 0. */
.hat-hotspot.is-tracking .fedora-layer,
.hat-hotspot.is-tracking .hat-shadow{transition:none}
/* Held: the hat sits a touch lower and closer, the way something does when you
   have hold of it. Uses the standalone `scale` property so it composes with the
   rotate/translate the spring is driving and the transform the breathing loop
   animates. */
.hat-hotspot.is-held .fedora-layer{scale:1.035}
.hat-hotspot.is-held .hat-shadow{opacity:.72;filter:blur(11px)}
.hat-hotspot.is-dragged{cursor:grabbing}
@media (prefers-reduced-motion:reduce){
  .hat-hotspot.is-held .fedora-layer{scale:1}
}
/* The ember pulse used to live in the fedoraAlive keyframes, but Chrome
   resolves var() inside keyframes once and caches it, so a filter animated
   there can never track a pointer. The pulse is now a registered custom
   property the filter reads, which leaves the filter itself static and free
   to follow the cursor. */
@property --pulse{syntax:"<number>";inherits:true;initial-value:0}
@keyframes fedoraPulse{0%,100%{--pulse:0}50%{--pulse:1}}
.entry-scene .fedora-layer{
  filter:drop-shadow(calc(var(--drift-x) * -13px) calc(22px + var(--pulse) * 2px) 20px var(--rfb-scrim-3))
         drop-shadow(calc(var(--drift-x) * 9px) calc(var(--drift-y) * 7px)
                     calc(13px + var(--pulse) * 6px + var(--sheen,0) * 14px) var(--rfb-ember))
}
.entry-scene.active .fedora-layer{animation:fedoraAlive 7.2s var(--rfb-ease-breathe) infinite,
                                            fedoraPulse 7.2s var(--rfb-ease-breathe) infinite}
@media (prefers-reduced-motion:reduce){
  .entry-scene.active .fedora-layer{animation:none}
}
.calm .entry-scene.active .fedora-layer{animation:none}
/* while the pointer is being tracked the old jump-to-pose hover is retired.
   Its filter has to go too, or it beats the pointer-driven one on specificity
   for exactly as long as the cursor is over the hat - which is the whole time
   the effect is meant to be visible. */
.hat-hotspot.is-tracking:hover .fedora-layer{transform:none;animation-play-state:running;
  filter:drop-shadow(calc(var(--drift-x) * -15px) calc(26px + var(--pulse) * 2px) 22px var(--rfb-scrim-4))
         drop-shadow(calc(var(--drift-x) * 11px) calc(var(--drift-y) * 8px)
                     calc(18px + var(--pulse) * 6px + var(--sheen,0) * 16px) var(--rfb-ember-lit))}
.hat-hotspot.is-tracking:hover .hat-shadow{animation:shadowAlive 7.2s var(--rfb-ease-breathe) infinite}
/* keyboard users get a lift, since there is no pointer to follow */
.hat-hotspot:focus-visible .fedora-layer{rotate:0 1 0 -4deg;translate:0 -6px}
@media (prefers-reduced-motion:reduce){
  .entry-scene .fedora-layer,.entry-scene .hat-shadow{rotate:none;translate:none;transition:none}
}
.calm .entry-scene .fedora-layer,.calm .entry-scene .hat-shadow{rotate:none;translate:none;transition:none}

/* Crossroads fedora: the desktop plate is 196 KB, the -sm is 51 KB and is the same
   picture at phone size. This must stay after the desktop rule above -- equal
   specificity, so source order decides. */
@media(max-width:600px){#crossroads.stage-active .waystation-fedora img{content:url('assets/fedora-waystation-v2-sm.webp')}}

/* The library backdrop is a 319 KB plate behind a translucent gradient, and the room
   is in the DOM from first paint, so the browser fetches it during the entry stage --
   before anyone has opened the library. On phones the 105 KB -sm plate is
   indistinguishable under that much gradient. */
@media(max-width:600px){body.library-open .library-room{background:linear-gradient(#120903b8,#120903ed),url('assets/crossroads-waystation-v2-sm.webp') center/cover}}

/* Crossroads and library plates are ~160 KB that used to be fetched during the ENTRY
   stage, competing with the LCP element for a scene nobody had reached yet. Gating
   them on the body classes the stage machine already sets means the bytes arrive when
   the visitor does. */
body.library-open .library-room{background:linear-gradient(#120903b8,#120903ed),url('assets/crossroads-waystation-v2.webp') center/cover fixed}
@media(max-width:600px){body.library-open .library-room{background:linear-gradient(#120903b8,#120903ed),url('assets/crossroads-waystation-v2-sm.webp') center/cover}}

/* ====================================================================
   A DOOR HELD AJAR
   Press and hold a brass plate and that doorway opens a crack: light
   from the room beyond spills through the archway, and (if sound is on)
   that room's tone leaks with it. Release and it closes.

   The light is clipped to the SAME ellipse as the portal weather, so it
   reads as light coming through the opening rather than a glow sitting
   on top of the picture. The rest of the scene dims very slightly, which
   is what actually sells it -- a door is only bright relative to the
   wall around it.
   ==================================================================== */
.portal-spill{
  position:absolute;z-index:3;pointer-events:none;mix-blend-mode:screen;
  opacity:0;transform:scale(.94);
  transition:opacity .55s var(--rfb-ease-arrive),transform .55s var(--rfb-ease-arrive);
  will-change:opacity,transform
}
.spill-scarlet{left:8.2%;top:17%;width:25.5%;height:55%;
  clip-path:ellipse(49% 55% at 50% 45%);
  background:radial-gradient(ellipse at 50% 52%,#cfe4ff 0 4%,#7fa8d8b0 22%,#37527a5c 48%,transparent 74%)}
.spill-library{left:38.7%;top:18%;width:23%;height:53%;
  clip-path:ellipse(49% 54% at 50% 45%);
  background:radial-gradient(ellipse at 50% 50%,#fff3d0 0 5%,#f0c274b8 24%,#8a5f2456 50%,transparent 76%)}
.spill-gus{right:8.3%;top:16%;width:25.5%;height:57%;
  clip-path:ellipse(49% 55% at 50% 45%);
  background:radial-gradient(ellipse at 50% 44%,#eaffd8 0 4%,#a8d98bb0 24%,#3f6b3a5c 50%,transparent 76%)}

.crossroads-scene[data-peek] .waystation-backdrop{filter:brightness(.88) saturate(.94)}
.crossroads-scene .waystation-backdrop{transition:filter .55s var(--rfb-ease-arrive)}
.crossroads-scene[data-peek="scarlet"] .spill-scarlet,
.crossroads-scene[data-peek="library"] .spill-library,
.crossroads-scene[data-peek="gus"]     .spill-gus{opacity:.92;transform:scale(1)}
/* the plate you are holding sits forward and warms */
.world-door.is-ajar{filter:drop-shadow(0 0 18px #f0c27466)}
.world-door.is-ajar .plaque-kicker{opacity:1}

/* Reduced motion: the door still opens, it just does not animate doing it. */
@media (prefers-reduced-motion:reduce){
  .portal-spill,.crossroads-scene .waystation-backdrop{transition:none}
  .portal-spill{transform:none}
  .crossroads-scene[data-peek="scarlet"] .spill-scarlet,
  .crossroads-scene[data-peek="library"] .spill-library,
  .crossroads-scene[data-peek="gus"]     .spill-gus{transform:none}
}
body.calm .portal-spill,body.calm .crossroads-scene .waystation-backdrop{transition:none}


/* ====================================================================
   THE WAYSTATION'S FIVE FLAMES                          2026-09-10
   --------------------------------------------------------------------
   Ported back from the app, where the waystation lanterns were given the
   same life the doorway's lantern already had. Positions were found by
   scanning crossroads-waystation-v2.webp for warm high-luminance peaks
   rather than by eye: two on Scarlet's arch, two on the library's, and
   the hanging oil lamp above and right of Gus's. Gus's arch has none --
   it opens onto daylight.

   TWO THINGS THIS GOT WRONG FIRST, both worth keeping written down:

   1. The backdrop is object-fit:cover, so at 1920x855 the painting
      renders 1949x1097 with 114px cropped top and bottom. A percentage
      of the SECTION is not a percentage of the ARTWORK, and the flames
      landed up to 114px from their lanterns. The four custom properties
      below rebuild the covered-art box in pure CSS -- the same geometry
      .artwork-plane builds with an element on the entry, but needing no
      wrapper. 1.015 folds in the backdrop's own scale().

   2. The flicker used to live on .way-flame itself, so its animated
      transform REPLACED the centring translate(-50%,-50%) instead of
      composing with it. That is the same defect the Gus map markers had,
      where .is-entering overwrote the centring and a clicked marker
      jumped half its own width. Placement is on the span; the flicker is
      on the child.
   ==================================================================== */
.crossroads-v2{
  --art-w:max(101.5vw,180.348svh);
  --art-h:max(57.124vw,101.5svh);
  --art-x:calc((100vw - var(--art-w)) / 2);
  --art-y:calc((100svh - var(--art-h)) / 2);
}
.way-flame{
  /* z-index 2, NOT 4: the lanterns are painted on the wall BEHIND Scarlet and
     Gus, so their flames must be occluded by the characters (z-index 3) and by
     the hat (4). At 4 they floated on top of the actors -- invisible on a wide
     desktop, obvious on a tall tablet where the crop brings the actors across
     the arch pillars.
     Placement only; each lamp is sized below, and the flicker lives on the
     child because an animation's transform REPLACES this centring translate
     instead of composing with it. */
  position:absolute;z-index:2;pointer-events:none;
  transform:translate(-50%,-50%);
}
.way-flame i{
  display:block;width:100%;height:100%;
  border-radius:52% 48% 44% 46%;
  background:radial-gradient(ellipse at 50% 73%,#fffbe3 0 10%,#ffe08a 22%,#ff9f32 43%,var(--rfb-ember) 61%,transparent 74%);
  filter:drop-shadow(0 0 3px var(--rfb-focus)) drop-shadow(0 0 8px #f07922);
  transform-origin:50% 100%;
  animation:wayFlameFlicker .22s ease-in-out infinite alternate;
  will-change:transform,opacity;
}
/* DEPTH. Every flame used to be 17.6 x 50.8 art px regardless of which lamp it
   belonged to, which both flattened the picture and made the flame taller than
   the lantern holding it -- on a tall tablet the library-right flame overshot
   its glass and landed on Gus's hat.

   Measured off the plate, each lamp's painted flame:
        lamp                flame (art px)   depth
        scarlet outer          8 x 14        mid
        scarlet inner          5 x  7        far  (street lamp through the arch)
        library left           9 x 16        mid
        library right         10 x 17        mid
        hanging oil lamp      18 x 38        near (foreground, on a chain)
   A four-to-one range. No px floors: a floor would re-flatten them on a phone,
   which is exactly where the depth has to survive. Bloom scales with distance
   too -- the far street lamp barely carries. */
.way-flame-1{
  left:calc(var(--art-x) + var(--art-w) * .0760);top:calc(var(--art-y) + var(--art-h) * .3937);
  width:calc(var(--art-w) * .0048);height:calc(var(--art-h) * .0149);
}
.way-flame-2{
  left:calc(var(--art-x) + var(--art-w) * .2922);top:calc(var(--art-y) + var(--art-h) * .3874);
  width:calc(var(--art-w) * .0030);height:calc(var(--art-h) * .0074);
}
.way-flame-3{
  left:calc(var(--art-x) + var(--art-w) * .3831);top:calc(var(--art-y) + var(--art-h) * .4389);
  width:calc(var(--art-w) * .0054);height:calc(var(--art-h) * .0170);
}
.way-flame-4{
  left:calc(var(--art-x) + var(--art-w) * .6144);top:calc(var(--art-y) + var(--art-h) * .4318);
  width:calc(var(--art-w) * .0060);height:calc(var(--art-h) * .0181);
}
.way-flame-5{
  left:calc(var(--art-x) + var(--art-w) * .9590);top:calc(var(--art-y) + var(--art-h) * .1993);
  width:calc(var(--art-w) * .0108);height:calc(var(--art-h) * .0404);
}




/* Below 900px the backdrop drops its scale() and goes width:auto;min-width:100%
   with left:50%/translateX(-50%); below 600px it returns to inset:0 against the
   -sm plate. Both end up as the same cover geometry MINUS the 1.015. Measured
   in a real browser: at 820x1180 the art is exactly 1.777 x 100svh, and at
   390x844 it is max(100vw, 177.5svh). Get this wrong and every flame drifts on
   a phone while being pixel-perfect on a desktop. */
@media (max-width:900px){
  .crossroads-v2{
    --art-w:max(100vw,177.683svh);
    --art-h:max(56.281vw,100svh);
    --art-x:calc((100vw - var(--art-w)) / 2);
    --art-y:calc((100svh - var(--art-h)) / 2);
  }
}
.way-flame-2 i{animation-duration:.3s;filter:drop-shadow(0 0 1px var(--rfb-focus)) drop-shadow(0 0 3px #f07922)}
.way-flame-5 i{filter:drop-shadow(0 0 6px var(--rfb-focus)) drop-shadow(0 0 16px #f07922)}
.way-flame-3 i{animation-duration:.19s}
.way-flame-4 i{animation-duration:.24s}
.way-flame-5 i{animation-duration:.33s}
@keyframes wayFlameFlicker{
  from{transform:skewX(-4deg) scale(.94,1.04);opacity:.84}
  to{transform:skewX(5deg) scale(1.08,.92);opacity:1}
}
body.calm .way-flame i,body.reduced-motion .way-flame i{animation:none;transform:none;opacity:.92}
@media (prefers-reduced-motion:reduce){
  .way-flame i{animation:none;transform:none;opacity:.92}
}

/* ====================================================================
   NOMINEE MONOGRAM                                      2026-09-10
   --------------------------------------------------------------------
   CSSDA nomination, 10 September 2026, in UI Design, UX Design and
   Innovation. CSSDA asks that the monogram link back to the nomination
   page, which it does.

   It waits for the curtain: an award badge is not the first thing this
   site should say. Swap the asset for the plain "Nominee" version once
   voting closes.
   ==================================================================== */
.rfb-award{
  position:fixed;z-index:60;
  right:clamp(14px,2.2vw,30px);bottom:clamp(14px,2.4svh,26px);
  display:block;width:clamp(54px,5.6vw,82px);
  opacity:0;visibility:hidden;
  filter:drop-shadow(0 3px 11px rgba(0,0,0,.62));
  transition:opacity .7s ease .8s,visibility 0s linear .8s,transform .3s var(--rfb-ease-arrive);
}
body.curtain-done .rfb-award{opacity:.9;visibility:visible}
.rfb-award:hover,.rfb-award:focus-visible{opacity:1;transform:translateY(-3px)}
.rfb-award:focus-visible{outline:2px solid var(--rfb-focus);outline-offset:5px;border-radius:6px}
.rfb-award img{display:block;width:100%;height:auto}
@media (max-width:600px){
  /* A phone lays its bottom furniture right across the full width. Measured at
     390x844: the stage arrows sit 16-60px up and .journey-next lands at
     x331-375 -- exactly where a bottom-right badge goes, so it was rendering
     underneath the forward arrow and invisible. Above that, the entry's skip
     link and the waystation's Gus door both reach 93-137px.
     Clear the whole stack rather than fight any one piece of it. */
  .rfb-award{width:46px;right:10px;bottom:9.5rem;opacity:.85}
}


/* ====================================================================
   THE WAYSTATION PLANE                                  2026-09-10
   --------------------------------------------------------------------
   .waystation-backdrop is object-fit:cover, so at 1920x855 the painted
   art actually renders 1949x1097 with 114px cropped off the top and the
   bottom. Anything positioned as a percentage of the SECTION therefore
   sits up to 114px away from the feature it is meant to be pinned to --
   which is why the flames were nowhere near their lanterns.

   This plane is the same box the covered art occupies, so a percentage
   inside it is a percentage OF THE ARTWORK. Same trick .artwork-plane
   uses on the entry, and the same lesson the app learned twice:
   check which coordinate space a number lives in.
   ==================================================================== */


/* ---------------------------------------------------------------------------
   THE BRASS PLATES ON A PHONE

   At 390px the plate is 118px wide with 5px of padding, and "FOLLOW SCARLET"
   measured 103px of the 108px content box -- 2px of air each side. The words
   were reaching the engraved inner border and sitting on the screws, and any
   font fallback wider than Cormorant Garamond would have pushed them past it.
   "OPEN THE LIBRARY" already wrapped to two lines and read correctly, so the
   fix gives the other two the same room rather than shrinking the type.
   Tablet and desktop are untouched.
   --------------------------------------------------------------------------- */
@media (max-width:480px){
  .crossroads-v2 .world-door{padding-inline:13px}
  .crossroads-v2 .world-door strong{line-height:1.16;text-wrap:balance;hyphens:none}
}