/* Keep the same header hierarchy while giving every language a 44px target. */
.header-nav { margin-left: auto; }
.language-switcher { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.language-switcher a { display: grid; place-items: center; min-width: 44px; min-height: 44px; border-radius: 6px; color: var(--muted); }
.language-switcher a[aria-current="page"] { color: var(--ink); background: rgb(22 71 255 / 7%); }
.language-switcher a:hover { color: var(--ink); background: rgb(22 71 255 / 10%); }
html:not([lang="en"]) .hero h1 { font-size: clamp(42px, 5.5vw, 86px); }
html:not([lang="en"]) .study-split h3 { overflow-wrap: anywhere; }
@media (max-width: 1100px) {
  .header { gap: 12px; }
  .header-nav { gap: 16px; }
}
@media (max-width: 760px) {
  .header { flex-wrap: wrap; padding-block: 10px; gap: 0 12px; }
  .header .brand { order: 0; }
  .language-switcher { order: 1; margin-left: auto; }
  .header-nav { display: flex; order: 2; width: 100%; justify-content: space-between; gap: 12px; margin: 0; }
  html:not([lang="en"]) .hero h1 { font-size: clamp(36px, 10.5vw, 62px); }
  .header-nav a { min-height: 44px; }
  .revision-example { min-width: 0; }
  .revision-caption { text-wrap: balance; }
}