/* ─────────────────────────────────────────────────────────────
   journal-shell.css — the shell shared by the article, the journal
   archive and the search results page.

   Three things live here and nowhere else:
     • the full-bleed charcoal band whose contents sit on the page rail
     • the 30/70 grid
     • the sticky left rail and its scrollbar

   Extracted out of single-post.css so the three templates carry one
   implementation. Page-specific rules stay in their own stylesheet.
   The band's full-bleed depends on `overflow-x: clip` in base.css, and the
   sticky offset is tied to --header-height. Neither is re-derived here.
   ─────────────────────────────────────────────────────────── */

/* The band butts against the site header, so <main> drops its own padding. */
.odx-main--journal {
	padding-top: 0;
	padding-bottom: 0;
}

/* ── Charcoal band ───────────────────────────────────────── */
.odx-band {
	padding: var(--space-16) 0;
	background-color: var(--color-charcoal);
	color: var(--color-white);
}

/* Band is full-bleed; its contents sit on the page rail, so the h1 lines up
   with the grid below it. */
.odx-band__inner {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-pad);
}

.odx-band__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	margin: 0 0 var(--space-6);
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-blue-light);
}

.odx-band__rule {
	display: inline-block;
	width: 56px;
	height: 1px;
	background-color: var(--color-divider);
}

.odx-band__title {
	max-width: 22ch;
	margin: 0;
	font-family: var(--font-sans);
	font-size: 60px;
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.035em;
	color: var(--color-white);
	text-wrap: balance;
}

/* Title beside a standfirst or a search form, on the same 30/70 tracks as the
   grid below. Baselines align because the row is bottom-aligned. */
.odx-band__row {
	display: grid;
	grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
	column-gap: var(--space-10);
	align-items: end;
	margin-top: var(--space-6);
}

.odx-band__row .odx-band__title {
	max-width: none;
}

.odx-band__standfirst {
	max-width: 52ch;
	margin: 0;
	font-size: 19px;
	line-height: 1.65;
	color: var(--color-gray-300);
}

.odx-band__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-7);
	margin-top: var(--space-7);
	font-family: var(--font-sans);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-gray-400);
}


/* ── Band search form (search results page) ──────────────── */
.odx-band__search {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding-bottom: 10px;
	border-bottom: 2px solid var(--color-blue-light);
}

.odx-band__search-input {
	flex: 1;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--font-sans);
	font-size: 30px;
	letter-spacing: -0.02em;
	color: var(--color-white);
	outline: none;
}

.odx-band__search-input::placeholder {
	color: var(--color-gray-400);
}

.odx-band__search-input:focus-visible {
	outline: 2px solid var(--color-blue-light);
	outline-offset: 4px;
}

.odx-band__search-submit {
	padding: 13px 24px;
	border: 0;
	border-radius: var(--radius-pill);
	background-color: var(--color-blue);
	color: var(--color-white);
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color var(--transition-base);
}

.odx-band__search-submit:hover,
.odx-band__search-submit:focus {
	background-color: var(--color-blue-mid);
}

/* ── Grid ────────────────────────────────────────────────── */
.odx-shell__grid {
	display: grid;
	grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
	column-gap: var(--space-10);
}

/* ── Sticky rail ─────────────────────────────────────────── */
.odx-shell__rail {
	position: sticky;
	top: calc( var(--header-height) + var(--space-4) );
	z-index: var(--z-sticky-toc);
	/* Only the sticky top offset comes off the viewport, plus one gap so the
	   rail never touches the bottom edge. Subtracting the offset twice cost
	   126px of usable height and clipped rails that had room to finish. */
	max-height: calc( 100vh - var(--header-height) - var(--space-4) * 2 );
	padding-right: var(--space-3);
	overflow-y: auto;
	overscroll-behavior: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--color-gray-300) transparent;
}

.odx-shell__rail::-webkit-scrollbar {
	width: 8px;
}

.odx-shell__rail::-webkit-scrollbar-thumb {
	background-color: var(--color-gray-300);
}

.odx-shell__rail::-webkit-scrollbar-track {
	background-color: transparent;
}

/* Rail section label, used by every block in the left column. */
.odx-shell__eyebrow {
	margin: 0 0 var(--space-4);
	font-family: var(--font-sans);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-gray-600);
}

/* ── ≤991: single column, rail releases ──────────────────── */
@media ( max-width: 991px ) {
	.odx-shell__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* A pinned rail would eat the viewport on a phone. */
	.odx-shell__rail {
		position: static;
		max-height: none;
		padding-right: 0;
		overflow-y: visible;
	}

	.odx-band {
		padding: var(--space-9) 0;
	}

	.odx-band__row {
		display: block;
		margin-top: var(--space-4);
	}

	.odx-band__title {
		max-width: none;
		font-size: 34px;
		line-height: 1.08;
		letter-spacing: -0.03em;
	}

	.odx-band__standfirst {
		max-width: none;
		margin-top: var(--space-4);
		font-size: 17px;
	}

	.odx-band__kicker {
		gap: var(--space-3);
		margin-bottom: var(--space-4);
		font-size: 10px;
		letter-spacing: 0.16em;
	}

	.odx-band__rule {
		width: 28px;
	}

	.odx-band__meta {
		display: grid;
		gap: var(--space-2);
		justify-items: start;
		margin-top: var(--space-5);
		font-size: 11px;
	}

	.odx-band__search {
		gap: var(--space-3);
		margin-top: var(--space-5);
	}

	.odx-band__search-input {
		min-height: 44px;
		font-size: 20px;
		letter-spacing: -0.01em;
	}

	.odx-band__search-submit {
		min-height: 44px;
		padding: 0 20px;
	}
}