@font-face { font-family: VinylVarietySerif; src: url('../public/ibm-plex-serif-v8-latin-regular.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: VinylVarietyMono; src: url('../public/ibm-plex-mono-v5-latin-500.woff2') format('woff2'); font-style: normal; font-weight: 500; font-display: swap; }
/* Fixed overlay independent of ad slots, page layout and scrolling. */
.vinyl-survey { position: fixed; z-index: 2147483000; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(800px, calc(100vw - 32px)); box-sizing: border-box; margin: 0; padding: 0; border: 0; background: #000; color: #fff; box-shadow: 0 8px 40px #0008; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); text-align: center; line-height: 1.3; }
.vinyl-survey *, .vinyl-survey *::after { box-sizing: border-box; }
.vinyl-survey[hidden] { display: none !important; }
.vinyl-survey__creative { position: relative; padding: 260px 60px 60px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; cursor: pointer; }
.vinyl-survey picture { position: absolute; top: 0; left: 0; width: 100%; height: 400px; display: block; margin: 0; }
.vinyl-survey picture::after { pointer-events: none; content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 35%, rgba(0,0,0,.35) 65%, #000 100%); }
.vinyl-survey .vinyl-survey__photo { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: 50% top; }
.vinyl-survey__content { position: relative; overflow-wrap: anywhere; }
.vinyl-survey .vinyl-survey__heading { margin: 0 0 24px; padding: 0; color: #fff; font: 400 36px/1.06 VinylVarietySerif, Georgia, serif; letter-spacing: 0; text-transform: none; }
.vinyl-survey .vinyl-survey__subheading { white-space: pre-line; margin: 0 0 24px; padding: 0; color: #fff; font: 500 16px/1.3 VinylVarietyMono, monospace; letter-spacing: 0; text-transform: none; }
.vinyl-survey .vinyl-survey__terms { margin: 0 0 28px; padding: 0; color: #fff; font: 500 10px/1.3 VinylVarietyMono, monospace; }
.vinyl-survey .vinyl-survey__link { display: inline-block; margin: 0; padding: 5px 10px; border: 1px solid #fff; background: #fff; color: #000; font: 400 25px/1.1 VinylVarietySerif, Georgia, serif; text-decoration: none; text-transform: none; }
.vinyl-survey .vinyl-survey__link:hover { background: #ddd; border-color: #ddd; color: #000; }
.vinyl-survey .vinyl-survey__logo { display: block; width: 150px; height: auto; margin: 24px auto 0; }
.vinyl-survey__close { position: absolute; z-index: 2; top: 16px; right: 16px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: #000; color: #fff; font: bold 26px/1 Arial, sans-serif; cursor: pointer; }
.vinyl-survey .vinyl-survey__close:hover, .vinyl-survey .vinyl-survey__close:focus-visible { background: #fff; color: #000; }
.vinyl-survey .vinyl-survey__close:active { background: #ddd; color: #000; }
.vinyl-survey__close:focus-visible, .vinyl-survey__link:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 600px) {
    .vinyl-survey { width: min(360px, calc(100vw - 32px)); }
    .vinyl-survey__creative { padding: 230px 24px 68px; }
    .vinyl-survey picture { height: 370px; }
    .vinyl-survey .vinyl-survey__heading { margin-bottom: 28px; font-size: 32px; line-height: 1.03; }
    .vinyl-survey .vinyl-survey__subheading { font-size: 13px; line-height: 1.3; }
    .vinyl-survey .vinyl-survey__link { font-size: 23px; }
    .vinyl-survey__close { top: 12px; right: 12px; }
}
@media (max-height: 700px) {
    .vinyl-survey__creative { padding-top: 180px; padding-bottom: 36px; }
    .vinyl-survey picture { height: 300px; }
}