/* The reviewed wide hero treatment, without design-preview controls. */
.hero { padding-top: 54px; padding-bottom: 0; }
.hero-copy { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); column-gap: 64px; align-items: start; }
.hero-copy h1 { grid-column: 1; grid-row: 1 / span 3; font-size: clamp(56px, 6.6vw, 96px); }
.hero-description { grid-column: 2; margin-top: 7px; font-size: 19px; line-height: 1.6; max-width: 480px; }
.hero-link, .hero-status { grid-column: 2; justify-self: start; }
.hero-link { margin-top: 18px; font-size: 17px; }
.hero-status { margin-top: 16px; font-size: 13px; }
.hero-art-frame { max-width: 1600px; margin: 22px auto 0; background: var(--canvas); }
.hero-art { display: block; width: 100%; height: auto; }
.focus { margin-top: 62px; }

@media (min-width: 761px) {
  .hero-copy h1 span { white-space: nowrap; }
}

@media (max-width: 900px) {
  .hero { padding-top: 42px; }
  .hero-copy { column-gap: 32px; }
  .hero-copy h1 { font-size: clamp(48px, 7vw, 64px); }
  .hero-description { font-size: 17px; line-height: 1.6; margin-top: 2px; }
  .hero-status { font-size: 12px; }
}

@media (max-width: 760px) {
  .hero { padding-top: 44px; }
  .hero-copy { display: block; }
  .hero-copy h1 { font-size: clamp(46px, 10.8vw, 76px); line-height: 1.08; }
  .hero-description { font-size: 17px; margin-top: 24px; max-width: 540px; }
  .hero-status { font-size: 12px; max-width: none; margin-top: 15px; }
  .hero-art-frame { margin-top: 24px; }
  .focus { margin-top: 36px; }
}

/* Motion is enabled only when the user has not requested reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .hero-copy { animation: copy-arrives 550ms ease-out both; }
  .hero-art { animation: scene-arrives 750ms 100ms ease-out both; }
  .text-link svg { transition: transform 180ms ease-out; }
  .hero-link:hover svg { transform: translateX(3px); }
  .parent-link:hover svg { transform: translate(2px, -2px); }
  @keyframes copy-arrives {
    from { opacity: 0.65; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes scene-arrives {
    from { opacity: 0.75; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
}