/* Alice archive — responsive room geometry shared by both light modes. */
:root{color-scheme:dark;--ink:#f2eee5;--muted:#b9b6ae;--line:#353532;--amber:#e7b66c;--bg:#090a0b;--serif:Georgia,'Times New Roman',serif;--mono:'Courier New',monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.65}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}a{color:inherit;text-underline-offset:5px}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--amber);outline-offset:4px}a:hover{color:var(--amber)}button:disabled{cursor:default}img{max-width:100%;display:block}button,a{touch-action:manipulation}.visually-hidden,.skip-link:not(:focus){position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip-link:focus{display:block;padding:10px 5%;background:var(--bg)}
.site-header{max-width:1440px;margin:auto;padding:19px 4.5%;display:grid;grid-template-columns:minmax(260px,1fr) auto minmax(260px,1fr);align-items:center;gap:24px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:14px;text-decoration:none;min-width:0;justify-self:start}.apple-mark{width:34px;height:40px}.brand b{font:28px/1 var(--serif);text-transform:none}.brand small{display:block;font:10px/1.5 var(--mono);letter-spacing:.55px;text-transform:none;margin-top:4px}.site-header nav{display:flex;align-items:center;justify-self:end;gap:24px;font-size:13px}.site-header nav a{text-decoration:none;min-height:44px;display:flex;align-items:center}.site-header .social{font:12px var(--mono);margin-left:4px;padding-left:20px;border-left:1px solid var(--line);gap:9px}.menu-toggle{display:none}
.play-section{max-width:1440px;position:relative;margin:auto}.scene-clip{overflow:hidden}.room-scene{position:relative;width:100%;aspect-ratio:1402/1122}.room-photo{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat;pointer-events:none}.room-day{background-image:url('assets/room-lights-on.png')}.room-night{background-image:url('assets/room-lights-off.jpg');opacity:0;transition:opacity .35s ease}.lights-off .room-night{opacity:1}.scene-screen{position:absolute;left:33.2%;top:19.8%;width:42.2%;height:39.4%;border:3px solid #171819;border-radius:7% / 6%;overflow:hidden;background:#050505;box-shadow:0 0 0 1px #4447}.scene-screen iframe{border:0;display:block;width:100%;height:100%;background:#050505}
.story-section{max-width:1280px;margin:auto;display:grid;grid-template-columns:1fr 1.1fr;gap:10%;padding:68px 5% 76px;border-top:1px solid var(--line)}.eyebrow{font:10px/1.6 var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:0 0 14px}h2{font:400 clamp(34px,3.7vw,52px)/1.06 var(--serif);letter-spacing:-1.6px;margin:0}.book-figure{margin:28px 0 0;width:250px;max-width:100%}.book-zoom{display:block;border:0;padding:0;width:100%;background:#e7e3c9;cursor:zoom-in;border-radius:2px;overflow:hidden}.book-zoom img{width:100%;height:auto;transition:opacity .2s}.book-zoom:hover img{opacity:.87}.story-copy{padding-top:30px;max-width:570px}.story-copy p{margin:0 0 20px;color:#cfcdc6;font-size:16px;line-height:1.8}.story-copy p:first-child{color:var(--ink)}.text-link{font-size:13px;color:var(--amber);display:inline-block;padding:4px 0}.text-link span{margin-left:7px}footer{max-width:1280px;margin:auto;padding:22px 5% 28px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px;font:11px/1.8 var(--mono);color:var(--muted)}footer p{margin:0}footer>div{display:flex;gap:26px}footer a{text-decoration:none}
body.dialog-open{overflow:hidden}dialog{color:var(--ink);background:#101112;border:1px solid #5a5852;box-shadow:0 20px 100px #0009;padding:0;max-height:90vh;max-height:90dvh}dialog::backdrop{background:#000c;backdrop-filter:blur(5px)}.guide-dialog{width:min(680px,calc(100% - 32px));margin:auto}.dialog-heading{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:12px 22px 8px;background:#101112;border-bottom:1px solid var(--line)}.dialog-heading .eyebrow{margin:0}.dialog-close{background:none;border:0;width:44px;height:44px;font:30px/1 Arial,sans-serif;flex-shrink:0}.dialog-close:hover{color:var(--amber)}.guide-content{padding:25px 34px 32px}.guide-content h2{font-size:40px;margin-bottom:30px}.steps{list-style:none;padding:0;margin:0;counter-reset:steps}.steps li{counter-increment:steps;display:flex;gap:22px;padding:20px 0;border-top:1px solid var(--line)}.steps li:before{content:'0' counter(steps);font:13px/1.8 var(--mono);color:var(--amber)}.steps h3{font:20px/1.3 var(--serif);margin:0 0 8px}.steps p{font-size:14px;line-height:1.75;margin:0;color:var(--muted)}.movement-guide{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:10px}.guide-intro{font-size:13px;color:var(--muted);margin:0 0 20px}.movement-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 16px;padding-bottom:25px}.movement-grid article h3{font:18px var(--serif);margin:9px 0 5px}.movement-grid article p{font-size:11px;line-height:1.5;margin:0;color:var(--muted)}.movement-grid svg{display:block;width:100%;max-width:125px;height:auto}.guide-note{font-size:12px;color:var(--muted);margin:22px 0}.return-game{background:var(--ink);color:#171819;border:1px solid var(--ink);padding:11px 18px;min-height:44px;font-size:13px}.return-game span{margin-left:15px}.book-dialog{width:min(620px,calc(100% - 28px));margin:auto;padding:55px 18px 16px}.book-dialog>.dialog-close{position:absolute;right:8px;top:6px}.book-dialog>img{width:100%;height:auto;max-height:calc(90dvh - 112px);object-fit:contain}.credits-page{max-width:800px;margin:auto;padding:50px 24px 75px}.credits-page h1{font:44px/1.1 var(--serif);margin:30px 0}.credits-page p{color:var(--muted);margin-bottom:25px}.credits-page a{color:var(--ink)}
@media(min-width:1600px){.story-section{padding-left:48px;padding-right:48px}}
@media(max-width:1120px){.site-header{grid-template-columns:auto 1fr auto;gap:18px}.site-header nav{gap:15px}.site-header .social{padding-left:12px;margin-left:0}.brand small{display:none}}
@media(max-width:900px){.site-header{grid-template-columns:auto 1fr auto}.site-header nav a:not(.social){display:none}.site-header .social{border-left:0;padding-left:0}.story-section{gap:7%;padding-top:45px}.story-copy{padding-top:28px}.story-copy p{font-size:15px}.book-figure{width:230px}}
@media(max-width:700px){.site-header{padding:14px 5%;position:relative;grid-template-columns:1fr auto;gap:10px 12px}.brand{grid-column:1;grid-row:1;gap:10px}.brand b{font-size:25px}.brand small{display:block;font-size:8px;letter-spacing:.3px}.apple-mark{width:30px;height:36px}.menu-toggle{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:none;border:1px solid var(--line);width:44px;height:44px;border-radius:2px}.menu-toggle span{display:block;width:19px;height:1px;background:var(--ink)}.site-header nav{grid-column:1/-1;grid-row:3;display:none;padding-top:3px;gap:3px;flex-direction:column;align-items:stretch;justify-self:stretch}.site-header nav.is-open{display:flex}.site-header nav a:not(.social){display:flex}.site-header nav a{padding:0 8px}.site-header .social{border-left:0;border-top:1px solid var(--line);padding-left:8px}.room-scene{width:190%;margin-left:-53.4%}.scene-screen{border-width:2px}.story-section{display:block;padding:35px 6% 45px}.story-object h2{font-size:40px;line-height:1.07}.story-object h2 br{display:none}.book-figure{width:220px;margin:24px 0 0}.story-copy{padding-top:28px;max-width:none}.story-copy p{font-size:16px;line-height:1.8}.eyebrow{font-size:9px}.text-link{font-size:12px}footer{flex-direction:column;align-items:flex-start;padding:22px 6%;gap:12px;font-size:10px}footer>div{width:100%;justify-content:space-between}.guide-dialog{width:calc(100% - 20px);max-height:94vh;max-height:94dvh}.dialog-heading{padding:6px 12px 6px 20px}.guide-content{padding:22px 20px}.guide-content h2{font-size:33px;letter-spacing:-1px}.steps li{gap:14px;padding:17px 0}.steps h3{font-size:19px}.steps p{font-size:14px}.movement-grid{grid-template-columns:repeat(2,1fr)}.book-dialog{padding:54px 12px 16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Two supplied images, preserved in full and individually zoomable. */
.story-gallery{display:grid;grid-template-columns:1.44fr 1fr;gap:20px;max-width:430px;margin-top:28px;align-items:start}
.story-gallery .book-figure{width:auto;max-width:none;margin:0;min-width:0}
.art-zoom{display:block;border:0;padding:0;width:100%;background:#000;cursor:zoom-in;border-radius:2px;overflow:hidden}
.art-zoom img{width:100%;height:auto;transition:opacity .2s}.art-zoom:hover img{opacity:.85}

@media(max-width:700px){.story-gallery{max-width:390px;gap:16px;margin-top:24px}}

/* Real scene controls share the photograph's coordinate system. */
.lamp-hotspot{position:absolute;z-index:3;left:6.5%;top:1%;width:18.5%;height:19.5%;min-width:44px;min-height:44px;padding:0;border:0;border-radius:48%;background:transparent;cursor:pointer;outline-offset:3px}
.lamp-cutout{display:none}.lamp-halo{position:absolute;inset:32% 2% 2%;border-radius:50%;background:radial-gradient(ellipse,#f0b65c36,transparent 70%);opacity:0;transition:opacity .2s;pointer-events:none}
.lamp-hotspot:hover .lamp-halo,.lamp-hotspot:focus-visible .lamp-halo{opacity:1}.lamp-hotspot:focus-visible{outline:2px dashed var(--amber)}
.guide-sticker{position:absolute;z-index:3;left:48.2%;top:62.5%;width:clamp(112px,11.5vw,160px);min-height:44px;display:flex;align-items:center;justify-content:center;padding:8px 11px;color:#343029;background:#ded0a7;border:1px solid #a4926b;border-radius:1px 2px 3px 1px;font:13px/1.3 var(--mono);text-decoration:none;white-space:nowrap;transform:rotate(-4deg);box-shadow:1px 3px 4px #0006,inset 0 0 10px #8d744323;transition:transform .15s,box-shadow .15s,background .15s}
.guide-sticker:before{content:"";position:absolute;left:38%;top:-5px;width:29%;height:11px;background:#c3b388a8;transform:rotate(3deg);border-left:1px solid #ffffff17;border-right:1px solid #ffffff17;pointer-events:none}
.guide-sticker:hover{color:#241f18;background:#e9ddb9;transform:rotate(-2deg);box-shadow:1px 4px 7px #0007}.guide-sticker:focus-visible{outline:2px solid var(--amber);outline-offset:5px}
.lights-off .guide-sticker{background:#b6b29f;color:#242622;border-color:#727568;box-shadow:1px 3px 4px #0008}.lights-off .guide-sticker:before{background:#a3a38c9c}
#story-title{text-transform:none;text-wrap:balance;font-size:clamp(34px,3.7vw,50px)}
.movement-guide>h3{font:20px/1.3 var(--serif);margin:20px 0 12px}.movement-grid article h3{display:flex;align-items:center;gap:7px;min-height:32px;margin:10px 0 6px}.movement-grid .piece-symbol{width:30px;height:32px;flex-shrink:0;color:var(--ink)}
.book-dialog>img{max-height:calc(90vh - 78px);max-height:calc(90dvh - 78px)}
@media(max-width:700px){
 .guide-sticker{left:48.5%;top:62%;width:112px;min-height:44px;padding:7px 9px;font-size:11px}
 /* Preserve the large CRT. Bring the photographed lamp into the visible upper-left foreground. */
 .lamp-hotspot{left:29%;top:0;width:20%;height:auto;aspect-ratio:355/250;border-radius:0}
 .lamp-cutout{display:block;position:absolute;inset:0;background-repeat:no-repeat;background-size:394.9296% 448.8%;background-position:0 0;pointer-events:none;clip-path:polygon(0 24%,8% 18%,23% 9%,26% 0,72% 0,75% 12%,81% 20%,91% 35%,98% 49%,98% 60%,93% 70%,78% 81%,62% 87%,45% 92%,30% 91%,27% 86%,27% 70%,29% 54%,36% 35%,32% 25%,25% 22%,10% 32%,0 40%)}
 .lamp-day{background-image:url('assets/room-lights-on.png')}.lamp-night{background-image:url('assets/room-lights-off.jpg');opacity:0;transition:opacity .35s}.lights-off .lamp-night{opacity:1}.lamp-hotspot .lamp-halo{inset:45% 0 0 25%}
 .story-gallery{max-width:390px}.movement-guide>h3{font-size:21px}
}
@media(max-width:350px){.story-gallery{grid-template-columns:1fr;gap:22px;max-width:250px}.story-gallery .art-figure{max-width:205px}.guide-sticker{left:46%;width:112px}.movement-grid{gap:20px 10px}}

/* Handwritten marker on the monitor's upper plastic bezel. */
.monitor-message{position:absolute;z-index:2;left:32.5%;top:13.1%;width:43%;margin:0;color:#080808;font:700 clamp(12px,2.1vw,30px)/1.15 'Segoe Print','Bradley Hand','Comic Sans MS',cursive;text-align:center;white-space:nowrap;letter-spacing:-.45px;transform:rotate(-1.3deg);text-shadow:.25px .25px 0 #080808;pointer-events:none}
.lights-off .monitor-message{color:#080808;text-shadow:.25px .25px 0 #080808}
@media(max-width:700px){.monitor-message{font-size:clamp(12px,3.8vw,27px);letter-spacing:-.35px}}

/* A small handwritten arrow makes the photographic light switch discoverable. */
.lamp-hint{position:absolute;left:calc(100% - 8px);top:32%;display:flex;align-items:flex-start;gap:3px;width:max-content;color:#f0d9b0;font:12px/1.5 var(--mono);letter-spacing:.15px;text-transform:none;white-space:nowrap;text-shadow:0 1px 4px #000,0 0 10px #000;pointer-events:none;opacity:1;visibility:visible;transition:opacity .25s,visibility .25s;animation:lamp-hint-pulse 1.4s ease-in-out 3}
.lamp-hint svg{width:44px;height:33px;flex-shrink:0;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px #000)}
.lamp-hint-tap{display:none}
.lamp-learned .lamp-hint{opacity:0;visibility:hidden;animation:none}
.lamp-hotspot:focus-visible .lamp-hint{opacity:1;visibility:visible;animation:none}
@media(hover:hover) and (pointer:fine){.lamp-learned:hover .lamp-hint{opacity:1;visibility:visible}}
.lamp-hotspot.hint-dismissed .lamp-hint{opacity:0;visibility:hidden;animation:none}
@media(hover:none),(pointer:coarse){.lamp-hint-click{display:none}.lamp-hint-tap{display:inline}}
@keyframes lamp-hint-pulse{0%,100%{opacity:1}50%{opacity:.6}}
.story-source{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:1px;color:var(--amber);font:12px/1.6 var(--mono);text-decoration:underline;text-decoration-color:#e7b66c66;text-underline-offset:5px}
.story-source:hover{text-decoration-color:currentColor;color:var(--ink)}
.story-section{row-gap:44px}
.story-timeline{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;padding:0;margin:12px 0 0;column-gap:0}
.story-timeline li{position:relative;border-top:1px solid var(--line);padding:24px 24px 0 0;min-width:0}
.story-timeline li:before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;background:var(--amber);border-radius:50%;box-shadow:0 0 0 5px var(--bg)}
.story-timeline li:last-child{padding-right:0}
.story-timeline time{display:block;color:var(--amber);font:12px/1.5 var(--mono)}
.story-timeline h3{font:20px/1.2 var(--serif);font-weight:normal;margin:12px 0 10px}
.story-timeline p{color:var(--muted);font-size:13px;line-height:1.7;margin:0;max-width:250px}
@media(max-width:700px){
 .lamp-hint{left:92%;top:30%;font-size:11px;gap:2px}.lamp-hint svg{width:34px;height:29px}
 .story-timeline{display:block;margin-top:35px;margin-left:4px}
 .story-timeline li{border-top:0;border-left:1px solid var(--line);padding:0 0 30px 24px}
 .story-timeline li:before{left:-4px;top:6px}
 .story-timeline li:last-child{padding-bottom:0}
 .story-timeline h3{margin:8px 0}.story-timeline p{max-width:360px}
}