/* ===== Shared page background (rendered by snippet 'page-bg' from header.php) =====
   A blurred image (a per-page bgImage, else the MGP logo → MMCC roundel on mobile) under the site
   vignette. An optional hero video fades ("rolls") into the image on scroll. Pages that supply their
   own hero (home, where-to-watch, photos, livestream, podcast) opt out via pageBg=false. */
.pbg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:#0a0b0a}
.pbg-img{position:absolute;inset:0;background-repeat:no-repeat;background-position:center;background-size:contain;filter:blur(8px);opacity:.20}
/* the default MGP wordmark shrinks too far on a narrow screen → use the square MMCC roundel there */
@media(max-width:700px){.pbg-logo .pbg-img{background-image:url(/assets/images/mmcc-logo-artdeco.png)!important;background-size:82%;opacity:.24}}
.pbg-video{position:absolute;inset:0;opacity:1;transition:opacity .25s linear}
.pbg-video video,.pbg-video .herovid,.pbg-video iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:max(100vw,177.78vh);height:max(100vh,56.25vw);object-fit:cover;border:0;pointer-events:none}
.pbg-vig{position:absolute;inset:0;background:radial-gradient(ellipse farthest-corner at 50% 44%, rgba(0,0,0,0) 32%, rgba(0,0,0,.14) 56%, rgba(0,0,0,.58) 82%, rgba(0,0,0,.95) 100%)}
/* keep page content above the fixed background */
.wrap{position:relative;z-index:1}