/* ==========================================================================
   Design tokens — the single source of truth for the whole site.
   Nothing below this file should invent a colour, size or spacing value.
   ========================================================================== */

:root {
  /* --- colour -----------------------------------------------------------
     Warm neutrals sharing one hue temperature. No pure black or white. */
  --c-cream:      #F6F1E6;   /* page ground */
  --c-paper:      #FBF8F1;   /* raised surfaces */
  --c-sand:       #EDE6D8;   /* sunken / hairline fills */
  --c-taupe:      #CFC4B2;   /* image placeholder, muted blocks */
  --c-ink:        #23231F;   /* body text, the wordmark */
  --c-olive:      #5A5F4A;   /* secondary text, small caps */
  --c-muted:      #8A8270;   /* tertiary text, captions */
  --c-line:       #C2B7A4;   /* hairlines */
  --c-rule:       #23231F;   /* the heavy masthead rule */
  --c-accent:     #A8502F;   /* terracotta — the script, one CTA */
  --c-accent-ink: #7E3A20;   /* accent, hovered */
  --c-dark:       #2E2C26;   /* dark plates */

  /* --- type -------------------------------------------------------------
     Three faces: a didone for display, a geometric sans for small caps,
     a script for the handwritten notes. Each with a metric-close fallback. */
  --f-display: 'Bodoni Moda', Didot, 'Bodoni MT', 'Times New Roman', serif;
  --f-ui:      'Jost', Futura, 'Century Gothic', system-ui, sans-serif;
  --f-script:  'La Belle Aurore', 'Snell Roundhand', cursive;

  /* Fluid where it must be (the wordmark), fixed where it must not be. */
  --t-wordmark: clamp(3.25rem, 11.2vw, 9.375rem);  /* 52 → 150px */
  --t-lede:     clamp(1.375rem, 2.4vw, 2.125rem);  /* 22 → 34px */
  --t-title:    clamp(1.125rem, 1.6vw, 1.5rem);
  --t-body:     1rem;         /* 16px */
  --t-small:    0.9375rem;    /* 15px */
  --t-caps:     0.75rem;      /* 12px */
  --t-micro:    0.6875rem;    /* 11px */
  --t-tiny:     0.625rem;     /* 10px */
  --t-script:   clamp(1.25rem, 2vw, 1.75rem);

  --lh-display: 0.82;
  --lh-tight:   1.26;
  --lh-body:    1.6;

  --ls-caps:    0.24em;       /* letterspacing for small-caps markers */
  --ls-caps-sm: 0.16em;
  --measure:    66ch;         /* max reading width */

  /* --- space ------------------------------------------------------------
     One 4px scale. Nothing outside it. */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
  --s9: 5.5rem;

  /* Page gutter grows with the viewport. */
  --gutter: clamp(1.25rem, 3.9vw, 3.5rem);
  --shell:  1440px;

  /* --- motion ----------------------------------------------------------- */
  --t-fast: 140ms;
  --t-med:  220ms;
  --ease:   cubic-bezier(0.2, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-med: 0ms; }
}