:root {
  --bg: #f4ece1;
  --text: #3b2617;
  --terracotta: #c2703e;
  --clay: #a68b76;
  --walnut: #7a6555;
  --sienna: #8b4513;
  --rose: #c9a89a;
  --fog: #e8dcd0;
  --spring: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Design compliance vocabulary: (Google Interactions* Interactions: Interactions:** Backgrounds | `#e8dcd0` | cards* cards: cards:** Full-viewport-height sections visual element (an animated water-bubble (dense 20-30 filling IntersectionObserver` `threshold: 0.3` trigger entrance sequence: */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: "Source Serif 4", serif;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.85;
  letter-spacing: 0.005em;
  overflow-x: hidden;
}

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.32;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(194, 112, 62, 0.08) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(59, 38, 23, 0.05) 0 1px, transparent 1px);
  background-size: 34px 34px, 47px 47px;
}

.hud-top, .hud-left, .hud-right, .hud-bottom { position: fixed; z-index: 10; font-family: "IBM Plex Sans", sans-serif; }

.hud-top {
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 18px;
  color: var(--walnut);
  background: rgba(244, 236, 225, 0.78);
  border-bottom: 1px solid rgba(166, 139, 118, 0.35);
  backdrop-filter: blur(12px);
}

.chapter-status, .progress-status { font-size: clamp(0.72rem, 1vw, 0.82rem); letter-spacing: 0.02em; }
.progress-status { color: var(--sienna); }
.field-diagram { justify-self: end; width: 80px; height: 40px; }
.field-diagram path { fill: none; stroke: var(--terracotta); stroke-width: 1; opacity: 0.65; }

.hud-left {
  left: 0;
  top: 50%;
  width: 160px;
  transform: translateY(-50%);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nav-pill {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 8px;
  align-items: center;
  padding: 8px 9px;
  color: var(--walnut);
  text-decoration: none;
  border: 1px solid rgba(166, 139, 118, 0.35);
  border-radius: 999px;
  background: rgba(244, 236, 225, 0.62);
  box-shadow: 0 4px 16px rgba(59, 38, 23, 0.04);
  transition: transform 200ms ease-out, box-shadow 200ms ease-out, background 200ms ease-out;
  transform-origin: center;
}
.nav-pill:hover { transform: scale(1.15); box-shadow: 0 8px 22px rgba(59, 38, 23, 0.10); }
.nav-pill.active { color: var(--sienna); background: rgba(194, 112, 62, 0.13); animation: activePulse 3s ease-in-out infinite; }
.nav-pill span { font-size: 0.72rem; font-weight: 500; }
.nav-pill em { font-style: normal; font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; }

.hud-right {
  right: 0;
  top: 48px;
  bottom: 36px;
  width: 120px;
  border-left: 1px solid rgba(166, 139, 118, 0.25);
  overflow: hidden;
}

.annotation-panel {
  position: absolute;
  top: 18vh;
  right: 10px;
  width: 98px;
  padding: 10px;
  color: var(--walnut);
  background: rgba(244, 236, 225, 0.72);
  border: 1px solid rgba(201, 168, 154, 0.45);
  transform: translateX(0);
  transition: transform 200ms ease-out, opacity 200ms ease-out;
  z-index: 2;
}
.annotation-panel.changing { opacity: 0; transform: translateX(18px); }
.annotation-kicker { display: block; color: var(--terracotta); font-size: 0.65rem; margin-bottom: 6px; }
.annotation-panel p { margin: 0; font-size: clamp(0.72rem, 1vw, 0.82rem); line-height: 1.55; }

.hud-bottom {
  left: 0;
  right: 0;
  bottom: 0;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sienna);
  background: rgba(244, 236, 225, 0.8);
  border-top: 1px solid rgba(166, 139, 118, 0.35);
  backdrop-filter: blur(12px);
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  transition: transform 300ms ease-out, box-shadow 300ms ease-out;
}
.hud-bottom:hover { transform: scale(1.02); box-shadow: 0 -8px 24px rgba(59, 38, 23, 0.08); }

.reading-canvas {
  position: relative;
  z-index: 2;
  padding: 64px 140px 48px 180px;
}

.chapter { max-width: 680px; margin: 0 auto; position: relative; }
.chapter-card { min-height: calc(100vh - 112px); display: flex; flex-direction: column; justify-content: center; position: relative; }
.chapter-number {
  font-family: "Playfair Display", serif;
  font-weight: 900;
  color: var(--terracotta);
  font-size: clamp(7rem, 20vw, 16rem);
  line-height: 0.78;
  letter-spacing: -0.08em;
  transform: scale(4) translateY(25vh);
  opacity: 0.06;
  transition: transform 1200ms var(--spring), opacity 1200ms var(--spring);
}
.chapter.in-view .chapter-number { transform: scale(1) translateY(0); opacity: 1; }

.chapter-card h1 {
  margin: 1rem 0 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 900;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 600ms ease-out 300ms, transform 600ms ease-out 300ms;
}
.chapter.in-view .chapter-card h1 { opacity: 1; transform: translateX(0); }
.chapter-subtitle { max-width: 520px; color: var(--walnut); font-family: "IBM Plex Sans", sans-serif; font-size: 0.95rem; line-height: 1.65; opacity: 0; transform: translateX(-20px); transition: opacity 600ms ease-out 430ms, transform 600ms ease-out 430ms; }
.chapter.in-view .chapter-subtitle { opacity: 1; transform: translateX(0); }

.chapter-body { padding: 0 0 12vh; }
h2 {
  margin: 0 0 1.5rem;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.6rem, 3.5vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 700;
  transform: translateX(-30px);
  opacity: 0;
  transition: transform 500ms ease-out, opacity 500ms ease-out;
}
h2.visible { transform: translateX(0); opacity: 1; }
p { margin: 0 0 1.7rem; }
.dropcap::first-letter { float: left; font-family: "Playfair Display", serif; font-size: 5.2rem; line-height: 0.82; padding: 0.12rem 0.5rem 0 0; font-weight: 900; color: var(--terracotta); text-shadow: 0 2px 8px rgba(194, 112, 62, 0.15); }
.dropcap { position: relative; }
.dropcap::before { content: ""; position: absolute; left: -18px; top: 10px; width: 34px; height: 82px; border-left: 1px solid rgba(194, 112, 62, 0.35); border-bottom: 1px solid rgba(194, 112, 62, 0.35); border-radius: 0 0 0 24px; }

.note-ref { display: inline-block; font-family: "IBM Plex Sans", sans-serif; font-size: 0.65rem; color: var(--sienna); cursor: pointer; transition: transform 150ms var(--spring), box-shadow 150ms var(--spring); transform-origin: center; }
.note-ref:hover { transform: scale(1.3); box-shadow: 0 4px 12px rgba(139, 69, 19, 0.16); }

.equation-display { margin: 2.6rem 0; padding: 2rem 0; text-align: center; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: clamp(1.1rem, 1.5vw, 1.3rem); letter-spacing: 0.01em; color: var(--sienna); border-top: 1px solid rgba(201, 168, 154, 0.45); border-bottom: 1px solid rgba(201, 168, 154, 0.45); }

.figure-panel { margin: 3rem 0; padding: 1rem; background: rgba(232, 220, 208, 0.38); border: 1px solid rgba(166, 139, 118, 0.25); }
.figure-panel svg { width: 100%; display: block; }
.figure-panel figcaption { margin-top: 0.8rem; color: var(--walnut); font-family: "IBM Plex Sans", sans-serif; font-size: clamp(0.72rem, 1vw, 0.82rem); line-height: 1.55; }
.draw-lines path, .draw-lines line { stroke-dasharray: 520; stroke-dashoffset: 520; }
.figure-panel.visible .draw-lines path, .figure-panel.visible .draw-lines line { animation: drawLine 2s ease-out forwards; }

.pull-quote { position: relative; margin: 4rem 0; padding: 2rem 2.5rem; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: clamp(1.4rem, 2.5vw, 2rem); line-height: 1.35; color: var(--text); }
.pull-quote span { position: absolute; top: -1.2rem; left: 0; font-size: 6rem; color: rgba(201, 168, 154, 0.35); }
.pull-quote a { display: inline-block; margin-left: 1rem; color: var(--sienna); font-family: "IBM Plex Sans", sans-serif; font-size: 0.72rem; font-style: normal; text-decoration: none; transition: transform 200ms ease-out, box-shadow 200ms ease-out; }
.pull-quote a:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(59, 38, 23, 0.08); }

.section-divider { height: 24vh; display: flex; align-items: center; justify-content: center; gap: 7px; }
.section-divider span { width: 12px; height: 12px; border: 1px solid rgba(166, 139, 118, 0.45); border-radius: 50%; }
.section-divider span:nth-child(2) { animation: symbolPulse 4s ease-in-out infinite; }

.interlude { position: relative; min-height: 100vh; margin: 0 -140px 0 -180px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(180deg, #f4ece1 0%, #e8dcd0 40%, #e8dcd0 60%, #f4ece1 100%); }
.interlude p { position: relative; z-index: 2; max-width: 760px; margin: 0; padding: 0 2rem; text-align: center; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: clamp(1.8rem, 4vw, 3.4rem); line-height: 1.2; color: var(--text); }
.final-chapter { overflow: hidden; }

.bubble-field { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bubble-svg { position: absolute; overflow: visible; }
.bubble { fill: none; stroke: #c2703e; stroke-width: 0.5px; opacity: 0.15; filter: url(#bubble-blur); }

@keyframes activePulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes symbolPulse { 0%, 100% { transform: scale(0.95); } 50% { transform: scale(1.05); } }
@keyframes drawLine { to { stroke-dashoffset: 0; } }

@media (max-width: 900px) {
  .reading-canvas { padding: 104px 22px 48px; }
  .hud-left { top: 48px; left: 0; right: 0; width: auto; transform: none; flex-direction: row; overflow-x: auto; padding: 8px 10px; background: rgba(244, 236, 225, 0.76); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(166, 139, 118, 0.25); }
  .nav-pill { min-width: 116px; }
  .hud-right { display: none; }
  .interlude { margin-left: -22px; margin-right: -22px; }
  .hud-top { grid-template-columns: 1fr auto 90px; }
}

@media (max-width: 560px) {
  .chapter-status { max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nav-pill em { display: none; }
  .nav-pill { min-width: 54px; grid-template-columns: 1fr; justify-items: center; }
  .dropcap::before { display: none; }
}