:root {
  --display: "Tenor Sans", serif;
  --f: "Inter Tight", Arial, sans-serif;
  --font: "Inter Tight", Arial, sans-serif;
  --ar: "IBM Plex Sans Arabic", Arial, sans-serif;
  --font-ar: "IBM Plex Sans Arabic", Arial, sans-serif;
  --jp: "IBM Plex Sans JP", Arial, sans-serif;
}

body {
  font-family: var(--f);
}

.wordmark,
#loader .lt {
  font-family: var(--display);
  font-weight: 400;
}

.wordmark {
  letter-spacing: .3em;
}

#loader .lt b,
.jp,
.marquee span i,
.giant-track i,
.kanji-bg {
  font-family: var(--jp);
}

h1,
.manifesto h2,
.giant-track span,
.j-head h3,
.principles h2,
.contact-main h2,
.origin h2,
.directory h2,
.contact h2 {
  font-family: var(--display);
  font-weight: 400;
}

h1 {
  font-size: clamp(3.6rem, 8.3vw, 10.9rem);
}

.manifesto h2 {
  font-size: clamp(2.8rem, 8vw, 8.2rem);
  letter-spacing: -.07em;
  max-width: 14.4ch;
}

.world h3 {
  font-family: var(--display);
  font-weight: 400;
}

.world h3 .sub {
  font-family: var(--f);
}

html[dir="rtl"] body {
  font-family: var(--ar);
  font-weight: 400;
}

html[dir="rtl"] h1,
html[dir="rtl"] .manifesto h2,
html[dir="rtl"] .giant-track span:not(.latin),
html[dir="rtl"] .j-head h3,
html[dir="rtl"] .principles h2,
html[dir="rtl"] .contact-main h2,
html[dir="rtl"] .origin h2,
html[dir="rtl"] .directory h2,
html[dir="rtl"] .contact h2 {
  font-family: var(--ar);
  font-weight: 500;
}

html[dir="rtl"] .wordmark,
html[dir="rtl"] .wordmark > span,
html[dir="rtl"] #loader .lt,
html[dir="rtl"] .giant-track .latin {
  font-family: var(--display);
  font-weight: 400;
}

html[dir="rtl"] .world h3 .sub {
  font-family: var(--ar);
  font-weight: 500;
}

@media (max-width: 880px) {
  h1 {
    font-size: clamp(3rem, 12.6vw, 4.15rem);
  }
}