:root {
  --ink: #0c0e10;
  --paper: #eeeae2;
  --muted: #9ba0a5;
  --line: #30343a;
  --gold: #7a828c;
  --panel: #171a1e;
  --soft: #d7d3cb;
  font-family: "Inter", "Segoe UI", sans-serif;
}

.hero {
  height: min(55rem, 94vh);
  min-height: 43rem;
}

.hero-image {
  background-image: url("assets/original-black-clock.webp");
  background-position: center center;
  transform: none;
}

.hero-shade {
  background:
    linear-gradient(90deg, rgba(5, 6, 7, .83) 0%, rgba(5, 6, 7, .57) 40%, rgba(5, 6, 7, .08) 70%),
    linear-gradient(0deg, rgba(5, 6, 7, .9) 0%, rgba(5, 6, 7, .18) 58%, rgba(5, 6, 7, .34) 100%);
}

.hero-copy {
  max-width: 82rem;
  padding-bottom: clamp(3rem, 7vh, 5.5rem);
}

h1,
h2,
h3 {
  font-family: "Inter", "Segoe UI", sans-serif;
  font-style: normal;
}

h1 {
  font-family: "Anton", "Arial Narrow", sans-serif;
  font-size: clamp(4.8rem, 9vw, 10rem);
  font-weight: 400;
  line-height: .84;
  letter-spacing: -.02em;
  margin-bottom: 1.7rem;
  text-transform: uppercase;
}

h1 span {
  color: var(--paper);
}

.hero-intro {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.eyebrow {
  color: var(--gold);
}

.edition {
  display: none;
}

.store-intro h2,
.account-story h2,
.desktop-copy h2 {
  font-size: clamp(3rem, 5.3vw, 6.2rem);
  font-weight: 800;
  line-height: .93;
  letter-spacing: -.055em;
}

.theme-info h3 {
  font-size: clamp(2.8rem, 4.4vw, 5rem);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.055em;
}

.sheet h2,
.theme-dialog-copy h2 {
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.055em;
}

.account-dot {
  background: #b7bdc4;
  box-shadow: 0 0 0 3px rgba(183, 189, 196, .14);
}

.desktop-art {
  background: radial-gradient(circle at 52% 35%, #343940, #111317 66%);
}

@media (max-width: 900px) {
  .hero-image {
    background-position: center center;
  }

  .hero-shade {
    background: linear-gradient(0deg, rgba(5, 6, 7, .94) 0%, rgba(5, 6, 7, .28) 72%, rgba(5, 6, 7, .45) 100%);
  }
}

@media (max-width: 560px) {
  h1 {
    font-size: clamp(4.2rem, 20vw, 6rem);
  }

  .store-intro h2,
  .account-story h2,
  .desktop-copy h2 {
    font-size: 3.25rem;
  }

  .theme-info h3 {
    font-size: 3.2rem;
  }
}