/*
  Type scale measured from clay.global (/fintech and /work/discover),
  computed styles in headless Chromium, 1 Oct 2026.
  Breakpoints match Clay's: <768 / 768 / 1250 / 1900.

  role       393   1024  1440  1920   lh     tracking   clay weight
  display     50    80   120   140   1.0    -0.05em    740
  title       40    52    74    86   1.1    -0.04em    740
  headline    30    40    52    64   1.1    -0.03em    740
  subhead     20    20    30    36   1.2    -0.02em    740
  card        22    22    24    28   1.35   -0.02em    740
  lead        18    20    28    32   1.4    -0.01em    500
  body        16    16    22    26   1.4    -0.02em    500
  meta        18    15    20    20   1.2     0         740
  small       15    14    16    18   1.4     0         500

  Clay sets in Universal Sans (licensed). Figtree (SIL OFL) stands in,
  chosen 1 Oct 2026 over Geist and Satoshi. Geist Mono stays for labels.
  Both are self-hosted from fonts/ (latin subset, variable).
*/

@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-latin-var.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans: "Figtree", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --weight-head: 400;
  --weight-title: 600;          /* display, title, headline; Clay uses 740 */
  --weight-body: 400;
  --weight-strong: 600;

  --fs-display: 50px;  --lh-display: 1.1;  --ls-display: -0.05em;
  --fs-title: 40px;    --lh-title: 1.1;    --ls-title: -0.03em;
  --fs-headline: 30px; --lh-headline: 1.2; --ls-headline: -0.03em;
  --fs-subhead: 20px;  --lh-subhead: 1.25; --ls-subhead: -0.03em;
  --fs-card: 22px;     --lh-card: 1.35;    --ls-card: -0.03em;
  --fs-lead: 18px;     --lh-lead: 1.4;     --ls-lead: -0.02em;
  --fs-body: 16px;     --lh-body: 1.35;    --ls-body: -0.01em;
  --fs-meta: 18px;     --lh-meta: 1.4;     --ls-meta: 0;
  --fs-small: 15px;    --lh-small: 1.4;    --ls-small: 0;

  /* Layout, measured from clay.global/work/discover where noted */
  --gutter: 24px;              /* Clay 393: 24 */
  --content-max: 1400px;       /* content stops growing here; margins take the rest */
  --gap-title-lead: 16px;      /* Clay 393: 16 */
  --gap-head-body: 24px;
  --space-section: 96px;
  --measure-body: 50ch;        /* wider than Clay's 516px; stays under 80 characters a line */
  --measure-lead: 28em;        /* Clay 1440: 774px at 28px */
  --measure-head: 15em;        /* Clay column is 519px; widened for longer headlines */

  /* Deck system colours */
  --graphite: #0b1426;
  --paper: #fafaf7;
  --stone: #e4dfd4;
  --signal: #ff5a1f;
  --bg: var(--paper);
  --fg: var(--graphite);
  --fg-subtle: rgb(11 20 38 / 0.6);
  --fg-weak: rgb(11 20 38 / 0.3);
}

@media (min-width: 768px) {
  :root {
    --fs-display: 80px;  --lh-display: 1.1;
    --fs-title: 52px;    --lh-title: 1.1;   --ls-title: -0.05em;
    --fs-headline: 40px; --lh-headline: 1.1;
    --fs-subhead: 20px;  --ls-subhead: -0.02em;
    --fs-card: 22px;     --ls-card: -0.02em;
    --fs-lead: 20px;     --lh-lead: 1.4;    --ls-lead: -0.01em;
    --fs-body: 16px;     --lh-body: 1.45;
    --fs-meta: 15px;
    --fs-small: 14px;
    --gutter: 40px;              /* not measured */
    --gap-title-lead: 20px;
    --gap-head-body: 40px;
    --space-section: 140px;
  }
}

@media (min-width: 1250px) {
  :root {
    --fs-display: 120px; --lh-display: 1;
    --fs-title: 74px;    --ls-title: -0.04em;
    --fs-headline: 52px;
    --fs-subhead: 30px;  --lh-subhead: 1.2;  --ls-subhead: -0.02em;
    --fs-card: 24px;     --lh-card: 1.4;     --ls-card: -0.02em;
    --fs-lead: 28px;
    --fs-body: 22px;     --lh-body: 1.35;    --ls-body: -0.02em;
    --fs-meta: 20px;     --lh-meta: 1.2;    --ls-meta: -0.01em;
    --fs-small: 16px;
    --gutter: 72px;              /* Clay 1440: 72 */
    --gap-title-lead: 28px;      /* Clay 1440: 28 */
    --gap-head-body: 85px;       /* Clay 1440: 85 */
    --space-section: 200px;
  }
}

@media (min-width: 1900px) {
  :root {
    --fs-display: 140px;
    --fs-title: 86px;
    --fs-headline: 64px;
    --fs-subhead: 36px;
    --fs-card: 28px;
    --fs-lead: 32px;
    --fs-body: 26px;     --lh-body: 1.45;
    --fs-small: 18px;
    --gutter: 96px;              /* not measured */
    --gap-title-lead: 32px;
    --gap-head-body: 100px;
    --space-section: 240px;
  }
}

/* Roles */
.t-display, .t-title, .t-headline, .t-subhead, .t-card {
  font-family: var(--font-sans);
  font-weight: var(--weight-head);
  margin: 0;
  text-wrap: balance;
}
.t-display, .t-title, .t-headline { font-weight: var(--weight-title); }
.t-display  { font-size: var(--fs-display);  line-height: var(--lh-display);  letter-spacing: var(--ls-display); }
.t-title    { font-size: var(--fs-title);    line-height: var(--lh-title);    letter-spacing: var(--ls-title); }
.t-headline { font-size: var(--fs-headline); line-height: var(--lh-headline); letter-spacing: var(--ls-headline); }
.t-subhead  { font-size: var(--fs-subhead);  line-height: var(--lh-subhead);  letter-spacing: var(--ls-subhead); }
.t-card     { font-size: var(--fs-card);     line-height: var(--lh-card);     letter-spacing: var(--ls-card); }

.t-lead, .t-body, .t-small {
  font-family: var(--font-sans);
  font-weight: var(--weight-body);
  margin: 0;
  text-wrap: pretty;
}
.t-lead  { font-size: var(--fs-lead);  line-height: var(--lh-lead);  letter-spacing: var(--ls-lead); }
.t-body  { font-size: var(--fs-body);  line-height: var(--lh-body);  letter-spacing: var(--ls-body); }
.t-small { font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: var(--ls-small); }

/* Clay sets tags in bold sans; the deck uses mono eyebrows */
.t-meta {
  font-family: var(--font-mono);
  font-weight: var(--weight-body);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  letter-spacing: var(--ls-meta);
  margin: 0;
}