/* Media belongs to the existing detail disclosure panels on About. */
.magic-stops .detail-media-kind { display: block; margin-top: 3px; color: #e9bd73; font-size: 10px; line-height: 1.3; }
.magic-stops [href="#detail-makeup"] img,.magic-stops [href="#detail-boots"] img { object-fit: cover; }
.magic-stops [href="#detail-makeup"] img { object-position: 50% 35%; }
.magic-stops [href="#detail-staff"] img,.magic-stops [href="#detail-breath"] img,.magic-stops [href="#detail-hedgehog"] img { object-fit: cover; }
#details-list .scene-detail-list { align-items: start; }
.detail-media { width: min(100% - 40px,440px); margin: 20px auto 0; overflow: hidden; border: 1px solid #b9dcf170; border-radius: 12px; background: #031423; }
.detail-media-video { width: min(100% - 40px,360px); }
.detail-media video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; max-height: 68svh; object-fit: contain; background: #020c16; }
.detail-media .detail-photo { display: block; width: 100%; height: auto; max-height: 640px; object-fit: contain; }
.detail-media video:focus-visible { outline: 3px solid #e9bd73; outline-offset: -3px; }
@media (max-width:767px) {
 .detail-media { width: 100%; margin-top: 18px; }
 .detail-media-video { width: min(100%,360px); }
 .detail-media video { max-height: 72svh; }
}