/* =========================================================================
   Arabic-tree overrides. Loaded by the /ar/ pages only (the English pages
   stopped loading it in the Wave 2 bridge).

   main.css uses logical properties, so layout mirrors automatically. This file
   handles what logical properties can't: the font stack, directional glyphs,
   and animation direction.
   ========================================================================= */

/* Tajawal first, so Arabic never waits on a Latin face it cannot render.
   Clash/Satoshi stay in the stack for Latin runs (brand names, "MVP", URLs),
   which resolve per character because the Latin faces carry no Arabic glyphs. */
[dir="rtl"], html[lang="ar"] {
  --font-display: "Tajawal", "Clash Display", system-ui, sans-serif;
  --font-body: "Tajawal", "Satoshi", system-ui, sans-serif;
}

/* Arabic reads better slightly looser and with normal tracking */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .display { letter-spacing: 0; line-height: 1.3; }
[dir="rtl"] .quote { letter-spacing: 0; line-height: 1.5; }
[dir="rtl"] body { line-height: 1.8; }

/* Eyebrows keep the Latin mono HUD voice, but letter-spacing breaks Arabic
   joining — so Arabic eyebrow text loses the tracking and takes the body face,
   while Latin-only labels (SEC 01, MVP) keep the mono treatment. */
[dir="rtl"] .eyebrow { letter-spacing: 0; }
[dir="rtl"] .eyebrow:not([lang="en"]) { font-family: var(--font-body); font-size: var(--t-xs); }

/* Marquee runs the other way so it reads naturally RTL */
[dir="rtl"] .marquee-track { animation-direction: reverse; }

/* The nav underline grows from the inline-start edge automatically via
   logical inset-inline-start, so no flip needed. The brand cube + grid
   overlay are symmetric. Number counters use latin digits intentionally. */