/* Event promo video: section, loop window, dialog. Behaviour: promo-video.js. Loaded in . */ .promo-sec{padding:clamp(56px,8vw,96px) 0;background:var(--void)} .promo-sec .promo-sub{margin-top:12px;color:rgba(244,239,230,.72);font-size:15px;line-height:1.5} .promo-sec .cta{margin-top:22px} .promo-v{position:relative;width:100%;max-width:1100px;margin-top:26px;aspect-ratio:16/9;border-radius:10px;overflow:hidden; background:#000;border:1px solid rgba(244,239,230,.12);box-shadow:0 24px 60px rgba(0,0,0,.45)} .promo-v video,.promo-v iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;display:block} .promo-loop{cursor:pointer} /* "Tap for sound": the one obvious control */ .promo-sound{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:2;display:inline-flex;align-items:center;gap:10px; padding:11px 18px 11px 14px;border-radius:999px;background:rgba(10,9,8,.78);border:1px solid rgba(244,239,230,.28); color:var(--bone);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s ease,border-color .2s ease} .promo-sound:hover,.promo-sound:focus-visible{background:var(--blood);border-color:var(--blood)} .promo-sound:focus-visible{outline:3px solid #c9a24b;outline-offset:3px} .promo-sound-ic{width:18px;height:14px;position:relative;flex:0 0 auto} .promo-sound-ic::before{content:"";position:absolute;left:0;top:4px;width:5px;height:6px;background:currentColor} .promo-sound-ic::after{content:"";position:absolute;left:3px;top:0;border-style:solid;border-width:7px 8px 7px 0;border-color:transparent currentColor transparent transparent} /* pause / play for the muted loop (WCAG 2.2.2) */ .promo-pause{position:absolute;right:12px;top:12px;z-index:2;width:36px;height:36px;border-radius:50%;border:1px solid rgba(244,239,230,.28); background:rgba(10,9,8,.7);color:var(--bone);cursor:pointer;padding:0} .promo-pause::before,.promo-pause::after{content:"";position:absolute;top:11px;width:4px;height:14px;background:currentColor} .promo-pause::before{left:12px}.promo-pause::after{left:20px} .promo-pause.is-paused::before{left:13px;top:10px;width:0;height:0;background:none;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent currentColor} .promo-pause.is-paused::after{display:none} .promo-pause:focus-visible{outline:2px solid #c9a24b;outline-offset:2px} @media (max-width:600px){ .promo-v{border-radius:8px;margin-top:20px} .promo-sound{bottom:10px;padding:9px 14px 9px 11px;font-size:10.5px} .promo-pause{width:32px;height:32px;right:8px;top:8px} .promo-pause::before{top:9px;left:10px}.promo-pause::after{top:9px;left:18px} } /* homepage placement (Alex, stills 2026-09-23): phone = in the hero under the CTAs; desktop = the band after the emblem */ .promo-v.hero-promo{margin:16px 0 0;max-width:none;box-shadow:0 18px 50px rgba(0,0,0,.55)} @media (min-width:681px){.promo-v.hero-promo{display:none}} @media (max-width:680px){.promo-sec.promo-desktop{display:none}} /* dialog */ .promo-modal{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;padding:56px 16px 16px} .promo-modal.on{display:flex} .promo-bd{position:absolute;inset:0;background:rgba(5,4,4,.9)} .promo-box{position:relative;width:min(1100px,100%);aspect-ratio:16/9;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.6)} .promo-stage,.promo-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .promo-x{position:absolute;right:0;top:-48px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(244,239,230,.12); color:var(--bone);font-size:28px;line-height:44px;cursor:pointer} .promo-x:focus-visible{outline:2px solid #c9a24b;outline-offset:2px} html.promo-lock{overflow:hidden} @media (prefers-reduced-motion:reduce){.promo-sound,.promo-pause{transition:none}}