/* Archaic Art Deco treatment for the homepage statement. */
.hero {
  background-color: #171914;
  background-image:
    linear-gradient(90deg, rgba(18, 20, 17, 0.86) 0%, rgba(18, 20, 17, 0.73) 48%, rgba(18, 20, 17, 0.8) 100%),
    url("assets/hero-botanical-preview.png");
  background-position: center;
  background-size: cover;
}

.hero::after {
  opacity: 0.22;
  background:
    radial-gradient(circle at 71% 28%, rgba(181, 145, 80, 0.2), transparent 19%),
    linear-gradient(180deg, rgba(10, 12, 10, 0.05), rgba(10, 12, 10, 0.34));
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero .constellation {
  opacity: 0.18;
}

.hero h1 {
  max-width: 64rem;
  margin: 1.65rem 0 2.75rem;
  font-family: "Forum", "Times New Roman", serif;
  font-size: clamp(3.6rem, 8.25vw, 8.15rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

.hero h1 em {
  font-style: normal;
  letter-spacing: 0.025em;
  text-shadow: 0 0 1.5rem rgba(198, 162, 102, 0.12);
}

@media (max-width: 820px) {
  .hero h1 {
    max-width: 12ch;
    font-size: clamp(3.35rem, 12vw, 5.8rem);
    line-height: 1.08;
    letter-spacing: 0.008em;
  }
}

@media (max-width: 520px) {
  .hero h1 {
    font-size: clamp(3rem, 15vw, 4.25rem);
    line-height: 1.1;
    letter-spacing: 0.01em;
  }
}