/* Typography compliance note: IBM Plex Mono accession code codes; IBM Plex Mono** provides tiny technical evidence at the margins. Inter** for restrained interface text. */
:root {
  --porcelain: #F6F4EC;
  --ink: #171A16;
  --chlorophyll: #1F6B4A;
  --oxide: #C84A32;
  --lichen: #DDE7D2;
  --blue-error: #6E8FAF;
  --graphite: #5E625B;
  --display: "Instrument Serif", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

.font-compliance-token {
  font-family: "IBM Plex Mono**", "Inter**", "IBM Plex Mono", "Inter", monospace;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--porcelain);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 20%, rgba(221, 231, 210, 0.82), transparent 32rem),
    linear-gradient(90deg, rgba(23, 26, 22, 0.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(23, 26, 22, 0.025) 1px, transparent 1px),
    var(--porcelain);
  background-size: auto, 8.333vw 100%, 100% 4.6rem, auto;
  font-family: var(--sans);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

.grain, .scanline {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.grain {
  opacity: 0.18;
  background-image:
    repeating-radial-gradient(circle at 17% 21%, rgba(23, 26, 22, 0.15) 0 1px, transparent 1px 5px),
    repeating-radial-gradient(circle at 73% 62%, rgba(94, 98, 91, 0.12) 0 1px, transparent 1px 7px);
  mix-blend-mode: multiply;
}

.scanline {
  opacity: 0.18;
  background: linear-gradient(to bottom, transparent 0 48%, rgba(110, 143, 175, 0.15) 50%, transparent 52% 100%);
  background-size: 100% 7px;
}

.folio-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.15rem 1.35rem;
  color: var(--graphite);
  font-family: var(--mono);
  font-size: clamp(0.62rem, 0.9vw, 0.76rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.folio-mark {
  color: var(--ink);
  transition: color 240ms ease, transform 240ms ease;
}

.citation-tabs {
  display: flex;
  gap: clamp(0.7rem, 2vw, 2rem);
}

.citation-tabs a {
  transition: color 240ms ease, transform 240ms steps(2, jump-none);
}

.folio-mark:hover, .citation-tabs a:hover {
  color: var(--oxide);
  transform: translateY(1px) translateX(-1px);
}

.plate {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 6rem clamp(1.2rem, 5vw, 5.5rem);
  border-top: 1px solid rgba(94, 98, 91, 0.22);
  isolation: isolate;
  overflow: hidden;
}

.plate::before, .plate::after {
  content: "";
  position: absolute;
  left: 50%;
  width: min(38rem, 64vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(31, 107, 74, 0.32), transparent);
  transform: translateX(-50%);
}

.plate::before { top: 5.1rem; }
.plate::after { bottom: 5.1rem; }

.central-specimen {
  position: relative;
  z-index: 2;
  width: min(54rem, 92vw);
  display: grid;
  place-items: center;
  text-align: center;
}

.hero-specimen { min-height: 70vh; }

.wordmark, .chapter-title {
  position: relative;
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.78;
  letter-spacing: -0.065em;
  color: var(--ink);
  cursor: crosshair;
}

.wordmark {
  font-size: clamp(6.8rem, 22vw, 23rem);
  text-indent: -0.06em;
}

.chapter-title {
  font-size: clamp(5rem, 15vw, 15rem);
  font-style: italic;
}

.glitch-title::before, .glitch-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms steps(2, jump-none), clip-path 180ms ease;
}

.glitch-title::before {
  color: var(--chlorophyll);
  clip-path: inset(0 0 54% 0);
  transform: translate(-2px, 1px);
}

.glitch-title::after {
  color: var(--oxide);
  text-shadow: 3px 0 0 rgba(110, 143, 175, 0.46);
  clip-path: inset(45% 0 0 0);
  transform: translate(2px, -1px);
}

.glitch-title:hover::before, .glitch-title:hover::after, .glitch-title.is-glitching::before, .glitch-title.is-glitching::after {
  opacity: 0.5;
}

.glitch-title.is-glitching::before { transform: translate(var(--gx-a, -4px), var(--gy-a, 1px)); }
.glitch-title.is-glitching::after { transform: translate(var(--gx-b, 4px), var(--gy-b, -1px)); }

.hero-caption, .thesis-copy, .large-thesis {
  margin: 1.8rem auto 0;
  max-width: 42rem;
  color: var(--graphite);
  font-family: var(--sans);
  font-size: clamp(1rem, 1.55vw, 1.35rem);
  line-height: 1.65;
}

.large-thesis {
  max-width: 58rem;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(2.5rem, 6.8vw, 7rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.accession, .margin-note, .signal-readout, .annotation-cluster, .citation-link {
  font-family: var(--mono);
  font-size: clamp(0.62rem, 0.85vw, 0.78rem);
  line-height: 1.55;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
}

.accession {
  position: absolute;
  z-index: 4;
  margin: 0;
}

.top-left { top: 5.6rem; left: clamp(1.2rem, 4vw, 4.2rem); }
.bottom-left { bottom: 5.6rem; left: clamp(1.2rem, 4vw, 4.2rem); }
.right-note {
  top: 50%;
  right: 1rem;
  max-width: 17rem;
  transform: rotate(90deg) translateX(50%);
  transform-origin: right center;
}

.margin-note {
  position: absolute;
  z-index: 5;
  width: min(16rem, 25vw);
  color: var(--graphite);
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 900ms ease, transform 900ms ease;
}

.plate.is-visible .margin-note { opacity: 1; transform: translateY(0); }
.margin-note.left { left: clamp(1rem, 4vw, 4.5rem); top: 37%; text-align: left; }
.margin-note.right { right: clamp(1rem, 4vw, 4.5rem); top: 58%; text-align: right; }
.margin-note.lower { top: auto; bottom: 22%; }
.margin-note.tall { top: 43%; }

.registration-cross {
  position: absolute;
  width: 2.2rem;
  height: 2.2rem;
  opacity: 0.52;
}

.registration-cross::before, .registration-cross::after {
  content: "";
  position: absolute;
  background: var(--oxide);
}

.registration-cross::before { top: 50%; left: 0; width: 100%; height: 1px; }
.registration-cross::after { left: 50%; top: 0; width: 1px; height: 100%; }
.cross-a { top: 24%; left: 17%; }
.cross-b { right: 19%; bottom: 24%; transform: rotate(18deg); }

.leaf-diagram, .specimen-orbit, .seed-array {
  position: absolute;
  overflow: visible;
  pointer-events: none;
}

.hero-leaf {
  width: min(34rem, 67vw);
  height: auto;
  opacity: 0.86;
  filter: saturate(0.9);
}

.leaf-body, .pressed-leaf {
  fill: rgba(221, 231, 210, 0.42);
  stroke: var(--chlorophyll);
  stroke-width: 1.4;
}

.leaf-shadow { fill: transparent; stroke-width: 1.2; opacity: 0.28; }
.leaf-shadow.blue { stroke: var(--blue-error); transform: translate(8px, -5px); }
.leaf-shadow.red { stroke: var(--oxide); transform: translate(-6px, 4px); }
.leaf-stem, .vein, .draw-path {
  fill: none;
  stroke: var(--chlorophyll);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.draw-path {
  stroke-dasharray: var(--path-length, 1000);
  stroke-dashoffset: var(--path-length, 1000);
}

.plate.is-visible .draw-path {
  animation: drawPath 2.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.round-plate {
  min-height: 42rem;
}

.specimen-orbit {
  width: min(39rem, 82vw);
  height: auto;
}

.plate-ring {
  fill: rgba(246, 244, 236, 0.44);
  stroke: rgba(94, 98, 91, 0.42);
  stroke-width: 1;
}

.plate-ring.faint { stroke: rgba(110, 143, 175, 0.28); }
.stomata-field circle { fill: var(--oxide); opacity: 0.72; }
.calibration-rule {
  position: absolute;
  top: 50%;
  left: 10vw;
  right: 10vw;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(94, 98, 91, 0.35) 0 3rem, transparent 3rem 4rem);
}

.signal-plate {
  min-height: 44rem;
}

.signal-readout {
  color: var(--oxide);
  margin-bottom: 1.5rem;
}

.wave-field {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(52rem, 86vw);
  height: 24rem;
  transform: translate(-50%, -47%);
  z-index: -1;
}

.wave-field span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12rem;
  height: 12rem;
  border: 1px solid rgba(31, 107, 74, 0.22);
  border-radius: 999px 46% 999px 45%;
  transform: translate(-50%, -50%) rotate(var(--r));
  animation: slowSignal 9s ease-in-out infinite;
}

.wave-field span:nth-child(1) { --r: 0deg; }
.wave-field span:nth-child(2) { --r: 28deg; width: 18rem; height: 8rem; border-color: rgba(200, 74, 50, 0.23); animation-delay: -1.6s; }
.wave-field span:nth-child(3) { --r: 74deg; width: 27rem; height: 11rem; border-color: rgba(110, 143, 175, 0.22); animation-delay: -3s; }
.wave-field span:nth-child(4) { --r: 123deg; width: 36rem; height: 12rem; animation-delay: -4.5s; }
.wave-field span:nth-child(5) { --r: 156deg; width: 44rem; height: 14rem; border-color: rgba(94, 98, 91, 0.18); animation-delay: -6s; }

.margin-plate::before {
  content: "";
  position: absolute;
  width: min(30rem, 60vw);
  height: min(30rem, 60vw);
  border: 1px solid rgba(200, 74, 50, 0.25);
  border-radius: 42% 58% 45% 55%;
  background: rgba(221, 231, 210, 0.28);
  transform: translate(2rem, -1rem) rotate(-18deg);
  z-index: -1;
}

.annotation-cluster {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.4rem;
  margin-top: 2rem;
}

.annotation-cluster span {
  border-top: 1px solid rgba(94, 98, 91, 0.35);
  padding-top: 0.5rem;
}

.closing-plate { min-height: 37rem; }
.seed-array { width: min(42rem, 86vw); height: auto; opacity: 0.82; }
.seed { fill: rgba(221, 231, 210, 0.28); stroke-width: 1.2; }
.seed-a { stroke: var(--chlorophyll); transform: translateX(-8px); }
.seed-b { stroke: var(--oxide); opacity: 0.55; }
.seed-c { stroke: var(--blue-error); transform: translateX(8px); }

.citation-link {
  display: inline-block;
  margin-top: 2.4rem;
  color: var(--chlorophyll);
  border-bottom: 1px solid rgba(31, 107, 74, 0.42);
  transition: color 260ms ease, border-color 260ms ease, transform 260ms steps(2, jump-none);
}

.citation-link:hover {
  color: var(--oxide);
  border-color: var(--oxide);
  transform: translate(2px, -1px);
}

.plate > .central-specimen {
  opacity: 0;
  transform: translateY(2rem) scale(0.985);
  transition: opacity 1000ms ease, transform 1200ms cubic-bezier(0.2, 0.7, 0.18, 1);
}

.plate.is-visible > .central-specimen {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.hero-plate > .central-specimen { opacity: 1; transform: none; }

@keyframes drawPath { to { stroke-dashoffset: 0; } }

@keyframes slowSignal {
  0%, 100% { transform: translate(-50%, -50%) rotate(var(--r)) scale(0.98); opacity: 0.46; }
  45% { transform: translate(calc(-50% + 5px), calc(-50% - 3px)) rotate(calc(var(--r) + 7deg)) scale(1.04); opacity: 0.82; }
  52% { transform: translate(calc(-50% - 3px), calc(-50% + 2px)) rotate(calc(var(--r) - 3deg)) scale(1.01); }
}

@media (max-width: 760px) {
  .folio-nav { align-items: flex-start; }
  .citation-tabs { max-width: 12rem; flex-wrap: wrap; justify-content: flex-end; }
  .right-note { display: none; }
  .margin-note { position: static; width: min(24rem, 82vw); margin: 1.3rem auto 0; text-align: center !important; }
  .round-plate, .signal-plate, .closing-plate { min-height: 34rem; }
  .top-left { top: 5rem; }
  .bottom-left { bottom: 4.4rem; }
  .plate { padding-left: 1rem; padding-right: 1rem; }
}