:root{
  --bg:#000;
  --fg:#fff;
  --muted:#cfcfcf;
  --red:#d20000;
  --red2:#ff2a2a;
  --line:#2a2a2a;

  --panel: rgba(0,0,0,.85);
  --panel2: rgba(0,0,0,.90);

  --shadow: 0 14px 40px rgba(0,0,0,.55);
}

*{ box-sizing:border-box; }

html{
  height:100%;
  background: var(--bg);
}

body{
  min-height:100%;
  margin:0;
  color: var(--fg);
  background: transparent;
  font-family: "Verdana","Tahoma","Arial",sans-serif;
  letter-spacing: .2px;
  position: relative;
  z-index: 0;
}

/* ===== GLOBAL BACKGROUND (kuten /2) ===== */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;

  background:
    linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,.88)),
    url("assets/tausta.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;

  filter: brightness(.75) saturate(.85) contrast(1.05);
  z-index: -1;
}

/* Mobiililla fixed voi nykiä */
@media (max-width: 820px){
  body::before{
    position: absolute;
    min-height: 100vh;
  }
}

/* ===== Basics ===== */
a{ color: var(--fg); }
a:hover{ color: var(--red2); }
.muted{ color: var(--muted); }
.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono","Courier New", monospace;
}

.wrap{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}

.sub{
  text-align: center;
  margin: 0 auto;
}


.skip{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip:focus{
  left:16px;
  top:16px;
  width:auto;
  height:auto;
  padding:10px 12px;
  background:#111;
  border:2px solid var(--red);
  z-index:9999;
}

/* ===== TOPBAR ===== */
.topbar{
  position: sticky;
  top:0;
  z-index:50;
  background:#000;
  border-bottom:2px solid var(--red);
}

/* käytä .bar tai .topbar-inner (jos molempia löytyy HTML:stä) */
.bar,
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 0;
}

.left{
  display:flex;
  align-items:center;
  gap:12px;
}

.logo{
  width: clamp(150px, 26vw, 230px);
  height:auto;
  display:block;
  filter: drop-shadow(0 0 10px rgba(255,0,0,.35));
}

/* LIVE SIGNAL blink */
.blink{
  font-weight:900;
  font-size:11px;
  letter-spacing:2px;
  padding:6px 10px;
  border:2px solid #333;
  background:#0b0b0b;
  text-transform:uppercase;
  animation: blink 1.1s steps(2,end) infinite;
}
@keyframes blink{ 50%{ opacity:.35; } }

.nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
}
.nav a{
  text-decoration:none;
  padding:6px 10px;
  border:2px solid #333;
  background:#0f0f0f;
  font-weight:900;
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
}
.nav a:hover{ border-color: var(--red); }
.nav .cta{ border-color: var(--red); background:#180000; }

/* ===== Panels / Buttons ===== */
.panel{
  background: var(--panel);
  border: 2px solid #333;
  box-shadow: 0 0 0 2px #000, 0 0 0 6px rgba(255,0,0,.12);
  padding: 16px;
}

.btn{
  display:inline-block;
  text-decoration:none;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1px;
  padding:10px 12px;
  border: 2px solid var(--fg);
  background:#111;
  color: var(--fg);
  cursor:pointer;
}
.btn:hover{ border-color: var(--red2); }
.btn.primary{ border-color: var(--red); background:#1b0000; }
.btn.secondary{ border-color:#ddd; background:#0f0f0f; }
.btn.ghost{ border-color:#444; background:transparent; }

/* ===== HERO ===== */
.hero{
  position: relative;
  background: transparent;
  border-bottom: 2px solid #111;
}
.hero-inner{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
  padding: 26px 0 30px;
  position: relative;
  z-index: 1;
}

/* CRT overlay element (jos käytät erillistä overlay-diviä) */
.crt{
  pointer-events:none;
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.05) 0px,
      rgba(255,255,255,.05) 1px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 4px
    ),
    radial-gradient(
      circle at center,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.55) 70%,
      rgba(0,0,0,.85) 100%
    );
  opacity:.55;
  mix-blend-mode: overlay;
  z-index: 0;
}

.glitch{
  font-size: 44px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  position: relative;
  display:inline-block;
  margin: 0 0 8px;
  text-shadow: 2px 2px 0 #000, 0 0 18px rgba(255,0,0,.18);
}
.glitch::before,
.glitch::after{
  content: attr(data-text);
  position:absolute;
  left:0; top:0;
  width:100%;
  overflow:hidden;
}
.glitch::before{
  color: var(--red2);
  transform: translate(-2px, 0);
  clip-path: inset(0 0 55% 0);
  opacity:.8;
}
.glitch::after{
  color: #fff;
  transform: translate(2px, 0);
  clip-path: inset(55% 0 0 0);
  opacity:.8;
}

.sub{
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
  font-size: 12px;
  color:#e6e6e6;
  border-top:1px solid #333;
  padding-top:10px;
}
.lead{ margin: 12px 0 14px; line-height:1.55; }

.row{ display:flex; gap:10px; flex-wrap:wrap; }

.mini{
  margin-top:12px;
  font-size:12px;
  color:#d5d5d5;
  border-top:1px solid #333;
  padding-top:10px;
}
.sep{ margin: 0 8px; opacity:.8; }

.side .h{
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
  border-bottom:1px solid #333;
  padding-bottom:8px;
  margin-bottom:10px;
}
.kv{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:6px 0;
  border-bottom:1px dotted #333;
  font-size: 13px;
}
.kv span{ color:#ddd; letter-spacing:1px; text-transform:uppercase; }
.kv strong, .kv a{ font-weight:900; letter-spacing:1px; }

/* ===== VIDEOS ===== */
.videos{
  position: relative;
  background: transparent;
}
.head{ padding: 22px 0 12px; }

h2{
  margin:0 0 10px;
  text-transform: uppercase;
  letter-spacing:2px;
  font-size: 28px;
}

.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 10px 0 24px;
}

.vcard{
  display:block;
  text-decoration:none;
  border: 2px solid #333;
  background: rgba(0,0,0,.78);
  padding: 12px;
  box-shadow: 0 0 0 2px #000;
}
.vcard:hover{ border-color: var(--red); }

.thumb{
  width:100%;
  aspect-ratio: 16/9;
  border:2px solid #222;
  background:#0b0b0b;
  overflow:hidden;
  margin-bottom:10px;
}
.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.vtitle{
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1px;
  margin: 0 0 6px;
}
.vmeta{
  font-size:12px;
  color:#d7d7d7;
  border-top:1px solid #333;
  padding-top:8px;
  margin-top:10px;
}

/* ===== GIG ===== */
.gig{
  background: transparent;
  border-top:2px solid #111;
}
.gigbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 18px 0 22px;
}
.leftcol{ display:flex; flex-direction:column; gap:6px; }

/* Gig thumb */
.gig-thumb{
  display:block;
  max-width: 180px;
  margin: 8px auto 12px;
  border: 2px solid #333;
  background: #0b0b0b;
  padding: 4px;
  cursor: pointer;
}
.gig-thumb:hover{ border-color: var(--red); }
.gig-thumb img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 2px solid #111;
  max-height: 240px;
}

/* ===== STORE section ===== */
.store{
  background: transparent;
  border-top:2px solid #111;
}

.store-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 18px 20px;

  background: var(--panel);
  border: 2px solid #333;
  box-shadow:
    0 0 0 2px #000,
    0 0 0 6px rgba(255,0,0,.15),
    0 12px 30px rgba(0,0,0,.6);
}

.store-logo{
  width: clamp(120px, 18vw, 190px);
  height:auto;
  display:block;
  filter: drop-shadow(0 0 10px rgba(255,0,0,.25));
}

@media (max-width: 720px){
  .store-inner{ padding: 14px; }
}

/* ===== Big logo panel ===== */
.logo-all{
  display: block;
  width: 75%;
  max-width: 520px;
  height: auto;
  margin: 0 auto;
  filter:
    drop-shadow(0 0 6px rgba(255,0,0,.45))
    drop-shadow(0 0 14px rgba(255,0,0,.25));
}

/* ===== FOOTER ===== */
.footer{
  background: transparent;
  border-top:2px solid var(--red);
}
.foot,
.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:14px 0;
  font-size:12px;
}

/* ===== LIGHTBOX ===== */
.ffm-lightbox::backdrop{ background: rgba(0,0,0,.8); }
.ffm-lightbox{ border:none; padding:0; background:transparent; }

.ffm-frame{
  width: min(900px, calc(100% - 24px));
  border: 2px solid var(--red);
  background: #000;
}
.ffm-frame-head{
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 12px;
  background: #000;
  border-bottom: 1px solid #333;
}
.ffm-frame-body{
  padding: 12px;
  background:#050505;
}
.ffm-frame-body img{
  width:100%;
  max-height:75vh;
  object-fit:contain;
  display:block;
  border:2px solid #222;
  background:#000;
}
.ffm-frame-foot{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  background:#000;
  border-top: 1px solid #333;
  font-size:12px;
  color:#d7d7d7;
}

.close-center{
  border: 2px solid var(--red);
  background: #1b0000;
  color: #fff;
  padding: 10px 20px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  box-shadow:
    0 0 6px rgba(255,0,0,.4),
    0 0 14px rgba(255,0,0,.25);
}
.close-center:hover{
  border-color: var(--red2);
  background: #2a0000;
}

/* ===== ABOUT – Lue kokonaan ===== */
.about-text{ position: relative; }

.about-more{
  display: none;
  margin-top: 10px;
}
.about-text.is-open .about-more{
  display: block;
}

.read-more{
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--red2);
  cursor: pointer;
}
.read-more:hover{ text-decoration: underline; }

/* ===== Responsive ===== */
@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; }
  .logo-all{ width: 85%; max-width: 420px; }
}

@media (max-width: 820px){
  .grid{ grid-template-columns: 1fr; }
  .glitch{ font-size: 34px; }
  .nav{ justify-content:flex-start; }
  .store-inner{ flex-direction:column; align-items:flex-start; }
  .gigbar{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 720px){
  .gig-thumb{ max-width: 140px; }
  .gig-thumb img{ max-height: 190px; }
  .logo-all{ width: 90%; max-width: 320px; }
}

@media (max-width: 420px){
  .logo-all{ width: 95%; max-width: 260px; }
}

.read-more{
  display:inline-block;
  margin-bottom: 14px; /* lisää tyhjää tilaa alle */
}

/* Center the "Add to calendar" button inside the panel/card */
#addToCalA{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 24px auto;   /* keskittää vaakasuunnassa */
  width: fit-content;  /* napin leveys sisällön mukaan */
}

/* Jos haluat sen mobiilissa leveäksi mutta desktopissa keskitettynä */
@media (max-width: 520px){
  #addToCalA{
    width: 100%;
  }
}