/* Darby Events live/local parity corrections — 2026-07-18.
 * This layer is intentionally narrow and loads last. It does not alter page
 * layout, media, animation timing, or any button other than the named CTAs. */

/* Photo Booths is the approved source of truth for More FAQs. Use the same
 * mixed-font metrics for every More FAQs CTA and for the matching More Music
 * CTA requested by the client. */
html body[class] #main-content a.msx-button.msx-button.msx-button:is([aria-label="More FAQs"], [aria-label="More Music"]) {
  --de-cta-block-size: clamp(1.01rem, 1.56vw, 1.495rem) !important;
  --de-cta-script-size: clamp(0.66rem, 0.98vw, 0.92rem) !important;
  --de-cta-gap: clamp(7px, 0.62vw, 10px) !important;
  min-height: 56px !important;
  padding: 10px 18px !important;
}

html body[class] #main-content a.msx-button.msx-button.msx-button:is([aria-label="More FAQs"], [aria-label="More Music"]) .msx-button__block.msx-button__block {
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: var(--de-cta-gap) !important;
  line-height: 1 !important;
  transform: translateY(4px) !important;
}

html body[class] #main-content a.msx-button.msx-button.msx-button:is([aria-label="More FAQs"], [aria-label="More Music"]) :is(.msx-button__main, .msx-button__script, .msx-button__script--dj-piano)[class] {
  display: inline-block !important;
  margin: 0 !important;
  white-space: nowrap !important;
  transform: none !important;
  vertical-align: baseline !important;
}

html body[class] #main-content a.msx-button.msx-button.msx-button:is([aria-label="More FAQs"], [aria-label="More Music"]) .msx-button__main.msx-button__main {
  padding: 0 !important;
  font-family: "Oswald SemiBold", "Oswald", Impact, sans-serif !important;
  font-size: var(--de-cta-block-size) !important;
  font-weight: 600 !important;
  line-height: 0.82 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

html body[class] #main-content a.msx-button.msx-button.msx-button:is([aria-label="More FAQs"], [aria-label="More Music"]) :is(.msx-button__script, .msx-button__script--dj-piano)[class] {
  padding: 0.24em 0 0.46em !important;
  font-family: "Heatwood", "High Tide", "Script Font", cursive !important;
  font-size: var(--de-cta-script-size) !important;
  font-weight: 400 !important;
  line-height: 1.34 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}

@media (max-width: 743px) {
  html body[class] #main-content a.msx-button.msx-button.msx-button:is([aria-label="More FAQs"], [aria-label="More Music"]) {
    --de-cta-block-size: 1.02rem !important;
    --de-cta-script-size: 0.84rem !important;
    --de-cta-gap: 6px !important;
    min-height: 38px !important;
    padding: 4px 11px 3px !important;
  }
}

/* Keep the Watch wordmark's approved geometry but neutralize the generic
 * Heatwood paint-room compensation that detached its underscore on live. */
html body:is(.home, .dj-piano-page) .dje-intro[data-dje-intro] .dje-intro__wordmark[data-wordmark-word] {
  line-height: 0.78 !important;
  margin-block: -0.14em !important;
  padding-block: 0.14em !important;
}

html body:is(.home, .dj-piano-page) .dje-intro[data-dje-intro] .dje-intro__wordmark[data-wordmark-word] .dje-intro__wordmark-line--word,
html body:is(.home, .dj-piano-page) .dje-intro[data-dje-intro] .dje-intro__wordmark[data-wordmark-word] .dje-intro__wordmark-line--word .dje-intro__wordmark-char {
  line-height: 0.78 !important;
  padding-block: 0 !important;
}

html body:is(.home, .dj-piano-page) .dje-intro[data-dje-intro] .dje-intro__wordmark[data-wordmark-word] .dje-intro__wordmark-line--underline,
html body:is(.home, .dj-piano-page) .dje-intro[data-dje-intro] .dje-intro__wordmark[data-wordmark-word] .dje-intro__wordmark-line--underline .dje-intro__wordmark-char {
  line-height: 0.32 !important;
  padding-block: 0 !important;
}

/* The Local Live Instrumentation wordmark is authoritative. Repeat its
 * original desktop geometry after all shared layers so WP Rocket cannot revive
 * the obsolete full-width split-letter treatment. */
html body.live-instrumentation-page .live-msx-intro__wordmark[data-wordmark-word] {
  left: auto !important;
  right: calc(clamp(28px, 3vw, 56px) - 15px) !important;
  top: calc(clamp(28px, 3vw, 52px) + 70px) !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  inline-size: max-content !important;
  width: max-content !important;
  max-inline-size: none !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0.78 !important;
  transform: rotate(-10deg) !important;
  transform-origin: center center !important;
}

html body.live-instrumentation-page .live-msx-intro__wordmark-line {
  display: inline-flex !important;
  align-items: flex-end !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 175px !important;
  line-height: 0.78 !important;
}

html body.live-instrumentation-page .live-msx-intro__wordmark-line--underline {
  margin-top: -14px !important;
  margin-left: 113px !important;
  padding: 0 !important;
  font-size: 144px !important;
  line-height: 0.32 !important;
  transform: scaleX(2.953125) !important;
  transform-origin: left center !important;
}

html body.live-instrumentation-page .live-msx-intro__wordmark-char {
  display: inline-block !important;
  padding: 0 !important;
  line-height: inherit !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
  html body.live-instrumentation-page .live-msx-intro__wordmark[data-wordmark-word] {
    top: clamp(18px, 4vw, 34px) !important;
    right: clamp(12px, 3vw, 24px) !important;
    transform: rotate(-8deg) !important;
  }

  html body.live-instrumentation-page .live-msx-intro__wordmark-line {
    font-size: clamp(5rem, 12vw, 7.25rem) !important;
  }

  html body.live-instrumentation-page .live-msx-intro__wordmark-line--underline {
    margin-top: -0.55rem !important;
    margin-left: 3.9rem !important;
    font-size: clamp(4rem, 9vw, 5.6rem) !important;
    transform: scaleX(2.2) !important;
  }
}

@media (max-width: 767px) {
  html body.live-instrumentation-page .live-msx-intro__wordmark[data-wordmark-word] {
    top: 68px !important;
    right: 14px !important;
    opacity: 0.85 !important;
  }

  html body.live-instrumentation-page .live-msx-intro__wordmark-line {
    font-size: clamp(2.42rem, 11vw, 3.52rem) !important;
  }

  html body.live-instrumentation-page .live-msx-intro__wordmark-line--underline {
    margin-top: -0.35rem !important;
    margin-left: 0.55rem !important;
    font-size: clamp(1.98rem, 7.7vw, 2.585rem) !important;
    transform: scaleX(1.7) !important;
  }
}

/* Event Lighting Local is authoritative for Shine. These declarations only
 * restore the word/underscore line boxes; position and animation stay intact. */
html.lighting-page-root body.lighting-page #main-content :is(.lighting-gallery__wordmark, .lighting-gallery__wordmark-line, .lighting-gallery__wordmark-char) {
  overflow: visible !important;
  contain: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  padding-block: 0 !important;
}

html.lighting-page-root body.lighting-page #main-content .lighting-gallery__wordmark {
  line-height: 1 !important;
}

html.lighting-page-root body.lighting-page #main-content .lighting-gallery__wordmark-line--word,
html.lighting-page-root body.lighting-page #main-content .lighting-gallery__wordmark-line--word .lighting-gallery__wordmark-char {
  line-height: 1.08 !important;
}

html.lighting-page-root body.lighting-page #main-content .lighting-gallery__wordmark-line--underline,
html.lighting-page-root body.lighting-page #main-content .lighting-gallery__wordmark-line--underline .lighting-gallery__wordmark-char {
  line-height: 0.32 !important;
}

/* Homepage Services copy must retain its approved Local paint area. */
html body.home :is(.dsg-head, .dsg-stack, .dsg-eyebrow, .dsg-title) {
  overflow: visible !important;
  contain: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

/* Restore the approved rest-to-photo transition on both Live Instrumentation
 * video sections. The play button keeps its approved green hover treatment. */
@media (min-width: 992px) {
  html body.live-instrumentation-page.live-instrumentation-page #live-video-gallery-stack :is(#video-gallery, #video-gallery-duplicate) .dj-video-grid__card:is(:hover, :focus-visible) .dj-video-grid__rest {
    opacity: 0 !important;
    visibility: visible !important;
    transform: scale(0.82) !important;
    filter: saturate(0.88) !important;
  }

  html body.live-instrumentation-page.live-instrumentation-page #live-video-gallery-stack :is(#video-gallery, #video-gallery-duplicate) .dj-video-grid__card:is(:hover, :focus-visible) .dj-video-grid__hover {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(4%) scale(1) !important;
    pointer-events: none !important;
  }

  html body.live-instrumentation-page.live-instrumentation-page #live-video-gallery-stack :is(#video-gallery, #video-gallery-duplicate) .dj-video-grid__card:is(:hover, :focus-visible) .dj-video-grid__play {
    opacity: 1 !important;
    transform: none !important;
    background: #19b5aa !important;
    border-color: #fff !important;
    filter: none !important;
  }

  html body.live-instrumentation-page.live-instrumentation-page #live-video-gallery-stack :is(#video-gallery, #video-gallery-duplicate) .dj-video-grid__card:is(:hover, :focus-visible) .dj-video-grid__play::before {
    border-left-color: #fff !important;
    opacity: 1 !important;
  }
}

/* The underline is a separate Heatwood underscore glyph. Keep the approved
 * word position and move only that glyph below Shine so it cannot overlap the
 * descenders after the Safari paint-room guards are applied. */
html.lighting-page-root body.lighting-page #main-content .lighting-gallery__wordmark-line--underline {
  transform: translateY(clamp(18px, 1.55vw, 30px)) scaleX(2.6) !important;
  transform-origin: left center !important;
}

/* Safari clips Heatwood's painted glyph bounds when a word or each animated
 * character is promoted to its own transformed/filter layer. These compensated
 * paint boxes add room around the glyphs while their matching negative margins
 * preserve the approved line metrics and placement. */
@supports (-webkit-touch-callout: none) {
  html body.music-page #video-gallery-production-copy :is(.dj-video-grid__intro, .dj-video-grid__headline-group),
  html body.live-instrumentation-page #main-content :is(.live-msx-intro, .live-msx-intro__wordmark, .live-msx-intro__wordmark-line, .dr-difference-sticky__panel--collab),
  html.lighting-page-root body.lighting-page #main-content :is(.lighting-gallery__title-wrap, .lighting-gallery__wordmark, .lighting-gallery__wordmark-line),
  html.add-ons-page-root body.afterparty-page #main-content :is(.after-steps__side-word, .after-steps__side-script, .after-steps__side-script-line),
  html.after-party-page-root body.afterparty-page #main-content :is(.after-steps__side-word, .after-steps__side-script, .after-steps__side-script-line),
  html.special-events-page-root body.afterparty-page #main-content :is(.after-steps__side-word, .after-steps__side-script, .after-steps__side-script-line) {
    overflow: visible !important;
    contain: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }

  html body.music-page #video-gallery-production-copy .dj-video-grid__eyebrow--heatwood,
  html body.live-instrumentation-page #main-content .dr-difference-sticky__eyebrow {
    overflow: visible !important;
    contain: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    padding: 0.58em 0.44em 0.68em !important;
    margin: -0.58em -0.44em -0.68em !important;
  }

  /* Heatwood's Darby glyph run extends roughly 1.84em above/below its
   * baseline in CoreText. Safari rasterizes transformed text to the line box,
   * so the old 0.9 line-height cropped the swashes even with visible overflow.
   * The equal half-leading compensation retains the approved baseline and
   * layout contribution while giving Safari a complete 1.9em paint box. */
  html body.music-page #video-gallery-production-copy .dj-video-grid__eyebrow--heatwood {
    line-height: 1.9 !important;
    padding-block: 0 !important;
    margin-block: -0.5em !important;
  }

  html body.live-instrumentation-page #main-content .live-msx-intro__wordmark-char,
  html.lighting-page-root body.lighting-page #main-content .lighting-gallery__wordmark-char,
  html.add-ons-page-root body.afterparty-page #main-content .after-steps__side-script-char,
  html.after-party-page-root body.afterparty-page #main-content .after-steps__side-script-char,
  html.special-events-page-root body.afterparty-page #main-content .after-steps__side-script-char {
    overflow: visible !important;
    contain: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    padding: 0.54em 0.4em 0.66em !important;
    margin: -0.54em -0.4em -0.66em !important;
  }
}