/* よみものカード（トップの最新3件と /stories/ 一覧で共通） */
.story-list { display: grid; gap: 18px; }
.story-card {
  display: grid; grid-template-columns: 112px 1fr; gap: 18px; align-items: center;
  padding: 14px; text-decoration: none; color: #f4ecd8;
  background: #241c3a;
  box-shadow: 0 -3px 0 0 #38305a, 0 3px 0 0 #38305a, -3px 0 0 0 #38305a, 3px 0 0 0 #38305a;
  transition: transform .15s, box-shadow .15s;
}
.story-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 -3px 0 0 #f2c14e, 0 3px 0 0 #f2c14e, -3px 0 0 0 #f2c14e, 3px 0 0 0 #f2c14e;
}
.sc-thumb {
  width: 112px; height: 112px; display: grid; place-items: center; overflow: hidden;
}
.sc-thumb img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }
.sc-thumb-empty { background: #312852; color: #9a90bf; font-size: 32px; }
.sc-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sc-date { font-family: 'Press Start 2P', monospace; font-size: 8px; color: #4fd0c0; letter-spacing: 1px; }
.sc-title { font-size: 18px; letter-spacing: 1px; line-height: 1.5; }
.sc-desc {
  font-size: 13px; color: #9a90bf; line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.stories-empty { text-align: center; color: #9a90bf; }
/* 日本語の日付は漢字を含むので和文のドットフォントで */
html[lang="ja"] .sc-date,
html[lang="ja"] .st-meta time { font-family: 'DotGothic16', sans-serif; font-size: 12px; }

@media (max-width: 540px) {
  .story-card { grid-template-columns: 84px 1fr; gap: 12px; padding: 10px; }
  .sc-thumb { width: 84px; height: 84px; }
  .sc-title { font-size: 15px; }
}