/* Raised homepage CTA system. Utility controls inside the editor stay compact. */
:root {
  --home-btn-ink: #18191b;
  --home-btn-purple: #8b3dff;
  --home-btn-purple-shadow: #5f20bb;
  --home-btn-lilac: #d7c0ff;
  --home-btn-paper: #fffdf8;
  --home-btn-rise: 6px;
}

#js-nav-menu a.nav-subscribe-link,
.homepage-story .story-btn,
.story-signup #js-subscribe-submit {
  position: relative;
  isolation: isolate;
  border-radius: 999px;
  transform: translateY(0);
  transition:
    transform 180ms cubic-bezier(.2, .8, .2, 1),
    box-shadow 180ms cubic-bezier(.2, .8, .2, 1),
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

/* Header Subscribe: black face with the lilac shade from the design reference. */
#js-nav-menu a.nav-subscribe-link,
#js-nav-menu[data-open="true"] a.nav-subscribe-link {
  min-height: 40px;
  padding: 0 19px;
  border: 1px solid var(--home-btn-ink);
  background: var(--home-btn-ink);
  color: #fff !important;
  font-weight: 750;
  box-shadow: 5px var(--home-btn-rise) 0 var(--home-btn-lilac);
}

#js-nav-menu a.nav-subscribe-link:hover,
#js-nav-menu a.nav-subscribe-link:focus-visible,
#js-nav-menu[data-open="true"] a.nav-subscribe-link:hover,
#js-nav-menu[data-open="true"] a.nav-subscribe-link:focus-visible {
  border-color: var(--home-btn-ink);
  background: var(--home-btn-ink);
  color: #fff !important;
  box-shadow: 2px 2px 0 var(--home-btn-lilac);
  transform: translate(3px, 4px);
}

/* Secondary story CTA: black face and lilac shade. */
.homepage-story .story-btn,
.homepage-story .story-btn:visited {
  border-color: var(--home-btn-ink);
  background: var(--home-btn-ink);
  color: #fff !important;
  box-shadow: 0 var(--home-btn-rise) 0 var(--home-btn-lilac);
}

.homepage-story .story-btn:hover,
.homepage-story .story-btn:focus-visible {
  border-color: var(--home-btn-ink);
  background: var(--home-btn-ink);
  color: #fff !important;
  box-shadow: 0 2px 0 var(--home-btn-lilac);
  transform: translateY(4px);
}

/* Primary story CTA remains purple and uses a deeper violet shade. */
.homepage-story .story-btn--purple,
.homepage-story .story-btn--purple:visited {
  border-color: var(--home-btn-purple);
  background: var(--home-btn-purple);
  color: #fff !important;
  box-shadow: 0 var(--home-btn-rise) 0 var(--home-btn-purple-shadow);
}

.homepage-story .story-btn--purple:hover,
.homepage-story .story-btn--purple:focus-visible {
  border-color: var(--home-btn-purple);
  background: var(--home-btn-purple);
  box-shadow: 0 2px 0 var(--home-btn-purple-shadow);
  transform: translateY(4px);
}

/* Newsletter submit gets the same black raised treatment. */
.story-signup #js-subscribe-submit {
  border: 1px solid var(--home-btn-ink);
  background: var(--home-btn-ink);
  color: #fff;
  box-shadow: 0 var(--home-btn-rise) 0 var(--home-btn-lilac);
}

.story-signup #js-subscribe-submit:hover,
.story-signup #js-subscribe-submit:focus-visible {
  border-color: var(--home-btn-ink);
  background: var(--home-btn-ink);
  color: #fff;
  box-shadow: 0 2px 0 var(--home-btn-lilac);
  transform: translateY(4px);
}

#js-nav-menu a.nav-subscribe-link:active,
.homepage-story .story-btn:active,
.story-signup #js-subscribe-submit:active {
  box-shadow: 0 0 0 transparent;
  transform: translateY(var(--home-btn-rise));
}

#js-nav-menu a.nav-subscribe-link:focus-visible,
.homepage-story .story-btn:focus-visible,
.story-signup #js-subscribe-submit:focus-visible {
  outline: 3px solid rgba(139, 61, 255, .3);
  outline-offset: 4px;
}

@media (max-width: 991px) {
  #js-nav-menu[data-open="true"] a.nav-subscribe-link {
    width: calc(100% - 5px);
    min-height: 44px;
    padding: 0 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #js-nav-menu a.nav-subscribe-link,
  .homepage-story .story-btn,
  .story-signup #js-subscribe-submit { transition: none; }
}