/* Sentient carries the voice: editorial, but with strokes that hold at
   heading sizes. Supreme does the reading. Neither is a default. */

:root {
  --font-display: "Sentient", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-text: "Supreme", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h1, .h1 { font-size: var(--step-6); font-weight: 700; letter-spacing: -0.028em; }
h2, .h2 { font-size: var(--step-5); }
h3, .h3 { font-size: var(--step-3); line-height: 1.08; }
h4, .h4 { font-size: var(--step-1); line-height: 1.22; letter-spacing: -0.018em; }

p { text-wrap: pretty; }

.lede {
  font-size: var(--step-2);
  line-height: 1.42;
  color: var(--cream-200);
  max-width: 34ch;
  letter-spacing: -0.012em;
}

.prose { max-width: var(--measure); color: var(--fg-muted); }
.prose + .prose { margin-top: var(--sp-4); }

.serif-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

.accent-word { color: var(--copper-300); }

.label {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-400);
}

.mono-fig {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.price {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.92;
}

.price-currency {
  font-size: 0.46em;
  font-weight: 700;
  vertical-align: 0.52em;
  margin-right: 0.14em;
  color: var(--cream-300);
}