body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  background-image:
    radial-gradient(ellipse 70vw 55vh at 95% 6%, hsla(40, 95%, 70%, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 55vw 50vh at 0% 28%, hsla(78, 55%, 58%, 0.09) 0%, transparent 60%),
    radial-gradient(ellipse 60vw 50vh at 100% 58%, hsla(36, 80%, 55%, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60vw 55vh at 0% 88%, hsla(40, 95%, 65%, 0.13) 0%, transparent 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  font-feature-settings: 'ss01', 'cv11';
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--forest-600);
  font-variation-settings: 'SOFT' 50, 'opsz' 144;
}

h1 {
  font-size: var(--text-6xl);
  letter-spacing: var(--tracking-tightest);
}
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p {
  max-width: 62ch;
  color: var(--color-text-soft);
  line-height: var(--leading-relaxed);
}

em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
}

a {
  color: var(--forest-500);
  transition: color var(--duration-fast) var(--ease-default);
}
a:hover { color: var(--bojin-500); }

/* Eyebrow labels */
.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--bojin-500);
}

.eyebrow--amber { color: var(--amber-600); }
.eyebrow--cream { color: var(--cream-200); }

/* Utility text */
.lead {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--color-text-soft);
  max-width: 52ch;
  font-weight: var(--weight-regular);
}

.text-invert { color: var(--color-text-invert); }
.text-invert p { color: hsla(0, 0%, 100%, 0.78); }
.text-invert h1, .text-invert h2,
.text-invert h3, .text-invert h4 { color: var(--cream-0); }