:root{--red:#d4341e;--red2:#e62d2a;--line:rgba(255,255,255,.35);--pad:47px;--f:'Inter',system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#000;color:#fff;font-family:var(--f);-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}
.empty{padding:0 var(--pad);color:rgba(255,255,255,.6)}

/* announcement marquee */
.mq{height:26px;background:var(--red);overflow:hidden;display:flex;align-items:center;position:relative;z-index:2}
.mq__track{display:flex;white-space:nowrap;animation:mq 40s linear infinite}
.mq span{font:700 10px/1.5 var(--f);text-transform:uppercase;color:#000;padding-right:143px}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq__track{animation:none}}

/* nav (overlays the hero) */
.nav{position:absolute;top:41px;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:0 76px 0 71px}
.nav__logo{width:102px;height:30px;overflow:hidden;position:relative}
.nav__logo img{position:absolute;max-width:none;width:125.49%;height:432.2%;left:-12.75%;top:-166.1%}
.nav__links{display:flex;align-items:center;gap:35px;font:700 20px/1.5 'Hanken Grotesk',var(--f)}
.nav__links a:hover,.nav__cart:hover{color:var(--red)}
.nav__cart{display:none;background:none;border:0;color:#fff;cursor:pointer;font:inherit}
.nav__cart span{color:var(--red)}

/* hero: YouTube bg video over a still poster */
.hero{position:relative;height:calc(100vw * 937 / 1280);overflow:hidden;background:#000}
.hero__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__vid{position:absolute;inset:0;pointer-events:none}
.hero__vid iframe{position:absolute;top:50%;left:50%;width:max(100%,calc(100vw * 937 / 1280 * 16 / 9));aspect-ratio:16/9;transform:translate(-50%,-50%) scale(1.8);border:0} /* scale crops YouTube title bar + the MV letterbox */

/* section heading: title + red bar to the right edge */
.sh{display:flex;align-items:flex-end;gap:17px;margin:78px 0 38px 23px;scroll-margin-top:20px}
.sh h2{font:800 40px/.98 var(--f);letter-spacing:-1.2px;color:var(--red);white-space:nowrap}
.sh__bar{flex:1;height:8px;background:var(--red);margin-bottom:5px}

/* merchandise carousel */
.merch{display:flex;gap:28px;overflow-x:auto;padding:0 var(--pad);scroll-snap-type:x mandatory;scrollbar-width:none}
.merch::-webkit-scrollbar{display:none}
.merch__item{flex:0 0 423px;aspect-ratio:1;background:var(--red);scroll-snap-align:start}
.merch__item img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.merch__item:hover img{transform:scale(1.03)}

/* live performances */
.live{margin:0 var(--pad);border-top:1px solid var(--line);margin-top:-7px}
.live__row{display:grid;grid-template-columns:44% 1fr auto;align-items:center;padding:28px 19px 22px 20px;border-bottom:1px solid var(--line)}
.live__row strong{display:block;font:700 20px/.98 var(--f);letter-spacing:-.6px;margin-bottom:5px}
.live__row span{font:500 18px/.98 var(--f);letter-spacing:-.54px}
.live__venue{font:500 18px/.98 var(--f);letter-spacing:-.54px}

/* tag buttons (TICKETS / BUY / STREAM / MORE) */
.tag{display:inline-flex;align-items:center;justify-content:center;height:26px;padding:0 12px;background:var(--red);color:#000;font:800 16px/.98 var(--f);letter-spacing:-.48px}
.tag--lg{height:37px;padding:0 18px;font-weight:900}
.tag:hover{background:#fff}

/* videos */
.vids{padding:0 var(--pad)}
.vids__main{aspect-ratio:1187/742;background:#000}
.vids__main iframe{width:100%;height:100%;border:0}
.vids__list{display:flex;gap:12px;overflow-x:auto;margin-top:14px;scrollbar-width:none}
.vids__thumb{flex:0 0 200px;background:none;border:0;color:#fff;text-align:left;cursor:pointer}
.vids__thumb img{aspect-ratio:16/9;object-fit:cover;width:100%;opacity:.7;transition:opacity .2s}
.vids__thumb:hover img{opacity:1}
.vids__thumb span{display:block;margin-top:6px;font:500 12px/1.3 var(--f)}

/* releases: title + buttons appear on hover */
.rels{display:grid;grid-template-columns:repeat(2,1fr);gap:48px;padding:0 var(--pad)}
.rel{position:relative;aspect-ratio:1;overflow:hidden}
.rel img{width:100%;height:100%;object-fit:cover}
.rel__tint{position:absolute;inset:0;background:rgba(212,52,30,.4)}
.rel__info{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;padding-top:56px;opacity:0;transition:opacity .25s}
.rel:hover .rel__info,.rel:focus-within .rel__info{opacity:1}
.rel h3{font:800 40px/.98 var(--f);letter-spacing:-1.2px;color:#000;text-align:center;padding:0 16px}
.rel__btns{display:flex;gap:8px}
@media (hover:none){.rel__info{opacity:1}.hero__vid{display:none}} /* touch: YouTube forces controls over bg video → show the still */

/* footer */
.foot{text-align:center;padding:38px 16px 48px}
.foot__soc{position:relative;width:394px;max-width:100%;margin:0 auto;display:grid;grid-template-columns:repeat(8,1fr);padding:0 3%}
.foot__soc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.foot__soc a{position:relative;aspect-ratio:1;margin:auto 0}
.foot__links{display:flex;justify-content:center;gap:40px;margin:16px 0 20px}
.foot a,.foot p{font:700 14px/.98 var(--f);letter-spacing:-.42px;color:var(--red2)}
.foot__links a:hover{color:#fff}

/* archive list */
.arc{padding-top:90px;min-height:70vh}
.arc .sh{margin-top:40px}
.arc__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:32px;padding:0 var(--pad)}
.arc__card img{aspect-ratio:3/2;object-fit:cover;width:100%;transition:opacity .2s}
.arc__card:hover img{opacity:.8}
.arc__card h3{margin-top:14px;font:800 20px/1.3 var(--f);color:var(--red);text-transform:uppercase}

/* article */
.art__hero{width:100%;aspect-ratio:1280/853;object-fit:cover}
.art{max-width:934px;margin:0 auto;padding:32px 16px 0;color:var(--red)}
.art h1{max-width:780px;margin:0 auto 31px;font:800 27px/1.5 var(--f);text-transform:uppercase;text-align:center}
.art__body{font:500 19px/1.5 var(--f);text-align:justify}
.art__body p{margin-bottom:28.5px}
.art__body iframe,.art__body video{display:block;width:100%;aspect-ratio:933/583;height:auto;border:0;margin:22px 0 50px}
.art__body img{margin:22px auto}
.art__body a{text-decoration:underline}
.art__rel{max-width:569px;margin:30px auto 34px}
.art__rel .rel__info{padding-top:0;opacity:1}
.art__sp{display:block;width:100%;max-width:569px;margin:30px auto 34px;border:0}
.art__by{font:500 19px/1.5 var(--f);text-align:justify;margin-bottom:28.5px}
.art__by strong{font-weight:700}

/* product page */
.pdp{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;padding:130px var(--pad) 40px;max-width:1280px;margin:0 auto}
.pdp__gallery{display:grid;gap:12px}
.pdp__gallery img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--red)}
.pdp__info{position:sticky;top:30px;align-self:start}
.pdp__back{font:700 14px var(--f);color:var(--red)}
.pdp h1{font:800 40px/1 var(--f);letter-spacing:-1.2px;color:var(--red);margin:16px 0 12px}
.pdp__price{font:700 20px var(--f);margin-bottom:28px}
.pdp__lbl{font:700 12px var(--f);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;opacity:.7}
.pdp__sizes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.size{min-width:52px;padding:11px 14px;background:none;color:#fff;border:1px solid var(--line);font-weight:700;cursor:pointer}
.size:hover{border-color:#fff}
.size--sel{background:var(--red);border-color:var(--red);color:#000}
.size--out{opacity:.35;text-decoration:line-through;cursor:not-allowed}
.pdp__desc{margin-top:28px;line-height:1.6;opacity:.8}
.btn{display:block;width:100%;padding:16px;background:var(--red);color:#000;border:0;font:900 16px var(--f);letter-spacing:-.48px;cursor:pointer}
.btn:hover{background:#fff}
.btn[disabled]{opacity:.5;cursor:not-allowed;background:var(--red)}

/* cart drawer */
.cart{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.6);opacity:0;visibility:hidden;transition:.2s}
.cart--open{opacity:1;visibility:visible}
.cart__panel{position:absolute;top:0;right:0;height:100%;width:min(420px,100%);background:#0c0c0c;border-left:2px solid var(--red);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .25s}
.cart--open .cart__panel{transform:none}
.cart__head{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;font:800 16px var(--f);color:var(--red);border-bottom:1px solid var(--line)}
.cart__x{background:none;border:0;color:#fff;font-size:1.1rem;cursor:pointer}
.cart__body{flex:1;overflow-y:auto;padding:8px 22px}
.cart__empty{padding:28px 0;text-align:center;opacity:.6}
.cart__line{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.cart__line img{width:56px;height:56px;object-fit:cover;background:var(--red)}
.cart__lt{font:700 13px/1.3 var(--f)}
.cart__ls,.cart__lp{font-size:12px;opacity:.7;margin-top:3px}
.cart__qty{display:flex;align-items:center;gap:8px}
.cart__qty button{width:26px;height:26px;background:none;border:1px solid var(--line);color:#fff;cursor:pointer}
.cart__foot{padding:18px 22px 22px;border-top:1px solid var(--line)}
.cart__tot{display:flex;justify-content:space-between;font-weight:700;margin-bottom:14px}
.cart__note{font-size:11px;opacity:.6;margin-top:12px}

/* mobile */
@media (max-width:820px){
  :root{--pad:16px}
  .nav{top:38px;padding:0 16px}
  .nav__logo{width:68px;height:20px}
  .nav__links{gap:14px;font-size:14px}
  .sh{margin:48px 0 22px 16px;gap:12px}
  .sh h2{font-size:28px}
  .sh__bar{height:6px;margin-bottom:3px}
  .merch{gap:14px}
  .merch__item{flex-basis:72vw}
  .live__row{grid-template-columns:1fr auto;row-gap:8px;padding:20px 0}
  .live__venue{grid-column:1;font-size:15px;opacity:.8}
  .live__row .tag{grid-row:1/3;grid-column:2}
  .rels{grid-template-columns:1fr;gap:20px}
  .rel h3{font-size:30px}
  .foot__links{gap:20px}
  .art h1{font-size:20px}
  .art__body,.art__by{font-size:16px}
  .arc__grid{grid-template-columns:1fr}
  .pdp{grid-template-columns:1fr;padding-top:90px;gap:24px}
  .pdp h1{font-size:28px}
  .pdp__info{position:static}
}