:root {
  --deep-burgundy: #5A1024;
  --wine-shadow: #2A0711;
  --cream: #F3E6C8;
  --parchment: #FFF7E3;
  --ivy: #586B3B;
  --ink: #19110E;
  --rust: #B64A32;
  --label-gray: #8F7B68;
  --serif: "Libre Baskerville", Baskerville, Georgia, serif;
  --caslon: "Libre Caslon Text", Georgia, serif;
  --spray: "Rubik Spray Paint", Impact, fantasy;
  --condensed: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
}

/* IBM Plex Sans Condensed* Condensed** for small labels and tiny inventory glyphs. */

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: radial-gradient(circle at 15% 8%, rgba(255,247,227,.14), transparent 26%), linear-gradient(118deg, var(--wine-shadow), var(--deep-burgundy) 48%, #3a0a18 100%);
  font-family: var(--caslon);
  overflow-x: hidden;
}

.wall-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .23;
  background-image: repeating-linear-gradient(83deg, rgba(255,247,227,.08) 0 1px, transparent 1px 8px), repeating-linear-gradient(0deg, rgba(25,17,14,.18) 0 2px, transparent 2px 12px);
  mix-blend-mode: overlay;
}

.site-vine {
  position: fixed;
  right: 3vw;
  top: 0;
  height: 100vh;
  width: 16vw;
  z-index: 2;
  pointer-events: none;
}

.site-vine path, .root-illustration path, .alley-vines path, .invasive-vine path {
  fill: none;
  stroke: var(--ivy);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.draw-path {
  stroke-dasharray: var(--path-length, 900);
  stroke-dashoffset: var(--path-length, 900);
  transition: stroke-dashoffset 1.7s cubic-bezier(.22,.75,.2,1);
}

.reveal.in-view .draw-path, .draw-path.in-view { stroke-dashoffset: 0; }
.delay-a { transition-delay: .28s; }

.panel {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  padding: clamp(32px, 6vw, 92px);
  z-index: 1;
}

.panel-number, .archive-kicker, .technical-label, .annotation-gutter, .label-row, .seal {
  font-family: var(--condensed);
  text-transform: uppercase;
  letter-spacing: .12em;
}

.panel-number {
  position: absolute;
  top: 26px;
  right: 7vw;
  color: var(--cream);
  opacity: .65;
  font-size: 13px;
  transform: rotate(1.4deg);
}

h1, h2, h3 { font-family: var(--serif); margin: 0; }
p { font-size: clamp(18px, 1.65vw, 24px); line-height: 1.35; }

.evidence-frame {
  position: relative;
  background: var(--cream);
  box-shadow: 0 28px 70px rgba(25,17,14,.32), inset 0 0 0 1px rgba(42,7,17,.12);
}

.evidence-frame::before {
  content: "";
  position: absolute;
  inset: 13px;
  border: 2px solid var(--deep-burgundy);
  clip-path: inset(0 100% 100% 0);
  transition: clip-path 1.1s steps(4), transform .25s ease;
  pointer-events: none;
}

.reveal.in-view .evidence-frame::before, .evidence-frame.in-view::before {
  clip-path: inset(0 0 0 0);
  animation: borderJitter 2.2s .95s infinite alternate;
}

@keyframes borderJitter { from { transform: translate(0,0) rotate(0deg); } to { transform: translate(1px,-1px) rotate(.16deg); } }

.origin-panel { padding-top: 12vh; }
.origin-panel::after, .herbarium-panel::after, .greenhouse-panel::after {
  content: "";
  position: absolute;
  inset: 18% -10% auto 20%;
  height: 45vh;
  background: rgba(182,74,50,.22);
  transform: rotate(-11deg);
  z-index: -1;
}

.origin-sheet {
  width: min(760px, 72vw);
  min-height: 58vh;
  padding: clamp(34px, 6vw, 72px);
  transform: rotate(-1.3deg);
}

.pin { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--rust); box-shadow: 0 2px 0 var(--wine-shadow); }
.pin-one { top: 26px; left: 38px; } .pin-two { right: 56px; top: 34px; }
.archive-kicker { color: var(--deep-burgundy); font-size: 14px; font-weight: 700; }
h1 { font-size: clamp(64px, 12vw, 154px); line-height: .9; color: var(--wine-shadow); letter-spacing: -.07em; }
.thesis { max-width: 640px; color: var(--wine-shadow); font-size: clamp(22px, 2.2vw, 32px); }
.spray { font-family: var(--spray); color: var(--rust); text-transform: uppercase; letter-spacing: .04em; }
.stencil-tag { position: absolute; right: -74px; top: 37%; font-size: clamp(32px, 5.4vw, 74px); transform: rotate(7deg); opacity: 0; filter: blur(5px); transition: opacity .25s ease, filter .5s ease, transform .55s ease; }
.reveal.in-view .stencil-tag, .reveal.in-view .spray { opacity: .95; filter: blur(0); transform: rotate(4deg) scale(1); }
.origin-marginalia { position: absolute; width: min(300px, 28vw); right: 8vw; bottom: 14vh; color: var(--cream); transform: rotate(2deg); }
.origin-marginalia p { font-size: 20px; }
.seal { display: inline-grid; place-items: center; width: 112px; height: 112px; border: 2px solid currentColor; border-radius: 50%; font-weight: 700; color: var(--cream); transform: rotate(-12deg); }
.observed { color: var(--cream); }
.root-illustration { position: absolute; right: 8vw; top: 8vh; width: min(520px, 42vw); height: auto; opacity: .78; z-index: -1; }
.root-illustration circle { fill: none; stroke: var(--cream); stroke-width: 2; opacity: .7; }

.herbarium-panel { background: linear-gradient(96deg, transparent 0 52%, rgba(42,7,17,.34) 52% 100%); }
.diagonal-slab { position: absolute; left: -12vw; top: 18vh; width: 72vw; height: 50vh; background: var(--deep-burgundy); transform: rotate(-8deg); z-index: -1; }
.annotation-gutter { position: absolute; right: 3vw; top: 18vh; width: 190px; display: grid; gap: 18px; color: var(--cream); font-size: 13px; border-left: 1px solid rgba(243,230,200,.38); padding-left: 22px; }
.gutter-title { color: var(--rust); }
.section-heading { width: min(680px, 58vw); padding: 34px 42px; margin-left: 5vw; transform: rotate(1.4deg); }
.section-heading h2 { font-size: clamp(32px, 4.2vw, 66px); line-height: 1.03; }
.small-frame::before { inset: 10px; }
.specimen-field { margin-top: 7vh; display: grid; grid-template-columns: 1fr 1.05fr 1fr; gap: clamp(18px, 3vw, 44px); align-items: start; padding-right: 15vw; }
.specimen-card { min-height: 390px; padding: 34px; }
.specimen-card.tall { margin-top: -8vh; min-height: 470px; }
.specimen-card.low { margin-top: 8vh; }
.rotate-left { transform: rotate(-2deg); } .rotate-right { transform: rotate(2deg); }
.specimen-card h3 { color: var(--deep-burgundy); font-size: 28px; margin-top: 20px; }
.specimen-card p { font-size: 18px; }
.specimen-art { height: 150px; position: relative; border-bottom: 1px solid rgba(88,107,59,.45); }
.specimen-art span, .specimen-art i, .specimen-art b { position: absolute; display: block; border: 2px solid var(--ivy); }
.stem-a span { left: 50%; bottom: 0; width: 2px; height: 132px; background: var(--ivy); } .stem-a i { left: 52%; top: 36px; width: 58px; height: 28px; border-radius: 50% 0 50% 0; transform: rotate(-24deg); } .stem-a b { left: 29%; top: 68px; width: 64px; height: 30px; border-radius: 0 50% 0 50%; transform: rotate(24deg); }
.rings span, .rings i, .rings b { inset: auto; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%); } .rings span { width: 126px; height: 126px; } .rings i { width: 86px; height: 86px; } .rings b { width: 42px; height: 42px; }
.pods span { left: 48%; bottom: 0; width: 2px; height: 136px; background: var(--ivy); } .pods i, .pods b { width: 28px; height: 42px; border-radius: 50%; } .pods i { left: 34%; top: 36px; transform: rotate(-22deg); } .pods b { left: 57%; top: 72px; transform: rotate(19deg); }
.label-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--label-gray); }
mark { background: var(--deep-burgundy); color: var(--parchment); padding: 4px 8px; }

.alley-panel { min-height: 112vh; }
.alley-swash { position: absolute; left: 8vw; top: 8vh; font-size: clamp(58px, 13vw, 190px); color: rgba(182,74,50,.34); transform: rotate(-9deg); opacity: 0; }
.placard { position: absolute; width: min(385px, 34vw); padding: 34px; }
.placard h2 { font-size: clamp(28px, 3vw, 46px); line-height: 1.05; }
.placard p { font-size: 18px; }
.source { left: 6vw; top: 25vh; transform: rotate(-2deg); }
.build { left: 36vw; top: 42vh; transform: rotate(1.2deg); background: var(--parchment); }
.artifact { right: 8vw; top: 18vh; transform: rotate(-1deg); }
.technical-label { color: var(--rust); font-size: 13px; }
.alley-vines { position: absolute; inset: 24vh 4vw auto 4vw; width: 92vw; height: 52vh; z-index: -1; }

.greenhouse-panel { background: radial-gradient(circle at 72% 50%, rgba(182,74,50,.23), transparent 30%), linear-gradient(115deg, rgba(25,17,14,.82), rgba(42,7,17,.35)); color: var(--cream); }
.risk-copy { width: min(620px, 54vw); margin-left: 3vw; padding-top: 9vh; }
.risk-copy h2 { font-size: clamp(42px, 6vw, 92px); line-height: .98; color: var(--parchment); }
.risk-board { position: absolute; right: 8vw; top: 17vh; width: min(460px, 37vw); padding: 42px; background: #2A0711; color: var(--cream); transform: rotate(2deg); border: 1px solid rgba(243,230,200,.22); }
.risk-board::before { border-color: var(--rust); }
.unknown { color: var(--rust); position: absolute; right: -34px; top: -42px; }
.cracked-seal { font-family: var(--spray); color: var(--rust); font-size: 38px; transform: rotate(-4deg); margin-bottom: 22px; }
.risk-board ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
.risk-board li { border-top: 1px solid rgba(243,230,200,.22); padding-top: 14px; }
.risk-board b { font-family: var(--serif); font-size: 24px; display: block; }
.risk-board span { font-family: var(--condensed); color: var(--label-gray); text-transform: uppercase; letter-spacing: .1em; }
.invasive-vine { position: absolute; right: 2vw; bottom: 0; width: 52vw; max-height: 72vh; }
.invasive-vine .danger { stroke: var(--rust); stroke-width: 3; }

.ledger-panel { display: grid; place-items: center; min-height: 105vh; }
.ledger { width: min(980px, 86vw); padding: clamp(34px, 6vw, 74px); background: var(--parchment); transform: rotate(-.6deg); }
.ledger h2 { font-size: clamp(34px, 5vw, 74px); line-height: 1.02; max-width: 790px; color: var(--wine-shadow); }
.ledger-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ledger-grid article { border-left: 2px solid var(--deep-burgundy); padding: 18px 14px; min-height: 210px; background: rgba(243,230,200,.55); }
.ledger-grid span { font-family: var(--condensed); color: var(--rust); letter-spacing: .18em; }
.ledger-grid h3 { margin: 12px 0; color: var(--deep-burgundy); }
.ledger-grid p { font-size: 18px; }
.final-stamp { position: absolute; right: 28px; bottom: 20px; font-size: clamp(38px, 6vw, 80px); color: rgba(182,74,50,.8); opacity: 0; }

.reveal { opacity: .72; transition: opacity .8s ease; }
.reveal.in-view { opacity: 1; }
.reveal .evidence-frame { transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .7s ease; }
.reveal:not(.in-view) .evidence-frame { opacity: .75; transform: translateY(24px) rotate(0deg); }

@media (max-width: 900px) {
  .panel { padding: 28px; min-height: auto; }
  .origin-sheet, .section-heading, .risk-copy, .ledger { width: 100%; }
  .origin-marginalia, .annotation-gutter, .root-illustration, .site-vine { display: none; }
  .stencil-tag { right: 18px; top: auto; bottom: 24px; }
  .specimen-field, .ledger-grid { grid-template-columns: 1fr; padding-right: 0; }
  .specimen-card.tall, .specimen-card.low { margin-top: 0; }
  .placard, .risk-board { position: relative; width: 100%; inset: auto; margin: 24px 0; }
  .alley-vines, .invasive-vine { position: relative; width: 100%; inset: auto; }
}