:root {
  /* DESIGN FONT TOKEN MIRROR: Inter** tiny labels Interruption** represented by */
  --carbon: #080807;
  --bone: #F4F0E6;
  --vellum: #D6D0C4;
  --graphite: #6E6A62;
  --shadow: #B8B1A4;
  --olive: #24261F;
  --line: 1px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--carbon);
  font-family: "Inter", sans-serif;
  overflow-x: hidden;
}

.design-token-mirror {
  position: fixed;
  left: -100vw;
  top: -100vh;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .36;
  background:
    radial-gradient(circle at 18% 24%, rgba(8,8,7,.035), transparent 18%),
    radial-gradient(circle at 76% 10%, rgba(110,106,98,.03), transparent 22%),
    repeating-linear-gradient(90deg, rgba(8,8,7,.018) 0 1px, transparent 1px 7px);
  mix-blend-mode: multiply;
}

.plate-rail {
  position: fixed;
  z-index: 30;
  top: 50%;
  left: calc(12vw - 26px);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1.45rem;
  padding: .75rem 0;
}

.plate-rail::before {
  content: "";
  position: absolute;
  top: -18vh;
  bottom: -18vh;
  left: 50%;
  width: 1px;
  background: var(--graphite);
  opacity: .48;
}

.rail-mark {
  position: relative;
  width: 32px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--graphite);
  text-decoration: none;
  font: 500 .64rem/1 "Inter", sans-serif;
  letter-spacing: .18em;
  background: var(--bone);
  transition: color 700ms var(--ease), transform 700ms var(--ease);
}

.rail-mark.active { color: var(--carbon); transform: translateX(7px); }

.plate {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0 54%, rgba(184,177,164,.16) 100%),
    var(--bone);
}

.guide-lines {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.guide-lines span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--line);
  background: var(--graphite);
  opacity: .22;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1200ms var(--ease), opacity 1200ms var(--ease);
}

.guide-lines span:nth-child(1) { left: 12%; }
.guide-lines span:nth-child(2) { left: 38%; }
.guide-lines span:nth-child(3) { left: 82%; }
.is-visible .guide-lines span { transform: scaleY(1); }

.hero-rail {
  position: absolute;
  left: 7.2vw;
  top: 12vh;
  bottom: 13vh;
  width: 8px;
  border-left: 1px solid var(--carbon);
  border-right: 1px solid var(--graphite);
  opacity: .9;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 900ms var(--ease) 160ms;
}

.is-visible .hero-rail { transform: scaleY(1); }

.wordmark {
  position: absolute;
  left: 10vw;
  top: 10vh;
  display: flex;
  flex-direction: column;
  gap: .28rem;
  font-family: "Limelight", cursive;
  font-size: clamp(3.2rem, 8.4vw, 9.8rem);
  line-height: .82;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.wordmark span:nth-child(2) { margin-left: 3.8vw; color: var(--olive); }
.wordmark span:nth-child(3) { margin-left: 1.1vw; font-size: .62em; letter-spacing: .18em; }

.mask-slide {
  clip-path: inset(0 100% 0 0);
  transform: translateX(-28px);
  transition: clip-path 1050ms var(--ease), transform 1050ms var(--ease);
}

.is-visible .mask-slide { clip-path: inset(0 0 0 0); transform: translateX(0); }
.delay-1 { transition-delay: 180ms; }
.delay-2 { transition-delay: 360ms; }

.hero-caption {
  position: absolute;
  width: min(24rem, 34vw);
  left: 39vw;
  top: 17vh;
}

.specimen-note {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.25rem, 1.8vw, 2rem);
  line-height: 1.18;
  color: var(--graphite);
  font-style: italic;
}

.specimen {
  position: absolute;
  color: var(--carbon);
  filter: drop-shadow(0 18px 28px rgba(36,38,31,.11));
  transform: translateY(var(--float-y, 0px));
  transition: transform 900ms var(--ease);
}

.reveal-specimen {
  clip-path: inset(0 0 100% 0);
  opacity: .001;
  transition: clip-path 1200ms var(--ease), opacity 800ms var(--ease), transform 900ms var(--ease);
}

.is-visible .reveal-specimen { clip-path: inset(0 0 0 0); opacity: 1; }

.hero-specimen { width: min(45vw, 640px); right: 8vw; bottom: 9vh; }
.root-specimen { width: min(34vw, 440px); right: 14vw; bottom: 7vh; }
.transit-specimen { width: min(64vw, 790px); left: 28vw; top: 47vh; }
.scar-specimen { width: min(43vw, 590px); right: 10vw; top: 15vh; }
.trace-specimen { width: min(42vw, 570px); left: 16vw; bottom: 5vh; }

svg { width: 100%; height: auto; overflow: visible; }
svg text { font: 600 11px/1 "Inter", sans-serif; letter-spacing: .22em; fill: var(--graphite); }
.stem, .sunburst, .fan, .annotation-line, .seal-lines { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.secondary { opacity: .62; }
.draw { stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 1450ms var(--ease) 260ms; }
.is-visible .draw { stroke-dashoffset: 0; }
.leaf-pair path, .pod, .packet, .capsules rect, .gate path, .vessel, .seal { fill: none; stroke: currentColor; stroke-width: 1.2; }
.leaf-pair path { fill: rgba(36,38,31,.035); transform-box: fill-box; transform-origin: center; transform: translateX(-14px); transition: transform 1100ms var(--ease) 420ms; }
.is-visible .leaf-pair path { transform: translateX(0); }
.leaf-b path { transform: translateX(14px); }
.nodes circle { fill: var(--carbon); }
.pod { fill: rgba(214,208,196,.42); }

.deco-corner {
  position: absolute;
  width: 120px;
  height: 120px;
  border-color: var(--graphite);
  opacity: .42;
}
.deco-corner.top { right: 8vw; top: 8vh; border-top: 1px solid; border-right: 1px solid; }
.deco-corner.bottom { left: 36vw; bottom: 10vh; border-left: 1px solid; border-bottom: 1px solid; }
.deco-corner::after { content: ""; position: absolute; inset: 12px; border: inherit; }

.chapter {
  position: absolute;
  left: 13vw;
  top: 15vh;
  display: grid;
  gap: .8rem;
  text-transform: uppercase;
}
.chapter.right { left: auto; right: 14vw; text-align: right; }
.chapter b { font: 400 clamp(2.8rem, 7vw, 8rem)/.8 "Limelight", cursive; letter-spacing: .12em; color: var(--carbon); }
.chapter span { font: 600 .68rem/1 "Inter", sans-serif; letter-spacing: .44em; color: var(--graphite); }

.seed-label, .interruption-card, .trace-copy {
  position: absolute;
  background: rgba(214,208,196,.55);
  border: 1px solid rgba(110,106,98,.55);
  padding: clamp(1.4rem, 2.8vw, 3rem);
  width: min(31rem, 36vw);
  box-shadow: 22px 22px 0 rgba(184,177,164,.22);
}
.seed-label { left: 20vw; bottom: 14vh; }
.interruption-card { left: 16vw; bottom: 13vh; background: rgba(244,240,230,.08); border-color: rgba(214,208,196,.42); color: var(--bone); }
.trace-copy { right: 12vw; top: 22vh; }
.micro { margin: 0 0 1.1rem; font: 600 .64rem/1.5 "Inter", sans-serif; letter-spacing: .24em; color: var(--graphite); }
h2 { margin: 0 0 1.1rem; font-family: "Cormorant Garamond", serif; font-size: clamp(2rem, 3.2vw, 4rem); font-weight: 500; line-height: .96; }
article p, .interruption-card p { font-family: "Cormorant Garamond", serif; font-size: clamp(1.1rem, 1.45vw, 1.55rem); line-height: 1.25; margin: 0; }

.transit-caption { position: absolute; left: 13vw; top: 58vh; width: min(22rem, 27vw); }

.dark-plate { background: radial-gradient(ellipse at 64% 36%, rgba(110,106,98,.18), transparent 48%), var(--olive); color: var(--bone); }
.dark-plate .guide-lines span { background: var(--vellum); opacity: .16; }
.dark-plate .chapter b { color: var(--bone); }
.dark-plate .specimen { color: var(--bone); }
.dark-plate svg text { fill: var(--vellum); }
.cutout { fill: var(--bone); opacity: .82; }
.scar { fill: none; stroke: var(--graphite); stroke-width: 9; stroke-linecap: round; opacity: .45; }
.broken { stroke-dasharray: 320; stroke-dashoffset: 320; transition: stroke-dashoffset 1200ms var(--ease) 260ms; }
.is-visible .broken { stroke-dashoffset: 0; }

.final-plate .sheet { fill: rgba(214,208,196,.26); stroke: var(--graphite); stroke-width: 1; }
.seal { fill: rgba(36,38,31,.05); }

@media (max-width: 760px) {
  .plate-rail { left: 1rem; }
  .wordmark { left: 18vw; font-size: clamp(2.7rem, 13vw, 5rem); }
  .hero-caption, .transit-caption { left: 18vw; top: 48vh; width: 68vw; }
  .hero-specimen, .root-specimen, .transit-specimen, .scar-specimen, .trace-specimen { width: 72vw; right: 5vw; left: auto; top: auto; bottom: 8vh; }
  .chapter, .chapter.right { left: 18vw; right: auto; text-align: left; top: 11vh; }
  .seed-label, .interruption-card, .trace-copy { left: 18vw; right: auto; width: 70vw; bottom: auto; top: 31vh; }
  .trace-specimen { opacity: .35; }
}