/* Keep each translation with its Chinese label, including inside flex buttons. */
.bi-pair {
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: anywhere;
}
.bi-pair > small.bi-en, .bi-en {
  display: block;
  margin: .15em 0 0;
  padding: 0;
  background: none;
  color: inherit;
  font: 450 max(.88em, .81rem)/1.45 system-ui, sans-serif;
  letter-spacing: normal;
  text-transform: none;
}
p .bi-en, dd .bi-en, .learning-panel li .bi-en, .book-list li .bi-en {
  font-size: max(.94em, .94rem);
  margin-top: .32em;
  line-height: 1.55;
}
h1 .bi-en, h2 .bi-en { font-size: max(.57em, 1rem); }
.lighthouse h1 .bi-pair::after { content: none; }
.travel ul:has(.bi-en), .countries:has(.bi-en) { display: flex; flex-wrap: wrap; gap: .5em 1em; align-items: start; }
.travel li:has(.bi-en)::before, .countries li:has(.bi-en)::before { display: none; }
.hero header nav { flex-wrap: wrap; }
.lighthouse .hero header nav a { font-size: clamp(13px, 1vw, 15px); min-height: 44px; }
.lighthouse .hero header nav .bi-en { font-size: max(.86em, .75rem); }
.hero .intro { padding-bottom: clamp(36px, 6vw, 96px); }
.lighthouse .intro .lead { max-width: 48rem; margin-inline: auto; }
.trial-float { padding-block: .35em; text-align: center; }
.inquiry select { width: 100%; min-width: 0; }
.copy-status, .wechat-status { white-space: pre-line; }
@media (max-width: 900px) {
  .hero header { flex-wrap: wrap; height: auto; gap: .5em; }
  .hero header nav { flex: 1 1 100%; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: .3em .75em; }
  .hero header nav a { padding: .35em 0; }
  .hero .intro { padding-bottom: clamp(150px, 40vw, 230px); }
  footer, footer .wrap { flex-wrap: wrap; gap: 1em; }
  .course-facts div { grid-template-columns: minmax(5.5em, 28%) minmax(0,1fr); }
}

:is(h1,h2) .bi-pair > .bi-en { font-size: max(.6em, 1rem); }
.lighthouse .hero-actions .button {
  padding: .3rem 1.25rem;
  border-radius: 999px;
  font-size: 1rem;
  line-height: 1.25;
}

p.english-copy {
  margin: .8rem 0 0;
  color: var(--muted);
  font: 400 1rem/1.65 system-ui, sans-serif;
  text-wrap: pretty;
}
#teacher-title, #greeting {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.025em;
}
.translation-title { display: block; margin-bottom: .25em; }