@charset "utf-8";
@import url("./visual-polish.css?v=20261009-hub1");

/* Shared action hierarchy, loaded after the legacy page themes. Important
   declarations retire their per-page button overrides without changing layout. */
:root {
  /* Secondary actions draw their outline from this. It was referenced but
     never defined, which invalidated the border and left every secondary
     button as an unbordered dark block. #977aae is the fallback the page
     stylesheets already use for the same token. */
  --control-border: #977aae;
  --action-fill: #c6a0e8;
  --action-ink: #160a27;
  --action-border: #c6a0e8;
  --action-hover-fill: #d9baf3;
  --action-shadow: none;
}

#main :is(.button, .next-gig-actions .gig-dir),
header .nav > .nav-book {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
  min-height: 48px !important;
  padding: 12px 20px !important;
  border: 1px solid var(--action-border) !important;
  border-radius: 10px !important;
  background: var(--action-fill) !important;
  color: var(--action-ink) !important;
  box-shadow: var(--action-shadow) !important;
  font-family: inherit;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-decoration: none;
  text-transform: none !important;
  text-shadow: none;
  white-space: normal !important;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease;
}

#main .action-secondary {
  --action-fill: rgba(223, 186, 255, 0.04);
  --action-ink: var(--text);
  --action-border: var(--control-border);
  --action-hover-fill: #352643;
  --action-shadow: none;
}

#main :is(.button, .next-gig-actions .gig-dir):hover,
header .nav > .nav-book:hover {
  background: var(--action-hover-fill) !important;
}

#main :is(.button, .next-gig-actions .gig-dir):is(:hover, :active) {
  transform: none;
}

#main
  :is(
    .button,
    .action-link,
    .next-gig-actions .gig-dir,
    .page-guide a,
    .small,
    .performance-action,
    .video-fallback a,
    .event-option a,
    .events-about,
    .hero-listen,
    .enquiry-copy
  ):focus-visible,
header .nav > .nav-book:focus-visible {
  outline: 3px solid var(--content-label) !important;
  outline-offset: 4px !important;
}

header .nav > .nav-book::before {
  display: none;
}

/* These links support exploration, rather than competing with an enquiry. */
#main
  :is(
    .action-link,
    .links .small,
    .section-actions .small,
    .home-diary-link a,
    .home-reviews-copy .small,
    .performance-action,
    .video-fallback a,
    .booking-links a,
    .booking-sms,
    .enquiry-copy,
    .event-option a,
    .events-about,
    .hero-listen
  ) {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 44px;
  max-width: 100%;
  padding-block: 8px;
  color: var(--content-label) !important;
  font-size: 0.9375rem !important;
  font-weight: 600;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
}

/* Standalone actions use one small, aligned arrow. Inline prose links keep
   their underlines, and the visitor's underline preference still wins. */
#main
  :is(
    .action-link,
    .links .small,
    .section-actions .small,
    .home-diary-link a,
    .home-reviews-copy .small,
    .performance-action,
    .video-fallback a,
    .event-option a,
    .events-about
  )::after {
  content: "";
  position: static;
  display: inline-block;
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  margin: 0 0 0 1px;
  background: currentColor;
  clip-path: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  transform: translateX(0);
  transition: transform 0.18s ease;
}
#main
  :is(
    .action-link,
    .small,
    .performance-action,
    .video-fallback a
  )[href^="https://"]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 18 12-12M6 6h12v12' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 18 12-12M6 6h12v12' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transform: translateX(0);
}
#main :is(.links .small, .section-actions .small) > .external-link-icon,
#main
  :is(.event-option a, .events-about, .home-diary-link a)
  > [aria-hidden="true"] {
  display: none;
}
#main
  :is(
    .action-link,
    .links .small,
    .section-actions .small,
    .home-diary-link a,
    .home-reviews-copy .small,
    .performance-action,
    .video-fallback a,
    .booking-links a,
    .booking-sms,
    .enquiry-copy,
    .event-option a,
    .events-about,
    .hero-listen
  ):is(:hover, :focus-visible) {
  color: #fff !important;
  text-decoration: underline;
}
#main
  :is(
    .action-link,
    .links .small,
    .section-actions .small,
    .home-diary-link a,
    .home-reviews-copy .small,
    .performance-action,
    .video-fallback a,
    .event-option a,
    .events-about
  ):is(:hover, :focus-visible)::after {
  transform: translateX(2px);
}
/* Desktop section finders use a subtle down arrow to show they jump to a section below. */
@media (min-width: 761px) {
  #main .page-hero .page-guide a::after {
    content: "↓";
    display: inline-block;
    margin-left: 7px;
    font-size: 0.9em;
    line-height: 1;
    transition: transform 0.2s ease;
  }

  #main .page-hero .page-guide a:is(:hover, :focus-visible)::after {
    transform: translateY(2px);
  }
}

@media (max-width: 760px) {
  #main
    :is(
      .action-link,
      .links .small,
      .section-actions .small,
      .home-diary-link a,
      .home-reviews-copy .small,
      .performance-action,
      .video-fallback a,
      .event-option a,
      .events-about
    )::after {
    transition: none;
    transform: translateX(0);
  }
}
#main .video-fallback {
  margin-top: 6px;
}
#main .performance-media .video-fallback a {
  font-size: 0.875rem !important;
  font-weight: 500;
}
#main .hero .hero-listen {
  justify-content: center;
  min-height: 48px;
  color: #fff !important;
}
/* The featured-video copy is a short promotional lock-up, so its
   paragraph and actions share the same centred reading axis at every width. */
#main #watch .featured-video-copy {
  text-align: center;
}
#main #watch .featured-video-copy > p:not(.video-fallback) {
  margin-inline: auto;
  text-align: center;
}
#main #watch .featured-video-copy .video-fallback {
  text-align: center;
}
#main #watch .featured-video-copy .links {
  justify-content: center;
  align-items: center;
  gap: 4px 18px;
}
#main #watch .featured-video-copy .small {
  width: auto;
  padding: 8px 0;
  border: 0;
  justify-content: center;
  text-align: center;
}

#main .action-link {
  font-family: inherit;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
#main .action-link:hover {
  color: var(--text) !important;
}
#main .booking-details .booking-links a {
  display: inline-block;
  padding-block: 10px;
}
#the-set .repertoire-panel > .action-link {
  margin-top: 12px;
}
#kind-words .reviews-panel > .action-link {
  justify-self: start;
}

/* Page guides are navigation, not a row of competing calls to action. */
#main .page-guide {
  gap: 8px 20px !important;
}
#main .page-guide a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--content-label);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  text-underline-offset: 0.24em;
}
#main .page-guide a:is(:hover, :focus-visible) {
  text-decoration: underline;
}

/* On compact screens the page guide becomes a genuine section navigator:
   easy to scan and tap, without competing with the primary booking actions. */
@media (max-width: 760px) {
  #main .page-hero .page-guide {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 23rem);
    max-width: calc(100% - 24px);
    gap: 8px !important;
    margin: 22px auto 0;
  }

  #main .page-guide a {
    min-width: 0;
    min-height: 46px;
    padding: 10px 13px !important;
    border: 1px solid rgba(223, 178, 255, 0.34) !important;
    border-radius: 999px !important;
    background: rgba(223, 178, 255, 0.07) !important;
    color: #fff !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 5px 16px rgba(0, 0, 0, 0.16) !important;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-wrap: balance;
    touch-action: manipulation;
    transition:
      background 0.18s ease,
      border-color 0.18s ease,
      box-shadow 0.18s ease,
      transform 0.18s ease;
  }

  #main .page-guide a:is(:hover, :focus-visible) {
    border-color: rgba(223, 178, 255, 0.58) !important;
    background: rgba(223, 178, 255, 0.13) !important;
    color: #fff !important;
    box-shadow:
      0 11px 30px rgba(92, 44, 145, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
    text-decoration: none;
  }

  #main .page-guide a:active {
    transform: scale(0.98);
    background: rgba(223, 178, 255, 0.17) !important;
  }
}

@media (max-width: 350px) {
  #main .page-hero .page-guide {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 17rem);
  }
}

/* Plain-text links are visibly links at rest, on every viewport.
   Navigation and designed controls keep their own treatment. */
#main p a:not(.button):not(.action-link):not(.page-guide a),
#main li a:not(.button):not(.action-link):not(.page-guide a),
#main dd a:not(.button):not(.action-link):not(.page-guide a),
#main blockquote a:not(.button):not(.action-link):not(.page-guide a),
#main .card a:not(.button):not(.action-link):not(.page-guide a),
#main .panel a:not(.button):not(.action-link):not(.page-guide a),
#main .hero-copy a:not(.button):not(.action-link):not(.page-guide a),
#main .page-note a:not(.button):not(.action-link):not(.page-guide a),
#main .intro a:not(.button):not(.action-link):not(.page-guide a) {
  color: var(--content-label) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: rgba(223, 178, 255, 0.72);
}

#main p a:not(.button):not(.action-link):not(.page-guide a):hover,
#main li a:not(.button):not(.action-link):not(.page-guide a):hover,
#main dd a:not(.button):not(.action-link):not(.page-guide a):hover,
#main blockquote a:not(.button):not(.action-link):not(.page-guide a):hover,
#main .card a:not(.button):not(.action-link):not(.page-guide a):hover,
#main .panel a:not(.button):not(.action-link):not(.page-guide a):hover,
#main .hero-copy a:not(.button):not(.action-link):not(.page-guide a):hover,
#main .page-note a:not(.button):not(.action-link):not(.page-guide a):hover,
#main .intro a:not(.button):not(.action-link):not(.page-guide a):hover {
  color: #fff !important;
  text-decoration-thickness: 2px;
  text-decoration-color: currentColor;
}

/* Professional link treatment: keep the interface clean at rest, then
   reveal the link affordance on hover/focus. Dedicated buttons and controls
   keep their own visual treatment, while accessibility underline mode below
   can still force underlines site-wide. */
#main a:not(.button):not(.youtube-link):not(.gig-details):not(.gig-dir) {
  text-decoration: none;
  text-underline-offset: 0.24em;
}
#main
  a:not(.button):not(.youtube-link):not(.gig-details):not(.gig-dir):is(
    :hover,
    :focus-visible
  ) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

html.a11y-underline-links #main a:not(.button):not(.youtube-link) {
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
}

/* Preserve legible labels by stacking when two full-sized actions cannot fit. */
#main .next-gig-actions {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 9rem), 1fr)
  ) !important;
  gap: 12px;
}
#main .next-gig-actions :is(.button, .gig-dir) {
  padding: 12px 14px !important;
}
#main .next-gig-actions :is(.button, .gig-dir)::after {
  display: none !important;
}
#main .next-gig-actions .gig-dir::before {
  display: none;
}
#main .next-gig-empty-card .next-gig-actions {
  grid-template-columns: 1fr !important;
}
#main .gig-row .gig-links {
  display: flex;
  width: 100%;
  gap: 0 18px;
  flex-wrap: wrap;
}
#main .gig-row .gig-links .action-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
  padding: 9px 8px !important;
  border: 0 !important;
  border-radius: 15px !important;
  background: linear-gradient(135deg, #c995ff, #9557ef) !important;
  color: #160b25 !important;
  box-shadow: none !important;
  /* Action weight is 600 everywhere. The row links used to be 800 while the
     featured-card buttons were 600, so the same "Gig details" control carried
     two different weights on one page, and at 800 the actions read louder than
     the venue metadata they sit beneath. They already have their own filled /
     outlined background, so they do not need extra weight to look interactive. */
  font:
    600 0.9375rem/1.2 "Manrope",
    sans-serif !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: normal !important;
}
#main .gig-row .gig-links .gig-dir {
  border: 1px solid rgba(207, 166, 255, 0.58) !important;
  background: rgba(183, 140, 255, 0.045) !important;
  color: #f3eafa !important;
  font:
    600 0.9375rem/1.2 "Manrope",
    sans-serif !important;
  letter-spacing: 0 !important;
}
#main .gig-row .gig-links .action-link::after {
  display: none !important;
}
#main .gig-row .gig-links .action-link:hover {
  background: #d9baf3 !important;
  color: #160b25 !important;
  text-decoration: none !important;
}
#main .gig-row .gig-links .gig-dir:hover {
  background: #352643 !important;
  color: #fff !important;
}
#main .gig-row .gig-links .action-link:active {
  transform: translateY(1px);
}
#main .gig-row .gig-loc-row::before {
  width: 16px !important;
  height: 20px !important;
  flex: 0 0 auto !important;
  content: "" !important;
  background: #b77cff !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s7-6.15 7-13a7 7 0 1 0-14 0c0 6.85 7 13 7 13Z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='9' r='2.5' fill='black'/%3E%3C/svg%3E")
    center/contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s7-6.15 7-13a7 7 0 1 0-14 0c0 6.85 7 13 7 13Z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='9' r='2.5' fill='black'/%3E%3C/svg%3E")
    center/contain no-repeat !important;
}
#main .gig-row .gig-time::before {
  width: 21px !important;
  height: 21px !important;
  flex: 0 0 auto !important;
  content: "" !important;
  background: #d0c4dc !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 7v5l3.5 2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center/contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 7v5l3.5 2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center/contain no-repeat !important;
}
#main .gig-row .gig-time {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
}
#main .gig-row .gig-loc-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
#main :is(.past-year-btn, .upcoming-more-btn, .past-view-toggle) {
  font-size: 1rem !important;
  letter-spacing: 0 !important;
  text-transform: none;
}

@media (max-width: 600px) {
  #main .gig-row .gig-time {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    width: auto !important;
    margin-bottom: 2px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    color: #f7f2fb !important;
    font-family: "Barlow Condensed", sans-serif !important;
    font-size: 0.96rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.02em !important;
    box-shadow: none !important;
  }
  #main .gig-row .gig-main {
    gap: 9px !important;
    padding: 2px 0 !important;
  }
  #main .gig-row .gig-venue {
    font-family: "Manrope", sans-serif !important;
    font-size: 1.46rem !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.015em !important;
  }
  #main .gig-row .gig-loc-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  #main .gig-row .gig-loc {
    font-size: 0.9rem !important;
    line-height: 1.38 !important;
  }
  #main .gig-row .gig-loc-row::before {
    width: 16px !important;
    height: 20px !important;
    flex: 0 0 auto !important;
    background: #b77cff !important;
    content: "" !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s7-6.15 7-13a7 7 0 1 0-14 0c0 6.85 7 13 7 13Z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='9' r='2.5' fill='black'/%3E%3C/svg%3E")
      center/contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s7-6.15 7-13a7 7 0 1 0-14 0c0 6.85 7 13 7 13Z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='9' r='2.5' fill='black'/%3E%3C/svg%3E")
      center/contain no-repeat !important;
  }
  #main .gig-row .gig-time::before {
    width: 21px !important;
    height: 21px !important;
    flex: 0 0 auto !important;
    background: #d0c4dc !important;
    content: "" !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 7v5l3.5 2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center/contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 7v5l3.5 2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center/contain no-repeat !important;
  }

  #main .next-gig-actions {
    grid-template-columns: 1fr !important;
  }
  #main .gig-row.gig-row-cancelled {
    grid-template-columns: 58px minmax(0, 1fr) !important;
  }

  #main .gig-row {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    grid-template-areas:
      "date main"
      "date time"
      "date action" !important;
    column-gap: 12px !important;
    row-gap: 7px !important;
    align-items: start !important;
  }
  #main .gig-row .gig-action {
    display: contents !important;
  }
  #main .gig-row .gig-time-row {
    grid-area: time !important;
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 9px !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  #main .gig-row .gig-badges {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    min-width: 0 !important;
  }
  #main .gig-row .gig-time {
    grid-area: time !important;
    align-self: start !important;
    margin-top: 0 !important;
  }
  #main .gig-row .gig-links {
    grid-area: action !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 8px !important;
  }
  #main .gig-row .gig-links .action-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    padding: 9px 8px !important;
    border: 0 !important;
    border-radius: 15px !important;
    background: linear-gradient(135deg, #c995ff, #9557ef) !important;
    color: #160b25 !important;
    box-shadow: none !important;
    font:
      800 0.9375rem/1.2 "Manrope",
      sans-serif !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: normal !important;
  }
  #main .gig-row .gig-links .gig-dir {
    border: 1px solid rgba(207, 166, 255, 0.58) !important;
    background: rgba(183, 140, 255, 0.045) !important;
    color: #f3eafa !important;
    font:
      800 0.9375rem/1.2 "Manrope",
      sans-serif !important;
    letter-spacing: 0 !important;
  }
  #main .gig-row .gig-links .action-link::after {
    display: none !important;
  }
  #main .gig-row .gig-links .action-link:hover {
    background: #d9baf3 !important;
    color: #160b25 !important;
    text-decoration: none !important;
  }
  #main .gig-row .gig-links .gig-dir:hover {
    background: #352643 !important;
    color: #fff !important;
  }
  #main .gig-row .gig-links .action-link:active {
    transform: translateY(1px);
  }
}
@media (max-width: 760px) {
  /* Upcoming Dates: keep action links comfortably tappable without making the cards bulky. */
  #main .gig-row .gig-links .action-link {
    display: inline-flex !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 9px 8px !important;
    font-size: 0.8125rem !important;
    line-height: 1.15 !important;
    border-radius: 12px !important;
  }
}

@media (max-width: 460px) {
  .enquiry-send-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A standalone enquiry should not become another full-width card on About. */
@media (max-width: 760px) {
  #what-you-get .section-actions {
    align-items: center !important;
  }
  #what-you-get .section-actions .button {
    width: fit-content !important;
    max-width: 100%;
    margin-inline: auto;
  }
}

html.a11y-simplify-backgrounds {
  --action-fill: #a775cf;
  --action-hover-fill: #b98add;
  --action-shadow: none;
}
html.a11y-high-contrast {
  --action-fill: #ead1ff;
  --action-ink: #160a27;
  --action-border: #ead1ff;
  --action-hover-fill: #f2e7ff;
  --action-shadow: none;
}
@media (prefers-contrast: more) {
  :root,
  html.a11y-simplify-backgrounds {
    --action-fill: #ead1ff;
    --action-ink: #160a27;
    --action-border: #ead1ff;
    --action-hover-fill: #f2e7ff;
    --action-shadow: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  #main :is(.button, .next-gig-actions .gig-dir),
  header .nav > .nav-book {
    transition: none;
  }
  #main
    :is(
      .action-link,
      .links .small,
      .section-actions .small,
      .home-diary-link a,
      .home-reviews-copy .small,
      .performance-action,
      .video-fallback a,
      .event-option a,
      .events-about
    )::after {
    transition: none;
  }
}

/* Upcoming Dates: force the desktop gig buttons to use the same visual treatment as mobile. */
@media (min-width: 761px) {
  #main #upcoming .gig-row .gig-links a.action-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
    padding: 8px 7px !important;
    border: 0 !important;
    border-radius: 15px !important;
    background: linear-gradient(135deg, #c995ff, #9557ef) !important;
    color: #160b25 !important;
    box-shadow: none !important;
    font:
       600 0.75rem/1.2 "Manrope",
      sans-serif !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: normal !important;
  }
  #main #upcoming .gig-row .gig-links a.gig-dir {
    border: 1px solid rgba(207, 166, 255, 0.58) !important;
    background: rgba(183, 140, 255, 0.045) !important;
    color: #f3eafa !important;
  }
  #main #upcoming .gig-row .gig-links a.action-link::after {
    display: none !important;
  }
  #main #upcoming .gig-row .gig-links a.action-link:hover {
    background: #d9baf3 !important;
    color: #160b25 !important;
  }
  #main #upcoming .gig-row .gig-links a.gig-dir:hover {
    background: #352643 !important;
    color: #fff !important;
  }
}

/* Contextual link hierarchy:
   navigation stays quiet; actions get an arrow; external destinations get an
   external-link symbol; contact details and prose stay text-first. */
#main
  a:not(.button):not(.nav-book):not(.logo):not(.social-btn):not(
    .page-guide a
  ):not(.skip-link) {
  text-decoration: none;
  text-underline-offset: 0.24em;
}

#main
  :is(
    .event-option > a,
    .events-about,
    .home-diary-link .small,
    .action-link,
    .performance-action,
    .video-fallback a,
    .booking-links a,
    .private-booking-note a,
    .not-found-help a
  ) {
  position: relative;
}

/* Internal actions: a restrained right arrow, used where the link is the
   next step rather than simply supporting the surrounding copy. */
#main
  :is(
    .event-option > a,
    .events-about,
    .home-diary-link .small,
    .action-link,
    .booking-links a,
    .private-booking-note a,
    .not-found-help a
  ):not([href^="http"])::after {
  content: "";
  display: inline-block;
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  margin-left: 2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center/contain no-repeat;
  transition: transform 0.18s ease;
}

/* External actions: make the destination clear without pretending it is
   another page in the Nightshift site. */
#main
  :is(
    .action-link,
    .performance-action,
    .video-fallback a,
    .booking-links a
  )[href^="http"]::after {
  content: "";
  display: inline-block;
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  margin-left: 2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 18 12-12M6 6h12v12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 18 12-12M6 6h12v12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center/contain no-repeat;
  transition: transform 0.18s ease;
}

/* The featured-video links already carry a proper external icon in markup;
   use that rather than showing two symbols. */
#main :is(.links .small, .home-diary-link .small)[href^="http"]::after {
  display: none;
}
#main :is(.links .small, .home-diary-link .small) > .external-link-icon {
  display: inline-block !important;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  margin-left: 2px;
  color: currentColor;
}

/* Action links respond as a group, with only a tiny arrow movement on
   pointer/keyboard interaction. */
@media (hover: hover) and (pointer: fine) {
  #main
    :is(
      .event-option > a,
      .events-about,
      .home-diary-link .small,
      .action-link,
      .performance-action,
      .video-fallback a,
      .booking-links a,
      .private-booking-note a,
      .not-found-help a
    ):is(:hover, :focus-visible)::after {
    transform: translateX(2px);
  }
}

/* On touch screens the arrow is deliberately static: the layout stays calm
   while the full link remains comfortably tappable. */
@media (max-width: 760px) {
  #main
    :is(
      .event-option > a,
      .events-about,
      .home-diary-link .small,
      .action-link,
      .performance-action,
      .video-fallback a,
      .booking-links a,
      .private-booking-note a,
      .not-found-help a
    )::after {
    transition: none;
    transform: none;
  }
}

/* Contact details are information, not navigation controls: no arrows. */
#main
  :is(
    .booking-number,
    .booking-email,
    .footer-contact a,
    [href^="tel:"],
    [href^="mailto:"],
    [href^="sms:"]
  )::after {
  display: none !important;
}

/* Keep the page-guide quiet because its surrounding heading already explains
   that these are jump links, not primary actions. */
#main .page-guide a::after {
  display: none !important;
}
#main .gig-venue::after,
#main .next-gig-venue::after {
  display: none !important;
}

/* Ordinary prose links stay visibly identifiable at rest. */
#main
  p
  a:not(.button):not(.action-link):not(.performance-action):not(
    .video-fallback a
  ),
#main
  li
  a:not(.button):not(.action-link):not(.performance-action):not(
    .video-fallback a
  ),
#main
  dd
  a:not(.button):not(.action-link):not(.performance-action):not(
    .video-fallback a
  ),
#main
  blockquote
  a:not(.button):not(.action-link):not(.performance-action):not(
    .video-fallback a
  ) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: rgba(223, 178, 255, 0.72);
}
#main
  p
  a:not(.button):not(.action-link):not(.performance-action):not(
    .video-fallback a
  ):is(:hover, :focus-visible),
#main
  li
  a:not(.button):not(.action-link):not(.performance-action):not(
    .video-fallback a
  ):is(:hover, :focus-visible),
#main
  dd
  a:not(.button):not(.action-link):not(.performance-action):not(
    .video-fallback a
  ):is(:hover, :focus-visible),
#main
  blockquote
  a:not(.button):not(.action-link):not(.performance-action):not(
    .video-fallback a
  ):is(:hover, :focus-visible) {
  text-decoration-thickness: 2px;
  text-decoration-color: currentColor;
}

/* Mobile page-guide buttons: keep the purple button, but force the label text to white. */
@media (max-width: 760px) {
  #main .page-guide a:not(.button) {
    color: #fff !important;
  }
  #main .page-guide a:not(.button)::after {
    color: #fff !important;
  }
}

/* Final text-link affordance: use arrows instead of underlines. */
#main p a:not(.button):not(.performance-action):not(.video-fallback a),
#main li a:not(.button):not(.performance-action):not(.video-fallback a),
#main dd a:not(.button):not(.performance-action):not(.video-fallback a),
#main blockquote a:not(.button):not(.performance-action):not(.video-fallback a),
#main .page-guide a:not(.button),
#main .action-link {
  text-decoration: none !important;
  text-decoration-thickness: initial !important;
  color: #dfb2ff !important;
}
#main p a:not(.button):not(.performance-action):not(.video-fallback a)::after,
#main li a:not(.button):not(.performance-action):not(.video-fallback a)::after,
#main dd a:not(.button):not(.performance-action):not(.video-fallback a)::after,
#main
  blockquote
  a:not(.button):not(.performance-action):not(.video-fallback a)::after,
#main .page-guide a:not(.button)::after,
#main .action-link::after {
  content: "→";
  display: inline-block;
  margin-left: 0.35em;
  color: currentColor;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.18s ease;
}
#main
  p
  a:not(.button):not(.performance-action):not(.video-fallback a):is(
    :hover,
    :focus-visible
  )::after,
#main
  li
  a:not(.button):not(.performance-action):not(.video-fallback a):is(
    :hover,
    :focus-visible
  )::after,
#main
  dd
  a:not(.button):not(.performance-action):not(.video-fallback a):is(
    :hover,
    :focus-visible
  )::after,
#main
  blockquote
  a:not(.button):not(.performance-action):not(.video-fallback a):is(
    :hover,
    :focus-visible
  )::after,
#main .page-guide a:not(.button):is(:hover, :focus-visible)::after,
#main .action-link:is(:hover, :focus-visible)::after {
  transform: translateX(3px);
}

/* Page-guide buttons: final colour override after shared action-link rules. */
@media (max-width: 760px) {
  #main .page-guide a:not(.button) {
    color: #fff !important;
  }
  #main .page-guide a:not(.button)::after {
    color: #fff !important;
  }
}

/* Next Gig action buttons use button styling without the text-link arrow. */
#main .next-gig-actions .action-link::after,
#main .next-gig-actions .button::after {
  display: none !important;
  content: none !important;
}

/* Venue names are content, not purple action links. Keep them white while retaining the arrow affordance. */
#main .gig-venue,
#main .next-gig-venue {
  color: #fff !important;
  text-decoration: none !important;
}
#main .gig-venue::after,
#main .next-gig-venue::after {
  content: "→";
  display: inline-block;
  margin-left: 0.35em;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.18s ease;
}
#main .gig-venue:is(:hover, :focus-visible)::after,
#main .next-gig-venue:is(:hover, :focus-visible)::after {
  transform: translateX(3px);
}

@media (max-width: 760px) {
  #main .repertoire-panel > div:first-child,
  #main .repertoire-panel > div:first-child .mini-title,
  #main .repertoire-panel > div:first-child h3 {
    text-align: left !important;
  }
}

@media (max-width: 760px) {
  #main .repertoire-panel > .action-link {
    justify-content: flex-start !important;
    text-align: left !important;
    margin-inline: 0 !important;
  }
}

@media (max-width: 760px) {
  #main .performance-link {
    gap: 16px !important;
  }
  #main .performance-link .video-fallback {
    text-align: left !important;
    margin-top: 10px !important;
  }
  #main .performance-link > div:last-child {
    text-align: left !important;
  }
  #main .performance-link > div:last-child .mini-title,
  #main .performance-link > div:last-child h3,
  #main .performance-link > div:last-child p:not(.mini-title) {
    text-align: left !important;
  }
  #main .performance-link > div:last-child h3 {
    margin-bottom: 10px !important;
  }
  #main .performance-link > div:last-child .performance-action {
    display: inline-flex !important;
    justify-content: flex-start !important;
    margin: 12px 0 0 !important;
    text-align: left !important;
  }
}

@media (max-width: 760px) {
  #main .performance-link > div:last-child .performance-action {
    display: flex !important;
    width: fit-content !important;
    justify-content: flex-start !important;
    margin-inline: 0 !important;
  }
  #main .performance-link > div:last-child .performance-more {
    margin-top: 8px !important;
  }
}

/* Mobile page-guide placement: keep each link close to its label length so the
   navigation reads naturally beneath the hero copy rather than as a rigid grid. */
@media (max-width: 760px) {
  #main .page-hero .page-guide {
    display: flex !important;
    flex-wrap: wrap !important;
    width: min(100%, 34rem) !important;
    max-width: calc(100% - 24px) !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px 10px !important;
    margin: 18px auto 0 !important;
  }
  #main .page-hero .page-guide a {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
  }
}

/* One arrow per actionable text link: remove any inline duplicate icon
   and use the shared arrow treatment consistently. */
#main a .external-link-icon {
  display: none !important;
}

#main .proof-facts a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#main .proof-facts a::after {
  content: "";
  display: inline-block;
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* The review fact is stacked on desktop, so keep its arrow with the link text
   instead of letting the pseudo-element become a fourth, orphaned line. */
#main
  .proof-facts
  li
  a:not(.button):not(.performance-action):not(.video-fallback a)::after {
  display: none !important;
  content: none !important;
}

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

/* Keep the review count to the left of its two-line label instead of letting
   the shared link treatment flatten all three text fragments into one row. */
#main .proof-facts li:first-child a {
  display: inline-grid;
  grid-template-columns: max-content minmax(0, max-content);
  grid-template-areas: "count copy";
  align-items: center;
  column-gap: 10px;
  row-gap: 0;
  text-align: left;
}

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

#main .proof-facts li:first-child .review-count {
  grid-area: count;
}
#main .proof-facts li:first-child .review-label {
  grid-area: label;
}
#main .proof-facts li:first-child .review-note {
  grid-area: note;
  color: #dfb2ff;
}

/* Final one-arrow rule: every navigational text link gets exactly one arrow.
   Contact details and true button controls remain exempt. */
#main
  :is(
    .links .small,
    .section-actions .small,
    .home-diary-link .small,
    .page-guide a:not(.button),
    .performance-action,
    .video-fallback a,
    .event-option > a,
    .events-about,
    .booking-links a,
    .private-booking-note a,
    .not-found-help a
  )::after {
  content: "→" !important;
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  flex: 0 0 auto !important;
  margin-left: 0.35em !important;
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  color: currentColor !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  #main
    :is(
      .links .small,
      .section-actions .small,
      .home-diary-link .small,
      .page-guide a:not(.button),
      .performance-action,
      .video-fallback a,
      .event-option > a,
      .events-about,
      .booking-links a,
      .private-booking-note a,
      .not-found-help a
    ):is(:hover, :focus-visible)::after {
    transform: translateX(3px);
  }
}

/* Contact details are information, not navigational links. */
#main
  :is(
    .booking-number,
    .booking-email,
    .footer-contact a,
    [href^="tel:"],
    [href^="mailto:"],
    [href^="sms:"]
  )::after {
  display: none !important;
}

/* Venue names are labels, not action links. */
#main .gig-venue::after,
#main .next-gig-venue::after {
  display: none !important;
  content: none !important;
}

/* YOUR OCCASION. OUR KIND OF NIGHT: keep each destination link visibly actionable. */
#main .home-events .event-option > a::after,
#main .home-events > .wrap > .events-about::after {
  content: "→" !important;
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  margin-left: 0.35em !important;
  color: currentColor !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* Featured video is a short promotional lock-up: keep its description
   and actions on the same true centre axis as the section heading. */
#main .featured-video-copy {
  text-align: center;
}
#main .featured-video-copy > p {
  margin-inline: auto;
  text-align: center;
}
#main .featured-video-copy .links {
  justify-content: center;
  align-items: center;
  text-align: center;
}
#main .featured-video-copy .links .small {
  justify-content: center;
  text-align: center;
}

/* YouTube fallback is a short promotional action beneath the centred showreel copy.
   Keep it on the same centre axis at every viewport size. */

#main .featured-video-copy .video-fallback {
  width: 100%;
  margin: 4px auto 0;
  text-align: center !important;
}

#main .featured-video-copy .video-fallback a {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  align-items: center;
  justify-content: center;
  text-align: center !important;
}

@media (max-width: 760px) {
  /* Keep the featured-video promotional copy centred without allowing the
     flex/grid parent to become the alignment reference. */
  #main .featured-video-copy {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    text-align: center;
  }
  #main .featured-video-copy > p {
    width: min(100%, 33ch);
    max-width: 33ch;
    margin: 0 auto 18px;
    text-align: center;
  }
  #main .featured-video-copy .links {
    width: 100%;
    margin-inline: auto;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 2px 16px;
  }
  #main .featured-video-copy .links .small {
    width: auto;
    max-width: 100%;
    margin-inline: auto;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 760px) {
  /* Content titles follow the same reading edge as their body copy.
     Major section headings remain centred. */
  #main
    :is(
      .event-option,
      .performance-link,
      .repertoire-panel,
      .video-tile,
      .faq,
      .panel,
      .card,
      .reviews-panel
    )
    :is(h3, h4) {
    text-align: left !important;
    margin-inline: 0 !important;
  }

  #main .featured-video-copy :is(h2, h3, h4),
  #main .featured-video-copy > p:not(.mini-title) {
    text-align: left !important;
    margin-inline: 0 !important;
  }
}

/* Final mobile text system:
   - Body copy/paragraphs are always left aligned.
   - Short headings and compact labels are centred.
   - Never justify text.
   - Keep body copy within a comfortable reading measure. */
@media (max-width: 760px) {
  #main
    :is(
      p,
      li,
      dd,
      blockquote,
      .member-bio,
      .gig-main,
      .gig-action,
      .gig-loc,
      .gig-time,
      .booking-details,
      .enquiry-builder
    ) {
    text-align: left !important;
    text-justify: none !important;
    hyphens: none !important;
  }

  #main
    :is(
      h1,
      h2,
      .section-head .label,
      .page-hero .eyebrow,
      .page-hero .hero-eyebrow,
      .mini-title,
      .eyebrow,
      .hero-eyebrow,
      .event-number,
      .gig-date,
      .gig-status
    ) {
    text-align: center !important;
    text-wrap: balance;
  }

  /* Compact callouts may be centred, but paragraphs remain left aligned. */
  #main :is(.callout, .section-head .label) {
    text-align: center !important;
  }

  /* Links follow their surrounding paragraph/reading edge. */
  #main p :is(a:not(.button), .action-link) {
    text-align: left !important;
  }

  /* Comfortable mobile reading measure and leading. */
  #main p,
  #main li,
  #main dd,
  #main blockquote {
    max-width: min(100%, clamp(34ch, 74vw, 62ch));
    line-height: 1.55;
  }

  /* Never justify any mobile content. */
  #main * {
    text-justify: none !important;
  }

  /* Headings stay punchy rather than becoming long centred paragraphs. */
  #main :is(h1, h2, h3, h4) {
    line-height: 1.15;
  }
}

/* Live text alignment fixes: keep each lock-up on one reading edge.
   These sit after the blunt mobile system above so short intro/CTA copy
   stays centred with its heading, while practical rows keep a left edge. */
@media (max-width: 880px) {
  #main .page-hero .hero-copy,
  #main #past .past-intro {
    margin-inline: auto;
    text-align: center !important;
    text-wrap: pretty;
  }

  #main .footer-cta > p {
    text-align: center !important;
  }

  /* One-line intros under a centred heading or inside a centred card. Their
     own centring rules lost to the blanket mobile left-align above. */
  #main #line-up .section-intro,
  #main .booking-card .booking-person,
  main#main .not-found-help {
    margin-inline: auto;
    text-align: center !important;
  }
}

/* About's story lead is real body copy, so it stays left aligned, but its
   auto margins inset it 20px from the action link and glance panel below.
   Share their edge instead. */
@media (max-width: 760px) {
  #main #story .section-lead {
    margin-inline: 0 !important;
  }
}

/* Archive trailing times sit on the right edge on wide screens. */
@media (min-width: 881px) {
  #main #past .gig-row-past .gig-action,
  #main #past .gig-row-past .gig-time {
    text-align: right !important;
  }
}

/* Gig row links keep the shared supporting-action floor at every width:
   44px targets and a 15px label, so the compact row buttons stay tappable
   and readable on tablets and desktops, not just on phones. */
#main .gig-row .gig-links .action-link,
#main #upcoming .gig-row .gig-links a.action-link {
  min-height: 44px !important;
  font-size: 0.9375rem !important;
  white-space: normal !important;
}

/* Final featured-video fallback alignment: this link is a standalone
   promotional action, not an inline reading link. Keep its label and arrow
   centred even after the generic mobile paragraph-link rule above. */
#main #watch .featured-video-copy > p.video-fallback {
  width: 100% !important;
  margin-inline: auto !important;
  text-align: center !important;
}
#main #watch .featured-video-copy > p.video-fallback > a {
  justify-content: center !important;
  margin-inline: auto !important;
  text-align: center !important;
}

/* FINAL ARROW CONTRACT
   Every actionable text link below owns exactly one visible arrow: the
   generated arrow pseudo-element. Any inline decorative arrow/external icon
   inside the same link is suppressed so the label can never show two arrows. */
#main
  :is(
    .action-link,
    .links .small,
    .section-actions .small,
    .home-diary-link a,
    .home-reviews-copy .small,
    .performance-action,
    .video-fallback a,
    .booking-links a,
    .event-option > a,
    .events-about,
    .private-booking-note a,
    .not-found-help a,
    .page-guide a
  )
  > svg {
  display: none !important;
}

/* These controls use a single shared arrow generated by CSS. */
#main
  :is(
    .action-link,
    .links .small,
    .section-actions .small,
    .home-diary-link a,
    .home-reviews-copy .small,
    .performance-action,
    .video-fallback a,
    .booking-links a,
    .event-option > a,
    .events-about,
    .private-booking-note a,
    .not-found-help a
  )::after {
  content: "→" !important;
}

/* Page-guide links intentionally use one downward arrow on desktop. */
@media (min-width: 761px) {
  #main .page-hero .page-guide a::after {
    content: "↓" !important;
  }
}

/* The mobile hero booking CTA has one arrow, supplied by its own pseudo-element. */
@media (max-width: 760px) {
  #main .hero .hero-book-mobile::after {
    content: "→" !important;
  }
}

/* Links that carry their own external-link glyph must not also pick up the
   text-link arrow from ::after. "Full diary on Lemonrock" and "Explore the
   repertoire" both embed an .external-link-icon svg and were rendering an arrow
   either side of it. `:has()` is already used elsewhere in this bundle. */
#main a:has(.external-link-icon)::after,
#main a.small:has(.external-link-icon)::after,
#main a.action-link:has(.external-link-icon)::after {
  content: none !important;
  display: none !important;
}

/* Final cross-page page-guide polish. This file is injected late in the
   packaged site, so repeat the source-page treatment here to prevent older
   action-link rules from flattening the guides back into plain text. */
#main .page-hero .page-guide {
  display: flex;
  width: fit-content;
  max-width: min(100%, 52rem);
  align-items: center;
  justify-content: center;
  gap: 4px !important;
  margin: 28px auto 0;
  padding: 6px;
  border: 1px solid rgba(223, 178, 255, 0.2);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(223, 178, 255, 0.09), rgba(7, 6, 11, 0.24)),
    rgba(7, 6, 11, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 28px rgba(0, 0, 0, 0.18);
}

#main .page-hero .page-guide a:not(.button) {
  min-height: 38px;
  padding: 8px 14px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(247, 243, 237, 0.86) !important;
  box-shadow: none !important;
  font-size: 0.86rem !important;
  font-weight: 700;
  line-height: 1.25 !important;
  text-align: center;
  text-decoration: none !important;
  text-wrap: balance;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

#main .page-hero .page-guide a:not(.button):is(:hover, :focus-visible) {
  background: rgba(223, 178, 255, 0.13) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

#main .page-hero .page-guide a:not(.button)::after {
  display: none !important;
  content: none !important;
}

@media (max-width: 760px) {
  #main .page-hero .page-guide {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 23rem);
    max-width: calc(100% - 24px);
    gap: 8px !important;
    margin-top: 22px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  #main .page-hero .page-guide a:not(.button) {
    min-width: 0;
    min-height: 46px;
    padding: 10px 13px !important;
    border: 1px solid rgba(223, 178, 255, 0.34) !important;
    border-radius: 999px !important;
    background: rgba(223, 178, 255, 0.075) !important;
    color: #fff !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 5px 16px rgba(0, 0, 0, 0.16) !important;
    font-size: 0.78rem !important;
    line-height: 1.25 !important;
  }

  #main .page-hero .page-guide a:not(.button):is(:hover, :focus-visible) {
    border-color: rgba(223, 178, 255, 0.58) !important;
    background: rgba(223, 178, 255, 0.14) !important;
    transform: none;
  }
}

@media (max-width: 350px) {
  #main .page-hero .page-guide {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 17rem);
  }
}

/* Final homepage video text layout for packaged pages. Keep the showreel copy
   beneath the frame and group all follow-up links as one tidy action row. */
#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,
#main #watch .featured-video-copy > p.featured-video-summary:not(.video-fallback) {
  max-width: 56ch;
  margin: 0 auto !important;
  color: rgba(247, 243, 237, 0.82);
  text-align: center !important;
}

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

#main #watch .featured-video-copy > .featured-video-options > p.video-fallback {
  width: auto !important;
  max-width: none;
  margin: 0 !important;
  font-size: 0.78rem;
  line-height: 1.2;
}

#main #watch .featured-video-copy > .featured-video-options > p.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 !important;
  border: 1px solid rgba(223, 178, 255, 0.26) !important;
  border-radius: 999px;
  background: rgba(183, 140, 255, 0.08);
  color: #f7f3ed !important;
  font-size: 0.78rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.055em !important;
  text-align: center !important;
  text-decoration: none !important;
}

#main #watch .featured-video-copy > .featured-video-options > p.video-fallback > a:hover,
#main #watch .featured-video-copy > .featured-video-options > p.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) !important;
  background: rgba(183, 140, 255, 0.16);
  color: #fff !important;
}

#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,
  #main #watch .featured-video-copy > p.featured-video-summary:not(.video-fallback) {
    max-width: 31ch;
  }

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

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

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

/* Final homepage video placement for packaged pages: video first, caption tray
   beneath, 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,
#main #watch .featured-video-copy > p.featured-video-summary:not(.video-fallback) {
  justify-self: start;
  max-width: 46ch;
  text-align: left !important;
}

#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 .featured-video-copy > .featured-video-options > p.video-fallback {
  grid-column: 1 / -1;
}

#main #watch .featured-video-copy > .featured-video-options > p.video-fallback > a {
  width: 100%;
  min-height: 50px;
  border-color: rgba(255, 255, 255, 0.38) !important;
  background: linear-gradient(135deg, #f0dcff 0%, #d7b6ff 44%, #b78cff 100%);
  color: #150922 !important;
  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 .featured-video-copy > .featured-video-options > p.video-fallback > a:hover,
#main #watch .featured-video-copy > .featured-video-options > p.video-fallback > a:focus-visible {
  border-color: rgba(255, 255, 255, 0.62) !important;
  background: linear-gradient(135deg, #fff 0%, #e5ccff 44%, #caa1ff 100%);
  color: #12081f !important;
  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 !important;
  border-color: rgba(223, 178, 255, 0.28) !important;
  background: rgba(7, 6, 11, 0.24);
  color: rgba(247, 243, 237, 0.92) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-size: 0.76rem !important;
}

#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) !important;
  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,
  #main #watch .featured-video-copy > p.featured-video-summary:not(.video-fallback) {
    justify-self: center;
    max-width: 31ch;
    text-align: center !important;
  }

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

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

/* Final source-of-truth homepage YouTube placement for packaged pages. */
#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,
#main #watch .featured-video-copy > p.featured-video-summary:not(.video-fallback) {
  justify-self: center;
  max-width: 52ch;
  text-align: center !important;
}

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

#main #watch .featured-video-copy > .featured-video-options > p.video-fallback {
  width: auto !important;
  margin: 0 !important;
}

#main #watch .featured-video-copy > .featured-video-options > p.video-fallback > a {
  width: auto !important;
  min-width: min(100%, 220px);
  min-height: 50px;
  padding: 0 24px !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  background: linear-gradient(135deg, #f0dcff 0%, #d7b6ff 44%, #b78cff 100%);
  color: #150922 !important;
  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 .featured-video-copy > .featured-video-options > p.video-fallback > a:hover,
#main #watch .featured-video-copy > .featured-video-options > p.video-fallback > a:focus-visible {
  border-color: rgba(255, 255, 255, 0.62) !important;
  background: linear-gradient(135deg, #fff 0%, #e5ccff 44%, #caa1ff 100%);
  color: #12081f !important;
  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 !important;
  min-height: 44px;
  padding: 6px 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #dfb2ff !important;
  font-size: 0.88rem !important;
  font-weight: 750;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
  text-transform: none !important;
}

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

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

@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,
  #main #watch .featured-video-copy > p.featured-video-summary:not(.video-fallback) {
    max-width: 31ch;
  }

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

  #main #watch .featured-video-copy > .featured-video-options > p.video-fallback,
  #main #watch .featured-video-copy > .featured-video-options > p.video-fallback > a {
    width: 100% !important;
  }

  #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 !important;
    max-width: 100%;
  }
}

/* Responsive YouTube feature layout for packaged/late CSS. Mirrors the source
   homepage rules so the showreel keeps one natural order: intro, video, primary
   YouTube action, then quieter supporting links. */
#main #watch .section-head {
  width: min(100%, 940px) !important;
  margin: 0 auto clamp(22px, 3vw, 34px) !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  text-align: center !important;
}

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

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

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

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

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

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

#main #watch .featured-video-options > p.video-fallback,
#main #watch .featured-video-copy > .featured-video-options > p.video-fallback {
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

  #main #watch .featured-video-options > p.video-fallback,
  #main #watch .featured-video-options > p.video-fallback > a,
  #main #watch .featured-video-copy > .featured-video-options > p.video-fallback,
  #main #watch .featured-video-copy > .featured-video-options > p.video-fallback > a {
    width: 100% !important;
  }

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

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

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

/* 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 !important;
  z-index: 1 !important;
}

/* Final link treatment for packaged/late CSS: a quieter dark YouTube play-link
   plus responsive supporting links for desktop and mobile. */
#main #watch .featured-video-options {
  display: flex !important;
  flex-wrap: wrap !important;
  width: min(100%, 700px) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px clamp(14px, 2.4vw, 22px) !important;
  position: relative !important;
  z-index: 1 !important;
}

#main #watch .featured-video-options > p.video-fallback,
#main #watch .featured-video-copy > .featured-video-options > p.video-fallback {
  width: auto !important;
  margin: 0 !important;
}

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

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

#main #watch .featured-video-options > p.video-fallback > a::after,
#main #watch .featured-video-copy > .featured-video-options > p.video-fallback > a::after {
  display: none !important;
  content: none !important;
}

#main #watch .featured-video-options > p.video-fallback > a:hover,
#main #watch .featured-video-options > p.video-fallback > a:focus-visible,
#main #watch .featured-video-copy > .featured-video-options > p.video-fallback > a:hover,
#main #watch .featured-video-copy > .featured-video-options > p.video-fallback > a:focus-visible {
  border-color: rgba(255, 74, 101, 0.46) !important;
  background:
    linear-gradient(135deg, rgba(255, 74, 101, 0.16), rgba(183, 140, 255, 0.1)),
    rgba(12, 9, 18, 0.68) !important;
  color: #fff !important;
  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) !important;
  transform: translateY(-1px) !important;
}

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

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

#main #watch .featured-video-action::after,
#main #watch .featured-video-copy .links .featured-video-action::after {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  margin-left: 0.35em !important;
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  color: currentColor !important;
  font-weight: 700 !important;
  content: "→" !important;
  text-decoration: none !important;
  transition: transform 0.18s ease !important;
}

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

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

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

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

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

  #main #watch .featured-video-options > p.video-fallback,
  #main #watch .featured-video-options > p.video-fallback > a,
  #main #watch .featured-video-copy > .featured-video-options > p.video-fallback,
  #main #watch .featured-video-copy > .featured-video-options > p.video-fallback > a {
    width: 100% !important;
  }

  #main #watch .featured-video-options > p.video-fallback > a,
  #main #watch .featured-video-copy > .featured-video-options > p.video-fallback > a {
    min-height: 48px !important;
  }

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

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

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

/* Final placement correction for packaged/late CSS: video first, then caption,
   then the responsive link group. */
#main #watch .featured-video-layout {
  gap: clamp(12px, 1.8vw, 18px) !important;
}

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

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

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

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

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

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

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

/* With the separate YouTube button removed, let the two follow-up links be the
   whole action group in packaged/late CSS too. */
#main #watch .featured-video-options {
  width: min(100%, 540px) !important;
  gap: 0 !important;
}

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

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

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

  #main #watch .featured-video-actions,
  #main #watch .featured-video-copy .links.featured-video-actions {
    padding: 0 !important;
    border-top: 0 !important;
  }
}

/* Fluid bridge between desktop and phone widths for packaged/late CSS. */
@media (min-width: 761px) and (max-width: 1080px) {
  #main #watch .section-head {
    width: min(100%, 44rem) !important;
    margin-bottom: clamp(20px, 3vw, 28px) !important;
  }

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

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

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

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

  #main #watch .featured-video-summary,
  #main #watch .featured-video-copy > p.featured-video-summary:not(.video-fallback) {
    width: min(100%, 38ch) !important;
    max-width: 38ch !important;
  }

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

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

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

  #main #watch .featured-video-summary,
  #main #watch .featured-video-copy > p.featured-video-summary:not(.video-fallback) {
    width: min(100%, 31ch) !important;
    max-width: 31ch !important;
  }

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

  #main #watch .featured-video-actions,
  #main #watch .featured-video-copy .links.featured-video-actions {
    display: grid !important;
    width: 100% !important;
    gap: 0 !important;
  }

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

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

/* Desktop homepage event-card CTAs need a shared centred baseline. Mobile keeps
   the existing left-edge/tap-friendly link layout. */
@media (min-width: 960px) {
  #main .home-events .event-option > a {
    align-self: stretch !important;
    justify-content: center !important;
    margin-top: auto !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(223, 178, 255, 0.14) !important;
    text-align: center !important;
  }
}