/* Shared Apple-inspired liquid-glass treatment for primary actions. */
:root {
  --glass-edge: rgba(255, 255, 255, .30);
  --glass-fill-top: rgba(255, 255, 255, .14);
  --glass-fill-bottom: rgba(255, 255, 255, .055);
  --glass-highlight: rgba(255, 255, 255, .64);
}

:is(
  .hero-cta,
  .brand-card > a,
  .newsletter-field button,
  .contact-next,
  .contact-send,
  .contact-back,
  .story-film-overlay button,
  .story-film-external,
  .book-primary-cta,
  .article-primary-cta,
  .article-more a
) {
  position: relative;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--glass-edge) !important;
  color: #fff !important;
  background:
    linear-gradient(180deg, var(--glass-fill-top), var(--glass-fill-bottom)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    inset 0 -1px 0 rgba(255, 255, 255, .08),
    0 7px 20px rgba(0, 0, 0, .22) !important;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: blur(22px) saturate(155%) brightness(1.03);
  backdrop-filter: blur(22px) saturate(155%) brightness(1.03);
  transform: translateZ(0);
  transition:
    transform .32s cubic-bezier(.2, .8, .2, 1),
    border-color .32s ease,
    box-shadow .32s ease,
    background .32s ease !important;
}

:is(
  .hero-cta,
  .brand-card > a,
  .newsletter-field button,
  .contact-next,
  .contact-send,
  .contact-back,
  .story-film-overlay button,
  .story-film-external,
  .book-primary-cta,
  .article-primary-cta,
  .article-more a
)::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 11%;
  left: 11%;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--glass-highlight) 50%, transparent);
  opacity: .72;
  pointer-events: none;
  transition: opacity .32s ease;
}

:is(
  .hero-cta,
  .brand-card > a,
  .newsletter-field button,
  .contact-next,
  .contact-send,
  .contact-back,
  .story-film-overlay button,
  .story-film-external,
  .book-primary-cta,
  .article-primary-cta,
  .article-more a
)::after { content: none; }

@media (hover: hover) {
  :is(
    .hero-cta,
    .brand-card > a,
    .newsletter-field button,
    .contact-next,
    .contact-send,
    .contact-back,
    .story-film-overlay button,
    .story-film-external,
    .book-primary-cta,
    .article-primary-cta,
    .article-more a
  ):hover {
    border-color: rgba(255, 255, 255, .48) !important;
    color: #fff !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .09)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .48),
      inset 0 -1px 0 rgba(255, 255, 255, .10),
      0 10px 27px rgba(0, 0, 0, .28) !important;
    transform: translateY(-1px) scale(1.006);
  }
}

:is(
  .hero-cta,
  .brand-card > a,
  .newsletter-field button,
  .contact-next,
  .contact-send,
  .contact-back,
  .story-film-overlay button,
  .story-film-external,
  .book-primary-cta,
  .article-primary-cta,
  .article-more a
):active {
  transform: translateY(0) scale(.985);
  box-shadow:
    inset 0 2px 7px rgba(0, 0, 0, .16),
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 4px 14px rgba(0, 0, 0, .22) !important;
}

:is(
  .hero-cta,
  .brand-card > a,
  .newsletter-field button,
  .contact-next,
  .contact-send,
  .contact-back,
  .story-film-overlay button,
  .story-film-external,
  .book-primary-cta,
  .article-primary-cta,
  .article-more a
):focus-visible {
  outline: 2px solid rgba(255, 255, 255, .95);
  outline-offset: 3px;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :is(
    .hero-cta,
    .brand-card > a,
    .newsletter-field button,
    .contact-next,
    .contact-send,
    .contact-back,
    .story-film-overlay button,
    .story-film-external,
    .book-primary-cta,
    .article-primary-cta,
    .article-more a
  ) { background: rgba(38, 38, 40, .94) !important; }
}

@media (prefers-reduced-motion: reduce) {
  :is(
    .hero-cta,
    .brand-card > a,
    .newsletter-field button,
    .contact-next,
    .contact-send,
    .contact-back,
    .story-film-overlay button,
    .story-film-external,
    .book-primary-cta,
    .article-primary-cta,
    .article-more a
  ),
  :is(
    .hero-cta,
    .brand-card > a,
    .newsletter-field button,
    .contact-next,
    .contact-send,
    .contact-back,
    .story-film-overlay button,
    .story-film-external,
    .book-primary-cta,
    .article-more a
  )::before,
  :is(
    .hero-cta,
    .brand-card > a,
    .newsletter-field button,
    .contact-next,
    .contact-send,
    .contact-back,
    .story-film-overlay button,
    .story-film-external,
    .book-primary-cta,
    .article-more a
  )::after { transition: none !important; }
}