/* Event billing: a clear invitation, a real lineup, and one free-ticket action. */
.hero-layout { padding-block: 38px 66px; }
.hero-copy { width: 54%; max-width: 650px; }
.hero-invitation { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; color: #fff; font-size: 12px; font-weight: 500; letter-spacing: .09em; line-height: 1.5; text-transform: uppercase; }
.hero-invitation strong { background: #fff; color: #111; padding: 3px 12px; font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.hero-copy .event-title { margin: 0; }
.event-title .event-wordmark { font-size: clamp(43px, 3.65vw, 54px); }
.event-title .event-live { font-size: clamp(128px, 10.6vw, 156px); }
.hero-promise { margin-top: 24px; font-size: clamp(28px, 2.55vw, 36px); line-height: 1.08; font-weight: 500; letter-spacing: -.04em; }
.hero-promise span { display: block; }
.hero-event-details { font-size: 13px; margin-top: 20px; gap: 9px; }
.hero-registration { max-width: 415px; margin-top: 22px; }
.countdown-block { padding: 11px 15px 13px; border-radius: 8px; background: #101010c9; }
.countdown-caption { font-size: 9px; letter-spacing: .11em; }
.event-countdown { margin-top: 9px; }
.event-countdown strong { font-size: 30px; }
.hero-registration .hero-button { margin-top: 14px; min-height: 60px; padding-block: 17px; font-size: 16px; font-weight: 500; }
.hero-reassurance { margin-top: 11px; color: #eee; font-size: 12px; }
.hero-reassurance strong { color: #fff; font-weight: 700; }

/* Guest portraits sit in the open stage area, apart from the registration column. */
.hero-billing { position: absolute; bottom: 81px; right: 0; width: 365px; color: #fff; }
.hero-host { margin-bottom: 23px; padding-bottom: 18px; border-bottom: 1px solid #ffffff45; }
.hero-host > span, .hero-guests-label { display: block; font-size: 10px; line-height: 1.6; letter-spacing: .12em; color: #ccc; text-transform: uppercase; }
.hero-host > strong { display: block; color: #fff; font-size: 25px; font-weight: 500; line-height: 1.25; letter-spacing: -.035em; margin-top: 5px; }
.hero-guests { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 0; margin: 12px 0 0; list-style: none; }
.hero-guests li { min-width: 0; }
.hero-guest-photo { width: 70px; height: 76px; overflow: hidden; background: #282828; border: 1px solid #ffffff35; border-radius: 3px; }
.hero-guest-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.hero-guest-photo--hardy img { object-position: 76% 15%; transform: scale(1.25); transform-origin: 76% 18%; }
.hero-guest-photo--john img { object-position: right top; transform: scale(1.6); transform-origin: right top; }
.hero-guests li > strong { display: block; font-size: 13px; font-weight: 500; line-height: 1.3; margin-top: 10px; }
.hero-lineup-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 5px; font-size: 11px; color: #ddd; text-underline-offset: 4px; }
.hero-lineup-link:hover { color: #fff; text-decoration: underline; }
.hero-photo-credit { font-size: 8px; }

@media (min-width: 761px) {
  .hero-shell:before { background: linear-gradient(90deg, #0a0a0afa 3%, #0a0a0ae8 25%, #0a0a0a9e 49%, #0a0a0a18 75%, #0a0a0a55), linear-gradient(0deg, #0a0a0af5, #0a0a0a38 40%, #0a0a0a14 65%, #0a0a0aad); }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .hero-copy { width: 57%; }
  .hero-billing { width: 280px; bottom: 76px; }
  .hero-host > strong { font-size: 23px; }
  .hero-guests { gap: 13px; }
  .hero-guests li > strong { font-size: 12px; }
  .hero-guest-photo { width: 66px; height: 72px; }
  .event-title .event-wordmark { font-size: 42px; }
  .event-title .event-live { font-size: 128px; }
  .hero-promise { font-size: 30px; }
}
@media (max-width: 900px) and (min-width: 761px) {
  .hero-billing { width: 222px; }
  .hero-host > strong { font-size: 21px; }
  .hero-guests { gap: 9px; }
  .hero-guest-photo { width: 58px; height: 67px; }
  .hero-guests li > strong { font-size: 11px; }
  .hero-host > span, .hero-guests-label { font-size: 9px; }
  .hero-copy { width: 60%; }
  .hero-registration { max-width: 365px; }
  .hero-invitation { font-size: 10px; gap: 9px; }
}
@media (max-width: 760px) {
  .site-header { padding-block: 19px; }
  .header-event-note { font-size: 9px; }
  .hero-layout { padding: 29px 20px 48px; }
  .hero-copy { width: 100%; max-width: 540px; }
  .hero-invitation { font-size: 10px; gap: 10px; margin-bottom: 20px; }
  .hero-invitation strong { font-size: 17px; padding: 2px 9px; }
  .event-title .event-wordmark { font-size: clamp(34px, 9.7vw, 53px); }
  .event-title .event-live { font-size: clamp(96px, 28.6vw, 150px); }
  .hero-promise { font-size: 27px; margin-top: 22px; line-height: 1.13; }
  .hero-event-details { font-size: 12px; gap: 8px; margin-top: 18px; }
  .hero-registration { max-width: 100%; margin-top: 20px; }
  .countdown-block { padding: 10px 14px 12px; }
  .event-countdown strong { font-size: 30px; }
  .countdown-caption { font-size: 8px; }
  .hero-registration .hero-button { margin-top: 13px; font-size: 15px; min-height: 58px; }
  .hero-reassurance { font-size: 11px; margin-top: 11px; }
  .hero-billing { position: static; width: 100%; max-width: 540px; margin: 30px auto 0; padding-top: 23px; border-top: 1px solid #ffffff35; }
  .hero-host { margin: 0 0 21px; padding: 0; border: 0; }
  .hero-host > span { font-size: 9px; }
  .hero-host > strong { font-size: 23px; margin-top: 3px; }
  .hero-guests-label { font-size: 9px; }
  .hero-guests { gap: 18px; }
  .hero-guest-photo { width: 60px; height: 66px; }
  .hero-guests li > strong { font-size: 12px; margin-top: 8px; }
  .hero-lineup-link { font-size: 11px; margin-top: 8px; }
  .hero-photo-credit { font-size: 7px; bottom: 14px; }
  .hero-backdrop { bottom: auto; height: 690px; }
  .hero-backdrop > img { object-position: 62% 30%; }
  .hero-shell:before { background: linear-gradient(90deg, #0b0b0be8, #0b0b0b99), linear-gradient(0deg, #0c0c0c 30%, transparent 65%, #0b0b0b80); }
}
@media (max-width: 360px) {
  .hero-layout { padding: 25px 16px 45px; }
  .hero-invitation { font-size: 9px; gap: 8px; margin-bottom: 17px; }
  .hero-invitation strong { font-size: 16px; }
  .event-title .event-wordmark { font-size: 32px; }
  .event-title .event-live { font-size: 96px; }
  .hero-promise { font-size: 25px; margin-top: 20px; }
  .hero-event-details { font-size: 11px; gap: 7px; margin-top: 17px; }
  .hero-registration { margin-top: 18px; }
  .event-countdown strong { font-size: 28px; }
  .hero-registration .hero-button { font-size: 14px; }
  .hero-reassurance { font-size: 10px; }
  .hero-guests { gap: 12px; }
  .hero-guests li > strong { font-size: 11px; }
  .hero-photo-credit { left: 16px; right: 16px; font-size: 6px; }
}