:root {
  /* Scroll-Driven Fade Reveals Interactions:** Interactions:* Interactions: Intersection Observer with threshold 0.15. When a section enters the viewport. */
  --void-black: #0d0b07;
  --parchment-ivory: #e8dcc8;
  --burnished-gold: #c9a84c;
  --tarnished-gold: #8b7332;
  --oxblood: #5c1a1a;
  --lamplight-amber: #d4a04a;
  --shadow-brown: #2a2319;
  --manuscript-cream: #171410;
  --ink-brown: #1a1710;
  --display: "Libre Baskerville", Georgia, serif;
  --body: "Cormorant Garamond", Garamond, serif;
  --smallcaps: "Cormorant SC", serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--parchment-ivory);
  background-color: var(--void-black);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(212, 160, 74, 0.035), transparent 28rem),
    radial-gradient(circle at 84% 64%, rgba(92, 26, 26, 0.10), transparent 34rem),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='.20 0 0 0 0.77 0 .16 0 0 0.55 0 0 .08 0 0.25 0 0 0 .28 0'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  font-family: var(--body);
  font-size: clamp(1.05rem, 1.2vw, 1.2rem);
  line-height: 1.78;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(13, 11, 7, 0.92), transparent 22%, transparent 78%, rgba(13, 11, 7, 0.92));
  z-index: 0;
}

.codex { position: relative; z-index: 2; }

.lamplight {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background: radial-gradient(circle 200px at var(--lamp-x, 50%) var(--lamp-y, 50%), rgba(212, 160, 74, 0.04) 0%, transparent 100%);
  transition: opacity 500ms ease;
}

.lamplight.is-lit { opacity: 1; }

.frontispiece {
  min-height: 100vh;
  width: 100vw;
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  background-color: var(--void-black);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23grain)' opacity='.16'/%3E%3C/svg%3E");
}

.frontispiece__inner { text-align: center; padding: 2rem; }

.frontispiece h1 {
  font-family: var(--display);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--parchment-ivory);
  margin: 1.618rem 0;
  opacity: 0;
  animation: revealTitle 1s ease-out forwards;
}

.gold-rule {
  width: 120px;
  height: 1px;
  background: rgba(201, 168, 76, 0.6);
  margin: 0 auto;
}

.frontispiece .gold-rule {
  transform: scaleX(0);
  opacity: 0;
  animation: revealRule 800ms ease-out 600ms forwards;
}

.epithet {
  margin: 1.618rem 0 0;
  font-family: var(--smallcaps);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  color: var(--tarnished-gold);
  opacity: 0;
  animation: revealEpithet 800ms ease-out 1s forwards;
}

.scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--tarnished-gold);
  font-size: 1.6rem;
  opacity: 0.5;
  animation: pulseCue 3s ease-in-out infinite;
}

.dedication, .chapter, .colophon, .ornament-rule, .quill {
  width: min(720px, calc(100vw - 48px));
  margin-left: auto;
  margin-right: auto;
}

.dedication { padding: 8.472rem 0 6.854rem; max-width: 540px; }

.engraved-frame {
  position: relative;
  padding: 2.618rem 3rem;
  border: 1px solid rgba(201, 168, 76, 0.4);
  outline: 1px solid rgba(201, 168, 76, 0.28);
  outline-offset: -6px;
  background: rgba(23, 20, 16, 0.42);
}

.dedication__text {
  font-family: var(--body);
  font-style: italic;
  font-weight: 300;
  color: rgba(232, 220, 200, 0.92);
  text-align: center;
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  line-height: 1.55;
}

.dedication__text span {
  display: block;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 800ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 800ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.dedication.is-visible .dedication__text span { opacity: 1; transform: translateY(0); }
.dedication.is-visible .dedication__text span:nth-child(2) { transition-delay: 200ms; }
.dedication.is-visible .dedication__text span:nth-child(3) { transition-delay: 400ms; }

.bracket {
  position: absolute;
  top: 50%;
  width: 42px;
  height: 140px;
  transform: translateY(-50%);
  fill: none;
  stroke: rgba(201, 168, 76, 0.36);
  stroke-width: 1;
}

.bracket--left { left: 0.6rem; }
.bracket--right { right: 0.6rem; }

.chapters { padding-bottom: 4.236rem; }

.chapter {
  position: relative;
  padding: 5.236rem 0 2.618rem;
}

.chapter__header { margin-bottom: 2.618rem; }

.chapter__number {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1;
  color: rgba(201, 168, 76, 0.78);
  margin-bottom: 0.618rem;
}

.chapter h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--parchment-ivory);
}

.chapter h2::after {
  content: "";
  display: block;
  width: 88px;
  height: 1px;
  background: rgba(201, 168, 76, 0.55);
  margin-top: 1rem;
}

p { margin: 0 0 1.618rem; }

.dropcap::first-letter {
  float: left;
  font-family: var(--display);
  font-size: 4.4rem;
  line-height: 0.82;
  padding: 0.18rem 0.48rem 0 0;
  font-weight: 700;
  color: var(--burnished-gold);
}

.indent {
  padding-left: 3rem;
  color: rgba(232, 220, 200, 0.84);
  border-left: 1px solid rgba(139, 115, 50, 0.32);
}

blockquote {
  margin: 2.618rem 0;
  padding: 1.618rem 2rem;
  border: 1px solid rgba(201, 168, 76, 0.38);
  outline: 1px solid rgba(201, 168, 76, 0.22);
  outline-offset: -6px;
  background: rgba(26, 23, 16, 0.58);
}

blockquote p {
  margin: 0;
  font-style: italic;
  font-weight: 300;
  font-size: 1.25em;
  color: rgba(232, 220, 200, 0.92);
}

code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--ink-brown);
  color: rgba(232, 220, 200, 0.95);
  padding: 0 2px;
}

a {
  color: var(--burnished-gold);
  text-decoration: none;
  transition: color 300ms ease, text-decoration-color 300ms ease;
}

a:hover {
  color: var(--lamplight-amber);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--tarnished-gold);
}

.ornament-rule {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--burnished-gold);
  opacity: 0.8;
  padding: 2.618rem 0 0;
}

.ornament-rule::before, .ornament-rule::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(201, 168, 76, 0.6);
}

.ornament-rule span { font-size: 1.2rem; }

.quill { padding: 1.618rem 0; }
.quill svg { display: block; width: 100%; height: 90px; }
.quill path {
  fill: none;
  stroke: rgba(201, 168, 76, 0.3);
  stroke-width: 1;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.quill.is-visible path { stroke-dashoffset: 0; }

.marginalia {
  position: absolute;
  left: calc(100% + 4rem);
  top: 6rem;
  width: 210px;
  font-style: italic;
  font-weight: 300;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--tarnished-gold);
  opacity: 0.42;
  position: sticky;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
  transition: opacity 800ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 800ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

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

.colophon {
  position: relative;
  min-height: 64vh;
  display: grid;
  place-content: center;
  text-align: center;
  overflow: hidden;
  border-top: 1px solid rgba(42, 35, 25, 0.9);
}

.colophon__grain {
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23g)'/%3E%3C/svg%3E");
}

.colophon__domain, .colophon__date {
  position: relative;
  margin: 0;
  font-family: var(--smallcaps);
  letter-spacing: 0.14em;
  color: var(--tarnished-gold);
}

.colophon__domain { font-size: 0.95rem; }
.colophon .gold-rule { margin: 1.618rem auto; position: relative; }
.colophon__date { font-size: 0.85rem; }

@keyframes revealTitle { to { opacity: 1; } }
@keyframes revealRule { to { opacity: 1; transform: scaleX(1); } }
@keyframes revealEpithet { to { opacity: 1; } }
@keyframes pulseCue { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } }

@media (max-width: 1199px) {
  .marginalia {
    position: static;
    width: auto;
    margin: 0 0 1.618rem;
    padding: 0.85rem 0 0.85rem 1rem;
    border-left: 4px solid var(--burnished-gold);
    background: rgba(23, 20, 16, 0.36);
    opacity: 0.74;
  }
}

@media (max-width: 768px) {
  .frontispiece { min-height: 80vh; }
  .dedication, .chapter, .colophon, .ornament-rule, .quill { width: min(100vw - 48px, 720px); }
  .dedication { padding-top: 5.236rem; }
  .engraved-frame { padding: 2rem 1.5rem; }
  .bracket { display: none; }
  .chapter { padding-top: 4.236rem; }
  .chapter__number { display: inline-block; margin-bottom: 0.8rem; }
  .indent { padding-left: 1.25rem; }
  blockquote { padding: 1.5rem; }
}