/* Arabic / RTL
   Lifted verbatim from "14 Website prototype.dc.html".
   Prototype lines 88-99. Loaded only when is_rtl().

   The three wordmark-swap rules from lines 85-87 live in base.css instead:
   they hide the Arabic mark in English, so they have to load in both
   directions. This sheet is the Arabic half only. */

[dir="rtl"]{
  --font-display:'Cairo',sans-serif;--font-body:'Cairo',sans-serif;
  --track-display-xl:0;--track-display:0;--track-title:0;--track-eyebrow:0;--track-ui:0;
  --type-display-2xl:600 46px/1.35 'Cairo',sans-serif;--type-display-xl:600 42px/1.35 'Cairo',sans-serif;
  --type-display-lg:600 28px/1.4 'Cairo',sans-serif;--type-display-md:600 21px/1.45 'Cairo',sans-serif;
  --type-display-sm:600 18px/1.5 'Cairo',sans-serif;--type-display-body:400 20px/1.9 'Cairo',sans-serif;
  --type-title:600 16px/1.5 'Cairo',sans-serif;--type-eyebrow:700 13px/1.5 'Cairo',sans-serif;
  --type-ui:500 14px/1.4 'Cairo',sans-serif;--type-body:400 17px/1.95 'Cairo',sans-serif;
  --type-caption:400 15px/1.8 'Cairo',sans-serif;
}
/* Cairo is set at 1.95 above, against 1.7 for the English body. That fifth of
   extra leading is what made the arrival chapters need a reserve of their own on
   a phone -- the copy simply stood taller than the same words in English, so the
   mark had to shrink to let it fit, and the two languages stopped agreeing. The
   chapters now size their mark from the inline axis and no longer care
   (components.css, the max-width:560px block), but the copy still has to fit
   underneath it: at 390x745 the longest Arabic chapter clips by 26px at 1.95 and
   by nothing at 1.7. Phone only -- the desktop has the room and keeps the looser
   setting, which is the right one for Arabic where it fits. */
@media (max-width:560px){
  [dir="rtl"]{--type-body:400 17px/1.7 'Cairo',sans-serif}
}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] .h1,[dir="rtl"] .eyebrow,[dir="rtl"] .px span{text-transform:none}
[dir="rtl"] .num{font-family:var(--font-body);font-feature-settings:normal}

/* Two things do not mirror on their own, because neither has a logical form.

   The arrival mark is anchored with inset-inline-start, so the block itself
   flips to the right in Arabic — but it shrinks toward the corner named by
   transform-origin, and that has no logical keyword. Left at 0 0 the mark
   raced to the left edge while the bar's icon waited on the right: measured
   950px apart at the dock. The corner it shrinks toward has to flip with it. */
[dir="rtl"] .logo-block{transform-origin:100% 0}

/* The marquees are a run of content duplicated once, translated by exactly one
   copy's width so the seam never shows. In Arabic the duplicate sits to the
   *left* of the original, so travelling left uncovers the strip's right-hand
   end — measured as a 642px hole in the kitchen strip and 500px in the ticker.
   Travelling the other way closes the loop for the same reason it closes in
   English: the copy lands exactly where the original began. */
@keyframes tick-rtl{from{transform:translateX(0)}to{transform:translateX(100%)}}
[dir="rtl"] .ticker > span,[dir="rtl"] .namerun > span{animation-name:tick-rtl}