.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.7vw, 1.6rem);
}

.header-actions .sound-toggle {
  justify-self: auto;
}

.language-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  cursor: pointer;
}

.language-toggle i {
  display: block;
  width: 1.3rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.32);
}

.language-toggle__current {
  color: var(--signal);
}

.site-nav b,
.record-row b {
  font: inherit;
}

html[data-language="en"] .hero h1,
html[data-language="en"] .scene h2,
html[data-language="en"] .archive__header h2,
html[data-language="en"] .protocol__content h2,
html[data-language="en"] .signal-modal h2 {
  font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
  text-transform: uppercase;
}

html[data-language="en"] .hero h1 {
  max-width: 7.6em;
  font-size: clamp(3.4rem, 7.2vw, 8.7rem);
  line-height: 0.84;
}

html[data-language="en"] .hero__line--indent {
  padding-left: 0.65em;
}

html[data-language="en"] .scene h2 {
  font-size: clamp(2.7rem, 5.6vw, 6.2rem);
}

html[data-language="en"] .archive__header h2 {
  font-size: clamp(4.4rem, 10vw, 11rem);
}

html[data-language="en"] .protocol__content h2 {
  font-size: clamp(3.7rem, 8.2vw, 8.8rem);
}

.hero__media img {
  object-position: 56% 58%;
  filter: saturate(0.74) contrast(1.06) brightness(0.92);
}

.passage__media img {
  object-position: 50% 62%;
  filter: saturate(0.65) contrast(1.08) brightness(0.82);
}

.archive__crop img {
  object-position: 50% 54%;
  filter: grayscale(0.42) contrast(1.1) brightness(0.82);
}

.interlude__media img {
  object-position: 50% 52%;
  filter: saturate(0.34) brightness(0.44) contrast(1.12);
}

@media (max-width: 800px) {
  .header-actions {
    gap: 0.85rem;
  }

  .language-toggle i {
    width: 0.75rem;
  }

  .hero__media img {
    object-position: 63% 55%;
  }

  .passage__media img {
    object-position: 60% 58%;
  }

  html[data-language="en"] .hero h1 {
    font-size: clamp(2.9rem, 14vw, 5.8rem);
  }

  html[data-language="en"] .archive__header h2 {
    font-size: clamp(4.7rem, 21vw, 8rem);
  }
}

@media (max-width: 480px) {
  .language-toggle__current,
  .language-toggle i {
    display: none;
  }
}