/* ============================================================
   THE GANTRY — shared theme
   Used by index / vhs-archive / midi-archive so every page
   matches. Edit variables here to reskin the whole site at once.
   ============================================================ */

:root{
  --bg:#0b0906;
  --panel:#171310;
  --panel-2:#201a14;
  --rust:#b1541e;
  --rust-bright:#e8792e;
  --metal:#6d6a60;
  --metal-light:#a6a294;
  --cream:#e6dcc4;
  --warn:#d4a017;
  --lastfm:#d51007;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.012) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 3px),
    radial-gradient(ellipse at 50% 0%, #241d15 0%, var(--bg) 55%);
  color:var(--cream);
  font-family:'VT323', monospace;
  font-size:19px;
  line-height:1.4;
}

a{color:var(--rust-bright);}
a:hover{color:var(--warn);}

/* ---- crt overlay ---- */
.scanlines{
  position:fixed; inset:0; pointer-events:none; z-index:999;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,0.18) 0px, rgba(0,0,0,0.18) 1px, transparent 2px, transparent 4px);
  mix-blend-mode:multiply;
}
.vignette{
  position:fixed; inset:0; pointer-events:none; z-index:998;
  box-shadow: inset 0 0 180px 60px rgba(0,0,0,0.85);
}
.sparkle{
  position:fixed; pointer-events:none; z-index:1000;
  color:var(--warn); font-size:14px; text-shadow:0 0 4px var(--rust-bright);
  animation:sparkleFade 700ms ease-out forwards;
}
@keyframes sparkleFade{
  0%{opacity:1; transform:scale(1) rotate(0deg);}
  100%{opacity:0; transform:scale(0.3) rotate(90deg) translateY(10px);}
}

/* ---- top bars ---- */
.topbar{
  background:repeating-linear-gradient(135deg, var(--warn) 0px, var(--warn) 14px, #1a1a1a 14px, #1a1a1a 28px);
  color:#111; font-family:'Rubik Mono One', monospace; font-size:12px; letter-spacing:1px;
  padding:4px 0; border-bottom:3px solid #000;
}
.topbar span{background:#0b0906; color:var(--rust-bright); padding:0 10px;}
.topbar2{
  background:#100c08; color:var(--metal-light); font-family:'Special Elite',monospace;
  font-size:12px; padding:3px 0; border-bottom:1px solid #3a2f22;
}
.soundbar{
  text-align:center; font-family:'Special Elite',monospace; font-size:12px;
  background:#0e0b08; color:var(--metal-light); padding:4px; border-bottom:1px solid #3a2f22;
}
.soundbar b{color:var(--rust-bright); cursor:pointer;}

.wrap{max-width:1180px; margin:0 auto; padding:16px 12px 40px;}

/* ---- riveted panel ---- */
.panel{
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border:2px solid #000;
  box-shadow:0 0 0 1px #3a2f22, inset 0 0 40px rgba(0,0,0,0.65), 0 8px 18px rgba(0,0,0,0.6);
  position:relative; padding:16px 18px;
}
.rivets::before, .rivets::after{
  content:""; position:absolute; top:6px; bottom:6px; width:10px;
  background-image: radial-gradient(circle at 50% 20%, #9a9184 0%, #4a463c 55%, #1a1712 100%);
  background-repeat:repeat-y; background-size:10px 34px; opacity:0.9;
}
.rivets::before{left:6px;} .rivets::after{right:6px;}

/* ---- header ---- */
header.panel{text-align:center; padding:22px 36px 16px; margin:14px 0 12px;}
header h1{
  font-family:'Rubik Mono One', monospace; font-size:42px; margin:4px 0 2px;
  letter-spacing:3px; color:var(--rust-bright);
  text-shadow:0 0 12px rgba(232,121,46,0.55), 2px 2px 0 #000;
  animation:glimmer 3.4s ease-in-out infinite;
}
@keyframes glimmer{0%,100%{filter:brightness(1);} 50%{filter:brightness(1.25);}}
header .tagline{font-family:'Special Elite', monospace; color:var(--metal-light); font-size:14px; margin:0 0 10px;}
.bulb{
  display:inline-block; width:14px; height:14px; border-radius:50%;
  background:var(--rust-bright); box-shadow:0 0 10px 3px rgba(232,121,46,0.9);
  animation:flicker 2.6s infinite steps(1); vertical-align:middle; margin:0 8px;
}
@keyframes flicker{0%,19%,21%,23%,80%,100%{opacity:1;} 20%,22%,79%{opacity:0.25;}}

.crumb{
  font-family:'Special Elite',monospace; font-size:13px; color:var(--metal-light);
  margin:0 0 10px;
}

.counter{
  display:inline-block; margin-top:8px; background:#050403; border:2px solid #000;
  box-shadow:inset 0 0 8px rgba(0,0,0,0.9), 0 0 0 1px #3a2f22; padding:6px 14px;
  font-family:'Rubik Mono One', monospace; letter-spacing:4px; color:var(--warn); font-size:15px;
}

.ticker{
  background:#050403; border-top:1px solid #3a2f22; border-bottom:1px solid #3a2f22;
  color:var(--rust-bright); font-family:'Special Elite',monospace; font-size:13px; padding:4px 0; margin-bottom:12px;
}

.blinkie{
  font-family:'Rubik Mono One', monospace; font-size:9px; color:#111;
  background:linear-gradient(180deg,var(--rust-bright),var(--rust));
  border:1px solid #000; padding:5px 6px; text-align:center; margin-bottom:6px;
  animation:blk 1s steps(1) infinite;
}
@keyframes blk{50%{opacity:0.35;}}
.blink{animation:blk 1.1s steps(1) infinite;}

.newtag{
  font-family:'Rubik Mono One',monospace; font-size:9px; background:var(--warn); color:#111;
  padding:2px 5px; animation:blk 1s steps(1) infinite;
}

main.main section, .main section{margin-bottom:30px;}
.main h2, main h2{
  font-family:'Rubik Mono One', monospace; font-size:17px; color:var(--rust-bright);
  letter-spacing:1px; border-bottom:2px dashed #3a2f22; padding-bottom:7px; margin-bottom:12px;
  display:flex; align-items:center; gap:8px;
}
.main p, main p{color:var(--cream); font-size:18px;}
.stamp{
  font-family:'Special Elite', monospace; font-size:13px; color:var(--metal-light);
  border:1px dashed var(--metal); display:inline-block; padding:3px 10px; transform:rotate(-2deg); margin-top:8px;
}

.player{
  display:flex; align-items:center; gap:14px; background:#050403; border:2px solid #000;
  box-shadow:inset 0 0 10px rgba(0,0,0,0.9), 0 0 0 1px #3a2f22; padding:10px 14px; margin-top:14px;
}
.reel{
  width:38px; height:38px; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #2a2119 0 30%, #100c08 32% 100%);
  border:2px solid var(--metal); animation:spin 3s linear infinite; flex-shrink:0;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---- badges / ring / footer ---- */
.ring{display:flex; gap:8px; flex-wrap:wrap;}
.badge{
  width:84px; height:29px; background:repeating-linear-gradient(135deg, var(--warn) 0 8px, #1a1a1a 8px 16px);
  border:1px solid #000; display:flex; align-items:center; justify-content:center;
  font-family:'Rubik Mono One', monospace; font-size:8px; text-align:center; color:#111;
  text-decoration:none;
}
.badge span{background:#0b0906; color:var(--rust-bright); padding:2px 4px;}
.badge:hover span{color:var(--warn);}

.caution-strip{height:10px; background:repeating-linear-gradient(135deg, var(--warn) 0 10px, #111 10px 20px); margin:18px 0 12px; border:1px solid #000;}
footer{text-align:center; margin-top:20px; color:var(--metal); font-size:13px; font-family:'Special Elite', monospace;}
.footerbadges{display:flex; justify-content:center; gap:6px; flex-wrap:wrap; margin-top:10px;}

.construction{
  height:26px; margin:6px 0 18px;
  background:repeating-linear-gradient(135deg, var(--warn) 0 12px, #111 12px 24px);
  border:2px solid #000; display:flex; align-items:center; justify-content:center;
  font-family:'Rubik Mono One',monospace; font-size:11px; color:#111; letter-spacing:1px;
}
.construction span{background:#0b0906; color:var(--warn); padding:2px 8px;}

@media (max-width:680px){
  header h1{font-size:28px;}
}