.article-related {
	border-top: 1px solid var(--archive-border);
	margin-top: 64px;
	padding-top: 32px;
}
.article-related h2 { font-size: 1.5rem; margin: 0 0 8px; }
#article-related-heading { scroll-margin-top: calc(var(--archive-header-height) + 24px); }
.article-related .article-related-intro { color: var(--archive-text-secondary); font-size: .9375rem; margin: 0 0 24px; }
.article-related .article-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 0; margin: 0; list-style: none; }
.article-related .article-related-card { margin: 0; padding: 0; min-width: 0; }
.article-related-card > a { display: block; color: var(--archive-text); text-decoration: none; }
.article-related-image { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--archive-surface); border-radius: 4px; }
.article-related-image img { width: 100%; height: 100%; object-fit: cover; }
.article-related-placeholder { display: flex; align-items: center; justify-content: center; color: var(--archive-accent); text-align: center; font-size: .875rem; line-height: 1.6; }
.article-related-detail { display: block; padding-top: 12px; }
.article-related-detail time { display: block; color: var(--archive-muted); font-size: .75rem; line-height: 1.5; margin-bottom: 6px; }
.article-related-title { display: block; font-size: 1rem; font-weight: 600; line-height: 1.65; }
.article-related-card > a:hover .article-related-title { color: var(--archive-accent); text-decoration: underline; text-underline-offset: .2em; }
.article-related .article-related-more { margin: 24px 0 0; font-size: .9375rem; }
@media (max-width: 600px) {
	.article-related { margin-top: 48px; padding-top: 24px; }
	.article-related .article-related-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.article-related-card > a { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: start; }
	.article-related-detail { padding-top: 0; }
	.article-related-title { font-size: .9375rem; }
}