.stories-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.story-card { display: block; overflow: hidden; border: 1px solid rgba(255,255,255,0.62); border-radius: 18px; background: rgba(255,255,255,0.46); color: inherit; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.72), 0 8px 22px rgba(92,61,46,0.07); transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease; }
.story-card:hover, .story-card:focus-visible { transform: translateY(-4px); background: rgba(255,255,255,0.74); box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 14px 34px rgba(92,61,46,0.13); outline: none; }
.story-card img { display: block; width: calc(100% - 16px); height: calc((100vw - 64px - 52px) / 3 * 9 / 16); max-height: 178px; margin: 8px 8px 0; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 13px; background: #F2DCC8; }
.story-card-body { display: grid; gap: 8px; padding: 14px 16px 18px; }
.story-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: #A07060; font-size: 12px; font-weight: 700; }
.story-category, .story-genre { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; background: #FFDCBF; color: #C4612A; font-size: 12px; }
.story-card h2, .story-card h3 { color: #3D2B1F; font-family: 'Zen Maru Gothic', sans-serif; font-size: 17px; line-height: 1.45; margin: 0; }
.story-card p { font-size: 13px; line-height: 1.75; }

@media (max-width: 700px) {
  .stories-grid { grid-template-columns: 1fr; }
  .story-card img { height: calc((100vw - 56px) * 9 / 16); max-height: none; }
}