/* ═══════════════════════════════════════════════════════════════════════ PAVILION BY RAMS — RIGHT-TO-LEFT Loaded by build.py for ar and ku only, after every other sheet. The English output never sees this file, so a mistake in here cannot reach the language that is actually finished. MOST OF RTL IS FREE. dir="rtl" flips text direction, the default alignment, and the inline axis of every flex and grid. The nav's three columns, the button rows and the specification lists all mirror on their own. THE REST IS IN THE SHEETS THEMSELVES, not here: anything with a side to it is written as a logical property — inset-inline-start, border-inline-start, padding-inline-end — which resolves to left in English and right in Arabic. One declaration, correct in both. So if something sits on the wrong side in Arabic, the fix belongs in its own stylesheet as a logical property. Adding an override here would leave the English rule still naming a side, and the next language would find the same bug again. WHAT IS LEFT is the three things a logical property cannot express: a transform that has to change sign, a glyph that has to point the other way, and the things that must NOT mirror at all. ═══════════════════════════════════════════════════════════════════════ */ /* ── 1 · transforms, which know nothing about direction ─────────────────── */ /* The gallery toggle's indicator slides across to the second button. Under RTL the buttons lay out from the right, so the slide has to run the other way — otherwise choosing Exterior lights Interior, and the reverse. */ .vgtog[data-mode="interior"] .vgtog__i{transform:translateX(-100%)} /* The rail scrubber's tick labels centre themselves on their mark. They are placed by inset-inline-start, which in RTL pins their trailing edge, so the half-width nudge has to go the other way or every label sits offset from the tick it belongs to. */ .rs__t{transform:translateX(50%)} /* ── 2 · arrows point the way the reader is going ───────────────────────── */ /* → becomes ← by mirroring the glyph rather than swapping the character, so a translator never has to remember to type a different arrow. */ .arw{display:inline-block;transform:scaleX(-1)} .btn:hover .arw{transform:scaleX(-1) translateX(4px)} /* The villa overlay's prev/next. The flex row has already put Next on the left, which is right — forward is leftward here — but the arrows inside it still pointed the English way, so each button disagreed with its own position. Mirroring the glyphs settles it: Next points left, Previous points right. */ .vdet__nav button{transform:scaleX(-1)} /* The gallery's own prev/next, for the same reason. Their sides already came out right — they are placed with inset-inline-start / -end, so Next sits at the left where forward is — but a chevron is a picture of a direction and has to be flipped by hand. The buttons carry no other transform, and must not grow one: a hover translate here would silently drop the mirror. */ .vg__arw{transform:scaleX(-1)} /* ── 3 · things that must NOT mirror ────────────────────────────────────── */ /* THE MAP IS GEOGRAPHY. Erbil does not move. The frame stays LTR so the base image, the traced regions and their callouts keep the one coordinate space they were built in — see the alignment note at the top of map.html. Only the sidebar beside it flips. */ .loc__map iframe, .pv-map,.pv-map *{direction:ltr} /* The 360 tour is Matterport's own document inside a frame — it lays itself out and must not inherit this page's direction. (This replaced a panned panorama strip and a compass, whose pan was written as a percentage and so pointed north at the wrong hill when mirrored.) */ .v360__tour{direction:ltr} /* Numbers stay Western Arabic and stay left-to-right inside an RTL line, so a figure like "1,200 m²" cannot come apart. The gallery counter needs this and not only the isolate: "01 / 06" is two numerals either side of a neutral, and a neutral between two numerals takes the paragraph direction, so left to itself the pair reorders and the counter reads "06 / 01". */ .num,.srow dd,.rpanel__stats span,.vdet__stats span,.hour span{direction:ltr;unicode-bidi:isolate} /* …except where the value is a phrase rather than a figure. A location time is "2 دقائق" — a numeral AND a word — and forcing the whole string to LTR puts the numeral on the left, so an Arabic reader meets the word first and the row says "minutes 2". Left to the page's own direction the numeral falls on the right where it is read first, which is what the English column does when it reads "2 min". The isolate above still applies, so the value cannot interact with the place name across the row. */ .loc__row .num{direction:rtl} /* …and the same again wherever the figure carries a UNIT, which is the other half of that argument and was missed. "1003 m²" and "2,000,000 m³" are a numeral AND a word, exactly like the location's "2 دقائق". Forced to LTR the pair sits number-on-the-left, unit-on-the-right — measured: the unit painting to the RIGHT of the number in both the About column and the villa stats — so a reader coming from the right meets م² first and the row says "m² 1003". Left to the page's direction the numeral falls on the right where it is read first, and the unit follows it leftward: 1003 م². The counters must NOT come with them, which is why this names elements rather than relaxing the rule above. "01 / 06" in #rsIdx and the gallery's #vgIdx are two numerals either side of a neutral slash, and that slash takes the paragraph direction — in RTL the pair reorders and the counter reads "06 / 01". They keep the LTR above, and only figures with a unit are excepted here. `.srow dd.num` is two classes and a type, so it clears both `.num` and `.srow dd`; the two stats selectors repeat theirs and win on order. */ .srow dd.num,.rpanel__stats span,.vdet__stats span{direction:rtl} /* …and except where the "value" is not a value at all. statsHTML() renders the special-features list as into the same stats block that holds the figures, so the rule above caught it too: a flex row whose direction is its layout direction, laid out left to right, packing Arabic and Kurdish pills against the LEFT edge while the heading they belong to sat on the right. These are words, not figures. They take the page's direction, and the row then starts where the reading starts. Two classes, so it outranks the class-plus-type selector above wherever the two meet in the cascade — and it covers both homes of the list, the rail panels and the villa overlay. */ .rpanel__stats .spec__list,.vdet__stats .spec__list{direction:rtl} /* The wordmark is a mark, not a sentence. */ .brand{direction:ltr} /* The film and the generated villa art are images of a place: their light comes from a real direction, and mirroring them would move the sun. */ .pvfilm,.pvfilm *,.hero__film{direction:ltr} /* ── 4 · type ───────────────────────────────────────────────────────────── */ /* Arabic has no italic. The display role is a light italic serif in English; in Arabic it keeps its job — emphasis — by staying upright in the body face, because a sheared Arabic word is not emphasis, it is a rendering fault. The last selector carries the specificity to beat 30-intro.css. */ .lede em,.h2 em,.h1 em,h1 em,h2 em,h3 em,blockquote, .intro__l .lede em{font-style:normal;font-weight:500} /* Arabic sits taller than Latin at the same size and has no uppercase, so the brand's tracked micro-caps do nothing here but pull the letters apart. This sheet only loads for ar and ku, so none of it needs a :lang() guard. */ /* html[lang] body, not the bare class list this used to be. The bare form is (0,1,0), and the Location frame styles its own eyebrow as `.sechead .idx` — (0,2,0) — which outranks it however late this file loads. So that one label kept .34em of tracking in Arabic and Kurdish for as long as the rule has existed: measured 3.588px between letters of الموقع, which is not tracking in a cursive script, it is the joins coming apart. Every other eyebrow on the page was fine, because .eyebrow is a single class and this file simply came later. One selector that wins everywhere is the fix. The size comes up with it. 11px is a Latin size chosen to sit under heavy tracking in capitals — the tracking is what gives it presence. Arabic and Kurdish take neither: no tracking (see above) and no capitals to transform, so the same 11px arrived with nothing carrying it and read as fine print. 13px is that label at the weight the Latin one has. */ /* ── TRACKING IS ZERO IN AN RTL DOCUMENT, EVERYWHERE ───────────────────── This was a list of six selectors, and the list was the bug. It had been extended twice — once for the eyebrow, once for the About headline — and a sweep of the Kurdish page on 2026-09-08 still found tracking on Arabic text in TWENTY-ONE places. Worst was the burger menu at 4.68px a letter, which is what "the letters are split on my phone" was: پ ا ڤ ی ل ی ۆ ن instead of پاڤیلیۆن. Nothing to do with Safari or with iOS — it renders that way in every browser, and it was only ever seen on a phone because the burger menu is the only navigation below 1330px. The rest were quieter but the same fault: the About stat labels at 2.50px, the form labels at 2.31, the villa stat labels at 2.09 across 21 elements, the special-feature pills at 1.29 across 55, the footer, the delivery dates, the 360° title. So it stops being a list. Tracking is a Latin device: it separates letters that are already separate. Arabic script joins, and prising the letters apart does not emphasise a word, it breaks it into pieces that no longer read as one. There is no value of letter-spacing that is right for it other than zero, which makes a blanket rule the honest shape — and it means the next element someone adds is correct without anyone remembering this. !important because it has to beat selectors as specific as `body[data-vfont="display"] .rpanel h3` at (0,2,2), and no reasonable specificity on a universal selector gets there. The negatives were caught too: .lede and the gallery tokens carried -0.48px, which crushes the joins from the other side. ONE exception, and it is deliberate. The six typology names read the same in all three languages by decision — they are Latin words in a Latin face — so they keep the tracking they were drawn with. The intro and end panels of the same rail are NOT exempt: those carry translated copy. */ html[lang] body *{letter-spacing:0!important} html[lang] body :is(.rpanel--villa h3,.vdet__l h3){letter-spacing:-.035em!important} html[lang] body :is(.eyebrow,.btn,.nlinks a,.idx,.lang__b,.vgtog__b,.bmenu__links a){ text-transform:none} html[lang] body :is(.eyebrow,.idx){font-size:calc(13px * var(--zt))} body{letter-spacing:0;line-height:1.85} .h1,.h2,.h3,h1,h2,h3,h4{line-height:1.3;letter-spacing:0} /* …and the rail's own headings, which the line above cannot reach. `h3` there is (0,0,1) and `.rpanel h3` in pavilion.css is (0,1,1), so the rail kept line-height:1 and letter-spacing:-.035em in Arabic and Kurdish. Both are damage in a cursive script: measured -2.24px between letters at the drawn size, which pulls the joins into each other, and leading of exactly 1 stacks the ascenders of one line onto the descenders of the line above the moment a heading wraps — which the Kurdish intro does, at three lines where the English has two. Not `.rpanel h3` wholesale, deliberately. That would also catch the six typology names, and those read the same in all three languages by decision — they are Latin, set in a Latin face, and they keep the Latin tracking they were drawn with. Only the two panels carrying translated copy are named here. 1.5 rather than the 1.3 the heading rule above uses, and it is the one number in this block that is taste rather than repair: 1.3 cleared the collision, 1.5 gives the wrapped Kurdish room to breathe. It costs nothing — the intro panel measured 353px of content in a 982px panel, so there are some six hundred pixels going spare either way. */ html[lang] body :is(.rpanel--intro h3,.rpanel--end h3){line-height:1.5;letter-spacing:0} /* ══ THE SUPPLIED FACES ═══════════════════════════════════════════════════ UniQAIDAR for headings, Rabar for text — but Rabar for ARABIC ONLY, and that is not a preference. Measured against the twelve letters that define Kurdish Sorani, Rabar 21 carries none of them and Rabar 22 six. پ چ ڕ ژ ڤ ک گ ڵ ۆ ی ێ ە are ordinary letters, not edge cases, so setting Kurdish in either would break single WORDS across two faces — Rabar for the letters it has, Noto for the rest — which reads far worse than one honest face throughout. 00-shared.css already warns that "a font without them renders Kurdish as boxes"; this is that warning arriving. So Kurdish keeps Noto Sans Arabic for text and gains UniQAIDAR, which does carry all twelve, for its headings. If a Kurdish cut of Rabar turns up, the [lang="ku"] block below is a two-line change. These are stacks, not single names: the faces are missing ° · — → ©, and a stack lets those fall through per character to a face that has them, which is exactly how the Latin/Arabic pairing above already works. */ html[lang="ar"],html[lang="ku"]{ --f-ar-head:'UniQAIDAR Hewal','Noto Kufi Arabic',system-ui,sans-serif; } /* ── RABAR IS OUT, AND IT HAS TO BE: IT CANNOT RENDER ARABIC ────────────── Rabar 21 and Rabar 22 have been wired here as the Arabic body and paragraph faces TWICE now, on 2026-09-06 and again on 2026-09-08, and pulled back out both times. They draw the WRONG LETTERS. Side by side with Noto, the same sentence comes out as: Rabar 22 حيپ تم تحويل أكپر … من الأرچ إلى منڪقه سكنيه وتجاريه استپنائيه Noto حيث تم تحويل أكثر … من الأرض إلى منطقة سكنية وتجارية استثنائية Every letter that breaks is one Arabic uses and Kurdish does not: ث ض ط ة come out as پ چ ک ه. The cause is in the files, and fontTools shows it: both fonts DO map U+062B, U+0636, U+0637 and U+0629 — so the browser has no reason to fall through to Noto — but the outlines sitting at those code points are Kurdish letters. Proved by comparing contours directly: in Rabar 22 the glyph at ث is identical to the one at پ, ض to چ, ة to ه. They are legacy Kurdish fonts whose glyphs were renamed to uniXXXX without being redrawn or remapped. Coverage, measured on assets/fonts/Rabar_2{1,2}.ttf (family names Rabar_065 and Rabar_066) on 2026-09-08: Rabar 21 299 code points. 0 of the 12 letters that define Kurdish Sorani — no پ چ ڕ ژ ڤ ک گ ڵ ۆ ی ێ ە at all. Rabar 22 301 code points. 6 of those 12; missing ڕ ڵ ۆ ی ێ ە, and ی and ە are in almost every Kurdish word. So the supplied files cannot set either language, and both fall to Noto Sans Arabic. The TTFs are LEFT IN PLACE in assets/fonts, unreferenced — nothing downloads them — so corrected files can be dropped in and the two names put back in these stacks. Do not wire them in again without opening an Arabic paragraph and reading it first. UniQAIDAR is unaffected: 330 code points, all 12 Kurdish letters and all 4 Arabic ones. It renders ث ض ط ة correctly and keeps the headings in both languages. */ html[lang="ar"]{ --f-ar-body:'IBM Plex Sans Arabic','Noto Sans Arabic',system-ui,sans-serif; --f-ar-para:'IBM Plex Sans Arabic','Noto Sans Arabic',system-ui,sans-serif; /* The Arabic TAIL of the two Latin stacks. This is the part that matters: dozens of rules in pavilion.css name var(--f-firma) directly — .rpanel h3, .faq__q, the footer lists, the figures — and every one of them resolves through here rather than through `body`. Changing the tail reaches all of them at once, instead of a specificity war against a selector list that will keep growing. The Latin faces stay FIRST: the villa names and the numerals are English on the Arabic page too, and fallback is per character. */ --f-firma:'BR Firma','Kumbh Sans','IBM Plex Sans Arabic','Noto Sans Arabic',system-ui,sans-serif; --f-pangaia:'PP Pangaia','Hedvig Letters Serif','IBM Plex Sans Arabic','Noto Sans Arabic',Georgia,serif; } html[lang="ku"]{ /* Noto throughout, as it always was here — see the note above for why Rabar sets neither language. Redundant now that Arabic says the same, and kept anyway: it states the intent for this language on its own. Rabar was tried here on its own, Kurdish-only, on 2026-09-08 — the idea being that the letters it draws wrongly are Arabic ones Kurdish never uses. It failed for a different reason: Rabar 21 has NONE of the twelve letters that define Kurdish Sorani, so every word split across two fonts mid-word, and a browser shapes each font's run separately. The join at every seam came out as an isolated form instead of a medial one. See RABAR-FONT-REPORT.md in the project root. */ --f-ar-body:'IBM Plex Sans Arabic','Noto Sans Arabic',system-ui,sans-serif; --f-ar-para:'IBM Plex Sans Arabic','Noto Sans Arabic',system-ui,sans-serif; --f-firma:'BR Firma','Kumbh Sans','IBM Plex Sans Arabic','Noto Sans Arabic',system-ui,sans-serif; --f-pangaia:'PP Pangaia','Hedvig Letters Serif','IBM Plex Sans Arabic','Noto Sans Arabic',Georgia,serif; } /* Headings need naming explicitly. .h2 and .h3 set no font of their own — they inherit body's --f-display — so without this they would take the body face and UniQAIDAR would never appear anywhere. `html[lang] body :is(…)` rather than a bare element list: pavilion.css has rules as specific as `body[data-vfont="display"] .rpanel h3`, and a plain `h3` loses to those. This matches their weight and, loading last, wins. */ body{font-family:var(--f-ar-body)} html[lang] body :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3){font-family:var(--f-ar-head)} /* running copy: the standfirst, body paragraphs and the villa/amenity prose */ html[lang] body :is(.lede,.body,p){font-family:var(--f-ar-para)} /* ── the About headline keeps its gold, and needs three things undone ────── .h2.h2--miracles carries the shine: a gold ramp and a white glint slid across glyph-clipped text. All of that is script-agnostic and stays. What does not survive translation is the three declarations it sets alongside, which reach here because TWO classes outrank the rules above: · font-family:var(--f-sub) is a Latin face. At (0,2,0) it beat the heading rule on line 153, which is (0,1,2), so the Arabic would have been drawn glyph by glyph out of whatever the stack fell back to. · letter-spacing:.12em is not tracking in an Arabic face, it is damage: the script is cursive and spacing the letters breaks the joins. Line 100 zeroes it for headings, and lost to the same specificity. · text-transform:uppercase means nothing here. Nothing about the animation, the clip, the stroke or the drop shadows is touched, so the glow is the same object it is in English. */ html[lang] body .h2.h2--miracles{ font-family:var(--f-ar-head); letter-spacing:0; text-transform:none; /* …and a FIFTH: 1.2x the Latin size, because the same number does not buy the same headline twice. The English line is uppercase Termina at 700 with .12em of tracking, and it fills the column. UniQAIDAR is a SINGLE WEIGHT face — usWeightClass 400, no variable axis — so font-weight:700 here is whatever Chrome synthesises, and Arabic has no capitals to widen the line. Measured on the rendered glyphs at the same 33.7px, the Arabic headline carried 67% of the English's ink (2494 against 3709) across 48% of its width. It read as a caption under a display heading. 1.2x brings the ink to 94% and leaves it looking like the same headline. It is not larger because KURDISH sets the ceiling: that line is longer and white-space:nowrap, and it needs 435px of a 474px column at 1.2x. 1.3x needs 472px — two pixels of margin, which is not a margin. Measured at 1280, 1440 and 1920. */ font-size:clamp(1.62rem,3.3vw,calc(3.24rem * var(--z))); /* …and a SIXTH: room under the baseline, or the descenders are cut off. This is background-clip:text, and the gradient only exists INSIDE the element's box. Anything a glyph draws outside that box has no paint to show and simply is not there — it does not overflow, it disappears. line-height:1.1 is tighter than Arabic ink, so ج ز ێ hung below the box and lost their tails. Measured by rendering the same line twice, once clipped and once as flat white, and comparing the ink: Arabic painted 100px of a true 109, Kurdish 100px of a true 122. Kurdish loses more because its descenders go deeper. .25em of padding is the first value that covers both — 123 painted against 122 — and it is padding rather than line-height on purpose: leading would push the whole line DOWN by half of what it adds, which is the opposite of what was wanted. The text does not move; the paintable box grows under it. */ padding-bottom:.25em; /* …and a FOURTH: the gold stroke has to go, or the letters read as outlined rather than filled. -webkit-text-stroke paints a FLAT --pv-gold rim on top of the clipped gradient. In Termina at 700 the Latin strokes are fat, so .6px is a small share of each one and the rim only crisps the edge. Arabic letterforms carry far more edge per unit of area, so the same .6px covers much of the ink: the flat rim becomes the colour you see and the ramp survives only in a thin core, which is exactly the hollow look. Measured on the rendered glyphs, sampling the ink across the animation: the spread between the darkest and brightest tenth of the ink went from 63 with the stroke to 77 without it, against about 100 for the English line. The mean drops (144 to 131) and that is the point — the flat rim was propping it up. The gradient, the clip, the glint and the shadows are untouched, so it is the same gold, now on the whole letter. */ -webkit-text-stroke:0; /* …and a SEVENTH, the only one that is about the animation: the shine has a direction, and here it ran the wrong way. The glint sweeps the glyphs from the start of the line to its end — 8% to 92% of the oversized layer, in mirGold — and the ramp scrolls with it. On a line read from the right that is back to front: the light arrived at the end of the sentence and travelled towards its beginning. Two declarations, because the sweep is two separate things. The angle reflects the bands (360 - 100), so the glint leans the way it would in a mirror. It does NOT change which way anything moves: the glint sits at a fixed place inside the layer, so sliding the layer rightward slides the glint rightward whatever the gradient does inside it. What reverses the travel is playing the same keyframes backwards, which also gives the mirrored rhythm for free — the long hold that sat at 8% now sits at 92%, and the sweep runs 92% to 8%. One shared keyframe track, still. */ --mir-a:260deg; animation-direction:reverse} /* ── the delivery title, same three undone ──────────────────────────────── It takes the SUBHEADING role in English — uppercase, tracked, --f-sub — and all three of those are wrong here for the reasons the block above sets out at length: --f-sub is a Latin face, tracking is damage to a cursive script rather than tracking, and there are no capitals to transform. Two classes again, so the undo has to be explicit again. Nothing else about it changes: the size and the line-height are script-agnostic and stay. */ html[lang] body .h2.h2--sub{ font-family:var(--f-ar-head); letter-spacing:0; text-transform:none} /* The nav, buttons and labels keep --f-sub (Termina/Noto Kufi). They are set at 10-11px with .2em tracking, which is a job for the geometric face the kit already pairs with Metropolis, not for a text face. */