/* Deadcetera — styles.css */
:root{
  --bg:#0b0514;
  --bg2:#140b1f;
  --ink:#efe7ff;
  --muted:#cbb8ff;
  --accent:#a86bff;
  --accent2:#00ffd6;
  --hot:#ff5ea0;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 10% -10%, #43117f 0%, transparent 60%),
    radial-gradient(1000px 600px at 90% 10%, #0ad1ff33 0%, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  background-attachment: fixed;
  overflow-x:hidden;
}

#kaleido{
  position:fixed; inset:0; z-index:-1;
  opacity:.18;
  filter:contrast(140%) saturate(160%) blur(0.2px);
}

.site-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(16px,4vw,48px);
  backdrop-filter: blur(8px) saturate(140%);
  background:linear-gradient(180deg, rgba(11,5,20,.85), rgba(11,5,20,.55));
  border-bottom:1px solid #ffffff10;
}
.logo{display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; font-weight:700; letter-spacing:.5px}
.logo span{font-family:"Playfair Display", serif; font-size:20px}
nav{display:flex; gap:16px; align-items:center}
nav a{color:var(--muted); text-decoration:none; font-size:15px}
nav a:hover{color:var(--ink)}
nav .cta{padding:8px 14px; border:1px solid #ffffff2a; border-radius:999px}
nav .cta:hover{border-color:#ffffff44}

.container{width:min(1100px, 92%); margin-inline:auto}
.panel{padding:72px 0}
.panel.alt{background: rgba(255,255,255,.02); border-block:1px solid #ffffff10}

.hero{
  display:grid; place-items:center;
  min-height:72vh; text-align:center; padding:80px 16px 32px;
  position:relative; overflow:hidden;
}
.hero h1{
  font-size: clamp(48px, 10vw, 140px);
  line-height: .8; margin: 12px 0 8px; letter-spacing: -2px;
  display:flex; gap:.05em; justify-content:center
}
.hero .stroke{ -webkit-text-stroke: 2px var(--accent2); color: transparent; text-shadow: 0 0 18px #00ffd622}
.hero .fill{ color: var(--hot); text-shadow: 0 10px 30px #ff5ea066}
.tagline{color:var(--muted); font-size:clamp(16px,2.5vw,22px); max-width:900px}
.hero-cta{display:flex; gap:16px; margin:24px 0 8px; flex-wrap:wrap; justify-content:center}
.button{
  display:inline-block; padding:12px 18px; border-radius:14px; text-decoration:none;
  border:1px solid #ffffff2a; transition:.2s transform, .2s filter;
}
.button:hover{transform:translateY(-1px); filter:brightness(1.1)}
.button.primary{background:linear-gradient(135deg, var(--accent), var(--hot)); color:white; border:none}
.button.ghost{color:var(--muted)}
.badges{margin-top:8px; font-size:14px; color:#e9dfffcc}

.waves{position:absolute; bottom:-1px; left:0; width:100%; height:200px; fill:#ffffff08}

.specs{display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin:18px 0 0; padding:0; list-style:none}
.specs .label{display:block; color:#ffffff99; font-size:12px; text-transform:uppercase; letter-spacing:.08em}

.media-embeds{display:grid; grid-template-columns:1fr; gap:18px}
@media (min-width:900px){ .media-embeds{ grid-template-columns:repeat(3,1fr)} }
.media-embeds iframe{width:100%; min-height:240px; border:0; box-shadow: var(--shadow); border-radius:12px; background:#000}

.setlist summary{cursor:pointer; font-weight:700; margin-top:18px}
.setlist .columns{display:grid; grid-template-columns: 1fr; gap:16px}
@media (min-width:700px){ .setlist .columns{ grid-template-columns:1fr 1fr }}

.shows-list{display:grid; gap:12px; margin:18px 0}
.show-card{
  display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center;
  padding:14px 16px; border-radius:12px; background:#ffffff06; border:1px solid #ffffff12;
}
.show-card h3{margin:0; font-size:18px}
.show-card .meta{color:#d8cbff; font-size:14px}
.show-card .actions{display:flex; gap:8px}
.show-card .pill{padding:8px 12px; border-radius:999px; border:1px solid #ffffff24; text-decoration:none; color:var(--ink)}
.show-card .pill:hover{border-color:#ffffff44}

.masonry{columns: 1; column-gap: 12px}
@media (min-width:600px){ .masonry{ columns: 2 }}
@media (min-width:1000px){ .masonry{ columns: 3 }}
.masonry img{ width:100%; margin:0 0 12px; display:block; border-radius:12px; box-shadow: var(--shadow); background:#000}

.contact-form{display:grid; gap:12px; margin-top:8px}
.contact-form .row{display:grid; gap:12px}
@media (min-width:700px){ .contact-form .row{ grid-template-columns:1fr 1fr }}
input, textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid #ffffff22;
  background:#0f0a1a; color:var(--ink); font-size:16px; outline:none;
}
input:focus, textarea:focus{border-color:#ffffff55; box-shadow:0 0 0 3px #ffffff10}
label{display:grid; gap:6px; color:#e8dfff}
.socials{display:flex; gap:16px; margin-top:12px}
.socials a{color:var(--muted); text-decoration:none}
.socials a:hover{color:var(--ink)}

.site-footer{
  border-top:1px solid #ffffff10; padding:24px 0; color:#d7c9ffb3
}
.site-footer .container{display:flex; align-items:center; gap:8px; font-size:14px}

/* Accessibility helpers */
:focus-visible{outline:3px dashed #00ffd6aa; outline-offset:2px}
a.skip{position:absolute; left:-9999px}
a.skip:focus{left:12px; top:12px; background:#000; padding:6px 10px}

/* Small helpers */
.note{color:#d7ccff; font-size:14px}