/* ==========================================================================
   Typography
   ========================================================================== */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--text);
  background: var(--bg);
  font-weight: 400;
}
[lang="ar"] body, body[lang="ar"], .lang-ar {
  font-family: var(--font-ar);
  line-height: 1.85;
}

h1, h2, h3, .display, .h1, .h2, .h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.005em;
  color: var(--text);
}
.lang-ar h1, .lang-ar h2, .lang-ar h3,
.lang-ar .display, .lang-ar .h1, .lang-ar .h2, .lang-ar .h3 {
  font-family: var(--font-ar);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
}

.display { font-size: var(--fs-display); }
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4, .h4 {
  font-family: var(--font-sans); font-weight: 700;
  font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: -0.01em;
}
.lang-ar h4, .lang-ar .h4 { font-family: var(--font-ar); }

p { max-width: 68ch; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-soft); max-width: 60ch; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--emerald);
}
.lang-ar .eyebrow { font-family: var(--font-ar); letter-spacing: 0.06em; }
.eyebrow::before {
  content: ""; width: 2rem; height: 1px; background: currentColor; opacity: 0.7;
}
.eyebrow.is-bare::before { display: none; }
.on-dark .eyebrow { color: var(--metallic); }

.text-muted { color: var(--text-muted); }
.text-soft { color: var(--text-soft); }
strong, b { font-weight: 700; }
em { font-style: italic; }

.serif-em { font-family: var(--font-serif); font-style: italic; }
.lang-ar .serif-em { font-family: var(--font-ar); font-style: normal; font-weight: 700; }

a.link {
  color: var(--emerald); font-weight: 600;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--dur-fast) var(--ease);
}
a.link:hover { background-size: 100% 1px; }

.prose p + p { margin-top: 1.1em; }
.prose h3 { margin: 1.6em 0 0.5em; }
.prose ul { margin: 1em 0; }
.prose li { padding-inline-start: 1.5em; position: relative; margin-bottom: 0.5em; max-width: 66ch; }
.prose li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0.65em;
  width: 0.5em; height: 0.5em; border: 1px solid var(--emerald); transform: rotate(45deg);
}