/* ───────── Red Swamp — underground zine ───────── */
:root{
  --bone:#f2efe6;
  --paper:#e8e4d6;
  --ink:#0a0a0a;
  --ink-2:#1a1a1a;
  --ash:#3a3a3a;
  --mute:#8a8578;
  --accent:#c8102e;
  --accent-ink:#0a0a0a;
  --display:'Anton', 'Oswald', Impact, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --body:'Inter', system-ui, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--ink);color:var(--bone);font-family:var(--body);-webkit-font-smoothing:antialiased}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ───── Paper / grain texture ───── */
.grain{position:fixed;inset:0;pointer-events:none;z-index:9999;mix-blend-mode:overlay;opacity:.18}
.grain svg{width:100%;height:100%}

.paper-bg{
  background-color:var(--bone);
  background-image:
    radial-gradient(circle at 30% 10%, rgba(0,0,0,.05), transparent 60%),
    radial-gradient(circle at 80% 90%, rgba(0,0,0,.06), transparent 50%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.012) 0 2px, transparent 2px 4px);
  color:var(--ink);
}

/* ───── Header ───── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;
  background:linear-gradient(180deg, rgba(10,10,10,.85), rgba(10,10,10,0));
  transition:background .3s, padding .3s;
}
.nav.solid{background:rgba(10,10,10,.92);padding:12px 28px;border-bottom:1px solid rgba(242,239,230,.08)}
.nav__logo{height:28px;display:flex;align-items:center;gap:10px}
.nav__logo img{height:100%;width:auto;filter:drop-shadow(0 0 .5px rgba(0,0,0,.5))}
.nav__logo .ws{display:none}
.nav__links{display:flex;gap:28px;align-items:center;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.16em}
.nav__links a{position:relative;padding:6px 2px;color:rgba(242,239,230,.78)}
.nav__links a:hover{color:var(--accent)}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__cta{
  font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.18em;
  background:var(--accent);color:#fff;padding:9px 14px;border-radius:0;
  transform:rotate(-1deg);box-shadow:3px 3px 0 var(--ink);
  transition:transform .15s, box-shadow .15s;
}
.nav__cta:hover{transform:rotate(-1deg) translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
@media (max-width:780px){.nav__links{display:none}}

/* ───── HERO — album release campaign ───── */
.hero{
  position:relative;min-height:100vh;overflow:hidden;
  background:var(--ink);
}
.hero__photo{
  position:absolute;inset:0;
  background-size:cover;background-position:center 30%;
  filter:contrast(1.15) saturate(.5) brightness(.55);
  will-change:transform;
}
.hero__photo::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at center, transparent 0%, rgba(10,10,10,.6) 70%, var(--ink) 100%),
    linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.3) 30%, rgba(10,10,10,.9) 100%);
}
.hero__halftone{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle, rgba(0,0,0,.5) 1px, transparent 1.5px);
  background-size:4px 4px;
  mix-blend-mode:multiply;opacity:.45;
}

.hero__content{
  position:relative;z-index:2;min-height:100vh;
  display:flex;align-items:flex-end;
  padding:120px 6vw 100px;
}
.hero__inner{display:flex;flex-direction:column;gap:18px;max-width:900px}
.hero__tag{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.3em;
  color:var(--accent);display:flex;align-items:center;gap:14px;
}
.hero__tag::before{content:"";flex:0 0 32px;height:1px;background:var(--accent)}
.hero__tag .blink{width:8px;height:8px;background:var(--accent);border-radius:50%;animation:blink 1.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:.2}50%{opacity:1}}

.hero__title{
  font-family:var(--display);
  font-size:clamp(72px, 16vw, 240px);
  line-height:.85;letter-spacing:.005em;text-transform:uppercase;
  color:var(--bone);
  text-shadow:0 0 60px rgba(0,0,0,.4);
  white-space:nowrap;
}
.hero__title .amp{color:var(--accent);font-style:normal;display:inline-block;transform:rotate(-3deg);margin:0 .05em;font-size:.85em}
.hero__title .stack{display:block}

.hero__lede{font-family:var(--mono);font-size:13px;line-height:1.7;color:rgba(242,239,230,.78);max-width:46ch;text-transform:uppercase;letter-spacing:.06em;margin-top:6px}
.hero__lede b{color:var(--bone)}

.hero__cta-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:8px}
.hero__cta{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.2em;
  background:var(--accent);color:#fff;padding:16px 22px;
  display:inline-flex;align-items:center;gap:10px;
  box-shadow:5px 5px 0 var(--bone);transition:transform .15s, box-shadow .15s;
}
.hero__cta:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--bone)}
.hero__cta--ghost{background:transparent;color:var(--bone);border:1px solid rgba(242,239,230,.4);box-shadow:none}
.hero__cta--ghost:hover{background:var(--bone);color:var(--ink);border-color:var(--bone);box-shadow:5px 5px 0 var(--accent)}

/* Right column — album cover */
.hero__right{display:flex;justify-content:center;align-items:center;position:relative}
.album-frame{position:relative;width:min(100%, 480px);aspect-ratio:1;transform:rotate(-2deg)}
.album-frame::before{
  content:"";position:absolute;inset:-18px;
  background:repeating-linear-gradient(45deg, var(--accent) 0 8px, var(--ink) 8px 16px);
  z-index:0;transform:rotate(2deg);
}
.album-frame__inner{position:absolute;inset:8px;background:var(--ink);box-shadow:0 30px 60px rgba(0,0,0,.6);overflow:hidden}
.album-frame__placeholder{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  padding:36px 32px;color:var(--bone);
  background:radial-gradient(ellipse at 30% 20%, #2a0a14 0%, #0a0a0a 70%);
}
.album-frame__placeholder::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle, rgba(255,255,255,.18) 1px, transparent 1.4px);
  background-size:4px 4px;mix-blend-mode:overlay;opacity:.5;
}
.album-frame__placeholder::after{
  content:"";position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;border:6px solid var(--accent);border-radius:50%;
  transform:translate(-50%,-50%);opacity:.85;
}
.album-frame__hd{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;display:flex;justify-content:space-between;color:rgba(242,239,230,.7);position:relative;z-index:2}
.album-frame__title{font-family:var(--display);font-size:clamp(38px, 5vw, 64px);line-height:.85;text-transform:uppercase;letter-spacing:.02em;position:relative;z-index:2;align-self:flex-end;text-align:right}
.album-frame__title em{font-style:normal;color:var(--accent)}

.album-frame__sticker{
  position:absolute;top:-18px;right:-18px;z-index:3;
  width:108px;height:108px;border-radius:50%;
  background:var(--accent);color:#fff;display:grid;place-items:center;text-align:center;
  font-family:var(--display);font-size:14px;letter-spacing:.05em;text-transform:uppercase;line-height:1.05;
  transform:rotate(8deg);box-shadow:4px 4px 0 var(--ink), 0 12px 30px rgba(0,0,0,.4);
  animation:wobble 6s ease-in-out infinite;
}
@keyframes wobble{0%,100%{transform:rotate(8deg)}50%{transform:rotate(12deg) scale(1.04)}}
.album-frame__sticker b{display:block;font-size:22px;letter-spacing:.04em}
.album-frame__sticker small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.2em;margin-top:2px;font-weight:400}

/* Countdown */
.countdown{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(242,239,230,.2);border:1px solid rgba(242,239,230,.2);
  margin-top:8px;max-width:480px;
}
.cd-cell{background:var(--ink);padding:14px 8px;text-align:center}
.cd-cell b{font-family:var(--display);font-size:42px;line-height:1;color:var(--bone);display:block}
.cd-cell.live b{color:var(--accent)}
.cd-cell span{font-family:var(--mono);font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:rgba(242,239,230,.55);display:block;margin-top:6px}

.hero__scroll{position:absolute;left:6vw;bottom:24px;font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(242,239,230,.5);writing-mode:vertical-rl;transform:rotate(180deg);z-index:3}
.hero__scroll::after{content:"";display:block;width:1px;height:40px;background:var(--accent);margin:8px auto 0;animation:scroll-pulse 2s ease-in-out infinite}
@keyframes scroll-pulse{0%,100%{transform:scaleY(.3);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ───── Hero treatment variants ───── */
.hero[data-treatment="duotone"] .hero__photo{filter:contrast(1.3) saturate(0) brightness(.55)}
.hero[data-treatment="duotone"] .hero__photo::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg, var(--accent) 0%, transparent 60%, var(--ink) 100%);
  mix-blend-mode:multiply;
}
.hero[data-treatment="poster"] .hero__photo{filter:grayscale(1) contrast(1.5) brightness(.4)}
.hero[data-treatment="poster"] .album-frame{transform:rotate(0deg)}
.hero[data-treatment="poster"] .hero__title{font-size:clamp(80px, 14vw, 220px)}
.hero[data-treatment="bleed"] .hero__photo::after{
  background:linear-gradient(180deg, rgba(10,10,10,.3) 0%, transparent 40%, rgba(10,10,10,.95) 100%);
}

/* ───── Release — dedicated Peace and Hate section ───── */
.release{
  position:relative;padding:120px 6vw;
  background:
    linear-gradient(180deg, var(--ink) 0%, #14080c 50%, var(--ink) 100%);
  border-top:1px solid rgba(242,239,230,.08);
  border-bottom:1px solid rgba(242,239,230,.08);
  overflow:hidden;
}
.release::before{
  content:"PEACE & HATE — PEACE & HATE — PEACE & HATE — PEACE & HATE — ";
  position:absolute;left:-5%;top:50%;transform:translateY(-50%) rotate(-90deg);transform-origin:left center;
  font-family:var(--display);font-size:clamp(120px,18vw,260px);
  color:rgba(200,16,46,.06);white-space:nowrap;text-transform:uppercase;letter-spacing:.02em;
  pointer-events:none;line-height:1;z-index:0;
}
.release__inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(280px, 460px) 1fr;gap:80px;align-items:center;
  max-width:1400px;margin:0 auto;
}
@media (max-width:900px){.release__inner{grid-template-columns:1fr;gap:50px}}
.release__cover-wrap{display:flex;justify-content:center;align-items:center}
.release__cover-wrap .album-frame img{width:100%;height:100%;object-fit:cover;display:block}
.release__text{display:flex;flex-direction:column;gap:22px}
.release__text .eyebrow{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.3em;
  color:var(--accent);display:flex;align-items:center;gap:14px;
}
.release__text .eyebrow .blink{width:8px;height:8px;background:var(--accent);border-radius:50%;animation:blink 1.4s ease-in-out infinite;display:inline-block}
.release__title{
  font-family:var(--display);font-size:clamp(72px,11vw,180px);
  line-height:.82;letter-spacing:.005em;text-transform:uppercase;
}
.release__title span{display:block}
.release__title .amp{font-style:normal;color:var(--accent);transform:rotate(-3deg);display:inline-block;font-size:.7em;line-height:1}
.release__lede{
  font-family:var(--mono);font-size:13px;line-height:1.7;color:rgba(242,239,230,.78);
  max-width:60ch;text-transform:uppercase;letter-spacing:.06em;
}
.release__cta-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:6px}

.release__live-banner{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:18px 22px;border:1px solid rgba(200,16,46,.5);
  background:linear-gradient(90deg, rgba(200,16,46,.18) 0%, transparent 100%);
  font-family:var(--mono);font-size:12px;color:rgba(242,239,230,.85);
  text-transform:uppercase;letter-spacing:.12em;line-height:1.5;
}
.release__live-pill{
  font-family:var(--display);font-size:20px;letter-spacing:.04em;
  background:var(--accent);color:#fff;padding:6px 14px;
  display:inline-flex;align-items:center;
}
.release.is-live .album-frame__sticker{animation:wobble 1.2s ease-in-out infinite}

/* ───── Marquee ───── */
.marquee{
  background:var(--accent);color:#fff;padding:14px 0;overflow:hidden;
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  position:relative;z-index:3;
}
.marquee__track{display:flex;gap:48px;white-space:nowrap;animation:slide 38s linear infinite;font-family:var(--display);font-size:34px;letter-spacing:.04em;text-transform:uppercase}
.marquee__track span{display:inline-flex;align-items:center;gap:48px}
.marquee__track span::after{content:"✦";color:rgba(255,255,255,.5);font-size:24px}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ───── Section base ───── */
section{position:relative;padding:90px 6vw}
.sect-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:50px;flex-wrap:wrap}
.sect-head h2{font-family:var(--display);font-size:clamp(56px, 9vw, 130px);line-height:.85;letter-spacing:.005em;text-transform:uppercase}
.sect-head h2 em{font-style:normal;color:var(--accent);display:inline-block;transform:rotate(-2deg)}
.sect-head .meta{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.2em;color:var(--mute);text-align:right}
.sect-head .meta b{color:var(--bone);display:block;font-size:13px;margin-bottom:2px}

.eyebrow{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.3em;color:var(--accent);display:flex;align-items:center;gap:12px;margin-bottom:12px}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--accent)}

/* ───── EVENTS — featured shows (optimized for few dates) ───── */
#events{background:var(--ink-2);border-top:1px solid rgba(242,239,230,.08)}
.events__list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.events__list{grid-template-columns:1fr}}

.event{
  position:relative;display:flex;flex-direction:column;
  background:var(--ink);border:1px solid rgba(242,239,230,.12);
  padding:28px 26px 26px;text-decoration:none;color:inherit;
  transition:transform .25s, box-shadow .25s, border-color .25s;
  overflow:hidden;
}
.event::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .35s;
}
.event:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--accent);border-color:var(--bone)}
.event:hover::before{transform:scaleX(1)}
.event__head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:24px}
.event__date{font-family:var(--display);font-size:64px;line-height:.85;letter-spacing:.01em}
.event__date small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--mute);margin-top:8px;font-weight:400}
.event__country{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--mute);text-transform:uppercase;border:1px solid rgba(242,239,230,.2);padding:5px 9px;align-self:flex-start}

.event__city{font-family:var(--display);font-size:32px;text-transform:uppercase;letter-spacing:.02em;line-height:1;margin-bottom:6px}
.event__venue{font-family:var(--mono);font-size:11px;color:rgba(242,239,230,.7);text-transform:uppercase;letter-spacing:.14em;line-height:1.6}
.event__info{font-family:var(--mono);font-size:10.5px;color:var(--accent);text-transform:uppercase;letter-spacing:.16em;line-height:1.5;margin-top:8px;padding-top:8px;border-top:1px dashed rgba(242,239,230,.12)}

.event__tag{
  position:absolute;top:14px;right:-30px;
  background:var(--accent);color:#fff;padding:5px 36px;
  font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.22em;
  transform:rotate(35deg);box-shadow:0 2px 6px rgba(0,0,0,.3);
}

.event__foot{margin-top:auto;padding-top:22px;border-top:1px dashed rgba(242,239,230,.18);display:flex;align-items:center;justify-content:space-between;gap:12px}
.event__status{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.2em;padding:5px 10px;border:1px solid currentColor;display:inline-block}
.event__status[data-s="on-sale"]{color:var(--accent)}
.event__status[data-s="few"]{color:#e8a317}
.event__status[data-s="free"]{color:#7fb069}
.event__status[data-s="sold-out"]{color:var(--mute);text-decoration:line-through}
.event__cta{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.2em;color:var(--bone);display:inline-flex;align-items:center;gap:6px;transition:color .15s}
.event__cta:hover{color:var(--accent)}
.event__cta[data-disabled]{color:var(--mute);cursor:not-allowed}

/* ───── VIDEOS ───── */
#videos{background:var(--ink)}
.videos{display:flex;flex-direction:column;gap:32px}
.video-feat{position:relative;aspect-ratio:16/9;background:#0a0a0a;border:1px solid rgba(242,239,230,.15);overflow:hidden;cursor:pointer;max-width:1100px;margin:0 auto;width:100%}
.video-feat iframe{width:100%;height:100%;border:0;display:block}
.video-feat__placeholder{position:absolute;inset:0;background-size:cover;background-position:center;display:flex;align-items:flex-end}
.video-feat__placeholder::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, transparent 50%, rgba(10,10,10,.85) 100%)}
.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:88px;height:88px;border-radius:50%;background:var(--accent);display:grid;place-items:center;z-index:2;transition:transform .2s}
.video-feat__placeholder:hover .video-play{transform:translate(-50%,-50%) scale(1.08)}
.video-play svg{width:36px;height:36px;fill:#fff;margin-left:4px}
.video-feat__cap{position:relative;z-index:2;padding:28px;color:var(--bone)}
.video-feat__cap h3{font-family:var(--display);font-size:clamp(28px, 4vw, 44px);text-transform:uppercase;letter-spacing:.02em;line-height:1}
.video-feat__cap p{font-family:var(--mono);font-size:11px;color:rgba(242,239,230,.7);text-transform:uppercase;letter-spacing:.18em;margin-top:8px}

.video-rail-wrap{position:relative}
.video-rail{
  display:flex;flex-direction:row;gap:18px;
  overflow-x:auto;overflow-y:hidden;
  padding:4px 4px 18px;scroll-snap-type:x mandatory;
  scrollbar-color:var(--accent) rgba(242,239,230,.08);scrollbar-width:thin;
}
.video-rail::-webkit-scrollbar{height:8px}
.video-rail::-webkit-scrollbar-track{background:rgba(242,239,230,.08)}
.video-rail::-webkit-scrollbar-thumb{background:var(--accent)}
.video-thumb{
  flex:0 0 260px;display:flex;flex-direction:column;gap:10px;
  cursor:pointer;transition:transform .2s;scroll-snap-align:start;
}
.video-thumb.is-active{outline:2px solid var(--accent);outline-offset:4px}
.video-thumb:hover{transform:translateY(-4px)}
.video-thumb__img{aspect-ratio:16/9;background-size:cover;background-position:center;background-color:#222;position:relative;border:1px solid rgba(242,239,230,.15)}
.video-thumb__img::after{content:"▶";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:18px;background:rgba(10,10,10,.35);opacity:0;transition:opacity .2s}
.video-thumb:hover .video-thumb__img::after,
.video-thumb.is-active .video-thumb__img::after{opacity:1}
.video-thumb__meta h4{font-family:var(--display);font-size:18px;text-transform:uppercase;letter-spacing:.02em;line-height:1.05}
.video-thumb__meta p{font-family:var(--mono);font-size:10px;color:var(--mute);text-transform:uppercase;letter-spacing:.18em;margin-top:4px}
.video-rail__hint{
  font-family:var(--mono);font-size:10px;color:var(--mute);
  text-transform:uppercase;letter-spacing:.22em;margin-top:8px;
  display:flex;align-items:center;gap:10px;
}
.video-rail__hint::before{content:"";flex:0 0 28px;height:1px;background:var(--mute)}

/* ───── ALBUMS ───── */
#albums{background:var(--paper);color:var(--ink);position:relative}
#albums::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle, rgba(0,0,0,.18) 1px, transparent 1.5px);
  background-size:3px 3px;opacity:.18;mix-blend-mode:multiply;
}
#albums .sect-head h2 em{color:var(--accent)}
#albums .eyebrow{color:var(--accent)}
#albums .sect-head .meta{color:rgba(0,0,0,.55)}
#albums .sect-head .meta b{color:var(--ink)}
.albums{display:grid;grid-template-columns:repeat(4, 1fr);gap:36px 28px}
.album.featured{grid-column:span 2;grid-row:span 2;position:relative}
.album.featured .album__art{transform:rotate(-1deg);box-shadow:10px 10px 0 var(--accent)}
.album.featured:hover .album__art{transform:rotate(0deg) translate(-4px,-4px);box-shadow:14px 14px 0 var(--ink)}
.album.featured .album__info h3{font-size:36px}
.album.featured .album__badge{
  position:absolute;top:-14px;left:-14px;z-index:5;
  background:var(--accent);color:#fff;padding:8px 14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  transform:rotate(-4deg);box-shadow:3px 3px 0 var(--ink);
}
.album__tracklist{
  margin-top:14px;padding-top:14px;border-top:1px dashed rgba(0,0,0,.3);
  display:grid;grid-template-columns:repeat(2,1fr);gap:4px 18px;
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:rgba(0,0,0,.7);
}
.album__tracklist li{list-style:none;display:flex;gap:8px;align-items:baseline;line-height:1.6}
.album__tracklist li b{color:var(--accent);font-weight:500;min-width:18px}
@media (max-width:980px){
  .album.featured{grid-column:span 2;grid-row:auto}
  .album.featured .album__art{aspect-ratio:1}
}
@media (max-width:520px){
  .album.featured{grid-column:span 1}
  .album__tracklist{grid-template-columns:1fr}
}
@media (max-width:980px){.albums{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.albums{grid-template-columns:1fr}}
.album{position:relative;cursor:pointer}
.album__art{
  aspect-ratio:1;position:relative;overflow:hidden;
  box-shadow:6px 6px 0 var(--ink);
  transition:transform .25s, box-shadow .25s;
  background:var(--ink);
}
.album:nth-child(odd) .album__art{transform:rotate(-1.2deg)}
.album:nth-child(even) .album__art{transform:rotate(1deg)}
.album:hover .album__art{transform:rotate(0deg) translate(-3px,-3px);box-shadow:9px 9px 0 var(--accent)}

/* placeholder cover styles */
.cover{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:18px;color:var(--bone);overflow:hidden}
.cover::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle, rgba(255,255,255,.15) 1px, transparent 1.2px);background-size:3px 3px;opacity:.4;mix-blend-mode:overlay}
.cover h4{font-family:var(--display);font-size:clamp(28px, 3vw, 42px);line-height:.88;text-transform:uppercase;letter-spacing:.02em;position:relative;z-index:2}
.cover .num{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;opacity:.7;position:relative;z-index:2}
.cover .yr{font-family:var(--display);font-size:80px;line-height:.8;align-self:flex-end;color:rgba(255,255,255,.12);position:absolute;bottom:8px;right:14px;z-index:1}
.cover[data-c="0"]{background:linear-gradient(135deg, #1a1a1a, #4a0a13)}
.cover[data-c="1"]{background:linear-gradient(135deg, #c8102e, #4a0a13)}
.cover[data-c="2"]{background:linear-gradient(180deg, #2a2a2a 0%, #2a2a2a 50%, #c8102e 50%, #c8102e 100%)}
.cover[data-c="3"]{background:radial-gradient(circle at 30% 30%, #c8102e, #0a0a0a 70%)}
.cover[data-c="4"]{background:#0a0a0a}
.cover[data-c="4"]::after{content:"";position:absolute;inset:30%;border:8px solid var(--accent);border-radius:50%}
.cover[data-c="5"]{background:linear-gradient(45deg, #0a0a0a 25%, #c8102e 25%, #c8102e 50%, #0a0a0a 50%, #0a0a0a 75%, #c8102e 75%);background-size:32px 32px}

.album__info{padding-top:18px}
.album__info h3{font-family:var(--display);font-size:22px;text-transform:uppercase;letter-spacing:.03em;line-height:1}
.album__info .row{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.16em;color:rgba(0,0,0,.55)}
.album__links{display:flex;gap:8px;margin-top:10px;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.18em}
.album__links a{padding:5px 9px;border:1px solid rgba(0,0,0,.4);transition:all .15s}
.album__links a:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}

/* ───── BIO ───── */
#bio{background:var(--ink);position:relative;overflow:hidden}
#bio::before{
  content:"RED SWAMP";position:absolute;left:-2vw;top:30%;
  font-family:var(--display);font-size:22vw;line-height:.8;
  color:rgba(242,239,230,.025);letter-spacing:-.01em;pointer-events:none;
  white-space:nowrap;
}
.bio-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:60px;align-items:start;position:relative;z-index:2}
@media (max-width:900px){.bio-grid{grid-template-columns:1fr;gap:40px}}
.bio-text h2{font-family:var(--display);font-size:clamp(56px, 9vw, 130px);line-height:.85;text-transform:uppercase}
.bio-text h2 em{font-style:normal;color:var(--accent);display:inline-block;transform:rotate(-2deg)}
.bio-text p{font-family:var(--body);font-size:16px;line-height:1.7;color:rgba(242,239,230,.78);margin-top:24px;max-width:52ch;text-wrap:pretty}
.bio-text p:first-of-type::first-letter{font-family:var(--display);font-size:64px;float:left;line-height:.85;padding:6px 12px 0 0;color:var(--accent)}

.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(242,239,230,.15);margin-top:36px;border:1px solid rgba(242,239,230,.15)}
.stat{padding:22px 18px;background:var(--ink)}
.stat b{display:block;font-family:var(--display);font-size:54px;line-height:.9;color:var(--accent)}
.stat span{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.2em;color:rgba(242,239,230,.7);margin-top:8px;display:block}

.lineup{position:relative}
.lineup__photo{
  position:relative;aspect-ratio:3/2;background-size:cover;background-position:center;
  filter:grayscale(.4) contrast(1.1);
  box-shadow:8px 8px 0 var(--accent);
  transform:rotate(-1.2deg);
}
.lineup__photo::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle, rgba(0,0,0,.25) 1px, transparent 1.5px);
  background-size:3px 3px;mix-blend-mode:multiply;opacity:.4;pointer-events:none;
}
.lineup__photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(10,10,10,.6) 100%);
}
.lineup__tape{position:absolute;top:-12px;left:30px;width:100px;height:22px;background:rgba(232,193,107,.7);box-shadow:1px 2px 6px rgba(0,0,0,.3);transform:rotate(-3deg);z-index:5}
.lineup__tape:nth-child(2){top:auto;bottom:-12px;left:auto;right:40px;transform:rotate(2deg);background:rgba(200,16,46,.55)}

.lineup__list{
  margin-top:24px;display:flex;flex-direction:column;
  border-top:1px solid rgba(242,239,230,.18);
}
.lineup__row{
  display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  padding:14px 4px;border-bottom:1px solid rgba(242,239,230,.12);
  transition:padding-left .25s, color .25s;
}
.lineup__row:hover{padding-left:14px;color:var(--accent)}
.lineup__row .num{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--mute)}
.lineup__row .name{font-family:var(--display);font-size:26px;text-transform:uppercase;letter-spacing:.02em;line-height:1}
.lineup__row .role{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(242,239,230,.65)}

/* ───── PRESS KIT ───── */
#press{background:var(--paper);color:var(--ink);padding:90px 6vw}
#press::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(45deg, rgba(0,0,0,.04) 0 2px, transparent 2px 14px);
  opacity:.4;
}
.press-card{
  background:var(--ink);color:var(--bone);
  display:grid;grid-template-columns:1fr 1.2fr;gap:0;
  position:relative;border:2px solid var(--ink);
  box-shadow:10px 10px 0 var(--accent);
}
@media (max-width:800px){.press-card{grid-template-columns:1fr}}
.press-card__art{position:relative;background:var(--ink-2);min-height:380px;overflow:hidden}
.press-gallery{position:absolute;left:14px;bottom:14px;right:14px;display:flex;gap:8px;z-index:3}
.press-gallery__thumb{flex:1;aspect-ratio:1;background-size:cover;background-position:center;border:2px solid var(--bone);box-shadow:2px 2px 0 var(--accent);filter:grayscale(.3) contrast(1.05)}
.press-card__art .stamp{
  position:absolute;top:24px;right:24px;
  border:3px solid var(--accent);color:var(--accent);
  padding:10px 16px;font-family:var(--display);font-size:18px;text-transform:uppercase;letter-spacing:.1em;
  transform:rotate(-12deg);opacity:.85;
}
.press-card__art img{width:100%;height:100%;object-fit:cover;filter:grayscale(.4) contrast(1.05)}
.press-card__body{padding:40px 36px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.press-card__body h3{font-family:var(--display);font-size:clamp(40px,5vw,68px);line-height:.9;text-transform:uppercase}
.press-card__body p{font-family:var(--mono);font-size:12px;line-height:1.7;color:rgba(242,239,230,.75);text-transform:uppercase;letter-spacing:.06em}
.press-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.press-tile{padding:14px 10px;border:1px solid rgba(242,239,230,.2);font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.16em;text-align:center;line-height:1.4}
.press-tile b{display:block;font-family:var(--display);font-size:22px;color:var(--accent);margin-bottom:6px;letter-spacing:.04em}
.press-cta{
  align-self:flex-start;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.2em;
  background:var(--accent);color:#fff;padding:14px 22px;display:inline-flex;align-items:center;gap:12px;
  transition:transform .15s, box-shadow .15s;box-shadow:4px 4px 0 var(--bone);
}
.press-cta:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--bone)}
.press-contact{font-family:var(--mono);font-size:11px;color:rgba(242,239,230,.6);text-transform:uppercase;letter-spacing:.16em;margin-top:6px}
.press-contact a{color:var(--accent);border-bottom:1px solid rgba(200,16,46,.4)}
.press-contact a:hover{color:var(--bone);border-color:var(--bone)}

/* ───── FOOTER ───── */
footer{background:var(--ink);color:var(--bone);padding:80px 6vw 30px;border-top:1px solid rgba(242,239,230,.1)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;align-items:start}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr}}
.foot-logo img{height:32px}
.foot-logo p{font-family:var(--mono);font-size:11px;color:var(--mute);text-transform:uppercase;letter-spacing:.18em;margin-top:14px;line-height:1.7}
.foot-col h5{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.3em;color:var(--accent);margin-bottom:14px}
.foot-col a{display:block;font-family:var(--body);font-size:14px;padding:5px 0;color:rgba(242,239,230,.78)}
.foot-col a:hover{color:var(--accent)}
.foot-base{margin-top:60px;padding-top:24px;border-top:1px solid rgba(242,239,230,.1);display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--mute);flex-wrap:wrap;gap:10px}

/* ───── Reveal ───── */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s, transform .8s}
.reveal.in{opacity:1;transform:none}

/* ───── Stamps + tape decorations ───── */
.stamp-tag{
  display:inline-block;font-family:var(--display);font-size:14px;letter-spacing:.08em;
  border:2px solid currentColor;padding:4px 10px;color:var(--accent);
  transform:rotate(-3deg);text-transform:uppercase;
}

/* ───── Mobile menu ───── */
.nav__burger{
  display:none; width:42px; height:42px; flex-direction:column; justify-content:center; align-items:center; gap:6px;
  background:transparent; border:1px solid rgba(242,239,230,.25); cursor:pointer; padding:0; transition:border-color .15s, background .15s;
}
.nav__burger span{
  display:block; width:22px; height:2px; background:var(--bone); transition:transform .25s, opacity .2s;
}
.nav__burger:hover{ border-color:var(--accent) }
.nav__burger.is-open span:nth-child(1){ transform:translateY(8px) rotate(45deg) }
.nav__burger.is-open span:nth-child(2){ opacity:0 }
.nav__burger.is-open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg) }

.mobile-menu{
  position:fixed; inset:0; z-index:90; background:rgba(10,10,10,.97);
  display:flex; flex-direction:column; align-items:center;
  justify-content:flex-start;
  gap:2px;
  padding:88px 20px 32px;
  opacity:0; pointer-events:none; transform:translateY(-12px);
  transition:opacity .2s ease, transform .25s ease;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.mobile-menu.is-open{ opacity:1; pointer-events:auto; transform:none }
.mobile-menu a{
  font-family:var(--display); font-size:26px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--bone); text-decoration:none;
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:52px; padding:8px 16px;
  transition:color .15s, background .15s;
}
.mobile-menu a:hover, .mobile-menu a:active{
  color:var(--accent);
  background:rgba(200,16,46,.07);
}
.mobile-menu__cta{
  margin-top:18px !important;
  padding:18px 24px !important;
  font-family:var(--mono) !important; font-size:13px !important;
  background:var(--accent); color:#fff !important;
  box-shadow:5px 5px 0 var(--bone);
  letter-spacing:.2em !important;
  width:auto !important;
  flex:0 0 auto;
}
.mobile-menu__cta:hover, .mobile-menu__cta:active{
  background:var(--accent) !important;
  color:#fff !important;
  transform:translate(-2px,-2px);
  box-shadow:7px 7px 0 var(--bone);
}
body.menu-open{ overflow:hidden }

/* On short viewports (landscape phones, smaller devices) shrink the
   typography so every item fits without needing to scroll. The menu
   is also scrollable if it doesn't. */
@media (max-height:680px){
  .mobile-menu{ padding-top:74px }
  .mobile-menu a{ font-size:22px; min-height:46px; padding:6px 12px }
  .mobile-menu__cta{ padding:14px 22px !important; font-size:12px !important }
}
@media (max-height:520px){
  .mobile-menu{ padding-top:64px; padding-bottom:20px }
  .mobile-menu a{ font-size:18px; min-height:40px }
}

@media (max-width:780px){
  .nav__burger{ display:flex }
  .nav__cta{ display:none }
}

/* ───── HERO mobile re-crop ─────
   On phones, ditch the cropped overlay layout — show the full photo
   in a 4:5 aspect at the top, then text below it. */
@media (max-width:780px){
  .hero{ min-height:auto; }
  .hero__photo{
    position:relative; inset:auto;
    aspect-ratio: 4/5; width:100%;
    background-position:center center;
    transform:none !important;       /* disable parallax on mobile */
    will-change:auto;
    filter:contrast(1.1) saturate(.7) brightness(.7);
  }
  .hero__photo::after{
    background:linear-gradient(180deg, rgba(10,10,10,.15) 0%, rgba(10,10,10,.55) 70%, var(--ink) 100%);
  }
  .hero__halftone{ height:80vh; }
  .hero__content{
    position:relative; min-height:auto;
    padding:30px 6vw 60px;
  }
  .hero__inner{ gap:14px; }
  .hero__tag{ font-size:10px; }
  .hero__title{
    font-size: clamp(56px, 18vw, 96px);
    white-space:normal;
    line-height:.88;
  }
  .hero__lede{ font-size:12px; }
  .hero__cta-row{ gap:10px; }
  .hero__cta{ padding:12px 18px; font-size:10px }
  .hero__scroll{ display:none }
}

/* ───── Bio "Read full story" CTA ───── */
.bio-readmore{
  margin-top:18px !important;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.bio-readmore a{
  color:var(--accent);
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
  transition:color .15s, border-color .15s;
}
.bio-readmore a:hover{ color:var(--bone); border-color:var(--bone) }

/* ───── LISTEN — Spotify embed strip ───── */
.listen{
  position:relative;padding:90px 6vw;background:var(--ink);
  border-top:1px solid rgba(242,239,230,.08);
  border-bottom:1px solid rgba(242,239,230,.08);
  overflow:hidden;
}
.listen::before{
  content:"LISTEN — LISTEN — LISTEN — LISTEN — ";
  position:absolute;left:-3%;top:50%;transform:translateY(-50%) rotate(-90deg);transform-origin:left center;
  font-family:var(--display);font-size:clamp(120px,16vw,220px);
  color:rgba(200,16,46,.05);white-space:nowrap;text-transform:uppercase;letter-spacing:.02em;
  pointer-events:none;line-height:1;z-index:0;
}
.listen__inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:center;
  max-width:1400px;margin:0 auto;
}
.listen__copy{display:flex;flex-direction:column;gap:18px}
.listen__copy h2{
  font-family:var(--display);font-size:clamp(56px,8vw,120px);
  line-height:.85;letter-spacing:.005em;text-transform:uppercase;
}
.listen__copy h2 em{font-style:normal;color:var(--accent);display:inline-block;transform:rotate(-2deg)}
.listen__sub{
  font-family:var(--mono);font-size:13px;line-height:1.7;color:rgba(242,239,230,.78);
  text-transform:uppercase;letter-spacing:.06em;max-width:46ch;
}

.listen__embed{position:relative}
.listen__embed iframe{
  position:relative;z-index:2;width:100%;display:block;
  border:0;border-radius:12px;
  box-shadow:8px 8px 0 var(--accent), 0 30px 60px rgba(0,0,0,.5);
}
.listen__frame-deco{
  position:absolute;inset:-12px -12px 0 0;
  background:repeating-linear-gradient(45deg, var(--accent) 0 6px, var(--ink) 6px 12px);
  z-index:1;transform:rotate(1deg);
  border-radius:14px;opacity:.6;
}

@media (max-width:900px){
  .listen__inner{grid-template-columns:1fr;gap:40px}
  .listen__embed iframe{box-shadow:5px 5px 0 var(--accent)}
}

/* ───── PHOTOS — Instagram-style grid ───── */
#photos{background:var(--ink);position:relative}
.photos-grid{
  display:grid;grid-template-columns:repeat(4, 1fr);gap:6px;
  max-width:1400px;margin:0 auto;
}
.photo-tile{
  position:relative;display:block;aspect-ratio:1;overflow:hidden;
  background:var(--ink-2);text-decoration:none;color:inherit;
}
.photo-tile img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease, filter .25s;
  filter:contrast(1.05) saturate(.9);
}
.photo-tile:hover img{transform:scale(1.06);filter:contrast(1.15) saturate(1)}

.photo-tile__cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:14px 14px 12px;
  background:linear-gradient(180deg, transparent 0%, rgba(10,10,10,.92) 100%);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;line-height:1.5;
  color:rgba(242,239,230,.92);
  text-transform:uppercase;
  opacity:0;transform:translateY(6px);transition:opacity .25s, transform .25s;
}
.photo-tile:hover .photo-tile__cap{opacity:1;transform:none}
.photo-tile__cap p{margin:0}

.photo-tile__badge{
  position:absolute;top:10px;right:10px;
  background:var(--accent);color:#fff;
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;
  padding:3px 8px;
  box-shadow:2px 2px 0 var(--ink);
}

@media (max-width:900px){.photos-grid{grid-template-columns:repeat(3, 1fr)}}
@media (max-width:600px){.photos-grid{grid-template-columns:repeat(2, 1fr);gap:4px}}

/* ───── Event card with cover image ─────
   Goal: cover gives mood/colour, text always wins.
   Strategy: heavy desaturation + dimming on the image itself,
             solid full-card overlay for contrast,
             text-shadow on every line so it stands out regardless
             of what colour the cover happens to be. */
.event{position:relative; isolation:isolate}
.event__cover{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  filter:grayscale(.65) contrast(1.05) saturate(.6) brightness(.32);
  opacity:.45;
  transition:opacity .3s, filter .3s;
}
.event--has-cover::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(10,10,10,.55) 0%,
    rgba(10,10,10,.45) 35%,
    rgba(10,10,10,.85) 80%,
    rgba(10,10,10,.95) 100%);
}
.event--has-cover > *:not(.event__cover){ position:relative; z-index:2 }
.event--has-cover:hover .event__cover{
  opacity:.6;
  filter:grayscale(.35) contrast(1.1) saturate(.85) brightness(.45);
}

/* Tighten readability — every text line on a cover gets a small
   drop-shadow so it works against ANY underlying colour. */
.event--has-cover .event__date,
.event--has-cover .event__date small,
.event--has-cover .event__city,
.event--has-cover .event__venue,
.event--has-cover .event__country,
.event--has-cover .event__cta{
  text-shadow:0 1px 4px rgba(0,0,0,.85);
}

/* The accent-red "info" line is the worst offender on red covers —
   give it a translucent background pill so the colour reads as
   "label" rather than "text fighting the photo". */
.event--has-cover .event__info{
  display:inline-block;
  background:rgba(10,10,10,.65);
  padding:6px 10px;
  border-left:2px solid var(--accent);
  border-top:none;
  margin-top:8px;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

/* ───────────────────────────────────
   TOUR HISTORY PAGE  (/tour)
   ─────────────────────────────────── */

.tour-hero{
  position:relative; min-height:50vh;
  display:flex; align-items:flex-end;
  padding:140px 6vw 60px;
  border-bottom:1px solid rgba(242,239,230,.12);
  overflow:hidden;
}
.tour-hero__photo{
  position:absolute; inset:0;
  background-size:cover; background-position:center 30%;
  filter:grayscale(.4) contrast(1.1) brightness(.4);
}
.tour-hero__photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,.5) 0%, rgba(10,10,10,.7) 50%, var(--ink) 100%);
}
.tour-hero__halftone{
  position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle, rgba(0,0,0,.4) 1px, transparent 1.5px);
  background-size:4px 4px; mix-blend-mode:multiply; opacity:.4;
}
.tour-hero__inner{ position:relative; z-index:2; max-width:1400px; margin:0 auto; width:100% }
.tour-hero__eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--accent); margin-bottom:18px;
  display:flex; align-items:center; gap:14px;
}
.tour-hero__eyebrow .blink{
  width:8px; height:8px; background:var(--accent); border-radius:50%;
  animation:blink 1.4s ease-in-out infinite;
}
.tour-hero__title{
  font-family:var(--display); font-size:clamp(72px, 14vw, 200px);
  line-height:.85; letter-spacing:.005em; text-transform:uppercase;
  color:var(--bone); margin:0;
}
.tour-hero__title em{
  font-style:normal; color:var(--accent);
  display:inline-block; transform:rotate(-2deg);
}
.tour-hero__sub{
  font-family:var(--mono); font-size:13px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(242,239,230,.7);
  margin-top:24px; max-width:60ch; line-height:1.7;
}
.tour-hero__sub a{
  color:var(--accent); border-bottom:1px solid rgba(200,16,46,.4);
}
.tour-hero__sub a:hover{ color:var(--bone); border-color:var(--bone) }

/* Year sections */
.tour-section{ padding:80px 6vw; border-top:1px solid rgba(242,239,230,.08) }
.tour-section:first-of-type{ border-top:none }
.tour-section .sect-head{ margin-bottom:36px }
.tour-section .events__list{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
@media (max-width:900px){ .tour-section .events__list{ grid-template-columns:1fr } }
@media (max-width:1200px) and (min-width:901px){ .tour-section .events__list{ grid-template-columns:repeat(2,1fr) } }

.tour-year{
  font-family:var(--display); font-size:clamp(56px,9vw,130px);
  line-height:.85; letter-spacing:.01em; color:var(--bone);
  margin:0;
}
.tour-section--past .tour-year{
  color:rgba(242,239,230,.85);
  text-shadow: 0 0 60px rgba(0,0,0,.4);
}

/* Year jump strip in the section header meta */
.tour-year-jump{
  display:flex; flex-wrap:wrap; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
}
.tour-year-jump a{
  padding:4px 10px; border:1px solid rgba(242,239,230,.18);
  color:rgba(242,239,230,.65); transition:color .15s, border-color .15s;
}
.tour-year-jump a:hover{ color:var(--accent); border-color:var(--accent) }
.tour-year-jump a.is-current{ color:var(--bone); border-color:var(--bone) }

/* Past event cards — desaturated, but still clickable */
.event--past{
  filter:grayscale(.65) brightness(.92);
  opacity:.85;
  transition:filter .25s, opacity .25s, transform .25s, box-shadow .25s, border-color .25s;
}
.event--past:hover{
  filter:grayscale(.2) brightness(1);
  opacity:1;
}
.event--past .event__cover{ filter:grayscale(.95) contrast(1) saturate(.3) brightness(.3); opacity:.4 }
.event__status[data-s="past"]{
  color:rgba(242,239,230,.5);
  border-color:rgba(242,239,230,.18);
}

/* "see full tour history" inline link in homepage Tour section meta */
.meta__link{
  display:inline-block; margin-top:8px;
  color:var(--accent);
  border-bottom:1px solid rgba(200,16,46,.4);
  padding-bottom:1px;
  transition:color .15s, border-color .15s;
}
.meta__link:hover{ color:var(--bone); border-color:var(--bone) }

/* Tour-section .meta block — center-align contents on smaller screens */
.tour-section .sect-head .meta{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); text-align:right }

@media (max-width:780px){
  /* Hero — collapse the desktop double-padding onto the inner only,
     so we have a single source of truth for horizontal spacing. */
  .tour-hero{
    padding:0;
    min-height:auto;
  }
  .tour-hero__inner{
    padding:88px 20px 36px;   /* top clears the fixed nav; sides stay sane */
    max-width:none;
  }
  .tour-hero__eyebrow{
    font-size:10px; letter-spacing:.18em;
    margin-bottom:12px; gap:10px; flex-wrap:wrap;
  }
  /* Hide the leading red bar on tiny screens — it eats space without
     adding meaning when the eyebrow already starts with the blink dot. */
  .tour-hero__eyebrow::before{ display:none }
  .tour-hero__title{
    font-size:clamp(38px, 11vw, 72px);
    line-height:.92;
    letter-spacing:-.01em;
    word-break:break-word;
  }
  .tour-hero__sub{
    font-size:11px; letter-spacing:.12em;
    margin-top:16px; line-height:1.6;
    max-width:none;
  }

  /* Sections — tighter gaps + reset section header to stack cleanly */
  .tour-section{ padding:32px 5vw }
  .tour-section:first-of-type{ padding-top:24px }
  .tour-section .sect-head{
    flex-direction:column; align-items:flex-start;
    gap:14px; margin-bottom:20px;
  }
  .tour-section .sect-head .meta{
    text-align:left;
  }

  /* Year heading + count line */
  .tour-section h2,
  .tour-year{
    font-size:clamp(44px, 14vw, 88px);
    line-height:.88;
  }
  /* Section-level eyebrow ("3 UPCOMING" / "5 SHOWS") — smaller on mobile */
  .tour-section .eyebrow{
    font-size:10px; letter-spacing:.2em;
  }

  /* Year-jump strip — horizontal scroll on tiny screens, bigger tap zones */
  .tour-year-jump{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    flex-wrap:nowrap;
    padding-bottom:6px;
    gap:6px;
  }
  .tour-year-jump a{
    flex:0 0 auto;
    padding:8px 14px;
    min-height:36px;
    display:inline-flex;
    align-items:center;
  }

  /* Event cards inside tour sections — tighten inner padding */
  .tour-section .event{ padding:22px 20px 20px }
  .tour-section .events__list{ gap:14px }
}

/* ───────────────────────────────────
   TOUR PAGE: sticky year + view toolbar
   ─────────────────────────────────── */
.tour-toolbar{
  position:sticky; top:0; z-index:50;
  background:rgba(10,10,10,.94);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid rgba(242,239,230,.08);
  border-bottom:1px solid rgba(242,239,230,.12);
  padding:14px 6vw;
}
.tour-toolbar__inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:18px;
  max-width:1400px; margin:0 auto;
}
.tour-toolbar__label{
  font-family:var(--mono); font-size:10px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--mute); padding-right:6px;
}
.tour-toolbar__years{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  flex:1 1 auto; max-width:100%;
}
.tour-toolbar__years a{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(242,239,230,.7);
  padding:6px 10px; border:1px solid rgba(242,239,230,.18);
  text-decoration:none;
  transition:color .15s, border-color .15s, background .15s;
}
.tour-toolbar__years a:hover{ color:var(--accent); border-color:var(--accent) }
.tour-toolbar__years a.is-active{
  color:var(--bone); background:var(--accent); border-color:var(--accent);
}
.tour-toolbar__view{ display:flex; align-items:center; gap:0; flex:0 0 auto }
.tour-toolbar__view-btn{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(242,239,230,.7);
  padding:8px 12px; border:1px solid rgba(242,239,230,.18);
  text-decoration:none;
  transition:color .15s, border-color .15s, background .15s;
}
.tour-toolbar__view-btn + .tour-toolbar__view-btn{ border-left:none }
.tour-toolbar__view-btn:first-of-type{ margin-left:6px }
.tour-toolbar__view-btn:hover{ color:var(--accent); border-color:var(--accent) }
.tour-toolbar__view-btn.is-active{
  color:var(--bone); background:var(--accent); border-color:var(--accent);
}

/* ───── Tour LIST view ─────
   Higher-specificity selector beats `.tour-section .events__list`
   (which uses `display: grid` for the 3-column card layout). */
.tour-section .events__list--list,
.events__list--list{
  display:flex !important;
  flex-direction:column;
  grid-template-columns:none !important;
  gap:0;
  border-top:1px solid rgba(242,239,230,.08);
}
.event-row{
  display:grid;
  grid-template-columns:88px 1fr auto 110px;
  gap:24px; align-items:center;
  padding:18px 4px;
  border-bottom:1px solid rgba(242,239,230,.06);
  text-decoration:none; color:inherit;
  transition:padding .2s, background .2s, border-color .2s;
}
.event-row:hover{
  padding-left:14px;
  background:linear-gradient(90deg, rgba(200,16,46,.06) 0%, transparent 60%);
  border-bottom-color:rgba(200,16,46,.3);
}
.event-row__date{ display:flex; flex-direction:column; align-items:flex-start; line-height:1 }
.event-row__date b{
  font-family:var(--display); font-size:34px; color:var(--bone);
  letter-spacing:.01em; line-height:.95;
}
.event-row__date span{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  color:var(--accent); margin-top:4px;
}
.event-row__date em{
  font-family:var(--mono); font-size:9px; letter-spacing:.22em;
  color:var(--mute); margin-top:2px; font-style:normal;
}
.event-row__main{ min-width:0 }
.event-row__city{
  font-family:var(--display); font-size:22px; text-transform:uppercase;
  letter-spacing:.02em; line-height:1;
}
.event-row__venue{
  font-family:var(--mono); font-size:11.5px; color:rgba(242,239,230,.85);
  text-transform:uppercase; letter-spacing:.14em; line-height:1.6; margin-top:4px;
}
.event-row__info{
  font-family:var(--mono); font-size:11px; color:#ff5266;
  text-transform:uppercase; letter-spacing:.14em; line-height:1.5; margin-top:4px;
}
.event-row__meta{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(242,239,230,.7);
}
.event-row__tag{
  background:var(--accent); color:#fff;
  padding:3px 8px; font-size:9px; letter-spacing:.2em;
}
.event-row__country{
  border:1px solid rgba(242,239,230,.2);
  padding:3px 7px; color:var(--mute);
}
.event-row__status{ padding:3px 8px; border:1px solid currentColor }
.event-row__status[data-s="on-sale"]{ color:#7fb069 }
.event-row__status[data-s="few"]{ color:#e8a317 }
.event-row__status[data-s="free"]{ color:#7fb069 }
.event-row__status[data-s="sold-out"]{ color:var(--mute); text-decoration:line-through }
.event-row__status[data-s="past"]{ color:rgba(242,239,230,.4); border-color:rgba(242,239,230,.18) }
.event-row__cta{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; text-align:right;
  color:rgba(242,239,230,.85);
  white-space:nowrap;
  transition:color .15s;
}
.event-row:hover .event-row__cta{ color:var(--accent) }

/* Past rows — keep them visually quieter than upcoming, but legible.
   Was at 0.78/0.7 opacity which compounded into illegible greys. */
.event-row--past{ opacity:1 }
.event-row--past .event-row__date b{ color:rgba(242,239,230,.92) }
.event-row--past .event-row__date span{ color:rgba(242,239,230,.55) }
.event-row--past .event-row__city{ color:rgba(242,239,230,.92) }
.event-row--past .event-row__venue{ color:rgba(242,239,230,.7) }
.event-row--past .event-row__info{ color:rgba(242,239,230,.6); opacity:.8 }
.event-row--past:hover .event-row__date span{ color:var(--accent) }
.event-row--past:hover .event-row__info{ color:#ff5266; opacity:1 }

/* ───── Mobile pass for toolbar + list ───── */
@media (max-width:780px){
  .tour-toolbar{ padding:10px 5vw }
  .tour-toolbar__inner{ gap:10px; flex-direction:column; align-items:stretch }
  .tour-toolbar__years{
    flex-wrap:nowrap; overflow-x:auto;
    -webkit-overflow-scrolling:touch; padding-bottom:4px; gap:5px;
  }
  .tour-toolbar__years a{
    flex:0 0 auto; padding:6px 10px; font-size:10px; letter-spacing:.14em;
  }
  .tour-toolbar__label{ font-size:9px; letter-spacing:.22em; padding-right:4px }
  .tour-toolbar__view{ justify-content:flex-start }
  .tour-toolbar__view-btn{ padding:7px 11px; font-size:10px; letter-spacing:.14em }
  .tour-toolbar__view-btn:first-of-type{ margin-left:0 }

  .event-row{
    grid-template-columns:64px 1fr;
    grid-template-rows:auto auto;
    gap:6px 14px;
    padding:14px 2px;
  }
  .event-row__date b{ font-size:26px }
  .event-row__date span{ font-size:10px; letter-spacing:.18em }
  .event-row__date em{ font-size:8px }
  .event-row__city{ font-size:18px }
  .event-row__venue{ font-size:10px }
  .event-row__info{ font-size:9.5px }
  .event-row__meta{
    grid-column:1 / -1;
    gap:8px; flex-wrap:wrap;
  }
  .event-row__cta{
    grid-column:2; grid-row:1;
    text-align:right; align-self:start; font-size:10px;
  }
  .event-row:hover{ padding-left:6px }
}

/* ───────────────────────────────────────
   PREMIERE BANNER
   Above the Release section, only when a
   single is premiering (set in admin).
   Underground-broadcast aesthetic: blacked-
   out background of the YouTube thumbnail,
   halftone overlay, oversized song title,
   live ticker, locked-thumb with stamp.
   ─────────────────────────────────────── */
.premiere{
  position:relative;
  padding:90px 6vw 0;
  background:var(--ink);
  border-top:1px solid rgba(242,239,230,.08);
  border-bottom:1px solid rgba(242,239,230,.08);
  overflow:hidden;
  isolation:isolate;
}
.premiere__bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  filter:grayscale(.85) contrast(1.1) brightness(.22) blur(2px);
  opacity:.55;
  transform:scale(1.05);
}
.premiere__bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(200,16,46,.15) 0%, transparent 60%),
    linear-gradient(180deg, rgba(10,10,10,.3) 0%, rgba(10,10,10,.92) 100%);
}
.premiere__halftone{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:radial-gradient(circle, rgba(0,0,0,.45) 1px, transparent 1.5px);
  background-size:4px 4px; mix-blend-mode:multiply; opacity:.4;
}
.premiere__inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1.05fr; gap:60px; align-items:center;
  max-width:1400px; margin:0 auto; padding-bottom:60px;
}
@media (max-width:900px){
  .premiere__inner{ grid-template-columns:1fr; gap:32px; padding-bottom:40px }
  .premiere{ padding:60px 5vw 0 }
}

.premiere__copy{ display:flex; flex-direction:column; gap:18px }

/* "LIVE IN 02:59:42 · WORLD PREMIERE" eyebrow */
.premiere__eyebrow{
  display:inline-flex; align-items:center; gap:14px;
  align-self:flex-start;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.28em;
  text-transform:uppercase; color:#fff;
  padding:9px 14px 9px 38px;
  background:var(--accent);
  position:relative;
  box-shadow:4px 4px 0 var(--ink);
}
.premiere__eyebrow .premiere__dot{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:10px; height:10px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.7);
  animation:premiere-pulse 1.4s cubic-bezier(.4,0,.6,1) infinite;
}
.premiere__eyebrow b{ font-weight:600; font-variant-numeric:tabular-nums; }
@keyframes premiere-pulse{
  0%   { box-shadow:0 0 0 0 rgba(255,255,255,.85) }
  70%  { box-shadow:0 0 0 12px rgba(255,255,255,0) }
  100% { box-shadow:0 0 0 0 rgba(255,255,255,0) }
}

.premiere__title{
  font-family:var(--display); font-size:clamp(72px,12vw,180px);
  line-height:.85; letter-spacing:.005em; text-transform:uppercase;
  color:var(--bone);
  margin:6px 0 0;
  text-shadow:0 0 60px rgba(0,0,0,.6);
}
.premiere__title span{
  display:inline-block; margin-right:.18em;
  transition:transform .25s;
}
.premiere__title span:nth-child(2n){ transform:translateY(-3px) rotate(-.6deg) }
.premiere__title span:nth-child(3n){ transform:translateY(2px) rotate(.4deg) }
.premiere:hover .premiere__title span{ transform:translateY(-1px) rotate(0) }

.premiere__sub{
  font-family:var(--mono); font-size:13px; line-height:1.7;
  color:rgba(242,239,230,.78); text-transform:uppercase; letter-spacing:.06em;
  max-width:50ch; margin-top:2px;
}

.premiere__cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:8px }
.premiere__cta{
  font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.2em;
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 22px;
  text-decoration:none;
  transition:transform .15s, box-shadow .15s;
}
.premiere__cta--primary{
  background:var(--accent); color:#fff;
  box-shadow:5px 5px 0 var(--bone);
}
.premiere__cta--primary:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--bone) }
.premiere__cta--ghost{
  background:transparent; color:var(--bone);
  border:1px solid rgba(242,239,230,.4);
}
.premiere__cta--ghost:hover{ background:var(--bone); color:var(--ink); border-color:var(--bone); box-shadow:5px 5px 0 var(--accent) }

/* ── Right column: thumbnail / embed frame ── */
.premiere__player{ display:flex; justify-content:center; align-items:center; position:relative }
.premiere__frame{
  position:relative; width:100%;
  aspect-ratio:16/9;
  background:#000;
  border:2px solid rgba(242,239,230,.18);
  box-shadow:10px 10px 0 var(--accent), 0 30px 60px rgba(0,0,0,.6);
  transform:rotate(-1deg);
  transition:transform .3s, box-shadow .3s;
  overflow:hidden;
}
.premiere__frame:hover{
  transform:rotate(0deg) translate(-3px,-3px);
  box-shadow:14px 14px 0 var(--accent), 0 30px 60px rgba(0,0,0,.6);
}
.premiere__frame iframe,
.premiere__frame img{
  width:100%; height:100%; border:0; display:block; object-fit:cover;
}
.premiere__frame--locked{ display:block; text-decoration:none; color:inherit }
.premiere__frame--locked img{ filter:grayscale(.4) contrast(1.1) brightness(.55) }
.premiere__frame--locked::before{
  content:""; position:absolute; inset:0; z-index:1;
  background-image:radial-gradient(circle, rgba(0,0,0,.5) 1px, transparent 1.5px);
  background-size:3px 3px; mix-blend-mode:multiply; opacity:.55;
  pointer-events:none;
}
.premiere__frame--locked::after{
  content:"▶"; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:88px; height:88px; border-radius:50%;
  background:var(--accent); color:#fff;
  display:grid; place-items:center; font-size:32px; padding-left:6px;
  box-shadow:6px 6px 0 var(--ink), 0 12px 30px rgba(0,0,0,.5);
  z-index:2; opacity:.92;
  transition:transform .25s;
}
.premiere__frame--locked:hover::after{ transform:translate(-50%,-50%) scale(1.06) }

/* "PREMIERING 02:59:42" caption pinned to the bottom of the locked thumb */
.premiere__locked-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; align-items:baseline; justify-content:center; gap:12px;
  padding:14px 16px;
  background:linear-gradient(180deg, transparent 0%, rgba(10,10,10,.95) 100%);
  font-family:var(--mono); font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(242,239,230,.85);
}
.premiere__locked-cap b{
  font-family:var(--display); font-size:32px; letter-spacing:.04em;
  color:var(--bone);
  font-variant-numeric:tabular-nums;
}

/* Wobbling sticker — top-right corner of the frame */
.premiere__sticker{
  position:absolute; top:-22px; right:-22px; z-index:4;
  width:108px; height:108px; border-radius:50%;
  background:var(--accent); color:#fff;
  display:grid; place-items:center; text-align:center;
  font-family:var(--display); font-size:18px; letter-spacing:.05em; text-transform:uppercase;
  line-height:1; transform:rotate(8deg);
  box-shadow:4px 4px 0 var(--ink), 0 12px 30px rgba(0,0,0,.4);
  animation:premiere-wobble 6s ease-in-out infinite;
}
.premiere__sticker b{ display:block; font-size:24px; letter-spacing:.03em }
.premiere__sticker small{
  display:block; font-family:var(--mono); font-size:9px; letter-spacing:.28em;
  margin-top:4px; font-weight:400;
}
.premiere__sticker--soon{ background:var(--bone); color:var(--ink) }
.premiere__sticker--soon b{ color:var(--ink) }
@keyframes premiere-wobble{
  0%,100% { transform:rotate(8deg) }
  50%     { transform:rotate(12deg) scale(1.06) }
}
.premiere--live .premiere__sticker{ animation:premiere-wobble 1.4s ease-in-out infinite }

/* ── Marquee strip at the bottom ── */
.premiere__marquee{
  position:relative; z-index:2;
  border-top:2px solid var(--ink);
  background:var(--accent); color:#fff;
  padding:12px 0; overflow:hidden;
  margin-left:-6vw; margin-right:-6vw;
}
.premiere__marquee-track{
  display:flex; gap:36px; white-space:nowrap;
  animation:premiere-slide 28s linear infinite;
  font-family:var(--display); font-size:26px; letter-spacing:.04em; text-transform:uppercase;
}
.premiere__marquee-track span{ display:inline-flex; align-items:center }
.premiere__marquee-dot{ font-size:18px; opacity:.7 }
@keyframes premiere-slide{
  from { transform:translateX(0) }
  to   { transform:translateX(-50%) }
}

/* ── Mobile pass ── */
@media (max-width:780px){
  .premiere__title{ font-size:clamp(48px,14vw,90px) }
  .premiere__sub{ font-size:11.5px }
  .premiere__sticker{
    width:80px; height:80px; top:-14px; right:-14px;
    font-size:14px;
  }
  .premiere__sticker b{ font-size:18px }
  .premiere__locked-cap{ padding:10px 12px }
  .premiere__locked-cap b{ font-size:24px }
  .premiere__frame--locked::after{ width:64px; height:64px; font-size:24px }
  .premiere__marquee-track{ font-size:18px; gap:24px }
}

/* ───── Launch ribbon ─────
   Slim sticky bar above the nav announcing the new album. Admin-toggleable
   via Site Settings → Launch Mode. Dismissable per-album (localStorage key). */
.launch-ribbon{
  position: sticky;
  top: 0;
  z-index: 110; /* over .nav (which is 100) */
  display:block;
  background: var(--accent, #c8102e);
  color:#fff;
  text-decoration: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(0,0,0,.25);
  transition: transform .25s ease, opacity .25s ease;
}
.launch-ribbon.is-dismissed{
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
  position: absolute; /* stop reserving space */
}
.launch-ribbon__inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;
  padding: 10px 56px 10px 24px;
  max-width: 1180px;
  margin: 0 auto;
}
.launch-ribbon__text{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.launch-ribbon__arrow{
  font-family: 'Anton', Impact, sans-serif;
  font-size: 16px;
  letter-spacing: 0;
  transition: transform .18s ease;
  flex: 0 0 auto;
}
.launch-ribbon:hover .launch-ribbon__arrow,
.launch-ribbon:focus-visible .launch-ribbon__arrow{ transform: translateX(3px); }
.launch-ribbon__close{
  position:absolute; top: 50%; right: 14px; transform: translateY(-50%);
  background: transparent; border: 0; color: rgba(255,255,255,.85);
  width: 28px; height: 28px; border-radius: 999px;
  font-size: 20px; line-height: 1; cursor: pointer;
  display:grid; place-items:center;
  transition: background .18s ease, color .18s ease;
}
.launch-ribbon__close:hover{ background: rgba(0,0,0,.25); color:#fff; }

@media (max-width: 720px){
  .launch-ribbon{ font-size: 11px; letter-spacing: .1em; }
  .launch-ribbon__inner{ padding: 9px 44px 9px 14px; gap: 8px; }
}

/* ───── Hero launch eyebrow ─────
   Extra small tag above the existing hero headline when launch mode is on. */
.hero__launch-eyebrow{
  display:inline-flex; align-items:center; gap: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent, #c8102e);
  background: rgba(200, 16, 46, .12);
  border: 1px solid rgba(200, 16, 46, .35);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  animation: launch-eyebrow-pulse 2.5s ease-in-out infinite;
}
.hero__launch-eyebrow:hover,
.hero__launch-eyebrow:focus-visible{
  background: var(--accent, #c8102e);
  color: #fff;
  border-color: var(--accent, #c8102e);
}
.hero__launch-eyebrow::before{
  content:""; width: 8px; height: 8px; border-radius: 999px;
  background: var(--accent, #c8102e);
  box-shadow: 0 0 0 4px rgba(200, 16, 46, .22);
  animation: launch-eyebrow-dot 1.6s ease-in-out infinite;
}
@keyframes launch-eyebrow-pulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(200, 16, 46, 0); }
  50%{ box-shadow: 0 0 0 6px rgba(200, 16, 46, .15); }
}
@keyframes launch-eyebrow-dot{
  0%, 100%{ opacity: 1; }
  50%{ opacity: .35; }
}

/* Nav Listen CTA (launch window) — same shape as .nav__cta with accent fill */
.nav__listen{
  margin-left: auto;
  background: var(--accent, #c8102e);
  color:#fff !important;
  padding: 8px 14px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none !important;
  transition: transform .18s ease, box-shadow .18s ease;
}
.nav__listen:hover,
.nav__listen:focus-visible{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(200, 16, 46, .35);
}