/* Riddlewerk: KIPP's flair, a narrow board in the page margin whose marbles roll into their holes
   (flair-kipp.js). Wide screens only, nothing with reduced motion; never in the way of reading or
   clicking. */

.flair-kipp {
  position: absolute;
  /* Beside the hero or the card, set by the script. */
  left: var(--flair-left, 0);
  top: var(--flair-top, 0);
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.9s var(--ease, ease);
}

.flair-kipp.is-gone {
  opacity: 0;
}

.flair-kipp svg {
  display: block;
  overflow: visible;
}

@media (max-width: 899px), (prefers-reduced-motion: reduce) {
  .flair-kipp {
    display: none;
  }
}