:root{
  --ink:#f4f1ea; --muted:rgba(244,241,234,.72);
  --gold:#caa24a; --gold2:#b88b33;
  --line:rgba(255,255,255,.14);
  --panel:rgba(0,0,0,.58);
  --shadow:0 26px 76px rgba(0,0,0,.80);
  --r:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink);
  font-family:Oswald, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 680px at 50% 0%, rgba(255,255,255,.06), rgba(0,0,0,0) 55%),
    linear-gradient(rgba(0,0,0,.62), rgba(0,0,0,.88)),
    url("./bg_texture.jpg");
  background-size:cover;
  background-attachment:fixed;
}
.noise{
  position:fixed; inset:0; pointer-events:none;
  opacity:.18; mix-blend-mode:overlay; z-index:0;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency=".9" numOctaves="3" stitchTiles="stitch"/></filter><rect width="240" height="240" filter="url(%23n)" opacity=".25"/></svg>');
}
.page{position:relative; z-index:1; width:min(1120px, 92vw); margin:0 auto; padding:18px 0 54px}
.section{padding:0 0 10px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}

/* header */
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: linear-gradient(rgba(0,0,0,.78), rgba(0,0,0,0));
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:12px 0 14px;
}
.top-logo{display:flex; justify-content:center; padding:6px 0 4px}
.top-logo img{width:min(640px, 92vw); height:auto; display:block; filter: drop-shadow(0 18px 26px rgba(0,0,0,.84))}
.nav{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding:8px 0 0}
.tagline{text-align:center; padding:10px 0 0; color:rgba(244,241,234,.72); letter-spacing:1.4px; font-size:16px}

/* pills */
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:rgba(244,241,234,.92);
  text-decoration:none;
  font-weight:700; letter-spacing:1.1px; font-size:14px; text-transform:uppercase;
  cursor:pointer; user-select:none;
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease, border-color .16s ease, opacity .16s ease;
  box-shadow:0 10px 24px rgba(0,0,0,.45);
}
.pill:hover{transform:translateY(-2px); background:rgba(255,255,255,.09); border-color:rgba(202,162,74,.28); box-shadow:0 16px 34px rgba(0,0,0,.58)}
.pill:active{transform:translateY(0); opacity:.92}
.pill.gold{
  color:#17130c;
  background:linear-gradient(180deg, rgba(202,162,74,.98), rgba(184,139,51,.82));
  border-color:rgba(255,255,255,.18);
  box-shadow:0 16px 34px rgba(0,0,0,.62), 0 0 32px rgba(202,162,74,.18);
}
.pill.gold:hover{box-shadow:0 22px 48px rgba(0,0,0,.68), 0 0 40px rgba(202,162,74,.26)}
.pill.small{padding:9px 12px; font-size:13px}

/* dividers */
.divider{
  margin:22px 0 10px;
  display:flex; align-items:center; justify-content:center; gap:12px;
  font-family:"Black Ops One", system-ui, sans-serif;
  letter-spacing:1px; text-transform:uppercase;
  text-shadow:0 10px 18px rgba(0,0,0,.6);
}
.divider .line{height:1px; background:rgba(255,255,255,.18); flex:1}

/* hero */
.hero{display:grid; grid-template-columns: 1.1fr .9fr}
.hero-media{position:relative; min-height:360px}
.hero-media > img{width:100%; height:100%; object-fit:cover; display:block}
.watermark{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(520px, 70%);
  opacity:.16; pointer-events:none;
}
.hero-body{padding:22px 18px; display:flex; flex-direction:column; justify-content:center; gap:10px}
.kicker{letter-spacing:1.4px; text-transform:uppercase; color:rgba(244,241,234,.75); font-size:14px}
.hero-title{
  font-family:"Black Ops One", system-ui, sans-serif;
  letter-spacing:1px; text-transform:uppercase;
  font-size:48px; line-height:1.0; margin-top:2px;
  text-shadow:0 18px 34px rgba(0,0,0,.86);
}
.hero-sub{color:rgba(244,241,234,.74); font-size:16px}
.cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px}
.countdown{margin-top:6px; color:rgba(244,241,234,.72)}

/* drop */
.drop{display:grid; grid-template-columns: .95fr 1.05fr}
.cover img{width:100%; height:100%; object-fit:cover; display:block}
.meta{padding:18px}
.badge{
  display:inline-block;
  font-family:"Black Ops One", system-ui, sans-serif;
  text-transform:uppercase; letter-spacing:1px;
  font-size:12px; padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
}
.big-title{
  margin-top:8px;
  font-family:"Black Ops One", system-ui, sans-serif;
  letter-spacing:1px;
  font-size:34px;
  text-transform:uppercase;
  color:var(--gold);
}
.note{color:rgba(244,241,234,.72)}

/* music grid */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.panel{border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.18); border-radius:16px; padding:14px}
.panel h3{
  margin:0 0 8px;
  font-family:"Black Ops One", system-ui, sans-serif;
  text-transform:uppercase; letter-spacing:1px;
  font-size:18px;
}
.mini-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}

/* merch */
.merch-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px}
.product .img img{width:100%; height:280px; object-fit:cover; display:block}
.product .body{padding:12px}
.name{margin:0; font-family:"Black Ops One", system-ui, sans-serif; text-transform:uppercase; letter-spacing:1px}
.price{margin:6px 0 0; color:rgba(244,241,234,.72)}
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}

/* mail */
.sub{text-align:center; font-family:"Black Ops One", system-ui, sans-serif; text-transform:uppercase; letter-spacing:1px; margin:0 0 10px}
.form{display:grid; grid-template-columns:1fr 210px; gap:10px; padding:0 2px}
.input{padding:12px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:var(--ink); outline:none}

/* footer */
.footer{margin-top:22px; text-align:center; color:rgba(244,241,234,.68); padding:10px 2px}

/* reveal */
.reveal{opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease}
.reveal.on{opacity:1; transform:translateY(0)}

/* responsive */
@media (max-width: 980px){
  .hero{grid-template-columns:1fr}
  .drop{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .merch-grid{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .hero-title{font-size:42px}
}


/* V26 upgrades (keeps V16 colors/layout) */
.merch-grid-v26{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
@media (max-width: 980px){.merch-grid-v26{grid-template-columns:repeat(2,1fr);}}
@media (max-width: 520px){.merch-grid-v26{grid-template-columns:1fr;}}
.merch-tools{display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin:0 0 12px}
.merch-tools .filters{display:flex; gap:10px; flex-wrap:wrap}
.merch-tools .search{min-width:220px; flex:1; display:flex; justify-content:flex-end}
.merch-tools #merchSearch{max-width:360px; width:100%}
.product.card{transition:transform .18s ease, box-shadow .18s ease;}
.product.card:hover{transform:translateY(-4px); box-shadow:0 22px 52px rgba(0,0,0,.62);}
.product .img{position:relative; overflow:hidden; border-radius:16px 16px 0 0;}
.product .img img{display:block; width:100%; height:auto; transform:scale(1); transition:transform .28s ease;}
.product.card:hover .img img{transform:scale(1.03);}
.product .badge{position:absolute; top:12px; left:12px; font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.35); backdrop-filter:blur(6px)}
.modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.68); display:none; align-items:center; justify-content:center; z-index:200}
.modal{width:min(980px, 94vw); background:rgba(0,0,0,.78); border:1px solid rgba(255,255,255,.14); border-radius:18px; overflow:hidden; box-shadow:0 26px 76px rgba(0,0,0,.80)}
.modal-head{display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.12)}
.modal-body{display:grid; grid-template-columns:1.1fr .9fr}
.modal-body img{width:100%; height:100%; object-fit:cover; display:block}
.modal-info{padding:14px}
.modal-close{background:transparent; border:0; color:rgba(244,241,234,.9); font-size:20px; cursor:pointer}
.cart-fab{position:fixed; right:18px; bottom:18px; z-index:210}
.cart-fab .pill{box-shadow:0 18px 34px rgba(0,0,0,.72)}
.drawer{position:fixed; top:0; right:-420px; width:min(420px, 92vw); height:100%; background:rgba(0,0,0,.88); border-left:1px solid rgba(255,255,255,.12); z-index:220; transition:right .28s ease; display:flex; flex-direction:column}
.drawer.open{right:0}
.drawer .drawer-head{display:flex; align-items:center; justify-content:space-between; padding:14px; border-bottom:1px solid rgba(255,255,255,.12)}
.drawer .drawer-body{padding:14px; overflow:auto; flex:1}
.drawer .drawer-foot{padding:14px; border-top:1px solid rgba(255,255,255,.12)}
.cart-item{display:flex; gap:10px; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.08)}
.cart-item .meta{flex:1}
.cart-item .qty{display:flex; gap:8px; align-items:center}
.icon-btn{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:rgba(244,241,234,.92); border-radius:999px; padding:8px 10px; cursor:pointer}