/* ---------- Single news article ---------- */
/*
 * Loaded conditionally on `is_singular('post')`. Layout rules for the
 * editorial article view: header (topic chip, title, dek, byline, hero),
 * body (single-column, generous line-height, ~70ch max-width), footer
 * (tags), and the "More from this topic" related-articles grid.
 *
 * The `.article-narrow` wrapper centers content at editorial reading
 * width. The hero image breaks out of the narrow column to a wider
 * (but not full-bleed) frame so it has visual impact without dwarfing
 * the body type.
 */

.article {
	padding: 24px 0 80px;
}

.article-narrow {
	max-width: 720px;
}

/* ---- Header ---- */

.article-header {
	margin: 0 0 32px;
}

.article-topic-chip {
	display: inline-block;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
	background: var(--accent-tint);
	padding: 5px 10px;
	border-radius: 4px;
	margin-bottom: 18px;
	transition: background 140ms ease, color 140ms ease;
}
.article-topic-chip:hover {
	background: var(--accent);
	color: white;
}

.article-title {
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(32px, 5vw, 44px);
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--primary);
	margin: 0 0 16px;
	text-wrap: pretty;
}

.article-dek {
	font-size: 18px;
	line-height: 1.5;
	color: var(--ink-2);
	max-width: 60ch;
	margin: 0 0 24px;
}

.article-byline {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink-3);
}
.article-byline .dot {
	opacity: 0.5;
}

.article-hero {
	margin: 36px auto 0;
	max-width: 1100px;
	padding: 0 32px;
}
.article-hero img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius);
}
/* Featured-image caption, only rendered by single.php when the editor
   filled in the attachment's caption field. Centered under the hero,
   max-width capped to keep it from running too wide on big screens. */
.article-hero figcaption {
	margin: 14px auto 0;
	max-width: 720px;
	font-family: var(--mono);
	font-size: 12px;
	line-height: 1.55;
	color: var(--ink-3);
	letter-spacing: 0.02em;
}
.article-hero figcaption a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.article-hero figcaption a:hover {
	color: var(--accent);
}

/* ---- Body ---- */

.article-body {
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.7;
	color: var(--ink);
	margin: 40px 0;
}
.article-body p {
	margin: 0 0 22px;
}
.article-body p:first-child {
	margin-top: 0;
}
.article-body p:last-child {
	margin-bottom: 0;
}
.article-body h2 {
	font-family: var(--display);
	font-weight: 700;
	font-size: 26px;
	line-height: 1.2;
	letter-spacing: -0.005em;
	color: var(--primary);
	margin: 40px 0 16px;
}
.article-body h3 {
	font-family: var(--display);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.25;
	color: var(--primary);
	margin: 32px 0 12px;
}
.article-body a {
	color: var(--accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 120ms ease;
}
.article-body a:hover {
	color: var(--accent-deep);
}
.article-body blockquote {
	border-left: 3px solid var(--accent);
	margin: 28px 0;
	padding: 4px 0 4px 24px;
	font-style: italic;
	color: var(--ink-2);
}
.article-body blockquote p {
	margin: 0 0 12px;
}
.article-body blockquote p:last-child {
	margin-bottom: 0;
}
.article-body ul,
.article-body ol {
	margin: 0 0 22px;
	padding-left: 26px;
}
.article-body li {
	margin: 0 0 10px;
}
.article-body img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 28px auto;
	border-radius: var(--radius);
}
.article-body figure {
	margin: 28px 0;
}
.article-body figure img {
	margin: 0 0 8px;
}
.article-body figcaption {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink-3);
	text-align: center;
}
.article-body code {
	font-family: var(--mono);
	font-size: 0.92em;
	background: var(--accent-tint);
	padding: 2px 6px;
	border-radius: 3px;
}
.article-body pre {
	font-family: var(--mono);
	font-size: 13px;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	padding: 16px;
	overflow-x: auto;
	margin: 24px 0;
}
.article-body pre code {
	background: transparent;
	padding: 0;
}
/* Numbers in body copy shift to monospace. WP doesn't auto-wrap them,
   but if narratives use the .num class (matching the other templates),
   they pick up here. */
.article-body .num {
	font-family: var(--mono);
	font-size: 0.92em;
}

/* ---- Footer ---- */

.article-footer {
	border-top: 1px solid var(--rule);
	padding-top: 24px;
	margin-top: 40px;
}
.article-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.article-tags-label {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-right: 4px;
}
.article-tag {
	font-family: var(--sans);
	font-size: 13px;
	color: var(--ink-2);
	border: 1px solid var(--rule-2);
	border-radius: 4px;
	padding: 4px 10px;
	transition: border-color 120ms ease, color 120ms ease;
}
.article-tag:hover {
	border-color: var(--accent);
	color: var(--accent);
}

/* ---- Related articles ---- */

.article-related {
	margin-top: 64px;
	padding-top: 56px;
	border-top: 1px solid var(--rule);
}
.article-related-grid {
	display: grid;
	/* auto-fill (not auto-fit) keeps empty tracks so a single card sits
	   at ~380px max instead of stretching across the full row. Caps each
	   column at 380px to prevent the 4:3 photo from ballooning. */
	grid-template-columns: repeat(auto-fill, minmax(280px, 380px));
	gap: 28px;
	margin-top: 28px;
}

/* Cards inside the related grid stack vertically (photo on top, body
   below). The shared `.article-card` rule in news.css uses a side-by-side
   layout (380px photo + 1fr body), which only fits a full-width row on
   the news index. In the narrower related-grid columns it overflows and
   crushes the body. Override to a stacked layout here. */
.article-related-grid .article-card {
	grid-template-columns: 1fr;
	gap: 14px;
	padding: 0;
	border-bottom: none;
}
.article-related-grid .article-card .ac-headline {
	font-size: 22px;
}

@media (max-width: 880px) {
	.article-narrow {
		padding-left: 18px;
		padding-right: 18px;
	}
	.article-hero {
		padding: 0 18px;
	}
	.article-body {
		font-size: 16px;
	}
}