@charset "utf-8";

/* Ported verbatim from sahifah-mockup css/main.css, section 2.
   Every value is a token from tokens.css — no raw colours, sizes or magic numbers. */

/* ============================================================
   2. TYPOGRAPHY
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--colour-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-fluid-h1);
}
h2 {
  font-size: var(--text-fluid-h2);
}
h3 {
  font-size: var(--text-fluid-h3);
  line-height: var(--leading-snug);
}
h4 {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}
h5 {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}
h6 {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

strong,
b {
  font-weight: var(--weight-semibold);
}

small {
  font-size: var(--text-sm);
}

/* -- Eyebrow --------------------------------------------------
   Letterspaced capitals, taken straight from the S A H I F A H
   line under the logo tiles. Used above section and page heads. */
.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--colour-text-meta);
  margin-bottom: var(--space-xs);
}

.eyebrow--accent {
  color: var(--colour-heading);
}

.eyebrow--inverse {
  color: var(--colour-text-inverse-muted);
}

/* -- Lede ---------------------------------------------------- */
.lede {
  font-size: var(--text-fluid-lede);
  line-height: var(--leading-relaxed);
  color: var(--colour-text-muted);
  max-width: var(--measure-wide);
}

/* -- Metadata ------------------------------------------------ */
.sh-meta {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--colour-text-meta);
  line-height: var(--leading-normal);
}

.sh-meta__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-xs);
}

/* Thin warm separator between metadata items. */
.sh-meta__list > li + li::before {
  content: '';
  display: inline-block;
  width: var(--rule-hairline);
  height: 0.85em;
  margin-right: var(--space-xs);
  background-color: var(--colour-rule-strong);
  vertical-align: -0.1em;
}