:root {
  /* IBM Plex Sans” from Google Fonts for calm explanatory fragments */
  --ink: #182E34;
  --parchment: #EFE3C8;
  --brass: #A9783A;
  --jade: #6F9C7A;
  --coral: #E6765C;
  --yellow: #F2C94C;
  --lagoon: #79A7A8;
  --plum: #4A3245;
  --scroll: 0;
  --rail: 0;
}

* { box-sizing: border-box; }

html {
  background: var(--ink);
  color: var(--parchment);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "IBM Plex Sans", Inter, sans-serif;
  font-weight: 300;
  background:
    radial-gradient(circle at 15% 18%, rgba(121, 167, 168, .22), transparent 34rem),
    radial-gradient(circle at 86% 32%, rgba(74, 50, 69, .42), transparent 30rem),
    linear-gradient(180deg, #182E34 0%, #13272c 44%, #182E34 100%);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .18;
  background-image:
    repeating-linear-gradient(0deg, rgba(239, 227, 200, .05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(169, 120, 58, .045) 0 1px, transparent 1px 7px);
  mix-blend-mode: soft-light;
}

.progress-rail {
  position: fixed;
  left: clamp(14px, 2.2vw, 34px);
  top: 50%;
  width: 70px;
  height: min(82vh, 760px);
  transform: translateY(-50%);
  z-index: 20;
  opacity: .92;
}

.rail-svg { width: 100%; height: 100%; overflow: visible; }
.rail-vine { fill: none; stroke: var(--brass); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--rail)); filter: drop-shadow(0 0 8px rgba(242, 201, 76, .25)); }
.rail-shadow { stroke: rgba(239, 227, 200, .18); stroke-width: 8; stroke-dashoffset: 0; filter: none; }
.rail-node { fill: var(--ink); stroke: var(--yellow); stroke-width: 1.5; opacity: calc(.35 + var(--rail) * .65); }

.scroll-story { position: relative; z-index: 2; }

.chamber {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(22px, 4vw, 58px) clamp(24px, 5vw, 86px) clamp(22px, 4vw, 58px) clamp(74px, 10vw, 150px);
  position: relative;
}

.chamber::before {
  content: attr(data-state);
  position: absolute;
  right: clamp(18px, 4vw, 58px);
  top: 11vh;
  font: 400 clamp(.72rem, 1.2vw, 1rem) "Poiret One", sans-serif;
  letter-spacing: .36em;
  color: rgba(239, 227, 200, .34);
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.tank-frame {
  position: relative;
  width: min(1020px, 86vw);
  height: min(760px, 84vh);
  border: 1px solid rgba(169, 120, 58, .76);
  border-radius: 34px 8px 34px 8px;
  background:
    radial-gradient(circle at 35% 24%, rgba(121, 167, 168, .23), transparent 36%),
    linear-gradient(135deg, rgba(239, 227, 200, .07), rgba(24, 46, 52, .12) 38%, rgba(74, 50, 69, .2));
  box-shadow: inset 0 0 0 9px rgba(169, 120, 58, .08), inset 0 0 48px rgba(121, 167, 168, .13), 0 28px 90px rgba(0, 0, 0, .34);
  overflow: hidden;
}

.tank-frame::before, .tank-frame::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(239, 227, 200, .16);
  border-radius: 26px 5px 26px 5px;
  pointer-events: none;
  z-index: 3;
}

.tank-frame::after {
  inset: 34px;
  border-color: rgba(169, 120, 58, .22);
  border-radius: 18px 4px 18px 4px;
}

.frame-left { justify-self: start; transform: rotate(-1.1deg); }
.frame-right { justify-self: end; transform: rotate(1.05deg); }
.narrow { width: min(850px, 78vw); }
.wide { width: min(1120px, 88vw); }
.final-frame { width: min(940px, 82vw); }

.corner { position: absolute; width: 72px; height: 72px; z-index: 5; border-color: var(--brass); opacity: .95; }
.corner-tl { left: 16px; top: 16px; border-left: 3px double var(--brass); border-top: 3px double var(--brass); border-radius: 20px 0 0 0; }
.corner-tr { right: 16px; top: 16px; border-right: 3px double var(--brass); border-top: 3px double var(--brass); border-radius: 0 7px 0 0; }
.corner-bl { left: 16px; bottom: 16px; border-left: 3px double var(--brass); border-bottom: 3px double var(--brass); border-radius: 0 0 0 7px; }
.corner-br { right: 16px; bottom: 16px; border-right: 3px double var(--brass); border-bottom: 3px double var(--brass); border-radius: 0 0 20px 0; }

.scene-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.hero-svg { opacity: .98; }

.hero-copy {
  position: absolute;
  left: clamp(64px, 9vw, 132px);
  top: 50%;
  transform: translateY(-48%);
  z-index: 4;
  max-width: 680px;
}

.eyebrow, .label-card span, .specimen-label, .small-plaque {
  font-family: "Poiret One", sans-serif;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.eyebrow { color: var(--yellow); margin: 0 0 1rem; font-size: clamp(.9rem, 1.2vw, 1.05rem); }

h1, h2 {
  font-family: "Yeseva One", Georgia, serif;
  font-weight: 400;
  margin: 0;
  color: var(--parchment);
  text-shadow: 1px 1px 0 rgba(169, 120, 58, .65), 0 0 26px rgba(121, 167, 168, .22);
}

h1 { font-size: clamp(4rem, 10vw, 9.7rem); line-height: .88; letter-spacing: .045em; text-transform: lowercase; }
h2 { font-size: clamp(2.4rem, 5.4vw, 5.9rem); line-height: .93; letter-spacing: .035em; max-width: 720px; }

.whisper, .label-card p {
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  line-height: 1.7;
  color: rgba(239, 227, 200, .78);
}

.whisper { margin-top: 1.4rem; max-width: 390px; }

.specimen-label, .small-plaque {
  position: absolute;
  z-index: 6;
  color: var(--ink);
  background: rgba(239, 227, 200, .82);
  border: 1px solid rgba(169, 120, 58, .85);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

.specimen-label { right: 58px; bottom: 56px; padding: .7rem .95rem; font-size: .72rem; }
.small-plaque { left: 50%; bottom: 54px; transform: translateX(-50%); padding: .85rem 1.15rem; font-size: .78rem; }

.label-card {
  position: absolute;
  z-index: 4;
  max-width: 620px;
  padding: clamp(1.1rem, 2vw, 1.8rem);
  background: rgba(24, 46, 52, .54);
  border-left: 2px solid var(--brass);
  border-bottom: 1px solid rgba(239, 227, 200, .2);
  backdrop-filter: blur(4px);
}

.label-card span { display: block; color: var(--coral); font-size: .78rem; margin-bottom: .8rem; }
.label-card p { max-width: 440px; margin: 1.2rem 0 0; }
.label-top { left: clamp(48px, 8vw, 112px); top: clamp(84px, 13vh, 140px); }
.label-low { left: clamp(54px, 8vw, 116px); bottom: clamp(82px, 13vh, 138px); }
.label-center { left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; border-left: 0; border-top: 2px solid var(--brass); }
.label-center p { margin-left: auto; margin-right: auto; }

.section-number {
  position: absolute;
  right: clamp(44px, 6vw, 86px);
  top: clamp(46px, 8vh, 84px);
  z-index: 4;
  font-family: "Poiret One", sans-serif;
  font-size: clamp(5rem, 12vw, 11rem);
  color: rgba(169, 120, 58, .23);
  line-height: .75;
}

.memory-path, .branch-vein, .clean-stem, .vein, .fern-lines path, .undo-arrow, .topo-lines path, .water-rings ellipse {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.memory-path {
  stroke: var(--brass);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--path-progress, .15));
  filter: drop-shadow(0 0 12px rgba(242, 201, 76, .28));
}

.tangled { --path-progress: calc(.06 + var(--scroll) * .38); stroke: #A9783A; }
.reverse { --path-progress: calc(.18 + var(--scroll) * .6); stroke: #E6765C; }
.branch { --path-progress: calc(.24 + var(--scroll) * .66); stroke: #6F9C7A; }
.final { --path-progress: calc(.55 + var(--scroll) * .45); stroke: #F2C94C; }

.branch-vein, .clean-stem { stroke: rgba(111, 156, 122, .8); stroke-width: 2.5; stroke-dasharray: 9 12; animation: veinPulse 7s ease-in-out infinite; }
.clean-leaf, .leaf { fill: rgba(111, 156, 122, .13); stroke: rgba(121, 167, 168, .42); stroke-width: 2; }
.clean-leaf.second { fill: rgba(121, 167, 168, .12); }
.vein { stroke: rgba(239, 227, 200, .24); stroke-width: 2; }
.topo-lines path, .water-rings ellipse { stroke: rgba(121, 167, 168, .14); stroke-width: 1.5; }
.fern-lines path { stroke: rgba(111, 156, 122, .42); stroke-width: 2; }
.undo-arrow { stroke: rgba(242, 201, 76, .42); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.specimen-dots circle { fill: var(--yellow); opacity: .7; }
.bubble-set circle { fill: none; stroke: rgba(239, 227, 200, .38); animation: bubble 4.8s ease-in-out infinite; }

.botanical, .pressed-leaves { opacity: .78; transform-origin: center; animation: drift 18s ease-in-out infinite alternate; }

.fish {
  position: relative;
  fill: var(--coral);
  stroke: rgba(24, 46, 52, .45);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 10px rgba(230, 118, 92, .46));
  opacity: .96;
}

.fish-yellow { fill: var(--yellow); filter: drop-shadow(0 0 10px rgba(242, 201, 76, .48)); }
.fish-lagoon { fill: var(--lagoon); filter: drop-shadow(0 0 10px rgba(121, 167, 168, .48)); }
.discus { opacity: .9; }
.tetra { opacity: .94; }
.final-fish { animation: fishGlow 5s ease-in-out infinite; }

.rewind-chamber { background: radial-gradient(circle at 76% 50%, rgba(230, 118, 92, .08), transparent 38rem); }
.branch-chamber { background: radial-gradient(circle at 25% 62%, rgba(111, 156, 122, .13), transparent 32rem); }
.quiet-chamber { background: radial-gradient(circle at 52% 48%, rgba(242, 201, 76, .08), transparent 28rem); }

@keyframes drift { from { transform: translate3d(-8px, 10px, 0) rotate(-1deg); } to { transform: translate3d(14px, -12px, 0) rotate(1deg); } }
@keyframes bubble { 0%, 100% { opacity: .12; transform: translateY(12px); } 50% { opacity: .72; transform: translateY(-18px); } }
@keyframes veinPulse { 0%, 100% { opacity: .45; } 50% { opacity: .92; } }
@keyframes fishGlow { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }

@media (max-width: 820px) {
  .progress-rail { left: -10px; opacity: .45; }
  .chamber { padding-left: 46px; padding-right: 16px; }
  .tank-frame, .narrow, .wide, .final-frame { width: 100%; height: 82vh; }
  .frame-left, .frame-right { justify-self: center; transform: none; }
  .hero-copy { left: 42px; right: 28px; }
  h1 { font-size: clamp(3.2rem, 16vw, 5.5rem); }
  h2 { font-size: clamp(2rem, 11vw, 3.6rem); }
  .label-card { left: 34px; right: 34px; max-width: none; }
  .label-center { left: 34px; right: 34px; transform: translateY(-50%); }
  .chamber::before { display: none; }
}