/* ============================================================
   David Trujillo — rev monochrome paper
   Deep black · grays · Swiss yellowish paper · no orange · no field
   ============================================================ */

:root {
  /* Neomorphism UI black — soft dual-shadow monochrome */
  --void: #161616;
  --charcoal: #111111;
  --bg: #161616;
  --paper: #a09078;
  --paper-dim: #6e6658;
  --gray-1: #111111;
  --gray-2: #181818;
  --gray-3: #5c5c5c;
  --line: rgba(160, 144, 120, 0.1);
  --line-strong: rgba(160, 144, 120, 0.22);

  --coral: var(--paper);
  --magenta: var(--paper);
  --violet: var(--paper);
  --blue: var(--paper-dim);
  --cyan: var(--paper);

  --accent: var(--paper);
  --accent-dim: rgba(160, 144, 120, 0.22);

  --grad: linear-gradient(90deg, var(--paper), var(--paper));
  --grad-v: linear-gradient(to bottom, var(--paper), var(--paper));

  /* neo surface system */
  --neo-bg: #161616;
  --neo-face: #111111;
  --neo-face-hi: #161616;
  --neo-face-lo: #0c0c0c;
  --neo-dark: rgba(0, 0, 0, 0.55);
  --neo-light: rgba(255, 255, 255, 0.045);
  --neo-light-warm: rgba(160, 144, 120, 0.06);
  --neo-radius: 18px;
  --neo-radius-sm: 12px;
  --neo-radius-pill: 999px;
  --neo-raised:
    8px 8px 18px var(--neo-dark),
    -5px -5px 14px var(--neo-light);
  --neo-raised-sm:
    4px 4px 10px var(--neo-dark),
    -3px -3px 8px var(--neo-light);
  --neo-raised-lg:
    12px 12px 28px rgba(0, 0, 0, 0.6),
    -7px -7px 18px var(--neo-light);
  --neo-inset:
    inset 5px 5px 12px rgba(0, 0, 0, 0.55),
    inset -3px -3px 8px var(--neo-light);
  --neo-pressed:
    inset 4px 4px 10px rgba(0, 0, 0, 0.65),
    inset -2px -2px 6px var(--neo-light);
  --neo-grad: linear-gradient(145deg, var(--neo-face-hi), var(--neo-face-lo));

  --glass-bg: var(--neo-face);
  --glass-bg-solid: var(--neo-face);
  --glass-border: transparent;
  --glass-hi: var(--neo-light-warm);
  --glass-blur: none;
  --glass-shadow: var(--neo-raised);

  --font-display: "Helvetica Neue", Inter, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, "IBM Plex Mono", monospace;
  --thread-w: 1px;
  --pad: clamp(1.25rem, 4vw, 4rem);

  /* readable body — sitewide standard */
  --text-body: 25px;   /* sitewide body */
  --text-body-lh: 1.55;
  --text-body-weight: 500;
  --text-measure: min(40rem, 92vw);
}


* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  color-scheme: dark;                       /* correct form controls, scrollbars, UA dark */
  -webkit-text-size-adjust: 100%;           /* stop iOS inflating text in landscape */
          text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent; /* no grey flash on tap — we style our own feedback */
}
/* keep momentum scroll snappy; contain overscroll so inner scrollers don't chain
   to the page (and the page doesn't bounce into the browser chrome) */
html, body { overscroll-behavior-y: none; }
/* clearer press feedback on touch, since we removed the UA tap flash */
a, button, [role="button"], .btn-primary, .btn-ghost, summary { touch-action: manipulation; }

body {
  background: var(--bg);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: var(--text-body-weight, 350);
  font-size: var(--text-body);
  line-height: var(--text-body-lh);
  overflow-x: hidden;
}

main { position: relative; z-index: 1; }

::selection { background: var(--paper); color: var(--void); }

.mono {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

.accent { color: var(--magenta); }

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* The reader wraps words in .rw spans and animates their opacity; that opacity
   creates a compositing layer which BREAKS the parent's background-clip:text —
   the word renders transparent-on-nothing and vanishes. Each wrapped word must
   carry its own clipped background. */
.grad-text .rw {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
}

h1, h2, h3 { font-weight: 500; line-height: 1.12; }

h2 {
  font-size: clamp(1.9rem, 4.5vw, 3.4rem);
  letter-spacing: -0.01em;
  margin-bottom: 1.2rem;
}

h2 em { font-style: italic; }
h2 em, .chapter-text h2 em {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

p { max-width: 58ch; }
a { color: inherit; }

/* ---------- glass surface ---------- */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(184, 169, 144, 0.14),
    0 0 90px -30px color-mix(in srgb, var(--hue, var(--violet)) 55%, transparent);
}

/* ---------- ambient aurora (injected by app.js) ---------- */
.aurora {
  position: fixed;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
}
.aurora-layer { position: absolute; inset: 0; }

/* ---------- scroll thread ---------- */
.thread {
  position: fixed;
  top: 0; bottom: 0;
  left: calc(var(--pad) / 2);
  width: var(--thread-w);
  background: var(--line);
  z-index: 40;
}
.thread-fill {
  position: relative;
  width: 100%;
  height: 0%;
  background: var(--grad-v);
  box-shadow: 0 0 14px var(--accent-dim);
  transition: height 80ms linear;
}
/* progress tip: short horizontal tick (not a circle) */
.thread-fill::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 8px;
  height: 1px;
  transform: translateX(-50%);
  border-radius: 0;
  background: var(--accent);
  box-shadow: none;
}

/* ---------- nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem var(--pad);
  background: rgba(3, 3, 9, 0.55);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.nav-mark {
  font-size: 1rem;
  font-weight: 500;
  color: var(--paper);
  text-decoration: none;
  letter-spacing: 0.08em;
}
.blink { color: var(--magenta); animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.nav-links { display: flex; gap: 1.6rem; align-items: center; }
.nav-links a {
  text-decoration: none;
  color: var(--paper-dim);
  transition: color 160ms ease;
}
.nav-links a:hover { color: var(--paper); }
.nav-current { color: var(--paper) !important; }
.nav-current::after {
  content: "";
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
  margin-top: 2px;
}
.nav-cta {
  color: #0a0210 !important;
  border: none;
  background: var(--paper);
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  box-shadow: none;
  transition: filter 180ms ease !important;
}
.nav-cta:hover {
  background: var(--paper);
  color: #0a0210 !important;
  border: none;
  box-shadow: none;
  filter: brightness(1.06);
}
button.nav-account { cursor: pointer; font: inherit; }
.nav-cta.is-member {
  color: var(--paper) !important;
  background: none;
  border: 1px solid var(--line-strong);
  box-shadow: none;
  filter: none;
}
.nav-cta.is-member:hover {
  background: none;
  color: var(--accent) !important;
  border-color: var(--accent);
  filter: none;
}

.link-btn {
  background: none; border: none; padding: 0; font: inherit;
  color: var(--magenta);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-btn:hover { color: var(--paper); }

/* ---------- buttons ---------- */
/* Flat orange — no glow, no inset rim, no metallic perimeter */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--paper);
  color: #0a0210;
  text-decoration: none;
  font-weight: 600;
  padding: 0.95rem 1.7rem;
  border-radius: 999px;
  border: none;
  font-size: 1.02rem;
  transition: transform 200ms ease, filter 200ms ease, background 200ms ease;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.btn-primary .mono { color: #0a0210; }
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: none;
  filter: brightness(1.06);
  background: var(--paper);
}
.btn-primary:focus-visible {
  outline: 2px solid rgba(184, 169, 144, 0.55);
  outline-offset: 3px;
  box-shadow: none;
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 0.95rem 1.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  text-decoration: none;
  color: var(--paper);
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}
.btn-ghost:hover {
  border-color: var(--violet);
  color: var(--paper);
  background: rgba(139, 92, 255, 0.1);
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 0 var(--pad);
  overflow: hidden;
}
#system-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Never intercept scroll/tap — animation is visual only on touch */
  pointer-events: none;
}
.hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 45%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 45%, black 30%, transparent 75%);
  opacity: 0.5;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 60rem;
  margin-left: clamp(0.5rem, 4vw, 4rem);
  pointer-events: none;
}
.hero-content a, .hero-content strong { pointer-events: auto; }
.kicker { margin-bottom: 1.6rem; color: var(--magenta); }
.hero-title {
  font-size: clamp(2.6rem, 8vw, 6.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.04;
}
.hero-title .line { display: block; }
.hero-sub {
  margin-top: 1.8rem;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--paper-dim);
  max-width: 44ch;
}
.hero-sub strong { color: var(--paper); font-weight: 500; }
.hero-close {
  margin-top: 1.5rem;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  color: var(--paper);
  max-width: 46ch;
  font-weight: 500;
}
.hero-close strong { color: var(--paper); font-weight: 600; }
.hero-hint { margin-top: 2rem; color: var(--accent-dim); }

/* Cursor-driven effects aren't available on touch — hide the desktop hint */
@media (hover: none), (pointer: coarse) {
  .hero-hint { display: none; }
}

.scroll-cue {
  position: absolute;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  color: var(--paper-dim);
  z-index: 2;
}
.scroll-line { width: 1px; height: 48px; background: var(--line-strong); position: relative; overflow: hidden; }
.scroll-line::after {
  content: "";
  position: absolute;
  top: -50%; left: 0; width: 100%; height: 50%;
  background: var(--grad-v);
  animation: drip 1.8s ease-in-out infinite;
}
@keyframes drip { to { top: 110%; } }

/* ---------- statements: one idea, one screen ---------- */
.statement {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 7rem var(--pad);
}
.statement .chapter-meta { justify-content: center; margin-bottom: 2.2rem; }
.statement h2 {
  font-size: clamp(2.3rem, 6vw, 4.8rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  max-width: 20ch;
}
.statement-lead {
  margin-top: 1.8rem;
  color: var(--paper-dim);
  font-size: clamp(1.02rem, 1.7vw, 1.25rem);
  max-width: 58ch;
}
.statement-lead strong, .statement-lead em { color: var(--paper); }

/* ---------- chapters (flowing sections) ---------- */
.chapter { position: relative; padding: clamp(6rem, 12vh, 9rem) var(--pad); }
.chapter-inner { max-width: 72rem; margin: 0 auto; }
.chapter-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
}
.chapter-meta .fig { color: var(--magenta); }
.chapter-meta .rule { flex: 0 1 120px; height: 1px; background: var(--line-strong); }

.chapter-body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.chapter-text p { margin-bottom: 1.3rem; color: var(--paper-dim); font-size: 1.05rem; }
.chapter-text strong { color: var(--paper); font-weight: 500; }

.pull {
  margin: 2.2rem 0 0;
  padding: 1.6rem 1.8rem;
  border-radius: 18px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-left: 2px solid var(--magenta);
  font-size: 1.15rem;
  line-height: 1.5;
  max-width: 46ch;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 70px -30px var(--accent-dim);
}
.pull-label { display: block; margin-bottom: 0.6rem; color: var(--magenta); }

/* ---------- stepper: pinned, one card at a time ---------- */
.stepper { position: relative; }
.stepper-stage {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 6rem var(--pad) 4rem;
  overflow: hidden;
}
.stepper-head { text-align: center; margin-bottom: 2.6rem; }
.stepper-head h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
.stepper-head .chapter-meta { justify-content: center; margin-bottom: 1.4rem; }

.steps {
  position: relative;
  width: min(46rem, 94vw);
  min-height: clamp(20rem, 52vh, 27rem);
}
.step {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.8rem, 4vw, 3rem);
  opacity: 0;
  transform: translateY(70px) scale(0.96);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.step.active { opacity: 1; transform: none; pointer-events: auto; }
/* JS drives opacity/transform per frame — kill the CSS transition so it doesn't smear */
.stepper-smooth .step { transition: none; }
.stepper-smooth .step.active { pointer-events: auto; }

.step .s-num { margin-bottom: 1rem; display: block; color: color-mix(in srgb, var(--hue, var(--magenta)) 85%, white); }
.step h3 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: 0.9rem; }
.step p { color: var(--paper-dim); font-size: clamp(0.98rem, 1.5vw, 1.12rem); max-width: 52ch; }
.step p strong, .step p em { color: var(--paper); }

.step-dots { display: flex; gap: 0.55rem; margin-top: 2.4rem; }
.step-dot {
  width: 30px; height: 3px;
  border-radius: 3px;
  background: var(--line-strong);
  transition: background 300ms ease, box-shadow 300ms ease;
}
.step-dot.on { background: var(--grad); box-shadow: 0 0 12px var(--accent-dim); }

/* ---------- story panels: one idea, one screen, one living graphic ---------- */
.panel {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 6rem var(--pad);
}
.panel-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  max-width: 72rem;
  margin: 0 auto;
  width: 100%;
}
.panel.flip .panel-inner { direction: rtl; }
.panel.flip .panel-inner > * { direction: ltr; }

.panel-gfx {
  aspect-ratio: 1 / 1;
  width: min(30rem, 100%);
  margin: 0 auto;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
}
.panel-gfx svg { width: 100%; height: 100%; overflow: visible; }
.gfx-cap { text-align: center; margin-top: 0.4rem; color: var(--paper-dim); opacity: 0.75; }

.panel-txt .chapter-meta { margin-bottom: 1.6rem; }
.panel-txt h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); font-weight: 600; letter-spacing: -0.015em; }
.panel-lead {
  margin-top: 1.2rem;
  color: var(--paper-dim);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  max-width: 54ch;
}
.panel-lead strong, .panel-lead em { color: var(--paper); }

/* energy packets riding the K12 links — light travelling the wires.
   offset-rotate:auto turns each ellipse into a streak along its own route. */
.kpacket {
  fill: var(--accent);
  opacity: 0;
  offset-rotate: auto;
  offset-distance: 0%;
  filter: drop-shadow(0 0 4px var(--accent)) drop-shadow(0 0 11px rgba(184, 169, 144, 0.85));
}
.panel-gfx.visible .kpacket {
  animation-name: kpacket-run;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes kpacket-run {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .panel-gfx.visible .kpacket { animation: none; opacity: 0.9; offset-distance: 50%; }
}
@keyframes travel {
  0% { offset-distance: 0%; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* ---------- lens glyphs ---------- */
.step { position: absolute; }
.curve { width: 100%; max-width: 860px; overflow: visible; }
.curve .stage circle { fill: var(--bg); stroke: var(--paper-dim); stroke-width: 1.5; }
.curve .stage text {
  fill: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-anchor: middle;
}
.curve .stage { opacity: 0; transition: opacity 0.6s ease; }

/* ---------- origins: exploded object ---------- */
.drawing { text-align: center; }
.drawing figcaption { margin-top: 1rem; }
.exploded { width: 100%; max-width: 340px; overflow: visible; }
.exploded ellipse, .exploded path, .exploded line {
  fill: none;
  stroke: var(--paper);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.exploded .ghost { stroke-dasharray: 4 5; opacity: 0.4; }
.exploded .axis { stroke: var(--magenta); stroke-dasharray: 2 6; opacity: 0.8; }
.exploded .callout line { stroke: var(--line-strong); stroke-width: 1; }
.exploded .callout text {
  fill: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.part { transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.drawing:not(.visible) .callout, .drawing:not(.visible) .axis { opacity: 0; }
.callout, .axis { transition: opacity 0.8s ease 0.8s; }

/* ---------- the company, exploded (scroll-scrubbed) ---------- */
.scrub-wrap { position: relative; height: 260vh; }
.scrub-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4.5rem var(--pad) 1rem;
}
.company-fig { margin: 0 auto; text-align: center; width: 100%; }
.company-fig figcaption { margin-top: 0.4rem; }
.company {
  height: min(82svh, 900px);
  max-width: 100%;
  overflow: visible;
}

.co-fill { fill: rgba(5, 5, 14, 0.92); stroke: none; }
.co-grid line { stroke: rgba(184, 169, 144, 0.10); stroke-width: 0.7; }
.co-outline {
  fill: none;
  stroke: color-mix(in srgb, var(--hue, var(--violet)) 80%, white 20%);
  stroke-width: 1.3;
}
.co-ring { fill: none; stroke: color-mix(in srgb, var(--hue, var(--violet)) 65%, transparent); stroke-width: 1; stroke-dasharray: 4 5; }
.co-cube .cf-top { fill: rgba(8, 8, 20, 0.9); stroke: color-mix(in srgb, var(--hue, var(--violet)) 75%, white 25%); stroke-width: 1; }
.co-cube .cf-side { fill: rgba(0, 0, 0, 0.35); stroke: color-mix(in srgb, var(--hue, var(--violet)) 55%, transparent); stroke-width: 1; }
.co-route { fill: none; stroke: color-mix(in srgb, var(--hue, var(--violet)) 80%, white 15%); stroke-width: 1.3; }
.co-routedot { fill: var(--bg); stroke: color-mix(in srgb, var(--hue, var(--violet)) 85%, white 15%); stroke-width: 1.2; }
.co-arrowhead { fill: var(--hue, var(--magenta)); }
.co-tie { stroke: rgba(184, 169, 144, 0.3); stroke-width: 1; }
.co-person {
  fill: var(--bg);
  stroke: var(--hue, var(--magenta));
  stroke-width: 1.5;
}
.co-axis { stroke: url(#coAxisGrad); stroke-width: 1.4; stroke-dasharray: 3 7; opacity: 0.9; }
.co-axis-cap { fill: var(--blue); }

.cs-bracket { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.cs-label {
  fill: var(--hue, var(--paper));
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: 0.16em;
}
.cs-item {
  fill: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
}
.cs-num {
  fill: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-anchor: middle;
}

.co-layer { cursor: default; }
.co-layer:hover .co-outline {
  stroke: var(--hue, var(--magenta));
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--hue, var(--magenta)) 70%, transparent));
}
.co-side.hot .cs-label { fill: var(--paper); }
.co-side.hot .cs-item { fill: var(--paper); }
.co-side.hot .cs-bracket { stroke: var(--hue, var(--magenta)); }

/* scrub: explosion driven by scroll position */
.company-fig[data-scrub] .co-layer {
  transform: translateY(calc(var(--collapse, 0px) * (1 - var(--sp, 0))));
  opacity: calc(0.25 + var(--sp, 0) * 0.75);
  transition: transform 0.2s linear, opacity 0.2s linear;
}
.company-fig[data-scrub] .co-sides, .company-fig[data-scrub] .co-axis-g {
  opacity: var(--sp, 0);
  transition: opacity 0.25s linear;
}
.scrub-hint { color: var(--paper-dim); opacity: 0.7; margin-top: 0.4rem; }

/* ---------- work ---------- */
.work-intro { color: var(--paper-dim); font-size: 1.1rem; margin-bottom: 3rem; }
.work-list { display: flex; flex-direction: column; gap: 1rem; }
.work-item {
  display: flex;
  gap: clamp(1.2rem, 4vw, 3rem);
  align-items: baseline;
  padding: 1.7rem 1.8rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  transition: all 250ms ease;
}
.work-item:hover {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translateX(8px);
  box-shadow: 0 0 70px -25px var(--hue, var(--violet));
}
.w-num { color: var(--hue, var(--magenta)); flex: 0 0 3.5rem; }
.work-item h3 { font-size: 1.3rem; margin-bottom: 0.35rem; }
.work-item p { color: var(--paper-dim); font-size: 0.98rem; }

/* ---------- deep end ---------- */
.deep-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  margin-top: 3rem;
}
.deep-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 2.1rem 1.9rem 2.3rem;
  text-decoration: none;
  color: inherit;
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.deep-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(184, 169, 144, 0.16),
    0 0 110px -25px var(--hue, var(--violet));
}
.dc-kicker { color: var(--hue, var(--magenta)); }
.deep-card h3 { font-size: 1.4rem; }
.deep-card p { color: var(--paper-dim); font-size: 0.95rem; flex: 1; }
.dc-link { color: var(--paper); }
.deep-card:hover .dc-link { color: var(--hue, var(--magenta)); }
.deep-card-join .btn-primary { align-self: flex-start; margin-top: 0.4rem; }

/* ---------- connect ---------- */
.connect { min-height: 90svh; display: flex; align-items: center; }
.connect .chapter-inner { width: 100%; }
.connect-title { font-size: clamp(2rem, 5vw, 3.8rem); }
.connect-sub { color: var(--paper-dim); font-size: 1.1rem; margin-top: 1.4rem; max-width: 52ch; }
.connect-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.8rem; }

.footer {
  display: flex;
  gap: 0.8rem;
  margin-top: clamp(4rem, 10vh, 7rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--paper-dim);
}
.footer-dot { color: var(--magenta); }

/* ---------- modal ---------- */
body.modal-open { overflow: hidden; }
.modal-backdrop[hidden] { display: none; }
.modal-form[hidden] { display: none; }
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(2, 2, 8, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity 320ms ease;
}
.modal-backdrop.is-open { opacity: 1; }
.modal {
  position: relative;
  width: min(30rem, 100%);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  padding: 2.5rem 2.3rem 2.3rem;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7), 0 0 130px -35px var(--violet);
  animation: modal-in 320ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
/* Membership panel — solid (no glass), site orange var(--paper) */
.modal.modal-auth {
  --m-amber: var(--paper);
  --m-amber-soft: rgba(184, 169, 144, 0.85);
  --m-amber-dim: rgba(184, 169, 144, 0.16);
  --m-amber-line: rgba(184, 169, 144, 0.25);
  --m-amber-glow: rgba(184, 169, 144, 0.14);
  width: min(22.5rem, 100%);
  max-height: min(92dvh, 92vh);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.75rem 1.35rem 1.5rem;
  overscroll-behavior: contain;
  /* solid plate — kill translucent glass */
  background: #121214;
  border: 1px solid rgba(184, 169, 144, 0.14);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.65);
  transform: translateY(16px) scale(0.97);
  opacity: 0;
  animation: none;
  transition:
    opacity 380ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 480ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 500ms ease;
}
.modal.modal-auth.is-powering {
  opacity: 1;
  transform: none;
}
.modal.modal-auth.is-lit {
  border-color: rgba(184, 169, 144, 0.28);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.65);
}
/* no specular glass edge on membership */
.modal.modal-auth::after { display: none !important; content: none !important; }
/* top power rail — dormant → lights (flat accent bar) */
.modal::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad);
}
.modal.modal-auth::before {
  height: 2px;
  background: var(--paper);
  opacity: 0;
  transform: scaleX(0.22);
  transform-origin: center;
  transition: opacity 500ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: none;
}
.modal.modal-auth.is-powering::before {
  opacity: 0.55;
  transform: scaleX(0.55);
}
.modal.modal-auth.is-lit::before {
  opacity: 1;
  transform: scaleX(1);
}
@keyframes modal-in { from { opacity: 0; transform: translateY(20px) scale(0.98); } }
.modal-close {
  position: absolute;
  top: 1rem; right: 1rem;
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--paper-dim);
  width: 2.1rem; height: 2.1rem;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
  z-index: 2;
}
.modal-close:hover { color: var(--paper); border-color: var(--line-strong); }
.modal.modal-auth .modal-close:hover {
  color: var(--m-amber);
  border-color: var(--m-amber-line);
}
.modal-kicker { color: var(--magenta); margin-bottom: 0.9rem; }
.modal h3 { font-size: 1.6rem; margin-bottom: 0.7rem; }
.modal-sub { color: var(--paper-dim); font-size: 0.98rem; margin-bottom: 1.4rem; }
.modal-form, .modal-signin { display: flex; flex-direction: column; gap: 0.3rem; }
.modal-form label, .modal-signin label {
  margin-top: 0.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
}
/* Field names — original accent orange (flat, no glow) */
.modal.modal-auth .modal-form label,
.modal.modal-auth .modal-signin label {
  color: var(--m-amber-soft);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-shadow: none;
  transition: color 400ms ease, opacity 400ms ease;
}
.modal.modal-auth.is-lit .modal-form label,
.modal.modal-auth.is-lit .modal-signin label {
  color: var(--m-amber);
  text-shadow: none;
}
.modal-form input, .modal-form textarea, .modal-signin input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line-strong);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: max(1rem, 16px);   /* ≥16px or iOS zooms the page on focus */
  line-height: 1.4;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, opacity 360ms ease, transform 360ms ease;
}
.modal-form textarea {
  resize: vertical;
  min-height: 4.25rem;
  font-family: inherit;
}
.modal-form input:focus, .modal-form textarea:focus, .modal-signin input:focus {
  border-color: var(--m-amber-line, rgba(184, 169, 144, 0.28));
  box-shadow: 0 0 0 3px var(--m-amber-dim, rgba(184, 169, 144, 0.14));
}
.modal-form input::placeholder, .modal-form textarea::placeholder, .modal-signin input::placeholder {
  color: rgba(184, 169, 144, 0.32);
}
.modal-fieldset {
  border: 1px solid rgba(184, 169, 144, 0.12);
  border-radius: 14px;
  padding: 0.75rem 0.9rem 1rem;
  margin: 0 0 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.modal-legend {
  padding: 0 0.35rem;
  color: var(--m-amber-soft, rgba(184, 169, 144, 0.8));
  font-size: 0.62rem;
  letter-spacing: 0.14em;
}
/* Solid flat orange CTA — no glow rim, no metallic perimeter */
.modal.modal-auth .modal-submit,
.modal.modal-auth .modal-done {
  margin-top: 0;
  border: none;
  cursor: pointer;
  justify-content: center;
  min-height: 48px;
  width: 100%;
  flex: 1;
  border-radius: 999px;
  color: #0a0210;
  font-weight: 600;
  background: var(--paper);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow: none;
  transition: transform 200ms ease, filter 200ms ease;
}
.modal.modal-auth .modal-submit .mono,
.modal.modal-auth .modal-done .mono {
  color: #0a0210;
}
.modal.modal-auth .modal-submit:hover,
.modal.modal-auth .modal-done:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: none;
  background: var(--paper);
  border: none;
}
.modal.modal-auth .modal-submit:disabled {
  opacity: 0.55;
  transform: none;
  cursor: wait;
  filter: none;
}
.modal-error { color: var(--m-amber, var(--paper)); margin-top: 0.5rem; line-height: 1.45; }
.modal-fineprint { margin-top: 0.8rem; color: var(--paper-dim); opacity: 0.7; text-align: center; }
.modal-success .modal-done {
  margin-top: 0.5rem;
}

/* ---------- membership multi-step + boot choreography ---------- */
.ms-progress {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 1.15rem;
}
.ms-progress[hidden] { display: none; }
.ms-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: rgba(184, 169, 144, 0.18);
  transition: background 280ms ease, transform 280ms ease, box-shadow 320ms ease;
}
.ms-dot.is-done {
  background: rgba(184, 169, 144, 0.25);
}
.ms-dot.is-on {
  background: var(--m-amber, var(--paper));
  transform: scale(1.2);
  box-shadow: 0 0 0 3px rgba(184, 169, 144, 0.16);
}
.ms-count {
  margin-left: 0.35rem;
  color: var(--paper-dim);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
}
.ms-step {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-height: 0;
}
.ms-step[hidden] { display: none; }
.ms-nav {
  display: flex;
  align-items: stretch;
  gap: 0.65rem;
  margin-top: 1.15rem;
}
.ms-back {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 1rem;
  justify-content: center;
  border-color: rgba(184, 169, 144, 0.22);
  color: var(--paper);
}
.ms-back:hover {
  border-color: rgba(184, 169, 144, 0.25);
  color: var(--m-amber, var(--paper));
  background: rgba(184, 169, 144, 0.06);
}
.ms-back[hidden] { display: none; }
.modal-form .ms-step label { margin-top: 0.65rem; }
.modal-form .ms-step label:first-of-type { margin-top: 0; }
.modal.modal-auth .modal-sub {
  margin-bottom: 1rem;
  font-size: 0.92rem;
  line-height: 1.45;
  max-width: 34ch;
  min-height: 1.4em;
}
.modal.modal-auth h3 {
  font-size: 1.45rem;
  margin-bottom: 0.45rem;
  letter-spacing: -0.02em;
  min-height: 1.25em;
}
.modal.modal-auth .modal-kicker {
  margin-bottom: 0.55rem;
  color: rgba(184, 169, 144, 0.55);
  min-height: 1em;
  transition: color 450ms ease;
  text-shadow: none;
}
.modal.modal-auth.is-lit .modal-kicker {
  color: var(--m-amber);
  text-shadow: none;
}
/* typing caret while title/kicker stream in */
.modal.modal-auth .is-typing::after {
  content: "▋";
  display: inline-block;
  margin-left: 0.12em;
  color: var(--m-amber-soft);
  font-size: 0.72em;
  vertical-align: 0.05em;
  animation: auth-blink 0.85s steps(1) infinite;
  opacity: 0.75;
}
@keyframes auth-blink {
  0%, 49% { opacity: 0.75; }
  50%, 100% { opacity: 0; }
}
/* Boot: body is a quiet stage; each .auth-beat enters alone (guides the eye) */
.modal.modal-auth.is-booting .auth-body {
  opacity: 1;
  transform: none;
  pointer-events: none;
}
.modal.modal-auth.is-ready .auth-body {
  pointer-events: auto;
}
/* Sequential cinematic beats — 50% slower ease (guide the eye) */
.modal.modal-auth .auth-beat {
  opacity: 0;
  transform: translateY(14px);
  will-change: opacity, transform;
}
.modal.modal-auth .auth-beat.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.87s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.02s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Labels: soft lift */
.modal.modal-auth .auth-beat-label.is-in {
  transition-duration: 0.72s, 0.82s;
}
/* Fields: slightly deeper rise */
.modal.modal-auth .auth-beat-field {
  transform: translateY(16px);
}
.modal.modal-auth .auth-beat-field.is-in {
  transition-duration: 0.93s, 1.08s;
}
/* CTA: last, longer ease — the settle */
.modal.modal-auth .auth-beat-cta {
  transform: translateY(22px) scale(0.94);
  filter: brightness(0.88);
}
.modal.modal-auth .auth-beat-cta.is-in {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity 1.12s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.42s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.35s ease;
}
/* Progress dots: horizontal expand feel */
.modal.modal-auth .auth-beat-progress {
  transform: translateY(8px) scaleX(0.92);
  transform-origin: left center;
}
.modal.modal-auth .auth-beat-progress.is-in {
  transition-duration: 0.82s, 1.05s;
}
.modal.modal-auth .modal-sub {
  opacity: 0;
  transform: translateY(6px);
}
.modal.modal-auth .modal-sub.auth-sub-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.82s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal.modal-auth .modal-kicker,
.modal.modal-auth #modal-title {
  transition: opacity 0.2s ease;
}
.modal.modal-auth .modal-switch .link-btn {
  color: var(--m-amber-soft);
}
.modal.modal-auth .modal-switch .link-btn:hover {
  color: var(--m-amber);
}
.modal.modal-auth .modal-captcha-q {
  color: var(--paper);
  background: rgba(184, 169, 144, 0.07);
  border: 1px solid rgba(184, 169, 144, 0.12);
}
.modal.modal-auth .modal-captcha-refresh {
  color: var(--m-amber-soft);
}
@media (prefers-reduced-motion: reduce) {
  .modal-backdrop { transition: none; opacity: 1; }
  .modal.modal-auth {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .modal.modal-auth::before { transition: none; opacity: 1; transform: none; }
  .modal.modal-auth.is-booting .auth-body { pointer-events: auto; }
  .modal.modal-auth .auth-beat,
  .modal.modal-auth .auth-beat.is-in,
  .modal.modal-auth .auth-beat-cta,
  .modal.modal-auth .auth-beat-cta.is-in,
  .modal.modal-auth .modal-sub,
  .modal.modal-auth .modal-sub.auth-sub-in {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .modal.modal-auth .is-typing::after { display: none; }
}

/* ---------- first-visit name gate ---------- */
.ng {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.ng.in { opacity: 1; }
.ng.out { opacity: 0; }
.ng-inner {
  width: min(28rem, 100%);
  background: var(--glass-bg-solid, #121214);
  border: 1px solid var(--glass-border);
  border-radius: 20px 20px 0 0;
  padding: 1.6rem 1.25rem calc(1.4rem + env(safe-area-inset-bottom));
  transform: translateY(12px);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.ng.in .ng-inner { transform: none; }
.ng-kicker { color: var(--accent); margin-bottom: 0.6rem; font-size: 0.62rem; letter-spacing: 0.14em; }
.ng-title { font-size: 1.55rem; letter-spacing: -0.02em; margin: 0 0 0.55rem; }
.ng-text { color: var(--paper-dim); font-size: 0.95rem; line-height: 1.55; margin: 0 0 1.1rem; }
.ng-form { display: flex; flex-direction: column; gap: 0.35rem; }
.ng-form label { font-size: 0.68rem; letter-spacing: 0.1em; margin-top: 0.3rem; }
.ng-form input {
  font-size: max(1rem, 16px);
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(184, 169, 144, 0.22);
  background: rgba(0, 0, 0, 0.35);
  color: var(--paper);
  outline: none;
}
.ng-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(184, 169, 144, 0.12); }
.ng-actions { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 1rem; }
.ng-actions .btn-primary { min-height: 48px; justify-content: center; }
.ng-error { color: var(--coral, var(--paper)); font-size: 0.68rem; }
.hero-greet {
  color: var(--accent);
  margin-bottom: 0.85rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
@media (min-width: 720px) {
  .ng { align-items: center; padding: 1.5rem; }
  .ng-inner { border-radius: 20px; padding: 2rem 1.75rem; }
}

/* captcha + honeypot */
.modal-captcha { border-color: rgba(184, 169, 144, 0.28); }
.modal-captcha-q {
  color: var(--paper);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  margin: 0.35rem 0 0.5rem;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  background: rgba(184, 169, 144, 0.08);
  border: 1px solid rgba(184, 169, 144, 0.2);
}
.modal-captcha-refresh {
  margin-top: 0.65rem;
  align-self: flex-start;
  font-size: 0.68rem;
}
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.modal-turnstile { margin-top: 0.75rem; min-height: 65px; }

@media (max-width: 560px) {
  .modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }
  .modal.modal-auth {
    width: 100%;
    max-width: 100%;
    max-height: min(94dvh, 94vh);
    border-radius: 20px 20px 0 0;
    padding: 1.5rem 1.1rem calc(1.25rem + env(safe-area-inset-bottom));
  }
  .modal h3 { font-size: 1.45rem; }
  .modal-sub { font-size: 0.95rem; margin-bottom: 1rem; }
}

/* ---------- inner pages (blog / world) ---------- */
.page { padding-top: 5rem; position: relative; z-index: 1; }
.page-head { padding: clamp(3rem, 8vh, 6rem) var(--pad) 1rem; }
.page-head .chapter-inner { max-width: 72rem; margin: 0 auto; }
.page-title {
  font-size: clamp(2.2rem, 5.5vw, 4.2rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 1.2rem;
}
.page-sub { color: var(--paper-dim); font-size: 1.1rem; max-width: 58ch; }

/* field notes: list */
.article-list { margin: 3.5rem 0 5rem; display: flex; flex-direction: column; gap: 1.4rem; }

/* field notes: article */
.article-view { padding: clamp(2rem, 6vh, 4rem) var(--pad) 6rem; }
.article-inner { max-width: 46rem; margin: 0 auto; }
.back-link { text-decoration: none; color: var(--paper-dim); transition: color 160ms ease; }
.back-link:hover { color: var(--magenta); }
.article-head { margin: 2.2rem 0 3rem; }
.article-fig { color: var(--magenta); margin-bottom: 1rem; }
.article-title {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 1rem;
}
.article-meta-line { color: var(--paper-dim); }
.article-body p {
  color: var(--paper-dim);
  font-size: 1.08rem;
  line-height: 1.75;
  margin-bottom: 1.4rem;
  max-width: none;
}
.article-body strong { color: var(--paper); font-weight: 500; }
.article-body em { color: var(--paper); }
.article-body h3 { font-size: 1.35rem; margin: 2.4rem 0 1rem; color: var(--paper); }
.article-foot { margin-top: 4rem; border-top: 1px solid var(--line); padding-top: 2.5rem; }
.article-cta .mono { color: var(--magenta); margin-bottom: 0.8rem; }
.article-cta p:not(.mono) { color: var(--paper-dim); margin-bottom: 1.6rem; }

/* my world (immersive rules live in REV 9.0/9.6 blocks below) */
.wmap { width: 100%; overflow: visible; }
.wmap-edges line { stroke: var(--line-strong); stroke-width: 1; }
.wnode { cursor: pointer; outline: none; }
.wnode-dot { fill: var(--bg); stroke: var(--violet); stroke-width: 1.5; transition: fill 250ms ease, stroke 250ms ease; }
.wnode-halo {
  fill: none;
  stroke: rgba(139, 92, 255, 0.5);
  stroke-width: 1;
  opacity: 0;
  transition: opacity 250ms ease;
  transform-origin: center;
  transform-box: fill-box;
}
.wnode:hover .wnode-halo, .wnode:focus-visible .wnode-halo, .wnode.is-active .wnode-halo { opacity: 1; }
.wnode.is-active .wnode-dot { fill: var(--magenta); stroke: var(--magenta); filter: drop-shadow(0 0 8px var(--magenta)); }
.wnode.is-hub .wnode-dot { stroke-width: 2.5; stroke: var(--cyan); }
.wnode-label {
  fill: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-anchor: middle;
  transition: fill 250ms ease;
}
.wnode:hover .wnode-label, .wnode.is-active .wnode-label { fill: var(--paper); }
.wnode.is-locked .wnode-dot { stroke: var(--paper-dim); stroke-dasharray: 3 3; }
.wnode.is-locked .wnode-label { fill: rgba(77, 217, 255, 0.6); }
.wnode.is-locked.is-unlocked .wnode-dot { stroke: var(--cyan); stroke-dasharray: none; }
.wnode.is-locked.is-unlocked .wnode-label { fill: var(--paper-dim); }

.wp-inner {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border-left: 2px solid var(--magenta);
  padding: 2.3rem 2.3rem 2.5rem;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), 0 0 90px -30px var(--magenta);
}
.wp-kicker { color: var(--magenta); margin-bottom: 1rem; }
.wp-title { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 1.1rem; }
.wp-body p { color: var(--paper-dim); font-size: 1.02rem; line-height: 1.7; margin-bottom: 1.1rem; max-width: none; }
.wp-body strong { color: var(--paper); font-weight: 500; }
.wp-body em { color: var(--paper); }
.wp-note { color: var(--cyan) !important; font-size: 0.72rem !important; line-height: 1.7 !important; }
.wp-swap { animation: wp-in 400ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes wp-in { from { opacity: 0; transform: translateY(14px); } }

/* ---------- reveals ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible { opacity: 1; transform: none; }
.d1 { transition-delay: 0.08s; }
.d2 { transition-delay: 0.18s; }
.d3 { transition-delay: 0.28s; }
.d4 { transition-delay: 0.42s; }
.d5 { transition-delay: 0.6s; }

/* ---------- lazy rendering ---------- */
/* NOTE: never put #connect here — content-visibility + .reveal left the
   offer section blank (IO never painted children as visible). */
#origins, #work, #deeper {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* homepage safety: content is always readable (no stuck opacity:0 reveals) */
body.home-page .reveal {
  opacity: 1;
  transform: none;
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
}
@media (max-width: 860px) {
  .chapter-body { grid-template-columns: 1fr; }
  .drawing { order: -1; }
  .exploded { max-width: 240px; }
  .deep-grid { grid-template-columns: 1fr; }
  .nav { padding: 0.9rem 1rem; }
  .nav-links { gap: 0.7rem; }
  .nav-links a, .nav-links button { font-size: 0.62rem; letter-spacing: 0.06em; }
  .nav-links a[href$="#connect"] { display: none; }
  .nav-cta { padding: 0.35rem 0.55rem; }
  .page { padding-top: 4rem; }
  .thread { left: 8px; }
  .hero-content { margin-left: 1.2rem; }
  .panel { padding: 4.5rem 1.25rem; }
  .panel-inner { grid-template-columns: 1fr; gap: 2rem; }
  .panel.flip .panel-inner { direction: ltr; }
  .panel-gfx { width: min(22rem, 100%); }
  /* company sizing is owned by the mobile flawless pass at end of file */
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .part { transition: none; }
  .scroll-line::after, .blink { animation: none; }
  .curve .stage { opacity: 1; transition: none; }
  .modal, .wp-swap { animation: none; }
  .panel-gfx.visible .kpacket { animation: none; }
  .step { position: relative; opacity: 1; transform: none; transition: none; margin-bottom: 1.2rem; pointer-events: auto; }
  .steps { min-height: 0; }
  .stepper-stage { position: static; min-height: 0; }
  .stepper { height: auto !important; }
  .company-fig[data-scrub] .co-layer { transform: none; opacity: 1; transition: none; }
  .company-fig[data-scrub] .co-sides,
  .company-fig[data-scrub] .co-axis-g { opacity: 1; }
  .scrub-wrap { height: auto; }
  .scrub-sticky { position: static; height: auto; }
}

/* ============================================================
   REV 4.0 — "DAYLIGHT" · stat-story editorial reskin
   Paper ground, ink type, one orange. Appended last: wins cascade.
   ============================================================ */

body { font-weight: 400; }
::selection { background: var(--accent); color: var(--bg); }
.accent { color: var(--accent); }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.03em; }

/* aurora retired — paper needs no weather */
.aurora { display: none; }

/* glass retired → editorial card */
.glass, .wp-inner, .deep-card, .modal {
  background: var(--paper);
  border: 1px solid rgba(184, 169, 144, 0.16);
  border-radius: 24px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.glass:hover, .deep-card:hover {
  box-shadow: 0 2px 0 rgba(184, 169, 144, 0.12);
}
.deep-card:hover { border-color: rgba(184, 169, 144, 0.4); transform: translateY(-4px); }
.work-item:hover {
  background: var(--paper);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-color: rgba(184, 169, 144, 0.3);
}
.pull {
  background: var(--paper);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-left: 3px solid var(--accent);
}

/* nav: paper bar, hairline rule */
.nav {
  background: rgba(184, 169, 144, 0.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav-cta { border-radius: 999px; }
.nav-cta:hover { background: var(--accent); color: var(--bg) !important; }
.nav-cta.is-member:hover { color: var(--accent) !important; border-color: var(--accent); background: none; }

/* buttons: flat orange — no metallic rim or cream under-edge */
.btn-primary {
  background: var(--paper);
  color: #141414;
  font-weight: 700;
  border: none;
  box-shadow: none;
}
.btn-primary .mono { color: #141414; }
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: none;
  filter: brightness(1.06);
  background: var(--paper);
}
.btn-ghost { border: 1px solid rgba(184, 169, 144, 0.35); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: none; }

/* hero: ink lines on paper */
.hero-grid { display: none !important; opacity: 0; }
.hero-sub strong { color: var(--paper); }
.hero-hint { color: var(--accent); opacity: 0.75; }

/* thread: ink track, orange progress */
.thread { background: rgba(184, 169, 144, 0.1); }
.thread-fill { box-shadow: none; }
.thread-fill::after { background: var(--accent); box-shadow: none; border-radius: 0; }

/* steppers */
.step-dot.on { box-shadow: none; }
.step .s-num { color: var(--hue, var(--accent)); }

/* curve: one orange line { stroke: var(--accent); filter: none; }
.curve .stage circle { fill: var(--bg); stroke: var(--paper-dim); }

/* panel graphics: ink primitives { filter: none; }
.bar { background: rgba(184, 169, 144, 0.14); }
.bar.hot { background: var(--accent); }
.co-person, .co-routedot, .wnode-dot { fill: var(--bg); }

/* the company, exploded: ink plates, orange axis */
.co-fill { fill: var(--bg); }
.co-cube .cf-top { fill: var(--bg); }
.co-cube .cf-side { fill: rgba(184, 169, 144, 0.08); }
.co-axis { stroke: var(--accent); }
.co-axis-cap { fill: var(--accent); }
.co-layer:hover .co-outline { filter: none; }

/* world map */
.wnode.is-active .wnode-dot { fill: var(--accent); stroke: var(--accent); filter: none; }
.wnode-halo { stroke: rgba(184, 169, 144, 0.3); }
.wnode.is-locked .wnode-label { fill: rgba(184, 169, 144, 0.65); }
.wp-inner { border-left: 3px solid var(--accent); }

/* modal: paper sheet */
.modal-backdrop { background: rgba(184, 169, 144, 0.35); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal-form input, .modal-form textarea, .modal-signin input {
  background: rgba(16, 16, 18, 0.75);
  border: 1px solid rgba(184, 169, 144, 0.22);
  color: var(--paper);
}
.modal-form input:focus, .modal-form textarea:focus, .modal-signin input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(184, 169, 144, 0.12);
}
.modal-form input::placeholder, .modal-form textarea::placeholder, .modal-signin input::placeholder { color: rgba(184, 169, 144, 0.35); }

/* type accents that were "magenta semantic" stay orange via tokens;
   dim any leftover dark-mode text emphasis */
.article-body strong, .wp-body strong, .chapter-text strong, .panel-lead strong, .statement-lead strong { color: var(--paper); }

/* ============================================================
   REV 4.1 — dark technical panel (fig. 03a) + hive archive
   ============================================================ */

/* ---------- fig. 03a: the company, exploded — dark mode ---------- */
.scrub-wrap.co-dark { background: var(--bg); }
.co-dark .scrub-sticky { position: sticky; overflow: hidden; }
.co-dark .scrub-sticky::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(184, 169, 144, 0.16) 1px, transparent 1.4px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, black 35%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, black 35%, transparent 80%);
  pointer-events: none;
}
.co-dark .company-fig { position: relative; z-index: 1; }

.co-dark .co-fill { fill: #101010; }
.co-dark .co-grid line { stroke: rgba(184, 169, 144, 0.09); }
.co-dark .co-tie { stroke: rgba(184, 169, 144, 0.35); }
.co-dark .co-cube .cf-top { fill: #181818; }
.co-dark .co-cube .cf-side { fill: rgba(184, 169, 144, 0.05); }
.co-dark .co-person, .co-dark .co-routedot { fill: #101010; }
.co-dark .co-ring { stroke: rgba(184, 169, 144, 0.4); }
.co-dark .cs-item { fill: rgba(184, 169, 144, 0.55); }
.co-dark .cs-num { fill: rgba(184, 169, 144, 0.45); }
.co-dark .cs-bracket { stroke: rgba(184, 169, 144, 0.28); }
.co-dark .co-side.hot .cs-label, .co-dark .co-side.hot .cs-item { fill: var(--paper); }
.co-dark .co-side.hot .cs-bracket { stroke: var(--accent); }
.co-dark figcaption, .co-dark .scrub-hint { color: rgba(184, 169, 144, 0.55); }

/* ---------- the hive: field notes as honeycomb ---------- */
.hive {
  --hex-w: clamp(190px, 24vw, 250px);
  --hex-h: calc(var(--hex-w) * 1.1547);
  --hex-gap: 10px;
  margin: 3.5rem 0 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hive-row { display: flex; gap: var(--hex-gap); }
.hive-row + .hive-row {
  margin-top: calc(var(--hex-h) * -0.25 + var(--hex-gap) * 0.85);
}
.hive-row:nth-child(even) {
  transform: translateX(calc((var(--hex-w) + var(--hex-gap)) / -2));
}

.hex {
  position: relative;
  width: var(--hex-w);
  height: var(--hex-h);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: block;
  text-decoration: none;
  color: inherit;
  background: rgba(184, 169, 144, 0.3);          /* becomes the 1.5px hex border */
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.hex:hover { transform: translateY(-5px); }
.hex-face {
  position: absolute;
  inset: 1.5px;
  clip-path: inherit;
  background: var(--paper);
  transition: background 0.25s ease;
}
.hex-inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  text-align: center;
  padding: 20% 15%;
  transition: color 0.25s ease;
}
.hx-fig { color: var(--accent); }
.hx-title {
  font-weight: 700;
  font-size: clamp(0.95rem, 1.5vw, 1.14rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
}
.hx-meta { font-size: 0.62rem; }
.hex:hover .hex-face { background: #141414; }
.hex:hover .hex-inner { color: var(--paper); }
.hex:hover .hx-meta { color: rgba(184, 169, 144, 0.6); }

/* locked notes: ink cells — the dark comb */
.hex.is-locked .hex-face { background: #141414; }
.hex.is-locked .hex-inner { color: var(--paper); }
.hex.is-locked .hx-meta { color: rgba(184, 169, 144, 0.55); }
.hex.is-locked:hover .hex-face { background: var(--accent); }
.hex.is-locked:hover .hex-inner { color: #141414; }
.hex.is-locked:hover .hx-fig, .hex.is-locked:hover .hx-meta { color: rgba(184, 169, 144, 0.7); }

/* siren cell: join */
.hex-join .hex-face { background: var(--accent); }
.hex-join .hex-inner { color: #141414; }
.hex-join .hx-fig, .hex-join .hx-meta { color: rgba(184, 169, 144, 0.65); }
.hex-join:hover .hex-face { background: #141414; }
.hex-join:hover .hex-inner { color: var(--paper); }
.hex-join:hover .hx-fig { color: var(--accent); }

@media (max-width: 760px) {
  .hive { --hex-w: 42vw; }
  .hive-row { flex-wrap: wrap; justify-content: center; }
  .hive-row + .hive-row { margin-top: var(--hex-gap); }
  .hive-row:nth-child(even) { transform: none; }
}

/* ============================================================
   REV 4.2 — the hive, descending
   Alternating 3/2 rows nest by centering — no manual offset.
   Ghost cells are the wax; content cells are the honey.
   ============================================================ */
.hive-row:nth-child(even) { transform: none; }
.hive-row { justify-content: center; }

.hex-ghost {
  cursor: default;
  background: rgba(184, 169, 144, 0.08);
}
.hex-ghost .hex-face { background: var(--paper); }
.hex-ghost:hover { transform: none; }

/* scroll-in: cells pop as the reader descends */
.hive .hex.reveal {
  opacity: 0;
  transform: translateY(30px) scale(0.9);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.hive .hex.reveal.visible { opacity: 1; transform: none; }
/* after arrival, hover lift snaps back to quick */
.hive .hex.reveal.visible:hover {
  transform: translateY(-5px);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 760px) {
  .hex-ghost { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hive .hex.reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   REV 4.3 — the globe: globalization as a rippling network
   Dark technical card (matches fig. 03a panel + hive dark cells)
   ============================================================ */
.panel-gfx.gfx-dark { background: #101010; border-color: rgba(184, 169, 144, 0.45); }
.gfx-dark .gfx-cap { color: rgba(184, 169, 144, 0.55); }
@keyframes gripple {
  0%   { transform: scale(0.15); opacity: 0.9; }
  70%  { opacity: 0.15; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ============================================================
   REV 4.4 — the academy: a lineage timeline
   Left rail, portrait plates in house treatment, lazy images.
   ============================================================ */
.tl-wrap { padding: 1rem var(--pad) 7rem; }
.timeline {
  --rail-off: clamp(1.4rem, 5vw, 3rem);
  position: relative;
  max-width: 56rem;
  margin: 0 auto;
  padding-left: var(--rail-off);
}
.timeline::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5rem; bottom: 0.5rem;
  width: 2px;
  background: rgba(184, 169, 144, 0.14);
}

/* era dividers */
.tl-era { position: relative; margin: 5.5rem 0 3rem; }
.tl-era:first-child { margin-top: 1rem; }
.tl-era::before {
  content: "";
  position: absolute;
  left: calc(var(--rail-off) * -1 - 6px);
  top: 0.45rem;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
}
.tl-era-num { color: var(--accent); margin-bottom: 0.7rem; }
.tl-era h2 { font-size: clamp(1.9rem, 4.5vw, 3rem); margin-bottom: 0; }

/* entries */
.tl-entry {
  position: relative;
  display: grid;
  grid-template-columns: minmax(150px, 200px) 1fr;
  gap: clamp(1.4rem, 4vw, 2.6rem);
  align-items: start;
  margin-bottom: 4.5rem;
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}
.tl-entry::before {
  content: "";
  position: absolute;
  left: calc(var(--rail-off) * -1 - 4px);
  top: 0.7rem;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid rgba(184, 169, 144, 0.45);
}

/* portrait plates: house treatment */
.tl-plate {
  margin: 0;
  border: 1px solid rgba(184, 169, 144, 0.22);
  border-radius: 14px;
  background: var(--paper);
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.tl-entry:hover .tl-plate { transform: translateY(-4px); }
.tl-plate img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1) brightness(1.04);
  mix-blend-mode: multiply;
}
.tl-plate figcaption {
  padding: 0.55rem 0.8rem;
  border-top: 1px solid rgba(184, 169, 144, 0.14);
  font-size: 0.62rem;
}
.tl-no { color: var(--accent); }
.tl-initials {
  display: none;
  font-family: var(--font-mono);
  font-size: 2.4rem;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.tl-plate.img-missing img { display: none; }
.tl-plate.img-missing .tl-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
}

/* entry text */
.tl-kicker { color: var(--accent); margin-bottom: 0.6rem; }
.tl-body h3 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin-bottom: 0.7rem;
}
.tl-text { color: var(--paper-dim); font-size: 1.02rem; max-width: 58ch; }
.tl-text em { color: var(--paper); }
.tl-tag { margin-top: 1rem; color: var(--accent); }
.tl-credit { margin-top: 3rem; opacity: 0.65; }
.tl-end h2 { margin-bottom: 0; }

@media (max-width: 700px) {
  .tl-entry { grid-template-columns: 1fr; }
  .tl-plate { max-width: 220px; }
}

/* ============================================================
   REV 4.5 — the dashboard: member portal + admin system room
   ============================================================ */
.dash-sec { margin-top: clamp(3.5rem, 8vh, 5.5rem); }
.dash-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; padding-bottom: 4rem; }

/* vitals */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 2.8rem;
}
.stat-tile { padding: 1.5rem 1.6rem 1.4rem; }
.st-k { color: var(--accent); margin-bottom: 0.7rem; }
.st-n {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.st-n.st-date { font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
.st-unit { font-size: 0.45em; color: var(--paper-dim); margin-left: 0.3rem; letter-spacing: 0; }
.st-f { margin-top: 0.6rem; opacity: 0.8; }
.st-bar {
  margin-top: 0.9rem;
  height: 4px;
  border-radius: 4px;
  background: rgba(184, 169, 144, 0.12);
  overflow: hidden;
}
.st-bar span { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); }

/* subjects */
.dash-subjects { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.subject-tile {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  padding: 0.95rem 1.3rem;
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.subject-tile:hover { transform: translateY(-3px); border-color: var(--accent); }
.su-tag { color: var(--paper); font-size: 0.8rem; }
.su-n { color: var(--accent); }

/* library */
.dash-lib { display: flex; flex-direction: column; }
.lib-row {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: 1.1rem 0.4rem;
  border-bottom: 1px solid rgba(184, 169, 144, 0.14);
  text-decoration: none;
  color: inherit;
  transition: padding-left 0.2s ease;
}
.lib-row:first-child { border-top: 1px solid rgba(184, 169, 144, 0.14); }
.lib-row:hover { padding-left: 1rem; }
.lib-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  flex: 0 0 auto;
  align-self: center;
}
.lib-dot.is-read { background: var(--accent); }
.lib-fig { color: var(--accent); flex: 0 0 3.4rem; }
.lib-title { font-weight: 700; font-size: clamp(1rem, 1.8vw, 1.2rem); letter-spacing: -0.01em; }
.lib-meta { margin-left: auto; white-space: nowrap; }
.lib-row:hover .lib-meta { color: var(--accent); }
.ap-h { color: var(--accent); margin-bottom: 1rem; }
.ap-list { list-style: none; color: rgba(184, 169, 144, 0.7); line-height: 2.1; font-size: 0.68rem; }
.ap-actions { display: flex; flex-direction: column; gap: 0.8rem; align-items: flex-start; }
.ap-note { margin-top: 1.2rem; color: rgba(184, 169, 144, 0.45); line-height: 1.8; }
.dash-foot .ap-note { color: var(--paper-dim); margin-top: 0; }

/* modal: sign-in mode */
.modal-signin[hidden] { display: none; }
.modal-switch { margin-top: 1.1rem; text-align: center; }
.modal-switch[hidden] { display: none; }
.modal-success[hidden] { display: none; }

/* blog tag filter bar */
.tag-bar {
  width: 100%;
  display: flex;
  gap: 1.2rem;
  align-items: baseline;
  margin-bottom: 1.8rem;
  color: var(--paper);
}

@media (max-width: 900px) {
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   REV 5.0 — "NIGHT SECTIONS" · charcoal, 3D depth, retro-future
   Swiss daylight stays the base voice; dark sections alternate
   in — charcoal (never true black), perspective grids, dusk.
   ============================================================ */

/* ---------- dark section base: charcoal, not black ---------- */
.sec-dark {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(184, 169, 144, 0.05), transparent 60%),
    #1a1a19;
  color: var(--paper);
}
.sec-dark > * { position: relative; z-index: 2; }
.sec-dark h1, .sec-dark h2, .sec-dark h3 { color: var(--paper); }
.sec-dark .mono { color: rgba(184, 169, 144, 0.55); }
.sec-dark .chapter-meta .fig { color: var(--accent); }
.sec-dark .chapter-meta .rule { background: rgba(184, 169, 144, 0.25); }
.sec-dark .statement-lead, .sec-dark .panel-lead, .sec-dark .connect-sub { color: rgba(184, 169, 144, 0.66); }
.sec-dark .statement-lead strong, .sec-dark .statement-lead em, .sec-dark .panel-lead strong, .sec-dark .panel-lead em { color: var(--paper); }
.sec-dark .gfx-cap { color: rgba(184, 169, 144, 0.55); }
.sec-dark .footer { border-top-color: rgba(184, 169, 144, 0.15); color: rgba(184, 169, 144, 0.5); }
.sec-dark .btn-ghost { border-color: rgba(184, 169, 144, 0.4); color: var(--paper); }
.sec-dark .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- 3D depth: perspective wireframe floor + ceiling ---------- */
.depth::before, .depth::after {
  content: "";
  position: absolute;
  left: -25%;
  right: -25%;
  height: 60%;
  z-index: 1;
  background-image:
    repeating-linear-gradient(90deg, rgba(184, 169, 144, 0.13) 0 1px, transparent 1px 90px),
    repeating-linear-gradient(0deg, rgba(184, 169, 144, 0.13) 0 1px, transparent 1px 90px);
  pointer-events: none;
}
.depth::before {
  bottom: -14%;
  transform: perspective(700px) rotateX(62deg);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(to top, black 15%, transparent 80%);
  -webkit-mask-image: linear-gradient(to top, black 15%, transparent 80%);
  animation: depth-run 7s linear infinite;
}
.depth::after {
  top: -14%;
  transform: perspective(700px) rotateX(-62deg);
  transform-origin: 50% 0%;
  mask-image: linear-gradient(to bottom, black 15%, transparent 80%);
  -webkit-mask-image: linear-gradient(to bottom, black 15%, transparent 80%);
  animation: depth-run 7s linear infinite reverse;
}
@keyframes depth-run { from { background-position: 0 0; } to { background-position: 0 90px; } }
.planet {
  position: absolute;
  top: 9%;
  right: 12%;
  width: clamp(80px, 13vw, 150px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #c07257, #8f4438 55%, #562a27 82%);
  box-shadow:
    inset -16px -20px 42px rgba(10, 8, 16, 0.55),
    0 0 70px rgba(190, 100, 75, 0.28);
}

/* ---------- charcoal recolors: retire true black ---------- */
.scrub-wrap.co-dark { background: #1a1a19; }
.co-dark .co-fill { fill: #1a1a19; }
.co-dark .co-cube .cf-top { fill: #222220; }
.panel-gfx.gfx-dark { background: #1d1d1b; }
.hex.is-locked .hex-face { background: #1e1e1c; }
.hex:hover .hex-face { background: #1e1e1c; }

/* perspective floor inside the exploded-company chamber */
.co-dark .scrub-sticky::after {
  content: "";
  position: absolute;
  left: -25%; right: -25%;
  bottom: -14%;
  height: 45%;
  background-image:
    repeating-linear-gradient(90deg, rgba(184, 169, 144, 0.1) 0 1px, transparent 1px 90px),
    repeating-linear-gradient(0deg, rgba(184, 169, 144, 0.1) 0 1px, transparent 1px 90px);
  transform: perspective(700px) rotateX(62deg);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(to top, black 15%, transparent 80%);
  -webkit-mask-image: linear-gradient(to top, black 15%, transparent 80%);
  animation: depth-run 8s linear infinite;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .depth::before, .depth::after, .co-dark .scrub-sticky::after { animation: none; }
}
@media (max-width: 860px) {
  .planet { top: 6%; right: 7%; }
}

/* ============================================================
   REV 5.1 — "ONE IDEA PER NIGHT" · after the masters
   Müller-Brockmann (Beethoven arcs, Musica Viva discs), JPL Kepler-16b (two suns). Subtraction over accumulation.
   ============================================================ */

/* retire rev-5 ornament */
.depth::before, .depth::after { content: none; }
.co-dark .scrub-sticky::after { content: none; }
.sec-dark { background: #1b1a18; }

/* bare graphic: geometry sits directly on the ground, no card */
.panel-gfx.gfx-bare {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* chaos: beethoven arcs — one center { overflow: visible; }
.construction {
  position: absolute;
  left: 10%;
  bottom: 14%;
  width: clamp(60px, 7vw, 96px);
}
.construction path, .construction circle {
  fill: none;
  stroke: rgba(184, 169, 144, 0.35);
  stroke-width: 1;
}
.construction circle { stroke-dasharray: 2 7; }

/* connect: musica viva — discs in golden progression */
.disc-deco {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.disc-deco svg {
  position: absolute;
  right: -4%;
  top: 50%;
  transform: translateY(-50%);
  width: min(56vw, 820px);
  height: 110%;
}
.dd-disc { fill: var(--accent); }
.dd-cross {
  fill: none;
  stroke: rgba(184, 169, 144, 0.4);
  stroke-width: 1;
}
@media (max-width: 860px) {
  .disc-deco svg { right: -30%; width: 100vw; opacity: 0.55; }
}

/* ============================================================
   REV 6.0 — "PERMANENT NIGHT" · the whole site on charcoal
   Cream type, orange siren, geometry unboxed and bleeding
   off-canvas — continuity over containment.
   ============================================================ */

/* surfaces: cards sit barely above the ground */
.glass, .wp-inner, .deep-card, .modal, .tl-plate {
  background: #23221f;
  border: 1px solid rgba(184, 169, 144, 0.13);
}
.pull { background: #23221f; border-left: 3px solid var(--accent); }
.work-item:hover { background: #23221f; }
.nav { background: rgba(27, 26, 24, 0.92); }
.modal-backdrop { background: rgba(0, 0, 0, 0.55); }
.modal-form input, .modal-form textarea, .modal-signin input {
  background: #161512;
  border-color: rgba(184, 169, 144, 0.25);
  color: var(--paper);
}
.modal-form input::placeholder, .modal-form textarea::placeholder, .modal-signin input::placeholder { color: rgba(184, 169, 144, 0.3); }
.btn-primary { color: #1b1a18; border: none; box-shadow: none; }
.btn-primary .mono { color: #1b1a18; }
.btn-primary:hover { box-shadow: none; filter: brightness(1.06); }

/* night sections now equal the ground — the seams disappear */
.sec-dark, .scrub-wrap.co-dark, .panel-gfx.gfx-dark { background: var(--bg); }
.co-dark .co-fill { fill: var(--bg); }
.curve .stage circle { fill: var(--bg); }

/* ---------- unbox every graphic: continuity, not containment ---------- */
.panel { overflow: hidden; }
.panel-gfx, .panel-gfx.glass, .panel-gfx.gfx-dark {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
.panel-gfx svg, .curve { overflow: visible; }

/* depth: compositions larger than the frame, bleeding at the edges */
#p-net svg { transform: scale(1.22); }
#p-agility svg { transform: scale(1.18); }
#p-info svg { transform: scale(1.15); }
#p-exp svg { transform: scale(1.32); }
.gfx-cap { opacity: 0.6; }

.co-person, .co-routedot, .wnode-dot { fill: var(--bg); }
.co-cube .cf-top { fill: #23221f; }
.co-cube .cf-side { fill: rgba(184, 169, 144, 0.06); }

/* hive on night: open cells lift, locked cells sink, hover flashes cream */
.hex { background: rgba(184, 169, 144, 0.22); }
.hex-face { background: #24231f; }
.hex-ghost .hex-face { background: #201f1c; }
.hex.is-locked .hex-face { background: #181715; }
.hex:hover .hex-face { background: var(--paper); }
.hex:hover .hex-inner { color: #1b1a18; }
.hex:hover .hx-meta { color: rgba(27, 26, 24, 0.65); }
.hex:hover .hx-fig { color: var(--paper); }
.hex.is-locked:hover .hex-face { background: var(--accent); }
.hex.is-locked:hover .hex-inner { color: #1b1a18; }

/* academy portraits: printed for night (multiply dies on dark) */
.tl-plate img {
  mix-blend-mode: normal;
  filter: grayscale(1) contrast(1.08) brightness(0.94);
  opacity: 0.95;
}

/* dashboard admin room blends with the ground { border: 1px solid rgba(184, 169, 144, 0.13); }

@media (max-width: 860px) {
  #p-net svg, #p-agility svg, #p-info svg, #p-exp svg { transform: scale(1.04); }
}
.kn-line {
  stroke: rgba(184, 169, 144, 0.22);
  stroke-width: 0.8;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.panel-gfx.visible .kn-line { stroke-dashoffset: 0; }
.kn-dot { fill: var(--paper); }

/* ---------- agility: flat discs { fill: rgba(184, 169, 144, 0.85); }

/* ---------- the lens, unboxed: emblem + text on the ground ---------- */
.stepper .steps { width: min(72rem, 92vw); min-height: clamp(24rem, 58vh, 33rem); }
.step, .step.glass {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.step::before { content: none; }
.step-gfx svg {
  width: min(24rem, 100%);
  display: block;
  margin: 0 auto;
  overflow: visible;
}
.step-txt h3 { font-size: clamp(1.8rem, 3.6vw, 2.9rem); margin-bottom: 0.9rem; }
.step-txt p { max-width: 46ch; font-size: clamp(1rem, 1.6vw, 1.18rem); }

/* P·01 — zoom out: rings reveal the terrain around one orange point */
.g-zoom .z-ring { fill: none; stroke: rgba(184, 169, 144, 0.5); stroke-width: 1.2; }
.g-zoom .z-faint { stroke: rgba(184, 169, 144, 0.16); }
.g-zoom .z-cross { fill: none; stroke: rgba(184, 169, 144, 0.35); stroke-width: 1; }
.g-zoom .z-core { fill: var(--accent); }
.g-zoom .zr {
  fill: none;
  stroke: rgba(184, 169, 144, 0.55);
  stroke-width: 1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.step.active .zr { animation: zoom-out 7.8s linear infinite; }
@keyframes zoom-out {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(3.15); opacity: 0; }
}

/* P·02 — feedback: one small input, circulating */
.g-loop .l-ring { fill: none; stroke: rgba(184, 169, 144, 0.5); stroke-width: 1.4; }
.g-loop .l-arrow { fill: none; stroke: rgba(184, 169, 144, 0.5); stroke-width: 1.4; }
.g-loop .l-rider { fill: var(--accent); offset-rotate: 0deg; opacity: 0; }
.step.active .l-rider { animation: rider 11s linear infinite; }
@keyframes rider {
  0% { offset-distance: 0%; opacity: 0; }
  4% { opacity: 1; }
  96% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* P·03 — tangible: the idea assembles edge by edge */
.g-cube .c-edge {
  stroke: rgba(184, 169, 144, 0.8);
  stroke-width: 1.6;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.g-cube .c-ghost { stroke: rgba(184, 169, 144, 0.25); stroke-dasharray: 0.04 0.03; }
.g-cube .c-hot { stroke: var(--accent); stroke-width: 2.2; }
.step.active .c-edge { stroke-dashoffset: 0; }
.g-cube .c-ghost { transition-property: opacity; opacity: 0; }
.step.active .c-ghost { opacity: 1; transition-delay: 1080ms; }

/* P·04 — second order: every solution curves into the next problem */
.g-second .s-c1, .g-second .s-c2 {
  fill: none;
  stroke-width: 1.6;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.g-second .s-c1 { stroke: rgba(184, 169, 144, 0.7); }
.g-second .s-c2 { stroke: var(--accent); transition-delay: 0.7s; }
.g-second .s-node { fill: rgba(184, 169, 144, 0.9); }
.g-second .s-dot { fill: rgba(184, 169, 144, 0.9); offset-rotate: 0deg; opacity: 0; }
.step.active .s-c1, .step.active .s-c2 { stroke-dashoffset: 0; }
.step.active .s-dot { animation: rider 6.5s ease-in-out infinite 1.4s; }

@media (max-width: 860px) {
  .step, .step.glass { grid-template-columns: 1fr; gap: 1.4rem; }
  .step-gfx svg { width: min(15rem, 70%); }
}
@media (prefers-reduced-motion: reduce) {
  .kn-line { stroke-dashoffset: 0 !important; transition: none; }
  .step.active .zr, .step.active .l-rider, .step.active .s-dot { animation: none; }
  .g-loop .l-rider { opacity: 1; offset-distance: 30%; }
  .g-cube .c-edge, .g-second .s-c1, .g-second .s-c2 { stroke-dashoffset: 0 !important; transition: none; }
  .g-cube .c-ghost { opacity: 1; }
}

/* ============================================================
   REV 6.2 — "THE INSTRUMENT PANEL"
   Parallax dot field site-wide · legible exploded view ·
   Lorenz chaos · construction-mark detailing everywhere.
   ============================================================ */

/* ---------- parallax dot field (two planes, two speeds) ---------- */
.aurora { display: none !important; }
.aurora-layer { display: none !important; }
.aurora-warm {
  background: none;
  /* smaller/denser dots — 50% less bright than previous 0.2 */
  background-image: radial-gradient(rgba(184, 169, 144, 0.1) 1px, transparent 1.5px);
  background-size: 34px 34px;
  background-position: 0 calc(var(--sy, 0) * -0.05px);
}
.aurora-cool {
  background: none;
  background-image: radial-gradient(rgba(184, 169, 144, 0.15) 1.6px, transparent 2.1px);
  background-size: 104px 104px;
  background-position: 26px calc(26px + var(--sy, 0) * -0.14px);
}

/* sections go transparent so the dot field runs behind everything */
.sec-dark, .scrub-wrap.co-dark, .panel-gfx.gfx-dark { background: transparent; }
.co-dark .scrub-sticky::before { content: none; } /* local dots retired — global field now */

/* ---------- exploded company: legible + detailed ---------- */
.cs-label { font-size: 19px; }
.cs-item { font-size: 15.5px; }
.cs-num { font-size: 20px; }
.co-marks path, .co-marks circle {
  fill: none;
  stroke: rgba(184, 169, 144, 0.3);
  stroke-width: 1;
}
.co-marks circle { stroke-dasharray: 2 8; }
.co-marks .axis-tick { stroke: var(--accent); opacity: 0.7; }

/* ---------- lorenz: a simulation of chaos ---------- */
.lorenz {
  width: min(26rem, 100%);
  aspect-ratio: 1;
  display: block;
  margin: 0 auto;
}
#p-chaos .lorenz { transform: scale(1.32); }

/* ---------- construction marks: the shared ornament ---------- */
.c-marks line, .c-marks path {
  fill: none;
  stroke: rgba(184, 169, 144, 0.26);
  stroke-width: 1;
}
.c-marks circle {
  fill: none;
  stroke: rgba(184, 169, 144, 0.22);
  stroke-width: 1;
  stroke-dasharray: 2 9;
}
.c-marks .mark-txt {
  fill: rgba(184, 169, 144, 0.4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  stroke: none;
}

@media (max-width: 860px) {
  #p-chaos .lorenz { transform: scale(1.05); }
  .cs-label { font-size: 21px; }
  .cs-item { font-size: 17px; }
}

/* lorenz bleed clears its caption */
#p-chaos .gfx-cap { margin-top: 3.2rem; position: relative; z-index: 2; }

/* ============================================================
   REV 6.3 — SMARTPHONE PASS
   Bar collapses into a menu · vertical alignment · everything fits.
   ============================================================ */

/* burger (hidden on desktop) */
.nav-burger {
  display: none;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  width: 44px;
  height: 44px;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}
.nav-burger span {
  width: 18px;
  height: 2px;
  background: var(--paper);
  transition: transform 0.25s ease;
  display: block;
}
.nav.open .nav-burger span:first-child { transform: translateY(4px) rotate(45deg); }
.nav.open .nav-burger span:last-child { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav { padding: 0.8rem 1.1rem; }
  .nav-burger { display: flex; }

  /* the bar becomes a menu */
  .nav-links {
    position: fixed;
    top: 55px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.4rem 1.25rem 1.1rem;
    background: rgba(27, 26, 24, 0.97);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .nav.open .nav-links {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .nav-links a, .nav-links button.nav-account {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 0.85rem !important;
    letter-spacing: 0.12em;
    padding: 0.95rem 0 !important;
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: none;
  }
  .nav-links a[href$="#connect"] { display: block; }
  .nav-links button.nav-account { border-bottom: none; color: var(--accent) !important; }
  .nav-current::after { display: none; }
  .nav-current { color: var(--accent) !important; }

  /* vertical rhythm: sections breathe, nothing collides */
  .statement { padding: 6rem 1.25rem 4rem; min-height: 88svh; }
  .statement h2 { max-width: 100%; }
  .panel { padding: 4rem 1.25rem; }
  .panel-inner { gap: 1.6rem; }
  .gfx-cap { font-size: 0.6rem; padding: 0 1rem; }
  #p-chaos .gfx-cap { margin-top: 1.4rem; }

  /* pinned steppers: room for glyph + text stacked */
  .stepper .steps { min-height: 34rem; }
  .stepper-head h2 { font-size: 1.5rem; }
  .step-txt h3 { font-size: 1.5rem; }
  .step-txt p { font-size: 0.98rem; }

  /* dusk poster: suns shrink { width: 110px; right: 6%; top: 4%; }

  /* work rows + footer wrap cleanly */
  .work-item { flex-direction: column; gap: 0.5rem; padding: 1.3rem 1rem; }
  .w-num { flex: none; }
  .footer { flex-wrap: wrap; row-gap: 0.3rem; }

  /* library rows stack their meta */
  .lib-row { flex-wrap: wrap; row-gap: 0.2rem; }
  .lib-meta { margin-left: auto; }
}

@media (max-width: 560px) {
  .dash-grid { grid-template-columns: 1fr; }
  .connect-actions { flex-direction: column; align-items: stretch; }
  .connect-actions .btn-primary, .connect-actions .btn-ghost { justify-content: center; text-align: center; }
  .deep-grid { gap: 1rem; }
  .hive { --hex-w: 62vw; }
  .tl-plate { max-width: 180px; }
  .disc-deco svg { opacity: 0.3; }
}

/* ============================================================
   REV 6.5 — PROPORTION PASS (see skill: design-proportion)
   φ-scale sizing · figure serves paragraph · optical margins.
   ============================================================ */

/* fig 01h: one compact figure above its paragraph (minor share, φ⁻²) */
.statement-fig {
  width: min(42rem, 88vw);
  margin: 0.618rem auto 1.618rem;   /* optical center: more air below */
}
.statement-fig svg { width: 100%; height: auto; display: block; overflow: visible; }

/* animation gates follow the figure into flow */

/* fig 01c: the lorenz becomes the minor partner of its text */
.lorenz { width: min(19rem, 74vw); }
#p-chaos .lorenz { transform: none; }
#p-chaos .gfx-cap { margin-top: 0.618rem; }

/* golden columns: graphic minor (0.618) · text major (1).
   Desktop-only — this used to leak past the max-width:860px stack rule (it comes
   later in source, so it re-imposed 2 cramped columns on phones). */
@media (min-width: 861px) {
  .panel-inner { grid-template-columns: minmax(0, 0.618fr) minmax(0, 1fr); }
  .step, .step.glass { grid-template-columns: minmax(0, 0.618fr) minmax(0, 1fr); }
}
.step-gfx svg { width: min(21rem, 100%); }
#p-exp svg { transform: scale(1.12); }

@media (max-width: 860px) {
  .statement-fig { width: min(30rem, 92vw); }
  .lorenz { width: min(15rem, 68vw); }
}

/* svg needs its ratio stated to size in flow */
.statement-fig svg { aspect-ratio: 1120 / 430; }

/* ============================================================
   REV 6.6 — FIG. 01h: THE MORPH
   Nine parts. One lifts out (complicated). Then squares become
   dots, dots become an octagon network — and the extracted part
   ends up embedded at the center. Parts ⇄ relationships { overflow: visible; }
.statement-fig { width: min(28rem, 82vw); }

/* -- the choreography: one 16s timeline { animation: m-move 16s ease-in-out infinite alternate; }

@keyframes m-move {
  0%, 34%  { transform: translate(var(--gx), var(--gy)); }
  60%, 100%{ transform: translate(var(--nx), var(--ny)); }
}

/* ============================================================
   REV 6.7 — FIG. 02: the watch, exploded by your scroll
   Seven parts converge into one object as the figure rises.
   ============================================================ */
.exploded.watch { max-width: 300px; }
.xp-part {
  transform: translateY(calc(var(--collapse, 0px) * (1 - var(--sp, 1))));
  transition: transform 0.18s linear;
}
.xp-axis {
  stroke: var(--accent);
  stroke-dasharray: 2 6;
  opacity: calc(0.25 + 0.75 * var(--sp, 1));
  transition: opacity 0.18s linear;
}
.xp-axis-cap { fill: var(--accent); stroke: none; opacity: var(--sp, 1); transition: opacity 0.18s linear; }
.xp-callouts { opacity: var(--sp, 1); transition: opacity 0.18s linear; }
.xp-callouts .dim { stroke: rgba(184, 169, 144, 0.3); stroke-width: 1; fill: none; }
.xp-callouts .dim-txt {
  fill: rgba(184, 169, 144, 0.4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  stroke: none;
}
/* the old canister reveal rules don't apply to the watch */
.drawing.xplode:not(.visible) .callout { opacity: 1; }

@media (max-width: 860px) {
  .exploded.watch { max-width: 230px; }
}
@media (prefers-reduced-motion: reduce) {
  .xp-part { transform: none; transition: none; }
  .xp-callouts, .xp-axis-cap { opacity: 1; }
}

/* axis must win the old .exploded line rule */
.exploded .xp-axis { stroke: var(--accent); }
.exploded .xp-axis-cap { fill: var(--accent); stroke: none; }

/* ============================================================
   REV 6.8 — FIG. 03a CONCEPT-TRUE MOTIFS + MOBILE ANIMATION PASS
   ============================================================ */

/* processes: the feedback loop returns; environment: forces press in */
.co-loopback {
  fill: none;
  stroke: color-mix(in srgb, var(--hue, var(--paper)) 70%, transparent);
  stroke-width: 1;
  stroke-dasharray: 4 5;
}
.co-force { stroke: rgba(184, 169, 144, 0.5); stroke-width: 1.1; }

@media (max-width: 860px) {
  /* fig 03a: fit the phone, keep the scroll-driven explosion */
  .company { min-width: 0; width: 100%; height: auto; }
  .company-fig { overflow: visible; }
  .scrub-wrap { height: 220vh; }
  .scrub-sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3.6rem 0.6rem 0.8rem;
  }
  .company-fig[data-scrub] .co-layer {
    transform: translateY(calc(var(--collapse, 0px) * (1 - var(--sp, 0))));
    opacity: calc(0.25 + var(--sp, 0) * 0.75);
    transition: transform 0.2s linear, opacity 0.2s linear;
  }
  .company-fig[data-scrub] .co-sides, .company-fig[data-scrub] .co-axis-g {
    opacity: var(--sp, 0);
    transition: opacity 0.25s linear;
  }
  /* legibility at phone scale: labels grow, item lists yield to the drawing */
  .cs-label { font-size: 36px; }
  .cs-num { font-size: 34px; }
  .cs-item { display: none; }
  .scrub-hint { display: block; }
  #p-exp svg { transform: scale(1.02); }
  .g-zoom .c-marks circle { display: none; } /* outer survey ring would clip */
}
@media (prefers-reduced-motion: reduce) {
  .company-fig[data-scrub] .co-layer { transform: none; opacity: 1; transition: none; }
  .company-fig[data-scrub] .co-sides, .company-fig[data-scrub] .co-axis-g { opacity: 1; }
}

/* ============================================================
   REV 7.0 — "SIGNAL RED" TRIAL + INSTRUMENT WIDGETS
   Accent: var(--paper) (orange var(--paper) archived in memory).
   Containers retire; readouts replace them.
   ============================================================ */

/* the field note: no longer a card — an instrument exhibit */
.pull {
  background: none;
  border: 1px solid rgba(184, 169, 144, 0.3);
  border-left: 1px solid rgba(184, 169, 144, 0.3);
  border-radius: 0;
  backdrop-filter: none;
  box-shadow: none;
  position: relative;
  padding: 2.1rem 1.6rem 1.7rem;
  margin-top: 2.6rem;
  margin-bottom: 2.4rem;
}
/* the energy strip — the reading this instrument takes */
.pull::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 14px;
  width: 66px;
  height: 10px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 11px);
}
/* the exhibit caption, below the frame */
.pull::after {
  content: attr(data-cap);
  position: absolute;
  left: 0;
  bottom: -1.7rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--paper-dim);
}
.pull-label { color: var(--accent); letter-spacing: 0.18em; }

/* ---------- style guide furniture ---------- */
.sg-sec { margin-bottom: clamp(3.5rem, 8vh, 5.5rem); }
.sg-swatches { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.sg-swatch { display: flex; flex-direction: column; gap: 0.6rem; width: 150px; }
.sg-swatch .sw { display: block; height: 64px; }
.sg-swatch .mono { font-size: 0.58rem; line-height: 1.7; }
.sg-archived { opacity: 0.55; }
.sg-phi { display: flex; gap: 4px; margin: 1rem 0 0.8rem; max-width: 34rem; }
.sg-bar { height: 12px; background: rgba(184, 169, 144, 0.25); display: block; }
.sg-bar-major { background: var(--accent); }
.sg-note { margin-top: 0.8rem; line-height: 2; opacity: 0.7; max-width: 70ch; }
.sg-type-display { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; letter-spacing: -0.03em; }
.sg-type-body { color: var(--paper-dim); margin: 0.6rem 0 1rem; }
.sg-marks { width: min(40rem, 100%); overflow: visible; margin-top: 0.5rem; }

/* ghost buttons on <button> elements: kill the UA default fill */
.btn-ghost { background: none; -webkit-appearance: none; appearance: none; }

/* ============================================================
   REV 7.2 — orange restored · watch labels legible · admin CMS
   ============================================================ */

/* FIG.02 watch: bigger, readable part names */
.watch .callout text { font-size: 19px; letter-spacing: 0.1em; fill: var(--paper); }
.watch .callout line { stroke: rgba(184, 169, 144, 0.4); }
.xp-callouts .dim-txt { font-size: 15px; }
.exploded.watch { max-width: 340px; }
@media (max-width: 860px) { .exploded.watch { max-width: 300px; } .watch .callout text { font-size: 22px; } }
.cms-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.cms-head .ap-h { color: var(--accent); margin: 0; }
.cms-list { display: flex; flex-direction: column; }
.cms-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(184, 169, 144, 0.1);
}
.cms-fig { color: var(--accent); flex: 0 0 4rem; font-size: 0.66rem; }
.cms-title { flex: 1; font-size: 0.98rem; }
.cms-badge { color: var(--paper-dim); font-size: 0.6rem; }
.cms-badge.is-locked { color: var(--accent); }
.cms-row .link-btn { color: var(--paper); }
.cms-row .link-btn:hover { color: var(--accent); }

.cms-editor {
  margin-top: 1.4rem;
  padding: 1.4rem;
  border: 1px solid rgba(184, 169, 144, 0.18);
  border-left: 2px solid var(--accent);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.cms-editor[hidden] { display: none; }
.cms-editor label { display: flex; flex-direction: column; gap: 0.4rem; color: var(--paper-dim); font-size: 0.6rem; }
.cms-editor input, .cms-editor textarea {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(184, 169, 144, 0.2);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 0.95rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  outline: none;
}
.cms-editor textarea { font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.6; resize: vertical; }
.cms-editor input:focus, .cms-editor textarea:focus { border-color: var(--accent); }
.cms-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
.cms-lock { flex-direction: row !important; align-items: center; gap: 0.5rem; align-self: end; }
.cms-lock input { width: auto; }
.cms-actions { display: flex; gap: 0.7rem; align-items: center; margin-top: 0.4rem; }
.cms-actions .btn-primary { padding: 0.7rem 1.3rem; font-size: 0.9rem; }
.cms-error { color: var(--accent); }
.cms-error[hidden] { display: none; }
#cms-delete[hidden] { display: none; }

@media (max-width: 620px) {
  .cms-grid { grid-template-columns: 1fr; }
  .cms-head { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
}

/* ---------- academy: access tiers (the offer) ---------- */
.access { padding: clamp(3rem, 8vh, 6rem) var(--pad) 6rem; }
.access .chapter-inner { max-width: 72rem; margin: 0 auto; }
.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: 2.6rem;
  align-items: stretch;
}
.tier {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.8rem 2.2rem;
  position: relative;
}
.tier-feature {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 20px 60px -30px var(--accent);
}
.tier-feature::before {
  content: "MOST POPULAR";
  position: absolute;
  top: -0.7rem; left: 1.8rem;
  background: var(--accent);
  color: #1b1a18;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  padding: 0.25rem 0.6rem;
  border-radius: 3px;
}
.tier-tag { color: var(--accent); margin-bottom: 1rem; }
.tier-price {
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 1.4rem;
}
.tier-per { font-size: 0.35em; font-weight: 400; color: var(--paper-dim); letter-spacing: 0.06em; }
.tier-list { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; margin-bottom: 1.6rem; }
.tier-list li { font-size: 0.72rem; color: var(--paper); line-height: 1.5; letter-spacing: 0.04em; }
.tier-list .tier-off { color: var(--paper-dim); opacity: 0.55; }
.tier-cta { justify-content: center; width: 100%; }
.tier-fine { margin-top: 0.9rem; text-align: center; color: var(--paper-dim); opacity: 0.7; font-size: 0.58rem; }

@media (max-width: 820px) {
  .tiers { grid-template-columns: 1fr; max-width: 26rem; margin-left: auto; margin-right: auto; }
}

/* ============================================================
   REV 7.3 — "READ TO ME" narrator (autoplay.js)
   Reading speed 238 wpm (Brysbaert 2019).
   ============================================================ */
.rp {
  position: fixed;
  top: 4.4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.5rem 0.6rem 0.5rem 0.5rem;
  background: rgba(27, 26, 24, 0.9);
  border: 1px solid rgba(184, 169, 144, 0.16);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.rp-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #1b1a18;
  font-size: 0.7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: transform 0.15s ease;
}
.rp-btn:hover { transform: scale(1.08); }
.rp-label { color: var(--paper-dim); white-space: nowrap; letter-spacing: 0.14em; }
.rp.is-playing .rp-label { color: var(--paper); }
.rp-track {
  width: 0;
  height: 3px;
  border-radius: 3px;
  background: rgba(184, 169, 144, 0.14);
  overflow: hidden;
  transition: width 0.3s ease;
}
.rp.is-playing .rp-track { width: 120px; }
.rp-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.18s linear;
}

@media (max-width: 620px) {
  .rp { top: auto; bottom: 1rem; }
  .rp.is-playing .rp-track { width: 84px; }
}

/* ============================================================
   REV 7.4 — narrator: bottom placement, smooth feather, vignette
   ============================================================ */
/* move control to the bottom, 10px inset all around */
.rp {
  top: auto;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px 6px 6px;
  margin: 10px;
}
.rp.is-playing .rp-track { width: 140px; }

/* ---- the player arrives after the opening lands, then flags itself ---- */
.rp { transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.journey-boot .rp { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(16px); }
.rp > * { position: relative; z-index: 1; }

/* orange laser sweep — calls attention while the countdown runs.
   NO GLARE: flat light only — a clean sweep across the pill, no bloom/halo. */
.rp.rp-laser { border-color: var(--accent); }
.rp.rp-laser::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 32%, rgba(184, 169, 144, 0.5) 50%, transparent 68%);
  background-size: 260% 100%;
  animation: rp-laser-sweep 1.3s linear infinite;
}
.rp.rp-laser .rp-label { color: var(--accent); }
@keyframes rp-laser-sweep { from { background-position: 260% 0; } to { background-position: -160% 0; } }

/* abort the countdown */
.rp-abort {
  background: none;
  border: 1px solid rgba(184, 169, 144, 0.28);
  border-radius: 999px;
  color: var(--paper-dim);
  cursor: pointer;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  padding: 0.24rem 0.55rem;
  margin-left: 0.1rem;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.rp-abort:hover { color: var(--paper); border-color: var(--paper-dim); }

@media (prefers-reduced-motion: reduce) {
  .rp.rp-laser::before { animation: none; }
}

/* pure opacity reveal — rAF drives opacity every frame; no colour, no transition */
.rp-active .rw {
  opacity: 0.24;
  will-change: opacity;
}
.rp-active .rw.read { opacity: 1; }

/* focus vignette — blur & fade the top/bottom peripheries while reading */
.rp-veil {
  position: fixed;
  left: 0; right: 0;
  height: 30vh;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.rp-veil-top {
  top: 0;
  background: linear-gradient(to bottom, var(--bg) 12%, rgba(27, 26, 24, 0.6) 55%, transparent);
  mask-image: linear-gradient(to bottom, black 45%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, black 45%, transparent);
}
.rp-veil-bot {
  bottom: 0;
  background: linear-gradient(to top, var(--bg) 12%, rgba(27, 26, 24, 0.6) 55%, transparent);
  mask-image: linear-gradient(to top, black 45%, transparent);
  -webkit-mask-image: linear-gradient(to top, black 45%, transparent);
}
body.rp-on .rp-veil { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .rp-active .rw { transition: none; }
  .rp-veil { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ============================================================
   REV 7.5 — sophisticated admin console
   ============================================================ */
.ac-tabs {
  display: flex;
  gap: 0.4rem;
  border-bottom: 1px solid rgba(184, 169, 144, 0.14);
  margin: 1.4rem 0 1.8rem;
}
.ac-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.7rem 1rem;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
  margin-bottom: -1px;
}
.ac-tab:hover { color: var(--paper); }
.ac-tab.is-on { color: var(--accent); border-bottom-color: var(--accent); }
.ac-panel[hidden] { display: none; }
.ac-two { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; }

/* users table */
.ac-table { border-top: 1px solid rgba(184, 169, 144, 0.12); margin-top: 1rem; }
.ac-tr {
  display: grid;
  grid-template-columns: 2fr 1.1fr 1fr 1fr;
  gap: 1rem;
  align-items: center;
  padding: 0.85rem 0.2rem;
  border-bottom: 1px solid rgba(184, 169, 144, 0.1);
}
.ac-th { color: var(--paper-dim); font-size: 0.58rem; letter-spacing: 0.14em; }
.ac-email { font-size: 0.9rem; word-break: break-all; }
.ac-you { color: var(--accent); font-size: 0.55rem; margin-left: 0.3rem; }
.ac-role { color: var(--paper-dim); font-size: 0.66rem; }
.ac-status { font-size: 0.62rem; color: var(--paper-dim); }
.ac-lock-txt { color: var(--paper-dim); opacity: 0.55; font-size: 0.62rem; }
.ac-select {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(184, 169, 144, 0.22);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
}
.ac-select:focus { outline: none; border-color: var(--accent); }

/* system panel */
.ac-doc-txt { color: var(--paper-dim); font-size: 0.95rem; margin: 0.6rem 0 1.2rem; max-width: 42ch; }
.ac-doc-cta { margin-bottom: 1.4rem; }

@media (max-width: 820px) {
  .ac-two { grid-template-columns: 1fr; gap: 1.6rem; }
  .ac-tabs { overflow-x: auto; }
  .ac-tr { grid-template-columns: 1.6fr 1fr 1fr; }
  .ac-tr > span:nth-child(3) { display: none; } /* hide status col on small */
  .ac-th > span:nth-child(3) { display: none; }
}

/* ============================================================
   ADMIN INTELLIGENCE — analytics command center
   ============================================================ */
.ax-panel { padding-bottom: 2rem; }
.ax-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.6rem;
  flex-wrap: wrap;
}
.ax-kicker {
  color: var(--accent);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  margin-bottom: 0.45rem;
}
.ax-title {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  letter-spacing: -0.03em;
  margin: 0 0 0.35rem;
}
.ax-hint { color: var(--paper-dim); font-size: 0.6rem; opacity: 0.7; }

/* fixed-size status pill — never reflows the layout while fetching */
.ax-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.55rem;
  min-height: 2rem;
  max-width: min(100%, 36rem);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(184, 169, 144, 0.14);
  background: rgba(16, 16, 18, 0.55);
  box-sizing: border-box;
}
.ax-status-dot {
  flex: 0 0 auto;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: rgba(184, 169, 144, 0.35);
}
.ax-status[data-state="loading"] .ax-status-dot {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(184, 169, 144, 0.7);
  animation: ax-pulse 1s ease-in-out infinite;
}
.ax-status[data-state="ok"] .ax-status-dot {
  background: #3dce7a;
  box-shadow: 0 0 8px rgba(61, 206, 122, 0.45);
}
.ax-status[data-state="err"] .ax-status-dot {
  background: var(--coral, var(--paper));
}
.ax-status-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--paper-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.ax-status.is-loading .ax-status-text { color: var(--paper); }
@keyframes ax-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}

.ax-hero {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.4rem;
}
.ax-metric {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 1.1rem 1rem 1rem;
  min-height: 6.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.ax-metric.is-accent {
  border-color: rgba(184, 169, 144, 0.28);
  box-shadow: 0 0 40px -18px rgba(184, 169, 144, 0.55);
}
.ax-metric.is-accent::after {
  content: "";
  position: absolute;
  inset: auto -20% -40% auto;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, rgba(184, 169, 144, 0.12), transparent 70%);
  pointer-events: none;
}
.ax-mk {
  color: var(--paper-dim);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  margin: 0;
}
.ax-mv {
  font-size: clamp(1.55rem, 2.8vw, 2.05rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0.35rem 0;
  line-height: 1;
}
.ax-mf {
  color: var(--paper-dim);
  font-size: 0.58rem;
  margin: 0;
  opacity: 0.8;
}

.ax-split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.ax-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.ax-card {
  padding: 1.2rem 1.15rem 1.15rem;
  border-radius: 18px;
  min-height: 12rem;
}
.ax-card-wide { margin-bottom: 1rem; }
.ax-card-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}
.ax-card .ap-h { margin-bottom: 0.9rem; }

/* chart */
.ax-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  height: 11rem;
  padding: 0.25rem 0 0;
}
.ax-bar {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 0.35rem;
}
.ax-bar-stack {
  position: relative;
  width: 100%;
  max-width: 1.4rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: 2px;
}
.ax-bar-all, .ax-bar-guest, .ax-bar-member {
  display: block;
  width: 100%;
  border-radius: 3px 3px 1px 1px;
  min-height: 0;
  transition: height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.ax-bar-all { background: rgba(184, 169, 144, 0.22); }
.ax-bar-guest { background: rgba(184, 169, 144, 0.55); }
.ax-bar-member { background: var(--accent); box-shadow: 0 0 12px rgba(184, 169, 144, 0.22); }
.ax-bar-l {
  font-size: 0.48rem;
  color: var(--paper-dim);
  letter-spacing: 0.04em;
  transform: rotate(-45deg);
  transform-origin: center;
  margin-bottom: 0.2rem;
  opacity: 0.75;
}
.ax-legend {
  display: flex;
  gap: 1rem;
  margin-top: 0.85rem;
  color: var(--paper-dim);
  font-size: 0.58rem;
}
.ax-sw {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 2px;
  margin-right: 0.3rem;
  vertical-align: -1px;
}
.ax-sw-all { background: rgba(184, 169, 144, 0.25); }
.ax-sw-guest { background: rgba(184, 169, 144, 0.55); }
.ax-sw-member { background: var(--accent); }

/* mix */
.ax-mix {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  align-items: center;
  min-height: 11rem;
}
.ax-ring {
  --g: 70;
  --m: 30;
  width: 8.5rem;
  height: 8.5rem;
  border-radius: 50%;
  background: conic-gradient(
    var(--accent) 0 calc(var(--m) * 1%),
    rgba(184, 169, 144, 0.45) calc(var(--m) * 1%) 100%
  );
  display: grid;
  place-items: center;
  position: relative;
}
.ax-ring-hole {
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  background: #0d0c0b;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(184, 169, 144, 0.08);
}
.ax-ring-n {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0;
  line-height: 1;
}
.ax-ring-k {
  font-size: 0.55rem;
  color: var(--paper-dim);
  letter-spacing: 0.12em;
  margin: 0.25rem 0 0;
}
.ax-mix-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  font-size: 0.72rem;
  color: var(--paper-dim);
  line-height: 1.45;
}
.ax-mix-list strong { color: var(--paper); font-weight: 600; }
.ax-mix-note { opacity: 0.65; font-size: 0.58rem !important; margin-top: 0.2rem; }
.ax-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  margin-right: 0.4rem;
}
.ax-dot.guest { background: rgba(184, 169, 144, 0.55); }
.ax-dot.member { background: var(--accent); }
.ax-dot.node { background: rgba(184, 169, 144, 0.22); border: 1px solid var(--accent); }

/* ranks */
.ax-rank { display: flex; flex-direction: column; gap: 0.75rem; max-height: 22rem; overflow-y: auto; }
.ax-row { display: grid; grid-template-columns: 2rem 1fr; gap: 0.55rem; align-items: start; }
.ax-rank-n {
  color: var(--paper-dim);
  font-size: 0.62rem;
  padding-top: 0.2rem;
  letter-spacing: 0.06em;
}
.ax-row-top {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: baseline;
}
.ax-row-title {
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.ax-row-val {
  color: var(--accent);
  font-size: 0.72rem;
  flex: 0 0 auto;
}
.ax-row-sub {
  margin: 0.25rem 0 0;
  font-size: 0.58rem;
  color: var(--paper-dim);
  opacity: 0.85;
}
.ax-track {
  height: 3px;
  background: rgba(184, 169, 144, 0.1);
  border-radius: 2px;
  margin-top: 0.35rem;
  overflow: hidden;
}
.ax-track span {
  display: block;
  height: 100%;
  background: rgba(184, 169, 144, 0.55);
  border-radius: 2px;
}
.ax-track.is-member span { background: var(--accent); box-shadow: 0 0 8px rgba(184, 169, 144, 0.25); }
.ax-empty {
  color: var(--paper-dim);
  font-size: 0.68rem;
  opacity: 0.75;
  padding: 1rem 0;
}

/* visitors table */
.ax-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ax-table { min-width: 640px; border-top: 1px solid rgba(184, 169, 144, 0.12); }
.ax-tr {
  display: grid;
  grid-template-columns: 1.4fr 0.7fr 0.55fr 1fr 0.55fr 1fr;
  gap: 0.75rem;
  padding: 0.75rem 0.15rem;
  border-bottom: 1px solid rgba(184, 169, 144, 0.08);
  font-size: 0.82rem;
  align-items: center;
}
.ax-tr.ax-tr-dwell {
  grid-template-columns: 1.3fr 0.65fr 0.5fr 0.85fr 1fr 0.5fr 0.95fr;
}
/* admin console sits at the top of the portal for admins */
#dash-admin {
  order: -1;
  margin-top: 0.5rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(184, 169, 144, 0.1);
  /* never trap the page scroller inside the console */
  overflow: visible;
  max-height: none;
  height: auto;
}
.page-head .chapter-inner {
  display: flex;
  flex-direction: column;
  overflow: visible;
  max-height: none;
  height: auto;
}

/* ============================================================
   DASHBOARD PAGE — free document scroll (no intro/pager traps)
   ============================================================ */
html.dash-page,
html.dash-page body,
body.dash-page {
  overflow-x: clip !important;
  overflow-y: auto !important;
  height: auto !important;
  max-height: none !important;
  overscroll-behavior-y: auto;
  touch-action: pan-y;
}
/* modal may still lock scroll while open */
body.dash-page.modal-open {
  overflow: hidden !important;
}
body.dash-page .page,
body.dash-page .page-head,
body.dash-page #dash,
body.dash-page #dash-locked,
body.dash-page .ac-panel {
  overflow: visible;
  max-height: none;
  height: auto;
}
/* sticky admin tabs sit under the fixed nav; don't create a nested scrollport */
body.dash-page .ac-tabs {
  position: sticky;
  top: 3.6rem;
  z-index: 35;
  background: rgba(22, 22, 22, 0.94);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  padding-top: 0.15rem;
}
body.dash-page .ax-rank {
  /* keep lists scrollable, but never steal whole-page scroll chaining badly */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
body.dash-page .ax-table-wrap {
  overscroll-behavior-x: contain;
}
.ax-th {
  color: var(--paper-dim);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  padding-top: 0.4rem;
}
.ax-strong { color: var(--accent); font-weight: 600; }
.ax-foot {
  color: var(--paper-dim);
  font-size: 0.58rem;
  opacity: 0.65;
  line-height: 1.5;
  margin-top: 0.5rem;
}

@media (max-width: 1100px) {
  .ax-hero { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ax-grid-3 { grid-template-columns: 1fr; }
  .ax-split { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ax-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ax-mix { grid-template-columns: 1fr; justify-items: center; text-align: left; }
  .ax-mix-list { width: 100%; }
  .ax-chart { height: 9rem; gap: 0.2rem; }
  .ax-bar-l { font-size: 0.42rem; }
}

/* ============================================================
   REV 7.6 — footer micrographic data-plate
   ============================================================ */
.micro-plate {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin: 3.5rem 0 1.6rem;
  padding: 1.4rem 0 0;
  border-top: 1px solid rgba(184, 169, 144, 0.1);
}
.mp-code { width: 84px; height: auto; flex: 0 0 auto; overflow: visible; }
.mp-spine { fill: var(--accent); }
.mp-bar { fill: var(--accent); }
.mp-bars .mp-bar:nth-child(3n) { fill: rgba(184, 169, 144, 0.55); }
.mp-marks path, .mp-marks circle { fill: none; stroke: rgba(184, 169, 144, 0.3); stroke-width: 1; }
.mp-read { display: flex; flex-direction: column; gap: 0.3rem; line-height: 1.5; }
.mp-read span { font-size: 0.6rem; letter-spacing: 0.14em; color: var(--paper-dim); }
.mp-read .mp-a, .mp-read span .mp-a { color: var(--accent); }
@media (max-width: 620px) {
  .micro-plate { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* ============================================================
   REV 7.8 — cinematic opening transmission
   ============================================================ */
body.intro-lock {
  /* soft lock only — never freeze trackpad forever */
  overflow: hidden;
}
body.intro-lock.intro-lock-soft {
  overflow: auto;
}
/* hard failsafe class applied by JS after timeout */
html.scroll-unlocked,
html.scroll-unlocked body,
body.scroll-unlocked {
  overflow: auto !important;
  overflow-x: clip !important;
  overflow-y: auto !important;
  height: auto !important;
  max-height: none !important;
  touch-action: pan-y !important;
  pointer-events: auto !important;
}
html.scroll-unlocked body.home-snap main > .snap-sec {
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.intro {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(27, 26, 24, 0.75), var(--bg) 78%),
    var(--bg);
  opacity: 0;
  transition: opacity 0.6s ease;
}
.intro.in { opacity: 1; }
.intro.out { opacity: 0; transition: opacity 0.7s ease; }

/* ============================================================
   REV 7.9 — THE JOURNEY: consent · terminal · nav · caption
   ============================================================ */

/* ---------- cookie consent ---------- */
.cc {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  transform: translate(-50%, 20px);
  z-index: 130;
  width: min(42rem, calc(100vw - 2rem));
  background: rgba(20, 19, 17, 0.97);
  border: 1px solid rgba(184, 169, 144, 0.16);
  border-top: 2px solid var(--accent);
  border-radius: 16px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.cc.in { opacity: 1; transform: translate(-50%, 0); }
.cc.out { opacity: 0; transform: translate(-50%, 20px); }
.cc-inner { padding: 1.4rem 1.6rem; }
.cc-kicker { color: var(--accent); margin-bottom: 0.7rem; }
.cc-text { color: var(--paper-dim); font-size: 0.95rem; line-height: 1.6; }
.cc-text strong { color: var(--paper); }
.cc-more-btn { background: none; border: none; color: var(--accent); cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.cc-more { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid rgba(184, 169, 144, 0.1); }
.cc-more ul { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }
.cc-more li { font-size: 0.62rem; color: var(--paper-dim); line-height: 1.6; }
.cc-more li strong { color: var(--paper); }
.cc-fine { margin-top: 0.7rem; font-size: 0.58rem; color: var(--paper-dim); opacity: 0.7; line-height: 1.6; }
.cc-actions { display: flex; gap: 0.8rem; margin-top: 1.2rem; flex-wrap: wrap; }
.cc-btn { flex: 1; justify-content: center; min-width: 10rem; }

/* ---------- terminal ---------- */
.term {
  position: fixed;
  inset: 0;
  z-index: 125;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: radial-gradient(130% 100% at 50% 40%, #12110f, var(--bg) 85%);
  opacity: 0;
  transition: opacity 0.6s ease;
}
.term.in { opacity: 1; }
.term.out { opacity: 0; transition: opacity 0.5s ease; }

/* ---- terminal backdrop: tactical grid + dot field + floating dots ---- */
.term-canvas { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.term-grid {
  position: absolute; inset: -2px;
  background:
    repeating-linear-gradient(to right, rgba(184, 169, 144, 0.045) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(to bottom, rgba(184, 169, 144, 0.045) 0 1px, transparent 1px 64px);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 42%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 100% at 50% 42%, #000 30%, transparent 78%);
  opacity: 0;
  transition: opacity 1.6s ease;
  animation: term-grid-drift 26s linear infinite;
}
.term-dotfield {
  position: absolute; inset: 0;
  /* smaller dots — 50% less bright */
  background-image: radial-gradient(rgba(184, 169, 144, 0.06) 1px, transparent 1.4px);
  background-size: 32px 32px;
  background-position: 8px 8px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 42%, #000 20%, transparent 72%);
          mask-image: radial-gradient(120% 100% at 50% 42%, #000 20%, transparent 72%);
  opacity: 0;
  transition: opacity 1.8s ease;
}
.term.in .term-grid { opacity: 1; }
.term.in .term-dotfield { opacity: 1; }
@keyframes term-grid-drift { to { transform: translate(64px, 64px); } }

.term-float {
  position: absolute;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent), 0 0 22px var(--accent), 0 0 34px rgba(184, 169, 144, 0.55);
  opacity: 0;
}
.term.in .term-float { animation: term-drift 9s ease-in-out infinite; }
.term-float.f1 { left: 14%; top: 30%; animation-delay: 0.2s; }
.term-float.f2 { left: 78%; top: 24%; animation-delay: 1.4s; width: 4px; height: 4px; }
.term-float.f3 { left: 24%; top: 74%; animation-delay: 2.1s; width: 4px; height: 4px; }
.term-float.f4 { left: 68%; top: 68%; animation-delay: 0.8s; }
.term-float.f5 { left: 46%; top: 18%; animation-delay: 3s; width: 4px; height: 4px; }
.term-float.f6 { left: 88%; top: 50%; animation-delay: 1.9s; }
.term-float.f7 { left: 8%; top: 54%; animation-delay: 2.6s; }
.term-float.f8 { left: 60%; top: 84%; animation-delay: 1.1s; width: 4px; height: 4px; }
@keyframes term-drift {
  0%   { opacity: 0; transform: translateY(8px); }
  28%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-18px); }
}

.term-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(184, 169, 144, 0.03) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
  animation: term-scroll 8s linear infinite;
}
@keyframes term-scroll { to { background-position: 0 300px; } }
.term-win {
  position: relative;
  z-index: 2;
  /* the field (grid + stars) shows first; the window boots up into it */
  opacity: 0;
  transform: scale(0.965) translateY(10px);
  transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  width: min(44rem, 100%);
  border: 1px solid rgba(184, 169, 144, 0.14);
  border-radius: 10px;
  background: rgba(8, 8, 6, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(184, 169, 144, 0.03);
  overflow: hidden;
}
.term.win-on .term-win { opacity: 1; transform: none; }
.term-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid rgba(184, 169, 144, 0.1);
  color: var(--paper-dim);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
}
.term-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.term-body {
  padding: 1.4rem 1.4rem 1.8rem;
  min-height: 12rem;
  max-height: 60vh;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: clamp(0.82rem, 1.6vw, 1rem);
  line-height: 1.9;
  color: var(--paper);
}
.term-line { margin: 0; white-space: pre-wrap; word-break: break-word; }
.term-line.accent { color: var(--accent); }
.term-line.dim { color: var(--paper-dim); }
.term-cur { color: var(--accent); animation: term-blink 1s steps(1) infinite; }
@keyframes term-blink { 50% { opacity: 0; } }
/* TEMP: replay-intro test button, sits next to the DT nav mark */
.nav-test {
  margin-left: 0.7rem;
  margin-right: auto; /* absorb the space-between gap so it hugs the DT mark */
  padding: 0.24rem 0.6rem;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: none;
  border: 1px solid rgba(184, 169, 144, 0.42);
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.nav-test:hover { opacity: 1; background: rgba(184, 169, 144, 0.12); }

.term-input {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  margin-top: 0.85rem;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.term-input.is-done {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}
.term-name-label {
  color: var(--accent);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.term-input-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(184, 169, 144, 0.28);
  border-radius: 10px;
  background: rgba(184, 169, 144, 0.06);
  min-height: 48px; /* comfortable touch target */
}
.term-prompt { color: var(--accent); flex: 0 0 auto; font-size: 1.05rem; }
.term-field {
  flex: 1 1 8rem;
  min-width: 8rem;
  width: 10ch;
  max-width: 100%;
  background: none;
  border: none;
  outline: none;
  color: var(--paper);
  font-family: var(--font-mono);
  /* 16px floor — iOS will zoom the page if the field is smaller */
  font-size: max(1rem, 16px);
  line-height: 1.4;
  caret-color: var(--accent);
  padding: 0.25rem 0;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.term-field::placeholder { color: rgba(184, 169, 144, 0.35); }
.term-name-go {
  flex: 0 0 auto;
  margin-left: auto;
  background: var(--accent);
  color: #141414;
  border: none;
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  min-height: 36px;
}
.term-name-go:active { transform: scale(0.97); }
.term-skip {
  position: absolute;
  bottom: 1.6rem;
  right: 1.6rem;
  background: none;
  border: 1px solid rgba(184, 169, 144, 0.24);
  border-radius: 999px;
  color: var(--paper-dim);
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.term-skip:hover { color: var(--paper); border-color: var(--accent); }

/* ---------- reader control: nav arrows ---------- */
.rp-nav {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(184, 169, 144, 0.2);
  background: none;
  color: var(--paper-dim);
  font-size: 0.55rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.rp-nav:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- personalized journey caption ---------- */
.jn-caption {
  position: fixed;
  left: 50%;
  bottom: 66px;
  transform: translate(-50%, 8px);
  z-index: 44;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: rgba(20, 19, 17, 0.85);
  border: 1px solid rgba(184, 169, 144, 0.3);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
  white-space: nowrap;
  max-width: 90vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jn-caption.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 620px) {
  .term-skip { bottom: 1rem; right: 1rem; }
  .cc { bottom: 0.6rem; }
  .cc-btn { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .term-scan { animation: none; }
}

/* ============================================================
   REV 8.0 — CINEMATIC EMERGENCE (journey-boot)
   Nothing shows until the terminal is done; then the world
   builds itself: stars → grid → title types → the rest.
   `journey-boot` is set synchronously on <html> (index head).
   ============================================================ */
html.journey-boot, html.journey-boot body { background: #100f0d; }

/* everything hidden at first — the system boots up piece by piece */
.journey-boot .aurora, .journey-boot #system-canvas { opacity: 0; }
.journey-boot .hero-grid { opacity: 0 !important; }
.journey-boot .nav { opacity: 0; transform: translateY(-110%); }
.journey-boot .thread, .journey-boot .scroll-cue, .journey-boot .hero-content { opacity: 0; }
.journey-boot main > *:not(.hero) { opacity: 0; }
.journey-boot .hero-title .line { opacity: 0; }
.journey-boot .hero-sub, .journey-boot .hero-close, .journey-boot .hero-hint { opacity: 0; }

/* stage 1 — the dot field + drifting node canvas power on */
.journey-boot #system-canvas { transition: opacity 2.6s ease; }
.journey-boot .aurora { transition: opacity 2.6s ease; }
.journey-boot.jb-stars #system-canvas { opacity: 1; }
.journey-boot.jb-stars .aurora { opacity: 1; }

/* stage 2 — the grid draws in behind */
.journey-boot .hero-grid { transition: opacity 1.9s ease; }
.journey-boot.jb-grid .hero-grid { opacity: 0.5 !important; }

/* stage 3 — the top menu bar eases down into place (system chrome online) */
.journey-boot .nav { transition: opacity 0.9s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1); }
.journey-boot.jb-nav .nav { opacity: 1; transform: none; }

/* stage 4 — the hook headline types itself in (grabs attention first) */
.journey-boot.jb-hero .hero-content { opacity: 1; transition: opacity 0.7s ease; }
.journey-boot.jb-hero .hero-title .line { opacity: 1; }
.journey-boot.jb-hero .hero-greet,
.journey-boot.jb-hero .story-voice.hero-greet { opacity: 1; transition: opacity 0.7s ease; }

/* stage 5 — the supporting line fades up */
.journey-boot.jb-sub .hero-sub { opacity: 1; transition: opacity 1.1s ease; }

/* stage 6 — the payoff, last: "I connect everything — I draw the lines." */
.journey-boot.jb-close .hero-close { opacity: 1; transition: opacity 1.2s ease; }

/* stage 7 — thread, scroll cue, hint settle in */
.journey-boot.jb-rest .thread, .journey-boot.jb-rest .scroll-cue, .journey-boot.jb-rest .hero-hint { opacity: 1; transition: opacity 1.1s ease; }

/* ============================================================
   REV 9.0 — IMMERSIVE MY WORLD
   Full-bleed dark constellation: drifting glowing nodes, edges
   that draw in on hover, rooms slide over as a glass drawer, tactical grid + dot field behind. Overrides the legacy
   two-column world styles (markup no longer uses them).
   ============================================================ */
.world-immersive { padding: 0; }
.world-stage {
  position: relative;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 12%, #14130f 0%, var(--bg) 62%);
  isolation: isolate;
}

/* --- tactical backdrop --- */
.ws-grid {
  position: absolute; inset: -2px;
  background:
    repeating-linear-gradient(to right, rgba(184, 169, 144,0.04) 0 1px, transparent 1px 76px),
    repeating-linear-gradient(to bottom, rgba(184, 169, 144,0.04) 0 1px, transparent 1px 76px);
  -webkit-mask-image: radial-gradient(115% 100% at 50% 40%, #000 42%, transparent 82%);
          mask-image: radial-gradient(115% 100% at 50% 40%, #000 42%, transparent 82%);
  animation: ws-grid-drift 40s linear infinite;
}
@keyframes ws-grid-drift { to { transform: translate(76px, 76px); } }
.ws-dots {
  position: absolute; inset: 0;
  /* smaller dots — 50% less bright */
  background-image: radial-gradient(rgba(184, 169, 144,0.05) 1px, transparent 1.5px);
  background-size: 38px 38px;
  -webkit-mask-image: radial-gradient(110% 95% at 50% 40%, #000 25%, transparent 78%);
          mask-image: radial-gradient(110% 95% at 50% 40%, #000 25%, transparent 78%);
}
.ws-glow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5; pointer-events: none; }
.ws-glow-a { width: 42vw; height: 42vw; left: -6vw; top: 12vh; background: radial-gradient(circle, rgba(184, 169, 144,0.16), transparent 68%); }
.ws-glow-b { width: 38vw; height: 38vw; right: -4vw; bottom: 4vh; background: radial-gradient(circle, rgba(120,140,255,0.10), transparent 68%); }
.ws-scan {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background: repeating-linear-gradient(to bottom, rgba(184, 169, 144,0.018) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
}

/* --- the constellation --- */
.world-stage .wmap {
  position: absolute;
  inset: clamp(5rem, 11vh, 7.5rem) clamp(2.5rem, 8vw, 8rem) clamp(1.5rem, 4vh, 3rem);
  width: auto; height: auto;
  overflow: visible;
  z-index: 2;
  transition: filter 0.6s ease, opacity 0.6s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.world-stage.room-open .wmap {
  filter: blur(3px) saturate(0.7);
  opacity: 0.5;
  transform: scale(0.98) translateX(-4%);
}

/* edges — faint by default, draw + flow when their node is probed */
.world-stage .wedge {
  stroke: rgba(184, 169, 144,0.14);
  stroke-width: 1;
  transition: stroke 0.35s ease, stroke-width 0.35s ease, opacity 0.35s ease;
}
.world-stage.is-probing .wedge:not(.lit) { stroke: rgba(184, 169, 144,0.05); }
.world-stage .wedge.lit {
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-dasharray: 5 6;
  animation: ws-flow 0.9s linear infinite, ws-draw 0.5s ease-out;
  filter: drop-shadow(0 0 3px rgba(184, 169, 144,0.6));
}
@keyframes ws-flow { to { stroke-dashoffset: -11; } }
@keyframes ws-draw { from { stroke-dashoffset: var(--len); } }

/* nodes */
.wnode { cursor: pointer; outline: none; animation-name: ws-drift; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
@keyframes ws-drift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(calc(var(--dx,0) * 1px), calc(var(--dy,0) * 1px)); }
}
.wnode-dot {
  fill: #16150f;
  stroke: var(--accent-dim);
  stroke-width: 1.5;
  transition: fill 0.3s ease, stroke 0.3s ease, filter 0.3s ease;
}
.wnode-halo {
  fill: var(--accent);
  opacity: 0.16;
  transform-origin: center; transform-box: fill-box;
  transition: opacity 0.3s ease;
  animation: ws-pulse 4s ease-in-out infinite;
}
@keyframes ws-pulse { 0%,100% { transform: scale(0.9); opacity: 0.10; } 50% { transform: scale(1.15); opacity: 0.22; } }
.wnode-ring {
  fill: none; stroke: var(--accent); stroke-width: 1; opacity: 0;
  transform-origin: center; transform-box: fill-box;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22,1,0.36,1);
  transform: scale(0.7);
}
.wnode-label {
  fill: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.14em; text-anchor: middle;
  opacity: 0.72;
  transition: fill 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
}

/* hub = David, at the seam */
.wnode.is-hub .wnode-dot { fill: var(--accent); stroke: var(--accent); filter: drop-shadow(0 0 10px rgba(184, 169, 144,0.7)); }
.wnode.is-hub .wnode-label { fill: var(--paper); opacity: 1; }
.wnode.is-hub .wnode-halo { opacity: 0.28; }

/* neighbours light up when probing a node */
.wnode.is-near .wnode-dot { stroke: var(--accent); }
.wnode.is-near .wnode-label { fill: var(--paper); opacity: 1; }

/* the hovered / focused / open node */
.wnode:hover .wnode-dot, .wnode:focus-visible .wnode-dot, .wnode.is-hot .wnode-dot, .wnode.is-active .wnode-dot {
  fill: var(--accent); stroke: var(--accent);
  filter: drop-shadow(0 0 12px rgba(184, 169, 144,0.85));
}
.wnode:hover .wnode-ring, .wnode:focus-visible .wnode-ring, .wnode.is-hot .wnode-ring, .wnode.is-active .wnode-ring { opacity: 0.8; transform: scale(1); }
.wnode:hover .wnode-halo, .wnode:focus-visible .wnode-halo, .wnode.is-hot .wnode-halo, .wnode.is-active .wnode-halo { opacity: 0.34; }
.wnode:hover .wnode-label, .wnode:focus-visible .wnode-label, .wnode.is-hot .wnode-label, .wnode.is-active .wnode-label { fill: var(--paper); opacity: 1; }

/* locked rooms */
.wnode.is-locked .wnode-dot { fill: #14130f; stroke: var(--paper-dim); stroke-dasharray: 3 3; }
.wnode.is-locked .wnode-halo { opacity: 0; }
.wnode.is-locked .wnode-label { fill: rgba(184, 169, 144,0.62); }
.wnode.is-locked.is-unlocked .wnode-dot { stroke: var(--accent); stroke-dasharray: none; }
.wnode.is-locked.is-unlocked .wnode-label { fill: var(--paper-dim); }

/* dim the field while probing so the lit path pops */
.world-stage.is-probing .wnode:not(.is-hot):not(.is-near) .wnode-dot { stroke: rgba(184, 169, 144,0.18); }
.world-stage.is-probing .wnode:not(.is-hot):not(.is-near) .wnode-label { opacity: 0.3; }
.world-stage.is-probing .wnode:not(.is-hot):not(.is-near) .wnode-halo { opacity: 0.04; }

/* --- floating intro --- */
.ws-intro {
  position: absolute; z-index: 3;
  left: clamp(1.2rem, 4vw, 3.4rem);
  top: clamp(5.2rem, 12vh, 7.5rem);
  max-width: min(27rem, 82vw);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
/* soft scrim so the title reads cleanly where it floats over the constellation */
.ws-intro::before {
  content: "";
  position: absolute; z-index: -1;
  inset: -2rem -6rem -2rem -4rem;
  background: radial-gradient(120% 90% at 20% 40%, rgba(12,11,9,0.92) 0%, rgba(12,11,9,0.6) 42%, transparent 74%);
  filter: blur(6px);
  pointer-events: none;
}
.ws-intro .link-btn { pointer-events: auto; }
.ws-kicker { color: var(--accent); margin-bottom: 0.9rem; }
.ws-title { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
.ws-hint { margin-top: 1.4rem; color: var(--paper-dim); font-size: 0.72rem; letter-spacing: 0.08em; }
.world-stage.room-open .ws-intro { opacity: 0; transform: translateY(-10px); }

/* --- room drawer --- */
.ws-room {
  position: absolute; z-index: 6;
  top: 0; right: 0; bottom: 0;
  width: min(40rem, 94vw);
  padding: clamp(4.8rem, 9vh, 6rem) clamp(1.5rem, 3.5vw, 3rem) 2.5rem;
  overflow-y: auto;
  background: linear-gradient(200deg, rgba(28,27,23,0.86), rgba(14,13,11,0.92));
  border-left: 1px solid rgba(184, 169, 144,0.35);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: -40px 0 120px rgba(0,0,0,0.6);
  transform: translateX(100%);
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.world-stage.room-open .ws-room { transform: none; }
.ws-room[hidden] { display: block; } /* keep it in flow so the slide animates; JS toggles room-open */
.ws-room-close {
  position: sticky; top: 0;
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-bottom: 1.6rem;
  padding: 0.4rem 0.2rem;
  background: none; border: none;
  color: var(--paper-dim); cursor: pointer;
  font-size: 0.72rem; letter-spacing: 0.1em;
  transition: color 0.2s ease;
}
.ws-room-close:hover { color: var(--accent); }
.ws-room .wp-inner {
  background: none; border: none; box-shadow: none; padding: 0; backdrop-filter: none;
}
.ws-room .wp-kicker { color: var(--accent); margin-bottom: 1rem; }
.ws-room .wp-title { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 1.2rem; line-height: 1.1; }
.ws-room .wp-body p { color: var(--paper-dim); font-size: 1.02rem; line-height: 1.75; margin-bottom: 1.1rem; max-width: none; }
.ws-room .wp-body strong { color: var(--paper); font-weight: 500; }
.ws-room .wp-body em { color: var(--paper); }
.ws-room .wp-note { color: var(--accent) !important; font-size: 0.72rem !important; line-height: 1.7 !important; opacity: 0.85; }
.ws-room .wp-swap { animation: wp-in 420ms cubic-bezier(0.22,1,0.36,1); }

/* mobile: drawer becomes full-width, intro sits above the map */
@media (max-width: 720px) {
  .world-stage { height: auto; min-height: 0; }
  .world-stage .wmap { position: relative; height: 74svh; }
  .ws-intro { position: relative; left: 0; top: 0; padding: 5.6rem var(--pad) 0; max-width: none; }
  .ws-room { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ws-grid, .wnode, .wnode-halo, .wnode-ring, .world-stage .wedge.lit { animation: none !important; }
}

/* ============================================================
   ADMIN · SYSTEM TAB — architecture map + inline design system
   ============================================================ */
.sys-sec { margin-bottom: 3.2rem; }
.sys-sec .chapter-meta { margin-bottom: 1.1rem; }
.sys-lead { max-width: 58ch; margin-bottom: 1.4rem; }

/* ---- 01 · the architecture map ---- */
.sys-map {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(12, 11, 9, 0.5);
  padding: 0.8rem 0.6rem 0.4rem;
  overflow-x: auto;
}
.sysmap-svg { width: 100%; min-width: 720px; height: auto; display: block; }

.sm-tier {
  fill: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  opacity: 0.7;
}
.sm-rail { stroke: rgba(184, 169, 144, 0.07); stroke-width: 1; stroke-dasharray: 2 5; }

.sm-edge {
  stroke: rgba(184, 169, 144, 0.1);
  stroke-width: 1;
  transition: stroke 0.28s ease, stroke-width 0.28s ease;
}
.sm-edge.is-journey { stroke: rgba(184, 169, 144, 0.3); }
.sys-map.is-probing .sm-edge { stroke: rgba(184, 169, 144, 0.04); }
.sys-map.is-probing .sm-edge.lit {
  stroke: var(--accent);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 3px rgba(184, 169, 144, 0.55));
}

.sm-node { cursor: default; outline: none; }
.sm-box {
  fill: #1b1a18;
  stroke: rgba(184, 169, 144, 0.18);
  stroke-width: 1;
  transition: fill 0.25s ease, stroke 0.25s ease;
}
.sm-node.is-journey .sm-box { stroke: rgba(184, 169, 144, 0.28); }
.sm-lab {
  fill: var(--paper);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-anchor: middle;
}
.sm-sub {
  fill: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 7.4px;
  letter-spacing: 0.05em;
  text-anchor: middle;
  opacity: 0.75;
}
.sm-node:hover .sm-box, .sm-node:focus-visible .sm-box, .sm-node.is-hot .sm-box { fill: #241f1a; stroke: var(--accent); }
.sm-node.is-hot .sm-box { filter: drop-shadow(0 0 8px rgba(184, 169, 144, 0.5)); }
.sm-node.is-near .sm-box { stroke: rgba(184, 169, 144, 0.7); }
.sys-map.is-probing .sm-node:not(.is-hot):not(.is-near) .sm-box { stroke: rgba(184, 169, 144, 0.08); }
.sys-map.is-probing .sm-node:not(.is-hot):not(.is-near) .sm-lab { opacity: 0.35; }
.sys-map.is-probing .sm-node:not(.is-hot):not(.is-near) .sm-sub { opacity: 0.2; }

.sm-flow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0.5rem 0 0.6rem;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--paper-dim);
}
.sm-step {
  border: 1px solid rgba(184, 169, 144, 0.25);
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
  color: var(--accent);
}
.sm-arrow { color: rgba(184, 169, 144, 0.35); }

/* ---- 02 · the design system, inline ---- */
.sys-ds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.4rem;
  margin-bottom: 1.6rem;
}
.ds-cell {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(12, 11, 9, 0.4);
  padding: 1.1rem 1.1rem 1.2rem;
}
.ds-cell-wide { grid-column: 1 / -1; }
.ds-h { color: var(--accent); font-size: 0.62rem; margin-bottom: 0.9rem; letter-spacing: 0.14em; }
.ds-note { color: var(--paper-dim); font-size: 0.58rem; line-height: 1.7; margin-top: 0.7rem; opacity: 0.8; }

.ds-swatches { display: flex; flex-direction: column; gap: 0.55rem; }
.ds-sw { display: flex; align-items: center; gap: 0.6rem; }
.ds-chip {
  width: 26px; height: 26px; border-radius: 4px; flex: none;
  border: 1px solid rgba(184, 169, 144, 0.18);
}
.ds-swtxt { font-size: 0.56rem; line-height: 1.6; color: var(--paper-dim); }
.ds-swtxt strong { color: var(--paper); font-weight: 500; }

.ds-phi { display: flex; gap: 3px; height: 12px; }
.ds-bar { background: rgba(184, 169, 144, 0.2); border-radius: 2px; }
.ds-bar-major { background: var(--accent); }

.ds-type-a { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.ds-type-b { font-size: 0.95rem; color: var(--paper-dim); margin-top: 0.3rem; }

.ds-list { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.6rem; color: var(--paper-dim); line-height: 1.5; }
.ds-list .ds-k { color: var(--paper); letter-spacing: 0.1em; display: inline-block; min-width: 11rem; }
@media (max-width: 700px) { .ds-list .ds-k { display: block; min-width: 0; margin-bottom: 0.15rem; } }

/* Design bible extras (admin System panel) */
.ds-bible-banner {
  border-color: rgba(184, 169, 144, 0.28);
  background: rgba(184, 169, 144, 0.05);
}
.ds-link { color: var(--accent); text-decoration: none; }
.ds-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ds-muted { color: var(--paper-dim); opacity: 0.75; font-size: 0.55rem; letter-spacing: 0.04em; }
.ds-scroll-table { gap: 0.65rem; }
.ds-scroll-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1.2fr) auto minmax(6rem, 1fr);
  gap: 0.5rem 0.85rem;
  align-items: baseline;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(184, 169, 144, 0.08);
}
.ds-badge {
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  border: 1px solid rgba(184, 169, 144, 0.2);
  color: var(--paper-dim);
  justify-self: start;
}
.ds-status-ok .ds-badge { border-color: rgba(120, 200, 140, 0.4); color: var(--paper-dim); }
.ds-status-mid .ds-badge { border-color: rgba(255, 180, 80, 0.45); color: var(--paper); }
.ds-status-no .ds-badge { border-color: rgba(184, 169, 144, 0.28); color: var(--accent); }
@media (max-width: 700px) {
  .ds-scroll-row { grid-template-columns: 1fr; }
}

/* ============================================================
   REV 9.5 — BLACK GLASS
   The warm plates (#1b1a18 / #23221f / #1a1a19) read BROWN once the
   ground went true black. Every surface is now neutral black glass:
   translucent pane + heavy backdrop blur + saturation lift, a cool
   hairline, and ONE specular top edge. Charcoal stays a token, but it
   no longer paints surfaces.
   ============================================================ */

/* the material */
.glass, .modal, .wp-inner, .stat-tile, .deep-card, .step.glass, .nav, .rp, .term-win, .ws-room, .sys-map, .ds-cell, .pull {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
}

/* the specular top edge — what actually sells "glass".
   ONLY promote statically-positioned panes: .rp is fixed, .ws-room/.step are
   absolute, .modal is fixed — forcing position:relative on those collapses them
   out of their layout (it dropped the world drawer to the left). They already
   establish a containing block for ::after, so leave them alone. */
.glass, .wp-inner, .stat-tile, .deep-card, .term-win, .sys-map, .ds-cell {
  position: relative;
}
.glass::after, .modal::after, .wp-inner::after, .stat-tile::after, .deep-card::after, .step.glass::after, .rp::after, .term-win::after, .ws-room::after, .sys-map::after, .ds-cell::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--glass-hi) 22%, var(--glass-hi) 78%, transparent);
  pointer-events: none;
  opacity: 0.85;
}

/* Membership modal: solid plate — override black-glass material */
.modal.modal-auth {
  background: #121214 !important;
  border-color: rgba(184, 169, 144, 0.14);
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}
.modal.modal-auth.is-lit {
  border-color: rgba(184, 169, 144, 0.28);
}
.modal.modal-auth::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}
.modal.modal-auth .modal-submit,
.modal.modal-auth .modal-done {
  background: var(--paper) !important;
  color: #0a0210 !important;
  border: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  box-shadow: 0 10px 28px -10px rgba(184, 169, 144, 0.28);
}
.modal.modal-auth .modal-submit .mono,
.modal.modal-auth .modal-done .mono {
  color: #0a0210 !important;
}

/* nav — a floating glass rail */
.nav {
  background: rgba(10, 10, 12, 0.6);
  border-bottom: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
          backdrop-filter: blur(28px) saturate(180%);
}

/* reader pill */
.rp {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* terminal window */
.term-win {
  background: rgba(10, 10, 12, 0.62);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 0 60px rgba(184, 169, 144, 0.02);
}

/* world room drawer */
.ws-room {
  background: rgba(10, 10, 12, 0.72);
  border-left: 1px solid var(--glass-border);
}

/* de-brown the remaining warm fills */
.sec-dark { background: transparent; }
.scrub-wrap.co-dark { background: rgba(10, 10, 12, 0.6); }
.co-dark .co-fill { fill: #101012; }
.co-cube .cf-top { fill: rgba(184, 169, 144, 0.06); }
.work-item:hover { background: rgba(184, 169, 144, 0.05); }
.pull { border-left: 3px solid var(--accent); }
.hex:hover .hex-inner { color: #0a0a0c; }
.hex:hover .hx-meta { color: rgba(10, 10, 12, 0.65); }
.hex.is-locked:hover .hex-inner { color: #0a0a0c; }
.btn-primary, .btn-primary .mono { color: #08080a; }
.btn-primary {
  border: none !important;
  box-shadow: none !important;
  background: var(--paper);
  filter: none;
}
.btn-primary:hover {
  box-shadow: none !important;
  filter: brightness(1.06);
  background: var(--paper);
}
/* membership CTA — same flat law (no glass rim, no specular edge) */
.modal.modal-auth .modal-submit,
.modal.modal-auth .modal-done {
  border: none !important;
  box-shadow: none !important;
  background: var(--paper) !important;
  color: #0a0210 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.modal.modal-auth .modal-submit .mono,
.modal.modal-auth .modal-done .mono { color: #0a0210 !important; }
.modal.modal-auth .modal-submit:hover,
.modal.modal-auth .modal-done:hover {
  box-shadow: none !important;
  filter: brightness(1.06);
  background: var(--paper) !important;
}
.nav-cta.nav-account {
  border: none;
  box-shadow: none;
}
.nav-cta.nav-account:not(.is-member) {
  background: var(--paper);
  color: #0a0210 !important;
}
.nav-cta.nav-account:not(.is-member):hover {
  background: var(--paper);
  filter: brightness(1.06);
  box-shadow: none;
}

/* reader focus veils — neutral, not warm */
.rp-veil-top { background: linear-gradient(to bottom, var(--bg) 12%, rgba(0, 0, 0, 0.6) 55%, transparent); }
.rp-veil-bot { background: linear-gradient(to top, var(--bg) 12%, rgba(0, 0, 0, 0.6) 55%, transparent); }

/* architecture chips — glass on the SVG (no backdrop-filter in svg, so fake it) */
.sm-box { fill: rgba(184, 169, 144, 0.05); stroke: var(--glass-border); }
.sm-node.is-hot .sm-box { fill: rgba(184, 169, 144, 0.1); stroke: var(--accent); }

/* world map node bodies */
.wnode-dot { fill: #0b0b0d; }
.wnode.is-locked .wnode-dot { fill: #0b0b0d; }

/* terminal + world backdrops: cool the warm radial grounds */
.term { background: radial-gradient(130% 100% at 50% 40%, #0a0a0c, var(--bg) 85%); }
.world-stage { background: radial-gradient(120% 90% at 50% 12%, #0c0c0e 0%, var(--bg) 62%); }
html.journey-boot, html.journey-boot body { background: var(--bg); }

@media (max-width: 860px) {
  .nav.open { background: rgba(10, 10, 12, 0.94); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
}

/* ============================================================
   REV 9.6 — glass hive · louder field · a smaller, sharper map
   ============================================================ */

/* ---- the background field reads on true black now ---- */
.hero-grid {
  background-image:
    linear-gradient(rgba(184, 169, 144, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184, 169, 144, 0.075) 1px, transparent 1px);
  opacity: 1;
}

/* ---- the hive: charcoal cells become glass ----
   The old cells used a "rim trick": .hex carried a LIGHT background and .hex-face
   inset 1.5px to expose it as a border. A backdrop-filter on the face samples that
   light rim and smears it across the cell (everything went grey). So: .hex goes
   transparent, the face becomes the full glass pane, and the rim is redrawn as a
   masked ring that sits ON TOP of the glass. */
.hex { background: transparent; }
.hex-face {
  inset: 0;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
}
.hex::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: inherit;
  background: rgba(184, 169, 144, 0.2);
  padding: 1.5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
.hex-ghost .hex-face { background: rgba(184, 169, 144, 0.03); backdrop-filter: none; -webkit-backdrop-filter: none; }
.hex-ghost::after { background: rgba(184, 169, 144, 0.08); }
.hex.is-locked .hex-face { background: rgba(10, 10, 12, 0.62); }
.hex:hover .hex-face { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hex:hover .hex-inner { color: #08080a; }
.hex:hover .hx-meta { color: rgba(8, 8, 10, 0.65); }
.hex.is-locked:hover .hex-face { background: var(--accent); }
.hex.is-locked:hover .hex-inner { color: #08080a; }
.hex-join .hex-face { background: var(--accent); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hex-join .hex-inner { color: #08080a; }
.hex-join:hover .hex-face { background: rgba(10, 10, 12, 0.7); }
.hex-join:hover .hex-inner { color: var(--paper); }

.subject-tile, .lib-row, .tier, .cms-list > *, .ac-table > *, .stat-tile, .deep-card, .tl-plate, .micro-plate {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
}

/* ============================================================
   MY WORLD — the constellation gets its own zone
   The title was colliding with the top-left nodes. The map now
   lives right-of-centre and smaller; the title owns the left.
   ============================================================ */
.world-stage .wmap {
  inset: clamp(5.5rem, 13vh, 8.5rem) clamp(1.5rem, 3vw, 3.5rem) clamp(2.5rem, 7vh, 4.5rem) auto;
  width: min(56vw, 44rem);
  height: auto;
}
.ws-intro {
  max-width: min(28rem, 40vw);
  top: 50%;
  transform: translateY(-50%);
}
.world-stage.room-open .ws-intro { opacity: 0; transform: translateY(calc(-50% - 10px)); }
/* no scrim needed now that they no longer overlap */
.ws-intro::before { content: none; }

/* construction marks — survey ring, axis ticks, registration corners */
.wmarks { fill: none; stroke: rgba(184, 169, 144, 0.14); stroke-width: 1; }
.wmarks .wm-dash { stroke-dasharray: 2 7; stroke: rgba(184, 169, 144, 0.28); }
.wmarks .wm-cross { stroke: rgba(184, 169, 144, 0.2); }

/* finer nodes for the smaller map */
.wnode-label { font-size: 9.5px; letter-spacing: 0.12em; }

@media (max-width: 900px) {
  .world-stage { height: auto; min-height: 0; }
  .world-stage .wmap { position: relative; inset: auto; width: 100%; height: 68svh; margin-top: 1rem; }
  .ws-intro { position: relative; left: 0; top: 0; transform: none; max-width: none; padding: 5.6rem var(--pad) 0; }
  .world-stage.room-open .ws-intro { transform: none; }
}

/* the design system's own glass demo swatch */
.ds-glassdemo {
  background:
    radial-gradient(circle at 25% 40%, rgba(184, 169, 144, 0.28), transparent 55%),
    radial-gradient(circle at 75% 60%, rgba(120, 140, 255, 0.35), transparent 55%),
    repeating-linear-gradient(90deg, rgba(184,169,144,.1) 0 1px, transparent 1px 14px);
  border-radius: 8px;
  padding: 1.1rem;
}
.ds-glasspane {
  display: block;
  text-align: center;
  padding: 0.9rem 0.6rem;
  border-radius: 6px;
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  color: var(--paper);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
}

/* ---- narration voice toggle ---- */
.rp-voice {
  background: none;
  border: 1px solid rgba(184, 169, 144, 0.22);
  border-radius: 999px;
  width: 26px;
  height: 26px;
  padding: 0;
  line-height: 1;
  font-size: 0.7rem;
  cursor: pointer;
  opacity: 0.6;
  color: var(--paper);
  transition: opacity 0.2s ease, border-color 0.2s ease;
  flex: none;
}
.rp-voice:hover { opacity: 1; border-color: var(--paper-dim); }
.rp-voice.is-on { opacity: 1; border-color: var(--accent); }
.rp-voice[hidden] { display: none; }

/* ---- voice picker ---- */
.rp-vpick {
  background: none;
  border: 1px solid rgba(184, 169, 144, 0.22);
  border-radius: 999px;
  width: 20px; height: 26px;
  padding: 0;
  font-size: 0.6rem;
  line-height: 1;
  color: var(--paper-dim);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  flex: none;
}
.rp-vpick:hover, .rp-vpick.is-open { opacity: 1; color: var(--accent); border-color: var(--accent); }
.rp-vpick[hidden] { display: none; }

.rp-vmenu {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  width: min(21rem, 86vw);
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.7rem;
  border-radius: 14px;
  /* a readable pane, not a pretty one — a scrollable list needs contrast,
     so this uses the solid glass tone rather than the see-through one */
  background: rgba(9, 9, 11, 0.94);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  z-index: 60;
  text-align: left;
}
.rp-vmenu[hidden] { display: none; }
.vm-h { color: var(--accent); font-size: 0.58rem; letter-spacing: 0.14em; margin-bottom: 0.5rem; padding: 0 0.3rem; }
.vm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  padding: 0.42rem 0.5rem;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--paper-dim);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}
.vm-item:hover { background: rgba(184, 169, 144, 0.07); color: var(--paper); }
.vm-item.is-on { color: var(--accent); background: rgba(184, 169, 144, 0.1); }
.vm-tag { font-size: 0.5rem; opacity: 0.6; letter-spacing: 0.1em; flex: none; }
.vm-item.is-on .vm-tag { opacity: 0.9; }
.vm-note {
  margin-top: 0.6rem;
  padding: 0.6rem 0.5rem 0.2rem;
  border-top: 1px solid var(--glass-border);
  font-size: 0.56rem;
  line-height: 1.75;
  color: var(--paper-dim);
  opacity: 0.85;
}
.vm-note strong { color: var(--paper); }

/* ============================================================
   REV 9.8 — PERFORMANCE
   ============================================================ */

/* Park graphics that are off-screen. `.visible` is a one-shot reveal that never
   comes off, so without this every graphic the user has scrolled past keeps
   animating forever. Paused animations resume exactly where they left off. */
.gfx-idle, .gfx-idle * { animation-play-state: paused !important; }

/* One glow, not two. These 9 packets animate continuously along offset-paths;
   each drop-shadow is a per-frame filter pass on every one of them. */
.kpacket { filter: drop-shadow(0 0 7px rgba(184, 169, 144, 0.9)); }

/* ============================================================
   REV 9.9 — ACADEMY: PINNED HORIZONTAL TIMELINE
   Vertical scroll scrubs the track left. Nodes fade on the
   peripheries; the intro title clears once you start moving.
   Only active when JS adds .is-horizontal (wide screens, motion
   allowed) — otherwise the original vertical stack is the fallback.
   ============================================================ */
.tl-wrap.is-horizontal {
  position: relative;
  padding: 0;
  max-width: none;
  /* height is set by JS = 100vh + horizontal scroll distance */
}
.tl-wrap.is-horizontal .tl-viewport {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.tl-wrap.is-horizontal .tl-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60vw 60vh at 18% 30%, rgba(184, 169, 144, 0.06), transparent 70%),
    repeating-linear-gradient(90deg, rgba(184, 169, 144, 0.03) 0 1px, transparent 1px 96px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* the horizontal track — the row that slides */
.tl-wrap.is-horizontal .tl-track {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: 0 max(6vw, calc(50vw - 13rem));  /* first & last land in the centre */
  max-width: none;
  margin: 0;
  will-change: transform;
}
.tl-wrap.is-horizontal .tl-track::before { content: none; }  /* kill the vertical rail */
/* neutralise the scroll-reveal — horizontally-offscreen items never intersect
   the viewport, so .visible would never fire and they'd stay invisible */
.tl-wrap.is-horizontal .reveal { opacity: 1; transform: none; }

/* entries become immersive cards */
.tl-wrap.is-horizontal .tl-entry {
  flex: 0 0 auto;
  width: clamp(22rem, 34vw, 30rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin: 0;
  padding: 1.3rem 1.3rem 1.5rem;
  border-radius: 18px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  content-visibility: visible;
  contain-intrinsic-size: auto;
  transition: none;              /* JS drives opacity/scale per frame */
  transform-origin: center;
}
.tl-wrap.is-horizontal .tl-entry::before { content: none; }  /* no rail node */
.tl-wrap.is-horizontal .tl-entry::after {   /* specular top edge */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--glass-hi) 22%, var(--glass-hi) 78%, transparent);
}
.tl-wrap.is-horizontal .tl-plate {
  margin: 0; width: 100%;
  border-radius: 12px;
}
.tl-wrap.is-horizontal .tl-plate img { aspect-ratio: 16 / 10; }
.tl-wrap.is-horizontal .tl-plate.img-missing .tl-initials { aspect-ratio: 16 / 10; }
.tl-wrap.is-horizontal .tl-body { min-width: 0; }
.tl-wrap.is-horizontal .tl-text {
  font-size: 0.96rem; line-height: 1.55; max-width: none;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.tl-wrap.is-horizontal .tl-body h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin-bottom: 0.5rem; }
.tl-wrap.is-horizontal .tl-tag { margin-top: 0.8rem; font-size: 0.62rem; }

/* era markers become chapter-break panels */
.tl-wrap.is-horizontal .tl-era {
  flex: 0 0 auto;
  width: clamp(13rem, 20vw, 18rem);
  margin: 0;
  padding-left: 1.6rem;
  border-left: 1px solid rgba(184, 169, 144, 0.25);
  align-self: center;
}
.tl-wrap.is-horizontal .tl-era::before { content: none; }
.tl-wrap.is-horizontal .tl-era-num { font-size: 0.66rem; margin-bottom: 0.8rem; }
.tl-wrap.is-horizontal .tl-era h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.05; }
.tl-wrap.is-horizontal .tl-era.tl-end { width: clamp(18rem, 28vw, 24rem); }
.tl-wrap.is-horizontal .tl-era.tl-end .tl-text { display: block; max-width: 32ch; }

/* intro panel — the first item in the track; it walks off like everything else */
.tl-wrap.is-horizontal .tl-intro {
  flex: 0 0 auto;
  width: clamp(24rem, 48vw, 40rem);
  align-self: center;
  padding-right: clamp(1rem, 3vw, 2.5rem);
  will-change: opacity, transform;
}
.tl-intro-kicker { color: var(--accent); margin-bottom: 1rem; }
.tl-intro-title { font-size: clamp(1.85rem, 4.5vw, 3.2rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; }
.tl-intro-lead {
  margin-top: 1.1rem;
  max-width: 42ch;
  font-size: clamp(0.92rem, 1.35vw, 1.05rem);
  line-height: 1.58;
  color: var(--paper-dim);
  font-weight: 300;
}
.tl-intro-lead strong { color: var(--paper); font-weight: 500; }
.tl-intro-lead + .tl-intro-lead { margin-top: 0.75rem; }

/* ---------- Academy cinema: one idea per screen, then timeline, register last ---------- */
.academy-page .page { padding-top: 0; }
.academy-page .nav-cta[hidden] { display: none !important; }

.ac-cinema {
  position: relative;
  z-index: 1;
}
.ac-scene {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding:
    clamp(5.5rem, 14vh, 9rem)
    var(--pad)
    clamp(4rem, 12vh, 8rem);
  max-width: min(40rem, 100%);
  margin: 0 auto;
  opacity: 0.12;
  transform: translateY(18px) scale(0.985);
  filter: blur(0.4px);
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.7s ease;
  pointer-events: none;
}
.ac-scene.is-live {
  opacity: 1;
  transform: none;
  filter: none;
  pointer-events: auto;
}
.ac-scene.is-past {
  opacity: 0.06;
  transform: translateY(-14px) scale(0.98);
  filter: blur(1px);
  pointer-events: none;
}
.ac-scene.is-future {
  opacity: 0.1;
  transform: translateY(22px);
  filter: blur(0.6px);
}
.ac-scene-kicker {
  color: var(--accent);
  margin-bottom: 1.4rem;
  letter-spacing: 0.16em;
  font-size: 0.68rem;
}
.ac-scene-title {
  font-size: clamp(2rem, 5.2vw, 3.35rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 1.6rem;
  max-width: 16ch;
}
.ac-scene-body {
  font-size: clamp(1.55rem, 2.6vw, 2.05rem);
  line-height: 1.45;
  font-weight: 300;
  color: var(--paper-dim);
  max-width: 28ch;
  margin: 0;
}
.ac-scene-hint {
  margin-top: 2.8rem;
  color: var(--paper-dim);
  opacity: 0.55;
  letter-spacing: 0.18em;
  font-size: 0.66rem;
}
.ac-scene-bridge {
  padding-bottom: clamp(5rem, 16vh, 10rem);
}
.ac-access-late {
  padding-top: clamp(5rem, 14vh, 9rem);
  padding-bottom: clamp(4rem, 12vh, 8rem);
  margin-top: clamp(2rem, 8vh, 5rem);
  border-top: 1px solid rgba(184, 169, 144, 0.08);
}
.ac-access-lead {
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  line-height: 1.45;
  max-width: 32ch;
  font-weight: 300;
  color: var(--paper-dim);
  margin-top: 1.2rem;
}

/* timeline breathes — more air between cards */
body.academy-page .tl-wrap {
  margin-top: clamp(2rem, 8vh, 5rem);
}
body.academy-page .tl-wrap.is-horizontal .tl-track {
  gap: clamp(2.5rem, 5vw, 4.5rem);
  padding-top: 2vh;
  padding-bottom: 2vh;
}
body.academy-page .tl-wrap.is-horizontal .tl-entry {
  width: clamp(22rem, 32vw, 28rem);
}
body.academy-page .tl-wrap.is-horizontal .tl-intro-slim {
  width: clamp(18rem, 32vw, 26rem);
}
body.academy-page .tl-intro-slim .tl-intro-title {
  font-size: clamp(1.7rem, 3.5vw, 2.6rem);
}
body.academy-page .tl-text {
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
  line-height: 1.45;
  font-weight: 300;
}
body.academy-page .tl-wrap.is-horizontal .tl-text {
  font-size: clamp(1.15rem, 1.55vw, 1.35rem);
  -webkit-line-clamp: 7;
}

/* word-by-word ink: dim until scroll lights them — guides the eye */
.scroll-ink .si {
  color: rgba(184, 169, 144, 0.22);
  transition: color 110ms ease;
}
.scroll-ink .si.is-on {
  color: rgba(184, 169, 144, 0.94);
}
.scroll-ink .si.is-hot {
  color: var(--paper);
}
.ac-scene.is-past .scroll-ink .si {
  color: rgba(184, 169, 144, 0.35);
  transition: color 0.5s ease;
}
.ac-scene.is-past .scroll-ink .si.is-hot {
  color: rgba(184, 169, 144, 0.4);
}
.scroll-ink strong { font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
  .ac-scene {
    opacity: 1;
    transform: none;
    filter: none;
    pointer-events: auto;
    transition: none;
  }
  .scroll-ink .si {
    color: rgba(184, 169, 144, 0.9);
    transition: none;
  }
  .scroll-ink .si.is-hot { color: rgba(184, 169, 144, 0.95); }
}
.tl-hint { margin-top: 1.6rem; color: var(--paper-dim); font-size: 0.7rem; letter-spacing: 0.16em; }
.tl-hint-arrow { display: inline-block; color: var(--accent); animation: tl-nudge 1.6s ease-in-out infinite; }
@keyframes tl-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

/* progress rail */
.tl-wrap.is-horizontal .tl-rail {
  position: absolute; z-index: 3;
  left: clamp(1.4rem, 6vw, 5rem); right: clamp(1.4rem, 6vw, 5rem);
  bottom: clamp(1.6rem, 5vh, 3rem);
  height: 2px;
  background: rgba(184, 169, 144, 0.12);
  border-radius: 2px;
}
.tl-wrap.is-horizontal .tl-rail-fill {
  display: block; height: 100%; width: 0;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(184, 169, 144, 0.5);
}
/* the reader's active/word states must beat the peripheral dimming */
.tl-wrap.is-horizontal .tl-entry.rp-active { opacity: 1 !important; transform: none !important; }

@media (max-width: 760px) {
  /* JS won't add .is-horizontal here — vertical stack stays. Just hide the
     scaffolding that only makes sense horizontally. */
  .tl-intro, .tl-bg, .tl-rail { display: none; }
}

/* ============================================================
   REV 11 — MOBILE BEST PRACTICES
   Last in cascade. Fixes the post-layers glitch by killing sticky
   scroll-jacking on phones; centers + scales type to screen width.
   ============================================================ */

@media (max-width: 860px) {
  /* --- fluid type + spacing scale (screen-width based) --- */
  :root {
    --pad: clamp(1.2rem, 5.5vw, 1.75rem);
    --m-body: clamp(1.1rem, 4.4vw, 1.25rem);
    --m-lead: clamp(1.15rem, 4.6vw, 1.3rem);
    --m-h1: clamp(2.45rem, 10vw, 3.5rem);
    --m-h2: clamp(1.9rem, 7.4vw, 2.55rem);
    --m-h3: clamp(1.4rem, 5.8vw, 1.8rem);
    --m-kicker: clamp(0.72rem, 2.8vw, 0.82rem);
    --m-measure: min(36rem, 100%);
  }

  html, body { overflow-x: hidden; max-width: 100%; }
  body {
    font-size: var(--m-body);
    line-height: 1.65;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  main, .panel, .statement, .chapter, .scrub-wrap, .stepper, .connect, .work {
    max-width: 100%;
  }
  img, svg, video { max-width: 100%; height: auto; }
  #system-canvas { height: 100%; max-width: none; width: 100%; }

  /* content-visibility can leave blank gaps after sticky sections on iOS */
  #origins, #work, #deeper, #connect, #lens, #shift-copy {
    content-visibility: visible;
    contain-intrinsic-size: auto;
  }

  /* safe areas */
  .nav {
    padding-left: max(var(--pad), env(safe-area-inset-left));
    padding-right: max(var(--pad), env(safe-area-inset-right));
    padding-top: max(0.75rem, env(safe-area-inset-top));
  }
  .footer { padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }

  /* --- centering + measure --- */
  .hero-content,
  .statement,
  .panel-txt,
  .chapter-inner,
  .chapter-body,
  .shift-copy,
  .step-txt,
  .stepper-head,
  .connect,
  .work-intro,
  .hero-content,
  .panel-txt,
  .statement h2,
  .statement-lead,
  .chapter-text,
  .step-txt,
  .connect > *,
  .work-intro {
    max-width: var(--m-measure);
    margin-left: auto;
    margin-right: auto;
  }
  .chapter-meta, .stepper-head .chapter-meta { justify-content: center; }
  .mono.kicker, .fig, .s-num { font-size: var(--m-kicker); }

  /* --- type scale --- */
  .hero-title { font-size: var(--m-h1); letter-spacing: -0.03em; line-height: 1.05; }
  .hero-sub, .hero-close { font-size: var(--m-lead); max-width: 28ch; margin-left: auto; margin-right: auto; }
  .statement h2,
  .panel-txt h2,
  .stepper-head h2,
  .connect h2,
  .work h2 { font-size: var(--m-h2); line-height: 1.12; max-width: 18ch; margin-left: auto; margin-right: auto; }
  .step h3, .work-item h3, .deep-card h3 { font-size: var(--m-h3); }
  .statement-lead,
  .panel-lead,
  .chapter-text,
  .chapter-text p,
  .step p,
  .connect-sub,
  .work-intro { font-size: var(--m-body); line-height: 1.65; max-width: 34ch; margin-left: auto; margin-right: auto; }
  .chapter-text p { margin-bottom: 1.1rem; }

  /* --- hero --- */
  .hero {
    min-height: 100svh;
    min-height: 100dvh;
    padding: 5.5rem var(--pad) 4rem;
    justify-content: center;
    align-items: center;
  }
  .hero-content { margin-left: 0; width: 100%; padding: 0; }
  .scroll-cue { bottom: max(1.25rem, env(safe-area-inset-bottom)); }
  .thread { left: 5px; width: 2px; opacity: 0.7; }

  /* --- panels: single column, no overflow --- */
  .panel {
    min-height: 0;
    padding: clamp(3rem, 10vw, 4.5rem) var(--pad);
    overflow: visible;
  }
  .panel-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.25rem, 4vw, 1.75rem);
    width: 100%;
  }
  .panel.flip .panel-inner { direction: ltr; }
  .panel-gfx {
    width: min(100%, 22rem) !important;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
    order: -1; /* figure above text on phones */
  }
  .panel-gfx svg {
    width: 100%;
    height: auto;
    max-height: min(40svh, 300px);
    display: block;
    margin: 0 auto;
  }
  .gfx-cap {
    text-align: center;
    font-size: var(--m-kicker);
    padding: 0.4rem 0.5rem 0;
    line-height: 1.45;
  }
  #p-net svg, #p-chaos .lorenz, #p-exp svg,
  #p-agility svg, #p-info svg { transform: none !important; }
  .lorenz { width: min(15.5rem, 72vw) !important; margin: 0 auto; }

  /* --- FIG. 03a: STATIC on mobile (no sticky scrub → no post-layer glitch) --- */
  .scrub-wrap,
  .scrub-wrap.co-dark,
  .scrub-wrap.scrub-static {
    height: auto !important;
    max-width: 100%;
    overflow: visible;
    padding: clamp(2.5rem, 8vw, 3.5rem) var(--pad);
  }
  .scrub-sticky,
  .co-dark .scrub-sticky {
    position: static !important;
    height: auto !important;
    min-height: 0;
    overflow: visible !important;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .company-fig {
    width: min(100%, 24rem);
    max-width: 100%;
    margin: 0 auto;
    overflow: visible;
    text-align: center;
  }
  .company,
  .company.company-mobile {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: min(70svh, 560px);
    margin: 0 auto;
  }
  .company-fig figcaption {
    margin: 0.7rem auto 0;
    font-size: var(--m-kicker);
    line-height: 1.5;
    max-width: 32ch;
    text-align: center;
  }
  .scrub-hint { display: none !important; } /* no scroll-scrub on phones */

  /* fully exploded — ignore --sp collapse */
  .company-fig[data-scrub] .co-layer {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .company-fig[data-scrub] .co-sides,
  .company-fig[data-scrub] .co-axis-g {
    opacity: 1 !important;
    transition: none !important;
  }
  .cs-on-plate {
    fill: var(--paper) !important;
    font-family: var(--font-mono);
    font-size: 16px !important;
    letter-spacing: 0.12em;
    font-weight: 600;
  }
  .cs-label { font-size: 16px !important; }
  .cs-item { display: none !important; }

  /* --- statements & chapters --- */
  .statement {
    min-height: 0;
    padding: clamp(4rem, 12vw, 5.5rem) var(--pad) clamp(3rem, 8vw, 4rem);
  }
  .chapter { padding: clamp(3rem, 9vw, 4.5rem) var(--pad); }
  .chapter-body { grid-template-columns: 1fr; gap: 1.5rem; justify-items: center; }
  .drawing { max-width: 100%; overflow: hidden; margin: 0 auto; }
  .exploded, .exploded.watch { max-width: min(220px, 62vw); margin: 0 auto; }

  /* --- curve --- */
  .curve { max-width: 100%; height: auto; }

  /* --- steppers: vertical stack, no pin / no absolute cards --- */
  .stepper,
  .stepper.stepper-static,
  .stepper.stepper-smooth {
    height: auto !important;
    padding: 0;
  }
  .stepper-stage {
    position: static !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    padding: clamp(3rem, 9vw, 4.5rem) var(--pad);
    justify-content: flex-start;
  }
  .stepper-head { margin-bottom: 2rem; text-align: center; }
  .stepper-head h2 { margin-left: auto; margin-right: auto; }
  .steps {
    position: static !important;
    min-height: 0 !important;
    height: auto !important;
    width: 100%;
    max-width: var(--m-measure);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(2.25rem, 7vw, 3rem);
  }
  .step,
  .stepper-smooth .step,
  .stepper-static .step {
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 !important;
    margin: 0;
  }
  .step-gfx {
    width: min(14rem, 70vw);
    margin: 0 auto 1rem;
  }
  .step-gfx svg {
    width: 100%;
    max-height: 200px;
    height: auto;
    display: block;
    margin: 0 auto;
  }
  .step-txt { width: 100%; }
  .step-dots { justify-content: center; margin-top: 1.5rem; }

  /* --- nav --- */
  .nav-links {
    max-height: calc(100dvh - 56px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 80;
  }

  /* --- work / deep / connect --- */
  .work { padding: clamp(3rem, 9vw, 4.5rem) var(--pad); }
  .work-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.45rem;
    padding: 1.25rem 1.1rem;
  }
  .deep-grid { grid-template-columns: 1fr; gap: 1rem; }
  .deep-card { text-align: center; }
  .connect {
    min-height: 0;
    padding: clamp(4rem, 12vw, 5.5rem) var(--pad);
  }
  .connect-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.8rem;
    max-width: 22rem;
    margin: 1.5rem auto 0;
  }
  .connect-actions .btn-primary,
  .connect-actions .btn-ghost {
    width: 100%;
    justify-content: center;
    text-align: center;
    min-height: 48px;
    font-size: 1rem;
  }

  /* --- hive --- */
  .hive {
    --hex-w: min(42vw, 9.5rem);
    margin: 2.5rem auto 3.5rem;
    overflow: hidden;
    width: 100%;
  }

  /* --- terminal name field on small screens --- */
  .term {
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
             max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    align-items: center;
  }
  .term-win { width: min(100%, 28rem); }
  .term-body {
    font-size: max(0.95rem, 16px);
    max-height: min(55dvh, 55vh);
    padding: 1.1rem 1rem 1.4rem;
  }
  .term-input-row { width: 100%; }
  .term-field { font-size: max(1.05rem, 16px); min-width: 0; flex: 1 1 auto; }
  .term-skip {
    bottom: max(1rem, env(safe-area-inset-bottom));
    right: max(1rem, env(safe-area-inset-right));
    min-height: 44px;
  }

  /* lighter blur for scroll performance */
  .glass, .deep-card, .wp-inner, .hex-face {
    -webkit-backdrop-filter: blur(12px) saturate(140%);
            backdrop-filter: blur(12px) saturate(140%);
  }

  /* reader chrome */
  .jn-caption {
    font-size: 0.78rem;
    max-width: calc(100vw - 2rem);
    white-space: normal;
    text-align: center;
    bottom: max(4.5rem, calc(env(safe-area-inset-bottom) + 3.5rem));
  }
}

@media (max-width: 560px) {
  :root {
    --m-h1: clamp(2.25rem, 11vw, 3rem);
    --m-h2: clamp(1.75rem, 8vw, 2.25rem);
  }
  .company, .company.company-mobile { max-height: min(64svh, 480px); }
  .cs-on-plate { font-size: 14px !important; }
  .panel-gfx svg { max-height: min(36svh, 260px); }
  .hive { --hex-w: 40vw; }
  .statement h2, .panel-txt h2, .stepper-head h2 { max-width: 16ch; }
}

/* ============================================================
   MOBILE — touch targets, a11y, scroll containment
   (Apple HIG ≥44pt tap targets · Google web.dev tap-target + INP)
   ============================================================ */

/* no-cursor devices: the "move your cursor" hint is meaningless on touch */
@media (hover: none), (pointer: coarse) {
  .hero-hint { display: none; }
}

/* inner scrollers must not chain their overscroll to the page */
.rp-vmenu, .ws-room, .term-body, .cms-list, .ac-table, .users-table { overscroll-behavior: contain; }
@media (max-width: 860px) {
  .nav.open .nav-links { overscroll-behavior: contain; }
}

/* reader control: real touch targets on phones. The label already carries the
   section count, so the progress track can yield its width to the buttons. */
@media (max-width: 620px) {
  .rp { gap: 0.45rem; padding: 6px 9px; }
  .rp-btn { width: 44px; height: 44px; }
  .rp-nav, .rp-voice { width: 40px; height: 40px; font-size: 0.72rem; }
  .rp-vpick { width: 34px; height: 40px; font-size: 0.66rem; }
  .rp-track, .rp.is-playing .rp-track { display: none; }
  .rp-label { font-size: 0.62rem; }
}

/* ============================================================
   REV 10 — HOME: third industrial revolution motion
   Four verbs only (rotate · travel · ripple · draw-in).
   From _motion-guide-preview.html + retro-futurist-graphics.
   ============================================================ */

/* ---- path / philosophy split ---- */
.path-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.path-gfx {
  width: min(22rem, 100%);
  margin: 0 auto;
  padding: 0;
}
.path-gfx .gfx-cap { margin-top: 0.5rem; }
@media (max-width: 860px) {
  .path-split { grid-template-columns: 1fr; }
  .path-gfx { order: -1; width: min(16rem, 72vw); }
}

/* ---- statement figures: the home compositions ---- */
.statement-fig svg.hm-moire { aspect-ratio: 4 / 3; max-width: 30rem; margin-inline: auto; }
.statement-fig svg.hm-phyllo { aspect-ratio: 1; max-width: 21rem; margin-inline: auto; }
.statement-fig svg.hm-lens { aspect-ratio: 400 / 280; max-width: 27rem; margin-inline: auto; }
.statement-fig svg.hm-musica { aspect-ratio: 400 / 280; max-width: 26rem; margin-inline: auto; }
.statement-fig svg.hm-dawn { aspect-ratio: 400 / 260; max-width: 27rem; margin-inline: auto; }

/* INTERFERENCE — the displaced system orbits the still one so slowly the
   moiré breathes over minutes. Pivot = the still system's centre. */
.hm-orbit { transform-box: view-box; transform-origin: 172px 150px; }
.statement-fig.visible .hm-orbit { animation: hm-arc-turn 150s linear infinite; }

/* ---- FIG 03 · EMERGENCE (phyllotaxis) ----
   The seeds bloom in birth order — the head grows from the centre out, the
   way the real thing does. Then the whole head turns once every 150s, so the
   spirals are alive without ever asking for attention. */
.ph-seed {
  fill: rgba(184, 169, 144, 0.5);
  opacity: 0;
  transform: scale(0.2);
  transform-box: fill-box;
  transform-origin: center;
}
.statement-fig.visible .ph-seed {
  animation: ph-bloom 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes ph-bloom {
  to { opacity: 1; transform: scale(1); }
}
/* the newest seed — the one the rule is placing right now */
.ph-hot { fill: var(--accent); }
.statement-fig.visible .ph-hot {
  animation: ph-bloom 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* the head turns: whole-system rotation, so slow it reads as still.
   Only the seed group rotates — survey ring and label hold still. */
.ph-turn { transform-box: view-box; transform-origin: 200px 200px; }
.statement-fig.visible .ph-turn { animation: hm-arc-turn 150s linear infinite; }
/* construction marks sit outside the turning head */
.ph-marks { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .statement-fig.visible .ph-turn { animation: none; }
  .ph-seed { opacity: 1; transform: none; }
  .statement-fig.visible .ph-seed,
  .statement-fig.visible .ph-hot { animation: none; }
}

.hm-lbl {
  fill: rgba(184, 169, 144, 0.4);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.14em;
}

/* ---- VERB 04 · DRAW-IN (relationship once) ---- */
.hm-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.hm-d1 { transition-delay: 0.05s; }
.hm-d2 { transition-delay: 0.18s; }
.hm-d3 { transition-delay: 0.31s; }
.hm-d4 { transition-delay: 0.44s; }
.hm-d5 { transition-delay: 0.57s; }
.hm-d6 { transition-delay: 0.78s; }

.panel-gfx.visible .hm-draw,
.statement-fig.visible .hm-draw,
.step.active .hm-draw {
  stroke-dashoffset: 0;
}

/* ---- VERB 01 · ROTATE (whole-system, so slow it feels still) ---- */
.hm-spin {
  transform-box: view-box;
  transform-origin: 200px 200px;
}
.panel-gfx.visible .hm-spin,
.statement-fig.visible .hm-spin,
.step.active .hm-spin {
  animation: hm-arc-turn 120s linear infinite;
}
@keyframes hm-arc-turn {
  to { transform: rotate(360deg); }
}

/* clock hands — true 12:1 gearing, both calm (view-box origin = clock centre) */
.hm-hand-h, .hm-hand-m {
  transform-box: view-box;
  transform-origin: 200px 200px;
}
.panel-gfx.visible .hm-hand-h,
.step.active .hm-hand-h {
  animation: hm-arc-turn 1080s linear infinite; /* the hour: felt, never seen */
}
.panel-gfx.visible .hm-hand-m,
.step.active .hm-hand-m {
  animation: hm-arc-turn 90s linear infinite;   /* the minute: barely seen */
}

.hm-clock .hm-spin {
  transform-box: view-box;
  transform-origin: 200px 200px;
}
.hm-birth .hm-spin {
  transform-box: view-box;
  transform-origin: 200px 200px;
}

/* ---- VERB 02 · TRAVEL (signal on a path) ---- */
.hm-pulse {
  fill: var(--accent, var(--paper));
  opacity: 0;
  offset-rotate: auto;
  offset-distance: 0%;
  filter: drop-shadow(0 0 3px rgba(184, 169, 144, 0.6)); /* hairline only — no bloom */
}
.panel-gfx.visible .hm-pulse,
.step.active .hm-pulse {
  animation-name: travel;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* tone network packets to match the law (hairline, not glare) */
.kpacket {
  filter: drop-shadow(0 0 3px rgba(184, 169, 144, 0.55)) !important;
}

/* ---- VERB 03 · RIPPLE (shock propagates) ---- */
.hm-ripple {
  fill: none;
  stroke: var(--accent, var(--paper));
  stroke-width: 1.4;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.panel-gfx.visible .hm-r1, .statement-fig.visible .hm-r1 {
  animation: gripple 3.4s ease-out infinite;
}
.panel-gfx.visible .hm-r2, .statement-fig.visible .hm-r2 {
  animation: gripple 3.4s ease-out infinite 1.1s;
}
.panel-gfx.visible .hm-r3, .statement-fig.visible .hm-r3 {
  animation: gripple 3.4s ease-out infinite 2.15s;
}

/* emergence: outer rings stay geometric; ripple owns the motion */
#p-emerge .g-zoom { transform: scale(1.08); }

/* ---- reduced motion: land in final state ---- */
@media (prefers-reduced-motion: reduce) {
  .hm-draw { stroke-dashoffset: 0 !important; transition: none !important; }
  .panel-gfx.visible .hm-spin,
  .statement-fig.visible .hm-spin,
  .panel-gfx.visible .hm-hand-h,
  .panel-gfx.visible .hm-hand-m,
  .panel-gfx.visible .hm-pulse,
  .panel-gfx.visible .hm-ripple,
  .statement-fig.visible .hm-ripple,
  .panel-gfx.visible .hm-r1,
  .panel-gfx.visible .hm-r2,
  .panel-gfx.visible .hm-r3,
  .statement-fig.visible .hm-r1,
  .statement-fig.visible .hm-r2,
  .statement-fig.visible .hm-r3 {
    animation: none !important;
  }
  .hm-pulse { opacity: 0.95; offset-distance: 55%; }
  .hm-ripple { opacity: 0.28; transform: scale(1.4); }
  .hm-hand-h { transform: rotate(28deg); }
  .hm-hand-m { transform: rotate(110deg); }
}

@media (max-width: 860px) {
  #p-emerge .g-zoom { transform: none; }
  .statement-fig svg.hm-phyllo { max-width: 15rem; }
}

/* ============================================================
   REV 12 — NEW HOMEPAGE FIGURES
   FIG 02 · three wires braid into one economy   (draw + travel)
   FIG 04c · centralized hub becomes a peer mesh (draw + travel + rotate)
   Four-verb grammar · one orange · flat light · parked off-screen.
   ============================================================ */

.panel-gfx svg.hm-wires, .panel-gfx svg.hm-mesh { width: 100%; height: auto; overflow: hidden; }

/* ---- TRAVEL · the signal riding a wire ----
   Signals are CREAM: they are traffic, not the leverage point. The single
   orange per composition is reserved for the junction / the one hot route. */
.hm-sig {
  fill: rgba(184, 169, 144, 0.9);
  offset-rotate: auto;         /* the dot becomes a streak along its own path */
  offset-distance: 0%;
  opacity: 0;
}
.hm-sig-hot {
  fill: var(--accent);
  /* flat light — a hairline, never a bloom */
  filter: drop-shadow(0 0 3px rgba(184, 169, 144, .6));
}
.panel-gfx.visible .hm-sig,
.step.active .hm-sig {
  animation-name: hm-ride;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes hm-ride {
  0%   { offset-distance: 0%;   opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
/* ---- FIG 02 · the junction where three become one ----
   Static. The travel verb already owns this figure's motion; the junction
   holds still and lets the signals arrive at it. */
.hm-join { transform-box: fill-box; transform-origin: center; }
.hm-joinring { opacity: .55; }
.hm-lbl-a { fill: var(--accent); opacity: .9; }

/* ---- FIG 04c · the old centre recedes as peers take over ---- */
.hm-spokes { opacity: 1; transition: opacity 2.4s ease 1.2s; }
.panel-gfx.visible .hm-spokes,
.step.active .hm-spokes { opacity: .45; }   /* fades, never disappears */
.hm-hub { transform-box: fill-box; transform-origin: center; }
.panel-gfx.visible .hm-hub,
.step.active .hm-hub { animation: hm-hub-breathe 9s ease-in-out infinite; }
@keyframes hm-hub-breathe {
  0%, 100% { opacity: .5; }
  50%      { opacity: .95; }
}

/* reduced motion: land in the final state, no movement */
@media (prefers-reduced-motion: reduce) {
  .panel-gfx.visible .hm-sig,
  .panel-gfx.visible .hm-hub,
  .statement-fig.visible .hm-orbit { animation: none; }
  .hm-sig { opacity: .95; offset-distance: 62%; }
  .hm-spokes { transition: none; opacity: .45; }
}

/* ============================================================
   REV 13 — membership CTAs + named story beats
   ============================================================ */
.membership-pitch {
  margin-top: 1.2rem;
  color: var(--paper-dim);
  opacity: 0.75;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
  text-transform: uppercase;
}
.connect-membership {
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}
.statement-aside {
  margin-top: 0.85rem;
  color: var(--accent);
  letter-spacing: 0.12em;
  font-size: 0.68rem;
  text-transform: uppercase;
  opacity: 0.9;
}
/* Friend-to-you story voice — only when we know their name */
.story-voice {
  max-width: 34ch;
  margin: 0.9rem 0 0;
  font-size: clamp(1.08rem, 2.1vw, 1.35rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--paper, var(--paper));
  text-wrap: balance;
}
.statement .story-voice {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.story-voice .you {
  color: var(--accent, var(--paper));
  font-weight: 500;
}
.story-voice.hero-greet {
  text-transform: none;
  letter-spacing: -0.015em;
  font-size: clamp(1.12rem, 2.2vw, 1.45rem);
  margin-bottom: 1rem;
  color: var(--paper, var(--paper));
}
html.is-named .story-voice.hero-greet,
html.is-named .hero-greet[data-hello] {
  display: block;
}
/* Named asides should still animate in with .reveal, but never stay blank-looking */
html.is-named .story-voice.is-on[hidden] {
  display: none !important;
}

.nav-cta.nav-account:not(.is-member) {
  border-color: rgba(184, 169, 144, 0.28);
  color: var(--accent, var(--paper));
}
.nav-cta.nav-account:not(.is-member):hover {
  background: rgba(184, 169, 144, 0.12);
}
.tier-feature {
  outline: 1px solid rgba(184, 169, 144, 0.22);
  box-shadow: 0 0 0 1px rgba(184, 169, 144, 0.08);
}

/* ============================================================
   REV 13 — SCROLL READING
   The scroll-reader drives word opacity as a continuous function
   of scroll; this short transition is the silk between frames.
   The narrator needs crisp per-frame control, so it opts out.
   ============================================================ */
.rw { transition: opacity 0.22s linear; }
.rp-active .rw { transition: none; }

/* typewriter caret for section titles */
.tw-caret {
  color: var(--accent);
  animation: blink 1s steps(1) infinite;
  font-weight: 300;
}

@media (prefers-reduced-motion: reduce) {
  .rw { transition: none; }
}

/* ============================================================
   REV 14 — HERO CINEMA
   An empty stage. The title breathes in, character by character.
   Then scroll racks focus: title → paragraph → thesis, one act on
   stage at a time. Opacity/blur are continuous functions of scroll.
   ============================================================ */
.hero { display: block; height: 300svh; min-height: 0; padding: 0; overflow: visible; }
.hero-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 var(--pad);
}
.hero-content { display: grid; }
.hero-content > .h-act { grid-area: 1 / 1; align-self: center; will-change: opacity, transform; }
.h-act-2, .h-act-3 { opacity: 0; }

/* each act owns the whole stage — the paragraphs get real presence */
.h-act-2 .hero-sub { margin-top: 0; font-size: clamp(1.2rem, 2.2vw, 1.7rem); line-height: 1.75; max-width: 38ch; }
.h-act-3 .hero-close { margin-top: 0; font-size: clamp(1.1rem, 2vw, 1.55rem); line-height: 1.8; max-width: 42ch; }
.h-act-3 .hero-hint { margin-top: 2.6rem; }

/* pre-JS: nothing on stage */
.hero-wait .hero-content, .hero-wait .scroll-cue { opacity: 0; }

/* kicker, greeting and cue wait in the dark until the title has landed */
.hero .kicker, .hero .hero-greet { opacity: 0; transition: opacity 1.4s ease 0.2s; }
.hero.h-typed .kicker, .hero.h-typed .hero-greet:not([hidden]) { opacity: 1; }
.hero .scroll-cue { opacity: 0; transition: opacity 1.2s ease; }

/* the soft typewriter: characters breathe in, they don't pop */
.hword { display: inline-block; white-space: nowrap; }
.hchar {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.16em);
  filter: blur(7px);
  transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.7s ease;
}
.hchar.on { opacity: 1; transform: none; filter: blur(0); }
/* keep the gradient word painted per-character (background-clip breaks on children) */
.grad-text .hchar { background: var(--grad); -webkit-background-clip: text; background-clip: text; }

/* reduced motion: a still, complete hero — no pin, no typing, no scrub */
@media (prefers-reduced-motion: reduce) {
  .hero { height: auto; min-height: 0; }
  .hero-pin { position: relative; height: auto; min-height: 100svh; }
  .hero-content { display: block; }
  .h-act-2, .h-act-3 { opacity: 1; }
  .h-act-2 .hero-sub { margin-top: 1.8rem; }
  .h-act-3 .hero-close { margin-top: 1.5rem; }
  .hero .kicker, .hero .hero-greet:not([hidden]), .hero .scroll-cue { opacity: 1; transition: none; }
  .hchar { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ============================================================
   REV 15 — ONE TEMPLATE, ONE COLUMN
   Every section reads the same way: title → animation → wording,
   in a single quiet column. Titles calmer; figures get real air
   above and below so each animation reinforces its own title.
   ============================================================ */

/* statements: left-aligned column instead of centered stage */
.statement { text-align: left; align-items: center; }
.statement > * { width: 100%; max-width: 46rem; }
.statement .chapter-meta { justify-content: flex-start; margin-bottom: 1.6rem; }
.statement h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); }
.statement .statement-lead { margin-inline: 0; }
.statement .statement-fig,
.statement-fig {
  width: 100%;
  max-width: 46rem;
  margin: clamp(2.6rem, 7vh, 4rem) auto clamp(2.8rem, 7vh, 4.2rem);
}

/* panels: the two-column layout retires — same column as statements */
.panel-inner {
  display: flex;
  flex-direction: column;
  max-width: 46rem;
  gap: 0;
}
.panel.flip .panel-inner { direction: ltr; }
.panel-inner > .chapter-meta { margin-bottom: 1.6rem; }
.panel-inner > h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.panel-gfx {
  width: min(24rem, 100%);
  margin: clamp(2.6rem, 7vh, 4rem) auto clamp(2.8rem, 7vh, 4.2rem);
}
.panel-txt { max-width: 58ch; }
.gfx-cap { margin-top: 1.1rem; }

/* the philosophy section joins the template */
.path-split { display: flex; flex-direction: column; max-width: 46rem; margin-inline: auto; }
.path-split > .chapter-meta { margin-bottom: 1.6rem; }
.path-split > h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.15; }
.path-split .path-gfx { width: min(23rem, 100%); margin: clamp(2.6rem, 7vh, 4rem) auto clamp(2.8rem, 7vh, 4.2rem); }

/* the hero speaks a size lower too */
.hero-title { font-size: clamp(2.2rem, 5.5vw, 4.4rem); }

/* ---- strict column: no animation paints past the inline width ----
   The old compositions bled past their frames (tributaries from off-canvas,
   the continent disc, the dawn horizon). The geometry still runs to the edge
   of its frame — it just stops AT the frame now, like everything else. */
.statement-fig svg,
.panel-gfx > svg,
.path-gfx svg { overflow: hidden; }

/* ============================================================
   REV 16 — SECTION CINEMA
   Every chapter scrolls like the hero: pinned stage, three acts
   racking through on scroll. Title → animation → wording, one
   thing on stage at a time.
   ============================================================ */
.sec-cine { height: 200svh; min-height: 0; padding: 0; display: block; }
/* two-act (title → body) matches hero length more than the old 3-act rack */
.sec-cine.sec-cine-2 { height: 180svh; }
/* the pin must span the full width — escape the old column cap on .statement > * */
.sec-cine > .sec-pin { width: 100%; max-width: none; }
.sec-cine .sec-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--pad);
}
/* the stage: one readable column, acts stacked in the same cell */
.sec-cine .sec-stage,
.sec-cine .panel-inner,
.sec-cine .path-split { display: grid; width: 100%; max-width: 42rem; margin-inline: auto; }
.sec-cine .s-act {
  grid-area: 1 / 1;
  align-self: center;
  will-change: opacity, transform;
  opacity: 0;
  width: 100%;
}
.sec-cine .s-a1 { opacity: 1; } /* the title is on stage as the section arrives */
/* act 2 stacks figure + copy like a clean vertical beat */
.sec-cine .s-a2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.4rem;
}
.sec-cine .s-a2 .panel-txt,
.sec-cine .s-a2 .path-copy {
  width: 100%;
  max-width: 42ch;
  margin-inline: auto;
  text-align: left;
}
.sec-cine .s-a2 .statement-fig,
.sec-cine .s-a2 .panel-gfx,
.sec-cine .s-a2 .path-gfx {
  width: min(22rem, 88%);
  margin: 0 auto;
}
.sec-cine .s-a1 .chapter-meta { justify-content: center; }
.sec-cine .s-a1 h2,
.sec-cine .s-a1 .connect-title {
  text-align: center;
  margin-inline: auto;
}
.sec-cine#connect .s-a2,
.sec-cine .connect-actions {
  text-align: center;
  align-items: center;
}

/* wording holds a reading measure — never wider than comfortable */
.sec-cine .statement-lead,
.sec-cine .panel-lead,
.sec-cine .chapter-text,
.sec-cine .connect-sub { max-width: 58ch; }
.sec-cine .statement-lead { margin-top: 0; }
.sec-cine .statement-lead + .statement-lead,
.sec-cine .panel-lead + .panel-lead,
.sec-cine .chapter-text + .chapter-text { margin-top: 1.4rem; }
/* figures sit quiet at stage centre — the pin gives them their air */
.sec-cine .statement-fig,
.sec-cine .panel-gfx { margin: 0 auto; }

/* terminal blinkers — title typewriters and the hero */
.tw-caret, .hcaret {
  display: inline-block;
  color: var(--accent);
  animation: blink 1s steps(1) infinite;
  margin-left: 0.06em;
  font-weight: 300;
  filter: none;
  opacity: 1 !important; /* the blinker never inherits a character's fade */
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  /* no pinning, no acts — sections flow normally, everything visible */
  .sec-cine { height: auto; }
  .sec-cine .sec-pin { position: relative; height: auto; min-height: 0; padding: 7rem var(--pad); }
  .sec-cine .sec-stage, .sec-cine .panel-inner, .sec-cine .path-split { display: block; }
  .sec-cine .s-act { opacity: 1 !important; filter: none !important; transform: none !important; }
  .sec-cine .s-act + .s-act { margin-top: 2.6rem; }
}

/* hero: two acts now — shorter journey */
.hero { height: 220svh; }

/* ---- hero SYNTHESIS: three dots connect → the economy is generated ---- */
.h-tri { display: block; width: min(19rem, 100%); margin: 0 0 2rem; overflow: hidden; }
.h-tri .tri-d { fill: rgba(184, 169, 144, 0.7); }
.h-tri .tri-e {
  stroke: rgba(184, 169, 144, 0.45);
  stroke-width: 1.4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.h-act-3.go .tri-e1 { stroke-dashoffset: 0; transition-delay: 0.15s; }
.h-act-3.go .tri-e2 { stroke-dashoffset: 0; transition-delay: 0.55s; }
.h-act-3.go .tri-e3 { stroke-dashoffset: 0; transition-delay: 0.95s; }
/* the connection generates the economy — born once the triangle closes */
.h-tri .tri-core { fill: var(--accent); opacity: 0; transform: scale(0.2); transform-box: fill-box; transform-origin: center;
  transition: opacity 0.7s ease 1.7s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.7s; }
.h-tri .tri-ring { fill: none; stroke: rgba(184, 169, 144, 0.25); stroke-width: 1; opacity: 0; transition: opacity 0.7s ease 1.9s; }
.h-tri .tri-lbl { opacity: 0; transition: opacity 0.8s ease 2.1s; }
.h-act-3.go .tri-core { opacity: 1; transform: scale(1); }
.h-act-3.go .tri-ring { opacity: 1; }
.h-act-3.go .tri-lbl { opacity: 1; fill: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .h-tri .tri-e { stroke-dashoffset: 0; transition: none; }
  .h-tri .tri-core, .h-tri .tri-ring, .h-tri .tri-lbl { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   HOMEPAGE CINEMA v100 — live scene · scroll-ink · late CTA
   One idea owns the viewport. Register last. Thread marks wayfind.
   ============================================================ */

/* skip link — keyboard first */
.skip-link {
  position: absolute;
  left: var(--pad);
  top: 0.75rem;
  z-index: 10000;
  padding: 0.55rem 0.9rem;
  background: var(--accent);
  color: #0d0c0b !important;
  text-decoration: none;
  border-radius: 999px;
  letter-spacing: 0.1em;
  font-size: 0.68rem;
  transform: translateY(-160%);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}

/* global focus ring for nav + primary controls */
.nav-links a:focus-visible,
.nav-cta:focus-visible,
.nav-burger:focus-visible,
.btn-ghost:focus-visible,
.thread-mark:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* guest membership CTA: quiet until offer is near */
.nav-cta.is-late-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  margin: 0;
  border-width: 0;
  overflow: hidden;
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    max-width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.45s ease,
    transform 0.45s ease;
}
.nav-cta:not(.is-late-hidden) {
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    max-width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.2s ease,
    color 0.2s ease,
    transform 0.45s ease;
}

/* thread chapter marks — thin, sophisticated; gray gaps between */
.thread-marks {
  position: absolute;
  top: 10vh;
  bottom: 10vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 0;
  pointer-events: auto;
  z-index: 2;
}
.thread-mark {
  width: 7px;
  height: 1px;
  margin-left: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: rgba(184, 169, 144, 0.32);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.25s ease, width 0.25s ease, opacity 0.25s ease;
}
.thread-mark.is-done {
  background: rgba(184, 169, 144, 0.45);
}
.thread-mark.is-on {
  width: 11px;
  height: 1px;
  background: var(--paper);
  box-shadow: none;
}
/* in-between ticks — gray, barely there */
.thread-mark-gap {
  display: block;
  width: 4px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(140, 140, 140, 0.22);
  pointer-events: none;
  flex-shrink: 0;
}
@media (max-width: 860px) {
  .thread-marks { display: none; }
}

/* homepage: no past/future dim filters — snap stage owns visibility */
body.home-page [data-home-scene] {
  filter: none !important;
  transform: none !important;
}
/* stage z-index only — never hide slides (breaks scroll) */

/* one-idea ownership: tighter leads, less dual-paragraph weight */
body.home-page .statement-lead {
  margin-top: 1.4rem;
  font-size: 20px;
  line-height: 1.55;
  font-weight: 500;
  max-width: 42ch;
  font-weight: 300;
}
body.home-page .panel-lead {
  font-size: 20px;
  line-height: 1.55;
  font-weight: 500;
  max-width: 40ch;
}
body.home-page .statement-source {
  margin-top: 1.4rem;
  color: var(--paper-dim);
  opacity: 0.55;
  letter-spacing: 0.14em;
  font-size: 0.64rem;
}
body.home-page .statement-fig {
  margin: 1.6rem auto 0.4rem;
}
body.home-page .path-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-top: 2rem;
  color: var(--paper-dim);
  letter-spacing: 0.12em;
  font-size: 0.68rem;
}
body.home-page .path-links a {
  color: var(--paper-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
body.home-page .path-links a:hover {
  color: var(--accent);
  border-bottom-color: rgba(184, 169, 144, 0.28);
}
body.home-page .connect-offer {
  margin-top: 1.4rem;
  max-width: 36ch;
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  line-height: 1.5;
  color: var(--paper-dim);
  font-weight: 300;
}

/* ---- HOME RHYTHM: hero + chapters share the same two-act pin length ---- */
body.home-page .sec-cine,
body.home-page .sec-cine.sec-cine-2 {
  height: auto;
}
body.home-page .hero {
  height: 180svh;
}
body.home-page .statement:not(.sec-cine),
body.home-page .panel:not(.sec-cine) {
  min-height: min(100svh, 52rem);
  padding: clamp(4rem, 9vh, 6rem) var(--pad);
}
body.home-page .chapter:not(.sec-cine) {
  padding: clamp(4rem, 9vh, 6rem) var(--pad);
}
body.home-page .connect {
  min-height: min(88svh, 40rem);
  padding: clamp(4rem, 10vh, 6.5rem) var(--pad);
}
body.home-page .chapter-meta {
  margin-bottom: clamp(1.4rem, 3.5vh, 2.4rem);
}
body.home-page .statement .chapter-meta {
  margin-bottom: 1.6rem;
}
body.home-page .statement-fig {
  margin: 1.4rem auto 0.4rem;
}
@media (max-width: 860px) {
  body.home-page .sec-cine {
    height: auto;
  }
  body.home-page .statement,
  body.home-page .panel,
  body.home-page .chapter {
    min-height: 0;
    padding: 4rem 1.25rem;
  }
  body.home-page .connect {
    padding: 4rem 1.25rem;
    min-height: 0;
  }
}


/* homepage: scroll-ink stays fully readable (no karaoke dim on titles) */
body.home-page .scroll-ink .si {
  color: inherit;
  -webkit-text-fill-color: inherit;
  transition: color 110ms ease;
}
body.home-page .scroll-ink .si.is-hot {
  color: var(--paper);
  -webkit-text-fill-color: var(--paper);
}
body.home-page .scroll-ink strong {
  font-weight: 500;
}
body.home-page .grad-text .si,
body.home-page .grad-text .si.is-on,
body.home-page .grad-text .si.is-hot {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* phone: shorter sections, less blur/cinema cost, stack history cleanly */
@media (max-width: 860px) {
  body.home-page [data-home-scene].is-past,
  body.home-page [data-home-scene].is-future {
    opacity: 1;
    filter: none;
    transform: none;
  }
  body.home-page .statement {
    min-height: 0;
    padding: 5.5rem 1.25rem 4rem;
  }
  body.home-page .panel {
    min-height: 0;
    padding: 4rem 1.25rem;
  }
  body.home-page .statement h2 {
    font-size: clamp(1.85rem, 7.5vw, 2.6rem);
  }
  body.home-page .statement-lead,
  body.home-page .panel-lead {
    font-size: 1.05rem;
    max-width: 100%;
  }
  body.home-page .home-history .stepper-head h2 {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
  body.home-page .nav-cta.is-late-hidden {
    /* on mobile drawer, keep CTA visible when menu is open */
  }
  body.home-page .nav.open .nav-cta.is-late-hidden {
    opacity: 1;
    pointer-events: auto;
    max-width: none;
    padding: 0.75rem 0;
    transform: none;
    border-width: 0;
    overflow: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page [data-home-scene],
  body.home-page [data-home-scene].is-past,
  body.home-page [data-home-scene].is-future,
  body.home-page [data-home-scene].is-live {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
  body.home-page .scroll-ink .si {
    color: rgba(184, 169, 144, 0.9) !important;
    -webkit-text-fill-color: unset;
    transition: none;
  }
  body.home-page .grad-text .si {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
  }
  .nav-cta.is-late-hidden {
    opacity: 1;
    pointer-events: auto;
    max-width: none;
    transform: none;
  }
}

/* drop dead middle-act rules that no longer exist in HTML */
/* (.h-act-2 styles retained only as reduced-motion no-ops above) */

/* ============================================================
   FIG. 01 — THE MODERN WORLD · photo containers
   A cascade of plates in descending size: the evidence, in
   photographs. Grayscale + hairline frame keeps photography
   inside the night system; ONE plate carries the orange.
   ============================================================ */
.mw-fig { width: 100%; max-width: none; }
.mw-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1.2vw, 1rem);
  width: 100%;
}
.mw-plate {
  --h: 15rem;
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--h) * 0.72);
  height: var(--h);
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(184, 169, 144, 0.04);
  border: 1px solid var(--glass-border);
  /* rise in sequence when the act lands — quiet, staggered, one direction */
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s ease calc(var(--d) * 90ms),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--d) * 90ms);
}
.statement-fig.visible .mw-plate,
.s-act .mw-plate { opacity: 1; transform: none; }
/* descending cascade — φ-ish decay, tallest leads */
.mw-p1 { --h: 15rem; }
.mw-p2 { --h: 13.2rem; }
.mw-p3 { --h: 11.6rem; }
.mw-p4 { --h: 10.2rem; }
.mw-p5 { --h: 9rem; }
.mw-p6 { --h: 7.9rem; }
.mw-p7 { --h: 7rem; }

.mw-plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* the house photo treatment: grayscale, printed for night */
  filter: grayscale(1) contrast(1.12) brightness(0.72);
  transition: filter 0.5s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.mw-plate:hover img { filter: grayscale(1) contrast(1.18) brightness(0.92); transform: scale(1.03); }
/* the mono label rides the bottom edge of each plate */
.mw-plate::after {
  content: attr(data-lbl);
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.4rem 0.5rem 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-align: center;
  color: rgba(184, 169, 144, 0.75);
  background: linear-gradient(to top, rgba(8, 8, 10, 0.92), transparent);
  pointer-events: none;
}
/* the one orange: the symptom that is also the mechanism */
.mw-plate.is-hot { border-color: rgba(184, 169, 144, 0.55); }
.mw-plate.is-hot::after { color: var(--accent); }

/* missing photo → a labelled plate, not a broken box */
.mw-plate.img-missing img { display: none; }
.mw-plate.img-missing {
  background:
    repeating-linear-gradient(45deg, rgba(184,169,144,.03) 0 6px, transparent 6px 12px),
    rgba(184, 169, 144, 0.03);
}

@media (max-width: 860px) {
  /* phones: the cascade becomes a swipeable filmstrip, sizes equalise */
  .mw-strip {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
  }
  .mw-strip::-webkit-scrollbar { display: none; }
  .mw-plate { scroll-snap-align: center; }
  .mw-p1, .mw-p2, .mw-p3, .mw-p4, .mw-p5, .mw-p6, .mw-p7 { --h: 11rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mw-plate { opacity: 1; transform: none; transition: none; }
  .mw-plate:hover img { transform: none; }
}

/* ============================================================
   REV 18 — HOME RHYTHM FIX
   · one type step: section titles are the main title minus 4pt
   · shorter pins: the handover fills the scroll, no empty travel
   · tight gaps: title → animation → wording read as one breath
   · text CROSSFADES in place; it never slides under the eye
   ============================================================ */
:root {
  /* the main title, and the single step down every other title takes */
  --title-1: clamp(2.2rem, 5.5vw, 4.4rem);
  --title-step: 0.333rem;                 /* 4pt (1pt = 1.333px) */
  --title-2: calc(var(--title-1) - var(--title-step));
}

.hero-title { font-size: var(--title-1); }
body.home-page .statement h2,
body.home-page .panel-inner > h2,
body.home-page .path-split > h2,
body.home-page .sec-cine h2,
body.home-page .connect-title {
  font-size: var(--title-2);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* ---- pins: only as long as the handover needs ---- */
body.home-page .sec-cine,
body.home-page .sec-cine.sec-cine-2 { height: 150svh; }
body.home-page .hero { height: auto; }

/* ---- gaps: the three beats sit close enough to feel like one idea ---- */
body.home-page .sec-cine .chapter-meta { margin-bottom: 1rem; }
body.home-page .sec-cine .s-a2 > * + * { margin-top: 1.1rem; }
body.home-page .sec-cine .statement-fig,
body.home-page .sec-cine .panel-gfx,
body.home-page .sec-cine .path-gfx { margin: 0 auto 1.2rem; }
body.home-page .sec-cine .statement-lead,
body.home-page .sec-cine .panel-lead,
body.home-page .sec-cine .chapter-text { margin-top: 0; }
body.home-page .sec-cine .statement-lead + .statement-lead,
body.home-page .sec-cine .panel-lead + .panel-lead,
body.home-page .sec-cine .chapter-text + .chapter-text { margin-top: 1rem; }
/* the story-voice aside shouldn't push the title off its optical centre */
body.home-page .sec-cine .story-voice { margin-top: 0.8rem; }

/* the hero's own beats, same rhythm */
body.home-page .h-tri { margin-bottom: 1.4rem; }
body.home-page .hero-close { margin-top: 0; }
body.home-page .hero-hint { margin-top: 1.6rem; }

@media (max-width: 860px) {
  /* phones: no pinning at all — plain, tight, readable flow */
  body.home-page .sec-cine,
  body.home-page .sec-cine.sec-cine-2,
  body.home-page .hero { height: auto; }
}

/* Phones: never pinned, never faded — plain readable flow. This also rescues
   the case where the viewport crosses 860px AFTER load (secCinema guards on
   load only, so its inline opacity would otherwise linger). */
@media (max-width: 860px) {
  body.home-page .sec-cine .sec-pin {
    position: relative;
    height: auto;
    min-height: 0;
    padding: clamp(3.5rem, 8vh, 5rem) var(--pad);
    display: block;
  }
  body.home-page .sec-cine .sec-stage,
  body.home-page .sec-cine .panel-inner,
  body.home-page .sec-cine .path-split { display: block; }
  body.home-page .sec-cine .s-act {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  body.home-page .sec-cine .s-a2 { margin-top: 1.6rem; }
}

/* ---- REV 19: pin only as long as the transition needs ----
   A pinned scene costs its own height in scroll distance. The reader pauses to
   read; they do not need a long static frame scrolled past them. So the pin is
   trimmed to the transition itself. */
body.home-page .sec-cine,
body.home-page .sec-cine.sec-cine-2 { height: 120svh; }
body.home-page .hero { height: auto; }

/* ============================================================
   REV 20 — LEFT AXIS
   Every scene shares the hero's left edge. Text is left-aligned
   everywhere; the column no longer floats in the middle.
   ============================================================ */
.sec-cine .sec-pin { justify-content: flex-start; }
.sec-cine .sec-stage,
.sec-cine .panel-inner,
.sec-cine .path-split {
  margin-inline: 0;
  margin-left: clamp(0.5rem, 4vw, 4rem);   /* = the hero's left edge */
}
.sec-cine .s-a1,
.sec-cine .s-a2 { text-align: left; }
.sec-cine .s-a2 { align-items: flex-start; }
.sec-cine .s-a1 .chapter-meta { justify-content: flex-start; }
.sec-cine .s-a1 h2,
.sec-cine .s-a1 .connect-title { text-align: left; margin-inline: 0; }
.sec-cine#connect .s-a2,
.sec-cine .connect-actions { text-align: left; align-items: flex-start; }
.sec-cine .statement-fig,
.sec-cine .panel-gfx,
.sec-cine .path-gfx,
.sec-cine .mw-fig { margin-left: 0; margin-right: auto; }
.sec-cine .mw-strip { justify-content: flex-start; }
.sec-cine .gfx-cap,
.sec-cine .statement-lead,
.sec-cine .panel-lead,
.sec-cine .chapter-text,
.sec-cine .connect-sub,
.sec-cine .connect-offer { text-align: left; margin-inline: 0; }
.mw-plate::after { text-align: left; padding-left: 0.6rem; }
@media (max-width: 860px) {
  .sec-cine .sec-stage,
  .sec-cine .panel-inner,
  .sec-cine .path-split { margin-left: 0; }
}

/* ============================================================
   REV 21 — STATIC MODE  ·  TEMPORARY
   Every animation is off while David reviews structure & copy.
   TO RESTORE: delete class="no-anim" from <html> on each page.
   The scripts read that class as prefers-reduced-motion, so the
   JS cinema/typewriter never arm; this block lands the CSS-driven
   pieces in their finished state.
   ============================================================ */
html.no-anim *,
html.no-anim *::before,
html.no-anim *::after {
  animation: none !important;
  transition: none !important;
}
/* everything that starts hidden for an animation is simply present */
html.no-anim .reveal,
html.no-anim .s-act,
html.no-anim .h-act,
html.no-anim .hchar,
html.no-anim .mw-plate,
html.no-anim .ph-seed,
html.no-anim .statement-fig,
html.no-anim .panel-gfx,
html.no-anim .scroll-cue,
html.no-anim .hero-content,
html.no-anim .tri-core,
html.no-anim .tri-ring,
html.no-anim .tri-lbl {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  visibility: visible !important;
}
/* draw-in strokes land finished */
html.no-anim .hm-draw,
html.no-anim .tri-e,
html.no-anim .draw,
html.no-anim .d-lines .draw { stroke-dashoffset: 0 !important; }
/* motion-only marks (travelling signals, ripples, blinkers) simply don't appear */
html.no-anim .hm-sig,
html.no-anim .hm-pulse,
html.no-anim .hm-ripple,
html.no-anim .kpacket,
html.no-anim .pulse,
html.no-anim .tw-caret,
html.no-anim .hcaret,
html.no-anim .blink { display: none !important; }

/* section pager content ease — exempt from no-anim freeze */
html.no-anim body.home-page main > .snap-sec > *,
html.no-anim body.home-snap main > .snap-sec > * {
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* no pinning: scenes are plain stacked sections */
html.no-anim .sec-cine,
html.no-anim .hero { height: auto !important; min-height: 0 !important; }
html.no-anim .sec-cine .sec-pin,
html.no-anim .hero-pin {
  position: relative !important;
  height: auto !important;
  min-height: 0 !important;
  padding: clamp(3.5rem, 8vh, 5.5rem) var(--pad) !important;
  display: block !important;
  overflow: visible !important;
}
/* acts were stacked in one grid cell — un-stack them so both are readable */
html.no-anim .sec-cine .sec-stage,
html.no-anim .sec-cine .panel-inner,
html.no-anim .sec-cine .path-split,
html.no-anim .hero-content { display: block !important; }
html.no-anim .s-a2,
html.no-anim .h-act-3 { margin-top: 2rem; }

/* stragglers: figure captions and the story-voice asides */
.gfx-cap,
.story-voice,
.sec-cine .story-voice,
body.home-page .gfx-cap,
body.home-page .story-voice { text-align: left !important; margin-inline: 0 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   REV 22 — NO ILLUSTRATIONS  ·  TEMPORARY (pairs with REV 21)
   The home page figures were removed from index.html. Without them each
   scene's copy is short, so the inherited 100svh floor left ~200px of dead
   air above and below the text — the "empty scrolling" problem again.
   In static mode, let scenes size to their content on a fixed rhythm.
   TO RESTORE: delete this block together with REV 21.
   ══════════════════════════════════════════════════════════════════════════ */
/* The 52rem floor (`min(100svh, 52rem)`) outranks a plain descendant rule,
   so match its shape exactly — the :not() is what carries the specificity. */
html.no-anim body.home-page .statement:not(.x),
html.no-anim body.home-page .panel:not(.x),
html.no-anim body.home-page .chapter:not(.x),
html.no-anim body.home-page .hero:not(.x) {
  min-height: 0;
  height: auto;
  padding-block: clamp(4.5rem, 9vh, 7rem);
}
html.no-anim body.home-page .hero-pin { padding-block: clamp(5rem, 12vh, 9rem); }

/* LEFT AXIS, part two.
   These scenes are column flexboxes with `align-items: center`, so every
   block floated to its own centre — a 618px heading and a 491px paragraph
   started at different x. Anchor the cross axis instead of the text. */
html.no-anim body.home-page .statement:not(.x),
html.no-anim body.home-page .chapter:not(.x) {
  align-items: flex-start;
  text-align: left;
}
html.no-anim body.home-page .statement > *,
html.no-anim body.home-page .chapter-inner > *,
html.no-anim body.home-page .panel-txt > * { margin-inline: 0; }

/* the figure slot is gone — close the gap it used to open, and drop the
   inner wrappers onto the same left edge as the statement sections */
html.no-anim body.home-page .panel-inner,
html.no-anim body.home-page .chapter-inner,
html.no-anim body.home-page .path-split {
  display: block;
  gap: 0;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  text-align: left;
}
html.no-anim body.home-page .panel-txt,
html.no-anim body.home-page .path-copy,
html.no-anim body.home-page .panel-txt > *,
html.no-anim body.home-page .path-copy > * {
  margin-inline: 0;
  padding-inline: 0;
  text-align: left;
}

/* One gutter, applied once. REV 21 re-applied var(--pad) on .hero-pin on top
   of .hero's own, putting the title a gutter right of every other block. */
html.no-anim body.home-page .hero { padding-inline: 0 !important; }
html.no-anim body.home-page .hero-pin { padding-inline: var(--pad) !important; }
html.no-anim body.home-page .hero-content,
html.no-anim body.home-page .h-act {
  margin-inline: 0;
  padding-inline: 0;
  max-width: none;
  text-align: left;
}

/* ═══════════════════════════════════════════════════════════════════════════
   REV 23 — PULL QUOTE
   A held aside, not a headline. Sits on the same left axis as everything
   else, marked by a single cream hairline rather than quotation marks.
   Larger and lighter than body copy, with generous leading so it reads
   slowly. Two nouns carry the one orange — no glare, flat light only.
   ══════════════════════════════════════════════════════════════════════════ */
.pull-quote {
  margin: clamp(2.2rem, 5vh, 3.4rem) 0;
  padding-left: clamp(1.1rem, 2.4vw, 1.8rem);
  border-left: 1px solid rgba(184, 169, 144, 0.22);
  max-width: 46ch;
}
.pull-quote p {
  margin: 0;
  font-size: clamp(1.05rem, 1.45vw, 1.28rem);
  line-height: 1.72;
  letter-spacing: 0.002em;
  color: var(--paper);
  font-style: italic;
  text-wrap: pretty;
}
.pull-quote p + p { margin-top: 1.15em; }
.pq-hot {
  color: var(--accent);
  font-style: normal;
  font-weight: 500;
}

@media (max-width: 860px) {
  .pull-quote { padding-left: 1rem; margin-block: 2rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REV 24 — HERO DEFINITION
   The one word the argument turns on, stated once, directly under the title.
   Set quieter and narrower than the hero close so it reads as an aside the
   reader can take or skip — a margin note, not a second paragraph. The mono
   term sits on the same left axis as everything else, under a hairline.
   ══════════════════════════════════════════════════════════════════════════ */
.hero-def {
  margin-top: clamp(1.6rem, 3.4vh, 2.6rem);
  padding-top: clamp(0.9rem, 1.8vh, 1.3rem);
  border-top: 1px solid rgba(184, 169, 144, 0.16);
  max-width: 54ch;
}
.hero-def .def-term {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.hero-def .def-body {
  margin: 0;
  font-size: clamp(0.94rem, 1.05vw, 1.02rem);
  line-height: 1.66;
  color: var(--paper-dim);
  text-wrap: pretty;
}
.hero-def .def-body strong { color: var(--paper); font-weight: 500; }
.hero-def .def-body em { font-style: italic; color: var(--paper); }

@media (max-width: 860px) {
  .hero-def { margin-top: 1.4rem; max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REV 25 — HERO QUOTE
   The pull quote in the hero sits between the title and the Paradigm note,
   so it needs a little more air above than a mid-page aside and a slightly
   larger measure — it is the first thing read after the title, not a
   marginal gloss. The Paradigm block below supplies its own top hairline,
   so this one closes with space rather than a second rule.
   ══════════════════════════════════════════════════════════════════════════ */
.hero-quote {
  margin-top: clamp(1.8rem, 4vh, 3rem);
  margin-bottom: clamp(0.4rem, 1vh, 0.9rem);
  max-width: 50ch;
}
.hero-quote p { font-size: clamp(1.02rem, 1.35vw, 1.18rem); }

@media (max-width: 860px) {
  .hero-quote { margin-top: 1.5rem; max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REV 26 — PARADIGM NOTE (technical)
   The definition now runs two paragraphs plus a mono spine that states the
   Kuhn cycle as a sequence. The spine reads as apparatus, not prose: mono,
   dimmer than the body, with its own hairline above it.
   ══════════════════════════════════════════════════════════════════════════ */
.hero-def .def-body + .def-body { margin-top: 0.85em; }
.hero-def .def-note {
  margin: clamp(0.9rem, 1.8vh, 1.2rem) 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(184, 169, 144, 0.1);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  color: var(--paper-dim);
  opacity: 0.72;
  white-space: nowrap;      /* the cycle is one line or it is not a cycle */
  overflow-x: auto;
  scrollbar-width: none;
}
.hero-def .def-note::-webkit-scrollbar { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   REV 27 — PARADIGM AS A DEFINITION LIST
   The full explanation, structured so it can be skimmed by its labels or
   read straight through. A real <dl>: mono terms, body-copy definitions,
   each pair separated by air rather than a rule so the block stays quiet.
   The terms carry a short orange tick — the one accent, flat, no glare.
   ══════════════════════════════════════════════════════════════════════════ */
.def-list { margin: 0; }
.def-list dt {
  position: relative;
  margin: 0 0 0.4rem;
  padding-left: 1.1rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.85;
}
.def-list dt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.6rem;
  height: 1px;
  background: var(--accent);
}
.def-list dd {
  margin: 0 0 1.35rem;
  font-size: clamp(0.94rem, 1.05vw, 1.02rem);
  line-height: 1.66;
  color: var(--paper-dim);
  text-wrap: pretty;
}
.def-list dd:last-of-type { margin-bottom: 0; }
.def-list dd strong { color: var(--paper); font-weight: 500; }

@media (max-width: 860px) {
  .def-list dd { margin-bottom: 1.15rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REV 28 — HERO INTRO
   David speaking, before any apparatus. Set at full paper (not dim) and a
   step above the definition body so the voice reads as the author's rather
   than the page's — it is the last plain sentence before the terminology
   starts. No rule above it: the quote's whitespace already separates them.
   ══════════════════════════════════════════════════════════════════════════ */
.hero-intro {
  margin-top: clamp(1.6rem, 3.4vh, 2.4rem);
  max-width: 52ch;
}
.hero-intro p {
  margin: 0;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.7;
  color: var(--paper);
  text-wrap: pretty;
}
.hero-intro p + p { margin-top: 0.75em; color: var(--paper-dim); }
.hero-intro strong { color: var(--paper); font-weight: 500; }

@media (max-width: 860px) {
  .hero-intro { margin-top: 1.4rem; max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REV 29 — THE STANDPOINT ENGINE  (#paradigm-room · paradigm.js)
   A playable instrument, not a figure. Hairline frame + registration
   corners (drawn in-canvas) keep it inside the chart language; the HUD
   reads as an instrument readout: mono step line, quiet message, buttons
   as hairline controls. One orange: MARS in the chart, the shift button
   in the HUD. The canvas runs its own rAF and is exempt from static mode
   BY DESIGN — the reader operates it; it never plays at them.
   ══════════════════════════════════════════════════════════════════════════ */
.pg-wrap {
  max-width: min(680px, 100%);
  margin-top: clamp(1.6rem, 3.5vh, 2.6rem);
  border: 1px solid rgba(184, 169, 144, 0.14);
  background: rgba(14, 14, 16, 0.45);
}
.pg-stage { position: relative; }
#pg-canvas {
  display: block;
  width: 100%;
  cursor: crosshair;
  touch-action: manipulation;
}
.pg-hud {
  border-top: 1px solid rgba(184, 169, 144, 0.12);
  padding: 0.9rem 1rem 1rem;
}
.pg-step {
  margin: 0 0 0.45rem;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.pg-msg {
  margin: 0 0 0.85rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--paper-dim);
  max-width: 58ch;
  min-height: 4.2em; /* the readout must not jump as messages change */
  text-wrap: pretty;
}
.pg-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pg-btn {
  appearance: none;
  background: none;
  border: 1px solid rgba(184, 169, 144, 0.3);
  color: var(--paper);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.55rem 0.95rem;
  min-height: 44px;
  cursor: pointer;
}
.pg-btn:hover { border-color: rgba(184, 169, 144, 0.6); }
.pg-btn.hot { border-color: var(--accent); color: var(--accent); }
.pg-btn.hot:hover { background: rgba(184, 169, 144, 0.08); }
.pg-btn[aria-pressed="true"] { border-color: var(--paper); background: rgba(184, 169, 144, 0.06); }
.pg-takeaway { margin-top: clamp(1.4rem, 3vh, 2.2rem); }

@media (max-width: 860px) {
  .pg-hud { padding: 0.8rem 0.85rem 0.9rem; }
  .pg-msg { min-height: 5.4em; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REV 30 — INSTRUMENT GOES NEUMORPHIC  (overrides REV 29 chrome)
   David's reference boards: neumorphism — soft extruded panels, inset
   screens, pressable pills, light from the upper left. Translated into the
   night system rather than copied: same void/paper/orange tokens, but depth
   now comes from dual soft shadows instead of hairlines. The device is a
   RAISED panel; the sky is an INSET screen (a well you look into); buttons
   are extruded pills whose active state presses IN — neumorphism's native
   pressed-in look doing real work as the lens toggle. Shadows are neutral
   black/white only; orange stays flat text (no-glare law holds).
   Scoped to the instrument — the rest of the page keeps its chart language.
   ══════════════════════════════════════════════════════════════════════════ */
.pg-wrap {
  border: none;
  border-radius: 26px;
  background: linear-gradient(145deg, #171614, #100f0e);
  box-shadow:
    8px 8px 20px rgba(0, 0, 0, 0.55),
    -5px -5px 14px rgba(184, 169, 144, 0.04),
    inset 0 1px 0 rgba(184, 169, 144, 0.04);
  padding: clamp(0.8rem, 1.8vw, 1.1rem);
}
.pg-stage {
  border-radius: 16px;
  overflow: hidden;
  background: #0a0a09;
  box-shadow:
    inset 5px 5px 12px rgba(0, 0, 0, 0.6),
    inset -3px -3px 8px rgba(184, 169, 144, 0.025);
}
.pg-hud {
  border-top: none;
  padding: 1rem 0.4rem 0.4rem;
}
.pg-btn {
  border: none;
  border-radius: 999px;
  background: linear-gradient(145deg, #191816, #111009);
  box-shadow:
    5px 5px 12px rgba(0, 0, 0, 0.5),
    -3px -3px 8px rgba(184, 169, 144, 0.04);
  padding: 0.65rem 1.15rem;
}
.pg-btn:hover {
  border-color: transparent;
  color: var(--paper);
  background: linear-gradient(145deg, #1c1b19, #131210);
}
.pg-btn:active,
.pg-btn[aria-pressed="true"] {
  background: #0e0d0c;
  box-shadow:
    inset 4px 4px 9px rgba(0, 0, 0, 0.6),
    inset -3px -3px 7px rgba(184, 169, 144, 0.03);
}
.pg-btn.hot { color: var(--accent); box-shadow:
    5px 5px 12px rgba(0, 0, 0, 0.5),
    -3px -3px 8px rgba(184, 169, 144, 0.04); }
.pg-btn.hot:hover { background: linear-gradient(145deg, #1c1b19, #131210); color: var(--accent); }
.pg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════════════════════
   REV 31 — PARADIGM AS Q&A  (.def-list.qa · overrides REV 27's label list)
   Interview format: the reader asks, the page answers. Each row is a
   two-column grid — a narrow marker gutter (Q·n in the one orange, A in
   dim cream) and a shared text column, so every question and answer sits
   on the same internal axis. Questions read at full paper, answers a step
   dimmer: the register shift IS the format.
   ══════════════════════════════════════════════════════════════════════════ */
.def-list.qa dt,
.def-list.qa dd {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  align-items: baseline;
  padding-left: 0;
  margin: 0;
}
.def-list.qa dt::before { content: none; }   /* retire REV 27's tick */
.def-list.qa dt {
  font-size: clamp(0.98rem, 1.15vw, 1.06rem);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 550;
  color: var(--paper);
  opacity: 1;
  margin-bottom: 0.45rem;
}
.def-list.qa dd { margin-bottom: 1.5rem; }
.def-list.qa dd:last-of-type { margin-bottom: 0; }
.def-list.qa .qa-m {
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  align-self: baseline;
}
.def-list.qa dt .qa-m { color: var(--accent); }
.def-list.qa dd .qa-m { color: var(--paper-dim); opacity: 0.7; }

@media (max-width: 860px) {
  .def-list.qa dt,
  .def-list.qa dd { grid-template-columns: 2rem minmax(0, 1fr); }
}


/* ============================================================
   MONOCHROME PAPER — kill stars, grid, aurora, parallax fields
   ============================================================ */
.aurora,
.aurora-layer,
.aurora-warm,
.aurora-cool,
.hero-grid,
#system-canvas {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
  background: none !important;
}
body { background-color: #161616 !important; }
.thread { background: rgba(184, 169, 144, 0.08); }
.thread-fill { background: var(--paper); box-shadow: none; }
.thread-fill::after { background: var(--paper); box-shadow: none; }
.thread-mark.is-on { background: var(--paper); box-shadow: none; width: 11px; height: 1px; }
.thread-mark-gap { background: rgba(120, 120, 120, 0.18); }
.btn-primary {
  background: var(--paper) !important;
  color: var(--void) !important;
  border: none !important;
  box-shadow: none !important;
}
.btn-primary:hover { filter: brightness(0.92); }
.nav-cta {
  background: var(--paper) !important;
  color: var(--void) !important;
  border-color: var(--paper) !important;
}
.nav-cta.is-member {
  background: transparent !important;
  color: var(--paper) !important;
  border: 1px solid var(--paper) !important;
}
.grad-text {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
}
.grad-text .hchar,
.grad-text .rw,
.grad-text .si {
  background: none !important;
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
  -webkit-background-clip: unset !important;
}
/* figures: no orange nodes — paper or gray */
.hm-sig-hot,
.z-core,
.tri-core,
.hm-join {
  fill: var(--paper) !important;
}

/* ============================================================
   OPENING · golden rule: ONE thing in the viewport
   title → quote → tell · sticky crossfade · nothing else on stage
   ============================================================ */
.open-stage {
  position: relative;
  height: 400svh; /* four beats: title · meta · quote · tell */
  margin: 0;
  padding: 0;
  background: #0c0c0b;
}
.open-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 0 var(--pad);
  box-sizing: border-box;
}
.open-beat {
  grid-area: 1 / 1;
  width: min(40rem, 92vw);
  max-height: 100svh;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(1.2rem);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.55s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.open-beat.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
/* title beat */
.open-beat-title { align-items: flex-start; text-align: left; }
.open-title {
  margin: 0;
  font-size: clamp(2.1rem, 5.2vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--paper);
}
.open-title .line { display: block; }
/* meta — prepare the connection before the quote */
.open-beat-meta {
  align-items: center;
  text-align: center;
}
.open-meta {
  margin: 0 auto;
  max-width: 28rem;
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  line-height: 1.55;
  font-weight: 300;
  color: var(--paper-dim);
  text-align: center;
}

/* quote beat — dead center */
.open-beat-quote {
  align-items: center;
  text-align: center;
}
.open-quote-body {
  margin: 0;
  padding: 0;
  border: none;
  max-width: 32rem;
  text-align: center;
}
.open-quote-body p {
  margin: 0;
  font-size: clamp(1.15rem, 2.15vw, 1.55rem);
  line-height: 1.55;
  font-weight: 300;
  font-style: italic;
  color: var(--paper);
}
.open-quote-body p + p { margin-top: 1.35em; }
.open-quote-body .pq-hot {
  font-weight: 500;
  font-style: italic;
  color: var(--paper);
}
/* tell beat */
.open-beat-tell {
  align-items: flex-start;
  text-align: left;
  max-width: 34rem;
}
.open-tell-lead {
  margin: 0 0 1.25rem;
  font-size: clamp(1.4rem, 2.5vw, 1.95rem);
  line-height: 1.35;
  font-weight: 400;
  color: var(--paper);
}
.open-tell-body {
  margin: 0;
  font-size: clamp(1.05rem, 1.55vw, 1.2rem);
  line-height: 1.6;
  font-weight: 300;
  color: var(--paper-dim);
  max-width: 38ch;
}
.open-tell-body strong { color: var(--paper); font-weight: 500; }

/* no scroll cue, no secondary chrome on the opening pin */
.open-stage .scroll-cue { display: none !important; }

html.no-anim .open-beat { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .open-stage { height: auto; }
  .open-pin { position: relative; height: auto; min-height: 100svh; display: flex; flex-direction: column; gap: 0; padding: 4rem var(--pad); }
  .open-beat {
    position: relative;
    grid-area: auto;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto;
    min-height: 88svh;
    padding: 3rem 0;
  }
}


/* ============================================================
   WASHI — muted cream type + Japanese paper fiber grain
   ============================================================ */
body {
  color: var(--paper);
  /* layered fiber grain: soft cellulose noise on deep black */
  background-color: #161616;
  background-image:
    /* fine fiber flecks */
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.72  0 0 0 0 0.66  0 0 0 0 0.55  0 0 0 0.055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    /* longer soft streaks (washi pulp direction) */
    url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.015 0.12' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.65  0 0 0 0 0.58  0 0 0 0 0.48  0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size: 180px 180px, 420px 420px;
  background-repeat: repeat, repeat;
  background-blend-mode: soft-light, soft-light;
}
/* soft ink soak — type sits into the paper, not on glass */
body.home-page .open-title,
body.home-page .open-meta,
body.home-page .open-quote-body,
body.home-page .open-tell-lead,
body.home-page .open-tell-body,
body.home-page .hero-title,
body.home-page .statement h2,
body.home-page .statement-lead,
body.home-page .panel-lead,
body.home-page .connect-title {
  text-shadow: 0 0 0.4px rgba(0, 0, 0, 0.35);
}
/* kill pure-white force on monochrome block if it overrides body bg */
body.home-page {
  background-color: #161616;
}


/* ============================================================
   READABLE BODY — sitewide standard (easy to read)
   One size + line-height for all paragraph prose.
   ============================================================ */
:root {
  --text-body: 25px;
  --text-body-lh: 1.55;
  --text-body-weight: 500;
  --text-measure: min(40rem, 92vw);
}

.statement-lead,
.panel-lead,
.chapter-text,
.chapter-text p,
.connect-sub,
.connect-offer,
.page-sub,
.article-body,
.article-body p,
.wp-body p,
.ws-room .wp-body p,
.step p,
.step-txt p,
.tl-text,
.ac-scene-body,
.ac-access-lead,
.hero-close,
.hero-sub,
.open-meta,
.open-quote-body p,
.open-tell-body,
.open-tell-lead,
.pull-quote p,
.hero-intro p,
.def-list.qa dd,
.def-list.qa dt,
.panel-txt p,
.path-copy p,
.work-intro,
.ng-text,
.modal-sub {
  font-size: var(--text-body) !important;
  line-height: var(--text-body-lh) !important;
  font-weight: var(--text-body-weight) !important;
  max-width: var(--text-measure);
}

/* slightly larger lead-in lines stay in the same family, not tiny */
.open-tell-lead {
  font-size: clamp(1.35rem, 2vw, 1.55rem) !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  max-width: var(--text-measure);
}

/* Q&A: keep mono markers small; body of answer uses body size */
.def-list.qa dt,
.def-list.qa dd {
  max-width: var(--text-measure);
}
.def-list.qa .qa-m {
  font-size: 0.72rem !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em;
}

/* academy timeline body */
body.academy-page .tl-text,
body.academy-page .ac-scene-body {
  font-size: var(--text-body) !important;
  line-height: var(--text-body-lh) !important;
}

/* home overrides that shrunk body — force standard */
body.home-page .statement-lead,
body.home-page .panel-lead,
body.home-page .connect-sub,
body.home-page .connect-offer,
body.home-page .open-meta,
body.home-page .open-quote-body p,
body.home-page .open-tell-body {
  font-size: var(--text-body) !important;
  line-height: var(--text-body-lh) !important;
  max-width: var(--text-measure);
}

/* dim prose uses paper-dim but same size */
.statement-lead,
.panel-lead,
.chapter-text p,
.connect-sub,
.wp-body p,
.tl-text {
  color: var(--paper-dim);
}
.statement-lead strong,
.panel-lead strong,
.chapter-text strong,
.open-tell-body strong {
  color: var(--paper);
  font-weight: 500;
}

@media (max-width: 860px) {
  :root {
    --text-body: 25px;
    --text-body-lh: 1.65;
  }
}


/* ============================================================
   MATTE BLACK ground — soft void, no glossy pure-#000
   ============================================================ */
html, body {
  background-color: #161616 !important;
}
.open-stage {
  background: #0c0c0b !important;
}
.nav {
  background: rgba(12, 12, 11, 0.88) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(184, 169, 144, 0.06);
}
/* kill shiny glass highlights sitewide */
.glass,
.modal,
.wp-inner,
.stat-tile,
.deep-card,
.nav {
  box-shadow: none !important;
}


/* ============================================================
   PARADIGM FABRIC — Q&A dropdown + instrument · same page language
   ============================================================ */
.fabric-sec {
  align-items: flex-start;
  text-align: left;
}
body.home-snap .fabric-sec {
  /* snap frame owns height/padding — don't expand past 100svh */
  min-height: 0;
}
.fabric-sec h2 {
  text-align: left;
  max-width: 18ch;
}
.fabric-sec > .statement-lead {
  max-width: var(--text-measure);
}

/* ---- dropdown Q&A ---- */
.pd-qa {
  width: min(40rem, 100%);
  margin-top: clamp(2rem, 5vh, 3rem);
  border-top: 1px solid rgba(184, 169, 144, 0.12);
}
.pd-qa-kicker {
  margin: 1.4rem 0 1rem;
  letter-spacing: 0.16em;
  color: var(--paper-dim);
  opacity: 0.7;
}
.pd-drop {
  border-bottom: 1px solid rgba(184, 169, 144, 0.1);
}
.pd-drop summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) 1.2rem;
  gap: 0.65rem;
  align-items: baseline;
  padding: 1.05rem 0;
  color: var(--paper);
  user-select: none;
}
.pd-drop summary::-webkit-details-marker { display: none; }
.pd-drop summary:hover .pd-sum { color: var(--paper); }
.pd-q {
  color: var(--paper-dim);
  font-size: 0.64rem !important;
  letter-spacing: 0.14em;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  max-width: none !important;
}
.pd-sum {
  font-size: var(--text-body);
  line-height: var(--text-body-lh);
  font-weight: 450;
  color: var(--paper);
}
.pd-chev {
  color: var(--paper-dim);
  opacity: 0.55;
  font-size: 0.85rem !important;
  line-height: 1 !important;
  text-align: right;
  transition: transform 0.25s ease, opacity 0.2s ease;
  max-width: none !important;
}
.pd-drop[open] .pd-chev {
  transform: rotate(45deg);
  opacity: 0.85;
  color: var(--paper);
}
.pd-ans {
  padding: 0 0 1.25rem 3.05rem;
  font-size: var(--text-body);
  line-height: var(--text-body-lh);
  font-weight: var(--text-body-weight);
  color: var(--paper-dim);
  max-width: var(--text-measure);
}
.pd-ans strong { color: var(--paper); font-weight: 500; }
.pd-qa .def-note {
  margin-top: 1.4rem;
  opacity: 0.55;
}

/* ---- instrument block — matte hairline, same void/paper ---- */
.pg-block {
  width: min(42rem, 100%);
  margin-top: clamp(3rem, 8vh, 4.5rem);
  padding-top: clamp(2rem, 5vh, 2.8rem);
  border-top: 1px solid rgba(184, 169, 144, 0.12);
}
.pg-block-kicker {
  margin: 0 0 0.85rem;
  letter-spacing: 0.16em;
  color: var(--paper-dim);
  opacity: 0.7;
}
.pg-block-lead {
  margin: 0 0 1.6rem !important;
}

/* kill neumorphic “foreign device” chrome — seamless page panel */
.pg-wrap {
  border: 1px solid rgba(184, 169, 144, 0.14) !important;
  border-radius: 0 !important;
  background: #0c0c0b !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: min(680px, 100%);
  margin-top: 0;
}
.pg-stage {
  border-radius: 0 !important;
  background: #0c0c0b !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(184, 169, 144, 0.1);
}
#pg-canvas {
  display: block;
  width: 100%;
  background: #0c0c0b;
  cursor: crosshair;
  touch-action: manipulation;
}
.pg-hud {
  border-top: none !important;
  padding: 1rem 1.05rem 1.1rem !important;
  background: #0c0c0b;
}
.pg-step {
  color: var(--paper) !important;
  opacity: 0.75;
}
.pg-msg {
  font-size: var(--text-body) !important;
  line-height: var(--text-body-lh) !important;
  color: var(--paper-dim) !important;
}
.pg-btn {
  appearance: none;
  background: transparent !important;
  border: 1px solid rgba(184, 169, 144, 0.28) !important;
  border-radius: 0 !important;
  color: var(--paper) !important;
  box-shadow: none !important;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.6rem 1rem;
  min-height: 44px;
  cursor: pointer;
  font-family: var(--font-mono);
}
.pg-btn:hover {
  border-color: rgba(184, 169, 144, 0.55) !important;
  background: rgba(184, 169, 144, 0.05) !important;
}
.pg-btn.hot {
  border-color: var(--paper) !important;
  color: var(--paper) !important;
}
.pg-btn.hot:hover {
  background: rgba(184, 169, 144, 0.08) !important;
}
.pg-btn:active,
.pg-btn[aria-pressed="true"] {
  background: rgba(184, 169, 144, 0.1) !important;
  box-shadow: none !important;
}
.pg-btn:focus-visible {
  outline: 1px solid var(--paper);
  outline-offset: 3px;
}
.pg-takeaway {
  margin-top: clamp(1.5rem, 3vh, 2.2rem) !important;
}

@media (max-width: 860px) {
  .pd-ans { padding-left: 0; }
  .pd-drop summary { grid-template-columns: 2rem minmax(0, 1fr) 1rem; }
  .pg-hud { padding: 0.9rem 0.85rem !important; }
}


/* ============================================================
   GOLDEN RULE · page snap — one full viewport, ZERO spill
   Each slide is a sealed frame: solid ground, clipped edges,
   neighbors never paint into the live view.
   ============================================================ */
html:has(body.home-snap) {
  /* snap disabled — free trackpad/wheel scroll */
  scroll-snap-type: y proximity;
  scroll-behavior: auto;
}
body.home-snap {
  overflow-x: clip;
  overflow-y: visible;
  height: auto;
  min-height: 100%;
  touch-action: pan-y;
}
body.home-snap main {
  position: relative;
  isolation: isolate;
}
body.home-snap main > .snap-sec,
body.home-snap main > section.snap-sec,
body.home-snap main > header.snap-sec {
  min-height: 100svh;
  height: 100svh;
  max-height: 100svh;
  /* snap align removed — free scroll */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(4.5rem, 10vh, 6rem);
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
  padding-left: var(--pad);
  padding-right: var(--pad);
  margin: 0;
  position: relative;
  z-index: 0;
  /* sealed matte frame — neighbors can't paint through */
  overflow: hidden;
  overscroll-behavior: contain;
  background-color: var(--void, #161616);
  background-image: none;
  /* always interactive for scroll; stage class is visual only */
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* live slide sits above during snap settle */
body.home-snap main > .snap-sec.is-stage {
  z-index: 2;
}
/* long content: scroll inside the frame without unlocking the page */
body.home-snap main > .snap-sec.snap-scroll {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}


/* opening slides — pure centered one-idea frames */
body.home-snap .open-slide {
  align-items: flex-start;
  justify-content: center;
  padding-left: var(--pad);
  padding-right: var(--pad);
  background: var(--void, #161616);
}
body.home-snap .open-slide-title .open-title {
  margin: 0;
  max-width: 20ch;
}
body.home-snap .open-slide-meta {
  align-items: center;
  text-align: center;
}
body.home-snap .open-slide-meta .open-meta {
  margin: 0 auto;
  max-width: 28rem;
  text-align: center;
}
body.home-snap .open-slide-quote {
  align-items: center;
  text-align: center;
}
body.home-snap .open-slide-quote .open-quote-body {
  margin: 0 auto;
}
body.home-snap .open-slide-tell {
  align-items: flex-start;
  max-width: none;
}
body.home-snap .open-slide-tell .open-tell-lead,
body.home-snap .open-slide-tell .open-tell-body {
  max-width: 36rem;
}

/* kill multi-viewport pin cinema on home — fights page snap */
body.home-snap .sec-cine,
body.home-snap .sec-cine.sec-cine-2 {
  height: 100svh !important;
  min-height: 100svh !important;
  max-height: 100svh !important;
}
body.home-snap .sec-cine .sec-pin {
  position: relative !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
body.home-snap .sec-cine .s-act {
  position: relative !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  pointer-events: auto !important;
  grid-area: auto !important;
}
body.home-snap .sec-cine .sec-stage,
body.home-snap .sec-cine .panel-inner,
body.home-snap .sec-cine .path-split {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.2rem;
  width: 100%;
  max-width: 42rem;
}

/* paradigm instrument slide: compact so game fits one viewport */
body.home-snap #paradigm-room {
  justify-content: flex-start;
  padding-top: clamp(4rem, 8vh, 5.5rem);
}
body.home-snap #paradigm-room .pg-wrap {
  max-width: min(560px, 100%);
}
body.home-snap #paradigm-room .pg-block {
  margin-top: 0.8rem;
  padding-top: 0;
  border-top: none;
  width: 100%;
}
body.home-snap #paradigm.snap-sec {
  justify-content: flex-start;
}
body.home-snap #paradigm .pd-qa {
  margin-top: 1rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}


/* modern plates: allow internal scroll if cascade is tall */
body.home-snap #modern {
  justify-content: flex-start;
}

@media (max-width: 860px) {
  html:has(body.home-snap) {
    scroll-snap-type: y proximity;
  }
  body.home-snap main > .snap-sec {
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    scroll-snap-stop: always;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:has(body.home-snap) {
    scroll-snap-type: y proximity;
  }
}


/* ============================================================
   SCROLL UNLOCK — trackpad must always work on homepage
   ============================================================ */
html:has(body.home-page),
body.home-page {
  overflow-x: clip !important;
  overflow-y: auto !important;
  height: auto !important;
  max-height: none !important;
  overscroll-behavior-y: auto;
  touch-action: pan-y;
}
body.home-page main {
  overflow: visible !important;
  pointer-events: auto !important;
}
body.home-page main > .snap-sec {
  /* one idea per frame, but never trap the document scroll */
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  touch-action: pan-y;
}
/* intro-lock max 2.5s is enforced in JS; CSS backup: */
body.intro-lock {
  animation: intro-lock-release 0.01s linear 2.5s forwards;
}
@keyframes intro-lock-release {
  to { overflow: auto; }
}


/* ============================================================
   HOME SLIDES — free scroll, one idea per tall frame
   NO scroll-snap. NO visibility hiding. Trackpad always works.
   ============================================================ */
body.home-slides,
body.home-page {
  overflow-x: clip !important;
  overflow-y: scroll !important;
  height: auto !important;
  max-height: none !important;
  position: relative !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: auto !important;
}
html:has(body.home-slides),
html:has(body.home-page) {
  overflow-y: scroll !important;
  height: auto !important;
  scroll-snap-type: y proximity;
  touch-action: pan-y !important;
}
body.home-slides main,
body.home-page main {
  overflow: visible !important;
  pointer-events: auto !important;
  height: auto !important;
}
body.home-slides main > .snap-sec,
body.home-page main > .snap-sec {
  min-height: 100svh;
  height: auto !important;
  max-height: none !important;
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  contain: none !important;
  touch-action: pan-y !important;
  background-color: var(--void, #161616);
  padding-top: clamp(5rem, 12vh, 7rem);
  padding-bottom: clamp(3rem, 8vh, 5rem);
  padding-left: var(--pad);
  padding-right: var(--pad);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* opening slides still one idea, full min viewport, free scroll between */
body.home-slides .open-slide {
  min-height: 100svh;
  justify-content: center;
}
body.intro-lock {
  overflow: scroll !important; /* never freeze */
}

/* HOME VIEWPORTS — smooth section transitions, content fits */
html:has(body.home-page) {
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
}
body.home-page main > .snap-sec {
  min-height: 100svh;
  height: 100svh;
  max-height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(4rem, 8vh, 5.2rem) var(--pad) clamp(1.5rem, 3vh, 2.4rem);
  margin: 0;
  overflow: hidden;
  background: var(--void, #161616);
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
body.home-page main > .snap-sec h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
  margin: 0 0 0.6rem !important;
}
body.home-page main > .snap-sec .statement-lead {
  font-size: 25px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  margin: 0.4rem 0 0.6rem !important;
}
body.home-page main > .snap-sec .statement-fig,
body.home-page main > .snap-sec .panel-gfx {
  max-height: min(34vh, 14rem);
  width: min(100%, 16rem);
}
body.home-page main > .snap-sec .statement-fig svg,
body.home-page main > .snap-sec .panel-gfx svg {
  max-height: min(32vh, 13rem);
  width: 100%;
  height: auto;
}
body.home-page #paradigm-room.snap-game {
  padding-top: clamp(3.4rem, 6vh, 4.2rem);
  padding-bottom: 0.6rem;
  justify-content: stretch;
}
body.home-page #paradigm-room .pg-block-fill {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  border: 0;
}
body.home-page #paradigm-room .pg-head-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-shrink: 0;
}
body.home-page #paradigm-room .pg-wrap-fill {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: none !important;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(184,169,144,0.12) !important;
  background: var(--void) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
body.home-page #paradigm-room .pg-stage-fill {
  flex: 1;
  min-height: 0;
  position: relative;
  background: var(--void) !important;
  box-shadow: none !important;
}
body.home-page #paradigm-room #pg-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}
body.home-page #paradigm-room .pg-hud-compact {
  flex-shrink: 0;
  padding: 0.55rem 0.8rem 0.65rem !important;
  border-top: 1px solid rgba(184,169,144,0.1) !important;
  background: var(--void) !important;
}
body.home-page #paradigm-room .pg-msg {
  font-size: 1rem !important;
  min-height: 2.4em !important;
  margin: 0 0 0.4rem !important;
}
body.home-page #paradigm {
  justify-content: flex-start;
  overflow: hidden;
}
body.home-page #paradigm .pd-qa {
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin-top: 0.5rem;
}
body.home-page #paradigm .pd-drop summary { padding: 0.65rem 0; }
body.home-page .open-title { font-size: clamp(2rem, 5vw, 3.5rem) !important; }

/* GAME FILL — use entire section height */
body.home-page #paradigm-room.snap-game,
body.home-page #paradigm-room {
  display: flex !important;
  flex-direction: column !important;
  height: 100svh !important;
  max-height: 100svh !important;
  min-height: 100svh !important;
  padding-top: 3.8rem !important;
  padding-bottom: 0.75rem !important;
  overflow: hidden !important;
}
body.home-page #paradigm-room .pg-block-fill {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
body.home-page #paradigm-room .pg-wrap-fill {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
}
body.home-page #paradigm-room .pg-stage-fill {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  position: relative !important;
}
body.home-page #paradigm-room #pg-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
body.home-page #paradigm-room .pg-hud-compact {
  flex: 0 0 auto !important;
}
/* free scroll always */
html:has(body.home-page) {
  scroll-snap-type: y proximity !important;
  scroll-behavior: smooth !important;
}
body.home-page {
  overflow-y: auto !important;
  overflow-x: clip !important;
  height: auto !important;
}


/* ============================================================
   CREAM ONLY — no white type anywhere
   ============================================================ */
:root {
  --paper: #a09078;
  --paper-dim: #6e6658;
  --ink-bright: #a09078; /* never pure white / never bright cream */
}
body,
body.home-page,
body.home-slides {
  color: var(--paper) !important;
}
/* all primary type uses cream paper */
h1, h2, h3, h4, h5, h6,
p, li, dt, dd, blockquote, label, figcaption,
.hero-title, .open-title, .open-meta, .open-quote-body,
.open-quote-body p, .open-tell-lead, .open-tell-body,
.statement-lead, .panel-lead, .chapter-text, .chapter-text p,
.connect-title, .connect-sub, .connect-offer,
.page-title, .page-sub, .article-body, .wp-body,
.pg-msg, .pd-sum, .pd-ans, .def-list, .grad-text,
.nav-links a, .nav-mark, .nav-current, .footer, .footer a {
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
}
/* secondary whisper */
.mono, .paper-dim, .gfx-cap, .chapter-meta, .chapter-meta .fig,
.pd-q, .pd-qa-kicker, .def-note, .pg-step, .pg-block-kicker,
.statement-lead, .panel-lead, .connect-sub, .page-sub, .wp-body p,
.tl-text, .ac-scene-body, .open-meta, .open-tell-body {
  color: var(--paper-dim) !important;
  -webkit-text-fill-color: var(--paper-dim) !important;
}
/* restore hierarchy: titles full paper */
h1, h2, h3, h4,
.hero-title, .open-title, .connect-title, .page-title,
.grad-text, .pd-sum, .nav-current, .nav-links a:hover {
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
}
/* strong/em inside dim prose → paper */
.statement-lead strong, .panel-lead strong, .open-tell-body strong,
.pd-ans strong, .chapter-text strong, em {
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
}
/* buttons: cream fill, matte black label (not white) */
.btn-primary, .nav-cta:not(.is-member) {
  background: var(--paper) !important;
  color: var(--void) !important;
  -webkit-text-fill-color: var(--void) !important;
}
/* kill bright sec-dark overrides */
.sec-dark, .sec-dark h1, .sec-dark h2, .sec-dark h3,
.sec-dark .statement-lead, .sec-dark .panel-lead, .sec-dark .connect-sub,
.sec-dark .btn-ghost, .sec-dark .mono {
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
}
.sec-dark .statement-lead,
.sec-dark .panel-lead,
.sec-dark .connect-sub,
.sec-dark .mono {
  color: var(--paper-dim) !important;
  -webkit-text-fill-color: var(--paper-dim) !important;
}
/* grad-text: solid cream, never transparent flash */
.grad-text,
.grad-text .hchar,
.grad-text .line,
.grad-text .rw,
.grad-text .si {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
}
/* hex hover text that was near-white */
.hex:hover .hex-inner,
.hex.is-locked .hex-inner,
.hex-join:hover .hex-inner {
  color: var(--paper) !important;
}

/* ============================================================
   CREAM LOCK v141 — kill white UA text (color-scheme:dark) + dim paper
   ============================================================ */
:root {
  --paper: #a09078 !important;
  --paper-dim: #6e6658 !important;
  --ink-bright: #a09078 !important;
  --accent: #a09078 !important;
  --magenta: #a09078 !important;
  --coral: #a09078 !important;
  --cyan: #a09078 !important;
  --violet: #a09078 !important;
  --blue: #6e6658 !important;
}
html, body {
  color: #a09078 !important;
  -webkit-text-fill-color: #a09078 !important;
}
/* color-scheme:dark makes bare buttons/inputs paint pure white — override */
button, summary, input, textarea, select, option {
  color: #a09078 !important;
  -webkit-text-fill-color: #a09078 !important;
  caret-color: #a09078;
}
input::placeholder, textarea::placeholder {
  color: #6e6658 !important;
  -webkit-text-fill-color: #6e6658 !important;
  opacity: 1;
}
/* every text node inherits cream unless on a cream fill */
h1, h2, h3, h4, h5, h6, p, li, a, span, label, figcaption, blockquote,
td, th, dt, dd, small, strong, em, b, i, code, pre, cite, time,
.mono, .grad-text, .grad-text *, .hero-title, .hero-title *,
.open-title, .open-title *, .open-meta, .open-quote-body, .open-quote-body *,
.open-tell-lead, .open-tell-body, .open-tell-body *,
.statement-lead, .panel-lead, .chapter-text, .chapter-text *,
.pd-sum, .pd-ans, .pd-q, .pd-ans *, .pg-msg, .pg-step, .pg-block-kicker,
.connect-title, .connect-sub, .connect-offer, .footer, .footer *,
.nav-links a, .nav-mark, .nav-current, .nav-burger,
.thread-mark, .btn-ghost, .link-btn, .modal, .modal * {
  color: #a09078 !important;
  -webkit-text-fill-color: #a09078 !important;
}
/* secondary / whisper */
.mono, .paper-dim, .gfx-cap, .chapter-meta, .open-meta, .open-tell-body,
.statement-lead, .panel-lead, .connect-sub, .page-sub, .pd-q, .pd-qa-kicker,
.def-note, .pg-step, .pg-block-kicker, .tl-text, .footer, .footer a {
  color: #6e6658 !important;
  -webkit-text-fill-color: #6e6658 !important;
}
/* titles stay full paper (dimmer cream, not white) */
h1, h2, h3, h4, .hero-title, .open-title, .connect-title, .page-title,
.grad-text, .grad-text *, .pd-sum, .nav-current, .nav-links a:hover,
.open-quote-body, .open-quote-body p, .open-tell-lead, strong, em, .pq-hot {
  color: #a09078 !important;
  -webkit-text-fill-color: #a09078 !important;
}
/* cream-filled controls: dark label only (never white) */
.btn-primary, .btn-primary *,
.nav-cta:not(.is-member), .nav-cta:not(.is-member) *,
.modal-submit, .modal-submit *,
.modal-done, .modal-done *,
.cc-btn.btn-primary, .cc-btn.btn-primary * {
  color: #0c0c0b !important;
  -webkit-text-fill-color: #0c0c0b !important;
}
/* kill gradient transparent flash forever */
.grad-text, .grad-text * {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: #a09078 !important;
  -webkit-text-fill-color: #a09078 !important;
}
h2 em, .chapter-text h2 em {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: #a09078 !important;
  -webkit-text-fill-color: #a09078 !important;
}

/* ============================================================
   SECTION PAGER v142 — one scroll → next section, eased settle
   JS (app.js) owns the motion. CSS keeps sealed full-viewport frames
   and eases content in when a section becomes live (.is-stage).
   ============================================================ */
html:has(body.home-page),
html:has(body.home-snap) {
  scroll-snap-type: none !important;
  scroll-behavior: auto !important; /* JS eases — avoid double-smooth */
}
html.section-paging {
  scroll-behavior: auto !important;
  overflow-y: auto !important;
}
body.home-page,
body.home-snap {
  overflow-x: clip !important;
  overflow-y: auto !important;
  height: auto !important;
  max-height: none !important;
  overscroll-behavior-y: none !important;
}
body.home-page main,
body.home-snap main {
  overflow: visible !important;
  height: auto !important;
}
/* sealed full-viewport frames */
body.home-page main > .snap-sec,
body.home-snap main > .snap-sec {
  min-height: 100svh !important;
  height: 100svh !important;
  max-height: 100svh !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding-top: clamp(4.2rem, 9vh, 5.6rem) !important;
  padding-bottom: clamp(1.6rem, 4vh, 2.8rem) !important;
  padding-left: var(--pad) !important;
  padding-right: var(--pad) !important;
  overflow: hidden !important;
  background-color: var(--void, #161616) !important;
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 0;
}
body.home-page main > .snap-sec.is-stage,
body.home-snap main > .snap-sec.is-stage {
  z-index: 2;
}
/* internal scroll only when needed (Q&A etc.) */
body.home-page main > .snap-sec.snap-scroll,
body.home-snap main > .snap-sec.snap-scroll {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch;
}

/* content ease-in when the section becomes the live stage */
body.home-page main > .snap-sec > *,
body.home-snap main > .snap-sec > * {
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.05s;
}
body.home-page main > .snap-sec:not(.is-stage) > *,
body.home-snap main > .snap-sec:not(.is-stage) > * {
  opacity: 0.28;
  transform: translateY(1.1rem);
}
body.home-page main > .snap-sec.is-stage > *,
body.home-snap main > .snap-sec.is-stage > * {
  opacity: 1;
  transform: none;
}
/* stagger a touch for second/third children */
body.home-page main > .snap-sec.is-stage > *:nth-child(2),
body.home-snap main > .snap-sec.is-stage > *:nth-child(2) {
  transition-delay: 0.1s;
}
body.home-page main > .snap-sec.is-stage > *:nth-child(3),
body.home-snap main > .snap-sec.is-stage > *:nth-child(3) {
  transition-delay: 0.16s;
}
body.home-page main > .snap-sec.is-stage > *:nth-child(n+4),
body.home-snap main > .snap-sec.is-stage > *:nth-child(n+4) {
  transition-delay: 0.2s;
}

/* phones: free scroll + soft proximity snap (no wheel hijack) */
@media (max-width: 860px) {
  html:has(body.home-page),
  html:has(body.home-snap) {
    scroll-snap-type: y proximity !important;
    scroll-behavior: smooth !important;
  }
  body.home-page main > .snap-sec,
  body.home-snap main > .snap-sec {
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    height: auto !important;
    max-height: none !important;
    min-height: 100svh !important;
    overflow: visible !important;
  }
  body.home-page main > .snap-sec > *,
  body.home-snap main > .snap-sec > *,
  body.home-page main > .snap-sec:not(.is-stage) > *,
  body.home-snap main > .snap-sec:not(.is-stage) > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page main > .snap-sec > *,
  body.home-snap main > .snap-sec > * {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   NEUMORPHISM UI BLACK  v144
   Sitewide soft extruded / inset surfaces on dark ground.
   Light from upper-left · dual shadows (dark + faint light) ·
   no glass · cream type · monochrome only.
   ============================================================ */

:root {
  --void: #161616 !important;
  --bg: #161616 !important;
  --neo-bg: #161616;
  --neo-face: #111111;
  --neo-face-hi: #141414;
  --neo-face-lo: #0c0c0c;
  --neo-dark: rgba(0, 0, 0, 0.58);
  --neo-light: rgba(255, 255, 255, 0.05);
  --neo-light-warm: rgba(160, 144, 120, 0.07);
  --neo-raised:
    8px 8px 18px var(--neo-dark),
    -5px -5px 14px var(--neo-light) !important;
  --neo-raised-sm:
    4px 4px 10px var(--neo-dark),
    -3px -3px 8px var(--neo-light) !important;
  --neo-raised-lg:
    14px 14px 32px rgba(0, 0, 0, 0.62),
    -8px -8px 20px var(--neo-light) !important;
  --neo-inset:
    inset 5px 5px 12px rgba(0, 0, 0, 0.58),
    inset -3px -3px 8px var(--neo-light) !important;
  --neo-pressed:
    inset 4px 4px 10px rgba(0, 0, 0, 0.68),
    inset -2px -2px 6px var(--neo-light) !important;
  --neo-grad: linear-gradient(145deg, #141414, #0c0c0c);
  --glass-bg: #1a1a1a !important;
  --glass-shadow: var(--neo-raised) !important;
}

/* —— ground —— */
html {
  background: #161616 !important;
  color-scheme: dark;
}
body {
  background: #161616 !important;
  background-image: none !important; /* clean neo — no washi grain */
  color: var(--paper);
}
body.home-page,
body.home-snap,
body.home-slides {
  background: #161616 !important;
  background-image: none !important;
}
body.home-page main > .snap-sec,
body.home-snap main > .snap-sec,
body.home-slides main > .snap-sec {
  background-color: #161616 !important;
  background-image: none !important;
}

/* —— utility surfaces —— */
.neo-raised,
.glass,
.deep-card,
.work-item,
.tier-card,
.subject-tile,
.lib-row,
.cms-row,
.hex-face,
.pull,
.wp-panel,
.article-cta,
.cc-banner,
.modal,
.modal.modal-auth {
  background: var(--neo-grad) !important;
  border: none !important;
  border-radius: var(--neo-radius, 18px) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: var(--neo-raised) !important;
}
.neo-inset,
.modal-form input,
.modal-form textarea,
.modal-signin input,
.ng-form input,
.cms-editor input,
.cms-editor textarea,
.ac-table,
.users-table {
  background: #141414 !important;
  border: none !important;
  border-radius: var(--neo-radius-sm, 12px) !important;
  box-shadow: var(--neo-inset) !important;
}

/* —— nav: floating raised bar —— */
.nav {
  top: 0.75rem !important;
  left: var(--pad) !important;
  right: var(--pad) !important;
  width: auto !important;
  padding: 0.65rem 1.1rem !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--neo-grad) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: var(--neo-raised-sm) !important;
  border-bottom: none !important;
}
.nav-links a {
  border-radius: 999px;
  padding: 0.35rem 0.55rem;
  transition: color 160ms ease, box-shadow 200ms ease, background 200ms ease !important;
}
.nav-links a:hover,
.nav-current {
  background: #141414;
  box-shadow: var(--neo-inset);
}
.nav-current::after { display: none !important; } /* inset chip replaces underline */
.nav-burger {
  border: none !important;
  border-radius: 12px !important;
  background: var(--neo-grad) !important;
  box-shadow: var(--neo-raised-sm) !important;
}
.nav-burger:active {
  box-shadow: var(--neo-pressed) !important;
}
.nav-burger span {
  background: var(--paper) !important;
}

/* —— buttons: extruded pills —— */
.btn-primary,
.nav-cta:not(.is-member),
.modal-submit,
.modal-done,
.cc-btn.btn-primary {
  border: none !important;
  border-radius: 999px !important;
  background: linear-gradient(145deg, #b09e84, #8f7e66) !important;
  color: #121212 !important;
  -webkit-text-fill-color: #121212 !important;
  box-shadow:
    6px 6px 14px rgba(0, 0, 0, 0.5),
    -3px -3px 10px rgba(160, 144, 120, 0.12) !important;
  filter: none !important;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease !important;
}
.btn-primary:hover,
.nav-cta:not(.is-member):hover,
.modal-submit:hover,
.modal-done:hover,
.cc-btn.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.04) !important;
  box-shadow:
    8px 8px 18px rgba(0, 0, 0, 0.55),
    -4px -4px 12px rgba(160, 144, 120, 0.14) !important;
}
.btn-primary:active,
.nav-cta:not(.is-member):active,
.modal-submit:active,
.modal-done:active {
  transform: translateY(0);
  box-shadow:
    inset 3px 3px 8px rgba(0, 0, 0, 0.35),
    inset -2px -2px 6px rgba(255, 255, 255, 0.08) !important;
}
.btn-primary *,
.nav-cta:not(.is-member) *,
.modal-submit *,
.modal-done *,
.cc-btn.btn-primary * {
  color: #121212 !important;
  -webkit-text-fill-color: #121212 !important;
}

.btn-ghost,
.nav-cta.is-member,
.cc-btn.btn-ghost,
.ms-back,
.pg-btn {
  border: none !important;
  border-radius: 999px !important;
  background: var(--neo-grad) !important;
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
  box-shadow: var(--neo-raised-sm) !important;
  transition: box-shadow 180ms ease, transform 180ms ease, color 160ms ease !important;
}
.btn-ghost:hover,
.nav-cta.is-member:hover,
.pg-btn:hover {
  color: var(--paper) !important;
  background: linear-gradient(145deg, #161616, #0c0c0c) !important;
  box-shadow:
    5px 5px 12px rgba(0, 0, 0, 0.55),
    -3px -3px 9px var(--neo-light) !important;
}
.btn-ghost:active,
.pg-btn:active,
.pg-btn[aria-pressed="true"] {
  background: #121212 !important;
  box-shadow: var(--neo-pressed) !important;
}
.pg-btn.hot {
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
}

/* —— thread rail: soft extruded —— */
.thread {
  background: #121212 !important;
  box-shadow: var(--neo-inset) !important;
  border-radius: 2px;
  width: 3px !important;
}
.thread-fill {
  background: linear-gradient(to bottom, #b09e84, #8f7e66) !important;
  box-shadow: none !important;
  border-radius: 2px;
}
.thread-fill::after {
  background: var(--paper) !important;
  box-shadow:
    2px 2px 6px rgba(0, 0, 0, 0.45),
    -1px -1px 4px var(--neo-light) !important;
  border-radius: 1px !important;
  width: 10px !important;
  height: 2px !important;
}
.thread-mark {
  background: #121212 !important;
  box-shadow: var(--neo-raised-sm) !important;
  border-radius: 1px !important;
  height: 2px !important;
}
.thread-mark.is-on {
  background: var(--paper) !important;
  box-shadow:
    2px 2px 6px rgba(0, 0, 0, 0.5),
    -1px -1px 4px var(--neo-light-warm) !important;
  height: 2px !important;
}
.thread-mark-gap {
  background: rgba(0, 0, 0, 0.35) !important;
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* —— reading / Q&A blocks —— */
.pd-drop,
details.pd-drop {
  background: var(--neo-grad) !important;
  border: none !important;
  border-radius: var(--neo-radius-sm, 12px) !important;
  box-shadow: var(--neo-raised-sm) !important;
  margin: 0.55rem 0 !important;
  overflow: hidden;
}
.pd-drop summary {
  list-style: none;
  cursor: pointer;
  padding: 0.85rem 1rem !important;
  border-radius: var(--neo-radius-sm, 12px);
}
.pd-drop summary::-webkit-details-marker { display: none; }
.pd-drop[open] {
  box-shadow: var(--neo-raised) !important;
}
.pd-drop[open] summary {
  box-shadow: none;
}
.pd-ans {
  padding: 0 1rem 1rem 1rem !important;
  color: var(--paper-dim) !important;
}
.def-list.qa dt,
.def-list.qa dd {
  border: none !important;
}
.pull-quote,
.open-quote-body {
  /* soft inset plate for the quote */
}
body.home-page .open-quote-body,
body.home-snap .open-quote-body {
  background: #141414 !important;
  border-radius: 22px !important;
  padding: 1.6rem 1.8rem !important;
  box-shadow: var(--neo-inset) !important;
  max-width: 36rem;
}
body.home-page .open-meta,
body.home-snap .open-meta {
  background: var(--neo-grad);
  border-radius: 18px;
  padding: 1.25rem 1.5rem;
  box-shadow: var(--neo-raised-sm);
  max-width: 30rem;
}

/* —— instrument chrome (already neo — reinforce site tokens) —— */
.pg-wrap,
body.home-page #paradigm-room .pg-wrap-fill,
.pg-wrap-fill {
  border: none !important;
  border-radius: 26px !important;
  background: var(--neo-grad) !important;
  box-shadow: var(--neo-raised-lg) !important;
  padding: clamp(0.75rem, 1.6vw, 1rem) !important;
}
.pg-stage,
.pg-stage-fill,
body.home-page #paradigm-room .pg-stage-fill {
  border-radius: 16px !important;
  background: #101010 !important;
  box-shadow: var(--neo-inset) !important;
  overflow: hidden !important;
}
.pg-hud,
.pg-hud-compact,
body.home-page #paradigm-room .pg-hud-compact {
  border-top: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* —— modal —— */
.modal-backdrop {
  background: rgba(10, 10, 10, 0.72) !important;
  backdrop-filter: blur(8px) !important;
}
.modal,
.modal.modal-auth {
  background: var(--neo-grad) !important;
  border: none !important;
  border-radius: 24px !important;
  box-shadow: var(--neo-raised-lg) !important;
}
.modal-close {
  border: none !important;
  border-radius: 999px !important;
  background: var(--neo-grad) !important;
  box-shadow: var(--neo-raised-sm) !important;
  color: var(--paper) !important;
}
.modal-close:hover,
.modal-close:active {
  box-shadow: var(--neo-pressed) !important;
}
.modal-form input,
.modal-form textarea,
.modal-signin input,
.modal-captcha {
  background: #121212 !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: var(--neo-inset) !important;
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
}
.modal-form input:focus,
.modal-form textarea:focus,
.modal-signin input:focus {
  outline: none !important;
  box-shadow:
    var(--neo-inset),
    0 0 0 1px rgba(160, 144, 120, 0.25) !important;
}

/* —— cards / panels —— */
.deep-card,
.work-item,
.tier-card,
.subject-tile,
.hex-inner,
.statement-fig,
.panel-gfx,
.chapter-meta .rule {
  border-color: transparent !important;
}
.deep-card,
.work-item,
.tier-card,
.subject-tile {
  transition: transform 200ms ease, box-shadow 200ms ease !important;
}
.deep-card:hover,
.work-item:hover,
.tier-card:hover,
.subject-tile:hover {
  transform: translateY(-2px);
  box-shadow:
    10px 10px 22px rgba(0, 0, 0, 0.6),
    -6px -6px 16px var(--neo-light) !important;
}
.step-dot {
  background: #121212 !important;
  box-shadow: var(--neo-inset) !important;
  border: none !important;
}
.step-dot.on {
  background: linear-gradient(145deg, #b09e84, #8f7e66) !important;
  box-shadow:
    3px 3px 8px rgba(0, 0, 0, 0.5),
    -2px -2px 6px var(--neo-light-warm) !important;
}

/* —— cookie / banners —— */
.cc-banner,
.cookie-banner,
[class*="cc-"] .cc-panel {
  border: none !important;
}
.cc-banner {
  background: var(--neo-grad) !important;
  box-shadow: var(--neo-raised-lg) !important;
  border-radius: 20px 20px 0 0 !important;
}

/* —— footer —— */
.footer {
  border-top: none !important;
  background: transparent !important;
}
.footer a:hover {
  color: var(--paper) !important;
}

/* —— chapter meta hairline as soft inset bar —— */
.chapter-meta .rule,
.rule {
  background: #121212 !important;
  box-shadow: var(--neo-inset) !important;
  height: 2px !important;
  border: none !important;
  border-radius: 2px;
}

/* —— scrollbars (webkit) soft —— */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: #141414;
  box-shadow: var(--neo-inset);
}
*::-webkit-scrollbar-thumb {
  background: var(--neo-grad);
  border-radius: 999px;
  box-shadow: var(--neo-raised-sm);
}

/* —— mobile nav drawer —— */
@media (max-width: 860px) {
  .nav {
    top: 0.5rem !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    border-radius: 18px !important;
  }
  .nav-links {
    background: var(--neo-grad) !important;
    box-shadow: var(--neo-raised-lg) !important;
    border: none !important;
    border-radius: 18px !important;
  }
}

/* —— focus rings stay soft cream —— */
:focus-visible {
  outline: 2px solid rgba(160, 144, 120, 0.45) !important;
  outline-offset: 3px;
}

/* ============================================================
   LENS SLIDES v146 — Q&A as centered full-viewport sections
   One idea per slide · text dead-center · nothing spills out
   ============================================================ */
body.home-page main > .snap-sec.lens-slide,
body.home-snap main > .snap-sec.lens-slide {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  overflow: hidden !important;
  min-height: 100svh !important;
  height: 100svh !important;
  max-height: 100svh !important;
  padding:
    clamp(5rem, 12vh, 6.5rem)
    clamp(1.25rem, 5vw, 3.5rem)
    clamp(2rem, 6vh, 3.5rem) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  background-color: var(--void, #161616) !important;
}

/* inner stack — fixed measure, never wider than the frame */
body.home-page main > .snap-sec.lens-slide > *,
body.home-snap main > .snap-sec.lens-slide > * {
  max-width: min(36rem, 92vw) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.lens-kicker {
  margin: 0 0 1.1rem !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--paper-dim) !important;
  -webkit-text-fill-color: var(--paper-dim) !important;
}

.lens-title {
  margin: 0 0 1.25rem !important;
  font-size: clamp(1.45rem, 3.6vw, 2.35rem) !important;
  line-height: 1.18 !important;
  font-weight: 500 !important;
  letter-spacing: -0.015em !important;
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
  text-wrap: balance;
}
.lens-title em {
  font-style: italic;
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
  background: none !important;
}

.lens-body {
  margin: 0 auto !important;
  max-width: min(34rem, 92vw) !important;
  font-size: 30px !important;
  line-height: 1.65 !important;
  font-weight: 350 !important;
  color: var(--paper-dim) !important;
  -webkit-text-fill-color: var(--paper-dim) !important;
  text-wrap: pretty;
}
.lens-body strong {
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
  font-weight: 500 !important;
}
.lens-body em {
  font-style: italic;
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
}

.lens-spine {
  margin: 1.6rem auto 0 !important;
  padding-top: 1rem !important;
  border-top: 1px solid rgba(160, 144, 120, 0.14);
  font-size: 0.66rem !important;
  letter-spacing: 0.12em !important;
  color: var(--paper-dim) !important;
  -webkit-text-fill-color: var(--paper-dim) !important;
  white-space: nowrap;
  max-width: 100% !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* stage ease-in still works; force full opacity when live */
body.home-page main > .snap-sec.lens-slide.is-stage > *,
body.home-snap main > .snap-sec.lens-slide.is-stage > * {
  opacity: 1 !important;
  transform: none !important;
}

/* hide legacy dropdown chrome if any leftover */
body.home-page .pd-qa,
body.home-page .pd-drop {
  display: none !important;
}

@media (max-width: 860px) {
  body.home-page main > .snap-sec.lens-slide,
  body.home-snap main > .snap-sec.lens-slide {
    height: auto !important;
    max-height: none !important;
    min-height: 100svh !important;
    padding: 5.5rem 1.25rem 3rem !important;
  }
  .lens-spine {
    white-space: normal;
    line-height: 1.5;
  }
  .lens-title {
    font-size: clamp(1.35rem, 6.5vw, 1.9rem) !important;
  }
}

/* BODY SIZE — 30px sitewide */
:root {
  --text-body: 25px !important;
  --text-body-lh: 1.55 !important;
}
body,
body.home-page,
body.home-slides,
body.home-page p,
body.home-page .lens-body,
body.home-page .open-tell-body,
body.home-page .open-meta,
body.home-page .open-quote-body p,
body.home-page .statement-lead,
body.home-page .panel-lead,
body.home-page .chapter-text p,
body.home-page .connect-sub,
body.home-page .pg-msg,
body.home-page .pg-takeaway,
.lens-body,
.open-tell-body,
.open-meta,
.open-quote-body p,
.statement-lead,
.panel-lead,
.chapter-text p,
.pd-ans,
.connect-sub,
.page-sub,
.article-body,
.wp-body p,
.tl-text,
p {
  font-size: 25px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
}

/* BODY SIZE LOCK 30 */
body.home-page main > .snap-sec .statement-lead,
body.home-page main > .snap-sec .panel-lead,
body.home-page main > .snap-sec .lens-body,
body.home-page main > .snap-sec p,
body.home-page .statement-lead,
body.home-page .panel-lead,
body.home-page .lens-body,
body.home-page .open-tell-body,
body.home-page .open-meta,
body.home-page .open-quote-body p,
body.home-page .pg-msg,
body.home-page .pg-takeaway,
body.home-page .connect-sub,
body.home-page .chapter-text p {
  font-size: 25px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
}

/* ============================================================
   LAYOUT TONE v150
   · kickers 15px · bigger titles · left align · no opening boxes
   · darker black-gray ground
   ============================================================ */
:root {
  --void: #161616 !important;
  --bg: #161616 !important;
  --neo-bg: #161616 !important;
  --neo-face: #111111 !important;
  --neo-face-hi: #151515 !important;
  --neo-face-lo: #0c0c0c !important;
  --neo-grad: linear-gradient(145deg, #151515, #0c0c0c) !important;
  --charcoal: #111111 !important;
  --gray-1: #111111 !important;
  --gray-2: #181818 !important;
}

html, body,
body.home-page,
body.home-snap,
body.home-slides {
  background: #161616 !important;
  background-color: #161616 !important;
  background-image: none !important;
}
body.home-page main > .snap-sec,
body.home-snap main > .snap-sec,
body.home-slides main > .snap-sec {
  background-color: #161616 !important;
  background-image: none !important;
}

/* —— kill boxes / containers on opening —— */
body.home-page .open-quote-body,
body.home-snap .open-quote-body,
body.home-page .open-meta,
body.home-snap .open-meta,
body.home-page .open-tell-body,
body.home-page .open-tell-lead,
body.home-page .open-title,
body.home-page .hero-title {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* —— left align: opening + lens slides —— */
body.home-page main > .snap-sec.lens-slide,
body.home-snap main > .snap-sec.lens-slide,
body.home-page main > .snap-sec.open-slide,
body.home-snap main > .snap-sec.open-slide,
body.home-page main > header.open-slide {
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
}
body.home-page main > .snap-sec.lens-slide > *,
body.home-snap main > .snap-sec.lens-slide > *,
body.home-page .open-meta,
body.home-page .open-quote-body,
body.home-page .open-quote-body p,
body.home-page .open-tell-lead,
body.home-page .open-tell-body,
body.home-page .open-title,
body.home-page .hero-title,
body.home-page .lens-kicker,
body.home-page .lens-title,
body.home-page .lens-body,
body.home-page .lens-spine {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: min(40rem, 92vw) !important;
}

/* undo center margin auto on lens children */
body.home-page main > .snap-sec.lens-slide > * {
  margin-left: 0 !important;
  margin-right: auto !important;
  width: auto !important;
  max-width: min(40rem, 92vw) !important;
}

/* open slides that were centered */
body.home-page .open-slide-meta,
body.home-page .open-slide-quote,
body.home-snap .open-slide-meta,
body.home-snap .open-slide-quote {
  align-items: flex-start !important;
  text-align: left !important;
}
body.home-page .open-meta,
body.home-page .open-quote-body {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-inline: 0 !important;
  text-align: left !important;
}

/* —— kickers / FIG labels: 15px —— */
.lens-kicker,
body.home-page .lens-kicker,
body.home-page main > .snap-sec .lens-kicker,
body.home-page main > .snap-sec p.lens-kicker,
body.home-page main > .snap-sec p.mono.lens-kicker,
.chapter-meta,
body.home-page .chapter-meta,
.chapter-meta .fig,
.pg-block-kicker,
body.home-page .pg-block-kicker {
  font-size: 15px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.14em !important;
  font-weight: 400 !important;
}

/* —— bigger titles —— */
body.home-page .lens-title,
body.home-snap .lens-title,
.lens-title {
  font-size: clamp(2.1rem, 4.8vw, 3.4rem) !important;
  line-height: 1.12 !important;
  font-weight: 500 !important;
  margin-bottom: 1.4rem !important;
  max-width: min(18ch, 92vw) !important;
}
body.home-page .open-title,
body.home-page .hero-title,
body.home-page h1.open-title {
  font-size: clamp(2.4rem, 5.5vw, 3.8rem) !important;
  line-height: 1.08 !important;
  max-width: min(16ch, 92vw) !important;
  text-align: left !important;
}
body.home-page main > .snap-sec h2,
body.home-page .statement h2 {
  font-size: clamp(2rem, 4.5vw, 3.2rem) !important;
  line-height: 1.12 !important;
}
body.home-page .open-tell-lead {
  font-size: clamp(1.75rem, 3.2vw, 2.4rem) !important;
  line-height: 1.25 !important;
  text-align: left !important;
  max-width: min(22ch, 92vw) !important;
}

/* body stays 30px but not kickers */
body.home-page main > .snap-sec p.lens-kicker,
body.home-page p.lens-kicker {
  font-size: 15px !important;
  line-height: 1.4 !important;
}

/* slightly softer light shadows on darker ground (still neo) */
:root {
  --neo-light: rgba(255, 255, 255, 0.03) !important;
  --neo-dark: rgba(0, 0, 0, 0.7) !important;
}

/* theme */

/* ============================================================
   NAV → HAMBURGER ONLY · thin thread · 10px kickers  v151
   ============================================================ */

/* —— no full nav bar: only mark + burger —— */
body .nav {
  position: fixed !important;
  top: 0.85rem !important;
  right: 0.85rem !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.55rem !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 60 !important;
}
body .nav-mark {
  display: none !important; /* bar gone — menu only */
}
body .nav-burger {
  display: flex !important;
  width: 46px !important;
  height: 46px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border: none !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #151515, #0c0c0c) !important;
  box-shadow:
    5px 5px 12px rgba(0, 0, 0, 0.65),
    -3px -3px 8px rgba(255, 255, 255, 0.03) !important;
  cursor: pointer !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}
body .nav-burger span {
  width: 18px !important;
  height: 1.5px !important;
  background: var(--paper, #a09078) !important;
  display: block !important;
  border-radius: 1px !important;
  transition: transform 0.22s ease, opacity 0.22s ease !important;
}
/* 3-line look if only 2 spans exist — app injects 2; thicken presence */
body .nav.open .nav-burger span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg) !important;
}
body .nav.open .nav-burger span:nth-child(2) {
  opacity: 0 !important;
}
body .nav.open .nav-burger span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg) !important;
}

/* links: hidden until open — full-screen soft panel */
body .nav-links {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  bottom: 0 !important;
  width: min(20rem, 86vw) !important;
  height: 100svh !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 5rem 1.6rem 2rem !important;
  margin: 0 !important;
  background: linear-gradient(145deg, #121212, #161616) !important;
  box-shadow:
    -12px 0 40px rgba(0, 0, 0, 0.55),
    inset 1px 0 0 rgba(255, 255, 255, 0.03) !important;
  border: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(12px) !important;
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s !important;
  z-index: 55 !important;
  display: flex !important;
}
body .nav.open .nav-links {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}
body .nav-links a,
body .nav-links button.nav-account {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 1rem 0.2rem !important;
  margin: 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(160, 144, 120, 0.1) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--paper-dim, #6e6658) !important;
  -webkit-text-fill-color: var(--paper-dim, #6e6658) !important;
  max-width: none !important;
}
body .nav-links a:hover,
body .nav-links a.nav-current,
body .nav-current {
  color: var(--paper, #a09078) !important;
  -webkit-text-fill-color: var(--paper, #a09078) !important;
  background: none !important;
  box-shadow: none !important;
}
body .nav-current::after { display: none !important; }
body .nav-cta,
body .nav-links .nav-cta {
  margin-top: 1.2rem !important;
  text-align: center !important;
  border-bottom: none !important;
  border-radius: 999px !important;
  padding: 0.85rem 1rem !important;
}

/* dim page when menu open */
body:has(.nav.open)::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 50;
  pointer-events: auto;
}

/* —— vertical progress thread: hairline —— */
:root { --thread-w: 0.5px !important; }
body .thread {
  width: 0.5px !important;
  left: max(0.55rem, calc(var(--pad, 1.25rem) / 3)) !important;
  background: rgba(160, 144, 120, 0.14) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
body .thread-fill {
  width: 100% !important;
  box-shadow: none !important;
  background: rgba(160, 144, 120, 0.55) !important;
}
body .thread-fill::after {
  width: 5px !important;
  height: 0.5px !important;
  background: var(--paper, #a09078) !important;
  box-shadow: none !important;
}
body .thread-mark {
  width: 4px !important;
  height: 0.5px !important;
  box-shadow: none !important;
  background: rgba(160, 144, 120, 0.22) !important;
}
body .thread-mark.is-on {
  width: 7px !important;
  height: 0.5px !important;
  background: var(--paper, #a09078) !important;
  box-shadow: none !important;
}
body .thread-mark-gap {
  width: 2px !important;
  height: 0.5px !important;
  background: rgba(160, 144, 120, 0.08) !important;
  box-shadow: none !important;
}

/* —— FIG / Q kickers: 10px —— */
.lens-kicker,
body.home-page .lens-kicker,
body.home-page main > .snap-sec .lens-kicker,
body.home-page main > .snap-sec p.lens-kicker,
body.home-page main > .snap-sec p.mono.lens-kicker,
body.home-page p.lens-kicker,
.chapter-meta,
body.home-page .chapter-meta,
.chapter-meta .fig,
body.home-page .chapter-meta .fig {
  font-size: 10px !important;
  line-height: 1.35 !important;
  letter-spacing: 0.16em !important;
}

/* free top space previously reserved for fat nav */
body.home-page main > .snap-sec,
body.home-page main > .snap-sec.lens-slide,
body.home-page main > .snap-sec.open-slide {
  padding-top: clamp(3.2rem, 8vh, 4.5rem) !important;
}

/* keep tell second sentence on one line */
body.home-page .open-tell-lead {
  max-width: min(36rem, 92vw) !important;
}
body.home-page .open-tell-lead .nowrap,
.open-tell-lead .nowrap {
  white-space: nowrap !important;
  display: inline-block;
}

/* ============================================================
   INSTRUMENT TWO-WINDOW  v153
   Window A = sky · Window B = console · boot · 10px chrome
   ============================================================ */
body.home-page #paradigm-room.pg-instrument,
body.home-page #paradigm-room.snap-game {
  display: flex !important;
  flex-direction: column !important;
  justify-content: stretch !important;
  align-items: stretch !important;
  height: 100svh !important;
  max-height: 100svh !important;
  min-height: 100svh !important;
  padding: clamp(2.8rem, 6vh, 3.6rem) clamp(0.75rem, 2vw, 1.25rem) 0.7rem !important;
  overflow: hidden !important;
  background: #161616 !important;
}

.pg-device {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0.55rem;
  border-radius: 18px;
  background: linear-gradient(145deg, #121212, #0c0c0c);
  box-shadow:
    8px 8px 22px rgba(0, 0, 0, 0.65),
    -4px -4px 12px rgba(255, 255, 255, 0.025);
  box-sizing: border-box;
}

/* system bar — 10px chrome */
.pg-sysbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.8rem;
  flex: 0 0 auto;
  padding: 0.2rem 0.35rem 0.45rem;
  border-bottom: 1px solid rgba(160, 144, 120, 0.1);
}
.pg-sys-id,
.pg-sys-status,
.pg-step,
.pg-pane-label,
.pg-pane-label span,
body.home-page #paradigm-room .pg-sys-id,
body.home-page #paradigm-room .pg-sys-status,
body.home-page #paradigm-room .pg-step,
body.home-page #paradigm-room .pg-pane-label,
body.home-page #paradigm-room .pg-block-kicker {
  font-size: 10px !important;
  line-height: 1.35 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  color: var(--paper-dim, #6e6658) !important;
  -webkit-text-fill-color: var(--paper-dim, #6e6658) !important;
  margin: 0 !important;
  max-width: none !important;
}
.pg-sys-status,
body.home-page #paradigm-room .pg-sys-status {
  color: var(--paper, #a09078) !important;
  -webkit-text-fill-color: var(--paper, #a09078) !important;
}
.pg-step,
body.home-page #paradigm-room .pg-step {
  color: var(--paper, #a09078) !important;
  -webkit-text-fill-color: var(--paper, #a09078) !important;
  margin-left: auto !important;
}

/* two windows */
.pg-split {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
  gap: 0.55rem;
}

.pg-pane {
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: #0e0e0e;
  box-shadow:
    inset 4px 4px 10px rgba(0, 0, 0, 0.55),
    inset -2px -2px 6px rgba(255, 255, 255, 0.02);
  overflow: hidden;
}
.pg-pane-label {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.65rem;
  border-bottom: 1px solid rgba(160, 144, 120, 0.08);
  flex: 0 0 auto;
}

/* sky window */
.pg-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #161616;
}
#pg-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  cursor: crosshair;
  touch-action: manipulation;
}

/* boot overlay */
.pg-boot {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 1.25rem 1.4rem;
  background: rgba(10, 10, 10, 0.92);
  z-index: 2;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
.pg-boot.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.pg-boot-line {
  font-size: 10px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--paper-dim) !important;
  -webkit-text-fill-color: var(--paper-dim) !important;
  opacity: 0.2;
  margin: 0 !important;
  max-width: none !important;
  transition: opacity 0.25s ease, color 0.25s ease;
}
.pg-boot-line.is-on {
  opacity: 1;
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
}
.pg-boot-line.is-live.is-on {
  color: var(--paper) !important;
}

/* console window */
.pg-console {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem 0.8rem 0.7rem;
  box-sizing: border-box;
}
.pg-msg,
body.home-page #paradigm-room .pg-msg,
body.home-page #paradigm-room p.pg-msg {
  flex: 1 1 auto;
  min-height: 4.5em;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  font-weight: 350 !important;
  color: var(--paper-dim, #6e6658) !important;
  -webkit-text-fill-color: var(--paper-dim, #6e6658) !important;
  max-width: none !important;
  text-align: left !important;
  overflow: auto;
}
.pg-takeaway,
body.home-page #paradigm-room .pg-takeaway {
  margin: 0 !important;
  font-size: 25px !important;
  line-height: 1.5 !important;
  color: var(--paper, #a09078) !important;
  -webkit-text-fill-color: var(--paper, #a09078) !important;
  max-width: none !important;
  text-align: left !important;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(160, 144, 120, 0.12);
}
.pg-takeaway strong {
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
}
.pg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  flex: 0 0 auto;
}
.pg-footer {
  flex: 0 0 auto;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(160, 144, 120, 0.08);
  display: flex;
  justify-content: flex-end;
}

/* instrument buttons — compact neo pills */
body.home-page #paradigm-room .pg-btn,
.pg-instrument .pg-btn {
  border: none !important;
  border-radius: 999px !important;
  background: linear-gradient(145deg, #161616, #0e0e0e) !important;
  box-shadow:
    4px 4px 10px rgba(0, 0, 0, 0.55),
    -2px -2px 6px rgba(255, 255, 255, 0.03) !important;
  color: var(--paper, #a09078) !important;
  -webkit-text-fill-color: var(--paper, #a09078) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 0.55rem 0.85rem !important;
  min-height: 36px !important;
  cursor: pointer;
  max-width: none !important;
}
body.home-page #paradigm-room .pg-btn.hot,
.pg-instrument .pg-btn.hot {
  color: var(--paper) !important;
  box-shadow:
    4px 4px 10px rgba(0, 0, 0, 0.55),
    -2px -2px 6px rgba(160, 144, 120, 0.08) !important;
}
body.home-page #paradigm-room .pg-btn:active,
body.home-page #paradigm-room .pg-btn[aria-pressed="true"] {
  box-shadow:
    inset 3px 3px 8px rgba(0, 0, 0, 0.6),
    inset -2px -2px 5px rgba(255, 255, 255, 0.02) !important;
  background: #0c0c0c !important;
}
body.home-page #paradigm-room #pg-esc {
  opacity: 0.85;
}
body.home-page #paradigm-room #pg-esc:hover {
  opacity: 1;
}

/* kill old stacked fill rules fighting the split */
body.home-page #paradigm-room .pg-wrap-fill,
body.home-page #paradigm-room .pg-block-fill,
body.home-page #paradigm-room .pg-hud-compact {
  all: unset;
}

/* mobile: stack sky on top, console below */
@media (max-width: 860px) {
  body.home-page #paradigm-room.pg-instrument,
  body.home-page #paradigm-room.snap-game {
    padding: 3.2rem 0.65rem 0.55rem !important;
  }
  .pg-device {
    padding: 0.45rem;
    gap: 0.4rem;
    border-radius: 14px;
  }
  .pg-split {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(42vh, 1fr) minmax(38vh, auto);
    gap: 0.4rem;
  }
  .pg-sysbar {
    gap: 0.25rem 0.5rem;
  }
  .pg-sys-id {
    flex: 1 1 100%;
  }
  .pg-msg,
  body.home-page #paradigm-room .pg-msg {
    font-size: 25px !important;
    min-height: 3.2em;
  }
  .pg-console {
    padding: 0.55rem 0.65rem 0.55rem;
    gap: 0.55rem;
  }
  .pg-actions {
    gap: 0.35rem;
  }
  body.home-page #paradigm-room .pg-btn {
    min-height: 40px !important;
    padding: 0.5rem 0.75rem !important;
  }
  .pg-footer {
    justify-content: stretch;
  }
  body.home-page #paradigm-room #pg-esc {
    width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pg-boot { transition: none; }
  .pg-boot-line { transition: none; }
}

/* ============================================================
   GUIDED EXERCISE UI  v155
   lighter gray buttons · guide pulse · red esc at end
   ============================================================ */
.pg-brief-title {
  margin: 0 0 0.55rem !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--paper, #a09078) !important;
  -webkit-text-fill-color: var(--paper, #a09078) !important;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.pg-brief-body,
body.home-page #paradigm-room .pg-brief-body,
body.home-page #paradigm-room #pg-msg {
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: #b8aea0 !important;
  -webkit-text-fill-color: #b8aea0 !important;
}
.pg-brief-body strong {
  color: #d4c4a8 !important;
  -webkit-text-fill-color: #d4c4a8 !important;
}

/* default controls: light dark-gray — easy to see on black */
body.home-page #paradigm-room .pg-btn,
.pg-instrument .pg-btn {
  background: linear-gradient(145deg, #4a4a4a, #323232) !important;
  color: #e6dcc8 !important;
  -webkit-text-fill-color: #e6dcc8 !important;
  border: 1px solid rgba(200, 190, 170, 0.18) !important;
  box-shadow:
    5px 5px 12px rgba(0, 0, 0, 0.45),
    -2px -2px 6px rgba(255, 255, 255, 0.06) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  min-height: 42px !important;
  padding: 0.6rem 1rem !important;
  opacity: 1 !important;
}
body.home-page #paradigm-room .pg-btn:hover {
  background: linear-gradient(145deg, #5a5a5a, #3a3a3a) !important;
  color: #f0e6d4 !important;
  -webkit-text-fill-color: #f0e6d4 !important;
}
body.home-page #paradigm-room .pg-btn:active,
body.home-page #paradigm-room .pg-btn[aria-pressed="true"] {
  background: #2a2a2a !important;
  box-shadow:
    inset 3px 3px 8px rgba(0, 0, 0, 0.55),
    inset -1px -1px 4px rgba(255, 255, 255, 0.04) !important;
}

/* highlighted guide CTA — brighter + pulse */
body.home-page #paradigm-room .pg-btn.is-guide,
body.home-page #paradigm-room .pg-btn.hot.is-guide {
  background: linear-gradient(145deg, #6a6a6a, #454545) !important;
  color: #fff6e8 !important;
  -webkit-text-fill-color: #fff6e8 !important;
  border-color: rgba(230, 210, 180, 0.45) !important;
  box-shadow:
    0 0 0 1px rgba(220, 200, 170, 0.35),
    0 0 18px rgba(180, 160, 120, 0.25),
    5px 5px 14px rgba(0, 0, 0, 0.4) !important;
  animation: pg-guide-pulse 1.6s ease-in-out infinite;
}
@keyframes pg-guide-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(220,200,170,0.35), 0 0 14px rgba(180,160,120,0.2), 5px 5px 14px rgba(0,0,0,0.4); }
  50% { box-shadow: 0 0 0 2px rgba(230,210,180,0.55), 0 0 26px rgba(200,180,140,0.35), 5px 5px 14px rgba(0,0,0,0.4); }
}

/* esc: dim until end, then RED */
body.home-page #paradigm-room #pg-esc,
body.home-page #paradigm-room .pg-esc {
  background: linear-gradient(145deg, #3a3a3a, #2a2a2a) !important;
  color: #8a8278 !important;
  -webkit-text-fill-color: #8a8278 !important;
  border: 1px solid rgba(120, 110, 100, 0.2) !important;
  opacity: 0.55 !important;
  animation: none !important;
  cursor: not-allowed;
}
body.home-page #paradigm-room #pg-esc.is-dim {
  opacity: 0.45 !important;
}
body.home-page #paradigm-room #pg-esc.is-armed {
  opacity: 1 !important;
  cursor: pointer !important;
  background: linear-gradient(145deg, #c23a3a, #8e1f1f) !important;
  color: #ffe8e8 !important;
  -webkit-text-fill-color: #ffe8e8 !important;
  border: 1px solid rgba(255, 120, 120, 0.55) !important;
  box-shadow:
    0 0 0 1px rgba(220, 60, 60, 0.4),
    0 0 22px rgba(200, 40, 40, 0.35),
    5px 5px 14px rgba(0, 0, 0, 0.45) !important;
  animation: pg-esc-pulse 1.4s ease-in-out infinite;
}
@keyframes pg-esc-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(220,60,60,0.4), 0 0 16px rgba(200,40,40,0.3), 5px 5px 14px rgba(0,0,0,0.45); }
  50% { box-shadow: 0 0 0 2px rgba(255,100,100,0.65), 0 0 28px rgba(230,50,50,0.45), 5px 5px 14px rgba(0,0,0,0.45); }
}
body.home-page #paradigm-room #pg-esc.is-armed:hover {
  background: linear-gradient(145deg, #d44545, #a02424) !important;
}

@media (prefers-reduced-motion: reduce) {
  body.home-page #paradigm-room .pg-btn.is-guide,
  body.home-page #paradigm-room #pg-esc.is-armed {
    animation: none !important;
  }
}

/* ============================================================
   MICRO TYPE STANDARD  v157 — everything chrome / mono = 9px
   ============================================================ */
:root {
  --text-micro: 9px !important;
  --text-micro-lh: 1.35 !important;
  --text-micro-track: 0.14em !important;
}

/* sitewide mono / chrome / labels */
.mono,
.lens-kicker,
.chapter-meta,
.chapter-meta .fig,
.pg-sysbar,
.pg-sys-id,
.pg-sys-status,
.pg-step,
.pg-pane-label,
.pg-pane-label span,
.pg-boot-line,
.pg-brief-title,
.pg-btn,
.pg-esc,
.nav-links a,
.nav-links button,
.nav-mark,
.nav-cta,
.def-note,
.lens-spine,
.gfx-cap,
.footer,
.footer a,
.cc-more-btn,
body.home-page .lens-kicker,
body.home-page main > .snap-sec .lens-kicker,
body.home-page main > .snap-sec p.lens-kicker,
body.home-page main > .snap-sec p.mono.lens-kicker,
body.home-page .chapter-meta,
body.home-page .chapter-meta .fig,
body.home-page #paradigm-room .pg-sys-id,
body.home-page #paradigm-room .pg-sys-status,
body.home-page #paradigm-room .pg-step,
body.home-page #paradigm-room .pg-pane-label,
body.home-page #paradigm-room .pg-pane-label span,
body.home-page #paradigm-room .pg-block-kicker,
body.home-page #paradigm-room .pg-boot-line,
body.home-page #paradigm-room .pg-brief-title,
body.home-page #paradigm-room .pg-btn,
body.home-page #paradigm-room #pg-esc,
body.home-page #paradigm-room .pg-esc,
.pg-instrument .pg-btn {
  font-size: 9px !important;
  line-height: var(--text-micro-lh) !important;
  letter-spacing: var(--text-micro-track) !important;
}

/* canvas labels stay in JS at 9px — enforced below via note */
/* keep body prose at 30px — do not shrink paragraphs */
body.home-page .lens-body,
body.home-page .open-tell-body,
body.home-page .open-meta,
body.home-page .open-quote-body p,
body.home-page .statement-lead,
body.home-page .panel-lead,
body.home-page #paradigm-room .pg-msg,
body.home-page #paradigm-room .pg-takeaway,
body.home-page #paradigm-room #pg-msg {
  font-size: 25px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
}

/* instrument console text — same 9px micro standard */
body.home-page #paradigm-room .pg-msg,
body.home-page #paradigm-room #pg-msg,
body.home-page #paradigm-room .pg-takeaway,
body.home-page #paradigm-room .pg-brief-title,
body.home-page #paradigm-room .pg-brief-body {
  font-size: 9px !important;
  line-height: 1.45 !important;
  letter-spacing: 0.06em !important;
}

/* ============================================================
   DESIGN RESTORE v159
   · ground back to neo #161616
   · spine 12px
   · menu close control
   · game chrome follows site neo + paper tokens (not sloppy grays)
   ============================================================ */
:root {
  --void: #161616 !important;
  --bg: #161616 !important;
  --neo-bg: #161616 !important;
  --neo-face: #1a1a1a !important;
  --neo-face-hi: #202020 !important;
  --neo-face-lo: #141414 !important;
  --neo-grad: linear-gradient(145deg, #202020, #141414) !important;
  --paper: #a09078 !important;
  --paper-dim: #6e6658 !important;
}

html, body,
body.home-page,
body.home-snap,
body.home-slides {
  background: #161616 !important;
  background-color: #161616 !important;
  background-image: none !important;
}
body.home-page main > .snap-sec,
body.home-snap main > .snap-sec,
body.home-page #paradigm-room,
body.home-page #paradigm-room.pg-instrument,
body.home-page #paradigm-room.snap-game {
  background: #161616 !important;
  background-color: #161616 !important;
}

/* —— spine: 12px standard —— */
.lens-spine,
body.home-page .lens-spine,
body.home-page main > .snap-sec .lens-spine,
p.mono.lens-spine {
  font-size: 12px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.1em !important;
  color: var(--paper-dim) !important;
  -webkit-text-fill-color: var(--paper-dim) !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  margin-top: 1.25rem !important;
  padding-top: 0.85rem !important;
  border-top: 1px solid rgba(160, 144, 120, 0.14) !important;
  max-width: min(40rem, 92vw) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* —— hamburger close —— */
.nav-close {
  display: none;
  appearance: none;
  background: none;
  border: none;
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-align: right !important;
  width: 100% !important;
  padding: 0.35rem 0.2rem 1rem !important;
  margin: 0 0 0.4rem !important;
  cursor: pointer;
  border-bottom: 1px solid rgba(160, 144, 120, 0.12) !important;
}
body .nav.open .nav-close {
  display: block !important;
}
body .nav-close:hover {
  color: var(--paper) !important;
  opacity: 0.85;
}

/* —— GAME: design-system neo instrument (clean, not sloppy) —— */
body.home-page #paradigm-room.pg-instrument .pg-device {
  background: var(--neo-grad) !important;
  border: none !important;
  border-radius: 22px !important;
  box-shadow:
    10px 10px 24px rgba(0, 0, 0, 0.55),
    -5px -5px 14px rgba(255, 255, 255, 0.03) !important;
  padding: 0.65rem !important;
  gap: 0.5rem !important;
}
body.home-page #paradigm-room .pg-sysbar {
  border-bottom: 1px solid rgba(160, 144, 120, 0.1) !important;
  padding: 0.25rem 0.4rem 0.5rem !important;
}
body.home-page #paradigm-room .pg-pane {
  background: #141414 !important;
  border-radius: 14px !important;
  box-shadow:
    inset 5px 5px 12px rgba(0, 0, 0, 0.5),
    inset -3px -3px 8px rgba(255, 255, 255, 0.025) !important;
  border: none !important;
}
body.home-page #paradigm-room .pg-pane-label {
  border-bottom: 1px solid rgba(160, 144, 120, 0.08) !important;
  background: transparent !important;
}
body.home-page #paradigm-room .pg-stage,
body.home-page #paradigm-room #pg-canvas {
  background: #161616 !important;
}
body.home-page #paradigm-room .pg-boot {
  background: rgba(22, 22, 22, 0.94) !important;
}

/* buttons: site neo cream system — readable, not random mid-gray */
body.home-page #paradigm-room .pg-btn,
.pg-instrument .pg-btn {
  background: linear-gradient(145deg, #2a2a2a, #1c1c1c) !important;
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
  border: 1px solid rgba(160, 144, 120, 0.22) !important;
  border-radius: 999px !important;
  box-shadow:
    4px 4px 10px rgba(0, 0, 0, 0.5),
    -2px -2px 6px rgba(255, 255, 255, 0.03) !important;
  font-size: 9px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  min-height: 40px !important;
  animation: none !important;
}
body.home-page #paradigm-room .pg-btn:hover {
  border-color: rgba(160, 144, 120, 0.4) !important;
  background: linear-gradient(145deg, #303030, #202020) !important;
}
body.home-page #paradigm-room .pg-btn:active,
body.home-page #paradigm-room .pg-btn[aria-pressed="true"] {
  background: #141414 !important;
  box-shadow:
    inset 3px 3px 8px rgba(0, 0, 0, 0.55),
    inset -2px -2px 5px rgba(255, 255, 255, 0.02) !important;
  animation: none !important;
}

/* guided CTA: paper edge + soft cream glow (design system, not gray soup) */
body.home-page #paradigm-room .pg-btn.is-guide,
body.home-page #paradigm-room .pg-btn.hot.is-guide {
  background: linear-gradient(145deg, #2e2c28, #1e1c18) !important;
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
  border: 1px solid rgba(160, 144, 120, 0.55) !important;
  box-shadow:
    0 0 0 1px rgba(160, 144, 120, 0.2),
    4px 4px 12px rgba(0, 0, 0, 0.5),
    -2px -2px 6px rgba(160, 144, 120, 0.06) !important;
  animation: none !important;
}

/* esc: dim until end, then restrained red accent */
body.home-page #paradigm-room #pg-esc,
body.home-page #paradigm-room .pg-esc {
  background: linear-gradient(145deg, #242424, #1a1a1a) !important;
  color: var(--paper-dim) !important;
  -webkit-text-fill-color: var(--paper-dim) !important;
  border: 1px solid rgba(160, 144, 120, 0.12) !important;
  opacity: 0.5 !important;
  animation: none !important;
  box-shadow: var(--neo-raised-sm, 4px 4px 10px rgba(0,0,0,0.5)) !important;
}
body.home-page #paradigm-room #pg-esc.is-armed {
  opacity: 1 !important;
  background: linear-gradient(145deg, #5c2222, #3a1414) !important;
  color: #e8c8c8 !important;
  -webkit-text-fill-color: #e8c8c8 !important;
  border: 1px solid rgba(180, 70, 70, 0.55) !important;
  box-shadow:
    0 0 0 1px rgba(160, 50, 50, 0.25),
    4px 4px 12px rgba(0, 0, 0, 0.5) !important;
  animation: none !important;
}

/* console copy: paper tokens */
body.home-page #paradigm-room .pg-msg,
body.home-page #paradigm-room #pg-msg,
body.home-page #paradigm-room .pg-takeaway {
  color: var(--paper-dim) !important;
  -webkit-text-fill-color: var(--paper-dim) !important;
  font-size: 25px !important;
  line-height: 1.5 !important;
  letter-spacing: 0.01em !important;
}
body.home-page #paradigm-room .pg-msg strong,
body.home-page #paradigm-room .pg-takeaway strong {
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
}
body.home-page #paradigm-room .pg-brief-title {
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
  font-size: 9px !important;
}

/* ============================================================
   STATEMENT SPINE v160 — mono pattern line, not body 30px
   ============================================================ */
.statement-source,
body.home-page .statement-source,
body.home-page main > .snap-sec .statement-source,
body.home-page main > .snap-sec p.statement-source,
body.home-page main > .snap-sec p.mono.statement-source,
p.mono.statement-source {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  color: var(--paper-dim, #6e6658) !important;
  -webkit-text-fill-color: var(--paper-dim, #6e6658) !important;
  margin: 1.35rem 0 0 !important;
  padding: 0 !important;
  max-width: min(42rem, 92vw) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}

@media (max-width: 860px) {
  .statement-source,
  body.home-page .statement-source {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   TYPE + FOOTER CLEANUP  v161
   body 18px medium · game 13px · uncluttered connect footer
   ============================================================ */
:root {
  --text-body: 25px !important;
  --text-body-lh: 1.55 !important;
  --text-body-weight: 500 !important;
}

body,
body.home-page,
body.home-slides {
  font-size: 25px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
}

/* body prose */
body.home-page p,
body.home-page .lens-body,
body.home-page .open-tell-body,
body.home-page .open-meta,
body.home-page .open-quote-body p,
body.home-page .statement-lead,
body.home-page .panel-lead,
body.home-page .chapter-text p,
body.home-page .connect-sub,
body.home-page .connect-offer,
body.home-page .page-sub,
body.home-page .article-body,
body.home-page .wp-body p,
body.home-page .tl-text,
body.home-page main > .snap-sec .statement-lead,
body.home-page main > .snap-sec .panel-lead,
body.home-page main > .snap-sec .lens-body,
body.home-page main > .snap-sec p:not(.mono):not(.lens-kicker):not(.lens-spine):not(.statement-source):not(.pg-msg):not(.pg-takeaway):not(.pg-boot-line):not(.pg-brief-title) {
  font-size: 25px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
}

/* game console + actions: 13px */
body.home-page #paradigm-room .pg-msg,
body.home-page #paradigm-room #pg-msg,
body.home-page #paradigm-room .pg-takeaway,
body.home-page #paradigm-room .pg-btn,
body.home-page #paradigm-room #pg-esc,
body.home-page #paradigm-room .pg-esc,
body.home-page #paradigm-room .pg-brief-title,
.pg-instrument .pg-btn {
  font-size: 25px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}
/* keep sys chrome micro */
body.home-page #paradigm-room .pg-sys-id,
body.home-page #paradigm-room .pg-sys-status,
body.home-page #paradigm-room .pg-step,
body.home-page #paradigm-room .pg-pane-label,
body.home-page #paradigm-room .pg-pane-label span,
body.home-page #paradigm-room .pg-boot-line {
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
}

/* —— connect section: air + hierarchy —— */
body.home-page #connect.connect,
body.home-page #connect {
  justify-content: center !important;
  padding-top: clamp(4rem, 10vh, 5.5rem) !important;
  padding-bottom: clamp(1.5rem, 4vh, 2.5rem) !important;
}
body.home-page #connect .connect-inner,
body.home-page #connect .chapter-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  max-width: min(40rem, 92vw) !important;
  width: 100% !important;
  margin: 0 !important;
}
body.home-page #connect .connect-title {
  margin: 0.6rem 0 0 !important;
  font-size: clamp(1.75rem, 4vw, 2.6rem) !important;
  line-height: 1.12 !important;
  font-weight: 500 !important;
}
body.home-page #connect .connect-sub {
  margin: 1.1rem 0 0 !important;
  max-width: 38ch !important;
  font-size: 25px !important;
  font-weight: 500 !important;
  color: var(--paper-dim) !important;
  -webkit-text-fill-color: var(--paper-dim) !important;
}
body.home-page #connect .connect-actions {
  margin-top: 1.75rem !important;
  gap: 0.75rem !important;
}
body.home-page #connect .connect-offer,
body.home-page #connect .membership-pitch {
  display: none !important; /* removed clutter */
}

/* footer: one clean bar, not a pile of dots */
body.home-page #connect .footer,
body.home-page .footer {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem 1.5rem !important;
  width: 100% !important;
  max-width: min(40rem, 92vw) !important;
  margin-top: 2.5rem !important;
  padding-top: 1.1rem !important;
  border-top: 1px solid rgba(160, 144, 120, 0.12) !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--paper-dim) !important;
  -webkit-text-fill-color: var(--paper-dim) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}
body.home-page .footer-copy {
  color: var(--paper-dim) !important;
  -webkit-text-fill-color: var(--paper-dim) !important;
  opacity: 0.75;
}
body.home-page .footer-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.35rem 1.15rem !important;
  align-items: center !important;
}
body.home-page .footer-nav a {
  color: var(--paper-dim) !important;
  -webkit-text-fill-color: var(--paper-dim) !important;
  text-decoration: none !important;
  opacity: 0.85;
  transition: color 160ms ease, opacity 160ms ease;
}
body.home-page .footer-nav a:hover {
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
  opacity: 1;
}
body.home-page .footer-dot {
  display: none !important;
}

@media (max-width: 860px) {
  body.home-page #connect .footer {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.85rem !important;
  }
}

/* TYPE LOCK v162 — body + game console 20px */
:root { --text-body: 25px !important; }
body, body.home-page, body.home-slides {
  font-size: 25px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
}
body.home-page p,
body.home-page .lens-body,
body.home-page .open-tell-body,
body.home-page .open-meta,
body.home-page .open-quote-body p,
body.home-page .statement-lead,
body.home-page .panel-lead,
body.home-page .chapter-text p,
body.home-page .connect-sub,
body.home-page main > .snap-sec .statement-lead,
body.home-page main > .snap-sec .lens-body {
  font-size: 25px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
}
body.home-page #paradigm-room .pg-msg,
body.home-page #paradigm-room #pg-msg,
body.home-page #paradigm-room .pg-takeaway,
body.home-page #paradigm-room .pg-btn,
body.home-page #paradigm-room #pg-esc,
body.home-page #paradigm-room .pg-brief-title,
.pg-instrument .pg-btn {
  font-size: 25px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}

/* ============================================================
   TYPE + GAME BUTTONS  v163
   body 25px · game console 20px · buttons flat gray neo (no stroke)
   ============================================================ */
:root {
  --text-body: 25px !important;
  --text-body-lh: 1.5 !important;
  --text-body-weight: 500 !important;
}

body,
body.home-page,
body.home-slides {
  font-size: 25px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}

/* page body prose */
body.home-page p,
body.home-page .lens-body,
body.home-page .open-tell-body,
body.home-page .open-meta,
body.home-page .open-quote-body p,
body.home-page .statement-lead,
body.home-page .panel-lead,
body.home-page .chapter-text p,
body.home-page .connect-sub,
body.home-page main > .snap-sec .statement-lead,
body.home-page main > .snap-sec .panel-lead,
body.home-page main > .snap-sec .lens-body,
body.home-page main > .snap-sec p:not(.mono):not(.lens-kicker):not(.lens-spine):not(.statement-source):not(.pg-msg):not(.pg-takeaway):not(.pg-boot-line):not(.pg-brief-title) {
  font-size: 25px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}

/* game console narrative — keep 20px (not body 25) */
body.home-page #paradigm-room .pg-msg,
body.home-page #paradigm-room #pg-msg,
body.home-page #paradigm-room .pg-takeaway,
body.home-page #paradigm-room .pg-brief-title {
  font-size: 20px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
}

/* game buttons — flat gray, same fabric as ground, outward soft shadow, no stroke
   font size unchanged (compact control size) */
body.home-page #paradigm-room .pg-btn,
body.home-page #paradigm-room #pg-esc,
body.home-page #paradigm-room .pg-esc,
.pg-instrument .pg-btn {
  background: #1e1e1e !important;
  background-image: none !important;
  color: var(--paper, #a09078) !important;
  -webkit-text-fill-color: var(--paper, #a09078) !important;
  border: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  outline: none !important;
  border-radius: 999px !important;
  box-shadow:
    6px 6px 14px rgba(0, 0, 0, 0.55),
    -4px -4px 10px rgba(255, 255, 255, 0.035) !important;
  font-size: 12px !important; /* control size — not body */
  line-height: 1.2 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  min-height: 40px !important;
  padding: 0.55rem 1rem !important;
  animation: none !important;
  filter: none !important;
}
body.home-page #paradigm-room .pg-btn:hover {
  background: #242424 !important;
  background-image: none !important;
  border: none !important;
  box-shadow:
    7px 7px 16px rgba(0, 0, 0, 0.58),
    -4px -4px 12px rgba(255, 255, 255, 0.04) !important;
}
body.home-page #paradigm-room .pg-btn:active,
body.home-page #paradigm-room .pg-btn[aria-pressed="true"] {
  background: #181818 !important;
  background-image: none !important;
  border: none !important;
  box-shadow:
    inset 4px 4px 10px rgba(0, 0, 0, 0.55),
    inset -2px -2px 6px rgba(255, 255, 255, 0.02) !important;
}

/* guide CTA: same fabric, slightly lifted paper text — still flat, no stroke */
body.home-page #paradigm-room .pg-btn.is-guide,
body.home-page #paradigm-room .pg-btn.hot.is-guide,
body.home-page #paradigm-room .pg-btn.hot {
  background: #222222 !important;
  background-image: none !important;
  color: var(--paper, #a09078) !important;
  -webkit-text-fill-color: var(--paper, #a09078) !important;
  border: none !important;
  box-shadow:
    7px 7px 16px rgba(0, 0, 0, 0.58),
    -5px -5px 12px rgba(255, 255, 255, 0.04) !important;
  animation: none !important;
}

/* esc dim / armed — flat, no stroke */
body.home-page #paradigm-room #pg-esc {
  background: #1a1a1a !important;
  background-image: none !important;
  border: none !important;
  opacity: 0.55 !important;
  color: var(--paper-dim) !important;
  -webkit-text-fill-color: var(--paper-dim) !important;
  box-shadow:
    5px 5px 12px rgba(0, 0, 0, 0.5),
    -3px -3px 8px rgba(255, 255, 255, 0.025) !important;
  animation: none !important;
  font-size: 12px !important;
}
body.home-page #paradigm-room #pg-esc.is-armed {
  opacity: 1 !important;
  background: #4a2020 !important;
  background-image: none !important;
  color: #e8c8c8 !important;
  -webkit-text-fill-color: #e8c8c8 !important;
  border: none !important;
  box-shadow:
    6px 6px 14px rgba(0, 0, 0, 0.55),
    -3px -3px 8px rgba(255, 255, 255, 0.02) !important;
  animation: none !important;
}