/* =========================================================================
   RTL-only overrides.
   main.css uses logical properties, so layout mirrors automatically.
   This file handles the few things logical properties can't:
   directional glyphs, font swap, and animation direction.
   ========================================================================= */

[dir="rtl"] {
  --font-display: "Tajawal", "Space Grotesk", system-ui, sans-serif;
  --font-body: "Tajawal", "Inter", 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"] .eyebrow { letter-spacing: 0; }
[dir="rtl"] .quote { letter-spacing: 0; line-height: 1.5; }
[dir="rtl"] body { line-height: 1.8; }

/* 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. */