/* TONIGHT — shared event preview pages (tonightoncampus.com/e/...). Midnight design system. */
:root{
  color-scheme:dark;
  --bg:#0A0918; --surface:#15132B; --surface-2:#1D1A3A; --line:#2C2856;
  --ink:#F6F4FF; --ink-2:#C3BCE3; --ink-3:#9089B8;
  --lav:#C9B8FF; --violet:#8B5CF6; --magenta:#E04BB0; --gold:#FFD45E; --live:#44E08F; --alert:#FF6680;
  --paper:#F7F4EE; --fl-ink:#16141F;
  --grad:linear-gradient(120deg,#D9CCFF 0%,#A98BFF 45%,#E04BB0 100%);
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;color:var(--ink);font:16px/1.5 var(--body);min-height:100vh;overflow-x:hidden;
  background:
    radial-gradient(70% 38% at 0% -4%,rgba(139,92,246,.32),transparent 70%),
    radial-gradient(55% 30% at 100% 2%,rgba(224,75,176,.18),transparent 70%),
    radial-gradient(60% 40% at 50% 110%,rgba(139,92,246,.2),transparent 70%),
    var(--bg);
  background-repeat:no-repeat}
a{color:var(--lav)}
img{max-width:100%}
:focus-visible{outline:2px solid var(--lav);outline-offset:3px;border-radius:10px}
.wrap{max-width:620px;margin:0 auto;padding:calc(14px + env(safe-area-inset-top,0px)) 16px calc(40px + env(safe-area-inset-bottom,0px))}

/* brand bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.logo{display:flex;align-items:center;gap:4px;text-decoration:none;min-width:0}
.logo .moon{width:54px;height:auto;mix-blend-mode:screen;margin-left:-8px;
  -webkit-mask:radial-gradient(closest-side,#000 62%,transparent 100%);mask:radial-gradient(closest-side,#000 62%,transparent 100%)}
.logo .word{width:150px;height:auto;mix-blend-mode:screen}
.kick{display:flex;align-items:center;gap:8px;font:800 10.5px/1 var(--body);letter-spacing:.26em;text-transform:uppercase;color:var(--lav);white-space:nowrap}
.kick::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--grad)}

/* the flyer */
.flyer{margin-top:16px;background:var(--surface);border:1px solid rgba(246,244,255,.1);border-radius:24px;overflow:hidden;
  box-shadow:0 4px 10px rgba(0,0,0,.3),0 30px 60px -28px rgba(0,0,0,.9)}
.poster{display:block;width:100%;height:auto;aspect-ratio:1200/630;background:#120F2A;object-fit:cover}
.fbody{padding:16px 16px 18px;display:grid;gap:12px}
.status{margin:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(201,184,255,.12);color:var(--lav)}
.pill.live{background:rgba(68,224,143,.14);color:var(--live)}
.pill.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--live)}
.pill.over{background:rgba(255,102,128,.14);color:var(--alert)}
.pill.campus{background:rgba(255,212,94,.14);color:var(--gold)}
h1{margin:0;font-family:var(--display);font-weight:900;font-size:clamp(38px,11vw,58px);line-height:.9;text-transform:uppercase;letter-spacing:.005em;text-wrap:balance;overflow-wrap:anywhere}
.facts{margin:0;display:grid;background:rgba(10,9,24,.45);border:1px solid rgba(246,244,255,.08);border-radius:16px;overflow:hidden}
.facts div{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;padding:11px 13px}
.facts div+div{border-top:1px solid rgba(246,244,255,.08)}
.facts dt{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.facts dd{margin:0;font-weight:700;overflow-wrap:anywhere}
.facts dd small{display:block;font-weight:500;color:var(--ink-2);font-size:13.5px}
.desc{margin:0;color:var(--ink);font-size:16px}
.tip{margin:0;font-size:14px;color:var(--ink-2);background:var(--surface-2);border-radius:12px;padding:9px 12px}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:12px;font-weight:700;border:1.5px solid rgba(246,244,255,.18);border-radius:6px;padding:2px 8px;color:var(--ink-2)}
.tag.free{border-color:rgba(255,212,94,.6);color:var(--gold)}
.verified{margin:0;font-size:13px;color:var(--ink-3)}
.verified b{color:var(--live)}

/* calls to action */
.ctas{display:grid;gap:10px;margin-top:18px}
.cta{display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;text-decoration:none;border-radius:999px;padding:17px 18px;
  font-weight:900;font-size:17px;color:#16141F;background:linear-gradient(120deg,#FFE7A0,#FFD45E 55%,#FFB84D);
  box-shadow:0 14px 30px -12px rgba(255,190,80,.55)}
.cta:active{transform:scale(.98)}
.cta2{display:block;text-align:center;text-decoration:none;border-radius:999px;padding:14px;font-weight:800;font-size:15px;color:var(--ink);
  border:1.5px solid rgba(246,244,255,.18);background:rgba(21,19,43,.7)}
.store{display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;border-radius:14px;padding:12px;background:#000;color:#fff;
  border:1px solid rgba(255,255,255,.3);font-weight:800}
.store small{display:block;font-size:11px;font-weight:600;opacity:.8}
.fine{margin:0;text-align:center;font-size:12.5px;color:var(--ink-3)}

/* join / see your friends */
.join{margin-top:22px;position:relative;overflow:hidden;border-radius:22px;padding:18px 16px;
  background:radial-gradient(120% 90% at 100% 0%,rgba(224,75,176,.5),transparent 60%),radial-gradient(90% 80% at 0% 100%,rgba(139,92,246,.55),transparent 65%),#17123A;
  box-shadow:0 0 0 1.5px rgba(201,184,255,.3)}
.join h2{margin:0;font-family:var(--display);font-weight:900;font-size:30px;line-height:.92;text-transform:uppercase}
.join p{margin:8px 0 14px;color:rgba(255,255,255,.88);font-size:15px}
.join .inviter{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-weight:700}
.join .av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:900;color:#16141F;background:var(--lav);flex:none}

/* over / nearby */
.over{margin-top:16px;border-radius:20px;padding:16px;background:var(--surface);border:1.5px solid rgba(255,102,128,.45)}
.over h2{margin:0;font-family:var(--display);font-weight:900;font-size:30px;line-height:.95;text-transform:uppercase}
.over p{margin:6px 0 12px;color:var(--ink-2);font-size:14.5px}
.near{display:grid;gap:8px}
.near a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:center;text-decoration:none;color:var(--ink);background:var(--surface-2);border-radius:14px;padding:11px 13px}
.near .em{grid-row:span 2;font-size:26px}
.near b{font-size:15px;line-height:1.2}
.near span{font-size:12.5px;color:var(--ink-2)}

.foot{margin-top:30px;text-align:center;font-size:12.5px;color:var(--ink-3);display:grid;gap:6px}
.foot a{color:var(--ink-2)}
[hidden]{display:none!important}
@media (min-width:720px){.wrap{padding-top:28px}.fbody{padding:20px 22px 22px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}