/* Selected September 2026 artwork. Scoped to the two homepages and About photo. */
.store-site[data-page="hobbies"] .homepage-art {
  --homepage-art: url('../images/fatboys-racing-hero-20260918.webp');
}
.track-site[data-page="speedway"] .homepage-art {
  --homepage-art: url('../images/4way-racing-hero-20260918.webp');
}
.homepage-art { background: #080b0d; }
.homepage-art::before {
  content: "";
  position: absolute;
  inset: 50% max(0px, calc((100vw - 1440px) / 2)) auto auto;
  width: min(80vw, 1100px);
  height: auto;
  aspect-ratio: 1672 / 941;
  z-index: 0;
  border: 0;
  opacity: 1;
  transform: translateY(-50%);
  pointer-events: none;
  background: var(--homepage-art) center / contain no-repeat transparent;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 96%, transparent), linear-gradient(0deg, transparent, #000 8%, #000 94%, transparent);
  mask-composite: intersect;
}
.homepage-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #080b0d, transparent 28%), linear-gradient(0deg, #080b0d, transparent 12%);
}
.homepage-art > .hero__grid, .homepage-art > .race-hero__grid { position: relative; z-index: 1; }
/* Preserve the former logo's layout footprint without loading a second logo. */
.store-art-space { width: min(100%, 390px); aspect-ratio: 590 / 623; justify-self: end; }
.track-art-space { width: 100%; aspect-ratio: 1; }
/* Crop only through the presentation frame; reuse the same cached image file. */
.about-photo.about-photo--racing { position: relative; background: #080b0d; }
.about-photo--racing img {
  position: absolute;
  top: 50%;
  right: 0;
  width: 170%;
  max-width: none;
  height: auto;
  transform: translateY(-50%);
}
@media (max-width: 820px) {
  .store-art-space { display: none; }
  .store-site .homepage-art .hero__grid { padding-bottom: calc(85px + min(90vw, 475px)); }
  .store-site .homepage-art::before {
    inset: auto max(0px, calc((100vw - 530px) / 2)) 0 auto;
    width: min(170vw, 900px);
    transform: none;
  }
}
@media (max-width: 760px) {
  .store-site .homepage-art .hero__grid { padding-bottom: calc(55px + min(90vw, 475px)); }
  .track-site .homepage-art::before {
    inset: auto max(0px, calc((100vw - 390px) / 2)) 48px auto;
    width: min(170vw, 663px);
    transform: none;
  }
}