@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&family=Oswald:wght@400;500;600;700&display=swap');

.immersive-page {
  --green: #00592b;
  --ink: #0b0d0b;
  --paper: #fff;
  --blue: #0023d1;
  --pink: #ff3fac;
  --yellow: #ffd432;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--green);
  color: var(--paper);
  font-family: "JetBrains Mono", monospace;
}

.immersive-page *, .immersive-page *::before, .immersive-page *::after { box-sizing: border-box; }
.immersive-page .site-shell { overflow: clip; background: var(--green); }
.immersive-page h1, .immersive-page h2, .immersive-page h3, .immersive-page b { font-family: Oswald, Impact, sans-serif; letter-spacing: 0; }
.immersive-page h1, .immersive-page h2, .immersive-page h3, .immersive-page p { margin-top: 0; }

.route-progress { position: fixed; z-index: 100; inset: 0 0 auto; height: 6px; background: rgba(0, 0, 0, .3); }
.route-progress span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: var(--pink); will-change: transform; }

.immersive-page .template-nav { position: absolute; z-index: 20; inset: 6px 0 auto; border: 0; background: transparent; color: #fff; }
.immersive-page .template-nav__inner { display: flex; width: min(100% - 48px, 1360px); min-height: 72px; margin-inline: auto; align-items: center; justify-content: space-between; }
.immersive-page .template-nav a { display: inline-flex; min-height: 44px; align-items: center; color: #fff; font-size: .75rem; text-decoration: none; text-transform: uppercase; }
.immersive-page .brand-mark { font: 700 1.15rem Oswald, sans-serif; }
.immersive-page .template-nav__links { display: flex; gap: 26px; }
.immersive-page :focus-visible { outline: 4px solid var(--yellow); outline-offset: 5px; }

.exhibit-route { position: relative; }
.exhibit-route::before { position: absolute; z-index: 2; top: 100vh; bottom: 7rem; left: max(32px, calc(50% - 650px)); width: 5px; background: var(--yellow); content: ""; }
.section, .hero { position: relative; width: min(100% - 48px, 1360px); margin-inline: auto; }
.story-chapter { min-height: 760px; padding: 120px 5vw 120px 10vw; }
.route-node { position: absolute; z-index: 3; top: 126px; left: 0; display: grid; width: 64px; aspect-ratio: 1; place-items: center; border: 4px solid var(--ink); background: var(--yellow); box-shadow: 7px 7px 0 var(--ink); color: var(--ink); font: 700 1.6rem Oswald, sans-serif; transform: translateX(-27px) rotate(-4deg); }
.chapter-tag { color: var(--yellow); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.chapter-tag b { margin-right: 12px; font-size: 1rem; }
.chapter-heading h2, .proof-intro h2 { margin-bottom: 0; color: #fff; font-size: clamp(3.4rem, 7vw, 7rem); line-height: .94; text-transform: uppercase; }

.entrance { display: grid; min-height: 100svh; grid-template-columns: 1fr 1.25fr; align-items: center; padding: 120px 8vw 90px; isolation: isolate; }
.entrance::before { position: absolute; z-index: -2; inset: 0 50% 0 0; background: var(--blue); content: ""; animation: gate-open-left 1.2s cubic-bezier(.2,.8,.2,1) both; }
.entrance::after { position: absolute; z-index: -2; inset: 0 0 0 50%; background: var(--pink); content: ""; animation: gate-open-right 1.2s cubic-bezier(.2,.8,.2,1) both; }
.entrance__stage { z-index: 3; padding-right: clamp(20px, 4vw, 68px); }
.entrance h1 { max-width: 700px; margin-bottom: 28px; color: #fff; font-size: clamp(4rem, 7.8vw, 8.2rem); line-height: .86; text-transform: uppercase; }
.entrance__lead { max-width: 540px; margin-bottom: 34px; font-size: clamp(.9rem, 1.25vw, 1.05rem); line-height: 1.9; }
.entrance .chapter-tag { color: var(--yellow); }
.entrance .entrance__lead { color: #fff; }
.entrance__art { position: relative; z-index: 1; margin: 0; border: 5px solid var(--ink); background: var(--ink); box-shadow: 16px 16px 0 var(--blue); transform: rotate(1.5deg); }
.entrance__art::before { position: absolute; z-index: -1; inset: -34px 32% 45% -36px; background: var(--pink); content: ""; }
.entrance__art img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.entrance__art figcaption { position: absolute; right: -5px; bottom: -44px; border: 4px solid var(--ink); background: var(--paper); padding: 9px 14px; color: var(--ink); font-size: .7rem; }
.gate { position: absolute; top: 28%; z-index: 0; color: rgba(255,255,255,.13); font: 700 clamp(4rem, 9vw, 9rem) Oswald, sans-serif; writing-mode: vertical-rl; pointer-events: none; }
.gate--left { left: 0; transform: translateX(-42%); }
.gate--right { right: 0; transform: translateX(45%) rotate(180deg); }
.scroll-cue { position: absolute; bottom: 24px; left: 50%; display: flex; align-items: center; gap: 12px; font-size: .65rem; transform: translateX(-50%); }
.entrance .scroll-cue { color: rgba(255, 255, 255, .76); }
.scroll-cue span { width: 50px; height: 3px; background: var(--yellow); animation: cue-pulse 1.5s ease-in-out infinite; }

.ticket-button { display: inline-flex; min-height: 56px; align-items: center; gap: 28px; border: 4px solid var(--ink); background: var(--paper); box-shadow: 9px 9px 0 var(--ink); padding: 12px 18px; color: var(--ink); font-weight: 700; text-decoration: none; transition: transform .22s ease, box-shadow .22s ease; }
.ticket-button b { font-size: 1.55rem; }

.chapter-features { min-height: 960px; }
.label-wall { position: relative; min-height: 560px; margin-top: -50px; margin-left: 34%; }
.museum-label { position: absolute; z-index: 2; width: min(360px, 58%); border: 4px solid var(--ink); background: var(--paper); box-shadow: 12px 12px 0 var(--ink); padding: 26px; color: var(--ink); transition: transform .22s ease, box-shadow .22s ease; }
.museum-label > span { font-size: .68rem; font-weight: 700; }
.museum-label h3 { margin: 20px 0 12px; font-size: 2.25rem; line-height: 1; text-transform: uppercase; }
.museum-label p { margin-bottom: 0; font-size: .82rem; line-height: 1.75; }
.label-a { top: 0; right: 7%; transform: rotate(2deg); }
.label-b { top: 190px; left: 0; transform: rotate(-2deg); }
.label-c { right: 0; bottom: 0; transform: rotate(1deg); }
.shape { position: absolute; }
.shape--blue { top: 85px; left: 24%; width: 220px; height: 210px; background: var(--blue); transform: rotate(8deg); }
.shape--pink { right: 15%; bottom: 30px; width: 170px; height: 250px; background: var(--pink); transform: rotate(-7deg); }

.chapter-offering { min-height: 1000px; }
.offering-map { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7vw; align-items: start; }
.route-stops { position: relative; display: grid; gap: 86px; margin: 10px 0 0; padding: 0; list-style: none; }
.route-stops::before { position: absolute; z-index: 0; top: 34px; bottom: 34px; left: 32px; width: 5px; background: var(--pink); content: ""; transform: skewX(-14deg); }
.route-stops li { position: relative; z-index: 1; display: grid; min-height: 86px; grid-template-columns: 66px 1fr; align-items: center; gap: 22px; }
.route-stops li::before { grid-row: 1; width: 66px; aspect-ratio: 1; border: 4px solid var(--ink); background: var(--paper); box-shadow: 7px 7px 0 var(--blue); content: ""; transform: rotate(45deg); }
.route-stops b, .route-stops span { grid-column: 2; }
.route-stops b { align-self: end; color: var(--yellow); font-size: 1.8rem; }
.route-stops span { align-self: start; font-size: .8rem; }
.curator-note { position: absolute; right: 10%; bottom: 90px; width: min(380px, 42%); border: 4px solid var(--ink); background: var(--yellow); box-shadow: 12px 12px 0 var(--pink); padding: 28px; color: var(--ink); transform: rotate(-2deg); transition: transform .22s ease, box-shadow .22s ease; }
.curator-note span { font-size: .68rem; font-weight: 700; }
.curator-note p { margin: 18px 0 0; font: 600 1.8rem/1.3 Oswald, sans-serif; }

.chapter-proof { display: grid; min-height: 820px; grid-template-columns: .7fr 1.3fr; gap: 7vw; align-items: center; }
.proof-intro > p:last-child { max-width: 460px; margin-top: 34px; line-height: 1.8; }
.measurement-strip { display: grid; margin: 0; border: 4px solid var(--ink); background: var(--paper); box-shadow: 16px 16px 0 var(--blue); color: var(--ink); transform: rotate(1deg); }
.measurement-strip div { display: flex; min-height: 125px; align-items: center; justify-content: space-between; padding: 22px 30px; border-bottom: 4px solid var(--ink); }
.measurement-strip div:last-child { border-bottom: 0; }
.measurement-strip dt { font-size: .75rem; font-weight: 700; }
.measurement-strip dd { margin: 0; }
.measurement-strip dd span { font: 700 clamp(2.5rem, 5vw, 4.8rem) Oswald, sans-serif; }

.exit-hall { display: grid; min-height: 820px; place-items: center; padding-block: 140px; }
.exit-sign { position: relative; z-index: 1; width: min(880px, 90%); border: 5px solid var(--ink); background: var(--paper); box-shadow: 18px 18px 0 var(--pink); padding: clamp(34px, 7vw, 76px); color: var(--ink); text-align: center; transform: rotate(-1deg); }
.exit-sign::before { position: absolute; z-index: -1; inset: -70px 68% 52% -80px; background: var(--blue); content: ""; }
.exit-sign > span { font-size: .7rem; font-weight: 700; }
.exit-sign h2 { margin: 26px 0; font-size: clamp(3.4rem, 7vw, 6.8rem); line-height: .92; text-transform: uppercase; }
.exit-sign p { max-width: 600px; margin: 0 auto 34px; line-height: 1.8; }
.exit-code { position: absolute; right: 0; bottom: 24px; color: var(--yellow); font-size: .65rem; }

@media (hover: hover) and (pointer: fine) {
  .skew-hover:hover { transform: translate(-5px, -7px) skew(-2deg) rotate(1deg); box-shadow: 17px 17px 0 var(--pink); }
  .ticket-button:hover { color: var(--ink); }
  .museum-label:hover { box-shadow: 17px 17px 0 var(--blue); }
}

@keyframes gate-open-left { from { transform: translateX(0); } to { transform: translateX(-102%); } }
@keyframes gate-open-right { from { transform: translateX(0); } to { transform: translateX(102%); } }
@keyframes cue-pulse { 50% { width: 84px; background: var(--pink); } }

@media (max-width: 800px) {
  .immersive-page .template-nav__inner { width: min(100% - 28px, 1360px); }
  .immersive-page .template-nav__links { gap: 12px; }
  .immersive-page .template-nav__links a { font-size: 0; }
  .immersive-page .template-nav__links a::first-letter { font-size: .72rem; }
  .section, .hero { width: min(100% - 28px, 1360px); }
  .exhibit-route::before { left: 22px; }
  .story-chapter { min-height: auto; padding: 100px 14px 100px 50px; }
  .route-node { top: 104px; left: 8px; width: 48px; transform: translateX(-41px) rotate(-4deg); font-size: 1.2rem; }
  .entrance { min-height: 900px; grid-template-columns: 1fr; align-content: center; padding: 110px 16px 70px; }
  .entrance__stage { padding: 0 6px; }
  .entrance h1 { font-size: clamp(3.7rem, 18vw, 5.4rem); }
  .entrance__lead { font-size: .78rem; line-height: 1.75; }
  .entrance__art { width: 92%; margin: 48px 0 0 auto; box-shadow: 9px 9px 0 var(--blue); }
  .entrance__art figcaption { bottom: -37px; }
  .gate { display: none; }
  .scroll-cue { bottom: 18px; }
  .chapter-heading h2, .proof-intro h2 { font-size: clamp(3.2rem, 15vw, 4.5rem); }
  .label-wall { display: grid; min-height: auto; gap: 34px; margin: 56px 0 0; }
  .museum-label { position: relative; inset: auto; width: calc(100% - 14px); padding: 22px; }
  .museum-label:nth-of-type(even) { margin-left: 14px; }
  .shape { display: none; }
  .offering-map, .chapter-proof { grid-template-columns: 1fr; gap: 64px; }
  .route-stops { gap: 52px; }
  .route-stops li { grid-template-columns: 58px 1fr; }
  .route-stops li::before { width: 58px; }
  .curator-note { position: relative; inset: auto; width: calc(100% - 16px); margin: 76px 0 0 4px; }
  .chapter-proof { padding-bottom: 120px; }
  .measurement-strip { box-shadow: 9px 9px 0 var(--blue); }
  .measurement-strip div { min-height: 100px; padding: 18px; }
  .measurement-strip dd span { font-size: 2.7rem; }
  .exit-hall { padding-block: 120px; }
  .exit-sign { width: 100%; padding: 42px 18px; box-shadow: 10px 10px 0 var(--pink); }
  .exit-sign h2 { font-size: clamp(3rem, 14vw, 4.4rem); }
  .exit-code { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .immersive-page *, .immersive-page *::before, .immersive-page *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Reactive chamber */
.chapter-room { min-height: 1050px; background: var(--green); }
.chapter-room::after { position: absolute; right: 3%; bottom: 8%; width: 160px; aspect-ratio: 1; border: 5px solid var(--ink); background: var(--pink); box-shadow: 12px 12px 0 var(--yellow); content: ""; transform: rotate(9deg); }
.room-installation { display: grid; grid-template-columns: 1.25fr .75fr; gap: 5vw; align-items: center; margin-top: 70px; }
.room-installation figure { position: relative; z-index: 1; margin: 0; border: 5px solid var(--ink); background: var(--ink); box-shadow: 17px 17px 0 var(--blue); transform: rotate(-1deg); }
.room-installation figure::before { position: absolute; z-index: -1; inset: -35px 70% 62% -35px; background: var(--yellow); content: ""; }
.room-installation img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.room-installation figcaption { position: absolute; right: -5px; bottom: -39px; padding: 8px 13px; border: 4px solid var(--ink); background: var(--paper); color: var(--ink); font-size: .7rem; }
.room-label { position: relative; z-index: 2; border: 5px solid var(--ink); background: var(--paper); box-shadow: 14px 14px 0 var(--pink); padding: clamp(28px, 4vw, 50px); color: var(--ink); transform: rotate(1.5deg); }
.room-label > span { font-size: .68rem; font-weight: 700; }
.room-label h3 { margin: 24px 0 18px; font-size: clamp(2.2rem, 4vw, 4rem); line-height: .9; }
.room-label > p { line-height: 1.8; }
.room-label dl { margin: 30px 0 0; border-top: 4px solid var(--ink); }
.room-label dl div { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 2px solid var(--ink); }
.room-label dt { font-size: .68rem; font-weight: 700; }
.room-label dd { margin: 0; font: 700 1.15rem Oswald, sans-serif; }

@media (max-width: 800px) {
  .chapter-room { min-height: auto; }
  .chapter-room::after { display: none; }
  .room-installation { grid-template-columns: 1fr; gap: 75px; margin-top: 55px; }
  .room-installation figure { box-shadow: 9px 9px 0 var(--blue); }
  .room-label { width: calc(100% - 12px); box-shadow: 9px 9px 0 var(--pink); }
}
[data-section="story"] figure[data-reveal] { opacity: 1; transform: none; clip-path: inset(0); filter: none; }
.immersive-page :is(h1,h2,h3){text-wrap:balance;word-break:auto-phrase}.visual-pair--immersive{display:grid;grid-template-columns:1.25fr .75fr;gap:5vw;align-items:center;min-height:850px;padding-block:120px}.visual-pair--immersive figure{position:relative;margin:0;border:5px solid var(--ink);background:var(--ink);box-shadow:15px 15px 0 var(--pink);overflow:hidden;transform:rotate(-1deg)}.visual-pair--immersive figure:nth-child(2){transform:rotate(2deg);box-shadow:15px 15px 0 var(--blue)}.visual-pair--immersive img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .7s ease}.visual-pair--immersive figure:hover img{transform:scale(1.025)}.visual-pair--immersive figcaption{position:absolute;right:-5px;bottom:-5px;padding:9px 13px;border:4px solid var(--ink);background:var(--yellow);color:var(--ink);font-size:.68rem;font-weight:700}
@media(max-width:800px){.visual-pair--immersive{grid-template-columns:1fr;gap:55px;min-height:auto;padding:100px 14px 100px 50px}.visual-pair--immersive figure,.visual-pair--immersive figure:nth-child(2){box-shadow:9px 9px 0 var(--pink);transform:none}.chapter-heading h2,.proof-intro h2{font-size:clamp(2.8rem,13vw,4.1rem);line-height:1}.room-label h3{font-size:2.35rem;line-height:.96}}