body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.75;
  color: var(--color-espresso);
  background-color: var(--color-cream);
  overflow-x: hidden;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

/* Headings */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h1 {
  font-size: var(--text-hero);
}

h2 {
  font-size: var(--text-4xl);
}

h3 {
  font-size: var(--text-2xl);
}

/* Body text */
p {
  max-width: 60ch;
}

/* Links */
a {
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--color-amber);
}

/* Display quote */
.display-quote {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-style: italic;
  line-height: 1.3;
  color: var(--color-amber);
}

/* Background decorative text */
.bg-text {
  font-family: var(--font-display);
  font-size: var(--text-decorative);
  font-weight: 500;
  line-height: 1;
  opacity: 0.04;
  position: absolute;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.section--light .bg-text {
  color: var(--color-espresso);
}

.section--dark .bg-text {
  color: var(--color-cream);
}

/* Skip to content */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-forest);
  color: var(--color-cream);
  z-index: var(--z-overlay);
  border-radius: 0 0 4px 4px;
  font-size: var(--text-sm);
}

.skip-link:focus {
  top: 0;
}

/* Selection */
::selection {
  background: var(--color-amber);
  color: var(--color-cream);
}