/* ใช้ร่วมกับ i18n.js — สลับฟอนต์ตาม html.lang-th / .lang-en */
html.lang-th body,
html.lang-th .font-headline,
html.lang-th .font-manrope,
html.lang-th .font-label {
  font-family: "Noto Sans Thai", Manrope, Inter, system-ui, sans-serif;
}

/* Thai word-break: ป้องกันเบราว์เซอร์ตัดกลางคำสำคัญ เช่น ผู้จัดการ, วิศวกรรม */
html.lang-th body {
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
}
html.lang-th .i18n-nav-link {
  text-transform: none;
  letter-spacing: 0.02em;
}
html.lang-en .i18n-nav-link {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
html.lang-en body,
html.lang-en .font-body {
  font-family: Inter, system-ui, sans-serif;
}
html.lang-en .font-headline,
html.lang-en .font-manrope,
html.lang-en .font-label {
  font-family: Manrope, system-ui, sans-serif;
}
html.lang-th .i18n-upper {
  text-transform: none;
  letter-spacing: 0.12em;
}
html.lang-en .i18n-upper {
  text-transform: uppercase;
}

/* About page hero — English: scale, measure, editorial rhythm */
html.lang-en .about-hero-copy {
  max-width: min(100%, 40rem);
}
@media (min-width: 768px) {
  html.lang-en .about-hero-copy {
    max-width: min(100%, 42rem);
  }
}
html.lang-en .about-hero-kicker {
  font-size: 0.75rem !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
@media (min-width: 640px) {
  html.lang-en .about-hero-kicker {
    font-size: 0.8125rem !important;
  }
}
html.lang-en .about-hero-h1 {
  font-size: clamp(1.875rem, 2.4vw + 0.85rem, 2.875rem) !important;
  line-height: 1.22 !important;
  letter-spacing: -0.03em;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}
@media (min-width: 640px) {
  html.lang-en .about-hero-h1 {
    font-size: clamp(2rem, 2.1vw + 1rem, 3.125rem) !important;
    line-height: 1.2 !important;
  }
}
@media (min-width: 768px) {
  html.lang-en .about-hero-h1 {
    font-size: clamp(2.125rem, 1.85vw + 1.05rem, 3.25rem) !important;
    line-height: 1.18 !important;
  }
}
html.lang-en .about-hero-quote-text {
  font-size: 1.0625rem !important;
  line-height: 1.5 !important;
  text-wrap: balance;
}
@media (min-width: 640px) {
  html.lang-en .about-hero-quote-text {
    font-size: 1.125rem !important;
    line-height: 1.48 !important;
  }
}
html.lang-en .about-hero-body {
  font-size: 1rem !important;
  line-height: 1.65 !important;
  text-wrap: pretty;
}
@media (min-width: 640px) {
  html.lang-en .about-hero-body {
    font-size: 1.0625rem !important;
  }
}

/* About — “Why Alita” bento: nicer wraps in English */
html.lang-en .about-why-bento h2 {
  text-wrap: balance;
}
html.lang-en .about-why-bento .font-body {
  text-wrap: pretty;
}

/* About — Journey panel */
html.lang-en .about-journey-panel p {
  text-wrap: pretty;
}