.ticket-order-body {
  background:
    linear-gradient(rgba(2, 5, 6, 0.16), rgba(2, 5, 6, 0.48)),
    #030506 url("images/ticket-order-background-desktop-v1.png") center top / cover fixed no-repeat;
}

.ticket-order-body .interior-background-layer {
  background:
    linear-gradient(rgba(2, 5, 6, 0.16), rgba(2, 5, 6, 0.48)),
    #030506 url("images/ticket-order-background-desktop-v1.png") center top / 2033px 1144px no-repeat fixed;
}

.ceremony-ticket-cta {
  display: grid;
  justify-items: start;
  gap: 18px;
}

.ceremony-event-primary > .ceremony-ticket-cta > p {
  max-width: 150px;
  color: var(--lime);
  font-family: "Barlow Condensed", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
}

.ceremony-ticket-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 12px 22px;
  color: #050707 !important;
  background: var(--lime);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.42);
  font: 700 19px/1 "Barlow Condensed", Arial, sans-serif;
  letter-spacing: 1.5px;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.ceremony-ticket-button:hover,
.ceremony-ticket-button:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5), 0 0 0 3px rgba(183, 223, 35, 0.18);
}

.ticket-order-page {
  max-width: 1100px;
}

.ticket-order-hero {
  max-width: 900px;
}

.ticket-order-hero h1 {
  font-size: clamp(54px, 7vw, 88px);
}

.ticket-back-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  color: var(--lime);
  font: 700 15px/1 "Barlow Condensed", Arial, sans-serif;
  letter-spacing: 1.4px;
  text-decoration: none;
  text-transform: uppercase;
}

.ticket-back-link:hover,
.ticket-back-link:focus-visible {
  text-decoration: underline;
}

.ticket-order-page .ticket-section {
  margin-top: 42px;
}

@media (max-width: 900px) {
  .ceremony-event-primary > .ceremony-ticket-cta {
    grid-column: 1 / -1;
    width: 100%;
  }

  .ceremony-event-primary > .ceremony-ticket-cta > p {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .ticket-order-body .ticket-order-page {
    background:
      linear-gradient(rgba(2, 5, 6, 0.18), rgba(2, 5, 6, 0.42)),
      url("images/ticket-order-background-mobile-v1.png") center top / 100% auto no-repeat,
      #020405 !important;
  }

  .ceremony-ticket-cta {
    gap: 14px;
  }

  .ceremony-ticket-button {
    width: 100%;
  }

  .ticket-order-page {
    width: min(100% - 28px, 1100px);
  }

  .ticket-order-hero h1 {
    font-size: clamp(48px, 16vw, 64px);
  }

  .ticket-order-page .ticket-section {
    margin-top: 30px;
  }
}