/*
  Edit this file to tune webpage font sizes.
  Most values use clamp(min, preferred, max).

  For example:
  --font-h2: clamp(30px, 4.2vw, 58px);

  Lower the first and last numbers to make a text group smaller.
*/

:root {
  --font-brand: 14px;
  --font-nav-link: 13px;
  --font-hero-node: 12px;

  --font-eyebrow: 14px;
  --font-h1: clamp(48px, 8vw, 108px);
  --font-h2: clamp(30px, 4.2vw, 58px);
  --font-h3: clamp(26px, 3.2vw, 44px);

  --font-body: clamp(18px, 1.65vw, 24px);
  --font-lead: clamp(20px, 2vw, 28px);
  --font-quote: clamp(28px, 4.2vw, 58px);
  --font-caption: 18px;

  --font-tag: 13px;
  --font-kicker: 15px;
  --font-card-title: 20px;
  --font-card-body: 16px;
  --font-flow-title: 17px;
  --font-flow-body: 14px;

  --font-year: 24px;
  --font-time-title: 20px;
  --font-time-desc: 16px;
  --font-metric-number: clamp(72px, 10vw, 140px);
  --font-metric-number-small: 90px;
  --font-metric-label: 17px;

  --font-closing-h2: clamp(34px, 4.6vw, 64px);
  --font-footer-note: 16px;

  --font-mobile-hero-title: clamp(42px, 13vw, 56px);
  --font-mobile-lead: 16px;
}

.brand { font-size: var(--font-brand); }
.nav-links a { font-size: var(--font-nav-link); }
.hero-node { font-size: var(--font-hero-node); }

.eyebrow { font-size: var(--font-eyebrow); }
h1 { font-size: var(--font-h1); }
h2 { font-size: var(--font-h2); }
h3 { font-size: var(--font-h3); }
p { font-size: var(--font-body); }
.lead { font-size: var(--font-lead); }
.quote { font-size: var(--font-quote); }
.caption { font-size: var(--font-caption); }

.tag { font-size: var(--font-tag); }
.kicker { font-size: var(--font-kicker); }
.mini-card strong { font-size: var(--font-card-title); }
.mini-card p { font-size: var(--font-card-body); }
.flow-step b { font-size: var(--font-flow-title); }
.flow-step span { font-size: var(--font-flow-body); }

.year { font-size: var(--font-year); }
.time-title { font-size: var(--font-time-title); }
.time-desc { font-size: var(--font-time-desc); }
.big-number { font-size: var(--font-metric-number); }
.big-number[style] { font-size: var(--font-metric-number-small) !important; }
.metric-label { font-size: var(--font-metric-label); }

.closing h2 { font-size: var(--font-closing-h2); }
.footer-note { font-size: var(--font-footer-note); }

@media (max-width: 820px) {
  #s1 .hero-title { font-size: var(--font-mobile-hero-title); }
  #s1 .lead { font-size: var(--font-mobile-lead); }
}