*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:Arial,sans-serif;background:#f5f0e6;color:#352e24;height:100dvh;display:flex;flex-direction:column}button,a{font:inherit;color:inherit;touch-action:manipulation}button{border:0;background:none;cursor:pointer}a{text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #be5733;outline-offset:3px}header{height:60px;flex:none;display:flex;align-items:center;gap:12px;padding:4px 20px;z-index:4;background:#f5f0e6}header button{min-height:44px}.wordmark{font-size:20px;letter-spacing:-.04em;margin-right:auto}#status{font-size:12px;color:#635c4c}#still,#back{font-size:12px;text-decoration:underline}#viewport{flex:1;min-height:0;position:relative;overflow:clip;overflow-anchor:none;isolation:isolate}#world{position:absolute;left:0;top:0;width:1254px;height:1254px;transform-origin:0 0}#world-photo{position:absolute;inset:0;width:1254px;height:1254px;pointer-events:none}#office-entry{position:absolute;cursor:zoom-in;background:transparent;border-radius:5px}#office-entry span{position:absolute;bottom:2%;left:30%;right:10%;font-size:calc(16px / var(--camera,1));background:#f5ead6e8;padding:calc(9px / var(--camera,1));border-radius:3px}body:not([data-view=home]) #office-entry{visibility:hidden}#home-copy{position:absolute;top:3%;left:0;width:100%;text-align:center;pointer-events:none}#home-copy h1{font-size:clamp(23px,3vw,42px);line-height:1.02;letter-spacing:-.04em;margin:0}#home-copy p{font-size:13px;margin:10px 0}body:not([data-view=home]) #home-copy{display:none}#room-hotspots{position:absolute;inset:0}body:not([data-view=room]) #room-hotspots{visibility:hidden}.spot{position:absolute;border:1px solid #92734755;background:#f7eacfaa;font-size:calc(15px / var(--camera,1));min-width:calc(44px / var(--camera,1));min-height:calc(44px / var(--camera,1));padding:0;color:#342c21;box-shadow:0 1px 3px #5b432b30}.secret-spot{background:#9b734355;color:#fff6e8;text-shadow:0 1px 2px #302010}.spot:hover{background:#ffecc7e8;color:#342c21}.panel-content{position:absolute;transform-origin:0 0;display:flex;flex-direction:column;gap:12px;padding:18px;background:linear-gradient(110deg,#f7ebd5,#ecdbbc);box-shadow:0 4px 12px #34200d44;border-radius:3px;overflow:hidden}.sheet-heading{flex:none}.sheet-heading h1{font-size:24px;line-height:1.05;letter-spacing:-.035em;margin:0}.sample-board{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));gap:8px}.sample{min-width:0;min-height:0;background:#fffaef;box-shadow:0 2px 3px #49352238;padding:7px;display:flex;flex-direction:column;gap:4px;transform-origin:50% 0;animation:paper-breeze 7s ease-in-out infinite;animation-delay:var(--phase)}.sample img{min-height:0;width:100%;flex:1;object-fit:contain;object-position:center;display:block}.sample strong{font-size:14px;line-height:1.12;font-weight:600}.sample span{font-size:11px;color:#806340}.landscape .sample-board{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}.package-grid{display:grid;grid-template-rows:repeat(2,minmax(0,1fr));gap:12px;min-height:0;flex:1}.package-grid article{border-top:1px solid #ae947166;padding-top:10px;min-width:0}.package-grid h2{font-size:20px;line-height:1.05;margin:0}.package-grid .price{font-size:34px;line-height:1.1;margin:5px 0}.price small{font-size:12px}.package-grid p{font-size:14px;line-height:1.32;margin:7px 0}.package-foot{flex:none;display:flex;flex-direction:column;gap:8px}.package-foot p{font-size:12px;line-height:1.25;margin:0}.action{display:flex;justify-content:center;align-items:center;min-height:44px;padding:9px 12px;background:#ad4f2e;color:#fff8ec;font-size:15px;border-radius:2px}.landscape .package-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr;gap:24px}.landscape .package-foot{flex-direction:row;align-items:center;justify-content:space-between}.landscape .package-foot .action{flex:none}.landscape .package-grid .price{font-size:29px;margin:4px 0}.landscape .package-grid p{margin:5px 0}.contact-intro{font-size:19px;line-height:1.3;max-width:450px;margin:4px 0 12px}.contact-actions{display:flex;gap:12px;flex-wrap:wrap}.contact-actions .action{flex:1;min-width:110px}.secondary{background:transparent;border:1px solid #9e8765;color:#352e24}.fine{font-size:13px;line-height:1.35;margin:8px 0}.secret-card{display:flex;flex-direction:column;gap:8px;background:#fff6e5;padding:16px;border-left:4px solid #ac5e37}.secret-card strong{font-size:20px}.secret-card span{font-size:15px}.secret-card small{font-size:12px}nav{height:58px;flex:none;display:flex;justify-content:center;gap:8px;padding:4px 8px max(4px,env(safe-area-inset-bottom));z-index:4;background:#f5f0e6}nav button{min-height:44px;min-width:44px;padding:4px 12px;font-size:14px;border-bottom:2px solid transparent}nav button[aria-current=page]{border-color:#bd643d;font-weight:700}#daylight{position:absolute;left:565px;top:503px;width:198px;height:260px;background:linear-gradient(120deg,transparent 20%,#ffedb51a 37%,transparent 49%,#ffecc414 65%,transparent 78%);mix-blend-mode:screen;pointer-events:none;animation:daylight 13s ease-in-out infinite;transform-origin:center}body[data-still=true] *,body.paused *{animation-play-state:paused!important}@keyframes paper-breeze{0%,100%{rotate:-.18deg;translate:0 0}50%{rotate:.22deg;translate:0 -.4px}}@keyframes daylight{0%,100%{opacity:.35;transform:translateX(-2px)}50%{opacity:.85;transform:translateX(2px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important}}@media(max-width:600px){header{height:56px;gap:8px;padding:4px 12px}.wordmark{font-size:17px}#status{display:none}nav{gap:0;height:56px}nav button{padding:4px 8px;font-size:12px}.panel-content{padding:12px;gap:10px}.sheet-heading h1{font-size:22px}.sample{padding:5px;gap:3px}.sample span{display:none}}@media(max-height:500px){header{height:48px}nav{height:48px}#home-copy{display:none}.panel-content{padding:12px;gap:8px}.sheet-heading h1{font-size:21px}.package-grid h2{font-size:18px}.package-grid article{padding-top:6px}.package-grid{gap:8px}.package-grid p{font-size:14px;line-height:1.2}.package-foot p{font-size:12px}.sample span{display:none}}

/* Real sample miniatures stay on the photographed papers in the overview. */
#room-miniatures{position:absolute;inset:0;pointer-events:none}#room-miniatures img{position:absolute;object-fit:contain;background:#f5e7ce}body:not([data-view=room]):not([data-view=home]) #room-miniatures{visibility:hidden}
.spot{background:transparent;border:0;box-shadow:none;display:flex;align-items:center;justify-content:center}.spot span{display:block;background:#f8ecd9e8;padding:calc(4px / var(--camera,1)) calc(6px / var(--camera,1));border-radius:calc(2px / var(--camera,1));color:#352d21;text-shadow:none}.work-spot{align-items:flex-start}.work-spot span{transform:translateY(calc(-17px / var(--camera,1)))}.secret-spot span{background:#624321de;color:#fff6e8}.spot:hover{background:#fff0ca18;outline:calc(1px / var(--camera,1)) solid #ae7646}
nav{gap:12px}nav button{min-width:86px}@media(max-width:600px){nav{gap:2px}nav button{min-width:0;flex:1;padding:4px 6px}}

/* Persistent room papers: the camera approaches the same content already on the wall. */
.scene-sheet{position:absolute;transform-origin:0 0;background:linear-gradient(110deg,#f7ebd5,#ecdbbc);box-shadow:0 1px 3px #34200d33;border-radius:1px;overflow:clip}
.panel-content{position:relative;transform:none;box-shadow:none;border-radius:0}
.scene-sheet .sample-board,.scene-sheet .landscape .sample-board{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.sample strong{overflow-wrap:anywhere}.sample{gap:4px}.sample span{display:none}
.scene-sheet[data-panel=secret]{background:linear-gradient(110deg,#745034,#9d7449);border:5px solid #7a5634;color:#fff4de}.scene-sheet[data-panel=secret] .panel-content{background:transparent;padding:14px}.scene-sheet[data-panel=secret] .secret-card{color:#352e24}.scene-sheet[data-panel=secret] .contact-intro{font-size:17px;margin-bottom:4px}.scene-sheet[data-panel=secret] .fine{font-size:12px;line-height:1.25;margin:4px 0}
@media(max-width:600px){.scene-sheet[data-panel=work] .panel-content{padding:9px;gap:8px}.scene-sheet[data-panel=work] .sample-board{gap:4px}.scene-sheet[data-panel=work] .sample{padding:4px}.scene-sheet[data-panel=work] .sheet-heading h1{font-size:20px}.scene-sheet[data-panel=work] .sample strong{font-size:14px;line-height:1.13}}

#room-hotspots{z-index:2}body:not([data-view=secret]) .scene-sheet[data-panel=secret]{visibility:hidden}

/* Keep image-led paper faces, with one compact caption strip. */
.sample img{object-fit:cover;object-position:top center;flex:1;min-height:0}.sample strong{flex:none;padding-top:3px}.sample{overflow:hidden}

/* Concise, legible names on the same narrow ten-card board; full names stay accessible. */
.sample .compact-name{display:none;white-space:nowrap;overflow-wrap:normal;font-size:14px;letter-spacing:-.02em}.compact .sample .full-name{display:none}.compact .sample .compact-name{display:block}.sample .full-name{display:block}

/* A compact five-entry cabinet index; scene and camera behavior are unchanged. */
.scene-sheet[data-panel=secret] .panel-content{width:100%!important;height:100%!important;gap:9px;padding:12px}.drawer-intro{font-size:14px;line-height:1.25;margin:0}.secret-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;min-height:0}.secret-grid .secret-card{padding:6px 10px;gap:2px;margin:0;border-left-width:3px}.secret-grid .secret-card strong{font-size:16px;line-height:1.15}.secret-grid .secret-card span{font-size:12px;line-height:1.2}.secret-grid .secret-card small{font-size:11px;line-height:1.2}.landscape .secret-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.scene-sheet[data-panel=secret] .fine{margin:0;font-size:12px;line-height:1.2}

/* Warm studio neon: steady amber tubing on dark bronze, drawn from the room's timber and door. */
:root{--neon-core:#fff1c9;--neon-glow:#ff9959;--neon-base:#30281f}
nav{background:var(--neon-base);box-shadow:inset 0 1px 0 #b586554d}
nav button,.spot span{color:var(--neon-core);font-weight:600;letter-spacing:.025em;text-shadow:0 0 2px #fff7df,0 0 6px var(--neon-glow),0 0 12px #ff873c80}
nav button{border-radius:3px 3px 0 0;border-bottom-width:2px}
nav button:hover{background:#583925;color:#fffaf0}
nav button[aria-current=page]{border-bottom-color:#ffbb78;background:#503521;color:#fffaf0;font-weight:700;box-shadow:inset 0 -1px 0 #ffe2af,0 2px 6px #ff995940}
nav button:focus-visible{outline:2px solid #fff1c9;outline-offset:-3px}
.spot span{background:#30281ff2;border:calc(1px / var(--camera,1)) solid #d59457;border-radius:calc(3px / var(--camera,1));text-shadow:0 0 calc(2px / var(--camera,1)) #fff7df,0 0 calc(6px / var(--camera,1)) #ff9959,0 0 calc(10px / var(--camera,1)) #ff873c80;box-shadow:0 0 calc(4px / var(--camera,1)) #ff995955,inset 0 0 calc(3px / var(--camera,1)) #ff99592b}
.spot:hover{background:transparent;outline:none}
.spot:hover span{background:#503521;border-color:#ffe2af}
.spot:focus-visible{outline:none}
.spot:focus-visible span{outline:calc(2px / var(--camera,1)) solid #fff8e8;outline-offset:calc(3px / var(--camera,1))}
@media(forced-colors:active){nav button,.spot span{text-shadow:none;box-shadow:none}.spot span{border-color:ButtonText}nav button[aria-current=page]{border-bottom-color:Highlight}nav button:focus-visible,.spot:focus-visible span{outline-color:Highlight}}