:root{
  /* families: Archivo for anything structural, Plex Sans for prose, Plex Mono for labels */
  --sf-font-display:Archivo,sans-serif;
  --sf-font-body:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --sf-font-mono:'IBM Plex Mono',ui-monospace,monospace;

  --sf-weight-medium:500;
  --sf-weight-semibold:600;
  --sf-weight-bold:700;
  --sf-weight-black:800;

  /* fluid display sizes, exactly as used on the site */
  --sf-size-hero:clamp(40px,5.4vw,72px);
  --sf-size-page-title:clamp(36px,5vw,66px);
  --sf-size-h2:clamp(32px,4.4vw,58px);
  --sf-size-h2-sm:clamp(28px,3.6vw,44px);
  --sf-size-h3:25px;
  --sf-size-h4:22px;
  --sf-size-h5:19.5px;

  /* prose */
  --sf-size-lead:18.5px;
  --sf-size-body:16.5px;
  --sf-size-body-sm:15.5px;
  --sf-size-footnote:13px;

  /* mono labels */
  --sf-size-eyebrow:11.5px;
  --sf-size-label:11px;
  --sf-size-meta:12.5px;

  --sf-leading-display:1.0;
  --sf-leading-title:1.16;
  --sf-leading-body:1.62;
  --sf-leading-prose:1.68;
  --sf-leading-label:1.5;

  --sf-tracking-hero:-0.04em;
  --sf-tracking-h2:-0.035em;
  --sf-tracking-h3:-0.025em;
  --sf-tracking-tight:-0.02em;
  --sf-tracking-eyebrow:0.2em;
  --sf-tracking-label:0.16em;
  --sf-tracking-meta:0.08em;
  --sf-tracking-marquee:0.22em;
}