/* Reeve Hayward — Arabic pages (/ar/). Loaded after site.css on pages with dir="rtl".
   Arabic type: Noto Naskh Arabic Bold for titles and lockups (Regular for the insights headings), IBM Plex Sans Arabic for text (both OFL,
   served from our own domain). They cover Arabic letters only, so digits and Latin words keep the RH faces.
   Photos with no landmark (cover art, service bands, tree, dune, night sky) are mirrored so the composition
   follows the text to the right; Doha landmarks (dhows, skyline) are not, and keep their text on the left. */

@font-face { font-family: "RH Arabic Serif"; src: url(/fonts/ReeveHaywardArabicSerif-Bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "RH Arabic Serif"; src: url(/fonts/ReeveHaywardArabicSerif-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "RH Arabic Sans"; src: url(/fonts/ReeveHaywardArabicSans-Light.woff2) format("woff2"); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "RH Arabic Sans"; src: url(/fonts/ReeveHaywardArabicSans-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "RH Arabic Sans"; src: url(/fonts/ReeveHaywardArabicSans-Medium.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

:root[dir="rtl"] {
  --serif: "RH Arabic Serif", "RH Serif", Georgia, serif;
  --sans: "RH Arabic Sans", "RH Sans", Arial, Helvetica, sans-serif;
}
/* Arabic letters join, so no tracking anywhere. */
[dir="rtl"] *, [dir="rtl"] *::before, [dir="rtl"] *::after { letter-spacing: 0 !important; }
[dir="rtl"] body { line-height: 1.75; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { line-height: 1.35; }
[dir="rtl"] .h1, [dir="rtl"] .h2, [dir="rtl"] .h3, [dir="rtl"] .bands-title { line-height: 1.3; }
[dir="rtl"] .lead, [dir="rtl"] .cover-dek { line-height: 1.7; }

/* lockups: Naskh needs room above and below the letters */
[dir="rtl"] .lockup { line-height: 1.3; }
[dir="rtl"] .lockup .l { line-height: 1.4; }
[dir="rtl"] .lockup .k { line-height: 1.25; margin: 0 -.02em .02em 0; }
[dir="rtl"] .js .lockup[data-rise]:not(.done) > span { padding-bottom: .3em; margin-bottom: -.3em; }
[dir="rtl"] .js .lockup[data-rise]:not(.done) > .k { padding-bottom: .3em; margin-bottom: -.28em; }

/* header, menu, skip link */
[dir="rtl"] .skip { left: auto; right: 12px; }
[dir="rtl"] .nav { margin-left: 0; margin-right: auto; }
[dir="rtl"] .menu-btn { margin-left: 0; margin-right: auto; }

/* arrows point the reading way */
[dir="rtl"] .ico-arr { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .ico-arr, [dir="rtl"] .go:hover .ico-arr, [dir="rtl"] a:hover > .go .ico-arr { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .band:hover .band-go .ico-arr { transform: scaleX(-1) translateX(6px); }

/* mirrored photos (see note at the top); cut-outs were made for the English words, so they are off here */
[dir="rtl"] .cover-media picture, [dir="rtl"] .band > picture, [dir="rtl"] .next > picture,
[dir="rtl"] .ph:not(.ph--keep) > picture, [dir="rtl"] .constellation > picture { transform: scaleX(-1); }
[dir="rtl"] .ph-fg { display: none; }
[dir="rtl"] .ph--keep .ph-lock .lockup { width: min(100%, 560px); margin-right: auto; margin-left: 0; }
@media (max-width: 720px) { [dir="rtl"] .ph--keep .ph-lock .lockup { width: 100%; } }

/* small left/right details */
[dir="rtl"] .tag-row .tag + .tag { border-left: 1px solid currentColor; border-right: 0; }
[dir="rtl"] .ph-cap { right: auto; left: var(--gutter); }
[dir="rtl"] .fg .n small { margin-right: 0; margin-left: .2em; }
[dir="rtl"] .js .figrow .fg::before { transform-origin: right; }
[dir="rtl"] .ex th { text-align: right; padding: 0 0 10px 16px; }
[dir="rtl"] .ex td:first-child, [dir="rtl"] .ex th:first-child { padding-right: 0; }
[dir="rtl"] .star-item { padding-left: 0; padding-right: 34px; }
[dir="rtl"] .star { left: auto; right: -9px; }
[dir="rtl"] .person .nm em { margin-left: 0; margin-right: 10px; }
[dir="rtl"] .person .ti { text-align: left; }
@media (max-width: 620px) { [dir="rtl"] .person .ti { text-align: right; } }
[dir="rtl"] .field select { background-position: left 14px center; padding-left: 40px; padding-right: 14px; }
[dir="rtl"] .prose ul li { padding-left: 0; padding-right: 20px; }
[dir="rtl"] .prose ul li::before { left: auto; right: 2px; }
[dir="rtl"] .footer-legal .fine span:first-child { margin-right: 0; margin-left: auto; }
@media (min-width: 900px) { [dir="rtl"] .ph-lock--mid .lockup { margin-left: 0; margin-right: 44%; } }
@media (max-width: 760px) {
  [dir="rtl"] .sky { padding-left: 0; padding-right: 4px; }
  [dir="rtl"] .sky-line { left: auto; right: 4px; }
  [dir="rtl"] .star-item { padding: 0 32px 36px 0; }
  [dir="rtl"] .star { left: auto; right: -5px; }
}

/* English content inside Arabic pages (article titles, the dashboard) keeps the English faces */
[dir="rtl"] [lang="en"] { --serif: "RH Serif", Georgia, serif; --sans: "RH Sans", Arial, Helvetica, sans-serif; font-family: var(--sans); }
