/* Applied from the approved refined 05 desktop/mobile mockup.
   Existing chapter animation, company introduction and email contact remain below. */
.site-header{height:84px;display:flex;justify-content:flex-end;align-items:center;padding:0 5%;gap:0}
.site-header .header-nav{display:flex;align-items:center;gap:32px;font-size:12px;line-height:1.5}
.site-header .header-nav a{display:block;padding:14px 0}
.reference-hero{display:block;aspect-ratio:auto;width:100%;height:calc(100svh - 84px);min-height:480px;margin:0;max-height:none}
.reference-hero-picture{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:0}
.reference-hero-picture:before{display:none}
.reference-hero-art{position:absolute;z-index:auto;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center}
.reference-hero:after{display:none}
.reference-light{z-index:1;pointer-events:none}
.hero-wordmark{position:absolute;z-index:3;top:15%;left:5%;margin:0;color:var(--cream);font:400 clamp(22px,2.143vw,36px)/1.2 var(--serif);letter-spacing:-.04em}
.reference-hero-copy{position:absolute;z-index:3;inset:27% auto auto 5%;width:48%;height:auto;padding:0;background:none;color:var(--cream);text-align:left;display:block;container-type:inline-size}
.reference-hero h1{font:400 min(clamp(36px,4.107vw,72px),9.6cqi)/1.13 var(--serif);letter-spacing:-.055em;color:var(--cream);text-shadow:none}
.reference-hero h1 span{display:block;white-space:nowrap}
@media(max-width:700px) and (orientation:portrait){
 .site-header{height:60px;padding:0 24px;justify-content:center}
 .site-header .header-nav{justify-content:center;gap:34px;font-size:12px}
 .reference-hero{height:calc(100svh - 60px);min-height:620px}
 .reference-hero-picture{inset:0 0 144px;height:auto}
 .reference-hero-art{object-position:center bottom}
 .hero-wordmark{top:52px;left:20px;right:20px;text-align:center;font-size:clamp(30px,8.974vw,44px);line-height:1.2}
 .reference-hero-copy{inset:auto 0 0;width:100%;height:144px;padding:24px 18px;background:var(--cream);color:var(--ink);text-align:center;display:flex;align-items:center;justify-content:center}
 .reference-hero h1{font-size:min(clamp(24px,7.18vw,30px),9.6cqi);line-height:1.2;letter-spacing:-.055em;color:var(--ink)}
 .reference-hero h1 span{white-space:nowrap}
}
@media(max-width:700px) and (orientation:landscape){
 .site-header{height:60px}
 .reference-hero{height:calc(100svh - 60px);min-height:340px}
 .reference-hero-picture{inset:0;height:100%}
 .hero-wordmark{top:15%;font-size:20px}
 .reference-hero-copy{top:30%;width:49%}
 .reference-hero h1{font-size:min(clamp(26px,4.4vw,32px),9.6cqi)}
}
@media(min-width:701px) and (min-aspect-ratio:5/2){
 /* Keep the complete prism visible when a desktop window is very wide. */
 .reference-hero{height:auto;aspect-ratio:2.37;min-height:480px}
}

/* The opening zooms and crossfades to Create within the same sticky stage.
   With reduced motion or no JavaScript, all sections stay in ordinary flow. */
.reference-hero-picture{overflow:hidden}
@media(prefers-reduced-motion:no-preference){
 .worlds-live .journey{height:calc(460svh + clamp(420px,90svh,900px))}
 .worlds-live .stage>.reference-hero{position:absolute;inset:0;z-index:12;height:calc(100% - var(--hero-header-gap,0px));min-height:0;aspect-ratio:auto;opacity:calc(1 - var(--hero-reveal,0))}
 .worlds-live .stage>.reference-hero.is-past{visibility:hidden;pointer-events:none}
 .reference-hero-art{transform:scale(calc(1 + var(--hero-scroll,0) * .65));transform-origin:68% 62%}
 .hero-wordmark{opacity:calc(1 - var(--hero-fade,0))}
}
@media(min-width:701px) and (prefers-reduced-motion:no-preference){
 .reference-hero-copy{opacity:calc(1 - var(--hero-fade,0))}
}
@media(max-width:700px) and (orientation:portrait) and (prefers-reduced-motion:no-preference){
 .reference-hero-art{transform:scale(calc(1 + var(--hero-scroll,0) * .4));transform-origin:50% 62%}
}