:root {
  color-scheme: dark;
  --soil: #06100e;
  --leaf: #153e31;
  --mist: #b9c9bd;
  --rice: #dce8ad;
  --sun: #f0c77c;
  --cloud: #eff1e8;
  --white: #fffef8;
  --scene-x: 0px;
  --scene-y: 0px;
  --scene-rx: 0deg;
  --scene-ry: 0deg;
  --walk-x: 0px;
  --walk-y: 0px;
  --scene-scale: 1.085;
  --route-progress: 0;
  --ease: cubic-bezier(.22,.72,.18,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--soil); }
body {
  margin: 0;
  background: var(--soil);
  color: var(--white);
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

.skip-link {
  position: fixed; z-index: 1000; top: .75rem; left: .75rem;
  padding: .7rem 1rem; background: var(--cloud); color: var(--soil);
  transform: translateY(-160%); transition: transform .2s;
}
.skip-link:focus { transform: translateY(0); }

.loader {
  position: fixed; z-index: 900; inset: 0; display: grid; place-items: center;
  align-content: center; gap: 1.25rem; background: var(--soil);
  transition: opacity .8s var(--ease), visibility .8s;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader p { margin: 0; color: var(--mist); font-size: .76rem; letter-spacing: .08em; }
.loader > span { width: 9rem; height: 1px; background: rgba(255,255,255,.15); overflow: hidden; }
.loader > span b { display: block; height: 100%; background: var(--sun); animation: load 1.7s var(--ease) forwards; }
.loader__mark { position: relative; width: 4.5rem; height: 4.5rem; animation: breathe 2.4s ease-in-out infinite; }
.loader__mark i, .hold-button__ring > i {
  position: absolute; left: 50%; top: 50%; width: 58%; height: 82%;
  border: 1px solid currentColor; border-radius: 50%; transform-origin: 50% 50%;
}
.loader__mark i:nth-child(1), .hold-button__ring > i:nth-child(1) { transform: translate(-50%,-50%) rotate(0deg); }
.loader__mark i:nth-child(2), .hold-button__ring > i:nth-child(2) { transform: translate(-50%,-50%) rotate(60deg); }
.loader__mark i:nth-child(3), .hold-button__ring > i:nth-child(3) { transform: translate(-50%,-50%) rotate(120deg); }

.cinema { position: fixed; z-index: 0; inset: 0; overflow: hidden; background: var(--soil); touch-action: pan-y; }
.cinema__layer {
  position: absolute; inset: -3.5%; opacity: 0; background-image: var(--image);
  background-position: center; background-size: cover;
  transform: translate3d(calc(var(--scene-x) + var(--walk-x)),calc(var(--scene-y) + var(--walk-y)),0)
    scale(var(--scene-scale));
  filter: blur(7px) saturate(.82); transform-origin: 50% 50%;
  transition: opacity 1.05s var(--ease), transform .18s ease-out, filter 1.05s var(--ease);
  will-change: opacity, transform;
}
.cinema__layer.is-active { opacity: 1; filter: blur(0) saturate(1); }
.cinema__layer video { width: 100%; height: 100%; object-fit: cover; }
.cinema__occlusion {
  position: absolute; z-index: 4; inset: -18%; opacity: 0; pointer-events: none; filter: blur(20px);
  background:
    radial-gradient(ellipse 23% 62% at 17% 50%, rgba(2,10,7,.96) 0 45%, transparent 49%),
    radial-gradient(ellipse 20% 48% at 43% 22%, rgba(5,17,10,.9) 0 46%, transparent 51%),
    radial-gradient(ellipse 25% 58% at 70% 67%, rgba(2,12,8,.94) 0 45%, transparent 51%),
    radial-gradient(ellipse 20% 43% at 92% 34%, rgba(7,20,12,.92) 0 46%, transparent 52%);
  transform: translateX(-55%) rotate(-7deg) scale(1.18);
}
.cinema.is-transitioning .cinema__occlusion { animation: canopy-cross 1.05s var(--ease) both; }
.dome-halo {
  position: absolute; z-index: 2; left: 62%; top: 47%; width: min(38vw,34rem); aspect-ratio: 1;
  border-radius: 50%; transform: translate(-50%,-50%); opacity: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(240,199,124,.2), rgba(240,199,124,.07) 42%, transparent 69%);
  mix-blend-mode: screen; transition: opacity 1.3s;
}
.cinema[data-scene="1"] .dome-halo { opacity: .62; animation: dome-breathe 6s ease-in-out infinite; }
.cinema__wash {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 68% 42%, transparent 15%, rgba(3,12,9,.1) 66%),
    linear-gradient(90deg, rgba(3,12,9,.58) 0%, rgba(3,12,9,.06) 48%, rgba(3,12,9,.25) 100%),
    linear-gradient(0deg, rgba(3,12,9,.45), transparent 42%);
  transition: background 1s;
}
.cinema__grain {
  position: absolute; inset: -50%; opacity: .12; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  animation: grain .22s steps(2) infinite;
}

#route-canvas { position: fixed; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .76; }

.topbar {
  position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: 6.5rem;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 clamp(1.25rem,4vw,4.5rem);
  background: linear-gradient(180deg,rgba(3,12,9,.5),rgba(3,12,9,.12) 60%,transparent);
}
.brand { width: clamp(9rem,13vw,12.5rem); line-height: 0; }
.brand img { width: 100%; height: auto; }
.coordinates { display: flex; gap: .8rem; align-items: center; margin: 0; font-size: .69rem; color: rgba(255,255,255,.72); }
.coordinates b { color: var(--white); font-weight: 500; }
.route-button {
  justify-self: end; display: flex; align-items: center; gap: .85rem; padding: .65rem 0;
  border: 0; background: transparent; color: var(--white); cursor: pointer; font-size: .74rem;
}
.route-button i { position: relative; width: 1.9rem; height: 1.9rem; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; }
.route-button i::before, .route-button i::after { content: ""; position: absolute; left: 50%; top: 50%; width: .7rem; height: 1px; background: currentColor; transform: translate(-50%,-50%); }
.route-button i::after { transform: translate(-50%,-50%) rotate(90deg); }

.chapter-rail {
  position: fixed; z-index: 25; right: clamp(1.25rem,4vw,4.5rem); top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 1.1rem; writing-mode: vertical-rl;
}
.chapter-rail p { display: flex; align-items: center; gap: .55rem; margin: 0; font-size: .62rem; color: rgba(255,255,255,.7); }
.chapter-rail p i { display: block; width: 1px; height: 2.7rem; background: rgba(255,255,255,.35); }
.chapter-rail__dots { display: flex; gap: .8rem; }
.chapter-rail__dots a { position: relative; width: .65rem; height: .65rem; border: 1px solid rgba(255,255,255,.52); border-radius: 50%; }
.chapter-rail__dots a::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--sun); transform: scale(0); transition: transform .3s; }
.chapter-rail__dots a.is-active::after { transform: scale(1); }
.chapter-rail__dots span {
  position: absolute; right: 1.2rem; top: 50%; padding: .25rem .45rem; color: var(--soil); background: var(--cloud);
  opacity: 0; transform: translateY(-50%) translateX(.5rem); pointer-events: none; transition: .25s;
  writing-mode: horizontal-tb; font-size: .66rem; white-space: nowrap;
}
.chapter-rail__dots a:hover span, .chapter-rail__dots a:focus span { opacity: 1; transform: translateY(-50%); }

.onboarding {
  position: fixed; z-index: 40; left: 50%; top: 50%; display: grid; justify-items: center; gap: .65rem;
  padding: .9rem 1.1rem; border-radius: 4rem; color: var(--white); background: rgba(3,12,9,.4);
  backdrop-filter: blur(12px); transform: translate(-50%,-50%); pointer-events: none;
  transition: opacity .45s, visibility .45s, transform .55s var(--ease);
}
.onboarding.is-done { opacity: 0; visibility: hidden; transform: translate(-50%,-42%); }
.onboarding__gesture { position: relative; width: 4.2rem; height: 1.7rem; }
.onboarding__gesture i { position: absolute; left: .25rem; right: .25rem; top: .75rem; height: 1rem; border-top: 1px solid rgba(255,255,255,.7); border-radius: 50%; }
.onboarding__gesture b { position: absolute; top: .5rem; left: .4rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--sun); animation: gesture-dot 1.45s var(--ease) infinite alternate; }
.onboarding p { margin: 0; font-size: .68rem; }

main { position: relative; z-index: 5; }
.chapter {
  position: relative; min-height: 120vh; display: flex; align-items: center;
  padding: 7rem max(7rem,9vw) clamp(5rem,10vh,8.5rem); pointer-events: none;
}
.chapter:first-child { min-height: 130vh; }
.chapter:last-child { min-height: 145vh; }
.chapter__copy {
  width: min(39rem,72vw); opacity: 0; transform: translateY(4rem);
  transition: opacity .65s var(--ease), transform .9s var(--ease); pointer-events: none;
}
.chapter.is-current .chapter__copy { opacity: 1; transform: translateY(0); pointer-events: auto; transition-delay: .18s; }
.chapter--right { justify-content: flex-end; padding-right: max(9rem,12vw); }
.chapter--right .chapter__copy { width: min(27rem,48vw); }
.chapter__kicker { margin: 0 0 1.5rem; font-size: clamp(.72rem,1vw,.86rem); color: var(--rice); letter-spacing: .02em; }
.chapter h1, .chapter h2 {
  margin: 0; max-width: 12ch; font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-size: clamp(3.5rem,7.7vw,8.8rem); line-height: .84; font-weight: 400; letter-spacing: -.055em;
  text-wrap: balance; text-shadow: 0 3px 30px rgba(0,0,0,.2);
}
.chapter h1 em { color: var(--rice); font-weight: 400; }
.chapter h2 { font-size: clamp(3.2rem,6.6vw,7.4rem); }
.chapter--right h2 { font-size: clamp(3rem,4.75vw,5.25rem); }
.chapter__body { max-width: 34rem; margin: 1.75rem 0 0; font-size: clamp(.95rem,1.25vw,1.15rem); line-height: 1.55; color: rgba(255,255,255,.82); }
.chapter--right .chapter__body { max-width: 28rem; }
.detail-link, .text-link {
  display: inline-flex; align-items: center; gap: .65rem; margin-top: 1.7rem; padding: .65rem 0;
  color: var(--white); background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.42);
  text-decoration: none; cursor: pointer; font-size: .8rem;
}
.detail-link span { color: var(--sun); }
.text-link::after { content: ""; width: 2.4rem; height: 1px; background: var(--sun); }
.spec-line { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: 1.8rem; font-size: .7rem; color: rgba(255,255,255,.72); }
.spec-line span { display: flex; align-items: center; gap: .55rem; }
.spec-line span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--sun); }

.hold-button {
  position: fixed; z-index: 20; pointer-events: auto; right: clamp(6rem,12vw,13rem); bottom: clamp(2.5rem,7vh,5rem);
  display: flex; align-items: center; gap: 1.15rem; border: 0; background: transparent; color: var(--white); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(1rem); transition: opacity .45s, transform .6s var(--ease), visibility .45s;
}
.chapter--hero.is-current .hold-button { opacity: 1; visibility: visible; transform: translateY(0); }
.hold-button__ring { position: relative; display: block; width: 5rem; height: 5rem; color: rgba(255,255,255,.8); }
.hold-button__ring b {
  position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--sun);
  clip-path: polygon(50% 0,50% 0,50% 50%,50% 50%); transition: clip-path .1s linear;
}
.hold-button.is-holding .hold-button__ring { animation: breathe .7s ease-in-out infinite; }
.hold-button__label { display: grid; gap: .15rem; text-align: left; }
.hold-button__label strong { font-size: .8rem; font-weight: 500; }
.hold-button__label small { font-size: .68rem; color: rgba(255,255,255,.6); }
.sound-note { position: fixed; z-index: 20; left: max(7rem,9vw); bottom: 2rem; margin: 0; font-size: .64rem; color: rgba(255,255,255,.55); opacity: 0; transition: opacity .4s; }
.chapter--hero.is-current .sound-note { opacity: 1; }
.sound-note i { display: inline-block; width: .35rem; height: .35rem; margin-right: .5rem; border-radius: 50%; background: var(--rice); box-shadow: 0 0 0 4px rgba(220,232,173,.12); }
.chapter__whisper { position: absolute; left: 50%; bottom: 2.7rem; display: flex; align-items: center; gap: .7rem; font-size: .6rem; color: rgba(255,255,255,.55); opacity: 0; transition: opacity .5s; }
.chapter.is-current .chapter__whisper { opacity: 1; }
.chapter__whisper i { width: 2.4rem; height: 1px; background: rgba(255,255,255,.4); }

footer { position: absolute; bottom: 1.8rem; left: max(7rem,9vw); right: max(7rem,9vw); display: flex; justify-content: space-between; font-size: .63rem; color: rgba(255,255,255,.52); }
.final-actions { display: flex; gap: 1.5rem; align-items: center; margin-top: 2rem; pointer-events: auto; }
.inquiry-button {
  padding: .95rem 1.3rem; border: 1px solid rgba(255,255,255,.72); background: rgba(5,14,12,.18); color: var(--white); cursor: pointer;
  backdrop-filter: blur(10px); font-size: .78rem;
}
.final-actions a { font-size: .73rem; color: rgba(255,255,255,.72); }

.route-drawer, .detail-panel, .inquiry {
  position: fixed; z-index: 80; background: rgba(6,16,14,.96); backdrop-filter: blur(22px); visibility: hidden; opacity: 0;
  transition: transform .7s var(--ease), opacity .45s, visibility 0s linear .7s;
}
.route-drawer { top: 0; right: 0; bottom: 0; width: min(38rem,92vw); padding: 7rem clamp(1.5rem,5vw,4rem) 2rem; transform: translateX(100%); overflow-y: auto; }
.route-drawer.is-open, .detail-panel.is-open, .inquiry.is-open {
  transform: translate(0,0); visibility: visible; opacity: 1;
  transition: transform .7s var(--ease), opacity .45s, visibility 0s;
}
.route-drawer__close, .detail-panel__close, .inquiry__close {
  position: absolute; top: 2rem; right: 2rem; border: 0; background: none; color: var(--white); cursor: pointer; font-size: .75rem;
}
.route-drawer__intro p, .inquiry > div > p { margin: 0 0 .8rem; color: var(--rice); font-size: .72rem; }
.route-drawer h2, .detail-panel h2, .inquiry h2 {
  margin: 0; font: 400 clamp(2.8rem,5vw,5.5rem)/.92 "Iowan Old Style", Georgia, serif; letter-spacing: -.045em;
}
.route-drawer ol { list-style: none; padding: 0; margin: 3.5rem 0 2rem; border-top: 1px solid rgba(255,255,255,.15); }
.route-drawer li { border-bottom: 1px solid rgba(255,255,255,.15); }
.route-drawer li a { display: grid; grid-template-columns: 1fr auto; gap: .15rem; padding: 1rem 0; text-decoration: none; }
.route-drawer li small { grid-column: 1; color: rgba(255,255,255,.48); font-size: .64rem; }
.route-drawer li strong { grid-column: 1; font: 400 1.25rem/1.1 "Iowan Old Style", Georgia, serif; }
.route-drawer li span { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--sun); font-size: .66rem; }
.route-drawer__note { font-size: .66rem; color: rgba(255,255,255,.55); }
.drawer-scrim { position: fixed; z-index: 70; inset: 0; background: rgba(0,0,0,.32); opacity: 0; visibility: hidden; transition: .4s; }
.drawer-scrim.is-open { opacity: 1; visibility: visible; }

.detail-panel { left: 0; bottom: 0; width: min(44rem,100vw); min-height: 70vh; padding: clamp(5rem,10vw,8rem) clamp(2rem,7vw,6rem) 3rem; transform: translateY(105%); }
.detail-panel__close, .inquiry__close { font-size: 1.6rem; font-weight: 200; }
.detail-panel__index { color: var(--sun); font-size: .7rem; }
.detail-panel__copy { max-width: 34rem; margin: 2rem 0; color: rgba(255,255,255,.72); line-height: 1.65; }
.detail-panel dl { margin: 2.4rem 0 0; border-top: 1px solid rgba(255,255,255,.15); }
.detail-panel dl div { display: grid; grid-template-columns: 7rem 1fr; padding: .85rem 0; border-bottom: 1px solid rgba(255,255,255,.15); font-size: .73rem; }
.detail-panel dt { color: rgba(255,255,255,.48); }
.detail-panel dd { margin: 0; }

.inquiry { inset: 0; padding: clamp(6rem,12vh,9rem) max(1.5rem,10vw); transform: translateY(3%); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 8vw; }
.inquiry form { display: grid; gap: 1.4rem; }
.inquiry label { display: grid; gap: .45rem; }
.inquiry label span { font-size: .67rem; color: rgba(255,255,255,.55); }
.inquiry input, .inquiry select { width: 100%; padding: .75rem 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.3); border-radius: 0; background: transparent; color: var(--white); outline: none; }
.inquiry input:focus, .inquiry select:focus { border-color: var(--sun); }
.inquiry option { color: var(--soil); }
.inquiry form button { justify-self: start; margin-top: .8rem; padding: .85rem 1.2rem; border: 1px solid var(--sun); background: var(--sun); color: var(--soil); cursor: pointer; }
.inquiry form > p { font-size: .62rem; color: rgba(255,255,255,.42); }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 1.5rem; padding: .8rem 1rem; background: var(--cloud); color: var(--soil); font-size: .72rem; transform: translate(-50%,150%); transition: transform .5s var(--ease); }
.toast.is-visible { transform: translate(-50%,0); }

.cursor { position: fixed; z-index: 200; left: 0; top: 0; width: 2rem; height: 2rem; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; pointer-events: none; transform: translate(-50%,-50%); transition: width .25s, height .25s, background .25s; mix-blend-mode: difference; }
.cursor span { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: white; transform: translate(-50%,-50%); }
.cursor.is-hovering { width: 3.2rem; height: 3.2rem; background: rgba(255,255,255,.15); }
body.is-dragging { cursor: grabbing; }
body.is-dragging, body.is-dragging * { user-select: none; }
body.is-dragging .cinema__layer { transition-duration: 1.05s, 0s, 1.05s; }
body.is-dragging .cursor { width: 1.35rem; height: 1.35rem; background: rgba(255,255,255,.2); }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--sun); outline-offset: 4px; }

@keyframes load { from { width: 0; } to { width: 100%; } }
@keyframes breathe { 50% { transform: scale(1.08) rotate(2deg); } }
@keyframes grain { 0% { transform: translate(1%,1%); } 25% { transform: translate(-1%,2%); } 50% { transform: translate(2%,-1%); } 75% { transform: translate(-2%,-2%); } }
@keyframes gesture-dot { to { left: 3.25rem; } }
@keyframes canopy-cross {
  0% { opacity: 0; transform: translateX(-55%) rotate(-7deg) scale(1.18); }
  42%,58% { opacity: 1; transform: translateX(0) rotate(2deg) scale(1.1); }
  100% { opacity: 0; transform: translateX(55%) rotate(8deg) scale(1.18); }
}
@keyframes dome-breathe { 0%,100% { transform: translate(-50%,-50%) scale(.96); opacity: .42; } 50% { transform: translate(-50%,-50%) scale(1.08); opacity: .72; } }

@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

@media (max-width: 760px) {
  .topbar { height: 5rem; grid-template-columns: 1fr auto; padding: 0 1.2rem; }
  .brand { width: 8.8rem; }
  .coordinates { display: none; }
  .route-button span { display: none; }
  .chapter-rail { right: 1.15rem; }
  .chapter-rail p { display: none; }
  .chapter-rail__dots { gap: 0; }
  .chapter-rail__dots a { width: 44px; height: 44px; border: 0; display: grid; place-items: center; }
  .chapter-rail__dots a::before { content: ""; width: 9px; height: 9px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; }
  .chapter-rail__dots a::after { inset: auto; left: 50%; top: 50%; width: 5px; height: 5px; transform: translate(-50%,-50%) scale(0); }
  .chapter-rail__dots a.is-active::after { transform: translate(-50%,-50%) scale(1); }
  .chapter-rail__dots span { right: 36px; }
  .chapter-rail__dots a.is-active span { opacity: 1; transform: translateY(-50%); }
  .chapter { min-height: 112vh; padding: 6rem 3.5rem 5.5rem 1.25rem; }
  .chapter:first-child { min-height: 125vh; }
  .chapter--right { justify-content: flex-start; padding-right: 3.5rem; }
  .chapter__copy, .chapter--right .chapter__copy { width: 100%; }
  .chapter h1, .chapter h2 { font-size: clamp(3.25rem,15vw,5.5rem); line-height: .88; max-width: 10ch; }
  .chapter__body { max-width: 25rem; font-size: .92rem; }
  .hold-button { left: 1.15rem; right: auto; bottom: 1.6rem; }
  .hold-button__ring { width: 4rem; height: 4rem; }
  .sound-note, .chapter__whisper { display: none; }
  footer { left: 1.25rem; right: 3.5rem; bottom: 1.3rem; gap: 1rem; }
  footer span:nth-child(2) { display: none; }
  .inquiry { grid-template-columns: 1fr; align-content: center; gap: 3rem; overflow-y: auto; }
  .final-actions { align-items: flex-start; flex-direction: column; }
  #route-canvas { opacity: .52; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .cinema__layer { transform: none; }
  #route-canvas, .cursor, .onboarding { display: none; }
  .cinema[data-scene="1"] .dome-halo { animation: none; }
}