/* 2. Typography */

.brand-title {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand-subtitle {
  color: var(--muted-2);
  font-size: 12px;
  white-space: nowrap;
}

.language-button {
  font: 800 12px/1 var(--font-ui);
  letter-spacing: 0.08em;
}

.placeholder-title {
  margin: 0;
  font: 800 13px/1.2 var(--font-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242, 239, 232, 0.74);
}

.placeholder-note {
  margin: 0;
  color: var(--muted-2);
  font-size: 13px;
  line-height: 1.45;
}

.eyebrow {
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.message {
  max-width: 820px;
  margin: 0;
  font-family: var(--font-display-ru);
  font-size: clamp(34px, 6.7vw, 86px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--text);
  text-wrap: balance;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06),
    0 22px 60px rgba(0, 0, 0, 0.72);
}

html[lang="en"] .message,
html[lang="pl"] .message,
html[lang="de"] .message {
  font-family: var(--font-display-latin);
  letter-spacing: 0.005em;
  line-height: 0.92;
}

.microcopy {
  max-width: 590px;
  margin: -4px 0 0;
  color: var(--muted);
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.65;
  text-wrap: balance;
}

.cta {
  font: 900 clamp(18px, 2.2vw, 24px)/1 var(--font-ui);
  letter-spacing: -0.03em;
}

.side-note {
  color: var(--muted-2);
  font-size: 13px;
  line-height: 1.35;
}

.footer {
  color: var(--muted-2);
  font-size: 12px;
  text-align: center;
}

@media (max-width: 760px) {
  html[lang="en"] .message,
  html[lang="pl"] .message,
  html[lang="de"] .message {
    line-height: 0.98;
  }
}