/* ============================================================
   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
        <html> 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 <link> 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",Archivo,-apple-system,"Segoe UI",sans-serif;
  --fd:"IBM Plex Sans Arabic","Noto Kufi Arabic",Archivo,sans-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",Archivo,sans-serif;
}

/* Amiri sits lower and smaller than Bodoni at the same size, and its
   letterforms need air above and below to stay legible.
   The display line-height is 1.45 rather than Bodoni's 1.28: Arabic ascenders
   and any hamza or mark reach well above the letter body, and at 1.28 the top
   of one line touched the bottom of the one above it — the headline read as
   two lines fighting for the same space. */
h1,h2,h3,.lede{line-height:1.5}
.h-xl,.hero h1{line-height:1.32}

/* Belt and braces for vocalised text. The copy is unvocalised — Arabic
   business prose is — but a mark pasted in later must not clip: leaving the
   glyph box uncompressed lets the font place its own marks. */
h1,h2,h3{text-rendering:optimizeLegibility}

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

/* the language list opens from the reading-start edge, which is the right */
.lang-list{right:auto;left:0}
.lang-code{direction:ltr}

/* --- the project stage ------------------------------------------------- */
/* The veil darkens the side the words sit on. Unflipped it darkened the left
   while the Arabic text sat on the right, so the headline was over the
   brightest part of the render and the empty half was the readable one. */
.sh-veil{background:
  linear-gradient(270deg,rgba(10,10,11,.93) 0%,rgba(10,10,11,.74) 38%,
    rgba(10,10,11,.2) 68%,rgba(10,10,11,.55) 100%),
  linear-gradient(0deg,rgba(10,10,11,.8) 0%,transparent 42%)}
/* the deck scrolls from the reading-start edge, and the active card is the
   first one a reader meets rather than the last */
.sh-deck{direction:rtl}
.sh-card button{text-align:right}
@media(max-width:900px){
  .sh-veil{background:linear-gradient(0deg,rgba(10,10,11,.94) 0%,
    rgba(10,10,11,.6) 46%,rgba(10,10,11,.35) 100%)}
}

@media(max-width:720px){
  /* the language control clusters 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}

/* A phone number is the sharpest case: "+966 56 993 3673" contains a plus and
   three digit groups, and bidi reorders the whole run inside RTL text, so the
   number on screen was not the number in the markup — it rendered with its
   groups reversed, which is a number a reader would dial wrong. isolate alone
   is not enough: the run needs its own LTR direction, not just its own
   embedding level. */
a[href^="tel:"],a[href^="mailto:"],a[href^="https://wa.me/"]:not(.chan-item),
.chan-item span > span,.pc-direct a,code,.hf-v,.facts div{
  direction:ltr;unicode-bidi:isolate}
/* The WhatsApp number is the same case wearing a different link: wa.me/…
   inside an Arabic paragraph, and the number printed in the channel list,
   both reordered their groups for an Arabic reader until they were named
   here beside tel: (found 2026-09-04). The channel row itself stays RTL —
   its label is Arabic and its icon belongs on the reading side — so only
   the inner span, the number or handle, is turned. */
/* …but those containers also hold Arabic labels, so only the value is flipped
   where the label and value share an element. */
.hf-k,.facts b{direction:rtl}

/* the country badge's gap belongs between it and the text, which in RTL means
   the other side */
.iso{margin-right:0;margin-left:8px}

/* The FAQ marker sits at the row's END, not at the start of the question:
   at the start it reads as a bullet on the sentence rather than a control on
   the row. In RTL the end is the left edge, so both the marker and the space
   reserved for it move across. */
.faq-q summary{padding:15px 0 15px 34px}
.faq-q summary::after{right:auto;left:6px}
.faq-q p{padding:0 0 18px 34px}

/* The portrait floats left in the English page so the text wraps down its
   right side; unflipped, it lands on the reading-end edge in Arabic and the
   first line of the biography starts in the middle of the column. */
.portrait{float:right;margin:0 0 18px 26px}

/* Team profile drawer follows the Arabic reading edge. */
html[dir="rtl"] .tn-panel{right:auto;left:0;border-left:0;
  border-right:1px solid rgba(197,162,104,.35);text-align:right}
html[dir="rtl"] .tn-close{right:auto;left:14px}
html[dir="rtl"] .tn-panel .tn-r,
html[dir="rtl"] .team-profile .tn-r{letter-spacing:0}
html[dir="rtl"] .tp-head{direction:rtl}
html[dir="rtl"] .tp-facts{text-align:right}


/* ============================================================
   THE NEW ENGINE, IN ARABIC
   engine.css was written for a Latin variable font and asks for widths and
   weights no Arabic face on this site can supply. Where a real axis is
   missing the browser fakes it, and a faked width does not scale an Arabic
   letter the way it scales an A — it distorts the letterform and the join to
   the letter beside it. That, more than any single rule, is why these pages
   were hard to read.
   ============================================================ */

/* No synthetic width, anywhere. Weight carries the hierarchy instead — Plex
   Sans Arabic has a real weight axis and interpolates properly. */
*{font-stretch:normal !important;font-variation-settings:normal !important}

h1{font-weight:700}
h2{font-weight:600}
h3{font-weight:600}
.eyebrow,.brand small,.card-k,.fk,.k{font-weight:500}

/* Latin words inside Arabic prose — ARTIFEX GROUP, BIM, USD, a URL — keep
   their own face. Without this they are drawn from the Arabic font's Latin
   glyphs, which are a fallback rather than a design, and the company's own
   name ends up in a different typeface to the rest of the site. */
.brand strong,.nav-cta,.fee,.num,[lang="en"]{font-family:Archivo,sans-serif}

/* The hero mirrors. engine.css pins its text block with a left-hand grid
   column; under dir=rtl the column stays where it was and the Arabic text
   floated in the middle of the page instead of hugging the right edge the way
   the English hugs the left. */
html[dir="rtl"] .hero-grid{direction:rtl}
html[dir="rtl"] .hero h1,
html[dir="rtl"] .hero .lede,
html[dir="rtl"] .eyebrow{text-align:right}
html[dir="rtl"] .facts,
html[dir="rtl"] .hero-facts{justify-content:flex-start}

/* Arabic has no capitals, so an uppercase rule is inert — but the negative
   tracking that goes with it is not, and it pulls joins apart at display
   sizes. Reset on the display line specifically, since the universal rule
   above runs before engine.css's own heading block. */
h1,h2,h3{letter-spacing:0 !important}