:root {
  --brand-burgundy: #660033;
}

.wordmark {
  font-style: normal;
  line-height: 1;
}

.wordmark .wordmark-primary {
  margin: 0;
  color: var(--brand-burgundy);
  text-shadow: 0 0 .15em rgb(255 255 255 / 85%), 0 0 .35em rgb(255 255 255 / 55%);
  font-size: clamp(16px, 2vw, 26px);
  letter-spacing: -.035em;
  white-space: nowrap;
}

.wordmark .wordmark-secondary {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: .24em;
}

.hero h1 {
  margin: 18px 0 22px;
  font-size: inherit;
  font-weight: 800;
  line-height: .99;
  letter-spacing: 0;
}

.hero-brand-primary,
.hero-brand-secondary {
  display: block;
}

.hero-brand-primary {
  display: inline-block;
  color: var(--brand-burgundy);
  text-shadow: 0 0 .085em rgb(255 255 255 / 80%), 0 0 .24em rgb(255 255 255 / 45%);
  font-size: clamp(32px, 6.4vw, 100px);
  letter-spacing: -.06em;
  white-space: nowrap;
}

.hero-brand-secondary {
  margin-top: 12px;
  font-size: clamp(17px, 2.4vw, 32px);
  letter-spacing: .21em;
}

.hero-slogan {
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(17px, 2vw, 26px);
  font-weight: 500;
}

.hero-slogan .accent {
  color: inherit;
}

@media (max-width: 720px) {
  .hero-content { padding-top: 23vh; }
  .hero-brand-primary { font-size: clamp(28px, 8.8vw, 62px); }
}