/* Growth Bastards design tokens. Generated from tokens.json. Edit tokens.json, not this file. */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Serif:ital@0;1&display=swap');
:root {
  /* color */
  --paper: #F3F0E8;
  --paper-2: #E8E3D7;
  --sheet: #FAF8F2;
  --ink: #1B1B1B;
  --ink-muted: #5B5555;
  --paper-muted: #D9D5CB;
  --ink-line: #3A3636;
  --red: #EB5443;
  --teal: #3FB3BB;
  --yellow: #F0B323;
  --deep-teal: #386C71;
  --oxblood: #6E221E;
  --white: #FFFFFF;
  --grid-line: rgba(27, 27, 27, 0.05);
  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 80px;
  --page-gutter: 112px;
  --measure: 700px;
  --grid-pitch: 40px;
  /* radius */
  --radius-none: 0;
  --radius-pill: 999px;
  --radius-circle: 50%;
  /* shadow */
  --shadow-press: 3px 3px 0 #1B1B1B;
  --shadow-press-on-ink: 3px 3px 0 #F0B323;
  /* rule */
  --rule-band: 26px;
  --rule-section: 8px;
  --rule-grid: 3px;
  --rule-hair: 2px;
  --rule-line: 1px;
  --rule-spine: 5px;
  /* type families */
  --font-display: "Jost", "Futura PT", "Century Gothic", sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-serif: "IBM Plex Serif", Georgia, serif;
}
/* Poster */
.poster-hero { font-family: var(--font-display); font-size: 152px; line-height: 0.88; font-weight: 700; letter-spacing: -0.03em; }
.poster-title { font-family: var(--font-display); font-size: 76px; line-height: 0.95; font-weight: 700; letter-spacing: -0.03em; }
.poster-h1 { font-family: var(--font-display); font-size: 64px; line-height: 1.02; font-weight: 700; letter-spacing: -0.03em; }
.poster-statement { font-family: var(--font-display); font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
.poster-lead { font-family: var(--font-display); font-size: 19px; line-height: 1.5; font-weight: 400; }
.poster-body { font-family: var(--font-display); font-size: 17px; line-height: 1.5; font-weight: 400; }
.eyebrow { font-family: var(--font-display); font-size: 13px; line-height: 1; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; }
.wordmark { font-family: var(--font-display); font-size: 15px; line-height: 1; font-weight: 600; letter-spacing: 0.42em; text-transform: uppercase; }
/* Document */
.doc-title { font-family: var(--font-display); font-size: 32px; line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; }
.doc-heading { font-family: var(--font-display); font-size: 22px; line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; }
.doc-framing { font-family: var(--font-serif); font-size: 18px; line-height: 1.5; font-weight: 400; font-style: italic; }
.doc-body { font-family: var(--font-body); font-size: 15px; line-height: 1.6; font-weight: 400; }
.doc-small { font-family: var(--font-body); font-size: 14px; line-height: 1.5; font-weight: 400; }
/* Instrument */
.inst-title { font-family: var(--font-display); font-size: 22px; line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; }
.inst-stat { font-family: var(--font-display); font-size: 28px; line-height: 1; font-weight: 600; }
.inst-row { font-family: var(--font-body); font-size: 15px; line-height: 1.2; font-weight: 500; }
.data-label { font-family: var(--font-mono); font-size: 12px; line-height: 1.3; font-weight: 400; }
/* the drafting grid, instrument volume only */
.drafting-grid { background-color: var(--paper); background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: var(--grid-pitch) var(--grid-pitch); }