/* Kafel — دليل الإيداع في كافل · النمط الطباعي العربي
 *
 * Cairo for display and headings, Tajawal for body copy, captions and
 * instructions — the pairing the printed Arabic guide has always used. Cairo's
 * geometric Arabic sits naturally beside the Kafel logotype, which is itself
 * geometric lettering; Tajawal is the quieter humanist companion that carries
 * long instructional copy.
 *
 * Two rules the Arabic edition must keep, both about shaping rather than taste:
 *
 *   1. Never set letter-spacing on anything that can hold Arabic. Blink applies
 *      tracking after shaping, which pulls joined letters visually apart. The
 *      one tracked element left in the shared stylesheet is .eyebrow, so it is
 *      untracked again here.
 *   2. Never ask Tajawal for weight 600 — it does not have one and the renderer
 *      would synthesise a fake bold. Body emphasis is 700.
 */
:root {
  --font-head: "Cairo", "Noto Sans Arabic", system-ui, sans-serif;
  --font-body: "Tajawal", "Noto Sans Arabic", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

html {
  /* Arabic wants more leading than Latin at the same size. */
  line-height: 1.8;
}

h1, h2, h3, h4 {
  line-height: 1.38;
  letter-spacing: 0;              /* never track Arabic */
}

.eyebrow, .toc__h {
  letter-spacing: 0;
  /* Arabic has no case to transform, and uppercasing only shouts the Latin
     words embedded in an Arabic label — MetaMask becoming METAMASK. */
  text-transform: none;
}
.eyebrow { font-size: .82rem; }

/* Tajawal has no 600 — anything that asked for one takes 700 instead. */
.ui, .links b, dl.kv dt, .toc a[aria-current="true"],
.masthead__pdf, .chip, .cmp thead th { font-weight: 700; }

.lede, p, li, dd { text-align: start; }

/* Latin runs inside Arabic — button labels, amounts, addresses, URLs — keep
   their own direction so the reading order stays correct on both sides. */
.ui, .mono, .ts { direction: ltr; unicode-bidi: isolate; }

/* ----------------------------------------------------- the cover artwork -- */

/* Three screens from the deposit workflow, pre-composed into one transparent
   PNG (guide-ar/tools/make_cover_art.py). It is baked rather than rotated in
   CSS because a rotated element that overflows the page box makes Chromium
   shrink the whole printed document to fit it. */
.hero__art {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 32px auto 0;
}
@media (min-width: 760px) {
  .hero__art { max-width: 660px; margin-top: 40px; }
}