:root {
  --accent: #4f46e5;
  --page-bg: #f8fafc;
}

body {
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  background: var(--page-bg);
  color: #1f2937;
  letter-spacing: 0.01em;
}

h1, h2, h3, h4 {
  font-family: 'Lekton', 'Nunito', system-ui, -apple-system, sans-serif;
  letter-spacing: 0.02em;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

a:hover {
  opacity: 0.8;
}

.fade {
  transition: opacity 200ms ease, color 200ms ease;
}

.hairline {
  border-color: rgba(87, 83, 78, 0.25);
}

.brand {
  font-family: 'Lekton', 'Nunito', system-ui, -apple-system, sans-serif;
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

.nav-link {
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  font-weight: 300;
  text-transform: lowercase;
  letter-spacing: 0.01em;
}

.max-readable {
  max-width: 46rem;
}