:root{--ss-maroon:#2B0412;--ss-plum:#75275D;--ss-gold:#C6A664;--ss-rose:#FDEDED;--ss-mauve:#D3C4C8;--ss-ink:#1A1A1A;}

.ss-tarot-grid{display:grid;grid-template-columns:repeat(3,minmax(240px,1fr));gap:28px;max-width:1200px;margin:0 auto;padding:60px 20px;perspective:1200px;}
@media (max-width:1024px){.ss-tarot-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.ss-tarot-grid{grid-template-columns:1fr}}

.ss-card{display:block;text-decoration:none}
.ss-card__inner{position:relative;width:100%;aspect-ratio:2/3;transform-style:preserve-3d;transition:transform .7s ease,box-shadow .3s ease;border-radius:26px;box-shadow:0 10px 28px rgba(0,0,0,.35),0 0 0 2px rgba(198,166,100,.15) inset;}
.ss-card:hover .ss-card__inner,.ss-card:focus-visible .ss-card__inner{transform:rotateY(180deg);box-shadow:0 14px 36px rgba(0,0,0,.45),0 0 0 2px rgba(198,166,100,.25) inset;}

.ss-card__face{position:absolute;inset:0;border-radius:26px;backface-visibility:hidden;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding:24px}

.ss-card__front{background:
 linear-gradient(to bottom,rgba(0,0,0,.0) 40%,rgba(0,0,0,.35) 100%),
 var(--bg) center/cover no-repeat;}
.ss-card__frame{position:absolute;inset:10px;border-radius:22px;border:2px solid var(--ss-gold);box-shadow:0 0 0 1px rgba(117,39,93,.4),0 0 20px rgba(198,166,100,.25) inset;pointer-events:none}
.ss-card__title{position:absolute;top:18px;left:0;right:0;margin:0;text-align:center;font-family:Marcellus,serif;font-size:26px;color: #D3C4C8;  /* Dusty Mauve */text-shadow: 0 0 10px rgba(0,0,0,.6); /* optional glow for readability */}
.ss-card__title {color: #D3C4C8;  /* Dusty Mauve */text-shadow: 0 0 10px rgba(0,0,0,.6); /* optional glow for readability */}
.ss-card__back{background:
 radial-gradient(120% 120% at 100% 0%, rgba(198,166,100,.18), transparent 60%),
 linear-gradient(180deg, rgba(117,39,93,.35), rgba(43,4,18,.85));
 transform:rotateY(180deg);color:var(--ss-rose);text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}
.ss-card__back h4{margin:0;font-family:Marcellus,serif;font-size:22px}
.ss-card__back p{margin:0;max-width:18ch;font-family:Lora,serif;font-size:15px;line-height:1.5;color:var(--ss-mauve)}
.ss-card__link{margin-top:8px;display:inline-block;font-family:Montserrat,sans-serif;font-weight:700;color:var(--ss-rose);background:var(--ss-maroon);padding:8px 16px;border-radius:22px;transition:background .25s}
.ss-card__link:hover{background:var(--ss-gold);color:var(--ss-maroon)}
/* Celestial icon & ritual caption for tarot cards */
.ss-card__icon{
  position:absolute;
  top:14px; right:14px;
  width:28px; height:28px;
  color:#D3C4C8;            /* Dusty Mauve */
  opacity:.9;
  filter: drop-shadow(0 0 6px rgba(0,0,0,.35));
  z-index:2;
}

.ss-card__ritual{
  position:absolute;
  bottom:16px; left:0; right:0;
  text-align:center;
  font-family:"Lora", serif;
  font-size:14px;
  letter-spacing:1px;
  color:#D3C4C8;            /* Dusty Mauve */
  text-shadow:0 0 8px rgba(0,0,0,.5);
  z-index:2;
}

/* Ensure front text stays above overlays */
.ss-card__title{ z-index:2; }
.ss-card__front::after{
  /* Optional dim overlay to ensure readability on busy images */
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,.35));
  z-index:1;}
/* Lift ritual caption and give more breathing room from the frame */
.ss-card__ritual{
  bottom: 28px;              /* was 16px */
  font-size: 15px;           /* tiny bump for readability */
}

/* Loosen the inner frame so text doesn't feel cramped against border */
.ss-card__frame{ inset: 14px; }  /* was 10px */
/* Bigger, crisper celestial icons */
.ss-card__icon{
  top: 16px; right: 16px;
  width: 40px; height: 40px;    /* was ~28px */
  color: #D3C4C8;
  opacity: .95;
  filter: drop-shadow(0 0 6px rgba(0,0,0,.35));
}

/* Slightly thicker lines for the sprite strokes */
.ss-card__icon use{
  vector-effect: non-scaling-stroke; /* keep lines consistent during transforms */
}
.ss-card__icon{
  width:40px;height:40px; /* adjust to taste */
  color:#D3C4C8;
  filter:drop-shadow(0 0 6px rgba(0,0,0,.35));
}
.ss-card__icon use{ vector-effect: non-scaling-stroke; }
/* move icon inward + make sure it sits above the frame */
.ss-card__icon{
  position:absolute;
  top: 28px;          /* was 14–16px */
  right: 28px;        /* was 14–16px */
  width: 40px;
  height: 40px;
  z-index: 3;         /* above frame/overlay */
  color: #D3C4C8;     /* mauve */
  pointer-events:none;
  /* subtle halo so it reads on busy images */
  background: rgba(0,0,0,.22); 
  border-radius: 999px;
  padding: 6px;       /* gives breathing room inside */
  box-shadow: 0 0 0 2px rgba(198,166,100,.25); /* faint gold ring */
}

/* give more room inside the frame so nothing hugs the edge */
.ss-card__frame{ inset: 16px; }   /* was 10–14px */

/* keep caption off the border (you already bumped this, but here’s a safe value) */
.ss-card__ritual{ bottom: 30px; }

/* crisp strokes when scaled */
.ss-card__icon use{ vector-effect: non-scaling-stroke; }
.ss-card__icon{ top: 32px; right: 32px; }