.hero {
  max-width: var(--pgsx-shell-max-width);
  margin: 0 auto;
  padding: clamp(64px, 14vh, 160px) var(--pgsx-shell-gutter) var(--pgsx-space-16);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--pgsx-space-16);
  align-items: end;
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    gap: var(--pgsx-space-8);
  }
}

.hero__title {
  font-family: var(--pgsx-font-display);
  font-variation-settings:
    "opsz" 144,
    "SOFT" 50,
    "wght" 320;
  font-size: clamp(48px, 7.5vw, 88px);
  line-height: var(--pgsx-leading-display);
  letter-spacing: var(--pgsx-tracking-display);
  margin: 0 0 var(--pgsx-space-6);
  max-width: 14ch;
  color: var(--pgsx-text-primary);
  text-wrap: balance;
}

.hero__title em {
  font-style: italic;
  font-variation-settings:
    "opsz" 144,
    "SOFT" 100,
    "wght" 320;
  color: var(--pgsx-accent);
}

.hero__lede {
  font-size: var(--pgsx-text-md);
  line-height: var(--pgsx-leading-body);
  color: var(--pgsx-text-secondary);
  max-width: var(--pgsx-measure-narrow);
  margin: 0 0 var(--pgsx-space-8);
}

.hero__lede code {
  font-family: var(--pgsx-font-mono);
  color: var(--pgsx-text-secondary);
  background: var(--pgsx-surface);
  padding: 0 6px;
  border-radius: 3px;
}