:root{
  --bg:#050507;
  --ink:#f4f4f6;
  --muted:#7c7c88;
  --neon:#ff2bd6;
  --neon-2:#00e5ff;
  --line:rgba(255,255,255,.09);

  --font:'Jost', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-ar:'Noto Kufi Arabic', 'Tajawal', 'Cairo', 'Amiri', 'Segoe UI', Tahoma, sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
  --mx:50vw;
  --my:50vh;

  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-right:  env(safe-area-inset-right,  0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
}

/* When the document is Arabic, use the Arabic font stack */
html[dir="rtl"] body,
html[lang="ar"] body{
  font-family:var(--font-ar);
}

/* Force RTL on Arabic text blocks — fixes letter order even with mixed content */
html[lang="ar"] .about__why-text,
html[lang="ar"] .about__lead,
html[lang="ar"] .about__body p,
html[lang="ar"] .become__intro,
html[lang="ar"] .join__intro,
html[lang="ar"] .lede,
html[lang="ar"] .hero__sub,
html[lang="ar"] .guide__list li,
html[lang="ar"] .guide__sub,
html[lang="ar"] .become__title,
html[lang="ar"] .join__title,
html[lang="ar"] .about__title,
html[lang="ar"] .events__title,
html[lang="ar"] .events__intro,
html[lang="ar"] .next-event__meta,
html[lang="ar"] .event-card__desc{
  direction:rtl;
  text-align:right;
  unicode-bidi:embed;
}

/* Arabic doesn't use uppercase tracking the way Latin does — tone it down */
html[lang="ar"] .eyebrow,
html[lang="ar"] .hero__eyebrow,
html[lang="ar"] .nav__link,
html[lang="ar"] .hero__eyebrow b,
html[lang="ar"] .hero__eyebrow span{
  letter-spacing:0;
  text-transform:none;
}