:root {
  --mountain-milk: #F2EEDC;
  --moss-shadow: #243B2A;
  --cabin-bark: #7B5A3A;
  --alpine-slate: #5E7180;
  --dusk-plum: #2A203B;
  --signal-melon: #FF7A5C;
  --phosphor-mint: #B8F2D0;
  --faded-sky: #A9C7D8;
  --paper-shadow: 0 22px 70px rgba(42, 32, 59, .16), 0 5px 18px rgba(36, 59, 42, .12);
  --lift-shadow: 0 32px 90px rgba(42, 32, 59, .24), 0 9px 24px rgba(36, 59, 42, .18);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--mountain-milk);
  color: var(--moss-shadow);
  font-family: "Instrument Sans", sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(184, 242, 208, .24), transparent 28%),
    radial-gradient(circle at 80% 12%, rgba(169, 199, 216, .28), transparent 30%),
    linear-gradient(115deg, rgba(123, 90, 58, .06), transparent 44%);
  z-index: 0;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  z-index: 30;
  background-image: repeating-radial-gradient(circle at 0 0, rgba(36, 59, 42, .12) 0 1px, transparent 1px 4px);
  mix-blend-mode: multiply;
}

.fixed-coordinates,
.chapter-index,
.scroll-meter,
.caption-dock { position: fixed; z-index: 20; }

.fixed-coordinates {
  top: 1.35rem;
  left: 1.35rem;
  display: flex;
  gap: .8rem;
  font-family: "Archivo", sans-serif;
  font-size: .7rem;
  letter-spacing: .16em;
  color: rgba(36, 59, 42, .68);
}

.chapter-index {
  top: 1.1rem;
  right: 1.35rem;
  display: flex;
  gap: .55rem;
  align-items: center;
  padding: .45rem;
  border: 1px solid rgba(36, 59, 42, .13);
  border-radius: 999px;
  background: rgba(242, 238, 220, .72);
  backdrop-filter: blur(10px);
}

.chapter-index a {
  color: var(--moss-shadow);
  text-decoration: none;
  font-family: "Archivo", sans-serif;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .42rem .55rem;
  border-radius: 999px;
  opacity: .55;
  transition: background .35s ease, opacity .35s ease, color .35s ease;
}

.chapter-index a.active {
  background: var(--moss-shadow);
  color: var(--phosphor-mint);
  opacity: 1;
}

.scroll-meter {
  left: 1.35rem;
  bottom: 1.35rem;
  width: 8rem;
  height: 2px;
  background: rgba(36, 59, 42, .18);
}

.scroll-meter span {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--signal-melon);
}

.caption-dock {
  right: 1.35rem;
  bottom: 1.1rem;
  max-width: 18rem;
  padding: .75rem .9rem;
  border: 1px solid rgba(184, 242, 208, .2);
  border-radius: 1rem;
  background: rgba(42, 32, 59, .84);
  color: var(--phosphor-mint);
  font-family: "Archivo", sans-serif;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: 0 12px 34px rgba(42, 32, 59, .22);
}

.return-trail { position: relative; z-index: 1; }

.tray {
  min-height: 100vh;
  padding: clamp(5.4rem, 7vw, 7rem) clamp(1rem, 3vw, 3rem) clamp(2.5rem, 5vw, 4rem);
  display: grid;
  gap: clamp(.8rem, 1.4vw, 1.25rem);
  position: relative;
}

.bento,
.signal-cabin {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(36, 59, 42, .12);
  border-radius: clamp(1.1rem, 2vw, 2rem);
  background: rgba(242, 238, 220, .7);
  box-shadow: var(--paper-shadow);
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), box-shadow .7s cubic-bezier(.2, .8, .2, 1), filter .7s ease;
  transform-origin: center;
}

.lift-card.is-hovered,
.lift-card:hover {
  transform: scale(1.035);
  box-shadow: var(--lift-shadow);
  z-index: 5;
}

.photo {
  background-size: cover;
  background-position: center;
  min-height: 18rem;
}

.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(36, 59, 42, .04), rgba(36, 59, 42, .38));
  pointer-events: none;
}

.cell-label,
.kicker,
.section-head span,
.glow-label,
.coordinate-line {
  font-family: "Archivo", sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .68rem;
  font-weight: 600;
}

.cell-label {
  position: absolute;
  top: 1rem;
  left: 1rem;
  color: rgba(36, 59, 42, .68);
  z-index: 2;
}

.tray-marker {
  grid-template-columns: 1.4fr .8fr 1fr;
  grid-template-rows: .72fr 1fr;
  background: linear-gradient(180deg, var(--mountain-milk), rgba(169, 199, 216, .24));
}

.tray-title {
  grid-column: 1 / 3;
  grid-row: 1;
  align-self: end;
}

.kicker { color: var(--cabin-bark); margin: 0 0 .7rem; }

h1 {
  margin: 0;
  font-size: clamp(3.5rem, 11vw, 10rem);
  line-height: .82;
  letter-spacing: -.075em;
  color: var(--moss-shadow);
}

.ridge-photo {
  grid-column: 1 / 3;
  grid-row: 2;
  background-image: linear-gradient(rgba(36, 59, 42, .04), rgba(36, 59, 42, .2)), url("https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1600&q=80");
  background-position: center 66%;
}

.glow-label {
  position: absolute;
  left: 1.2rem;
  bottom: 1.1rem;
  z-index: 3;
  color: var(--phosphor-mint);
  background: rgba(36, 59, 42, .72);
  border: 1px solid rgba(184, 242, 208, .4);
  border-radius: 999px;
  padding: .65rem .9rem;
  box-shadow: 0 0 24px rgba(184, 242, 208, .28);
}

.ridge-line,
.horizon {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 45%;
  height: 1px;
  background: var(--phosphor-mint);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 4;
  opacity: .85;
}

.draw-line.in-view { animation: drawHorizon 2.8s ease forwards; }

@keyframes drawHorizon { to { transform: scaleX(1); } }

.note-cell {
  grid-column: 3;
  grid-row: 1 / 2;
  padding: 4rem 1.3rem 1.3rem;
  background: rgba(184, 242, 208, .28);
}

.note-cell p,
.calibration-note p,
.path-note p,
.final-copy p {
  font-family: "Newsreader", serif;
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  line-height: 1.2;
  margin: 0;
}

.mini-map {
  grid-column: 3;
  grid-row: 2;
  background: linear-gradient(135deg, rgba(169, 199, 216, .48), rgba(242, 238, 220, .78));
}

.orbit-ring {
  position: absolute;
  width: 11rem;
  height: 11rem;
  border: 1px solid rgba(42, 32, 59, .28);
  border-radius: 50%;
  right: 10%;
  bottom: 14%;
}

.orbit-ring::before,
.orbit-ring::after {
  content: "";
  position: absolute;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: rgba(184, 242, 208, .62);
  box-shadow: 0 0 22px rgba(184, 242, 208, .48);
}

.orbit-ring::before { left: 16%; top: 18%; }
.orbit-ring::after { right: 14%; bottom: 18%; background: rgba(255, 122, 92, .58); }

.paired-dots {
  position: absolute;
  left: 1.2rem;
  bottom: 1.2rem;
  display: flex;
  gap: .45rem;
}

.paired-dots i,
.alt-dot {
  width: .48rem;
  height: .48rem;
  border-radius: 50%;
  background: var(--signal-melon);
  box-shadow: 0 0 18px var(--signal-melon);
  animation: blinkPair 2.6s ease-in-out infinite;
}
.paired-dots i:nth-child(2), .dot-b { animation-delay: .28s; }

@keyframes blinkPair { 0%, 100% { opacity: .35; } 45% { opacity: 1; } }

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  font-family: "Archivo", sans-serif;
  font-size: .67rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(36, 59, 42, .48);
}

.tray-inventory {
  grid-template-columns: 1fr 1fr 1.6fr;
  grid-template-rows: auto 1fr 1fr;
  background: linear-gradient(180deg, rgba(169, 199, 216, .16), var(--mountain-milk));
}

.section-head { grid-column: 1 / -1; align-self: end; }
.section-head span { color: var(--alpine-slate); }
.section-head h2,
.final-copy h2 {
  margin: .35rem 0 0;
  max-width: 54rem;
  font-size: clamp(2rem, 5.5vw, 5.8rem);
  line-height: .92;
  letter-spacing: -.055em;
}

.object-card { min-height: 16rem; padding: 4rem 1rem 1rem; }
.object-card p { position: absolute; left: 1rem; bottom: 1rem; margin: 0; font-family: "Newsreader", serif; font-size: 1.2rem; }
.compass { background: rgba(242, 238, 220, .94); }
.compass-dial { position: absolute; inset: 28% 24%; border: 1px solid var(--cabin-bark); border-radius: 50%; }
.compass-dial b { position: absolute; left: 50%; top: 12%; width: 2px; height: 76%; background: var(--signal-melon); transform: rotate(34deg); transform-origin: center; }
.boot { background: rgba(123, 90, 58, .14); }
.bootprint { position: absolute; width: 7rem; height: 11rem; right: 20%; top: 22%; border-radius: 46% 44% 55% 48%; background: rgba(36, 59, 42, .22); transform: rotate(-22deg); }
.seeds { background: rgba(184, 242, 208, .34); }
.seed-packet { position: absolute; inset: 24% 24% 18%; border: 1px solid rgba(123, 90, 58, .42); border-radius: .8rem; display: grid; place-items: center; text-align: center; color: var(--cabin-bark); font-size: 3rem; }
.seed-packet small { font-family: "Newsreader", serif; font-size: 1rem; }
.device { background: var(--moss-shadow); color: var(--phosphor-mint); }
.device .cell-label { color: rgba(184, 242, 208, .68); }
.device-screen { position: absolute; inset: 30% 16% 22%; border: 1px solid rgba(184, 242, 208, .38); border-radius: .9rem; background: rgba(184, 242, 208, .1); }
.device-screen span { display: block; height: 1px; margin: 1.5rem 1.1rem; background: var(--phosphor-mint); box-shadow: 0 0 12px var(--phosphor-mint); }
.cabin-photo { grid-column: 3; grid-row: 2 / 4; background-image: url("https://images.unsplash.com/photo-1449158743715-0a90ebb6d2d8?auto=format&fit=crop&w=1200&q=80"); }
.cabin-photo .cell-label { color: var(--mountain-milk); }
.map-fold { background: rgba(169, 199, 216, .32); }
.map-fold svg { position: absolute; inset: 22% 10% 12%; width: 80%; height: 66%; fill: none; stroke: var(--moss-shadow); stroke-width: 2; opacity: .72; }
.map-fold circle { fill: var(--signal-melon); stroke: none; }

.tray-calibration {
  grid-template-columns: 1.4fr .72fr;
  grid-template-rows: auto 1fr;
  background: var(--dusk-plum);
  color: var(--mountain-milk);
}
.dark-head span { color: var(--phosphor-mint); }
.calibration-photo {
  grid-column: 1 / 3;
  min-height: 58vh;
  background-image: linear-gradient(90deg, rgba(42, 32, 59, .48), rgba(36, 59, 42, .12)), url("https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&fit=crop&w=1800&q=80");
}
.horizon { top: 52%; background: var(--signal-melon); }
.scan-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(184,242,208,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,122,92,.13) 1px, transparent 1px); background-size: 100% 18%, 12% 100%; opacity: .38; z-index: 2; }
.alt-dot { position: absolute; z-index: 4; background: var(--phosphor-mint); box-shadow: 0 0 18px var(--phosphor-mint); }
.dot-a { left: 22%; top: 46%; }
.dot-b { left: 55%; top: 40%; }
.dot-c { right: 18%; top: 54%; animation-delay: .6s; }
.coordinate-line { position: absolute; z-index: 4; color: var(--phosphor-mint); }
.line-one { left: 8%; top: 18%; }
.line-two { right: 8%; bottom: 14%; color: var(--signal-melon); }
.calibration-note { padding: 4rem 1.3rem 1.3rem; background: rgba(242, 238, 220, .08); border-color: rgba(184, 242, 208, .14); color: var(--mountain-milk); }
.calibration-note .cell-label { color: var(--phosphor-mint); }

.tray-path { background: linear-gradient(180deg, var(--mountain-milk), rgba(169, 199, 216, .32)); }
.trail-diagram { grid-column: 1 / -1; min-height: 64vh; position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1rem; }
.snowfield { position: absolute; inset: 7% 10%; border-top: 2px dashed rgba(94, 113, 128, .42); transform: skewY(-8deg); }
.snowfield::before, .snowfield::after { content: ""; position: absolute; width: 46%; height: 2px; background: rgba(36, 59, 42, .34); left: 28%; top: 52%; transform-origin: left; }
.snowfield::before { transform: rotate(-22deg); }
.snowfield::after { transform: rotate(24deg); }
.cairn { display: grid; place-items: center; min-height: 12rem; background: rgba(123, 90, 58, .2); }
.cairn span { font-family: "Archivo", sans-serif; font-size: 3rem; color: var(--cabin-bark); }
.cairn-one { grid-column: 1; grid-row: 2; }
.cairn-two { grid-column: 3; grid-row: 1; background: rgba(184, 242, 208, .38); }
.path-note { grid-column: 2; grid-row: 1 / 3; padding: 4rem 1.3rem 1.3rem; background: var(--moss-shadow); color: var(--mountain-milk); align-content: end; }
.path-note .cell-label { color: var(--phosphor-mint); }
.pressed-fern { grid-column: 3; grid-row: 2; background: rgba(242, 238, 220, .8); }
.fern-stem { position: absolute; width: 2px; height: 72%; left: 50%; top: 14%; background: rgba(36, 59, 42, .5); transform: rotate(12deg); }
.fern-stem::before, .fern-stem::after { content: ""; position: absolute; width: 6rem; height: 9rem; border-top: 1px solid rgba(36, 59, 42, .34); border-radius: 50%; }
.fern-stem::before { right: 0; top: 12%; transform: rotate(-28deg); }
.fern-stem::after { left: 0; top: 34%; transform: rotate(32deg); }

.tray-signal {
  min-height: 100vh;
  background: radial-gradient(circle at 50% 70%, rgba(184, 242, 208, .12), transparent 28%), var(--dusk-plum);
  color: var(--mountain-milk);
  grid-template-columns: 1fr 1fr;
  place-items: center;
}
.signal-cabin { width: min(35rem, 80vw); height: 26rem; overflow: visible; background: transparent; border: none; box-shadow: none; }
.cabin-roof { position: absolute; left: 8%; right: 8%; top: 18%; height: 38%; background: var(--moss-shadow); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.cabin-body { position: absolute; left: 20%; right: 20%; bottom: 12%; height: 48%; background: #1a1426; border: 1px solid rgba(184, 242, 208, .16); border-radius: .45rem; }
.window { position: absolute; top: 32%; width: 4.4rem; height: 4.4rem; border-radius: .35rem; background: var(--phosphor-mint); box-shadow: 0 0 38px rgba(184, 242, 208, .8); animation: warmWindow 5s ease-in-out infinite alternate; }
.window-one { left: 22%; }
.window-two { right: 22%; animation-delay: 1.2s; }
@keyframes warmWindow { to { background: var(--signal-melon); box-shadow: 0 0 52px rgba(255, 122, 92, .82); } }
.final-copy span { font-family: "Archivo", sans-serif; color: var(--phosphor-mint); letter-spacing: .16em; text-transform: uppercase; font-size: .72rem; }
.final-copy h2 { max-width: 40rem; }
.final-copy p { color: var(--signal-melon); margin-top: 1.3rem; }
.star-ticks i { position: absolute; width: 1px; height: 1.6rem; background: var(--faded-sky); opacity: .6; }
.star-ticks i:nth-child(1) { left: 12%; top: 24%; transform: rotate(42deg); }
.star-ticks i:nth-child(2) { right: 18%; top: 18%; transform: rotate(-28deg); }
.star-ticks i:nth-child(3) { left: 44%; bottom: 18%; transform: rotate(75deg); }
.star-ticks i:nth-child(4) { right: 9%; bottom: 32%; transform: rotate(12deg); }

@media (max-width: 860px) {
  .chapter-index { display: none; }
  .tray, .tray-marker, .tray-inventory, .tray-calibration, .tray-signal { display: flex; flex-direction: column; }
  .bento, .photo { min-height: 16rem; }
  .trail-diagram { display: flex; flex-direction: column; }
  .caption-dock { left: 1rem; right: 1rem; bottom: .8rem; }
  .fixed-coordinates { left: 1rem; }
  .scroll-meter { display: none; }
}