@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&family=Instrument+Sans:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root {
  --font-display: 'Bricolage Grotesque', sans-serif;  /* headlines, subheads, buttons, big stats */
  --font-body: 'Instrument Sans', sans-serif;          /* body, H3/card titles, labels, chart labels */
  --font-mono: 'Space Mono', monospace;                /* eyebrows, axis labels, section markers */

  --fs-h1: 38px;  --lh-h1: 1.08;  /* @kind font */  --fw-h1: 700;  /* @kind font */
  --fs-h2: 22px;  --lh-h2: 1.2;   /* @kind font */  --fw-h2: 600;  /* @kind font */
  --fs-h3: 17px;  --lh-h3: 1.3;   /* @kind font */  --fw-h3: 600;  /* @kind font */ /* Instrument Sans, red */
  --fs-h4: 13px;  --fw-h4: 600;   /* @kind font */  /* uppercase label */
  --fs-body: 16px; --lh-body: 1.6; /* @kind font */ --fw-body: 400; /* @kind font */
  --fs-small: 13px;
  --fs-eyebrow: 13px; --ls-eyebrow: 0.1em;         /* mono, uppercase */
  --fs-stat: 44px; --fw-stat: 700; /* @kind font */ /* display, red */
}

.rrg-h1 { font-family: var(--font-display); font-weight: var(--fw-h1); font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--text-heading); }
.rrg-h1--reversed { color: #fff; }                 /* on --rrg-red */
.rrg-h1--accent { color: var(--rrg-red); }         /* on white */
.rrg-h2 { font-family: var(--font-display); font-weight: var(--fw-h2); font-size: var(--fs-h2); color: var(--text-heading); }
.rrg-h3 { font-family: var(--font-body); font-weight: var(--fw-h3); font-size: var(--fs-h3); color: var(--rrg-red); }
.rrg-h4 { font-family: var(--font-body); font-weight: var(--fw-h4); font-size: var(--fs-h4); text-transform: uppercase; letter-spacing: .02em; color: var(--text-muted, #4A4A47); }
.rrg-body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); }
.rrg-eyebrow { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-label); }
.rrg-stat { font-family: var(--font-display); font-weight: var(--fw-stat); font-size: var(--fs-stat); line-height: 1; color: var(--rrg-red); }