:root{
  --bg:#0a0a0a;
  --panel:#121212;
  --text:#e9e9e9;
  --muted:#a7a7a7;
  --accent:#ffd700;
}

/* base */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#000;}
body{color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
     background:radial-gradient(1200px 600px at 50% 10%, #111 0%, #000 55%, #000 100%);}
a{color:#cfe3ff;text-decoration:none}
a:hover{text-decoration:underline}

/* splash */
#splash{position:fixed;inset:0;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999}
#splash-name{font-weight:800;letter-spacing:.18em;font-size:28px;margin-bottom:10px;color:#fff;text-shadow:0 0 40px rgba(255,255,255,.2)}
#splash-pct{color:#fff;opacity:.9;font-weight:700}

/* header */
.site-header{position:sticky;top:0;z-index:20;background:linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,.35) 85%, transparent);backdrop-filter:saturate(140%) blur(3px);padding:14px 22px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:800;letter-spacing:.14em;color:#fff}
.main-nav{display:flex;gap:20px}
.main-nav a{
  position:relative;
  color:#ddd;
  text-decoration:none;
  font-weight:500;
  padding-bottom:2px;
  transition:color 0.3s ease;
}
.main-nav a.active,
.main-nav a:hover{color:#fff}
.main-nav a::after{
  content:"";
  position:absolute;
  bottom:-2px;
  left:0;
  width:0;
  height:2px;
  background:var(--accent);
  transition:width 0.3s ease;
}
.main-nav a:hover::after{width:100%}

/* sections */
.section{max-width:1100px;margin:32px auto;padding:0 18px}
.block{margin:28px 0}
.h2{font-size:26px;margin:0 0 10px}
.h3{font-size:20px;margin:0 0 10px}
.lead{color:#ddd}
.muted{color:#bdbdbd}

/* gate */
.gate{display:flex;flex-direction:column;align-items:center;margin:10px 0 26px}
.gate-tip{color:#cfcfcf;margin:8px 0 12px}
.gate-stage{position:relative;width:min(92vw,1100px);aspect-ratio:16/9;background:#0e0e0e;border:1px solid rgba(255,255,255,.1)}
#sequence-frame{position:absolute;inset:12px;object-fit:contain;width:calc(100% - 24px);height:calc(100% - 24px);filter:contrast(1.02)}
.seq-counter{position:absolute;top:10px;right:12px;background:rgba(0,0,0,.55);padding:4px 8px;font-size:12px}
.btn{margin:14px auto 0;padding:8px 14px;background:transparent;color:#ddd;border:1px solid #777;cursor:pointer}
.btn:hover{border-color:#fff;color:#fff}
.hidden{display:none}

/* embeds & catalog */
.video-embed{max-width:720px;margin:10px auto}
.video-embed iframe{width:100%;height:405px}
.catalog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.catalog-item iframe{width:100%;height:215px}

/* blue/lyrics split */
.lyrics-row{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.left-stack{display:flex;flex-direction:column;gap:18px}
.blue{width:100%;height:auto;display:block}
.right-lyrics p{margin:0 0 14px;color:#ffd700}

/* mailing list (airy) */
#mailing-list{margin:26px 0 10px}
#mailing-list .ml-fields{display:flex;gap:10px;max-width:640px}
#mailing-list .ml-input{flex:1;background:#111;border:1px solid #333;border-radius:6px;padding:12px;color:#fff}
#mailing-list .ml-input::placeholder{color:#aaa}
#mailing-list .ml-submit{background:#ffd700;color:#000;border:none;border-radius:6px;padding:12px 16px;font-weight:800;cursor:pointer}
#mailing-list .ml-submit:hover{filter:brightness(.95)}
#mailing-list .ml-disclaimer{color:#999;margin-top:10px;font-size:13px;line-height:1.4}

/* socials (plain text row) */
.social-row{margin-top:20px;text-align:center}
.social-row.plain a{color:#ddd;margin:0 8px}
.social-row .dot{opacity:.5;margin:0 6px}

/* videos page grid */
.video-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}
.video-grid iframe{
  width:100%;
  aspect-ratio:16/9;
  height:auto;
  border:0;
}

/* gallery grid */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.gallery-grid figure{margin:0}
.gallery-grid img{width:100%;height:auto;display:block;border:1px solid rgba(255,255,255,.12)}
.gallery-grid figcaption{color:#bdbdbd;font-size:14px;margin-top:8px}

/* footer */
.site-footer{max-width:1100px;margin:36px auto 40px;padding:0 18px;color:#9b9b9b;text-align:center}

/* responsive */
@media (max-width: 900px){
  .lyrics-row{grid-template-columns:1fr}
  .video-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
}