:root{
  --bg-dark: #0c0f19;
  --ink: #e9eef8;
  --ink-dim: #c7cfdf;
  --glass: rgba(10,14,30,.55);
  --gold-1: #f0d66f;
  --gold-2: #caa042;
  --gold-3: #8f6a29;
  --accent: #b8cff9;
  --radius: 18px;
  --shadow-1: 0 20px 60px rgba(0,0,0,.45);
  --blur: blur(10px);
  --maxw: 1100px;
}

* { box-sizing:border-box; }
html,body { height:100%; }
html { scroll-behavior:smooth; }
body{
  margin:0;
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: radial-gradient(1200px 800px at 50% -10%, #223 10%, #0a0e1a 60%, #070a12 100%);
  line-height: 1.5;
}

img{ max-width:100%; display:block; }
.wrap{ width:min(100%, var(--maxw)); margin-inline:auto; padding-inline: clamp(16px, 4vw, 28px); }

/* Background image layer */
.bg{
  position:fixed; inset:0; z-index:-2; overflow:hidden;
  opacity:.85;
}
.bg img{
  width:100%; height:100%; object-fit:cover;
  filter: saturate(1.05) contrast(1.03) brightness(.95);
  transform: scale(1.02);
}

/* Gold sweeps (decorative) */
.gold-sweep{
  position: fixed; left:-10vw; right:-10vw;
  height: 4px; z-index:-1;
  background: linear-gradient(90deg,var(--gold-3),var(--gold-2),var(--gold-1),var(--gold-2),var(--gold-3));
  filter: blur(1px);
  opacity:.75;
}
.gold-sweep--top{ top: 22vh; transform: rotate(-2deg); }
.gold-sweep--bottom{ bottom: 18vh; transform: rotate(2deg); }

/* Header */
.site-header{
  position:sticky; top:0; z-index:10;
  backdrop-filter: saturate(130%) blur(8px);
  background: linear-gradient(to bottom, rgba(3,6,15,.65), rgba(3,6,15,.25) 70%, transparent);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; min-height:68px; }

.brand{ display:flex; gap:.6rem; align-items:center; text-decoration:none; color:var(--ink); }
.brand__mark{ width:42px; height:42px; object-fit:contain; filter: drop-shadow(0 6px 12px rgba(0,0,0,.4)); }
.brand__name{ font-weight:800; letter-spacing:.18em; font-size: clamp(1rem, 1.2rem + .5vw, 1.4rem); }

/* Nav */
.nav__toggle{ background:none; border:none; color:var(--ink); display:none; }
.nav__list{ display:flex; gap:2rem; list-style:none; margin:0; padding:0; }
.nav__list a{
  color:var(--ink-dim); text-decoration:none; font-weight:500; letter-spacing:.06em;
  position:relative; padding:.25rem 0;
}
.nav__list a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; transform:scaleX(0);
  background:linear-gradient(90deg,var(--gold-2),var(--gold-1));
  transition: transform .25s ease;
}
.nav__list a:hover::after, .nav__list a:focus-visible::after{ transform:scaleX(1); }

/* Hero */
.hero{ position:relative; text-align:center; padding: clamp(64px, 14vw, 160px) 0 60px; }
.hero__veil{ position:absolute; inset:0; background: radial-gradient(800px 480px at 50% 30%, rgba(255,255,255,.16), rgba(10,12,24,.55) 60%, rgba(10,12,24,.8) 100%); z-index:-1;}
.hero__logo img{ width:min(24vw,180px); margin-inline:auto; filter: drop-shadow(0 40px 60px rgba(0,0,0,.5)); }
.hero__title{
  margin:.4rem 0 0; font-size: clamp(2.2rem, 1.6rem + 4vw, 4.2rem);
  font-weight:800; letter-spacing:.18em;
  text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.6);
}
.hero__subtitle{
  margin:.2rem 0 0; font-weight:500; color:var(--ink-dim);
  font-size: clamp(1rem, .8rem + 1vw, 1.4rem);
}
.hero__eyebrow{
  margin:.6rem auto 0; width:max-content; padding:.28rem .8rem;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  letter-spacing:.18em; font-size:.85rem; text-transform:uppercase;
}

/* Panel (content stripe) */
.panel{
  margin-top: clamp(20px, 6vw, 40px);
  display:grid; gap: clamp(18px, 2vw, 24px);
  grid-template-columns: 1.4fr 1fr;
}
@media (max-width: 900px){
  .panel{ grid-template-columns: 1fr; }
}

/* Cards */
.card{
  display:grid; grid-template-columns: 240px 1fr; gap: 22px;
  background: linear-gradient(180deg, rgba(10,14,30,.45), rgba(10,14,30,.65));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(10px) saturate(120%);
}
.card__media img{ border-radius: 14px; aspect-ratio: 1 / 1; object-fit: cover; }
.card__body{ align-self:center; }
.eyebrow{
  text-transform:uppercase; letter-spacing:.18em; font-weight:600;
  color: var(--ink-dim); font-size:.8rem; margin: 2px 0 6px;
}
.card__title{ font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); margin:.2rem 0 .4rem; }
.card__text{ color: var(--ink-dim); margin:0 0 1rem; }

.cta-row{ display:flex; gap:.6rem; flex-wrap:wrap; }

.btn{
  --p: .9rem .95rem;
  display:inline-flex; align-items:center; gap:.5rem;
  padding: var(--p);
  border-radius: 12px; text-decoration:none; font-weight:700; letter-spacing:.06em;
  border:1px solid rgba(255,255,255,.18); cursor:pointer;
  transition: transform .08s ease, filter .2s ease, background .2s ease;
}
.btn:active{ transform: translateY(1px) scale(.99); }
.btn--gold{
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2));
  color:#1a1406; border-color: rgba(0,0,0,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 30px rgba(202,160,66,.45);
}
.btn--gold:hover{ filter: brightness(1.05); }
.btn--ghost{
  background: rgba(255,255,255,.06); color: var(--ink);
}

/* Listen block */
.listen{
  background: linear-gradient(180deg, rgba(10,14,30,.45), rgba(10,14,30,.65));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(10px) saturate(120%);
}
.listen__title{ margin:0 0 .6rem; font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); }
.tracks{ display:flex; flex-direction:column; gap:12px; }
.track{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-radius:12px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.track__meta{ display:flex; align-items:center; gap:.8rem; }
.track__name{ margin:0; font-size:1rem; }
.track__duration{ color:var(--ink-dim); font-size:.9rem; }
.track audio{ display:none; }
.icon-btn{
  width:42px; height:42px; border-radius:50%;
  display:inline-grid; place-items:center;
  border:1px solid rgba(255,255,255,.18);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.25), rgba(255,255,255,.06));
  color:#1b1202;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 6px 20px rgba(0,0,0,.3);
  cursor:pointer;
}
.icon-btn svg{ fill: url(#goldfill); fill: currentColor; }
.icon-btn.play{ background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); }
.icon-btn.pause{
  background: rgba(255,255,255,.06);
  color: var(--ink); backdrop-filter: blur(2px);
}

/* Connect */
.connect{
  grid-column: 1 / -1;
  display:grid; gap:12px;
  background: linear-gradient(180deg, rgba(10,14,30,.45), rgba(10,14,30,.65));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-1);
}
.connect__title{ margin:0; }
.connect__copy{ margin:0 0 .4rem; color:var(--ink-dim); }
.subscribe{ display:flex; gap:10px; flex-wrap:wrap; }
.subscribe input{
  flex:1 1 260px; min-width: 220px;
  padding:.9rem 1rem; border-radius:12px; border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06); color: var(--ink);
  outline: none;
}
.subscribe input::placeholder{ color: #b9c3d9; }

/* Footer */
.site-footer{
  margin: 46px 0 32px;
  text-align:center; color: var(--ink-dim);
}
.site-footer .wrap{ display:flex; flex-direction:column; gap:6px; align-items:center; }
.footer__brand{
  font-weight:800; letter-spacing:.18em; font-size: clamp(1rem, .8rem + .6vw, 1.2rem);
  color: #e8e1c8;
}
.footer__album{ font-size: clamp(1.3rem, 1rem + 2vw, 2.2rem); color: #f2e6b2; }

/* Accessibility helpers */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Mobile nav */
@media (max-width: 800px){
  .nav__toggle{ display:block; }
  .nav__list{
    position:absolute; right:16px; top:62px;
    background: rgba(10,14,30,.9);
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    padding:10px 14px; gap:10px; flex-direction:column;
    transform-origin: top right; transform: scale(.98);
    opacity:0; pointer-events:none; transition: opacity .18s ease, transform .18s ease;
  }
  .nav__list.is-open{ opacity:1; pointer-events:auto; transform: scale(1); }
}