/* ════════════════════════════════════════════════
   02 — TYPOGRAPHY
   Single brand font: ABC Favorit Arabic Variable.
   Display + body share one family; italic accents come
   from font-style: italic, not a separate serif.
   ════════════════════════════════════════════════ */

/* Headings — Arabic display.
   Base weight bumped from 300 → 500 per client direction: headlines should
   read with more presence. Individual rules in 06/11-*.css that need a
   different weight override this base. */
h1, h2, h3, h4, h5, h6,
.display, .headline, .section-title, .feature-headline {
  font-family: var(--font-arabic);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

/* Hero name — display scale */
.display {
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.025em;
}

/* Section headlines — large but not display */
.headline,
.feature-headline,
.section-title {
  font-size: var(--fs-headline);
  font-weight: 500;
}

/* Body */
p { font-size: var(--fs-body); line-height: 1.85; }
.lead, .feature-body { font-size: var(--fs-body-lg); line-height: 1.75; }

/* ────────────────────────────────────────────────
   Italic accents — same brand font, slanted.
   Use for eyebrows, stat numerals, English title cards.
   ──────────────────────────────────────────────── */

.eyebrow {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive-gold);
  display: inline-block;
}

.eyebrow--cream { color: var(--cream); }
.eyebrow--dark  { color: var(--maroon); }

/* Eyebrow Arabic variant — for non-Latin contexts */
.eyebrow-ar {
  font-family: var(--font-arabic);
  font-weight: 400;
  font-size: clamp(13px, 1.1vw, 16px);
  letter-spacing: 0.12em;
  color: var(--olive-gold);
  display: inline-block;
}

/* Stat numerals — lightweight cut of brand font (upright; the file has no
   italic axis and Arabic-Indic digits don't read well skewed) */
.stat-num {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: normal;
  font-size: var(--fs-stat);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--olive-gold);
}

.stat-num--cream { color: var(--cream); }

.stat-label {
  font-family: var(--font-arabic);
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 400;
  color: var(--text-cream);
  letter-spacing: 0.04em;
  margin-top: 6px;
}

/* English italic title (header eyebrow + footer) */
.title-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.04em;
}
.title-italic strong { font-weight: 600; font-style: normal; }