/* ─────────────────────────────────────────────────────────────
   single-post.css — the article layout (is_singular('post')).

   The charcoal band, the 30/70 grid and the sticky rail are shared with the
   journal archive and the search page and live in journal-shell.css. What
   remains here is article-only: the grid's row/column assignment, the
   full-bleed grey comments band, the table of contents and the body copy.

   One grid spans the article and the comments so the sidebar column runs the
   full height and the sticky TOC can travel past the article before it
   releases.
   ─────────────────────────────────────────────────────────── */

/* ── Grid ────────────────────────────────────────────────── */
/* No align-self here: the aside must stretch both rows or sticky travel dies. */
.odx-article__sidebar {
	grid-column: 1;
	grid-row: 1 / span 2;
	padding: var(--space-14) 0 var(--space-16);
}

.odx-article__body {
	grid-column: 2;
	grid-row: 1;
	max-width: 74ch;
	padding: var(--space-14) 0 var(--space-22);
}

/* Full-bleed grey behind both columns without leaving the grid. The colour is
   painted on the element itself and thrown sideways by a spread shadow, then
   clipped back to the element's own top and bottom edges. A 100vw ::before at
   z-index:-1 does not work here: body carries an opaque background and nothing
   in between opens a stacking context, so the band paints underneath it. */
.odx-article__comments {
	grid-column: 2;
	grid-row: 2;
	padding: var(--space-18) 0 var(--space-24);
	background-color: var(--color-gray-100);
	box-shadow: 0 0 0 100vmax var(--color-gray-100);
	clip-path: inset( 0 -100vmax );
}

/* The section spans its whole grid track so the band centres on the viewport;
   the measure cap belongs to the content inside it. */
.odx-article__comments-inner {
	max-width: 74ch;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.odx-article__featured {
	margin-bottom: var(--space-10);
}

.odx-article__featured img {
	display: block;
	width: 100%;
	height: auto;
}

/* ── Table of contents ───────────────────────────────────── */
.odx-article__toc {
	margin-bottom: var(--space-9);
}

/* Desktop never collapses, so the toggle stays hidden; JS unhides it below 992. */
.odx-article__toc-toggle {
	display: none;
}

.odx-article__toc-list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: 2px solid var(--color-blue);
}

.odx-article__toc-item {
	margin: 0;
}

.odx-article__toc-item a {
	display: block;
	font-family: var(--font-sans);
	line-height: 1.45;
	text-decoration: none;
	transition: color var(--transition-base);
}

.odx-article__toc-item--h2 a {
	padding: 9px 0 9px 18px;
	font-size: 15px;
	color: var(--color-navy);
}

.odx-article__toc-item--h3 a {
	padding: 8px 0 8px 34px;
	font-size: 14px;
	color: var(--color-gray-600);
}

.odx-article__toc-item a:hover,
.odx-article__toc-item a:focus {
	color: var(--color-blue);
	text-decoration: none;
}

/* ── Comment readout ─────────────────────────────────────── */
.odx-article__comment-readout {
	margin: 0;
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-gray-300);
	font-family: var(--font-sans);
	font-size: 15px;
}

.odx-article__comment-readout a {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2);
	color: var(--color-navy);
	text-decoration: none;
	transition: color var(--transition-base);
}

.odx-article__comment-readout a:hover,
.odx-article__comment-readout a:focus {
	color: var(--color-blue);
	text-decoration: none;
}

.odx-article__comment-count {
	color: var(--color-blue);
}

/* ── Article body ────────────────────────────────────────── */
.odx-article__body > h2 {
	margin: var(--space-13) 0 var(--space-4);
	font-family: var(--font-sans);
	font-size: 34px;
	font-weight: 600;
	line-height: 1.14;
	letter-spacing: -0.03em;
	color: var(--color-navy);
	scroll-margin-top: calc( var(--header-height) + var(--space-4) );
}

.odx-article__body > h3 {
	margin: var(--space-9) 0 var(--space-3);
	font-family: var(--font-sans);
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--color-charcoal);
	scroll-margin-top: calc( var(--header-height) + var(--space-4) );
}

.odx-article__body p {
	margin: 0 0 var(--space-4);
	font-size: 18px;
	line-height: 1.78;
}

/* Lead paragraph — only when the article actually opens on prose. */
.odx-article__body > p:first-child {
	margin-bottom: var(--space-9);
	font-size: 23px;
	line-height: 1.6;
	color: var(--color-navy);
	text-wrap: pretty;
}

.odx-article__body blockquote {
	margin: var(--space-8) 0;
	padding: 4px 0 4px var(--space-6);
	border-left: 2px solid var(--color-blue);
	font-family: var(--font-sans);
	font-size: 24px;
	font-style: normal;
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: var(--color-navy);
}

.odx-article__footer {
	margin-top: var(--space-14);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-gray-300);
}

.odx-article__filed {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-gray-600);
}

.odx-article__filed a {
	color: var(--color-gray-600);
	/* Underlined so the filed-under terms read as links, not as label text —
	   they are the only route to a tag archive from the article. */
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--transition-base);
}

.odx-article__filed a:hover,
.odx-article__filed a:focus {
	color: var(--color-blue);
}

.odx-article__filed-sep {
	margin: 0 var(--space-1);
}

/* ── ≤991: single column, TOC collapses ──────────────────── */
@media ( max-width: 991px ) {
	.odx-article__sidebar,
	.odx-article__body,
	.odx-article__comments,
	.odx-article__comments-inner {
		grid-column: 1;
		max-width: none;
	}

	.odx-article__sidebar {
		grid-row: 1;
		padding: var(--space-7) 0 0;
	}

	.odx-article__body {
		grid-row: 2;
		padding: var(--space-7) 0 var(--space-11);
	}

	.odx-article__comments {
		grid-row: 3;
		padding: var(--space-10) 0 var(--space-13);
	}

	.odx-article__featured {
		margin-bottom: var(--space-7);
	}

	/* Collapsible block between hairlines. The collapsed state only applies once
	   JS has marked the nav, so the list stays open when scripting is off. */
	.odx-article__toc {
		margin-bottom: var(--space-7);
		padding: var(--space-3) 0;
		border-top: 1px solid var(--color-gray-300);
		border-bottom: 1px solid var(--color-gray-300);
	}

	.odx-article__toc--collapsible {
		position: relative;
	}

	.odx-article__toc--collapsible .odx-article__toc-eyebrow {
		margin: 0;
	}

	.odx-article__toc-toggle[hidden] {
		display: none;
	}

	.odx-article__toc--collapsible .odx-article__toc-toggle {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 100%;
		min-height: 44px;
		padding: 0;
		background: none;
		border: 0;
		cursor: pointer;
	}

	/* Drawn rather than typed, so the glyph never shifts the row's height. */
	.odx-article__toc-sign {
		position: relative;
		display: block;
		width: 14px;
		height: 14px;
	}

	.odx-article__toc-sign::before,
	.odx-article__toc-sign::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: var(--color-blue);
		transform: translateY(-50%);
	}

	.odx-article__toc-sign::after {
		transform: translateY(-50%) rotate(90deg);
		transition: transform var(--transition-base);
	}

	.odx-article__toc-toggle[aria-expanded="true"] .odx-article__toc-sign::after {
		transform: translateY(-50%) rotate(0deg);
	}

	.odx-article__toc--collapsible .odx-article__toc-list {
		margin-top: var(--space-3);
	}

	.odx-article__toc--collapsed .odx-article__toc-list {
		display: none;
	}

	/* 44px minimum tap targets. */
	.odx-article__toc-item--h2 a {
		padding: 11px 0 11px 16px;
		font-size: 16px;
		line-height: 1.4;
	}

	.odx-article__toc-item--h3 a {
		padding: 10px 0 10px 30px;
		font-size: 15px;
		line-height: 1.4;
	}

	.odx-article__body > h2 {
		margin: var(--space-10) 0 var(--space-3);
		font-size: 26px;
		line-height: 1.16;
		letter-spacing: -0.025em;
	}

	.odx-article__body > h3 {
		margin: var(--space-7) 0 var(--space-3);
		font-size: 19px;
	}

	.odx-article__body p {
		font-size: 17px;
		line-height: 1.75;
	}

	.odx-article__body > p:first-child {
		margin-bottom: var(--space-7);
		font-size: 20px;
	}

	.odx-article__body blockquote {
		margin: var(--space-7) 0;
		padding-left: var(--space-4);
		font-size: 20px;
	}

	.odx-article__footer {
		margin-top: var(--space-10);
		padding-top: var(--space-5);
	}
}