/* ============================================================
   RTL — everything the Arabic build needs.
   Layout mirrors itself (logical properties + grid); this file
   handles what direction alone cannot: the typeface swap, and
   the habits of Latin type that damage Arabic.
   ============================================================ */

[dir="rtl"]{
  /* Almarai for display, Plex Arabic for running text.
     Instrument Serif has no Arabic glyphs at all. */
  --display: "Almarai", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --ui: "IBM Plex Sans Arabic", "Inter Tight", "Segoe UI", Tahoma, sans-serif;

  /* Almarai sets visually larger than Instrument Serif at the same
     size, and Arabic needs more leading, so the scale steps down. */
  --fs-display: clamp(2.6rem, 6.6vw, 5.6rem);
  --fs-h2:      clamp(1.85rem, 3.9vw, 3.2rem);
}

/* — letter-spacing severs the joins in Arabic script — */

[dir="rtl"] .label,
[dir="rtl"] .piece-tag,
[dir="rtl"] .brand-word,
[dir="rtl"] .piece-name,
[dir="rtl"] h1,
[dir="rtl"] h2{
  letter-spacing: 0;
}
/* Chrome cannot lay RTL text along an SVG textPath — it collapses the
   whole string onto the path origin. Forcing ltr on this one element
   restores placement; the Arabic is a single RTL run so it still shapes
   and orders correctly, and it reads counter-clockwise, as a seal should. */
[dir="rtl"] .seal text{
  direction: ltr;
  font-size: 10px;
  letter-spacing: .04em;
}

/* — Arabic has no italic; the accent carries the emphasis alone — */

[dir="rtl"] .mark,
[dir="rtl"] h2 em{ font-style: normal; }

/* — display type: lighter weight, looser leading, room for descenders — */

[dir="rtl"] h1{
  font-weight: 300;
  line-height: 1.24;
}
[dir="rtl"] .line{ padding-bottom: .2em; }

[dir="rtl"] h2{
  font-weight: 300;
  line-height: 1.34;
  max-width: 20ch;
}
[dir="rtl"] .mark{ padding: .02em .34em .16em; }

[dir="rtl"] .piece-name{ line-height: 1.5; }
[dir="rtl"] .spec-name{ line-height: 1.45; font-size: 1.05rem; }
[dir="rtl"] .seal-core{ font-size: 1.7rem; }

/* — numerals and Latin fragments keep the Latin face — */

.en{
  font-family: var(--ui-latin);
  direction: ltr;
  unicode-bidi: isolate;
}
/* Numerals stay in the display serif in both languages — it is the
   one glyph set the two scripts share, so it ties the builds together. */
[dir="rtl"] .stat-n{ font-family: "Instrument Serif", Georgia, serif; }
[dir="rtl"] .stat-n sup{ font-family: var(--ui); }

/* — motion that has a direction — */

[dir="rtl"] .btn-solid .arrow{ transform: scaleX(-1); }
[dir="rtl"] .btn-solid:hover .arrow{ transform: scaleX(-1) translateX(4px); }

[dir="rtl"] .piece-line::after{ transform-origin: right; }

[dir="rtl"] .ticker-track{ animation-name: ticker-slide-rtl; }
@keyframes ticker-slide-rtl{
  to{ transform: translate3d(50%, 0, 0); }
}

/* — the Latin name sits under the Arabic one on the cards — */

[dir="rtl"] .piece-name .en{
  display: block;
  margin-top: 4px;
  font-size: .74rem;
  font-weight: 400;
  color: var(--on-light-mute);
}

/* — sections beyond the hero — */

[dir="rtl"] .step h3,
[dir="rtl"] .swatch-name,
[dir="rtl"] .method-value,
[dir="rtl"] .foot-word,
[dir="rtl"] .quote blockquote,
[dir="rtl"] .ph-meta p:last-child{
  letter-spacing: 0;
  font-weight: 400;
}
[dir="rtl"] .quote blockquote{ line-height: 1.5; font-weight: 300; }
[dir="rtl"] .step h3{ line-height: 1.4; }
[dir="rtl"] .ph-meta p:last-child{ line-height: 1.4; }
[dir="rtl"] .step-n{ font-family: var(--ui-latin); }
[dir="rtl"] .hour dd{ direction: ltr; text-align: end; }
[dir="rtl"] .foot-word{ font-size: clamp(2rem, 4.2vw, 3.2rem); }
[dir="rtl"] .method-value{ line-height: 1.4; }
[dir="rtl"] .cta-inner h2{ max-width: 24ch; }
[dir="rtl"] .quote{ max-width: 880px; }

/* — editorial sections — */

[dir="rtl"] .pillar h3,
[dir="rtl"] .moment-body h3,
[dir="rtl"] .qa summary,
[dir="rtl"] .prose-block h2,
[dir="rtl"] .prose-updated{
  letter-spacing: 0;
  font-weight: 400;
  line-height: 1.4;
}
[dir="rtl"] .moment-year{ font-family: "Instrument Serif", Georgia, serif; }
[dir="rtl"] .moment{ grid-template-columns: 7rem minmax(0, 1fr); }
[dir="rtl"] .qa-mark{ margin-top: 8px; }
[dir="rtl"] .prose-block p,
[dir="rtl"] .pillar p,
[dir="rtl"] .moment-body p,
[dir="rtl"] .qa-body p{ line-height: 1.9; }

/* [dir="rtl"] .moment outranks the plain .moment rule in the 640px
   query, so the Arabic timeline needs its own stack instruction. */
@media (max-width: 640px){
  [dir="rtl"] .moment{ grid-template-columns: 1fr; }
}

/* — before/after mirrors: the reveal runs from the other edge — */

[dir="rtl"] .compare-b{ clip-path: inset(0 var(--pos) 0 0); }
[dir="rtl"] .compare-handle{ left: auto; right: var(--pos); margin: 0 -1px 0 0; }
[dir="rtl"] .case-body h3,
[dir="rtl"] .a-step h3,
[dir="rtl"] .piece-title,
[dir="rtl"] .spec-notes h3{ letter-spacing: 0; font-weight: 400; line-height: 1.35; }
[dir="rtl"] .piece-price{ font-family: "Instrument Serif", Georgia, serif; }
[dir="rtl"] .case-fact dd,
[dir="rtl"] .spec-row dd{ text-align: end; }

/* — the client marquee runs the other way — */

[dir="rtl"] .client-track{ animation-name: client-slide-rtl; }
@keyframes client-slide-rtl{ to{ transform: translate3d(50%, 0, 0); } }
[dir="rtl"] .client,
[dir="rtl"] .say blockquote{ letter-spacing: 0; font-weight: 400; }
[dir="rtl"] .say blockquote{ line-height: 1.7; font-size: clamp(1.02rem, 1.4vw, 1.2rem); }

/* — photography sections — */

[dir="rtl"] .room-where,
[dir="rtl"] .tex-name,
[dir="rtl"] .source-name,
[dir="rtl"] .story-words h3,
[dir="rtl"] .look-quote,
[dir="rtl"] .press blockquote,
[dir="rtl"] .letter-name{ letter-spacing: 0; font-weight: 400; line-height: 1.4; }
[dir="rtl"] .look-quote{ line-height: 1.34; font-weight: 300; }
[dir="rtl"] .maker-years{ font-family: var(--ui-latin); }
[dir="rtl"] .source-who{ text-align: end; }
[dir="rtl"] .sign{ transform: scaleX(-1); }

/* — showroom sections — */

[dir="rtl"] .zone-detail h3,
[dir="rtl"] .stock-name,
[dir="rtl"] .fact dd{ letter-spacing: 0; font-weight: 400; line-height: 1.4; }
[dir="rtl"] .get-fact dd,
[dir="rtl"] .stock-price{ text-align: end; }
[dir="rtl"] .stock-price,
[dir="rtl"] .live{ font-family: var(--ui); }
/* the plan and the approach map are diagrams: they keep their own
   left-to-right geometry, only the labels flip */
[dir="rtl"] .map-svg text,
[dir="rtl"] .get-map text{ direction: rtl; }