/* The language control stays in the header at every breakpoint. */
.header {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  column-gap: 18px;
}

.header > .nav { justify-self: center; }
.header > .brand { position: relative; z-index: 101; }

.language-switch {
  position: relative;
  z-index: 101;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid #fffdf74d;
  border-radius: 100px;
  color: var(--white);
}

.language-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0 7px;
  border-radius: 100px;
  color: inherit;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .18s, color .18s;
}

.language-switch a:hover { background: #fffdf71a; }
.language-switch a[aria-current="page"] { color: var(--ink); background: var(--white); }
.language-switch a:focus-visible { outline-offset: 3px; }
.text-page .language-switch { color: var(--ink); border-color: #142d2a4d; }
.text-page .language-switch a:hover { background: #142d2a10; }
.text-page .language-switch a[aria-current="page"] { color: var(--white); background: var(--ink); }
body.menu-open .language-switch { color: var(--white); border-color: #fffdf74d; }
body.menu-open .language-switch a:hover { background: #fffdf71a; }
body.menu-open .language-switch a[aria-current="page"] { color: var(--ink); background: var(--white); }

/* Chinese display type needs open tracking and a taller line box. */
html[lang="zh-CN"] h1,
html[lang="zh-CN"] h2,
html[lang="zh-CN"] h3,
html[lang="zh-CN"] .guide-quote blockquote,
html[lang="zh-CN"] .review-river blockquote > p,
html[lang="zh-CN"] .review-card > p {
  font-family: "Noto Serif SC", "Songti SC", "SimSun", Georgia, serif;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3;
}

html[lang="zh-CN"] .hero h1,
html[lang="zh-CN"] .interior-copy h1,
html[lang="zh-CN"] .reviews-hero h1,
html[lang="zh-CN"] .contacts-heading h1 { font-size: 65px; }
html[lang="zh-CN"] .hero h1 span { font-style: normal; }
html[lang="zh-CN"] .eyebrow,
html[lang="zh-CN"] .hero-kicker,
html[lang="zh-CN"] .tour-format,
html[lang="zh-CN"] .brand { letter-spacing: .04em; }
html[lang="en"] .interior-copy h1,
html[lang="en"] .reviews-hero h1,
html[lang="en"] .contacts-heading h1 { overflow-wrap: break-word; }

@media (max-width: 1200px) and (min-width: 1101px) {
  .header { column-gap: 14px; }
  .header > .nav { gap: 18px; }
  .header > .nav a { font-size: 12px; }
  .header-phone { padding-inline: 12px; font-size: 12px; }
}

@media (max-width: 1100px) {
  .header { grid-template-columns: minmax(0, 1fr) auto auto auto; }
  .header > .nav { justify-self: stretch; }
  .header-phone { margin-right: 0; }
  html[lang="zh-CN"] .hero h1,
  html[lang="zh-CN"] .interior-copy h1,
  html[lang="zh-CN"] .reviews-hero h1,
  html[lang="zh-CN"] .contacts-heading h1 { font-size: 56px; }
}

@media (max-width: 760px) {
  .header { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 10px; }
  .language-switch { gap: 1px; padding: 2px; }
  .language-switch a { min-width: 29px; min-height: 32px; padding-inline: 5px; font-size: 11px; }
  .header > .brand { min-width: 0; }
  .header > .brand > span:last-child { white-space: nowrap; }
  .header > .menu { width: 36px; }
  html[lang="zh-CN"] .hero h1,
  html[lang="zh-CN"] .interior-copy h1,
  html[lang="zh-CN"] .reviews-hero h1,
  html[lang="zh-CN"] .contacts-heading h1 { font-size: 40px; }
  html[lang="zh-CN"] .section-heading h2,
  html[lang="zh-CN"] .manifesto h2,
  html[lang="zh-CN"] .selection-copy h2,
  html[lang="zh-CN"] .principles-intro h2 { font-size: 35px; }
}

@media (max-width: 370px) {
  .header { column-gap: 6px; padding-inline: 16px; }
  .header > .brand { gap: 7px; font-size: 9px; letter-spacing: .08em; }
  .header > .brand .brand-mark { width: 31px; height: 31px; font-size: 20px; }
  .language-switch a { min-width: 27px; padding-inline: 4px; }
  .header > .menu { width: 32px; }
  html[lang="zh-CN"] .hero h1,
  html[lang="zh-CN"] .interior-copy h1,
  html[lang="zh-CN"] .reviews-hero h1,
  html[lang="zh-CN"] .contacts-heading h1 { font-size: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .language-switch a { transition: none; }
}