:root {
  /* Typography compliance tokens: `IBM Plex Mono` may appear sparingly for equations and timestamps; Interface annotations* annotations:** `IBM Plex Sans` for tiny labels; `Roboto Slab` for theorem titles; `Source Serif 4` for reflective prose. */
  --ink: #2B2521;
  --parchment: #E8D9C2;
  --linen: #F4EFE6;
  --rose: #A65D4E;
  --sage: #60745D;
  --brass: #C0A15A;
  --slate: #6F7785;
  --shadow: #151210;
  --proof-progress: 0;
  --particle-density: 0.72;
  --scene-vignette: 0.74;
  --iso-shadow-depth: 22px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--shadow);
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--shadow);
  font-family: "Source Serif 4", Georgia, serif;
  overflow-x: hidden;
}

.grain,
.projector,
.particle-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.grain {
  opacity: .22;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(43,37,33,.22) 0 1px, transparent 1.7px),
    radial-gradient(circle at 76% 42%, rgba(96,116,93,.18) 0 1px, transparent 1.5px),
    linear-gradient(90deg, rgba(21,18,16,.08), transparent 18%, rgba(21,18,16,.06) 51%, transparent 72%);
  background-size: 23px 29px, 31px 37px, 100% 100%;
}

.projector {
  z-index: 19;
  background:
    linear-gradient(90deg, rgba(21,18,16,.34), transparent 12%, transparent 88%, rgba(21,18,16,.34)),
    radial-gradient(ellipse at 50% 50%, transparent 35%, rgba(21,18,16,var(--scene-vignette)) 115%);
  animation: flicker 5.5s infinite steps(8);
}

.particle-field { z-index: 18; }

.theorem-rail {
  position: fixed;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-family: "IBM Plex Sans", Roboto, Arial, sans-serif;
}

.rail-mark {
  display: grid;
  grid-template-columns: 34px auto;
  align-items: center;
  gap: 10px;
  color: rgba(232,217,194,.56);
  text-decoration: none;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 10px;
  transition: color .8s ease, transform .8s ease, opacity .8s ease;
  opacity: .55;
}

.rail-mark span {
  width: 34px;
  height: 22px;
  display: grid;
  place-items: center;
  border-left: 1px solid currentColor;
  border-right: 1px solid currentColor;
  font-family: "IBM Plex Mono", monospace;
  color: var(--brass);
}

.rail-mark em { font-style: normal; opacity: 0; transform: translateX(-8px); transition: inherit; }
.rail-mark.active { color: var(--linen); opacity: 1; transform: translateX(6px); }
.rail-mark.active em { opacity: .82; transform: translateX(0); }

.film-reel { position: relative; z-index: 2; }

.scene {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(72px, 1fr));
  padding: 7vw 8vw 6vw 10vw;
  background:
    linear-gradient(130deg, rgba(244,239,230,.94), rgba(232,217,194,.92) 48%, rgba(192,161,90,.16)),
    var(--parchment);
  isolation: isolate;
}

.scene::before {
  content: "";
  position: absolute;
  inset: 6vh 5vw;
  border: 1px solid rgba(43,37,33,.12);
  box-shadow: inset 0 0 0 1px rgba(244,239,230,.28), 0 24px 80px rgba(21,18,16,.22);
  pointer-events: none;
}

.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(96,116,93,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,116,93,.07) 1px, transparent 1px);
  background-size: 7.4vw 7.4vw;
  mask-image: radial-gradient(ellipse at 42% 42%, black, transparent 68%);
  opacity: .42;
  pointer-events: none;
}

.opening {
  color: var(--parchment);
  background:
    radial-gradient(ellipse at 64% 44%, rgba(166,93,78,.18), transparent 35%),
    radial-gradient(ellipse at 38% 60%, rgba(192,161,90,.14), transparent 40%),
    linear-gradient(145deg, #151210, #2B2521 58%, #151210);
}

.opening::before { border-color: rgba(232,217,194,.12); }
.opening::after { opacity: .12; }

.crop {
  position: absolute;
  left: 0;
  width: 100%;
  height: 48px;
  background: rgba(21,18,16,.78);
  z-index: 4;
}
.crop-top { top: 0; }
.crop-bottom { bottom: 0; }

.scene-meta {
  position: absolute;
  top: 8vh;
  right: 8vw;
  z-index: 5;
  font-family: "IBM Plex Sans", Roboto, Arial, sans-serif;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(43,37,33,.54);
}
.opening .scene-meta { color: rgba(232,217,194,.54); }

.opening-lockup {
  grid-column: 2 / 8;
  grid-row: 3 / 6;
  z-index: 8;
  align-self: center;
}

.kicker {
  margin: 0 0 18px;
  color: var(--rose);
  font-family: "IBM Plex Sans", Roboto, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.opening .kicker { color: var(--brass); }

h1,
h2 {
  margin: 0;
  font-family: "Roboto Slab", Roboto, Georgia, serif;
  font-weight: 300;
  letter-spacing: .025em;
  line-height: .96;
}

h1 { font-size: clamp(58px, 9vw, 154px); }
h2 { font-size: clamp(42px, 6.3vw, 102px); color: var(--ink); }

.journal-button {
  margin-top: 42px;
  padding: 13px 20px;
  color: var(--parchment);
  background: transparent;
  border: 1px solid rgba(192,161,90,.58);
  font-family: "IBM Plex Sans", Roboto, Arial, sans-serif;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .7s ease, color .7s ease, transform .7s ease;
}
.journal-button:hover { background: var(--brass); color: var(--shadow); transform: translateY(-2px); }

.chapter-copy { z-index: 7; align-self: center; }
.chapter-copy p:not(.kicker):not(.equation):not(.caption-strip) {
  max-width: 520px;
  font-size: clamp(18px, 1.6vw, 27px);
  line-height: 1.55;
  color: rgba(43,37,33,.79);
}
.left-third { grid-column: 2 / 7; grid-row: 2 / 8; }
.right-third { grid-column: 7 / 12; grid-row: 2 / 8; }
.center-note { grid-column: 3 / 10; grid-row: 2 / 6; }
.final-copy { grid-column: 2 / 8; grid-row: 2 / 7; }

.equation,
.caption-strip {
  display: inline-block;
  margin-top: 22px;
  padding: 9px 13px;
  border-top: 1px solid rgba(96,116,93,.28);
  border-bottom: 1px solid rgba(96,116,93,.28);
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  color: var(--slate);
  background: rgba(244,239,230,.38);
}
.caption-strip { font-family: "IBM Plex Sans", Roboto, Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }

.proof-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
  overflow: visible;
}
.draw-line {
  fill: none;
  stroke: var(--brass);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  filter: drop-shadow(0 2px 0 rgba(43,37,33,.12));
}
.scene.in-view .draw-line,
.opening.active .draw-line { animation: drawProof 3.6s cubic-bezier(.42,0,.18,1) forwards; }
.scene.in-view .secondary { animation-delay: .45s; }
.scene.in-view .split-two { animation-delay: .65s; stroke: var(--rose); }
.delayed { animation-delay: 1.6s !important; }
.flower-petal { fill: rgba(166,93,78,.42); stroke: var(--rose); stroke-width: 1.2; opacity: 0; transform-origin: 825px 84px; }
.opening.active .flower-petal { animation: petalIn 1.2s ease 2.4s forwards; }
.petal-two { fill: rgba(232,217,194,.36); }
.svg-symbol { fill: var(--brass); font: 500 34px "IBM Plex Mono", monospace; opacity: .8; }

.evidence-cluster,
.orchard-map,
.chalkboard,
.correspondence-table,
.field-still {
  z-index: 5;
  position: relative;
}

.isometric-desk { grid-column: 7 / 12; grid-row: 4 / 8; transform: rotateX(58deg) rotateZ(-34deg); transform-style: preserve-3d; }
.desk-plane {
  position: absolute; width: 420px; height: 270px; border-radius: 18px; background: linear-gradient(135deg, #F4EFE6, #E8D9C2); border: 1px solid rgba(43,37,33,.18); box-shadow: 32px 42px var(--iso-shadow-depth) rgba(21,18,16,.18);
}
.iso-object { position: absolute; transform-style: preserve-3d; box-shadow: 14px 18px var(--iso-shadow-depth) rgba(21,18,16,.16); }
.notebook { left: 74px; top: 58px; width: 152px; height: 104px; background: var(--sage); border: 2px solid rgba(43,37,33,.22); color: var(--linen); padding: 18px; font: 500 12px "IBM Plex Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.cup { width: 62px; height: 62px; border-radius: 50%; background: radial-gradient(circle, var(--linen) 0 35%, var(--rose) 38% 48%, #E8D9C2 50%); }
.cup-one { left: 258px; top: 52px; }
.cup-two { left: 292px; top: 142px; }
.compass { left: 120px; top: 178px; width: 96px; height: 8px; background: var(--brass); transform: rotate(30deg); box-shadow: none; }
.compass::after { content:""; position: absolute; left: 44px; top: -46px; width: 8px; height: 98px; background: var(--brass); transform: rotate(-52deg); transform-origin: bottom; }
.string-line { position: absolute; left: 50px; top: 220px; width: 330px; height: 1px; background: var(--rose); opacity: .55; transform: rotate(-8deg); }

.orchard-map { grid-column: 2 / 7; grid-row: 3 / 8; transform: rotateX(55deg) rotateZ(-27deg); transform-style: preserve-3d; }
.garden-row { position: absolute; width: 560px; height: 34px; border-top: 2px dashed rgba(96,116,93,.52); border-radius: 50%; }
.row-a { top: 20px; left: 0; } .row-b { top: 110px; left: 35px; } .row-c { top: 200px; left: 72px; }
.tree { position: absolute; width: 44px; height: 44px; border-radius: 50% 50% 44% 56%; background: var(--sage); box-shadow: 12px 18px 18px rgba(21,18,16,.16); }
.t1 { left: 80px; top: 68px; } .t2 { left: 246px; top: 136px; } .t3 { left: 410px; top: 46px; } .t4 { left: 504px; top: 218px; }
.gate { left: 312px; top: 210px; width: 120px; height: 76px; border: 10px solid var(--brass); border-bottom: 0; box-shadow: 20px 24px 28px rgba(21,18,16,.18); }

.chalkboard { grid-column: 7 / 12; grid-row: 3 / 7; width: min(480px, 36vw); height: 310px; align-self: center; background: linear-gradient(145deg, #60745D, #485845); border: 18px solid #2B2521; box-shadow: 28px 36px 50px rgba(21,18,16,.28); transform: rotate(-2deg); }
.chalk-line { position: absolute; left: 54px; right: 54px; height: 2px; background: rgba(244,239,230,.62); transform-origin: left; }
.cl1 { top: 82px; transform: rotate(11deg); } .cl2 { top: 158px; transform: rotate(-7deg); background: rgba(166,93,78,.72); } .cl3 { top: 225px; width: 55%; transform: rotate(2deg); }
.chalkboard span { position: absolute; right: 48px; bottom: 36px; color: rgba(244,239,230,.74); font: 500 18px "IBM Plex Mono", monospace; }

.correspondence-table { grid-column: 3 / 11; grid-row: 5 / 8; min-height: 280px; }
.letter { width: 270px; height: 154px; background: var(--linen); border: 1px solid rgba(43,37,33,.16); padding: 28px; color: var(--ink); font: 500 14px "Source Serif 4", serif; transform: rotate(-7deg); }
.letter-a { left: 12%; top: 42px; }
.letter-b { right: 16%; top: 8px; transform: rotate(5deg); color: var(--rose); }
.lens { left: 50%; top: 120px; width: 104px; height: 104px; border: 8px solid rgba(111,119,133,.65); border-radius: 50%; background: rgba(244,239,230,.25); box-shadow: 18px 22px 28px rgba(21,18,16,.14); }
.lens::after { content:""; position: absolute; width: 82px; height: 8px; background: rgba(111,119,133,.65); right: -64px; bottom: -24px; transform: rotate(38deg); }
.rose-note { position: absolute; left: 38%; top: 18px; color: var(--rose); font: 600 clamp(22px, 3vw, 45px) "Roboto Slab", serif; letter-spacing: .03em; opacity: .88; }

.field-still { grid-column: 7 / 12; grid-row: 3 / 8; }
.horizon { position: absolute; left: 0; right: 0; top: 48%; height: 2px; background: linear-gradient(90deg, transparent, var(--sage), transparent); }
.chair { width: 70px; height: 76px; bottom: 18%; background: linear-gradient(90deg, var(--brass), #A88C4B); transform: skewY(-12deg); }
.chair::before { content:""; position: absolute; left: 8px; top: -44px; width: 58px; height: 48px; border: 8px solid var(--brass); border-bottom: 0; }
.chair-left { left: 28%; } .chair-right { left: 47%; transform: skewY(-12deg) scaleX(-1); }
.orbit { stroke-width: 2.6; }
.qed-symbol { fill: var(--rose); font: 700 22px "Roboto Slab", serif; letter-spacing: .16em; }

.scene:not(.in-view) .chapter-copy,
.scene:not(.in-view) .evidence-cluster,
.scene:not(.in-view) .orchard-map,
.scene:not(.in-view) .chalkboard,
.scene:not(.in-view) .correspondence-table,
.scene:not(.in-view) .field-still { opacity: .28; transform: translateY(18px); }
.chapter-copy,
.evidence-cluster,
.orchard-map,
.chalkboard,
.correspondence-table,
.field-still { transition: opacity 1.2s ease, transform 1.2s ease; }

@keyframes drawProof { to { stroke-dashoffset: 0; } }
@keyframes petalIn { from { opacity: 0; transform: scale(.72) rotate(-8deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes flicker { 0%, 100% { opacity: .85; } 12% { opacity: .78; } 28% { opacity: .9; } 49% { opacity: .8; } 63% { opacity: .88; } }

@media (max-width: 820px) {
  .theorem-rail { left: 10px; gap: 10px; }
  .rail-mark { grid-template-columns: 30px; }
  .rail-mark em { display: none; }
  .scene { padding: 16vh 8vw 12vh 18vw; display: block; }
  .chapter-copy { margin-bottom: 40px; }
  .right-third, .left-third, .center-note, .final-copy { grid-column: auto; grid-row: auto; }
  .isometric-desk, .orchard-map, .chalkboard, .correspondence-table, .field-still { transform: scale(.72); transform-origin: left top; min-height: 260px; }
  h1 { font-size: 54px; }
  h2 { font-size: 38px; }
}