/* ============================================================
   Languages: the switcher, and typography per script.

   <html> carries lang (de, ru, zh-Hans ...) and data-script (latin, cyrillic,
   cjk). Latin needs nothing: the whole design was drawn for it. The other two
   scripts need a few adjustments, all collected here so the main stylesheets
   stay untouched.
   ============================================================ */

/* ── Language switcher: header ────────────────────────────── */

.nav__lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.5rem;
  padding: 0 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: none;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease);
}

.nav__lang-toggle:hover,
.nav__lang.is-open .nav__lang-toggle {
  color: var(--text);
  border-color: var(--border-strong);
}

/* The language menu hangs from the right edge of its button, not the left, so it
   never runs off the end of the header. */
.nav__menu--end {
  left: auto;
  right: 0;
  min-width: 11rem;
}

/* The header switcher is in the bar at every width, phones included: most visitors
   arrive on a phone and should not have to open the menu to find their language.
   The drawer repeats the list as well. */
.nav__lang { display: block; }

/* A phone has no hover. Without this a tap that closed the menu would leave it
   open, because :hover sticks to the last thing touched. */
@media (hover: none) {
  .nav__lang:not(.is-open):hover .nav__menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
  }
}

/* Bigger touch targets in the dropdown, and a tighter button on a narrow bar so the
   brand, language, theme and menu buttons all fit at 320px. */
.nav__lang .nav__menu-link { padding-block: 0.8rem; }

@media (max-width: 480px) {
  .nav__lang-toggle { padding: 0 0.55rem; gap: 0.3rem; }
  .nav__actions { gap: 0.4rem; }
  .nav__inner { gap: var(--space-2); }
}

/* With the language button in the bar there is no room for the city tag beside the
   name on a small phone (measured: the menu button ran off the edge at 320px). */
@media (max-width: 420px) {
  .nav__role { display: none; }
}

/* The language menu, longer translated link names and the CTA do not fit in one row
   between 1100px and 1279px (measured in German, French, Russian, Italian and
   Spanish: the CTA ran past the edge). While more than one language is on, the burger
   menu covers that range as well, and the inline nav starts at 1280px. The language menu stays in the bar. With a single language there is no
   switcher, and the original 1100px layout is untouched. */
@media (min-width: 1100px) and (max-width: 1279px) {
  .nav:has(.nav__lang) .nav__links,
  .nav:has(.nav__lang) .nav__cta { display: none; }

  .nav:has(.nav__lang) .nav__burger { display: grid; }
}

/* Italian has the longest link names and needs another 80px. */
@media (min-width: 1280px) and (max-width: 1359px) {
  .nav:lang(it):has(.nav__lang) .nav__links,
  .nav:lang(it):has(.nav__lang) .nav__cta { display: none; }

  .nav:lang(it):has(.nav__lang) .nav__burger { display: grid; }
}

/* ── Language switcher: drawer and footer ─────────────────── */

.drawer__langs {
  display: grid;
  gap: 0.6rem;
  margin-bottom: var(--space-4);
}

.drawer__lang-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  padding: 0;
  list-style: none;
}

.drawer__lang {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--text-small);
  color: var(--text-muted);
}

.drawer__lang:hover { color: var(--text); border-color: var(--border-strong); }

.drawer__lang.is-active {
  color: var(--accent-strong);
  border-color: var(--accent);
  background: var(--accent-tint);
}

.footer__langs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem var(--space-3);
}

.footer__lang {
  font-size: var(--text-small);
  color: var(--text-subtle);
}

.footer__lang:hover { color: var(--text); }
.footer__lang.is-active { color: var(--accent-strong); }

/* ── Cyrillic ─────────────────────────────────────────────── */

/* Cyrillic capitals are wider than Latin ones. The wide letter-spacing the mono
   labels use in English looks loose here, so it is eased a little. */
html[data-script="cyrillic"] {
  --tracking-label: 0.08em;
}

/* ── Chinese ──────────────────────────────────────────────── */

/* Negative tracking is a Latin display habit: it crushes Han characters together.
   Tight line-heights do the same vertically, so they open up. */
html[data-script="cjk"] {
  --tracking-display: 0;
  --tracking-tight: 0;
  --tracking-label: 0.04em;
  --leading-tight: 1.3;
  --leading-snug: 1.45;
  --leading-body: 1.85;
}

html[data-script="cjk"] body {
  /* Break between characters, not at word boundaries Chinese does not have. */
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* Italic Han characters are synthesised and ugly. The display <em> accent keeps
   its colour and loses the slant. */
html[data-script="cjk"] em,
html[data-script="cjk"] .hero__em,
html[data-script="cjk"] .statement__em {
  font-style: normal;
}

/* Mono labels are set in capitals with tracking; for Chinese that is just noise. */
html[data-script="cjk"] .label,
html[data-script="cjk"] .figure {
  text-transform: none;
}

/* ── Long words: German, Russian, French, Italian, Spanish ── */

/* German compounds and Russian words run long, and headline sizes are large. Let
   the browser hyphenate (it uses the page language) and, failing that, break. */
html:not([data-script="cjk"]):not(:lang(en)) :is(h1, h2, h3, h4, p, li, dd, .lead, .btn__label) {
  hyphens: auto;
  overflow-wrap: break-word;
}