:root {
  --events-green: #122e28;
  --events-ink: #0e1a15;
  --events-gold: #c99645;
  --events-paper: #f3e6d1;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--events-green);
}

body {
  overflow-x: clip;
}

/* The page background is full-bleed; only the readable content stays constrained. */
main > .hero,
main > .faq {
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  padding-right: max(32px, calc((100vw - 1340px) / 2));
  padding-left: max(32px, calc((100vw - 1340px) / 2));
}

main > .hero {
  min-height: calc(100svh - 112px);
  background-color: var(--events-green) !important;
}

main > .faq {
  background-color: var(--events-green) !important;
}

/* Pixel-match the floating header from the home page. */
.original-header[data-site-header] {
  right: 32px !important;
  left: 32px !important;
  width: auto !important;
  min-height: 72px;
  max-width: calc(100vw - 64px) !important;
  margin: 0 !important;
  background: rgba(11, 19, 15, .34) !important;
  border: 1px solid rgba(201, 150, 69, .66) !important;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(243, 230, 209, .06) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
}

.original-header[data-site-header].is-scrolled {
  background: rgba(11, 19, 15, .88) !important;
}

.original-header .original-logo-link {
  min-width: max-content;
  color: var(--events-paper);
  text-decoration: none !important;
}

.original-header .original-logo {
  width: clamp(50px, 4vw, 60px);
  height: clamp(50px, 4vw, 60px);
  max-width: none;
}

.original-header .original-brand-wordmark {
  color: #ebc76b;
}

.original-header .original-nav {
  gap: 18px !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.original-header [data-navlink] {
  position: relative;
  padding: 10px 0 !important;
  border-radius: 999px;
  font-size: clamp(15px, .86vw, 17px) !important;
  white-space: nowrap;
  transition: transform .22s cubic-bezier(.16, 1, .3, 1), color .22s cubic-bezier(.16, 1, .3, 1), background .22s cubic-bezier(.16, 1, .3, 1), border-color .22s cubic-bezier(.16, 1, .3, 1) !important;
}

.original-header [data-navlink]::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 0;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #c99645, #ebc76b, #c99645, transparent);
  transform: translateX(-50%);
  transition: width .32s cubic-bezier(.16, 1, .3, 1);
}

.original-header [data-navlink]:hover {
  color: var(--events-paper);
  transform: translateY(-1px);
}

.original-header [data-navlink]:hover::after {
  width: 100%;
}

.original-header .original-actions {
  gap: 16px;
}

.original-header .original-socials {
  gap: 6px;
}

.original-header [data-social-link] {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  text-decoration: none !important;
}

.original-header [data-social-link]:hover {
  background: rgba(201, 150, 69, .08);
}

.original-header [data-social-link] img {
  width: 19px;
  height: 19px;
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(70%) sepia(48%) saturate(711%) hue-rotate(355deg) brightness(91%) contrast(88%);
}

.original-header [data-header-cta] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--events-paper);
  box-shadow: none;
  transition: background .22s, color .22s, transform .22s;
}

.original-header [data-header-cta]:hover {
  background: #b63824;
  color: #fff;
  transform: translateY(-1px);
}

/* Events hero carousel. */
.events-carousel {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(201, 150, 69, .46);
  border-radius: 18px;
  background: #0b130f;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .35);
  isolation: isolate;
  touch-action: pan-y;
  cursor: grab;
}

.events-carousel:active {
  cursor: grabbing;
}

.events-carousel:focus-visible {
  outline: 2px solid #ebc76b;
  outline-offset: 4px;
}

.events-carousel::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  height: 24%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(11, 19, 15, .34));
}

.events-carousel__viewport,
.events-carousel__slide {
  position: absolute;
  inset: 0;
  margin: 0;
}

.events-carousel__slide {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.025);
  transition: opacity .72s ease, visibility .72s ease, transform 1.1s cubic-bezier(.16, 1, .3, 1);
}

.events-carousel__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.hero .events-carousel__slide img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 50% 53%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.hero .events-carousel__slide--space img {
  object-position: 50% 54%;
}

.hero .events-carousel__slide--pour img {
  object-position: 50% 55%;
}

.hero .events-carousel__slide--music img {
  object-position: 50% 42%;
}

.events-carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  width: 46px;
  height: 46px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(235, 199, 107, .7);
  border-radius: 50%;
  background: rgba(11, 19, 15, .7);
  color: #f3e6d1;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .26);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateY(-50%);
  transition: background .22s ease, border-color .22s ease, color .22s ease, transform .22s ease;
  cursor: pointer;
}

.events-carousel__arrow:hover {
  border-color: #ebc76b;
  background: #c99645;
  color: #0b130f;
  transform: translateY(-50%) scale(1.06);
}

.events-carousel__arrow:focus-visible,
.events-carousel__dots button:focus-visible {
  outline: 2px solid #f3e6d1;
  outline-offset: 3px;
}

.events-carousel__arrow svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.events-carousel__arrow--prev {
  left: 16px;
}

.events-carousel__arrow--next {
  right: 16px;
}

.events-carousel__dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  z-index: 4;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(235, 199, 107, .2);
  border-radius: 999px;
  background: rgba(11, 19, 15, .62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateX(-50%);
}

.events-carousel__dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(243, 230, 209, .46);
  transition: width .25s ease, border-radius .25s ease, background .25s ease;
  cursor: pointer;
}

.events-carousel__dots button.is-active {
  width: 25px;
  border-radius: 999px;
  background: #ebc76b;
}

.events-carousel__status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1380px) {
  .original-header[data-site-header] {
    right: 20px !important;
    left: 20px !important;
    max-width: calc(100vw - 40px) !important;
  }
}

@media (max-width: 1180px) {
  main > .hero,
  main > .faq {
    padding-right: 28px;
    padding-left: 28px;
  }

  .original-header .original-nav {
    gap: 12px !important;
  }

  .original-header [data-navlink] {
    font-size: 13px !important;
  }
}

@media (max-width: 767px) {
  main > .hero,
  main > .faq {
    padding-right: 18px;
    padding-left: 18px;
  }

  main > .hero {
    min-height: 0;
  }

  .events-carousel {
    order: -1;
    width: 100%;
    border-radius: 14px;
  }

  .events-carousel__arrow {
    width: 44px;
    height: 44px;
  }

  .events-carousel__arrow--prev {
    left: 10px;
  }

  .events-carousel__arrow--next {
    right: 10px;
  }

  .original-header[data-site-header],
  .original-header[data-site-header].is-scrolled {
    right: 14px !important;
    left: auto !important;
    width: auto !important;
    max-width: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .original-header,
  .original-header.is-scrolled {
    transition: none !important;
  }

  .events-carousel__slide,
  .events-carousel__arrow,
  .events-carousel__dots button {
    transition: none !important;
  }
}
