/* A quiet portrait layer behind the existing home cover and controls. */
#home.hero {
  position: relative;
  isolation: isolate;
}
#home.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("/assets/amc-artist-family-banner.webp") center center / cover no-repeat;
  opacity: 0.22;
}
@media (max-width: 700px) {
  #home.hero::before {
    background-size: auto 100%;
    background-position: center;
    opacity: 0.18;
  }
}

/* Keep the compact main-site navigation from becoming a white card over the
   mobile cover. The desktop header remains unchanged. */
@media (max-width: 980px) {
  body > main > header {
    color: #fff;
    background: rgba(17, 6, 23, 0.96);
    border-bottom-color: rgba(255, 255, 255, 0.16);
    box-shadow: none;
    backdrop-filter: blur(14px);
  }

  body > main > header .menu {
    color: #fff;
    background: transparent;
    border-color: rgba(239, 184, 59, 0.7);
  }

  body > main > header nav {
    color: #fff;
    background: #17091f;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.35);
  }
}