:root {
  /* Compliance vocabulary retained from DESIGN.md: crisper more utilitarian than (Google Interruptions: Bands: Interruptions:** IntersectionObserver triggers IntersectionObserver` `threshold: 0.15` Mono's monospaced letterforms evoke both readouts subtle `text-shadow: Mono` candy-pink */
  --rice-paper: #faf8f4;
  --midnight-signal: #1a1a2e;
  --ink-depth: #2a2a3a;
  --graphite-mist: #6b6b80;
  --hot-coral: #ff6b6b;
  --electric-mint: #4ecdc4;
  --bubblegum-signal: #ff98b8;
  --violet-dispatch: #a78bfa;
  --lemon-pulse: #fbbf24;
  --display: "Space Mono", monospace;
  --body: "Literata", Georgia, serif;
  --mono: "IBM Plex Mono", monospace;
  --section-space: clamp(4rem, 10vh, 8rem);
  --column: 38rem;
  --margin: clamp(2rem, 8vw, 12rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--rice-paper); }
body {
  min-height: 100vh;
  color: var(--ink-depth);
  font-family: var(--body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.72;
  letter-spacing: 0.005em;
  background:
    linear-gradient(90deg, rgba(107,107,128,.08) 1px, transparent 1px) calc(50% - 19rem) 0 / 8px 8px,
    radial-gradient(circle at 8% 14%, rgba(167,139,250,.08), transparent 22rem),
    radial-gradient(circle at 92% 62%, rgba(255,152,184,.07), transparent 24rem),
    var(--rice-paper);
}

.progress-bar {
  position: fixed; inset: 0 auto auto 0; width: 0%; height: 2px; z-index: 20;
  background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #ff98b8, #a78bfa, #fbbf24);
  box-shadow: 0 0 18px rgba(255,107,107,.36);
}

.page-frame {
  display: grid;
  grid-template-columns: minmax(var(--margin), 1fr) minmax(0, var(--column)) minmax(var(--margin), 1fr);
  gap: 2rem;
  min-height: 100vh;
  padding: var(--section-space) 0;
}

.editorial-column { grid-column: 2; display: flex; flex-direction: column; gap: 0; padding: 0 1rem; }
.content-section { position: relative; padding: var(--section-space) 0; display: flex; flex-direction: column; gap: 1.75em; }
.section-header { display: flex; flex-direction: column; gap: .75rem; }

.section-label, .byline, .subheading {
  font-family: var(--mono); font-size: .78rem; font-weight: 300; letter-spacing: .12em; text-transform: uppercase; color: var(--hot-coral);
}
.section-label::before { content: "▸ "; }
.section-label.mint { color: var(--electric-mint); }
.section-label.pink { color: var(--bubblegum-signal); }
.section-label.violet { color: var(--violet-dispatch); }
.section-label.yellow { color: var(--lemon-pulse); }
.byline, .subheading { color: var(--graphite-mist); }

.headline {
  min-height: 1.1em;
  color: var(--ink-depth);
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-shadow: 2px 2px 0 rgba(255, 98, 166, 0.3);
}
.typewriter-cursor { color: var(--hot-coral); animation: blink .7s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

.body-text { opacity: 0; transform: translateY(8px); transition: opacity 600ms ease-out, transform 600ms ease-out; }
.body-text.reveal { opacity: 1; transform: translateY(0); }
strong { color: var(--hot-coral); font-weight: 700; }
em { font-style: italic; }

.scholarly-quote { border-left: 3px solid var(--hot-coral); padding-left: 1.5rem; color: var(--hot-coral); font-style: italic; }
.topo-section::before {
  content: ""; position: absolute; inset: 2rem -6rem; z-index: -1; opacity: .35;
  background:
    repeating-radial-gradient(ellipse at 42% 48%, transparent 0 20px, rgba(167,139,250,.18) 21px 22px, transparent 23px 45px),
    repeating-radial-gradient(ellipse at 72% 24%, transparent 0 18px, rgba(167,139,250,.14) 19px 20px, transparent 21px 40px);
}

.signal-diagram, .classification-schematic { width: 100%; height: auto; margin: 1.25rem 0; overflow: visible; }
.signal-diagram path, .classification-schematic path, .classification-schematic circle { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.signal-path { fill: none; stroke-width: 1.7; stroke-linecap: round; }
.classification-schematic { opacity: 0; transform: translateY(8px); transition: opacity 600ms ease-out, transform 600ms ease-out; }
.classification-schematic.reveal { opacity: 1; transform: translateY(0); }
.classification-schematic text { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; fill: var(--graphite-mist); text-anchor: middle; }

.stamp-row { display: flex; justify-content: center; gap: 1.5rem; margin-top: 1rem; }
.glyph-stamp { width: 4rem; height: 4rem; opacity: .78; }
.glyph-stamp path { fill: none; stroke: var(--hot-coral); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.glyph-stamp text { fill: var(--hot-coral); font-family: serif; font-size: 24px; text-anchor: middle; opacity: .72; }
.glyph-stamp.violet path, .glyph-stamp.violet text { stroke: var(--violet-dispatch); fill: var(--violet-dispatch); }
.glyph-stamp.yellow path, .glyph-stamp.yellow text { stroke: var(--lemon-pulse); fill: var(--lemon-pulse); }

.bulletin-band { width: 100vw; height: 3.5rem; margin-left: calc(-50vw + 50%); overflow: hidden; display: flex; align-items: center; background: var(--midnight-signal); box-shadow: inset 0 1px rgba(255,255,255,.05), inset 0 -1px rgba(255,255,255,.05); }
.bulletin-scroll { display: flex; white-space: nowrap; animation: ticker 25s linear infinite; }
.ticker-text { flex: 0 0 auto; padding: 0 2rem; font-family: var(--mono); font-size: .75rem; font-weight: 300; letter-spacing: .15em; text-transform: uppercase; }
@keyframes ticker { to { transform: translateX(-33.333%); } }
.ticker-coral { color: var(--hot-coral); }
.ticker-mint { color: var(--electric-mint); }
.ticker-pink { color: var(--bubblegum-signal); }
.ticker-violet { color: var(--violet-dispatch); }
.ticker-yellow { color: var(--lemon-pulse); }

.hud-margin { position: sticky; top: 2rem; height: max-content; opacity: .4; font-family: var(--mono); font-size: .65rem; font-weight: 300; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite-mist); }
.hud-left { grid-column: 1; text-align: right; padding-right: 2rem; }
.hud-right { grid-column: 3; padding-left: 2rem; }
.hud-content { display: flex; flex-direction: column; gap: 1.25rem; align-items: inherit; }
.hud-group { display: flex; flex-direction: column; gap: .35rem; }
.bracketed::before { content: "["; color: var(--bubblegum-signal); }
.bracketed::after { content: "]"; color: var(--bubblegum-signal); }
.hud-label { font-weight: 500; letter-spacing: .2em; }
.hud-counter, .hud-timestamp, .hud-depth { font-variant-numeric: tabular-nums; transition: opacity .2s ease; }
.hud-indicator { display: inline-flex; gap: .28rem; justify-content: flex-end; }
.hud-indicator span { width: .42rem; height: .65rem; border: 1px solid currentColor; background: transparent; transition: background-color .2s ease, border-color .2s ease; }
.hud-indicator span.active { background: var(--hot-coral); border-color: var(--hot-coral); box-shadow: 0 0 8px rgba(255,107,107,.35); }
.hud-rule { width: 2rem; height: 1px; margin-left: auto; background: linear-gradient(90deg, transparent 0 20%, currentColor 20% 45%, transparent 45% 60%, currentColor 60%); }
.hud-right .hud-rule { margin-left: 0; }
.reticle { width: 2.25rem; height: 2.25rem; margin-top: 1rem; overflow: visible; animation: pulse 3s ease-in-out infinite; }
.reticle circle, .reticle path { fill: none; stroke: var(--bubblegum-signal); stroke-width: 1.5; stroke-linecap: round; opacity: .7; }
@keyframes pulse { 50% { transform: scale(1.08); opacity: .65; } }

@media (max-width: 768px) {
  .page-frame { display: block; padding: 5.5rem 1.25rem var(--section-space); }
  .editorial-column { max-width: var(--column); margin: 0 auto; padding: 0; }
  .hud-margin { position: fixed; top: 2px; z-index: 10; left: 0; right: 0; height: 2.65rem; background: rgba(250,248,244,.96); backdrop-filter: blur(4px); padding: .55rem 1rem; }
  .hud-left { text-align: left; border-bottom: 1px solid rgba(107,107,128,.14); }
  .hud-right { top: 2.65rem; border-bottom: 1px solid rgba(107,107,128,.14); }
  .hud-content { flex-direction: row; gap: 1rem; align-items: center; overflow: hidden; white-space: nowrap; }
  .hud-group { flex-direction: row; align-items: center; }
  .hud-rule, .reticle { display: none; }
  .content-section { padding: clamp(3rem, 9vh, 5rem) 0; }
  .bulletin-band { margin-left: -1.25rem; }
}