/* =========================================================================
   ROBERT CARSON — design tokens
   Rock-stage identity: black stage floor, gold + blood-red metal lighting,
   a violet/pink neon rig for backlight and smoke. One bold gesture (the
   Metal Mania wordmark) — everything else stays disciplined.
   ========================================================================= */
:root{
  --bg:#0b0907;
  --bg2:#120d0a;
  --panel:#17120f;
  --line:#2a221c;
  --gold:#c9a227;
  --gold-bright:#e8c34a;
  --blood:#8f1123;
  --blood-bright:#c41830;
  --neon:#b13bff;
  --neon2:#ff2b6d;
  --cream:#ece4d8;
  --muted:#a89b8c;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--cream);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.6;
}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:'Oswald',sans-serif;font-weight:600;margin:0 0 12px;letter-spacing:.3px}
a{color:var(--gold-bright)}
button{font-family:inherit;cursor:pointer}

/* ---------- Nav ---------- */
.site-head{position:sticky;top:0;z-index:40;background:linear-gradient(180deg,#0e0b09,#0b0907 90%);border-bottom:1px solid var(--line)}
.nav-row{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;max-width:1100px;margin:0 auto;flex-wrap:wrap;gap:10px}
.brand{font-family:'Oswald',sans-serif;font-weight:700;font-size:19px;letter-spacing:1px;color:var(--cream)}
.brand-eyebrow{display:block;font-size:10px;letter-spacing:2.5px;color:var(--neon);font-weight:600;margin-bottom:2px;text-shadow:0 0 8px rgba(177,59,255,.6)}
.site-nav{display:flex;gap:4px;flex-wrap:wrap}
.site-nav button{background:none;border:1px solid transparent;color:var(--muted);padding:8px 14px;font-size:13px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;border-radius:3px;transition:color .15s,border-color .15s,text-shadow .15s}
.site-nav button:hover{color:var(--cream);border-color:var(--line)}
.site-nav button.active{color:var(--gold-bright);border-color:var(--gold);text-shadow:0 0 10px rgba(232,195,74,.5)}
.sound-toggle{background:none;border:1px solid var(--line);color:var(--muted);padding:7px 12px;border-radius:3px;font-size:11px;font-weight:700;letter-spacing:.5px}
.sound-toggle.on{color:var(--neon2);border-color:var(--neon2);text-shadow:0 0 8px rgba(255,43,109,.6)}

/* ---------- Real banner artwork — full-bleed, never cropped ---------- */
.home-hero{border-bottom:1px solid var(--line);background:#0a0705}
.home-hero img.banner-art{width:100%;height:auto;display:block}
.page-banner{border-bottom:1px solid var(--line);background:#0a0705}
.page-banner img{width:100%;height:auto;display:block}

/* ---------- Stage hero (Home) — CSS-built lighting rig, fallback only ---------- */
.stage-hero{position:relative;overflow:hidden;padding:90px 20px 70px;text-align:center;background:
  radial-gradient(ellipse 60% 50% at 20% 15%, rgba(177,59,255,.28), transparent 60%),
  radial-gradient(ellipse 55% 45% at 82% 20%, rgba(196,24,48,.30), transparent 60%),
  radial-gradient(ellipse 70% 60% at 50% 100%, rgba(201,162,39,.14), transparent 65%),
  var(--bg)}
.stage-hero::before,.stage-hero::after{content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;pointer-events:none}
.stage-hero::before{width:340px;height:340px;background:var(--neon);top:-120px;left:-80px}
.stage-hero::after{width:380px;height:380px;background:var(--blood);top:-100px;right:-100px}
.stage-hero .smoke{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 45% 30% at 30% 85%, rgba(236,228,216,.06), transparent 70%),
             radial-gradient(ellipse 40% 25% at 70% 90%, rgba(236,228,216,.05), transparent 70%);
  animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateX(-2%) translateY(0)}to{transform:translateX(2%) translateY(-1.5%)}}
.stage-hero .wordmark{position:relative;font-family:'Metal Mania',cursive;font-weight:400;
  font-size:clamp(42px,9vw,92px);line-height:1;margin:0;
  background:linear-gradient(180deg,var(--gold-bright) 0%,var(--gold) 45%,var(--blood-bright) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(196,24,48,.45)) drop-shadow(0 0 30px rgba(177,59,255,.25));
  letter-spacing:1px}
.stage-hero .tagline{position:relative;font-family:'Oswald',sans-serif;font-weight:500;
  font-size:15px;letter-spacing:3px;text-transform:uppercase;color:var(--cream);margin-top:14px;opacity:.85}
.stage-hero .tagline span{color:var(--neon2);text-shadow:0 0 10px rgba(255,43,109,.5)}

.hero-strip{background:var(--panel);border-bottom:1px solid var(--line);padding:16px 20px}
.hero-strip .wrap{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.role-chip{background:var(--bg2);color:var(--cream);font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:6px 13px;border-radius:20px;border:1px solid var(--line)}

/* ---------- Inner-page marquee headers (Gallery/Video/Music/Contact) ---------- */
.page-marquee{position:relative;overflow:hidden;padding:52px 20px 34px;text-align:center;border-bottom:1px solid var(--line)}
.page-marquee h1{position:relative;font-family:'Metal Mania',cursive;font-weight:400;
  font-size:clamp(32px,6vw,58px);margin:0;letter-spacing:1px;
  -webkit-background-clip:text;background-clip:text;color:transparent}
.page-marquee p{position:relative;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin:8px 0 0}
.marquee-gold{background:linear-gradient(180deg,var(--gold-bright),var(--gold));filter:drop-shadow(0 0 16px rgba(201,162,39,.4))}
.marquee-red{background:linear-gradient(180deg,#ff5a6e,var(--blood-bright));filter:drop-shadow(0 0 16px rgba(196,24,48,.45))}
.marquee-neon{background:linear-gradient(180deg,#e6b7ff,var(--neon));filter:drop-shadow(0 0 16px rgba(177,59,255,.45))}
.marquee-mix{background:linear-gradient(90deg,var(--gold-bright),var(--neon2));filter:drop-shadow(0 0 16px rgba(255,43,109,.4))}
.page-marquee.mq-gold{background:radial-gradient(ellipse 60% 80% at 50% 0%, rgba(201,162,39,.16), transparent 65%),var(--bg)}
.page-marquee.mq-red{background:radial-gradient(ellipse 60% 80% at 50% 0%, rgba(196,24,48,.18), transparent 65%),var(--bg)}
.page-marquee.mq-neon{background:radial-gradient(ellipse 60% 80% at 50% 0%, rgba(177,59,255,.20), transparent 65%),var(--bg)}
.page-marquee.mq-mix{background:radial-gradient(ellipse 45% 70% at 20% 0%, rgba(201,162,39,.16), transparent 60%),radial-gradient(ellipse 45% 70% at 80% 0%, rgba(255,43,109,.16), transparent 60%),var(--bg)}

/* ---------- Content ---------- */
.content{padding:44px 20px 70px}
.grid{display:grid;gap:20px}
.two-col{grid-template-columns:1.3fr 1fr}
@media(max-width:840px){.two-col{grid-template-columns:1fr}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:26px}
.panel h2{color:var(--gold-bright);font-size:15px;letter-spacing:1.5px;text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:16px}
.bio-row{display:flex;gap:22px;align-items:flex-start}
.profile-photo{width:150px;height:150px;object-fit:cover;border-radius:4px;border:2px solid var(--gold);flex-shrink:0;cursor:pointer}
.bio-row p{margin:0 0 12px;color:var(--cream)}
@media(max-width:520px){.bio-row{flex-direction:column;align-items:center;text-align:center}}
.events{list-style:none;margin:0;padding:0}
.events li{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.events li:last-child{border-bottom:none}
.ev-date{color:var(--neon2);font-weight:700;font-size:12px;letter-spacing:.5px;min-width:70px}
.ev-body b{display:block;color:var(--cream)}
.ev-body span{color:var(--muted);font-size:13px}

.empty-state{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--muted);border:1px dashed var(--line);border-radius:4px}
.empty-state b{display:block;color:var(--cream);font-size:16px;margin-bottom:6px}

/* Gallery */
.photo-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.photo-grid button{padding:0;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--panel);aspect-ratio:1;transition:border-color .15s}
.photo-grid button:hover{border-color:var(--gold)}
.photo-grid img{width:100%;height:100%;object-fit:cover;display:block}
.lightbox{position:fixed;inset:0;background:rgba(6,5,4,.92);display:flex;align-items:center;justify-content:center;z-index:100;padding:30px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:100%;border:2px solid var(--gold);border-radius:4px}
.lightbox-close{position:absolute;top:20px;right:26px;background:none;border:none;color:var(--cream);font-size:34px;line-height:1}

/* Video */
.video-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.video-card{background:var(--panel);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.video-card video{width:100%;display:block;background:#000}
.vc-body{padding:14px 16px}
.vc-body h3{font-size:14px;margin:0;color:var(--cream)}

/* Music */
.player-panel{display:flex;align-items:center;gap:18px;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:20px 24px;margin-bottom:16px}
.play-btn{width:52px;height:52px;border-radius:50%;background:linear-gradient(180deg,var(--gold-bright),var(--gold));border:none;color:#1a1208;font-size:18px;flex-shrink:0}
.track-meta b{display:block;color:var(--cream)}
.track-meta span{color:var(--neon2);font-size:11px;letter-spacing:1px;font-weight:700}
.track-list{list-style:none;margin:0 0 30px;padding:0;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.track-list li{padding:13px 18px;border-bottom:1px solid var(--line);color:var(--cream);font-size:14px}
.track-list li:last-child{border-bottom:none}
.track-list li:hover{background:var(--panel)}
.track-list li.playing{color:var(--gold-bright);background:var(--panel)}
.merch-strip{margin-top:10px}
.subhead{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.subhead small{color:var(--muted)}
.merch-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.merch-card{background:var(--panel);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.mc-thumb{aspect-ratio:1;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:11px;letter-spacing:1px;background:var(--bg2)}
.mc-body{padding:12px 14px}
.mc-body b{display:block;color:var(--cream);font-size:13px}
.mc-body span{color:var(--gold-bright);font-size:12px}

/* Contact */
.contact-grid{grid-template-columns:1.2fr 1fr}
@media(max-width:840px){.contact-grid{grid-template-columns:1fr}}
.field{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--cream);padding:12px 14px;border-radius:3px;font-family:inherit;font-size:14px;margin-bottom:12px}
textarea.field{min-height:110px;resize:vertical}
.field:focus{outline:none;border-color:var(--gold)}
.cta{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#1a1208;border:none;padding:12px 26px;border-radius:3px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;font-size:13px}
.contact-list{list-style:none;margin:0;padding:0}
.contact-list li{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:13px}
.contact-list li span{color:var(--cream)}
.contact-list li:last-child{border-bottom:none}

.site-foot{text-align:center;padding:26px 20px;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}

/* Smooth page-to-page transition */
#app.page-in{animation:pageIn .38s ease}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#app.page-in{animation:none}}

@media(prefers-reduced-motion:reduce){.stage-hero .smoke{animation:none}}