/* Home page only: the hero composition. Everything else on home is shared. */

.home-hero {
  padding-block: clamp(var(--p-space-10), 6vw, var(--p-space-20)) clamp(var(--p-space-12), 6vw, var(--p-space-20));
  overflow: hidden;
}

.home-hero__grid {
  display: grid;
  gap: var(--p-space-10);
  align-items: center;
}

.home-hero__copy {
  display: grid;
  gap: var(--p-space-6);
  justify-items: start;
}

.home-hero__title {
  font-size: var(--p-text-h1);
  font-weight: var(--p-weight-heavy);
  line-height: var(--p-leading-tight);
  letter-spacing: var(--p-tracking-display);
}

.home-hero__accent {
  color: var(--accent);
}

.home-hero__lead {
  max-width: 40ch;
  color: var(--ink-muted);
  font-size: var(--p-text-lead);
  line-height: var(--p-leading-snug);
}

.home-hero__copy .button-row {
  margin-block-start: var(--p-space-2);
}

.home-hero__art {
  justify-self: center;
  width: min(100%, 22rem);
}

.home-hero__stats {
  margin-block-start: clamp(var(--p-space-12), 6vw, var(--p-space-20));
}

@media (min-width: 64rem) {
  .home-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--p-space-12);
  }

  .home-hero__art {
    width: min(100%, 36rem);
  }
}