/* Background-video test page — NOT the live homepage.
   The video sits behind everything, full-bleed, with a scrim so the copy stays
   readable. Deliberately honest: no extra darkening beyond what a real build
   would need, so the trade-offs are visible. */
#bgv{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}   /* id beats body>* */
#bgv iframe{transition:opacity .22s ease;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100vw;height:56.25vw;min-height:100vh;min-width:177.78vh;border:0;pointer-events:none}
#bgv::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(1,0,17,.72),rgba(1,0,17,.55) 45%,rgba(1,0,17,.86));}
/* lift the real page above the video */
body>*{position:relative;z-index:1}
body>header.nav{position:sticky;top:0;z-index:30}   /* must outrank the line above */
/* the ambient canvas would sit over the video and muddy it */
#ambient{display:none!important}
/* the hero art column is redundant when the video is the background */
.hero-art{display:none!important}
.hero{grid-template-columns:1fr!important;text-align:center}
.hero-copy{max-width:680px;margin:0 auto}

/* dark only on this page — the backdrop is a dark video */
#themeToggle{display:none!important}

/* the background IS the video — no second player in the Story section */
.vid-inline{display:none!important}

/* teaser lightbox — the only chrome over the picture is sound + CC */
.lb{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:rgba(1,0,17,.88);backdrop-filter:blur(6px);padding:24px}
.lb-stage{position:relative;width:min(1100px,92vw);aspect-ratio:16/9;border-radius:14px;
  overflow:hidden;background:#000;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.lb-stage iframe{width:100%;height:100%;border:0;display:block;pointer-events:none}
.lb-btn{position:absolute;bottom:14px;width:42px;height:42px;border-radius:100px;cursor:pointer;
  display:grid;place-items:center;border:1px solid rgba(255,188,52,.5);
  background:rgba(1,0,17,.66);color:#FFE9BE;backdrop-filter:blur(6px);padding:0;
  transition:background .2s ease,color .2s ease,border-color .2s ease}
.lb-btn svg{width:19px;height:19px}
.lb-btn:hover{border-color:#FFBC34;color:#fff}
.lb-btn.on{background:#FFBC34;border-color:#FFBC34;color:#1A0616}
.lb-snd{right:14px}
.lb-cc{right:64px}
.lb-x{position:absolute;top:22px;right:24px;width:44px;height:44px;border-radius:100px;cursor:pointer;
  display:grid;place-items:center;border:1px solid rgba(255,255,255,.22);
  background:rgba(1,0,17,.6);color:#fff;padding:0}
.lb-x svg{width:20px;height:20px}
.lb-x:hover{border-color:#fff}
@media(max-width:860px){ .lb{padding:14px} .lb-x{top:14px;right:14px} }

#bgv.dim iframe{opacity:0}