/* ============ Theme from poster: red/black, sharp banners, grunge, lightning ============ */

:root{
  --bg: #070708;
  --black: #0a0a0f;
  --panel: rgba(10,10,15,.82);
  --panel2: rgba(16,16,24,.86);

  --white: #f2f2f6;
  --muted: rgba(242,242,246,.72);

  --red: #ff2a2a;
  --red2:#ff3a3a;
  --shadow: 0 24px 80px rgba(0,0,0,.55);

  --radius: 18px;
  --radius2: 26px;

  /* Put your poster here */
  --poster-url: url("assets/juliste_tarvasjoki.png");
}

/* Base */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--white);
  background:
    radial-gradient(1200px 600px at 30% 0%, rgba(255,42,42,.16), transparent 62%),
    radial-gradient(900px 520px at 70% 20%, rgba(255,42,42,.10), transparent 60%),
    linear-gradient(180deg, #050506 0%, #070708 30%, #050506 100%);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.container{
  width: min(1160px, calc(100% - 32px));
  margin-inline:auto;
}

/* Accessibility */
.skip{
  position:absolute;
  left:-999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip:focus{
  left:16px; top:16px;
  width:auto; height:auto;
  padding:10px 12px;
  background:var(--red);
  border-radius:12px;
  z-index:9999;
}

/* Topbar */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.40));
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family: Oswald, Inter, system-ui, sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.brand__bolt{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  background: var(--red);
  color:#000;
  border-radius:12px;
  box-shadow: 0 10px 30px rgba(255,42,42,.22);
}
.brand__name{ font-weight:700; font-size:14px; }

.nav{
  display:none;
  gap:14px;
  align-items:center;
  font-weight:600;
  font-size:14px;
  color: rgba(242,242,246,.86);
}
.nav a{
  opacity:.9;
  padding:10px 10px;
  border-radius:12px;
}
.nav a:hover{ background: rgba(255,255,255,.06); }

@media (min-width: 860px){
  .nav{ display:flex; }
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:var(--white);
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-size:13px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  user-select:none;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); }
.btn:active{ transform: translateY(0px) scale(.99); }

.btn--primary{
  background: linear-gradient(180deg, var(--red2), var(--red));
  color:#050506;
  border-color: rgba(0,0,0,.35);
  box-shadow: 0 18px 50px rgba(255,42,42,.25);
}
.btn--primary:hover{ background: linear-gradient(180deg, #ff4b4b, var(--red)); }

.btn--ghost{
  background: transparent;
  border-color: rgba(255,255,255,.16);
}

.btn--small{
  padding:10px 12px;
  border-radius:14px;
}

.btn--full{ width:100%; }

/* Hero */
.hero{
  position:relative;
  padding: 28px 0 22px;
}

.hero__poster{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.74), rgba(0,0,0,.88)),
    var(--poster-url);
  background-size: cover;
  background-position: center;
  filter: saturate(1.1) contrast(1.1);
  opacity: .42;
  transform: scale(1.03);
  z-index:-2;
}

.hero::before{
  /* torn/grunge overlay */
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(900px 340px at 10% 0%, rgba(255,42,42,.28), transparent 62%),
    radial-gradient(900px 420px at 90% 20%, rgba(255,42,42,.18), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.00) 0%, rgba(0,0,0,.18) 20%, rgba(0,0,0,.58) 100%);
  pointer-events:none;
}

.hero__grid{
  display:grid;
  gap:18px;
  align-items:start;
}
@media (min-width: 980px){
  .hero__grid{
    grid-template-columns: 1.2fr .8fr;
    gap:22px;
  }
}

.hero__left{
  padding-top: 10px;
}

.title{
  margin: 14px 0 10px;
  font-family: Oswald, Inter, system-ui, sans-serif;
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:.02em;
  text-shadow: 0 16px 40px rgba(0,0,0,.55);
}
.title__top{
  display:block;
  font-size: clamp(28px, 6vw, 50px);
  font-weight:700;
  color: rgba(255,255,255,.92);
}
.title__mid{
  display:block;
  font-size: clamp(34px, 7.2vw, 68px);
  font-weight:900;
  color: var(--red);
  -webkit-text-stroke: 1px rgba(0,0,0,.35);
}
.title__date{
  display:block;
  font-size: clamp(34px, 7.4vw, 76px);
  font-weight:900;
  color: rgba(255,255,255,.96);
  -webkit-text-stroke: 2px rgba(0,0,0,.35);
}

.lead{
  margin: 10px 0 14px;
  color: rgba(242,242,246,.86);
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.55;
}

.hero__cta{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:stretch;
  margin: 14px 0 14px;
}
@media (min-width: 520px){
  .hero__cta{
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
  }
}

/* Angled banners (like poster) */
.slant{
  position:relative;
  display:inline-flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:baseline;
  padding: 12px 16px;
  border-radius: 14px;
  transform: skewX(-12deg);
  box-shadow: var(--shadow);
  width: fit-content;
  max-width: 100%;
}
.slant > *{ transform: skewX(12deg); } /* unskew text */

.slant__text{
  font-family: Oswald, Inter, system-ui, sans-serif;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size: 18px;
}
.slant__caps{
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size: 14px;
  opacity:.95;
}

.slant--black{
  background: rgba(0,0,0,.88);
  border: 1px solid rgba(255,255,255,.10);
}
.slant--black .slant__text{ color: var(--red); -webkit-text-stroke: 1px rgba(255,255,255,.06); }
.slant--black .slant__caps{ color: rgba(255,255,255,.92); }

.slant--red{
  background: linear-gradient(180deg, #ff4b4b, var(--red));
  border: 1px solid rgba(0,0,0,.28);
}
.slant--red .slant__text{ color:#08080c; }
.slant--red .slant__caps{ color:#08080c; opacity:.9; }

/* Badges */
.badges{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
  margin-top: 10px;
}
.badge{
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 50px rgba(0,0,0,.25);
}
.badge__k{
  font-size: 12px;
  color: var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
}
.badge__v{
  margin-top: 2px;
  font-size: 14px;
  font-weight:900;
  text-transform:uppercase;
}

/* Cards + torn edge illusion */
.torn{
  position:relative;
  border-radius: var(--radius2);
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.torn::before,
.torn::after{
  content:"";
  position:absolute;
  left:-10%;
  right:-10%;
  height:26px;
  background:
    radial-gradient(14px 10px at 10% 60%, rgba(0,0,0,.55), transparent 70%),
    radial-gradient(18px 12px at 30% 30%, rgba(0,0,0,.55), transparent 70%),
    radial-gradient(20px 14px at 55% 60%, rgba(0,0,0,.55), transparent 70%),
    radial-gradient(16px 12px at 78% 35%, rgba(0,0,0,.55), transparent 70%),
    radial-gradient(18px 14px at 92% 55%, rgba(0,0,0,.55), transparent 70%);
  opacity:.85;
  filter: blur(.2px);
  pointer-events:none;
}
.torn::before{ top:-10px; transform: rotate(-1.2deg); }
.torn::after{ bottom:-10px; transform: rotate(1.0deg); }

.card{
  padding: 18px;
  background: linear-gradient(180deg, rgba(10,10,15,.86), rgba(10,10,15,.72));
}
.card__eyebrow{
  display:inline-block;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size: 12px;
  color: rgba(255,255,255,.88);
  background: rgba(255,42,42,.18);
  border: 1px solid rgba(255,42,42,.32);
  padding: 8px 10px;
  border-radius: 999px;
}
.card__title{
  margin: 12px 0 10px;
  font-family: Oswald, Inter, system-ui, sans-serif;
  font-size: 26px;
  text-transform:uppercase;
}
.card__cta{
  display:grid;
  gap:10px;
  margin: 14px 0 10px;
}
.card__foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
  color: rgba(242,242,246,.88);
}

.checklist{
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(242,242,246,.88);
}
.checklist li{ margin: 8px 0; }

/* Lightning (decorative) */
.lightning{
  position:absolute;
  inset:-20px -20px -20px -20px;
  pointer-events:none;
  opacity:.55;
  background:
    radial-gradient(220px 420px at 20% 40%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(240px 500px at 80% 45%, rgba(255,255,255,.10), transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='700' viewBox='0 0 1200 700'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='2'%3E%3Cpath d='M210 40 L180 140 L240 210 L210 310 L260 370 L220 470 L280 540 L240 650'/%3E%3Cpath d='M980 20 L930 120 L1000 190 L940 270 L1010 350 L960 430 L1040 520 L990 680'/%3E%3C/g%3E%3Cg fill='none' stroke='%23b0a2ff' stroke-opacity='.45' stroke-width='5'%3E%3Cpath d='M205 45 L175 145 L235 215 L205 315 L255 375 L215 475 L275 545 L235 655'/%3E%3Cpath d='M985 25 L935 125 L1005 195 L945 275 L1015 355 L965 435 L1045 525 L995 685'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  mix-blend-mode: screen;
  filter: blur(.1px);
}

/* Sections */
.section{
  padding: 30px 0;
}
.section--alt{
  background: linear-gradient(180deg, rgba(255,42,42,.06), rgba(0,0,0,.0));
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.section__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom: 14px;
  flex-wrap:wrap;
}

.h2{
  margin:0;
  font-family: Oswald, Inter, system-ui, sans-serif;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size: 28px;
}
.h2--tight{ margin-top: 4px; }

.tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(242,242,246,.88);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size: 12px;
}
.tag--red{
  border-color: rgba(255,42,42,.35);
  background: rgba(255,42,42,.14);
}

/* Band grid */
.grid{
  display:grid;
  gap:12px;
}
@media (min-width: 860px){
  .grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.band{
  padding: 16px;
  background: linear-gradient(180deg, rgba(0,0,0,.58), rgba(0,0,0,.38));
}
.band__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.band__name{
  margin:0;
  font-family: Oswald, Inter, system-ui, sans-serif;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size: 20px;
}
.band__desc{
  margin: 10px 0 12px;
  color: rgba(242,242,246,.86);
  line-height:1.5;
}
.band__meta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  color: rgba(242,242,246,.78);
  font-weight:700;
  font-size: 13px;
}

.pill{
  display:inline-flex;
  align-items:center;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,42,42,.16);
  border: 1px solid rgba(255,42,42,.35);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size: 11px;
}
.pill--dark{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}

/* Info grid */
.info-grid{
  display:grid;
  gap:12px;
}
@media (min-width: 980px){
  .info-grid{ grid-template-columns: 1.15fr .85fr .9fr; }
}

.info-card{
  padding: 16px;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
}
.info-card h3{
  margin:0 0 10px;
  font-family: Oswald, Inter, system-ui, sans-serif;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.timeline{
  margin: 0;
  padding: 0;
  list-style:none;
  display:grid;
  gap:8px;
}
.timeline li{
  display:grid;
  grid-template-columns: 70px 1fr;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}
.timeline .t{
  font-weight:900;
  letter-spacing:.06em;
  color: rgba(255,255,255,.92);
}
.timeline .d{
  color: rgba(242,242,246,.88);
  font-weight:700;
}

details{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  border-radius: 14px;
  padding: 10px 12px;
  margin: 10px 0;
}
summary{
  cursor:pointer;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size: 12px;
}
details p{ margin:10px 0 0; color: rgba(242,242,246,.86); }

.bullets{
  margin: 0;
  padding-left: 18px;
  color: rgba(242,242,246,.86);
}
.bullets li{ margin: 8px 0; }

/* Tickets block */
.tickets{
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255,42,42,.14), rgba(0,0,0,.35)),
    radial-gradient(900px 420px at 20% 0%, rgba(255,42,42,.20), transparent 65%);
}
.tickets{
  display:grid;
  gap:16px;
}
@media (min-width: 980px){
  .tickets{
    grid-template-columns: 1.2fr .8fr;
    align-items:center;
  }
}

.tickets__cta{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:stretch;
  margin-top: 12px;
}
@media (min-width: 520px){
  .tickets__cta{ flex-direction:row; align-items:center; justify-content:flex-start; }
}

.pricebox{
  padding: 14px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  margin-bottom: 12px;
}
.pricebox--dark{
  background: rgba(0,0,0,.42);
  border-color: rgba(255,255,255,.10);
}
.pricebox__k{
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.10em;
  color: rgba(242,242,246,.82);
  font-size: 12px;
}
.pricebox__v{
  font-family: Oswald, Inter, system-ui, sans-serif;
  font-weight:900;
  font-size: 42px;
  letter-spacing:.02em;
  margin-top: 2px;
}
.pricebox__s{
  color: rgba(242,242,246,.70);
  font-weight:700;
  font-size: 12px;
}

/* Location */
.location-grid{
  display:grid;
  gap:12px;
}
@media (min-width: 980px){
  .location-grid{ grid-template-columns: 1fr 1fr; }
}

.location, .map{ padding: 16px; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.34)); }
.location h3, .map h3{
  margin:0 0 10px;
  font-family: Oswald, Inter, system-ui, sans-serif;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.loc-meta{
  margin-top: 10px;
  display:grid;
  gap:8px;
  color: rgba(242,242,246,.84);
  font-weight:700;
}
.location__cta{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top: 14px;
}
@media (min-width: 520px){
  .location__cta{ flex-direction:row; }
}

.map__placeholder{
  height: 240px;
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  display:grid;
  place-items:center;
  text-align:center;
  padding: 18px;
}
@media (min-width: 980px){
  .map__placeholder{ height: 100%; min-height: 320px; }
}
.map__icon{ font-size: 28px; margin-bottom: 6px; }
.map__text{ color: rgba(242,242,246,.78); font-weight:700; }

/* Footer */
.footer{
  padding: 22px 0 34px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.35);
}
.footer__grid{
  display:grid;
  gap:14px;
}
@media (min-width: 860px){
  .footer__grid{
    grid-template-columns: 1.3fr .7fr 1fr;
    align-items:center;
  }
}
.brand--footer .brand__name{ font-size: 13px; }

.footer__links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-start;
}
.footer__links a{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size: 12px;
}

.footer__legal{
  color: rgba(242,242,246,.66);
  font-weight:700;
}

/* Text helpers */
.muted{ color: var(--muted); }
.small{ font-size: 12px; line-height:1.5; }
.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing:.02em;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; scroll-behavior:auto !important; }
}