/* Spatial journey — five chapters (2026-09-05) ============ */
.has-world .world { display: block; }
.world { display: none; position: relative; height: 520vh; background: var(--paper); }
.world .stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; isolation: isolate; }
#intertie-world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.world .stage-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(21,26,30,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(21,26,30,.025) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, transparent 8%, black 35%, black 72%, transparent 96%);
  opacity: .45;
  z-index: 2;
}
.world .stage-vignette { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(circle at 57% 50%, transparent 0 40%, rgba(242,239,232,.15) 70%, rgba(242,239,232,.72) 100%); }

.world .stage-top { position: absolute; z-index: 5; top: clamp(84px, 10vh, 112px); left: clamp(24px, 4vw, 68px); right: clamp(24px, 4vw, 68px); display: flex; align-items: center; justify-content: space-between; font: 500 10px/1 Plex, monospace; letter-spacing: .18em; }
.world .chapter { display: flex; align-items: center; gap: 10px; }
.world .chapter i { width: 48px; height: 1px; background: var(--line); }
.world .principle { display: flex; gap: 30px; color: #657168; }

.world .stage-copy { position: absolute; z-index: 5; left: clamp(24px, 4vw, 68px); bottom: clamp(48px, 8vh, 88px); width: min(43vw, 580px); }
.world .eyebrow { display: block; margin-bottom: 18px; font: 500 10px/1 Plex, monospace; letter-spacing: .2em; color: var(--oak); }
.world .stage-copy h2 { margin: 0; font: 500 clamp(2.2rem, 4.8vw, 5rem)/.98 Space, sans-serif; letter-spacing: -.045em; }
.world .stage-copy p { max-width: 48ch; margin: 24px 0 0; font-size: clamp(14px, 1.25vw, 18px); line-height: 1.6; color: #657168; }
.world .stage-copy.is-changing > * { animation: copy-in .55s cubic-bezier(.2,.7,.2,1) both; }
.world .stage-copy.is-changing h2 { animation-delay: .04s; }
.world .stage-copy.is-changing p { animation-delay: .08s; }
@keyframes copy-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.world .stage-facts { position: absolute; z-index: 5; right: clamp(50px, 8vw, 120px); bottom: clamp(58px, 9vh, 100px); width: min(260px, 22vw); padding-left: 18px; border-left: 2px solid var(--oak); display: grid; gap: 8px; }
.world .fact-label, .world .fact-detail { font: 500 9px/1.4 Plex, monospace; letter-spacing: .16em; color: #657168; text-transform: uppercase; }
.world .stage-facts strong { font: 600 20px/1 Space, sans-serif; letter-spacing: -.02em; }

.world .stage-nav { position: absolute; z-index: 8; right: clamp(22px, 3vw, 52px); top: 50%; transform: translateY(-50%); display: grid; gap: 15px; }
.world .stage-nav button { position: relative; appearance: none; border: 0; background: none; width: 24px; height: 24px; padding: 0; cursor: pointer; }
.world .stage-nav button::after { content: ""; position: absolute; top: 10px; right: 0; width: 9px; height: 2px; background: rgba(21,26,30,.3); transition: width .25s ease, background .25s ease; }
.world .stage-nav button span { position: absolute; right: 30px; top: 5px; opacity: 0; transform: translateX(5px); transition: .25s ease; font: 500 9px/1 Plex, monospace; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; }
.world .stage-nav button:hover span, .world .stage-nav button:focus-visible span, .world .stage-nav button[aria-current] span { opacity: 1; transform: none; }
.world .stage-nav button[aria-current]::after { width: 24px; background: var(--oak); }

.world .scroll-cue { position: absolute; z-index: 5; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; font: 500 9px/1 Plex, monospace; letter-spacing: .16em; color: #657168; transition: opacity .35s ease; }
.world .scroll-cue i { width: 42px; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.world .scroll-cue i::after { content: ""; position: absolute; inset: 0; background: var(--oak); transform: translateX(-100%); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 50%, 100% { transform: translateX(100%); } }
.world.has-progress .scroll-cue { opacity: 0; }

.world.is-overview .stage-copy { width: min(54vw, 760px); }
.world.is-overview .stage-copy h2 { font-size: clamp(3rem, 6.4vw, 7rem); max-width: 10ch; }
.world.is-overview .stage-copy p { max-width: 54ch; }
.world.is-overview .stage-facts { border-left-color: var(--ink); }

@media (max-width: 820px) {
    .world .principle span:first-child { display: none; }
  .world .stage-top { top: 84px; }
  .world .stage-copy { width: calc(100% - 48px); bottom: 84px; }
  .world .stage-copy h2 { font-size: clamp(2.15rem, 10vw, 4rem); max-width: 11ch; }
  .world .stage-copy p { max-width: 33ch; }
  .world .stage-facts { top: 124px; right: 24px; bottom: auto; width: 42vw; }
  .world .stage-facts strong { font-size: 16px; }
  .world .stage-nav { right: 18px; }
  .world .stage-nav button span { display: none; }
  .world { height: 520vh; }
  .world.is-overview .stage-copy { width: calc(100% - 48px); }
  .world.is-overview .stage-copy h2 { font-size: clamp(2.6rem, 12vw, 4.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .world .scroll-cue { display: none; }
  .world .stage-copy.is-changing > *, .world .scroll-cue i::after { animation: none; }
}


/* projected labels (perf/UI pass 2026-09-05) */
.world .stage-labels { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.world .w-label { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; will-change: transform, opacity;
  font: 500 10px/1 Plex, monospace; letter-spacing: .16em; text-transform: uppercase; color: #657168;
  padding: 3px 6px 5px; border-bottom: 1px solid rgba(89,97,106,.55); background: rgba(242,239,232,.82); transition: opacity .25s ease; }
.world .w-label.accent { color: var(--oak); border-bottom-color: var(--oak); }
.world .w-label.small { font-size: 9px; letter-spacing: .14em; }



.world{height:460vh}.world .stage-top{top:32px;font-family:Plex,monospace}.world .stage-top .principle{display:flex;border:0;padding:0;font-family:Plex;gap:24px}.world .stage-top .principle span{font:10px Plex;color:#657168}.world .stage-copy{bottom:68px}.world .stage-copy h2{font-size:clamp(38px,4.5vw,68px)}.world .stage-copy p{font-size:15px;max-width:42ch}.world.is-overview .stage-copy h2{font-size:clamp(48px,5.8vw,86px);max-width:12ch}.world.is-overview .stage-copy p{max-width:43ch}.world .stage-facts{bottom:70px}.world .stage-facts strong{font-size:17px;line-height:1.3}.world .stage-nav button{width:44px;height:44px}.world .stage-nav button::after{top:20px}.world .stage-nav button span{top:15px;right:35px}.world .scroll-cue{bottom:20px}.world .w-label{max-width:45vw;overflow:hidden;text-overflow:ellipsis}.world canvas{position:absolute;inset:0;width:100%;height:100%}.model-fallback{padding:64px var(--pad);background:var(--paper)}.model-fallback img{width:100%;margin:35px 0}.model-fallback p{max-width:650px}.has-world .model-fallback{display:none}.model-caption{font:10px/1.6 Plex;color:#657168;padding:20px var(--pad);border-top:1px solid var(--line)}
.hero .film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;opacity:0;transition:opacity .7s}.hero.film-on .film{opacity:1}.hero .hero-image{z-index:-4}.hero .hero-shade{background:linear-gradient(90deg,#09140ed9,#09140e22 80%),linear-gradient(0deg,#09140eaa,transparent 40%)}.film-toggle{background:transparent;color:var(--paper);border:1px solid #f4f1e960;padding:9px 15px;font:10px Plex;min-height:40px}.film-toggle:hover{background:#f4f1e920}.hero-foot a{margin-left:auto}.company-split img{aspect-ratio:1.3;object-fit:contain}.kit-material img{object-fit:contain;background:var(--paper)}
@media(max-width:820px){.world .stage-top{top:24px}.world .stage-copy,.world.is-overview .stage-copy{bottom:50px;left:24px;width:calc(100% - 64px)}.world .stage-copy h2,.world.is-overview .stage-copy h2{font-size:36px;max-width:12ch}.world .stage-copy p{font-size:12px;line-height:1.6;margin-top:15px;max-width:33ch}.world .eyebrow{font-size:8px;margin-bottom:12px}.world .stage-facts{top:70px;right:24px;width:45%;bottom:auto}.world .stage-facts strong{font-size:14px}.world .fact-detail{font-size:7px}.world .stage-nav{right:8px;top:45%;gap:4px}.world .stage-nav button{width:40px;height:40px}.world .stage-nav button::after{top:18px}.world .scroll-cue{display:none}.hero-foot{gap:10px}.hero-foot a{margin-left:0}.film-toggle{font-size:9px;min-height:34px;padding:7px 10px}.hero-foot span:nth-child(2){display:none}}
@media(prefers-reduced-motion:reduce){.hero .film{transition:none}}