@font-face {
  font-family: "Cardenio Modern";
  src: url("fonts/CardenioModern-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Cardenio Modern";
  src: url("fonts/CardenioModern-Bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
}

:root {
  --home-bg: #d2f0ff;
}

html {
  background: var(--home-bg);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--home-bg);
  font-family: Arial, sans-serif;
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 20;
  background: #ffffff;
  color: #1c3550;
  padding: 0.5rem 0.75rem;
}

.home-shell {
  min-height: 100vh;
}

.home-artboard {
  position: relative;
  container-type: inline-size;
}

/* Reserve a compact header row so the event line does not cover the artwork. */
.home-artboard .site-nav-shell--overlay {
  position: relative;
  height: 7.25rem;
  background: var(--home-bg);
}

.home-artboard .site-nav-shell--overlay .site-nav-mask {
  display: none;
}

.home-scroll-artwork {
  position: relative;
  aspect-ratio: 2882 / 14583;
}

.home-scroll-artwork > picture {
  display: block;
  width: 100%;
  height: 100%;
}

.home-nav-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: clamp(44px, 5.8vw, 112px);
  background: var(--home-bg);
}

.home-nav {
  position: absolute;
  top: clamp(8px, 1.2vw, 18px);
  left: 50%;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  align-items: center;
  width: min(96%, 1380px);
  transform: translateX(-50%);
}

.home-nav__link {
  color: #2f4054;
  display: block;
  font-family: "Cardenio Modern", Arial, sans-serif;
  font-size: clamp(0.95rem, 1.15vw, 1.45rem);
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.home-nav__link:hover,
.home-nav__link:focus-visible {
  color: #0f2238;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.home-anchor {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
}

.home-anchor--music {
  top: 21.812%;
}

.home-anchor--art {
  top: 53.29%;
}

.home-anchor--menus {
  top: 78.676%;
}

.home-anchor--footer {
  top: 95.938%;
}

.stage-badge {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: clamp(0.35rem, 0.9vw, 0.85rem);
  pointer-events: none;
}

.stage-badge--dj {
  top: 42.933%;
  left: 54.8%;
}

.stage-badge__logo {
  display: block;
  width: clamp(148px, 15.8vw, 315px);
  height: auto;
}

.stage-badge__label {
  color: #eef9ff;
  font-family: "Cardenio Modern", Arial, sans-serif;
  font-size: clamp(1.2rem, 2.15vw, 2.5rem);
  letter-spacing: 0.05em;
  line-height: 1;
  text-shadow:
    0 2px 0 rgba(28, 67, 92, 0.78),
    0 0 10px rgba(24, 66, 95, 0.25);
  text-transform: uppercase;
  white-space: nowrap;
}

.home-character {
  position: absolute;
  z-index: 3;
  display: block;
  height: auto;
  pointer-events: none;
}

.home-character--guitarbird {
  top: 23.894%;
  left: 39.5%;
  width: 21%;
}

.scroll-overlay {
  position: absolute;
  z-index: 4;
  display: block;
  line-height: 0;
}

.scroll-overlay img {
  display: block;
  width: 100%;
  height: auto;
}

.scroll-overlay--schedule {
  top: 24.254%;
  left: 76.266%;
  width: 17.904%;
}

.scroll-overlay--artists {
  top: 25.968%;
  left: 63.636%;
  width: 31.575%;
}

.scroll-overlay--menus {
  top: 79.06%;
  left: 34.976%;
  width: 18.251%;
}

.scroll-overlay--sponsors {
  top: 84%;
  right: 0;
  bottom: 0;
  left: 0;
}

.scroll-overlay:hover {
  filter: brightness(1.08);
}

.scroll-overlay:focus-visible {
  outline: 3px solid #f7e788;
  outline-offset: 3px;
}

.home-scroll {
  display: block;
  width: 100%;
  height: 100%;
}

@media (min-width: 981px) {
  .home-artboard {
    width: min(100%, 1680px);
    margin-inline: auto;
  }
}

@media (max-width: 700px) {
  :root {
    --home-bg: #c7e6f5;
  }

  html,
  body {
    overscroll-behavior-y: none;
  }

  body {
    background: #9fdfd4;
  }

  .home-artboard .site-nav-shell--overlay {
    height: 6rem;
  }

  .home-nav-mask {
    height: 86px;
  }

  .home-nav {
    top: 6px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 0.25rem;
    width: min(98%, 560px);
  }

  .home-nav__link {
    font-size: clamp(0.62rem, 2.1vw, 0.8rem);
    letter-spacing: 0.03em;
  }

  .stage-badge--dj {
    top: 41.916%;
    left: 45.5%;
    gap: 0.35rem;
  }

  .stage-badge__logo {
    width: clamp(108px, 30vw, 165px);
  }

  .stage-badge__label {
    font-size: clamp(0.85rem, 3.45vw, 1.18rem);
  }

  .home-character--guitarbird {
    top: 24.247%;
    left: 40%;
    width: 16.5%;
  }
}

@media (min-width: 701px) and (max-width: 980px) {
  .home-nav-mask {
    height: 78px;
  }

  .home-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    row-gap: 0.35rem;
    width: min(96%, 920px);
  }

  .home-nav__link {
    font-size: clamp(0.82rem, 1.25vw, 1.05rem);
  }

  .stage-badge--dj {
    top: 43.136%;
    left: 50.5%;
  }

  .stage-badge__logo {
    width: clamp(138px, 19vw, 220px);
  }

  .stage-badge__label {
    font-size: clamp(1.05rem, 2.05vw, 1.55rem);
  }
}