@font-face {
  font-family: "Cairo";
  src: url("cairo-arabic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root[lang="ar"] {
  --sans: "Cairo", "Helvetica Neue", Tahoma, Arial, sans-serif;
  --display: "Cairo", "Barlow Condensed", Tahoma, Arial, sans-serif;
  --mono: "Cairo", Tahoma, Arial, sans-serif;
}

[lang="ar"] body { line-height: 1.7; }
[lang="ar"] :is(.eyebrow, h1, h2, .course-intro h3) { letter-spacing: normal; }
[lang="ar"] .eyebrow { font-size: .78rem; }
[lang="ar"] :is(h1, h2, h3, h4) { line-height: 1.25; }
[lang="ar"] h2 { font-size: clamp(2.25rem, 5.4vw, 5.6rem); }
[lang="ar"] .hero h1 { font-size: clamp(3.7rem, 8.8vw, 8.7rem); line-height: 1.04; margin-inline: 0; }
[lang="ar"] .case h1 { font-size: clamp(2.85rem, 7.7vw, 7.25rem); margin-inline: 0; }
[lang="ar"] .hero-mark { left: 45%; }
[lang="ar"] .portrait { left: 47.5%; }
[lang="ar"] .hero-copy .intro { max-width: 33ch; }
[lang="ar"] .course-intro h3 { font-size: clamp(2rem, 4.35vw, 4.1rem); max-width: 17ch; }
[lang="ar"] .stat dd { font-size: clamp(2rem, 4.5vw, 4.8rem); line-height: 1.1; white-space: nowrap; }
[lang="ar"] .stat { padding-right: clamp(.65rem, 1.4vw, 1.3rem); padding-left: 0; border-left: 0; border-right: 1px solid #ff9b8b73; }
[lang="ar"] .course-numbers > div { padding-right: .65rem; padding-left: 0; border-left: 0; border-right: 1px solid #ff9b8b73; }
[lang="ar"] .project h3 { line-height: 1.35; }
[lang="ar"] .project-number { right: .55rem; left: auto; }
[lang="ar"] .credits { padding-inline-start: 1.3rem; padding-inline-end: 0; border-left: 0; border-right: 1px solid var(--line); }
[lang="ar"] .case-cover figcaption { right: clamp(14px, 2vw, 28px); left: auto; }
[lang="ar"] .skip { right: 1rem; left: auto; }
[lang="ar"] .language-switch { font-family: "Helvetica Neue", Arial, sans-serif; }

@media (min-width: 701px) and (max-width: 1050px) {
  [lang="ar"] .portrait { left: 45%; }
}

@media (max-width: 700px) {
  [lang="ar"] .hero-mark { left: 50%; }
  [lang="ar"] .portrait { left: auto; }
  [lang="ar"] .credits { border-right: 0; padding: 1rem 0 0; }
}