/* =========================================================
   WAIL — v4  "official band site" architecture
   Direction ref: slipknot1.com
   full-bleed hero (logo only) · overlay menu · poster blocks
   · photography-driven · black / white / red · brutal type
   ========================================================= */
:root{
  --bg:      #050505;
  --bg-2:    #0c0c0c;
  --panel:   #111;
  --ink:     #f6f5f3;
  --ink-dim: #9a9793;
  --ink-faint:#5f5c58;
  --red:     #c8102e;
  --red-2:   #ff2438;
  --red-glow: rgba(255,36,56,0.45);
  --line:    rgba(246,245,243,0.12);
  --line-2:  rgba(246,245,243,0.26);

  --f-display:'Anton', sans-serif;
  --f-cond:   'Barlow Condensed', sans-serif;
  --f-body:   'Oswald', sans-serif;

  --max: 1360px;
  --edge: clamp(18px, 4.5vw, 72px);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-weight:300;
  font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; }
em{ color:var(--red-2); font-style:normal; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
a:focus-visible, button:focus-visible{ outline:2px solid var(--red-2); outline-offset:3px; }

.grain-overlay{
  position:fixed; inset:0; z-index:900; pointer-events:none;
  background-image:url('assets/grain.png'); background-size:200px 200px;
  opacity:.04; mix-blend-mode:overlay;
}

/* =========================================================
   Language switch
   ========================================================= */
.lang-switch{
  position:fixed; top:24px; left:var(--edge); z-index:1000;
  display:flex; align-items:center; gap:8px;
  height:52px; padding:0 6px;
  font-family:var(--f-cond); font-weight:700;
  font-size:1rem; letter-spacing:.12em;
}
.lang-switch button{
  background:none; border:none; cursor:pointer; padding:6px 4px;
  font:inherit; letter-spacing:inherit;
  color:var(--ink-faint); text-transform:uppercase;
  transition:color .2s ease;
}
.lang-switch button:hover{ color:var(--ink); }
.lang-switch button.is-active{ color:var(--red-2); }
.lang-sep{ color:var(--ink-faint); }
/* Sit above the overlay menu so language can be changed while it's open */
.overlay-menu.is-open ~ .lang-switch,
.lang-switch{ }

/* =========================================================
   Overlay menu + burger
   ========================================================= */
.menu-btn{
  position:fixed; top:24px; right:var(--edge); z-index:1000;
  width:52px; height:52px; padding:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background:var(--red); border:none; cursor:pointer;
  transition:background .2s ease;
}
.menu-btn span{ width:24px; height:3px; background:var(--ink); transition:transform .25s ease, opacity .2s ease; }
.menu-btn:hover{ background:var(--red-2); }
.menu-btn.is-open span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.menu-btn.is-open span:nth-child(2){ opacity:0; }
.menu-btn.is-open span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

.overlay-menu{
  position:fixed; inset:0; z-index:950;
  background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:40px;
  opacity:0; visibility:hidden; transform:scale(1.04);
  transition:opacity .3s ease, transform .3s ease, visibility .3s;
}
.overlay-menu.is-open{ opacity:1; visibility:visible; transform:scale(1); }
.overlay-menu::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.16;
  background:url('assets/band-bw.jpg') center/cover no-repeat;
}
.overlay-menu ul{ list-style:none; margin:0; padding:0; text-align:center; }
.overlay-menu li{ overflow:hidden; }
.overlay-menu li a{
  position:relative;
  display:inline-block;
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2.4rem, 7vw, 5rem);
  line-height:1.02; text-transform:uppercase; letter-spacing:.01em;
  color:var(--ink);
  padding:2px 0;
  transition:color .2s ease, transform .2s ease;
}
.overlay-menu li a::before{
  content:attr(data-i);
  font-family:var(--f-cond); font-size:0.9rem; font-weight:600;
  color:var(--red-2); vertical-align:super;
  margin-right:14px; letter-spacing:.1em;
}
.overlay-menu li a:hover{ color:var(--red-2); transform:translateX(6px); }
.overlay-social{
  display:flex; gap:26px; flex-wrap:wrap; justify-content:center;
  font-family:var(--f-cond); font-weight:600; font-size:1rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim);
}
.overlay-social a:hover{ color:var(--red-2); }

/* =========================================================
   Hero — full viewport, logo only
   ========================================================= */
.hero{ position:relative; height:100svh; min-height:600px; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; }
.hero-bg img{
  width:100%; height:100%; object-fit:cover; object-position:60% 18%;
  filter:grayscale(1) contrast(1.2) brightness(.82);
  animation:herozoom 18s ease-out forwards;
}
@keyframes herozoom{ from{ transform:scale(1.08); } to{ transform:scale(1); } }
.hero-scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(5,5,5,0) 20%, rgba(5,5,5,.55) 78%),
    linear-gradient(180deg, rgba(5,5,5,.5) 0%, rgba(5,5,5,0) 30%, rgba(5,5,5,.9) 100%);
}
.hero-center{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 var(--edge);
}
.hero-logo{
  width:min(72vw, 760px); height:auto;
  filter:drop-shadow(0 0 60px rgba(0,0,0,.7));
  animation:logoin 1s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes logoin{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:translateY(0); } }
.hero-tag{
  margin:26px 0 0;
  font-family:var(--f-cond); font-weight:600;
  font-size:clamp(.9rem, 2vw, 1.15rem);
  letter-spacing:.28em; text-transform:uppercase; text-align:center;
  color:var(--ink-dim);
  animation:logoin 1s .25s cubic-bezier(.2,.7,.2,1) both;
}
.hero-down{
  position:absolute; left:50%; bottom:30px; z-index:2;
  transform:translateX(-50%);
  width:24px; height:40px; border:2px solid var(--line-2);
}
.hero-down span{
  position:absolute; top:7px; left:50%; width:4px; height:9px;
  background:var(--red-2); transform:translateX(-50%);
  animation:cue 1.7s ease-in-out infinite;
}
@keyframes cue{ 0%{opacity:1;top:7px;} 70%{opacity:0;top:22px;} 100%{opacity:0;top:7px;} }

/* =========================================================
   Block scaffolding (poster sections)
   ========================================================= */
.block{ padding:clamp(70px,10vw,130px) 0; position:relative; }
.block--music  { background:var(--bg); }
.block--photos { background:var(--bg-2); }
.block--bio    { background:var(--bg); }
.block--events { background:var(--bg-2); }
.block--booking{ background:var(--bg); }

.block-title{
  max-width:var(--max); margin:0 auto clamp(36px,5vw,64px);
  padding:0 var(--edge);
}
.kicker{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--f-cond); font-weight:700;
  font-size:1rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--red-2); margin-bottom:10px;
}
.kicker::before{ content:""; width:34px; height:3px; background:var(--red-2); }
.block-title h2{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(3rem, 9vw, 7rem); line-height:.92;
  text-transform:uppercase; letter-spacing:.005em; color:var(--ink);
}

/* =========================================================
   Music — horizontal disc strip
   ========================================================= */
.disc-group-label{
  max-width:var(--max); margin:0 auto; padding:0 var(--edge) 16px;
  font-family:var(--f-cond); font-weight:700;
  font-size:1.05rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-dim);
  display:flex; align-items:center; gap:14px;
}
.disc-group-label::after{
  content:""; flex:1; height:1px; background:var(--line);
}
.disc-strip{
  max-width:var(--max); margin:0 auto; padding:0 var(--edge); margin-bottom:56px;
  display:grid; gap:2px; background:var(--line);
}
.disc-strip--albums{ grid-template-columns:repeat(2,1fr); }
.disc-strip--singles{ grid-template-columns:repeat(4,1fr); }
.disc{ position:relative; display:block; background:var(--bg); overflow:hidden; }
.disc img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  filter:grayscale(.35) contrast(1.05);
  transition:transform .5s ease, filter .5s ease;
}
.disc:hover img{ transform:scale(1.07); filter:grayscale(0) contrast(1.12); }
.disc-meta{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:20px 18px 16px;
  background:linear-gradient(180deg, transparent, rgba(5,5,5,.92));
  transform:translateY(calc(100% - 62px));
  transition:transform .35s ease;
}
.disc:hover .disc-meta{ transform:translateY(0); }
.disc-meta h3{
  font-family:var(--f-display); font-weight:400; font-size:1.25rem;
  text-transform:uppercase; line-height:1.02;
}
.disc-meta span{
  display:block; margin-top:6px;
  font-family:var(--f-cond); font-weight:600; font-size:.82rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--red-2);
}
.stream-bar{
  max-width:var(--max); margin:2px auto 0; padding:0 var(--edge);
  display:flex; flex-wrap:wrap;
}
.stream-bar a{
  flex:1 1 auto; text-align:center; min-width:140px;
  padding:20px 16px;
  font-family:var(--f-cond); font-weight:700; font-size:1rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); background:var(--panel);
  border:1px solid var(--line);
  transition:background .2s ease, color .2s ease;
}
.stream-bar a:hover{ background:var(--red); color:var(--ink); border-color:var(--red); }

/* =========================================================
   Splash — full-bleed poster with giant word
   ========================================================= */
.splash{ position:relative; height:clamp(360px,70vh,760px); overflow:hidden; }
.splash-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 30%; filter:grayscale(1) contrast(1.25) brightness(.7);
}
.splash::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,5,5,.6), rgba(5,5,5,.2) 40%, rgba(5,5,5,.85)),
             linear-gradient(120deg, rgba(200,16,46,.28), transparent 60%);
}
.splash-word{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.splash-word span{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(5rem, 26vw, 22rem); line-height:1;
  text-transform:uppercase; letter-spacing:.02em;
  color:transparent; -webkit-text-stroke:2px rgba(246,245,243,.85);
  opacity:.9;
}

/* =========================================================
   Photo wall — dense asymmetric grid
   ========================================================= */
.wall{
  max-width:var(--max); margin:0 auto; padding:0 var(--edge);
  display:grid; grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:230px; gap:3px;
  grid-auto-flow:dense;
}
.wall-cell{ position:relative; overflow:hidden; }
.wall-cell--wide{ grid-column:span 2; }
.wall-cell--tall{ grid-row:span 2; }
.wall-cell img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.55) contrast(1.1);
  transition:transform .55s ease, filter .5s ease;
}
.wall-cell:hover img{ transform:scale(1.08); filter:grayscale(0) contrast(1.15); }
.wall-cell::after{
  content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 0 0 var(--red-2);
  transition:box-shadow .2s ease;
}
.wall-cell:hover::after{ box-shadow:inset 0 0 0 3px var(--red-2); }

/* =========================================================
   Bio
   ========================================================= */
.bio-wrap{
  max-width:var(--max); margin:0 auto; padding:0 var(--edge);
  display:grid; grid-template-columns:1fr 1.3fr; gap:clamp(30px,5vw,70px);
  align-items:start;
}
.bio-quote{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.3rem); line-height:1.12;
  text-transform:uppercase; color:var(--ink);
  border-left:5px solid var(--red); padding-left:24px; margin:0;
}
.bio-body{ font-weight:300; }
.bio-body p{ margin:0 0 20px; color:var(--ink-dim); font-size:1.04rem; }
.bio-body p:last-child{ margin-bottom:0; }

/* =========================================================
   Events
   ========================================================= */
.events-feed{
  max-width:var(--max); margin:0 auto; padding:0 var(--edge);
  min-height:80px;
}
.events-loading{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.2rem,2.4vw,1.7rem); text-transform:uppercase; color:var(--ink-dim);
  margin:0; border-left:5px solid var(--red); padding-left:22px;
}
/* Once Songkick has injected its component, drop our placeholder line */
.events-feed:has(.sk-widget-container) .events-loading,
.events-feed:has(iframe) .events-loading{ display:none; }

/* Let the Songkick widget sit on the dark background without a white card */
.events-feed .songkick-widget{ display:block; }
.events-feed .sk-widget-container,
.events-feed .sk-widget{ background:transparent !important; }

.events-empty{
  max-width:var(--max); margin:0 auto; padding:0 var(--edge);
}
.events-empty p{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.4rem,3vw,2.2rem); text-transform:uppercase; color:var(--ink);
  margin:0 0 8px; border-left:5px solid var(--red); padding-left:22px;
}
.events-empty span{ display:block; padding-left:27px; color:var(--ink-faint);
  font-family:var(--f-cond); font-weight:500; letter-spacing:.04em; font-size:1rem; }
.events-list{ list-style:none; margin:0; padding:0; max-width:var(--max); margin-inline:auto; padding-inline:var(--edge); }
.event-row{
  display:flex; align-items:center; gap:24px; padding:26px 0;
  border-top:1px solid var(--line);
}
.event-row:last-child{ border-bottom:1px solid var(--line); }
.event-date{
  font-family:var(--f-display); font-weight:400; font-size:1.3rem;
  color:var(--red-2); width:180px; flex-shrink:0; letter-spacing:.02em;
}
.event-place{ flex:1; font-family:var(--f-cond); font-weight:600; font-size:1.3rem; text-transform:uppercase; }
.event-tix{
  font-family:var(--f-cond); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:12px 26px; border:2px solid var(--ink);
  transition:background .2s, color .2s;
}
.event-tix:hover{ background:var(--ink); color:var(--bg); }

/* =========================================================
   Booking
   ========================================================= */
.booking-grid{
  max-width:var(--max); margin:0 auto; padding:0 var(--edge);
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line);
}
.booking-cell{ background:var(--bg); padding:34px 30px; border-top:4px solid var(--red); }
.booking-cell h3{ font-family:var(--f-display); font-weight:400; font-size:1.5rem; text-transform:uppercase; margin-bottom:12px; }
.booking-cell p{ color:var(--ink-dim); font-weight:300; margin:0 0 18px; }
.booking-cell a{
  font-family:var(--f-cond); font-weight:700; font-size:1.05rem; letter-spacing:.03em;
  color:var(--red-2); border-bottom:2px solid transparent; transition:border-color .2s;
}
.booking-cell a:hover{ border-color:var(--red-2); }
.booking-cell .soon{ font-family:var(--f-cond); font-weight:600; color:var(--ink-faint); letter-spacing:.06em; text-transform:uppercase; }

/* =========================================================
   Footer
   ========================================================= */
.foot{
  padding:56px var(--edge) 44px; background:var(--bg-2); border-top:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center;
}
.foot-logo{ height:34px; width:auto; }
.foot-social{
  display:flex; gap:26px; flex-wrap:wrap; justify-content:center;
  font-family:var(--f-cond); font-weight:700; font-size:.92rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim);
}
.foot-social a:hover{ color:var(--red-2); }
.foot-copy{ font-family:var(--f-cond); font-size:.85rem; letter-spacing:.1em; color:var(--ink-faint); margin:0; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px){
  .disc-strip--albums{ grid-template-columns:repeat(2,1fr); }
  .disc-strip--singles{ grid-template-columns:repeat(3,1fr); }
  .disc-meta{ transform:translateY(0); background:linear-gradient(180deg,transparent,rgba(5,5,5,.92)); }
  .wall{ grid-template-columns:repeat(2,1fr); grid-auto-rows:200px; }
  .wall-cell--wide{ grid-column:span 2; }
  .wall-cell--tall{ grid-row:span 1; }
  .bio-wrap{ grid-template-columns:1fr; gap:30px; }
  .booking-grid{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .disc-strip--albums{ grid-template-columns:1fr 1fr; }
  .disc-strip--singles{ grid-template-columns:1fr 1fr; }
  .wall{ grid-template-columns:1fr; grid-auto-rows:260px; }
  .wall-cell--wide{ grid-column:span 1; }
  .stream-bar a{ min-width:50%; }
  .event-row{ flex-wrap:wrap; }
  .event-date{ width:auto; }
}