/* story cards, shared by the front page and profiles */
/* ================= story cards (rail and feed) ================= */
.card { display: block; text-decoration: none; color: inherit; perspective: 700px; -webkit-tap-highlight-color: transparent; }
.card-cover { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: var(--r-card); overflow: hidden; background: var(--surface-2); transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.2s var(--ease-out); }
.card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s var(--ease-out); }
.card-cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.card-new { position: absolute; z-index: 2; top: 10px; left: 10px; background: var(--red); color: #fff; font: 800 0.78rem/1 var(--f-display); font-stretch: 70%; letter-spacing: 0.03em; padding: 5px 8px; border-radius: 6px; text-transform: uppercase; }
.card-meta { display: grid; gap: 4px; padding: 14px 2px 0; }
.card-g { font: 500 0.85rem/1.2 var(--f-ui); color: var(--dim); }
.card-t { font: 300 1.28rem/1.08 var(--f-serif); letter-spacing: -0.015em; text-wrap: balance; }
.card-a { font-size: 0.82rem; color: var(--dim); }
.card:active .card-cover { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .card:hover .card-cover img { transform: scale(1.05); }
  .card:hover .card-cover::after { opacity: 1; }
}
.card:focus-visible .card-cover { outline: 2px solid var(--blush); outline-offset: 3px; }