/* ============================================================
   typography.css — RTL type scale for the reveal content + the
   demo-page headings. Font family comes from --sr-font.
   ============================================================ */

.sr-stage {
  font-family: var(--sr-font);
  line-height: 1.6;
  text-align: right;
}

/* Kicker / eyebrow above the title. */
.sr-kicker {
  font-size: clamp(11px, 1.4vw, 13px);
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--sr-gold);
  font-weight: 700;
  margin-bottom: 0.9rem;
}

/* Outro title. */
.sr-title {
  font-family: var(--sr-font);
  font-weight: 300;
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.18;
  color: var(--sr-cream);
  margin-bottom: 1rem;
}
.sr-title em {
  font-style: normal;
  font-weight: 800;
  color: var(--sr-gold);
}

/* Outro description. */
.sr-desc {
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  line-height: 2;
  color: #cfc8bd;
  max-width: 46ch;
  margin-inline: auto 0;
  margin-bottom: 2rem;
}

/* Before/After badges. */
.sr-badge {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 2px;
}

/* ── Demo page only ── */
.sr-demo-kicker {
  font-family: var(--sr-font, sans-serif);
  color: #d4af37;
  letter-spacing: 5px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
}
.sr-demo-h1 {
  font-family: "Tajawal", sans-serif;
  color: #f5f0e8;
  font-weight: 300;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  margin: 0.6rem 0 1.2rem;
}
.sr-demo-after h2 {
  font-family: "Tajawal", sans-serif;
  font-weight: 300;
  color: #f5f0e8;
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  margin-bottom: 0.75rem;
}
.sr-demo-after p {
  color: #9a948b;
  font-family: "Tajawal", sans-serif;
  max-width: 52ch;
}