/* ar.css — Arabic typography layer for magnets.tg. Loaded only on /ar/ pages, after styles.css, legal.css and rtl.css. Two things the base stylesheet cannot express, because it was written for a Latin-only design: 1. No Arabic face in the stack. Geist has no Arabic glyphs, so every Arabic run fell through to whatever the OS picked (DejaVu Sans on the render box), which mispositions combining marks — tashkeel detaches from its letter. IBM Plex Sans Arabic is already linked in ; it just was never referenced. Geist stays first so Latin brand words keep their face. 2. Negative letter-spacing. Tracking pulls Arabic letterforms apart at the joins, which is why headings looked broken rather than merely tight. */ /* The theme redefines --sans/--grotesk on via [data-font=geist], so the override has to sit on the same element or inheritance hands the body value back to every descendant. */ html[lang="ar"] body { --sans: "Geist", "IBM Plex Sans Arabic", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; --grotesk: "Geist", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, "IBM Plex Sans Arabic", monospace; } /* !important on purpose: styles.css is a mirror of the product site and carries per-component tracking rules of arbitrary specificity (.wam-mast__title with its astro cid attribute, for one). Any tracking at all is wrong for Arabic, so this reset must not lose a specificity race with a rule added upstream. */ html[lang="ar"] body, html[lang="ar"] body * { letter-spacing: normal !important; } /* Latin runs inside Arabic text are isolated with ; keep them neutral so the surrounding paragraph decides nothing about their internal direction. */ html[lang="ar"] bdi { unicode-bidi: isolate; }