.hero { background: var(--ink); color: var(--paper); padding-block: 64px 72px; }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; align-items: center; }
.hero__copy { min-width: 0; }
.hero__tag { font-size: 16px; color: var(--paper-deep); margin-bottom: 24px; }
.hero__title { max-width: 15ch; }
.hero__deck { margin-top: 24px; max-width: 54ch; }
.hero__actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px; }
.hero__fact { padding-left: 16px; margin-top: 24px; border-left: 4px solid var(--coral); max-width: 54ch; }
.hero__fact .note__cite { color: var(--paper-deep); }
.hero__art { min-width: 0; }
.hero__caption { padding-top: 16px; font-family: var(--mono); font-size: 16px; color: var(--paper-deep); }
.hero__copy, .hero__art { animation: settle 150ms ease-out both; }
@keyframes settle { from { opacity: .9; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 760px) {
  .hero { padding-block: 40px 48px; }
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero__title { max-width: 15ch; }
  .hero__art { max-width: 480px; width: 100%; }
  .hero__art .art { aspect-ratio: 1.65; }
}