:root {
  /* colors */
  --color-bg: oklch(0.16 0.006 250);
  --color-border: oklch(0.3 0.02 250);
  --color-heading: oklch(0.95 0.004 250);
  --color-text: oklch(0.92 0.004 250);
  --color-text-secondary: oklch(0.70 0.01 250);
  --color-text-muted: oklch(0.55 0.02 250);
  --color-text-dim: oklch(0.45 0.01 250);
  --color-accent: rgb(234, 198, 0);
  --color-selection-bg: rgba(163, 163, 146, 1);

  /* fonts */
  --font-mono: 'Space Mono', monospace;
  --font-sans: 'Space Grotesk', sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-xl: 32px;

  /* spacing (normalized to a 4px grid) */
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-72: 72px;
  --space-88: 88px;
  --space-100: 100px;
  --space-120: 120px;

  /* misc */
  --radius: 4px;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.12em;
  --leading-normal: 1.6;
  --leading-relaxed: 1.7;
}

body {
  margin: 0;
  background: var(--color-bg);
}

::selection {
  background: var(--color-selection-bg);
  color: var(--color-bg);
}

.page {
  position: relative;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  overflow: hidden;
}

.background-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.9;
  pointer-events: none;
}

.content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-120) var(--space-24) var(--space-100);
}

.hero {
  margin-bottom: var(--space-88);
}

.hero h1 {
  font-family: var(--font-mono);
  font-size: var(--font-size-xl);
  font-weight: 500;
  margin: 0 0 var(--space-8);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
}

.hero .intro {
  margin: 0 0 var(--space-20);
  font-size: var(--font-size-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: 520px;
}

.hero .links {
  display: flex;
  gap: var(--space-16);
  margin-top: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}

.hero .links a {
  color: var(--color-accent);
  text-decoration: none;
}

.section-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-28);
  font-weight: 500;
}

.focus-section {
  margin-bottom: var(--space-72);
}

.focus-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-28);
}

.focus-item {
  border-left: 2px solid var(--color-accent);
  padding-left: var(--space-20);
}

.focus-item h3 {
  margin: 0 0 var(--space-8);
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-heading);
}

.focus-item .blurb {
  margin: 0 0 var(--space-8);
  font-size: var(--font-size-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

.focus-item .tech {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.site-footer {
  margin-top: var(--space-100);
  font-size: var(--font-size-xs);
  color: var(--color-text-dim);
  font-family: var(--font-mono);
}