/* ============================================================
   RAISED FIST — Europe 2026 one-pager
   Visual system derived from the tour poster + press photo:
   steel-blue (#588491), monochrome photography, condensed caps.
   ============================================================ */

:root{
  --ink:        #15181b;
  --ink-2:      #1d2125;
  --ink-3:      #262b30;
  --ink-soft:   #4a5158;
  --paper:      #ffffff;
  --paper-2:    #eceff1;
  --paper-low:  #d9dde0;
  --teal:       #588491;
  --teal-deep:  #3f6b78;
  --teal-light: #7ba6b1;
  --teal-tint:  #e6eef0;
  --line:       rgba(21,24,27,.12);
  --line-dk:    rgba(255,255,255,.12);

  --ff-display: "Space Grotesk", system-ui, sans-serif;
  --ff-body:    "Space Grotesk", system-ui, sans-serif;
  --ff-mono:    "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --maxw: 1240px;
  --pad:  clamp(22px, 5vw, 64px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--teal); color:#fff; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

.display{ font-family:var(--ff-display); font-weight:700; text-transform:uppercase; line-height:.95; letter-spacing:-.02em; }
.eyebrow{
  font-family:var(--ff-mono); font-weight:400; text-transform:uppercase;
  letter-spacing:.22em; font-size:clamp(11px,1.05vw,13px); color:var(--teal-deep);
  white-space:nowrap;
}

/* ============================ HERO ============================ */
.hero{
  position:relative; z-index:1;
  height:100svh; min-height:600px;
  display:flex; flex-direction:column; justify-content:flex-start; align-items:center;
  text-align:center;
  padding:clamp(72px,15vh,180px) var(--pad) clamp(56px,9vh,110px);
}

/* fixed parallax layer the content scrolls up over */
.bg-layer{
  position:fixed; inset:0; z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:#07080a;
}
.hero__bg{
  position:absolute; left:0; right:0; top:-16%; height:132%;
  background:#cfd4d7 url("assets/press.jpg") center 32% / cover no-repeat;
  transform-origin:50% 38%;
  will-change:transform;
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 96% 52% at 50% 22%, rgba(9,13,16,.72) 0%, rgba(9,13,16,.30) 48%, rgba(9,13,16,0) 70%),
    linear-gradient(180deg, rgba(11,15,18,.62) 0%, rgba(11,15,18,.20) 32%, rgba(11,15,18,.08) 60%, rgba(11,15,18,.32) 100%);
}
/* cinematic fade-to-black driven by scroll (JS sets opacity) */
.hero__fade{
  position:absolute; inset:0; opacity:0;
  background:
    radial-gradient(ellipse 120% 90% at 50% 42%, rgba(7,8,10,.5) 0%, rgba(7,8,10,.86) 55%, #07080a 100%);
  will-change:opacity;
}
.hero__inner{
  display:flex; flex-direction:column; align-items:center; gap:clamp(14px,2.4vh,24px);
  width:100%;
}
.hero__logo{
  width:min(840px, 90vw);
  filter:drop-shadow(0 6px 26px rgba(0,0,0,.5));
  animation:rise .9s cubic-bezier(.2,.7,.2,1) both;
}
.hero__tagline{
  display:flex; align-items:center; gap:18px;
  color:#fff;
  font-family:var(--ff-display); font-weight:500; text-transform:uppercase;
  letter-spacing:.46em; font-size:clamp(15px,1.9vw,24px);
  text-indent:.46em;
  animation:rise .9s .12s cubic-bezier(.2,.7,.2,1) both;
}
.hero__tagline::before, .hero__tagline::after{
  content:""; height:1px; width:clamp(28px,7vw,72px); background:rgba(255,255,255,.6);
}
.hero__rule{
  width:clamp(180px,33vw,390px); height:1px; background:rgba(255,255,255,.6);
  animation:rise .9s .12s cubic-bezier(.2,.7,.2,1) both;
}
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
  animation:rise .9s .24s cubic-bezier(.2,.7,.2,1) both; }

.btn{
  font-family:var(--ff-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.18em; font-size:14px;
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; border:1.5px solid transparent; cursor:pointer;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn svg{ width:15px; height:15px; }
.btn--solid{ background:var(--teal); color:#fff; }
.btn--solid:hover{ background:var(--teal-deep); transform:translateY(-2px); }
.btn--ghost{ background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.65); backdrop-filter:blur(2px); }
.btn--ghost:hover{ background:#fff; color:var(--ink); border-color:#fff; transform:translateY(-2px); }
.btn--ink{ background:var(--ink); color:#fff; }
.btn--ink:hover{ background:var(--teal-deep); transform:translateY(-2px); }
.btn--mini{ padding:11px 22px; font-size:12.5px; }

.scrollcue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px; z-index:1;
  color:rgba(255,255,255,.82);
  font-family:var(--ff-display); font-weight:500; text-transform:uppercase; letter-spacing:.3em; font-size:10.5px;
}
.scrollcue__line{ width:1px; height:42px; background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,0)); animation:pulse 1.9s ease-in-out infinite; }

/* ============================ SECTION SHELL ============================ */
.section{ padding-block:clamp(72px,11vh,128px); position:relative; z-index:1; }
.section__head{ display:flex; flex-direction:column; gap:14px; margin-bottom:clamp(40px,6vh,68px); }
.section__title{ width:100%; font-size:clamp(46px,8.5vw,108px); color:var(--ink); }
.section__title .accent{ color:var(--teal); }
.section__sub{ width:100%; color:var(--ink-soft); max-width:54ch; font-size:clamp(15px,1.5vw,18px); }
.section__sub--wide{ max-width:none; }

/* ============================ TOUR ============================ */
.tour{ background:var(--paper); position:relative; z-index:1; padding-bottom:0; }
.tour .section__head{ text-align:center; align-items:center; }

.dates{ border-top:1px solid var(--line); max-width:1000px; margin-inline:auto; }
.date{
  display:grid;
  grid-template-columns: 110px 1fr auto;
  align-items:center; gap:22px;
  padding:22px 18px;
  border-bottom:1px solid var(--line);
  transition:background .2s ease, padding .2s ease;
}
.date:hover{ background:var(--teal-tint); }
.date__day{
  font-family:var(--ff-display); font-weight:600; color:var(--teal-deep);
  font-size:clamp(20px,2.4vw,26px); letter-spacing:.02em; white-space:nowrap;
}
.date__info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.date__city{
  font-family:var(--ff-display); font-weight:600; text-transform:uppercase;
  font-size:clamp(20px,2.5vw,28px); letter-spacing:.02em; line-height:1;
}
.date__city .cc{ color:var(--teal); font-weight:500; }
.date__venue{
  font-family:var(--ff-mono); font-weight:400;
  text-transform:uppercase; letter-spacing:.12em; font-size:11.5px; color:var(--ink-soft);
}
.date__cta{ justify-self:end; }
.tix{
  font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:.16em;
  font-size:13px; color:var(--ink);
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 22px; border:1.5px solid var(--ink);
  transition:all .18s ease; white-space:nowrap;
}
.tix svg{ width:13px; height:13px; transition:transform .18s ease; }
.tix:hover{ background:var(--ink); color:#fff; }
.tix:hover svg{ transform:translateX(3px); }
.tix--soft{ color:var(--ink-soft); border-color:var(--line); }
.tix--soft:hover{ background:var(--teal-deep); border-color:var(--teal-deep); color:#fff; }

/* band photo strip blending into white */
.bandstrip{
  margin-top:clamp(16px,3vh,40px);
  background:#fff;
  position:relative;
}
.bandstrip__photo{
  width:100%; max-width:1180px; margin-inline:auto; display:block;
  position:relative; z-index:0;
}
.bandstrip::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:44%; z-index:1;
  background:linear-gradient(180deg,
    rgba(21,24,27,0) 0%,
    rgba(21,24,27,0.05) 42%,
    rgba(21,24,27,0.16) 74%,
    rgba(21,24,27,0.40) 100%);
  pointer-events:none;
}
.bandstrip__sponsors{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:clamp(34px,6%,72px); width:min(62%,720px); z-index:2;
  pointer-events:none;
}

/* ============================ MUSIC / PUFFAR ============================ */
.music{ background:var(--ink); color:#fff; }
.music .section__title{ color:#fff; }
.music .section__sub{ color:rgba(255,255,255,.62); }
.music .eyebrow{ color:var(--teal-light); }
.music .section__head{ text-align:center; align-items:center; }

/* album feature: cover + meta, left-aligned to match the puff grid */
.music__head{
  flex-direction:row; align-items:center; text-align:left;
  gap:clamp(28px,4vw,56px);
  max-width:1080px; margin-inline:auto;
}
.album__cover{ flex:none; width:clamp(150px,21vw,256px); }
.album__cover img{
  width:100%; aspect-ratio:1; object-fit:cover; display:block;
  border:1px solid var(--line-dk);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.album__meta{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:clamp(12px,1.6vh,18px); min-width:0; }
.album__meta .eyebrow{ display:block; }
.album__meta .section__title{ width:auto; line-height:.9; }
.album__meta .section__sub{ margin:0; }

.grouplabel{
  font-family:var(--ff-mono); font-weight:400; text-transform:uppercase; letter-spacing:.18em;
  font-size:12px; color:var(--teal-light);
  display:flex; align-items:center; gap:14px; margin:0 auto clamp(18px,2.6vh,26px);
  max-width:1080px;
}
.grouplabel::before{ content:"//"; color:var(--teal); opacity:.9; letter-spacing:0; margin-right:-4px; }
.grouplabel::after{ content:""; flex:1; height:1px; background:var(--line-dk); }

.puffs{
  display:grid; gap:12px; max-width:1080px; margin-inline:auto;
  grid-template-columns:repeat(3, 1fr);
}
.puffs + .grouplabel{ margin-top:clamp(34px,5vh,52px); }
.puffs--2{ grid-template-columns:repeat(2,1fr); }
.puffs--single{ grid-template-columns:1fr; }

/* featured video */
.video{ max-width:1080px; margin:0 auto clamp(38px,5.5vh,60px); }
.video__frame{
  position:relative; aspect-ratio:16 / 9; width:100%;
  background:#000; border:1px solid var(--line-dk); overflow:hidden;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.8);
}
.video__frame iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}
.video__cap{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line-dk);
}
.video__title{
  font-family:var(--ff-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.02em; font-size:clamp(17px,1.9vw,22px); color:#fff;
}
.video__meta{
  font-family:var(--ff-mono); font-weight:400; text-transform:uppercase;
  letter-spacing:.16em; font-size:10.5px; color:rgba(255,255,255,.5);
}

.puff{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:24px 26px;
  background:transparent; border:1px solid var(--line-dk);
  transition:border-color .4s ease, background .4s ease, transform .4s cubic-bezier(.2,.7,.2,1);
}
.puff:hover{ border-color:rgba(123,166,177,.55); background:var(--ink-2); transform:translateY(-2px); }
.puff__name{
  font-family:var(--ff-display); font-weight:600; text-transform:uppercase;
  font-size:clamp(19px,2.1vw,25px); line-height:1.1; letter-spacing:.02em;
  text-wrap:balance;
}
.puff__arrow{
  flex:none; display:inline-flex; color:rgba(255,255,255,.4);
  transition:color .4s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.puff__arrow svg{ width:20px; height:20px; }
.puff:hover .puff__arrow{ color:var(--teal-light); transform:translateX(6px); }

/* ============================ BOOKING ============================ */
.booking{ background:var(--paper); }
.booking .section__head{ text-align:center; align-items:center; margin-bottom:clamp(30px,5vh,52px); }
.booking__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; max-width:840px; margin-inline:auto; }
.booking__card{
  position:relative; background:transparent;
  border:1px solid var(--line);
  padding:24px 26px;
  display:flex; flex-direction:column; align-items:stretch; gap:18px;
  text-align:left;
  transition:border-color .4s ease, background .4s ease, transform .4s cubic-bezier(.2,.7,.2,1);
}
.booking__card:hover{ border-color:var(--teal); background:#fff; transform:translateY(-2px); }
.booking__tag{
  font-family:var(--ff-mono); font-weight:400; text-transform:uppercase;
  letter-spacing:.18em; font-size:11px; color:var(--teal-deep);
}
.booking__mail{
  font-family:var(--ff-display); font-weight:500; letter-spacing:-.01em;
  font-size:clamp(16px,1.7vw,20px); color:var(--ink); line-height:1.2;
  word-break:break-word;
}
.booking__foot{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding-top:14px; border-top:1px solid var(--line);
  transition:border-color .4s ease;
}
.booking__card:hover .booking__foot{ border-color:rgba(88,132,145,.4); }
.booking__role{
  font-family:var(--ff-mono); font-weight:400; text-transform:uppercase;
  letter-spacing:.16em; font-size:10.5px; color:var(--ink-soft);
}
.booking__arrow{
  flex:none; display:inline-flex; color:var(--teal);
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.booking__arrow svg{ width:18px; height:18px; }
.booking__card:hover .booking__arrow{ transform:translateX(6px); }

/* ============================ FOOTER ============================ */
.footer{ background:var(--ink-2); color:#fff; padding-block:clamp(56px,8vh,88px); border-top:1px solid var(--line-dk); position:relative; z-index:1; }
.footer__inner{ display:flex; flex-direction:column; align-items:center; gap:30px; text-align:center; }
.footer__logo{ width:min(360px,70vw); opacity:.96; }
.socials{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.social{
  width:48px; height:48px; border:1px solid var(--line-dk); border-radius:50%;
  display:grid; place-items:center; color:#fff; transition:all .2s ease;
}
.social svg{ width:19px; height:19px; }
.social:hover{ background:var(--teal); border-color:var(--teal); transform:translateY(-3px); }

.partners{
  display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:center; align-items:center;
  padding-top:6px;
}
.partners span{
  font-family:var(--ff-mono); font-weight:400; text-transform:uppercase; letter-spacing:.16em;
  font-size:11.5px; color:rgba(255,255,255,.42); white-space:nowrap;
}
.partners .dot{ color:rgba(255,255,255,.22); letter-spacing:0; }
.copyright{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.34); }

/* ============================ ANIMATION ============================ */
@keyframes rise{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
@keyframes pulse{ 0%,100%{ opacity:.35; transform:scaleY(.7); } 50%{ opacity:1; transform:scaleY(1); } }

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ============================ RESPONSIVE ============================ */
@media (max-width:860px){
  .puffs{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .music__head{ flex-direction:column; align-items:center; text-align:center; }
  .album__meta{ align-items:center; }
  .album__cover{ width:clamp(180px,52vw,240px); }
}
@media (max-width:640px){
  .date{ grid-template-columns:1fr auto; gap:6px 16px; padding:20px 6px; }
  .date__day{ grid-column:1 / -1; font-size:18px; }
  .date__info{ grid-row:2; }
  .date__cta{ grid-row:2; align-self:center; }
  .tix{ padding:10px 16px; font-size:12px; }
  .puffs, .puffs--2{ grid-template-columns:1fr; }
  .booking__grid{ grid-template-columns:1fr; }
  .hero{ padding-top:clamp(48px,9vh,90px); }
  .hero__inner{ gap:clamp(16px,3vh,26px); }
  .hero__rule{ width:clamp(140px,42vw,240px); }
  .hero__tagline{ letter-spacing:.32em; }
  .btn{ padding:13px 24px; font-size:13px; }
}