/* Arabic pages (html[lang=ar] dir=rtl). Loaded after the page styles by scripts/i18n-222.mjs. */
html[lang=ar]{--f-display:'Noto Kufi Arabic','Unbounded',system-ui,sans-serif;--f-body:'IBM Plex Sans Arabic','Inter',system-ui,sans-serif;--f-mono:'IBM Plex Sans Arabic','JetBrains Mono',ui-monospace,monospace;--f-serif:'IBM Plex Sans Arabic','Playfair Display',serif}
/* letter-spacing breaks the joining of Arabic letters; Arabic has no italics or capitals */
html[lang=ar] *,html[lang=ar] *::before,html[lang=ar] *::after{letter-spacing:0!important;font-style:normal!important;text-transform:none!important}
/* schemes are drawn left to right: keep the SVG coordinate system (text-anchor) from flipping */
html[lang=ar] svg{direction:ltr}
/* the staircase of the 'why' chapter is a time chart: geometry stays as designed (time runs left to right, the steps are placed with physical left/right),
   only the texts inside the labels run right to left */
html[lang=ar] .stairs{direction:ltr}
html[lang=ar] .st__lab,html[lang=ar] .st53,html[lang=ar] .st__53{direction:rtl}
@media (min-width:601px) and (max-width:1000px){
  /* the arrow points to the black step on the right: in a right-to-left label it stands before the word */
  html[lang=ar] .st--ai .st__lab b::after{content:none}
  html[lang=ar] .st--ai .st__lab b::before{content:"\2192\00a0"}
}
/* Arabic letters are taller than the Latin capitals the headlines were set for: give the lines more room so a black marker never covers the line above */
html[lang=ar] :is(h1,h2,h3,.h2,.h3,.sh__h,.cat__h,.dd__h,.found__h,.ptn__h,.now__accent){line-height:1.36}
html[lang=ar] .sh__h{line-height:1.5}
/* hero: the mark stands on the right in the Russian layout, the words keep the left side.
   In Arabic the words are right-aligned, so the mark stands on the left side of the screen. The mark itself is never mirrored:
   the same balls in the same places as in every language (the left bead is the biggest), the same falling drop, the same stamp.
   Here the big ball, not the left bead, stands next to the words, so no line may run on past --cwB */
html[lang=ar] .p1-drop{right:auto;left:calc(7% + var(--S) * .649)}
html[lang=ar] .p1--hl-out .p1-line:last-child,html[lang=ar] .p1--lede-out .p1-lede{max-width:var(--cwB)}
/* a low narrow window: Arabic lines are taller, the headline needs more room under the small type */
@media (max-width:1100px) and (max-height:620px) and (orientation:landscape){html[lang=ar] .p1-spacer{min-height:26px}}
/* phone, upright: the small type is a column on the right, the mark stands on the left and its small right bead is beside that column.
   The column is narrowed to keep clear of the bead. Up to 389 px it is at most 132 px wide and the small type takes five lines (--mb);
   no ball stands under the small type here, so the big ball keeps the height it has in Russian */
@media (max-width:560px) and (orientation:portrait){html[lang=ar] .p1-meta{max-width:min(172px,calc(93vw - var(--S) * 1.624 - var(--pad) - 12px))}}
@media (max-width:389px) and (orientation:portrait){
  html[lang=ar] .p1-meta{max-width:min(132px,calc(93vw - var(--S) * 1.624 - var(--pad) - 12px))}
  html[lang=ar] .p1{--mb:177px;--T:max(calc(108px + var(--S) * .5212),calc(170px + var(--S) * .005))}
}
@media (max-width:340px){html[lang=ar] .p1-drop{left:calc(4% + var(--S) * .649)}}
@media (max-width:340px) and (orientation:portrait){html[lang=ar] .p1-meta{max-width:min(132px,calc(96vw - var(--S) * 1.624 - var(--pad) - 12px))}}
/* the still of a door takes the width of the number's column too (up to 700 px). In a right-to-left page that column is on the right:
   a pull to the left would stick out of the page and let it scroll sideways */
@media (max-width:700px){html[lang=ar] .door .dd__still{margin-left:0;margin-right:-52px}}
html[lang=ar] .btn:hover .arr{transform:translateX(-5px)}
/* things that grow or sit on the left in the Russian layout grow from the right in Arabic */
html[lang=ar] .hdr__nav a::after{transform-origin:100% 50%}
html[lang=ar] .dd__bar i,html[lang=ar] .found__bar i{transform-origin:100% 50%}
/* the partner's wordmark is drawn with its own letter-spacing: the rule that closes Arabic letters up must not close it */
html[lang=ar] :is(.ptn__logo,.pband__logo,.app__ptn,.ftr__ptn) :is(text,tspan){letter-spacing:4px!important}