:root {
  --night: #0c0810;
  --night-2: #151019;
  --ink: #f6ecc9;
  --muted: #c9bba0;
  --amber: #f39a2b;
  --rust: #e2493a;
  --plum: #8a4fd0;
  --teal: #2fa6c9;
  --green: #5cc24a;
  --gold: #f6d34a;
  --rainbow: linear-gradient(90deg, #e2493a, #f39a2b, #f6d34a, #5cc24a, #2fa6c9, #8a4fd0);
  --line: rgba(246, 236, 201, 0.14);
  --display: "Shrikhand", Georgia, serif;
  --body: "Work Sans", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--night); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; overflow-x: hidden; }
a { color: var(--amber); }
img { max-width: 100%; display: block; }
h1, h2, h3 { line-height: 1.1; margin: 0; }
h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 6vw, 3.4rem); color: var(--amber);
  background: linear-gradient(90deg, var(--rust), var(--amber) 45%, var(--gold)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; width: fit-content; padding-bottom: 0.08em; }
h3 { font-size: 1.15rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* nav */
.nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px clamp(16px, 4vw, 48px); background: rgba(20, 13, 11, 0.86); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.brand { font-family: var(--display); font-size: 1.35rem; color: var(--ink); text-decoration: none; }
.brand span { color: var(--amber); }
.nav nav { display: flex; gap: 22px; align-items: center; }
.nav nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.nav nav a:hover { color: var(--amber); }
.nav .pill { background: var(--amber); color: var(--night) !important; padding: 8px 16px; border-radius: 999px; }
.menu { display: none; background: none; border: 1px solid var(--line); color: var(--ink); font-size: 1.3rem; border-radius: 8px; padding: 4px 10px; cursor: pointer; }
@media (max-width: 760px) {
  .menu { display: block; }
  .nav nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--night-2); border-bottom: 1px solid var(--line); }
  .nav nav.open { display: flex; }
  .nav nav a { padding: 14px 16px; width: 100%; border-top: 1px solid var(--line); }
  .nav .pill { border-radius: 0; }
}

/* hero */
.hero { position: relative; min-height: 88vh; display: grid; place-items: center; text-align: center; overflow: hidden; padding: clamp(40px, 8vh, 90px) 16px clamp(56px, 10vh, 110px);
  background: var(--night); border-bottom: 4px solid transparent; border-image: var(--rainbow) 1; }
.rays { position: absolute; left: 50%; top: 42%; width: 260vmax; height: 260vmax; margin: -130vmax 0 0 -130vmax;
  background: repeating-conic-gradient(from 0deg,
    rgba(226, 73, 58, 0.16) 0 5deg, transparent 5deg 10deg,
    rgba(243, 154, 43, 0.16) 10deg 15deg, transparent 15deg 20deg,
    rgba(246, 211, 74, 0.14) 20deg 25deg, transparent 25deg 30deg,
    rgba(92, 194, 74, 0.14) 30deg 35deg, transparent 35deg 40deg,
    rgba(47, 166, 201, 0.15) 40deg 45deg, transparent 45deg 50deg,
    rgba(138, 79, 208, 0.17) 50deg 55deg, transparent 55deg 60deg);
  animation: spin 120s linear infinite; }
.glow { position: absolute; left: 50%; top: 42%; width: min(110vw, 1000px); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(243, 154, 43, 0.35) 0%, rgba(138, 79, 208, 0.18) 35%, transparent 65%); pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rays, .vinyl { animation: none; } html { scroll-behavior: auto; } }
.hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.cover { margin: 0 0 28px; width: min(86vw, 58vh, 560px); border-radius: 10px; overflow: hidden;
  box-shadow: 0 0 0 3px var(--gold), 0 0 0 7px var(--night), 0 0 0 10px var(--plum), 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 120px rgba(243, 154, 43, 0.35); }
.cover img { width: 100%; height: auto; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.3em; font-weight: 600; font-size: 0.8rem; color: var(--gold); margin: 0; }
.hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(3.4rem, 14vw, 9rem); line-height: 0.92; margin-bottom: 22px;
  background: var(--rainbow); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0.05em 0.05em 0 var(--night)); }
.hero h1 span { color: transparent; }
.lede { font-size: clamp(1.05rem, 2.6vw, 1.35rem); max-width: 34ch; margin: 12px auto 26px; color: var(--ink); text-shadow: 0 2px 10px #0c0810, 0 0 2px #0c0810; font-weight: 500; }
.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn { display: inline-block; background: var(--amber); color: var(--night); font-weight: 700; text-decoration: none; border: 2px solid var(--amber);
  padding: 12px 24px; border-radius: 999px; font-size: 1rem; font-family: var(--body); cursor: pointer; transition: transform 0.15s, background 0.15s; }
.btn:hover { transform: translateY(-2px); background: var(--gold); border-color: var(--gold); }
.btn:disabled { opacity: 0.6; transform: none; cursor: wait; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.ghost:hover { background: rgba(244, 232, 210, 0.08); }
.btn.small { padding: 8px 16px; font-size: 0.9rem; }

/* sections */
.block { padding: clamp(64px, 10vw, 110px) 16px; }
.block.alt { background: var(--night-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.wrap { max-width: 1080px; margin: 0 auto; }
.sub { color: var(--muted); margin: 8px 0 34px; font-size: 1.1rem; }
.empty { display: flex; gap: 22px; align-items: center; padding: 28px; border: 2px dashed var(--line); border-radius: 18px; }
.empty p { margin: 6px 0 0; color: var(--muted); }
.vinyl { flex: none; width: 76px; height: 76px; border-radius: 50%;
  background: radial-gradient(circle, var(--amber) 0 14%, var(--night) 15% 17%, #2a201b 18% 100%), repeating-radial-gradient(circle, #000 0 2px, #2a201b 2px 4px);
  box-shadow: inset 0 0 0 2px #3a2d26; animation: spin 6s linear infinite; }
.ticket { flex: none; width: 76px; height: 76px; border-radius: 16px; display: grid; place-items: center; font-size: 2rem; background: linear-gradient(135deg, var(--plum), var(--rust)); color: var(--ink); transform: rotate(-6deg); }
.players { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.player iframe { width: 100%; height: 352px; border: 0; border-radius: 14px; }

/* shows */
.shows { list-style: none; margin: 0; padding: 0; }
.show { display: flex; align-items: center; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.show .date { flex: none; width: 70px; text-align: center; background: var(--amber); color: var(--night); border-radius: 12px; padding: 6px 0; }
.show .date span { display: block; text-transform: uppercase; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; }
.show .date b { font-family: var(--display); font-weight: 400; font-size: 1.8rem; line-height: 1; }
.show .info { flex: 1; min-width: 0; }
.show .info p { margin: 4px 0 0; color: var(--muted); }

/* members */
.members { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.member { background: var(--night-2); border: 1px solid var(--line); border-radius: 18px; padding: 20px; }
.member img, .member .mono { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; margin-bottom: 14px; }
.member .mono { display: grid; place-items: center; font-family: var(--display); font-size: 4rem; color: var(--night); }
.c0 .mono { background: var(--amber); } .c1 .mono { background: var(--green); } .c2 .mono { background: var(--teal); } .c3 .mono { background: var(--plum); }
.member .role { color: var(--amber); font-weight: 600; margin: 4px 0 8px; }
.member p { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* gallery */
.gallery { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gallery figure { margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; }
.gallery figure img { width: 100%; height: 100%; object-fit: cover; }
.gallery .ph { opacity: 0.55; }
.p0 { background: linear-gradient(135deg, var(--rust), var(--plum)); }
.p1 { background: radial-gradient(circle at 30% 70%, var(--amber), var(--rust) 70%); }
.p2 { background: repeating-linear-gradient(45deg, var(--teal) 0 14px, #24706a 14px 28px); }
.p3 { background: repeating-radial-gradient(circle at 50% 50%, var(--plum) 0 10px, #4e2043 10px 20px); }
.p4 { background: linear-gradient(200deg, var(--amber), var(--green)); }
.p5 { background: conic-gradient(from 90deg, var(--rust), var(--amber), var(--plum), var(--rust)); }
.ph-note { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-family: var(--display); font-size: clamp(1.6rem, 5vw, 2.6rem); color: var(--ink); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); pointer-events: none; }
@media (max-width: 600px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

/* booking */
.booking { background: radial-gradient(ellipse at 0% 0%, rgba(138, 79, 208, 0.28), transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(243, 154, 43, 0.18), transparent 55%), var(--night); }
.two { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; align-items: start; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }
.card { background: var(--ink); color: var(--night); border-radius: 22px; padding: clamp(20px, 4vw, 34px); box-shadow: 8px 8px 0 var(--plum), 16px 16px 0 var(--amber); }
form { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.field { grid-column: span 2; }
@media (min-width: 560px) { .field:not(.wide) { grid-column: span 1; } }
.field label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 6px; }
.req { color: var(--rust); }
input, select, textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--night); background: #fffaf1; border: 2px solid #d9c6a8; border-radius: 10px; padding: 10px 12px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--rust); box-shadow: 0 0 0 3px rgba(212, 80, 43, 0.2); }
[aria-invalid="true"] { border-color: var(--rust); }
.other { margin-top: 8px; }
.field small { color: #6e5a45; }
.err { color: #b3311a; font-size: 0.85rem; min-height: 1.3em; margin: 4px 0 6px; }
.form-err { grid-column: span 2; }
form .btn { grid-column: span 2; justify-self: start; background: var(--rust); border-color: var(--rust); color: var(--ink); }
form .btn:hover { background: #e2603a; }
.check { display: flex; gap: 8px; align-items: center; font-weight: 500; }
.check input { width: auto; }
.skeleton { height: 46px; border-radius: 10px; margin-bottom: 18px; background: linear-gradient(90deg, #eadcc5, #f6ecdb, #eadcc5); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
.skeleton.tall { height: 120px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.thanks { text-align: center; padding: 20px 0; }
.thanks .badge { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: var(--ink); font-size: 2rem; }
.thanks p { font-size: 1.1rem; }
.thanks .btn.ghost { color: var(--night); border-color: var(--night); }
.closed { margin: 0; }

.foot { text-align: center; padding: 40px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; }
.foot p { margin: 4px 0; }

/* photo gallery */
.gallery.masonry { display: block; columns: 3 260px; column-gap: 12px; }
.shot { display: block; width: 100%; margin: 0 0 12px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: zoom-in;
  background: var(--night-2); break-inside: avoid; position: relative; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s, filter 0.4s; }
.shot:hover img, .shot:focus-visible img { transform: scale(1.04); filter: saturate(1.2); }
.shot:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.shot.more { display: none; }
.open-all .shot.more { display: block; }
.show-all { display: block; margin: 22px auto 0; }
.lightbox { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(8, 5, 10, 0.94); padding: 56px 12px; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(100%, 1400px); max-height: calc(100vh - 120px); width: auto; height: auto; border-radius: 8px;
  box-shadow: 0 0 0 2px var(--gold), 0 20px 60px rgba(0, 0, 0, 0.7); }
.lb-close, .lb-nav { position: absolute; background: rgba(246, 236, 201, 0.12); color: var(--ink); border: 0; border-radius: 999px;
  width: 48px; height: 48px; font-size: 2rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.lb-close:hover, .lb-nav:hover { background: var(--amber); color: var(--night); }
.lb-close { top: 12px; right: 12px; }
.lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.lb-count { position: absolute; bottom: 14px; left: 0; right: 0; margin: 0; text-align: center; color: var(--muted); font-size: 0.9rem; }
body.lb-on { overflow: hidden; }

/* music */
.players.with-art { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
@media (max-width: 760px) { .players.with-art { grid-template-columns: 1fr; } .players.with-art .record { max-width: 420px; } }
.record { display: block; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 3px var(--gold), 0 0 0 7px var(--night), 0 0 0 10px var(--plum), 0 24px 60px rgba(0, 0, 0, 0.6);
  transition: transform 0.3s; }
.record:hover { transform: rotate(-1.5deg) scale(1.01); }
.tracks { display: grid; gap: 22px; }
.player { background: var(--night-2); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.player iframe { display: block; width: 100%; border: 0; border-radius: 10px; }
.player .btn { margin-top: 14px; }

/* videos */
[hidden] { display: none !important; }
.videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.videos .featured { grid-column: 1 / -1; }
.videos.single { grid-template-columns: 1fr; }
@media (max-width: 640px) { .videos { grid-template-columns: 1fr; } }
.video { margin: 0; }
.video .yt, .video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 14px; overflow: hidden; background: #000; }
.video .yt { position: relative; padding: 0; cursor: pointer; box-shadow: 0 0 0 1px var(--line); }
.video .yt img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s, filter 0.4s; filter: saturate(1.05) brightness(0.85); }
.video .yt:hover img, .video .yt:focus-visible img { transform: scale(1.03); filter: saturate(1.25) brightness(1); }
.video .yt:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.video .play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; transform: translate(-50%, -50%); border-radius: 50%;
  background: conic-gradient(var(--rust), var(--amber), var(--gold), var(--green), var(--teal), var(--plum), var(--rust)); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6); }
.video .play::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--night); }
.video .play::after { content: ""; position: absolute; left: 31px; top: 24px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent var(--ink); }
.video figcaption { margin-top: 10px; font-weight: 600; color: var(--ink); }

/* header name in one color */
.brand, .brand span { color: var(--amber); }

/* follow along */
.follow { padding: clamp(48px, 7vw, 72px) 16px; background: var(--night-2); border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  border-image: var(--rainbow) 1; text-align: center; }
.follow h2 { margin: 0 auto 26px; }
.socials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 900px; margin: 0 auto; }
@media (max-width: 720px) { .socials { grid-template-columns: 1fr; max-width: 420px; } }
.social { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; text-decoration: none; text-align: left;
  color: var(--ink); background: var(--night); border: 1px solid var(--line); transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; min-width: 0; }
.social:hover, .social:focus-visible { transform: translateY(-3px); border-color: var(--amber); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.social:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.social svg { flex: none; width: 46px; height: 46px; padding: 10px; border-radius: 12px; fill: #fff; }
.social.fb svg { background: #1877f2; }
.social.ig svg { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.social.mail svg { background: linear-gradient(135deg, var(--rust), var(--amber)); }
.social span { display: grid; min-width: 0; }
.social b { font-size: 1.05rem; }
.social small { color: var(--muted); font-size: 0.88rem; overflow-wrap: anywhere; }

/* videos 25% smaller */
.videos { width: 75%; margin-left: auto; margin-right: auto; }

/* gallery thumbnails 25% smaller: 4 columns instead of 3 on wide screens */
.gallery.masonry { columns: 4 190px; }

/* band bio */
.about { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; margin-bottom: 34px; }
@media (max-width: 760px) { .about { grid-template-columns: 1fr; } }
.bio p { margin: 0 0 1em; font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.75; max-width: 62ch; }
.bio p:first-child::first-letter { float: left; font-family: var(--display); font-size: 3.6em; line-height: 0.9; padding: 0.06em 0.1em 0 0; color: var(--amber); }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.facts li { display: grid; padding: 18px 20px; border-radius: 16px; background: var(--night); border: 1px solid var(--line); border-left: 4px solid var(--amber); }
.facts li:nth-child(2) { border-left-color: var(--plum); }
.facts b { font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1; color: var(--gold); }
.facts span { color: var(--muted); }

/* album line under the bio */
.bio .album-note { padding: 14px 18px; border-radius: 14px; background: var(--night); border: 1px solid var(--line); border-left: 4px solid var(--gold); font-weight: 600; }
.bio .album-note a { white-space: nowrap; font-weight: 700; }

/* YouTube channel link under the videos */
.channel { text-align: center; margin: 28px 0 0; }
.channel .btn { white-space: normal; }

/* YouTube logo inside the channel button */
.channel .btn { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 0 0.4em; padding: 10px 22px; }
.yt-logo { display: inline-block; height: 1.85em; width: auto; }