記事カード

あなたは熟練のフロントエンドエンジニアです。私のWebサイトに「記事カード」の効果を追加してください。

# 追加してほしい効果
記事カード（カード & テーブル）
サムネイル画像とカテゴリタグ、タイトル、抜粋文、著者と日付をまとめたブログ記事カード。ホバーでサムネイルが拡大し、タイトルの色がアクセントカラーに変わります。

# 追加する場所
👉【ここに対象箇所を記入：例「トップのヒーローセクション」「お問い合わせボタン」「記事カードの一覧」など】

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- 記事カード: サムネ＋カテゴリタグ＋タイトル＋抜粋＋著者/日付 -->
<div class="stage">
  <article class="bl-card">
    <div class="bl-card__media">
      <img src="https://picsum.photos/id/1060/600/400" alt="記事のサムネイル画像" width="600" height="400">
      <span class="bl-card__tag">デザイン</span>
    </div>
    <div class="bl-card__body">
      <h2 class="bl-card__title"><a href="#">余白の設計が、体験の質を決める理由</a></h2>
      <p class="bl-card__excerpt">情報を詰め込むほど良いとは限らない。読み手の視線が迷わないための余白の使い方を、実例を交えて解説します。</p>
      <div class="bl-card__meta">
        <img class="bl-card__avatar" src="https://picsum.photos/id/64/64/64" alt="著者のアバター">
        <div class="bl-card__meta-text">
          <b>三坂 灯</b>
          <span>2026年7月2日 ・ 5分で読了</span>
        </div>
      </div>
    </div>
  </article>
</div>

【CSS】
/* 記事カード */
* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  padding: 20px;
  display: grid;
  place-items: center;
  font-family: "Hiragino Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(circle at 10% 10%, #fdeee0 0%, transparent 45%),
    radial-gradient(circle at 92% 88%, #e7f1e9 0%, transparent 50%),
    #faf9f6;
  color: #23222a;
}

.stage { display: grid; place-items: center; }

.bl-card {
  width: min(340px, 90vw);
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(30, 26, 20, .1);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.bl-card:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(30, 26, 20, .16); }

.bl-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #eee;
}
.bl-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.bl-card:hover .bl-card__media img { transform: scale(1.08); }

.bl-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20, 16, 10, .35), transparent 55%);
  opacity: .55;
  animation: bl-glow 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bl-glow {
  0%, 100% { opacity: .5; }
  50% { opacity: .78; }
}

.bl-card__tag {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #23222a;
  background: rgba(255, 255, 255, .92);
  padding: 5px 12px;
  border-radius: 999px;
}

.bl-card__body { padding: 20px 22px 22px; }
.bl-card__title { margin: 0 0 10px; font-size: 17.5px; line-height: 1.5; font-weight: 800; }
.bl-card__title a { color: #201f26; text-decoration: none; transition: color .2s ease; }
.bl-card__title a:hover { color: #c2660f; }

.bl-card__excerpt {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.75;
  color: #6c6a72;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bl-card__meta { display: flex; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px solid #f0ece4; }
.bl-card__avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; display: block; }
.bl-card__meta-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bl-card__meta-text b { font-size: 12.5px; color: #23222a; }
.bl-card__meta-text span { font-size: 11px; color: #9b98a0; }

@media (prefers-reduced-motion: reduce) {
  .bl-card, .bl-card__media img, .bl-card__title a { transition: none; }
  .bl-card__media::after { animation: none; }
}

【JavaScript】
// この記事カードは装飾・挙動ともCSSのみで完結するためJSは不要

# 外部ライブラリ
なし（追加ライブラリ不要）

# 守ってほしいこと
- 既存のHTML構造・レイアウト・デザインを壊さないこと。必要に応じてクラス名・色・サイズを私のサイトに合わせて調整してよい。
- クラス名やidが既存と衝突しないよう、必要なら接頭辞で名前空間を分けること。
- レスポンシブ対応と prefers-reduced-motion への配慮を入れること。
- 私のサイトのフレームワーク（React / Vue / 素のHTML など）に合わせて実装すること。不明な場合は素のHTML/CSS/JSで提示し、組み込み手順も説明すること。
- 変更後の確認手順も簡潔に教えてください。