:root{
  --black:#060507;
  --charcoal:#141014;
  --rust:#8c3b16;
  --rust-dark:#2b120d;
  --orange:#ff7a18;
  --orange-soft:#ffb06b;
  --violet:#9a59ff;
  --violet-deep:#301250;
  --cream:#f1e0cb;
  --muted:#bda891;
  --line:rgba(255,122,24,.34);
  --max:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--cream);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.6;
  background:
    radial-gradient(circle at 18% 8%,rgba(154,89,255,.20),transparent 34rem),
    radial-gradient(circle at 88% 0%,rgba(255,122,24,.14),transparent 28rem),
    linear-gradient(135deg,#060507 0%,#14090a 44%,#070507 100%);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.16;
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:72px 38px;
  mix-blend-mode:screen;
}
a{color:inherit}
.site-header{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.85rem clamp(1rem,3vw,2.5rem);
  background:rgba(6,5,7,.78);
  border-bottom:1px solid rgba(255,122,24,.25);
  backdrop-filter:blur(14px);
}
.brand{display:flex;gap:.7rem;align-items:center;text-decoration:none;font-weight:800;letter-spacing:.03em}
.brand img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(154,89,255,.5))}
nav{display:flex;align-items:center;gap:clamp(.75rem,2vw,1.4rem);font-size:.94rem}
nav a{color:var(--muted);text-decoration:none;text-transform:uppercase;letter-spacing:.09em;font-weight:800}
nav a:hover,.nav-cta{color:var(--orange)}
.hero{
  position:relative;
  min-height:70vh;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:3.5rem clamp(1rem,3vw,2rem) 4.25rem;
  border-bottom:1px solid var(--line);
}
.hero-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 30%,rgba(154,89,255,.30),transparent 17rem),
    radial-gradient(circle at 16% 84%,rgba(255,122,24,.20),transparent 16rem),
    radial-gradient(circle at 88% 78%,rgba(255,122,24,.18),transparent 15rem),
    linear-gradient(135deg,rgba(58,22,14,.78),rgba(7,5,7,.96) 46%,rgba(22,8,26,.92)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.032) 0 1px,transparent 1px 76px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 150px);
  filter:saturate(1.08) contrast(1.12);
  transform:scale(1.02);
}
.hero-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 24% 26%,rgba(255,122,24,.11),transparent 13rem),
    radial-gradient(circle at 70% 18%,rgba(154,89,255,.14),transparent 15rem),
    linear-gradient(90deg,transparent,rgba(255,122,24,.028),transparent);
  mix-blend-mode:screen;
}
.hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.20;
  background-image:
    linear-gradient(25deg,rgba(255,255,255,.038) 8%,transparent 8% 18%,rgba(0,0,0,.18) 18% 20%,transparent 20% 100%),
    linear-gradient(115deg,transparent 0 32%,rgba(255,122,24,.07) 32% 34%,transparent 34% 100%);
  background-size:210px 120px,320px 220px;
  mask-image:radial-gradient(circle at center,black,transparent 82%);
}
.hero-content{
  position:relative;
  width:100%;
  max-width:1120px;
  margin:0 auto;
  text-align:center;
}
.hero-logo{
  display:block;
  width:min(86vw,1040px);
  max-width:100%;
  height:auto;
  margin:0 auto 1.65rem;
  object-fit:contain;
  box-shadow:0 0 26px rgba(154,89,255,.34),0 0 52px rgba(255,122,24,.10);
  filter:drop-shadow(0 0 15px rgba(154,89,255,.42)) drop-shadow(0 0 24px rgba(255,122,24,.12));
}
.eyebrow,.section-kicker{color:var(--orange-soft);text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;font-weight:900}
.hero .eyebrow{margin-top:.25rem;margin-bottom:.8rem}
h2,h3{line-height:1.05;margin:0 0 1rem}
h2{font-size:clamp(2rem,5vw,4.4rem)}
h3{font-size:1.35rem;color:var(--orange-soft)}
.tagline{font-size:clamp(1.2rem,2.8vw,1.85rem);margin:0 auto 1.75rem;color:var(--cream)}
.hero-actions,.socials{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.85rem 1.2rem;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.button.primary{background:linear-gradient(135deg,var(--orange),#c64714);color:#160806;box-shadow:0 0 26px rgba(255,122,24,.30)}
.button.secondary{background:rgba(154,89,255,.12);color:var(--cream)}
section{max-width:var(--max);margin:0 auto;padding:clamp(4rem,8vw,7rem) clamp(1rem,3vw,2rem)}
.grid-section,.split-section{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.grid-section p:last-child,.split-section p{font-size:1.15rem;color:var(--muted)}
.panel,.empty-card,.booking-card{background:linear-gradient(135deg,rgba(255,122,24,.12),rgba(154,89,255,.08)),rgba(16,10,10,.82);border:1px solid var(--line);border-radius:28px;box-shadow:0 24px 80px rgba(0,0,0,.34)}
.about-panel{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.photo-stack{position:relative}
.main-photo,.booking img{width:100%;border-radius:22px;display:block;border:1px solid rgba(255,255,255,.08)}
.badge-photo{position:absolute;width:46%;right:-4%;bottom:-10%;border-radius:18px;border:1px solid rgba(255,122,24,.5);box-shadow:0 0 34px rgba(255,122,24,.3)}
.venue-list{list-style:none;display:flex;flex-wrap:wrap;gap:.75rem;padding:0;margin:1.5rem 0}
.venue-list li,.song-cloud span{border:1px solid rgba(255,122,24,.4);color:var(--cream);background:rgba(0,0,0,.22);border-radius:999px;padding:.48rem .8rem;font-weight:800}
.note,.for-fans{color:var(--muted)}
.repertoire{text-align:center}
.song-cloud{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin:2rem 0}
.member-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.member-grid article{padding:1.2rem;border:1px solid rgba(255,122,24,.25);border-radius:18px;background:rgba(0,0,0,.24)}
.member-grid p{margin:0;color:var(--muted)}
.empty-card{padding:2rem}
.text-link,.email-link{color:var(--orange-soft);font-weight:900;text-decoration-thickness:2px;text-underline-offset:.25em}
.video-section,.booking{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.booking{max-width:none;margin:0;padding-left:max(1rem,calc((100vw - var(--max))/2));padding-right:max(1rem,calc((100vw - var(--max))/2));background:linear-gradient(90deg,rgba(255,122,24,.18),rgba(154,89,255,.12))}
.booking-card{padding:clamp(1.5rem,4vw,3rem)}
.email-link{display:inline-block;font-size:clamp(1.25rem,3vw,2rem);margin:1rem 0 1.5rem}
.socials{justify-content:flex-start}
.socials a{text-decoration:none;color:var(--cream);border-bottom:2px solid var(--orange);font-weight:800}
footer{text-align:center;padding:2rem;color:var(--muted);border-top:1px solid var(--line);background:rgba(0,0,0,.35)}
footer p{margin:.2rem}
@media (max-width:1400px){.hero-logo{width:min(84vw,980px)}}
@media (max-width:860px){
  .site-header{align-items:flex-start;gap:.8rem;flex-direction:column}
  nav{width:100%;overflow-x:auto;padding-bottom:.2rem}
  .grid-section,.split-section,.about-panel,.video-section,.booking{grid-template-columns:1fr}
  .member-grid{grid-template-columns:1fr 1fr}
  .badge-photo{position:static;width:100%;margin-top:1rem}
  .hero{min-height:66vh;padding-top:2.5rem;padding-bottom:3rem}
  .hero-logo{width:min(94vw,760px);margin-bottom:1.25rem}
}
@media (max-width:560px){
  .brand span{font-size:.9rem}
  nav a{font-size:.8rem}
  .member-grid{grid-template-columns:1fr}
  .hero{min-height:62vh}
  .tagline{font-size:1.08rem}
}

/* v7 member photo cards */
.member-card{
  overflow:hidden;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.member-card:hover{
  transform:translateY(-3px);
  border-color:rgba(154,89,255,.55);
  box-shadow:0 0 28px rgba(154,89,255,.22), 0 0 18px rgba(255,122,24,.14);
}
.member-photo{
  width:100%;
  aspect-ratio:3 / 4;
  object-fit:cover;
  object-position:center;
  display:block;
  border-radius:12px;
  margin:.75rem 0 1rem;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 14px 30px rgba(0,0,0,.28);
  filter:saturate(.95) contrast(1.05);
}
.member-card h3{
  margin-bottom:.45rem;
}
.member-card p{
  font-weight:800;
}

/* v8 final tweak: Josh photo crop */
.member-grid .member-card:nth-child(3) .member-photo{
  object-position:center top;
}


/* v9 featured YouTube promo */
.video-section{
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
}

.video-copy{
  align-self:center;
}

.video-embed{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(255,122,24,.42);
  background:#050405;
  box-shadow:
    0 0 28px rgba(154,89,255,.18),
    0 20px 48px rgba(0,0,0,.42);
}

.video-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

@media (max-width:860px){
  .video-section{
    grid-template-columns:1fr;
  }

  .video-embed{
    margin-top:.5rem;
  }
}


/* v10 current setlist rail */
.site-layout{
  display:grid;
  grid-template-columns:minmax(250px,310px) minmax(0,1fr);
  align-items:start;
  max-width:1680px;
  margin:0 auto;
}

.site-page{
  min-width:0;
}

.setlist-rail{
  position:sticky;
  top:78px;
  align-self:start;
  max-height:calc(100vh - 78px);
  overflow:auto;
  padding:1.5rem 0 2rem clamp(1rem,2vw,1.5rem);
  scrollbar-width:thin;
  scrollbar-color:rgba(255,122,24,.45) transparent;
}

.setlist-panel{
  padding:1.35rem 1.15rem 1.5rem;
  background:
    linear-gradient(145deg,rgba(255,122,24,.13),rgba(154,89,255,.09)),
    rgba(12,8,10,.9);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 18px 54px rgba(0,0,0,.38),0 0 26px rgba(154,89,255,.1);
}

.setlist-panel h2{
  font-size:clamp(1.7rem,2.4vw,2.45rem);
  margin-bottom:.45rem;
}

.setlist-count{
  margin:0 0 1.15rem;
  color:var(--muted);
  font-size:.9rem;
  font-weight:800;
  letter-spacing:.035em;
}

.setlist-songs{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:.65rem;
  counter-reset:setlist;
}

.setlist-song{
  position:relative;
  padding:.72rem .72rem .72rem 2.15rem;
  border:1px solid rgba(255,122,24,.24);
  border-radius:14px;
  background:rgba(0,0,0,.25);
}

.setlist-song::before{
  content:"♪";
  position:absolute;
  left:.78rem;
  top:.72rem;
  color:var(--orange);
  font-weight:900;
}

.setlist-title{
  display:block;
  color:var(--cream);
  font-weight:900;
  line-height:1.18;
}

.setlist-artist{
  display:block;
  margin-top:.18rem;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.25;
}

.setlist-invitation{
  margin:1.2rem 0 0;
  padding-top:1rem;
  border-top:1px solid rgba(255,122,24,.24);
  color:var(--orange-soft);
  font-size:.86rem;
  font-weight:800;
}

.setlist-error{
  color:var(--orange-soft);
}

@media (max-width:1180px){
  .site-layout{
    grid-template-columns:minmax(225px,270px) minmax(0,1fr);
  }
}

@media (max-width:980px){
  .site-layout{
    display:block;
  }

  .setlist-rail{
    position:static;
    max-height:none;
    overflow:visible;
    padding:1.25rem 1rem 0;
  }

  .setlist-panel{
    max-width:var(--max);
    margin:0 auto;
  }

  .setlist-songs{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:620px){
  .setlist-songs{
    grid-template-columns:1fr;
  }
}