/* One 16:9 canvas owns the header, scroll surface, images, atmosphere and controls. */
html.desktop-view{--desktop-frame-width:min(100vw,calc(100svh * 16 / 9));--desktop-frame-height:min(100svh,calc(100vw * 9 / 16));background:#e8e7df;overflow:hidden}
.desktop-view body{height:100svh;overflow:hidden;background:#e8e7df}
.desktop-frame{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--desktop-frame-width);height:var(--desktop-frame-height);overflow:clip;isolation:isolate;container-type:inline-size;background:#131c1d}
.desktop-scroll{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;scroll-behavior:smooth;scroll-padding-top:100px;overscroll-behavior:contain;outline:none}
.desktop-scroll::-webkit-scrollbar{display:none}
.desktop-view .header{position:absolute;inset:0 0 auto}
.desktop-view .stage{height:var(--desktop-frame-height);min-height:0}
.desktop-view .journey{height:calc(var(--desktop-frame-height) * 6.2)}
.desktop-view .interior-mode .journey{height:calc(var(--desktop-frame-height) * 11)}
.desktop-view dialog{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--desktop-frame-width);height:var(--desktop-frame-height);padding:0 clamp(20px,4vw,64px)}
.desktop-view dialog::backdrop{background:rgba(232,231,223,.96)}
@media(min-width:761px){
  .desktop-view .stage{background:#0a1112}
  .desktop-view .scene-stack,.desktop-view .cloud-opening,.desktop-view .vignette{
    inset:0;width:100%;height:100%;aspect-ratio:auto;transform:none;
  }
  .desktop-view .scene{background:#101819}
  .desktop-view .scene img{object-fit:cover;width:100%;height:100%}
  .desktop-view .vignette{background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 17%,transparent 83%,rgba(0,0,0,.3))}
  .desktop-view .header{padding-left:clamp(32px,4vw,84px);padding-right:clamp(32px,4vw,84px)}
  .desktop-view .header nav{font-size:13px;gap:clamp(20px,2.3vw,42px)}
  .desktop-view .tour-button{font-size:12px;padding:13px 19px}
  .desktop-view .stage-bottom{bottom:23px}
  .desktop-view .interior-caption{left:4.4%;bottom:85px}
  .desktop-view .residences,.desktop-view .architecture,.desktop-view .gallery{padding-left:5%;padding-right:5%}
  .desktop-view .unit-hero img{object-fit:cover;aspect-ratio:16/9}
  .desktop-view #interior-info{grid-template-columns:1fr 1fr;align-items:center;gap:3vw}
  .desktop-view .gallery-collections .gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .desktop-view .gallery-collection:not([data-collection="Exterior"]) .thumb-wrap img{aspect-ratio:16/9;object-fit:cover}
  .desktop-view .lightbox-top{padding-top:24px}
}
@media(min-width:761px) and (max-width:1100px){
  .desktop-view .header nav{font-size:11px;gap:19px}
  .desktop-view .brand-slot{width:160px}
  .desktop-view .tour-button{font-size:11px;padding:11px 12px}
  .desktop-view .desktop-mobile-link{display:none}
}
.view-versions{display:flex;gap:24px;padding:0 0 25px;font-size:11px;letter-spacing:.03em;color:#bdc7bc}
.view-versions a{padding:9px 0;border-bottom:1px solid #68766a}
@media(max-width:760px){html.desktop-view{--desktop-frame-width:100vw;--desktop-frame-height:100svh}.desktop-mobile-link{display:none}.view-versions{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.desktop-scroll{scroll-behavior:auto}}
@container(max-width:1100px){
  .desktop-view .header nav{font-size:11px;gap:19px}
  .desktop-view .brand-slot{width:160px}
  .desktop-view .tour-button{font-size:11px;padding:11px 12px}
  .desktop-view .desktop-mobile-link{display:none}
}
@container(max-width:760px){
  .desktop-view .header{padding:16px 4% 42px;gap:10px}
  .desktop-view .brand-slot{width:125px;height:34px}
  .desktop-view .intro-logo{width:125px;max-width:100%}
  .desktop-view .brand>span{font-size:13px}
  .desktop-view .brand svg{width:21px;height:30px}
  .desktop-view .header nav{position:absolute;top:62px;left:4%;right:4%;font-size:10px;gap:20px;justify-content:flex-start}
  .desktop-view .header.light nav{top:52px;background:var(--paper)}
  .desktop-view .tour-button{padding:9px 11px;font-size:10px}
  .desktop-view .header-actions{gap:6px;margin-left:auto}
  .desktop-view .chapter-nav{gap:6px}
  .desktop-view .chapter-nav i{width:14px}
  .desktop-view .chapter-nav button[aria-current] i{width:25px}
}