:root {
  /* compliance typography tokens: (body lets headlines breathe. (Google Interactions:** Interaction Interactions Interactionss Interactionsss Interactions* Interactions: Interactions:* Interactions:::::::::::::::: Interactions::::::::::::::::* (labels; palette avoids pure #000 and #FFF per design */
  --deep-umber: #2c1810;
  --raw-sienna: #a0522d;
  --terracotta: #c67a52;
  --sage: #87976e;
  --parchment: #f4ece1;
  --bone: #faf6f0;
  --deep-moss: #3d4a2e;
  --charred-earth: #1a110b;
  --warm-brown: #4a3728;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --smooth: cubic-bezier(0.37, 0, 0.63, 1);
  --scroll-progress: 0;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  background: #f4ece1;
  color: #2c1810;
  font-family: "Inter", sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: #faf6f0;
  filter: url(#grain);
  opacity: 0.03;
  pointer-events: none;
  z-index: 90;
}

.paper-noise {
  position: fixed;
  pointer-events: none;
}

.scroll-stage {
  display: flex;
  flex-wrap: nowrap;
  width: 100vw;
  height: 100vh;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-behavior: auto;
  background: linear-gradient(to right, #f4ece1, #faf6f0 42%, #f4ece1);
  scrollbar-width: none;
  cursor: grab;
}

.scroll-stage::-webkit-scrollbar {
  display: none;
}

.scroll-stage.is-dragging {
  cursor: grabbing;
}

.panel {
  position: relative;
  flex: 0 0 auto;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

.horizon-panel { width: 120vw; }
.specimen-panel { width: 100vw; }
.strata-panel { width: 150vw; }
.observation-panel { width: 100vw; }
.signal-panel { width: 80vw; }

.contours {
  position: absolute;
  inset: 0;
  transform: translateX(calc(var(--contour-shift, 0px) * -0.5));
  pointer-events: none;
  z-index: 0;
}

.contours svg {
  width: 100%;
  height: 100%;
}

.contours path {
  fill: none;
  stroke: #87976e;
  stroke-width: 0.5px;
  opacity: 0.3;
}

.soil-sample {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(1px);
}

.sample-one {
  width: 38vw;
  height: 38vw;
  left: 7vw;
  bottom: -14vw;
  background: radial-gradient(circle, rgba(198, 122, 82, 0.24), rgba(160, 82, 45, 0.06) 62%, rgba(244, 236, 225, 0) 70%);
}

.sample-two {
  width: 30vw;
  height: 30vw;
  right: 8vw;
  top: 10vh;
  background: radial-gradient(circle, rgba(135, 151, 110, 0.18), rgba(198, 122, 82, 0.07) 64%, rgba(244, 236, 225, 0) 72%);
}

.sample-three {
  width: 58vw;
  height: 58vw;
  left: 20vw;
  top: 12vh;
  background: radial-gradient(circle, rgba(160, 82, 45, 0.10), rgba(135, 151, 110, 0.09) 52%, rgba(244, 236, 225, 0) 72%);
}

.instrument-label,
.panel-kicker,
.blob-label {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #87976e;
  font-weight: 500;
}

.horizon-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 11vw;
}

.logotype {
  margin: 1.5rem 0 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(4rem, 12vw, 10rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 0.78;
  color: #2c1810;
  overflow: hidden;
}

.logotype span {
  display: inline-block;
  transform: translateY(120%);
  will-change: transform;
}

.works-suffix {
  margin-left: clamp(1rem, 2vw, 2rem);
  margin-top: 0.8rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1rem, 2.2vw, 2rem);
  letter-spacing: 0.25em;
  color: #a0522d;
  opacity: 0;
  transform: translateY(14px);
}

.specimen-map {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 8vh 7vw;
}

.specimen-map > .panel-kicker {
  position: absolute;
  left: 7vw;
  top: 6vh;
}

.tendrils {
  position: absolute;
  inset: 11vh 5vw 9vh 5vw;
  width: calc(100% - 10vw);
  height: 80vh;
  pointer-events: none;
  z-index: 1;
}

.tendril-path {
  fill: none;
  stroke: #87976e;
  stroke-width: 1px;
  opacity: 0.76;
  stroke-dasharray: 900;
  stroke-dashoffset: var(--tendril-offset, 900);
}

.blob {
  position: absolute;
  background: #faf6f0;
  color: #4a3728;
  box-shadow: 0 8px 32px rgba(44, 24, 16, 0.08);
  border: 2px solid rgba(198, 122, 82, 0);
  overflow: hidden;
  transition: border-radius 650ms var(--spring), border-color 300ms ease-in-out, box-shadow 650ms var(--spring);
  z-index: 3;
  padding: clamp(1.35rem, 2.5vw, 2.25rem);
  will-change: transform, border-radius;
}

.blob::before {
  content: "";
  position: absolute;
  inset: -24%;
  background: radial-gradient(circle at 36% 20%, rgba(198, 122, 82, 0.15), rgba(198, 122, 82, 0) 42%), radial-gradient(circle at 72% 78%, rgba(135, 151, 110, 0.16), rgba(135, 151, 110, 0) 45%);
  pointer-events: none;
}

.blob > * {
  position: relative;
  z-index: 1;
}

.blob h2 {
  margin: 0.5rem 0 0.7rem;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.7rem, 2.4vw, 2.7rem);
  line-height: 0.95;
  color: #2c1810;
}

.blob p {
  margin: 0;
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  line-height: 1.7;
}

.specimen-blob.is-hovered {
  border-color: #c67a52;
  box-shadow: 0 18px 48px rgba(44, 24, 16, 0.13);
}

.blob-alpha {
  width: 26vw;
  min-width: 310px;
  left: 9vw;
  top: 20vh;
  border-radius: 42% 58% 63% 37% / 44% 56% 38% 62%;
}

.blob-alpha.is-hovered { border-radius: 58% 42% 48% 52% / 36% 65% 35% 64%; }

.blob-beta {
  width: 29vw;
  min-width: 330px;
  right: 13vw;
  top: 15vh;
  border-radius: 62% 38% 46% 54% / 52% 40% 60% 48%;
}

.blob-beta.is-hovered { border-radius: 44% 56% 68% 32% / 64% 34% 66% 36%; }

.blob-gamma {
  width: 30vw;
  min-width: 330px;
  left: 26vw;
  bottom: 10vh;
  border-radius: 50% 50% 34% 66% / 62% 42% 58% 38%;
}

.blob-gamma.is-hovered { border-radius: 36% 64% 54% 46% / 44% 58% 42% 56%; }

.blob-delta {
  width: 23vw;
  min-width: 285px;
  right: 6vw;
  bottom: 17vh;
  border-radius: 38% 62% 60% 40% / 48% 54% 46% 52%;
}

.blob-delta.is-hovered { border-radius: 58% 42% 36% 64% / 38% 62% 54% 46%; }

.strata-panel {
  background: linear-gradient(to right, #f4ece1, #faf6f0 26%, #f4ece1 74%);
}

.strata-title {
  position: absolute;
  top: 8vh;
  left: 8vw;
  z-index: 5;
}

.strata-title h2 {
  margin: 0.5rem 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 0.95;
  color: #2c1810;
}

.strata-field {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72vh;
  overflow: hidden;
  border-top: 1px solid rgba(135, 151, 110, 0.28);
}

.stratum {
  position: absolute;
  left: -10vw;
  width: 170vw;
  height: 20%;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 12vw;
  transform: translateX(calc(var(--scroll-offset, 0px) * var(--rate)));
  transition: background-color 300ms ease-in-out;
  font-family: "Inter", sans-serif;
  color: #2c1810;
}

.stratum::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(250, 246, 240, 0.18), rgba(26, 17, 11, 0.05), rgba(250, 246, 240, 0.14));
  pointer-events: none;
}

.stratum span,
.stratum strong,
.stratum em {
  position: relative;
  z-index: 1;
}

.stratum span {
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: 0.2em;
  color: #87976e;
}

.stratum strong {
  min-width: 22vw;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2rem, 3.3vw, 4rem);
  line-height: 1;
}

.stratum em {
  max-width: 36vw;
  font-style: normal;
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  line-height: 1.7;
  color: #4a3728;
}

.layer-one { top: 0; background: #faf6f0; }
.layer-two { top: 20%; background: #f4ece1; }
.layer-three { top: 40%; background: rgba(198, 122, 82, 0.42); }
.layer-four { top: 60%; background: rgba(160, 82, 45, 0.54); }
.layer-five { top: 80%; background: #1a110b; color: #faf6f0; }
.layer-five em { color: #f4ece1; }
.layer-five strong { color: #faf6f0; }

.observation-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, #f4ece1, #faf6f0);
}

.observation-blob {
  position: relative;
  z-index: 2;
  width: 50vw;
  height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5vw;
  text-align: center;
  background: radial-gradient(ellipse, #faf6f0, #f4ece1);
  box-shadow: 0 20px 70px rgba(44, 24, 16, 0.12);
  animation: morph 12s var(--smooth) infinite;
}

.observation-blob blockquote {
  margin: 1rem 0 0;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.2rem, 4.3vw, 4.5rem);
  line-height: 0.98;
  color: #2c1810;
}

@keyframes morph {
  0%, 100% { border-radius: 42% 58% 63% 37% / 44% 56% 38% 62%; }
  25% { border-radius: 60% 40% 48% 52% / 34% 66% 42% 58%; }
  50% { border-radius: 48% 52% 35% 65% / 62% 38% 58% 42%; }
  75% { border-radius: 36% 64% 56% 44% / 48% 52% 34% 66%; }
}

.signal-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, #faf6f0, #f4ece1 55%, rgba(135, 151, 110, 0.16));
}

.signal-terminal {
  width: min(58vw, 760px);
  min-height: 42vh;
  padding: clamp(2rem, 4vw, 4rem);
  background: rgba(250, 246, 240, 0.74);
  border: 1px solid rgba(135, 151, 110, 0.34);
  border-radius: 54% 46% 49% 51% / 42% 56% 44% 58%;
  box-shadow: 0 10px 60px rgba(44, 24, 16, 0.09);
}

.signal-terminal h2 {
  min-height: 5.5em;
  margin: 1.2rem 0 1.8rem;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.3rem, 4.5vw, 4.8rem);
  line-height: 0.98;
  color: #2c1810;
}

.signal-address {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: 0.12em;
  color: #a0522d;
  font-size: clamp(1rem, 1.55vw, 1.45rem);
}

.signal-address::after,
.signal-terminal h2::after {
  content: "_";
  color: #87976e;
  animation: blink 900ms steps(2, end) infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

.progress-chassis {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: rgba(74, 55, 40, 0.14);
  z-index: 100;
}

.progress-fill {
  height: 100%;
  width: calc(var(--scroll-progress) * 100%);
  background: linear-gradient(to right, #a0522d, #87976e);
  transform-origin: left center;
}

.progress-dot {
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #87976e;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px rgba(244, 236, 225, 0.8);
  transition: transform 500ms var(--spring), background-color 300ms ease-in-out;
}

.progress-dot[data-index="0"] { left: 0%; }
.progress-dot[data-index="1"] { left: 26.666%; }
.progress-dot[data-index="2"] { left: 48.888%; }
.progress-dot[data-index="3"] { left: 82.222%; }
.progress-dot[data-index="4"] { left: 100%; }

.progress-dot.is-active {
  background: #a0522d;
  transform: translate(-50%, -50%) scale(1.5);
}

@media (max-width: 900px) {
  .blob-alpha, .blob-beta, .blob-gamma, .blob-delta {
    min-width: 270px;
  }

  .blob-alpha { left: 7vw; top: 16vh; }
  .blob-beta { right: 6vw; top: 20vh; }
  .blob-gamma { left: 13vw; bottom: 11vh; }
  .blob-delta { right: 4vw; bottom: 8vh; }

  .observation-blob {
    width: 74vw;
  }

  .signal-terminal {
    width: 68vw;
  }
}