.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);
	/* assets/css/site/header.css targets the bare `header` element (for
	   the sitewide nav bar) with a brand-blue background AND
	   position:sticky/top:0/z-index:99 — this <header> is a different,
	   unrelated element that just happens to share the same tag name, so
	   every one of those inherited properties needs an explicit override.
	   Without resetting position, this element also stuck to top:0 at the
	   same z-index as the real nav header, and — being later in the DOM —
	   visually overlapped/won over the nav bar on scroll. */
	background: none;
	position: static;
	top: auto;
	z-index: auto;
}
.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 {
	/* Body links sit on a white background — --color-highlight (primary-300)
	   measures only 3.17:1 here, below the 4.5:1 AA floor. --color-link
	   (primary-700) is the token already tuned for light backgrounds. */
	color: var(--color-link);
	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;
	}
}