*{box-sizing:border-box}
:root{color-scheme:dark;font-family:Arial,sans-serif;background:#080706;color:#eee7d9}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
button:disabled{cursor:default}
button:focus-visible{outline:1px solid #efd8ac;outline-offset:6px}
[hidden]{display:none!important}
#experience,#stage,#scene,#house-lights{position:absolute;inset:0}
#experience{height:100vh;height:100dvh;overflow:hidden;background:#181410;--entry-seconds:3.2s}
#stage{isolation:isolate;background:#050505}
#scene{filter:brightness(.48) blur(2.4px);transform:translateZ(0);overflow:hidden}
#atmosphere{position:absolute;inset:-5%;width:110%;height:110%;object-fit:cover;opacity:.55}
@media(aspect-ratio:16/9){#atmosphere{display:none}}
#still,#films,#films video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#still{z-index:1}#films{z-index:2}#films video{visibility:hidden}#films video.active{visibility:visible}
#stage.moving #still{visibility:hidden}
#house-lights{z-index:3;pointer-events:none;background:radial-gradient(ellipse at center,transparent 35%,#070606b0 100%),linear-gradient(#cfa67118,#21170d35);opacity:1;transition:opacity 1.2s ease}
#experience.entered{background:#000}
#experience.entered #scene{filter:none}
#experience.entered #house-lights{opacity:0}
#experience.entering #scene{animation:step-into-light var(--entry-seconds) cubic-bezier(.2,.65,.3,1) both}
#experience.is-hidden #scene{animation-play-state:paused}
@keyframes step-into-light{0%{filter:brightness(.48) blur(2.4px)}30%{filter:brightness(.68) blur(1px)}100%{filter:brightness(1) blur(0)}}
#invitation{position:absolute;z-index:8;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:24px;background:radial-gradient(ellipse,#09070630,transparent 70%);transition:opacity .7s ease,transform 1.1s ease}
#experience.entered #invitation{opacity:0;transform:translateY(-12px);pointer-events:none}
.eyebrow{font-size:10px;letter-spacing:.23em;text-transform:uppercase;color:#d7c6a9;margin:0 0 20px}
h1{font:normal clamp(36px,5.2vw,76px)/1.08 Georgia,serif;letter-spacing:-.025em;margin:0;text-shadow:0 3px 36px #0008}
.welcome{font:17px/1.6 Georgia,serif;color:#ded2bd;margin:22px 0 34px}
#begin{border:1px solid #d7c4a280;border-radius:2px;background:#15100b70;backdrop-filter:blur(12px);padding:15px 30px;font-size:12px;letter-spacing:.06em;transition:background .3s,border-color .3s}
#begin:hover:enabled{background:#e4ceab20;border-color:#f3dfbc}
#begin:disabled{opacity:.45}
#navigation{position:absolute;z-index:4;inset:0;pointer-events:none}
.direction{position:absolute;top:0;bottom:0;width:50%;border:0;border-radius:0;padding:0;background:transparent;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.direction:disabled{pointer-events:none}
#left{left:0}#right{right:0}
.direction:focus-visible{outline:0}
.cue{position:absolute;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;align-items:center;max-width:150px;padding:16px 20px;border-radius:30px;opacity:0;transition:opacity 1.2s ease;text-shadow:0 2px 14px #000,0 0 5px #000}
#left .cue{left:4vw}#right .cue{right:4vw}
.arrow{font:normal 66px/.75 Georgia,serif;display:block}
#left-label,#right-label{font-size:11px;line-height:1.5;letter-spacing:.04em}
.needs-direction .cue,.direction:focus-visible .cue{opacity:.85}
.direction:focus-visible .cue{outline:1px solid #ead4af;background:#09070680}
.needs-direction #left .arrow{animation:beckon-left 3s ease-in-out infinite}
.needs-direction #right .arrow{animation:beckon-right 3s ease-in-out infinite}
@keyframes beckon-left{0%,100%{transform:translateX(0);opacity:.45}50%{transform:translateX(-8px);opacity:1}}
@keyframes beckon-right{0%,100%{transform:translateX(0);opacity:.45}50%{transform:translateX(8px);opacity:1}}
#hint-message{position:absolute;z-index:5;left:0;right:0;bottom:11%;text-align:center;pointer-events:none;font:14px/1.6 Georgia,serif;letter-spacing:.025em;color:#eee2cc;text-shadow:0 2px 12px #000,0 0 4px #000;margin:0;opacity:0;transition:opacity 1.3s}
.needs-direction #hint-message,.navigation-intro #hint-message{opacity:.9}
.chrome{position:absolute;z-index:6;transition:opacity .8s ease;text-shadow:0 2px 15px #000;pointer-events:none}
#masthead{top:max(26px,env(safe-area-inset-top));left:max(30px,env(safe-area-inset-left));display:flex;gap:18px;font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#c9bca5}
.settings{top:max(17px,env(safe-area-inset-top));right:max(22px,env(safe-area-inset-right));display:flex;gap:7px;pointer-events:auto}
.settings button{border:1px solid transparent;border-radius:3px;background:#08070625;font-size:11px;padding:10px 12px;color:#d7cab4}
.settings button:hover:enabled{background:#080706a0;border-color:#cbb79760}
.settings button:disabled{opacity:.3}
.settings a{align-self:center;color:#d7cab4;font-size:11px;padding:10px 8px;text-decoration:none}
.settings a:hover,.settings a:focus-visible{text-decoration:underline}
.view-title{bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);text-align:center;font:17px Georgia,serif;color:#ddd0b9}
#positions{display:flex;justify-content:center;gap:7px;margin-top:10px}#positions i{width:3px;height:3px;background:#817565;border-radius:50%}#positions i.selected{background:#f0d9b3}
#experience:not(.entered) .view-title{opacity:0}
#experience.entered .chrome{opacity:0;pointer-events:none}
#experience.entered.chrome-awake .chrome,#experience.entered .chrome:focus-within{opacity:1}
#experience.entered.chrome-awake .settings,#experience.entered .settings:focus-within{pointer-events:auto}
#experience.entering .chrome{opacity:0!important;pointer-events:none!important}
#loading{position:absolute;z-index:7;bottom:20%;left:50%;transform:translateX(-50%);margin:0;background:#090706b0;padding:10px 16px;border-radius:20px;font-size:12px;white-space:nowrap;pointer-events:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#status.visible{position:absolute;z-index:7;left:50%;bottom:14%;transform:translateX(-50%);width:min(90%,520px);height:auto;margin:0;padding:12px 18px;overflow:visible;clip:auto;white-space:normal;background:#090706dc;border-radius:4px;font-size:12px;line-height:1.6;text-align:center}
.no-script{position:absolute;z-index:10;left:0;right:0;bottom:20%;text-align:center}
@media(max-width:640px){#masthead{display:none}.settings{top:max(10px,env(safe-area-inset-top));right:8px;gap:0}.settings button{font-size:10px;padding:10px}.eyebrow{font-size:9px;letter-spacing:.14em}h1{font-size:39px}.welcome{font-size:16px;margin:18px 0 30px}#left .cue{left:0}#right .cue{right:0}.cue{max-width:110px;padding:12px}.arrow{font-size:56px}#left-label,#right-label{font-size:10px}#hint-message{bottom:22%;font-size:13px}.view-title{bottom:max(28px,env(safe-area-inset-bottom));font-size:15px}#atmosphere{opacity:.75}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}#experience.entering #scene{filter:none}}
/* Widescreen adds scene at the sides. On a tall display, retain the approved
   central 4:3 composition rather than shrinking it to a tiny wide strip. */
@media(max-aspect-ratio:4/3){#still,#films{top:50%;bottom:auto;height:var(--portrait-height,75vw);transform:translateY(-50%)}#still,#films video{object-fit:cover}}
#experience.entered .settings{opacity:.22;pointer-events:auto}
#experience.entered.chrome-awake .settings,#experience.entered .settings:focus-within{opacity:1}
@media(hover:none){#experience.entered .settings{opacity:.6}}
#painting-targets{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
.painting-target,.card-target{fill:transparent;stroke:none;pointer-events:all;cursor:zoom-in}
.card-target{cursor:help}
.painting-target:focus-visible,.card-target:focus-visible{outline:none;stroke:#eee2cd;stroke-width:1.5;stroke-dasharray:4 5}
#step-back{position:absolute;inset:0;width:100%;height:100%;z-index:5;background:transparent;border:0;cursor:zoom-out}
#step-back.inspecting{cursor:none}
#painting-magnifier{position:absolute;z-index:6;pointer-events:none;outline:1px solid #eee2ce90;box-shadow:0 5px 28px #0009,0 0 0 1px #1b171188;background:#15120f}
#closer-invitation{position:absolute;z-index:7;left:50%;top:47%;transform:translate(-50%,-50%);width:min(570px,88vw);padding:28px 30px;text-align:center;color:#f5ecdd;background:#16130f35;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border-radius:5px;pointer-events:none;opacity:0;visibility:hidden;transition:opacity 1.1s ease,visibility 1.1s}
#closer-invitation.visible{opacity:1;visibility:visible}
#closer-invitation h2{font:normal clamp(27px,3.2vw,44px)/1.2 Georgia,serif;margin:12px 0 18px;text-shadow:0 2px 18px #0009}
#closer-invitation p{font:15px/1.65 Georgia,serif;margin:0;text-shadow:0 2px 12px #000}
#demo-pointer{position:absolute;z-index:8;pointer-events:none;opacity:0;visibility:hidden;width:38px;height:38px}
#demo-pointer.visible{visibility:visible;animation:closer-cursor 1.8s ease both}
.demo-arrow{position:absolute;left:0;top:0;font:normal 54px/1 Georgia,serif;color:#fff;transform:translate(-50%,-50%) rotate(45deg);text-shadow:0 1px 8px #0008}
.demo-click{position:absolute;left:-10px;top:-10px;width:20px;height:20px;border-radius:50%;background:#fff;opacity:0}
#demo-pointer.visible .demo-click{animation:closer-click 1.8s ease both}
@keyframes closer-cursor{0%{opacity:0;transform:translate(30px,24px)}35%{opacity:.8;transform:translate(0,0)}65%{opacity:.8;transform:translate(0,0) scale(.93)}82%{opacity:.8;transform:translate(0,0)}100%{opacity:0;transform:translate(0,0)}}
@keyframes closer-click{0%,48%{opacity:0;transform:scale(.45)}60%{opacity:.4;transform:scale(1)}82%,100%{opacity:0;transform:scale(1.5)}}
#demo-pointer.reduced.visible{animation:none;opacity:.8}#demo-pointer.reduced .demo-click{display:none}
#card-reader{border:0;border-radius:3px;padding:0;background:#fff;color:#3b3833;max-width:92vw;width:min(700px,92vw,max(340px,calc((90dvh - 30px)*1.77048/var(--card-count,1))));box-shadow:0 12px 70px #0008;cursor:zoom-out}
#card-reader::backdrop{background:#08070645;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#card-images img{display:block;width:100%;height:auto}
#card-images img+img{border-top:1px solid #e8e3db}
#card-reader p{font:12px Georgia,serif;text-align:center;padding:0 16px 16px;margin:0;color:#706a60}
@media(prefers-reduced-motion:reduce){#demo-pointer.visible{opacity:.8}.demo-click{display:none}}