.hero {
  display: grid;
  gap: var(--space-2xl);
  padding-block: var(--space-3xl) var(--space-2xl);
}

.hero-copy {
  display: grid;
  gap: var(--space-lg);
  min-width: 0;
}

.hero-title {
  font-size: var(--text-display);
  text-transform: uppercase;
  line-height: 0.86;
}

.hero-title span {
  display: block;
}

.hero-title .last {
  margin-left: 0;
  color: color-mix(in srgb, var(--color-text) 82%, var(--color-accent));
}

.hero-role {
  font-size: var(--text-lg);
  font-family: var(--font-serif);
  max-width: 22ch;
}

.hero-lede {
  max-width: 38rem;
  color: var(--color-text-muted);
}

.page-intro {
  padding-block: var(--space-3xl);
  display: grid;
  gap: var(--space-lg);
  max-width: 40rem;
}

.page-intro h1 {
  font-size: var(--text-xl);
}

.stub-note {
  padding: var(--space-lg);
  border-left: 2px solid var(--color-accent);
  color: var(--color-text-muted);
  max-width: 40rem;
}