/* =============
   Base & Theme
   ============= */
:root{
  --ink:#1e1c1a;
  --paper:#f6f1e8;
  --paper-2:#efe7da;
  --rust:#b24a2f;
  --rust-2:#8e3a25;
  --olive:#5c6a5f;
  --gold:#c7a66b;
  --denim:#355069;
  --shadow: 0 10px 30px rgba(0,0,0,.15);
  --radius: 18px;
}
html,body{height:100%}
body{
  margin:0; font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink); background:var(--paper);
  scroll-behavior:smooth;
}
.container{width:min(1100px, 92vw); margin-inline:auto}
a{color:var(--denim); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}
.btn{display:inline-flex; align-items:center; gap:.6rem; border:none; border-radius:999px; padding:.9rem 1.2rem; cursor:pointer; text-decoration:none; font-weight:700; letter-spacing:.02em}
.btn-primary{background:var(--rust); color:white; box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--rust-2)}
.btn-outline{background:transparent; color:var(--rust); outline:2px solid var(--rust);}
.tag{display:inline-block; background:var(--paper-2); color:#564a39; border-radius:999px; padding:.35rem .8rem; font-size:.8rem; letter-spacing:.04em}
.card{background:white; border-radius:var(--radius); box-shadow:var(--shadow)}
.section{padding:64px 0}

/* Skip link */
.skip{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip:focus{left:1rem; top:1rem; width:auto; height:auto; background:#000; color:#fff; padding:.6rem 1rem; z-index:9999; border-radius:6px}

/* Robust hidden fallback */
[hidden]{display:none !important}

/* ======= Header / Nav ======= */
header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(12px); background:rgba(246,241,232,.7); border-bottom:1px solid rgba(0,0,0,.06)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:.8rem}
.brand .logo{
  width:36px; height:36px;
  border-radius:50%;
  background: url('/images/logo.png') center/contain no-repeat;
  border:2px solid var(--gold);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.brand h1{font-size:1.05rem; letter-spacing:.08em; text-transform:uppercase; margin:0}

/* Desktop primary menu */
.menu{display:flex; gap:1.1rem}
.menu a{color:#3b3a39; font-weight:600}
.menu button{display:none}

/* Make the drawer truly hidden by default across browsers */
[hidden]{display:none !important}

/* Mobile drawer menu — ALWAYS hidden by default until opened via JS */
nav.menu.mobile{display:none !important;}

@media (max-width:860px){
  /* Hide desktop menu on small screens */
  header .menu{display:none;}
   .menu-toggle{display:inline-flex!important}
  /* Style the mobile drawer; still hidden until .open is added */
  nav.menu.mobile{position:absolute; left:0; right:0; top:60px; padding:1rem; gap:.9rem; border-bottom:1px solid rgba(0,0,0,.08); background:white; flex-direction:column}
  nav.menu.mobile.open{display:flex !important; flex-direction:column;}
}
  .menu.mobile{display:flex; flex-direction:column; background:white; position:absolute; left:0; right:0; top:60px; padding:1rem; gap:.9rem; border-bottom:1px solid rgba(0,0,0,.08)}
  .menu-toggle{display:inline-flex!important}
}

/* ======= Hero ======= */
.hero{position:relative; isolation:isolate;}
.hero .bg{position:absolute; inset:0; background:
  radial-gradient(1200px 400px at 80% 10%, rgba(178,74,47,.18), transparent 60%),
  radial-gradient(1200px 400px at 10% 90%, rgba(53,80,105,.18), transparent 60%),
  url('/images/hero.webp') center/cover no-repeat; 
  filter:contrast(1) saturate(1) brightness(.88);
  z-index:-1; border-bottom:1px solid rgba(0,0,0,.08)
}
.hero .overlay{position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.25) 40%, rgba(246,241,232,.7) 75%, var(--paper)); z-index:-1}
.hero-inner{display:grid; grid-template-columns: 1.1fr .9fr; gap:34px; padding:84px 0 40px}
.hero h2{color:#fff; font-size:clamp(2rem, 2.8vw + 1rem, 3.2rem); line-height:1.1; margin:.3rem 0}
.hero p.lede{color:#f4efe8; font-size:1.1rem; max-width:50ch}
.album-card{padding:16px; background:rgba(255,255,255,.88); border:1px solid rgba(0,0,0,.06); border-radius:var(--radius); box-shadow:var(--shadow)}
.album-grid{display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:center}
.album-cover{width:120px; height:120px; background:#ddd url('/images/album-cover.webp') center/cover no-repeat; border-radius:10px}
.album-meta h3{margin:0; font-size:1.2rem}
.badge{display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .7rem; border-radius:999px; background:var(--gold); color:#2b2418; font-weight:700; font-size:.78rem}
.stack{display:flex; flex-wrap:wrap; gap:.6rem}
.cta-row{display:flex; gap:.6rem; flex-wrap:wrap}

/* Countdown bar */
.countwrap{margin:14px 0 0; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.counter{display:inline-flex; align-items:center; gap:10px; background:rgba(0,0,0,.5); color:#fff; padding:.5rem .75rem; border-radius:999px}
.counter b{min-width:2ch; display:inline-block; text-align:center}

@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr; padding:72px 0 26px}
  .hero p.lede{max-width:65ch}
}

/* ======= Streaming buttons ======= */
.stores{display:flex; gap:.6rem; flex-wrap:wrap}
.store{display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .85rem; border-radius:9px; background:#fff; border:1px solid rgba(0,0,0,.08); box-shadow:var(--shadow); font-weight:700}
.store svg{width:18px; height:18px}

/* ======= Sections ======= */
h3.section-title{font-size:1.6rem; margin:0 0 18px 0; position:relative}
h3.section-title::after{content:""; position:absolute; left:0; bottom:-6px; width:74px; height:3px; background:linear-gradient(90deg, var(--gold), var(--rust)); border-radius:3px}

/* Album / Tracklist */
.tracklist{display:grid; gap:10px}
.track{display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:12px 14px; border-radius:12px; background:#fff; border:1px solid rgba(0,0,0,.06)}
.track small{opacity:.7}
.track details{grid-column:1/-1; margin-top:6px}
.track summary{cursor:pointer; font-weight:700}

/* Bio */
.bio{display:grid; grid-template-columns:1fr 1.1fr; gap:24px; align-items:start}
.bio .portrait{aspect-ratio:4/5; border-radius:16px; overflow:hidden; box-shadow:var(--shadow)}
@media (max-width:900px){.bio{grid-template-columns:1fr}}

/* Photo grid */
.photos{display:grid; grid-template-columns:repeat(12, 1fr); gap:10px}
.photos .ph{grid-column: span 4; aspect-ratio:4/3; border-radius:12px; overflow:hidden; box-shadow:var(--shadow); background:#ddd center/cover no-repeat}
@media (max-width:900px){.photos .ph{grid-column: span 6}}

/* Press */
.press-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.quote{padding:18px; border-left:5px solid var(--gold); background:#fff; border-radius:12px; box-shadow:var(--shadow)}
.dl{display:flex; gap:.6rem; flex-wrap:wrap}

/* Newsletter */
.signup{display:grid; grid-template-columns:1.4fr .6fr; gap:16px; align-items:center}
.signup input{width:100%; padding:12px 14px; border-radius:10px; border:1px solid rgba(0,0,0,.15)}
@media (max-width:800px){.signup{grid-template-columns:1fr}}

/* Footer */
footer{padding:36px 0; background:var(--paper-2); border-top:1px solid rgba(0,0,0,.06)}
.socials{display:flex; gap:.8rem; flex-wrap:wrap}
.socials a{display:inline-flex; align-items:center; gap:.5rem; padding:.45rem .7rem; border-radius:999px; background:#fff; border:1px solid rgba(0,0,0,.08)}
.fine{opacity:.66}