/* Type scale — tracking (letter-spacing) and line-height per screen size, shared by all 3 concepts.
   At the 1728px Figma frame every value equals the design; elsewhere text opens up as it gets
   smaller (tight tracking only reads well at large sizes / high density) and display type
   scales its tracking with its own fluid size.

   Fluid values are "A px + B vw" lines through two measured points, clamped at the ends
   (computed for the font-size clamps used by the pages):

   style                font size          tracking            line-height
   C3 project title     44 → 108px         −3% → −4%           1.2 (single line)
   C1 statement         30 → 53 → 64px     −3.5% → −5%         1.15 → 1.1
   sentences (18px)     —                  −2% (Figma) …       1.2 (Figma) …
   lists / nav (18px)   —                  −5% (Figma) …       1.1 (Figma) …
   … stepping to −1%/−2.5% and 1.3/1.22 on mobile (16px), see the media queries below. */
:root {
  /* small text — Figma values, used from 1440px up */
  --text-lh: 1.2;   --text-ls: -0.02em;     /* sentences: intro, tagline, captions, labels */
  --list-lh: 1.1;   --list-ls: -0.05em;     /* stacked lists, nav, pills (Figma −0.9px @ 18px) */

  /* display — fluid; exact Figma values at 1728px */
  --title-ls: clamp(-4.32px, calc(0.743px - 0.2930vw), -1.32px);       /* −4.32px @1728, −3.01 @1280 */
  /* max(…, em) keeps the Figma ratios (−5%, 1.1) once the font grows past 53px */
  --statement-ls: max(clamp(-3.2px, calc(1.031px - 0.2130vw), -1.05px), -0.05em);   /* −2.65px @1728, −1.70 @1280 */
  --statement-lh: max(clamp(34.5px, calc(3.538px + 3.1691vw), 70.4px), 1.1em);     /* 58.3px @1728 (1.1), 44.1 @1280 */
}

/* laptops: same 18px text on a narrower grid — ease the tightest tracking a little */
@media (max-width: 1439px) {
  :root { --text-lh: 1.22; --text-ls: -0.015em; --list-lh: 1.13; --list-ls: -0.04em; }
}
@media (max-width: 1199px) {
  :root { --text-lh: 1.24; --text-ls: -0.012em; --list-lh: 1.16; --list-ls: -0.032em; }
}

/* mobile layouts (≤900px): 16px text, stacked blocks, display type set in vw */
@media (max-width: 900px) {
  :root {
    --text-lh: 1.3;  --text-ls: -0.01em;
    --list-lh: 1.22; --list-ls: -0.025em;
    --title-ls: -0.025em;
    --statement-ls: -0.03em; --statement-lh: 1.12;
  }
}
@media (max-width: 480px) {
  :root { --text-lh: 1.35; --text-ls: -0.005em; --list-lh: 1.26; --list-ls: -0.015em; }
}