/* Top-bar logo hover (design DP · Flop): each word flops a different way with a springy wobble, one after another,
   and stays crooked while hovered. Only on devices with a mouse (no stuck hover on phones); also on keyboard focus. */
.top .mark { display: inline-block; }
.top .mark span { display: block; width: fit-content; transform-origin: 50% 100%; transition: transform 0.5s cubic-bezier(0.34, 1.9, 0.5, 1); }
.top .mark span:nth-child(2) { transition-delay: 0.06s; }
.top .mark span:nth-child(3) { transition-delay: 0.12s; }
@media (hover: hover) {
  .top .mark:hover span:nth-child(1) { transform: translateX(0.18em) rotate(-8deg); }
  .top .mark:hover span:nth-child(2) { transform: translateX(-0.05em) rotate(5deg); }
  .top .mark:hover span:nth-child(3) { transform: rotate(-3deg); }
}
.top .mark:focus-visible span:nth-child(1) { transform: translateX(0.18em) rotate(-8deg); }
.top .mark:focus-visible span:nth-child(2) { transform: translateX(-0.05em) rotate(5deg); }
.top .mark:focus-visible span:nth-child(3) { transform: rotate(-3deg); }