:root{
  color-scheme:dark;
  --ink:#000000; --ink-2:#161616; --surface:#383838; --surface-2:#424242; --line:#2A2A2A; --line-2:#555555;
  --paper:#F4F2EF; --muted:#BDBBC4; --dim:#8E8C96;
  --violet:#786BAC; --violet-2:#8A7EBE; --violet-soft:rgba(120,107,172,.16);
  --on-accent:#0B0B0B; --nav-line:#9BA1AE; --map:#141414; --map-line:#2C2C2C; --map-deep:#0A0A0A; --map-mid:#3A3A3A; --map-text:#A8A6B0;
  --amber:#9C90D0; --amber-soft:rgba(120,107,172,.14);
  
  --ok:#9DB7A9; --ok-soft:rgba(157,183,169,.12);
  --sold:#D4A5AF;
  --font-display:'Archivo Black',Archivo,Arial Black,sans-serif;
  --font-body:Archivo,'Helvetica Neue',Arial,sans-serif;
  --r:14px; --gutter:clamp(16px,4vw,48px);
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;overflow-x:hidden;background:var(--ink);color:var(--paper);font-family:var(--font-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* NAV */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(0,0,0,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--nav-line)}
.nav-in{max-width:1240px;margin:0 auto;padding:12px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{height:46px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-btn{background:none;border:1px solid transparent;border-radius:10px;padding:8px 14px;font-weight:600;color:var(--muted);text-decoration:none}
.nav-btn:hover{color:var(--paper);background:#1E1E1E}
.nav-btn.active{color:var(--paper);background:#262626;border-color:transparent;box-shadow:inset 0 -2px 0 var(--violet)}
.nav-btn.cta{color:var(--on-accent);background:var(--violet);border-color:var(--violet)}
.nav-btn.cta:hover{background:var(--violet-2);color:var(--on-accent)}
.avatar{width:36px;height:36px;border-radius:50%;background:#2A2A2A;border:1px solid var(--line-2);color:var(--paper);display:grid;place-items:center;font-weight:700;font-size:13px;margin-left:6px}

/* PAGE */
.page{max-width:1240px;margin:0 auto;padding-inline:var(--gutter);padding-block:0 64px}
.hero{position:relative;padding-block:56px 40px;text-align:left}
.hero::before{content:"";position:absolute;top:-72px;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:
  linear-gradient(180deg,#141414 0%,var(--ink) 100%);pointer-events:none;z-index:-1}
.hero{isolation:isolate}
.eyebrow{display:inline-block;font-size:12.5px;letter-spacing:.02em;color:#D6D2E6;font-weight:600;background:#262626;border:1px solid #333;padding:6px 12px;border-radius:6px}
h1{font-family:var(--font-display);font-size:clamp(34px,5.4vw,60px);line-height:1;margin:10px 0 12px;letter-spacing:-.01em;text-wrap:balance}
.lede{color:var(--muted);max-width:56ch;margin:0;font-size:16px}
.meta-row{display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--muted);font-size:14px;margin-top:20px}
.meta-row span{display:inline-flex;align-items:center;gap:6px}
.meta-row svg{width:15px;height:15px;stroke:var(--paper);fill:none;stroke-width:1.8}

.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:8px 0 18px}
h2{font-family:var(--font-display);font-size:24px;margin:0;letter-spacing:-.01em}
.count{color:var(--dim);font-size:13px;font-variant-numeric:tabular-nums}

/* EVENT GRID */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;text-align:left;padding:0;transition:transform .18s,border-color .18s}
.card:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:0 14px 34px -18px rgba(0,0,0,.8)}
.card.live:hover{border-color:var(--violet)}
.art{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink-2)}
.art img,.art svg{width:100%;height:100%;object-fit:cover;display:block}
.pill{position:absolute;top:12px;right:12px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid}
.pill.live{color:#B4CDBF;background:rgba(0,0,0,.6);border-color:rgba(180,205,191,.3)}
.pill.soon{color:#D6C7A6;background:rgba(0,0,0,.6);border-color:rgba(214,199,166,.3)}
.pill.past{color:#BDBBC4;background:rgba(0,0,0,.6);border-color:rgba(255,255,255,.2)}
.pill.sold{color:#D8B2BA;background:rgba(0,0,0,.6);border-color:rgba(216,178,186,.3)}
.price .so{color:var(--sold);font-weight:700}
.body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h3{margin:0 0 4px;font-size:17px;font-weight:700;line-height:1.3}
.card .sub{color:var(--muted);font-size:13.5px;display:flex;align-items:center;gap:6px}
.card .sub svg{width:14px;height:14px;stroke:var(--dim);fill:none;stroke-width:1.8;flex:none}
.foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:14px}
.price{color:var(--muted);font-size:13px}.price b{color:var(--paper);font-size:20px;font-family:var(--font-display);font-weight:400;margin-left:4px}
.btn{text-decoration:none;border:none;border-radius:10px;padding:10px 16px;font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:background .15s,transform .1s}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--violet);color:var(--on-accent)}.btn-primary:hover{background:var(--violet-2)}
.btn-ghost{background:#262626;color:var(--paper);border:1px solid var(--line-2)}.btn-ghost:hover{background:#303030}
.btn-amber{background:var(--violet);color:var(--on-accent)}.btn-amber:hover{background:var(--violet-2)}
.btn-black{background:var(--violet);color:var(--on-accent)}.btn-black:hover{background:var(--violet-2)}
.state{color:var(--dim);font-size:13px;font-weight:600}
.card.past .art{filter:saturate(.3) brightness(.85)}

/* EVENT PAGE */
.back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;font-weight:600;font-size:14px;margin-top:22px;background:none;border:none;padding:0}
.back:hover{color:var(--paper)}
.event-wrap{position:relative;isolation:isolate}
.event-wrap::before{content:"";position:absolute;top:-96px;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;pointer-events:none;background:
  linear-gradient(180deg,#141414 0%,var(--ink) 100%)}
.event-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:32px;align-items:center;padding-block:24px 36px}
.poster{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.poster svg{display:block;width:100%;height:auto}
.poster img{display:block;width:100%}
.event-hero h1{font-size:clamp(30px,4.2vw,48px)}
.event-hero .lede{font-size:15px}
.promoter{margin-top:18px;display:flex;align-items:center;gap:10px;color:var(--dim);font-size:13px}
.promoter b{color:var(--muted);font-weight:600}

.select{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
.map-wrap{background:var(--map);border:1px solid var(--map-line);border-radius:var(--r);padding:16px;position:relative;overflow:hidden;color:#F6F4FF}
.map-wrap::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 30% at 50% 8%,rgba(120,107,172,.16),transparent 70%);pointer-events:none}
.map{width:100%;height:auto;display:block}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;padding:12px 4px 0;color:var(--map-text);font-size:12.5px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}

.zone{cursor:pointer;transition:filter .15s}
.zone path,.zone polygon{transition:fill .15s,stroke-width .15s}
.lbl text{font-family:var(--font-body);font-weight:700;fill:#F6F4FF;text-anchor:middle;dominant-baseline:middle}
.lbl .plate{fill:#0A0A0A;fill-opacity:.9;stroke:rgba(255,255,255,.14);stroke-width:1}
.lbl{transition:opacity .15s}
.lbl .sub{font-size:8.5px;font-weight:600;fill:#A8A6B0;letter-spacing:.04em}
.zone:hover path,.zone:hover polygon,.zone.on path,.zone.on polygon{stroke-width:2.2;filter:brightness(1.25)}
.zone.dim path,.zone.dim polygon{opacity:.45}
.stage rect{fill:#0A0A0A;stroke:#786BAC}
.stage text{fill:#A8A6B0;font-family:var(--font-display);letter-spacing:.2em;font-size:11px;text-anchor:middle;dominant-baseline:middle}

.cats{display:flex;flex-direction:column;gap:12px}
.cat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 16px 16px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;position:relative;cursor:pointer;transition:border-color .15s,background .15s}
.cat::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:0 4px 4px 0;background:var(--c)}
.cat:hover,.cat.on{border-color:var(--c);background:var(--surface-2);box-shadow:0 10px 30px -18px rgba(0,0,0,.8)}
.cat h4{margin:0 0 3px;font-size:17px;font-weight:700;color:var(--c)}
.cat .line{color:var(--muted);font-size:13.5px;font-variant-numeric:tabular-nums}
.cat .line b{color:var(--paper);font-weight:600}
.cat .line .so{color:var(--sold);font-weight:700}
.cat.help{border-style:dashed;cursor:default}
.cat.help::before{display:none}
.cat.help h4{color:var(--paper);font-size:15px}
.cat.help .line{font-size:13px}
.trust{display:flex;gap:16px;flex-wrap:wrap;color:var(--dim);font-size:12.5px;padding:6px 4px 0}
.trust span{display:inline-flex;gap:6px;align-items:center}
.trust svg{width:14px;height:14px;stroke:var(--ok);fill:none;stroke-width:2}


/* SECTION VIEW */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:var(--dim);font-size:14px;margin-top:22px}
.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--paper)}.crumbs span{color:var(--paper)}.crumbs i{color:var(--line-2)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin:22px 0 18px}
.sec-title{font-size:clamp(26px,3.4vw,34px);margin:0 0 6px}
.sec-head .lede{font-size:14.5px}.inline{color:var(--amber);text-decoration:none}.inline:hover{text-decoration:underline}
.sec-head .btn{text-decoration:none}
.seatmap{position:relative;background:var(--map);border:1px solid var(--map-line);color:#F6F4FF;border-radius:var(--r);padding:28px 20px 20px;overflow:hidden}
.seatmap::before{content:"";position:absolute;inset:0;background:radial-gradient(45% 30% at 50% 0%,rgba(120,107,172,.18),transparent 70%);pointer-events:none}
.stage-bar{width:min(240px,60%);margin:0 auto 26px;padding:12px;text-align:center;border-radius:12px;background:#0A0A0A;border:1px solid #786BAC;color:#A8A6B0;font-family:var(--font-display);letter-spacing:.24em;font-size:12px}
.rows{display:flex;flex-direction:column;gap:8px;overflow-x:auto;padding-bottom:6px}
.row{display:grid;grid-template-columns:22px minmax(0,1fr) 22px;align-items:center;gap:10px;min-width:max-content;margin:0 auto}
.rl{color:#77757F;font-size:11px;font-weight:700;text-align:center}
.seats-row{display:grid;grid-template-columns:repeat(var(--cols),var(--seat));gap:6px;--seat:clamp(22px,2.4vw,34px)}
.seat{width:var(--seat);height:var(--seat);border-radius:50%;background:#222;border:1px solid #333;display:grid;place-items:center;padding:0}
.seat.resale{background:#786BAC;border-color:transparent;color:#0B0B0B;cursor:pointer;box-shadow:none;transition:transform .12s,box-shadow .12s}
.seat.resale svg{width:55%;height:55%}
.seat.resale:hover,.seat.resale.sel{transform:scale(1.14);box-shadow:0 0 0 3px rgba(120,107,172,.35)}
.seat-legend{justify-content:center;border-top:1px solid var(--map-line);margin-top:18px;padding-top:16px}
.lg{width:22px;height:22px;border-radius:50%;background:#222;border:1px solid #333;display:inline-grid;place-items:center;color:#fff}
.lg.resale{background:#786BAC;color:#0B0B0B;border-color:transparent}.lg svg{width:12px;height:12px}
.mini{position:absolute;right:16px;bottom:16px;width:96px;height:auto;background:#0E0E0E;border:1px solid var(--map-line);border-radius:10px;padding:6px}
@media (max-width:700px){.mini{display:none}}
/* MODAL */
.modal-bg[hidden]{display:none}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(10px);display:grid;place-items:center;z-index:40;padding:16px}
.modal{position:relative;width:min(480px,100%);background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px 26px 22px;display:flex;flex-direction:column;gap:16px;box-shadow:0 40px 100px -20px rgba(0,0,0,.9)}
.modal .x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line-2);font-size:14px}
.m-head{display:flex;gap:14px;align-items:flex-start;padding-right:40px}
.m-ic{flex:none;width:48px;height:48px;border-radius:50%;background:#786BAC;display:grid;place-items:center;color:#0B0B0B}.m-ic svg{width:22px;height:22px}
.m-head h3{margin:0 0 4px;font-size:20px}.m-head p{margin:0;color:var(--muted);font-size:14px}
.m-card{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.m-card b{display:block;font-size:17px}.m-card span{color:var(--muted);font-size:13.5px}
.m-price{text-align:right}.m-price b{color:var(--paper);font-family:var(--font-display);font-weight:400;font-size:26px;line-height:1}
.m-price s{display:block;color:var(--dim);font-size:13px;margin-top:4px}
.m-note{margin:0;color:var(--muted);font-size:13.5px}
.btn-resale{background:var(--violet);color:var(--on-accent);justify-content:center;padding:14px;border-radius:999px;font-size:15px}
.btn-resale:hover{background:var(--violet-2)}
.modal .btn-ghost{justify-content:center;padding:12px;border-radius:999px}

.so-modal{text-align:center;align-items:center;padding:34px 30px 24px}
.so-chip{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#CFCBE3;background:rgba(120,107,172,.16);padding:7px 14px;border-radius:999px}
.so-modal h3{margin:4px 0 0;font-family:var(--font-display);font-size:30px;letter-spacing:-.01em}
.so-modal p{margin:0;color:var(--muted);font-size:15px;line-height:1.55;max-width:44ch}
.so-modal .btn-black{width:100%;justify-content:center;padding:15px;border-radius:12px;font-size:15.5px;margin-top:6px}
.linkbtn{background:none;border:none;color:var(--muted);text-decoration:underline;font-size:14px;padding:4px}
.linkbtn:hover{color:var(--paper)}
/* TOAST */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);opacity:0;background:#2A2A2A;border:1px solid var(--line-2);color:#fff;padding:12px 18px;border-radius:12px;font-weight:600;font-size:14px;box-shadow:0 20px 40px -10px rgba(0,0,0,.5);transition:all .25s;pointer-events:none;z-index:50;max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast small{display:block;font-weight:500;color:#C9C6D8;margin-top:2px}

footer{max-width:1240px;margin:0 auto;padding:28px var(--gutter) 40px;border-top:1px solid #222;color:var(--dim);background:var(--ink);font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

@media (max-width:920px){
  .select{grid-template-columns:1fr}
  .event-hero{grid-template-columns:1fr;gap:20px}
}
@media (max-width:560px){
  .nav-links .nav-btn:not(.cta){display:none}
  .hero{padding-block:36px 28px}
}