@font-face {
  font-family: 'Gilroy';
  src: url('../assets/fonts/Gilroy-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../assets/fonts/Gilroy-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../assets/fonts/Gilroy-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../assets/fonts/Gilroy-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #000;
  --fg: #fff;
  --yellow: #FFD43B;
  --max-w: 1200px;
  /* banner is 2400x1000 → 12:5 */
  --banner-ratio: 2.4;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: 'Gilroy', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
  overflow-x: hidden;
}

.page { min-height: 100vh; }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  width: 100%;
  background: var(--bg);
  overflow: hidden;
  isolation: isolate;
}

.hero__banner {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------- LOGO (desktop: overlay on hero, +30% scale) ---------- */
.logo {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: min(72vw, 940px);
  pointer-events: none;
}

.logo__row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
}

/* tight spacing — letters overlap slightly. desktop sizes (+30% vs prior) */
.letter {
  display: block;
  height: clamp(60px, 11.7vw, 172px);
  width: auto;
  margin-inline: clamp(-10px, -0.78vw, -3px);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
  animation: float var(--dur, 5s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform, opacity;
  opacity: 0;
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0s);
}

.logo.is-ready .letter {
  opacity: 1;
}

.letter--sun {
  /* sun is the "O" — keep close to letter height, small bleed only */
  height: clamp(70px, 13vw, 188px);
  margin-inline: clamp(-13px, -1.04vw, -5px);
  filter: drop-shadow(0 8px 22px rgba(255, 180, 0, 0.55));
}

.letter[data-letter="S1"] { --dur: 4.6s; --delay: 0s;    --tilt: -2deg;   --reveal-delay: 0s;    }
.letter[data-letter="V"]  { --dur: 5.2s; --delay: 0.25s; --tilt:  1.5deg; --reveal-delay: 0.08s; }
.letter[data-letter="O"]  { --dur: 6.0s; --delay: 0.5s;  --tilt:  0deg;   --reveal-delay: 0.16s; }
.letter[data-letter="I"]  { --dur: 4.8s; --delay: 0.75s; --tilt: -1deg;   --reveal-delay: 0.24s; }
.letter[data-letter="F"]  { --dur: 5.4s; --delay: 0.15s; --tilt:  1deg;   --reveal-delay: 0.32s; }
.letter[data-letter="E"]  { --dur: 4.7s; --delay: 0.4s;  --tilt: -1.5deg; --reveal-delay: 0.40s; }
.letter[data-letter="S2"] { --dur: 5.6s; --delay: 0.65s; --tilt:  2deg;   --reveal-delay: 0.48s; }
.letter[data-letter="T"]  { --dur: 4.4s; --delay: 0.9s;  --tilt: -1deg;   --reveal-delay: 0.56s; }

@keyframes float {
  0%, 100% { transform: translateY(0)     rotate(var(--tilt, 0deg)); }
  50%      { transform: translateY(-10px) rotate(calc(var(--tilt, 0deg) * -1)); }
}

@media (prefers-reduced-motion: reduce) {
  .letter { animation: none; }
}

/* pull FEST row up so SVOI/FEST stack tightly */
.logo__row--fest { margin-top: clamp(-12px, -1vw, -2px); }

/* ---------- DATES — compact duo (desktop: overlay under logo; mobile: under banner) ---------- */
.dates {
  position: relative;
  z-index: 3;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(12px, 4vw, 32px);
  color: var(--fg);
}

/* Desktop: lift dates UP into the hero banner area, right under the logo */
@media (min-width: 769px) {
  .dates {
    max-width: min(540px, 40vw);
    margin-top: clamp(-190px, -11.9vw, -110px);
    margin-bottom: clamp(40px, 5.5vh, 80px);
  }
  .date {
    padding: clamp(6px, 1vw, 14px) clamp(6px, 1.2vw, 14px);
  }
}

.dates__list {
  list-style: none;
  margin: 0;
  padding: clamp(10px, 1.2vw, 16px) clamp(8px, 1.4vw, 18px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  position: relative;
  border: 1.5px solid var(--yellow);
  border-radius: clamp(14px, 1.4vw, 20px);
  background: rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.28);
}

/* Thin yellow vertical divider between the two cards (both viewports) */
.dates__list::before {
  content: "";
  position: absolute;
  top: 14%;
  bottom: 14%;
  left: 50%;
  width: 1.5px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--yellow) 22%,
    var(--yellow) 78%,
    transparent 100%
  );
  transform: translateX(-50%);
  opacity: 0.75;
  pointer-events: none;
}

.date {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(3px, 0.4vw, 6px);
  text-align: center;
  padding: clamp(6px, 1vw, 14px) clamp(8px, 2vw, 24px);
}

.date__city {
  font-size: clamp(18px, 2vw, 30px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.date__day {
  font-size: clamp(15px, 1.55vw, 22px);
  font-weight: 800;
  color: var(--yellow);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow:
    0 2px 12px rgba(255, 212, 59, 0.35),
    0 1px 3px rgba(0, 0, 0, 0.55);
}

.date__venue {
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
}

@media (max-width: 768px) {
  .dates {
    padding: clamp(14px, 3.5vw, 22px) clamp(12px, 3vw, 20px) clamp(10px, 2vh, 18px);
  }
  /* mobile: keep two columns in a single row (compact) */
  .dates__list {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .dates__list::before {
    top: 8%;
    bottom: 8%;
    width: 1.5px;
  }
  .date {
    padding: clamp(6px, 2vw, 10px) clamp(6px, 2vw, 14px);
    gap: clamp(3px, 1vw, 6px);
  }
  .date__city {
    font-size: clamp(19px, 5.4vw, 26px);
    text-shadow: none;
  }
  .date__day {
    font-size: clamp(17px, 4.8vw, 22px);
    text-shadow: 0 1px 8px rgba(255, 212, 59, 0.25);
  }
  .date__venue {
    font-size: clamp(12px, 3.4vw, 14px);
    text-shadow: none;
  }
}

/* ---------- placeholders (Day 3) ---------- */
.tickets, .lineup, .info {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(48px, 8vh, 96px) clamp(16px, 4vw, 32px);
  color: var(--fg);
}

/* tickets sit right under the hero — tight top spacing */
.tickets {
  padding-top: clamp(12px, 1.6vh, 24px);
  padding-bottom: clamp(28px, 4vh, 56px);
}

/* ---------- VIBE ZONE — ambient colour blobs behind info + lineup ---------- */
.vibe-zone {
  position: relative;
  isolation: isolate;
}

.vibe-zone__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* yellow centre + purple (left) + cyan (right) — atmospheric depth */
.vibe-zone__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* yellow centre top — info area glow */
    radial-gradient(ellipse 50% 37% at 50% 22%,
      rgba(255, 212, 59, 0.35) 0%, rgba(255, 212, 59, 0.17) 40%, transparent 62%),
    /* purple left — mid */
    radial-gradient(ellipse 38% 28% at 4% 36%,
      rgba(168, 85, 247, 0.28) 0%, rgba(168, 85, 247, 0.10) 45%, transparent 75%),
    /* cyan right — lower mid */
    radial-gradient(ellipse 40% 28% at 96% 62%,
      rgba(56, 189, 248, 0.28) 0%, rgba(56, 189, 248, 0.10) 45%, transparent 75%);
  filter: blur(28px);
}

.vibe-zone > .info,
.vibe-zone > .lineup {
  position: relative;
  z-index: 1;
}

/* ---------- INFO — manifesto + amenities ---------- */
.info {
  max-width: 760px;
  text-align: left;
  padding-top: clamp(28px, 5vh, 64px);
  padding-bottom: clamp(36px, 6vh, 72px);
}

.info__hero {
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 clamp(10px, 1.4vh, 18px);
  color: var(--fg);
}

.info__sub {
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 600;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.86);
  margin: 0 0 clamp(8px, 1.2vh, 16px);
}

.info__vibe {
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 500;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  max-width: 620px;
}

/* yellow accent for the brand-name/city callouts within paragraphs */
.info__hl {
  color: var(--yellow);
  font-weight: 800;
  white-space: nowrap;
}

/* blockquote-style pull quote, left-aligned with a yellow left bar */
.info__quote {
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 500;
  font-style: italic;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin: clamp(28px, 4vh, 48px) 0;
  max-width: 620px;
  padding: clamp(4px, 0.6vh, 8px) 0 clamp(4px, 0.6vh, 8px) clamp(18px, 2vw, 26px);
  border-left: 3px solid var(--yellow);
}

.info__amenities {
  margin: 0 0 clamp(28px, 4.5vh, 52px);
}

.info__amenities-title {
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 clamp(20px, 2.6vh, 32px);
  text-align: center;
}

.info__amenities-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 28px);
  justify-items: center;
}

.amenity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
  text-align: center;
  max-width: 160px;
}

.amenity__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(56px, 5vw, 76px);
  height: clamp(56px, 5vw, 76px);
  background: var(--yellow);
  border-radius: 50%;
  color: #111;
  box-shadow:
    0 8px 20px rgba(255, 212, 59, 0.22),
    inset 0 -3px 0 rgba(0, 0, 0, 0.08);
}

.amenity__icon svg {
  width: 52%;
  height: 52%;
  display: block;
}

.amenity__label {
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 600;
  color: var(--fg);
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-align: center;
}

.info__cta {
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 800;
  color: var(--yellow);
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0 0 clamp(14px, 2vh, 22px);
  text-shadow: 0 2px 14px rgba(255, 212, 59, 0.2);
}

.info__footnote {
  font-size: clamp(12px, 0.9vw, 14px);
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  letter-spacing: 0.02em;
}

@media (max-width: 768px) {
  .info {
    padding-top: clamp(24px, 5vh, 44px);
    padding-bottom: clamp(28px, 5vh, 48px);
  }
  .info__hero {
    font-size: clamp(22px, 6.2vw, 30px);
    line-height: 1.22;
  }
  .info__sub {
    font-size: clamp(15px, 4.4vw, 18px);
  }
  .info__vibe {
    font-size: clamp(14px, 4vw, 17px);
  }
  .info__quote {
    font-size: clamp(15px, 4.2vw, 18px);
    margin-block: clamp(24px, 5vh, 36px);
  }
  .info__amenities-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 4.5vw, 28px) clamp(12px, 3vw, 20px);
  }
  .info__cta {
    font-size: clamp(20px, 5.8vw, 26px);
  }
  .amenity__icon {
    width: 60px;
    height: 60px;
    font-size: 28px;
  }
}

.tickets__title, .lineup__title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  margin: 0 0 clamp(28px, 4vh, 48px);
  text-align: center;
}

/* ---------- TICKETS — yellow paper-ticket cards ---------- */
.tickets__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* desktop: 2x2 — 15.08 row + 16.08 row */
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.2vw, 36px);
  max-width: 880px;
  margin-inline: auto;
}

.ticket {
  --notch: 14px;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: stretch;
  gap: 0;
  background: var(--yellow);
  color: #111;
  border-radius: 12px;
  padding: clamp(14px, 1.4vw, 22px) clamp(16px, 1.6vw, 26px);
  text-decoration: none;
  box-shadow:
    0 8px 28px rgba(255, 212, 59, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 220ms ease, box-shadow 220ms ease;
  isolation: isolate;
  overflow: visible;
}

/* circle notches on left/right edges — bg of the page shows through */
.ticket::before,
.ticket::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(var(--notch) * 2);
  height: calc(var(--notch) * 2);
  background: var(--bg);
  border-radius: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
.ticket::before { left: calc(var(--notch) * -1); }
.ticket::after  { right: calc(var(--notch) * -1); }

.ticket:hover,
.ticket:focus-visible {
  transform: translateY(-3px);
  box-shadow:
    0 14px 36px rgba(255, 212, 59, 0.28),
    0 4px 10px rgba(0, 0, 0, 0.3);
  outline: none;
}

.ticket__stub {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding-right: clamp(12px, 1.3vw, 20px);
  position: relative;
  z-index: 2;
}

/* perforated tear line — uses repeating-linear-gradient so the dash
   pattern is identical regardless of the stub height (desktop & mobile) */
.ticket__stub::after {
  content: "";
  position: absolute;
  top: 6%;
  bottom: 6%;
  right: 0;
  width: 1.5px;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.42) 0,
    rgba(0, 0, 0, 0.42) 4px,
    transparent 4px,
    transparent 8px
  );
}

.ticket__operator {
  font-size: clamp(10px, 0.78vw, 12px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1;
}

.ticket__day {
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 800;
  color: #111;
  letter-spacing: -0.01em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ticket__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding-left: clamp(12px, 1.3vw, 20px);
  min-width: 0;
  position: relative;
  z-index: 2;
}

.ticket__city {
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1;
  color: #111;
}

.ticket__cta {
  font-size: clamp(10px, 0.78vw, 12px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(0, 0, 0, 0.72);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ticket__arrow {
  display: inline-block;
  transition: transform 220ms ease;
}
.ticket:hover .ticket__arrow {
  transform: translateX(3px);
}

@media (max-width: 768px) {
  .tickets__grid {
    grid-template-columns: 1fr;
    gap: clamp(12px, 3vw, 18px);
  }
  .ticket {
    --notch: 12px;
    padding: clamp(14px, 4vw, 18px) clamp(18px, 5vw, 24px);
  }
  .ticket__stub {
    padding-right: clamp(14px, 4vw, 18px);
  }
  .ticket__main {
    padding-left: clamp(14px, 4vw, 18px);
  }
  .ticket__operator,
  .ticket__cta {
    font-size: 11px;
  }
  .ticket__day,
  .ticket__city {
    font-size: clamp(18px, 5vw, 22px);
  }
}

/* ---------- LINEUP — polaroid scrapbook ---------- */
.lineup__grid {
  list-style: none;
  margin: 0;
  padding: clamp(28px, 3vw, 44px) 0 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(16px, 2vw, 36px);
  justify-items: center;
}

.lineup__card {
  --tilt: 0deg;
  --tape-tilt: 0deg;
  position: relative;
  width: 100%;
  max-width: 220px;
  background: #f6f1e6;
  padding: clamp(8px, 0.8vw, 12px) clamp(8px, 0.8vw, 12px) clamp(18px, 1.6vw, 26px);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  transform: rotate(var(--tilt));
  transform-origin: 50% 30%;
  transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lineup__card:hover,
.lineup__card.in-view {
  transform: rotate(0deg) translateY(-6px) scale(1.04);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  z-index: 2;
}

/* yellow masking-tape on top of each polaroid */
.lineup__card::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 56%;
  height: 22px;
  background: var(--yellow);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 60%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28);
  opacity: 0.94;
  transform: translateX(-50%) rotate(var(--tape-tilt));
}

/* individual tilts so the row reads as hand-placed, not patterned */
.lineup__card:nth-child(1) { --tilt: -3deg;   --tape-tilt:  4deg; }
.lineup__card:nth-child(2) { --tilt:  2.4deg; --tape-tilt: -5deg; }
.lineup__card:nth-child(3) { --tilt: -1.6deg; --tape-tilt:  2deg; }
.lineup__card:nth-child(4) { --tilt:  2.8deg; --tape-tilt: -3deg; }
.lineup__card:nth-child(5) { --tilt: -2.4deg; --tape-tilt:  5deg; }

.lineup__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  background-color: #1c1c1c;
  background-image: linear-gradient(180deg, #3a3a3a 0%, #1a1a1a 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.lineup__photo[data-artist="jerry"]      { background-image: url('/assets/artists/jerry.png'),      linear-gradient(180deg, #3a3a3a 0%, #1a1a1a 100%); }
.lineup__photo[data-artist="tik"]        { background-image: url('/assets/artists/tik.png'),        linear-gradient(180deg, #3a3a3a 0%, #1a1a1a 100%); }
.lineup__photo[data-artist="parfeniuk"]  { background-image: url('/assets/artists/parfeniuk.png'),  linear-gradient(180deg, #3a3a3a 0%, #1a1a1a 100%); }
.lineup__photo[data-artist="druga-rika"] { background-image: url('/assets/artists/druga-rika.png'), linear-gradient(180deg, #3a3a3a 0%, #1a1a1a 100%); }
.lineup__photo[data-artist="kola"]       { background-image: url('/assets/artists/kola.png'),       linear-gradient(180deg, #3a3a3a 0%, #1a1a1a 100%); }

.lineup__name {
  display: block;
  margin: clamp(10px, 1vw, 16px) 0 0;
  text-align: center;
  font-size: clamp(13px, 1vw, 17px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #111;
  line-height: 1.1;
}

@media (max-width: 768px) {
  .lineup__grid {
    grid-template-columns: 1fr;
    gap: clamp(22px, 5vw, 36px);
    max-width: none;
    margin-inline: 0;
    padding: clamp(24px, 6vw, 40px) clamp(16px, 5vw, 24px) 0;
  }
  .lineup__card {
    max-width: none;
    padding: clamp(10px, 2.8vw, 16px) clamp(10px, 2.8vw, 16px) clamp(14px, 3.5vw, 20px);
  }
  /* landscape photo on mobile — fills width, shorter height */
  .lineup__photo {
    aspect-ratio: 16 / 10;
  }
  /* milder tilts on mobile so the column doesn't feel chaotic */
  .lineup__card:nth-child(1) { --tilt: -2.4deg; --tape-tilt:  4deg; }
  .lineup__card:nth-child(2) { --tilt:  2deg;   --tape-tilt: -4deg; }
  .lineup__card:nth-child(3) { --tilt: -1.8deg; --tape-tilt:  3deg; }
  .lineup__card:nth-child(4) { --tilt:  2.4deg; --tape-tilt: -3deg; }
  .lineup__card:nth-child(5) { --tilt: -2deg;   --tape-tilt:  4deg; }
}

/* ---------- mobile concept ---------- *
   Mobile banner has a tall sky band in the centre — we keep the logo
   as an overlay (positioned absolute over the banner), but tuned for
   the mobile aspect: bigger letters, sits in the sky area.
*/
@media (max-width: 768px) {
  .logo {
    /* mobile: +10% scale vs desktop-mobile baseline */
    width: 77vw;
  }

  .letter {
    height: clamp(60px, 15.4vw, 121px);
    margin-inline: clamp(-10px, -1.1vw, -3px);
  }
  .letter--sun {
    height: clamp(68px, 17.6vw, 137px);
    margin-inline: clamp(-13px, -1.4vw, -4px);
  }

  .logo__row--fest { margin-top: clamp(-11px, -1.3vw, -3px); }
}

/* ---------- SPONSOR ---------- */
.sponsor {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(56px, 8vh, 96px) clamp(16px, 4vw, 32px) clamp(40px, 6vh, 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2vh, 26px);
  text-align: center;
}

.sponsor__label {
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

.sponsor__link {
  display: inline-block;
  transition: transform 220ms ease, filter 220ms ease;
}

.sponsor__link:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.sponsor__logo {
  display: block;
  width: clamp(180px, 22vw, 280px);
  height: auto;
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.5));
}

/* ---------- COUNTDOWN ---------- */
.countdown {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(28px, 4vh, 56px) clamp(16px, 4vw, 32px) clamp(48px, 7vh, 88px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2.4vh, 28px);
  text-align: center;
}

.countdown__label {
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

.countdown__grid {
  display: inline-flex;
  align-items: flex-start;
  gap: clamp(8px, 1.4vw, 18px);
  font-variant-numeric: tabular-nums;
}

.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 0.8vh, 10px);
  min-width: clamp(56px, 7vw, 96px);
}

.countdown__value {
  /* Gilroy ships only 400+ weights; use system fonts here so 200 actually renders thin */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(44px, 5.8vw, 88px);
  font-weight: 200;
  color: var(--yellow);
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 22px rgba(255, 212, 59, 0.18);
}

.countdown__name {
  font-size: clamp(10px, 0.8vw, 12px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.55);
}

.countdown__sep {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(44px, 5.8vw, 88px);
  font-weight: 200;
  color: rgba(255, 212, 59, 0.45);
  line-height: 1;
  align-self: flex-start;
  padding-top: 2px;
}

@media (max-width: 768px) {
  .countdown {
    padding-top: clamp(20px, 4vh, 40px);
    padding-bottom: clamp(40px, 6vh, 64px);
  }
  .countdown__grid {
    gap: clamp(4px, 1.5vw, 10px);
  }
  .countdown__unit {
    min-width: clamp(56px, 18vw, 80px);
    gap: 6px;
  }
  .countdown__value {
    font-size: clamp(36px, 10.5vw, 54px);
  }
  .countdown__sep {
    font-size: clamp(36px, 10.5vw, 54px);
  }
  .countdown__name {
    font-size: clamp(9px, 2.6vw, 11px);
    letter-spacing: 0.18em;
  }
}

/* ---------- FOOTER ---------- */
.footer {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(28px, 4.5vh, 52px) clamp(16px, 4vw, 32px) clamp(40px, 6vh, 72px);
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
}

.footer__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
  text-decoration: none;
  font-weight: 800;
  font-size: clamp(15px, 1.15vw, 17px);
  letter-spacing: 0.02em;
  transition: color 200ms ease, transform 200ms ease;
}

.footer__link:hover {
  color: var(--yellow);
  transform: translateY(-1px);
}

.footer__icon {
  width: 22px;
  height: 22px;
  display: block;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .sponsor {
    padding-top: clamp(40px, 7vh, 64px);
    padding-bottom: clamp(28px, 5vh, 48px);
  }
  .sponsor__logo {
    width: clamp(160px, 56vw, 220px);
  }
  .footer {
    padding-bottom: clamp(32px, 5vh, 56px);
  }
}