/* OUT2 base — shared tokens & components. Themes override the variables. */
:root{--bg:#0b0b0c;--fg:#f4f2ee;--muted:#9b978f;--line:rgba(255,255,255,.12);--card:#17171a;--accent:#f4f2ee;--hot:#e8553d;--reme:#d9b26f;
  --f-display:"Inter Tight",Inter,system-ui,sans-serif;--f-body:Inter,system-ui,-apple-system,sans-serif;--r:6px;--pad:clamp(18px,4vw,56px);--ease:cubic-bezier(.2,.7,.1,1)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.55 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3,h4{font-family:var(--f-display);margin:0;line-height:1.05;letter-spacing:-.01em}
p{margin:0}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
html:not(.ready) #app{opacity:0}#app{transition:opacity .5s var(--ease)}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:28px;padding:14px var(--pad);transition:background .35s,backdrop-filter .35s,box-shadow .35s}
.nav.solid{background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 1px 0 var(--line)}
.logo{font:800 22px/1 var(--f-display);letter-spacing:.14em}.logo .dot{color:var(--hot)}.logo .two{color:var(--hot);letter-spacing:0;margin-left:-.03em} /* OUT2 wordmark: accent 2 */
.nav-links{display:flex;gap:22px;font-size:14px;color:var(--muted)}.nav-links a:hover{color:var(--fg)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:99px;padding:7px 12px;width:220px;transition:border-color .2s,width .3s var(--ease)}
.search:focus-within{border-color:var(--fg);width:260px}.search svg{width:16px;height:16px;flex:none;opacity:.7}
.search input{all:unset;font-size:14px;width:100%}.search input::placeholder{color:var(--muted)}
.nav-saved{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line)}.nav-saved svg{width:18px;height:18px}
.nav-saved b{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:var(--hot);color:#fff;font:700 11px/18px var(--f-body);text-align:center;padding:0 4px}.nav-saved b:empty{display:none}

/* pills & save */
.pill{display:inline-flex;align-items:center;gap:4px;font:600 10.5px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:3px;white-space:nowrap}
.pill.reme{background:var(--reme);color:#1a1408}.pill.sample{background:transparent;border:1px solid currentColor;opacity:.6}.pill.hot{background:var(--hot);color:#fff}.pill.trip{background:#0e6e74;color:#fff}
.save{position:absolute;top:10px;right:10px;z-index:3;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.35);backdrop-filter:blur(8px);color:#fff;transition:transform .2s var(--ease),background .2s}
.save svg{width:18px;height:18px}.save:hover{transform:scale(1.1)}.save.on{color:var(--hot);background:#fff}
.save.on svg{animation:pop .35s var(--ease)}@keyframes pop{50%{transform:scale(1.35)}}
.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 24px;border-radius:4px;font:600 15px/1 var(--f-body);transition:transform .15s,background .2s,opacity .2s;white-space:nowrap}
.btn:active{transform:scale(.97)}.btn svg{width:20px;height:20px}
.btn.save{position:static;width:auto;height:48px;border-radius:4px;backdrop-filter:none}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}*{animation:none!important;transition:none!important}}

/* toast */
#toast{position:fixed;left:50%;bottom:84px;transform:translate(-50%,20px);opacity:0;background:var(--fg);color:var(--bg);padding:10px 18px;border-radius:99px;font:600 14px var(--f-body);z-index:99;transition:.3s var(--ease);pointer-events:none}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* design switcher (prototype only) */
.switcher{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:4px;padding:5px;border-radius:99px;background:rgba(20,20,22,.82);backdrop-filter:blur(14px);color:#fff;font:600 12.5px var(--f-body);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.switcher span{padding:0 10px 0 12px;opacity:.55;text-transform:uppercase;letter-spacing:.1em;font-size:10.5px}
.switcher a{padding:8px 14px;border-radius:99px;opacity:.75;transition:.2s}.switcher a:hover{opacity:1}.switcher a.on{background:#fff;color:#111;opacity:1}

/* results overlay */
#results{position:relative;z-index:5;padding:110px var(--pad) 40px;min-height:70vh;background:var(--bg)}
body.has-results #app{display:none}
.res-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.res-head h2{font-size:clamp(28px,4vw,44px)}
.res-x{font-size:34px;width:48px;height:48px;border-radius:50%;border:1px solid var(--line)}
.res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.res-grid .card{position:relative;width:auto!important}
.end{color:var(--muted);text-align:center;padding:40px 0 10px;font-size:14px}
.sentinel{min-height:2px}

/* footer */
.foot{border-top:1px solid var(--line);padding:48px var(--pad) 110px;color:var(--muted);font-size:14px}
.foot-in{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;max-width:1400px;margin:0 auto}.foot .logo{color:var(--fg)}.foot p{max-width:360px;margin-top:10px}
.foot-links{display:flex;flex-direction:column;gap:6px;text-align:right}.foot-links a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}

/* chips (editorial + mosaic) */
.chips-bar{position:sticky;top:66px;z-index:20;padding:12px 0;background:var(--bg)}
.chips,.regions{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px}.chips::-webkit-scrollbar,.regions::-webkit-scrollbar{display:none}
.regions{margin-top:10px}
.chip,.rg{flex:none;padding:9px 16px;border-radius:99px;border:1px solid var(--line);font-size:14px;font-weight:500;transition:.2s}
.chip:hover,.rg:hover{border-color:var(--fg)}.chip.on,.rg.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.rg{border:0;padding:6px 2px;margin-right:14px;border-radius:0;color:var(--muted);border-bottom:2px solid transparent}.rg.on{background:none;color:var(--fg);border-color:var(--fg)}

@media (max-width:760px){
  .nav{gap:12px;padding:12px 16px}.nav-links{display:none}.search{width:40px;padding:9px 11px;border-radius:50%}.search input{width:0}
  .search:focus-within{width:min(64vw,260px);border-radius:99px}.search:focus-within input{width:100%}
  .switcher{bottom:12px;font-size:11.5px}.switcher span{display:none}.switcher a{padding:8px 11px}
  .foot-links{text-align:left}
}
.switcher a{white-space:nowrap}
@media (max-width:760px){.switcher a{font-size:11px;padding:8px 10px}}
/* language switch */
.lang{display:flex;border:1px solid var(--line);border-radius:99px;padding:2px;font:600 11.5px/1 var(--f-body);letter-spacing:.06em}
.lang button{padding:7px 9px;border-radius:99px;opacity:.6;transition:.2s}.lang button:hover{opacity:1}.lang button.on{opacity:1;background:var(--fg);color:var(--bg)}
.lang:empty{display:none}
@media (max-width:760px){.lang button{padding:7px 7px}}
.listen-chip{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:4px 9px;border-radius:99px;background:rgba(10,10,10,.72);backdrop-filter:blur(6px);color:#1ed760;font:700 10.5px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border:1px solid rgba(30,215,96,.35)}
.listen-chip:hover{background:#1ed760;color:#0b0b0b}
/* poster-style hero for official key art with text */
.e-bg.poster .p-fill,.slide .bg.poster .p-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(40px) saturate(1.2) brightness(.5);transform:scale(1.15);animation:none}
.e-bg.poster .p-art,.slide .bg.poster .p-art{position:absolute;right:var(--pad,40px);top:50%;transform:translateY(-50%);width:auto!important;height:auto!important;max-width:min(52vw,820px);max-height:72%;object-fit:contain!important;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:none}
@media (max-width:760px){.e-bg.poster .p-art,.slide .bg.poster .p-art{left:50%;right:auto;top:84px;transform:translateX(-50%);max-width:88vw;max-height:38%}}
.slide.on .bg.poster img{animation:none}.slide .bg.poster .p-art{max-height:62%;right:6vw}
.e-bg.poster .p-art{top:96px;transform:none;max-height:44%;max-width:min(46vw,760px)}
.slide .bg.poster .p-art{top:96px;transform:none;max-height:42%}
@media (max-width:760px){.e-bg.poster .p-art,.slide .bg.poster .p-art{top:80px;transform:translateX(-50%);max-height:34%}}
/* geo line: 'Showing picks near Miami · Change' (js/geo.js + home.js) */
.geo-line{position:relative;z-index:3;display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 auto;padding:10px var(--pad,20px) 2px;max-width:1400px;font-size:13.5px;color:var(--muted)}
.geo-line svg{width:15px;height:15px;color:var(--reme,#d9b26f)}
.geo-line span{color:var(--fg)}
.geo-change{background:none;border:0;padding:4px 2px;color:var(--fg);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.geo-change:focus-visible{outline:2px solid var(--reme,#d9b26f);outline-offset:2px;border-radius:4px}
.chips-bar.geo-flash{animation:geoflash 1.6s ease}
@keyframes geoflash{0%,100%{box-shadow:none}20%,60%{box-shadow:0 0 0 2px var(--reme,#d9b26f);border-radius:14px}}
@media (prefers-reduced-motion:reduce){.chips-bar.geo-flash{animation:none;outline:2px solid var(--reme,#d9b26f)}}

/* r31 heroVideo: poster <img> underneath, muted clip fades in once playing; small pause control */
.e-bg video.hv,.slide .bg video.hv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease;animation:none;pointer-events:none;z-index:1}
.e-bg video.hv.on,.slide .bg video.hv.on{opacity:1}
.hv-btn{position:absolute;z-index:6;right:14px;top:64px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.45);color:#fff;display:grid;place-items:center;padding:0;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hv-btn[hidden]{display:none}.hv-btn svg{width:14px;height:14px}.hv-btn .i-play{display:none}.hv-btn.paused .i-play{display:block}.hv-btn.paused .i-pause{display:none}
.hv-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (prefers-reduced-motion: reduce){video.hv{display:none}}
.hv-credit{position:absolute;z-index:6;right:12px;bottom:8px;margin:0;font-size:10px;line-height:1;letter-spacing:.02em;color:rgba(255,255,255,.72);text-shadow:0 1px 2px rgba(0,0,0,.6);pointer-events:none}
.hv-credit.hv-i{pointer-events:auto;display:flex;align-items:center;gap:6px;padding:0;border:0;background:none;font:inherit;font-size:10px;color:rgba(255,255,255,.85);cursor:pointer;-webkit-tap-highlight-color:transparent;max-width:none!important}
.hv-i .hv-i-ic{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font:italic 700 11px/1 Georgia,serif;color:#fff;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.4);text-shadow:none;position:relative}
.hv-i .hv-i-ic::after{content:'';position:absolute;inset:-12px}
.hv-i .hv-i-t{display:none;white-space:nowrap;padding:3px 8px;border-radius:10px;background:rgba(0,0,0,.55)}
.hv-i[aria-expanded="true"] .hv-i-t{display:block}
.hv-i:focus-visible .hv-i-ic{outline:2px solid #fff;outline-offset:2px}
.sp{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:14px}
.sp-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:7px 16px 7px 7px;border-radius:99px;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.5);color:#fff;font:inherit;text-align:left;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sp-ic{flex:none;width:30px;height:30px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center}.sp-ic svg{width:14px;height:14px}.sp-btn .i-pause,.sp-btn.on .i-play{display:none}.sp-btn.on .i-pause{display:block}
.sp-btn.wait .sp-ic{animation:sp-pulse 1s ease-in-out infinite}@keyframes sp-pulse{50%{opacity:.55}}
.sp-t{display:flex;flex-direction:column;min-width:0;line-height:1.15}.sp-t b{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:56vw}.sp-t small{font-size:11px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--hot,#ff4d6d);transform-origin:left;transform:scaleX(var(--sp,0));transition:transform .25s linear}
.sp-btn:focus-visible,.sp-am:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sp-am{font-size:12px;color:rgba(255,255,255,.85);text-decoration:underline;text-underline-offset:2px}
/* Vibe Search (js/vibe.js) */
.vibe-entry{position:relative;z-index:3;max-width:1400px;margin:26px auto 30px;padding:22px 22px 18px;border-radius:14px;border:1px solid color-mix(in srgb,var(--hot) 45%,var(--line));background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--hot) 30%,var(--card,#17171a)),var(--card,#17171a) 62%);color:var(--fg)}
.rows>.vibe-entry{margin-left:var(--pad);margin-right:var(--pad)}
.vibe-entry .ve-k{font:700 10.5px Inter;letter-spacing:.14em;text-transform:uppercase;color:var(--hot);margin:0 0 6px}
.vibe-entry .ve-h{font-family:var(--f-display);font-size:clamp(30px,5vw,48px);line-height:1;margin:0 0 6px}
.vibe-entry .ve-sub{margin:0 0 14px;color:var(--muted);font-size:14px}
.ve-box{display:flex;align-items:center;gap:10px;background:var(--bg);border:1.5px solid color-mix(in srgb,var(--fg) 30%,transparent);border-radius:99px;padding:6px 6px 6px 16px;max-width:640px}
.ve-box:focus-within{border-color:var(--hot)}.ve-box svg{width:18px;height:18px;flex:none;opacity:.7}
.ve-box input{all:unset;flex:1;min-width:0;font-size:16px;padding:8px 0}.ve-box input::placeholder{color:var(--muted)}
.ve-box button{all:unset;cursor:pointer;background:var(--hot);color:#fff;font:700 14px Inter;padding:10px 18px;border-radius:99px}
.ve-ex{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ve-ex button{all:unset;cursor:pointer;font-size:13px;padding:7px 12px;border-radius:99px;border:1px solid var(--line);background:color-mix(in srgb,var(--fg) 6%,transparent)}
.ve-ex button:hover,.ve-ex button:focus-visible{border-color:var(--hot)}
.vs-read{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-10px 0 20px}
.vs-read .vs-k{font-size:13px;color:var(--muted);margin-right:2px}
.vs-chip{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:7px;font:600 13px Inter;padding:6px 8px 6px 12px;border-radius:99px;border:1px solid color-mix(in srgb,var(--hot) 55%,var(--line));background:color-mix(in srgb,var(--hot) 16%,transparent)}
.vs-chip span{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:color-mix(in srgb,var(--fg) 14%,transparent);font-size:13px;line-height:1}
.vs-chip:hover span,.vs-chip:focus-visible span{background:var(--hot);color:#fff}
.vs-chip.vs-date,.vs-chip.vs-price{border-color:color-mix(in srgb,var(--reme,#d9b26f) 70%,var(--line));background:color-mix(in srgb,var(--reme,#d9b26f) 16%,transparent)}
.vs-chip.vs-place,.vs-chip.vs-region{border-color:color-mix(in srgb,#4fb3d9 70%,var(--line));background:color-mix(in srgb,#4fb3d9 15%,transparent)}
.vs-chip.vs-text{border-style:dashed;background:transparent}
.vs-none{margin:0 0 18px;font-size:15px;color:var(--muted)}.vs-none b{color:var(--fg)}
@media (max-width:768px){.vibe-entry{margin:18px 14px 24px;padding:18px 16px 16px}.rows>.vibe-entry{margin-left:14px;margin-right:14px}.ve-ex button{font-size:12.5px}}

/* ===== r34 Live Tonight takeover (js/tonight.js) ===== */
.tnx{position:relative;padding:calc(84px + env(safe-area-inset-top)) var(--pad) 28px;background:radial-gradient(120% 70% at 15% 0%,color-mix(in srgb,var(--hot) 22%,transparent),transparent 60%),linear-gradient(180deg,#120c18,var(--bg));border-bottom:1px solid var(--line)}
.tnx-in{max-width:1200px;margin:0 auto}
.tnx-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}
.tnx-k{display:flex;align-items:center;gap:8px;margin:0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tnx-head h2{font-family:var(--f-display);font-size:clamp(40px,9vw,76px);line-height:.95;margin:6px 0 4px;letter-spacing:-.03em}
.tnx-lede{margin:0;color:var(--fg);opacity:.85;font-size:15px}
.tnx-tg{flex:none;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--fg);border-radius:999px;padding:9px 14px;font:600 13px var(--f-body);cursor:pointer}
.tnx-tg:hover{background:rgba(255,255,255,.12)}
.tnx-pulse{display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;background:var(--hot);box-shadow:0 0 0 0 color-mix(in srgb,var(--hot) 60%,transparent);animation:tnPulse 1.8s infinite;vertical-align:middle}
.tnx-sec{margin-top:18px}
.tnx-h{display:flex;align-items:center;gap:8px;font-family:var(--f-display);font-size:20px;margin:0 0 2px}
.tnx-n{font:600 12px var(--f-body);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 8px}
.tnx-sub{margin:0 0 6px;color:var(--muted);font-size:13px}
.tnx-rg h4{margin:10px 0 6px;font:700 11px var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tnx-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px}
.tnx-it{display:flex;gap:12px;align-items:center;padding:8px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:inherit;text-decoration:none;min-width:0}
.tnx-it:hover{background:rgba(255,255,255,.08)}
.tnx-now{border-color:color-mix(in srgb,var(--hot) 45%,var(--line))}
.tnx-img{flex:none;width:58px;height:58px;border-radius:9px;overflow:hidden;background:#222}
.tnx-img img{width:100%;height:100%;object-fit:cover;display:block}
.tnx-b{min-width:0}
.tnx-b h3{margin:1px 0;font-size:15px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tnx-st{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:0;font-size:12px;color:var(--muted)}
.tnx-st b{color:var(--fg)}.tnx-now .tnx-st b{color:var(--hot)}.tnx-soon .tnx-st b{color:var(--reme)}
.tnx-st .tnx-pulse{width:8px;height:8px}
.tnx-w{margin:0;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tnx-more,.tnx-all{align-self:center;font-size:13px;color:var(--muted);padding:6px 4px;text-decoration:none}
.tnx-all{display:inline-block;margin-top:14px;color:var(--fg);font-weight:600}
.tnx-empty{color:var(--muted)}
.tnx.tnx-in-ov{padding:0;background:none;border:0}
.tnx-in-ov .tnx-sec:first-child{margin-top:4px}
.tnx-in-ov .tnx-list{grid-template-columns:1fr}
@media (max-width:760px){.tnx{padding-top:calc(76px + env(safe-area-inset-top))}.tnx-head{flex-direction:column;align-items:flex-start;gap:10px}.tnx-list{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.tnx-pulse{animation:none}}
@media (max-width:760px){.tnx.tnx-in-ov{padding:0}}

/* r36 (iOS crash fix): on phones, small chips/buttons over card images had backdrop-filter:blur — ~650 visible
   compositing layers on the homepage, each with its own offscreen buffer on iOS WebKit. Drop the blur on these
   (most already sit on an opaque background) and darken the translucent ones a bit so they stay legible. */
@media (max-width: 760px), (hover: none) {
  .save, .pill, .sm-chip, .xw, .listen-chip, .hh-type, .hh-live, .hh-sample, .gm, .wkd-why, .tp-u, .hv-btn, .b-cap, .card .btn.ghost {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .save { background: rgba(0,0,0,.52); }
  :is(a.card,a.pin,a.g-card,a.mf-item) .sm-chip { background: rgba(16,16,16,.74); }
  .xw-card .xw { background: rgba(10,10,10,.74); }
  .hh-type, .hh-live, .hh-sample { background-color: rgba(0,0,0,.66); }
}
/* r37 vibe ranking note + Sort by near me */
.vs-read .vs-rank{font-size:12px;color:var(--muted);letter-spacing:.02em;padding-left:10px;border-left:1px solid var(--line);margin-left:2px}
.vs-chip.vs-near{padding:6px 12px;gap:6px;border-color:var(--line);background:none;color:var(--fg)}
.vs-chip.vs-near svg{width:14px;height:14px}
.vs-chip.vs-near:hover{border-color:var(--hot)}
.vs-chip.vs-near[disabled]{opacity:.5;cursor:default}
/* r37 sound-preview nudge: one soft glow, twice */
.sp-btn.sp-glow{animation:spGlow 1.3s ease-in-out 2}
@keyframes spGlow{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0);border-color:rgba(255,255,255,.3)}45%{box-shadow:0 0 0 6px rgba(255,255,255,.14),0 0 22px rgba(255,90,60,.45);border-color:rgba(255,255,255,.75)}}
@media (prefers-reduced-motion:reduce){.sp-btn.sp-glow{animation:none}}

/* r43 declutter vibe: slim 'What's the vibe?' bar; examples + sub line only once tapped */
.vibe-entry.ve-slim{margin:4px auto 22px;padding:0;border:0;background:none;border-radius:0}
.vibe-entry.ve-slim .ve-k,.vibe-entry.ve-slim .ve-h{display:none}
.vibe-entry.ve-slim .ve-sub,.vibe-entry.ve-slim .ve-ex{display:none}
.vibe-entry.ve-slim .ve-box{max-width:720px;padding:4px 5px 4px 16px;background:var(--card,#17171a);border:1.5px solid color-mix(in srgb,var(--hot) 45%,var(--line));box-shadow:0 0 0 0 transparent;transition:border-color .2s,box-shadow .2s}
.vibe-entry.ve-slim .ve-lab{flex:none;font:700 14.5px/1 var(--f-body,Inter),sans-serif;color:var(--fg);white-space:nowrap}
.vibe-entry.ve-slim .ve-box input{font-size:15px;padding:9px 0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.vibe-entry.ve-slim .ve-box button{padding:9px 16px;font-size:13.5px;opacity:0;pointer-events:none;width:0;padding-left:0;padding-right:0;overflow:hidden;transition:opacity .2s}
.vibe-entry.ve-slim.ve-open .ve-box{border-color:var(--hot);box-shadow:0 0 0 4px color-mix(in srgb,var(--hot) 18%,transparent)}
.vibe-entry.ve-slim.ve-open .ve-box button{opacity:1;pointer-events:auto;width:auto;padding:9px 16px}
.vibe-entry.ve-slim.ve-open .ve-lab{display:none}
.vibe-entry.ve-slim.ve-open .ve-sub{display:block;margin:10px 4px 0;font-size:13px}
.vibe-entry.ve-slim.ve-open .ve-ex{display:flex;margin-top:10px}
@media (max-width:768px){.vibe-entry.ve-slim{margin:2px 16px 18px}.rows>.vibe-entry.ve-slim{margin-left:16px;margin-right:16px}.vibe-entry.ve-slim .ve-lab{font-size:14px}.vibe-entry.ve-slim .ve-box input{font-size:16px}}
@media (prefers-reduced-motion:reduce){.vibe-entry.ve-slim .ve-box,.vibe-entry.ve-slim .ve-box button{transition:none}}
/* r43 declutter hero: round planner icon next to the heart; poster slides on phones keep the art above the text */
.hero-cta .btn.night-go.night-ico{font-size:19px;line-height:1;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid color-mix(in srgb,#b79cff 70%,transparent);box-shadow:0 0 18px rgba(124,92,214,.35)}
.hero-cta .btn.night-go.night-ico span{transform:translateY(-1px)}
@media (max-width:760px){.slide:has(.bg.poster) .hero-in h1{font-size:clamp(28px,8.4vw,34px)}.slide:has(.bg.poster) .hero-in .eyebrow>span:last-child{display:none}
  .slide .bg.poster .p-art{left:50%!important;right:auto!important;transform:translateX(-50%)!important;max-width:calc(100vw - 32px)!important}
  .hero-cta{gap:10px}}

/* r43 declutter icos: heart + Make me a night stay side by side */
.cta-icos{display:inline-flex;align-items:center;gap:10px}
@media(max-width:420px){.hero-cta{gap:10px}.hero-cta .btn:not(.round){padding-left:14px;padding-right:14px}.cta-icos{gap:8px}}
/* r43 pill: labeled Plan my night pill in the hero action row (replaces the icon-only moon) */
.hero-cta .btn.night-go.night-pill{width:auto;height:auto;min-height:40px;padding:8px 13px 8px 11px;gap:6px;font-size:13.5px;font-weight:700;white-space:nowrap;border-radius:999px;background:rgba(40,24,80,.55);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero-cta .btn.night-go.night-pill span{font-size:15px;transform:none}
.hero-cta .btn.night-go.night-pill b{font-weight:700}
@media(max-width:420px){.hero-cta .btn.night-go.night-pill{padding:7px 11px 7px 9px;font-size:13px;min-height:38px}}
/* r43hv1: homepage hero video credit sits under the pause button (top-right), not under the chip row / vibe bar that overlap the slide bottom */
#hero .slide .hv-credit{top:106px;bottom:auto;right:14px;max-width:46vw;text-align:right}
/* r44t trust line (homepage): quiet, inside the hero */
.trust-line{margin:10px 0 0;font:500 12px/1.3 Inter,system-ui,sans-serif;letter-spacing:.02em;opacity:.72}
#hero>.trust-line{position:absolute;z-index:3;right:var(--pad);bottom:calc(clamp(120px,18vh,180px) - 26px);margin:0;color:#fff;opacity:.66;pointer-events:none;text-shadow:0 1px 8px rgba(0,0,0,.5)}
@media (max-width:760px){#hero>.trust-line{left:var(--pad);right:auto;bottom:36px;font-size:11.5px}}
/* r58 homeorder trim T1 (vetoable): phones drop the 'Updated weekly · picks for this weekend' line over the hero dots; the This weekend card's 'Dropped Thu' tag already says it */
@media (max-width:760px){#hero>.trust-line{display:none}}
/* r44t: "Sample" labels are for previews only. On the production host (html.env-prod, set in js/core.js) they never show */
html.env-prod .pill.sample,html.env-prod .hh-sample,html.env-prod [data-i18n="foot.note"]{display:none!important}
/* r44h (editor): calmer hero on phones — title ~12% smaller (2-line fit in home.js), quieter, smaller eyebrow badges,
   planner pill on slide 1 only and it fades out (js/night.js heroPlanFade) */
@media (max-width:760px){
  html .hero .slide .hero-in h1{font-size:clamp(28px,9vw,35px);line-height:.97}
  html .hero .slide:has(.bg.poster) .hero-in h1{font-size:clamp(25px,7.4vw,29px)}
  html .hero .hero-in .eyebrow{gap:6px}
  html .hero .hero-in .eyebrow .pill{font-size:9px;padding:3.5px 6px;letter-spacing:.07em;border-radius:3px}
  html .hero .hero-in .eyebrow>span:last-child{font-size:10px}
}
html .hero .hero-in .eyebrow .pill.reme{background:color-mix(in srgb,var(--reme,#d9b26f) 16%,rgba(0,0,0,.25));color:#eed9a8;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--reme,#d9b26f) 45%,transparent);font-weight:600}
.hero-cta .btn.night-go{transition:opacity .55s ease,transform .55s ease}
.hero-cta .btn.night-go.nt-fade{opacity:0;transform:translateX(-10px);pointer-events:none}
@media (prefers-reduced-motion:reduce){.hero-cta .btn.night-go{transition:opacity .2s linear}.hero-cta .btn.night-go.nt-fade{transform:none}}
/* r60 dayfeed: day-grouped feeds (homepage Explore #gridX, all.html). Each group is its own block, so its header sticks just under
   the feed's sticky filter bar (--df-base from js/core.js daySticky, + the animated --vbar-h) and the next group's header pushes it up. */
.masonry.df{display:block;columns:auto}
.df-g{position:relative}
.df-g+.df-g{margin-top:22px}
.df-grid{margin-top:0}
.df-h{position:sticky;top:calc(var(--df-base,60px) + var(--vbar-h,0px));z-index:6;display:flex;align-items:baseline;gap:8px;min-width:0;margin:0 0 10px;padding:9px 0 8px;
  font:600 17px/1.2 Fraunces,Georgia,serif;letter-spacing:-.005em;color:var(--fg);
  background:linear-gradient(to bottom,color-mix(in srgb,var(--bg) 94%,transparent) 70%,color-mix(in srgb,var(--bg) 0%,transparent));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.df-h .df-t{white-space:nowrap}
.df-h .df-s{font:500 13px/1.2 Inter,system-ui,sans-serif;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.df-h .df-n{margin-left:auto;flex:none;font:500 11px/1 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);opacity:.8}
.df-h.df-now .df-t::before{content:'';display:inline-block;width:6px;height:6px;margin:0 8px 0 1px;border-radius:50%;vertical-align:.18em;background:var(--reme,#d9b26f);box-shadow:0 0 0 0 color-mix(in srgb,var(--reme,#d9b26f) 50%,transparent);animation:dfPulse 2.8s ease-out infinite}
@keyframes dfPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--reme,#d9b26f) 45%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}
@media (min-width:900px){.df-h{font-size:21px;padding:12px 0 10px;margin-bottom:14px}.df-h .df-s{font-size:14px}.df-g+.df-g{margin-top:34px}}
@media (prefers-reduced-motion:reduce){.df-h.df-now .df-t::before{animation:none}}
/* all.html */
.ap-grid.df{display:block}
.ap-gi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
@media (min-width:700px){.ap-gi{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 18px}}@media (min-width:1100px){.ap-gi{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* r75 photo credit "i" (js/core.js) */
.ci-hid{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}
.ci-b{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;font:italic 700 11px/1 Georgia,serif;color:#fff;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.45);cursor:pointer;position:relative;vertical-align:middle;-webkit-tap-highlight-color:transparent;z-index:5;flex:none;text-decoration:none}
.ci-b::after{content:'';position:absolute;inset:-12px}
.ci-b:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.ci-b.ci-at-photoCredits,.ci-b.ci-at-vn-cr,.ci-b.ci-at-lu-cr{color:var(--muted,#888);background:transparent;border-color:currentColor;margin:8px 2px 0}
.ci-b.ci-at-xh-cr{margin-top:6px;color:var(--muted,#888);background:transparent;border-color:currentColor}
.vw .bb-big .ci-b.ci-at-bb-cr,.bb-band .ci-b.ci-at-bb-cr{position:absolute;right:10px;top:8px}
.ci-sheet{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:2147482000;width:min(420px,calc(100vw - 24px));box-sizing:border-box;padding:14px 40px 14px 16px;border-radius:14px;background:rgba(17,17,19,.96);color:#f2f2f2;font:400 13px/1.45 Inter,system-ui,sans-serif;box-shadow:0 10px 40px rgba(0,0,0,.45)}
.ci-sheet[hidden]{display:none}
.ci-sheet .ci-k{margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#bbb}
.ci-sheet .ci-t{word-break:break-word}
.ci-sheet a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.ci-sheet .ci-all{display:inline-block;margin-top:8px;font-weight:600}
.ci-sheet .ci-x{position:absolute;right:6px;top:6px;width:32px;height:32px;border:0;background:none;color:#ddd;font-size:22px;line-height:1;cursor:pointer}