/* Scoped to the optional pop-up; independent of the site's existing rules. */
.promotion-popup {
    margin: auto;
    padding: 0;
    width: min(850px, calc(100% - 32px));
    max-height: calc(100dvh - 32px);
    overflow: auto;
    color: #000;
    background: #f3f0e8;
    border: 1px solid #000;
    font-family: "IBM Plex Mono", monospace;
    line-height: 1.5;
}
.promotion-popup:not([open]) { display: none; }
.promotion-popup::backdrop { background: rgb(0 0 0 / 78%); }
.promotion-card { display: grid; grid-template-columns: 1fr 1fr; position: relative; }
.promotion-cover { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; align-self: center; }
.promotion-copy { padding: 52px 30px 32px; min-width: 0; }
.promotion-popup .promotion-eyebrow { font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 18px; color: #9d0000; }
.promotion-popup h2 { margin: 0 0 16px; font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.15; overflow-wrap: anywhere; }
.promotion-popup .promotion-album { font-size: .8rem; margin: 0 0 20px; }
.promotion-popup .promotion-description { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9rem; margin: 0 0 24px; }
.promotion-popup .promotion-close {
    position: absolute; z-index: 1; right: 8px; top: 8px; width: 44px; height: 44px;
    background: #000; color: #fff; border: 1px solid #fff; font: 28px/1 sans-serif; cursor: pointer;
}
.promotion-popup .promotion-streaming { display: flex; flex-wrap: wrap; gap: 10px; position: static; width: auto; }
.promotion-popup .promotion-streaming a { display: inline-block; padding: 12px 14px; min-height: 44px; border: 1px solid #000; background: #000; color: #fff; text-decoration: none; font-size: .75rem; transition: none; }
.promotion-popup .promotion-streaming a:hover { background: #c30000; }
.promotion-popup :focus-visible { outline: 3px solid #c30000; outline-offset: 3px; }
.promotion-popup .promotion-close:focus-visible { outline-offset: -5px; }
@media (max-width: 600px) {
    .promotion-popup { width: calc(100% - 24px); max-height: calc(100dvh - 24px); }
    .promotion-card { grid-template-columns: minmax(0, 1fr); }
    .promotion-cover { max-width: 300px; justify-self: center; }
    .promotion-copy { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .promotion-popup, .promotion-popup *, .promotion-popup::backdrop { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
html.promotion-open { overflow: hidden; }