.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 4px 8px;
  border: 1px solid rgba(23, 32, 31, .16);
  border-radius: 999px;
  background: rgba(248, 243, 234, .66);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.language-switcher span {
  width: 1px;
  height: 13px;
  background: rgba(23, 32, 31, .18);
}

.language-switcher button {
  appearance: none;
  min-width: 28px;
  padding: 4px 3px;
  border: 0;
  border-radius: 999px;
  color: rgba(23, 32, 31, .48);
  background: transparent;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

.language-switcher button:hover,
.language-switcher button:focus-visible {
  color: var(--ink);
  outline: none;
  transform: translateY(-1px);
}

.language-switcher button.is-active {
  color: #f8f3ea;
  background: var(--ink);
}

html[lang="fr"] .hero-copy h1 {
  max-width: 760px;
}

@media (max-width: 820px) {
  .site-nav {
    gap: 10px;
  }

  .language-switcher {
    min-height: 32px;
    gap: 5px;
    padding: 3px 6px;
  }

  .language-switcher button {
    min-width: 25px;
    font-size: 8px;
  }
}

@media (max-width: 520px) {
  .language-switcher {
    order: -1;
  }

  html[lang="fr"] .hero-copy h1 {
    font-size: clamp(43px, 12.2vw, 61px) !important;
  }
}