/* Give the editorial guides an unmistakable but still luxurious invitation. */
.guides-spotlight {
  position: relative;
  color: #f5cf72 !important;
  opacity: 1 !important;
  text-shadow: 0 0 0 rgba(245, 207, 114, 0);
  animation: guides-lustre 1.8s ease-in-out infinite;
}

.guides-spotlight::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 rgba(245, 207, 114, .55);
  transform: translateY(-50%);
  animation: guides-beacon 1.8s ease-out infinite;
}

@keyframes guides-lustre {
  0%, 100% { color: #f5cf72; text-shadow: 0 0 0 rgba(245, 207, 114, 0); }
  50% { color: #fff3bd; text-shadow: 0 0 13px rgba(245, 207, 114, .78); }
}

@keyframes guides-beacon {
  0% { box-shadow: 0 0 0 0 rgba(245, 207, 114, .58); }
  60%, 100% { box-shadow: 0 0 0 7px rgba(245, 207, 114, 0); }
}

@media (max-width: 800px) {
  .mobile-menu .guides-spotlight {
    padding-right: 34px;
    padding-left: 12px;
    background: linear-gradient(90deg, rgba(197, 160, 89, .16), transparent 74%);
    color: #875b20 !important;
  }

  .mobile-menu .guides-spotlight::before {
    right: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .guides-spotlight,
  .guides-spotlight::before {
    animation: none;
  }

  .guides-spotlight {
    text-shadow: 0 0 8px rgba(245, 207, 114, .45);
  }
}