:root{
  --mint:#77fad8;   /* main */
  --acid:#e16bf6;   /* accent */
  --ink:#0c0e10;
  --paper:#f5f5f5;
}

*{box-sizing:border-box}

html,body{
  margin:0; padding:0; background:var(--ink); color:var(--paper);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  line-height:1.5;
}

.banner{ position:relative; overflow:hidden; }
.banner img{ width:100%; display:block; object-fit:cover; max-height:55vh; filter:contrast(1.1) saturate(1.2); }
.banner-overlay{
  position:absolute; inset:auto 0 0 0; padding: .8rem clamp(1rem, 4vw, 3rem);
  background: linear-gradient(180deg, transparent, rgba(12,14,16,.9) 60%, rgba(12,14,16,1));
}
.tagline{
  display:inline-block; background:var(--mint); color:#000; font-weight:800;
  padding:.35rem .6rem; transform: rotate(-2deg) skewX(-6deg);
  box-shadow:6px 6px 0 var(--acid); text-transform:uppercase;
}

.block{ padding: clamp(1.5rem, 5vw, 3.5rem); }
.block-title{
  display:inline-block; font-size: clamp(1.4rem, 4.5vw, 2.2rem); margin:0 0 1rem 0;
  color: var(--ink); background:linear-gradient(90deg, var(--mint), var(--acid));
  padding:.35rem .6rem; transform:rotate(-1.8deg);
  box-shadow:5px 5px 0 #000, -3px -3px 0 rgba(225,107,246,.3);
}

.gig-list{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.gig{
  display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center;
  background: #111; border:2px solid var(--mint); padding:.7rem 1rem;
  box-shadow:4px 4px 0 var(--acid);
}
.gig .date{ font-weight:900; color:var(--mint) }
.gig .city{ color:var(--acid); font-weight:700 }
.gig .venue{ opacity:.9 }
.gig .with{ opacity:.7; font-style:italic; }

.no-gigs{ opacity:.7; font-style:italic; }

.gigs-booking{ margin-top:1rem; opacity:.7; font-style:italic; }

.releases{
  display:grid; gap:1rem;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
}
.release-card{
  background:var(--ink); padding:.6rem;
  transform: rotate(.8deg);
}
.release-card:nth-child(2){ transform: rotate(-1.2deg) }

.links{
  display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.link-tile{
  background:#111; border:2px solid var(--mint); padding:1rem; text-decoration:none; color:var(--paper);
  display:flex; align-items:center; gap:.8rem; font-weight:800; text-transform:uppercase;
  box-shadow:5px 5px 0 var(--acid); transform:skewX(-6deg);
}
.link-tile img{ width:28px; height:28px; display:block; }
.link-tile:hover{ transform:skewX(-6deg) translateY(-2px) }

.site-footer{
  padding:1.2rem; text-align:center; border-top:3px solid var(--mint); opacity:.9;
}