/* Page-load promotion; independent of the existing site lightboxes. */
#fd-promo {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, .8);
}
#fd-promo[hidden] { display: none; }
#fd-promo .fd-promo-panel {
  position: relative;
  width: min(800px, calc(100vw - 48px), calc(100vh - 48px));
  width: min(800px, calc(100vw - 48px), calc(100dvh - 48px));
  aspect-ratio: 1;
  background: #0b0b0b;
    box-shadow: 0px 0px 50px #fff;
}
#fd-promo .fd-promo-artwork { display: block; width: 100%; height: 100%; }
#fd-promo .fd-promo-artwork img {
  display: block;
  position: static;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}
#fd-promo .fd-promo-close {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .8);
  color: #fff;
  font: 32px/1 Arial, sans-serif;
  cursor: pointer;
}
#fd-promo .fd-promo-close:focus-visible,
#fd-promo .fd-promo-artwork:focus-visible { outline: 2px solid white; outline-offset: -4px; }
@media (max-width: 767px), (max-height: 500px) and (pointer: coarse) {
  #fd-promo { padding: 0; }
  #fd-promo .fd-promo-panel { width: 100%; height: 100%; aspect-ratio: auto; }
}