/* Mentzai type. Instrument Sans for people, JetBrains Mono for machines (code, compared numbers, dates in lists, IDs).
   Two weights only: 400 and 700. Sentence case everywhere; uppercase only in eyebrow. */
:root {
  --font-sans: "Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --weight-regular: 400;
  --weight-bold: 700;

  --type-display-size: 56px; --type-display-line: 60px; --type-display-track: -0.02em;
  --type-h1-size: 40px; --type-h1-line: 44px; --type-h1-track: -0.02em;
  --type-h2-size: 28px; --type-h2-line: 34px; --type-h2-track: -0.01em;
  --type-h3-size: 20px; --type-h3-line: 28px;
  --type-lead-size: 18px; --type-lead-line: 28px;
  --type-body-size: 16px; --type-body-line: 24px;
  --type-body-sm-size: 14px; --type-body-sm-line: 20px;
  --type-caption-size: 12px; --type-caption-line: 16px; --type-caption-track: 0.01em;
  --type-eyebrow-size: 12px; --type-eyebrow-line: 16px; --type-eyebrow-track: 0.08em;
  --type-code-size: 14px; --type-code-line: 22px;
  --type-code-sm-size: 12px; --type-code-sm-line: 18px;
  --type-numeral-size: 32px; --type-numeral-line: 36px; --type-numeral-track: -0.01em;
}
.display { font-family: var(--font-sans); font-size: 56px; line-height: 60px; font-weight: 700; letter-spacing: -0.02em; }
.h1 { font-family: var(--font-sans); font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -0.02em; }
.h2 { font-family: var(--font-sans); font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.01em; }
.h3 { font-family: var(--font-sans); font-size: 20px; line-height: 28px; font-weight: 700; }
.lead { font-family: var(--font-sans); font-size: 18px; line-height: 28px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: 0.01em; }
.eyebrow { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.code { font-family: var(--font-mono); font-size: 14px; line-height: 22px; font-weight: 400; }
.code-sm { font-family: var(--font-mono); font-size: 12px; line-height: 18px; font-weight: 400; }
.numeral { font-family: var(--font-mono); font-size: 32px; line-height: 36px; font-weight: 700; letter-spacing: -0.01em; }
@media (max-width: 767px) {
  .display { font-size: 40px; line-height: 44px; }
  .h1 { font-size: 32px; line-height: 38px; }
}