@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=Archivo+Narrow:wght@600;700&family=Manrope:wght@400;500;600;700&display=swap");
:root{--ground:#0a0a0a;--surface:#14120d;--surface-raised:#1e1b13;--line:#3a3119;--line-strong:#9a7a2a;--ink:#f7f1e3;--ink-muted:#b9ac8e;--gold:#e2b23c;--gold-bright:#f6d77f;--gold-deep:#9b7417;--gold-ink:#ebc35a;--gold-soft:#2b2310;--on-gold:#0a0a0a;--live:#ff5a5f;--focus:#f6d77f;
--font-display:"Archivo","Helvetica Neue",Arial,sans-serif;--font-label:"Archivo Narrow","Arial Narrow",Arial,sans-serif;--font-body:"Manrope","Helvetica Neue",Arial,sans-serif;
--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--s12:48px;--s16:64px;--r-sm:4px;--r-md:10px;--r-lg:16px;--glow:0 0 0 1px rgba(226,178,60,.55),0 12px 36px rgba(226,178,60,.22);--grad:linear-gradient(to right,var(--gold-deep),var(--gold) 55%,var(--gold-bright));--gradv:linear-gradient(to top,var(--gold-deep),var(--gold) 55%,var(--gold-bright))}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-body);font-size:18px;line-height:28px;font-weight:500;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--gold-ink)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 2px var(--ground)}
img{max-width:100%;display:block}
button{font-family:var(--font-body)}
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--s4)}
.eyebrow{font-family:var(--font-label);font-weight:700;font-size:13px;line-height:16px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);display:flex;align-items:center;gap:var(--s2)}
.rule{display:inline-block;width:28px;height:4px;border-radius:var(--r-sm);background:var(--grad)}
.caption{font-size:14px;line-height:20px;color:var(--ink-muted);font-weight:500}
.body-l{font-size:18px;line-height:28px;font-weight:500}
h1,h2,h3{font-family:var(--font-display);margin:0;letter-spacing:-.02em}
h1{font-weight:900;font-size:clamp(44px,8vw,84px);line-height:.94;text-transform:uppercase}
h1 em,h2 em{font-style:normal;color:var(--gold-ink)}
h2{font-weight:800;font-size:clamp(28px,4.5vw,42px);line-height:1.05;letter-spacing:-.015em}
h3{font-weight:700;font-size:20px;line-height:26px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* progress bar */
.progress{position:fixed;top:0;left:0;height:4px;width:0;background:var(--grad);z-index:40;transition:width .1s linear}
/* nav */
.nav{position:sticky;top:0;z-index:30;background:rgba(10,10,10,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:68px}
.mark{display:inline-flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink)}
.mark .k{font-family:var(--font-label);font-weight:700;font-size:11px;line-height:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);display:flex;align-items:center;gap:var(--s2)}
.mark .k .rule{width:20px;height:3px}
.mark .n{font-family:var(--font-display);font-weight:900;font-size:20px;line-height:20px;letter-spacing:-.02em;text-transform:uppercase}
.mark .n em{font-style:normal;color:var(--gold-ink)}
.menu{display:flex;align-items:center;gap:var(--s1);list-style:none;margin:0;padding:0}
.menu a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 var(--s3);border-radius:var(--r-md);text-decoration:none;color:var(--ink);font-weight:700;font-size:16px;position:relative}
.menu a svg{width:18px;height:18px;flex:none}
.menu a:hover{background:var(--surface-raised);color:var(--gold-ink)}
.menu a[aria-current]{color:var(--gold-ink)}
.menu a[aria-current]::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:3px;border-radius:2px;background:var(--grad)}
.menu .cta a{background:var(--gold);color:var(--on-gold);padding:0 var(--s4);margin-left:var(--s2)}
.menu .cta a::after{display:none}
.menu .cta a:hover{background:var(--gold-bright);color:var(--on-gold)}
.burger{display:none;background:none;border:1px solid var(--line-strong);color:var(--gold-ink);border-radius:var(--r-md);width:44px;height:44px;font-size:22px;cursor:pointer}
@media (max-width:820px){.burger{display:inline-flex;align-items:center;justify-content:center}.menu{display:none;position:absolute;left:0;right:0;top:68px;flex-direction:column;align-items:stretch;background:var(--ground);border-bottom:1px solid var(--line);padding:var(--s2) var(--s4) var(--s4);box-shadow:0 8px 24px rgba(0,0,0,.6)}.menu.open{display:flex}.menu a{min-height:52px;font-size:18px}.menu a[aria-current]::after{display:none}.menu .cta a{justify-content:center;margin:var(--s2) 0 0}}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:52px;padding:var(--s3) var(--s6);border-radius:var(--r-md);font-family:var(--font-body);font-weight:700;font-size:17px;line-height:20px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease,box-shadow .15s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--gold);color:var(--on-gold)}
.btn-primary:hover{background:var(--gold-bright);box-shadow:0 8px 30px rgba(226,178,60,.35)}
.btn-secondary{background:transparent;color:var(--gold-ink);border-color:var(--gold-ink)}
.btn-secondary:hover{background:var(--surface-raised)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--line-strong);color:var(--gold-ink)}
.btn svg{width:20px;height:20px}
.btns{display:flex;flex-wrap:wrap;gap:var(--s3)}
@media (max-width:520px){.btn{width:100%}}
/* equaliser */
.eq{display:inline-flex;align-items:flex-end;gap:var(--s2);height:64px}
.eq span{width:8px;border-radius:var(--r-sm);background:var(--gradv);transform-origin:bottom}
.eq.anim span{animation:eq 1.6s ease-in-out infinite alternate}
.eq.anim span:nth-child(2){animation-delay:.2s}.eq.anim span:nth-child(3){animation-delay:.4s}.eq.anim span:nth-child(4){animation-delay:.1s}.eq.anim span:nth-child(5){animation-delay:.5s}.eq.anim span:nth-child(6){animation-delay:.3s}.eq.anim span:nth-child(7){animation-delay:.6s}
@keyframes eq{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.eq.anim span{animation:none}.reveal{opacity:1!important;transform:none!important}}
/* hero */
.hero{position:relative;overflow:hidden;min-height:620px;display:flex;align-items:flex-end;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--grad);z-index:2}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.9;transform:scale(1.04);animation:kenburns 18s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.12) translate(-1.5%,1%)}}
@media (prefers-reduced-motion:reduce){.hero img{animation:none}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.94) 0%,rgba(10,10,10,.78) 45%,rgba(10,10,10,.25) 100%),linear-gradient(0deg,rgba(10,10,10,.96) 0%,rgba(10,10,10,.1) 60%)}
.hero .wrap{position:relative;z-index:3;padding-top:var(--s16);padding-bottom:var(--s12);width:100%}
.hero .eq{position:absolute;right:var(--s4);top:var(--s8);z-index:3}
.hero h1{max-width:12ch;margin:var(--s3) 0 var(--s4)}
.hero p.body-l{max-width:580px;margin:0 0 var(--s6)}
@media (max-width:760px){.hero{min-height:560px}.hero .eq{height:40px;top:var(--s6)}}
/* live pill + stats */
.livebar{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-bottom:var(--s4)}
.pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-label);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:rgba(20,18,13,.8);border:1px solid var(--line-strong);border-radius:999px;padding:6px 14px 6px 10px;white-space:nowrap}
.pill .dot{width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(226,178,60,.6);animation:pulse 1.8s ease-out infinite}
.pill.on .dot{background:var(--live);box-shadow:0 0 0 0 rgba(255,90,95,.6)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(226,178,60,.6)}100%{box-shadow:0 0 0 12px rgba(226,178,60,0)}}
.pill.gold{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3);margin-top:var(--s8)}
.stat{background:rgba(20,18,13,.75);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4) var(--s6);backdrop-filter:blur(6px)}
.stat .v{font-family:var(--font-display);font-weight:900;font-size:36px;line-height:40px;color:var(--gold-ink);letter-spacing:-.02em}
.stat .l{font-size:14px;line-height:20px;color:var(--ink-muted);margin-top:2px}
/* sections */
section{padding:var(--s16) 0}
section+section{border-top:1px solid var(--line)}
.head{margin-bottom:var(--s8)}
.head h2{margin-top:var(--s2)}
.head p{margin:var(--s2) 0 0;color:var(--ink-muted);max-width:660px}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}
/* explorer (tabs + preview) */
.explorer{display:grid;grid-template-columns:320px 1fr;gap:var(--s6);align-items:stretch}
.tabs{display:grid;gap:var(--s2);align-content:start}
.tab{display:grid;grid-template-columns:44px 1fr;gap:var(--s3);align-items:center;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3) var(--s4);color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.tab .ic{width:44px;height:44px;border-radius:var(--r-md);background:var(--gold-soft);display:flex;align-items:center;justify-content:center;color:var(--gold-ink)}
.tab .ic svg{width:22px;height:22px}
.tab b{display:block;font-family:var(--font-display);font-weight:800;font-size:17px;line-height:22px}
.tab span{display:block;font-size:14px;line-height:20px;color:var(--ink-muted)}
.tab:hover{border-color:var(--line-strong);transform:translateX(3px)}
.tab[aria-selected="true"]{border-color:var(--gold);box-shadow:var(--glow);background:var(--surface-raised)}
.tab[aria-selected="true"] .ic{background:var(--gold);color:var(--on-gold)}
.panel{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--surface);min-height:420px;display:none}
.panel.on{display:block;animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.panel .over{position:relative;z-index:2;min-height:420px;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--s8);background:linear-gradient(0deg,rgba(10,10,10,.96) 0%,rgba(10,10,10,.55) 55%,rgba(10,10,10,.05) 100%)}
.panel h3{font-size:30px;line-height:34px;color:var(--ink);margin:var(--s2) 0 var(--s3)}
.panel p{margin:0 0 var(--s4);color:var(--ink-muted);max-width:520px}
.panel .chan{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-label);font-weight:700;letter-spacing:.06em;font-size:14px;color:var(--gold-ink);background:rgba(43,35,16,.9);border:1px solid var(--line);border-radius:var(--r-sm);padding:4px 10px;margin-right:6px;margin-bottom:6px}
@media (max-width:820px){.explorer{grid-template-columns:1fr}.tabs{grid-template-columns:1fr 1fr}.tab{grid-template-columns:36px 1fr;padding:var(--s3)}.tab span>span{display:none}.tab .ic{width:36px;height:36px}.panel,.panel .over{min-height:360px}}
@media (max-width:480px){.tabs{grid-template-columns:1fr 1fr}.tab b{font-size:15px}}
/* city picker */
.cities{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--s8);align-items:stretch}
.citymap{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);min-height:380px}
.citymap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8}
.citymap .over{position:relative;z-index:2;min-height:380px;padding:var(--s8);display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(0deg,rgba(10,10,10,.96) 0%,rgba(10,10,10,.4) 60%,rgba(10,10,10,0) 100%)}
.citymap h3{font-size:30px;line-height:34px;margin:var(--s2) 0}
.citymap p{margin:0 0 var(--s4);color:var(--ink-muted)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);align-content:start}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 var(--s4);border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink);font-weight:700;font-size:16px;cursor:pointer;transition:all .15s}
.chip:hover{border-color:var(--line-strong);color:var(--gold-ink)}
.chip[aria-pressed="true"]{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.chip .f{font-size:18px;line-height:1}
.chipwrap h3{margin-bottom:var(--s3)}
.chipwrap .caption{margin-top:var(--s4)}
@media (max-width:820px){.cities{grid-template-columns:1fr}.citymap,.citymap .over{min-height:320px}}
/* cards, steps, promises */
.grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s6);transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-3px);border-color:var(--line-strong)}
.card h3{color:var(--gold-ink);margin-bottom:var(--s2)}
.card p{margin:0;color:var(--ink-muted);font-size:16px;line-height:24px}
.card p b{color:var(--ink)}
.card.featured{box-shadow:var(--glow);border-color:var(--gold)}
.photo{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);min-height:320px}
.photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .6s ease}
.photo:hover img{transform:scale(1.04)}
.photo .over{position:relative;z-index:2;padding:var(--s8);background:linear-gradient(0deg,rgba(10,10,10,.95) 0%,rgba(10,10,10,.35) 70%,rgba(10,10,10,0) 100%);min-height:320px;display:flex;flex-direction:column;justify-content:flex-end}
.split{display:grid;gap:var(--s8);grid-template-columns:1.1fr 1fr;align-items:center}
@media (max-width:820px){.split{grid-template-columns:1fr}}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);counter-reset:step}
.steps li{display:grid;grid-template-columns:52px 1fr;gap:var(--s4);align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s6);transition:border-color .2s}
.steps li:hover{border-color:var(--line-strong)}
.num{width:52px;height:52px;border-radius:var(--r-md);background:var(--gold);color:var(--on-gold);font-family:var(--font-display);font-weight:900;font-size:26px;display:flex;align-items:center;justify-content:center}
.steps b{color:var(--ink)}
.promise{display:flex;gap:var(--s4);align-items:flex-start;padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.promise:last-child{border-bottom:0}
.tick{flex:0 0 28px;height:28px;border-radius:var(--r-sm);background:var(--gold);color:var(--on-gold);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;margin-top:2px}
.notice{background:var(--gold-soft);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s6);margin-top:var(--s8)}
.notice b{color:var(--gold-ink)}
/* invite box */
.invite{display:grid;grid-template-columns:1fr auto;gap:var(--s3);align-items:center;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-md);padding:var(--s3) var(--s3) var(--s3) var(--s6);margin-top:var(--s6)}
.invite code{font-family:var(--font-body);font-weight:700;font-size:18px;color:var(--gold-ink);word-break:break-all}
.invite .caption{margin:0}
@media (max-width:560px){.invite{grid-template-columns:1fr}.invite .btn{width:100%}}
/* faq */
.faq{display:grid;gap:var(--s2)}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.faq details[open]{border-color:var(--line-strong)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding:var(--s4) var(--s6);font-family:var(--font-display);font-weight:700;font-size:18px;line-height:24px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-display);font-weight:900;color:var(--gold-ink);font-size:24px;line-height:1;flex:none;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--gold-ink)}
.faq .a{padding:0 var(--s6) var(--s6);color:var(--ink-muted);font-size:16px;line-height:24px}
.faq .a b{color:var(--ink)}
/* mobile tab bar + back to top */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:25;display:none;grid-template-columns:repeat(4,1fr);gap:4px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:rgba(10,10,10,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.dock a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;border-radius:var(--r-md);text-decoration:none;color:var(--ink-muted);font-family:var(--font-label);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.dock a svg{width:22px;height:22px}
.dock a[aria-current]{color:var(--gold-ink);background:var(--surface-raised)}
.dock a.join{background:var(--gold);color:var(--on-gold)}
@media (max-width:820px){.dock{display:grid}body{padding-bottom:84px}}
.totop{position:fixed;right:var(--s4);bottom:calc(var(--s4) + 84px);z-index:26;width:48px;height:48px;border-radius:50%;background:var(--surface-raised);border:1px solid var(--line-strong);color:var(--gold-ink);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s}
@media (min-width:821px){.totop{bottom:var(--s6)}}
.totop.show{opacity:1;pointer-events:auto}
.totop svg{width:22px;height:22px}
/* home music strip */
.musicstrip{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--s8);align-items:center;background:var(--surface);border:1px solid var(--gold);box-shadow:var(--glow);border-radius:var(--r-lg);padding:var(--s8)}
.covers{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.covers img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-md);border:1px solid var(--line);transition:transform .25s}
.covers img:nth-child(2){transform:translateY(14px)}.covers img:nth-child(4){transform:translateY(14px)}
.musicstrip:hover .covers img{transform:translateY(0)}
.musicstrip h2{margin:var(--s2) 0 var(--s3)}
.musicstrip p{margin:0 0 var(--s6);color:var(--ink-muted)}
@media (max-width:820px){.musicstrip{grid-template-columns:1fr;padding:var(--s6)}.covers img:nth-child(2),.covers img:nth-child(4){transform:none}}
/* footer */
footer{background:var(--surface);border-top:1px solid var(--line);padding:var(--s12) 0 var(--s16)}
footer .band{background:var(--gold);color:var(--on-gold);border-radius:var(--r-sm);padding:var(--s3) var(--s4);font-weight:700;font-size:15px;margin-bottom:var(--s6)}
footer p{margin:0 0 var(--s2)}
footer .links{display:flex;flex-wrap:wrap;gap:var(--s4);margin:var(--s4) 0 var(--s6)}
footer .links a{font-weight:700;text-decoration:none}
/* toast */
.toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%) translateY(20px);background:var(--gold);color:var(--on-gold);font-weight:700;padding:10px 18px;border-radius:999px;opacity:0;transition:all .3s;z-index:50;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%)}