:root {
  /* Playfair Display (Google Fonts), Source Serif 4 (Google Fonts), with an Intersection Observer fallback in script.js. */
  --walnut: #2C1810;
  --bark: #8B7355;
  --linen: #FAF3E0;
  --parchment: #F5ECD0;
  --thorn: #B5443A;
  --leaf: #4A7C6F;
  --gold: #C9952D;
  --sepia: #6B5344;
  --display: "Playfair Display", Georgia, serif;
  --body: "Source Serif 4", Georgia, serif;
  --hand: "Caveat", cursive;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--walnut);
  background: var(--linen);
  font-family: var(--body);
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  line-height: 1.75;
  overflow-x: hidden;
}

.paper-grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(15deg, rgba(107, 83, 68, 0.04) 0, rgba(107, 83, 68, 0.04) 1px, transparent 1px, transparent 13px),
    repeating-linear-gradient(105deg, rgba(107, 83, 68, 0.025) 0, rgba(107, 83, 68, 0.025) 1px, transparent 1px, transparent 19px),
    #FAF3E0;
}

.specimen-atlas { position: relative; z-index: 1; }

.botanical-layer { z-index: 1; pointer-events: none; }
.content-layer { position: relative; z-index: 2; pointer-events: auto; }
.annotation-layer { position: relative; z-index: 3; pointer-events: none; }

.opening-specimen {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #FAF3E0;
}

.hero-plate {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0.76;
  filter: drop-shadow(0 22px 28px rgba(44, 24, 16, 0.10));
}

.hero-thorn,
.hero-shield {
  position: absolute;
  width: min(86vw, 980px);
  height: auto;
}

.hero-thorn {
  transform: translateX(-8vw) rotate(-7deg);
  stroke: #B5443A;
  animation: heroDraw 2.5s 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.hero-shield {
  transform: translateX(9vw) rotate(5deg) scale(0.78);
  stroke: #4A7C6F;
  animation: heroDraw 2s 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.line-drawing {
  fill: none;
  stroke: #6B5344;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.line-drawing path,
.line-drawing ellipse {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
}

.hero-title {
  text-align: center;
  opacity: 0;
  transform: translateY(14px);
  animation: titleArrive 1s 3.5s ease forwards;
}

.hero-title h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4rem, 10vw, 8rem);
  line-height: 0.9;
  letter-spacing: 0.04em;
  color: #2C1810;
  text-shadow: 0 10px 30px rgba(44, 24, 16, 0.12);
}

.hero-title p {
  margin: 1rem 0 0;
  font-family: var(--hand);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  color: #8B7355;
}

.scroll-note {
  position: absolute;
  right: 12vw;
  bottom: 10vh;
  font-family: var(--hand);
  color: #8B7355;
  font-size: 1.25rem;
  opacity: 0;
  animation: noteIn 1s 4.1s ease forwards;
}

.linen-section { background: #F5ECD0; }

.parable-scroll,
.roots-section {
  position: relative;
  min-height: 120vh;
  padding: 18vh 15vw;
  display: grid;
  place-items: center;
}

.reading-column {
  width: min(38em, 100%);
  margin: 0 auto;
  text-align: left;
}

.specimen-index,
.specimen-label {
  display: inline-block;
  font-family: var(--hand);
  color: #8B7355;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.45rem 0.7rem;
  border: 1px solid #8B7355;
  border-radius: 4px;
  background: rgba(250, 243, 224, 0.62);
  transform: rotate(-1.5deg);
}

h2,
h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.05;
  margin: 1.5rem 0 1.4rem;
  color: #2C1810;
}

h2 { font-size: clamp(2.5rem, 6vw, 5rem); max-width: 10em; }
h3 { font-size: clamp(2.2rem, 5vw, 4.2rem); }

p { margin: 0 0 1.35rem; }

.parable-line {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  font-size: clamp(1.2rem, 2.8vw, 1.55rem);
}

.parable-line.visible,
.reveal.visible .specimen-copy,
.reveal.visible .margin-note,
.reveal.visible .specimen-label { opacity: 1; transform: translateY(0) rotate(var(--label-rotation, 0deg)); }

mark {
  background: transparent;
  font-style: italic;
  padding: 0 0.1em;
}

.spear-word { color: #B5443A; }
.shield-word { color: #4A7C6F; }

.margin-note {
  position: absolute;
  top: 20vh;
  max-width: 10rem;
  font-family: var(--hand);
  color: #8B7355;
  font-size: 1.25rem;
  line-height: 1.15;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s 1.2s ease, transform 0.8s 1.2s ease;
}

.parable-scroll .margin-note { left: 7vw; position: sticky; float: left; }

.garden-section {
  background: #FAF3E0;
  padding: 10vh 0 4vh;
}

.specimen {
  position: relative;
  min-height: 105vh;
  padding: 12vh 15vw;
  display: grid;
  grid-template-columns: minmax(280px, 0.92fr) minmax(320px, 0.72fr);
  align-items: center;
  gap: 6vw;
}

.specimen.reverse { grid-template-columns: minmax(320px, 0.72fr) minmax(280px, 0.92fr); }
.specimen.reverse .specimen-art { grid-column: 2; grid-row: 1; }
.specimen.reverse .specimen-copy { grid-column: 1; grid-row: 1; }

.specimen:nth-child(even) { background: #F5ECD0; }

.specimen::before {
  content: "✦";
  position: absolute;
  top: 8vh;
  left: 50%;
  color: #C9952D;
  font-size: 1rem;
  letter-spacing: 0.4rem;
}

.specimen-art {
  position: relative;
  opacity: 0.35;
  transform: scale(1.04);
  filter: drop-shadow(0 28px 22px rgba(44, 24, 16, 0.08));
}

.specimen-art svg,
.root-illustration svg { width: 100%; height: auto; }

.specimen-copy {
  max-width: 32rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s 0.5s ease, transform 0.6s 0.5s ease;
}

.specimen-label {
  opacity: 0;
  --label-rotation: -1.5deg;
  transform: translateY(10px) rotate(-1.5deg);
  transition: opacity 0.8s 0.3s ease, transform 0.8s 0.3s ease;
}

.specimen .margin-note { right: 6vw; position: sticky; align-self: start; }
.specimen.reverse .margin-note { left: 6vw; right: auto; }

.draw-on-reveal path,
.draw-on-reveal ellipse {
  transition: stroke-dashoffset 2.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.visible .draw-on-reveal path,
.visible .draw-on-reveal ellipse,
.draw-on-reveal.visible path,
.draw-on-reveal.visible ellipse {
  stroke-dashoffset: 0;
}

[data-specimen="thorn"] .line-drawing { stroke: #B5443A; }
[data-specimen="petal"] .line-drawing { stroke: #4A7C6F; }
[data-specimen="seed"] .line-drawing { stroke: #C9952D; }
[data-specimen="remedy"] .line-drawing { stroke: #6B5344; }

.roots-section {
  min-height: 120vh;
  overflow: hidden;
}

.root-illustration {
  position: absolute;
  inset: 8vh 6vw auto;
  opacity: 0.32;
  filter: drop-shadow(0 20px 24px rgba(44, 24, 16, 0.08));
}

.roots-section .reading-column {
  margin-top: 28vh;
  background: rgba(245, 236, 208, 0.72);
  box-shadow: 0 24px 60px rgba(44, 24, 16, 0.08);
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid rgba(139, 115, 85, 0.38);
  border-radius: 4px;
}

.roots-section .margin-note { right: 8vw; }
.closing-line { font-style: italic; color: #6B5344; }

@keyframes heroDraw { to { stroke-dashoffset: 0; } }
@keyframes titleArrive { to { opacity: 1; transform: translateY(0); } }
@keyframes noteIn { to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1024px) {
  .parable-scroll,
  .roots-section { padding-left: 9vw; padding-right: 9vw; }
  .specimen { padding: 12vh 9vw; gap: 3vw; }
  .margin-note {
    position: relative !important;
    top: auto;
    left: auto !important;
    right: auto !important;
    max-width: 22rem;
    margin: 1rem 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(139, 115, 85, 0.55);
    border-radius: 4px;
    background: rgba(250, 243, 224, 0.65);
  }
}

@media (max-width: 767px) {
  .hero-thorn,
  .hero-shield { width: 118vw; }
  .scroll-note { right: auto; left: 9vw; }
  .parable-scroll,
  .roots-section { min-height: auto; padding: 14vh 7vw; }
  .specimen,
  .specimen.reverse {
    min-height: auto;
    padding: 12vh 7vw;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .specimen.reverse .specimen-art,
  .specimen.reverse .specimen-copy { grid-column: auto; grid-row: auto; }
  .specimen-art { width: 60%; align-self: center; order: 1; }
  .specimen-copy { order: 2; }
  .specimen .margin-note { order: 3; }
  .root-illustration { position: relative; inset: auto; width: 112%; margin-left: -6%; }
  .roots-section .reading-column { margin-top: 0; }
  h2 { max-width: none; }
}