/* Selective hand-drawn display titles for playful topic landing pages. */
.art-title {
  --art-ink: #254340;
  --art-accent: #b6535c;
  --art-spark: #d89b3c;
  position: relative;
  display: flex;
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .08em .18em;
  color: var(--art-ink);
  font-family: "STKaiti", "KaiTi", "Kaiti SC", "Microsoft YaHei", cursive !important;
  font-weight: 900 !important;
  font-synthesis: weight;
  line-height: 1.08 !important;
  letter-spacing: .015em !important;
  text-shadow: 0 .035em 0 rgba(255, 255, 255, .8), 0 .065em .14em rgba(42, 55, 52, .1);
  transform: rotate(-.45deg);
  transform-origin: left center;
}

.art-title .art-word,
.art-title .art-accent {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}

.art-title i {
  display: inline-block;
  font-style: normal;
  transform-origin: 50% 80%;
}

.art-title i:nth-child(4n + 1) { transform: rotate(-3deg) translateY(.015em); }
.art-title i:nth-child(4n + 2) { transform: rotate(1.8deg) translateY(-.025em) scale(1.04); }
.art-title i:nth-child(4n + 3) { transform: rotate(-1deg) translateY(.02em) scale(.96); }
.art-title i:nth-child(4n) { transform: rotate(2.6deg) translateY(-.01em); }

.art-title .art-accent { color: var(--art-accent); }

.art-title .art-accent::before {
  content: "✦";
  position: absolute;
  top: -.48em;
  right: .08em;
  color: var(--art-spark);
  font: 700 .25em/1 Georgia, serif;
  text-shadow: .5em .42em 0 color-mix(in srgb, var(--art-accent) 70%, white);
  transform: rotate(11deg);
  animation: art-spark-drift 4.8s ease-in-out infinite;
}

.art-title .art-accent::after {
  content: "";
  position: absolute;
  right: .03em;
  bottom: -.08em;
  left: .05em;
  height: .11em;
  border-bottom: .045em solid var(--art-spark);
  border-radius: 50%;
  transform: rotate(-1.5deg);
  opacity: .9;
  animation: art-underline-breathe 5.2s ease-in-out infinite;
}

.art-title-play {
  --art-ink: #214845;
  --art-accent: #bc712f;
  --art-spark: #8e3e49;
}

.art-title-love {
  --art-ink: #344347;
  --art-accent: #ae4f60;
  --art-spark: #dda746;
}

@keyframes art-spark-drift {
  0%, 100% { margin-top: 0; transform: rotate(11deg) scale(1); }
  50% { margin-top: -.08em; transform: rotate(15deg) scale(1.08); }
}

@keyframes art-underline-breathe {
  0%, 100% { transform: rotate(-1.5deg) scaleX(1); }
  50% { transform: rotate(1deg) scaleX(.94); }
}

@media (max-width: 560px) {
  .art-title { gap: .04em .13em; transform: rotate(-.2deg); }
  .art-title .art-accent::before { top: -.35em; }
}

@media (prefers-reduced-motion: reduce) {
  .art-title,
  .art-title i,
  .art-title .art-accent::before,
  .art-title .art-accent::after {
    transform: none;
    animation: none;
  }
}