html {
  color-scheme: dark;
}

body {
  background:
    radial-gradient(circle at 20% 20%, rgba(220, 220, 220, 0.1), transparent 35%),
    radial-gradient(circle at 80% 0%, rgba(95, 95, 95, 0.2), transparent 30%),
    repeating-linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.018) 0,
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px,
      transparent 4px
    ),
    var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

a {
  color: var(--color-accent);
  text-underline-offset: 0.18em;
}

a:hover {
  color: #f2f2f2;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: -100%;
  background: var(--color-accent);
  color: #090909;
  padding: var(--space-sm) var(--space-md);
  z-index: 1000;
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-sm);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.015em;
}

h1 {
  font-size: clamp(2rem, 4vw, 3.5rem);
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}

h3 {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
}

small,
.meta {
  color: var(--color-text-soft);
}

img {
  border: 1px solid var(--color-line);
}