html[dir="rtl"] {
  --serif: "Noto Naskh Arabic", "Geeza Pro", "Traditional Arabic", serif;
  --sans: "Noto Sans Arabic", "Noto Kufi Arabic", "Geeza Pro", sans-serif;
}

html[dir="rtl"] body {
  direction: rtl;
  font-feature-settings: "kern" 1;
}

html[dir="rtl"] .brand strong,
html[dir="rtl"] .brand small,
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .scene-label,
html[dir="rtl"] .episode-number span,
html[dir="rtl"] .episode-next span,
html[dir="rtl"] .step-kicker {
  letter-spacing: 0;
  text-transform: none;
}

html[dir="rtl"] .hero h1,
html[dir="rtl"] .section-heading h2,
html[dir="rtl"] .episode-heading h2,
html[dir="rtl"] .scene-copy h3 {
  letter-spacing: 0;
  line-height: 1.35;
}

html[dir="rtl"] .guide-hero h1 {
  max-width: 12ch;
  font-size: clamp(3.7rem, 7.5vw, 7.4rem);
  letter-spacing: 0;
  line-height: 1.18;
}

html[dir="rtl"] .guide-heading h2,
html[dir="rtl"] .billy-explainer h2,
html[dir="rtl"] .profile-category-heading h3,
html[dir="rtl"] .profile-copy h4 {
  letter-spacing: 0;
  line-height: 1.35;
}

html[dir="rtl"] .character-page-label,
html[dir="rtl"] .summary-label,
html[dir="rtl"] .profile-category-heading p,
html[dir="rtl"] .status,
html[dir="rtl"] .card-role,
html[dir="rtl"] .relation-tag {
  letter-spacing: 0;
  text-transform: none;
}

html[dir="rtl"] .relation-tag {
  max-width: 145px;
  border-radius: 12px;
  line-height: 1.45;
  text-align: center;
  white-space: normal;
}

html[dir="rtl"] .hero-stamp {
  right: 28px;
  left: auto;
}

html[dir="rtl"] .compass {
  right: auto;
  left: 24px;
}

html[dir="rtl"] .purpose-treasure-link {
  text-align: right;
}

html[dir="rtl"] .episode::before {
  right: 0;
  left: auto;
}

html[dir="rtl"] .episode-number {
  padding-right: 0;
  padding-left: 20px;
  border-right: 0;
  border-left: 1px solid var(--line-strong);
}

html[dir="rtl"] .scene-track {
  direction: rtl;
}

html[dir="rtl"] .scene-card,
html[dir="rtl"] .scene-copy {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .episode-next {
  margin-right: auto;
  margin-left: 0;
  text-align: left;
}

html[dir="rtl"] .route-scroll,
html[dir="rtl"] .relationship-scroll,
html[dir="rtl"] .relationship-board {
  direction: ltr;
}

html[dir="rtl"] .route-node,
html[dir="rtl"] .node-label,
html[dir="rtl"] .relation-node,
html[dir="rtl"] .relation-tag,
html[dir="rtl"] .map-legend {
  direction: rtl;
}

html[dir="rtl"] .treasure-chain::before {
  right: 43px;
  left: auto;
}

html[dir="rtl"] .treasure-step {
  padding: 24px 0 24px 36px;
}

html[dir="rtl"] .source-boundary {
  border-right: 4px solid var(--complex);
  border-left: 0;
}

html[dir="rtl"] .footer-links {
  justify-content: flex-start;
}

html[dir="rtl"] .header-link {
  font-size: 0.9rem;
}

html[dir="rtl"] .language-link[aria-current="page"] {
  color: #efd397;
  text-decoration-thickness: 2px;
}

html[dir="rtl"] .node-dot,
html[dir="rtl"] .episode-number strong,
html[dir="rtl"] .scene-count,
html[dir="rtl"] .summary-mark,
html[dir="rtl"] .category-number,
html[dir="rtl"] .step-number,
html[dir="rtl"] .story-stats dt {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 620px) {
  html[dir="rtl"] .hero h1,
  html[dir="rtl"] .guide-hero h1 {
    font-size: clamp(3rem, 15vw, 4.5rem);
    line-height: 1.2;
  }

  html[dir="rtl"] .header-link {
    font-size: 0.8rem;
  }

  html[dir="rtl"] .scene-track {
    margin-right: 0;
    margin-left: -12px;
    padding-right: 2px;
    padding-left: 12px;
  }

  html[dir="rtl"] .episode-number {
    padding-left: 12px;
  }

  html[dir="rtl"] .treasure-chain::before {
    right: 24px;
    left: auto;
  }

  html[dir="rtl"] .treasure-step {
    padding: 14px 0 22px 16px;
  }
}

@media (max-width: 700px) {
  /* Vertical voyage list: let it flow right-to-left like the rest of the
     page (the horizontal chart above 700px stays direction: ltr). */
  html[dir="rtl"] .route-scroll {
    direction: rtl;
  }

  html[dir="rtl"] .story-route::before {
    left: auto;
    right: 38px;
  }
}