/* The first screen follows both the available width and height, while keeping
   natural document flow when text needs more room (landscape / text zoom). */
:root{--masthead-height:128px}
.site-header{gap:24px}
.site-header>.brand,.header-actions{flex-shrink:0}
.desktop-nav{min-width:0;gap:clamp(14px,2vw,30px)}
.desktop-nav a{white-space:nowrap}
.hero{min-height:clamp(520px,calc(100svh - var(--masthead-height)),900px);display:flex;align-items:center;overflow:clip}
.hero-content{padding-block:clamp(36px,6svh,88px) clamp(58px,8svh,100px);min-width:0}
.hero h1,html[lang=en] .hero h1,html[lang=zh-CN] .hero h1{font-size:clamp(48px,min(6.3vw,10svh),100px);max-width:100%;overflow-wrap:break-word}
.hero-description{max-width:min(450px,100%)}
.hero-art{object-position:65% 58%}
.hero-buttons{gap:12px 24px}
.hero-buttons>*{max-width:100%}
.scene-meta{max-width:calc(100% - 64px)}
@media(max-width:1180px){
 .desktop-nav{display:none}.menu-button{display:block}
 .site-header{height:76px}
 :root{--masthead-height:112px}
}
@media(max-width:560px){
 :root{--masthead-height:108px}
 .site-header{height:72px;gap:12px}
 .hero{min-height:calc(100svh - var(--masthead-height));align-items:flex-start}
 .hero-content{padding-block:36px clamp(90px,20svh,180px)}
 .hero h1,html[lang=en] .hero h1,html[lang=zh-CN] .hero h1{font-size:clamp(42px,12vw,68px)}
 .hero-art{object-position:82% center}
 .scene-meta{max-width:calc(100% - 40px)}
}
@media(orientation:landscape) and (max-height:650px){
 :root{--masthead-height:96px}
 .site-header{height:60px;padding-inline:clamp(20px,4vw,56px)}
 .desktop-nav{display:none}.menu-button{display:block}
 .hero{min-height:calc(100svh - var(--masthead-height));display:block}
 .hero-content{padding-block:24px 32px}
 .hero h1,html[lang=en] .hero h1,html[lang=zh-CN] .hero h1{font-size:clamp(36px,min(5.5vw,10svh),60px);margin-bottom:14px}
 .hero-eyebrow{margin:0 0 12px}.model-label{margin-bottom:8px}
 .hero-description{max-width:min(540px,72%);line-height:1.65;margin-bottom:16px}
 .hero-buttons{flex-direction:row;align-items:center;gap:8px 18px}
 .hero-buttons .button{min-height:44px;padding-block:10px}
 .hero-note{margin-top:8px;max-width:none}
 .hero-art{object-position:75% center}
 .scene-meta{position:static;margin:0 auto 20px;width:min(1280px,calc(100% - 64px));max-width:none;justify-content:flex-end}
 .scene-meta .scene-line,.scene-meta span:last-child{display:none}
}
@media(orientation:landscape) and (max-height:450px){
 .hero{display:block}
 .hero-content{padding-block:20px 24px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:10px 26px;align-items:start}
 .hero-eyebrow,.hero h1,.hero-note{grid-column:1}
 .hero-eyebrow{grid-row:1;margin:0}.hero h1{grid-row:2 / span 3}
 .model-label{grid-column:2;grid-row:1;margin:0;font-size:.875rem}
 .hero-description{grid-column:2;grid-row:2;max-width:none;margin:0;font-size:.9375rem}
 .hero-buttons{grid-column:2;grid-row:3;gap:6px 14px}
 .hero-note{grid-row:5;font-size:.75rem}
 .scene-meta{position:static;margin:0 auto 16px;width:calc(100% - 64px);max-width:none;justify-content:flex-end}
 .hero-shade{background:linear-gradient(90deg,#070b08c9,#070b0866),linear-gradient(0deg,var(--bg),transparent 45%)}
}