:root {
  /* Typography compliance: IBM Plex Mono” */
  --midnight: #07120D;
  --plum: #1A0F1F;
  --emerald: #0FA36B;
  --sapphire: #123C69;
  --amethyst: #5B2A86;
  --garnet: #9D174D;
  --parchment: #E8D8B8;
  --gold: #D6A84F;
  --display: "Cormorant Garamond", serif;
  --body: "Fraunces", serif;
  --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--parchment);
  background: var(--midnight);
  font-family: var(--body);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 70% 20%, rgba(15,163,107,.24), transparent 34%),
    radial-gradient(circle at 14% 74%, rgba(91,42,134,.28), transparent 30%),
    linear-gradient(135deg, #07120D 0%, #1A0F1F 55%, #123C69 100%);
  z-index: -3;
}

#pollen-field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 8;
  mix-blend-mode: screen;
  opacity: .72;
}

.specimen-index {
  position: fixed;
  left: 1.35rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
}

.specimen-index::before {
  content: "";
  position: absolute;
  left: .55rem;
  top: -4rem;
  bottom: -4rem;
  width: 1px;
  background: linear-gradient(transparent, rgba(214,168,79,.5), rgba(15,163,107,.6), transparent);
}

.specimen-index a {
  position: relative;
  width: 1.2rem;
  color: rgba(232,216,184,.55);
  text-decoration: none;
  text-shadow: 0 0 18px transparent;
  transition: color .5s ease, transform .5s ease, text-shadow .5s ease;
}

.specimen-index a.active,
.specimen-index a:hover {
  color: var(--emerald);
  transform: translateX(.35rem);
  text-shadow: 0 0 18px rgba(15,163,107,.88);
}

.index-title {
  position: absolute;
  left: 2rem;
  top: 50%;
  width: 12rem;
  color: var(--gold);
  opacity: .75;
  transform: translateY(-50%) rotate(-90deg) translateX(55%);
  transform-origin: left center;
  pointer-events: none;
}

.chamber {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(3.5rem, auto);
  gap: 0 1.2rem;
  padding: 7rem 5vw 5rem 8vw;
  isolation: isolate;
  overflow: hidden;
}

.display-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(4rem, 12vw, 11rem);
  line-height: .76;
  letter-spacing: -.055em;
  color: var(--parchment);
  text-shadow: 0 0 44px rgba(15,163,107,.12);
  z-index: 3;
}

.mono,
.chamber-mark,
.lot-code,
.auction-slip,
.root-note {
  font-family: var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.overline {
  grid-column: 2 / 7;
  align-self: end;
  color: var(--gold);
  font-size: .72rem;
  z-index: 4;
}

.chamber-mark {
  grid-column: 2 / 7;
  color: var(--gold);
  font-size: .75rem;
  margin: 0 0 1.2rem;
  z-index: 5;
}

.parchment-panel,
.herbarium-card,
.auction-slip {
  background: linear-gradient(145deg, rgba(232,216,184,.94), rgba(214,168,79,.55));
  color: var(--plum);
  box-shadow: inset 0 0 40px rgba(7,18,13,.32), 0 28px 80px rgba(0,0,0,.42);
  border: 1px solid rgba(214,168,79,.5);
}

.chamber-canopy .display-title {
  grid-column: 1 / 9;
  grid-row: 2 / 6;
  transform: translateX(-.4rem);
}

.chamber-canopy .display-title span { color: transparent; -webkit-text-stroke: 1.1px var(--parchment); }

.greenhouse-panes {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, transparent 0 11%, rgba(232,216,184,.07) 11.2% 11.35%, transparent 11.6%),
    linear-gradient(18deg, transparent 0 49%, rgba(214,168,79,.08) 49.2% 49.45%, transparent 49.7%);
  background-size: 22rem 100%, 34rem 34rem;
  opacity: .7;
  z-index: -1;
}

.retro-moire {
  position: absolute;
  right: -16vw;
  top: 7vh;
  width: 62vw;
  height: 62vw;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(91,42,134,.23) 0 2px, transparent 3px 10px);
  filter: blur(.2px);
  opacity: .55;
  animation: inkPhase 16s ease-in-out infinite alternate;
}

.canopy-copy {
  grid-column: 3 / 6;
  grid-row: 6 / 8;
  padding: 1.3rem 1.5rem;
  clip-path: polygon(0 5%, 96% 0, 100% 88%, 8% 100%);
  transform: rotate(-2deg);
  z-index: 7;
}

.canopy-copy p { margin: 0; line-height: 1.55; font-size: clamp(1rem, 1.6vw, 1.35rem); }

.pin {
  position: absolute;
  top: .85rem;
  right: 1rem;
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(214,168,79,.18), 0 0 22px var(--gold);
}

.botanical-plate {
  overflow: visible;
  fill: none;
  stroke: var(--parchment);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 20px rgba(15,163,107,.18));
}

.canopy-leaf {
  grid-column: 7 / 13;
  grid-row: 1 / 8;
  width: min(44vw, 42rem);
  justify-self: center;
  opacity: .9;
  transform: rotate(8deg);
  z-index: 5;
}

.ticker-vine { fill: var(--gold); font: 600 18px var(--mono); letter-spacing: .12em; opacity: .8; }

.draw-path,
.root-path,
.ring-path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.8s cubic-bezier(.22,.72,.18,1);
}

.in-view .draw-path,
.in-view .root-path,
.in-view .ring-path { stroke-dashoffset: 0; }

.auction-slip {
  font-size: .7rem;
  padding: 1rem;
  clip-path: polygon(5% 0, 100% 8%, 94% 100%, 0 91%);
  z-index: 7;
}

.auction-slip strong { display: block; color: var(--garnet); font-size: 1.6rem; margin-top: .25rem; }
.slip-one { grid-column: 8 / 11; grid-row: 7; transform: rotate(3deg) translateY(-1rem); }

.chamber-ledger { background: radial-gradient(circle at 16% 20%, rgba(157,23,77,.18), transparent 30%); }
.chamber-ledger .display-title { grid-column: 1 / 8; grid-row: 2 / 4; z-index: 6; }

.herbarium-card {
  position: relative;
  padding: 1.2rem 1.25rem 1.4rem;
  min-height: 17rem;
  clip-path: polygon(2% 0, 98% 3%, 94% 98%, 5% 100%, 0 12%);
  transform: translateY(5rem) rotate(var(--tilt));
  opacity: 0;
  transition: transform 1s cubic-bezier(.2,.8,.18,1), opacity 1s ease;
  z-index: 4;
}

.herbarium-card::after {
  content: "";
  position: absolute;
  inset: 3rem 1rem 4.5rem;
  background:
    radial-gradient(circle at 50% 35%, rgba(15,163,107,.22), transparent 10%),
    repeating-linear-gradient(75deg, transparent 0 8px, rgba(91,42,134,.18) 9px 10px);
  border: 1px solid rgba(26,15,31,.18);
  opacity: .75;
  z-index: -1;
}

.herbarium-card.visible { transform: translateY(0) rotate(var(--tilt)); opacity: 1; }
.herbarium-card h3 { margin: 6rem 0 .75rem; font-family: var(--display); font-size: 2.2rem; line-height: .9; color: var(--plum); }
.herbarium-card p { line-height: 1.5; margin: 0 0 1rem; }
.herbarium-card b { color: var(--garnet); font-family: var(--mono); }
.lot-code { color: var(--sapphire); font-size: .68rem; font-weight: 600; }
.card-a { --tilt: -2deg; grid-column: 2 / 5; grid-row: 4 / 8; }
.card-b { --tilt: 2.4deg; grid-column: 5 / 8; grid-row: 3 / 7; }
.card-c { --tilt: -1.2deg; grid-column: 8 / 12; grid-row: 5 / 9; }

.stem-mask {
  grid-column: 7 / 13;
  grid-row: 2 / 9;
  width: min(44vw, 34rem);
  stroke: var(--emerald);
  opacity: .72;
  z-index: 8;
  mix-blend-mode: screen;
}

.chamber-exchange { background: radial-gradient(circle at 70% 70%, rgba(18,60,105,.35), transparent 38%); }
.chamber-exchange .display-title { grid-column: 6 / 12; grid-row: 2 / 5; text-align: right; z-index: 5; }
.root-graph { grid-column: 2 / 12; grid-row: 2 / 9; width: 100%; height: min(70vh, 46rem); stroke: var(--emerald); fill: var(--gold); stroke-width: 3; filter: drop-shadow(0 0 18px rgba(15,163,107,.5)); z-index: 2; }
.root-note { position: relative; padding: .8rem .9rem; color: var(--gold); background: rgba(26,15,31,.72); border-left: 1px solid var(--emerald); font-size: .72rem; z-index: 7; }
.note-supply { grid-column: 2 / 5; grid-row: 6; transform: rotate(-2deg); }
.note-verify { grid-column: 5 / 8; grid-row: 8; transform: rotate(1.5deg); }
.note-retire { grid-column: 9 / 12; grid-row: 7; transform: rotate(-1deg); }

.seal-bloom {
  grid-column: 8 / 10;
  grid-row: 5;
  width: 9rem;
  height: 9rem;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(157,23,77,.95), rgba(91,42,134,.55) 58%, transparent 60%);
  color: var(--parchment);
  font: 600 .78rem/1.4 var(--mono);
  letter-spacing: .16em;
  transform: scale(.3) rotate(-24deg);
  opacity: 0;
  transition: transform 1.2s ease .8s, opacity 1.2s ease .8s;
  z-index: 8;
}
.in-view .seal-bloom { opacity: 1; transform: scale(1) rotate(-8deg); }

.chamber-grove { background: radial-gradient(circle at 50% 48%, rgba(214,168,79,.1), transparent 36%); }
.chamber-grove .display-title { grid-column: 1 / 7; grid-row: 2 / 5; }
.tree-ring { grid-column: 6 / 12; grid-row: 2 / 8; width: min(58vw, 40rem); justify-self: center; stroke: var(--gold); fill: none; stroke-width: 2; filter: drop-shadow(0 0 24px rgba(214,168,79,.24)); }
.archival-note { grid-column: 3 / 7; grid-row: 7; padding: 1.4rem; font: 600 .78rem/1.7 var(--mono); transform: rotate(1.5deg); z-index: 7; }
.archival-note span { display: block; margin-top: .8rem; font-family: var(--body); font-weight: 400; text-transform: none; letter-spacing: 0; }

.chamber-bell { background: linear-gradient(135deg, #07120D 0%, #1A0F1F 55%, #123C69 100%); }
.chamber-bell .display-title { grid-column: 2 / 10; grid-row: 2 / 5; z-index: 4; }
.final-line { grid-column: 5 / 9; grid-row: 6; font-size: clamp(1.5rem, 3vw, 3rem); line-height: 1.05; color: var(--parchment); z-index: 5; }
.slip-final { grid-column: 8 / 12; grid-row: 8; transform: rotate(2deg); }
.night-bloom { grid-column: 8 / 13; grid-row: 2 / 8; width: min(42vw, 34rem); stroke: var(--parchment); filter: drop-shadow(0 0 22px rgba(157,23,77,.3)); z-index: 3; }
.border-pattern { position: absolute; inset: 3rem 3rem; border: 1px solid rgba(214,168,79,.28); background-image: linear-gradient(90deg, rgba(214,168,79,.18) 1px, transparent 1px), linear-gradient(rgba(91,42,134,.2) 1px, transparent 1px); background-size: 26px 26px; opacity: .35; transform: rotate(-1deg); }

@keyframes inkPhase { from { transform: rotate(0deg) scale(.96); } to { transform: rotate(9deg) scale(1.04); } }

@media (max-width: 780px) {
  .specimen-index { left: .65rem; }
  .index-title { display: none; }
  .chamber { padding: 5rem 1.4rem 4rem 3.2rem; gap: 1rem; }
  .display-title,
  .chamber-canopy .display-title,
  .chamber-ledger .display-title,
  .chamber-exchange .display-title,
  .chamber-grove .display-title,
  .chamber-bell .display-title,
  .overline,
  .chamber-mark,
  .canopy-copy,
  .canopy-leaf,
  .slip-one,
  .herbarium-card,
  .stem-mask,
  .root-graph,
  .root-note,
  .seal-bloom,
  .tree-ring,
  .archival-note,
  .final-line,
  .slip-final,
  .night-bloom { grid-column: 1 / -1; grid-row: auto; }
  .canopy-leaf, .stem-mask, .tree-ring, .night-bloom { width: 100%; }
  .chamber-exchange .display-title { text-align: left; }
}