/* HEATMAP MEDIA v3.1 — tokens as CSS: @font-face, colour variables for the Void (default) and Bone themes, spacing,
   radius, opacity, duration, font stacks and one class per type style. Hand-maintained to match tokens.json.
   Load before components/bundle.css. Fonts are relative: keep this file in styles/ next to fonts/. */

@font-face{font-family:"Archivo";src:url("../fonts/Archivo-Variable-latin.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:block}
@font-face{font-family:"Space Mono";src:url("../fonts/SpaceMono-Regular-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"Space Mono";src:url("../fonts/SpaceMono-Bold-latin.woff2") format("woff2");font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:"Heatmap Blot";src:url("../fonts/HeatmapBlot-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block}

:root, [data-theme="void"], .hm-theme-void {
  --ground: #0C0B0E;
  --ground-raised: #16141A;
  --line: #2A272E;
  --ink: #EDE7DB;
  --ink-muted: #9A948A;
  --label-hot: #FF8A1F;
  --accent: #E5311B;
  --void: #0C0B0E;
  --bone: #EDE7DB;
  --cold-indigo: #2A1480;
  --ember: #E5311B;
  --flare: #FF8A1F;
  --core: #FFE27A;
  --heat-0: var(--void);
  --heat-20: var(--cold-indigo);
  --heat-40: var(--ember);
  --heat-60: var(--flare);
  --heat-80: var(--core);
  --heat-100: #FFF8EA;
}
[data-theme="bone"], .hm-theme-bone {
  --ground: #EDE7DB;
  --ground-raised: #E3DCCF;
  --line: #DCD5C7;
  --ink: #0C0B0E;
  --ink-muted: #5D584F;
  --label-hot: #0C0B0E;
}
:root {
  --space-hair: 3px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-section: 140px;
  --radius-none: 0;
  --radius-round: 50%;
  --grain-photo: 0.2;
  --grain-page: 0.22;
  --grain-title: 0.4;
  --watermark: 0.2;
  --burn-footage: 0.7;
  --dur-wander: 8000ms;
  --dur-caption-min: 333ms;
  --dur-label-hold: 2000ms;
  --font-sans: Archivo, "Archivo Black", sans-serif;
  --font-mono: "Space Mono", monospace;
  --font-blot: "Heatmap Blot", "Archivo Black", sans-serif;
}

.display-hero { font-family:var(--font-sans); font-size:176px; font-weight:900; line-height:0.86; letter-spacing:-0.03em; }
.display-section { font-family:var(--font-sans); font-size:64px; font-weight:900; line-height:1; letter-spacing:-0.02em; }
.headline { font-family:var(--font-sans); font-size:64px; font-weight:900; line-height:0.92; letter-spacing:-0.03em; }
.subhead { font-family:var(--font-sans); font-size:24px; font-weight:800; line-height:1.15; }
.headline-blot { font-family:var(--font-blot); font-size:64px; font-weight:400; line-height:0.9; letter-spacing:-0.02em; }
.lead { font-family:var(--font-sans); font-size:30px; font-weight:500; line-height:1.2; }
.body-lg { font-family:var(--font-sans); font-size:22px; font-weight:400; line-height:1.4; }
.body { font-family:var(--font-sans); font-size:16px; font-weight:400; line-height:1.5; }
.body-sm { font-family:var(--font-sans); font-size:14px; font-weight:400; line-height:1.55; }
.label-lg { font-family:var(--font-mono); font-size:18px; font-weight:400; line-height:1.6; letter-spacing:0.06em; }
.label { font-family:var(--font-mono); font-size:12px; font-weight:400; line-height:1.4; letter-spacing:0.08em; }
.label-sm { font-family:var(--font-mono); font-size:11px; font-weight:400; line-height:1.45; letter-spacing:0.08em; }
.caption-spoken { font-family:var(--font-sans); font-size:58px; font-weight:800; line-height:1.15; letter-spacing:-0.01em; }
.caption-punch { font-family:var(--font-blot); font-size:140px; font-weight:400; line-height:0.9; letter-spacing:-0.01em; }
.caption-label { font-family:var(--font-mono); font-size:30px; font-weight:400; line-height:1.3; letter-spacing:0.06em; }
