/* Align every navigation label and the language selector on one shared row. */
.site-header .main-nav { align-items: center; }
.site-header .button-label {
  top: 50%;
  bottom: auto;
  height: auto;
  transform: translateY(-50%);
}

/* German's longer shop label needs to fit the existing fixed-width header. */
html[lang='de'] .site-header .art-button .button-label { font-size: 16px; }

/* The same vertical position applies to the landing page and interior pages. */
@media (min-width: 1150px) {
  .site-header { padding-top: 24px; align-items: flex-start; }
  .site-header .art-button { height: 88px; aspect-ratio: auto; }
  .site-header .language-switch { height: 88px; align-self: flex-start; }
}

/* On narrower screens the navigation lives below the centered mark. */
@media (max-width: 1149px) {
  .site-header { align-items: flex-start; }
  .site-header .language-switch { height: 48px; align-self: flex-start; }
}

@media (max-width: 700px) {
  /* Match the mobile size for both active and inactive links. */
  .site-header .art-button .button-label,
  .site-header .art-button[aria-current] .button-label {
    font-size: clamp(11px, 3.2vw, 13px);
  }
  html[lang='de'] .site-header .art-button .button-label,
  html[lang='de'] .site-header .art-button[aria-current] .button-label {
    font-size: clamp(9px, 3.125vw, 13px);
  }
}

/* Let translated labels size themselves; the gap, not the column width,
   controls the distance between neighbouring words. */
.site-header .main-nav { gap: clamp(16px, 2.2vw, 32px); }
.site-header .main-nav .art-button {
  display: flex;
  width: auto;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.site-header .main-nav .button-label {
  position: static;
  inset: auto;
  height: auto;
  padding: 0;
  transform: none;
}
@media (max-width: 700px) {
  .site-header .main-nav { gap: clamp(8px, 3vw, 16px); }
}

.site-header .shop-mark-art.mesh-ready { flex: 0 0 auto; width: 300px; height: 132px; }
@media (min-width: 1150px) {
  .site-header .shop-mark { width: 300px; height: 132px; top: 7px; aspect-ratio: auto; }
}
@media (min-width: 701px) and (max-width: 1149px) {
  .site-header { padding-top: 117px; }
  .site-header .shop-mark { top: 0; width: 264px; height: 116px; }
  .site-header .shop-mark-art.mesh-ready { width: 264px; height: 116px; }
  .catalogue-room { grid-template-rows: 170px auto minmax(0,1fr) 48px; }
}
@media (max-width: 700px) {
  .site-header { padding-top: 93px; }
  .site-header .shop-mark { top: 0; width: 210px; height: 92px; }
  .site-header .shop-mark-art.mesh-ready { width: 210px; height: 92px; }
  .catalogue-room { grid-template-rows: 145px auto minmax(0,1fr) 52px; }
}
@media (min-width: 1150px) and (max-height: 650px) {
  .site-header .shop-mark { width: 240px; height: 106px; }
  .site-header .shop-mark-art.mesh-ready { width: 240px; height: 106px; }
}
.listening-room .selection-heading { transform: translateY(-10px); }
.listening-room .selection-label { letter-spacing: .08em; }