/* =========================================================
   PIGGYBEER VOL. 10 — Web
   Forest green + red flame + cream + yellow
   ========================================================= */

:root {
  --green: #1F3A2E;
  --green-deep: #15281F;
  --green-bright: #2E5743;
  --red: #D63027;
  --red-deep: #A21F18;
  --cream: #E8D5A0;
  --cream-soft: #F0E2B8;
  --yellow: #FFD93D;
  --black: #0B0B0B;
  --max-w: 1440px;

  /* Two-font system — both pure sans-serif, both fully Czech-compatible */
  --font-bold: "Archivo Black", Impact, system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* Reserve scrollbar space on BOTH sides so content stays truly centered */
  scrollbar-gutter: stable both-edges;
}
body {
  background: var(--green);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Subtle film-grain overlay on top of everything */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.50;
  mix-blend-mode: overlay;
}
/* Page-wide vignette — corners go slightly darker so the centre reads brighter
   and the page no longer feels like a single flat colour. */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9998;
  background:
    radial-gradient(ellipse 110% 80% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.35) 100%);
}

/* ============================================
   NAV
   ============================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "left brand right";
  align-items: center;
  gap: 24px;
  padding: 14px 32px;
  background: linear-gradient(to bottom, rgba(11,11,11,0.55), rgba(11,11,11,0));
  backdrop-filter: blur(2px);
}
.nav__links--left  { grid-area: left;  justify-content: flex-end; }
.nav__brand        { grid-area: brand; }
.nav__links--right { grid-area: right; justify-content: flex-start; }
/* Lang toggle floats top-right, outside the grid so it doesn't push the brand off-center */
.lang-toggle {
  position: absolute;
  top: 50%;
  right: 32px;
  transform: translateY(-50%);
}
.nav__burger { grid-area: right; justify-self: end; }
.nav__brand img {
  display: block;
  height: 58px;
  width: auto;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45));
  transition: transform 0.25s ease;
}
.nav__brand:hover img { transform: scale(1.08); }
.nav__links {
  display: flex; gap: 36px; align-items: center;
  font-family: var(--font-bold);
  font-size: 14px;
  letter-spacing: 0.14em;
}
.nav__links a {
  color: var(--cream);
  position: relative;
  padding: 4px 0;
  transition: color 0.2s;
}
.nav__links a:hover { color: var(--red); }

/* Lang toggle — minimal text, no box */
.lang-toggle {
  background: transparent;
  border: 0;
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  padding: 4px 0;
  cursor: pointer;
  margin-left: 0;
  transition: opacity 0.2s;
}
.lang-toggle:hover { opacity: 0.85; }
.lang-toggle span { opacity: 0.42; transition: opacity 0.2s, color 0.2s; }
.lang-toggle .is-active { opacity: 1; color: var(--red); }
.lang-toggle__sep { margin: 0 4px; opacity: 0.5 !important; color: var(--cream); }

.nav__burger {
  display: none;
  background: transparent;
  border: 0;
  width: 36px; height: 36px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 0;
}
.nav__burger span {
  display: block;
  height: 2px;
  background: var(--cream);
  transition: transform 0.2s, opacity 0.2s;
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================
   HERO  (matches Landing_page_hero.pdf reference)
   Flat forest green, trees flanking, central lockup
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 80px 24px 80px;
  background-color: #15281F;
  background-image:
    radial-gradient(ellipse 80% 40% at 50% 35%, rgba(170, 110, 60, 0.18) 0%, rgba(15, 30, 22, 0) 65%),
    linear-gradient(to bottom, #2E5743 0%, #234435 50%, #15281F 100%);
}
/* Background video — sits at the deepest layer, cover-fit, decorative only */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
/* Green tint on top of the video — keeps the brand palette dominant and makes
   the hero text readable no matter what frame is showing. */
.hero__video-tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    /* Warm rim of light around the headline area */
    radial-gradient(ellipse 80% 40% at 50% 35%, rgba(170, 110, 60, 0.16) 0%, rgba(15, 30, 22, 0) 65%),
    /* Green tint — video reads more clearly, brand still dominates */
    linear-gradient(180deg,
      rgba(15, 30, 22, 0.72) 0%,
      rgba(15, 30, 22, 0.42) 35%,
      rgba(15, 30, 22, 0.42) 60%,
      rgba(15, 30, 22, 0.80) 100%);
}
/* Subtle vignette pulling toward the edges */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(11,11,11,0.35) 100%);
  pointer-events: none;
  z-index: 2;
}
/* Šumava silhouette — natural-ratio <img> pinned to hero bottom. No crop, no JS.
   Color = #15281F = lineup background, so the silhouette flows directly into
   the next section. */
.hero__silhouette {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
  z-index: 5;
}
.hero__content {
  position: relative;
  z-index: 20; /* above all 9 parallax layers */
  width: 100%;
  max-width: 1100px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.hero__lockup {
  display: block;
  width: min(86%, 1000px);
  height: auto;
  margin: 0 auto;
  filter:
    /* Red bloom around the letterforms */
    drop-shadow(0 0 30px rgba(214, 48, 39, 0.35))
    /* Hard offset drop-shadow — letterpress lift */
    drop-shadow(0 10px 0 rgba(0, 0, 0, 0.55))
    /* Soft cast shadow further down — anchors the lockup to the ground */
    drop-shadow(0 22px 28px rgba(0, 0, 0, 0.65));
  will-change: transform, opacity;
}
.hero__h2 {
  display: block;
  width: min(72%, 780px);
  height: auto;
  margin: 12px auto 36px;
  filter:
    drop-shadow(0 3px 0 rgba(0, 0, 0, 0.55))
    drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45));
}
/* Scroll cue — single small lightning-S with arrow tip, sits below the H2 */
.hero__scroll-cue {
  display: block;
  margin: 40px auto 0;
  width: 60px;
  height: 106px;
  cursor: pointer;
}
.hero__scroll-cue:hover { filter: none; }
.hero__scroll-cue img { width: 100%; height: 100%; display: block; }

/* Fire ember particles at bottom of hero */
.hero__fire {
  position: absolute; bottom: 60px; left: 0; right: 0;
  height: 200px;
  z-index: 3;
  pointer-events: none;
  display: flex;
  justify-content: space-around;
}
.hero__fire span {
  display: block;
  width: 4px; height: 4px;
  background: var(--red);
  border-radius: 50%;
  filter: blur(0.5px);
  animation: ember 4s infinite ease-out;
  box-shadow: 0 0 8px var(--red), 0 0 16px var(--yellow);
}
.hero__fire span:nth-child(1) { animation-delay: 0s; }
.hero__fire span:nth-child(2) { animation-delay: 0.5s; }
.hero__fire span:nth-child(3) { animation-delay: 1s; }
.hero__fire span:nth-child(4) { animation-delay: 1.5s; }
.hero__fire span:nth-child(5) { animation-delay: 2s; }
.hero__fire span:nth-child(6) { animation-delay: 2.5s; }
.hero__fire span:nth-child(7) { animation-delay: 3s; }
.hero__fire span:nth-child(8) { animation-delay: 3.5s; }
@keyframes ember {
  0%   { transform: translateY(80px) scale(0.5); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(-200px) scale(1.2); opacity: 0; }
}

/* Marquee strip at bottom of hero */
.hero__marquee {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 52px;
  z-index: 4;
  background: var(--red);
  border-top: 4px solid var(--red-deep);
  border-bottom: 4px solid var(--red-deep);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.marquee-track {
  display: flex;
  gap: 36px;
  align-items: center;
  padding-left: 0;
  white-space: nowrap;
  animation: marquee 28s linear infinite;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.18em;
  color: var(--cream);
  text-shadow: 0 1px 0 var(--red-deep);
}
.marquee-track span:nth-child(2n) { color: var(--yellow); font-size: 0.85em; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================
   SECTIONS — general
   ============================================ */
section {
  position: relative;
  padding: 140px 32px;
  max-width: 100%;
  margin: 0 auto;
  z-index: 2;
  overflow: hidden;
}
.kicker {
  font-family: var(--font-stamp);
  text-align: center;
  font-size: clamp(14px, 1.5vw, 18px);
  letter-spacing: 0.32em;
  color: var(--cream);
  opacity: 0.7;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.kicker span { letter-spacing: 0.32em; }
.big-title {
  font-family: var(--font-display);
  font-size: clamp(64px, 11vw, 160px);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--red);
  text-align: center;
  line-height: 0.95;
  text-shadow:
    0 0 40px rgba(214,48,39,0.45),
    0 4px 0 rgba(0,0,0,0.55);
  margin: 0 auto 24px;
  max-width: 1400px;
}
.big-title span { display: inline-block; }
.big-sub {
  font-family: var(--font-stamp);
  text-align: center;
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: 0.08em;
  color: var(--cream);
  opacity: 0.78;
  max-width: 600px;
  margin: 0 auto 48px;
}

/* Pine decorations placed at corners of each section */
.section__pine {
  position: absolute;
  pointer-events: none;
  user-select: none;
  opacity: 0.55;
  width: 24vw;
  max-width: 380px;
  filter: brightness(0.85);
}
.section__pine--bl { left: -3vw;  bottom: -2vh; }
.section__pine--br { right: -3vw; bottom: -2vh; }
.section__pine--tl { left: -4vw;  top: -2vh; transform: scaleY(-1); }
.section__pine--tr { right: -4vw; top: -2vh; transform: scaleX(-1) scaleY(-1); }

/* ============================================
   LINEUP — metal flyer stack
   ============================================ */
.lineup { padding-bottom: 200px; }
.lineup__stack {
  text-align: center;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}
.lineup__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 32px;
}
.lineup__row--top { gap: 0 64px; }
.lineup__row--support { gap: 14px; color: var(--cream); font-family: var(--font-stamp); font-size: 24px; opacity: 0.9; }
.lineup__row--support span { color: var(--red); }
.lineup__divider {
  font-family: var(--font-stamp);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--cream);
  opacity: 0.55;
  margin: 18px 0 4px;
}
.act {
  display: inline-block;
  font-family: var(--font-display-alt);
  color: var(--cream);
  line-height: 0.95;
  letter-spacing: 0;
  transition: color 0.25s, transform 0.25s, text-shadow 0.25s;
  text-shadow: 0 3px 0 rgba(0,0,0,0.45);
}
.act--head {
  font-size: clamp(54px, 9vw, 130px);
  color: var(--cream);
  display: inline-block;
}
.act:hover {
  color: var(--red);
  transform: scale(1.04);
  text-shadow: 0 0 30px rgba(214,48,39,0.6), 0 3px 0 rgba(0,0,0,0.55);
}
.lineup__row--support .act {
  font-size: clamp(22px, 3vw, 36px);
}
.lineup__row--support .act:hover { transform: scale(1.04); }

/* ============================================
   SCHEDULE — stamped timeline
   ============================================ */
/* legacy .schedule rule removed — new rule is at end of file */
.timeline {
  list-style: none;
  max-width: 740px;
  margin: 56px auto 0;
  position: relative;
  padding: 0 16px;
}
.timeline li {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 10px 0 14px;
  border-bottom: 1px dashed rgba(232, 213, 160, 0.18);
  font-family: var(--font-stamp);
}
.timeline li:last-child { border-bottom: 0; }
.timeline .t {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--red);
  text-align: right;
  letter-spacing: 0.04em;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0,0,0,0.4);
}
.timeline .e {
  font-family: var(--font-stamp);
  font-size: 18px;
  color: var(--cream);
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.timeline__big .t {
  font-size: 44px;
  color: var(--red);
}
.timeline__big .e {
  font-family: var(--font-display-alt);
  font-size: 28px;
  color: var(--cream);
  letter-spacing: 0.02em;
}

/* ============================================
   CONTEST — huge prize stamp
   ============================================ */
.contest { padding: 160px 32px; text-align: center; }
.contest__lockup {
  margin: 48px auto;
  display: inline-block;
  position: relative;
  
}
/* legacy .contest__lockup::before removed (no longer in HTML) */
.contest__prize-label {
  font-family: var(--font-stamp);
  font-size: clamp(14px, 1.6vw, 18px);
  letter-spacing: 0.3em;
  color: var(--cream);
  margin-bottom: 8px;
}
.contest__prize-amount {
  font-family: var(--font-display);
  font-size: clamp(120px, 22vw, 320px);
  line-height: 0.85;
  color: var(--red);
  text-shadow:
    0 0 50px rgba(214,48,39,0.6),
    0 6px 0 rgba(0,0,0,0.6);
  letter-spacing: -0.02em;
}
.contest__prize-amount span {
  color: var(--yellow);
  font-size: 0.55em;
  vertical-align: top;
  margin-left: 0.05em;
  -webkit-text-stroke: 2px var(--red-deep);
}
.contest__prize-sub {
  font-family: var(--font-stamp);
  font-size: clamp(14px, 1.5vw, 18px);
  letter-spacing: 0.16em;
  color: var(--cream);
  opacity: 0.85;
  margin-top: 8px;
}
.contest__lines {
  list-style: none;
  max-width: 720px;
  margin: 80px auto 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: left;
}
.contest__lines li {
  font-family: var(--font-stamp);
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.5;
  color: var(--cream);
  padding-left: 36px;
  position: relative;
}
.contest__lines li::before {
  content: "★";
  position: absolute;
  left: 0; top: 0;
  color: var(--red);
  font-size: 22px;
  line-height: 1;
}
.contest__lines b {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--red);
  font-size: 1.4em;
  letter-spacing: 0.02em;
  margin-right: 10px;
}

/* ============================================
   VENUE — flat, no card chrome
   ============================================ */
.venue { background: var(--green); }
.venue__row {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: stretch;
  max-width: 1280px;
  margin: 60px auto 0;
}
.venue__addr-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.venue__name {
  font-family: var(--font-display-alt);
  font-size: clamp(40px, 6vw, 80px);
  line-height: 0.95;
  color: var(--red);
  letter-spacing: 0.01em;
  text-shadow: 0 0 30px rgba(214,48,39,0.3), 0 3px 0 rgba(0,0,0,0.45);
}
.venue__addr {
  font-family: var(--font-stamp);
  font-size: clamp(16px, 1.8vw, 20px);
  letter-spacing: 0.14em;
  color: var(--cream);
}
.venue__desc {
  font-family: var(--font-stamp);
  font-size: 17px;
  line-height: 1.5;
  color: var(--cream);
  opacity: 0.85;
  max-width: 480px;
}
/* legacy .venue__map removed (no longer in HTML) */
.btn-paint {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.5vw, 32px);
  color: var(--red);
  align-self: flex-start;
  padding: 6px 0;
  letter-spacing: 0.02em;
  border-bottom: 3px solid var(--red);
  transition: transform 0.2s, color 0.2s;
}
.btn-paint:hover {  color: var(--yellow); border-bottom-color: var(--yellow); }

/* ============================================
   PAST VOLUMES — polaroid-ish grid
   ============================================ */
.past { background: var(--green-deep); }
.past__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 22px;
  max-width: 1280px;
  margin: 12px auto 0;
}
.past__card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 5;
  background: var(--green);
  display: block;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), rotate 0.4s;
  border: 6px solid var(--cream);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.past__card:nth-child(odd)  {  }
.past__card:nth-child(even) {  }
.past__card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s, filter 0.3s;
}
.past__card span {
  position: absolute;
  left: 0; bottom: 0; right: 0;
  padding: 8px 10px;
  background: var(--cream);
  font-family: var(--font-stamp);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--green-deep);
  text-align: center;
}
.past__card:hover {  transform: translateY(-8px) scale(1.04); z-index: 5; }
.past__card:hover img { transform: scale(1.06); }
.past__card--latest { border-color: var(--red); }
.past__card--latest span { background: var(--red); color: var(--cream); }

/* ============================================
   SPONSORS — patches on a denim jacket
   ============================================ */
.sponsors { padding: 70px 32px; text-align: center; }
.sponsors__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 8px 22px;
  margin-top: 24px;
}
.sponsors__list li {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 56px);
  letter-spacing: 0.01em;
  color: var(--cream);
  opacity: 0.85;
  transition: color 0.2s, transform 0.2s;
}
.sponsors__list li:hover { color: var(--red);  }

/* ============================================
   TICKETS + FAQ — big visceral CTA, hand-painted FAQ
   ============================================ */
/* legacy .tickets rule removed — new rule is at end of file */
.tickets__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  max-width: 1200px;
  margin: 40px auto 0;
  align-items: start;
}
.tickets__cta {
  text-align: center;
  padding: 24px 0;
}
.tickets__lede {
  font-family: var(--font-stamp);
  font-size: clamp(17px, 1.8vw, 22px);
  color: var(--cream);
  margin-bottom: 32px;
  line-height: 1.5;
}
.tickets__sub {
  font-family: var(--font-stamp);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--cream);
  opacity: 0.7;
  margin-top: 28px;
}
.btn--big {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 44px);
  padding: 22px 44px;
  letter-spacing: 0.02em;
  background: var(--red);
  border: 4px solid var(--red-deep);
  color: var(--cream);
  text-shadow: 0 3px 0 rgba(0,0,0,0.4);
  box-shadow: 0 6px 0 var(--red-deep), 0 12px 30px rgba(214,48,39,0.4);
  transition: transform 0.15s, box-shadow 0.15s;
  
  display: inline-block;
}
.btn--big:hover {
  transform: translateY(-3px) rotate(1deg);
  box-shadow: 0 9px 0 var(--red-deep), 0 16px 36px rgba(214,48,39,0.5);
}
.btn--big:active {
  transform: translateY(3px);
  box-shadow: 0 3px 0 var(--red-deep), 0 6px 14px rgba(214,48,39,0.4);
}

.faq {
  margin-bottom: 14px;
  font-family: var(--font-stamp);
  border-bottom: 1px dashed rgba(232, 213, 160, 0.18);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 32px 16px 0;
  font-family: var(--font-display-alt);
  font-size: clamp(22px, 2.5vw, 30px);
  letter-spacing: 0.01em;
  color: var(--cream);
  position: relative;
  user-select: none;
  transition: color 0.2s;
}
.faq summary:hover { color: var(--red); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 32px;
  font-family: var(--font-display);
  color: var(--red);
  transition: transform 0.2s;
  line-height: 0;
}
.faq[open] summary::after { content: "−"; }
.faq[open] summary { color: var(--red); }
.faq p {
  padding: 0 32px 18px 0;
  font-size: 16px;
  color: var(--cream);
  opacity: 0.9;
  line-height: 1.55;
}

/* ============================================
   MARQUEE (section divider)
   ============================================ */
.marquee {
  background: var(--red);
  border-top: 4px solid var(--red-deep);
  border-bottom: 4px solid var(--red-deep);
  overflow: hidden;
  height: 70px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 5;
}
.marquee__track {
  display: flex;
  gap: 40px;
  align-items: center;
  white-space: nowrap;
  animation: marquee 30s linear infinite;
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: 0.04em;
  color: var(--cream);
  text-shadow: 0 2px 0 var(--red-deep);
  padding-right: 40px;
}
.marquee__track span:nth-child(2n) { color: var(--yellow); font-size: 0.7em; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* old hero marquee shell — remove leftover background since element no longer exists */
.hero__marquee { display: none; }

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: var(--black);
  color: var(--cream);
  padding: 48px 32px 24px;
  position: relative;
  z-index: 2;
}
.footer__row {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
}
.footer__logo { width: 80px; height: auto; }
.footer__contact p {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  line-height: 1.6;
}
.footer__contact a { color: var(--yellow); }
.footer__socials { display: flex; flex-direction: column; gap: 6px; text-align: right; }
.footer__socials a {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.1em;
  transition: color 0.2s;
}
.footer__socials a:hover { color: var(--red); }
.footer__credit {
  text-align: center;
  margin-top: 32px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  opacity: 0.5;
}

/* ============================================
   ANIMATION HELPERS
   ============================================ */
.fade-up { opacity: 0; transform: translateY(40px); }
.fade-up.is-in { opacity: 1; transform: none; transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.2,.8,.2,1); }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
  /* Mobile nav bar — minimal: brand · CS/EN · burger. No boxes, no pills. */
  .nav {
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "brand . toggle burger";
    padding: 14px 20px;
    gap: 18px;
    background: linear-gradient(to bottom, rgba(11,11,11,0.55) 0%, rgba(11,11,11,0) 100%);
  }
  .nav__brand { grid-area: brand; }
  .nav__brand img { height: 38px; }

  /* Lang toggle — clean text, no pill, no background, no border */
  .lang-toggle {
    position: static !important;
    transform: none !important;
    grid-area: toggle;
    align-self: center;
    padding: 8px 4px;
    background: transparent;
    border: 0;
    font-size: 13px;
    letter-spacing: 0.20em;
  }

  /* Burger — clean icon only, no box, no border, just the lines */
  .nav__burger {
    grid-area: burger;
    display: flex;
    width: 40px;
    height: 40px;
    border-radius: 0;
    background: transparent;
    border: 0;
    align-items: center;
    padding: 9px 8px;
    margin-right: -4px;     /* line the icon up with the page edge */
  }
  .nav__burger span {
    width: 24px;
    height: 2px;
    background: var(--cream);
    transition: transform 0.25s ease, background 0.25s ease, opacity 0.2s ease;
  }
  .nav__burger[aria-expanded="true"] span { background: var(--red); }

  /* Drawer panels — both styled so they read as a single continuous menu */
  .nav__links--left,
  .nav__links--right {
    position: fixed;
    left: 0; right: 0;
    background: var(--green-deep);
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    gap: 0;
    z-index: 99;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
    pointer-events: none;
    opacity: 0;
  }
  .nav__links--left  {
    top: 68px;
    padding: 14px 0 4px;
    transform: translateY(-200%);
  }
  .nav__links--right {
    top: 218px;   /* docks just below the left panel — looks like one menu */
    padding: 4px 0 18px;
    border-top: 1px solid rgba(232, 213, 160, 0.06);
    box-shadow: 0 26px 36px -18px rgba(0, 0, 0, 0.65);
    transform: translateY(-280%);
  }

  /* Each menu item — full-width tappable row */
  .nav__links a {
    display: block;
    text-align: center;
    padding: 16px 24px;
    font-size: 22px;
    letter-spacing: 0.14em;
    color: var(--cream);
    transition: background 0.2s ease, color 0.2s ease;
  }
  .nav__links a:hover,
  .nav__links a:active,
  .nav__links a:focus {
    background: rgba(214, 48, 39, 0.10);
    color: var(--red);
  }

  .nav__links.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  section { padding: 80px 20px; }
  .schedule, .tickets { padding-left: 20px; padding-right: 20px; }

  .hero__headline { width: 100%; }
  .hero__vol { font-size: clamp(36px, 12vw, 64px); }
  .hero__meta { font-size: 12px; letter-spacing: 0.12em; }
  .hero__lineup { font-size: clamp(20px, 5vw, 32px); }
  .hero__pines { width: 50%; height: 50%; opacity: 0.7; }
  .hero__marquee { height: 44px; }
  .marquee-track { font-size: 18px; }

  .venue__row, .tickets__grid { grid-template-columns: 1fr; gap: 36px; }
  .lineup__row--top { gap: 0 28px; }
  .timeline { padding: 0 4px; }
  .timeline li { grid-template-columns: 78px 1fr; gap: 16px; }
  .timeline .t { font-size: 26px; }
  .timeline__big .t { font-size: 34px; }
  .timeline__big .e { font-size: 22px; }
  .contest__lines li { padding-left: 28px; }
  .footer__row { grid-template-columns: 1fr; text-align: center; }
  .footer__socials { flex-direction: row; justify-content: center; text-align: center; }

  .timeline::before { left: 56px; }
  .timeline li::before { left: 50px; }
  .timeline .t { width: 48px; font-size: 22px; }
  .timeline .e { font-size: 15px; padding-left: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
  .marquee-track { animation: none; }
  .hero__fire span { display: none; }
}

/* ============================================
   LINEUP — 3 headliners, name huge + short bio
   The .lineup__edge image carries the same silhouette as parallax layer 8;
   it bleeds upward into the hero so the foreground appears "glued" to the
   transition. Below the silhouette, the lineup section is solid green.
   ============================================ */
.lineup {
  position: relative;
  z-index: 30;
  background: var(--green-deep);
  color: var(--cream);
  padding: 160px 32px 160px;
  text-align: center;
}
@media (max-width: 900px) {
  .lineup { padding-top: 120px; }
}
.lineup__title {
  font-family: var(--font-bold);
  font-size: clamp(48px, 7vw, 110px);
  letter-spacing: 0.06em;
  color: var(--red);
  margin: 0 auto 80px;
  text-transform: uppercase;
  line-height: 1;
}
/* Grid of artist cards — stacked vertically with breathing room. */
.lineup__grid {
  display: flex;
  flex-direction: column;
  gap: 56px;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 8px;
}
.lineup__support-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.4;
  text-align: left;
  margin: 24px 0 -32px 56px;
}
.lineup__support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .lineup__support-label { margin: 16px 0 -16px 24px; }
  .lineup__support-grid { grid-template-columns: 1fr; gap: 14px; }
}
.act {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  padding: 64px 56px 56px;
  border-radius: 18px;
  background: transparent;
  text-align: left;
  font-family: var(--font-body);
  font-size: inherit;
  letter-spacing: normal;
  line-height: 1.55;
  color: var(--cream);
  text-shadow: none;
  filter: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    box-shadow 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
/* Artist image as a static background layer — always visible at full opacity.
   The animated piece is the green overlay above it (::after), which goes from
   near-opaque at rest (~95%) → partially transparent on hover. */
.act--has-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--act-img);
  background-size: cover;
  background-position: center;
  z-index: -2;
  border-radius: inherit;
}
.act--has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(21, 40, 31, 0.78) 0%,
    rgba(21, 40, 31, 0.78) 100%
  );
  /* Slow transition is the default (used when leaving hover → fade-out) */
  transition: background 2.5s ease;
  z-index: -1;
  border-radius: inherit;
}
.act--has-image:hover::after,
.act--has-image:focus-visible::after {
  background: linear-gradient(
    180deg,
    rgba(21, 40, 31, 0.78) 0%,
    rgba(21, 40, 31, 0.42) 55%,
    rgba(21, 40, 31, 0.55) 100%
  );
  /* Faster transition while entering hover → fade-in */
  transition: background 1s ease;
}
/* Mobile: image is always visible behind a darker green overlay so text reads.
   LOCKED — do not change without explicit instruction. */
@media (max-width: 900px) {
  .act--has-image::after,
  .act--has-image:hover::after,
  .act--has-image:focus-visible::after {
    background: linear-gradient(
      180deg,
      rgba(21, 40, 31, 0.86) 0%,
      rgba(21, 40, 31, 0.70) 55%,
      rgba(21, 40, 31, 0.80) 100%
    );
    transition: none;
  }
}
.act:hover,
.act:focus-visible {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(214, 48, 39, 0.18),
    0 8px 28px -6px rgba(214, 48, 39, 0.35),
    0 20px 60px -10px rgba(214, 48, 39, 0.30);
}
.act:hover .act__cta,
.act:focus-visible .act__cta { opacity: 1; color: var(--red); }

.act__name {
  font-family: var(--font-bold);
  font-size: clamp(48px, 8vw, 104px);
  letter-spacing: 0.02em;
  color: var(--cream);
  line-height: 0.95;
  margin: 0;
  text-transform: uppercase;
}
/* Support DJs — same card aesthetic, smaller scale, 3-up grid */
.act--support {
  padding: 28px 28px 24px;
  gap: 14px;
}
.act--support .act__name {
  font-size: clamp(22px, 2.2vw, 32px);
  letter-spacing: 0.03em;
}
@media (max-width: 900px) {
  .act--support { padding: 22px 22px 18px; }
  .act--support .act__name { font-size: clamp(24px, 6vw, 32px); }
}
.act__bio {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--cream);
  opacity: 0.78;
  margin: 0;
  max-width: 640px;
}
.act__bio em {
  font-style: italic;
  color: var(--red);
  opacity: 1;
}
.act__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.65;
  margin-top: 4px;
  transition: opacity 0.3s ease, color 0.3s ease;
}
.act__ig {
  width: 18px;
  height: 18px;
  color: currentColor;
}
@media (max-width: 900px) {
  .lineup { padding: 100px 20px 120px; }
  .lineup__title { margin-bottom: 56px; }
  .lineup__grid { gap: 32px; }
  .act { padding: 44px 24px 40px; gap: 16px; }
}

/* ============================================
   SHARED SECTION HELPERS
   ============================================ */
.section__head {
  text-align: center;
  margin: 0 auto 64px;
  max-width: 920px;
}
.section__head--left { text-align: left; margin-left: 0; }
.section__kicker {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.55;
  margin: 0 0 18px;
}
.section__title {
  font-family: var(--font-bold);
  font-size: clamp(44px, 6.5vw, 96px);
  letter-spacing: 0.05em;
  color: var(--red);
  margin: 0;
  text-transform: uppercase;
  line-height: 1;
}

/* ============================================
   TICKET CTA BUTTON
   Small but loud — red fill, cream text, soft red glow lift on hover.
   ============================================ */
.ticket-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-bold);
  font-size: 18px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--red);
  padding: 18px 36px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.4s ease;
}
.ticket-cta:hover,
.ticket-cta:focus-visible {
  transform: translateY(-3px);
  background: var(--red-deep);
  box-shadow:
    0 0 0 1px rgba(214, 48, 39, 0.25),
    0 10px 36px -6px rgba(214, 48, 39, 0.45),
    0 24px 70px -12px rgba(214, 48, 39, 0.35);
}
.ticket-cta--inline {
  display: flex;
  width: max-content;
  margin: 80px auto 0;
  font-size: 20px;
  padding: 20px 44px;
}
.ticket-cta--big {
  display: flex;
  width: max-content;
  margin: 32px auto 16px;
  font-size: 22px;
  padding: 22px 52px;
}

/* Outlined button used in venue */
.ghost-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-bold);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  border: 2px solid rgba(232, 213, 160, 0.35);
  padding: 12px 24px;
  border-radius: 999px;
  margin-top: 28px;
  transition: border-color 0.5s ease, color 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.ghost-btn:hover,
.ghost-btn:focus-visible {
  color: var(--red);
  border-color: var(--red);
  transform: translateY(-2px);
}

/* ============================================
   PROGRAM / SCHEDULE
   Numbered timeline rows: time | event
   ============================================ */
.schedule {
  background: var(--green-deep);
  color: var(--cream);
  padding: 160px 32px;
  text-align: center;
}
.schedule__list {
  list-style: none;
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
}
.schedule__row {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 32px;
  padding: 22px 16px;
  border-radius: 12px;
  text-align: left;
  transition: background-color 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.schedule__row:hover {
  background-color: rgba(214, 48, 39, 0.06);
  transform: translateX(6px);
}
.schedule__time {
  font-family: var(--font-bold);
  font-size: clamp(28px, 3vw, 38px);
  color: var(--red);
  letter-spacing: 0.04em;
  line-height: 1;
}
.schedule__event {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 500;
  color: var(--cream);
  letter-spacing: 0.02em;
}
@media (max-width: 700px) {
  .schedule { padding: 100px 20px; }
  .schedule__row { grid-template-columns: 90px 1fr; gap: 18px; padding: 18px 4px; }
}

/* ============================================
   CONTEST
   3-up grid of cards: prize / category / registration
   ============================================ */
.contest {
  background: var(--green-deep);
  color: var(--cream);
  padding: 160px 32px;
  text-align: center;
}
.contest__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1080px;
  margin: 0 auto;
}
.contest__card {
  padding: 48px 32px;
  border-radius: 18px;
  background: rgba(232, 213, 160, 0.03);
  text-align: center;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.9s ease;
}
.contest__card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(214, 48, 39, 0.18),
    0 12px 36px -8px rgba(214, 48, 39, 0.35);
}
.contest__card-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 16px;
}
.contest__card-value {
  font-family: var(--font-bold);
  font-size: clamp(36px, 4.5vw, 56px);
  letter-spacing: 0.03em;
  color: var(--cream);
  margin: 0 0 18px;
  text-transform: uppercase;
  line-height: 1;
}
.contest__card-desc {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--cream);
  opacity: 0.78;
  margin: 0;
  max-width: 32ch;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 900px) {
  .contest__grid { grid-template-columns: 1fr; gap: 18px; }
  .contest { padding: 100px 20px; }
}

/* ============================================
   VENUE
   ============================================ */
.venue {
  background: var(--green-deep);
  color: var(--cream);
  padding: 160px 32px;
}
.venue__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
}
.venue__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.venue__desc {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.6;
  color: var(--cream);
  opacity: 0.85;
  margin: 0;
  max-width: 520px;
}
/* Map container — rounded corners + subtle filter to match palette */
.venue__map-wrap {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(232, 213, 160, 0.10);
  background: #15281F;
  transition: border-color 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
}
.venue__map-wrap:hover,
.venue__map-wrap:focus-visible {
  border-color: rgba(214, 48, 39, 0.45);
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(214, 48, 39, 0.18),
    0 12px 36px -8px rgba(214, 48, 39, 0.30);
}
.venue__map {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* Knock the bright Google Maps palette back to feel at home in our forest green */
  filter: saturate(0.75) brightness(0.92) contrast(0.95);
  /* Non-interactive preview — clicks pass through to the wrapping link */
  pointer-events: none;
}
@media (max-width: 900px) {
  .venue { padding: 100px 20px; }
  .venue__grid { grid-template-columns: 1fr; gap: 40px; }
  .venue__col { align-items: stretch; }
  .venue__map-wrap { aspect-ratio: 16 / 11; }
}

/* ============================================
   TICKETS + FAQ
   ============================================ */
.tickets {
  background: var(--green-deep);
  color: var(--cream);
  padding: 160px 32px;
  text-align: center;
}
.tickets__lede {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.55;
  color: var(--cream);
  opacity: 0.85;
  max-width: 620px;
  margin: 0 auto;
}
.tickets__sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--cream);
  opacity: 0.6;
  margin: 0 auto 64px;
  max-width: 480px;
}
.faq {
  max-width: 760px;
  margin: 56px auto 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.faq__item {
  padding: 4px 0;
}
.faq__q {
  font-family: var(--font-bold);
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: 0.02em;
  color: var(--cream);
  padding: 22px 36px 22px 4px;
  cursor: pointer;
  list-style: none;
  position: relative;
  transition: color 0.4s ease;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  font-family: var(--font-bold);
  font-size: 28px;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--red);
  transition: transform 0.4s ease;
  line-height: 1;
}
.faq__item[open] .faq__q { color: var(--red); }
.faq__item[open] .faq__q::after {
  content: "−";
  transform: translateY(-50%);
}
.faq__a {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--cream);
  opacity: 0.78;
  padding: 0 36px 22px 4px;
  margin: 0;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: var(--green-deep);
  color: var(--cream);
  padding: 56px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.footer__brand img {
  display: block;
  width: 64px;
  height: auto;
}
.footer__line {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.06em;
  opacity: 0.7;
  margin: 0;
}
.footer__socials {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.footer__socials a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  border: 1px solid rgba(232, 213, 160, 0.20);
  transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.footer__socials a:hover {
  color: var(--red);
  border-color: var(--red);
  transform: translateY(-2px);
}

/* ============================================
   ABOUT / STORY
   Long-form origin story — readable left-aligned body, drop-cap on first letter,
   the "Piggybeer Session!" reveal sits as its own punchy line.
   ============================================ */
.about {
  background: var(--green-deep);
  color: var(--cream);
  padding: 160px 32px;
  text-align: center;
}
.about__body {
  max-width: 860px;
  margin: 0 auto;
  text-align: left;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.7;
  color: var(--cream);
  opacity: 0.88;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
/* Follow-us block sits inside the about section */
.about__follow {
  margin: 56px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.about__follow-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.5;
  margin: 0;
}
/* Minimal footer — just logo + copyright line on one row */
.footer--minimal {
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 24px;
  padding: 36px 32px;
}
.footer--minimal .footer__brand img { width: 44px; }
.footer--minimal .footer__line { opacity: 0.55; }
.about__body p { margin: 0; }
/* Drop-cap on the very first paragraph */
.about__body > p:first-child::first-letter {
  font-family: var(--font-bold);
  font-size: 4.2em;
  float: left;
  line-height: 0.85;
  padding: 6px 14px 0 0;
  color: var(--red);
}
.about__chant {
  text-align: center;
  font-family: var(--font-bold);
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: 0.02em;
  color: var(--red);
  margin: 8px 0 !important;
  opacity: 1;
  text-transform: uppercase;
  line-height: 1;
}
.about__chant em { font-style: normal; }
.about__signoff {
  font-family: var(--font-bold);
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: 0.02em;
  color: var(--cream);
  text-align: center;
  margin-top: 16px !important;
  opacity: 1;
}
@media (max-width: 700px) {
  .about { padding: 100px 24px; }
  .about__body { font-size: 16px; }
  .about__body > p:first-child::first-letter { font-size: 3.4em; padding: 4px 10px 0 0; }
}

/* ============================================
   TICKETS — ticket-card layout
   Three-column info row (date / venue / presale), what's-included list,
   and a big CTA. Reads like a real ticket stub, all the answers at a glance.
   ============================================ */
.ticket-card {
  max-width: 880px;
  margin: 0 auto;
  background: rgba(232, 213, 160, 0.02);
  border: 1px solid rgba(232, 213, 160, 0.10);
  border-radius: 22px;
  padding: 56px 56px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Two little punched-corner notches at the sides — ticket-stub vibe */
.ticket-card::before,
.ticket-card::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  background: var(--green-deep);
  border: 1px solid rgba(232, 213, 160, 0.10);
  border-radius: 50%;
  transform: translateY(-50%);
}
.ticket-card::before { left: -13px; }
.ticket-card::after  { right: -13px; }

.ticket-card__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding-bottom: 36px;
  border-bottom: 1px dashed rgba(232, 213, 160, 0.18);
  margin-bottom: 36px;
}
.ticket-card__cell { text-align: center; }
.ticket-card__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.55;
  margin: 0 0 10px;
}
.ticket-card__value {
  font-family: var(--font-bold);
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: 0.02em;
  color: var(--cream);
  line-height: 1;
  margin: 0 0 8px;
  text-transform: uppercase;
}
.ticket-card__meta {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--cream);
  opacity: 0.6;
  margin: 0;
  letter-spacing: 0.02em;
}

.ticket-card__included {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
}
.ticket-card__included li {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.85;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Red checkmark dot */
.ticket-card__included li::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
}

.ticket-card .ticket-cta--big { margin: 0 auto 16px; }
.ticket-card .tickets__sub { margin: 0 auto; }

@media (max-width: 700px) {
  .ticket-card { padding: 36px 24px 32px; border-radius: 18px; }
  .ticket-card__row { grid-template-columns: 1fr; gap: 24px; padding-bottom: 28px; margin-bottom: 28px; }
  .ticket-card__included { gap: 8px 14px; margin-bottom: 28px; }
  .ticket-card::before,
  .ticket-card::after { display: none; }
}

/* ============================================
   ATMOSPHERIC DEPTH
   Subtle radial spotlights behind every section so the page stops feeling
   like one flat slab of green. Each spotlight is a soft warm/red bloom that
   pools behind the section title, fading out before the content. Combined
   with the body vignette and grain overlay this adds three layers of depth
   without changing the established design language.
   ============================================ */
.lineup,
.schedule,
.contest,
.venue,
.tickets,
.about {
  position: relative;
  isolation: isolate;
}
.lineup::before,
.schedule::before,
.contest::before,
.venue::before,
.tickets::before,
.about::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    /* Warm head-light pooling near the top of each section */
    radial-gradient(ellipse 65% 38% at 50% 18%, rgba(170, 110, 60, 0.10) 0%, transparent 65%),
    /* Cooler bottom accent so sections feel anchored */
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(15, 30, 22, 0.45) 0%, transparent 70%);
}
/* The lineup section gets an extra red ember accent on the side */
.lineup::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle 480px at 88% 30%, rgba(214, 48, 39, 0.06) 0%, transparent 70%),
    radial-gradient(circle 380px at 8% 75%, rgba(214, 48, 39, 0.05) 0%, transparent 70%);
}
/* Subtle dot-grid texture only behind the schedule timeline (printed-timetable feel) */
.schedule::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: radial-gradient(rgba(232, 213, 160, 0.04) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 0%, transparent 75%);
}

/* ============================================
   MOBILE REFINEMENTS — keep everything inside the viewport
   Final overrides — kept at the bottom of the file so they win the cascade.
   ============================================ */
@media (max-width: 900px) {
  /* Ticket CTAs were sized for desktop and overflowed the screen */
  .ticket-cta {
    max-width: calc(100vw - 48px);
    box-sizing: border-box;
  }
  .ticket-cta--inline {
    margin: 56px auto 0;
    font-size: 15px;
    padding: 16px 24px;
    letter-spacing: 0.10em;
  }
  .ticket-cta--big {
    margin: 24px auto 12px;
    font-size: 16px;
    padding: 18px 28px;
    letter-spacing: 0.10em;
  }

  /* Section heads — tighter on mobile */
  .section__title { font-size: clamp(38px, 11vw, 56px); }
  .section__kicker { font-size: 11px; letter-spacing: 0.22em; margin-bottom: 14px; }

  /* Lineup title spacing */
  .lineup__title { font-size: clamp(40px, 12vw, 64px); margin-bottom: 48px; }

  /* About body — tighter side padding so it never crowds the screen edge */
  .about { padding-left: 22px; padding-right: 22px; }
  .about__body { padding: 0 4px; }
  .about__chant { font-size: clamp(28px, 9vw, 40px); }

  /* Schedule rows — make event text comfortably wrap */
  .schedule__row { padding: 16px 4px; gap: 14px; }
  .schedule__time { font-size: clamp(22px, 6vw, 26px); }
  .schedule__event { font-size: 15px; }

  /* Contest cards — match other section padding */
  .contest__card { padding: 36px 24px; }

  /* Hero drop shadows — soften on mobile so they don't feel oversized */
  .hero__lockup {
    filter:
      drop-shadow(0 0 18px rgba(214, 48, 39, 0.30))
      drop-shadow(0 6px 0 rgba(0, 0, 0, 0.50))
      drop-shadow(0 14px 18px rgba(0, 0, 0, 0.55));
  }
  .hero__h2 {
    filter:
      drop-shadow(0 2px 0 rgba(0, 0, 0, 0.50))
      drop-shadow(0 5px 10px rgba(0, 0, 0, 0.40));
  }

  /* Map height — taller block on mobile reads better */
  .venue__map-wrap { aspect-ratio: 4 / 3; }

  /* Footer — text wraps cleanly */
  .footer--minimal { padding: 32px 24px; text-align: center; }
  .footer__line { font-size: 12px; }

  /* Block any rogue horizontal scroll */
  html, body { max-width: 100vw; overflow-x: hidden; }
}

/* Tighter still on small phones */
@media (max-width: 420px) {
  .lineup__title { font-size: clamp(38px, 13vw, 52px); }
  .ticket-cta--inline { font-size: 14px; padding: 14px 20px; }
  .ticket-cta--big { font-size: 15px; padding: 16px 22px; }
  .ticket-card { padding: 28px 18px 26px; }
  .ticket-card__value { font-size: clamp(22px, 6vw, 28px); }
  .schedule__row { grid-template-columns: 78px 1fr; gap: 12px; }
}