:root{
      --bg:#0b0b0e;        /* page background */
      --panel:#121217;     /* card background */
      --elev:#181825;      /* elevated surface */
      --ink:#f2f2f5;       /* primary text */
      --muted:#b3b3bd;     /* secondary text */
      --line:#242437;      /* separators */
      --accent:#D94A4A;    /* red accent */
      --accent-2:#77F2B1;  /* alt accent (subtle neon) */
    }
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(1120px,92vw);margin:0 auto}
.section{padding:72px 0;border-top:1px solid var(--line)}
.section:first-of-type{border-top:none}
.eyebrow{letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-size:.75rem}
h1{font-weight:900;line-height:1.05;margin:.25rem 0 0;font-size:clamp(2.25rem,6vw,4rem)}
h2{font-weight:800;margin:0 0 .25rem;font-size:clamp(1.5rem,3.5vw,2.25rem)}
p.lead{color:var(--muted);font-size:clamp(1rem,2.5vw,1.15rem);margin:.5rem 0 1rem}

/* Buttons */
.btn{display:inline-block;padding:12px 20px;border:2px solid var(--ink);border-radius:12px;text-decoration:none;font-weight:800}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.fill{background:var(--accent);border-color:var(--accent);color:#0a0a0a}
.btn.fill:hover{filter:brightness(1.06)}

/* HERO */
.hero{position:relative;isolation:isolate;padding:92px 0 120px;background:radial-gradient(900px 420px at 50% -10%, #2a2a3a 0, transparent 60%)}
.hero .bg{position:absolute;inset:0;z-index:-1;opacity:.18;background:url('/static/assets/media/images/DM_full-band-02_large.webp') center/cover no-repeat} /* swap in album cover or band shot */
.hero .cta{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}
.hero .frame{position:relative; overflow:hidden; margin-top:28px;border:1px dashed var(--line);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));padding:14px}
.hero #hero-image{ background:#0e0e12 url('/static/assets/media/images/gnarly-wide-large.jpg') center/cover no-repeat; }
@media screen and (max-width:640px){
    .hero #hero-image{
        background:#0e0e12 url('/static/assets/media/images/2023-10-18_gnarly-barley_small.webp') center/cover no-repeat;
    }
}

/* GRID HELPERS */
.grid{display:grid;gap:24px}
.two{grid-template-columns:1fr}
.three{grid-template-columns:1fr}
@media(min-width:900px){.two{grid-template-columns:1fr 2fr}}
@media(min-width:860px){.three{grid-template-columns:repeat(3,1fr)}}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px}
.panel.soft{background:var(--elev)}
.divider{height:1px;background:var(--line);margin:14px 0}

/* ALBUM */
#album {position:relative;}
#album .front-matter{z-index:10; position:relative;}
#album .back-matter{position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background:#000230;}
#album .container h2{ position: relative; z-index: 10; margin-top: 0;}
.album-art img{width:auto;}
@media(max-width:899px){.album-art img{width:100%;height:auto;}}
.album-tracks{position:relative;}
.album-tracks p {font-size: 1.5rem; margin-top: 0;}
.album-tracks li.playing::before{
    content: "▶";
    display: inline-block; /* Or block, depending on layout needs */
    width: 0;
    height: 0;
    padding-left: 12px;
}
.album-tracks li.playing {
    background-color: rgba(97, 116, 94,.7);
    padding-right: 12px;
    border: 5px solid green;
    font-weight: bold;
}
.album-tracks li[data-track]:hover{
    cursor: pointer;
    transition: background-color 0.3s ease;
    background-color: rgba(97, 116, 94,.35);
}



/* VISUALIZER */
#visualizer .visualizer-fg{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;opacity: .2; background: url('/static/assets/media/images/2017-07-15_HOB-NOLA_-2_large.webp') right / cover no-repeat; background-position: right bottom;}
@media screen and (orientation: portrait){
    #visualizer .visualizer-fg{background-position: center bottom; background-image: url('/static/assets/media/images/2017-07-15_HOB-NOLA_-vertical_large.webp');}
}
@media screen and (orientation: portrait), (max-width: 1280px){
    #visualizer .visualizer-fg{background-position: center bottom; background-image: url('/static/assets/media/images/2017-07-15_HOB-NOLA_-vertical_medium.webp');}
}
@media screen and (orientation: portrait), (max-width: 640px){
    #visualizer .visualizer-fg{background-position: center bottom; background-image: url('/static/assets/media/images/2017-07-15_HOB-NOLA_-vertical_small.webp');}
}

#visualizer canvas{position:absolute;top:0;left:0;right:0;bottom:0;z-index:0; width: 100%; height: 100%; opacity:.35;}

/* PLAYER */
.player{display:grid;gap:10px; position:relative; width: 100%; z-index: 10; margin-top: 24px;}
.player-main{display:flex;gap:12px;align-items:center}
.player .cover{width:64px;height:64px;background:#0f0f15 url('/static/assets/media/images/let-them-hear_album-cover-artwork.png') center/cover;border:1px solid var(--line)}
.player .meta{flex:1;min-width:0}
.player .title{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player .times{color:var(--muted);font-size:.9rem;margin-top:2px}
.player .bar{position:relative;height:8px;background:#0f0f15;border:1px solid var(--line);border-radius:999px;margin-top:8px;cursor:pointer}
.player .bar-fill{position:absolute;inset:0 100% 0 0;background:var(--accent);border-radius:999px}
.controls{display:flex;align-items:center;gap:8px}
.controls button{appearance:none;background:#0f0f15;border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:8px 10px;font-weight:800}
.controls button:hover{border-color:var(--accent);color:var(--accent)}
.controls .spacer{flex:1}
.controls .vol input{width:120px}
@media(max-width:540px){.player .cover{display:none}}

/* TRACKLIST */
.tracklist{list-style:none;padding:0;margin:0}
.tracklist li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line);color:var(--muted)}
.tracklist li:last-child{border-bottom:none}
.time{opacity:.75}

/* ABOUT ACCORDION */
details{border:1px solid var(--line);border-radius:14px;overflow:hidden}
summary{cursor:pointer;padding:14px 16px;font-weight:800;background:var(--panel)}
details[open] summary{border-bottom:1px solid var(--line)}
.accordion-body{padding:14px 16px;background:var(--elev);color:var(--muted)}
section#about{
    background: url('/static/assets/media/images/spoon-gnarly-halloween_small.webp') center/cover no-repeat;
}
@media screen and (min-width:768px){
    section#about{
        background: url('/static/assets/media/images/spoon-gnarly-halloween_medium.webp') center/cover no-repeat;
    }
}
@media screen and (min-width:1024px){
    section#about{
        background: url('/static/assets/media/images/spoon-gnarly-halloween_large.webp') center/cover no-repeat;
    }
}

/* MEMBER CARDS */
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px}
.pfp{overflow:hidden;aspect-ratio:1/.66456;background:#0f0f15;border:1px dashed var(--line);border-radius:12px;margin-bottom:12px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.role{color:var(--muted);font-size:.95rem;margin:.25rem 0 0}
section#members{
    background: url('/static/assets/media/images/dugas-gnarly-halloween_small.webp') center/cover no-repeat;
}
@media screen and (min-width:768px){
    section#members{
        background: url('/static/assets/media/images/dugas-gnarly-halloween_medium.webp') center/cover no-repeat;
    }
}
@media screen and (min-width:1024px){
    section#members{
        background: url('/static/assets/media/images/dugas-gnarly-halloween_large.webp') center/cover no-repeat;
    }
}

/* MEDIA */
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.thumb{aspect-ratio:4/3;border:1px dashed var(--line);border-radius:12px;background:#0f0f15;overflow:hidden;}
.thumb img{width:100%;height:auto}
.video{aspect-ratio:16/9;border:1px dashed var(--line);border-radius:12px;background:#0f0f15}
section#media{
    background: url('/static/assets/media/images/medicine_artwork_small.webp') center/cover no-repeat;
}
@media screen and (min-width:768px){
    section#media{
        background: url('/static/assets/media/images/medicine_artwork_medium.webp') center/cover no-repeat;
    }
}
@media screen and (min-width:1024px){
    section#media{
        background: url('/static/assets/media/images/medicine_artwork_large.webp') center/cover no-repeat;
    }
}

/* SOCIALS */
.icons{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:680px){.icons{grid-template-columns:repeat(8,1fr)}}
.ico{display:flex;align-items:center;justify-content:center;height:56px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--muted)}

/* CLOSER */
.closer{padding:110px 0 140px;background:linear-gradient(to bottom,transparent 0%,#040406 55%,#000 100%);text-align:center}
.closer h2{font-size:clamp(1.8rem,4.8vw,3rem);margin:0 0 .25rem}
.pulse{display:inline-block;position:relative}
.pulse em{font-style:normal;color:var(--accent)}
.pulse::after{content:"";position:absolute;inset:-2px;border-radius:6px;box-shadow:0 0 0 0 rgba(217,74,74,.6);animation:pulse 2.2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(217,74,74,.55)}70%{box-shadow:0 0 0 14px rgba(217,74,74,0)}100%{box-shadow:0 0 0 0 rgba(217,74,74,0)}}

/* RESPONSIVE SPACING TWEAKS */
@media(max-width:520px){.section{padding:56px 0}}