
html{scroll-behavior:smooth}body.spaces-app{margin:0;background:var(--space-paper)}
.design-stage{position:relative;isolation:isolate;height:100svh;min-height:500px;background:#17212f;overflow:hidden}
.design-scene{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:center 52%;}
/* Keep navigation clear of authored edge copy and logos. */
.design-stage-nav{position:absolute;top:clamp(16px,3vw,36px);left:50%;transform:translateX(-50%);display:flex;flex-wrap:nowrap;justify-content:center;gap:10px;align-items:center;width:max-content;max-width:calc(100% - 40px)}
.design-stage-nav a{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border:1px solid #c9d8e8;border-radius:10px;background:rgba(255,255,255,.94);color:#17212f;text-decoration:none;font-size:14px;box-shadow:var(--space-shadow)}
.design-stage-caption{position:absolute;left:clamp(20px,4vw,64px);bottom:clamp(24px,5vh,56px);padding:16px 22px;background:rgba(255,255,255,.94);border:1px solid #c9d8e8;border-radius:16px;max-width:calc(100% - 40px);box-shadow:var(--space-shadow)}
.design-stage-caption p{margin:0 0 6px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#44566b}
.design-stage-caption h1{margin:0;font:400 clamp(28px,3.5vw,48px)/1.15 system-ui;letter-spacing:-.035em}
.design-stage-caption a{display:inline-flex;min-height:44px;align-items:center;margin-top:8px;color:#004ab7;text-underline-offset:4px;font-size:15px}
.design-story{max-width:1240px;margin:0 auto;padding:40px 24px 60px}
.design-panel{padding:clamp(24px,4vw,48px);background:#fff;border:1px solid #c9d8e8;border-top:3px solid #2675bc;border-radius:18px;box-shadow:var(--space-shadow)}
.design-panel h2{margin:0 0 18px;font:400 clamp(28px,3.5vw,42px)/1.15 system-ui;letter-spacing:-.035em}
.design-panel p{max-width:780px;color:#44566b;font-size:18px;line-height:1.65}
.design-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.design-links a:last-child{background:#fff!important;color:#004ab7!important}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.65s;animation-timing-function:ease-in-out}
@media(max-width:760px){.design-stage-nav{top:16px;gap:8px;align-items:center}.design-stage-nav a{font-size:12px;padding:8px 10px}.design-stage-caption{padding:14px 18px}.design-links a{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}::view-transition-old(root),::view-transition-new(root){animation-duration:0s}}

.experience-stage .design-scene{object-fit:cover;object-position:center 52%}.experience-stage .vinyl-scene{object-position:center top}.experience-stage video.design-scene{z-index:0}.experience-stage .design-stage-nav,.experience-stage .design-stage-caption{z-index:1}.experience-stage:has(video) .design-stage-caption{bottom:80px}.experience-stage.authored .design-stage-caption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);border:0}.destination-open{position:absolute;inset:0;z-index:1;display:block}

/* Match the original homepage penthouse framing across the entry transition. */
.penthouse-stage .design-scene{object-position:82% center}
@media(max-width:760px){.penthouse-stage .design-scene{object-position:40% center}}

.design-stage-nav a{background:rgba(14,23,32,.86);color:#fff;border:1px solid #ffffff40;font-size:14px;box-shadow:none}

.design-stage-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}.design-stage-actions a{margin-top:0!important;color:#fff!important;text-decoration:none!important}.design-stage-actions .space-button{font-size:14px;padding:10px 16px}
@media(max-width:760px){.design-stage-actions{gap:8px}.design-stage-actions .space-button{font-size:13px;padding:9px 12px;min-height:42px}}


/* Shared translucent caption treatment for every Experience Destination. */
.experience-stage .design-stage-caption{background:rgba(10,17,24,.44);color:#fff;border-color:rgba(255,255,255,.30);box-shadow:0 18px 52px rgba(0,0,0,.16);-webkit-backdrop-filter:saturate(.65) contrast(1.08);backdrop-filter:saturate(.65) contrast(1.08);text-shadow:0 1px 4px rgba(0,0,0,.55)}
.experience-stage .design-stage-caption p{color:#dce5ee}.experience-stage .design-stage-caption h1{color:#fff}.experience-stage .design-stage-caption>a{color:#fff}

/* DreamWall display mode keeps each destination title inside the TV aperture. */
html.dreamwall-embed,html.dreamwall-embed body{height:100%;overflow:hidden}
.dreamwall-embed .design-stage{height:100svh;min-height:0;width:100%}
.dreamwall-embed .design-stage-nav,.dreamwall-embed .design-story,.dreamwall-embed .design-stage-actions{display:none}
.dreamwall-embed .experience-stage .design-stage-caption{left:4%;bottom:5%;width:auto;height:auto;max-width:84%;margin:0;padding:clamp(8px,2vh,16px) clamp(12px,2vw,22px);overflow:visible;clip-path:none;border:1px solid #ffffff40;border-radius:12px;box-sizing:border-box}
.dreamwall-embed .design-stage-caption p{font-size:clamp(9px,1.5vw,12px);line-height:1.35;letter-spacing:.08em;margin:0 0 5px}
.dreamwall-embed .design-stage-caption h1{font-size:clamp(20px,3.8vw,36px);line-height:1.12;overflow-wrap:break-word}

/* Authored artwork already contains its destination title. */
.dreamwall-embed .experience-stage.authored .design-stage-caption{display:none}
