/* Desktop headline stays legible as two intentional lines. */
@media (min-width: 621px) {
  h1 { font-size: clamp(64px, 5.8vw, 96px); }
}

.language-control { margin-left: 2px; }
.language-select { appearance: none; border: 1px solid rgba(243,242,235,.16); border-radius: 999px; background: #101312; color: #f3f2eb; font: 10px "DM Mono", monospace; letter-spacing: .04em; padding: 10px 26px 10px 12px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, #d9f94b 50%), linear-gradient(135deg, #d9f94b 50%, transparent 50%); background-position: calc(100% - 13px) 14px, calc(100% - 9px) 14px; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; }
.language-select:focus-visible { outline: 2px solid #d9f94b; outline-offset: 3px; }
.language-select option { background: #101312; color: #f3f2eb; }
@media (max-width: 900px) { .language-control { margin-left: auto; } }
@media (max-width: 620px) { .language-control { margin-left: 0; margin-right: 2px; } .language-select { padding: 9px 24px 9px 10px; } }

/* Keep the second principle icon visible across fonts and locales. */
.principle-icon.icon-shape { position: relative; color: transparent; font-size: 0; transform: none; width: 72px; }
.principle-icon.icon-shape::before { content: ""; display: block; width: 38px; height: 38px; border: 2px solid var(--coral); transform: rotate(45deg); margin: 8px 0 0 13px; }