/* Hot Like Wasabi: draft site styles. Palette pulled from the HLW logo. */
:root{
  --bg:#120d1d; --bg2:#1b1430; --ink:#f7f4ff; --muted:#c9c1dc;
  --teal:#6fd3df; --yellow:#fff04f; --pink:#e0338f; --purple:#7b3fe4;
  --radius:14px; --shadow:6px 6px 0 #000;
  --display:"Archivo Black", Impact, "Arial Black", sans-serif;
  --body:"DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--body);-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:var(--teal)}
a:hover{color:var(--yellow)}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.05;margin:0 0 .5em;letter-spacing:.01em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--yellow);color:#000;padding:.5rem 1rem;z-index:100}
.skip:focus{left:0}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.center{text-align:center}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* Buttons */
.btn{display:inline-block;font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;
  background:var(--pink);color:#fff;border:3px solid #000;border-radius:999px;padding:.8em 1.5em;box-shadow:4px 4px 0 #000;
  transition:transform .12s ease, box-shadow .12s ease, background .2s;cursor:pointer;font-size:1rem;line-height:1}
.btn:hover{color:#fff;background:#f0469f;transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
.btn--big{font-size:1.25rem;padding:.9em 1.8em;background:var(--yellow);color:#000}
.btn--big:hover{background:#fff;color:#000}
.btn--ghost{background:transparent;border-color:var(--teal);color:var(--teal);box-shadow:none}
.btn--ghost:hover{background:var(--teal);color:#000;box-shadow:4px 4px 0 #000}
.btn--small{font-size:.85rem;padding:.65em 1.15em}
.btn--full{width:100%}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(18,13,29,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:3px solid;border-image:linear-gradient(90deg,var(--teal),var(--yellow),var(--pink)) 1}
.nav__inner{max-width:1120px;margin:0 auto;padding:8px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.nav__brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--display);text-transform:uppercase;font-size:1rem}
.nav__brand img{width:44px;height:auto}
.nav__links{display:flex;align-items:center;gap:22px}
.nav__links a:not(.btn){color:var(--ink);text-decoration:none;font-weight:700;font-size:.95rem}
.nav__links a:not(.btn):hover{color:var(--yellow)}
@media (max-width:760px){
  .nav__links a:not(.btn){display:none}
  .nav__brand span{font-size:.9rem}
}

/* Hero */
.hero{position:relative;min-height:min(92vh,860px);display:grid;place-items:center;overflow:hidden;text-align:center;isolation:isolate}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero__shade{position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(18,13,29,.45) 0%,rgba(18,13,29,.82) 70%),linear-gradient(180deg,rgba(18,13,29,.2),rgba(18,13,29,1) 98%)}
.hero__content{padding:56px 20px 64px;max-width:900px}
.hero__logo{width:min(300px,62vw);height:auto;margin:0 auto 22px;filter:drop-shadow(0 6px 24px rgba(0,0,0,.6))}
.hero h1{font-size:clamp(2.2rem,7vw,4.6rem);text-transform:uppercase;text-shadow:4px 4px 0 var(--pink),8px 8px 0 #000;margin-bottom:.35em}
.hl-y{color:var(--yellow)}
.lc{text-transform:none}
.hero__sub{font-size:clamp(1.05rem,2.4vw,1.3rem);color:var(--ink);max-width:640px;margin:0 auto 28px;text-shadow:0 2px 10px rgba(0,0,0,.8)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.hero__quote{margin:30px auto 0;font-style:italic;color:var(--muted);max-width:560px;font-size:1rem}

/* Marquee */
.marquee-wrap{overflow:hidden;margin-top:-24px;padding:10px 0;position:relative;z-index:2}
.marquee{overflow:hidden;background:var(--yellow);color:#000;border-block:3px solid #000;transform:rotate(-1.2deg) scale(1.04)}
.marquee__track{display:flex;width:max-content;animation:scroll 40s linear infinite}
.marquee span{font-family:var(--display);text-transform:uppercase;padding:12px 0;white-space:nowrap;font-size:1.05rem}
.marquee span::after{content:"\2605";color:var(--pink);margin:0 22px}
@keyframes scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}html{scroll-behavior:auto}}

/* Sections */
.section{padding:88px 0}
.section--alt{background:var(--bg2);position:relative}
.section--alt::before,.section--alt::after{content:"";position:absolute;left:0;right:0;height:14px;
  background:linear-gradient(135deg,var(--bg) 25%,transparent 25%) -7px 0/14px 14px,linear-gradient(225deg,var(--bg) 25%,transparent 25%) -7px 0/14px 14px}
.section--alt::before{top:0}
.section--alt::after{bottom:0;transform:rotate(180deg)}
.section--pattern{background:linear-gradient(rgba(18,13,29,.9),rgba(18,13,29,.9)),url("assets/pattern-90s.jpg") center/700px auto repeat}
.eyebrow{font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:.85rem;margin:0 0 .6rem}
.eyebrow--teal{color:var(--teal)}.eyebrow--yellow{color:var(--yellow)}.eyebrow--pink{color:var(--pink)}
.title{font-size:clamp(2rem,5.5vw,3.4rem);text-transform:uppercase;text-shadow:3px 3px 0 var(--purple)}
.lede{font-size:1.15rem;color:var(--muted);max-width:760px;margin:0 0 36px}

/* Shows */
.shows{background:rgba(255,255,255,.04);border:2px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:20px 24px;margin-top:28px}
.shows__fallback{list-style:none;margin:0;padding:0}
.shows__fallback li{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.shows__fallback li:last-child{border-bottom:0}
.shows__fallback time{display:grid;text-align:center;background:var(--pink);color:#fff;border:3px solid #000;box-shadow:var(--shadow);border-radius:10px;padding:6px 12px;min-width:76px;line-height:1.1}
.d-mo{font-family:var(--display);text-transform:uppercase;font-size:.85rem}
.d-day{font-family:var(--display);font-size:1.7rem}
.d-yr{font-size:.72rem;opacity:.9}
.shows__fallback strong{display:block;font-size:1.2rem}
.shows__fallback div span{color:var(--muted)}
.shows__fallback time span{color:#fff}
.shows__follow{margin:14px 0 0;color:var(--muted);font-size:.95rem}
@media (max-width:520px){.shows__fallback li{grid-template-columns:auto 1fr}.shows__fallback .btn{grid-column:1/-1;justify-self:start}}
/* Bandsintown widget tweaks */
.shows .bit-widget{font-family:var(--body)!important}
.shows .bit-widget .bit-button,.shows .bit-widget .bit-rsvp,.shows .bit-widget .bit-offers{border-radius:999px!important}

/* Video */
.videos{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));margin:28px 0 36px}
.yt{margin:0}
.yt__btn,.yt iframe{position:relative;display:block;width:100%;aspect-ratio:16/9;border:3px solid #000;border-radius:var(--radius);overflow:hidden;box-shadow:8px 8px 0 var(--pink);background:#000;padding:0;cursor:pointer}
.yt:nth-child(2) .yt__btn,.yt:nth-child(2) iframe{box-shadow:8px 8px 0 var(--teal)}
.yt__btn img{width:100%;height:100%;object-fit:cover;transition:transform .3s, filter .3s;filter:saturate(1.1)}
.yt__btn:hover img{transform:scale(1.04);filter:saturate(1.3) brightness(1.05)}
.yt__play{position:absolute;left:50%;top:50%;width:76px;height:76px;transform:translate(-50%,-50%);background:var(--yellow);border:3px solid #000;border-radius:50%;box-shadow:4px 4px 0 #000}
.yt__play::after{content:"";position:absolute;left:29px;top:21px;border-style:solid;border-width:15px 0 15px 24px;border-color:transparent transparent transparent #000}
.yt figcaption{margin-top:14px;color:var(--muted)}
.yt figcaption strong{color:var(--ink)}

/* Cards */
.cards{list-style:none;margin:0 0 56px;padding:0;display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:600px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:940px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--bg2);border:3px solid #000;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);border-top:8px solid var(--pink)}
.card--yellow{border-top-color:var(--yellow)}.card--teal{border-top-color:var(--teal)}
.card__icon{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--pink);color:#fff;font-family:var(--display);font-size:1.15rem;margin-bottom:12px;border:2px solid #000}
.card--yellow .card__icon{background:var(--yellow);color:#000}.card--teal .card__icon{background:var(--teal);color:#000}
.card h3{font-size:1.3rem;text-transform:uppercase}
.card p{margin:0;color:var(--muted)}

.highlights{background:linear-gradient(135deg,var(--pink),var(--purple));border:3px solid #000;border-radius:var(--radius);padding:30px 32px;box-shadow:10px 10px 0 var(--yellow)}
.highlights__title{font-size:1.6rem;text-transform:uppercase;color:#fff}
.highlights ul{list-style:none;margin:0;padding:0;display:grid;gap:10px 28px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.highlights li{position:relative;padding-left:28px;font-size:1.08rem}
.highlights li::before{content:"\2605";position:absolute;left:0;color:var(--yellow)}

/* Photo strip */
.photos{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-block:3px solid #000}
.photos img{width:100%;height:240px;object-fit:cover;filter:saturate(1.15) contrast(1.05)}
@media (max-width:760px){.photos{grid-template-columns:repeat(2,1fr)}.photos img{height:170px}.photos img:first-child{grid-column:1/-1;height:220px}}

/* Band */
.band{list-style:none;margin:28px 0 48px;padding:0;display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
@media (min-width:860px){.band{grid-template-columns:repeat(4,1fr);gap:22px}}
@media (max-width:480px){.member{padding:20px 10px}.member__mono{width:72px;height:72px;font-size:1.5rem}.member h3{font-size:1rem}}
.member{text-align:center;background:var(--bg2);border:3px solid #000;border-radius:var(--radius);padding:28px 18px;box-shadow:var(--shadow)}
.member__mono{display:grid;place-items:center;width:96px;height:96px;margin:0 auto 16px;border-radius:50%;font-family:var(--display);font-size:2rem;border:3px solid #000;box-shadow:4px 4px 0 #000;background:var(--teal);color:#000}
.member--pink .member__mono{background:var(--pink);color:#fff}.member--yellow .member__mono{background:var(--yellow)}
.member h3{font-size:1.25rem;text-transform:uppercase;margin-bottom:.2em}
.member p{margin:0;color:var(--muted);font-weight:700}
.setlist{border:2px dashed rgba(255,255,255,.3);border-radius:var(--radius);padding:24px 28px;background:rgba(18,13,29,.6)}
.setlist h3{text-transform:uppercase;color:var(--yellow);font-size:1.3rem}
.setlist p{color:var(--muted);margin:0 0 18px}

/* Testimonials */
.quotes{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:24px;grid-template-columns:1fr}
@media (min-width:860px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{position:relative;display:flex;flex-direction:column;justify-content:space-between;background:var(--bg);border:3px solid #000;border-radius:var(--radius);padding:44px 26px 22px;box-shadow:8px 8px 0 var(--teal)}
.quote--pink{box-shadow:8px 8px 0 var(--pink)}.quote--yellow{box-shadow:8px 8px 0 var(--yellow)}
.quote::before{content:"\201C";position:absolute;top:-22px;left:20px;width:52px;height:52px;display:grid;place-items:center;border:3px solid #000;border-radius:50%;background:var(--teal);color:#000;font-family:var(--display);font-size:2.4rem;line-height:1;padding-top:14px;box-shadow:3px 3px 0 #000}
.quote--pink::before{background:var(--pink);color:#fff}.quote--yellow::before{background:var(--yellow)}
.quote blockquote{margin:0}
.quote blockquote p{margin:0;font-size:1.15rem;line-height:1.5;color:var(--ink)}
.quote__by{margin:18px 0 0;font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:.9rem;color:var(--yellow)}
.quote__by::before{content:"\2014\00a0"}

/* Booking */
.book{background:radial-gradient(circle at 15% 20%,rgba(224,51,143,.25),transparent 45%),radial-gradient(circle at 85% 80%,rgba(111,211,223,.18),transparent 45%),var(--bg)}
.book__grid{display:grid;gap:40px;grid-template-columns:1fr 1.25fr;align-items:start}
@media (max-width:880px){.book__grid{grid-template-columns:1fr}}
.book__intro>p{color:var(--muted);font-size:1.1rem}
.book__email{font-size:1.05rem}
.book__email a{font-weight:700;font-size:1.15rem;word-break:break-all}
.epk{margin-top:28px;padding:22px;border:3px solid #000;border-radius:var(--radius);background:var(--bg2);box-shadow:6px 6px 0 var(--teal)}
.epk h3{text-transform:uppercase;font-size:1.15rem}
.epk p{color:var(--muted);margin:0 0 14px;font-size:.98rem}
.form{background:#fff;color:#1a1424;border:3px solid #000;border-radius:var(--radius);padding:28px;box-shadow:10px 10px 0 var(--pink)}
.form label{display:block;font-weight:700;font-size:.92rem;margin-bottom:16px}
.form .opt{font-weight:400;color:#6b6478}
.form input,.form select,.form textarea{display:block;width:100%;margin-top:6px;font:inherit;font-weight:400;font-size:1rem;color:#1a1424;background:#f6f3fb;border:2px solid #2a2140;border-radius:10px;padding:.7em .8em;min-height:48px}
.form textarea{resize:vertical;min-height:110px}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px rgba(224,51,143,.25)}
.form__row{display:grid;gap:0 16px;grid-template-columns:1fr 1fr}
@media (max-width:520px){.form__row{grid-template-columns:1fr}.form{padding:20px}}
.form .btn--big{background:var(--pink);color:#fff;margin-top:6px}
.form .btn--big:hover{background:#c91f79}
.form__status{margin:12px 0 0;font-weight:700;min-height:1.2em}
.form__status.ok{color:#0a7a45}.form__status.err{color:#b3123f}
.hp{position:absolute;left:-9999px}

/* Footer */
.footer{background:#0b0813;border-top:3px solid;border-image:linear-gradient(90deg,var(--pink),var(--yellow),var(--teal)) 1;padding:48px 0 36px;text-align:center}
.footer__inner{display:grid;justify-items:center;gap:18px}
.footer img{width:110px;height:auto}
.social{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.social a{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-weight:700;border:2px solid rgba(255,255,255,.2);border-radius:999px;padding:9px 16px}
.social a:hover{border-color:var(--yellow);color:var(--yellow)}
.social svg{width:20px;height:20px;fill:currentColor}
.footer__handle{margin:0;color:var(--muted)}
.footer__small{margin:0;color:#8a82a0;font-size:.85rem}