@charset "utf-8";

/* Homepage-only layout.

   These rules used to live in assets/css/pages/homepage-layout.css, which is in
   the packaging script's retired list and is no longer part of the bundle. The
   homepage links no other page-level stylesheet, so its section layouts had
   nowhere to live and "Your occasion. Our kind of night." rendered as three
   bare stacked articles: no grid, no card, no padding. */

/* Shared panel treatment for the event cards. The values are the ones the Next
   Gig card already ships (assets/css/components/next-gig.css): a 112deg
   violet-tinted gradient, a 1px lilac border and a soft purple outer glow. The
   first pass used .card's flat rgba(7,6,11,0.6) panel, which against the
   near-black page read as three dark rectangles with barely visible edges. */
.home-events .event-option {
  border: 1px solid rgba(207, 166, 255, 0.45);
  border-radius: 18px;
  background: linear-gradient(
    112deg,
    rgba(53, 31, 82, 0.72),
    rgba(25, 14, 45, 0.72) 45%,
    rgba(13, 8, 25, 0.72)
  );
  box-shadow:
    0 0 35px rgba(147, 81, 255, 0.16),
    0 28px 70px rgba(0, 0, 0, 0.28);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

@media (hover: hover) and (pointer: fine) {
  .home-events .event-option:hover {
    border-color: rgba(207, 166, 255, 0.8);
    box-shadow:
      0 0 46px rgba(147, 81, 255, 0.3),
      0 30px 74px rgba(0, 0, 0, 0.34);
    transform: translateY(-4px);
  }
}

/* The section heading is set flush to the rail, so the introduction beneath it
   reads as a continuation of that block rather than a separate centred block
   straddling it. */
.home-events .events-intro {
  max-width: 62ch;
  margin: 0 0 44px;
}

/* "Nightshift at a glance" is formatted as three compact proof points. The
   final homepage rules below own the polished tile treatment and responsive
   spacing; these base rules keep the older cascade harmless. */
.proof-facts {
  width: min(100%, 860px);
  margin: 2px 0 0;
}

.proof-facts li + li {
  border-left: 1px solid rgba(183, 140, 255, 0.22);
}

.event-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

/* Three padded cards only sit side by side once each is wide enough to hold its
   heading on one line. Measured: at 861px they were 245px each and the
   headings wrapped, so stack them full width below 960px instead of squeezing
   three cards onto a tablet. */
@media (max-width: 959px) {
  .event-options {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

.event-option {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 28px 30px;
}

/* The 01/02/03 marker becomes a prominent numeral rather than a small pill, so
   each card has a strong anchor in the same way the Next Gig card leads with
   its date. */
.event-option .event-number {
  display: block;
  margin-bottom: 14px;
  color: var(--violet);
  font:
    700 2.6rem/0.9 "Barlow Condensed",
    sans-serif;
  letter-spacing: 0.06em;
  text-shadow: 0 0 22px rgba(147, 81, 255, 0.45);
}

.event-option h3 {
  margin: 18px 0 10px;
  font:
    700 1.6rem/1.15 "Barlow Condensed",
    sans-serif;
  text-wrap: balance;
}

.event-option p {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
  text-align: left;
}

/* The call to action sits on the baseline of every card in the row. */
.event-option a {
  margin-top: auto;
  color: var(--violet);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.home-events .events-about {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  margin-top: 30px;
  color: var(--violet);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 760px) {
  .home-events .events-intro {
    margin-bottom: 28px;
  }
}
/* Mobile home polish: the stacked proof facts inherit the desktop vertical
   dividers from this page stylesheet because it loads after the shared mobile
   proof rules. Reset them here and keep the facts on the compact rail the
   shared component intended. The event cards also get a slightly tighter mobile
   rhythm so the homepage does not feel like a chain of oversized panels. */
@media (max-width: 760px) {
  .home-page .proof-facts {
    width: min(100%, 320px);
    margin-inline: auto;
  }

  .home-page .proof-facts li + li {
    border-left: 0;
    border-top: 1px solid rgba(183, 140, 255, 0.18);
  }

  .home-page .event-options {
    gap: 16px;
  }

  .home-page .event-option {
    padding: 22px 20px 24px;
  }

  .home-page .event-option .event-number {
    margin-bottom: 8px;
    font-size: 2.25rem;
  }

  .home-page .event-option h3 {
    margin: 12px 0 8px;
    font-size: 1.45rem;
  }

  .home-page .event-option p {
    margin-bottom: 14px;
    font-size: 0.92rem;
    line-height: 1.58;
  }

  .home-page .event-option a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }
}

/* Keep the homepage video tile looking intentional if a preview environment
   blocks YouTube's thumbnail image: the accessible alt text remains in the DOM,
   but the broken-image fallback no longer prints tiny text across the poster. */
.home-page .featured-video-band .video-frame {
  background:
    radial-gradient(circle at 50% 44%, rgba(183, 140, 255, 0.16), transparent 42%),
    linear-gradient(145deg, #0e0920, #050408 68%);
}

.home-page .featured-video-band .video-lazy img {
  color: transparent;
  font-size: 0;
}

/* Featured video panel: keep the original copy, but give the video and text a
   shared bordered card so this area reads as one intentional feature. */
#main #watch .featured-video-layout {
  position: relative;
  overflow: hidden;
  max-width: 1080px;
  margin-inline: auto;
  gap: clamp(22px, 4vw, 54px);
  padding: clamp(18px, 3vw, 32px);
  border: 1px solid rgba(207, 166, 255, 0.42);
  border-radius: 24px;
  background:
    radial-gradient(circle at 20% 12%, rgba(183, 140, 255, 0.18), transparent 34%),
    linear-gradient(
      135deg,
      rgba(53, 31, 82, 0.62),
      rgba(17, 10, 31, 0.78) 52%,
      rgba(7, 6, 11, 0.88)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 38px rgba(147, 81, 255, 0.12),
    0 26px 70px rgba(0, 0, 0, 0.34);
}

#main #watch .featured-video-layout::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.08),
    transparent 38%,
    rgba(183, 140, 255, 0.08)
  );
  content: "";
  pointer-events: none;
}

#main #watch .performance-media,
#main #watch .featured-video-copy {
  position: relative;
  z-index: 1;
}

#main #watch .featured-video-copy {
  align-self: center;
  margin-top: 0;
  padding: clamp(2px, 1vw, 12px);
}

/* Featured video copy and follow-up links. The two music links used to sit as
   plain inline text actions; when text was extracted or wrapped tightly they
   could read as one run-on label. Treat them as two distinct, responsive
   actions on both desktop and mobile. */
#main #watch .featured-video-summary {
  max-width: 34ch;
  margin-inline: auto;
  text-align: center;
  text-wrap: pretty;
}

#main #watch .video-fallback {
  max-width: 34ch;
  margin: 10px auto 0;
  color: rgba(247, 243, 237, 0.74);
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: center;
}

#main #watch .video-fallback a {
  color: #dfb2ff;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

#main #watch .featured-video-copy .links.featured-video-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin: 18px auto 0;
  padding: 0;
}

#main #watch .featured-video-copy .links .featured-video-action {
  display: inline-flex;
  min-width: 0;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid rgba(223, 178, 255, 0.26);
  border-radius: 999px;
  background: rgba(183, 140, 255, 0.08);
  color: #f7f3ed;
  font-size: 0.78rem;
  line-height: 1.2;
  letter-spacing: 0.055em;
  text-align: center;
  text-decoration: none;
  white-space: normal;
}

#main #watch .featured-video-copy .links .featured-video-action:hover,
#main #watch .featured-video-copy .links .featured-video-action:focus-visible {
  border-color: rgba(223, 178, 255, 0.52);
  background: rgba(183, 140, 255, 0.16);
  color: #fff;
}

@media (max-width: 760px) {
  #main #watch .featured-video-layout {
    gap: 20px;
    padding: 16px;
    border-radius: 20px;
  }

  #main #watch .featured-video-copy {
    padding: 0 2px 4px;
  }

  #main #watch .featured-video-summary {
    max-width: 31ch;
  }

  #main #watch .video-fallback {
    max-width: 30ch;
  }

  #main #watch .featured-video-copy .links.featured-video-actions {
    grid-template-columns: minmax(0, 1fr);
    max-width: 280px;
    gap: 10px;
    margin-top: 16px;
  }

  #main #watch .featured-video-copy .links .featured-video-action {
    width: 100%;
    min-height: 48px;
    padding-inline: 18px;
  }
}

/* Homepage video text reorganisation: keep the copy directly beneath the
   YouTube frame, then present the three follow-up routes as one tidy action
   row. The wording stays unchanged. */
#main #watch .featured-video-layout {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0;
  max-width: 920px;
}

#main #watch .performance-media {
  width: min(100%, 820px);
  margin-inline: auto;
}

#main #watch .featured-video-copy {
  display: grid;
  width: min(100%, 820px);
  margin: 18px auto 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(223, 178, 255, 0.18);
  gap: 14px;
  text-align: center;
}

#main #watch .featured-video-summary {
  max-width: 56ch;
  margin: 0 auto !important;
  color: rgba(247, 243, 237, 0.82);
}

#main #watch .featured-video-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

#main #watch .video-fallback {
  width: auto;
  max-width: none;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.2;
}

#main #watch .video-fallback a,
#main #watch .featured-video-copy .links .featured-video-action {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid rgba(223, 178, 255, 0.26);
  border-radius: 999px;
  background: rgba(183, 140, 255, 0.08);
  color: #f7f3ed;
  font-size: 0.78rem;
  line-height: 1.2;
  letter-spacing: 0.055em;
  text-align: center;
  text-decoration: none;
}

#main #watch .video-fallback a:hover,
#main #watch .video-fallback a:focus-visible,
#main #watch .featured-video-copy .links .featured-video-action:hover,
#main #watch .featured-video-copy .links .featured-video-action:focus-visible {
  border-color: rgba(223, 178, 255, 0.52);
  background: rgba(183, 140, 255, 0.16);
  color: #fff;
}

#main #watch .featured-video-copy .links.featured-video-actions {
  display: flex;
  flex-wrap: wrap;
  width: auto;
  margin: 0;
  gap: 10px;
}

@media (max-width: 760px) {
  #main #watch .featured-video-copy {
    margin-top: 16px;
    padding: 16px 0 2px;
    gap: 14px;
  }

  #main #watch .featured-video-summary {
    max-width: 31ch;
  }

  #main #watch .featured-video-options {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    max-width: 280px;
    margin-inline: auto;
  }

  #main #watch .video-fallback,
  #main #watch .video-fallback a,
  #main #watch .featured-video-copy .links.featured-video-actions,
  #main #watch .featured-video-copy .links .featured-video-action {
    width: 100%;
  }

  #main #watch .featured-video-copy .links.featured-video-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Final homepage video placement: make the video the visual anchor, then use a
   compact caption tray beneath it with one primary YouTube action and two
   quieter follow-up actions. */
#main #watch .featured-video-layout {
  max-width: 980px;
  padding: clamp(14px, 2.6vw, 26px);
}

#main #watch .performance-media {
  width: min(100%, 900px);
}

#main #watch .featured-video-band .video-frame,
#main #watch .video-frame {
  border-radius: 18px;
  box-shadow:
    0 20px 54px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

#main #watch .featured-video-copy {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  align-items: center;
  width: min(100%, 900px);
  margin-top: 20px;
  padding: 20px 2px 0;
  column-gap: clamp(20px, 4vw, 40px);
  row-gap: 18px;
}

#main #watch .featured-video-summary {
  justify-self: start;
  max-width: 46ch;
  text-align: left;
}

#main #watch .featured-video-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-self: end;
  width: min(100%, 380px);
  gap: 10px;
}

#main #watch .video-fallback {
  grid-column: 1 / -1;
}

#main #watch .video-fallback a {
  width: 100%;
  min-height: 50px;
  border-color: rgba(255, 255, 255, 0.38);
  background: linear-gradient(135deg, #f0dcff 0%, #d7b6ff 44%, #b78cff 100%);
  color: #150922;
  box-shadow:
    0 12px 30px rgba(183, 140, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
  font-weight: 850;
}

#main #watch .video-fallback a::after {
  color: currentColor;
}

#main #watch .video-fallback a:hover,
#main #watch .video-fallback a:focus-visible {
  border-color: rgba(255, 255, 255, 0.62);
  background: linear-gradient(135deg, #fff 0%, #e5ccff 44%, #caa1ff 100%);
  color: #12081f;
  transform: translateY(-1px);
}

#main #watch .featured-video-copy .links.featured-video-actions {
  display: contents;
}

#main #watch .featured-video-copy .links .featured-video-action {
  min-height: 48px;
  padding-inline: 14px;
  border-color: rgba(223, 178, 255, 0.28);
  background: rgba(7, 6, 11, 0.24);
  color: rgba(247, 243, 237, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-size: 0.76rem;
}

#main #watch .featured-video-copy .links .featured-video-action:hover,
#main #watch .featured-video-copy .links .featured-video-action:focus-visible {
  border-color: rgba(223, 178, 255, 0.54);
  background: rgba(183, 140, 255, 0.15);
  transform: translateY(-1px);
}

@media (max-width: 760px) {
  #main #watch .featured-video-layout {
    padding: 14px;
  }

  #main #watch .featured-video-band .video-frame,
  #main #watch .video-frame {
    border-radius: 14px;
  }

  #main #watch .featured-video-copy {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 16px;
    padding-top: 16px;
    text-align: center;
  }

  #main #watch .featured-video-summary {
    justify-self: center;
    max-width: 31ch;
    text-align: center;
  }

  #main #watch .featured-video-options {
    width: min(100%, 290px);
    justify-self: center;
    grid-template-columns: minmax(0, 1fr);
  }

  #main #watch .video-fallback,
  #main #watch .video-fallback a,
  #main #watch .featured-video-copy .links .featured-video-action {
    width: 100%;
  }
}

/* Final adjustment for the homepage YouTube feature: centre the video, then
   keep the caption and actions on one calm vertical axis. The YouTube link is
   the only button; the two supporting routes become lighter text actions so
   the area no longer feels visually pulled in different directions. */
#main #watch .featured-video-layout {
  max-width: 940px;
  padding: clamp(16px, 3vw, 30px);
}

#main #watch .performance-media {
  width: min(100%, 860px);
  margin-inline: auto;
}

#main #watch .video-frame {
  margin-inline: auto;
  border-radius: 18px;
}

#main #watch .featured-video-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  width: min(100%, 760px);
  margin: 20px auto 0;
  padding: 20px 0 0;
  gap: 16px;
  border-top: 1px solid rgba(223, 178, 255, 0.18);
  text-align: center;
}

#main #watch .featured-video-summary {
  justify-self: center;
  max-width: 52ch;
  text-align: center;
}

#main #watch .featured-video-options {
  display: grid;
  width: min(100%, 560px);
  justify-items: center;
  gap: 12px;
}

#main #watch .video-fallback {
  width: auto;
  margin: 0;
}

#main #watch .video-fallback a {
  width: auto;
  min-width: min(100%, 220px);
  min-height: 50px;
  padding: 0 24px;
  border-color: rgba(255, 255, 255, 0.4);
  background: linear-gradient(135deg, #f0dcff 0%, #d7b6ff 44%, #b78cff 100%);
  color: #150922;
  box-shadow:
    0 12px 30px rgba(183, 140, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
  font-weight: 850;
}

#main #watch .video-fallback a:hover,
#main #watch .video-fallback a:focus-visible {
  border-color: rgba(255, 255, 255, 0.62);
  background: linear-gradient(135deg, #fff 0%, #e5ccff 44%, #caa1ff 100%);
  color: #12081f;
  transform: translateY(-1px);
}

#main #watch .featured-video-copy .links.featured-video-actions {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
  gap: 4px 18px;
  margin: 0;
}

#main #watch .featured-video-copy .links .featured-video-action {
  width: auto;
  min-height: 44px;
  padding: 6px 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #dfb2ff;
  font-size: 0.88rem;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
  text-transform: none;
}

#main #watch .featured-video-copy .links .featured-video-action:hover,
#main #watch .featured-video-copy .links .featured-video-action:focus-visible {
  border: 0;
  background: none;
  color: #fff;
  text-decoration-thickness: 2px;
  transform: none;
}

#main #watch .featured-video-action .external-link-icon {
  display: none;
}

@media (max-width: 760px) {
  #main #watch .featured-video-layout {
    padding: 14px;
  }

  #main #watch .video-frame {
    border-radius: 14px;
  }

  #main #watch .featured-video-copy {
    width: 100%;
    margin-top: 16px;
    padding-top: 16px;
    gap: 14px;
  }

  #main #watch .featured-video-summary {
    max-width: 31ch;
  }

  #main #watch .featured-video-options {
    width: min(100%, 300px);
  }

  #main #watch .video-fallback,
  #main #watch .video-fallback a {
    width: 100%;
  }

  #main #watch .featured-video-copy .links.featured-video-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  #main #watch .featured-video-copy .links .featured-video-action {
    justify-self: center;
    width: auto;
    max-width: 100%;
  }
}

/* Responsive YouTube feature layout: keep the section on one deliberate axis.
   The short intro now leads into the video, then the primary YouTube action and
   quieter supporting links follow underneath. This keeps desktop and mobile
   from feeling like separate, competing pieces. */
#main #watch .section-head {
  width: min(100%, 940px);
  margin: 0 auto clamp(22px, 3vw, 34px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}

#main #watch .featured-video-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center;
  width: min(100%, 960px);
  max-width: 960px;
  margin-inline: auto;
  padding: clamp(18px, 2.8vw, 32px);
  gap: clamp(16px, 2.1vw, 22px);
}

#main #watch .featured-video-copy {
  display: block;
  width: min(100%, 650px);
  max-width: none;
  margin: 0 auto;
  padding: 0;
  border: 0;
  text-align: center;
}

#main #watch .featured-video-summary {
  width: min(100%, 54ch);
  max-width: 54ch;
  margin: 0 auto !important;
  color: rgba(247, 243, 237, 0.84);
  font-size: clamp(0.98rem, 0.9rem + 0.25vw, 1.08rem);
  line-height: 1.58;
  text-align: center !important;
  text-wrap: pretty;
}

#main #watch .performance-media {
  width: min(100%, 880px);
  margin-inline: auto;
}

#main #watch .video-frame {
  width: 100%;
  margin: 0 auto;
  border-radius: 18px;
  box-shadow:
    0 20px 54px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

#main #watch .featured-video-options {
  display: grid;
  justify-items: center;
  width: min(100%, 620px);
  gap: 10px;
  margin: 0 auto;
}

#main #watch .video-fallback {
  width: auto;
  max-width: 100%;
  margin: 0;
  text-align: center;
}

#main #watch .video-fallback a {
  display: inline-flex;
  width: auto;
  min-width: min(100%, 220px);
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border-color: rgba(255, 255, 255, 0.4);
  background: linear-gradient(135deg, #f0dcff 0%, #d7b6ff 44%, #b78cff 100%);
  color: #150922;
  box-shadow:
    0 12px 30px rgba(183, 140, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
  font-weight: 850;
  text-decoration: none;
}

#main #watch .video-fallback a:hover,
#main #watch .video-fallback a:focus-visible {
  border-color: rgba(255, 255, 255, 0.62);
  background: linear-gradient(135deg, #fff 0%, #e5ccff 44%, #caa1ff 100%);
  color: #12081f;
  transform: translateY(-1px);
}

#main #watch .featured-video-actions {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
  gap: 4px 18px;
  margin: 0;
  padding: 0;
}

#main #watch .featured-video-action {
  display: inline-flex;
  width: auto;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #dfb2ff;
  font-size: 0.88rem;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: center;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
  text-transform: none;
}

#main #watch .featured-video-action:hover,
#main #watch .featured-video-action:focus-visible {
  border: 0;
  background: none;
  color: #fff;
  text-decoration-thickness: 2px;
  transform: none;
}

#main #watch .featured-video-action .external-link-icon {
  display: none;
}

@media (max-width: 760px) {
  #main #watch .section-head {
    width: min(100%, 22rem);
    margin-bottom: 18px;
    gap: 8px;
  }

  #main #watch .featured-video-layout {
    width: min(100%, 28rem);
    padding: 12px;
    gap: 13px;
    border-radius: 18px;
  }

  #main #watch .featured-video-copy {
    width: 100%;
  }

  #main #watch .featured-video-summary {
    width: min(100%, 30ch);
    max-width: 30ch;
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: center !important;
  }

  #main #watch .performance-media {
    width: 100%;
  }

  #main #watch .video-frame {
    border-radius: 14px;
  }

  #main #watch .featured-video-options {
    width: min(100%, 18.75rem);
    gap: 8px;
  }

  #main #watch .video-fallback,
  #main #watch .video-fallback a {
    width: 100%;
  }

  #main #watch .featured-video-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  #main #watch .featured-video-action {
    justify-self: center;
    width: auto;
    max-width: 100%;
    min-height: 40px;
  }
}

@media (max-width: 360px) {
  #main #watch .featured-video-layout {
    width: 100%;
  }

  #main #watch .featured-video-options {
    width: 100%;
  }
}

/* Keep the separated action group above the decorative panel sheen after the
   copy/video/options markup is split into three siblings. */
#main #watch .featured-video-options {
  position: relative;
  z-index: 1;
}

/* Final link treatment for the showreel: the YouTube route is now a quieter
   dark play-link instead of a bright filled button, while the supporting music
   links get clearer desktop and mobile affordances. */
#main #watch .featured-video-options {
  display: flex;
  flex-wrap: wrap;
  width: min(100%, 700px);
  align-items: center;
  justify-content: center;
  gap: 8px clamp(14px, 2.4vw, 22px);
  position: relative;
  z-index: 1;
}

#main #watch .video-fallback {
  width: auto;
  margin: 0;
}

#main #watch .video-fallback a {
  gap: 10px;
  min-width: 0;
  min-height: 46px;
  padding: 0 18px 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(183, 140, 255, 0.075)),
    rgba(7, 6, 11, 0.5);
  color: rgba(247, 243, 237, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 10px 24px rgba(0, 0, 0, 0.24);
  font-weight: 800;
}

#main #watch .video-fallback a::before {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid #ff4a65;
  content: "";
  filter: drop-shadow(0 0 8px rgba(255, 74, 101, 0.34));
}

#main #watch .video-fallback a::after {
  display: none;
  content: none;
}

#main #watch .video-fallback a:hover,
#main #watch .video-fallback a:focus-visible {
  border-color: rgba(255, 74, 101, 0.46);
  background:
    linear-gradient(135deg, rgba(255, 74, 101, 0.16), rgba(183, 140, 255, 0.1)),
    rgba(12, 9, 18, 0.68);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 30px rgba(0, 0, 0, 0.28),
    0 0 22px rgba(255, 74, 101, 0.12);
  transform: translateY(-1px);
}

#main #watch .featured-video-actions {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  width: auto;
  align-items: center;
  justify-content: center;
  gap: 4px 16px;
}

#main #watch .featured-video-action {
  position: relative;
  gap: 0.34em;
  min-height: 38px;
  padding: 5px 0;
  color: rgba(223, 178, 255, 0.88);
  text-decoration: none;
  text-underline-offset: 0.24em;
}

#main #watch .featured-video-action::after {
  display: inline-block;
  margin-left: 0.35em;
  color: currentColor;
  font-weight: 700;
  content: "→";
  text-decoration: none;
  transition: transform 0.18s ease;
}

#main #watch .featured-video-action:hover,
#main #watch .featured-video-action:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  transform: none;
}

#main #watch .featured-video-action:hover::after,
#main #watch .featured-video-action:focus-visible::after {
  transform: translateX(3px);
}

@media (min-width: 761px) {
  #main #watch .featured-video-options {
    flex-wrap: nowrap;
  }

  #main #watch .featured-video-actions {
    padding-left: clamp(14px, 2vw, 20px);
    border-left: 1px solid rgba(223, 178, 255, 0.18);
  }
}

@media (max-width: 760px) {
  #main #watch .featured-video-options {
    display: grid;
    width: min(100%, 19.5rem);
    gap: 8px;
  }

  #main #watch .video-fallback,
  #main #watch .video-fallback a {
    width: 100%;
  }

  #main #watch .video-fallback a {
    min-height: 48px;
  }

  #main #watch .featured-video-actions {
    display: grid;
    width: 100%;
    gap: 0;
    padding: 5px 4px 0;
    border-top: 1px solid rgba(223, 178, 255, 0.16);
  }

  #main #watch .featured-video-action {
    width: 100%;
    min-height: 42px;
    justify-content: center;
    padding: 8px 0;
  }

  #main #watch .featured-video-action + .featured-video-action {
    border-top: 1px solid rgba(223, 178, 255, 0.11);
  }
}

/* Final placement correction: the showreel should lead visually. Keep the
   short sentence as a caption beneath the frame rather than introducing the
   video from above, then let the links sit below that caption. */
#main #watch .featured-video-layout {
  gap: clamp(12px, 1.8vw, 18px);
}

#main #watch .performance-media {
  order: 1;
}

#main #watch .featured-video-copy {
  order: 2;
  width: min(100%, 620px);
}

#main #watch .featured-video-summary {
  width: min(100%, 48ch);
  max-width: 48ch;
  color: rgba(247, 243, 237, 0.78);
  font-size: clamp(0.94rem, 0.88rem + 0.18vw, 1rem);
  line-height: 1.52;
}

#main #watch .featured-video-options {
  order: 3;
  margin-top: 2px;
}

@media (max-width: 760px) {
  #main #watch .featured-video-layout {
    gap: 11px;
  }

  #main #watch .featured-video-summary {
    width: min(100%, 30ch);
    max-width: 30ch;
    font-size: 0.92rem;
    line-height: 1.48;
  }

  #main #watch .featured-video-options {
    margin-top: 0;
  }
}

/* With the separate YouTube button removed, let the two follow-up links be the
   whole action group. Avoid leftover divider treatments that only made sense
   when a primary video link sat beside them. */
#main #watch .featured-video-options {
  width: min(100%, 540px);
  gap: 0;
}

#main #watch .featured-video-actions {
  width: 100%;
  max-width: 500px;
  justify-content: center;
  gap: 4px clamp(18px, 4vw, 32px);
  padding-left: 0;
  border-left: 0;
}

@media (min-width: 761px) {
  #main #watch .featured-video-actions {
    flex-wrap: nowrap;
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 760px) {
  #main #watch .featured-video-options {
    width: min(100%, 18rem);
  }

  #main #watch .featured-video-actions {
    padding: 0;
    border-top: 0;
  }
}

/* Fluid bridge between desktop and phone widths: keep the showreel card from
   feeling like either an oversized desktop panel or a cramped mobile stack on
   tablets and narrow laptops. */
@media (min-width: 761px) and (max-width: 1080px) {
  #main #watch .section-head {
    width: min(100%, 44rem);
    margin-bottom: clamp(20px, 3vw, 28px);
  }

  #main #watch .featured-video-layout {
    width: min(100%, 44rem);
    max-width: 44rem;
    padding: clamp(14px, 2.6vw, 22px);
    gap: 14px;
    border-radius: 22px;
  }

  #main #watch .performance-media {
    width: 100%;
    max-width: none;
  }

  #main #watch .video-frame {
    border-radius: 16px;
  }

  #main #watch .featured-video-copy {
    width: min(100%, 36rem);
  }

  #main #watch .featured-video-summary {
    width: min(100%, 38ch);
    max-width: 38ch;
  }

  #main #watch .featured-video-options {
    width: min(100%, 31rem);
  }

  #main #watch .featured-video-actions {
    max-width: 31rem;
    gap: 4px clamp(16px, 3vw, 24px);
  }
}

@media (min-width: 761px) and (max-width: 860px) {
  #main #watch .featured-video-layout {
    width: min(100%, 36rem);
    padding: 14px;
    gap: 12px;
    border-radius: 18px;
  }

  #main #watch .featured-video-summary {
    width: min(100%, 31ch);
    max-width: 31ch;
  }

  #main #watch .featured-video-options {
    width: min(100%, 18rem);
  }

  #main #watch .featured-video-actions {
    display: grid;
    width: 100%;
    gap: 0;
  }

  #main #watch .featured-video-action {
    width: 100%;
    min-height: 42px;
    justify-content: center;
    padding: 8px 0;
  }

  #main #watch .featured-video-action + .featured-video-action {
    border-top: 1px solid rgba(223, 178, 255, 0.11);
  }
}

/* Proof facts: make the text structure explicit so the review count, label and
   supporting reassurance lines cannot collapse into a single run-on phrase when
   widths move between desktop and mobile. */
#main .landing-proof .proof-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
}

#main .landing-proof .proof-facts li {
  display: grid;
  min-width: 0;
  align-content: center;
  justify-items: center;
  gap: 3px;
  text-align: center;
}

#main .landing-proof .proof-facts :is(.fact-top, .fact-bottom, .review-count, .review-label, .review-note) {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: normal;
  white-space: normal;
}

#main .landing-proof .proof-review-link {
  display: inline-grid;
  grid-template-columns: max-content minmax(0, max-content);
  grid-template-areas: "count copy";
  align-items: center;
  justify-content: center;
  column-gap: 10px;
  min-width: 0;
  text-align: left;
}

#main .landing-proof .review-copy {
  display: grid;
  grid-area: copy;
  grid-template-areas: "label" "note";
  justify-items: start;
  min-width: 0;
  row-gap: 1px;
}

#main .landing-proof .review-count {
  grid-area: count;
}

#main .landing-proof .review-label {
  grid-area: label;
}

#main .landing-proof .review-note {
  grid-area: note;
  color: #dfb2ff;
}

#main .landing-proof .review-note::after {
  content: " →";
  white-space: nowrap;
}

@media (min-width: 561px) and (max-width: 860px) {
  #main .landing-proof .proof-facts {
    width: min(100%, 42rem);
  }

  #main .landing-proof .proof-facts li {
    padding-inline: clamp(12px, 2vw, 18px);
  }

  #main .landing-proof .proof-review-link {
    grid-template-columns: max-content minmax(0, max-content);
    grid-template-areas: "count copy";
    column-gap: clamp(8px, 1.6vw, 12px);
    justify-items: start;
    text-align: left;
  }
}

@media (max-width: 560px) {
  #main .landing-proof .proof-facts {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 320px);
  }

  #main .landing-proof .proof-facts li + li {
    border-left: 0;
    border-top: 1px solid rgba(183, 140, 255, 0.18);
  }

  #main .landing-proof .proof-review-link {
    grid-template-columns: max-content minmax(0, max-content);
    grid-template-areas: "count copy";
  }
}

/* Homepage format polish: keep the page flowing as one composition, but avoid
   making the at-a-glance proof points look like buttons. */
.home-page #main > section:not(.hero),
.home-page #main > section:not(.hero) + section {
  border-top: 0 !important;
}

.home-page #main > section:not(.hero)::before {
  display: none !important;
  content: none !important;
}

.home-page #main > .landing-proof {
  padding-block: clamp(24px, 3.4vw, 38px);
  background:
    radial-gradient(circle at 50% 0%, rgba(183, 140, 255, 0.08), transparent 58%),
    linear-gradient(180deg, rgba(183, 140, 255, 0.035), rgba(7, 6, 11, 0));
}

.home-page #main > .featured-video-band {
  padding-block: clamp(52px, 6vw, 76px);
}

.home-page #main > .home-events,
.home-page #main > .home-next-date {
  padding-block: clamp(56px, 6.5vw, 82px);
}

.home-page #main > .home-cta {
  padding-block: clamp(50px, 6vw, 76px) clamp(60px, 7vw, 90px);
}

#main .landing-proof .wrap {
  display: grid;
  align-items: center;
  justify-items: center;
  gap: 0;
}

/* A quiet facts rail: text and fine dividers only. No filled boxes, rounded
   tiles, or button-like surfaces. The review count remains on the left with
   Reviews and on Lemonrock stacked to its right. */
#main .landing-proof .proof-facts {
  box-sizing: border-box;
  display: grid;
  width: min(100%, 820px);
  margin: 0 auto;
  padding: 0;
  overflow: visible;
  grid-template-columns: 1.18fr repeat(2, minmax(0, 1fr));
  gap: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

#main .landing-proof .proof-facts li {
  position: relative;
  display: grid;
  min-height: 56px;
  min-width: 0;
  align-content: center;
  justify-items: center;
  padding: clamp(8px, 1.4vw, 12px) clamp(16px, 2.6vw, 30px);
  border: 0 !important;
  border-radius: 0;
  background: none;
  box-shadow: none;
  gap: 2px;
  text-align: center;
}

#main .landing-proof .proof-facts li + li {
  border: 0 !important;
}

#main .landing-proof .proof-facts li + li::before {
  position: absolute;
  top: 18%;
  bottom: 18%;
  left: 0;
  display: block;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(223, 178, 255, 0.32),
    transparent
  );
  content: "";
  pointer-events: none;
}

#main .landing-proof .proof-review-link {
  width: auto;
  min-width: 0;
  grid-template-columns: max-content minmax(0, max-content);
  grid-template-areas: "count copy";
  justify-content: center;
  column-gap: clamp(10px, 1.8vw, 14px);
}

#main .landing-proof .review-copy {
  display: grid;
  grid-area: copy;
  justify-items: start;
  min-width: 0;
  row-gap: 1px;
}

#main .landing-proof .review-count strong {
  font-size: clamp(1.85rem, 2.8vw, 2.2rem);
  letter-spacing: 0.01em;
}

#main .landing-proof .review-label,
#main .landing-proof .fact-top {
  color: #fff;
  font-size: clamp(1rem, 1vw, 1.12rem);
  line-height: 1.05;
}

#main .landing-proof .review-note {
  color: #dfb2ff;
}

#main .landing-proof .fact-bottom,
#main .landing-proof .review-note {
  margin-top: 2px;
  font-size: clamp(0.78rem, 0.74rem + 0.12vw, 0.84rem);
  line-height: 1.25;
}

#main #watch .section-head,
.home-events .section-head {
  margin-bottom: clamp(18px, 2.6vw, 30px);
}

/* The intro, the cards' links and "Meet the people behind the music" below
   are centred, as is the showreel header above. This header was left on the
   shared left-aligned flex column inside a centred 760px box, so the eyebrow
   sat centred while the heading hung 180px in from the left of it. */
.home-events .section-head {
  width: min(100%, 760px);
  margin-inline: auto;
  align-items: center;
  text-align: center;
}

.home-events .section-head h2 {
  text-align: center;
}

.home-events .events-intro {
  max-width: 60ch;
  margin: 0 auto clamp(30px, 4vw, 46px);
  color: rgba(247, 243, 237, 0.78);
  text-align: center;
  text-wrap: pretty;
}

.home-events .event-options {
  gap: clamp(18px, 2.5vw, 30px);
  align-items: stretch;
}

.home-events .event-option {
  min-height: 100%;
  padding: clamp(24px, 2.5vw, 32px);
}

.home-events .event-option .event-number {
  margin-bottom: 6px;
}

.home-events .event-option h3 {
  margin-top: 12px;
}

/* display: flex so the auto margins centre it; auto inline margins do nothing
   on an inline-level box. Two IDs outrank the shared
   `#main :is(.action-link, .links .small, ...)` rule in actions.css that sets
   inline-flex; with one ID the two tie and actions.css wins on order. */
#main #your-event .events-about {
  display: flex;
  width: fit-content;
  max-width: 100%;
  justify-content: center;
  margin: clamp(26px, 4vw, 38px) auto 0;
  text-align: center;
}

.home-page .next-gig-row > .next-gig-heading {
  margin-bottom: clamp(16px, 2.4vw, 24px);
}

.home-page .next-gig-row > .next-gig-heading > h2::before,
.home-page .next-gig-row > .next-gig-heading > h2::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(223, 178, 255, 0.58),
    transparent
  );
  opacity: 0.65;
}

.home-next-date .home-diary-link {
  margin-top: clamp(16px, 2.5vw, 24px);
  text-align: center;
}

.home-page .home-cta .footer-cta {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 22px 58px rgba(0, 0, 0, 0.24),
    0 0 34px rgba(147, 81, 255, 0.12);
}

@media (min-width: 901px) {
  #main .landing-proof .wrap {
    width: min(100%, 900px);
  }
}

@media (max-width: 959px) {
  .home-events .event-options {
    width: min(100%, 44rem);
    margin-inline: auto;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .home-page #main > .featured-video-band,
  .home-page #main > .home-events,
  .home-page #main > .home-next-date,
  .home-page #main > .home-cta {
    padding-block: clamp(50px, 6vw, 68px);
  }

  .home-page #main > .landing-proof {
    padding-block: 28px 32px;
  }
}

@media (min-width: 561px) and (max-width: 900px) {
  #main .landing-proof .proof-facts {
    width: min(100%, 42rem);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #main .landing-proof .proof-facts li {
    min-height: 62px;
    padding-inline: 12px;
  }
}

@media (max-width: 760px) {
  .home-page #main > .landing-proof {
    padding-block: 22px 28px;
  }

  .home-page #main > .featured-video-band,
  .home-page #main > .home-events,
  .home-page #main > .home-cta {
    padding-block: 42px;
  }

  .home-page #main > .home-next-date {
    padding-top: 46px !important;
    padding-bottom: 42px !important;
  }

  .home-events .section-head {
    margin-bottom: 16px;
  }

  .home-events .events-intro {
    max-width: 32ch;
    margin-bottom: 26px;
  }

  .home-events .event-options {
    gap: 16px;
  }

  .home-events .events-about {
    margin-top: 24px;
  }
}

@media (max-width: 560px) {
  #main .landing-proof .proof-facts {
    width: min(100%, 330px);
    grid-template-columns: minmax(0, 1fr);
  }

  #main .landing-proof .proof-facts li {
    min-height: 0;
    padding: 13px 10px;
  }

  #main .landing-proof .proof-facts li + li::before {
    top: 0;
    right: 22%;
    bottom: auto;
    left: 22%;
    width: auto;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(223, 178, 255, 0.26),
      transparent
    );
  }

  #main .landing-proof .proof-review-link {
    justify-content: center;
  }
}

/* Desktop event cards: the mobile link placement reads well because each card is
   full width. In the three-column desktop row, give every card CTA the same
   centred baseline so the links sit evenly under their copy. */
@media (min-width: 960px) {
  .home-events .event-option > a {
    align-self: stretch;
    justify-content: center;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(223, 178, 255, 0.14);
    text-align: center;
  }
}

/* At-a-glance proof strip. Three matching facts: a badge (the synced review
   count or an icon), a short title and one supporting line. Scoped under
   #main #proof so it supersedes the older .proof-facts layers. */
#main #proof {
  padding-block: clamp(28px, 4vw, 44px);
}
#main #proof .proof-list {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 1000px);
  margin: 0 auto;
  padding: 8px;
  list-style: none;
  border: 1px solid rgba(183, 140, 255, 0.16);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  box-shadow: 0 18px 40px rgba(4, 0, 14, 0.28);
}
#main #proof .proof-item {
  position: relative;
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  text-align: left;
}
#main #proof .proof-item + .proof-item::before {
  content: "";
  position: absolute;
  top: 18%;
  bottom: 18%;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(183, 140, 255, 0.3), transparent);
}
#main #proof .proof-item-body {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 0;
  min-height: 0;
  padding: 16px 18px;
  border-radius: 14px;
  color: var(--text);
  text-align: left;
  text-decoration: none;
}
#main #proof :is(.review-count, .proof-badge) {
  display: grid;
  flex: none;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(183, 140, 255, 0.32);
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 20%, rgba(223, 178, 255, 0.22), transparent 70%),
    rgba(124, 58, 237, 0.16);
  color: #dfb2ff;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
#main #proof .review-count strong {
  color: #fff;
  font: 800 1.65rem/1 "Barlow Condensed", sans-serif;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
#main #proof .proof-badge svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#main #proof .proof-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}
#main #proof .proof-title {
  color: #fff;
  font: 700 1.15rem/1.1 "Barlow Condensed", sans-serif;
  letter-spacing: 0.03em;
}
#main #proof .proof-sub {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.3;
}
#main #proof .proof-link .proof-sub {
  color: #dfb2ff;
}
/* The shared list-link arrow would land at the far edge of the flex row;
   this link carries its own inline arrow beside the text instead. */
#main #proof .proof-link::after {
  content: none;
}
#main #proof .proof-arrow {
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.2s ease;
}
#main #proof .proof-link:hover .review-count,
#main #proof .proof-link:focus-visible .review-count {
  border-color: rgba(223, 178, 255, 0.6);
  background-color: rgba(124, 58, 237, 0.28);
}
#main #proof .proof-link:hover .proof-sub {
  text-decoration: underline;
  text-underline-offset: 3px;
}
#main #proof .proof-link:hover .proof-arrow {
  transform: translateX(3px);
}
#main #proof .proof-link:focus-visible {
  outline: 2px solid #dfb2ff;
  outline-offset: 2px;
}

/* Tablet: three columns stay, with tighter gutters. */
@media (min-width: 761px) and (max-width: 960px) {
  #main #proof .proof-item-body {
    gap: 12px;
    padding: 14px 10px;
  }
  #main #proof :is(.review-count, .proof-badge) {
    width: 46px;
    height: 46px;
    border-radius: 12px;
  }
}

/* Phones: one aligned column, badges stacked on a shared left edge. */
@media (max-width: 760px) {
  #main #proof .proof-list {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 360px);
    padding: 4px 6px;
  }
  #main #proof .proof-item + .proof-item::before {
    top: 0;
    right: 14px;
    bottom: auto;
    left: 14px;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(183, 140, 255, 0.26), transparent);
  }
  #main #proof .proof-item-body {
    justify-content: flex-start;
    padding: 14px 12px;
  }
  #main #proof :is(.review-count, .proof-badge) {
    width: 48px;
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main #proof :is(.review-count, .proof-badge),
  #main #proof .proof-arrow {
    transition: none;
  }
}

/* ---------- Visual polish, October 2026 ---------- */

/* "Hear us live": the heading box is centred under its label but a later
   rule left-aligned the text inside it, leaving the words ~50px off centre. */
#main #watch .section-head h2 {
  text-align: center;
}

/* ---------- "Nights like these": recent-show photos ----------
   Real gig photos (already published in the Live gallery) between the
   event cards and the next gig. Four tall tiles on wider screens; on phones
   a swipeable row that snaps and shows the next photo peeking in. */
#main #moments .section-head {
  display: grid;
  justify-items: center;
  margin-inline: auto;
  text-align: center;
}
#main #moments .section-head h2 {
  margin-inline: auto;
  text-align: center;
}
#main #moments .moments-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(24px, 3vw, 36px);
  border-radius: 22px;
}
#main #moments .moment {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(207, 166, 255, 0.18);
  border-radius: 22px;
  background: rgba(29, 21, 51, 0.72);
  box-shadow: 0 18px 40px rgba(4, 0, 14, 0.32);
}
#main #moments .moment img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* A soft violet wash at the foot ties the photos into the page palette. */
#main #moments .moment::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 40%;
  background: linear-gradient(180deg, transparent, rgba(21, 15, 36, 0.55));
  pointer-events: none;
}
#main #moments .moments-more {
  margin-top: clamp(22px, 3vw, 30px);
  text-align: center;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #main #moments .moment img {
    transition: transform 0.6s ease;
  }
  #main #moments .moment:hover img {
    transform: scale(1.04);
  }
}

@media (max-width: 760px) {
  #main #moments .moments-track {
    display: flex;
    gap: 12px;
    margin-inline: calc(-1 * var(--ns-gutter, 16px));
    padding: 4px var(--ns-gutter, 16px) 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--ns-gutter, 16px);
    scrollbar-width: none;
  }
  #main #moments .moments-track::-webkit-scrollbar {
    display: none;
  }
  #main #moments .moment {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
}

/* ---------- "Latest from the band": Facebook posts ----------
   Facebook's own Page widget, behind a click-to-load card so Facebook only
   loads for visitors who ask for it. The widget is at most 500px wide, so
   the section is one centred column at every width. */
#main #facebook .section-head {
  display: grid;
  justify-items: center;
  margin-inline: auto;
  text-align: center;
}
#main #facebook .section-head h2 {
  margin-inline: auto;
  text-align: center;
}
#main #facebook .facebook-layout {
  display: grid;
  justify-items: center;
  gap: 22px;
  margin-top: clamp(22px, 3vw, 34px);
}
#main #facebook .facebook-copy {
  display: grid;
  justify-items: center;
  gap: 18px;
  max-width: 34rem;
  text-align: center;
}
#main #facebook .facebook-copy p,
#main #facebook .facebook-facade-body p {
  margin: 0;
  text-align: center !important;
}
#main #facebook .facebook-copy p {
  max-width: 30rem;
  color: #d9cfe8;
}
#main #facebook .facebook-feed {
  width: 100%;
  max-width: 500px;
}
#main #facebook .facebook-facade {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 340px;
  overflow: hidden;
  border: 1px solid rgba(207, 166, 255, 0.22);
  border-radius: 22px;
  background: rgba(29, 21, 51, 0.72);
  box-shadow: 0 18px 40px rgba(4, 0, 14, 0.32);
  isolation: isolate;
}
#main #facebook .facebook-facade-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#main #facebook .facebook-facade::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(80% 60% at 50% 45%, rgba(21, 15, 36, 0.55), transparent 80%),
    linear-gradient(180deg, rgba(21, 15, 36, 0.62), rgba(21, 15, 36, 0.9));
}
#main #facebook .facebook-facade-body {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 32px 22px;
  text-align: center;
}
#main #facebook .facebook-facade-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #1877f2;
  color: #fff;
  box-shadow: 0 0 0 6px rgba(24, 119, 242, 0.18);
}
#main #facebook .facebook-facade-icon svg {
  width: 30px;
  height: 30px;
}
#main #facebook .facebook-facade-title {
  margin: 0;
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
}
#main #facebook .facebook-load[hidden],
#main #facebook .facebook-remember[hidden] {
  display: none !important;
}
#main #facebook .facebook-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #e6def0;
  font-size: 0.88rem;
  cursor: pointer;
}
#main #facebook .facebook-remember input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #c8a2ea;
}
#main #facebook .facebook-facade-note {
  max-width: 22rem;
  margin: 0;
  color: #b9adcc;
  font-size: 0.8rem;
}
#main #facebook .facebook-feed.is-loaded {
  display: grid;
  justify-items: center;
  gap: 12px;
}
#main #facebook .facebook-frame-wrap {
  overflow: hidden;
  max-width: 100%;
  border: 1px solid rgba(207, 166, 255, 0.22);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(4, 0, 14, 0.32);
}
#main #facebook .facebook-frame {
  display: block;
  max-width: 100%;
  border: 0;
}

/* The Facebook Page Plugin is a cross-origin iframe. On touch devices a
   vertical gesture can otherwise be captured by that browsing context and
   make the surrounding homepage feel stuck. Keep vertical gestures available
   to the page and allow normal scroll chaining at the iframe boundary. */
@media (max-width: 760px) {
  #main #facebook .facebook-frame-wrap {
    touch-action: pan-y;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #main #facebook .facebook-frame {
    touch-action: pan-y;
  }
}
#main #facebook .facebook-forget {
  margin: 0;
  padding: 4px 8px;
  border: 0;
  background: none;
  color: #b9adcc;
  font: inherit;
  font-size: 0.8rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
#main #facebook p.facebook-forget {
  text-decoration: none;
  cursor: default;
}

@media (min-width: 761px) {
  #main #facebook .facebook-facade {
    min-height: 460px;
  }
}

/* Under the Facebook widget: a plain link for when Facebook shows nothing,
   and the card that replaces the widget when Facebook sends it to login. */
#main #facebook .facebook-note {
  margin: 0;
  color: #b9adcc;
  font-size: 0.86rem;
  text-align: center !important;
}
#main #facebook .facebook-note a {
  color: #e4d2ff;
  font-weight: 700;
  text-underline-offset: 3px;
}
#main #facebook .facebook-unavailable {
  display: grid;
  justify-items: center;
  gap: 16px;
  width: 100%;
  padding: 28px 22px;
  border: 1px solid rgba(207, 166, 255, 0.22);
  border-radius: 22px;
  background: rgba(29, 21, 51, 0.72);
  text-align: center;
}
#main #facebook .facebook-unavailable p {
  max-width: 24rem;
  margin: 0;
  color: #e6def0;
  text-align: center !important;
}