/* Text stays readable over the galaxy: a quiet ground behind inner-page content, and the Coming soon shelf. */
@media (max-width: 799px) {
  :root body.inner:not(.not-found-page):not(.watch-page) main {
    position: relative;
    isolation: isolate;
  }
  :root body.inner:not(.not-found-page):not(.watch-page) main::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 calc(50% - 50vw);
    background: rgba(5, 7, 11, .86);
    -webkit-mask-image: linear-gradient(180deg, #000, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(180deg, #000, #000 calc(100% - 48px), transparent);
    pointer-events: none;
  }
}
/* Account is short enough on large screens for the footer galaxy to rise behind its last section. */
@media (min-width: 800px) {
  :root body.inner:has(#account-benefits) main {
    position: relative;
    isolation: isolate;
  }
  :root body.inner:has(#account-benefits) main::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: min(100%, 960px);
    transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(5, 7, 11, 0), rgba(5, 7, 11, .86) 120px, rgba(5, 7, 11, .86) calc(100% - 120px), rgba(5, 7, 11, 0));
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 100px, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(180deg, transparent, #000 100px, #000 calc(100% - 48px), transparent);
    pointer-events: none;
  }
}

/* Coming soon shares the film card sizing; phones show one upcoming title per row. */
:root body.library-page .lib-coming {
  margin-top: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
@media (max-width: 719px) {
  :root body.library-page .lib-coming .grid {
    grid-template-columns: minmax(0, 1fr);
  }
}