/* =========================================================
   THE ANTIBANNED — shared styles
   Fonts: Oswald (matches the original site)
   Mobile-first; desktop grids enhanced at >=860px
   ========================================================= */

:root{
  --bg:#000000;
  --red:#ff0000;
  --coral:#ff6f61;
  --yellow:#ffcd35;
  --text:#ffffff;
  --text-dim:#e0e0e0;
  --btn-bg:#54565f;
  --border:#1a1a1a;
  --max-w:1180px;
  --gap:56px;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Oswald',Arial,sans-serif;
  font-weight:300;
  font-size:18px;
  line-height:1.6;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}

a{color:inherit;text-decoration:none;}

.container{
  width:100%;
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 24px;
}

h1,h2,h3{
  font-family:'Oswald',Impact,sans-serif;
  font-weight:600;
  color:var(--red);
  text-transform:uppercase;
  letter-spacing:1px;
  line-height:1.05;
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-block;
  background:var(--btn-bg);
  color:var(--red);
  font-weight:500;
  font-size:14px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  padding:15px 34px;
  border-radius:40px;
  text-align:center;
  transition:background .15s ease,color .15s ease,transform .15s ease;
}
.btn:hover{background:var(--red);color:#000;transform:translateY(-2px);}

/* ============ SOCIAL ICONS ============ */
.social-row{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.social-row a{
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--red);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .15s ease,background .15s ease;
}
.social-row a:hover{transform:scale(1.12);background:var(--coral);}
.social-row svg{width:19px;height:19px;fill:#000;}

/* ============ HEADER / NAV ============ */
.site-header{padding:22px 0;position:sticky;top:0;z-index:100;background:var(--bg);}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}
.logo img{height:80px;width:auto;}
.main-nav ul{
  display:flex;
  list-style:none;
  gap:30px;
  flex-wrap:wrap;
}
.main-nav a{
  font-size:16px;
  font-weight:400;
  letter-spacing:.5px;
  color:var(--text);
  padding-bottom:4px;
  transition:color .15s ease;
}
.main-nav a.active{
  text-decoration:underline;
  text-underline-offset:7px;
  text-decoration-thickness:2px;
}
.main-nav a:hover{color:var(--red);}

/* ============ FOOTER ============ */
.site-footer{
  padding:54px 0 40px;
  text-align:center;
  border-top:1px solid var(--border);
  margin-top:40px;
}
.site-footer .footer-email{
  color:var(--text-dim);
  font-size:15px;
  letter-spacing:.5px;
  margin-bottom:20px;
}
.site-footer .social-row{justify-content:center;margin:0 auto 20px;}
.site-footer .copyright{color:#777;font-size:13px;letter-spacing:.5px;}

/* ============ SHARED SECTION HELPERS ============ */
.section{padding:64px 0;}
.two-col{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--gap);
  align-items:start;
}

/* =========================================================
   HOME
   ========================================================= */
.hero{padding:32px 0 56px;text-align:center;}
.hero h1{
  font-size:clamp(28px,5vw,46px);
  display:inline-block;
  margin-bottom:40px;
}
.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--gap);
  text-align:left;
  align-items:start;
}
.hero-image img{width:100%;height:auto;border-radius:2px;}
.hero .social-row{margin-top:26px;}
.soundcloud-embed iframe{width:100%;border:none;border-radius:4px;display:block;}
.music-buttons{
  display:flex;
  gap:16px;
  margin-top:24px;
  flex-wrap:wrap;
}

.get-angry .two-col{align-items:start;}
.get-angry h2{font-size:clamp(32px,5vw,50px);margin-bottom:22px;}
.get-angry p{color:var(--text-dim);margin-bottom:30px;font-weight:300;}
.get-angry p strong{color:var(--text);font-weight:600;}
.get-angry .col-text img{border-radius:14px;width:100%;max-width:400px;margin:0 auto;}
.big-logo{margin:0 auto 30px;width:100%;max-width:420px;}
.drummer-call{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-bottom:26px;
}
.drummer-call .arrow{color:var(--yellow);font-size:28px;line-height:1;}
.drummer-call .drummer-text{
  font-family:'Oswald',Impact,sans-serif;
  font-weight:600;
  color:var(--yellow);
  font-size:clamp(24px,4vw,38px);
  text-transform:uppercase;
  letter-spacing:1px;
}
.col-logo h3{font-size:clamp(24px,4vw,36px);text-align:left;margin-bottom:16px;}
.col-logo p{color:var(--text-dim);text-align:left;margin:0;font-weight:300;}
.col-logo p a{color:var(--text-dim);text-decoration:underline;}

.book-us{padding:80px 0 64px;text-align:center;}
.book-us h2{font-size:clamp(28px,5vw,46px);margin-bottom:18px;}
.book-us p{color:var(--coral);max-width:600px;margin:0 auto 30px;font-weight:300;}
.book-us p a{color:var(--coral);text-decoration:underline;}
/* photo pair — equal widths, always centred */
.photo-pair{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  max-width:var(--max-w);
  margin:52px auto 0;
  padding:0 24px;
}
.photo-pair img{
  width:100%;
  aspect-ratio:2 / 1;
  object-fit:cover;
  border-radius:2px;
}

.contact{padding:80px 0;}
.contact h2{font-size:clamp(32px,5vw,50px);margin-bottom:12px;}
form{display:flex;flex-direction:column;gap:6px;}
form label{font-size:15px;color:var(--text-dim);margin-top:14px;font-weight:300;}
form input,form textarea{
  background:transparent;
  border:1px solid #555;
  border-radius:4px;
  padding:14px 16px;
  color:var(--text);
  font-family:'Oswald',Arial,sans-serif;
  font-weight:300;
  font-size:15px;
}
form input::placeholder,form textarea::placeholder{color:#888;}
form input:focus,form textarea:focus{outline:none;border-color:var(--red);}
form textarea{min-height:120px;resize:vertical;}
form button{
  align-self:flex-start;
  margin-top:22px;
  background:var(--btn-bg);
  color:var(--red);
  border:none;
  font-family:'Oswald',Arial,sans-serif;
  font-weight:500;
  font-size:14px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  padding:15px 38px;
  border-radius:40px;
  cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
form button:hover{background:var(--red);color:#000;}
.form-status{margin-top:18px;font-size:16px;font-weight:400;line-height:1.4;}
.form-status.ok{color:#7cfc9b;}
.form-status.err{color:var(--coral);}

/* =========================================================
   MUSIC
   ========================================================= */
.music-hero{padding:48px 0 40px;text-align:center;}
.music-hero h1{
  font-size:clamp(30px,6vw,58px);
  margin-bottom:44px;
  letter-spacing:1px;
}
.media-row{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--gap);
  align-items:stretch;
  text-align:left;
}
.band-shot{border-radius:3px;overflow:hidden;}
.band-shot img{width:100%;height:auto;display:block;}
.media-col{display:flex;flex-direction:column;}
.media-buttons{
  display:flex;
  gap:20px;
  margin-top:24px;
}
.media-buttons .btn{flex:1;}

/* =========================================================
   SHOWS
   ========================================================= */
.shows{padding:56px 0 40px;}
.shows-row{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--gap);
  align-items:start;
}
.shows-row .gig-photo img{width:100%;border-radius:14px;aspect-ratio:1.22;object-fit:cover;object-position:center 72%;}
.gig-details h2{
  font-size:clamp(26px,3.4vw,40px);
  color:var(--coral);
  text-decoration:underline;
  text-underline-offset:5px;
  margin-bottom:22px;
  line-height:1.15;
}
.gig-details h2 a{color:var(--coral);}
.gig-details .venue{color:var(--text);font-weight:400;margin-bottom:12px;font-size:18px;}
.gig-details .gig-link a{color:var(--text);text-decoration:underline;word-break:break-word;font-weight:300;}
.places{margin-top:60px;}
.places h2{
  font-size:clamp(24px,3.4vw,38px);
  color:var(--coral);
  text-decoration:underline;
  text-underline-offset:5px;
  margin-bottom:18px;
}
.places p{color:var(--text);font-weight:300;font-size:18px;}

/* =========================================================
   GALLERY
   ========================================================= */
.gallery{padding:48px 0 40px;text-align:center;}
.gallery h1{font-size:clamp(34px,6vw,56px);margin-bottom:44px;letter-spacing:2px;}
.masonry{
  column-count:1;
  column-gap:16px;
}
.masonry img{
  width:100%;
  margin:0 0 16px;
  border-radius:3px;
  break-inside:avoid;
  display:block;
}

/* =========================================================
   RESPONSIVE — enhance for tablet / desktop
   ========================================================= */
@media (min-width:700px){
  .masonry{column-count:2;}
}
@media (min-width:860px){
  .hero-grid{grid-template-columns:1fr 1fr;max-width:980px;margin-left:auto;margin-right:auto;}
  .hero-image img{height:320px;object-fit:cover;object-position:center 22%;}
  .hero .soundcloud-embed iframe{height:320px;}
  .two-col{grid-template-columns:1fr 1fr;}
  .contact .two-col{grid-template-columns:0.85fr 1.15fr;}
  .photo-pair{grid-template-columns:1fr 1fr;}
  .media-row{grid-template-columns:1fr 1fr;}
  .band-shot{position:relative;}
  .band-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;}
  .shows-row{grid-template-columns:1fr 1fr;}
  .masonry{column-count:3;}
  .get-angry p{max-width:520px;}
  .col-logo p{max-width:460px;}
}
@media (min-width:1100px){
  .masonry{column-count:4;}
}