:root{
  --kdc-gold:#d6a760;
  --kdc-gold-light:#f7e1b8;
  --kdc-gold-dark:#8e6837;
  --kdc-ink:#040507;
  --kdc-ivory:#f5f3ec;
  --kdc-muted:#9ba0a8;
}

.kdc-folk-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  overflow:hidden;
}

.kdc-folk-card{
  position:relative;
  min-height:250px;
  padding:34px 28px 30px;
  background:rgba(14,18,24,0.55);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:18px;
  color:var(--kdc-ivory);
  text-decoration:none;
  overflow:hidden;
  isolation:isolate;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:transform .45s cubic-bezier(.16,1,.3,1), background .45s ease, border-color .45s ease, box-shadow .45s ease;
}

.kdc-folk-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 30%,rgba(247,225,184,.14),transparent 65%);
  opacity:0;
  transition:opacity .45s ease;
  z-index:-1;
}

.kdc-folk-card:hover{
  transform:translateY(-8px);
  background:rgba(16,22,30,0.88);
  border-color:var(--kdc-gold);
  box-shadow:0 18px 45px -10px rgba(214,167,96,0.35);
}
.kdc-folk-card:hover::before{opacity:1}

.kdc-folk-icon-wrap{
  width:88px;
  height:88px;
  margin-bottom:24px;
  display:grid;
  place-items:center;
  color:var(--kdc-gold);
  position:relative;
}

.kdc-folk-icon-wrap::before,
.kdc-folk-icon-wrap::after{
  content:"";
  position:absolute;
  width:9px;
  height:9px;
  border:1px solid currentColor;
  transform:rotate(45deg);
  opacity:.65;
}
.kdc-folk-icon-wrap::before{left:-4px;top:50%;margin-top:-4px}
.kdc-folk-icon-wrap::after{right:-4px;top:50%;margin-top:-4px}

.kdc-folk-icon{
    width:82px;
    height:82px;
    display:block;
    fill:none;
    stroke:#d6a760;
    stroke-width:2.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    overflow:visible;
    filter:
        drop-shadow(0 0 8px rgba(214,167,96,.45))
        drop-shadow(0 0 16px rgba(214,167,96,.35))
        drop-shadow(0 0 32px rgba(214,167,96,.22));
    transition:.45s;
}

.kdc-folk-icon path,
.kdc-folk-icon line,
.kdc-folk-icon polyline,
.kdc-folk-icon polygon,
.kdc-folk-icon circle,
.kdc-folk-icon rect,
.kdc-folk-icon ellipse{
  vector-effect:non-scaling-stroke;
  stroke-dasharray:240;
  stroke-dashoffset:0;
  transition:stroke .35s ease,filter .35s ease;
}

.kdc-folk-card:hover .kdc-folk-icon{
  color:var(--kdc-gold-light);
  filter:drop-shadow(0 0 12px rgba(247,225,184,.85)) drop-shadow(0 0 28px rgba(214,167,96,.5));
}

.kdc-folk-card:hover .kdc-folk-icon path,
.kdc-folk-card:hover .kdc-folk-icon line,
.kdc-folk-card:hover .kdc-folk-icon polyline,
.kdc-folk-card:hover .kdc-folk-icon polygon,
.kdc-folk-card:hover .kdc-folk-icon circle,
.kdc-folk-card:hover .kdc-folk-icon rect,
.kdc-folk-card:hover .kdc-folk-icon ellipse{
  animation:kdcDraw 1.05s ease both;
}

.kdc-folk-title{
  margin:0 0 8px;
  font-family:'Cinzel', Georgia, serif;
  font-size:18px;
  font-weight:600;
  color:#fff;
  letter-spacing:.04em;
}

.kdc-folk-subtitle{
  margin:0;
  color:var(--kdc-muted);
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:13.5px;
  line-height:1.6;
}

.kdc-folk-index{
  position:absolute;
  top:22px;
  right:22px;
  color:var(--kdc-gold-light);
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:.2em;
}

.kdc-folk-arrow{
  position:absolute;
  right:22px;
  bottom:22px;
  color:var(--kdc-gold);
  font-size:18px;
  transition:transform .35s ease;
}

.kdc-folk-card:hover .kdc-folk-arrow{transform:translateX(6px)}

@keyframes kdcDraw{
  0%{stroke-dashoffset:240;opacity:.25}
  65%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:0;opacity:1}
}

@media(max-width:1024px){.kdc-folk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.kdc-folk-grid{grid-template-columns:1fr}.kdc-folk-card{min-height:200px}}