/* Self-hosted fonts (SIL OFL 1.1, licences in assets/fonts/). Latin subset. */
@font-face {
  font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/cormorant-garamond-500-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
}

/* Azimuth X — design tokens (Style Guide v1.0, contrast-adjusted per Codex review) */
:root {
  /* Palette */
  --c-milk: #F7F2E9;          /* main background */
  --c-stone: #EAE2D6;         /* sections, cards */
  --c-gold: #B99A60;          /* logo, decorative lines only — never small text */
  --c-gold-dark: #7B5F2E;     /* links, functional gold (was #806330; 4.65:1 on stone, 5.35:1 on milk) */
  --c-graphite: #342B24;      /* headings, body, primary buttons */
  --c-graphite-hover: #4A3F36;
  --c-graphite-active: #211B16;
  --c-muted: #6B6257;         /* secondary text, field borders (was #71675C; 4.66:1 on stone) */
  --c-border: #D8CDBD;        /* decorative dividers only */
  --c-error: #9A2F1F;

  /* Type — four roles: display (H1), heading (H2), title (H3, Manrope), text */
  --f-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-text: "Manrope", "Helvetica Neue", Arial, sans-serif;

  --fs-hero: clamp(2.25rem, 1.6rem + 2.4vw, 3.75rem);  /* 36 → 60: page H1 */
  --fs-h1: var(--fs-hero);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);     /* 28 → 40 */
  --fs-h3: clamp(1.25rem, 1.18rem + 0.25vw, 1.375rem); /* 20 → 22, Manrope 600 */
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);  /* 17 → 20 */
  --fs-body: clamp(1rem, 0.93rem + 0.25vw, 1.125rem);  /* 16 → 18 */
  --fs-ui: 0.9375rem;                                  /* 15 */
  --fs-small: 0.9375rem;                               /* 15 */
  --fs-cap: 0.8125rem;                                 /* 13 */

  --lh-body: 1.6;
  --lh-display: 1.05;

  /* Layout */
  --container: 1240px;
  --gutter: 16px;
  --section-y: 24px;   /* each side of a section: 48px between topics on phones */
  --join-y: 24px;      /* inside a topic */
  --grid-gap: 24px;
  --radius: 3px;
  --header-h: 68px;

  --ease: cubic-bezier(.2, .6, .2, 1);
}

@media (min-width: 640px) { :root { --gutter: 32px; } }
@media (min-width: 960px) { :root { --section-y: 32px; --join-y: 28px; --grid-gap: 28px; --header-h: 80px; } }
@media (min-width: 1200px) { :root { --gutter: 48px; } }