@media (max-width: 359px) {
  .site-header {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    padding-inline: 8px;
  }

  .header-wordmark img {
    width: 108px;
  }

  .hero {
    min-height: 286px;
  }

  .hero__copy {
    right: 12px;
    bottom: 14px;
    left: 12px;
  }

  .hero h1 {
    font-size: 1.78rem;
  }

  .player-section {
    padding-inline: 12px;
  }
}

@media (max-width: 767px) {
  .hero__image {
    inset: -3% auto auto 0;
    width: 106%;
    height: 106%;
  }
}

@media (min-width: 1024px) {
  .site-shell {
    max-width: 1180px;
  }

  .hero {
    min-height: 440px;
  }

  .hero__image {
    object-position: 37% center;
  }

  .hero__copy {
    right: 54px;
    bottom: 42px;
    left: 54px;
  }

  /* Desktop scale pass: let the homepage media use the wider shell rather than
     sitting at mobile width inside a large empty canvas. */
  .player-section {
    width: min(100%, 1040px);
    padding-inline: 40px;
  }

  .homepage-content {
    width: min(100%, 1040px);
    padding-inline: 40px;
  }

  .hero h1 {
    font-size: 3rem;
  }

  .dispatch-grid {
    gap: 16px;
  }
}

@media (min-width: 1280px) {
  .player-section,
  .homepage-content {
    width: min(100%, 1120px);
  }
}