.article-cover { width: 100%; aspect-ratio: 16/6; border-radius: var(--radius-lg); margin-bottom: var(--sp-8); background: linear-gradient(135deg, #1a4d38, #0f2d20); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.article-cover.has-photo { background-size: cover; background-position: center; }
.article-cover.cover-icon::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(224,200,138,.16) 1.5px, transparent 1.5px); background-size: 22px 22px; }
.article-cover.cover-icon svg { width: 76px; height: 76px; stroke: var(--accent-light); position: relative; z-index: 1; opacity: .9; }
.article-cover-label { position: absolute; bottom: var(--sp-4); left: var(--sp-5); color: var(--cream); font-family: var(--font-serif); font-size: var(--fs-lg); z-index: 1; }

/* Blog listing card thumbnails for the icon-only posts */
.blog-img.cover-icon { display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.blog-img.cover-icon::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(224,200,138,.16) 1.5px, transparent 1.5px); background-size: 20px 20px; }
.blog-img.cover-icon svg { width: 48px; height: 48px; stroke: var(--accent-light); position: relative; z-index: 1; }

.article-wrap { max-width: 760px; margin: 0 auto; }
.article-back { display: inline-flex; align-items: center; gap: .4rem; color: var(--accent-dark); font-weight: 600; margin-bottom: var(--sp-6); }
.article-back svg { width: 16px; height: 16px; }

.article-body { line-height: 1.85; color: var(--gray-700); font-size: var(--fs-lg); }
.article-body h2 { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--primary-dark); margin: var(--sp-8) 0 var(--sp-3); }
.article-body h3 { font-size: 1.15rem; color: var(--primary-dark); margin: var(--sp-6) 0 var(--sp-2); }
.article-body p { margin-bottom: var(--sp-4); }
.article-body ul, .article-body ol { margin: 0 0 var(--sp-4) 1.3rem; }
.article-body li { margin-bottom: var(--sp-2); }
.article-body blockquote { border-left: 3px solid var(--accent); padding-left: var(--sp-4); margin: var(--sp-6) 0; font-style: italic; color: var(--primary-dark); }
.article-body strong { color: var(--primary-dark); }

.article-related { margin-top: var(--sp-12); padding-top: var(--sp-8); border-top: 1px solid var(--border); }
.article-related h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-4); }
.article-related-list { display: grid; gap: var(--sp-3); }
.article-related-list a { color: var(--primary-dark); font-weight: 600; text-decoration: none; }
.article-related-list a:hover { color: var(--accent-dark); }