:root {
  --bg: #ffffff;
  --bg-alt: #fafafa;
  --bg-dark: #0a0a0a;
  --ink: #0a0a0a;
  --ink-light: #525252;
  --ink-muted: #737373;
  --cyan: #99F5F3;
  --cyan-dim: rgba(26, 107, 92, 0.12);
  --white: #ffffff;
  --border: rgba(10, 10, 10, 0.08);
  --border-cyan: rgba(26, 107, 92, 0.35);

  /* David-like process: inactive copy reads as light gray, not mid-gray */
  --david-process-idle: rgba(10, 10, 10, 0.11);

  --font-display: 'Inter', system-ui, sans-serif;
  --font-mono: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --ease-arch: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-heavy: cubic-bezier(0.77, 0, 0.175, 1);

  --gutter: clamp(20px, 4vw, 72px);
  /* Keep full-bleed section rules from crossing the fixed index rail */
  --rail-safe-left: max(var(--gutter), calc(var(--gutter) + 148px));
  --section-y: clamp(120px, 14vw, 220px);
  --section-y-lg: clamp(160px, 18vw, 280px);
  --grid-gap: 4px;
  --radius-0: 0px;
  --radius-card: 14px;
  --nav-h: 72px;
  --rail-x: 22px;
  --rail-y: 120px;
  --container: 1200px;
  --containerWide: 1240px;
  --measure: 66ch;
  --measureNarrow: 54ch;
}

@media (max-width: 1024px) {
  :root {
    --rail-x: 14px;
    --rail-y: 104px;
  }
}

@media (max-width: 768px) {
  :root {
    --rail-x: 10px;
    --rail-y: 92px;
  }
}

@media (max-width: 899px) {
  :root {
    --gutter: clamp(14px, 4vw, 22px);
    --section-y: clamp(56px, 10vw, 88px);
    --section-y-lg: clamp(72px, 12vw, 110px);
    --nav-h: 56px;
    --rail-x: 14px;
    --rail-y: 12px;
  }
}