:root{--text-body:clamp(16px,calc(13px + .4vw),21px);--text-caption:clamp(11px,calc(9px + .2vw),14px);--text-section:clamp(32px,calc(20px + 2vw),48px);--text-card:clamp(24px,calc(18px + .8vw),28px)}
.global-nav{font-size:12px}.global-nav nav{font-size:clamp(11px,.55vw,14px)}.preview-bar{font-size:clamp(11px,.6vw,14px);height:38px}
.hero{padding:clamp(16px,3vh,32px) 0 14px;display:flex;flex-direction:column;align-items:center}
.hero-title{width:100%;padding:0 22px}
.hero .kicker{font-size:clamp(17px,1.3vw,21px)}
.hero h1,html[lang=en] .hero h1{font-size:clamp(36px,4.7vw,80px);font-weight:600;line-height:1.08;letter-spacing:-.045em;margin:12px 0}
.hero .tagline{font-size:clamp(18px,1.6vw,28px);line-height:1.35}
.hero .links{margin-top:18px;gap:24px;font-size:clamp(12px,.9vw,17px)}
.hero .pill{font-size:clamp(12px,.8vw,16px);padding:10px 20px}
.hero-carousel{margin-top:18px;background:#fff;flex-shrink:0}
.hero-slides{height:var(--hero-media-height,clamp(220px,48vh,560px));aspect-ratio:auto;width:100%;background:#fff}
.hero .hero-carousel .hero-image{object-fit:contain;background:#fff}
.hero-carousel-bar{padding:10px 5%;min-height:48px;background:#f5f5f7}
.hero-scene-title{font-size:clamp(11px,.75vw,15px)}
.hero>.image-note{margin-top:8px;font-size:clamp(9px,.55vw,12px);line-height:1.6;max-width:95%}
.section-title h2,.stories-header h2,.space-header h2,.comparison-heading h2,.scenario-heading h2,.ending h2,html[lang=en] .comparison-heading h2,html[lang=en] .space-header h2{font-size:var(--text-section);font-weight:600;line-height:1.15;letter-spacing:-.035em}
.kicker,.tile .kicker,.space-header .kicker,.section-title .kicker,.scenario-heading .kicker{font-size:clamp(16px,calc(13px + .4vw),21px)}
.section-title>p:not(.kicker),.stories-header>p:not(.kicker),.space-header>p:last-child,.comparison-heading>p:not(.kicker),.scenario-heading>p:last-child{font-size:var(--text-body);line-height:1.6}
.tile h2,html[lang=en] .tile h2{font-size:clamp(30px,calc(20px + 1vw),40px);line-height:1.2}
.tile-heading>p:not(.kicker),.story-text>p,.space-info>p:not(.space-shape),.space-principles p,.comparison-meta p{font-size:clamp(15px,calc(12px + .3vw),19px);line-height:1.65}
.story-text h3,.space-info h3,.space-principles h3,.comparison-meta h3{font-size:var(--text-card);line-height:1.3}
.material-display p,html[lang=en] .material-display p{font-size:clamp(28px,calc(18px + 1.3vw),44px);line-height:1.2}
.material-display small{font-size:clamp(13px,.9vw,17px);line-height:1.7}
.more,.section-title a,.space-info>button,.story-open,.space-entry,.scenario-entry{font-size:clamp(13px,.9vw,17px)}
.space-shape,.space-note,.compare-note,.scenario-note,.tile-note,.comparison-tip,.image-note,.ending-note,.story-text>small{font-size:var(--text-caption);line-height:1.7}
.tile-note{padding:0 20px}
footer{font-size:clamp(12px,.65vw,14px)}
.story-selector button,.space-filters button,.compare-buttons button{font-size:clamp(12px,.85vw,16px)}
dialog h2{font-size:clamp(28px,2vw,40px)}#dialog-copy,.scenario-dialog-copy,.scenario-dialog-format,.scenario-dialog-content{font-size:clamp(16px,1vw,19px);line-height:1.7}
.scenario-tooltip h3{font-size:24px}.scenario-tooltip p{font-size:15px}.scenario-tooltip small,.scenario-tooltip .tooltip-content{font-size:13px}
.scroll-reveal{opacity:1;translate:0 0}
.scroll-reveal.reveal-pending{opacity:0;translate:0 56px}
.scroll-reveal.reveal-visible{opacity:1;translate:0 0;transition:opacity .85s cubic-bezier(.22,.61,.36,1),translate .85s cubic-bezier(.22,.61,.36,1)}
@media(max-width:650px){.preview-bar{height:35px}.hero{padding-top:22px;padding-bottom:12px}.hero h1,html[lang=en] .hero h1{font-size:clamp(32px,8.7vw,48px);line-height:1.14}.hero .links{gap:17px;margin-top:16px}.hero-carousel{margin-top:16px}.hero-carousel-bar{padding:9px 4%}.hero-slides{height:var(--hero-media-height,260px)}.hero>.image-note{font-size:9px}.hero-scene-title{max-width:45%;font-size:10px}.digital.tile{height:850px}.objects{height:690px}.scenario-tooltip{width:310px}.story-text{padding:30px}.space-info{padding:26px}.global-nav nav{font-size:18px}.space-photo>span{font-size:11px}}
@media(max-height:650px) and (min-width:651px){.hero{padding-top:10px}.hero h1,html[lang=en] .hero h1{font-size:clamp(32px,4vw,54px);margin:8px 0}.hero .links{margin-top:10px}.hero .tagline{font-size:20px}.hero-carousel{margin-top:10px}}
@media(prefers-reduced-motion:reduce){.scroll-reveal.reveal-pending{opacity:1;translate:0 0}.scroll-reveal.reveal-visible{transition:none}}