body {
  color: var(--varns-charcoal-900);
  font-family: var(--varns-font-body);
  font-size: var(--varns-text-body);
  font-weight: 400;
  line-height: 1.62;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
.varns-display {
  color: inherit;
  font-family: var(--varns-font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 0.95;
  text-wrap: balance;
}

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

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

h3 {
  font-size: var(--varns-text-h3);
  line-height: 1.05;
}

p {
  text-wrap: pretty;
}

.varns-lead {
  font-size: var(--varns-text-lead);
  line-height: 1.55;
}

.varns-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block-end: 0.7rem;
  font-family: var(--varns-font-display);
  font-size: clamp(0.92rem, 0.84rem + 0.3vw, 1.18rem);
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
}

.varns-eyebrow::after {
  inline-size: clamp(2rem, 5vw, 4.5rem);
  block-size: 2px;
  background: currentColor;
  content: "";
}

.varns-eyebrow--orange {
  color: var(--varns-orange-600);
}

::selection {
  color: var(--varns-ink-950);
  background: var(--varns-orange-500);
}