.article {
	padding: var(--spacing-10) 0 var(--spacing-16);
}

.article-header,
.article-cover,
.article-content {
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

.article-header {
	text-align: left;
	margin-bottom: var(--spacing-6);
}
.article-header h1 {
	font-family: var(--font-title);
	font-size: var(--text-4xl);
	line-height: var(--leading-tight);
	margin: var(--spacing-2) 0;
}
.article-header time {
	color: inherit;
	opacity: 0.7;
	font-size: var(--text-sm);
}

/* Category tag was previously only styled on blog listing cards
   (assets/css/templates/blog-listing.css) and rendered unstyled here,
   on the article page itself. Same treatment, defined locally since
   article.css doesn't load blog-listing.css. */
.article-header .category-tag {
	display: inline-block;
	background: var(--color-highlight);
	color: var(--color-white);
	padding: var(--spacing-1) var(--spacing-3);
	border-radius: var(--rounded);
	font-size: var(--text-xs);
	font-weight: var(--font-bold);
	text-decoration: none;
	margin-bottom: var(--spacing-2);
}

.article-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-2);
	margin: var(--spacing-3) 0;
}
.tag-chip {
	display: inline-block;
	background: var(--color-gray-100, #f5f5f5);
	color: inherit;
	padding: var(--spacing-1) var(--spacing-3);
	border-radius: var(--rounded);
	font-size: var(--text-xs);
	text-decoration: none;
}
.tag-chip:hover {
	background: var(--color-gray-200, #e5e5e5);
}

.article-cover {
	margin: var(--spacing-6) auto;
}
.article-cover img {
	width: 100%;
	height: auto;
	border-radius: var(--rounded-xl);
	display: block;
}

.article-content {
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
}
.article-content p {
	margin-bottom: var(--spacing-6);
}
.article-content h2 {
	font-family: var(--font-title);
	font-size: var(--text-2xl);
	margin-top: var(--spacing-10);
	margin-bottom: var(--spacing-4);
}
.article-content h3 {
	font-family: var(--font-title);
	font-size: var(--text-xl);
	margin-top: var(--spacing-8);
	margin-bottom: var(--spacing-3);
}
.article-content a {
	color: var(--color-highlight);
	text-decoration: underline;
}

/* Author bio box */
.author-bio {
	max-width: 900px;
	margin: var(--spacing-12) auto;
	padding: var(--spacing-6) var(--spacing-8);
	background: var(--color-gray-100, #f5f5f5);
	border-radius: var(--rounded-xl);
}
.author-bio-inner {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4);
	align-items: flex-start;
}
.author-avatar-large {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.author-bio h2 {
	font-family: var(--font-title);
	font-size: var(--text-xl);
	margin: 0 0 var(--spacing-1);
}
.author-role {
	opacity: 0.7;
	font-size: var(--text-sm);
	margin: 0 0 var(--spacing-2);
}

.article-apply-link {
	max-width: 700px;
	margin: var(--spacing-8) auto 0;
	text-align: center;
	font-size: var(--text-lg);
}

@media screen and (min-width: 40rem) {
	.author-bio-inner {
		flex-direction: row;
		align-items: flex-start;
	}
}