/* ==========================================================================
   TARTU ROCK FEST - OFFICIAL LANDING PAGE STYLESHEET
   Retro Screenprint, Distressed Grimy Rock & Kraft Paper Aesthetic
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Cinzel:wght@700;900&family=Montserrat:wght@400;600;700;800;900&family=Permanent+Marker&family=Special+Elite&family=UnifrakturMaguntia&display=swap');

:root {
  --color-black: #0d0c0b;
  --color-ink: #141210;
  --color-red: #c81d25;
  --color-red-dark: #9e1218;
  --color-red-bright: #e0262e;
  --color-paper: #c4a47c;
  --color-paper-light: #e5d5be;
  --color-paper-dark: #96744c;
  --color-cream: #f4ece1;
  --color-white: #ffffff;
  --color-gray-dark: #2b2824;
  --color-border: #141210;
  
  --font-poster: 'Bebas Neue', 'Anton', Impact, sans-serif;
  --font-heavy: 'Anton', Impact, sans-serif;
  --font-serif: 'Cinzel', serif;
  --font-gothic: 'UnifrakturMaguntia', cursive;
  --font-punk: 'Permanent Marker', cursive;
  --font-stamp: 'Special Elite', monospace;
  --font-body: 'Montserrat', sans-serif;
  
  --shadow-distress: 3px 3px 0px var(--color-black);
  --shadow-distress-lg: 5px 5px 0px var(--color-black);
  --shadow-distress-red: 4px 4px 0px var(--color-red);
}

/* Base & Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: #bfa07a;
  background-image: url('../assets/paper-texture.jpg');
  background-repeat: repeat;
  background-size: 500px 500px;
  background-attachment: fixed;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1.5;
  overflow-x: hidden;
  position: relative;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Subtle Screenprint Grain Overlay */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999;
  opacity: 0.12;
  background-image: radial-gradient(var(--color-black) 1px, transparent 1px);
  background-size: 4px 4px;
}

/* Container */
.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Heavy Poster Rule Dividers */
.poster-rule {
  height: 6px;
  background-color: var(--color-black);
  margin: 1.5rem 0;
  border: none;
  width: 100%;
}

.poster-rule-double {
  height: 10px;
  border-top: 3px solid var(--color-black);
  border-bottom: 3px solid var(--color-black);
  background: transparent;
  margin: 1.5rem 0;
}

.poster-rule-red {
  height: 6px;
  background-color: var(--color-red);
  margin: 1.5rem 0;
  border: none;
}

/* Distressed Vintage Badges & Stamps */
.stamp {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border: 3px solid var(--color-red);
  color: var(--color-red);
  font-family: var(--font-stamp);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  transform: rotate(-3deg);
  background: rgba(244, 236, 225, 0.85);
  box-shadow: 2px 2px 0 var(--color-black);
  mask-image: radial-gradient(circle at center, black 80%, rgba(0,0,0,0.6) 100%);
}

.stamp-black {
  border-color: var(--color-black);
  color: var(--color-black);
  transform: rotate(2deg);
}

.stamp-coming-soon {
  border: 3px dashed var(--color-red);
  background: var(--color-black);
  color: var(--color-cream);
  transform: rotate(-2deg);
}

/* ==========================================================================
   TOP NOTIFICATION BAR & HEADER
   ========================================================================== */
.top-banner {
  background-color: var(--color-black);
  color: var(--color-cream);
  padding: 0.5rem 0;
  font-family: var(--font-stamp);
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 2px solid var(--color-red);
}

.top-banner-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.top-banner-dates {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.top-banner-dates span.red-dot {
  color: var(--color-red-bright);
  font-size: 1.2rem;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(216, 194, 163, 0.95);
  backdrop-filter: blur(4px);
  border-bottom: 4px solid var(--color-black);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.25rem;
  max-width: 1140px;
  margin: 0 auto;
}

.logo-link {
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.logo-text-tartu {
  font-family: var(--font-poster);
  font-size: 2rem;
  line-height: 1;
  color: var(--color-black);
  letter-spacing: 1px;
}

.logo-text-rockfest {
  font-family: var(--font-poster);
  font-size: 2rem;
  line-height: 1;
  color: var(--color-red);
  letter-spacing: 1px;
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: 1.5rem;
  align-items: center;
}

.nav-link {
  text-decoration: none;
  font-family: var(--font-poster);
  font-size: 1.35rem;
  letter-spacing: 1px;
  color: var(--color-black);
  text-transform: uppercase;
  position: relative;
  transition: color 0.2s ease;
  padding: 0.2rem 0;
}

.nav-link:hover {
  color: var(--color-red);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background-color: var(--color-red);
  transition: width 0.2s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.nav-btn-ticket {
  background-color: var(--color-red);
  color: var(--color-cream);
  font-family: var(--font-poster);
  font-size: 1.3rem;
  letter-spacing: 1px;
  padding: 0.45rem 1.2rem;
  text-decoration: none;
  text-transform: uppercase;
  border: 2px solid var(--color-black);
  box-shadow: 3px 3px 0 var(--color-black);
  transition: all 0.15s ease;
  display: inline-block;
}

.nav-btn-ticket:hover {
  background-color: var(--color-black);
  color: var(--color-cream);
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--color-red);
}

.nav-toggle {
  display: none;
  background: none;
  border: 3px solid var(--color-black);
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 3px;
  background-color: var(--color-black);
}

/* ==========================================================================
   HERO POSTER SECTION
   ========================================================================== */
.hero-section {
  padding: 2.5rem 0 2rem;
  text-align: center;
}

.poster-frame {
  border: 5px solid var(--color-black);
  background: rgba(229, 213, 190, 0.45);
  padding: 2rem 1.5rem;
  box-shadow: 8px 8px 0 rgba(13, 12, 11, 0.85);
  position: relative;
  margin-bottom: 2rem;
}

.poster-inner-border {
  border: 2px solid var(--color-black);
  padding: 1.5rem 1rem;
}

/* Main Typography Masthead */
.masthead-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-bottom: 0.5rem;
}

.title-tartu {
  font-family: var(--font-poster);
  font-size: clamp(3rem, 11vw, 7.5rem);
  line-height: 0.78;
  color: var(--color-black);
  letter-spacing: -2px;
  text-transform: uppercase;
  font-weight: 900;
  display: block;
  align-self: flex-end;
  vertical-align: bottom;
  transform: scaleY(1.7);
  transform-origin: bottom center;
  margin: 0;
  padding: 0;
}

.title-rockfest-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  align-self: flex-end;
  font-family: var(--font-poster);
  font-size: clamp(2.6rem, 9.5vw, 6.4rem);
  line-height: 0.78;
  color: var(--color-red);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 900;
  margin: 0;
  padding: 0;
}

.title-rock,
.title-fest {
  font-family: var(--font-poster);
  font-size: clamp(2.6rem, 9.5vw, 6.4rem);
  line-height: 0.78;
  color: var(--color-red);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 900;
  display: block;
  margin: 0;
  padding: 0;
}

/* Date & Location Banners */
.poster-date-banner {
  margin: 1.25rem 0;
  padding: 0.75rem 0 0.25rem 0;
  border-top: 4px solid var(--color-black);
  border-bottom: 4px solid var(--color-black);
}

.poster-date-text {
  font-family: var(--font-poster);
  font-size: clamp(2rem, 6.5vw, 4.2rem);
  color: var(--color-red);
  letter-spacing: 2px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.poster-date-text .year-num {
  color: var(--color-black);
}

.poster-date-text .bullet {
  color: var(--color-black);
  font-size: 1.8rem;
}

/* 67 Meme Alternating Bounce Animation */
.meme-bounce {
  display: inline-block;
  will-change: transform;
  transform-origin: center center;
}

.meme-six {
  animation: memeBounceSix 1.15s ease-in-out infinite;
}

.meme-seven {
  animation: memeBounceSeven 1.15s ease-in-out infinite;
}

@keyframes memeBounceSix {
  0%, 100% {
    transform: translateY(-0.14em) scale(1.04) rotate(-3deg);
  }
  16% {
    transform: translateY(-0.18em) scale(1.07) rotate(-4deg);
  }
  28% {
    transform: translateY(-0.12em) scale(1.03) rotate(-2deg);
  }
  50% {
    transform: translateY(0.14em) scale(0.96) rotate(3deg);
  }
  66% {
    transform: translateY(0.18em) scale(0.93) rotate(4deg);
  }
  78% {
    transform: translateY(0.12em) scale(0.97) rotate(2deg);
  }
}

@keyframes memeBounceSeven {
  0%, 100% {
    transform: translateY(0.14em) scale(0.96) rotate(3deg);
  }
  16% {
    transform: translateY(0.18em) scale(0.93) rotate(4deg);
  }
  28% {
    transform: translateY(0.12em) scale(0.97) rotate(2deg);
  }
  50% {
    transform: translateY(-0.14em) scale(1.04) rotate(-3deg);
  }
  66% {
    transform: translateY(-0.18em) scale(1.07) rotate(-4deg);
  }
  78% {
    transform: translateY(-0.12em) scale(1.03) rotate(-2deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .meme-six,
  .meme-seven {
    animation: none;
  }
}

.poster-venue-banner {
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 4px solid var(--color-black);
}

.poster-venue-text {
  font-family: var(--font-heavy);
  font-size: clamp(1.8rem, 5.5vw, 3.6rem);
  color: var(--color-black);
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
}

/* Tartu Laululava Graphic */
.laululava-graphic-wrap {
  width: 100%;
  margin: 1rem 0 1.5rem;
  padding: 0.5rem 0;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.laululava-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Hero Intro Copy */
.hero-copy-box {
  max-width: 900px;
  margin: 2rem auto 1.5rem;
  text-align: center;
}

.hero-lead-text {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-black);
  margin-bottom: 1.25rem;
}

.hero-lead-text mark {
  background: transparent;
  color: var(--color-red);
  font-weight: 800;
}

.hero-sub-text {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-gray-dark);
  line-height: 1.6;
  margin-bottom: 2rem;
}

.hero-cta-group {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.btn-primary-rock {
  background-color: var(--color-red);
  color: var(--color-cream);
  font-family: var(--font-poster);
  font-size: 1.9rem;
  letter-spacing: 2px;
  padding: 0.8rem 2.2rem;
  text-decoration: none;
  text-transform: uppercase;
  border: 4px solid var(--color-black);
  box-shadow: 6px 6px 0 var(--color-black);
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.btn-primary-rock:hover {
  background-color: var(--color-black);
  color: var(--color-cream);
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--color-red);
}

.btn-secondary-rock {
  background-color: transparent;
  color: var(--color-black);
  font-family: var(--font-poster);
  font-size: 1.6rem;
  letter-spacing: 1px;
  padding: 0.75rem 1.8rem;
  text-decoration: none;
  text-transform: uppercase;
  border: 3px solid var(--color-black);
  box-shadow: 4px 4px 0 var(--color-black);
  transition: all 0.15s ease;
}

.btn-secondary-rock:hover {
  background-color: var(--color-black);
  color: var(--color-cream);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--color-red);
}

/* ==========================================================================
   SECTION HEADERS
   ========================================================================== */
.section-wrapper {
  padding: 3.5rem 0;
  position: relative;
}

.section-header {
  text-align: center;
  margin-bottom: 2.5rem;
  position: relative;
}

.section-title {
  font-family: var(--font-poster);
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  line-height: 0.95;
  color: var(--color-black);
  letter-spacing: 2px;
  text-transform: uppercase;
  display: inline-block;
  position: relative;
}

.section-title span.red {
  color: var(--color-red);
}

.section-subtitle {
  font-family: var(--font-stamp);
  font-size: 1.05rem;
  color: var(--color-gray-dark);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 0.5rem;
}

/* ==========================================================================
   TEASER & COMING SOON COMPONENTS
   ========================================================================== */
.teaser-banner-box {
  background: rgba(244, 236, 225, 0.95);
  border: 4px dashed var(--color-black);
  padding: 2.5rem 1.5rem;
  text-align: center;
  box-shadow: 6px 6px 0 var(--color-black);
  margin-bottom: 2rem;
}

.teaser-banner-title {
  font-family: var(--font-poster);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  color: var(--color-red);
  letter-spacing: 2px;
  line-height: 1;
  margin-bottom: 0.75rem;
}

.teaser-banner-text {
  font-size: 1.1rem;
  color: var(--color-gray-dark);
  max-width: 700px;
  margin: 0 auto 1.5rem;
  line-height: 1.5;
}

.teaser-mystery-card {
  border: 3px dashed var(--color-black);
  background: rgba(229, 213, 190, 0.5);
  padding: 1.75rem 1.5rem;
  text-align: center;
  transition: all 0.2s ease;
}

.teaser-mystery-card:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: var(--color-red);
  transform: translateY(-3px);
  box-shadow: 4px 4px 0 var(--color-black);
}

.teaser-mystery-icon {
  font-size: 2.5rem;
  color: var(--color-red);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.teaser-mystery-title {
  font-family: var(--font-poster);
  font-size: 1.8rem;
  color: var(--color-black);
  letter-spacing: 1.5px;
  margin-bottom: 0.35rem;
}

.teaser-mystery-desc {
  font-family: var(--font-stamp);
  font-size: 0.9rem;
  color: var(--color-gray-dark);
}

/* ==========================================================================
   LINEUP & STAGES (ESINEJAD JA KAVA)
   ========================================================================== */
.lineup-filter-bar {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.filter-btn {
  background: rgba(244, 236, 225, 0.7);
  border: 3px solid var(--color-black);
  font-family: var(--font-poster);
  font-size: 1.35rem;
  letter-spacing: 1px;
  padding: 0.4rem 1.25rem;
  cursor: pointer;
  color: var(--color-black);
  text-transform: uppercase;
  box-shadow: 3px 3px 0 var(--color-black);
  transition: all 0.15s ease;
}

.filter-btn:hover, .filter-btn.active {
  background-color: var(--color-black);
  color: var(--color-cream);
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--color-red);
}

.filter-btn.active {
  background-color: var(--color-red);
  border-color: var(--color-black);
}

/* Day Container */
.day-schedule-card {
  border: 4px solid var(--color-black);
  background: rgba(244, 236, 225, 0.85);
  box-shadow: 6px 6px 0 var(--color-black);
  margin-bottom: 3rem;
  padding: 1.5rem;
}

.day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  border-bottom: 4px solid var(--color-black);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

.day-title-text {
  font-family: var(--font-poster);
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: var(--color-red);
  line-height: 1;
  letter-spacing: 1px;
}

.day-time-badge {
  font-family: var(--font-stamp);
  font-size: 0.95rem;
  background: var(--color-black);
  color: var(--color-cream);
  padding: 0.35rem 0.85rem;
  letter-spacing: 1px;
}

/* Dual Stage Grid */
.stages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}

.stage-column {
  border: 3px solid var(--color-black);
  background: rgba(229, 213, 190, 0.6);
  padding: 1.25rem;
}

.stage-column.pealava {
  border-color: var(--color-black);
  border-width: 3px;
  background: rgba(244, 236, 225, 0.95);
  position: relative;
}

.stage-badge {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-black);
  color: var(--color-cream);
  padding: 0.5rem 1rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-poster);
  font-size: 1.4rem;
  letter-spacing: 1px;
}

.stage-badge.a-lava {
  background: var(--color-red);
}

.stage-badge span.sub {
  font-family: var(--font-stamp);
  font-size: 0.85rem;
  color: var(--color-cream);
}

/* Band Items */
.bands-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.band-card {
  border: 2px solid var(--color-black);
  background: rgba(255, 255, 255, 0.5);
  padding: 1rem 1.2rem;
  transition: all 0.2s ease;
  position: relative;
}

.band-card:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateX(4px);
  box-shadow: 4px 4px 0 var(--color-black);
}

.band-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.4rem;
}

.band-genre-tag {
  font-family: var(--font-stamp);
  font-size: 0.75rem;
  background: var(--color-black);
  color: var(--color-cream);
  padding: 0.15rem 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.band-desc {
  font-size: 0.88rem;
  color: var(--color-gray-dark);
  font-weight: 500;
  line-height: 1.4;
}

/* Custom Band Typography Styled Like Posters */
.band-name {
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1;
}

/* Kosmikud - Condensed Tall Gothic */
.band-logo-kosmikud {
  font-family: var(--font-poster);
  font-size: 2.3rem;
  letter-spacing: 4px;
  color: var(--color-black);
  font-weight: 900;
}

/* Singer Vinger - Rough Punk Brush */
.band-logo-singervinger {
  font-family: var(--font-punk);
  font-size: 1.8rem;
  color: var(--color-black);
  text-transform: none;
  transform: rotate(-1deg);
  display: inline-block;
}

/* Põhja Konn - Folk Slavic Rock */
.band-logo-pohjakonn {
  font-family: var(--font-poster);
  font-size: 2.1rem;
  letter-spacing: 5px;
  color: var(--color-black);
  font-weight: 900;
}

/* Dramamama - 70s Outlined Groove */
.band-logo-dramamama {
  font-family: var(--font-poster);
  font-size: 2rem;
  letter-spacing: 3px;
  color: var(--color-black);
  -webkit-text-stroke: 1px var(--color-black);
  letter-spacing: 2px;
}

/* Vennaskond - Fraktur Blackletter */
.band-logo-vennaskond {
  font-family: var(--font-gothic);
  font-size: 2.6rem;
  color: var(--color-red);
  text-transform: none;
  font-weight: normal;
  line-height: 0.9;
}

/* DND - Stencil Curved */
.band-logo-dnd {
  font-family: var(--font-heavy);
  font-size: 2.4rem;
  letter-spacing: 6px;
  color: var(--color-red);
  font-weight: 900;
}

/* Elephants From Neptune - Art Deco Rock Caps */
.band-logo-elephants {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 3px;
  color: var(--color-red);
  line-height: 1.1;
}

/* The Tuberkuloited - Crimson Rock Slab */
.band-logo-tuberkuloited {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--color-red);
  letter-spacing: 1px;
}

/* B-Lava Band Logos */
.band-logo-raev {
  font-family: var(--font-heavy);
  font-size: 1.8rem;
  letter-spacing: 3px;
  color: var(--color-black);
}

.band-logo-stepdog {
  font-family: var(--font-punk);
  font-size: 1.5rem;
  color: var(--color-black);
  text-transform: uppercase;
}

.band-logo-kondimootor {
  font-family: var(--font-poster);
  font-size: 1.8rem;
  letter-spacing: 2px;
  color: var(--color-black);
}

.band-logo-kaibald {
  font-family: var(--font-stamp);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--color-black);
}

.band-logo-sodaeffect {
  font-family: var(--font-heavy);
  font-size: 1.7rem;
  letter-spacing: 2px;
  color: var(--color-black);
}

.band-logo-merwis {
  font-family: var(--font-poster);
  font-size: 1.8rem;
  letter-spacing: 3px;
  color: var(--color-black);
}

.band-logo-artifer {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--color-black);
}

.band-logo-exanity {
  font-family: var(--font-heavy);
  font-size: 1.7rem;
  letter-spacing: 3px;
  color: var(--color-black);
}

/* ==========================================================================
   TICKETS & PRICING (HINNAINFO)
   ========================================================================== */
.tickets-section {
  background: rgba(13, 12, 11, 0.05);
  border-top: 5px solid var(--color-black);
  border-bottom: 5px solid var(--color-black);
  padding: 4rem 0;
}

.tickets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-bottom: 2.5rem;
}

/* Perforated Ticket Stub Design */
.ticket-stub {
  background: var(--color-cream);
  border: 3px solid var(--color-black);
  box-shadow: 6px 6px 0 var(--color-black);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.ticket-stub:hover {
  transform: translateY(-4px);
  box-shadow: 8px 8px 0 var(--color-red);
}

.ticket-stub.featured {
  border-color: var(--color-red);
  box-shadow: 6px 6px 0 var(--color-red);
}

/* Ticket Notches */
.ticket-stub::before, .ticket-stub::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  background-color: #bfa07a;
  background-image: url('../assets/paper-texture.jpg');
  border: 3px solid var(--color-black);
  border-radius: 50%;
  top: 140px;
  z-index: 2;
}

.ticket-stub::before {
  left: -16px;
}

.ticket-stub::after {
  right: -16px;
}

.ticket-header {
  background: var(--color-black);
  color: var(--color-cream);
  padding: 1rem 1.25rem;
  text-align: center;
  border-bottom: 3px dashed var(--color-cream);
}

.ticket-stub.featured .ticket-header {
  background: var(--color-red);
}

.ticket-type {
  font-family: var(--font-poster);
  font-size: 1.8rem;
  letter-spacing: 2px;
  line-height: 1;
  text-transform: uppercase;
}

.ticket-validity {
  font-family: var(--font-stamp);
  font-size: 0.8rem;
  letter-spacing: 1px;
  margin-top: 0.25rem;
  opacity: 0.9;
}

.ticket-body {
  padding: 1.75rem 1.5rem 1.25rem;
  text-align: center;
  position: relative;
}

.ticket-perforation {
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  border-top: 3px dashed var(--color-black);
}

.ticket-price {
  font-family: var(--font-heavy);
  font-size: 3.5rem;
  color: var(--color-black);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.ticket-price.price-coming-soon,
.ticket-price.price-early-bird {
  font-size: 2.35rem;
  color: var(--color-red);
  letter-spacing: 1.5px;
}

.ticket-price span.currency {
  font-size: 2.2rem;
  color: var(--color-red);
  margin-left: 0.2rem;
}

.ticket-desc {
  font-size: 0.95rem;
  color: var(--color-gray-dark);
  margin-bottom: 1.25rem;
  min-height: 48px;
}

.ticket-features {
  list-style: none;
  text-align: left;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  border-top: 1px solid rgba(0,0,0,0.15);
  padding-top: 0.75rem;
}

.ticket-features li {
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ticket-features li::before {
  content: "★";
  color: var(--color-red);
  font-size: 0.8rem;
}

.ticket-footer {
  padding: 0 1.5rem 1.5rem;
}

.btn-ticket-buy {
  display: block;
  width: 100%;
  background: var(--color-black);
  color: var(--color-cream);
  font-family: var(--font-poster);
  font-size: 1.5rem;
  letter-spacing: 1.5px;
  padding: 0.65rem 1rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  border: 2px solid var(--color-black);
  box-shadow: 3px 3px 0 var(--color-black);
  transition: all 0.15s ease;
}

.ticket-stub.featured .btn-ticket-buy {
  background: var(--color-red);
  border-color: var(--color-red-dark);
}

.btn-ticket-buy:hover {
  background: var(--color-red);
  color: var(--color-cream);
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--color-black);
}

.ticket-stub.featured .btn-ticket-buy:hover {
  background: var(--color-black);
}

.btn-ticket-coming-soon {
  background: #44403c !important;
  color: #d6d3d1 !important;
  cursor: default;
  box-shadow: none !important;
}

.btn-ticket-coming-soon:hover {
  background: #44403c !important;
  transform: none !important;
}

/* Pricing Disclaimers & Notes */
.pricing-notice-box {
  background: rgba(244, 236, 225, 0.9);
  border: 3px solid var(--color-black);
  padding: 1.5rem 1.75rem;
  box-shadow: 4px 4px 0 var(--color-black);
  max-width: 900px;
  margin: 0 auto;
}

.notice-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  font-size: 0.92rem;
  color: var(--color-ink);
}

.notice-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.notice-list li span.bullet-red {
  color: var(--color-red);
  font-size: 1.2rem;
  line-height: 1;
}

.notice-group-contact {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 2px dashed var(--color-black);
  text-align: center;
  font-family: var(--font-stamp);
  font-size: 0.95rem;
}

.notice-group-contact a {
  color: var(--color-red);
  font-weight: 700;
  text-decoration: underline;
}

/* ==========================================================================
   STRAWPOLL / FAN VOTING EMBED SECTION
   ========================================================================= */
.poll-section {
  padding: 4rem 0;
}

.poll-container {
  max-width: 850px;
  margin: 0 auto;
  background: rgba(244, 236, 225, 0.95);
  border: 4px solid var(--color-black);
  padding: 2rem;
  box-shadow: 7px 7px 0 var(--color-black);
  position: relative;
}

.poll-intro {
  text-align: center;
  margin-bottom: 1.5rem;
}

.poll-intro p {
  font-size: 1.05rem;
  color: var(--color-gray-dark);
}

/* Poll Notice Coming Soon Box */
.poll-notice-box {
  background: #ffffff;
  border: 3px dashed var(--color-black);
  padding: 3.5rem 1.5rem;
  text-align: center;
  box-shadow: 4px 4px 0 var(--color-black);
}

.poll-notice-title {
  font-family: var(--font-poster);
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: var(--color-red);
  letter-spacing: 2px;
  line-height: 1.15;
  margin: 0;
  text-transform: uppercase;
}

/* Strawpoll Responsive Embed Wrapper */
.strawpoll-embed-wrapper {
  width: 100%;
  min-height: 520px;
  border: 2px solid var(--color-black);
  background: #ffffff;
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
}

.strawpoll-iframe {
  width: 100%;
  height: 560px;
  border: none;
  display: block;
}

/* Local Interactive Poll Fallback */
.fallback-poll {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.poll-option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid var(--color-black);
  padding: 0.6rem 1rem;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  overflow: hidden;
}

.poll-option-row:hover {
  background: rgba(255, 255, 255, 1);
  transform: translateX(3px);
  border-color: var(--color-red);
}

.poll-option-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 2;
}

.poll-radio {
  accent-color: var(--color-red);
  transform: scale(1.2);
}

.poll-option-name {
  font-family: var(--font-poster);
  font-size: 1.35rem;
  letter-spacing: 1px;
  color: var(--color-black);
}

.poll-vote-count {
  font-family: var(--font-stamp);
  font-size: 0.9rem;
  color: var(--color-red);
  font-weight: 700;
  z-index: 2;
}

.poll-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: rgba(200, 29, 37, 0.18);
  transition: width 0.4s ease;
  z-index: 1;
}

.poll-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.25rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.btn-vote-submit {
  background: var(--color-red);
  color: var(--color-cream);
  font-family: var(--font-poster);
  font-size: 1.4rem;
  letter-spacing: 1px;
  padding: 0.55rem 1.8rem;
  border: 3px solid var(--color-black);
  box-shadow: 4px 4px 0 var(--color-black);
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-vote-submit:hover {
  background: var(--color-black);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--color-red);
}

/* ==========================================================================
   INFO & FESTIVAL GUIDE (OLULINE INFO)
   ========================================================================== */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

.info-card {
  background: rgba(244, 236, 225, 0.9);
  border: 3px solid var(--color-black);
  padding: 1.75rem;
  box-shadow: 5px 5px 0 var(--color-black);
}

.info-card-title {
  font-family: var(--font-poster);
  font-size: 2rem;
  color: var(--color-black);
  letter-spacing: 1px;
  border-bottom: 3px solid var(--color-red);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.info-card p {
  font-size: 0.95rem;
  color: var(--color-gray-dark);
  line-height: 1.6;
  margin-bottom: 0.8rem;
}

.info-card ul {
  list-style: none;
  padding-left: 0;
}

.info-card ul li {
  margin-bottom: 0.6rem;
  font-size: 0.92rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.info-card ul li::before {
  content: "■";
  color: var(--color-red);
  font-size: 0.75rem;
  margin-top: 0.2rem;
}

/* ==========================================================================
   POSTER GALLERY / DOWNLOADS
   ========================================================================== */
.gallery-section {
  padding: 3.5rem 0;
}

.poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.poster-card {
  border: 4px solid var(--color-black);
  background: var(--color-cream);
  box-shadow: 6px 6px 0 var(--color-black);
  padding: 0.75rem;
  text-align: center;
  transition: transform 0.2s ease;
}

.poster-card:hover {
  transform: translateY(-4px);
  box-shadow: 8px 8px 0 var(--color-red);
}

.poster-img-wrap {
  overflow: hidden;
  border: 2px solid var(--color-black);
  margin-bottom: 0.75rem;
  background: #000;
  cursor: pointer;
}

.poster-img-wrap img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

.poster-card:hover .poster-img-wrap img {
  transform: scale(1.03);
}

.poster-card-title {
  font-family: var(--font-poster);
  font-size: 1.35rem;
  color: var(--color-black);
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
}

.btn-download-poster {
  display: inline-block;
  background: var(--color-black);
  color: var(--color-cream);
  font-family: var(--font-stamp);
  font-size: 0.85rem;
  padding: 0.4rem 1rem;
  text-decoration: none;
  text-transform: uppercase;
  border: 2px solid var(--color-black);
  transition: all 0.15s ease;
}

.btn-download-poster:hover {
  background: var(--color-red);
}

/* ==========================================================================
   PREVIOUS YEARS VIDEOS (EELMISTE AASTATE VIDEOD)
   ========================================================================== */
.videos-section {
  padding: 3.5rem 0;
  background: rgba(13, 12, 11, 0.05);
  border-top: 5px solid var(--color-black);
  border-bottom: 5px solid var(--color-black);
}

.videos-main-grid {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: center;
}

.video-featured-wrap {
  width: 100%;
  max-width: 720px;
  background: var(--color-cream);
  border: 4px solid var(--color-black);
  box-shadow: 6px 6px 0 var(--color-black);
  padding: 1rem;
  text-align: center;
}

.video-featured-header {
  margin-bottom: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.video-featured-title {
  font-family: var(--font-poster);
  font-size: 1.5rem;
  color: var(--color-black);
  letter-spacing: 1px;
}

.video-iframe-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border: 2px solid var(--color-black);
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-iframe-container iframe {
  width: 100%;
  height: 100%;
  max-width: 100%;
  border: none;
}

.video-reels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  width: 100%;
}

.reel-card {
  background: var(--color-cream);
  border: 4px solid var(--color-black);
  box-shadow: 6px 6px 0 var(--color-black);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.2s ease;
}

.reel-card:hover {
  transform: translateY(-4px);
  box-shadow: 8px 8px 0 var(--color-red);
}

.reel-card-title {
  font-family: var(--font-poster);
  font-size: 1.35rem;
  color: var(--color-black);
  letter-spacing: 1px;
  margin-bottom: 0.75rem;
}

.reel-iframe-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  border: 2px solid var(--color-black);
  min-height: 476px;
  overflow: hidden;
}

.reel-iframe-wrap iframe {
  max-width: 100%;
  border: none;
}

.year-video-divider {
  text-align: center;
  width: 100%;
  margin: 1.5rem 0 1rem;
}

.year-video-title {
  font-family: var(--font-poster);
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--color-black);
  letter-spacing: 2px;
  text-transform: uppercase;
  display: inline-block;
  background: rgba(244, 236, 225, 0.95);
  border: 3px solid var(--color-black);
  padding: 0.35rem 1.5rem;
  box-shadow: 4px 4px 0 var(--color-black);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--color-black);
  color: var(--color-cream);
  border-top: 6px solid var(--color-red);
  padding: 3.5rem 0 2rem;
  font-size: 0.95rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}

.footer-brand h3 {
  font-family: var(--font-poster);
  font-size: 2.4rem;
  color: var(--color-cream);
  letter-spacing: 1px;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.footer-brand h3 span.red {
  color: var(--color-red);
}

.footer-brand p {
  font-size: 0.9rem;
  color: #b0a89d;
  line-height: 1.5;
}

.footer-col h4 {
  font-family: var(--font-poster);
  font-size: 1.5rem;
  color: var(--color-red);
  letter-spacing: 1px;
  margin-bottom: 1rem;
  border-bottom: 2px solid #333;
  padding-bottom: 0.35rem;
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 0.5rem;
}

.footer-links a {
  color: var(--color-cream);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--color-red);
  text-decoration: underline;
}

.footer-bottom {
  border-top: 1px solid #2b2824;
  padding-top: 1.5rem;
  text-align: center;
  font-family: var(--font-stamp);
  font-size: 0.85rem;
  color: #888075;
}

/* Lightbox Modal */
.lightbox-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
}

.lightbox-modal.active {
  display: flex;
}

.lightbox-content {
  max-width: 90vw;
  max-height: 90vh;
  position: relative;
}

.lightbox-content img {
  max-width: 100%;
  max-height: 90vh;
  border: 4px solid var(--color-cream);
  box-shadow: 0 0 25px rgba(0,0,0,0.8);
}

.lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  color: var(--color-cream);
  font-size: 2rem;
  font-family: var(--font-poster);
  cursor: pointer;
  background: none;
  border: none;
}

/* ==========================================================================
   RESPONSIVE DESIGN & MOBILE OPTIMIZATIONS
   ========================================================================== */
@media (max-width: 860px) {
  .top-banner {
    display: none;
  }

  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: rgba(229, 213, 190, 0.98);
    border-bottom: 4px solid var(--color-black);
    flex-direction: column;
    padding: 1.5rem;
    gap: 1rem;
    box-shadow: 0 8px 15px rgba(0,0,0,0.2);
  }

  .nav-menu.open {
    display: flex;
  }

  .nav-toggle {
    display: flex;
  }

  .masthead-row {
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: nowrap;
    gap: 0.5rem 1rem;
  }

  .title-tartu {
    font-size: clamp(2.5rem, 13vw, 5.5rem);
  }

  .title-rockfest-box,
  .title-rock,
  .title-fest {
    font-size: clamp(2.2rem, 11vw, 4.8rem);
  }

  .ticket-stub::before, .ticket-stub::after {
    display: none;
  }

  .video-reels-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
  }
}

@media (max-width: 540px) {
  .container {
    padding: 0 0.75rem;
  }

  .poster-frame {
    padding: 1.25rem 0.5rem;
    box-shadow: 5px 5px 0 var(--color-black);
  }

  .poster-inner-border {
    padding: 1rem 0.5rem;
  }

  .masthead-row {
    gap: 0.25rem 0.6rem;
  }

  .title-tartu {
    font-size: clamp(2.2rem, 13vw, 3.8rem);
  }

  .title-rockfest-box,
  .title-rock,
  .title-fest {
    font-size: clamp(1.9rem, 11vw, 3.3rem);
  }

  .poster-date-text {
    font-size: clamp(1.4rem, 5.5vw, 2.2rem);
  }

  .poster-venue-text {
    font-size: clamp(1.2rem, 5vw, 1.8rem);
  }

  .section-title {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .year-video-title {
    font-size: 1.6rem;
    padding: 0.25rem 1rem;
  }

  .video-featured-wrap {
    padding: 0.65rem;
  }

  .reel-card {
    padding: 0.75rem;
  }

  .poll-notice-box {
    padding: 2.2rem 1rem;
  }
}