:root {
  --parchment: #E6D3AF;
  --foxed: #B4875A;
  --walnut: #2A1B12;
  --moss: #53613A;
  --blood: #8F2D1F;
  --brass: #C09A4A;
  --black: #11100D;
  --clay: #C7663E;
  --display: "Space Grotesk", Inter, system-ui, sans-serif;
  --body: "IBM Plex Sans", Inter, system-ui, sans-serif;
  --ornate: "Cormorant Garamond", Georgia, serif;
}

/* Typography compliance tokens from DESIGN.md: Sans** Regular Medium. keeps sans-grotesk seed practical while feeling editorial enough dense conceptual letters stamped delicate ornamental Grotesk** Bold SemiBold. tight */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--walnut);
  background:
    radial-gradient(circle at 18% 12%, rgba(83, 97, 58, 0.28), transparent 28rem),
    radial-gradient(circle at 82% 42%, rgba(143, 45, 31, 0.16), transparent 22rem),
    linear-gradient(110deg, #11100D 0%, #20160f 48%, #11100D 100%);
  font-family: var(--body);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .26;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(230, 211, 175, .35) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(180, 135, 90, .28) 0 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03), rgba(0,0,0,.04));
  background-size: 17px 19px, 23px 29px, 100% 100%;
  mix-blend-mode: overlay;
}

.dust-field { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.mote {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(230, 211, 175, .42);
  box-shadow: 0 0 10px rgba(230, 211, 175, .36);
  animation: drift var(--duration) linear infinite;
}

@keyframes drift {
  from { transform: translate3d(var(--x), 106vh, 0) rotate(0deg); }
  to { transform: translate3d(calc(var(--x) + var(--sway)), -12vh, 0) rotate(360deg); }
}

.chapter-tabs {
  position: fixed;
  z-index: 30;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.chapter-tabs a {
  width: 8.2rem;
  padding: .55rem .65rem .55rem .45rem;
  color: var(--parchment);
  text-decoration: none;
  font: 600 .68rem/1 var(--display);
  letter-spacing: .06em;
  text-transform: uppercase;
  background: linear-gradient(90deg, rgba(42, 27, 18, .92), rgba(83, 97, 58, .72));
  border-left: 3px solid var(--brass);
  box-shadow: 0 .7rem 1.5rem rgba(0,0,0,.35);
  clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%);
  opacity: .62;
  transition: transform .35s ease, opacity .35s ease, border-color .35s ease;
}

.chapter-tabs a span {
  font-family: var(--ornate);
  color: var(--brass);
  margin-right: .38rem;
  font-size: .9rem;
}

.chapter-tabs a.active,
.chapter-tabs a:hover {
  opacity: 1;
  transform: translateX(.45rem) rotate(-1.5deg);
  border-color: var(--blood);
}

.folio { position: relative; z-index: 10; }

.scene {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: 7rem 7vw 7rem 11rem;
  isolation: isolate;
}

.parchment,
.paper-card,
.proof-panel,
.broadside,
.taxonomy-title,
.cabinet-heading,
.side-scrap,
.flip-face {
  background:
    radial-gradient(circle at 18% 22%, rgba(199, 102, 62, .18), transparent 13rem),
    radial-gradient(circle at 82% 70%, rgba(180, 135, 90, .3), transparent 16rem),
    linear-gradient(115deg, rgba(230, 211, 175, .98), rgba(218, 190, 143, .95));
  border: 1px solid rgba(42, 27, 18, .42);
  box-shadow: 0 1.4rem 3rem rgba(0,0,0,.38), inset 0 0 0 .55rem rgba(230, 211, 175, .22), inset 0 0 0 .7rem rgba(42, 27, 18, .16);
}

.lifted { transition: transform .22s ease-out; transform: translate3d(0, var(--lift, 0px), 0) rotate(var(--tilt, -1deg)); }

.hero-sheet {
  width: min(70rem, 78vw);
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(2rem, 5vw, 5rem);
  position: relative;
  clip-path: polygon(1% 0, 97% 1%, 100% 8%, 98% 96%, 89% 100%, 2% 98%, 0 83%, 1% 12%);
}

.hero-sheet::before,
.broadside::before,
.evidence-table::before {
  content: "";
  position: absolute;
  inset: 1.2rem;
  border: 2px double rgba(42, 27, 18, .55);
  border-radius: 42% 58% 48% 52% / 8% 9% 7% 8%;
  pointer-events: none;
}

.crest {
  position: absolute;
  inset: 7% 12% auto auto;
  width: 18rem;
  height: 18rem;
  border: 2px solid rgba(192, 154, 74, .65);
  border-radius: 50%;
  opacity: .72;
  animation: crestWake 1.7s ease both;
}

.crest::before,
.crest::after {
  content: "";
  position: absolute;
  inset: 1.2rem;
  border: 1px dashed rgba(42, 27, 18, .38);
  border-radius: 50%;
}

.crest::after { inset: 3.6rem; border-style: double; }

.crest-piece {
  position: absolute;
  font-family: var(--ornate);
  font-size: 3.2rem;
  color: var(--moss);
  animation: loosen 6s ease-in-out infinite alternate;
}
.piece-a { top: -1rem; left: 43%; --dx: -12px; --dy: -28px; }
.piece-b { top: 42%; right: -1rem; --dx: 22px; --dy: -8px; }
.piece-c { bottom: -1rem; left: 46%; --dx: 11px; --dy: 26px; }
.piece-d { top: 42%; left: -1rem; --dx: -24px; --dy: 8px; }

@keyframes crestWake { from { opacity: 0; transform: scale(.86) rotate(8deg); } to { opacity: .72; transform: scale(1) rotate(0); } }
@keyframes loosen { to { transform: translate(var(--dx), var(--dy)) rotate(14deg); opacity: .46; } }

.folio-mark,
.stamp,
.red-note,
.final-stamp {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .16em;
}

.folio-mark { color: var(--moss); font-size: .85rem; margin: 0 0 1rem; }
.hero-sheet h1 {
  margin: 0;
  max-width: 10ch;
  color: var(--black);
  font: 700 clamp(4.2rem, 12vw, 11.5rem)/.78 var(--display);
  letter-spacing: -.09em;
  text-shadow: .05em .05em 0 rgba(143,45,31,.16);
  transform: rotate(-2deg);
}

.red-note {
  align-self: flex-end;
  margin: 1.3rem 8% 0 0;
  color: var(--blood);
  font-size: clamp(.95rem, 1.6vw, 1.35rem);
  transform: rotate(-7deg);
  border-top: 2px solid var(--blood);
  border-bottom: 2px solid var(--blood);
  padding: .35rem .55rem;
}

.manifesto-copy {
  max-width: 39rem;
  margin: 2rem 0 0;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.62;
  color: rgba(42, 27, 18, .9);
}

.wax-seal {
  position: absolute;
  right: 10%;
  bottom: 10%;
  width: 6rem;
  height: 6rem;
  border-radius: 46% 54% 48% 52%;
  display: grid;
  place-items: center;
  color: var(--parchment);
  background: radial-gradient(circle at 40% 35%, #C7663E, #8F2D1F 62%, #5d1c14);
  box-shadow: inset -.5rem -.5rem 1rem rgba(42,27,18,.4), 0 .7rem 1rem rgba(0,0,0,.25);
  transform: rotate(12deg);
}
.wax-seal::after { content: ""; position: absolute; width: 120%; height: 3px; background: rgba(42,27,18,.52); transform: rotate(-35deg); }
.wax-seal span { font-family: var(--ornate); font-size: 1.45rem; z-index: 1; }

.floating-label,
.ornament {
  position: absolute;
  color: var(--parchment);
  z-index: -1;
  filter: drop-shadow(0 1rem 1rem rgba(0,0,0,.4));
}
.floating-label { padding: .55rem 1rem; border: 1px solid var(--brass); font: 700 .85rem/1 var(--display); letter-spacing: .14em; }
.assumed { top: 24%; left: 16%; transform: rotate(14deg); }
.disputed { bottom: 18%; right: 11%; color: var(--blood); transform: rotate(-11deg); }
.ornament { font: 600 5rem/1 var(--ornate); color: rgba(192,154,74,.75); animation: slowSpin 18s linear infinite; }
.shard-one { top: 12%; right: 18%; }
.shard-two { bottom: 11%; left: 24%; animation-direction: reverse; }
@keyframes slowSpin { to { transform: rotate(360deg); } }

.route {
  position: absolute;
  width: 62vw;
  height: 62vh;
  border: 2px solid transparent;
  border-top-color: rgba(192,154,74,.35);
  border-right-color: rgba(192,154,74,.2);
  border-radius: 45% 55% 60% 40%;
  z-index: -2;
  transform: rotate(-20deg);
}
.route::after { content: "❦"; position: absolute; right: 8%; top: 2%; color: rgba(230,211,175,.45); font: 4rem var(--ornate); }
.route-two { transform: rotate(24deg); width: 70vw; height: 48vh; }
.route-three { transform: rotate(-8deg); width: 72vw; height: 70vh; }

.evidence-scene { place-items: start center; }
.evidence-table {
  position: relative;
  width: min(48rem, 70vw);
  margin-top: 7vh;
  padding: 4.2rem;
  transform: rotate(3deg);
}

.chapter-number {
  font-family: var(--ornate);
  color: var(--blood);
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: .8;
}

h2 {
  margin: .1rem 0 1rem;
  color: var(--black);
  font: 700 clamp(2.7rem, 6vw, 6rem)/.86 var(--display);
  letter-spacing: -.065em;
}

.evidence-table p,
.taxonomy-title p,
.cabinet-heading p,
.broadside p { font-size: 1.08rem; line-height: 1.68; }

.ledger-lines {
  margin-top: 2rem;
  display: grid;
  gap: .65rem;
  color: var(--walnut);
  font-weight: 500;
}
.ledger-lines span { border-bottom: 1px dashed rgba(42,27,18,.35); padding-bottom: .45rem; }

.side-scrap {
  position: absolute;
  padding: 1rem 1.2rem;
  max-width: 13rem;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.scrap-left { left: 18%; bottom: 18%; transform: rotate(-12deg); }
.scrap-right { right: 12%; top: 22%; transform: rotate(9deg); }
.ink-blot {
  position: absolute;
  width: 16rem;
  height: 12rem;
  right: 24%;
  bottom: 14%;
  background: radial-gradient(circle at 45% 50%, rgba(17,16,13,.76), rgba(42,27,18,.55) 38%, transparent 66%);
  border-radius: 58% 42% 47% 53%;
  filter: blur(.5px);
  opacity: .78;
}

.taxonomy-scene { grid-template-columns: minmax(18rem, 35rem) minmax(18rem, 32rem); gap: 5vw; }
.taxonomy-title { padding: 3rem; transform: rotate(-2deg); }
.taxonomy-cloud { position: relative; width: min(34rem, 90vw); height: 34rem; }
.taxon {
  position: absolute;
  width: 11rem;
  height: 8rem;
  border: 1px solid rgba(42,27,18,.55);
  color: var(--walnut);
  background: linear-gradient(135deg, var(--parchment), #d0ab72);
  box-shadow: 0 1rem 1.8rem rgba(0,0,0,.28);
  font: 700 1rem/1.1 var(--display);
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .35s ease, background .35s ease, color .35s ease;
}
.taxon em { font: 600 italic 1.1rem/1.1 var(--ornate); text-transform: none; color: var(--blood); }
.taxon:nth-child(1) { top: 0; left: 8rem; transform: rotate(-6deg); }
.taxon:nth-child(2) { top: 9rem; right: 0; transform: rotate(9deg); }
.taxon:nth-child(3) { bottom: 2rem; left: 10rem; transform: rotate(-12deg); }
.taxon:nth-child(4) { top: 12rem; left: 0; transform: rotate(5deg); }
.taxon.active,
.taxon:hover { background: linear-gradient(135deg, var(--blood), var(--clay)); color: var(--parchment); transform: rotate(0) scale(1.08); }
.taxon.active em,
.taxon:hover em { color: var(--parchment); }

.proof-panel {
  position: absolute;
  right: 12%;
  bottom: 8%;
  width: min(25rem, 35vw);
  padding: 2rem;
  transform: rotate(4deg);
}
.stamp { display: inline-block; color: var(--blood); border: 3px solid var(--blood); padding: .35rem .6rem; transform: rotate(-6deg); }
.proof-panel h3 { font: 700 2rem/.9 var(--display); margin: 1rem 0; letter-spacing: -.04em; }

.cabinet-scene { align-content: center; gap: 3rem; }
.cabinet-heading { width: min(62rem, 82vw); padding: 2.6rem 3rem; transform: rotate(1deg); }
.flip-cabinet { display: flex; gap: clamp(1rem, 3vw, 2.4rem); flex-wrap: wrap; justify-content: center; perspective: 1200px; }
.flip-card { width: 19rem; height: 25rem; perspective: 1000px; outline: none; cursor: pointer; }
.flip-inner { position: relative; width: 100%; height: 100%; transition: transform .8s cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d; }
.flip-card:hover .flip-inner,
.flip-card.flipped .flip-inner,
.flip-card:focus .flip-inner { transform: rotateY(180deg) rotateZ(-1.5deg); }
.flip-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  backface-visibility: hidden;
  clip-path: polygon(3% 0, 100% 2%, 96% 100%, 0 97%);
}
.flip-face::before { content: ""; position: absolute; inset: 1rem; border: 2px double rgba(42,27,18,.45); pointer-events: none; }
.flip-face h3 { font: 700 2.15rem/.9 var(--display); letter-spacing: -.05em; margin: 1rem 0; }
.front { text-align: center; }
.back {
  transform: rotateY(180deg);
  color: var(--parchment);
  background:
    radial-gradient(circle at 25% 20%, rgba(230,211,175,.16), transparent 10rem),
    linear-gradient(135deg, var(--walnut), var(--blood));
}
.back b { color: var(--brass); letter-spacing: .14em; font-family: var(--display); }
.back::after { content: ""; position: absolute; left: 12%; right: 12%; top: 52%; height: 5px; background: var(--clay); transform: rotate(-14deg); box-shadow: 0 1.2rem 0 rgba(199,102,62,.7); }
.pin { position: absolute; top: 1rem; left: 50%; width: .9rem; height: .9rem; border-radius: 50%; background: var(--brass); box-shadow: 0 .2rem .3rem rgba(0,0,0,.3); }

.final-scene { overflow: hidden; }
.broadside {
  position: relative;
  width: min(64rem, 78vw);
  padding: clamp(2.6rem, 6vw, 6rem);
  transform: rotate(-1.5deg);
  clip-path: polygon(0 3%, 7% 0, 18% 2%, 33% 0, 51% 2%, 70% 0, 87% 3%, 100% 0, 98% 100%, 82% 96%, 63% 100%, 42% 97%, 20% 100%, 2% 96%);
}
.final-stamp { color: var(--parchment); background: var(--blood); display: inline-block; padding: .55rem .9rem; transform: rotate(8deg); }
.closing-line { font: 700 clamp(1.4rem, 3vw, 2.8rem)/1 var(--display); color: var(--moss); letter-spacing: -.04em; }
.orbit { position: absolute; color: rgba(192,154,74,.78); animation: orbit 16s linear infinite; font-family: var(--ornate); }
.orbit-a { font-size: 5rem; top: 18%; left: 18%; }
.orbit-b { font-size: 4rem; right: 16%; bottom: 18%; animation-duration: 21s; animation-direction: reverse; }
.orbit-c { font: 700 1rem/1 var(--display); color: var(--blood); top: 20%; right: 24%; animation-duration: 26s; }
@keyframes orbit { from { transform: rotate(0deg) translateX(2rem) rotate(0deg); } to { transform: rotate(360deg) translateX(2rem) rotate(-360deg); } }

.in-view .paper-card,
.in-view .taxonomy-title,
.in-view .cabinet-heading,
.in-view .broadside { animation: paperRise .9s ease both; }
@keyframes paperRise { from { opacity: .4; transform: translateY(3rem) rotate(var(--start-rot, 0deg)); } }

@media (max-width: 880px) {
  .chapter-tabs { display: none; }
  .scene { padding: 5rem 1rem; }
  .hero-sheet, .evidence-table, .cabinet-heading, .broadside { width: 94vw; }
  .hero-sheet h1 { font-size: clamp(3.6rem, 17vw, 7rem); }
  .taxonomy-scene { grid-template-columns: 1fr; }
  .taxonomy-cloud { height: 28rem; transform: scale(.88); transform-origin: top center; }
  .proof-panel { position: relative; right: auto; bottom: auto; width: 90vw; }
  .side-scrap, .ink-blot { display: none; }
}