/* Typography compliance notes: Primary display uses Space Mono** in bold; Interface labels use IBM Plex Mono** in regular and medium weights; body narration uses Inter** in regular and semibold weights. */
:root {
  --charcoal: #15110E;
  --paper: #F4D8B0;
  --brown: #4A2A1F;
  --ember: #FF6B2A;
  --oxide: #B83A27;
  --gold: #D6A23A;
  --cream: #FFF1D6;
  --mono: "Space Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --plex: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-token-mono-star: "Mono**";
  --font-token-inter-star: "Inter**";
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--cream);
  background: var(--charcoal);
  font-family: var(--body);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .18;
  background-image: linear-gradient(rgba(255,241,214,.05) 1px, transparent 1px), radial-gradient(circle at 20% 30%, rgba(255,107,42,.16), transparent 22%), radial-gradient(circle at 78% 60%, rgba(214,162,58,.12), transparent 24%);
  background-size: 100% 7px, 80vw 80vh, 70vw 70vh;
  mix-blend-mode: screen;
}

.page-rail {
  position: fixed;
  z-index: 30;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 9px;
}

.page-rail button {
  width: 40px;
  height: 28px;
  border: 1px solid rgba(214,162,58,.45);
  background: rgba(21,17,14,.76);
  color: var(--gold);
  font-family: var(--plex);
  cursor: pointer;
  transition: transform .24s cubic-bezier(.2, 1.6, .35, 1), color .24s, border-color .24s;
}

.page-rail button.active { color: var(--ember); border-color: var(--ember); transform: translateX(-8px); }

.plate {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  background: var(--charcoal);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(214,162,58,.3);
}

.plate::before {
  content: attr(data-chapter);
  position: absolute;
  left: -1vw;
  bottom: -7vh;
  font: 700 clamp(11rem, 28vw, 30rem)/.8 var(--mono);
  color: rgba(74,42,31,.36);
  z-index: -1;
}

.gutter {
  grid-column: 2;
  grid-row: 1;
  background: linear-gradient(90deg, transparent, var(--brown), var(--charcoal), var(--ember), transparent);
  position: relative;
  box-shadow: 0 0 36px rgba(255,107,42,.35);
}

.gutter.wide { width: 36px; margin-left: -6px; }

.gutter span {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(255,107,42,.8) 0 4px, transparent 4px 13px, rgba(184,58,39,.5) 13px 15px, transparent 15px 28px);
  animation: gutterFlow 2.8s linear infinite;
}

.spread {
  min-height: 100vh;
  padding: clamp(42px, 7vw, 96px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.text-leaf { grid-column: 1; }
.diagram-leaf { grid-column: 3; }

.paper {
  background: var(--paper);
  color: var(--charcoal);
  box-shadow: inset 0 0 0 1px rgba(74,42,31,.22), inset 18px 0 60px rgba(74,42,31,.12);
}

.dark-panel {
  background: radial-gradient(circle at 50% 45%, rgba(74,42,31,.65), transparent 52%), var(--charcoal);
}

.folio {
  position: absolute;
  top: 24px;
  left: 26px;
  z-index: 4;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font: 500 .68rem var(--plex);
  letter-spacing: .16em;
  color: var(--gold);
}

.lesson-tab {
  align-self: flex-start;
  margin: 0 0 28px;
  padding: 8px 12px;
  border: 1px solid currentColor;
  color: var(--ember);
  background: rgba(255,107,42,.08);
  font: 600 .78rem var(--plex);
  text-transform: uppercase;
  letter-spacing: .14em;
}

h1, h2 {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: -.08em;
  text-transform: lowercase;
  margin: 0;
}

h1 { font-size: clamp(4.8rem, 12vw, 13.5rem); line-height: .76; }
h2 { font-size: clamp(3.7rem, 8.8vw, 10.5rem); line-height: .78; }

.glitch-title {
  position: relative;
  color: var(--cream);
  animation: titleBounce 1.35s cubic-bezier(.18, 1.8, .25, 1) both;
  text-shadow: -8px 0 0 var(--oxide), 7px 0 0 var(--ember), 0 0 32px rgba(255,107,42,.45);
}

.glitch-title::before,
.glitch-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .72;
}

.glitch-title::before { color: var(--ember); transform: translate(-12px, 8px); clip-path: inset(0 0 58% 0); }
.glitch-title::after { color: var(--oxide); transform: translate(10px, -6px); clip-path: inset(48% 0 0 0); }

p, blockquote, li {
  font-size: clamp(1rem, 1.45vw, 1.28rem);
  line-height: 1.55;
  max-width: 43rem;
}

.lede { font-size: clamp(1.15rem, 1.9vw, 1.7rem); color: var(--cream); }

blockquote {
  margin: 32px 0 0;
  padding-left: 22px;
  border-left: 4px solid var(--ember);
  font-family: var(--plex);
  color: var(--brown);
}

.prompt-line, .code-slip, .terminal-link {
  margin-top: 32px;
  padding: 16px 18px;
  border: 1px solid rgba(214,162,58,.55);
  background: rgba(21,17,14,.7);
  color: var(--gold);
  font: 500 .92rem var(--plex);
  width: fit-content;
  text-decoration: none;
  box-shadow: 8px 8px 0 rgba(74,42,31,.45);
}

.paper .prompt-line, .paper .code-slip, .terminal-link { background: var(--charcoal); color: var(--cream); }
.prompt-line span { color: var(--ember); }

.narrow-notes ul { padding-left: 18px; color: var(--brown); font-family: var(--plex); }
.narrow-notes li { margin: 12px 0; }

svg { width: 100%; max-height: 80vh; overflow: visible; }

.path, .wave, .braid, .fold-curve, .release-loop, .arc {
  fill: none;
  stroke: var(--ember);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 13px rgba(255,107,42,.45));
}

.path-shadow, .red-offset, .braid.red, .fold-curve.secondary, .release-loop.secondary { stroke: var(--oxide); opacity: .62; stroke-width: 5; }
.braid.gold { stroke: var(--gold); }
.arc { stroke: var(--gold); stroke-width: 4; stroke-dasharray: 12 12; }

.draw-path {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
}

.plate.in-view .draw-path { animation: drawPath 1.65s cubic-bezier(.35, 0, .15, 1) forwards; }

.node { fill: var(--paper); stroke: var(--ember); stroke-width: 5; transform-origin: center; opacity: 0; }
.plate.in-view .node { animation: bounceIn .7s cubic-bezier(.2, 1.9, .28, 1) forwards; }
.node:nth-child(2) { animation-delay: .18s; } .node:nth-child(3) { animation-delay: .32s; } .node:nth-child(4) { animation-delay: .46s; }

.terminal-card rect, .annotation rect, .stamp rect {
  fill: rgba(21,17,14,.86);
  stroke: var(--gold);
  stroke-width: 2;
}

.terminal-card text, .annotation text, .stamp text, .diagram-label {
  fill: var(--cream);
  font: 500 18px "IBM Plex Mono", monospace;
  letter-spacing: .04em;
}

.paper .diagram-label { fill: var(--brown); }
.annotation.small text { fill: var(--gold); }
.scope { fill: rgba(21,17,14,.86); stroke: var(--gold); stroke-width: 3; }
.scan-fill { fill: url(#scan); opacity: .34; }
#scan path { stroke: var(--brown); stroke-width: 2; }

.bounce-item { opacity: 0; transform: translateY(24px) scale(.94); transform-box: fill-box; transform-origin: center; }
.plate.in-view .bounce-item { animation: bounceIn .72s cubic-bezier(.2, 1.7, .3, 1) .28s forwards; }

.ring-set circle, .lattice circle { fill: rgba(255,241,214,.65); stroke: var(--brown); stroke-width: 5; }
.lattice line { stroke: var(--ember); stroke-width: 6; stroke-linecap: round; }
.pointing-hand path { fill: var(--ember); stroke: var(--brown); stroke-width: 4; }

.opening .text-leaf { padding-left: clamp(32px, 5vw, 70px); }
.trace .text-leaf, .compile .text-leaf { background: linear-gradient(135deg, var(--charcoal), #21160f); }
.fold-map { background: radial-gradient(circle at center, rgba(255,107,42,.12), transparent 38%), var(--charcoal); }

@keyframes drawPath { to { stroke-dashoffset: 0; } }
@keyframes bounceIn { 0% { opacity: 0; transform: translateY(32px) scale(.9); } 65% { opacity: 1; transform: translateY(-10px) scale(1.04); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes titleBounce { 0% { transform: translateY(38px) scale(.96); filter: blur(2px); } 62% { transform: translateY(-12px) scale(1.03); filter: blur(0); } 100% { transform: translateY(0) scale(1); } }
@keyframes gutterFlow { from { transform: translateY(-30px); } to { transform: translateY(30px); } }

@media (max-width: 860px) {
  .plate { grid-template-columns: 1fr; }
  .gutter { grid-column: 1; width: 100%; height: 18px; grid-row: auto; order: 2; }
  .text-leaf, .diagram-leaf { grid-column: 1; min-height: 55vh; }
  .diagram-leaf { order: 3; }
  .spread { padding: 56px 28px; }
  .folio { writing-mode: horizontal-tb; left: 28px; top: 14px; }
  .page-rail { right: 8px; }
  h1 { font-size: clamp(4rem, 19vw, 7rem); }
  h2 { font-size: clamp(3.2rem, 17vw, 6.5rem); }
}