*{box-sizing:border-box}
:root{--red:#e11212;--dark:#050505;--muted:#c8c8c8;--line:rgba(225,18,18,.30)}
html{scroll-behavior:smooth}
body{margin:0;background:#050505;color:#fff;font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.noise{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.11;background-image:linear-gradient(45deg,rgba(255,255,255,.08) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.05) 25%,transparent 25%);background-size:4px 4px}

/* CINEMATIC INTRO */
.intro{position:fixed;inset:0;z-index:999;background:#000;display:grid;place-items:center;overflow:hidden;animation:introFade 1.2s ease forwards;animation-delay:6s}
.intro-logo{width:min(88vw,860px);opacity:0;filter:drop-shadow(0 0 0 #900);animation:logoWake 5.4s ease forwards}
.intro-glow{position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(225,18,18,.60),rgba(90,0,0,.20),transparent 68%);filter:blur(28px);opacity:0;animation:glowPulse 5.2s ease forwards}
.intro-title{position:absolute;bottom:16%;font-size:clamp(18px,4vw,48px);font-weight:900;letter-spacing:.28em;text-align:center;opacity:0;text-shadow:0 0 35px rgba(225,18,18,.9);animation:titleIn 2.4s ease forwards;animation-delay:2.8s}
.intro-subtitle{position:absolute;bottom:11%;font-size:12px;letter-spacing:.5em;color:#bdbdbd;opacity:0;animation:titleIn 1.8s ease forwards;animation-delay:3.7s}
.intro-smoke{position:absolute;width:85vw;height:240px;bottom:4%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 66%);filter:blur(35px);opacity:.24;animation:smokeMove 6.5s linear infinite}
.smoke-one{left:-28%}
.smoke-two{right:-28%;animation-duration:8s}
@keyframes logoWake{0%{opacity:0;transform:scale(.76)}20%{opacity:.9;transform:scale(.95)}48%{opacity:1;filter:drop-shadow(0 0 42px #b50000)}66%{transform:scale(1.04);filter:drop-shadow(0 0 85px #ff1919)}100%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 34px #b50000)}}
@keyframes glowPulse{0%,18%{opacity:0;transform:scale(.7)}45%{opacity:.84;transform:scale(1.05)}72%{opacity:.46;transform:scale(.95)}100%{opacity:.65;transform:scale(1.08)}}
@keyframes titleIn{to{opacity:1;transform:translateY(-8px)}}
@keyframes introFade{to{opacity:0;visibility:hidden}}
@keyframes smokeMove{from{transform:translateX(-8%) scale(1)}to{transform:translateX(8%) scale(1.22)}}

.site-header{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:14px 28px;background:rgba(0,0,0,.80);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:900;letter-spacing:.18em}
.brand img{width:46px;height:46px;object-fit:cover;border-radius:50%;box-shadow:0 0 22px #b40000}
.nav{display:flex;gap:20px}
.nav a{text-decoration:none;text-transform:uppercase;font-size:12px;letter-spacing:.16em;color:#ddd}
.nav a:hover{color:var(--red)}
.menu-toggle{display:none;background:none;border:1px solid #333;color:#fff;font-size:24px;padding:6px 10px}

.hero{min-height:100vh;position:relative;display:flex;align-items:center;padding:120px 8vw 80px;overflow:hidden;background:#000}
.hero-bg{position:absolute;inset:0;background:url('hero-sketch.png') center center/cover no-repeat;opacity:.92;filter:contrast(1.04) saturate(1.08);animation:heroFloat 12s ease-in-out infinite}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.78) 34%,rgba(0,0,0,.18) 70%,rgba(0,0,0,.5) 100%)}
.hero-smoke{position:absolute;left:-15%;right:-15%;bottom:-80px;height:220px;background:radial-gradient(circle,rgba(255,255,255,.25),transparent 65%);filter:blur(30px);opacity:.18;animation:smokeMove 13s linear infinite}
@keyframes heroFloat{50%{transform:scale(1.035) translateY(-12px)}}
.hero-content{position:relative;z-index:2;max-width:760px}
.kicker{color:var(--red);text-transform:uppercase;font-weight:900;letter-spacing:.34em;font-size:12px}
h1{font-size:clamp(52px,10vw,130px);line-height:.82;margin:0 0 24px;letter-spacing:-.08em;text-shadow:0 0 38px rgba(225,18,18,.38)}
h2{font-size:clamp(38px,6vw,82px);line-height:.9;margin:0 0 24px;letter-spacing:-.05em}
h3{margin:12px 0 4px}
.tagline,.band-text,.contact p,.section-copy{color:var(--muted);font-size:20px;line-height:1.5}
.buttons{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.buttons a,.contact-links a{padding:14px 18px;border:1px solid rgba(255,255,255,.25);text-decoration:none;text-transform:uppercase;font-weight:900;font-size:12px;letter-spacing:.15em;background:#111}
.buttons a:first-child{background:#b00000;border-color:#b00000;box-shadow:0 0 28px rgba(225,18,18,.28)}
.scroll-cue{position:absolute;left:8vw;bottom:28px;z-index:3;color:#999;text-decoration:none;text-transform:uppercase;letter-spacing:.28em;font-size:11px}

.section{position:relative;z-index:2;padding:90px 8vw;border-top:1px solid var(--line);background:linear-gradient(180deg,#080808,#020202)}
.release-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px}
.release-card{background:#111;border:1px solid var(--line);padding:14px;text-decoration:none;transition:.25s;overflow:hidden}
.release-card:hover{transform:translateY(-6px);box-shadow:0 0 35px rgba(225,18,18,.35)}
.release-card img{width:100%;aspect-ratio:1/1.35;object-fit:cover;transition:.4s}
.release-card:hover img{transform:scale(1.05)}
.release-card span{color:var(--red);text-transform:uppercase;letter-spacing:.18em;font-size:11px}
.spotify{margin-top:32px;border:1px solid var(--line);border-radius:14px;overflow:hidden}

.band-section{display:grid;grid-template-columns:.92fr 1.08fr;gap:44px;align-items:center}
.band-photo{border:1px solid var(--line);box-shadow:0 0 45px rgba(225,18,18,.18)}
.member-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.member-grid article{background:#111;border:1px solid var(--line);padding:12px}
.member-grid img{width:100%;aspect-ratio:1/1.2;object-fit:cover}
.member-grid p{margin:0;color:var(--red);text-transform:uppercase;letter-spacing:.13em;font-size:12px}

.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}
.gallery-grid img{width:100%;height:310px;object-fit:cover;border:1px solid var(--line);filter:saturate(1.05);transition:.25s}
.gallery-grid img:hover{transform:translateY(-5px);box-shadow:0 0 34px rgba(225,18,18,.32)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.video-box{min-height:280px;border:1px solid var(--line);display:grid;place-items:center;background:radial-gradient(circle,#3d0000,#070707)}
.video-box span{font-size:72px;color:var(--red);text-shadow:0 0 35px var(--red)}
.video-box p{text-transform:uppercase;letter-spacing:.18em}

.info-box{display:flex;justify-content:space-between;gap:20px;padding:24px;background:#111;border:1px solid var(--line);color:#ddd}
.merch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.merch-grid div{min-height:150px;display:grid;place-items:center;background:#111;border:1px solid var(--line);text-transform:uppercase;font-weight:900;letter-spacing:.2em}
.contact{display:flex;justify-content:space-between;align-items:center;gap:30px}
.contact-links{display:flex;gap:14px;flex-wrap:wrap}
footer{position:relative;text-align:center;padding:46px 20px;color:#888;border-top:1px solid var(--line);background:#000;overflow:hidden}
footer img{position:absolute;left:50%;top:50%;width:240px;opacity:.08;transform:translate(-50%,-50%)}
footer p{position:relative;margin:0}

@media(max-width:1100px){
  .release-grid,.gallery-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .menu-toggle{display:block}
  .nav{display:none;position:absolute;top:78px;left:0;right:0;flex-direction:column;background:#050505;padding:20px}
  .nav.open{display:flex}
  .hero-bg{background-position:center center;opacity:.55}
  .hero:after{background:linear-gradient(180deg,rgba(0,0,0,.42),#000 76%)}
  .release-grid,.member-grid,.merch-grid,.gallery-grid{grid-template-columns:1fr}
  .band-section,.contact,.split{display:block}
  .contact-links{margin-top:20px}
  .intro-title{letter-spacing:.12em}
} 
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.video-card {
    background: #111;
    border: 1px solid rgba(225,18,18,.35);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 0 25px rgba(225,18,18,.25);
}

.video-card h3 {
    color: #e11212;
    text-align: center;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.video-card iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 10px;
}