/* Vert Tige V4, Arabic page (ar.html, dir="rtl"), loaded after v4.css.
   Amiri for titles (a classic naskh that sits well beside Cormorant), Tajawal for text.
   Letter-spacing and uppercase are switched off: spacing breaks the joins between Arabic letters.
   The hero name stays in Latin letters and left to right (dir="ltr" on its span). */
:root {
  --m-display: "Amiri", "Cormorant Garamond", serif;
  --sans: "Tajawal", "DM Sans", system-ui, sans-serif;
  --serif: "Amiri", "Lora", Georgia, serif;
}
body { font-family: var(--sans); }
[dir="rtl"] *:not(.mhero h1 span):not(.mhero h1 b) { letter-spacing: 0 !important; text-transform: none !important; }

/* Arabic reads better a touch larger and with more line height */
.mintro p, .msplit p:not(.mkicker), .mvisit__list li, .space__intro, .tale__text > p { font-size: 1.06em; line-height: 1.9; }
.mnav a { font-size: 18px; }
.mintro h2, .mvisit h2 { font-weight: 700; }
.mgrid strong, .mcats span { font-weight: 700; }
.mbtn, .mkicker, .mbadge, .mgrid span, .mvisit__list strong, .mhero h1 small { font-weight: 700; }
.mbtn { font-size: 14.5px; }
.mkicker, .mhero h1 small, .mvisit__list strong { font-size: 14px; }
.mgrid span { font-size: 14px; }

/* Florist / Choice words: Arabic needs no tracking and a slightly smaller size */
.mpair span { font-size: clamp(36px, 5.6vw, 70px); font-weight: 700; }

/* the arrows point the reading way */
.lightbox__prev { left: auto; right: 16px; }
.lightbox__next { right: auto; left: 16px; }
.lightbox__next svg { transform: scaleX(-1); }
.lightbox__prev svg { transform: scaleX(-1); }

/* gallery side column and the story page use left/right in styles.css; mirror the few that matter */
.tale__years { right: auto; left: -10px; }
.tale__print--side { margin: 34px auto 10px 0; }
.tale__quote { padding: 28px 92px 28px 30px; }
.tale__quote svg { left: auto; right: 26px; }
@media (max-width: 860px) {
  .mnav a { font-size: 20px; }
  .tale__years { left: 0; }
  .tale__quote { padding: 76px 22px 24px; }
}

/* no fake italics in Arabic */
.tale__lede, em, i { font-style: normal; }

/* slider: close on the left, previous on the right, arrows pointing the reading way */
.slider__close { right: auto; left: 16px; }
.slider__prev { left: auto; right: 20px; rotate: 0deg; }
.slider__next { right: auto; left: 20px; rotate: 180deg; }