/* =========================================================
   MITAL JEWELLER — 02. TYPOGRAPHY
   Display: Cormorant Garamond (editorial serif, headlines)
   Mark:    Cinzel (wordmark + numerals only)
   Body:    Manrope (clean grotesque, UI + copy)
   ========================================================= */

:root {
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-mark: "Cinzel", serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-h1: clamp(2.8rem, 5.4vw, 5.4rem);
  --fs-h2: clamp(2.1rem, 3.6vw, 3.4rem);
  --fs-h3: clamp(1.4rem, 2vw, 1.9rem);
  --fs-h4: 1.15rem;
  --fs-lead: clamp(1.05rem, 1.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --lh-tight: 1.08;
  --lh-snug: 1.28;
  --lh-body: 1.7;
}

html {
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  color: var(--ink);
  letter-spacing: 0.002em;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: 500;
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
}

h4 {
  font-size: var(--fs-h4);
  font-weight: 600;
  font-family: var(--font-body);
}

p {
  max-width: 62ch;
  color: var(--ink-soft);
}

p.lead {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-style: italic;
  color: var(--ink);
  max-width: 46ch;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Wordmark treatment — the one place small-caps tracking earns its keep */
.wordmark {
  font-family: var(--font-mark);
  letter-spacing: 0.14em;
}

/* Section kicker — used only where it names what follows, not as decoration on every block */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--maroon);
  margin-bottom: 0.9rem;
}

.kicker::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold);
}

.section-head {
  max-width: 640px;
  margin-bottom: clamp(2rem, 4vw, 3.4rem);
}

.section-head.center {
  max-width: 1000px;
  text-align: left;
}

.section-head p {
  margin-top: 0.9rem;
}

.section-head.center p {
  margin-left: auto;
  margin-right: auto;
}

.text-gold { color: var(--gold-deep); }
.text-maroon { color: var(--maroon); }
.text-muted { color: var(--ink-faint); }

.numeral {
  font-family: var(--font-mark);
  font-weight: 500;
}

/* Fluid figure style for stats / counters */
.stat-figure {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 4.2vw, 3.6rem);
  line-height: 1;
  color: var(--maroon);
}

.stat-label {
  font-size: var(--fs-small);
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  margin-top: 0.4rem;
}

@media (max-width: 640px) {
  p.lead { max-width: 100%; }
}