/* The approved Quiet Monument image is the composition source of truth.
   The opening scrolls as a normal compact section, independently of the chapters. */
.site-header{position:relative;inset:auto;width:100%;max-width:none;min-width:0;height:clamp(72px,7vw,112px);background:#100f0b;z-index:20}
.site-header:after{display:none}
.site-header .wordmark{font-size:clamp(20px,2.55vw,38px);letter-spacing:-.04em}
.header-nav{gap:clamp(28px,4.9vw,76px);font-size:clamp(12px,1.05vw,16px)}
.header-nav .header-contact{font-size:clamp(11px,.95vw,15px);padding:9px 20px;border-color:#efeadd75}
.reference-hero{position:relative;isolation:isolate;width:100%;max-width:none;min-width:0;aspect-ratio:2.37;height:auto;overflow:hidden;margin-top:0;background:#100f0b}
.reference-hero-art{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.reference-hero-copy{position:absolute;left:5.5%;right:5.5%;top:14%;}
.reference-hero h1{font:400 clamp(40px,5.3vw,100px)/1.075 var(--serif);letter-spacing:-.055em;color:var(--cream);margin:0}
.reference-hero h1 span{display:block}
.mobile-prism-wordmark{display:none}
.reference-hero-copy>p{font:400 clamp(14px,1.65vw,26px)/1.45 var(--sans);margin-top:clamp(16px,1.65vw,28px);max-width:65%;color:var(--cream)}
.reference-hero .hero-cta{margin-top:clamp(22px,2.9vw,44px);padding:clamp(10px,1.15vw,18px) clamp(18px,2.5vw,38px);gap:clamp(24px,3.3vw,50px);font-size:clamp(12px,1.2vw,18px)}
.reference-hero .hero-cta span{font-size:1.5em}
.reference-intro{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:5%;padding:clamp(32px,3.2vw,60px) var(--gutter) clamp(34px,4vw,70px);background:#100f0b}
.reference-intro:before{content:"";position:absolute;left:var(--gutter);right:var(--gutter);top:0;height:1px;background:var(--line)}
.reference-intro h2{font:400 clamp(30px,4.2vw,66px)/1.12 var(--serif);letter-spacing:-.045em;margin:0}
.reference-intro p{align-self:center;font:400 clamp(13px,1.45vw,22px)/1.55 var(--sans);padding-left:10%;border-left:1px solid var(--line);color:var(--cream);max-width:660px}
.reference-light{position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 68% 76%,#fff1cf20,transparent 28%);pointer-events:none;opacity:.2}
.worlds-live .journey{height:460vh;height:460svh}
.worlds-live .progress li:nth-child(1).is-on{background:var(--amber)}
.worlds-live .progress li:nth-child(2).is-on{background:var(--green)}
.worlds-live .progress li:nth-child(3).is-on{background:var(--blue)}
@media(prefers-reduced-motion:no-preference){.reference-light{animation:reference-light 7s ease-in-out infinite}@keyframes reference-light{50%{opacity:.7}}}
@media(min-width:1900px){.reference-hero-copy{top:19%}.reference-intro h2{font-size:70px}}
@media(max-width:900px) and (min-width:701px){.header-nav{gap:24px}.header-nav .header-contact{padding:8px 12px}.reference-hero h1{font-size:5.3vw}}
@media(max-width:700px){
 .site-header{height:72px;padding:0 24px;gap:20px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
 .site-header .wordmark{font-size:21px;line-height:1;white-space:nowrap}
 .header-nav{gap:20px;font-size:12px;white-space:nowrap;line-height:1}
 .header-nav>a{padding:14px 0}
 .reference-hero{margin-top:0;aspect-ratio:auto;height:auto;min-height:0;display:flex;flex-direction:column}
 .reference-hero-picture{position:relative;display:block;order:2;width:100%;height:clamp(400px,120vw,600px);overflow:hidden}
 .reference-hero-picture:before{content:"";position:absolute;z-index:1;top:0;left:0;right:0;height:56px;background:linear-gradient(#100f0b,transparent);pointer-events:none}
 /* Dedicated portrait artwork carries its own centered subject and text-safe sky. */
 .reference-hero-art{position:absolute;z-index:auto;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center bottom}
 .reference-hero:after{display:none}
 .reference-hero-copy{position:relative;order:1;inset:auto;width:100%;padding:28px 20px 12px;text-align:center}
 .reference-hero h1{font-size:clamp(26px,7.6vw,44px);line-height:1.16;letter-spacing:-.045em}
 .reference-hero h1 span{white-space:nowrap}
 .reference-hero-copy>p{font-size:14px;max-width:330px;margin-top:20px}
 .reference-hero .hero-cta{margin-top:24px;padding:12px 22px;font-size:12px;gap:30px}
 .reference-intro{grid-template-columns:1fr;gap:22px;padding:30px 24px 38px}
 .reference-intro h2{font-size:32px}.reference-intro p{border:0;padding:0;font-size:14px;line-height:1.6;max-width:none}
 .reference-light{z-index:1;background:radial-gradient(ellipse at 50% 70%,#fff1cf20,transparent 38%)}
 .worlds-live .progress{bottom:24px}
 /* Portrait chapters fill the phone, with their subjects below the copy. */
 .scene:not(.scene-entry) .scene-media{inset:0;width:100%;height:100%;aspect-ratio:auto;transform:none!important;transform-origin:center}
 .scene:not(.scene-entry) .scene-media img{width:100%;height:100%;object-fit:cover;object-position:center}
 .scene:not(.scene-entry):before,.scene-emerald:before{background:linear-gradient(180deg,#07070465,transparent 48%)!important}

}
@media(max-width:380px){.site-header{padding:0 20px;gap:16px}.site-header .wordmark{font-size:19px}.header-nav{gap:16px;font-size:11px}}

/* A short, direct ending after the three brand chapters. */
@media(max-width:700px){.header-nav>a:first-child{display:none}.header-nav>a:nth-child(3){display:block}}
.site-footer{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;scroll-margin-top:24px}
.site-footer .wordmark{justify-self:start}
.footer-email{justify-self:center;color:var(--cream);font-size:13px;padding:10px 0;text-underline-offset:5px}
.footer-email:hover{text-decoration:underline}
.footer-copyright{justify-self:end;text-align:right}
@media(max-width:700px){
 .site-footer{grid-template-columns:1fr;gap:8px;padding:24px 0;text-align:center}
 .site-footer .wordmark,.footer-email,.footer-copyright{justify-self:center;text-align:center}
}

/* Picture sources select portrait assets only for portrait phones. */
.scene-media picture{display:block;width:100%;height:100%}
/* Portrait phones: the headline sits on the reflective floor below the glass. */
@media(max-width:700px) and (orientation:portrait){
 .site-header{display:flex;justify-content:center;padding:0 24px;height:64px}
 .site-header>.wordmark{display:none}
 .header-nav{justify-content:center;gap:36px;font-size:13px}
 .header-nav>a{padding:18px 0}
 .reference-hero-picture{height:clamp(520px,150vw,1000px)}
 .mobile-prism-wordmark{display:block;position:absolute;z-index:3;top:clamp(110px,28vw,180px);left:20px;right:20px;text-align:center;font:400 clamp(32px,9vw,50px)/1.15 var(--serif);letter-spacing:-.045em;color:var(--cream)}
 .reference-hero-copy{position:absolute;inset:auto 20px clamp(28px,7vw,48px);width:auto;padding:0;z-index:3;text-align:center}
 .reference-hero h1{text-shadow:0 2px 18px #0009}
 .reference-hero:after{content:"";display:block;position:absolute;z-index:2;inset:60% 0 0;background:linear-gradient(transparent,#100f0b15 35%,#100f0b85);pointer-events:none}
}
@media(max-width:700px) and (orientation:landscape){
 .reference-hero{min-height:340px;height:calc(100svh - 72px);display:block}
 .reference-hero-picture{position:static;height:auto}
 .reference-hero-picture:before{display:none}
 .reference-hero-art{object-fit:cover;object-position:center}
 .reference-hero-copy{position:absolute;top:36px;left:24px;right:40%;width:auto;padding:0;text-align:left}
 .reference-hero h1 span{white-space:normal}
 .reference-hero h1{font-size:clamp(28px,5vw,36px)}
 .scene:not(.scene-entry) .scene-media{left:auto;right:0;top:0;bottom:0;width:60%;height:100%}
 .scene:not(.scene-entry) .scene-media img{object-fit:contain;object-position:center}
}

/* One responsive type system for all three pillars. Keep line length readable
   as the window changes, with the copy clear of the architectural subjects. */
.journey .scene{padding:0;align-items:center}
.journey .scene .scene-copy{
 width:clamp(20rem,36vw,36rem);max-width:calc(100% - 2 * var(--gutter))!important;
 margin-inline:var(--gutter);padding:0!important;
 display:flex;flex-direction:column;gap:clamp(18px,2vw,30px);
}
.journey .scene h2{
 margin:0;font-size:clamp(48px,5.5vw,104px);line-height:1.08;letter-spacing:-.045em;
}
.journey .scene .scene-line{
 margin:0;max-width:38ch;font:400 clamp(16px,calc(12px + .5vw),22px)/1.65 var(--sans);
 color:var(--cream);text-wrap:pretty;overflow-wrap:break-word;
}
.worlds-live .journey .scene-copy{transform:translateY(calc((1 - var(--t,0))*20px))}
@media(max-width:700px) and (orientation:portrait){
 .journey .scene{align-items:flex-start;padding-top:clamp(40px,8svh,88px)}
 .journey .scene .scene-copy{width:calc(100% - 2 * var(--gutter));gap:20px}
 .journey .scene h2{font-size:clamp(44px,10vw,64px)}
 .journey .scene .scene-line{font-size:clamp(15px,calc(12px + .8vw),18px);line-height:1.65;max-width:38ch}
 .journey .scene:before{background:linear-gradient(180deg,#070704a8, #07070440 42%, transparent 65%)!important}
}
@media(max-width:950px) and (orientation:landscape) and (max-height:500px){
 .journey .scene .scene-copy{width:43vw;gap:14px}
 .journey .scene h2{font-size:clamp(36px,5.2vw,48px)}
 .journey .scene .scene-line{font-size:clamp(14px,1.7vw,16px);line-height:1.5}
}