/* One room is the primary presentation; ordinary document flow is the fallback. */
html.spatial-site .experience { height: 600svh; }
.spatial-site .experience-sticky { position: sticky; top: 0; height: 100svh; overflow: clip; background: var(--paper); }
.spatial-site .hero { height: 100svh; min-height: 0; padding-top: 20px; padding-bottom: 105px; }
.spatial-site .hero-copy { opacity: var(--intro-opacity,1); transform: translateY(var(--intro-y,0px)); pointer-events: var(--intro-pointer,auto); }
.spatial-site .hero-project { display: block; position: absolute; left: 0; top: 50%; width: 43%; z-index: 2; transform: translateY(calc(-58% + var(--panel-y,20px))); opacity: var(--panel-opacity,0); pointer-events: var(--panel-pointer,none); }
.spatial-site .hero-project .eyebrow { margin-bottom: 25px; font-size: 8px; }
.spatial-site .hero-project h2 { font-size: clamp(37px,4.2vw,61px); line-height: 1.13; letter-spacing: -2px; }
.spatial-site .hero-project h2 em { color: var(--green); }
.spatial-site .hero-project > p:not(.eyebrow) { max-width: 335px; font-size: 13px; color: var(--muted); margin-top: 24px; }
.spatial-site .hero-project .round-link { margin-top: 26px; }
.next-room-stop { display: block; width: fit-content; color: var(--green); margin-top: 24px; font-size: 10px; }
.next-room-stop > span { margin-left: 12px; }
.room-method { list-style: none; padding: 0; margin: 22px 0; color: #5e6957; font-size: 11px; }
.room-method li { padding-block: 8px; border-bottom: 1px solid #d1d7c8; }
.room-method span { font-size: 8px; color: #859078; margin-right: 13px; }
.spatial-site .experience-rail { display: flex; align-items: center; justify-content: space-between; position: absolute; bottom: 24px; left: 5.5%; width: 89%; margin: 0; gap: 22px; border-top: 1px solid #cbd1c3; padding-top: 18px; overflow-x: auto; scrollbar-width: none; }
.spatial-site .experience-rail::-webkit-scrollbar { display: none; }
.spatial-site .experience-rail button { background: transparent; color: #78816e; font-size: 10px; padding: 9px 0; white-space: nowrap; flex-shrink: 0; }
.spatial-site .experience-rail button[aria-pressed="true"] { color: #234d40; box-shadow: inset 0 -1px #456d56; }
.spatial-site main > .discipline-bar,.spatial-site main > .work-section,.spatial-site main > .approach,.spatial-site main > .about,.spatial-site main > .contact { display: none; }
.project-dialog { width: min(1230px,95vw); max-width: 95vw; max-height: 91dvh; padding: 0; border: 1px solid #b9c5b1; background: var(--paper); color: var(--ink); }
.project-dialog::backdrop { background: #283c3090; backdrop-filter: blur(7px); }
.project-dialog-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 15px 24px; }
.project-dialog-bar h2 { font-size: 12px; letter-spacing: 0; }
.project-dialog-close { background: transparent; padding: 8px; display: flex; align-items: center; gap: 16px; font-size: 10px; }
.project-dialog-close > span { font-size: 22px; }
.project-dialog .project { margin: 0; border-inline: 0; border-bottom: 0; }
.project-dialog .project-viewer { min-width: 0; }
@media(min-width:680px) and (max-width:899px) {
  .spatial-site .hero-project h2 { font-size: 34px; letter-spacing: -1.4px; }
  .spatial-site .hero-project > p:not(.eyebrow) { font-size: 11px; max-width: 255px; }
  .spatial-site .hero-project .eyebrow { font-size: 6px; margin-bottom: 20px; }
  .spatial-site .room-method { font-size: 10px; }
  .spatial-site .experience-rail { gap: 16px; }
}
@media(max-width:679px) {
  .spatial-site .hero { display: block; padding: 0; }
  .spatial-site .hero-copy,.spatial-site .hero-project { position: absolute; left: 0; top: 5.5svh; width: 100%; z-index: 2; transform: translateY(var(--panel-y,0px)); }
  .spatial-site .hero-copy { opacity: var(--intro-opacity,1); transform: translateY(var(--intro-y,0px)); }
  .spatial-site .hero h1 { font-size: clamp(36px,10.4vw,49px); letter-spacing: -2.3px; line-height: 1.08; }
  .spatial-site .hero h1 em { letter-spacing: -2px; }
  .spatial-site .hero .eyebrow { font-size: 7px; letter-spacing: 1.2px; margin-bottom: 17px; }
  .spatial-site .hero-description { font-size: 11px; line-height: 1.7; margin-top: 16px; }
  .spatial-site .hero .round-link { margin-top: 17px; font-size: 10px; }
  .spatial-site .hero .circle { width: 32px; height: 32px; }
  .spatial-site .hero-project h2 { font-size: clamp(31px,8.4vw,43px); letter-spacing: -1.2px; }
  .spatial-site .hero-project > p:not(.eyebrow) { font-size: 12px; margin-top: 17px; max-width: 380px; line-height: 1.8; }
  .spatial-site .next-room-stop { margin-top: 15px; font-size: 9px; }
  .spatial-site .room-method { font-size: 10px; margin-top: 15px; }
  .spatial-site .room-method li { padding-block: 6px; }
  .spatial-site .atelier { position: absolute; bottom: 82px; right: -4%; left: auto; width: 108%; height: 43svh; max-width: none; margin: 0; padding: 0; }
  .spatial-site .atelier-stage { width: 100%; height: 100%; margin: 0; aspect-ratio: auto; }
  .spatial-site .atelier figcaption,.spatial-site .scene-project-picker,.spatial-site .atelier-project-link { display: none; }
  .spatial-site .atelier-tools { display: none; }
  .spatial-site .atelier-tools .scene-view,.spatial-site .atelier-tools .scene-light,.spatial-site .atelier-tools .scene-hint { display: none; }
  .spatial-site .experience-rail { bottom: 18px; gap: 23px; padding-top: 12px; }
  .spatial-site .experience-rail button { font-size: 9px; }
  .project-dialog-bar { padding: 10px 14px; gap: 10px; }
  .project-dialog-close { font-size: 8px; gap: 8px; }
  .project-dialog-bar h2 { font-size: 10px; }
}
@media(max-width:679px) and (max-height:720px) {
  .spatial-site .hero-copy,.spatial-site .hero-project { top: 4svh; }
  .spatial-site .hero h1 { font-size: 35px; }
  .spatial-site .hero-description { font-size: 10px; margin-top: 12px; }
  .spatial-site .hero-project h2 { font-size: 31px; }
  .spatial-site .hero-project > p:not(.eyebrow) { font-size: 11px; line-height: 1.7; }
  .spatial-site .atelier { height: 39svh; }
}