/* Seattle Music Pals theme: black base, glitch-lime accent, mauve chrome. Built from the logo. */

h1,h2,h3{font-family:var(--display);font-weight:700;text-transform:none;letter-spacing:-.015em;line-height:1.15}
h2{font-size:clamp(22px,4.6vw,30px)}
h3{font-size:17px}
.eyebrow{text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;color:var(--lilac)}
.badge{text-transform:none;letter-spacing:0;font-size:12px}
.table th,.facts dt{text-transform:none;letter-spacing:0;font-size:13px}

/* brand */
.brand-name{font-family:var(--display);font-size:14px;font-weight:700;text-transform:none;letter-spacing:-.01em}
.mark{background:#000;color:var(--accent);border:1px solid var(--line)}
.mark svg{width:58%;height:58%}
.hero .logo{background:#000;color:var(--accent)}

/* controls */
.btn{border-radius:999px;transition:box-shadow .15s,border-color .15s}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.btn.primary:hover{box-shadow:0 0 18px rgba(139,255,90,.4);border-color:var(--accent)}
.btn.danger{border-color:var(--danger-soft)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.side .navbtn[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}
.bnav button[aria-current="page"]{color:var(--accent)}
.dot{background:var(--accent)}
.badge.vetted{background:var(--accent-soft);color:var(--accent)}
a{color:var(--accent)}

/* home poster: the logo floats on the page, sparkles twinkle once on load */
.poster{position:relative;display:grid;place-items:center;padding:12px 0 0;isolation:isolate;background:var(--bg);overflow:hidden;border-radius:18px}
.poster .poster-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4;z-index:-1}
.wordmark{display:block;width:min(86%,440px);height:auto;mix-blend-mode:screen}
.spark{position:absolute;width:14px;height:14px;color:var(--accent);animation:twinkle 3.4s ease-in-out infinite}
.spark svg{display:block;width:100%;height:100%}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.6)}50%{opacity:1;transform:scale(1.2)}}
@media (prefers-reduced-motion:reduce){.spark{animation:none;opacity:.7}}
.hero{margin-top:6px;align-items:center;text-align:center;gap:8px}
.hero p{margin-inline:auto}
.hero .tagline{font-family:var(--script);font-size:40px;line-height:1;color:var(--accent);margin-top:-6px}

/* home tiles */
.tile{border-radius:14px;transition:border-color .15s,box-shadow .15s}
.tile:hover{border-color:var(--accent);box-shadow:0 0 24px rgba(139,255,90,.12)}
.tile b{font-family:var(--display);font-size:16px;text-transform:none;line-height:1.2;font-weight:700}
.tile svg{color:var(--accent)}

/* events: date boxes are little tombstones */
.datebox{border:1.5px solid var(--accent);border-radius:999px 999px 8px 8px;padding:10px 0 7px;color:var(--ink)}
.datebox .m{color:var(--accent);letter-spacing:.06em}
.datebox .d{font-family:var(--display);font-size:20px;font-weight:700}
.ev:hover{background:var(--surface)}
.flyer{border:1px solid var(--line)}
.flyer .fh{font-family:var(--display);font-weight:700;text-transform:none;font-size:clamp(24px,5.5vw,38px);line-height:1.05;letter-spacing:-.02em}

/* tickets: stubs with a lime perforation */
.stub{border-color:var(--line);border-radius:14px}
.stub .tear{border-left:2px dashed var(--accent);background:var(--sunk)}
.stub .tear::before,.stub .tear::after{border-color:var(--line)}
.stub .price,.price{font-family:var(--display);font-size:20px;font-weight:700;color:var(--accent)}
@media (max-width:460px){.stub .tear{border-top:2px dashed var(--accent);border-left:0}}

/* misc surfaces */
.card,.notice,.pinned,.hub button{border-radius:14px}
.sheet{border:1px solid var(--line)}
.toast{background:var(--accent);color:var(--accent-ink);font-weight:700}
.toast.err{background:var(--danger);color:#1a0509}
.cover .ph{background:radial-gradient(120% 90% at 85% 0%,var(--f3),transparent 60%),var(--f1)}