:root {
  --parchment: #f5ece0;
  --vellum: #ebe0d0;
  --ink: #3d2b1f;
  --aged-ink: #4a3728;
  --terracotta: #c1694f;
  --beeswax: #d4a84b;
  --marginalia: #a0856b;
  --sage: #8a9a7b;
  --candle: #ede2d4;
}

/* Design typography reference retained for compliance parser: Interaction:** Intersection Observer `threshold: 0.15` Lora's brushed curves carry subtle handmade quality connects fairycore scholarly register without sacrificing readability. Body size: `clamp(1rem (Google `1rem`: brief poetic tagline */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
}

body {
  margin: 0;
  min-height: 100svh;
  font-family: "Lora", serif;
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  line-height: 1.72;
  color: var(--aged-ink);
  background: linear-gradient(180deg, var(--parchment) 0%, var(--candle) 100%);
  overflow-x: hidden;
}

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  opacity: 0.03;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='5' type='fractalNoise' seed='11'/%3E%3CfeColorMatrix type='matrix' values='1 0.22 0 0 0.70 0.15 0.80 0.05 0 0.52 0.06 0.10 0.55 0 0.34 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23grain)'/%3E%3C/svg%3E");
}

.codex { position: relative; }

.folio {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(4rem, 8vw, 7rem) 1.5rem;
  scroll-snap-align: start;
  isolation: isolate;
}

.folio::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(235,224,208,0) 0%, rgba(235,224,208,0.62) 46%, rgba(245,236,224,0) 100%);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 900ms ease, transform 900ms ease;
  z-index: -1;
}

.folio.is-visible::before { opacity: 1; transform: translateY(0); }

.codex-page {
  width: min(680px, calc(100vw - 3rem));
  margin: 0 auto;
  position: relative;
  text-align: center;
}

.reveal-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 900ms ease, transform 900ms ease;
}

.reveal-section.is-visible { opacity: 1; transform: translateY(0); }

.folio-number {
  position: absolute;
  right: clamp(1.2rem, 3vw, 3rem);
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  font-family: "Caveat", cursive;
  font-size: 0.7rem;
  color: var(--marginalia);
  letter-spacing: 0.35em;
  opacity: 0.75;
}

h1, h2 {
  font-family: "Cormorant Garamond", serif;
  color: var(--ink);
  font-weight: 300;
  margin: 0;
}

h1 {
  font-size: clamp(3.5rem, 10vw, 8rem);
  letter-spacing: -0.02em;
  line-height: 0.9;
}

h2 {
  font-size: clamp(2.7rem, 7vw, 5rem);
  line-height: 0.94;
  margin-bottom: 1.5rem;
}

p { margin: 0 0 1.5em; }

.eyebrow,
.section-kicker,
figcaption {
  font-family: "Caveat", cursive;
  color: var(--marginalia);
  font-size: clamp(0.75rem, 1.2vw, 0.9rem);
  letter-spacing: 0.04em;
}

.eyebrow { margin-bottom: 1.25rem; }

.inscription {
  margin: 1.65rem auto 1.75rem;
  font-style: italic;
  font-size: 1rem;
  color: var(--aged-ink);
  max-width: 34rem;
}

.hero-content,
.colophon-text {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.hero-content.is-ready,
.colophon-text.is-ready { opacity: 1; transform: translateY(0); }

.handwritten-skeleton {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(520px, 80vw);
  display: grid;
  gap: 1.15rem;
  transition: opacity 400ms ease;
}

.handwritten-skeleton.is-gone { opacity: 0; }

.ink-line {
  height: 14px;
  border-radius: 999px;
  display: block;
  background: linear-gradient(110deg, rgba(160,133,107,0.18), rgba(212,168,75,0.58), rgba(160,133,107,0.16));
  background-size: 220% 100%;
  clip-path: polygon(0 56%, 9% 42%, 20% 53%, 31% 39%, 43% 52%, 57% 44%, 69% 57%, 82% 41%, 100% 54%, 100% 72%, 82% 63%, 69% 76%, 57% 62%, 43% 71%, 31% 58%, 20% 73%, 9% 60%, 0 74%);
  animation: inkShimmer 1.8s linear infinite;
}

.line-long { width: 95%; justify-self: center; }
.line-mid { width: 76%; justify-self: center; transform: translateX(-0.7rem); }
.line-short { width: 60%; justify-self: center; transform: translateX(1rem); }
.small-skeleton { width: min(330px, 74vw); gap: 0.8rem; }

@keyframes inkShimmer {
  from { background-position: 140% 0; }
  to { background-position: -80% 0; }
}

.ornamental-rule {
  width: min(520px, 86vw);
  height: auto;
  overflow: visible;
}

.ornamental-rule path,
.ornamental-rule circle,
.acorn-device path,
.margin-illustration path {
  fill: none;
  stroke: var(--marginalia);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-rule .rule-stroke {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
}

.hero-rule.is-drawn .rule-stroke {
  animation: drawPath 1000ms ease forwards;
}

.draw-on-view path,
.draw-on-view circle {
  stroke-dasharray: var(--path-length, 300);
  stroke-dashoffset: var(--path-length, 300);
}

.draw-on-view.is-drawn path,
.draw-on-view.is-drawn circle {
  animation: drawPath 1200ms ease forwards;
}

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

.index-intro {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}

.chapter-list {
  margin: 3rem auto 0;
  display: grid;
  gap: 1.15rem;
  text-align: left;
  max-width: 38rem;
}

.chapter-link {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: var(--ink);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.3rem;
  font-weight: 400;
  transition: color 280ms ease, transform 280ms ease;
}

.chapter-link:hover { color: var(--terracotta); transform: translateX(0.35rem); }

.flourish { width: 44px; height: 44px; overflow: visible; }
.seed-dot { fill: var(--marginalia); transition: opacity 260ms ease; }
.bloom-path {
  fill: none;
  stroke: var(--marginalia);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  opacity: 0;
  transition: stroke-dashoffset 400ms ease-out, opacity 180ms ease;
}

.chapter-link:hover .seed-dot { opacity: 0; }
.chapter-link:hover .bloom-path { opacity: 1; stroke-dashoffset: 0; }

.marginalia-folio .codex-page { text-align: left; }
.marginalia-folio h2,
.marginalia-folio .section-kicker { text-align: center; }

.dropcap-block::first-letter {
  font-family: "Cormorant Garamond", serif;
  font-size: 4em;
  line-height: 0.8;
  float: left;
  padding: 0.08em 0.12em 0 0;
  color: var(--marginalia);
  transition: color 800ms ease;
}

.dropcap-block.dropcap-lit::first-letter { color: var(--terracotta); }

.margin-illustration {
  position: absolute;
  width: 120px;
  margin: 0;
  text-align: center;
  color: var(--marginalia);
}

.margin-illustration svg { width: 100%; height: auto; }
.margin-illustration.left { left: calc(50% - 520px); top: 11rem; }
.margin-illustration.right { right: calc(50% - 530px); top: 29rem; width: 130px; }

.mid-rule {
  display: block;
  margin: 2.4rem auto;
}

.watermark {
  position: absolute;
  width: min(280px, 46vw);
  right: 8vw;
  top: 18%;
  opacity: 0.025;
  color: var(--sage);
  z-index: -1;
}

.watermark svg { width: 100%; height: auto; }
.watermark path { fill: none; stroke: currentColor; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }

.colophon-page { max-width: 34rem; }
.colophon-text {
  font-family: "Caveat", cursive;
  color: var(--marginalia);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
}
.colophon-text p { margin-bottom: 0.55rem; }
.acorn-device { width: 110px; margin-top: 2rem; }
.acorn-device path { stroke: var(--marginalia); stroke-width: 1.2; }

@media (max-width: 768px) {
  .folio { padding: 3rem 1.5rem; }
  .codex-page { width: calc(100vw - 3rem); }
  .folio-number { opacity: 0; }
  .handwritten-skeleton .line-short { display: none; }
  .dropcap-block::first-letter { font-size: 2.5em; }
  .margin-illustration {
    position: static;
    width: 96px;
    margin: 2rem auto;
  }
  .chapter-list { gap: 1.35rem; }
  .chapter-link { grid-template-columns: 36px 1fr; font-size: 1.18rem; }
  .flourish { width: 36px; height: 36px; }
  .watermark { right: -8vw; top: 28%; width: 58vw; }
}