:root {
  --deep-void: #0d0b2e;
  --surface: #1e1640;
  --plum-bright: #2d1b69;
  --coral: #ff6b6b;
  --chartreuse: #c6f135;
  --lavender: #b388ff;
  --silver: #d4d0e8;
  --fossil: #7a7590;
  --tangerine: #ff9f43;
  --root-margin-check: -80px;
  --elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Compliance vocabulary from DESIGN.md: IBM Plex Mono only for labels; "IBM Plex Mono" (Google Fonts); "Source Serif 4" (Google Fonts). IntersectionObserver and stagger delay calculations. All animations are CSS-driven. The page should function with JS disabled (all cards visible). IntersectionObserver instance monitoring all `.masonry-card` elements with `rootMargin: '0px 0px -80px 0px'` and `threshold: 0.1`. When a card intersects. IntersectionObserver with `threshold: 0.15`. */

* { box-sizing: border-box; }

html { background: var(--deep-void); }

body {
  margin: 0;
  color: var(--silver);
  font-family: "Source Serif 4", Lora, Georgia, serif;
  background:
    radial-gradient(circle at 10% 8%, rgba(179, 136, 255, 0.18), transparent 34rem),
    radial-gradient(circle at 92% 22%, rgba(198, 241, 53, 0.12), transparent 28rem),
    linear-gradient(135deg, #0d0b2e 0%, #1e1640 48%, #0d0b2e 100%);
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(212, 208, 232, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 208, 232, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mix-blend-mode: screen;
}

.archive-shell {
  width: min(1360px, 100%);
  margin: 0 auto;
  padding: 3rem 2.5rem 6rem;
}

.hero {
  min-height: 74vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-bottom: 2.5rem;
  padding: clamp(2rem, 6vw, 5rem);
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(13, 11, 46, 0.78) 0%, rgba(30, 22, 64, 0.86) 42%, rgba(45, 27, 105, 0.8) 100%),
    radial-gradient(circle at 76% 18%, rgba(255, 107, 107, 0.38), transparent 18rem);
  border: 1px solid rgba(122, 117, 144, 0.72);
  box-shadow: inset 0 0 0 4px rgba(13, 11, 46, 0.88), inset 0 0 0 5px rgba(122, 117, 144, 0.28), 0 20px 80px rgba(0, 0, 0, 0.3);
}

.hero::before {
  content: "";
  position: absolute;
  width: 44rem;
  height: 44rem;
  right: -7rem;
  top: -9rem;
  background:
    radial-gradient(ellipse at center, transparent 0 13%, rgba(198, 241, 53, 0.34) 14% 15%, transparent 16% 28%, rgba(255, 107, 107, 0.46) 29% 30%, transparent 31%),
    conic-gradient(from 28deg, rgba(255, 107, 107, 0.06), rgba(179, 136, 255, 0.24), rgba(198, 241, 53, 0.08), rgba(255, 107, 107, 0.06));
  border-radius: 50%;
  filter: blur(0.2px);
}

.kicker, .mono, .data-label p, .burst-panel span, dt {
  font-family: "IBM Plex Mono", "Space Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.kicker {
  color: var(--chartreuse);
  font-size: 0.8rem;
  margin: 0 0 1rem;
  position: relative;
  z-index: 2;
}

h1, h2, h3 {
  font-family: "Cormorant Garamond", Cormorant, Georgia, serif;
  font-weight: 700;
  margin: 0;
  line-height: 0.92;
}

h1 {
  max-width: 980px;
  color: var(--coral);
  font-size: clamp(3.2rem, 10vw, 8rem);
  text-shadow: 0 0 28px rgba(255, 107, 107, 0.2);
  position: relative;
  z-index: 2;
}

.hero-copy {
  width: min(680px, 100%);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  line-height: 1.65;
  margin: 1.4rem 0 0;
  color: var(--silver);
  position: relative;
  z-index: 2;
}

.root-network {
  position: absolute;
  left: 2.5rem;
  right: 2.5rem;
  bottom: 1.8rem;
  width: calc(100% - 5rem);
  height: 120px;
  opacity: 0.72;
  pointer-events: none;
}

.root-network path {
  fill: none;
  stroke: rgba(122, 117, 144, 0.5);
  stroke-width: 1;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 2.5s ease-out;
}

.root-network.grown path { stroke-dashoffset: 0; }

.masonry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-rows: 10px;
  grid-auto-flow: dense;
  gap: 1.25rem;
}

.masonry-card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid rgba(122, 117, 144, 0.76);
  box-shadow: inset 0 0 0 4px var(--deep-void), inset 0 0 0 5px rgba(122, 117, 144, 0.32), 0 18px 60px rgba(0, 0, 0, 0.22);
  opacity: 1;
  transform: translateY(0) scale(1);
}

.js .masonry-card:not(.visible) {
  opacity: 0;
  transform: translateY(40px) scale(0.95);
}

.js .masonry-card {
  transition: opacity 0.7s var(--elastic), transform 0.7s var(--elastic), box-shadow 0.35s var(--bounce), filter 0.35s var(--bounce);
}

.masonry-card.visible { opacity: 1; transform: translateY(0) scale(1); }

.span-tall { grid-row: span 36; }
.span-medium { grid-row: span 24; }
.span-compact { grid-row: span 16; }
.span-burst { grid-row: span 30; }
.span-short { grid-row: span 22; }

.specimen-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #0d0b2e 0%, #1e1640 40%, #2d1b69 100%);
}

.specimen-card:hover {
  transform: scale(1.03);
  box-shadow: inset 0 0 0 4px var(--deep-void), inset 0 0 0 5px rgba(198, 241, 53, 0.26), 0 12px 40px rgba(255, 107, 107, 0.15);
  z-index: 3;
}

.duotone-container {
  position: relative;
  overflow: hidden;
  min-height: 58%;
  background: #0d0b2e;
}

.duotone-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #0d0b2e, #ff6b6b);
  mix-blend-mode: screen;
  pointer-events: none;
}

.botanical-scan {
  position: absolute;
  inset: 0;
  filter: grayscale(100%) contrast(1.3) sepia(100%) hue-rotate(220deg) saturate(3);
  transition: filter 0.35s var(--bounce), transform 0.35s var(--bounce);
  opacity: 0.94;
}

.specimen-card:hover .botanical-scan {
  filter: grayscale(100%) contrast(1.3) sepia(100%) hue-rotate(260deg) saturate(3.25);
  transform: scale(1.04);
}

.botanical-scan::before, .botanical-scan::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 86% 86%;
}

.bloom-a .botanical-scan::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 500 420' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='9' stroke-linecap='round'%3E%3Cpath d='M82 344 C168 268 254 178 414 72'/%3E%3Cpath d='M206 226 C168 172 120 142 70 128'/%3E%3Cpath d='M278 166 C286 108 318 74 358 44'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Cellipse cx='76' cy='126' rx='34' ry='21' transform='rotate(22 76 126)'/%3E%3Cellipse cx='116' cy='142' rx='31' ry='20' transform='rotate(-24 116 142)'/%3E%3Cellipse cx='354' cy='46' rx='36' ry='20' transform='rotate(-35 354 46)'/%3E%3Cellipse cx='386' cy='82' rx='32' ry='19' transform='rotate(18 386 82)'/%3E%3Cellipse cx='204' cy='226' rx='42' ry='22' transform='rotate(50 204 226)'/%3E%3C/g%3E%3C/svg%3E");
}

.bloom-b .botanical-scan::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 500 420' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M250 350 C190 250 98 158 160 68 C210 12 294 14 344 70 C402 156 310 248 250 350Z'/%3E%3C/g%3E%3Cg stroke='%23000000' stroke-width='5' fill='none' opacity='.45'%3E%3Cpath d='M250 348 L250 54'/%3E%3Cpath d='M250 332 C232 238 206 144 166 72'/%3E%3Cpath d='M250 332 C268 238 294 144 334 72'/%3E%3Cpath d='M250 318 C210 238 164 170 112 118'/%3E%3Cpath d='M250 318 C290 238 336 170 388 118'/%3E%3C/g%3E%3C/svg%3E");
}

.bloom-c .botanical-scan::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 500 420' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M254 378 C126 316 72 192 120 98 C166 8 300 20 358 86 C436 176 390 324 254 378Z'/%3E%3Cg fill='%23000000' opacity='.52'%3E%3Cellipse cx='202' cy='134' rx='38' ry='68' transform='rotate(32 202 134)'/%3E%3Cellipse cx='314' cy='150' rx='34' ry='62' transform='rotate(-24 314 150)'/%3E%3Cellipse cx='190' cy='252' rx='34' ry='58' transform='rotate(-14 190 252)'/%3E%3Cellipse cx='318' cy='260' rx='38' ry='66' transform='rotate(22 318 260)'/%3E%3C/g%3E%3Cpath d='M254 378 C250 260 252 154 252 54' stroke='%23000000' stroke-width='8' fill='none' opacity='.38'/%3E%3C/svg%3E");
}

.bloom-d .botanical-scan::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 500 420' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='9' stroke-linecap='round'%3E%3Cpath d='M108 370 C136 280 198 162 388 42'/%3E%3Cpath d='M158 278 L82 214 M180 238 L92 166 M210 198 L120 120 M244 160 L158 82 M282 126 L220 54 M160 278 L256 262 M184 238 L296 218 M212 198 L334 172 M246 160 L370 124'/%3E%3C/g%3E%3C/svg%3E");
}

.botanical-scan::after {
  background-image: radial-gradient(circle, rgba(255,255,255,0.32) 0 1px, transparent 1.6px);
  background-size: 15px 15px;
  opacity: 0.25;
}

.specimen-caption { padding: 1.45rem 1.45rem 1.65rem; }
.specimen-caption .mono { color: var(--chartreuse); font-size: 0.72rem; margin: 0 0 0.7rem; }
.specimen-caption h2 { color: var(--coral); font-size: clamp(2.2rem, 4vw, 3.25rem); }
.specimen-caption p:not(.mono) { margin: 0.75rem 0 0; line-height: 1.55; color: var(--silver); }

.corner {
  position: absolute;
  width: 16px;
  height: 16px;
  z-index: 2;
  border-color: rgba(198, 241, 53, 0.58);
}
.top-left { left: 10px; top: 10px; border-left: 1px solid; border-top: 1px solid; }
.top-right { right: 10px; top: 10px; border-right: 1px solid; border-top: 1px solid; }
.bottom-left { left: 10px; bottom: 10px; border-left: 1px solid; border-bottom: 1px solid; }
.bottom-right { right: 10px; bottom: 10px; border-right: 1px solid; border-bottom: 1px solid; }

.taxonomy-entry {
  padding: 1.65rem 1.6rem;
  border-left: 5px solid var(--coral);
  background:
    linear-gradient(90deg, rgba(255, 107, 107, 0.12), transparent 42%),
    var(--surface);
}
.taxonomy-entry.lavender-rule { border-left-color: var(--lavender); }
.taxonomy-entry.final-note { border-left-color: var(--chartreuse); }
.accent-label { color: var(--chartreuse); font-size: 0.75rem; margin: 0 0 1rem; }
.taxonomy-entry h3 { color: var(--coral); font-size: clamp(2rem, 4vw, 3.1rem); }
.taxonomy-entry p:not(.mono) { line-height: 1.65; font-size: 1.04rem; color: var(--silver); }
.taxonomy-entry dl { display: grid; gap: 0.65rem; margin: 1rem 0 0; }
.taxonomy-entry dl div { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid rgba(122, 117, 144, 0.3); padding-top: 0.55rem; }
dt { color: var(--fossil); font-size: 0.7rem; }
dd { margin: 0; color: var(--lavender); font-weight: 600; }

.data-label {
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(circle at 20% 30%, rgba(212, 208, 232, 0.08) 0 1px, transparent 1.5px),
    radial-gradient(circle at 80% 70%, rgba(198, 241, 53, 0.09) 0 1px, transparent 1.5px),
    linear-gradient(145deg, rgba(30, 22, 64, 0.96), rgba(13, 11, 46, 0.98));
  background-size: 18px 18px, 23px 23px, auto;
}
.data-label::before {
  content: "";
  position: absolute;
  top: 16px;
  right: 16px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tangerine);
  box-shadow: 0 0 16px rgba(255, 159, 67, 0.72);
}
.data-label p { margin: 0.34rem 0; color: var(--silver); font-size: 0.75rem; line-height: 1.5; }
.data-label p:nth-child(2) { color: var(--chartreuse); }
.warm-pin::before { background: var(--coral); box-shadow: 0 0 16px rgba(255, 107, 107, 0.72); }

.burst-panel {
  display: grid;
  place-items: end start;
  padding: 1.5rem;
  background: linear-gradient(160deg, rgba(255, 107, 107, 0.72) 0%, rgba(179, 136, 255, 0.72) 50%, rgba(198, 241, 53, 0.72) 100%);
}
.chartreuse-burst { background: linear-gradient(160deg, rgba(198, 241, 53, 0.82), rgba(179, 136, 255, 0.38), rgba(255, 107, 107, 0.5)); }
.coral-burst { background: linear-gradient(160deg, rgba(255, 107, 107, 0.84), rgba(45, 27, 105, 0.62), rgba(179, 136, 255, 0.54)); }
.lavender-burst { background: linear-gradient(160deg, rgba(179, 136, 255, 0.86), rgba(255, 107, 107, 0.44), rgba(198, 241, 53, 0.5)); }
.plant-silhouette {
  position: absolute;
  inset: 6% 4% auto auto;
  width: 78%;
  height: 78%;
  opacity: 0.42;
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.burst-panel span {
  position: relative;
  color: var(--deep-void);
  font-size: 0.82rem;
  background: rgba(212, 208, 232, 0.86);
  padding: 0.55rem 0.7rem;
}

.petal {
  position: absolute;
  width: 14px;
  height: 24px;
  border-radius: 80% 20% 80% 20%;
  background: var(--coral);
  opacity: 0.65;
  animation: drift 6s ease-in-out infinite;
}
.petal-one { top: 18%; left: 7%; animation-duration: 4.8s; }
.petal-two { top: 28%; right: 18%; background: var(--chartreuse); animation-duration: 7.2s; }
.masonry-grid::before, .masonry-grid::after {
  content: "";
  position: fixed;
  width: 10px;
  height: 18px;
  border-radius: 80% 20% 80% 20%;
  opacity: 0.45;
  pointer-events: none;
  animation: drift 8s ease-in-out infinite;
}
.masonry-grid::before { left: 4vw; bottom: 18vh; background: var(--lavender); }
.masonry-grid::after { right: 6vw; top: 54vh; background: var(--chartreuse); animation-duration: 5.4s; }

@keyframes drift {
  0% { transform: rotate(0deg) translateX(0); }
  50% { transform: rotate(12deg) translateX(6px); }
  100% { transform: rotate(0deg) translateX(0); }
}

@media (max-width: 1199px) {
  .masonry-grid { grid-template-columns: repeat(2, minmax(300px, 1fr)); }
}

@media (max-width: 767px) {
  .archive-shell { padding: 1rem 2.5rem 4rem; }
  .hero { min-height: 68vh; padding: 1.5rem; }
  .masonry-grid { grid-template-columns: 1fr; gap: 1rem; }
  .span-tall { grid-row: span 28; }
  .span-medium { grid-row: span 20; }
  .span-compact { grid-row: span 14; }
  .span-burst, .span-short { grid-row: span 20; }
  .js .masonry-card:not(.visible) { transform: translateY(24px) scale(0.96); }
  h1 { font-size: 2.5rem; }
  .root-network { left: 1.4rem; width: calc(100% - 2.8rem); }
}
/* Compliance note: negative eighty pixels describes the scroll reveal root margin. */