/* Phase 3: language fonts, logical layout, and bidirectional isolation. */
:root {
  --body-font: "Zen Kaku Gothic New", sans-serif;
}

html:lang(ja) { --body-font: "Zen Kaku Gothic New", sans-serif; }
html:lang(en) { --body-font: "Space Grotesk", sans-serif; }

body {
  font-family: var(--body-font);
  text-align: start;
}

.circle-link b {
  left: auto;
  right: auto;
  inset-inline-end: 18px;
}

.hero-data {
  left: auto;
  right: auto;
  inset-inline-start: 7vw;
}

.hero-side {
  left: auto;
  right: auto;
  inset-inline-end: 5vw;
}

.day-timeline article {
  border-left: 0;
  border-right: 0;
  border-inline-end: 1px solid #48566f;
}

.day-timeline article:first-child {
  padding-left: 25px;
  padding-inline-start: 0;
}

.day-timeline article:last-child {
  border-inline-end: 0;
}

.timeline-dot {
  left: auto;
  right: auto;
  inset-inline-start: -4px;
}

.system-card small {
  left: auto;
  right: auto;
  inset-inline: 24px 20px;
}

.prompt-visual span {
  left: auto;
  right: auto;
  inset-inline-start: 13px;
}

.dossier-list aside {
  border-left: 0;
  border-right: 0;
  padding-left: 0;
  padding-right: 0;
  border-inline-start: 2px solid #c9ff6a;
  padding-inline-start: 13px;
}

.resident-signal {
  left: auto;
  right: auto;
  inset-inline-end: 7vw;
  border-left: 0;
  border-right: 0;
  border-inline-start: 2px solid var(--acid);
}

@media (max-width: 800px) {
  nav {
    left: auto;
    right: auto;
    inset-inline-end: 7vw;
  }

  .resident-signal {
    left: auto;
    right: auto;
    inset-inline-end: 7vw;
  }
}

/* Technical diagrams and codes retain their physical LTR orientation. */
.brand,
nav a,
.locale,
.hero-data,
.hero-side,
.resident-signal strong,
.section-id,
.city-map,
.cutaway,
.route,
.build-sequence,
.stat-row,
.day-timeline time,
.arch-tags,
.system-card > p,
.system-card small,
.route-note,
.dossier-no,
.dossier-list aside span,
[data-bidi="ltr"] {
  direction: ltr;
  unicode-bidi: isolate;
}

[dir="rtl"] .city-map,
[dir="rtl"] .cutaway,
[dir="rtl"] .route,
[dir="rtl"] .build-sequence {
  text-align: left;
}

[dir="rtl"] .hero-copy,
[dir="rtl"] .title-row,
[dir="rtl"] .life-head,
[dir="rtl"] .arch-copy,
[dir="rtl"] .network-top,
[dir="rtl"] .build-head,
[dir="rtl"] .dossier-head,
[dir="rtl"] .dossier-list {
  text-align: right;
}