:root {
  /* Compliance token from DESIGN.md parser: Grotesk* Grotesk** */
  --burnt: #C7511F;
  --teal: #176B68;
  --espresso: #24140F;
  --chrome: #D8D2C4;
  --umber: #5A2B18;
  --cream: #FFF0D2;
  --magenta: #FF4FA3;
  --display: 'Bebas Neue', Impact, sans-serif;
  --serif: 'Libre Baskerville', Georgia, serif;
  --sans: 'Space Grotesk', Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--espresso);
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 79, 163, .28), transparent 22rem),
    radial-gradient(circle at 90% 30%, rgba(23, 107, 104, .28), transparent 24rem),
    linear-gradient(90deg, var(--espresso), var(--umber) 18%, var(--cream) 18.5%, var(--cream) 81.5%, var(--umber) 82%, var(--espresso));
  font-family: var(--serif);
  overflow-x: hidden;
}

body.ledger-open .hero-spine .vertical-spine { letter-spacing: .02em; transform: rotate(180deg) scaleX(1.08); }
body.ledger-open .crack-line { transform: scaleY(1); opacity: 1; }
body.ledger-open .acetate-wipe { animation: acetateSlide 1.2s cubic-bezier(.18,.85,.2,1) both; }

.design-token { position: fixed; left: -999vw; top: -999vh; }

.origin-ledger { position: relative; }

.chapter {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: 7rem clamp(1rem, 4vw, 4rem);
  isolation: isolate;
  overflow: hidden;
}

.chapter::before {
  content: attr(data-chapter);
  position: absolute;
  left: clamp(.7rem, 3vw, 3rem);
  top: 2rem;
  font: 700 .86rem/1 var(--sans);
  letter-spacing: .35em;
  color: var(--chrome);
  background: linear-gradient(135deg, rgba(216, 210, 196, .8), rgba(255, 240, 210, .18));
  border: 1px solid rgba(216, 210, 196, .7);
  border-radius: 999px;
  padding: .65rem .8rem .65rem 1rem;
  box-shadow: 0 12px 28px rgba(36,20,15,.35);
  z-index: 4;
}

.hero-spine {
  background:
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(255,240,210,.04) 9px 11px),
    radial-gradient(circle at 76% 18%, rgba(255,79,163,.22), transparent 18rem),
    linear-gradient(100deg, var(--espresso), #120906 55%, var(--umber));
  color: var(--cream);
}

.paper-fibers, .page-chapter::after {
  position: absolute;
  inset: 0;
  content: "";
  background-image:
    linear-gradient(rgba(90,43,24,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,43,24,.05) 1px, transparent 1px);
  background-size: 37px 41px, 53px 47px;
  mix-blend-mode: multiply;
  pointer-events: none;
  opacity: .45;
}

.spine-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.vertical-spine {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(6rem, 18vw, 19rem);
  letter-spacing: -.04em;
  line-height: .78;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-transform: uppercase;
  text-shadow: 8px 0 0 var(--burnt), 14px 0 0 rgba(255,79,163,.55), -2px 0 0 var(--chrome);
  transition: transform 900ms cubic-bezier(.17,.84,.27,1), letter-spacing 900ms;
  filter: drop-shadow(0 1.2rem 2rem rgba(0,0,0,.55));
}

.crack-line {
  position: absolute;
  width: .32rem;
  height: 82vh;
  background: linear-gradient(var(--magenta), var(--cream), var(--burnt));
  transform: scaleY(.04);
  opacity: .35;
  transition: transform 900ms cubic-bezier(.17,.84,.27,1), opacity 900ms;
  box-shadow: 0 0 28px var(--magenta), 0 0 90px var(--burnt);
}

.reading-strip {
  width: min(690px, 86vw);
  position: relative;
  z-index: 3;
  padding: clamp(2rem, 5vw, 4rem);
  background: rgba(255, 240, 210, .93);
  border: 2px solid var(--chrome);
  box-shadow: 0 28px 80px rgba(36,20,15,.35), inset 0 0 0 10px rgba(199,81,31,.08);
}

.hero-copy { margin-top: 25vh; transform: translateX(10vw); }

.dark-strip {
  color: var(--cream);
  background: linear-gradient(135deg, rgba(36,20,15,.96), rgba(90,43,24,.92));
  border-color: var(--burnt);
  box-shadow: 0 32px 90px rgba(0,0,0,.45), inset 0 0 0 10px rgba(255,79,163,.08);
}

h2 {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-size: clamp(5rem, 14vw, 12rem);
  line-height: .78;
  letter-spacing: -.035em;
  color: var(--burnt);
  text-transform: uppercase;
  text-shadow: 3px 3px 0 var(--chrome), 7px 7px 0 rgba(255,79,163,.42);
}

.dark-strip h2 { color: var(--cream); text-shadow: 4px 4px 0 var(--burnt), 8px 8px 0 var(--magenta); }

p { font-size: clamp(1rem, 1.45vw, 1.25rem); line-height: 1.85; }
.lede { font-size: clamp(1.35rem, 2.3vw, 2.05rem); line-height: 1.35; font-style: italic; }
.folio { font: 700 .8rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--teal); }
.dark-strip .folio { color: var(--magenta); }

.chrome-index {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 20;
  display: flex;
  gap: .35rem;
  padding: .35rem;
  border: 1px solid rgba(216,210,196,.65);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(216,210,196,.76), rgba(255,240,210,.32));
  box-shadow: 0 16px 40px rgba(36,20,15,.32);
  backdrop-filter: blur(12px);
}

.chrome-index a {
  font: 700 .68rem/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--espresso);
  text-decoration: none;
  padding: .62rem .72rem;
  border-radius: 999px;
  transition: transform .25s ease, background .25s ease;
}

.chrome-index a:hover, .chrome-index a.active { transform: scale(1.12); background: var(--magenta); color: var(--cream); }

.where-charm {
  position: fixed;
  left: 1rem;
  top: 52vh;
  z-index: 21;
  width: 4.8rem;
  height: 4.8rem;
  display: grid;
  place-items: center;
  border-radius: 35% 65% 48% 52%;
  color: var(--cream);
  background: radial-gradient(circle at 30% 22%, var(--chrome), var(--magenta) 32%, var(--burnt) 68%);
  font: 700 .76rem/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 12px 34px rgba(36,20,15,.45), 0 0 0 4px rgba(255,240,210,.25);
  transform: translateY(var(--drift, 0px)) rotate(var(--spin, -9deg));
}

.stamp-button, .chrome-sticker, .revolt-script, .catalogue-card, .origin-list li, .library-pocket, .margin-note {
  cursor: pointer;
  transition: transform .28s cubic-bezier(.2,.9,.25,1.35), box-shadow .28s, filter .28s;
}

.hover-reveal:hover, .hover-reveal.revealed {
  transform: scale(1.12) rotate(-1deg);
  box-shadow: 0 22px 50px rgba(36,20,15,.35), 0 0 0 3px rgba(255,79,163,.38);
  filter: saturate(1.25);
  z-index: 10;
}

.hover-reveal::after {
  content: attr(data-reveal);
  position: absolute;
  left: 50%;
  bottom: calc(100% + .65rem);
  transform: translateX(-50%) scale(.85);
  min-width: 12rem;
  max-width: 18rem;
  padding: .7rem .85rem;
  color: var(--cream);
  background: var(--espresso);
  border: 1px solid var(--magenta);
  font: 700 .72rem/1.25 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s, transform .22s;
}

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

.stamp-button {
  position: relative;
  border: 2px solid var(--espresso);
  background: var(--burnt);
  color: var(--cream);
  font: 700 .9rem/1 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  padding: 1rem 1.2rem;
  box-shadow: 7px 7px 0 var(--magenta);
}

.margin-note {
  position: absolute;
  width: 12rem;
  left: -9rem;
  top: 2rem;
  padding: .75rem;
  background: var(--chrome);
  font: 700 .72rem/1.25 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.margin-system { position: absolute; left: clamp(1rem, 8vw, 8rem); top: 18vh; z-index: 4; }
.catalogue-card { position: relative; padding: 1rem; background: var(--cream); border: 2px solid var(--teal); font: 700 1rem/1 var(--sans); letter-spacing: .2em; }
.footnote-ladder { margin-top: 1rem; color: var(--magenta); font: 700 2rem/1.7 var(--display); }

.origin-list { list-style: none; margin: 2rem 0 0; padding: 0; }
.origin-list li { position: relative; margin: .75rem 0; padding: .8rem .85rem .8rem 2rem; background: rgba(216,210,196,.55); font-family: var(--sans); font-weight: 700; }
.origin-list li::before { content: "♥"; position: absolute; left: .65rem; color: var(--magenta); }

.page-chapter { background: linear-gradient(90deg, var(--umber), var(--cream) 16%, var(--cream) 84%, var(--umber)); }
.orange-turn { background: radial-gradient(circle at 15% 75%, rgba(255,79,163,.45), transparent 18rem), linear-gradient(120deg, var(--burnt), var(--umber)); }
.final-revolt { background: radial-gradient(circle at 70% 22%, rgba(199,81,31,.55), transparent 20rem), linear-gradient(135deg, #0d0504, var(--espresso)); }

.provenance-map, .tree-map {
  position: absolute;
  right: min(2vw, 2rem);
  width: min(44vw, 520px);
  max-height: 70vh;
  overflow: visible;
  z-index: 2;
  filter: drop-shadow(0 18px 25px rgba(36,20,15,.28));
}

.tree-map { left: 2vw; right: auto; width: min(35vw, 460px); }
.draw-path { fill: none; stroke: var(--teal); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; }
.draw-path.delay { stroke: var(--magenta); stroke-width: 4; }
.draw-path.slow { stroke: var(--burnt); stroke-width: 6; }
.chapter.in-view .draw-path { animation: drawLine 1.8s cubic-bezier(.22,.75,.18,1) forwards; }
.chapter.in-view .draw-path.delay { animation-delay: .28s; }
.chapter.in-view .draw-path.slow { animation-delay: .55s; }
.nodes circle { fill: var(--magenta); stroke: var(--chrome); stroke-width: 4; transform-origin: center; animation: gemPulse 1.8s ease-in-out infinite alternate; }

.stamp-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.chrome-sticker { position: relative; display: inline-block; padding: .95rem 1.2rem; border-radius: 1rem .4rem 1rem .4rem; background: linear-gradient(135deg, var(--chrome), var(--cream) 35%, var(--chrome)); color: var(--espresso); font: 700 1rem/1 var(--sans); letter-spacing: .22em; box-shadow: 6px 7px 0 rgba(255,79,163,.7); }
.chrome-sticker.magenta { background: var(--magenta); color: var(--cream); }
.chrome-sticker.teal { background: var(--teal); color: var(--cream); }

.barcode-fragment { position: absolute; bottom: 9vh; right: 9vw; display: flex; align-items: end; gap: .45rem; transform: rotate(-6deg); opacity: .75; }
.barcode-fragment i { display: block; width: .65rem; height: calc(4rem + var(--n, 1) * 1rem); background: var(--cream); box-shadow: 0 0 0 1px var(--espresso); }
.barcode-fragment i:nth-child(2n) { --n: 3; background: var(--magenta); }
.barcode-fragment i:nth-child(3n) { --n: 5; background: var(--teal); }

.library-pocket { position: relative; margin-top: 2rem; padding: 1.4rem; min-height: 8rem; background: linear-gradient(160deg, rgba(216,210,196,.95), rgba(255,240,210,.9)); border: 2px solid var(--umber); box-shadow: inset 0 -28px 0 rgba(199,81,31,.18); }
.library-pocket span, .library-pocket small { display: block; font: 700 .78rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.library-pocket strong { display: block; margin: .75rem 0; font: 400 3rem/1 var(--display); color: var(--burnt); }

.revolt-script { position: relative; display: inline-block; margin-top: 1.5rem; color: var(--magenta); font: 400 clamp(2.6rem, 7vw, 5.8rem)/.85 var(--display); text-shadow: 3px 3px 0 var(--chrome); }

.rhinestone-cluster, .sparkle-field { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.rhinestone-cluster span, .sparkle-field span { position: absolute; width: .75rem; height: .75rem; background: var(--chrome); transform: rotate(45deg); box-shadow: 0 0 16px var(--magenta), inset 0 0 4px #fff; animation: twinkle 1.4s infinite alternate; }
.rhinestone-cluster span:nth-child(1) { top: 18%; right: 18%; }
.rhinestone-cluster span:nth-child(2) { top: 42%; left: 14%; animation-delay: .3s; }
.rhinestone-cluster span:nth-child(3) { bottom: 17%; right: 31%; animation-delay: .7s; }
.rhinestone-cluster span:nth-child(4) { bottom: 32%; left: 24%; animation-delay: 1s; }
.sparkle-field span:nth-child(1) { top: 14%; left: 20%; }
.sparkle-field span:nth-child(2) { top: 28%; right: 18%; animation-delay: .2s; }
.sparkle-field span:nth-child(3) { top: 52%; left: 12%; animation-delay: .5s; }
.sparkle-field span:nth-child(4) { bottom: 18%; right: 30%; animation-delay: .8s; }
.sparkle-field span:nth-child(5) { bottom: 28%; left: 55%; animation-delay: 1.1s; }
.sparkle-field span:nth-child(6) { top: 70%; right: 9%; animation-delay: 1.35s; }

.acetate-wipe { position: fixed; inset: 0; z-index: 30; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(199,81,31,.82), rgba(255,79,163,.38), transparent); transform: translateX(-120%); }
.loupe { position: fixed; width: 11rem; height: 11rem; border: 1px solid rgba(216,210,196,.55); border-radius: 50%; pointer-events: none; z-index: 25; opacity: 0; transform: translate(-50%, -50%) scale(.75); background: radial-gradient(circle, rgba(255,240,210,.17), rgba(255,79,163,.08) 48%, transparent 70%); box-shadow: 0 0 35px rgba(255,79,163,.25), inset 0 0 18px rgba(216,210,196,.45); transition: opacity .2s, transform .2s; }
.loupe.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }

@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes gemPulse { to { transform: scale(1.35); filter: brightness(1.35); } }
@keyframes twinkle { from { transform: rotate(45deg) scale(.7); opacity: .45; } to { transform: rotate(45deg) scale(1.35); opacity: 1; } }
@keyframes acetateSlide { 0% { transform: translateX(-120%); } 45% { transform: translateX(0); } 100% { transform: translateX(120%); } }

@media (max-width: 860px) {
  .chrome-index { left: .5rem; right: .5rem; justify-content: center; flex-wrap: wrap; border-radius: 1.3rem; }
  .chrome-index a { padding: .5rem; }
  .hero-copy { transform: none; margin-top: 34vh; }
  .margin-note, .margin-system, .provenance-map, .tree-map { display: none; }
  .reading-strip { width: min(94vw, 690px); padding: 2rem 1.2rem; }
  .where-charm { width: 3.7rem; height: 3.7rem; font-size: .6rem; }
  h2 { font-size: clamp(4rem, 22vw, 7rem); }
}