.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 {
	/* Matches the shared H1 scale (assets/css/framework/headings.css) — was
	   text-4xl, one step below the homepage/sitewide H1 (text-5xl), a
	   real, measurable divergence from the rest of the site's hierarchy. */
	font-family: var(--font-title);
	font-size: var(--text-5xl);
	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(--surface-alt);
	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(--brand-border);
}

.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);
}
/* H2/H3 sizes and margins below now match the shared scale in
   assets/css/framework/headings.css exactly (was text-2xl/text-xl — two
   full steps below the sitewide H2/H3 of text-4xl/text-3xl). This is the
   one change in this pass that most needs a live look once deployed:
   article bodies repeat H2/H3 far more often than a landing page's 2-3
   section breaks, so confirm the larger in-body headings still read well
   across a long article rather than dominating the prose — if not, this
   is the value to dial back, not the rest of the hierarchy work. */
.article-content h2 {
	font-family: var(--font-title);
	font-size: var(--text-4xl);
	margin-top: var(--spacing-16);
	margin-bottom: var(--spacing-4);
}
.article-content h3 {
	font-family: var(--font-title);
	font-size: var(--text-3xl);
	margin-top: var(--spacing-16);
	margin-bottom: var(--spacing-4);
}
.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(--surface-alt);
	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;
	}
}