/* ============================================================ Arabic layer — loaded only by the pages under /ar/. Ideas 1-10: the practice works in Madinah, so Arabic is not a translation courtesy, it is the local language of the market. Two jobs, in this order: 1. Typefaces. Bodoni Moda and Inter carry no Arabic glyphs at all, so without this the whole page falls back to whatever the device happens to have and the careful type hierarchy collapses into one weight. 2. Direction. site.css is written LTR with physical properties (border-left, margin-left, text-align:right). dir="rtl" on flips text and normal flow, but not those — a rule that says border-left keeps drawing on the left, which in RTL is the wrong edge, i.e. the middle of the reading line. Only mirrored: what carries meaning from its side. Logical properties would be cleaner than this file, but rewriting all of site.css to them would touch every page in three languages at once; this layer is additive and cannot break English or Russian. ============================================================ */ /* Amiri is a naskh serif with real optical weight — the nearest Arabic equivalent to what Bodoni does for the display line. IBM Plex Sans Arabic covers body text and the small caps-style labels, where Amiri would be too calligraphic to read at 10px. Both are requested by a in the page head, not by @import here: an @import cannot start downloading until this file has itself arrived, which serialises two round trips before any Arabic glyph is available. */ :root{ --fs:"IBM Plex Sans Arabic",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --fd:"Amiri","Bodoni Moda",Georgia,serif; /* --fm carries the small labels, and here those labels are Arabic words. JetBrains Mono has no Arabic glyphs, so leaving it first produced a label drawn from two fonts at once: the letters came from the Arabic fallback, but the SPACE still came from the mono face — and in a monospace font every glyph including the space is 0.6em, against 0.236em in the Arabic face. Measured on the live page: a 5.7px space inside a 9.5px label, two and a half times too wide, which read as "مجالات العمل" — two labels, not one. So the Arabic face goes first and owns the whole run, spaces included. Tabular figures are preserved by the font-variant-numeric declarations already in site.css; IBM Plex Sans Arabic carries tabular digits, so the numbers still line up in the facts columns. */ --fm:"IBM Plex Sans Arabic","JetBrains Mono",Consolas,monospace; } /* Amiri sits lower and smaller than Bodoni at the same size, and its letterforms need air above and below to stay legible. */ h1,h2,h3,.lede{line-height:1.5} .h-xl,.hero h1{line-height:1.28} /* Arabic letters join. Tracking pulls those joins apart, so the label style that carries the whole design in English — uppercase, .2em letter-spacing — actively damages Arabic: "مجالات العمل" reads as two words with a hole in the middle. And Arabic has no case, so text-transform is simply inert. Universal with !important rather than a list of classes because the rule follows from the script, not from any one component, and a class added later must not silently reintroduce the fault. site.css sets these per class (specificity 0,1,0), which a bare `*` cannot outrank on its own. */ *{letter-spacing:0 !important;text-transform:none !important} /* Deliberately no `[lang="en"]` exception. The only element carrying that attribute is the "English" link in the footer switcher, so an exception would uppercase and track that one word while Русский and العربية beside it stayed plain — the switcher would read as three different styles. The ARTIFEX wordmark keeps its own tracking from the logo image. */ /* --- mirrored edges ------------------------------------------------ */ .skip{left:auto;right:8px} .sec-link,.nav-links,.burger,.ax-live-h .upd,.foot .r{margin-left:0;margin-right:auto} .hero-facts{border-left:0;border-right:1px solid rgba(255,255,255,.2); padding-left:0;padding-right:24px} .hero-portrait .cap{right:auto;left:var(--pad)} .pillar + .pillar{border-left:0;border-right:1px solid var(--line-d)} .pillar:not(:first-child){padding-left:0;padding-right:clamp(20px,2.2vw,32px)} .artifex::before{right:auto;left:-160px} .ax-stats{border-left:0;border-right:1px solid var(--line-d2); padding-left:0;padding-right:30px} .ax-item{border-right:0;border-left:1px solid var(--line-d)} .ax-item:last-child{border-left:0} .jrnl article{border-left:0;border-right:1px solid var(--gold); padding-left:0;padding-right:22px} .cap-side{border-left:0;border-right:1px solid var(--line-d); padding-left:0;padding-right:26px} .cap-next .next{text-align:left} .copy-link{right:auto;left:14px} .totop{right:auto;left:clamp(14px,3vw,28px)} .asm{margin-left:0;margin-right:6px} /* the deliverables list: its gold rule is drawn with left/padding-left, so in RTL it ended up on the far side of the text from the line it marks */ .deliv li{padding-left:0;padding-right:20px} .deliv li::before{left:auto;right:0} .quote .mark{margin-right:0;margin-left:-.06em;text-indent:.04em} /* The lightbox arrows point at pages, so they swap sides with the reading order — otherwise "next" walks backwards. */ .lb-p{left:auto;right:14px} .lb-n{right:auto;left:14px} .lb-x{right:auto;left:18px} /* The reading-progress bar fills from the start of the line, which in RTL is the right edge. */ .progress{left:auto;right:0} /* Sideways strips scroll from the right in RTL on their own once the document direction is set, but the scrollbar colour rule is direction-neutral and stays as it is. */ @media(max-width:900px){ .hero-facts{border-right:0;padding-right:0} .ax-stats{border-right:0;padding-right:0} .ax-item{border-left:0} .sec-link{margin-right:0} } @media(max-width:720px){ /* the language codes cluster with the burger on the reading-start edge */ .langs-nav{margin-left:0;margin-right:auto} .burger{margin-left:0;margin-right:6px} } /* Latin runs inside Arabic prose — ARTIFEX, m², CR numbers, artifex.sa — must not be reordered by the bidi algorithm when they sit next to punctuation. Marking them isolate keeps each one intact. */ .facts div,.stat b,.cred b,address,.foot span{unicode-bidi:isolate}