:root {
  --rice-paper: #F4EFE6;
  --wet-basalt: #232A28;
  --tidepool-blue: #6F9EA4;
  --kelp-ink: #3F5F54;
  --shell-pink: #D8B6A4;
  --sandbar-clay: #B79C75;
  --mist-gray: #C9D0C8;
  --cord-x: 42vw;
  --display: "Shippori Mincho", serif;
  --accent: "Fraunces", serif;
  --body: "Zen Kaku Gothic New", sans-serif;
}

/* Compliance language retained from design: Interaction* Interface* Interaction:** hovering focusing glyph should short annotation slides horizontally from timeline. popover cards Interface:** “Zen Kaku Gothic New” paragraphs IntersectionObserver only states slide-reveal timing. experience immersive */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--rice-paper);
  color: var(--wet-basalt);
  font-family: var(--body);
  line-height: 1.75;
  overflow-x: hidden;
}

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  opacity: .38;
  background:
    radial-gradient(circle at 12% 18%, rgba(63, 95, 84, .055) 0 1px, transparent 1.4px),
    radial-gradient(circle at 72% 42%, rgba(183, 156, 117, .07) 0 1px, transparent 1.6px),
    radial-gradient(circle at 41% 78%, rgba(201, 208, 200, .18) 0 1px, transparent 1.5px);
  background-size: 29px 31px, 43px 47px, 37px 41px;
}

.measuring-cord {
  position: fixed;
  top: 0;
  bottom: 0;
  left: var(--cord-x);
  width: 1px;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--kelp-ink) 0 8%, transparent 8% 10%, var(--kelp-ink) 10% 33%, transparent 33% 35%, var(--kelp-ink) 35% 58%, transparent 58% 60%, var(--kelp-ink) 60% 84%, transparent 84% 86%, var(--kelp-ink) 86% 100%);
  opacity: .62;
}

.measuring-cord span {
  position: absolute;
  bottom: 8vh;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--kelp-ink);
  transform-origin: left center;
  transition: width 1.4s ease;
}

body.at-close .measuring-cord { background: linear-gradient(to bottom, var(--kelp-ink) 0 84%, transparent 84%); }
body.at-close .measuring-cord span { width: 46vw; }

@keyframes tide-breath {
  0% { transform: translateX(-12px); }
  100% { transform: translateX(12px); }
}

.transect { position: relative; z-index: 1; }

.station {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: 12vh 8vw;
  isolation: isolate;
}

.station::before {
  content: "";
  position: absolute;
  width: 74vw;
  height: 35vh;
  left: 12vw;
  top: 25vh;
  z-index: -1;
  opacity: 0;
  transform: translate3d(-38px, 30px, 0) rotate(-2deg);
  transition: transform 1.7s cubic-bezier(.25, .05, .16, 1), opacity 1.7s ease;
  background: rgba(111, 158, 164, .09);
  border-radius: 47% 53% 61% 39% / 56% 38% 62% 44%;
  filter: blur(.2px);
}

.station.blush::before { background: rgba(216, 182, 164, .09); }
.station.bluewash::before { background: rgba(111, 158, 164, .13); }
.station.active::before { opacity: 1; transform: translate3d(22px, 0, 0) rotate(.8deg); }

.opening { align-items: end; padding-bottom: 12vh; }
.horizon { position: absolute; left: 0; right: 0; bottom: 24vh; height: 1px; background: rgba(183, 156, 117, .38); }

.title-shelf { max-width: 78vw; margin-left: 0; }
.eyebrow, .label, .tick span, .opening-note, .specimen span {
  font-family: var(--accent);
  letter-spacing: .045em;
  font-size: .82rem;
  color: var(--sandbar-clay);
}

h1, h2 {
  font-family: var(--display);
  font-weight: 500;
  line-height: .92;
  margin: 0;
  letter-spacing: -.045em;
}

h1 { font-size: clamp(4.6rem, 13vw, 13.5rem); }
h2 { font-size: clamp(3rem, 7vw, 7.6rem); max-width: 9.8ch; }

.subtitle {
  max-width: 42ch;
  margin: 2rem 0 0;
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  color: var(--kelp-ink);
}

.opening-note {
  position: absolute;
  left: calc(var(--cord-x) + 2.2rem);
  top: 34vh;
  max-width: 18ch;
  color: var(--kelp-ink);
}

.tick {
  position: absolute;
  left: calc(var(--cord-x) - 3.4rem);
  top: 18vh;
  width: 6.8rem;
  height: 1px;
  background: var(--tidepool-blue);
  z-index: 5;
  transform: scaleX(.35);
  transform-origin: center;
  transition: transform 1s ease;
}

.station.active .tick { transform: scaleX(1); }
.tick span { position: absolute; top: -2.4rem; left: 50%; transform: translateX(-50%); white-space: nowrap; color: var(--kelp-ink); }

.align-right .note { margin-left: calc(var(--cord-x) + 10vw); }
.align-left .note { margin-left: 4vw; }

.note, .final-note {
  max-width: 56ch;
  position: relative;
}

.note p:not(.label), .final-note p:not(.label) {
  margin: 2rem 0 0;
  max-width: 52ch;
  color: rgba(35, 42, 40, .78);
  font-size: clamp(1rem, 1.25vw, 1.18rem);
}

.label { margin: 0 0 1.2rem; color: var(--sandbar-clay); }

.ripple {
  position: absolute;
  width: min(64vw, 900px);
  height: auto;
  left: 9vw;
  top: 20vh;
  z-index: -1;
  opacity: .42;
  transform: translateX(-18px);
  transition: transform 1.8s ease;
}

.align-right .ripple { left: 31vw; top: 24vh; }
.station.active .ripple { transform: translateX(28px); }
.ripple path { fill: none; stroke: var(--mist-gray); stroke-width: 2; stroke-linecap: round; opacity: .58; }

.specimen {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-top: 2.4rem;
  color: var(--sandbar-clay);
  cursor: default;
}

.specimen svg {
  width: 46px;
  height: 46px;
  stroke: var(--kelp-ink);
  fill: none;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .8s ease, stroke .8s ease;
}

.specimen:hover svg, .specimen.is-open svg { transform: translateX(6px) rotate(-3deg); stroke: var(--tidepool-blue); }

.field-label {
  position: fixed;
  left: calc(var(--cord-x) + 1.4rem);
  top: 50%;
  z-index: 8;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  padding: .45rem 0;
  background: rgba(244, 239, 230, .92);
  border-bottom: 1px solid var(--sandbar-clay);
  color: var(--kelp-ink);
  font-family: var(--accent);
  font-size: .84rem;
  transition: max-width .65s ease, padding .65s ease, opacity .45s ease;
  opacity: 0;
  pointer-events: none;
}

.field-label.visible { max-width: 28rem; padding: .45rem .75rem; opacity: 1; }

.reveal {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transform: translateY(34px);
  transition: clip-path 1.25s cubic-bezier(.35, 0, .15, 1), transform 1.25s cubic-bezier(.35, 0, .15, 1), opacity .8s ease;
}

.station.active .reveal, .opening.active .reveal {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: .28s; }

.closing { place-items: center; text-align: center; }
.closing::before { width: 82vw; left: 8vw; top: 36vh; background: rgba(216, 182, 164, .075); }
.closing-line { position: absolute; left: var(--cord-x); right: 9vw; bottom: 20vh; height: 1px; background: var(--kelp-ink); opacity: .55; transform: scaleX(0); transform-origin: left; transition: transform 1.4s ease; }
.closing.active .closing-line { transform: scaleX(1); }
.final-note h2 { max-width: none; }
.final-note p { margin-left: auto; margin-right: auto; }
.final-note a { display: inline-block; margin-top: 2rem; color: var(--kelp-ink); text-decoration-color: var(--sandbar-clay); text-underline-offset: .35em; font-family: var(--accent); }

@media (max-width: 820px) {
  :root { --cord-x: 50vw; }
  .station { padding: 14vh 7vw; align-items: center; }
  .opening { align-items: end; }
  .title-shelf { max-width: 92vw; }
  .opening-note { left: calc(var(--cord-x) + 1rem); top: 24vh; max-width: 13ch; }
  .align-right .note, .align-left .note { margin-left: 0; margin-top: 16vh; }
  .tick { top: 12vh; }
  h2 { max-width: 11ch; }
  .ripple, .align-right .ripple { width: 110vw; left: -12vw; top: 28vh; }
  .field-label { left: 8vw; top: auto; bottom: 6vh; }
  body.at-close .measuring-cord span { width: 42vw; }
}