:root {
  /* Design fidelity tokens: IntersectionObserver` when they enter the viewport. Each marginalia doodle takes 0.8s to draw. IntersectionObserver` with `threshold: 0.3` for triggering scroll animations. Lora italic at `1.2rem`; Playfair Display italic at massive scale (`clamp(8rem; Playfair Display. These rules appear after introductory paragraphs and before closing colophon-style text. Lora" (Google Fonts; Playfair Display" (Google Fonts. */
  --burgundy: #5B1A2E;
  --vellum: #F5EDE0;
  --sienna: #8A5A3A;
  --gold: #C9A84C;
  --shadow: #2A0F1A;
  --paper: #FDFAF5;
  --rose: #D4A0A0;
  --title-font: "Alfa Slab One", serif;
  --body-font: "Lora", serif;
  --hand-font: "Caveat", cursive;
  --mono-font: "Playfair Display", serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  opacity: 0.28;
  background-image: radial-gradient(var(--sienna) 0.6px, transparent 0.8px), radial-gradient(var(--gold) 0.45px, transparent 0.7px);
  background-position: 0 0, 13px 17px;
  background-size: 31px 31px, 43px 43px;
  mix-blend-mode: multiply;
}

.floating-monogram {
  position: fixed;
  top: 18px;
  left: 42px;
  z-index: 20;
  color: var(--gold);
  font-family: var(--mono-font);
  font-size: 2rem;
  font-style: italic;
  font-weight: 900;
  text-decoration: none;
  text-shadow: 0 1px 14px rgba(42, 15, 26, 0.35);
}

.spine-strip {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 19;
  width: 24px;
  background: linear-gradient(90deg, var(--shadow), var(--burgundy) 58%, #461324);
  border-right: 1px solid rgba(201, 168, 76, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 21px;
  box-shadow: inset -4px 0 9px rgba(0,0,0,0.26);
}

.spine-link {
  color: var(--vellum);
  font-family: var(--mono-font);
  font-style: italic;
  font-size: 0.75rem;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  opacity: 0.62;
  transform-origin: center;
  transition: color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.spine-link.active {
  color: var(--gold);
  opacity: 1;
  animation: breathe 4s ease-in-out infinite;
}

.volume {
  position: relative;
  min-height: 100vh;
  padding: clamp(80px, 12vh, 140px) 8vw clamp(80px, 12vh, 140px) 12vw;
  isolation: isolate;
}

.volume::after {
  content: "";
  position: absolute;
  inset: 34px 34px;
  border: 1px solid rgba(201, 168, 76, 0.18);
  pointer-events: none;
  z-index: -1;
}

.cream { background: var(--vellum); color: var(--burgundy); }
.dark, .claret { background: var(--shadow); color: var(--vellum); }
.rose { background: var(--rose); color: var(--burgundy); }

.title-page {
  display: grid;
  place-items: center;
  text-align: center;
  padding-left: 8vw;
}

.title-ornament {
  position: absolute;
  top: 13vh;
  color: var(--gold);
  font-family: var(--mono-font);
  font-size: clamp(2rem, 5vw, 4rem);
  opacity: 0.55;
}

.hero-mark {
  margin: 0;
  font-family: var(--mono-font);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(8rem, 20vw, 16rem);
  line-height: 0.78;
  color: transparent;
  background: linear-gradient(115deg, #8c7227 0%, var(--gold) 27%, #fff0b2 38%, transparent 50%, var(--gold) 64%, #8c7227 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shimmer 6s ease-in-out infinite;
  filter: drop-shadow(0 26px 36px rgba(0,0,0,0.34));
}

.hero-subtitle {
  margin: 34px 0 0;
  color: var(--vellum);
  font-size: 1.2rem;
  font-style: italic;
  opacity: 0;
  animation: fadeIn 1.1s ease 1.5s forwards;
}

.hero-colophon {
  max-width: 42ch;
  margin: 21px auto 0;
  color: var(--rose);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0;
  animation: fadeIn 1.1s ease 2.1s forwards;
}

.content-block {
  position: relative;
  max-width: 52ch;
  z-index: 2;
}

.content-block.narrow { max-width: 48ch; }
.content-block.shifted { margin-left: 4vw; max-width: 46ch; }
.content-block.compact { margin-left: 2vw; max-width: 40ch; }
.content-block.wide { max-width: 56ch; }

.kicker {
  margin: 0 0 13px;
  color: var(--sienna);
  font-family: var(--mono-font);
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.claret .kicker, .dark .kicker { color: var(--gold); }

.volume-title {
  margin: 0 0 34px;
  color: var(--burgundy);
  font-family: var(--title-font);
  font-size: clamp(2.8rem, 7vw, 6rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.05;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s ease;
}

.claret .volume-title, .dark .volume-title { color: var(--vellum); }

.volume.revealed .volume-title { clip-path: inset(0 0 0 0); }

p {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: 0.005em;
}

em { color: var(--sienna); }
.claret em { color: var(--rose); }

.ornamental-rule {
  width: min(360px, 70%);
  height: 34px;
  margin: 34px 0 21px;
  display: flex;
  align-items: center;
  color: var(--gold);
  font-family: var(--mono-font);
  font-size: 1.15rem;
}

.ornamental-rule::before, .ornamental-rule::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--gold);
}

.ornamental-rule span { padding: 0 13px; }

.footnote {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 1.35em;
  height: 1.35em;
  margin-left: 0.15em;
  border: 1px solid var(--sienna);
  border-radius: 50%;
  color: var(--sienna);
  font-family: var(--hand-font);
  font-size: 0.8em;
  cursor: default;
}

.footnote::after {
  content: attr(data-note);
  position: absolute;
  left: 50%;
  bottom: 150%;
  width: 150px;
  padding: 13px;
  border: 1px solid rgba(138, 90, 58, 0.35);
  background: var(--paper);
  color: var(--sienna);
  font-family: var(--hand-font);
  font-size: 1rem;
  line-height: 1.1;
  transform: translateX(-50%) scale(0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: 0 18px 34px rgba(42, 15, 26, 0.18);
}

.footnote:hover::after { opacity: 1; transform: translateX(-50%) scale(1); }

.marginalia {
  position: absolute;
  right: clamp(5vw, 10vw, 14vw);
  max-width: 16ch;
  color: var(--sienna);
  font-family: var(--hand-font);
  font-size: clamp(0.85rem, 1.5vw, 1.05rem);
  font-weight: 400;
  line-height: 1.05;
  transform: rotate(-1.5deg);
  z-index: 3;
}

.claret .marginalia { color: var(--rose); }
.note-one { top: 24vh; }
.note-two { top: 32vh; right: 8vw; transform: rotate(2deg); }
.note-three { top: 28vh; right: 12vw; transform: rotate(-3deg); }
.note-four { top: 22vh; right: 9vw; transform: rotate(2.5deg); }
.note-five { top: 30vh; right: 11vw; transform: rotate(-2deg); }
.note-six { top: 26vh; right: 10vw; }

.woodcut {
  position: absolute;
  right: clamp(8vw, 14vw, 18vw);
  bottom: clamp(70px, 12vh, 130px);
  width: min(320px, 34vw);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.88;
  z-index: 1;
}

.cream .woodcut, .rose .woodcut { color: var(--burgundy); }
.claret .woodcut { color: var(--vellum); opacity: 0.72; }

.vol-two .woodcut { right: 10vw; bottom: 10vh; }
.vol-three .woodcut { right: 12vw; bottom: 13vh; }
.vol-four .woodcut { right: 13vw; bottom: 9vh; }
.vol-five .woodcut { right: 10vw; bottom: 12vh; }
.vol-six .woodcut { right: 13vw; bottom: 11vh; }

.doodle {
  position: absolute;
  right: 7vw;
  bottom: 34vh;
  width: 120px;
  fill: none;
  stroke: var(--sienna);
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  transition: stroke-dashoffset 0.8s ease;
  z-index: 4;
}

.claret .doodle { stroke: var(--rose); }
.doodle.drawn { stroke-dashoffset: 0; }
.arrow { bottom: 22vh; right: 25vw; }
.bubble { bottom: 20vh; right: 8vw; }
.hand { bottom: 23vh; right: 25vw; }
.curl { bottom: 18vh; right: 7vw; }
.manicule { bottom: 21vh; right: 24vw; }

.tear {
  height: 58px;
  margin-top: -1px;
  margin-bottom: -57px;
  position: relative;
  z-index: 6;
  clip-path: polygon(0 0, 5% 14px, 10% 2px, 15% 17px, 20% 5px, 25% 22px, 30% 9px, 35% 19px, 40% 4px, 45% 24px, 50% 8px, 55% 20px, 60% 2px, 65% 16px, 70% 7px, 75% 24px, 80% 10px, 85% 18px, 90% 4px, 95% 15px, 100% 6px, 100% 58px, 0 58px);
}

.tear-dark { background: var(--shadow); }
.tear-cream { background: var(--vellum); }
.tear-rose { background: var(--rose); }

.printer-mark {
  margin-top: 34px;
  color: var(--sienna);
  font-style: italic;
}

.blink-eye { animation: wink 5s ease-in-out infinite; transform-origin: center; }

@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

@keyframes wink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.08); }
}

@media (max-width: 860px) {
  .volume { padding-left: 14vw; padding-right: 6vw; }
  .floating-monogram { left: 38px; }
  .woodcut { position: relative; right: auto; bottom: auto; width: min(300px, 80vw); margin-top: 34px; }
  .marginalia { position: relative; top: auto; right: auto; margin: 21px 0; display: block; }
  .doodle { display: none; }
  .content-block.shifted, .content-block.compact { margin-left: 0; }
}