/* TYPOGRAPHY
   One typeface: Inter, optical-size axis. Fraunces italic only for the French footer.
   Display = opsz 32, weight 300; Body = opsz 14, weight 400; Eyebrow = 500/600, tracked.
   Italic emphasis runs one weight heavier to compensate for italic lightness. */
:root {
  --font-sans: "Inter", system-ui, sans-serif;
  --font-ornament: "Fraunces", Georgia, serif;

  /* Optical-size settings (apply via font-variation-settings on the family) */
  --opsz-display: "opsz" 32; /* @kind font */
  --opsz-body: "opsz" 14; /* @kind font */

  /* Weights */
  --w-light: 300; /* @kind font */
  --w-regular: 400; /* @kind font */
  --w-medium: 500; /* @kind font */
  --w-semibold: 600; /* @kind font */

  /* ── Type scale (slide-display + reading sizes) ──────── */
  --size-display-xl: 3.25rem;   /* 52px — hero statements */
  --size-display-lg: 2.5rem;    /* 40px — title / section titles */
  --size-display-md: 1.875rem;  /* 30px — slide content header */
  --size-heading: 1.375rem;     /* 22px — section heads in prose */
  --size-subhead: 1.125rem;     /* 18px */
  --size-body-lg: 1.0625rem;    /* 17px — lead paragraph */
  --size-body: 0.9375rem;       /* 15px — base reading */
  --size-small: 0.8125rem;      /* 13px — captions */
  --size-eyebrow: 0.6875rem;    /* 11px — uppercase metadata */

  /* Line heights — generous, reading-room calm */
  --lh-tight: 1.12; /* @kind font */
  --lh-display: 1.18; /* @kind font */
  --lh-body: 1.55; /* @kind font */
  --lh-relaxed: 1.7; /* @kind font */

  /* Tracking */
  --track-tight: -0.012em;      /* @kind font */ /* large display */
  --track-normal: 0; /* @kind font */
  --track-eyebrow: 0.16em;      /* @kind font */ /* uppercase labels */
  --track-eyebrow-wide: 0.2em;  /* @kind font */ /* section labels */
  --track-star: 0.8em;          /* @kind font */ /* ⋆ ⋆ ⋆ section break */

  /* ── Semantic roles ──────────────────────────────────── */
  --role-display-weight: var(--w-light); /* @kind font */
  --role-heading-weight: var(--w-medium); /* @kind font */
  --role-body-weight: var(--w-regular); /* @kind font */
  --role-eyebrow-weight: var(--w-semibold); /* @kind font */
}

/* Optional helper classes — consumers may use tokens directly instead. */
.ka-display {
  font-family: var(--font-sans);
  font-variation-settings: var(--opsz-display);
  font-weight: var(--w-light);
  line-height: var(--lh-display);
  letter-spacing: var(--track-tight);
}
.ka-body {
  font-family: var(--font-sans);
  font-variation-settings: var(--opsz-body);
  font-weight: var(--w-regular);
  font-size: var(--size-body);
  line-height: var(--lh-body);
}
.ka-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--size-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}
.ka-footer-fr {
  font-family: var(--font-ornament);
  font-style: italic;
  font-weight: 400;
  font-size: 0.78rem;
}
.ka-emphasis {
  font-style: italic;
  font-weight: var(--w-medium);
  color: var(--accent);
}