/* language and bidirectional layout */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

[lang="ar"] {
  --font-display: Tahoma, Arial, "Segoe UI", sans-serif;
  --font-interface: Tahoma, Arial, "Segoe UI", sans-serif;
  --font-utility: Tahoma, Arial, "Segoe UI", sans-serif;
  --weight-display: 400;
  --weight-body: 400;
  --stretch-display: 100%;
  --stretch-editorial: 100%;
  --stretch-body: 100%;
  --tracking-display: 0;
  --tracking-body: 0;
  --type-features: normal;
  --sans: Tahoma, Arial, "Segoe UI", sans-serif;
  --mono: Tahoma, Arial, "Segoe UI", sans-serif;
}

[lang="ar"] .nav,
[lang="ar"] .right-tools,
[lang="ar"] .project-context,
[lang="ar"] .footer,
[lang="ar"] .experience-detail span,
[lang="ar"] .project-view-grid p,
[lang="ar"] .project-close,
[lang="ar"] .project-view-rail nav,
[lang="ar"] .work-tile-copy small {
  letter-spacing: 0;
}

[dir="rtl"] .mark {
  right: 30px;
  left: auto;
  letter-spacing: -.05em;
}

[dir="rtl"] .right-tools {
  right: auto;
  left: var(--pad);
}

[dir="rtl"] .nav,
[dir="rtl"] .right-tools {
  transform-origin: right center;
}

[dir="rtl"] .nav {
  right: 130px;
  left: 210px;
}

[dir="rtl"] .site-header.nav-collapsed .nav,
[dir="rtl"] .site-header.nav-collapsed .right-tools {
  transform: translateX(36px) scale(.96);
}

[dir="rtl"] .site-header.nav-collapsed .right-tools {
  transform: translateX(20px) scale(.96);
}

[dir="rtl"] .project-profile-section > span {
  margin-right: calc(var(--profile-index-w) + var(--profile-index-gap));
  margin-left: 0;
}

[dir="rtl"] .contact-starter__arrow {
  --ui-arrow-rotation: 180deg;
}

[dir="rtl"] .project-close .ui-arrow { --ui-arrow-rotation: 0deg; }

@media (min-width: 641px) and (max-width: 1080px) {
  [dir="rtl"] .mark {
    right: 22px;
    left: auto;
  }

  [dir="rtl"] .right-tools {
    right: auto;
    left: 18px;
  }

  [dir="rtl"] .nav {
    right: 104px;
    left: 150px;
  }
}

@media (max-width: 640px) {
  [dir="rtl"] .mark {
    right: 16px;
    left: auto;
  }

  [dir="rtl"] .right-tools {
    right: auto;
    left: 12px;
  }

  [dir="rtl"] .nav {
    right: 12px;
    left: 12px;
  }
}

@media (max-width: 560px) {
  [dir="rtl"] .project-profile-section > span {
    margin-right: 0;
  }

}