:root {
  /* Typography compliance notes: IBM Plex Mono** in 400/500 weights; Source Serif 4** in 400/500 weights for thoughtful explanatory passages that feel like field notes rather than marketing copy. */
  --mist-paper: #EEF2F3;
  --slate-ink: #27333A;
  --river-blue: #7895A3;
  --mineral: #AEB8B8;
  --moss: #546B58;
  --clay: #B98F6B;
  --current: #315766;
  --wash: #D9E6E8;
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Commissioner", Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--slate-ink);
  background:
    radial-gradient(circle at 15% 10%, rgba(217, 230, 232, .85), transparent 32rem),
    radial-gradient(circle at 82% 30%, rgba(120, 149, 163, .24), transparent 34rem),
    linear-gradient(115deg, var(--mist-paper), #e8eeee 48%, var(--mist-paper));
  font-family: var(--sans);
  overflow-x: hidden;
}

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  opacity: .34;
  background-image:
    repeating-linear-gradient(0deg, rgba(39, 51, 58, .025) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(39, 51, 58, .018) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 30% 20%, rgba(185, 143, 107, .08), transparent 20rem);
  mix-blend-mode: multiply;
}

.opening-sheet {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(250px, 29vw) 1fr;
  align-items: stretch;
  padding: 3rem clamp(1.2rem, 4vw, 4rem);
  isolation: isolate;
}

.paper-tabs {
  position: fixed;
  top: 1.15rem;
  left: clamp(1.1rem, 3vw, 2.7rem);
  z-index: 20;
  display: flex;
  gap: .35rem;
  align-items: center;
}

.paper-tabs a {
  color: var(--current);
  text-decoration: none;
  font: 500 .65rem/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(238, 242, 243, .76);
  border: 1px solid rgba(49, 87, 102, .18);
  padding: .55rem .7rem;
  transform: rotate(var(--tab-tilt, -1deg));
  box-shadow: 0 10px 24px rgba(39, 51, 58, .07);
}

.paper-tabs a:nth-child(even) { --tab-tilt: 1.3deg; }

.hero-stem {
  align-self: center;
  max-width: 25rem;
  padding-top: 7vh;
}

.micro-label, .column-title, .coordinate, .field-counter span {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--current);
}

h1, h2 {
  font-family: var(--sans);
  margin: 0;
  letter-spacing: -.055em;
  color: var(--slate-ink);
}

h1 {
  font-size: clamp(4.6rem, 13vw, 13rem);
  line-height: .78;
  font-weight: 700;
  max-width: 8ch;
  animation: settleTitle 1.6s cubic-bezier(.2, .8, .2, 1) both;
}

h2 {
  font-size: clamp(2.5rem, 6vw, 6.6rem);
  line-height: .86;
  max-width: 8ch;
}

p {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  line-height: 1.58;
}

.hero-note { max-width: 23rem; color: rgba(39, 51, 58, .78); }

.hero-basin {
  position: relative;
  min-height: 72vh;
  margin-top: 8vh;
  border-radius: 48% 52% 42% 58% / 36% 48% 52% 64%;
  background:
    radial-gradient(circle at 32% 45%, rgba(120, 149, 163, .28), transparent 19rem),
    radial-gradient(circle at 60% 58%, rgba(84, 107, 88, .18), transparent 22rem),
    radial-gradient(circle at 72% 34%, rgba(185, 143, 107, .16), transparent 18rem);
  filter: saturate(.95);
}

.top-wave {
  position: absolute;
  top: 17%;
  left: -5%;
  width: 112%;
  height: 42%;
  overflow: visible;
}

.top-wave path, .contours path, .branch-lines path, .ripple-field path, .final-wave path {
  fill: none;
  stroke: var(--current);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: .72;
}

#draw-wave {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: drawLine 2.8s ease-out .3s forwards, currentWave 8s ease-in-out infinite 3s;
}

.echo-wave { stroke: var(--river-blue); stroke-width: 2; opacity: .35; animation: currentWave 10s ease-in-out infinite reverse; }

.pigment-bloom {
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
  opacity: .62;
  transform: scale(.8);
  animation: bloom 7s ease-in-out infinite alternate;
}

.bloom-one { width: 22rem; height: 18rem; left: 20%; bottom: 12%; background: rgba(120, 149, 163, .34); }
.bloom-two { width: 18rem; height: 15rem; right: 9%; top: 10%; background: rgba(185, 143, 107, .2); animation-delay: -2s; }

.masking-tape {
  position: absolute;
  width: 9rem;
  height: 2.2rem;
  background: rgba(217, 230, 232, .62);
  box-shadow: inset 0 0 0 1px rgba(39, 51, 58, .08), 0 8px 20px rgba(39, 51, 58, .06);
}

.tape-top { top: 3%; right: 19%; transform: rotate(6deg); }
.tape-bottom { bottom: 11%; left: 11%; transform: rotate(-9deg); }

.observation-column {
  position: fixed;
  top: 5.8rem;
  left: clamp(1.1rem, 3vw, 2.7rem);
  z-index: 18;
  width: min(15rem, 25vw);
  padding: 1rem 1rem 1.2rem;
  border-left: 1px solid rgba(49, 87, 102, .32);
  background: linear-gradient(90deg, rgba(238, 242, 243, .78), rgba(238, 242, 243, .12));
  backdrop-filter: blur(3px);
}

.column-title { margin-bottom: 1rem; color: var(--moss); }

.stem-link {
  display: block;
  width: fit-content;
  margin: .48rem 0;
  padding: .22rem .4rem;
  font: 600 .78rem/1 var(--sans);
  color: var(--slate-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.stem-link.active {
  color: var(--current);
  border-color: rgba(49, 87, 102, .5);
  background: rgba(217, 230, 232, .7);
}

.field-counter {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 1rem;
  border-top: 1px solid rgba(49, 87, 102, .16);
  padding-top: .65rem;
}

.field-counter strong {
  font: 500 1.35rem/1 var(--mono);
  color: var(--clay);
}

.coordinate { margin-top: 1.3rem; color: rgba(39, 51, 58, .56); }

main { position: relative; }

.scenario-sheet {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(250px, 29vw) 1fr;
  gap: clamp(1.5rem, 4vw, 5rem);
  padding: 7rem clamp(1.2rem, 4vw, 4rem) 5rem;
  position: relative;
}

.sheet-copy {
  align-self: center;
  padding-left: min(2vw, 2rem);
  position: sticky;
  top: 7rem;
  min-height: 25rem;
}

.sheet-copy p:not(.micro-label) { max-width: 25rem; color: rgba(39, 51, 58, .76); }

.watercolor-map {
  align-self: center;
  min-height: 72vh;
  position: relative;
  overflow: hidden;
  border-radius: 42% 58% 45% 55% / 54% 38% 62% 46%;
  border: 1px solid rgba(49, 87, 102, .08);
  box-shadow: inset 0 0 80px rgba(238, 242, 243, .65), 0 24px 60px rgba(39, 51, 58, .06);
  transform: translateY(2rem);
  opacity: .55;
  transition: transform 1s ease, opacity 1s ease, border-radius 1.2s ease;
}

.scenario-sheet.in-view .watercolor-map { transform: translateY(0); opacity: 1; border-radius: 51% 49% 47% 53% / 42% 58% 42% 58%; }

.seed-map { background: radial-gradient(circle at 35% 48%, rgba(120, 149, 163, .34), transparent 18rem), radial-gradient(circle at 66% 45%, rgba(84, 107, 88, .2), transparent 22rem), var(--wash); }
.drift-map { background: radial-gradient(circle at 24% 55%, rgba(185, 143, 107, .22), transparent 19rem), radial-gradient(circle at 74% 35%, rgba(120, 149, 163, .34), transparent 22rem), #e6eeee; }
.shoreline-map { background: radial-gradient(circle at 48% 45%, rgba(174, 184, 184, .42), transparent 20rem), radial-gradient(circle at 72% 62%, rgba(84, 107, 88, .17), transparent 20rem), var(--mist-paper); }
.choice-map { background: radial-gradient(circle at 34% 38%, rgba(84, 107, 88, .22), transparent 20rem), radial-gradient(circle at 66% 56%, rgba(185, 143, 107, .24), transparent 22rem), var(--wash); }

.vellum-strip, .calibration-card {
  position: absolute;
  right: 10%;
  top: 12%;
  padding: .8rem 1rem;
  font: 500 .72rem/1.6 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--current);
  background: rgba(238, 242, 243, .54);
  border: 1px solid rgba(49, 87, 102, .14);
  transform: rotate(3deg);
}

.calibration-card { top: auto; right: 12%; bottom: 16%; transform: rotate(-4deg); }
.calibration-card strong { color: var(--moss); }

.droplet {
  position: absolute;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50% 54% 48% 58%;
  background: var(--current);
  opacity: .6;
  box-shadow: 0 0 0 10px rgba(49, 87, 102, .08);
  transition: transform .6s ease;
}

.d1 { left: 22%; top: 52%; }
.d2 { left: 48%; top: 40%; background: var(--clay); }
.d3 { right: 18%; top: 33%; background: var(--moss); }
.d4 { left: 30%; top: 36%; background: var(--clay); }
.d5 { right: 24%; top: 18%; }
.d6 { right: 18%; bottom: 16%; background: var(--moss); }

.contours, .branch-lines, .ripple-field, .final-wave { position: absolute; inset: 6%; width: 88%; height: 88%; overflow: visible; }
.contours path { stroke: var(--moss); stroke-width: 1.6; opacity: .42; }
.branch-lines path { stroke: var(--current); stroke-width: 2.2; stroke-dasharray: 7 12; animation: branchFlow 7s linear infinite; }
.ripple-field ellipse { fill: none; stroke: var(--river-blue); stroke-width: 2; opacity: .42; }
.ripple-field path { stroke: var(--clay); stroke-width: 2; opacity: .54; }
.final-wave path { stroke: var(--moss); stroke-width: 2.5; opacity: .64; }

.stone-row { display: flex; gap: .65rem; margin-top: 2rem; }
.stone {
  width: 3.2rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border-radius: 48% 52% 42% 58%;
  background: rgba(185, 143, 107, .2);
  color: var(--current);
  font: 500 .78rem/1 var(--mono);
  box-shadow: inset 0 0 0 1px rgba(185, 143, 107, .22);
}

.tide-marks { width: 15rem; margin-top: 2rem; }
.tide-marks i { display: block; height: 1px; margin: .62rem 0; background: rgba(49, 87, 102, .25); transform-origin: left; animation: tide 3.8s ease-in-out infinite; }
.tide-marks i:nth-child(2) { width: 82%; animation-delay: -.4s; }
.tide-marks i:nth-child(3) { width: 64%; animation-delay: -.8s; }
.tide-marks i:nth-child(4) { width: 76%; animation-delay: -1.2s; }
.tide-marks i:nth-child(5) { width: 54%; animation-delay: -1.6s; }

.satellite-fragment, .torn-grid, .pressed-leaf {
  position: absolute;
  border: 1px solid rgba(39, 51, 58, .1);
  box-shadow: 0 18px 36px rgba(39, 51, 58, .08);
}

.satellite-fragment {
  left: 9%;
  bottom: 13%;
  width: 13rem;
  height: 8rem;
  transform: rotate(-7deg);
  background: linear-gradient(135deg, rgba(84, 107, 88, .25), rgba(120, 149, 163, .25)), repeating-linear-gradient(45deg, transparent 0 12px, rgba(39, 51, 58, .04) 12px 14px);
}

.torn-grid {
  right: 12%;
  top: 16%;
  width: 18rem;
  height: 13rem;
  transform: rotate(5deg);
  background-image: linear-gradient(rgba(49, 87, 102, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(49, 87, 102, .1) 1px, transparent 1px);
  background-size: 22px 22px;
  background-color: rgba(238, 242, 243, .45);
  clip-path: polygon(0 5%, 92% 0, 100% 88%, 73% 100%, 42% 94%, 10% 100%);
}

.pressed-leaf {
  left: 17%;
  top: 24%;
  width: 6rem;
  height: 12rem;
  border-radius: 90% 0 90% 0;
  background: linear-gradient(145deg, rgba(84, 107, 88, .52), rgba(174, 184, 184, .16));
  transform: rotate(22deg);
}

.stamp-stack { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; max-width: 18rem; }
.stamp-stack span, .quiet-link {
  font: 500 .72rem/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--current);
  border: 1px solid rgba(49, 87, 102, .28);
  padding: .6rem .72rem;
  background: rgba(217, 230, 232, .45);
  text-decoration: none;
}

.quiet-link { display: inline-block; margin-top: 1.4rem; }
.final-sheet { padding-bottom: 9rem; }

@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes currentWave { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(28px) translateY(6px); } }
@keyframes bloom { to { transform: scale(1.14) rotate(8deg); opacity: .78; } }
@keyframes branchFlow { to { stroke-dashoffset: -90; } }
@keyframes tide { 50% { transform: scaleX(.72); opacity: .42; } }
@keyframes settleTitle { from { opacity: 0; transform: translateY(20px) scale(.985); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }

@media (max-width: 820px) {
  .paper-tabs { display: none; }
  .opening-sheet, .scenario-sheet { grid-template-columns: 1fr; padding-left: 1.2rem; padding-right: 1.2rem; }
  .observation-column { position: sticky; top: 0; width: auto; left: 0; margin: 0 1rem; display: grid; grid-template-columns: repeat(4, auto); gap: .4rem; overflow: hidden; }
  .column-title, .field-counter, .coordinate { display: none; }
  .sheet-copy { position: relative; top: 0; min-height: auto; }
  .watercolor-map, .hero-basin { min-height: 58vh; }
  h1 { font-size: clamp(4rem, 24vw, 8rem); }
}