:root {
  /* DESIGN typography token: IBM Plex Mono** */
  --parchment: #E8D2A8;
  --umber: #20150F;
  --tobacco: #7A5131;
  --rose: #B87A63;
  --cyan: #8FE7E2;
  --violet: #4B3A5E;
  --brass: #B69A58;
  --milk: #FFF2D0;
  --syne: "Syne", system-ui, sans-serif;
  --cormorant: "Cormorant Garamond", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --fraunces: "Fraunces", Georgia, serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }

body {
  color: var(--umber);
  background: var(--umber);
  font-family: var(--fraunces);
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: .24;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255,242,208,.7) 0 1px, transparent 1.4px),
    radial-gradient(circle at 80% 30%, rgba(32,21,15,.45) 0 1px, transparent 1.5px),
    linear-gradient(115deg, transparent 0 45%, rgba(255,242,208,.18) 48%, transparent 52%);
  background-size: 74px 74px, 51px 51px, 100% 100%;
  mix-blend-mode: multiply;
}

.topbar {
  position: fixed;
  top: 22px;
  left: 28px;
  right: 28px;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: rgba(255,242,208,.75);
  text-transform: uppercase;
}

.journey {
  width: 100vw;
  height: 100vh;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  perspective: 1200px;
  cursor: grab;
}

.journey.dragging { cursor: grabbing; scroll-behavior: auto; }
.journey::-webkit-scrollbar { display: none; }

.station {
  position: relative;
  flex: 0 0 100vw;
  height: 100vh;
  scroll-snap-align: start;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 70% 22%, rgba(143,231,226,.16), transparent 22%),
    radial-gradient(circle at 12% 78%, rgba(183,122,99,.2), transparent 25%),
    linear-gradient(180deg, #4B3A5E 0%, #7A5131 37%, #E8D2A8 72%, #B69A58 100%);
}

.station::before {
  content: attr(data-station);
  position: absolute;
  top: 12vh;
  left: 8vw;
  font-family: var(--mono);
  color: rgba(255,242,208,.17);
  font-size: 26vw;
  line-height: 1;
  z-index: -1;
}

.station::after {
  content: "";
  position: absolute;
  inset: 8vh 5vw 11vh;
  border: 1px solid rgba(255,242,208,.28);
  box-shadow: inset 0 0 0 1px rgba(182,154,88,.2), inset 0 0 70px rgba(255,242,208,.08);
  transform: skewX(-2deg);
  pointer-events: none;
}

.copy { position: absolute; z-index: 8; max-width: 560px; }
.micro, .coordinate, .label {
  font-family: var(--mono);
  color: var(--brass);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

h1, h2 {
  margin: 0;
  font-family: var(--syne);
  font-weight: 800;
  letter-spacing: -.07em;
  color: var(--milk);
  text-shadow: 0 18px 35px rgba(32,21,15,.42);
}

h1 { font-size: clamp(58px, 12vw, 172px); transform: skewY(-2deg); }
h1 span { color: var(--cyan); text-shadow: 0 0 30px rgba(143,231,226,.8); }
h2 { font-size: clamp(44px, 7vw, 104px); line-height: .88; }

p { font-size: clamp(18px, 2vw, 28px); line-height: 1.32; color: rgba(32,21,15,.84); }
.poem { font-family: var(--cormorant); font-style: italic; font-size: clamp(26px, 3vw, 43px); color: var(--milk); }

.hero-copy { left: 11vw; top: 28vh; max-width: 78vw; }
.off-left { left: 10vw; top: 25vh; }
.upper-right { right: 11vw; top: 18vh; text-align: right; }
.center-low { left: 31vw; bottom: 16vh; text-align: center; }
.final-copy { left: 12vw; top: 20vh; }

.horizon, .foreground { position: absolute; left: 0; right: 0; bottom: 0; }
.horizon { height: 34vh; background: linear-gradient(180deg, transparent, rgba(32,21,15,.28)), radial-gradient(ellipse at center, #FFF2D0 0%, #E8D2A8 43%, #7A5131 100%); }
.grass-row, .wheat, .final-field { height: 21vh; background: repeating-linear-gradient(100deg, transparent 0 15px, rgba(32,21,15,.38) 16px 18px, transparent 19px 34px), linear-gradient(180deg, transparent, rgba(32,21,15,.52)); }

.window-frame {
  position: absolute;
  inset: 15vh 8vw 18vh;
  border: 2px solid rgba(255,242,208,.34);
  border-radius: 38px;
  box-shadow: inset 0 0 45px rgba(143,231,226,.12), 0 22px 90px rgba(32,21,15,.35);
}

.orbital-ring { position: absolute; border: 1px solid rgba(143,231,226,.36); border-radius: 50%; transform: rotate(-16deg); }
.ring-one { width: 36vw; height: 12vw; right: 14vw; top: 18vh; }
.ring-two { width: 46vw; height: 16vw; right: 9vw; top: 26vh; border-color: rgba(182,154,88,.32); }

.specimen { position: absolute; z-index: 5; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 35px 45px rgba(32,21,15,.42)); }
.hero-crystal { width: 126px; height: 188px; right: 23vw; top: 32vh; animation: slowSpin 12s linear infinite; }
.hero-crystal .facet, .meadow-pod span, .satellite-fruit b, .memory-stone em { position: absolute; inset: 0; clip-path: polygon(50% 0, 92% 33%, 72% 100%, 28% 100%, 8% 33%); }
.hero-crystal .f1 { background: linear-gradient(140deg, rgba(143,231,226,.88), rgba(255,242,208,.48), rgba(75,58,94,.35)); }
.hero-crystal .f2 { transform: translateZ(20px) scale(.72); background: rgba(255,242,208,.3); }
.hero-crystal .f3 { transform: rotate(58deg) translateZ(-14px) scale(.62); background: rgba(143,231,226,.42); }

.paper-chart { position: absolute; inset: 14vh 14vw; opacity: .45; background-image: linear-gradient(rgba(122,81,49,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(122,81,49,.28) 1px, transparent 1px); background-size: 54px 54px; transform: rotate(-4deg); }
.meadow-pod { width: 220px; height: 220px; right: 17vw; top: 31vh; }
.meadow-pod span:nth-child(1) { background: linear-gradient(130deg, #FFF2D0, #B87A63); transform: rotate(18deg); }
.meadow-pod span:nth-child(2) { background: rgba(143,231,226,.55); transform: rotate(-24deg) scale(.68) translateZ(28px); }
.meadow-pod span:nth-child(3) { background: rgba(75,58,94,.34); transform: rotate(62deg) scale(.52); }
.floating-label { position: absolute; right: 12vw; bottom: 23vh; }

.orchard { background: radial-gradient(circle at 32% 35%, rgba(143,231,226,.13), transparent 20%), linear-gradient(180deg, #4B3A5E 0%, #7A5131 44%, #E8D2A8 100%); }
.moon.small { position: absolute; width: 120px; height: 120px; left: 18vw; top: 16vh; border-radius: 50%; background: linear-gradient(145deg, #FFF2D0, #B69A58 62%, #7A5131); box-shadow: 0 0 80px rgba(255,242,208,.28); }
.branch-array { position: absolute; left: 10vw; bottom: 18vh; width: 58vw; height: 48vh; }
.branch-array i { position: absolute; bottom: 0; width: 3px; height: 100%; background: var(--tobacco); transform-origin: bottom; }
.branch-array i:nth-child(1){left:10%;transform:rotate(-31deg)} .branch-array i:nth-child(2){left:24%;transform:rotate(-12deg)} .branch-array i:nth-child(3){left:39%;transform:rotate(8deg)} .branch-array i:nth-child(4){left:55%;transform:rotate(26deg)} .branch-array i:nth-child(5){left:70%;transform:rotate(38deg)}
.satellite-fruit { width: 250px; height: 250px; left: 33vw; top: 34vh; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #FFF2D0, rgba(143,231,226,.75) 16%, rgba(183,122,99,.54) 48%, rgba(75,58,94,.42)); }
.satellite-fruit b { border: 1px solid rgba(255,242,208,.35); transform: rotate(calc(var(--i, 1) * 35deg)) scale(.82); }
.satellite-fruit b:nth-child(1){--i:1}.satellite-fruit b:nth-child(2){--i:2}.satellite-fruit b:nth-child(3){--i:3}.satellite-fruit b:nth-child(4){--i:4}
.orchard-code { position: absolute; left: 13vw; top: 61vh; }

.conservatory { background: linear-gradient(180deg, #20150F 0%, #4B3A5E 33%, #B87A63 67%, #E8D2A8); }
.archive-shelves { position: absolute; inset: 16vh 9vw; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; opacity: .5; }
.archive-shelves span { border: 1px solid rgba(255,242,208,.2); background: linear-gradient(180deg, rgba(255,242,208,.08), rgba(182,154,88,.18)); transform: skewY(-4deg); }
.memory-stone { width: 290px; height: 190px; left: 14vw; top: 31vh; border-radius: 44% 56% 48% 52%; background: linear-gradient(145deg, rgba(255,242,208,.7), rgba(143,231,226,.35), rgba(75,58,94,.52)); }
.memory-stone em { opacity: .35; border: 1px solid var(--milk); transform: scale(.75) rotate(23deg); }
.pressed-flower { position: absolute; right: 18vw; top: 24vh; width: 160px; height: 250px; background: radial-gradient(ellipse at 50% 15%, rgba(255,242,208,.55) 0 18%, transparent 19%), linear-gradient(90deg, transparent 48%, rgba(32,21,15,.5) 49% 51%, transparent 52%); transform: rotate(16deg); }

.signal { background: radial-gradient(circle at 74% 29%, rgba(143,231,226,.18), transparent 18%), linear-gradient(180deg, #20150F 0%, #4B3A5E 38%, #7A5131 70%, #E8D2A8); }
.faceted-moon { position: absolute; right: 17vw; top: 18vh; width: 260px; height: 260px; clip-path: polygon(50% 0, 90% 18%, 100% 62%, 65% 100%, 20% 88%, 0 42%); background: linear-gradient(135deg, #FFF2D0, #B69A58 38%, #8FE7E2 39%, #4B3A5E); box-shadow: 0 0 100px rgba(143,231,226,.22); }
.signal-lines { position: absolute; right: 22vw; top: 50vh; width: 32vw; height: 24vh; }
.signal-lines span { position: absolute; inset: auto 0; height: 1px; background: linear-gradient(90deg, transparent, #8FE7E2, transparent); animation: pulse 3.5s ease-in-out infinite; }
.signal-lines span:nth-child(1){top:20%}.signal-lines span:nth-child(2){top:50%;animation-delay:.6s}.signal-lines span:nth-child(3){top:80%;animation-delay:1.2s}

.rail { position: fixed; z-index: 60; left: 10vw; right: 10vw; bottom: 28px; height: 42px; display: flex; justify-content: space-between; align-items: center; }
.rail::before { content: ""; position: absolute; left: 0; right: 0; top: 20px; height: 2px; background: linear-gradient(90deg, transparent, #B69A58, transparent); box-shadow: 0 0 18px rgba(182,154,88,.45); }
.rail button { position: relative; border: 0; background: transparent; color: var(--milk); font-family: var(--mono); letter-spacing: .12em; cursor: pointer; padding: 22px 8px 0; }
.rail button span { position: absolute; top: 10px; left: 50%; width: 15px; height: 15px; transform: translateX(-50%) rotate(45deg); background: var(--brass); border: 1px solid var(--milk); transition: background .3s, box-shadow .3s; }
.rail button.active span { background: var(--cyan); box-shadow: 0 0 22px rgba(143,231,226,.82); }

@keyframes slowSpin { to { rotate: 360deg; } }
@keyframes pulse { 0%,100%{ opacity:.2; transform: scaleX(.5); } 50%{ opacity:1; transform: scaleX(1); } }

@media (max-width: 760px) {
  .topbar { left: 16px; right: 16px; font-size: 9px; }
  .hint { display: none; }
  .copy { left: 8vw !important; right: 8vw !important; top: 18vh; text-align: left; }
  h1 { font-size: 20vw; }
  h2 { font-size: 15vw; }
  .specimen, .faceted-moon { transform: scale(.75); }
  .rail { left: 4vw; right: 4vw; }
}