:root {
  --paper: #f5efe6;
  --ink: #2e1a0f;
  --heading-ink: #3b1a1a;
  --oxblood: #6b2d3e;
  --faded-sepia: #7a5c4a;
  --copper: #8b6949;
  --parchment: #ede2d4;
  --sienna: #a0522d;
  --gold: #d4b896;
  --void: #1f0f14;
  --void-text: #f0e8dc;
  --cool: #4a7c8f;
  --spring-stiffness: 120;
  --spring-damping: 14;
}

/* Compliance trace: IBM Plex Mono (400, (Google Fonts); IntersectionObserver IntersectionObserver` with `rootMargin: "-10% 0px -10% 0px" -10% 0px" to detect section entry/exit. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(1rem, 1.15vw, 1.2rem);
  line-height: 1.72;
  overflow-x: hidden;
}

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0.38;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='4' seed='11'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.monograph-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.2rem;
  align-items: center;
  padding: 0.95rem clamp(1rem, 3vw, 2.5rem);
  color: var(--faded-sepia);
  background: linear-gradient(to bottom, rgba(245,239,230,0.92), rgba(245,239,230,0.62), transparent);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.header-rule { height: 1px; background: var(--copper); opacity: 0.62; }

.chapter-index {
  position: fixed;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 21;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.65rem 0.5rem;
  background: rgba(237, 226, 212, 0.5);
  border-left: 1px solid rgba(139,105,73,0.35);
  backdrop-filter: blur(5px);
}

.chapter-index a {
  color: var(--copper);
  text-decoration: none;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.48;
  transform: translateX(0);
}

.chapter-index a[data-active="true"] {
  color: var(--heading-ink);
  opacity: 1;
  transform: translateX(-0.25rem);
}

.monograph-body { padding-top: 4rem; }

.chapter {
  position: relative;
  display: grid;
  grid-template-columns: minmax(130px, 180px) minmax(0, 680px) minmax(130px, 180px);
  justify-content: center;
  gap: clamp(1.6rem, 4vw, 4rem);
  min-height: 105vh;
  padding: clamp(6rem, 12vw, 10rem) clamp(1.25rem, 4vw, 4rem);
  isolation: isolate;
}

.chapter::before,
.chapter::after {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 20' preserveAspectRatio='none'%3E%3Cpath d='M0 11 C120 6 180 15 300 10 S500 7 630 12 S840 14 1000 8' fill='none' stroke='%238b6949' stroke-width='1.1' opacity='0.55'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  opacity: 0.55;
}

.chapter::before { top: 1.4rem; }
.chapter::after { bottom: 1.4rem; transform: rotate(180deg); }

.chapter-watermark {
  position: absolute;
  top: 5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: clamp(4rem, 12vw, 10rem);
  line-height: 1;
  color: var(--gold);
  opacity: var(--watermark-opacity, 0.04);
}

.content-column { max-width: 680px; align-self: center; }

.kicker,
.figure-label,
.equation-label,
.annotation span,
.plate-panel span,
.colophon {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--copper);
  text-transform: uppercase;
}

h1, h2 {
  margin: 0 0 1.4rem;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(2.5rem, 8vw, 6rem);
  line-height: 0.93;
  letter-spacing: 0.02em;
  color: var(--oxblood);
}

.content-column p { max-width: 38em; margin: 0 0 1.25rem; }

blockquote {
  position: relative;
  margin: 2.2rem 0 0;
  padding: 1.5rem 0 0 2rem;
  color: var(--oxblood);
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(1.8rem, 3.5vw, 3.1rem);
  line-height: 1.05;
}

blockquote::before {
  content: "“";
  position: absolute;
  left: -0.5rem;
  top: -1rem;
  color: var(--gold);
  opacity: 0.3;
  font-size: 7rem;
  transform: rotate(-3deg);
}

.margin-left,
.margin-right {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.margin-left { text-align: right; align-items: flex-end; }
.margin-right { align-items: flex-start; }

.field-svg {
  width: min(100%, 170px);
  aspect-ratio: 1;
  overflow: visible;
  filter: sepia(0.25);
}

.field-lines path,
.field-lines circle,
.convergence-lines path,
.convergence-point circle {
  fill: none;
  stroke: var(--sienna);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.field-lines circle,
.convergence-point circle { fill: var(--sienna); stroke: none; }

.field-draw path {
  stroke-dasharray: 1;
  stroke-dashoffset: var(--dash, 1);
}

.detection-glow { animation: detectionPulse 900ms cubic-bezier(.2,1.3,.4,1) both; }

@keyframes detectionPulse {
  0% { filter: drop-shadow(0 0 0 rgba(74,124,143,0)); }
  40% { filter: drop-shadow(0 0 18px rgba(74,124,143,0.7)); }
  100% { filter: drop-shadow(0 0 0 rgba(74,124,143,0)); }
}

.annotation {
  width: 100%;
  padding: 0.9rem 0.95rem;
  border: 12px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cpath d='M8 11 C28 7 58 14 82 9 L80 82 C58 77 30 85 9 79 Z' fill='none' stroke='%238b6949' stroke-width='3'/%3E%3C/svg%3E") 18 stretch;
  background: rgba(237, 226, 212, 0.68);
  color: var(--copper);
  font: 0.78rem/1.55 "IBM Plex Mono", monospace;
  letter-spacing: 0.02em;
  text-align: left;
  cursor: pointer;
  opacity: var(--annotation-opacity, 0.36);
  transform: translateY(var(--annotation-y, 20px));
}

.annotation span { display: block; margin-bottom: 0.45rem; color: var(--oxblood); }
.annotation.expanded, .annotation:hover { background: rgba(237,226,212,0.95); color: var(--ink); }

.plate {
  position: relative;
  min-height: 90vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at center, rgba(107,45,62,0.55), transparent 42%), var(--void);
  color: var(--void-text);
}

.plate-field {
  position: absolute;
  inset: 6% 2%;
  width: 96%;
  height: 88%;
  mix-blend-mode: screen;
  opacity: 0.86;
}

.luminous path,
.luminous circle { stroke: var(--sienna); filter: drop-shadow(0 0 10px rgba(160,82,45,0.45)); }
.luminous circle { fill: var(--sienna); }

.plate-panel {
  position: relative;
  width: min(620px, calc(100% - 2rem));
  padding: clamp(1.3rem, 4vw, 3rem);
  background: rgba(31, 15, 20, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(240,232,220,0.23);
  box-shadow: 0 26px 80px rgba(0,0,0,0.25);
}

.plate-panel h2 { color: var(--void-text); font-style: italic; margin-top: 0.3rem; }
.plate-panel p { margin: 0; }

.bundle-shape,
.chapter-three::before {
  box-shadow: 0 0 0 24px rgba(212,184,150,0.05), 0 0 0 50px rgba(212,184,150,0.035), 0 0 0 86px rgba(212,184,150,0.025);
}

.bundle-shape {
  position: absolute;
  width: 180px;
  height: 180px;
  border: 1px dashed rgba(212,184,150,0.28);
  border-radius: 50%;
  transform: rotate(18deg);
}

.convergence-stage {
  position: relative;
  min-height: 125vh;
  display: grid;
  place-items: center;
  background: linear-gradient(var(--paper), var(--parchment), var(--paper));
}

.convergence-point {
  position: sticky;
  top: calc(50vh - 210px);
  width: min(72vw, 420px);
  aspect-ratio: 1;
  transform: scale(var(--convergence-scale, 0));
  transform-origin: center;
}

.convergence-point svg { width: 100%; height: 100%; overflow: visible; }
.convergence-lines path { stroke-width: 1.1; stroke-dasharray: 1; stroke-dashoffset: var(--convergence-dash, 1); }
.convergence-point circle { filter: drop-shadow(0 0 14px rgba(160,82,45,0.45)); }

.convergence-caption {
  position: absolute;
  bottom: 16vh;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  color: var(--copper);
  text-transform: uppercase;
}

.chapter-one::after,
.chapter-four::before {
  background-color: rgba(212,184,150,0.06);
  border-radius: 50%;
}

.colophon {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 2rem clamp(1rem, 4vw, 4rem) 3rem;
  border-top: 1px solid rgba(139,105,73,0.35);
  background: var(--parchment);
}

@media (max-width: 1100px) {
  .chapter-index {
    top: auto;
    right: 50%;
    bottom: 0.75rem;
    transform: translateX(50%);
    flex-direction: row;
    border-left: 0;
    border-top: 1px solid rgba(139,105,73,0.35);
  }

  .chapter {
    grid-template-columns: minmax(0, 680px);
    min-height: auto;
  }

  .margin-left,
  .margin-right {
    text-align: left;
    align-items: stretch;
    max-width: 680px;
    width: 100%;
    margin: 0 auto;
  }

  .margin-left { order: 2; }
  .content-column { order: 1; }
  .margin-right { order: 3; }
  .field-svg { width: 150px; }
}

@media (max-width: 600px) {
  .monograph-header { gap: 0.65rem; }
  .site-name { white-space: nowrap; }
  .chapter { padding: 5rem 1rem; }
  .plate { min-height: 80vh; }
  .annotation { max-height: 3.35rem; overflow: hidden; }
  .annotation.expanded { max-height: 16rem; }
  .colophon { flex-direction: column; }
}