:root {
  /* Typography tokens for compliance: Source Serif 4** 4* for longer narrative prose. */
  --ember-parchment: #F2C98B;
  --burnt-umber: #3A1F16;
  --molten-copper: #B65A2A;
  --amber-glow: #FFB84D;
  --moss-green: #546B3E;
  --deep-plum: #211525;
  --quartz-milk: #F8E8C8;
  --facet-violet: #6B4C7A;
  --scroll-progress: 0;
  --chapter-focus: 0;
  --font-weight: 650;
  --crystal-angle: -13deg;
}

@keyframes amber-breathe {
  0%, 100% { opacity: .72; transform: scale(1); }
  50% { opacity: .92; transform: scale(1.035); }
}

* { box-sizing: border-box; }

html { background: #211525; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: #3A1F16;
  font-family: "Source Serif 4", Georgia, serif;
  background:
    radial-gradient(ellipse at 50% 8%, rgba(255, 184, 77, .28), transparent 42rem),
    linear-gradient(140deg, #211525 0%, #3A1F16 54%, #211525 100%);
}

.mineral-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.amber-orb {
  position: absolute;
  width: 58vw;
  height: 38vh;
  left: 21vw;
  top: 7vh;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,184,77,.55), rgba(242,201,139,.2) 42%, transparent 72%);
  filter: blur(34px);
  transform: translateY(calc(var(--scroll-progress) * 180px));
  animation: amber-breathe 8s ease-in-out infinite;
}

.facet {
  position: absolute;
  border: 1px solid rgba(248, 232, 200, .22);
  background: linear-gradient(135deg, rgba(248,232,200,.16), rgba(107,76,122,.24), rgba(255,184,77,.08));
  box-shadow: inset 0 0 44px rgba(255,184,77,.12), 0 28px 80px rgba(33,21,37,.42);
  clip-path: polygon(14% 0, 100% 18%, 78% 100%, 0 72%);
  backdrop-filter: blur(3px);
  transform: rotate(var(--crystal-angle));
}

.facet-one { width: 32vw; height: 68vh; left: -7vw; top: 20vh; }
.facet-two { width: 42vw; height: 52vh; right: -13vw; top: 92vh; transform: rotate(18deg); }
.facet-three { width: 28vw; height: 78vh; right: 9vw; top: 238vh; transform: rotate(-31deg); }

.fern-shadow {
  position: absolute;
  opacity: .18;
  filter: blur(1.5px);
  background: repeating-linear-gradient(78deg, transparent 0 14px, rgba(84,107,62,.72) 15px 18px, transparent 20px 34px);
  mask-image: radial-gradient(ellipse, #000 35%, transparent 70%);
}

.fern-shadow-a { width: 48vw; height: 76vh; left: -12vw; top: 85vh; transform: rotate(-23deg); }
.fern-shadow-b { width: 38vw; height: 68vh; right: -9vw; top: 305vh; transform: rotate(32deg); }

.drift-glyph {
  position: absolute;
  color: rgba(248,232,200,.18);
  font-family: "Recursive", ui-monospace, monospace;
  font-size: clamp(3rem, 8vw, 9rem);
  filter: blur(calc(10px - var(--chapter-focus) * 6px));
}

.glyph-a { top: 58vh; left: 12vw; }
.glyph-b { top: 164vh; right: 14vw; }
.glyph-c { top: 372vh; left: 7vw; }

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

.movement {
  min-height: 118vh;
  display: grid;
  place-items: center;
  padding: 8vh 5vw;
  position: relative;
}

.movement::before {
  content: "";
  position: absolute;
  inset: 10vh 8vw;
  background: linear-gradient(160deg, rgba(242,201,139,.95), rgba(248,232,200,.74) 48%, rgba(255,184,77,.5));
  clip-path: polygon(8% 0, 94% 5%, 100% 88%, 50% 100%, 0 92%);
  opacity: .72;
  filter: drop-shadow(0 32px 90px rgba(33,21,37,.54));
}

.cave-mouth::before { opacity: .24; filter: blur(8px); background: radial-gradient(ellipse, #F2C98B, rgba(255,184,77,.38), transparent 70%); }
.type-forest::before { background: linear-gradient(150deg, rgba(248,232,200,.85), rgba(242,201,139,.9), rgba(84,107,62,.24)); }
.crystal-proof::before { clip-path: polygon(0 12%, 76% 0, 100% 44%, 82% 100%, 13% 86%); }
.gentle-beast::before { background: linear-gradient(145deg, rgba(248,232,200,.8), rgba(107,76,122,.23), rgba(242,201,139,.85)); }
.quiet-theorem::before { opacity: .85; background: radial-gradient(circle at 50% 38%, rgba(255,184,77,.74), rgba(242,201,139,.9) 36%, rgba(33,21,37,.18) 100%); }

.manuscript-spine {
  position: relative;
  width: min(72vw, 760px);
  z-index: 2;
  padding: clamp(2rem, 5vw, 5rem);
  transform: translateY(calc((1 - var(--chapter-focus)) * 18px));
}

.narrow-spine { width: min(58vw, 610px); margin-left: -6vw; }
.proof-spine { width: min(78vw, 840px); margin-right: -4vw; }
.beast-spine { width: min(68vw, 720px); }
.closing-spine { text-align: center; width: min(62vw, 680px); }

.specimen-tag, .chapter-mark, .type-signature, .proof-lens code, .proof-lens span {
  font-family: "Recursive", ui-monospace, monospace;
  font-variation-settings: "MONO" .85, "CASL" .25;
  letter-spacing: .06em;
}

.specimen-tag, .chapter-mark {
  display: inline-block;
  color: #546B3E;
  background: rgba(248,232,200,.22);
  border: 1px solid rgba(84,107,62,.36);
  padding: .55rem .85rem;
  transform: rotate(-2deg);
  box-shadow: 0 8px 25px rgba(33,21,37,.18);
}

.wordmark {
  margin: .6rem 0 1.5rem;
  color: #F8E8C8;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(4rem, 14vw, 13rem);
  font-weight: var(--font-weight);
  font-variation-settings: "SOFT" 85, "WONK" 1, "opsz" 144;
  line-height: .82;
  letter-spacing: -.08em;
  text-shadow: 0 0 28px rgba(255,184,77,.42), 0 10px 0 rgba(58,31,22,.48);
  filter: blur(calc(18px * (1 - var(--intro-focus, 0))));
  clip-path: inset(0 calc(100% - (var(--intro-focus, 0) * 100%)) 0 0);
}

.chapter-title {
  margin: 1rem 0 1.4rem;
  color: #3A1F16;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2.4rem, 6vw, 5.8rem);
  font-weight: var(--font-weight);
  font-variation-settings: "SOFT" 62, "WONK" .7, "opsz" 80;
  line-height: .94;
  letter-spacing: -.045em;
}

.field-note, .prose, .final-sentence {
  color: #3A1F16;
  font-size: clamp(1.25rem, 2.2vw, 1.9rem);
  line-height: 1.55;
  max-width: 38rem;
}

.soft { color: rgba(58,31,22,.75); }

.reveal-text {
  opacity: .36;
  filter: blur(16px);
  transform: translateY(22px) scale(.985);
  transition: opacity 900ms ease, filter 900ms ease, transform 900ms ease;
}

.reveal-text.is-focused {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}

.margin-botany {
  position: absolute;
  left: -8rem;
  top: 42%;
  color: #546B3E;
  font-size: .95rem;
  line-height: 1.7;
  filter: blur(5px);
  transform: rotate(-8deg);
  transition: filter 500ms ease, transform 500ms ease, color 500ms ease;
}

.focusable-glyph.glyph-focused, .margin-botany:hover {
  filter: blur(0);
  transform: rotate(0deg) scale(1.05);
  color: #B65A2A;
}

.type-signature {
  display: inline-block;
  margin: 1rem 0;
  padding: .85rem 1rem;
  color: #F8E8C8;
  background: linear-gradient(100deg, rgba(84,107,62,.82), rgba(58,31,22,.76));
  box-shadow: -28px 0 0 rgba(84,107,62,.16);
}

.proof-lens {
  position: relative;
  margin: 2.5rem 0;
  padding: 2rem;
  color: #F8E8C8;
  background: linear-gradient(135deg, rgba(33,21,37,.8), rgba(107,76,122,.46), rgba(182,90,42,.52));
  clip-path: polygon(7% 0, 100% 18%, 86% 100%, 0 80%);
  border: 1px solid rgba(255,184,77,.35);
  transform: rotate(-3deg);
  overflow: hidden;
}

.proof-lens::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg, transparent, rgba(255,184,77,.28), transparent);
  transform: translateX(calc(-55% + var(--scroll-progress) * 130%));
}

.proof-lens code { display: block; font-size: clamp(1rem, 2vw, 1.35rem); margin-bottom: 1rem; }
.proof-lens span { color: #F2C98B; font-size: .9rem; opacity: .86; }

.fracture-row { display: flex; gap: .7rem; margin-top: 2rem; transform: rotate(-4deg); }
.fracture-row i { display: block; height: 3px; flex: 1; background: #B65A2A; box-shadow: 0 0 14px #FFB84D; }

.beast-figure {
  position: relative;
  width: min(82vw, 520px);
  height: 380px;
  margin: 2rem auto;
  transform: rotate(var(--beast-rotate, 0deg));
  transition: transform 300ms ease-out;
}

.beast-core {
  position: absolute;
  inset: 12% 8% 8% 10%;
  background: radial-gradient(circle at 46% 35%, rgba(248,232,200,.9), rgba(84,107,62,.55) 36%, rgba(33,21,37,.72) 72%);
  clip-path: polygon(19% 30%, 48% 7%, 82% 20%, 94% 57%, 67% 85%, 25% 78%, 4% 53%);
  box-shadow: inset 0 0 50px rgba(255,184,77,.2), 0 28px 70px rgba(33,21,37,.45);
}

.beast-facet {
  position: absolute;
  display: grid;
  place-items: center;
  font-family: "Recursive", ui-monospace, monospace;
  color: #F8E8C8;
  background: rgba(107,76,122,.58);
  border: 1px solid rgba(248,232,200,.25);
  clip-path: polygon(50% 0, 100% 40%, 78% 100%, 14% 88%, 0 28%);
}

.beast-facet-a { width: 110px; height: 132px; left: 10%; top: 10%; }
.beast-facet-b { width: 150px; height: 100px; right: 7%; top: 30%; }
.beast-facet-c { width: 118px; height: 118px; left: 42%; bottom: 4%; }
.rib { position: absolute; height: 2px; width: 55%; background: rgba(84,107,62,.72); transform-origin: left center; left: 20%; top: 50%; }
.rib-a { transform: rotate(18deg); }
.rib-b { transform: rotate(-15deg); }
.rib-c { transform: rotate(42deg); width: 38%; }

.final-sigil {
  width: 190px;
  height: 190px;
  margin: 0 auto 2rem;
  display: grid;
  place-items: center;
  color: #3A1F16;
  font-family: "Fraunces", Georgia, serif;
  font-size: 7rem;
  font-weight: 900;
  background: radial-gradient(circle, #FFB84D, #F2C98B 52%, rgba(248,232,200,.38));
  clip-path: polygon(50% 0, 86% 17%, 100% 56%, 72% 100%, 27% 98%, 0 57%, 14% 17%);
  box-shadow: 0 0 55px rgba(255,184,77,.56), inset 0 0 28px rgba(58,31,22,.18);
  transform: rotate(calc(var(--scroll-progress) * 80deg));
}

.final-sentence { margin: 0 auto; font-size: clamp(1.5rem, 3vw, 2.4rem); }

@media (max-width: 760px) {
  .movement { padding-inline: 1rem; }
  .movement::before { inset: 8vh 1rem; }
  .manuscript-spine, .narrow-spine, .proof-spine, .beast-spine, .closing-spine { width: min(92vw, 640px); margin-left: 0; margin-right: 0; padding: 2rem 1.2rem; }
  .margin-botany { position: relative; left: auto; top: auto; display: block; margin: 1rem 0; }
  .wordmark { font-size: clamp(3.2rem, 18vw, 6rem); }
  .beast-figure { height: 300px; }
}