/* jointheparty.ai type system — DM Sans, two weights, nothing else.
   Locked 2026-07-27. Scale measured off leftclick.ai with getComputedStyle.

   THE SINGLE SOURCE OF TYPE FOR THIS SITE. Before this file existed, all 61
   pages carried their own @font-face blocks and their own --grot/--mono
   tokens, so changing the brand face meant editing 61 files. Link this
   instead:

     <link rel="stylesheet" href="/jointheparty-assets/type.css">
     <link rel="preload" as="font" type="font/woff2" crossorigin
           href="/jointheparty-assets/fonts/DMSans-Variable.woff2">

   and delete that page's local @font-face + type tokens.

   Sizes are px on purpose. The old scale used rem against a 17px root while
   LeftClick's root is 16px, so carrying the rem values over would have
   silently shifted every size by 6%. */

@font-face {
  font-family: "DM Sans";
  src: url("/jointheparty-assets/fonts/DMSans-Variable.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --grot: "DM Sans", Arial, sans-serif;

  /* --mono is deliberately aliased to the body face, not removed.
     DM Mono is retired (Lauren, 2026-07-27) but ~61 pages still reference
     var(--mono). Aliasing degrades them to the right family instead of
     dropping them to a browser default mid-migration. Delete the token
     once nothing references it. */
  --mono: var(--grot);

  --t-hero: 36px;
  --t-h2: 36px;          /* identical to hero, not a typo */
  --t-h3: 24px;
  --t-lede: 20px;
  --t-sub: 16.8px;
  --t-body: 16px;
  --t-card-title: 18px;
  --t-card-meta: 13.6px;
  --t-eyebrow: 11.2px;
  --t-nav-label: 12px;
  --t-stat-label: 11.2px;

  --lh-display: 1.05;
  --lh-prose: 1.55;
  --lh-ui: 1.3;

  --ls-display: -1px;
  --ls-eyebrow: 1.12px;
  --ls-nav: 1.8px;
}

body {
  font-family: var(--grot);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-ui);
  -webkit-font-smoothing: antialiased;
}

/* Weight 500 is the ceiling. There is no 600 or 700 in this brand. If a
   headline reads weak, change size, color, or whitespace. */
h1, h2, h3, .t-hero, .t-h2, .t-h3 {
  font-weight: 500;
  text-wrap: balance;
}

h1, .t-hero,
h2, .t-h2 {
  font-size: var(--t-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

h3, .t-h3 {
  font-size: var(--t-h3);
  line-height: var(--lh-ui);
  letter-spacing: normal;
}

.t-lede { font-size: var(--t-lede); line-height: var(--lh-prose); }
.t-sub  { font-size: var(--t-sub);  line-height: var(--lh-prose); }

.t-card-title { font-size: var(--t-card-title); font-weight: 500; }
.t-card-meta  { font-size: var(--t-card-meta);  font-weight: 400; }
.t-stat-label { font-size: var(--t-stat-label); font-weight: 400; }

.t-stat-num {
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: var(--ls-display);
  font-variant-numeric: tabular-nums;
}

/* Eyebrows and nav labels: DM Sans 500 uppercase tracked out.
   This is what replaced DM Mono. */
.t-eyebrow {
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.t-nav-label {
  font-size: var(--t-nav-label);
  font-weight: 500;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
}

/* Prose measure. Unchanged from the old system. */
.prose { max-width: 34em; }