:root {
  --ink: #070707;
  --paper: #FFFFFF;
  --graphite: #505050;
  --rule: rgba(7, 7, 7, 0.04);
  --rule-strong: rgba(7, 7, 7, 0.10);
  --rule-inverse: rgba(255, 255, 255, 0.05);
  --rule-inverse-strong: rgba(255, 255, 255, 0.12);
  --haze: #F4F4F2;
  --smoke: #E9E9E6;
  --ash: #B8B8B5;

  --display-1: clamp(64px, 14vw, 240px);
  --display-2: clamp(48px, 10vw, 160px);
  --display-3: clamp(40px, 7vw, 96px);
  --h2: clamp(36px, 5vw, 72px);
  --h3: clamp(24px, 3vw, 40px);
  --body-l: 18px;
  --body: 16px;
  --body-s: 14px;
  --mono: 11px;

  --col-gap: clamp(16px, 2vw, 32px);
  --section-py: clamp(80px, 12vw, 200px);
  --container-px: clamp(20px, 4vw, 60px);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 240ms;
  --dur: 480ms;
  --dur-slow: 800ms;

  --z-grid: 0;
  --z-content: 1;
  --z-nav: 50;
  --z-cursor: 90;
  --z-curtain: 100;
}

html, body { font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif; font-weight: 400; font-size: var(--body); }

.mono, [data-mono] {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

.display-1 { font-family: 'Space Grotesk', sans-serif; font-size: var(--display-1); font-weight: 500; line-height: 0.86; letter-spacing: -0.04em; }
.display-2 { font-size: var(--display-2); font-weight: 500; line-height: 0.9; letter-spacing: -0.035em; }
.display-3 { font-size: var(--display-3); font-weight: 500; line-height: 0.95; letter-spacing: -0.03em; }
.h2 { font-size: var(--h2); font-weight: 500; line-height: 1; letter-spacing: -0.025em; }
.h3 { font-size: var(--h3); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; }
.lede { font-size: var(--body-l); line-height: 1.4; max-width: 60ch; }

.container {
  width: 100%;
  padding-left: var(--container-px);
  padding-right: var(--container-px);
  position: relative;
  z-index: var(--z-content);
}

.section { padding-top: var(--section-py); padding-bottom: var(--section-py); position: relative; }

.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.eyebrow::before {
  content: ""; width: 16px; height: 1px; background: currentColor;
}

.theme-dark { background: var(--ink); color: var(--paper); }
.theme-dark a { color: var(--paper); }
.theme-dark .eyebrow { color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}