/* ============================================================
   JMAA Typography System — Single Source of Truth
   ------------------------------------------------------------
   Scale extracted from the home page. All pages should link
   this stylesheet to inherit a consistent type scale. Page-
   specific heading classes should reference these tokens
   instead of inventing their own font-size values.
   ============================================================ */

:root {
  /* ---- Design tokens (self-contained fallback for pages that don't
         define their own :root vars; matches the home page values) ---- */
  --display:    'Playfair Display', Georgia, serif;
  --editorial:  'Cormorant Garamond', Georgia, serif;
  --ui:         'Montserrat', sans-serif;
  --body:       'Lora', Georgia, serif;
  --cream:      #F0EBE0;
  --gold:       #C9A84C;
  --muted:      rgba(240,235,224,0.82);

  /* ---- Type scale (fluid via clamp) ----
     PREMIUM SCALE: 5 heading roles, no in-between sizes. Discipline is
     the design. Modifier classes (.editorial, .dk, .center) express
     variation via family / color / alignment, never via new sizes. */
  --t-display:  clamp(48px, 6vw, 80px);    /* Hero H1 — one per page only */
  --t-h2:       clamp(32px, 3.5vw, 48px);  /* Section heading — ALL <h2>, one size */
  --t-h3:       clamp(20px, 1.8vw, 24px);  /* Sub-section / card title */
  --t-pull:     clamp(22px, 2.4vw, 32px);  /* Italic pull / editorial emphasis */
  --t-stat:     clamp(48px, 6vw, 72px);    /* Big numeric stat */
  --t-stat-sm:  clamp(28px, 3vw, 42px);    /* Smaller stat */

  /* ---- Legacy aliases (kept so existing class names keep resolving) ----
     New work should use the canonical tokens above. */
  --t-h1:       var(--t-display);
  --t-hero:     var(--t-display);
  --t-h1-md:    var(--t-display);
  --t-h2-sm:    var(--t-h2);
  --t-h4:       var(--t-h3);

  /* ---- Text sizes ---- */
  --t-body:     17px;                       /* Body paragraph (bumped from 16) */
  --t-body-sm:  15px;                       /* Smaller body */
  --t-meta:     13px;                       /* Meta / supporting */
  --t-label:    11px;                       /* Uppercase label */
  --t-eyebrow:  12px;                       /* Eyebrow */
  --t-tiny:     10px;                       /* Tiny label */
}

/* ============================================================
   Native element defaults
   ------------------------------------------------------------
   Plain <h1>, <h2>, <h3>, <p> inherit the canonical scale. Page
   markup should set color/margin via inline style or a modifier
   class — NEVER override font-size/font-family/font-weight
   inline (that's the inconsistency we're solving).
   ============================================================ */

h1, h2, h3 {
  margin: 0 0 20px;
  color: var(--cream, #F0EBE0);
  font-family: var(--display, 'Playfair Display', Georgia, serif);
  font-weight: 700;
  text-wrap: balance;   /* Prevents orphan words on multi-line headings */
}

p, li, figcaption {
  text-wrap: pretty;    /* Premium body wrapping — avoids river gaps */
}

h1 {
  font-size: var(--t-display);
  line-height: 1.04;
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--t-h2);
  line-height: 1.12;
  letter-spacing: -0.005em;
}

h3 {
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.28;
}

p {
  font-family: var(--body, 'Lora', Georgia, serif);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.75;
  margin: 0 0 16px;
}

/* ============================================================
   Modifier classes — express variation via family/color/align,
   never via new sizes. Stack on any heading or paragraph.
   ============================================================ */

.editorial   { font-family: var(--editorial, 'Cormorant Garamond', Georgia, serif); font-weight: 600; font-style: italic; }
.dk          { color: #2E2820; }                     /* Dark text for cream-background sections */
.dim         { color: #7A6840; }                     /* Muted gold on light bg */
.lt          { color: #4A3F30; }                     /* Soft dark body on light bg */
.center      { text-align: center; }
.strike      { text-decoration: line-through; text-decoration-color: rgba(201,168,76,0.80); color: rgba(240,235,224,0.80); }

/* ============================================================
   Utility classes (preserved for opt-in use)
   ------------------------------------------------------------
   These match the home page's existing .t-* utility classes
   so legacy markup keeps working. The classes now resolve to
   the same tokens as the native element rules above.
   ============================================================ */

.t-h1     { font-family: var(--display, 'Playfair Display', Georgia, serif); font-weight: 700; font-size: var(--t-display); line-height: 1.00; color: var(--cream, #F0EBE0); }
.t-h1-lg  { font-family: var(--display, 'Playfair Display', Georgia, serif); font-weight: 700; font-size: var(--t-h1);      line-height: 1.05; color: var(--cream, #F0EBE0); }
.t-h1-md  { font-family: var(--display, 'Playfair Display', Georgia, serif); font-weight: 700; font-size: var(--t-h1-md);   line-height: 1.08; color: var(--cream, #F0EBE0); }
.t-h2     { font-family: var(--editorial, var(--display, 'Playfair Display', Georgia, serif)); font-weight: 600; font-size: var(--t-h2);    line-height: 1.12; color: var(--cream, #F0EBE0); }
.t-h2-sm  { font-family: var(--editorial, var(--display, 'Playfair Display', Georgia, serif)); font-weight: 600; font-size: var(--t-h2-sm); line-height: 1.18; color: var(--cream, #F0EBE0); }
.t-h3     { font-family: var(--editorial, var(--display, 'Playfair Display', Georgia, serif)); font-weight: 600; font-size: var(--t-h3);    line-height: 1.25; color: var(--cream, #F0EBE0); }
.t-h4     { font-family: var(--ui, 'Montserrat', system-ui, sans-serif); font-weight: 700; font-size: var(--t-h4); line-height: 1.35; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream, #F0EBE0); }

.t-pull   { font-family: var(--editorial, var(--display, 'Playfair Display', Georgia, serif)); font-style: italic; font-weight: 400; font-size: var(--t-pull); line-height: 1.35; color: var(--cream, #F0EBE0); }

.t-body   { font-family: var(--body, 'Lora', Georgia, serif); font-weight: 400; font-size: var(--t-body);    line-height: 1.75; color: var(--muted, #ACA28E); }
.t-body-sm{ font-family: var(--body, 'Lora', Georgia, serif); font-weight: 400; font-size: var(--t-body-sm); line-height: 1.70; color: var(--muted, #ACA28E); }
.t-meta   { font-family: var(--body, 'Lora', Georgia, serif); font-weight: 400; font-size: var(--t-meta);    line-height: 1.60; color: var(--muted, #ACA28E); }
.t-lead   { font-family: var(--body, 'Lora', Georgia, serif); font-weight: 400; font-size: clamp(18px, 1.4vw, 22px); line-height: 1.65; color: var(--cream, #F0EBE0); }

.t-label  { font-family: var(--ui, 'Montserrat', system-ui, sans-serif); font-weight: 600; font-size: var(--t-label);   letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold, #C9A84C); }
.t-eyebrow{ font-family: var(--ui, 'Montserrat', system-ui, sans-serif); font-weight: 600; font-size: var(--t-eyebrow); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(240,235,224,0.75); }
.t-tiny   { font-family: var(--ui, 'Montserrat', system-ui, sans-serif); font-weight: 700; font-size: var(--t-tiny);    letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream, #F0EBE0); }

.t-stat   { font-family: var(--display, 'Playfair Display', Georgia, serif); font-weight: 800; font-size: var(--t-stat);    line-height: 1; color: var(--gold, #C9A84C); }
.t-stat-sm{ font-family: var(--display, 'Playfair Display', Georgia, serif); font-weight: 800; font-size: var(--t-stat-sm); line-height: 1; color: var(--gold, #C9A84C); }

/* Theme modifiers — when a heading sits on a cream/light background */
.t-h2.dk, .t-h2-sm.dk { color: #2E2820; }
.t-label.dim          { color: #7A6840; }
.t-body.lt            { color: #4A3F30; }