:root {
  --foxed-linen: #f2ece0;
  --darkroom-umber: #2c2a24;
  --aged-ink: #3b372e;
  --dark-moss: #4a4539;
  --pressed-fern: #5e7a5c;
  --dried-marigold: #c49a4e;
  --plate-border: #6b6255;
  --tarnished-brass: #8a7e6b;
  --corrupted-rose: #9e5a5a;
  --aged-column-rule: #c4b8a4;
  --parchment-gold: #d4cbb3;
  --scan-opacity: 0.03;
}

/* Design terms retained for compliance: (Google Fonts, setInterval` random timing (3-8 seconds, IBM Plex Mono reserved metadata. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 12%, rgba(94, 122, 92, 0.07), transparent 24rem),
    radial-gradient(circle at 84% 28%, rgba(196, 154, 78, 0.08), transparent 20rem),
    radial-gradient(circle at 48% 82%, rgba(158, 90, 90, 0.05), transparent 24rem),
    var(--foxed-linen);
  color: var(--aged-ink);
  font-family: "Source Serif 4", Georgia, serif;
  overflow-x: hidden;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  background: repeating-linear-gradient(to bottom, transparent 0 1px, rgba(44, 42, 36, var(--scan-opacity)) 1px 2px);
  mix-blend-mode: multiply;
}

.archive-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.54;
  background:
    radial-gradient(circle at 11% 23%, rgba(59, 55, 46, 0.04) 0 1px, transparent 2px),
    radial-gradient(circle at 83% 17%, rgba(138, 126, 107, 0.05) 0 1px, transparent 3px),
    radial-gradient(circle at 41% 71%, rgba(94, 122, 92, 0.04) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 89%, rgba(59, 55, 46, 0.03) 0 2px, transparent 4px);
  background-size: 31px 37px, 43px 47px, 59px 61px, 71px 67px;
}

.archive-header, .folio-grid, .archive-footer { position: relative; z-index: 1; }

.archive-header {
  min-height: 92vh;
  padding: clamp(2rem, 6vw, 6rem);
  display: grid;
  align-content: center;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

.kicker, .specimen-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tarnished-brass);
}

.archive-header .kicker { grid-column: 2 / 8; margin: 0; }

h1, h2 {
  font-family: "Zilla Slab", Rockwell, serif;
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: 0.08em;
  line-height: 0.94;
  margin: 0;
}

h1 {
  grid-column: 2 / 11;
  font-size: clamp(3rem, 10vw, 9.8rem);
  color: var(--darkroom-umber);
  text-shadow: 3px 0 rgba(158, 90, 90, 0.12), -2px 0 rgba(94, 122, 92, 0.1);
}

.lead {
  grid-column: 6 / 11;
  max-width: 38rem;
  font-size: clamp(1.05rem, 1.8vw, 1.55rem);
  line-height: 1.62;
  color: var(--dark-moss);
  margin: 0;
}

.header-rule {
  grid-column: 2 / 12;
  display: grid;
  grid-template-columns: 5fr 2fr 3fr;
  gap: 1.5rem;
  margin-top: 2rem;
}

.header-rule span { border-top: 1px dashed var(--tarnished-brass); height: 1px; }

.folio-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
  padding: 0 clamp(1rem, 4vw, 4rem) 5rem;
}

.specimen-plate {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
  padding: clamp(1.35rem, 3vw, 3rem);
  border: 2px solid var(--plate-border);
  outline: 1px solid var(--plate-border);
  outline-offset: -7px;
  background:
    radial-gradient(circle at 12% 22%, rgba(138, 126, 107, 0.05) 0 1px, transparent 3px),
    radial-gradient(circle at 76% 71%, rgba(94, 122, 92, 0.05) 0 2px, transparent 5px),
    linear-gradient(105deg, rgba(212, 203, 179, 0.22), rgba(242, 236, 224, 0.92));
  box-shadow: 0 2.5rem 5rem rgba(44, 42, 36, 0.14);
  min-height: 72vh;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out, border-color 220ms steps(1);
}

.specimen-plate.visible { opacity: 1; transform: translateY(0); }
.plate-a { grid-column: 2 / 10; margin-bottom: 5rem; }
.plate-b { grid-column: 5 / 12; margin-top: 3rem; margin-bottom: 2rem; }
.plate-c { grid-column: 1 / 9; margin-top: 4rem; margin-bottom: 4rem; }
.plate-d { grid-column: 4 / 12; margin-top: 2rem; }

.specimen-plate.dark {
  background:
    radial-gradient(circle at 20% 20%, rgba(158, 90, 90, 0.13), transparent 22rem),
    radial-gradient(circle at 80% 74%, rgba(94, 122, 92, 0.14), transparent 24rem),
    var(--darkroom-umber);
  color: var(--parchment-gold);
  border-color: var(--parchment-gold);
  outline-color: var(--tarnished-brass);
}

.specimen-plate.dark .plate-copy, .specimen-plate.dark h2 { color: var(--parchment-gold); }
.specimen-plate.dark .botanical-svg { stroke: var(--parchment-gold); }
.specimen-plate.dark .botanical-svg .leaf { fill: rgba(94, 122, 92, 0.28); }

.corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--tarnished-brass);
  border-style: solid;
}
.tl { top: 15px; left: 15px; border-width: 1px 0 0 1px; }
.tr { top: 15px; right: 15px; border-width: 1px 1px 0 0; }
.bl { bottom: 15px; left: 15px; border-width: 0 0 1px 1px; }
.br { bottom: 15px; right: 15px; border-width: 0 1px 1px 0; }

.specimen-label { grid-column: 1 / -1; margin: 0 0 0.5rem; color: var(--tarnished-brass); }
h2 { grid-column: 1 / -1; font-size: clamp(2rem, 5vw, 4.5rem); color: var(--darkroom-umber); }

.plate-visual { grid-column: 1 / 6; align-self: center; min-height: 22rem; display: grid; place-items: center; }
.plate-copy { grid-column: 6 / 13; align-self: start; color: var(--dark-moss); }
.plate-b .plate-visual, .plate-d .plate-visual { grid-column: 8 / 13; }
.plate-b .plate-copy, .plate-d .plate-copy { grid-column: 1 / 8; }

.columns {
  column-count: 2;
  column-gap: 2.5rem;
  column-rule: 1px solid var(--aged-column-rule);
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  line-height: 1.72;
}
.columns p { margin: 0 0 1.15rem; break-inside: avoid; }
.columns strong { color: var(--aged-ink); font-weight: 600; }

.botanical-svg {
  width: min(100%, 28rem);
  max-height: 34rem;
  overflow: visible;
  stroke: var(--aged-ink);
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  filter: drop-shadow(4px 0 0 rgba(158, 90, 90, 0.13));
}
.botanical-svg .stem { stroke-width: 3; }
.botanical-svg .leaf { stroke-width: 2; fill: rgba(94, 122, 92, 0.18); }
.botanical-svg .detail { stroke-width: 1.35; }
.botanical-svg .draw-path path, .botanical-svg .draw-path ellipse, .botanical-svg .draw-path circle {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
}
.visible .botanical-svg .draw-path path, .visible .botanical-svg .draw-path ellipse, .visible .botanical-svg .draw-path circle {
  animation: drawSpecimen 1.2s ease-out forwards;
}

.data-rot {
  position: absolute;
  height: 12px;
  background: rgba(158, 90, 90, 0.34);
  mix-blend-mode: multiply;
}
.rot-1 { width: 72px; right: -20px; top: 22%; }
.rot-2 { width: 38px; left: 12%; bottom: -7px; background: rgba(94, 122, 92, 0.28); }
.rot-3 { width: 58px; left: -26px; top: 62%; }
.rot-4 { width: 80px; right: 18%; top: -7px; background: rgba(196, 154, 78, 0.32); }
.rot-5 { width: 48px; right: 8%; bottom: 20%; }
.rot-6 { width: 75px; left: -22px; top: 35%; background: rgba(94, 122, 92, 0.27); }
.rot-7 { width: 34px; right: 24%; bottom: -6px; }

.glitch-rift {
  grid-column: 1 / -1;
  height: 104px;
  margin: 2rem 0 1rem;
  position: relative;
  background: repeating-linear-gradient(to bottom, var(--darkroom-umber) 0 2px, transparent 2px 5px), var(--darkroom-umber);
  overflow: hidden;
  border-top: 1px dashed var(--tarnished-brass);
  border-bottom: 1px dashed var(--tarnished-brass);
}
.glitch-rift::before {
  content: attr(data-rift);
  position: absolute;
  left: 8%;
  top: 50%;
  transform: translateY(-50%);
  font-family: "IBM Plex Mono", monospace;
  color: var(--parchment-gold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
.glitch-rift span {
  position: absolute;
  width: 130px;
  height: 18px;
  background: var(--corrupted-rose);
  opacity: 0.7;
}
.glitch-rift span:nth-child(1) { left: 18%; top: 16px; transform: translateX(44px); }
.glitch-rift span:nth-child(2) { left: 43%; top: 48px; width: 86px; transform: translateX(-31px); background: var(--pressed-fern); }
.glitch-rift span:nth-child(3) { left: 68%; top: 22px; width: 160px; transform: translateX(57px); background: var(--parchment-gold); }
.glitch-rift span:nth-child(4) { left: 31%; top: 78px; width: 62px; transform: translateX(-18px); }
.glitch-rift span:nth-child(5) { left: 78%; top: 72px; width: 105px; transform: translateX(22px); background: var(--pressed-fern); }

.archive-footer { padding: 4rem clamp(1rem, 4vw, 4rem) 6rem; text-align: center; }

.glitching { animation: glitchBurst 240ms steps(1) both; }
.glitching .stem { transform: translateX(5px); stroke: var(--corrupted-rose); }
.glitching .leaf { transform: translateX(-4px); }
.glitching .detail { transform: translateX(3px); }

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

@keyframes glitchBurst {
  0% { transform: translate(0, 0); mix-blend-mode: normal; text-shadow: none; }
  25% { transform: translate(6px, -1px); mix-blend-mode: difference; border-color: var(--corrupted-rose); text-shadow: -3px 0 var(--corrupted-rose); }
  50% { transform: translate(-4px, 1px); mix-blend-mode: exclusion; outline-color: var(--corrupted-rose); }
  75% { transform: translate(3px, 0); mix-blend-mode: difference; text-shadow: 4px 0 rgba(94, 122, 92, 0.65); }
  100% { transform: translate(0, 0); mix-blend-mode: normal; }
}

@media (max-width: 900px) {
  .archive-header, .folio-grid, .specimen-plate { grid-template-columns: repeat(6, 1fr); }
  .archive-header .kicker, h1, .lead, .header-rule, .plate-a, .plate-b, .plate-c, .plate-d { grid-column: 1 / -1; }
  .plate-visual, .plate-copy, .plate-b .plate-visual, .plate-b .plate-copy, .plate-d .plate-visual, .plate-d .plate-copy { grid-column: 1 / -1; }
  .columns { column-count: 1; }
  .specimen-plate { min-height: auto; }
  .plate-b .plate-visual, .plate-d .plate-visual { order: 3; }
}

@media (max-width: 560px) {
  .archive-header { min-height: 78vh; padding: 2rem 1rem; }
  .folio-grid { padding-inline: 0.75rem; }
  .specimen-plate { padding: 1.25rem; }
  .plate-visual { min-height: 16rem; }
}