/* =================== blog-art.css =================== */
.blog-art {
position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #efe3cb 0%, var(--hc-gold, #d4b896) 60%, #b89767 100%);
  isolation: isolate;
}
.blog-art--featured {
min-height: 480px;
}
.blog-art::before {
content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 28% 20%, rgba(255, 252, 247, 0.55), transparent 60%),
    radial-gradient(60% 50% at 80% 90%, rgba(26, 23, 20, 0.18), transparent 65%);
  pointer-events: none;
}
.blog-art__rings {
position: absolute;
  inset: -10%;
  border-radius: 50%;
  border: 1px dashed rgba(26, 23, 20, 0.18);
  pointer-events: none;
}
.blog-art__rings::after {
content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 1px dashed rgba(26, 23, 20, 0.14);
}
.blog-art__node {
position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(26, 23, 20, 0.55);
  box-shadow: 0 0 0 4px rgba(212, 184, 150, 0.32);
}
.blog-art__node--a {
top: 18%; left: 22%;
}
.blog-art__node--b {
bottom: 22%; right: 26%;
}
.blog-art__line {
position: absolute;
  top: 50%;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(26, 23, 20, 0.4), transparent);
  transform: translateY(-50%) rotate(-12deg);
}
.blog-art__mark {
position: absolute;
  bottom: 18px;
  left: 22px;
  font: 500 11px/1 var(--hc-mono, "JetBrains Mono", monospace);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(26, 23, 20, 0.6);
}
.hc-blog-card:nth-of-type(3n+1) .blog-art {
background: linear-gradient(135deg, #efe3cb 0%, var(--hc-gold, #d4b896) 60%, #b89767 100%);
}
.hc-blog-card:nth-of-type(3n+2) .blog-art {
background: linear-gradient(135deg, #d8c8a8 0%, #b8a07a 60%, var(--hc-accent, #8b7355) 100%);
}
.hc-blog-card:nth-of-type(3n) .blog-art {
background: linear-gradient(135deg, #efe3d3 0%, #c9b89a 60%, #a08a64 100%);
}

.hc-blog-card:hover .blog-art__rings, .blog-index__featured:hover .blog-art__rings {
animation: hcBlogRotate 18s linear infinite;
}