.site-language {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}
.site-language a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 44px;
  padding-inline: 4px;
  color: inherit;
  opacity: .6;
  text-decoration: none;
  text-underline-offset: 6px;
}
.site-language a[aria-current="page"] {
  opacity: 1;
  text-decoration: underline;
}
.site-language a:hover,
.site-language a:focus-visible { opacity: 1; }
.site-language a:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
.site-language [aria-hidden="true"] { opacity: .4; }
.home-page .site-language {
  position: absolute;
  top: var(--home-header-top, 20px);
  left: auto;
  right: max(20px, env(safe-area-inset-right));
  text-shadow: 0 1px 10px rgba(0, 0, 0, .78);
}
@media (orientation: landscape), (min-width: 901px) {
  .home-page .project-deck:not(.is-strip) .comparison-label {
    top: calc(var(--home-header-top, 20px) + 52px - var(--comparison-inset, 0px));
  }
}
@media (max-width: 700px) {
  .home-page .home-header {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: calc(98px + max(12px, env(safe-area-inset-right)));
  }
  .home-page .home-header .primary-nav { gap: 8px; font-size: clamp(11px, 2vw, 13px); }
  .home-page .home-header .primary-nav a { padding-inline: 0; white-space: nowrap; }
  .home-page .site-language {
    top: var(--home-header-top, 10px);
    left: auto;
    right: max(12px, env(safe-area-inset-right));
    gap: 4px;
    font-size: 11px;
  }
}

/* At small phone widths, keep every primary link visible and put the
   language choice on its own right-aligned row rather than shrinking type. */
@media (max-width: 380px) {
  .home-page { --home-header-height: calc(var(--home-header-top) + 88px + var(--home-header-bottom)); }
  .home-page .home-header {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: calc(var(--home-header-bottom) + 44px);
  }
  .home-page .home-header .primary-nav { width: 100%; justify-content: center; gap: 10px; font-size: 12px; }
  .home-page .site-language { top: calc(var(--home-header-top) + 44px); }
}
@media (max-width: 380px) and (orientation: portrait) {
  .home-page .project-deck:not(.is-strip) .deck-card--comparison .comparison-frame,
  .home-page .project-deck:not(.is-strip) .cinema-home {
    top: calc(var(--home-header-top) + 100px);
    /* Center when there is room, but never move the image and its labels
       above the two-row navigation when short screens run out of space. */
    justify-content: safe center;
  }
}
/* Keep the full comparison and its controls above the thumbnail dock on
   short phones. The video can shrink, with object-fit:contain preserving it. */
@media (max-width: 380px) and (max-height: 620px) and (orientation: portrait) {
  .home-page .project-deck:not(.is-strip) .deck-card--comparison .comparison-frame { bottom: 130px; justify-content: flex-start; }
  .home-page .project-deck:not(.is-strip) .comparison-visual { flex: 0 1 auto; min-height: 100px; }
  .home-page .deck-card--comparison .comparison-copy { margin-top: 8px; }
  .home-page .detail-copy .comparison-tool-line { margin-bottom: 6px; }
  .home-page .detail-copy p.detail-copy__english { margin-top: 4px; }
  .home-page .detail-copy p.detail-copy__process { margin-top: 6px; }
  .home-page .detail-copy time { margin-top: 6px; }
  .home-page .deck-card--comparison .detail-copy em { margin-top: 8px; padding: 6px 14px; font-size: 13px; }
}
@media (max-width: 380px) and (orientation: landscape) {
  .home-page .project-deck:not(.is-strip) .comparison-label {
    top: calc(var(--home-header-top) + 96px - var(--comparison-inset, 0px));
  }
}