/* MOSHOO — an upright collection, framed by a vermilion light chamber. */
:root { --body:var(--font-interface,"Noto Sans SC",sans-serif); --ink:#090809; --paper:#eee5db; --red:#c93742; --muted:#b6a39f; --line:#dac4b825; --edge:clamp(22px,4vw,68px); }
body { font-family:var(--body); }
.atelier { background:var(--ink); }
.atelier::after { content:""; position:absolute; inset:18px; z-index:0; pointer-events:none; border:1px solid #cdb2ae0e; }
.atelier-ambient { background:radial-gradient(ellipse at 50% 53%,#70152055,transparent 56%),radial-gradient(ellipse at 50% 110%,#9b1c2560,transparent 65%),linear-gradient(#09090a 4%,#190c10 50%,#13090b); }
.atelier-ambient::after { content:""; position:absolute; inset:0; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23g)' d='M0 0h160v160H0z'/%3E%3C/svg%3E"); pointer-events:none; }
.room-vault { top:-91%; height:150%; opacity:.55; box-shadow:0 1px #b7695824,0 30px 100px #0008; }
.room-portal { position:absolute; left:19%; right:19%; top:12%; bottom:22%; border:1px solid #a14c3e28; border-bottom:0; border-radius:42% 42% 0 0; background:linear-gradient(#260b1019,#53101b0d); box-shadow:0 -7px 70px #9623310d,inset 0 12px 60px #0005; }
.room-portal::before { content:""; position:absolute; inset:13px 16px -14px; border:1px solid #b9675b0d; border-bottom:0; border-radius:inherit; }
.room-seams { position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0,transparent calc(12.5% - 1px),#cb6b5720 12.5%); mask-image:radial-gradient(ellipse at 50% 85%,transparent 24%,#0009 85%); opacity:.24; }
.room-wall { top:0; bottom:0; width:36%; opacity:.8; filter:none; }
.room-wall--left { left:-11%; }.room-wall--right { right:-11%; }
.room-logo { --brand-rest-opacity:.17; width:clamp(178px,18vw,260px); top:23%; filter:drop-shadow(0 0 24px #e1735c12); }
.room-ceiling-light { left:25%; right:25%; top:14%; height:1px; opacity:.5; background:linear-gradient(90deg,transparent,#d4a58b55,transparent); box-shadow:none; }
.room-light { top:30%; height:39%; width:1px; opacity:.75; background:linear-gradient(transparent,#d33b3b99,transparent); box-shadow:0 0 28px 3px #c927221a; }
.room-light--left { left:12.5%; }.room-light--right { right:12.5%; }
.room-horizon { top:74%; left:0; right:0; height:1px; filter:none; background:linear-gradient(90deg,transparent,#d1433538,transparent); opacity:.7; box-shadow:0 0 48px 12px #8b1c2424; }
.room-floor { top:74%; border-radius:0; opacity:.8; background:radial-gradient(ellipse at 50% 0,#982c2730,transparent 64%); transform:perspective(600px) rotateX(35deg); }
.room-floor::before { inset:0; height:auto; border:0; border-radius:0; box-shadow:none; background:repeating-linear-gradient(0deg,transparent 0,transparent 72px,#ad554015 73px); }
.room-floor::after { opacity:.4; }
.series-switcher { top:26px; padding:0 0 12px; gap:30px; border:0; border-radius:0; background:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
.series-switcher::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg,transparent,#dcc9c12b,transparent); }
.series-switcher__eyebrow { padding:0; color:#a28e88; font:9px var(--font-mono,monospace); letter-spacing:.16em; }
.series-switcher__option { position:relative; min-width:100px; min-height:44px; padding:0 4px; gap:9px; border:0; border-radius:0; background:none; color:#ae9e98; font-size:12px; letter-spacing:.14em; }
.series-switcher__option::after { content:""; position:absolute; left:4px; right:4px; bottom:-12px; height:1px; background:var(--red); transform:scaleX(0); transition:transform 550ms cubic-bezier(.2,.7,.2,1); }
.series-switcher__option.is-active { color:var(--paper); background:none; border:0; box-shadow:none; }
.series-switcher__option.is-active::after { transform:scaleX(1); }
.series-switcher__index { font:9px var(--font-mono,monospace); color:#a78379; }.series-switcher__option.is-active .series-switcher__index { color:#e5867c; }
#gallery-stage,.shaft-gallery-stage { top:80px; bottom:150px; }
.exhibit-label { min-width:32px; height:26px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; color:#b99c91; font:9px var(--font-mono,monospace); letter-spacing:.2em; text-indent:0; }
.exhibit-label::after { left:13px; right:13px; bottom:-1px; height:2px; background:#e45548; }
.gallery-controls,.shaft-gallery-caption { position:absolute; left:50%; right:auto; bottom:calc(24px + env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(520px,calc(100% - 72px)); padding:15px 0 0; border-top:1px solid var(--line); display:grid; grid-template-columns:44px 1fr 44px; gap:0 20px; pointer-events:auto; }
.gallery-caption__eyebrow { position:absolute; left:50%; top:-9px; padding:0 15px; transform:translateX(-50%); background:#180c0f; color:#a58a80; font:8px var(--font-mono,monospace); letter-spacing:.22em; white-space:nowrap; }
.gallery-arrow,.shaft-arrow { width:44px; height:44px; min-width:44px; display:grid; place-items:center; padding:0; color:#e0c3b6; border:1px solid #b98e762a; border-radius:50%; background:transparent; filter:none; font-size:17px; transition:background 240ms ease,border-color 240ms ease,transform 400ms ease; }
.gallery-arrow:hover,.shaft-arrow:hover { background:#9b283624; border-color:#b7636c80; }.gallery-arrow svg { width:18px; height:18px; }
.gallery-selection { display:flex; align-items:center; justify-content:center; gap:34px; pointer-events:auto; }
.gallery-pagination { display:flex; align-items:baseline; gap:8px; font-family:var(--font-mono,monospace); }
#gallery-current { color:var(--paper); font-size:32px; font-weight:400; letter-spacing:-.06em; }.gallery-total { color:#b6a09a; font-size:10px; }
#cue-detail,.shaft-gallery-caption a { display:inline-flex; align-items:center; gap:17px; min-height:44px; padding:0; border:0; color:#eee0d8; font-size:12px; letter-spacing:.13em; }
#cue-detail span,.shaft-gallery-caption a span { color:#e38276; font-size:19px; transition:transform 450ms ease; }#cue-detail:hover span,.shaft-gallery-caption a:hover span { transform:translate(3px,-3px); }
.gallery-meter { display:flex; align-items:center; justify-content:center; grid-column:1/-1; gap:8px; margin:3px 0 -5px; }
.gallery-meter button { position:relative; min-width:34px; height:36px; padding:0 5px; color:#9f847a; font:9px var(--font-mono,monospace); background:transparent; transition:color 300ms ease; }
.gallery-meter button::before { content:""; position:absolute; top:0; left:50%; width:1px; height:4px; background:#91655666; transition:height 450ms ease,background 450ms ease; }
.gallery-meter button.is-selected { color:#ffe5d3; }.gallery-meter button.is-selected::before { height:7px; background:#e75c4a; }
.gallery-meter button:hover { color:#f6ba9f; }.gallery-meter button:focus-visible { outline-offset:0; border-radius:2px; }
.shaft-gallery-caption { grid-template-columns:44px 1fr auto 44px; gap:0 24px; }
#shaft-name { font-family:var(--font-interface,sans-serif); font-size:17px; font-weight:400; color:var(--paper); text-align:center; letter-spacing:.1em; }
.shaft-status { bottom:153px; color:#d0b6a8; font-size:11px; }
.gallery-instruction { position:fixed; bottom:calc(50px + env(safe-area-inset-bottom)); left:var(--edge); z-index:4; display:flex; align-items:center; gap:15px; color:#b09c94; font-size:10px; letter-spacing:.13em; pointer-events:none; transition:opacity 700ms ease; }
.gallery-instruction span { color:#c86c5e; font-size:16px; }.gallery-interacted .gallery-instruction { opacity:0; }
.brand-sound { color:#baa69b; right:calc(var(--edge) + 48px); max-width:calc(100% - 76px); }.intro-finished .brand-sound { right:calc(var(--edge) - 7px); }
.brand-sound[data-state="blocked"] span,.brand-sound[data-state="unavailable"] span { font-size:10px; letter-spacing:.04em; }
.brand-intro__backdrop { background:#090809; }.brand-intro__halo { background:radial-gradient(ellipse,#9b26322e,transparent 65%); }.intro-skip { color:#c6b6aa; }
.intro-playing .gallery-controls,.intro-playing .shaft-gallery-caption,.intro-playing .gallery-instruction,.is-entering .gallery-controls,.is-entering .shaft-gallery-caption,.is-entering .gallery-instruction { opacity:0; pointer-events:none; }
.is-entering .series-switcher { opacity:0; transition:opacity 300ms ease; }
@media(max-width:1050px) { .gallery-instruction { bottom:calc(143px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); margin:0; font-size:9px; white-space:nowrap; } }
@media(max-width:680px) {
 .atelier::after { inset:10px; }.room-logo { --brand-rest-opacity:.17; width:162px; top:22%; }.room-portal { left:7%; right:7%; top:11%; bottom:24%; border-radius:46% 46% 0 0; }.room-seams { opacity:.13; }.room-vault { top:-91%; }
 .room-wall { width:46%; opacity:.7; }.room-light--left { left:7%; }.room-light--right { right:7%; }.room-ceiling-light { top:12%; left:20%; right:20%; }.room-horizon,.room-floor { top:76%; }
 #gallery-stage,.shaft-gallery-stage { top:55px; bottom:166px; }
 .gallery-controls,.shaft-gallery-caption { width:calc(100% - 44px); bottom:calc(23px + env(safe-area-inset-bottom)); padding-top:15px; gap:0 12px; }.gallery-caption__eyebrow { font-size:7px; letter-spacing:.17em; padding:0 10px; }
 .gallery-selection { gap:24px; }#gallery-current { font-size:29px; }.gallery-total { font-size:9px; }.gallery-meter { gap:2px; margin-top:5px; }.gallery-meter button { min-width:28px; height:34px; padding:0 4px; font-size:8px; }
 .shaft-gallery-caption { grid-template-columns:44px 1fr auto 44px; gap:0 10px; }#cue-detail,.shaft-gallery-caption a { font-size:11px; gap:10px; }#shaft-name { font-size:14px; letter-spacing:.05em; }
 .gallery-instruction { bottom:calc(153px + env(safe-area-inset-bottom)); font-size:8px; gap:12px; }
 .shaft-status { bottom:168px; }
 .series-switcher { top:50%; left:auto; right:max(12px,env(safe-area-inset-right)); transform:translateY(-50%); flex-direction:column; padding:8px 0; gap:4px; width:46px; border:1px solid #b9896b24; border-radius:2px; background:#120c0e9c; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
 .series-switcher::after,.series-switcher__eyebrow { display:none; }.series-switcher__option { min-width:44px; min-height:88px; width:44px; flex-direction:column; gap:7px; padding:9px 0; border-radius:0; }.series-switcher__option:hover { transform:none; }.series-switcher__option::after { left:-1px; right:auto; top:10px; bottom:10px; width:2px; height:auto; transform:scaleY(0); }.series-switcher__option.is-active { background:linear-gradient(90deg,#84253633,transparent); }.series-switcher__option.is-active::after { transform:scaleY(1); }.series-switcher__label { writing-mode:vertical-rl; text-orientation:mixed; font-size:11px; }.series-switcher__index { font-size:8px; }
}
@media(max-width:359px) { .gallery-controls,.shaft-gallery-caption { width:calc(100% - 36px); }.gallery-selection { gap:16px; }#shaft-name { font-size:12px; }.shaft-gallery-caption { gap:0 6px; } }
@media(max-height:540px) {
 #gallery-stage,.shaft-gallery-stage { top:55px; bottom:106px; }.gallery-controls,.shaft-gallery-caption { bottom:calc(12px + env(safe-area-inset-bottom)); padding-top:8px; width:min(440px,calc(100% - 44px)); }.gallery-meter { margin:0 0 -6px; }.gallery-meter button { height:29px; }.gallery-caption__eyebrow { font-size:7px; }.series-switcher { top:9px; }.room-logo { top:27%; width:150px; }.room-ceiling-light { top:21%; }.room-portal { top:15%; }.gallery-instruction { left:var(--edge); bottom:26px; transform:none; font-size:8px; gap:8px; }.shaft-status { bottom:110px; }
}
@media(max-height:540px) and (max-width:680px) { .series-switcher { top:48%; transform:translateY(-50%); }.gallery-instruction { display:none; } }
@media(prefers-reduced-motion:reduce) { .gallery-instruction { transition:none; } }
@view-transition { navigation:auto; }
::view-transition-old(root) { animation:chamber-out 240ms ease both; }::view-transition-new(root) { animation:chamber-in 450ms ease both; }
@keyframes chamber-out { to { opacity:0; } }@keyframes chamber-in { from { opacity:0; } }
@media(prefers-reduced-motion:reduce) { ::view-transition-old(root),::view-transition-new(root) { animation:none; } }
.brand-replay { position:absolute; top:calc(23px + env(safe-area-inset-top)); left:calc(var(--edge) - 7px); z-index:8; display:flex; align-items:center; gap:10px; min-height:44px; min-width:44px; padding:0 10px; color:#baa69b; background:none; }
.brand-replay > span:first-child { font-size:22px; font-weight:300; }.brand-replay__label { font-size:10px; letter-spacing:.1em; opacity:0; transition:opacity 250ms ease; }.brand-replay:is(:hover,:focus-visible) .brand-replay__label { opacity:1; }.is-entering .brand-replay { opacity:0; pointer-events:none; }
@media(max-width:680px) { .brand-replay__label { display:none; } }
@media(max-height:540px) { .brand-replay { top:calc(14px + env(safe-area-inset-top)); } }