/* Opening composition follows the viewport; later sections keep their own geometry. */
:root{
 --entry-unit:min(.069444444vw,.111111111vh);
 --entry-x:clamp(16px,2.222222222vw,96px);
 --entry-y:clamp(16px,3.555555556vh,96px);
 --entry-copy:clamp(14px,calc(15 * var(--entry-unit)),34px);
 --entry-nav:clamp(13px,calc(14 * var(--entry-unit)),32px);
 --entry-line:clamp(20px,calc(20 * var(--entry-unit)),46px);
 --entry-header:clamp(64px,calc(88 * var(--entry-unit)),200px);
}
@supports(height:100svh){:root{--entry-unit:min(.069444444vw,.111111111svh);--entry-y:clamp(16px,3.555555556svh,96px)}}
.page-view.is-stage{height:100vh;height:100dvh}
.hero{height:100vh;height:100svh;min-height:0;background:#fff}
.hero h1{left:50%;top:49.153444444%;width:calc(1280 * var(--entry-unit));height:auto;aspect-ratio:1280/224.762;transform:translate(-50%,-50%)}
.hero h1 img{display:block;width:100%;height:100%;object-fit:contain}
.hero-bottom{left:var(--entry-x);right:var(--entry-x);bottom:var(--entry-y);grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(16px,2vw,64px);row-gap:0;font-size:var(--entry-copy);line-height:var(--entry-line)}
.hero-bottom>p{font-size:inherit;line-height:inherit;justify-self:center;text-align:center}
.hero-bottom>a{display:flex;align-items:center;gap:clamp(8px,calc(12 * var(--entry-unit)),28px);min-height:44px;justify-self:end;font-size:var(--entry-nav);line-height:var(--entry-line)}
.hero-bottom>a span{margin-left:0}
.hero-listen{font-size:var(--entry-copy);line-height:var(--entry-line);gap:clamp(10px,calc(14 * var(--entry-unit)),32px);min-height:clamp(44px,calc(44 * var(--entry-unit)),100px)}
.hero-listen small{font-size:clamp(11px,calc(12 * var(--entry-unit)),28px);line-height:clamp(16px,calc(16 * var(--entry-unit)),38px);margin-bottom:clamp(2px,calc(3 * var(--entry-unit)),8px)}
.round-play{flex-shrink:0;width:clamp(30px,calc(36 * var(--entry-unit)),82px);height:clamp(30px,calc(36 * var(--entry-unit)),82px);font-size:clamp(10px,calc(12 * var(--entry-unit)),27px)}
/* Shared navigation uses the same sizing on both pages so it remains anchored during swaps. */
.site-header{height:var(--entry-header);padding:0 var(--entry-x)}
.site-header>a{min-width:44px;min-height:44px}
.site-header>a img{width:clamp(28px,calc(32 * var(--entry-unit)),80px);height:clamp(28px,calc(32 * var(--entry-unit)),80px)}
.site-header nav{gap:clamp(18px,calc(48 * var(--entry-unit)),108px);font-size:var(--entry-nav);line-height:var(--entry-line)}
.site-header nav a{min-height:clamp(44px,calc(44 * var(--entry-unit)),100px);white-space:nowrap}
@media(max-width:700px){.site-header nav{gap:12px}}
@media(max-width:360px){.site-header nav{gap:8px;font-size:12px}}
.about-content{padding-top:var(--entry-header)}
@media(max-width:700px){
 .hero-bottom{grid-template-columns:minmax(0,1fr);gap:clamp(12px,2vh,20px);gap:clamp(12px,2svh,20px)}
 .hero-bottom>p,.hero-bottom>a{justify-self:start}.hero-bottom>p{text-align:left}
}
@media(max-width:700px) and (max-height:480px){
 .hero h1{top:42%}
 .hero-bottom{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
 .hero-bottom>p{grid-column:1/-1;grid-row:2}
 .hero-bottom>a{grid-column:2;grid-row:1;justify-self:end;text-align:right}
 .hero-listen{min-width:0}
}