/* r1: Spotlight event hero, One night only, date tiles B, Nearby in miles, closed credits, rotating Home hero.
   Rules: covers never cropped, nothing on the art, controls 44px, no iframes. */
#app:empty{min-height:100vh}
/* ---------- event page: Spotlight hero (art box at the image shape, text below) */
html body .e-hero.r1s{height:auto!important;min-height:0!important;overflow:visible;display:flex;flex-direction:column;background:#000;padding-top:calc(56px + env(safe-area-inset-top,0px))}
html body .e-hero.r1s>.e-bg.r1-spot{position:relative!important;inset:auto!important;width:100%!important;max-width:1100px;margin:0 auto;height:auto!important;aspect-ratio:var(--sar,16/9);max-height:none!important;overflow:hidden;background:#000;transform:none!important;filter:none!important}
html body .e-hero.r1s>.e-bg.r1-spot .p-art,html body .e-hero.r1s>.e-bg.r1-spot .p-art img,html body .e-hero.r1s>.e-bg.r1-spot>picture,html body .e-hero.r1s>.e-bg.r1-spot>picture img{position:absolute!important;inset:0!important;top:0!important;left:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain!important;transform:none!important;filter:none!important;opacity:1!important;margin:0!important;border-radius:0!important;box-shadow:none!important}
html body .e-hero.r1s>.e-bg.r1-spot video.hv{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;z-index:2}
html body .e-hero.r1s>.e-bg.r1-spot:after,html body .e-hero.r1s>.e-bg.r1-spot:before{display:none!important}
html body .e-hero.r1s .e-hero-in{position:relative!important;inset:auto!important;bottom:auto!important;padding:16px 16px 22px!important;max-width:1100px;margin:0 auto;width:100%;box-sizing:border-box}
html body .e-hero.r1s .e-shade{display:none!important}
.r1-ctl{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:0 12px 0 16px;max-width:1100px;margin:0 auto;width:100%;box-sizing:border-box;color:rgba(255,255,255,.72);font:600 12px/1.2 var(--f-body,system-ui)}
html body .e-hero.r1s .r1-ctl .hv-btn{position:static!important;inset:auto!important;width:44px;height:44px;min-width:44px;min-height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff;border:0;opacity:1!important;transform:none!important}
html body .e-hero.r1s .r1-ctl .hv-btn[hidden]{display:grid;visibility:hidden}
html body .e-hero.r1s .r1-ctl .hv-btn svg{width:18px;height:18px}
html body .e-hero.r1s .r1-ctl .hv-btn .i-play{display:none}html body .e-hero.r1s .r1-ctl .hv-btn.paused .i-play{display:block}html body .e-hero.r1s .r1-ctl .hv-btn.paused .i-pause{display:none}
/* ---------- One night only: band under the art, chip under card art */
.r1-ono{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;background:linear-gradient(90deg,var(--hot,#e8553d),#b8321f);color:#fff;font:800 13px/1.1 var(--f-body,system-ui);text-transform:uppercase;letter-spacing:.14em;box-sizing:border-box}
.r1-ono i{width:7px;height:7px;border-radius:50%;background:#fff;flex:none}
.r1-ono span{margin-left:auto;letter-spacing:.06em;font-weight:700;opacity:.92}
.e-hero.r1s .r1-ono{width:100%;max-width:1100px;margin:0 auto}
.pill.r1-ono-c,.r1-ono-c{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:4px;background:var(--hot,#e8553d);color:#fff;font:800 10.5px/1 var(--f-body,system-ui);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
/* ---------- More dates: tiles B */
.es-chip.r1-t{display:inline-flex;align-items:center;gap:10px;min-height:68px;padding:6px 12px 6px 6px}
.es-chip.r1-t>b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.es-chip.r1-t{position:relative}
.r1-tile{position:relative;flex:none;width:56px;height:64px;border-radius:10px;overflow:hidden;display:grid;place-items:center;background:#222;color:#fff}
.r1-tb{position:absolute;inset:-14px;background-size:cover;background-position:center;filter:blur(9px) brightness(.62) saturate(1.3)}
.r1-tile:after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 55%,rgba(0,0,0,.15),rgba(0,0,0,.55))}
.r1-tn{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;line-height:1}
.r1-tn small{font:800 10px/1 var(--f-body,system-ui);text-transform:uppercase;letter-spacing:.1em;opacity:.9}
.r1-tn b{font:800 24px/1 var(--f-body,system-ui);margin-top:3px}
.es-chip.r1-t.on .r1-tile,.es-chip.r1-t[aria-current] .r1-tile{outline:2px solid var(--hot,#e8553d);outline-offset:2px}
/* ---------- Nearby + food tag */
.mini-m.r1-mm{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.r1-tag{font:800 10px/1 var(--f-body,system-ui);text-transform:uppercase;letter-spacing:.08em;color:var(--hot,#e8553d)}
.r1-mi{font-weight:600}
/* ---------- credits tab (closed by default) */
details.r1-cr{margin-top:10px}
details.r1-cr>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:700}
/* ---------- Home hero r1: 16:9 stage, text below, stacked slides (no shift) */
html body .hero.r1h{position:relative!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:hidden;background:#0b0b0d;color:#fff;padding-top:calc(56px + env(safe-area-inset-top,0px))}
html body .hero.r1h .r1-slides{display:grid}
html body .hero.r1h .slide{grid-area:1/1;position:relative!important;inset:auto!important;height:auto!important;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s;display:block}
html body .hero.r1h .slide.on{opacity:1;visibility:visible;transition:opacity .45s ease}
html body .hero.r1h .r1-stage{display:block;position:relative;width:100%;max-width:1100px;margin:0 auto;aspect-ratio:16/9;overflow:hidden;background:#000}
html body .hero.r1h .r1-stage .bg{position:absolute!important;inset:0!important;height:auto!important;transform:none!important}
html body .hero.r1h .r1-stage .p-fill,html body .hero.r1h .r1-stage .p-fill img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;filter:blur(22px) brightness(.55) saturate(1.2)!important;transform:scale(1.15)!important;opacity:1!important}
html body .hero.r1h .r1-stage .p-art,html body .hero.r1h .r1-stage .p-art img{position:absolute!important;inset:0!important;top:0!important;width:100%!important;height:100%!important;max-height:none!important;max-width:none!important;object-fit:contain!important;transform:none!important;filter:none!important;opacity:1!important;margin:0!important;box-shadow:none!important;border-radius:0!important;left:0!important}
html body .hero.r1h .r1-stage video.hv{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;z-index:2}
html body .hero.r1h .r1-stage .bg:before,html body .hero.r1h .r1-stage .bg:after{display:none!important}
html body .hero.r1h .shade,html body .hero.r1h .slide>.hv-btn{display:none!important}
html body .hero.r1h .hero-in.r1-in{position:relative!important;inset:auto!important;bottom:auto!important;left:auto!important;right:auto!important;transform:none!important;padding:14px 16px 6px!important;max-width:1100px;margin:0 auto;box-sizing:border-box;opacity:1}
html body .hero.r1h .r1-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 0 8px;min-height:22px}
html body .hero.r1h .r1-k,html body .hero.r1h .r1-age{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:4px;background:rgba(255,255,255,.12);font:800 10.5px/1 var(--f-body,system-ui);text-transform:uppercase;letter-spacing:.08em}
html body .hero.r1h .r1-k.new{background:#fff;color:#111}
html body .hero.r1h .r1-in h1{margin:0 0 6px;font-size:clamp(24px,7vw,40px)!important;line-height:1.02;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.04em}
html body .hero.r1h .r1-in .hero-meta{margin:0!important;min-height:1.3em}
html body .hero.r1h .r1-in .hero-cta{margin-top:12px!important;display:flex;gap:10px;align-items:center}
html body .hero.r1h .r1-in .hero-cta .btn.play{height:44px!important}
html body .hero.r1h .r1-in .hero-cta .btn.round.save{width:44px!important;height:44px!important}
html body .hero.r1h .r1-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;max-width:1100px;margin:0 auto;padding:4px 10px 8px 16px;box-sizing:border-box}
html body .hero.r1h .hero-dots{position:static!important;inset:auto!important;transform:none!important;display:flex;gap:2px;margin:0}
html body .hero.r1h .hero-dots button{width:28px;height:44px;padding:0;background:none;border:0;display:grid;place-items:center}
html body .hero.r1h .hero-dots button i{display:block;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);animation:none!important;transform:none!important}
html body .hero.r1h .hero-dots button.on i{background:#fff;width:18px;border-radius:4px}
html body .hero.r1h .r1-pause{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;flex:none}
html body .hero.r1h .r1-pause svg{width:18px;height:18px}
html body .hero.r1h .r1-pause .i-play,html body .hero.r1h .r1-pause.paused .i-pause{display:none}
html body .hero.r1h .r1-pause.paused .i-play{display:block}
html body .hero.r1h .r1-prog{height:3px;background:rgba(255,255,255,.12);max-width:1100px;margin:0 auto}
html body .hero.r1h .r1-prog i{display:block;height:100%;width:100%;background:var(--hot,#e8553d);transform-origin:0 50%;transform:scaleX(0);animation:r1prog 6s linear forwards}
html body .hero.r1h.r1-paused .r1-prog i,html body .hero.r1h.hero-still .r1-prog i{animation:none;transform:scaleX(0)}
@keyframes r1prog{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){html body .hero.r1h .slide{transition:none}html body .hero.r1h .r1-prog{display:none}}
/* the top bar, vibe search and See all events sit above the stage, never on it */
html body .hero.r1h{padding-top:calc(64px + env(safe-area-inset-top,0px))}
html.has-vbar body .hero.r1h{padding-top:calc(120px + env(safe-area-inset-top,0px))}
@media (max-width:760px){html:has(#seeAll) body .hero.r1h{padding-top:calc(164px + env(safe-area-inset-top,0px))}}
html body .hero.r1h .r1-stage img,html body .e-hero.r1s .r1-spot img{animation:none!important}
html body .hero.r1h .r1-bar{align-items:center}
html body .hero.r1h .r1-bar .hero-dots{align-items:center;height:44px}
.e-hero-in>.r1-ono{margin:0 -16px 12px;border-radius:0}
/* r1b: card titles clamp to 2 lines with an ellipsis (never a mid word cut) */
html body .m-track .mini h4{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;text-overflow:ellipsis;white-space:normal;overflow-wrap:normal;word-break:normal;hyphens:none}
/* r1b (Critique WebKit): chips sit on plain black under the art in the spotlight layout, so no backdrop blur (WebKit drops blurred layers next to a playing video) */
#ev .e-hero.r1s .e-chip,#ev .e-hero:has(.r1-spot) .e-chip{-webkit-backdrop-filter:none;backdrop-filter:none;background:#141418}
/* r1b (Critique): card titles everywhere clamp to 2 lines with an ellipsis, never a mid word cut */
html body .ht-card .ht-txt h3,html body a.mini h4,html body .mini h4,html body .card h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;text-overflow:ellipsis;white-space:normal;overflow-wrap:normal;word-break:normal;hyphens:none}
/* r1b (Critique): hero Pause and dots sit 8px higher so they clear the bottom nav */
html body .hero.r1h .r1-bar{padding-bottom:16px}
/* r1b (Critique): header More button is a full 44x44 tap target */
html body .sn-more-btn{min-width:44px;min-height:44px}
@media (max-width:760px){html body .sn-more-btn{width:44px;height:44px}}

/* r1c: short phones, stage a little shorter so the dots and Pause row clear the tab bar (contain, never cropped) */
html body .hero.r1h.r1-fit .r1-stage{aspect-ratio:auto;height:var(--r1sh)}
html body .hero.r1h.r1-fit .r1-stage video.hv{object-fit:contain!important}
/* r1c: the dots row is now on the first screen at 390x664, so each dot gets a full 44px tap target (7 slides fit beside Pause) */
html body .hero.r1h .r1-bar .hero-dots{gap:0;flex:1 1 auto;min-width:0}
html body .hero.r1h .r1-bar .hero-dots button{width:44px;flex:0 1 44px;min-width:0}