/* ============================================
   NOW YOU DIE - 1977 PUNK ZINE STYLESHEET
   DIRTY. ROUGH. UGLY-BEAUTIFUL. CHAOTIC.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Special+Elite&family=VT323&family=Permanent+Marker&display=swap');

/* ---- CSS RESET + BASE ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --newsprint: #000000;
  --newsprint-dark: #d4be88;
  --ink: #0d0d0d;
  --ink-faded: #1a1a1a;
  --blood: #8b0000;
  --blood-bright: #cc0000;
  --rust: #7a3b1e;
  --yellow: #c8a400;
  --bleached: #f0ead8;
  --black-ink: #111111;
  /* Height of the sticky nav; overridden at runtime by script.js */
  --nav-h: 96px;
}

html {
  scroll-behavior: smooth;
  /* Fallback so browsers that ignore per-section scroll-margin still offset */
  scroll-padding-top: var(--nav-h);
}

/* Fallback anchor offset (JS in script.js does the precise scroll to the
   section heading). Sections have a torn-top decoration + large top
   padding, so JS targets the heading directly for an exact landing. */
section[id],
[id].hero {
  scroll-margin-top: var(--nav-h);
}

body {
  background-color: var(--newsprint);
  color: var(--ink);
  font-family: 'Special Elite', 'Courier New', monospace;
  overflow-x: hidden;
  position: relative;
}

/* ---- GRAIN/NOISE TEXTURE OVERLAY ---- */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
}

/* ---- SCANLINE EFFECT ---- */
body::after {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9998;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  );
}

/* ===== NAVIGATION ===== */
/* Scoped to the top banner only. Previously the bare `nav` selector also
   caught the in-page platform-row (Spotify/Facebook/etc.), making those
   buttons sticky + z-index:1000 so they floated over the banner. */
.site-nav {
  background: var(--ink);
  padding: 12px 20px;
  transform: skewX(-1deg);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 3px solid var(--blood);
  box-shadow: 0 4px 0 var(--blood-bright), 0 6px 0 var(--rust);
}

.site-nav::before {
  content: '★ ★ ★';
  color: var(--blood);
  font-size: 0.6rem;
  letter-spacing: 8px;
  display: block;
  text-align: center;
  margin-bottom: 4px;
  opacity: 0.7;
}

.nav-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 18px;
  justify-content: center;
  align-items: center;
  transform: skewX(1deg);
}

.site-nav a {
  color: var(--bleached);
  text-decoration: none;
  font-family: 'Special Elite', monospace;
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 8px;
  transition: none;
  position: relative;
}

.site-nav a:nth-child(odd) {
  transform: rotate(-0.5deg);
  margin-top: 2px;
}
.site-nav a:nth-child(even) {
  transform: rotate(0.7deg);
  margin-bottom: 2px;
}

.site-nav a::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--blood);
  transform: scaleX(0);
  transition: transform 0.1s;
}

.site-nav a:hover {
  color: var(--blood-bright);
  text-shadow: 1px 1px 0 #000, -1px -1px 0 rgba(200,0,0,0.4);
}
.site-nav a:hover::before {
  transform: scaleX(1);
}

/* ===== HERO SECTION ===== */
#home {
  background-color: var(--newsprint);
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px 100px;
  position: relative;
  overflow: hidden;
}

/* Aged paper lines */
#home::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 39px,
      rgba(139,0,0,0.06) 39px,
      rgba(139,0,0,0.06) 40px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 27px,
      rgba(0,0,0,0.04) 27px,
      rgba(0,0,0,0.04) 28px
    );
  pointer-events: none;
}

/* Spraypaint splatter behind title */
.splatter-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 350px;
  pointer-events: none;
  z-index: 0;
}

.splatter-bg::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 280px;
  background: radial-gradient(ellipse 70% 60% at 45% 50%, rgba(139,0,0,0.22) 0%, rgba(139,0,0,0.10) 40%, transparent 70%),
              radial-gradient(ellipse 30% 40% at 70% 30%, rgba(200,0,0,0.15) 0%, transparent 60%),
              radial-gradient(ellipse 20% 25% at 20% 70%, rgba(100,0,0,0.18) 0%, transparent 55%),
              radial-gradient(circle 60px at 80% 60%, rgba(180,0,0,0.12) 0%, transparent 50%),
              radial-gradient(circle 30px at 15% 25%, rgba(139,0,0,0.20) 0%, transparent 50%);
  clip-path: polygon(
    5% 40%, 8% 20%, 12% 35%, 15% 5%, 20% 30%, 25% 10%, 30% 38%,
    35% 8%, 40% 35%, 45% 12%, 50% 40%, 55% 8%, 60% 35%,
    65% 15%, 70% 42%, 75% 18%, 80% 38%, 85% 10%, 90% 35%,
    95% 20%, 98% 45%, 95% 70%, 90% 95%, 85% 75%, 80% 92%,
    75% 70%, 70% 88%, 65% 68%, 60% 90%, 55% 72%, 50% 95%,
    45% 70%, 40% 88%, 35% 65%, 30% 85%, 25% 65%, 20% 80%,
    15% 60%, 10% 75%, 5% 55%
  );
}

.splatter-bg::after {
  content: '';
  position: absolute;
  top: 20%; left: 30%;
  width: 200px; height: 100px;
  background: radial-gradient(ellipse, rgba(204,0,0,0.25) 0%, transparent 70%);
  border-radius: 50%;
  transform: rotate(-15deg);
  filter: blur(8px);
}

/* ===== HERO LOGO ===== */
.hero-logo {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.hero-logo__img {
  width: clamp(300px, 55vw, 600px);
  height: auto;
  filter: drop-shadow(0 0 20px rgba(139,0,0,0.6)) drop-shadow(2px 2px 8px rgba(0,0,0,0.9));
}

/* RANSOM NOTE TITLE */
.ransom-title {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 4px 40px;
  max-width: 900px;
  margin-bottom: 20px;
  padding: 10px;
}

.ransom-title .word {
  display: inline-flex;
  gap: 2px;
}

.ransom-letter {
  display: inline-block;
  line-height: 1;
  position: relative;
}

/* Individual letter styles — ransom note variety */
.r1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(5rem, 14vw, 10rem);
  color: var(--ink);
  transform: rotate(-2deg) translateY(4px);
  text-shadow: 3px 3px 0 var(--blood), -1px -1px 0 rgba(0,0,0,0.5);
  background: var(--bleached);
  padding: 0 6px;
  border: 3px solid var(--ink);
}
.r2 {
  font-family: 'Permanent Marker', cursive;
  font-size: clamp(4rem, 12vw, 8.5rem);
  color: var(--blood);
  transform: rotate(3deg) translateY(-6px);
  text-shadow: 2px 2px 0 #000;
  background: var(--newsprint-dark);
  padding: 0 4px;
}
.r3 {
  font-family: 'VT323', monospace;
  font-size: clamp(5.5rem, 15vw, 11rem);
  color: var(--bleached);
  transform: rotate(-1deg) translateY(8px);
  text-shadow: 4px 4px 0 var(--blood-bright), -2px 2px 0 #000;
  background: var(--ink);
  padding: 2px 8px;
  border: 2px solid var(--blood);
}
.r4 {
  font-family: 'Special Elite', monospace;
  font-size: clamp(3rem, 9vw, 7rem);
  color: var(--ink);
  transform: rotate(1.5deg) translateY(-3px);
  text-shadow: 2px 2px 0 var(--rust);
  background: var(--yellow);
  padding: 2px 8px;
  border: 2px solid var(--ink);
}
.r5 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(6rem, 16vw, 12rem);
  color: var(--blood);
  transform: rotate(-3deg) translateY(10px);
  text-shadow: 5px 5px 0 #000, -2px -2px 0 var(--rust);
  border-bottom: 6px solid var(--ink);
}
.r6 {
  font-family: 'Permanent Marker', cursive;
  font-size: clamp(4.5rem, 13vw, 9rem);
  color: var(--bleached);
  transform: rotate(2deg) translateY(-8px);
  text-shadow: 3px 3px 0 var(--blood), 1px 1px 0 #000;
  background: var(--blood);
  padding: 0 6px;
  border: 3px solid #000;
}
.r7 {
  font-family: 'VT323', monospace;
  font-size: clamp(5rem, 14vw, 10rem);
  color: var(--ink);
  transform: rotate(-1.5deg);
  text-shadow: 2px 2px 0 var(--yellow), 4px 4px 0 rgba(0,0,0,0.3);
  background: var(--bleached);
  padding: 0 5px;
  border-left: 4px solid var(--blood);
  border-bottom: 2px solid var(--rust);
}
.r8 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(5.5rem, 15vw, 11rem);
  color: var(--bleached);
  transform: rotate(1deg) translateY(5px);
  text-shadow: 3px 3px 0 var(--blood-bright), -3px -3px 0 #000;
  background: var(--black-ink);
  padding: 2px 10px;
}
.r9 {
  font-family: 'Special Elite', monospace;
  font-size: clamp(4rem, 11vw, 8rem);
  color: var(--blood);
  transform: rotate(-2.5deg) translateY(-4px);
  text-shadow: 1px 1px 0 #000, 3px 3px 0 var(--rust);
  border: 3px dashed var(--blood);
  padding: 2px 6px;
}

/* Hero taglines */
.hero-taglines {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  margin: 30px 0;
}

.tagline-1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1rem, 3.5vw, 2rem);
  color: #ffffff !important;
  letter-spacing: 4px;
  transform: rotate(-0.5deg);
  text-transform: uppercase;
  border-top: 2px solid #ffffff !important;
  border-bottom: 2px solid #ffffff !important;
  padding: 4px 16px;
  font-weight: 700;
  text-shadow: none;
  text-align: center;
  white-space: nowrap;
}

.tagline-2 {
  font-family: 'Permanent Marker', cursive;
  font-size: 1.4rem;
  color: var(--blood);
  transform: rotate(1.2deg);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}

.tagline-3 {
  font-family: 'Special Elite', monospace;
  font-size: 0.85rem;
  color: #ffffff;
  letter-spacing: 4px;
  text-transform: uppercase;
  opacity: 0.85;
  transform: rotate(-0.3deg);
  text-shadow: 1px 1px 0 #000;
}

/* Hero CTA buttons */
.hero-ctas {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 24px;
}

/* RUBBER STAMP BUTTONS */
.stamp-btn {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--blood);
  background: transparent;
  border: 3px solid var(--blood);
  padding: 10px 24px;
  display: inline-block;
  position: relative;
  transform: rotate(-1deg);
  transition: none;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--blood), 4px 4px 0 rgba(0,0,0,0.3);
}

.stamp-btn::before {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(139,0,0,0.3);
}

.stamp-btn::after {
  content: '';
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(139,0,0,0.2);
}

.stamp-btn:hover {
  background: var(--blood);
  color: var(--bleached);
  transform: rotate(1deg) translate(-2px, -2px);
  box-shadow: 5px 5px 0 #000;
}

.stamp-btn.primary {
  background: var(--blood);
  color: var(--bleached);
  transform: rotate(1deg);
  border-color: var(--ink);
  box-shadow: 4px 4px 0 #000;
}
.stamp-btn.primary:hover {
  background: var(--ink);
  transform: rotate(-1deg) translate(-2px, -2px);
}

/* ===== TORN PAPER DIVIDERS ===== */
.torn-bottom {
  position: relative;
  z-index: 5;
}
.torn-bottom::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: 0;
  width: 100%;
  height: 35px;
  background: inherit;
  clip-path: polygon(
    0% 0%, 2% 60%, 4% 20%, 6% 80%, 8% 30%, 10% 70%, 12% 15%, 14% 55%,
    16% 85%, 18% 40%, 20% 75%, 22% 25%, 24% 65%, 26% 10%, 28% 50%,
    30% 85%, 32% 35%, 34% 70%, 36% 20%, 38% 60%, 40% 90%, 42% 45%,
    44% 80%, 46% 30%, 48% 65%, 50% 15%, 52% 55%, 54% 85%, 56% 40%,
    58% 75%, 60% 20%, 62% 60%, 64% 95%, 66% 45%, 68% 80%, 70% 25%,
    72% 65%, 74% 10%, 76% 50%, 78% 90%, 80% 35%, 82% 70%, 84% 20%,
    86% 60%, 88% 85%, 90% 40%, 92% 75%, 94% 25%, 96% 60%, 98% 30%, 100% 0%,
    100% 100%, 0% 100%
  );
  z-index: 5;
}

.torn-top::before {
  content: '';
  position: absolute;
  top: -30px;
  left: 0;
  width: 100%;
  height: 35px;
  background: inherit;
  clip-path: polygon(
    0% 100%, 2% 40%, 4% 80%, 6% 20%, 8% 70%, 10% 30%, 12% 85%, 14% 45%,
    16% 15%, 18% 60%, 20% 25%, 22% 75%, 24% 35%, 26% 90%, 28% 50%,
    30% 15%, 32% 65%, 34% 30%, 36% 80%, 38% 40%, 40% 10%, 42% 55%,
    44% 20%, 46% 70%, 48% 35%, 50% 85%, 52% 45%, 54% 15%, 56% 60%,
    58% 25%, 60% 80%, 62% 40%, 64% 5%, 66% 55%, 68% 20%, 70% 75%,
    72% 35%, 74% 90%, 76% 50%, 78% 10%, 80% 65%, 82% 30%, 84% 80%,
    86% 40%, 88% 15%, 90% 60%, 92% 25%, 94% 75%, 96% 40%, 98% 70%, 100% 100%,
    100% 0%, 0% 0%
  );
  z-index: 5;
}

/* ===== SECTION BASE ===== */
section {
  padding: 60px 20px;
  position: relative;
}

.section-inner {
  max-width: 960px;
  margin: 0 auto;
}

/* ===== PRESS / REVIEWS ===== */
.press-section {
  background: var(--ink);
  padding: 80px 20px 60px;
  position: relative;
}

.press-inner {
  max-width: 800px;
  margin: 0 auto;
}

.review-card {
  background: rgba(255,255,255,0.03);
  border: 2px solid rgba(139,0,0,0.4);
  border-left: 6px solid var(--blood);
  padding: 36px 40px;
  position: relative;
  transform: rotate(-0.3deg);
}

.review-source {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  color: var(--blood-bright);
  letter-spacing: 6px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.review-date {
  font-family: 'Special Elite', monospace;
  font-size: 0.75rem;
  color: rgba(240,234,216,0.5);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.review-album {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  color: var(--bleached);
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(139,0,0,0.3);
}

.review-body {
  margin: 0 0 20px 0;
  padding: 0;
  border: none;
}

.review-body p {
  font-family: 'Special Elite', monospace;
  font-size: 0.95rem;
  color: #ffffff;
  line-height: 1.9;
  margin-bottom: 16px;
}

.review-body p:last-child {
  margin-bottom: 0;
}

.review-body em {
  font-style: italic;
  color: var(--bleached);
}

.review-byline {
  font-family: 'Permanent Marker', cursive;
  font-size: 1.1rem;
  color: var(--blood-bright);
  margin-top: 24px;
  text-align: right;
  transform: rotate(-1deg);
  display: block;
}

.review-publication {
  font-family: 'Special Elite', monospace;
  font-size: 0.8rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: right;
  margin-top: 8px;
}

.review-publication a {
  color: rgba(240,234,216,0.6);
  text-decoration: none;
  border-bottom: 1px solid rgba(139,0,0,0.4);
  padding-bottom: 1px;
}

.review-publication a:hover {
  color: var(--blood-bright);
  border-color: var(--blood-bright);
}

/* ===== SECTION HEADERS ===== */
.section-stamp {
  display: inline-block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.5rem, 6vw, 4rem);
  letter-spacing: 6px;
  text-transform: uppercase;
  padding: 6px 20px;
  margin-bottom: 30px;
  position: relative;
}

.section-stamp.red-stamp {
  color: var(--blood);
  border: 4px solid var(--blood);
  transform: rotate(-1.5deg);
  background: var(--bleached);
  box-shadow: 4px 4px 0 var(--blood-bright), 6px 6px 0 rgba(0,0,0,0.2);
}
.section-stamp.red-stamp::before {
  content: '';
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(139,0,0,0.3);
}

.section-stamp.black-stamp {
  color: var(--bleached);
  background: var(--ink);
  border: 3px solid var(--ink);
  transform: rotate(0.8deg);
  box-shadow: 4px 4px 0 var(--blood);
}

/* Blood drip border */
.blood-drip-top {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 18px;
  background: var(--blood-bright);
  clip-path: polygon(
    0 0, 3% 0, 3% 60%, 3.5% 100%, 4% 60%, 6% 0,
    9% 0, 9% 45%, 9.5% 90%, 10% 45%, 12% 0,
    15% 0, 15% 55%, 15.5% 100%, 16% 55%, 18% 0,
    22% 0, 22% 40%, 22.5% 85%, 23% 40%, 25% 0,
    28% 0, 28% 70%, 28.5% 100%, 29% 70%, 32% 0,
    36% 0, 36% 50%, 36.5% 90%, 37% 50%, 40% 0,
    44% 0, 44% 65%, 44.5% 100%, 45% 65%, 48% 0,
    52% 0, 52% 45%, 52.5% 85%, 53% 45%, 56% 0,
    60% 0, 60% 60%, 60.5% 100%, 61% 60%, 64% 0,
    68% 0, 68% 50%, 68.5% 90%, 69% 50%, 72% 0,
    76% 0, 76% 70%, 76.5% 100%, 77% 70%, 80% 0,
    84% 0, 84% 45%, 84.5% 85%, 85% 45%, 88% 0,
    92% 0, 92% 60%, 92.5% 100%, 93% 60%, 96% 0,
    100% 0
  );
  z-index: 10;
}

/* ===== BIO SECTION ===== */
#bio {
  background: var(--bleached);
  position: relative;
  padding-top: 80px;
}

#bio .section-title,
#bio .xerox-label {
  color: var(--ink) !important;
  text-shadow: none;
}

.bio-paper {
  background: #f5edd5;
  padding: 40px 48px;
  position: relative;
  transform: rotate(-0.5deg);
  border: 1px solid rgba(0,0,0,0.15);
  box-shadow: 4px 4px 12px rgba(0,0,0,0.15), -1px -1px 0 rgba(0,0,0,0.05);
  margin-left: -10px;
  margin-right: 30px;
}

/* Coffee stain */
.bio-paper::before {
  content: '';
  position: absolute;
  top: 20px;
  right: 40px;
  width: 90px;
  height: 80px;
  background: radial-gradient(ellipse 50% 45% at 50% 50%,
    rgba(120, 80, 20, 0.18) 0%,
    rgba(120, 80, 20, 0.10) 50%,
    rgba(120, 80, 20, 0.04) 70%,
    transparent 100%
  );
  border-radius: 50%;
  transform: rotate(15deg);
  pointer-events: none;
}
/* Second coffee ring */
.bio-paper::after {
  content: '';
  position: absolute;
  top: 28px;
  right: 48px;
  width: 75px;
  height: 68px;
  background: transparent;
  border: 2px solid rgba(120,80,20,0.12);
  border-radius: 50%;
  transform: rotate(15deg);
  pointer-events: none;
}

.bio-margin-line {
  position: absolute;
  top: 0; bottom: 0;
  left: 60px;
  width: 1px;
  background: rgba(139,0,0,0.25);
}

.bio-text {
  font-family: 'Special Elite', monospace;
  font-size: 1.05rem;
  line-height: 2;
  color: var(--ink-faded);
  padding-left: 20px;
  position: relative;
  z-index: 1;
}

.bio-text p {
  margin-bottom: 1.2em;
}

.bio-text::before {
  content: '"';
  font-family: 'Permanent Marker', cursive;
  font-size: 6rem;
  color: rgba(139,0,0,0.2);
  position: absolute;
  top: -30px;
  left: 0;
  line-height: 1;
  pointer-events: none;
}

/* Stamps on bio */
.bio-stamp {
  display: inline-block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.2rem;
  color: var(--blood);
  border: 4px solid var(--blood);
  padding: 4px 16px;
  transform: rotate(3deg);
  opacity: 0.85;
  letter-spacing: 4px;
  margin-top: 16px;
  box-shadow: 2px 2px 0 rgba(139,0,0,0.3);
  position: relative;
}
.bio-stamp::before {
  content: '';
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(139,0,0,0.25);
}

/* ===== GIGS SECTION ===== */
#gigs {
  background: var(--newsprint);
  padding-top: 80px;
  position: relative;
}

.gig-flyer {
  background: var(--bleached);
  border: 3px solid var(--ink);
  transform: rotate(-1deg);
  padding: 30px 28px;
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  box-shadow: 6px 6px 0 var(--ink), 8px 8px 0 var(--blood);
  overflow: hidden;
}

.gig-flyer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 22px,
    rgba(0,0,0,0.04) 22px,
    rgba(0,0,0,0.04) 23px
  );
  pointer-events: none;
}

/* Staple marks */
.gig-flyer::after {
  content: '╫ ╫';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(0,0,0,0.4);
  font-size: 1rem;
  letter-spacing: 60px;
}

.gig-headline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  text-align: center;
  line-height: 1;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 4px;
  text-shadow: 2px 2px 0 var(--blood);
  margin-top: 16px;
  margin-bottom: 6px;
}

.gig-date {
  font-family: 'Permanent Marker', cursive;
  font-size: 2rem;
  color: var(--blood);
  text-align: center;
  transform: rotate(-1.5deg);
  display: block;
  margin: 10px 0;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}

.gig-venue {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem;
  color: var(--ink);
  text-align: center;
  letter-spacing: 3px;
  margin: 6px 0;
}

.gig-divider {
  border: none;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--blood);
  margin: 16px 0;
}

.gig-supports-label {
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.6;
  text-align: center;
  margin-bottom: 8px;
}

.gig-supports {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  justify-content: center;
  margin-bottom: 16px;
}

.support-band {
  font-family: 'Special Elite', monospace;
  font-size: 0.85rem;
  color: var(--ink);
  background: var(--newsprint);
  padding: 2px 8px;
  border: 1px solid var(--ink);
  transform: rotate(-0.5deg);
}
.support-band:nth-child(even) {
  transform: rotate(0.5deg);
}

.gig-free-stamp {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3.5rem;
  color: var(--blood-bright);
  border: 5px solid var(--blood-bright);
  display: inline-block;
  padding: 0 20px;
  transform: rotate(-8deg);
  position: absolute;
  top: 25px;
  right: 25px;
  letter-spacing: 6px;
  opacity: 0.85;
  box-shadow: 3px 3px 0 rgba(204,0,0,0.3);
  z-index: 2;
}
.gig-free-stamp::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(204,0,0,0.3);
}

.gig-details {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 10px;
  font-family: 'Special Elite', monospace;
  font-size: 0.85rem;
  color: var(--ink);
}
.gig-details span::before { content: '• '; }
.gig-details span:first-child::before { content: ''; }

/* ===== SECTION HEADERS ===== */
.section-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px 20px 10px;
}

.section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.8rem, 5vw, 3.5rem);
  color: #ffffff;
  letter-spacing: 8px;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 3px 3px 0 var(--blood);
}

.section-title-inv {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.8rem, 5vw, 3.5rem);
  color: #ffffff;
  letter-spacing: 8px;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 3px 3px 0 var(--blood);
}

.section-rivet {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: var(--blood);
  border-radius: 50%;
  border: 2px solid var(--bleached);
  flex-shrink: 0;
}

.xerox-label {
  font-family: 'Special Elite', monospace;
  font-size: 0.75rem;
  letter-spacing: 4px;
  color: #ffffff;
  opacity: 0.7;
  display: block;
  text-align: center;
  margin-bottom: 4px;
}

/* ===== GIG POSTER (unstyled elements) ===== */
.gig-board {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

.gig-poster {
  background: var(--bleached);
  border: 3px solid var(--ink);
  padding: 30px 28px;
  position: relative;
  box-shadow: 6px 6px 0 var(--ink), 8px 8px 0 var(--blood);
  overflow: hidden;
}

.rotate-neg { transform: rotate(-1deg); }

.gig-poster__damage { pointer-events: none; }

.gig-poster__header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  position: relative;
}

.gig-stamp-free {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3.5rem;
  color: var(--blood-bright);
  border: 5px solid var(--blood-bright);
  display: inline-block;
  padding: 0 20px;
  transform: rotate(-8deg);
  position: absolute;
  top: -10px;
  right: 0;
  letter-spacing: 6px;
  opacity: 0.85;
  box-shadow: 3px 3px 0 rgba(204,0,0,0.3);
  z-index: 2;
}

.gig-headliner {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.5rem, 7vw, 5rem);
  color: var(--ink);
  text-align: center;
  letter-spacing: 6px;
  text-shadow: 2px 2px 0 var(--blood);
  line-height: 1;
  margin-bottom: 6px;
}

.gig-subtitle {
  font-family: 'Special Elite', monospace;
  font-size: 0.85rem;
  color: var(--ink);
  text-align: center;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 14px;
  opacity: 0.8;
}

.gig-venue__name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem;
  color: var(--ink);
  letter-spacing: 3px;
  display: block;
  text-align: center;
}

.gig-venue__city {
  font-family: 'Special Elite', monospace;
  font-size: 0.9rem;
  color: var(--ink);
  letter-spacing: 2px;
  display: block;
  text-align: center;
  opacity: 0.7;
  margin-bottom: 10px;
}

.gig-supports__label {
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.6;
  text-align: center;
  margin-bottom: 6px;
}

.gig-supports__bands {
  font-family: 'Special Elite', monospace;
  font-size: 0.85rem;
  color: var(--ink);
  text-align: center;
  line-height: 1.8;
}

.staple {
  position: absolute;
  width: 20px;
  height: 8px;
  background: #888;
  border-radius: 2px;
}
.staple--tl { top: 10px; left: 20px; transform: rotate(-5deg); }
.staple--tr { top: 10px; right: 20px; transform: rotate(3deg); }

.gigs-follow {
  font-family: 'Special Elite', monospace;
  font-size: 0.9rem;
  color: var(--bleached);
  text-align: center;
  padding: 20px;
  letter-spacing: 2px;
}

.gigs-follow a {
  color: var(--blood-bright);
  text-decoration: none;
}
.gigs-follow a:hover {
  text-decoration: underline;
}

/* ===== MUSIC / RELEASES SECTION ===== */
#music {
  background: var(--ink);
  padding-top: 80px;
  position: relative;
}

#music .section-stamp {
  color: var(--blood-bright);
  border-color: var(--blood-bright);
  background: var(--ink);
}

/* Scratched texture on dark bg */
#music::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    47deg,
    transparent,
    transparent 3px,
    rgba(255,255,255,0.012) 3px,
    rgba(255,255,255,0.012) 4px
  ),
  repeating-linear-gradient(
    -23deg,
    transparent,
    transparent 5px,
    rgba(255,255,255,0.008) 5px,
    rgba(255,255,255,0.008) 6px
  );
  pointer-events: none;
}

.releases-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin-top: 20px;
}

.release-card {
  width: 220px;
  flex-shrink: 0;
}

.release-card {
  position: relative;
  transform: rotate(-1deg);
  transition: none;
}
.release-card:nth-child(even) {
  transform: rotate(1.2deg) translateY(8px);
}
.release-card:hover {
  transform: rotate(0deg) scale(1.03);
  z-index: 10;
}

/* Badly photocopied sleeve */
.release-cover {
  width: 100%;
  aspect-ratio: 1;
  background: var(--newsprint-dark);
  position: relative;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,0.15);
}

/* Halftone effect */
.release-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0,0,0,0.8) 1px, transparent 1px);
  background-size: 4px 4px;
  opacity: 0.4;
  z-index: 2;
}

.release-cover-art {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.cover-art-album {
  background:
    radial-gradient(circle at 30% 30%, rgba(139,0,0,0.6) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(0,0,0,0.8) 0%, transparent 50%),
    linear-gradient(135deg, #1a0000 0%, #0d0d0d 40%, #3a0000 100%);
}

.cover-art-ep {
  background:
    radial-gradient(circle at 60% 40%, rgba(100,80,0,0.5) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(139,0,0,0.4) 0%, transparent 50%),
    linear-gradient(45deg, #0a0a0a 0%, #1a1200 50%, #0d0d0d 100%);
}

.cover-band-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  color: var(--bleached);
  letter-spacing: 3px;
  text-align: center;
  text-shadow: 2px 2px 0 var(--blood);
  padding: 0 8px;
}
.cover-album-name {
  font-family: 'Permanent Marker', cursive;
  font-size: 1rem;
  color: var(--blood-bright);
  text-align: center;
  margin-top: 8px;
  text-shadow: 1px 1px 0 #000;
  padding: 0 8px;
}
.cover-year {
  font-family: 'VT323', monospace;
  font-size: 1.2rem;
  color: rgba(240,234,216,1);
  position: absolute;
  bottom: 8px;
  right: 10px;
}

.release-info {
  background: var(--ink-faded);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 12px 14px;
}

.release-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  color: var(--bleached);
  letter-spacing: 2px;
  margin-bottom: 4px;
}

.release-meta {
  font-family: 'Special Elite', monospace;
  font-size: 0.75rem;
  color: rgba(240,234,216,1);
  margin-bottom: 10px;
  letter-spacing: 1px;
}

.release-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.release-link {
  font-family: 'VT323', monospace;
  font-size: 0.95rem;
  color: var(--blood-bright);
  text-decoration: none;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--blood);
  padding-bottom: 1px;
}
.release-link:hover {
  color: var(--yellow);
  border-color: var(--yellow);
}

/* ===== RELEASE CARDS (missing classes) ===== */
.release-card__art {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 3px solid var(--blood);
  margin-bottom: 0;
}

.release-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.halftone-box {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a0000 0%, #0d0d0d 40%, #3a0000 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.halftone-box--dark {
  background: linear-gradient(45deg, #0a0a0a 0%, #1a1200 50%, #0d0d0d 100%);
}

.release-art-text {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  color: var(--bleached);
  text-align: center;
  letter-spacing: 4px;
  text-shadow: 2px 2px 0 var(--blood);
  line-height: 1.1;
}

.release-art-text small {
  font-size: 0.7em;
  display: block;
  color: var(--blood-bright);
  margin-top: 6px;
}

.release-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 2px;
  padding: 4px 10px;
  text-align: center;
  line-height: 1.2;
  z-index: 2;
}

.release-badge--new {
  background: var(--blood);
  color: #ffffff;
  border: 2px solid #ffffff;
  transform: rotate(3deg);
}

.release-badge--lost {
  background: var(--ink);
  color: var(--yellow);
  border: 2px solid var(--yellow);
  transform: rotate(-2deg);
  font-size: 0.7rem;
}

.release-card__rust-corner {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 40px;
  background: radial-gradient(circle at 0% 100%, rgba(122,59,30,0.6) 0%, transparent 70%);
}

.release-card__info {
  background: var(--ink-faded);
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.1);
  border-top: none;
}

.release-type-tag {
  font-family: 'VT323', monospace;
  font-size: 0.95rem;
  color: var(--blood-bright);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.release-title-big {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: #ffffff;
  letter-spacing: 3px;
  margin-bottom: 8px;
  line-height: 1.1;
}

.release-blurb {
  font-family: 'Special Elite', monospace;
  font-size: 0.8rem;
  color: rgba(240,234,216,0.9);
  line-height: 1.6;
  margin-bottom: 12px;
}

.release-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stamp-btn--sm {
  font-size: 0.85rem;
  padding: 6px 14px;
  letter-spacing: 2px;
}

.stamp-btn--free {
  background: var(--blood);
  color: #ffffff;
  border-color: var(--blood);
}

.release-card__staples {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.rotate-neg { transform: rotate(-1deg); }
.rotate-pos { transform: rotate(1deg) translateY(6px); }

.platform-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 30px 20px 10px;
}

.plat-sticker {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: 3px;
  text-decoration: none;
  padding: 8px 20px;
  border: 2px solid;
  text-transform: uppercase;
}

.plat-sticker--spotify { color: #1db954; border-color: #1db954; }
.plat-sticker--bandcamp { color: var(--bleached); border-color: var(--bleached); background: var(--blood); }
.plat-sticker--youtube { color: var(--blood-bright); border-color: var(--blood-bright); }
.plat-sticker--facebook { color: var(--bleached); border-color: var(--bleached); }
.plat-sticker:hover { opacity: 0.8; }

/* ===== WATCH / VIDEO SECTION ===== */
#watch {
  background: var(--newsprint);
  padding-top: 80px;
  position: relative;
}

.video-frame-wrapper {
  position: relative;
  transform: rotate(0.5deg);
  margin: 20px auto;
  max-width: 700px;
}

.video-frame-wrapper::before {
  content: '';
  position: absolute;
  inset: -8px;
  border: 3px solid var(--ink);
  z-index: -1;
}
.video-frame-wrapper::after {
  content: 'LIVE VID ▶';
  position: absolute;
  top: -22px;
  left: 10px;
  font-family: 'VT323', monospace;
  font-size: 0.9rem;
  color: var(--blood);
  letter-spacing: 3px;
  background: var(--newsprint);
  padding: 0 6px;
}

.video-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--ink);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.video-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255,255,255,0.03) 3px,
    rgba(255,255,255,0.03) 4px
  );
}

.video-play-icon {
  width: 70px;
  height: 70px;
  border: 4px solid var(--blood-bright);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.video-play-icon::after {
  content: '';
  width: 0;
  height: 0;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 30px solid var(--blood-bright);
  margin-left: 6px;
}

.video-caption {
  font-family: 'Special Elite', monospace;
  font-size: 0.8rem;
  color: var(--ink);
  text-align: center;
  margin-top: 8px;
  opacity: 0.6;
  letter-spacing: 2px;
}

.yt-btn {
  display: block;
  text-align: center;
  margin: 20px auto 0;
  width: fit-content;
}

/* ===== AI BAND SECTION ===== */
#ai-band {
  background: #0a0a0f;
  color: var(--bleached);
  padding-top: 80px;
  position: relative;
  overflow: hidden;
}

/* Circuit board decay texture */
#ai-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent, transparent 30px, rgba(139,0,0,0.04) 30px, rgba(139,0,0,0.04) 31px),
    repeating-linear-gradient(0deg, transparent, transparent 30px, rgba(0,100,0,0.03) 30px, rgba(0,100,0,0.03) 31px);
  pointer-events: none;
}

/* Decay overlay */
#ai-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(139,0,0,0.08) 0%, transparent 70%),
    radial-gradient(circle 200px at 10% 20%, rgba(0,80,0,0.06) 0%, transparent 50%),
    radial-gradient(circle 150px at 90% 80%, rgba(139,0,0,0.10) 0%, transparent 50%);
  pointer-events: none;
}

#ai-band .section-stamp {
  color: #0f0;
  border-color: #0f0;
  background: #0a0a0f;
  text-shadow: 0 0 10px rgba(0,255,0,0.5), 0 0 20px rgba(0,255,0,0.3);
  box-shadow: 4px 4px 0 var(--blood);
}

.ai-band-intro {
  font-family: 'VT323', monospace;
  font-size: 1.3rem;
  color: rgba(240,234,216,1);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 30px;
  transform: rotate(-0.3deg);
  line-height: 1.8;
}

.band-members {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin-top: 20px;
}

.member-card {
  background: rgba(224, 218, 200, 0.92);
  border: 2px solid rgba(139,0,0,0.4);
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: none;
}
.member-card:nth-child(1) { transform: rotate(-1deg); }
.member-card:nth-child(2) { transform: rotate(1.5deg) translateY(-10px); }
.member-card:nth-child(3) { transform: rotate(-0.5deg) translateY(5px); }

.member-card:hover {
  border-color: var(--blood-bright);
  transform: rotate(0) scale(1.02);
}

/* Circuit trace decoration */
.member-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 60px; height: 60px;
  background:
    linear-gradient(90deg, transparent 40%, rgba(0,255,0,0.1) 40%, rgba(0,255,0,0.1) 42%, transparent 42%),
    linear-gradient(0deg, transparent 40%, rgba(0,255,0,0.1) 40%, rgba(0,255,0,0.1) 42%, transparent 42%);
}

.member-symbol {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3.5rem;
  display: block;
  line-height: 1;
  margin-bottom: 8px;
}
.member-card:nth-child(1) .member-symbol { color: var(--blood-bright); }
.member-card:nth-child(2) .member-symbol { color: #0f0; text-shadow: 0 0 8px rgba(0,255,0,0.5); }
.member-card:nth-child(3) .member-symbol { color: var(--yellow); }

.member-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem;
  letter-spacing: 3px;
  margin-bottom: 4px;
}
.member-card:nth-child(1) .member-name { color: var(--bleached); }
.member-card:nth-child(2) .member-name { color: #0f0; text-shadow: 0 0 5px rgba(0,255,0,0.4); }
.member-card:nth-child(3) .member-name { color: var(--bleached); }

.member-role {
  font-family: 'VT323', monospace;
  font-size: 1rem;
  color: rgba(240,234,216,1);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.member-card:nth-child(2) .member-role { color: rgba(0,255,0,0.6); }

.member-tag {
  display: inline-block;
  font-family: 'Special Elite', monospace;
  font-size: 0.7rem;
  padding: 2px 8px;
  margin-top: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.tag-human {
  background: rgba(139,0,0,0.3);
  color: var(--blood-bright);
  border: 1px solid var(--blood);
}
.tag-ai {
  background: rgba(0,80,0,0.3);
  color: #0f0;
  border: 1px solid rgba(0,255,0,0.4);
}

/* ===== SHOP SECTION ===== */
#shop {
  background: var(--bleached);
  padding-top: 80px;
  position: relative;
}

.shop-intro {
  font-family: 'Special Elite', monospace;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.8;
  margin-bottom: 20px;
  transform: rotate(-0.3deg);
}

.shop-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
}

/* Scattered merch cards — like flyers thrown on a table */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 320px));
  justify-content: center;
  gap: 48px 70px;
  max-width: 900px;
  margin: 50px auto 30px;
  padding: 0 20px;
}

.shop-item {
  position: relative;
  background: #ffffff;
  border: 2px solid var(--ink);
  padding: 28px 24px 24px;
  text-align: center;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform 0.2s ease;
  overflow: hidden;
}

/* each card lands at its own angle / offset */
.shop-item:nth-child(1) {
  transform: rotate(-3deg) translate(-24px, 0);
  justify-self: start;
}
.shop-item:nth-child(2) {
  transform: rotate(2.5deg) translate(20px, 34px);
  justify-self: end;
  box-shadow: 5px 5px 0 var(--blood);
}
.shop-item:nth-child(3) {
  transform: rotate(1.8deg) translate(14px, -6px);
  justify-self: end;
  box-shadow: -5px 5px 0 var(--rust);
}
.shop-item:nth-child(4) {
  transform: rotate(-2.2deg) translate(-16px, 26px);
  justify-self: start;
}

.shop-item:hover {
  transform: rotate(0deg) translate(0, 0) scale(1.03);
  z-index: 2;
}

.shop-item__name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.7rem;
  letter-spacing: 3px;
  color: var(--ink);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.shop-coming-tag {
  display: inline-block;
  font-family: 'Special Elite', monospace;
  font-size: 0.75rem;
  letter-spacing: 3px;
  color: var(--blood-bright);
  border: 2px solid var(--blood);
  padding: 4px 12px;
  transform: rotate(-4deg);
  background: rgba(139,0,0,0.08);
}

.shop-item__rust {
  position: absolute;
  right: -18px;
  bottom: -18px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(122,59,30,0.45) 0%, rgba(122,59,30,0.15) 50%, transparent 70%);
  pointer-events: none;
}
.shop-item:nth-child(2) .shop-item__rust,
.shop-item:nth-child(3) .shop-item__rust {
  right: auto;
  left: -18px;
  top: -18px;
  bottom: auto;
}

.shop-note {
  font-family: 'Special Elite', monospace;
  font-size: 0.95rem;
  color: var(--ink);
  text-align: center;
  margin: 60px auto 0;
  max-width: 500px;
  transform: rotate(-0.4deg);
  padding: 0 20px;
}
.shop-note a {
  color: var(--blood-bright);
}

@media (max-width: 640px) {
  .shop-grid {
    grid-template-columns: minmax(220px, 320px);
    gap: 36px;
  }
  .shop-item:nth-child(1) { transform: rotate(-2deg) translateX(-10px); }
  .shop-item:nth-child(2) { transform: rotate(2deg) translateX(12px); }
  .shop-item:nth-child(3) { transform: rotate(1.5deg) translateX(-12px); justify-self: start; }
  .shop-item:nth-child(4) { transform: rotate(-2deg) translateX(10px); justify-self: end; }
}

/* ===== CONTACT / NEWSLETTER SECTION ===== */
#contact {
  background: var(--newsprint);
  padding-top: 80px;
  position: relative;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
@media (max-width: 600px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.contact-card {
  background: var(--bleached);
  border: 2px solid var(--ink);
  padding: 24px;
  transform: rotate(-0.8deg);
  box-shadow: 4px 4px 0 var(--ink);
}
.contact-card:nth-child(2) {
  transform: rotate(0.6deg) translateY(8px);
  box-shadow: 4px 4px 0 var(--blood);
}

.contact-card h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem;
  letter-spacing: 3px;
  color: var(--ink);
  margin-bottom: 16px;
  border-bottom: 2px solid var(--blood);
  padding-bottom: 8px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  background: rgba(255,255,255,0.6);
  border: 2px solid var(--ink);
  border-radius: 0;
  font-family: 'Special Elite', monospace;
  font-size: 0.9rem;
  color: var(--ink);
  padding: 8px 12px;
  margin-bottom: 12px;
  display: block;
  outline: none;
  -webkit-appearance: none;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--blood);
  background: rgba(255,255,255,0.8);
}
.contact-form textarea {
  min-height: 100px;
  resize: vertical;
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.newsletter-form input[type="email"] {
  width: 100%;
  background: rgba(255,255,255,0.6);
  border: 2px solid var(--ink);
  border-radius: 0;
  font-family: 'Special Elite', monospace;
  font-size: 0.9rem;
  color: var(--ink);
  padding: 8px 12px;
  outline: none;
  -webkit-appearance: none;
}

.newsletter-blurb {
  font-family: 'Special Elite', monospace;
  font-size: 0.85rem;
  color: var(--ink);
  opacity: 0.7;
  line-height: 1.6;
}

/* ===== SOCIAL LINKS / STICKERS ===== */
.social-stickers {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  justify-content: center;
}

.social-sticker {
  display: inline-block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: 2px;
  text-decoration: none;
  text-transform: uppercase;
  padding: 8px 16px;
  border: 3px solid;
  position: relative;
}

.social-sticker::before {
  content: '';
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(255,255,255,0.2);
  pointer-events: none;
}

.social-sticker.facebook {
  background: var(--ink);
  color: #e8d4a0;
  border-color: #e8d4a0;
  transform: rotate(-2deg);
}
.social-sticker.bandcamp {
  background: var(--blood);
  color: var(--bleached);
  border-color: var(--bleached);
  transform: rotate(1.5deg) translateY(-4px);
}
.social-sticker.spotify {
  background: #0a2a0a;
  color: #1db954;
  border-color: #1db954;
  transform: rotate(-1deg) translateY(3px);
}
.social-sticker.youtube {
  background: var(--blood);
  color: var(--bleached);
  border-color: var(--bleached);
  transform: rotate(2deg) translateY(-2px);
}
.social-sticker.twitter {
  background: var(--newsprint);
  color: var(--ink);
  border-color: var(--ink);
  transform: rotate(-1.5deg) translateY(5px);
}
.social-sticker.reverbnation {
  background: var(--rust);
  color: var(--bleached);
  border-color: var(--bleached);
  transform: rotate(1deg) translateY(-3px);
}

.social-sticker:hover {
  transform: rotate(0) scale(1.05) !important;
  opacity: 0.9;
}

/* ===== FOOTER ===== */
footer {
  background: var(--ink);
  color: var(--bleached);
  padding: 40px 20px 30px;
  position: relative;
  overflow: hidden;
}

/* Scratched texture */
footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    38deg,
    transparent,
    transparent 4px,
    rgba(255,255,255,0.015) 4px,
    rgba(255,255,255,0.015) 5px
  );
  pointer-events: none;
}

.footer-inner {
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.footer-band-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 10vw, 7rem);
  letter-spacing: 8px;
  color: var(--bleached);
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
  text-shadow: 4px 4px 0 var(--blood), 6px 6px 0 rgba(0,0,0,0.5);
  margin-bottom: 8px;
}

.footer-tagline {
  font-family: 'Special Elite', monospace;
  font-size: 0.75rem;
  letter-spacing: 6px;
  color: rgba(240,234,216,1);
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  justify-content: center;
  margin-bottom: 20px;
}

.footer-links a {
  font-family: 'Special Elite', monospace;
  font-size: 0.75rem;
  color: rgba(240,234,216,1);
  text-decoration: none;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.footer-links a:hover {
  color: var(--blood-bright);
}
.footer-links span {
  color: rgba(139,0,0,0.4);
  font-size: 0.6rem;
}

.footer-copyright {
  font-family: 'VT323', monospace;
  font-size: 0.9rem;
  color: rgba(240,234,216,1);
  text-align: center;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 16px;
}

/* ===== MISC UTILITIES ===== */
.melbourne-stamp {
  font-family: 'VT323', monospace;
  font-size: 0.85rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(240,234,216,0.8);
  text-align: center;
  margin-top: 12px;
  display: block;
}

.xerox-warning {
  font-family: 'Special Elite', monospace;
  font-size: 0.7rem;
  letter-spacing: 2px;
  color: var(--bleached);
  opacity: 0.8;
  text-transform: uppercase;
  text-align: center;
  transform: rotate(-0.5deg);
  margin-top: 10px;
}

/* Ink splatter decorative element */
.ink-splat {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .bio-paper {
    padding: 24px 20px 24px 32px;
    margin-left: 0;
    margin-right: 0;
  }
  .gig-free-stamp {
    font-size: 2rem;
    top: 15px;
    right: 10px;
  }
  .ransom-title {
    gap: 2px 4px;
  }
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .releases-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .releases-grid {
    grid-template-columns: 1fr;
  }
  .nav-inner {
    gap: 2px 10px;
  }
  nav a {
    font-size: 0.75rem;
    padding: 3px 5px;
  }
}

/* ===== FIX: contact + newsletter headings were dark on dark (invisible) ===== */
.contact-subhead,
.newsletter-head {
  color: #ffffff !important;
  text-shadow: 2px 2px 0 #000, 0 0 6px rgba(139,0,0,0.5);
}

/* ===== FEATURED VIDEOS (Visual Noise section) ===== */
.video-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 32px;
  justify-content: center;
  align-items: flex-start;
  max-width: 1100px;
  margin: 0 auto;
}
.video-grid-footer {
  text-align: center;
  margin-top: 34px;
}
.video-feature {
  flex: 1 1 420px;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
/* Portrait clips: keep them from towering over landscape ones */
.video-feature--portrait {
  flex: 0 1 320px;
  max-width: 340px;
}
.video-feature--portrait .video-feature__player {
  max-height: 70vh;
  width: auto;
  max-width: 100%;
}
.video-feature__player {
  width: 100%;
  height: auto;
  display: block;
  background: #000;
  border: 5px solid var(--blood);
  box-shadow: 8px 8px 0 #000, 0 0 40px rgba(139,0,0,0.4);
  transform: rotate(-1deg);
}
/* YouTube embed — responsive 16:9 with matching punk border */
.video-feature__embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 5px solid var(--blood);
  box-shadow: 8px 8px 0 #000, 0 0 40px rgba(139,0,0,0.4);
  transform: rotate(-1deg);
  overflow: hidden;
}
.video-feature__embed iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}
@media (max-width: 700px) {
  .video-feature__embed { transform: none; border-width: 4px; }
}

.video-feature__title {
  font-family: 'Permanent Marker', 'Bebas Neue', sans-serif;
  font-size: clamp(1.4rem, 5vw, 2.4rem);
  letter-spacing: 3px;
  color: #f0ead8;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #000, 0 0 10px rgba(139,0,0,0.6);
  transform: rotate(-1.5deg);
  text-align: center;
}
@media (max-width: 700px) {
  .video-feature__player { transform: none; border-width: 4px; }
}

/* ===== SOCIAL LOGO BUTTONS (Contact section) ===== */
.social-links-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
}
.social-logo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: #111;
  border: 3px solid var(--blood, #8b0000);
  box-shadow: 5px 5px 0 #000;
  color: #f0ead8;
  transition: transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  transform: rotate(-2deg);
}
.social-logo-btn:nth-child(even) { transform: rotate(2deg); }
.social-logo-btn svg {
  width: 38px;
  height: 38px;
  display: block;
  filter: drop-shadow(2px 2px 0 #000);
}
.social-logo-btn:hover,
.social-logo-btn:focus-visible {
  transform: rotate(0deg) scale(1.12);
  box-shadow: 7px 7px 0 #000, 0 0 18px rgba(139,0,0,0.7);
}
.social-logo-btn--facebook:hover { color: #1877f2; border-color: #1877f2; }
.social-logo-btn--bandcamp:hover { color: #629aa9; border-color: #629aa9; }
.social-logo-btn--spotify:hover  { color: #1db954; border-color: #1db954; }
.social-logo-btn--youtube:hover  { color: #ff0000; border-color: #ff0000; }
.social-logo-btn--twitter:hover  { color: #ffffff; border-color: #ffffff; }
.social-logo-btn--reverb:hover   { color: #e43526; border-color: #e43526; }
@media (max-width: 480px) {
  .social-logo-btn { width: 60px; height: 60px; }
  .social-logo-btn svg { width: 32px; height: 32px; }
}

/* ===== CONTACT FORM STATUS ===== */
.contact-form-status {
  font-family: 'Special Elite', monospace;
  font-size: 0.95rem;
  margin-top: 10px;
  letter-spacing: 1px;
  min-height: 1.2em;
}
.contact-form-status--ok { color: #4caf50; text-shadow: 1px 1px 0 #000; }
.contact-form-status--err { color: #cc0000; text-shadow: 1px 1px 0 #000; }

/* Mobile fix: hero taglines were overflowing/clipping on narrow screens */
@media (max-width: 640px) {
  .hero-taglines {
    max-width: 100%;
    padding: 0 10px;
  }
  .tagline-1 {
    white-space: normal;        /* allow wrap instead of clipping */
    font-size: 0.95rem;
    letter-spacing: 2px;
    line-height: 1.6;
    padding: 4px 8px;
    max-width: 100%;
  }
  .tagline-2 {
    font-size: 1.15rem;
    text-align: center;
    max-width: 100%;
  }
  .tagline-3 {
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-align: center;
    max-width: 100%;
  }
}