article {
  margin-bottom: 3rem;
}

article figure {
  margin-bottom: 1.5rem;
}

article figure img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

article header {
  margin-bottom: 1.5rem;
}

article header h1 {
  font-size: 1.7rem;
  font-weight: 600;
  margin: 0;
}

/* ドロップキャップ：最初の段落の1文字だけ大きく（雑誌っぽさ） */
.content > p:first-of-type::first-letter {
  float: left; font-size: 2rem; line-height: .9; padding: .15rem .35rem 0 0; font-weight: 600;
}

/* 段落：行間と段落間のメリハリ */
.content p { line-height: 1.85; margin: 0 0 1.05em; }

/* 見出し：少しだけ締まる感じに */
.content h2 { margin: 2.0em 0 .6em; font-size: 1.35rem; letter-spacing: .02em; }
.content h3 { margin: 1.6em 0 .4em; font-size: 1.15rem; }

/* 強調ボックス：blockquoteを淡い紙面のように */
.content blockquote {
  margin: 1.4em 0; padding: .9em 1em; background: #fafafa;
  border-left: 4px solid #e5e5e5; color: #444;
}

/* 区切り線：HRを“見出しの間”の空気に */
.content hr { border: 0; height: 1px; background: linear-gradient(to right,#0000,#ddd,#0000); margin: 2.2em 0; }

/* 画像：キャプション風（figcaptionが無くてもattrで代用可） */
.content img { display: block; max-width: 100%; margin: 1.2em auto .4em; }
.content img[alt]::after { content: attr(alt); display: block; text-align: center; color: #777; font-size: .85rem; margin-top: .2em; }
/* ↑ altをキャプションに使う小技（不要なら削除） */

/* 暗転モードのささやかな配慮 */
@media (prefers-color-scheme: dark) {
  .content blockquote { background:#181818; border-left-color:#333; color:#bbb; }
}

.post-meta {
  color: #888;
  font-size: 0.95rem;
  margin-top: 0.3rem;
}