:root {
  /* Design typography tokens: Inter* Inter** in 400/600 for marginal notes; IBM Plex Mono* Mono** for page coordinates. */
  --ink: #24133D;
  --cream: #FFF2D7;
  --peach: #FFB86C;
  --magenta: #F24B9B;
  --blue: #4C7DFF;
  --mint: #9CFFD9;
  --plum: #12091F;
  --display: 'Archivo Black', Impact, sans-serif;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--plum);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
}

.reading-lamp {
  position: fixed;
  inset: -20vh -10vw auto auto;
  width: 52vw;
  height: 52vw;
  background: radial-gradient(circle, rgba(255,184,108,.34), rgba(242,75,155,.12) 34%, transparent 67%);
  filter: blur(16px);
  pointer-events: none;
  z-index: 12;
  mix-blend-mode: screen;
  animation: lampPulse 9s ease-in-out infinite;
}

.chapter-index {
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font: 600 11px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.chapter-index a {
  color: var(--ink);
  background: rgba(255,242,215,.78);
  border: 1px solid rgba(36,19,61,.25);
  border-radius: 999px;
  padding: 8px 9px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(18,9,31,.14);
}

.book { position: relative; }
.spine {
  position: fixed;
  top: 0;
  left: 50%;
  width: 30px;
  height: 100vh;
  transform: translateX(-50%);
  z-index: 15;
  background: linear-gradient(90deg, rgba(36,19,61,.42), rgba(255,242,215,.55), rgba(156,255,217,.35), rgba(18,9,31,.58));
  box-shadow: -28px 0 48px rgba(36,19,61,.24), 28px 0 58px rgba(76,125,255,.28);
  transition: width .45s ease;
  overflow: hidden;
}
.spine.wide { width: 74px; }
.spine-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  white-space: nowrap;
  font: 600 10px/1 var(--mono);
  color: var(--plum);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.spine-flare {
  position: absolute;
  left: 50%;
  top: -18%;
  width: 160px;
  height: 160px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--peach), rgba(255,184,108,.42) 28%, rgba(242,75,155,.2) 48%, transparent 72%);
  filter: blur(10px);
  mix-blend-mode: screen;
  animation: slideSpine 8.5s ease-in-out infinite;
}

.spread {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  perspective: 1200px;
  isolation: isolate;
}
.pane {
  min-height: 100vh;
  padding: 8vh 7vw;
  position: relative;
  overflow: hidden;
}
.known-page {
  background: var(--cream);
  background-image: linear-gradient(100deg, rgba(36,19,61,.08), transparent 12%, transparent 82%, rgba(36,19,61,.16)), radial-gradient(circle at 16% 20%, rgba(255,184,108,.28), transparent 30%);
  border-right: 1px solid rgba(36,19,61,.16);
}
.known-page::after {
  content: '';
  position: absolute;
  right: -40px;
  top: 0;
  width: 90px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(36,19,61,.22), transparent);
  transform: skewX(-4deg);
}
.ruled { background-image: repeating-linear-gradient(0deg, transparent 0 42px, rgba(36,19,61,.08) 43px 44px), radial-gradient(circle at 20% 15%, rgba(255,184,108,.2), transparent 28%); }
.third-space {
  color: var(--cream);
  background: radial-gradient(circle at var(--mx,70%) var(--my,30%), var(--mint) 0%, var(--blue) 28%, var(--plum) 74%);
}
.third-space::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,242,215,.06), transparent 38%, rgba(242,75,155,.22) 66%, rgba(76,125,255,.2));
  mix-blend-mode: screen;
}

.chapter { font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--magenta); margin: 0 0 24px; }
h1, h2, h3 { margin: 0; }
h1 {
  font-family: var(--display);
  font-size: clamp(4.4rem, 12vw, 10.8rem);
  line-height: .78;
  letter-spacing: -.08em;
  max-width: 650px;
  color: var(--ink);
  text-shadow: 3px 3px 0 var(--peach), 7px 7px 0 rgba(242,75,155,.2);
}
h2 { font: 900 clamp(2.3rem, 5.5vw, 6rem)/.9 var(--display); letter-spacing: -.06em; max-width: 620px; }
h3 { font: 700 clamp(1.7rem, 3vw, 3rem)/1 var(--serif); }
.margin-note { max-width: 390px; margin-top: 32px; font: 500 1.1rem/1.55 var(--serif); }
.margin-note.small { font-size: 1rem; }
.serif-quote { max-width: 620px; font: 700 clamp(1.5rem, 2.5vw, 3rem)/1.1 var(--serif); color: var(--ink); }
.mono { font: 600 12px/1 var(--mono); letter-spacing: .12em; color: var(--mint); }

[data-tilt] { transform-style: preserve-3d; transition: transform .18s ease, box-shadow .18s ease; will-change: transform; }
.seal {
  position: absolute;
  right: 12%;
  bottom: 14%;
  width: 150px;
  height: 150px;
  border: 5px double var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--ink);
  transform: rotate(-13deg);
  font: 600 14px/1.1 var(--mono);
  text-transform: uppercase;
  background: rgba(255,184,108,.22);
}
.seal strong { font-family: var(--display); font-size: 28px; }
.marginal-arrow { position: absolute; left: 48%; top: 55%; width: 260px; fill: none; stroke: var(--magenta); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.portal-rings, .flare-ghost {
  position: absolute;
  width: 45vw;
  height: 45vw;
  right: -10vw;
  top: 9vh;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 22%, rgba(255,184,108,.36) 23% 24%, transparent 25% 38%, rgba(156,255,217,.32) 39% 40%, transparent 41% 58%, rgba(242,75,155,.25) 59% 60%, transparent 61%);
  mix-blend-mode: screen;
  animation: slowTurn 22s linear infinite;
}
.third-page, .theorem-card, .floating-card, .errata-slip, .choice, .punctuation-beast, .bookmark {
  box-shadow: 0 28px 70px rgba(18,9,31,.35);
}
.third-page {
  position: relative;
  z-index: 2;
  max-width: 480px;
  min-height: 540px;
  padding: 42px;
  background: linear-gradient(135deg, rgba(255,242,215,.97), rgba(255,184,108,.85) 45%, rgba(156,255,217,.92));
  color: var(--ink);
  clip-path: polygon(0 0, 88% 0, 100% 10%, 100% 100%, 0 100%);
  transform: rotateY(-18deg) rotateZ(-6deg) translateX(-30px);
  border-left: 10px solid var(--mint);
}
.hero-page { margin: 9vh 0 0 7vw; }
.folio { font: 900 120px/.75 var(--display); color: var(--magenta); opacity: .85; }
.third-page h2 { font-size: clamp(2rem, 4.2vw, 4.6rem); }
.third-page p { font: 500 1.1rem/1.5 var(--serif); }
.bookmark {
  position: absolute;
  right: 18%;
  bottom: 13%;
  padding: 28px 18px 46px;
  background: linear-gradient(var(--magenta), var(--peach));
  color: var(--cream);
  font: 600 12px/1.4 var(--mono);
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  transform: rotate(9deg);
}
.footstone { position: absolute; border-radius: 50%; display: grid; place-items: center; width: 48px; height: 48px; background: var(--cream); color: var(--ink); font: 900 24px/1 var(--display); animation: float 5s ease-in-out infinite; }
.footstone.one { left: 16%; bottom: 16%; }.footstone.two { left: 34%; bottom: 24%; animation-delay: -1s; }.footstone.three { left: 54%; bottom: 13%; background: var(--mint); animation-delay: -2s; }
.annotation-list { list-style: none; padding: 0; margin: 34px 0; font: 600 1rem/2 var(--sans); }
.annotation-list span { color: var(--magenta); font-family: var(--display); margin-right: 10px; }
.punctuation-beast { width: 170px; padding: 22px; background: var(--ink); color: var(--cream); border-radius: 28px 28px 8px 28px; font: 900 44px/1 var(--display); }
.punctuation-beast small { display: block; font: 600 10px/1.2 var(--mono); color: var(--mint); margin-top: 8px; }
.index-tabs { display: flex; gap: 12px; position: relative; z-index: 2; margin-left: 6vw; }
.index-tabs span { padding: 14px 18px; background: var(--cream); color: var(--ink); border-radius: 0 0 14px 14px; font: 900 12px/1 var(--mono); transform: rotate(var(--r, -5deg)); }.index-tabs span:nth-child(2){--r:3deg;background:var(--peach)}.index-tabs span:nth-child(3){--r:10deg;background:var(--mint)}
.theorem-card { position: relative; z-index: 2; max-width: 540px; margin: 18vh 0 0 7vw; padding: 38px; background: rgba(18,9,31,.72); border: 2px solid rgba(156,255,217,.5); border-radius: 26px; backdrop-filter: blur(8px); transform: rotate(-4deg); }
.ribbon-curve { position: absolute; right: 5vw; bottom: 8vh; width: 360px; fill: none; stroke: var(--peach); stroke-width: 22; stroke-linecap: round; filter: drop-shadow(0 20px 20px rgba(18,9,31,.35)); }
.choice-stack { display: grid; gap: 18px; margin-top: 42px; max-width: 430px; }
.choice { padding: 30px; border: 3px solid var(--ink); background: rgba(255,184,108,.28); transform: rotate(-2deg); }
.choice.no { background: rgba(242,75,155,.18); transform: rotate(2deg); }
.choice b { display: block; font: 900 64px/.8 var(--display); }.choice span { font: 600 14px/1 var(--mono); text-transform: uppercase; }
.huge-third { position: absolute; top: 8vh; left: 4vw; font: 900 clamp(5rem, 11vw, 13rem)/.8 var(--display); letter-spacing: -.09em; color: rgba(255,242,215,.14); writing-mode: vertical-rl; }
.side-page { margin: 22vh auto 0; min-height: 380px; transform: rotateY(-22deg) rotateZ(8deg); }
.flare-ghost { left: 10vw; right: auto; bottom: 8vh; top: auto; width: 28vw; height: 28vw; }
.errata-slip { margin-top: 48px; display: inline-block; padding: 22px 28px; background: var(--peach); border-left: 10px solid var(--magenta); font: 700 1.3rem/1.2 var(--serif); transform: rotate(-3deg); }
.floating-card { position: absolute; z-index: 2; max-width: 300px; padding: 28px; border-radius: 24px; color: var(--ink); font: 700 1.1rem/1.35 var(--serif); }
.floating-card span { display:block; margin-bottom: 12px; font: 600 11px/1 var(--mono); text-transform: uppercase; }
.floating-card.pink { background: var(--magenta); color: var(--cream); left: 12%; top: 14%; transform: rotate(-10deg); }
.floating-card.mint { background: var(--mint); right: 14%; top: 36%; transform: rotate(8deg); }
.floating-card.peach { background: var(--peach); left: 32%; bottom: 12%; transform: rotate(-3deg); }
.final-seal { display: inline-block; margin-top: 48px; padding: 22px 30px; border: 6px double var(--ink); border-radius: 50%; font: 900 1.6rem/1 var(--display); transform: rotate(-8deg); color: var(--magenta); }
.page-fan { position: relative; height: 560px; margin: 12vh auto 0; width: min(560px, 80%); }
.fan-page { position: absolute; bottom: 0; left: 50%; width: 260px; height: 460px; padding: 34px; transform-origin: 50% 100%; background: var(--cream); color: var(--ink); border-radius: 10px; font: 900 3rem/.9 var(--display); box-shadow: 0 30px 70px rgba(18,9,31,.45); }
.fan-page span { display: block; margin-top: 20px; font: 700 1.1rem/1.2 var(--serif); }
.p1 { transform: translateX(-50%) rotate(-24deg); background: #FFF2D7; }.p2 { transform: translateX(-50%) rotate(0deg); background: #FFB86C; }.p3 { transform: translateX(-50%) rotate(25deg); background: linear-gradient(135deg, #9CFFD9, #FFF2D7 55%, #F24B9B); box-shadow: 0 0 40px rgba(156,255,217,.72), 0 30px 70px rgba(18,9,31,.45); }
.closing-line { text-align: center; font: 700 1.7rem/1.2 var(--serif); color: var(--cream); }

@keyframes slideSpine { 0%,100% { top: -15%; } 50% { top: 82%; } }
@keyframes slowTurn { to { transform: rotate(360deg); } }
@keyframes float { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-18px) rotate(8deg); } }
@keyframes lampPulse { 0%,100% { opacity:.65; transform: scale(1); } 50% { opacity:1; transform: scale(1.08); } }

@media (max-width: 820px) {
  .spread { grid-template-columns: 1fr; }
  .pane { min-height: 82vh; padding: 8vh 9vw; }
  .spine { left: auto; right: 0; width: 18px; }
  .chapter-index { display: none; }
  h1 { font-size: clamp(3.7rem, 19vw, 7rem); }
  .third-page, .theorem-card, .side-page { margin-left: 0; transform: rotateZ(-3deg); }
}