/* Language links share the established header typography. */
.language a, .mobile-language a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.language a:hover, .mobile-language a:hover { text-decoration: underline; }

/* Keep the Finnish hero phrase together at the approved type size. */
html[lang="fi"] .hero-production-phrase { white-space: nowrap; }
/* The longer Voices heading can still wrap naturally. */
html[lang="fi"] .voices-production-phrase { white-space: normal; }

/* FI hero trial: retain larger lettering at intermediate widths and lift the copy. */
html[lang="fi"] .hero h1 {
  font-size: clamp(2rem, calc(1.25rem + 2.5vw), 3.25rem);
}
html[lang="fi"] .hero-copy {
  position: relative;
  top: calc(-1 * clamp(.75rem, calc(2.25rem - 5vw), 1.25rem));
}

/* FI narrow hero: ease the microphone away from the copy below 480 px. */
@media (width < 480px) {
  html[lang="fi"] .hero-media {
    --hero-photo-inset: clamp(0px, calc(150px - 31.25vw), 50px);
    --hero-photo-shift: clamp(0px, calc(240px - 50vw), 80px);
    background: var(--color-surface-cool);
  }
  html[lang="fi"] .hero-media img {
    position: absolute;
    top: var(--hero-photo-inset);
    left: calc(min(0px, calc(78vw - 475px)) + var(--hero-photo-shift));
    width: auto;
    max-width: none;
    object-position: 0 0;
    height: calc(100% - var(--hero-photo-inset));
    mask-image: linear-gradient(to bottom, transparent, #000 var(--hero-photo-inset));
  }
}