/* ==========================================================================
   The Journal — single post (reference 5A) and the shared entry content
   ========================================================================== */

/* --------------------------------------------------------------------------
   Breadcrumb strip
   -------------------------------------------------------------------------- */

.post-crumbs {
	border-bottom: 1px solid var(--rule);
}

.post-crumbs__inner {
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
	padding-block: 12px;
	font-family: var(--font-courier);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.post-crumbs__inner a {
	color: var(--ink-soft);
}

.post-crumbs__inner a:hover,
.post-crumbs__inner a:focus-visible {
	color: var(--ink);
}

.post-crumbs__sep {
	color: var(--rule);
}

.post-crumbs__current {
	color: var(--ink);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   The article
   -------------------------------------------------------------------------- */

.post-article {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.post-article__meta {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Featured image
   -------------------------------------------------------------------------- */

.post-figure {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 2px 0;
}

.post-figure__img {
	width: 100%;
	height: auto;
	aspect-ratio: 1460 / 720;
	object-fit: cover;
	border-radius: 2px;
}

.post-figure__caption {
	font-family: var(--font-courier);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Body — the reading column
   -------------------------------------------------------------------------- */

.entry-content {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

:where(.entry-content) > * {
	min-width: 0;
}

:where(.entry-content) p {
	font-size: 17px;
	line-height: 1.75;
}

:where(.entry-content) h2 {
	font-size: 34px;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin-top: 10px;
	scroll-margin-top: var(--rail-top);
}

:where(.entry-content) h3 {
	font-size: 22px;
	line-height: 1.3;
	font-weight: 700;
}

:where(.entry-content) ul,
:where(.entry-content) ol {
	padding-left: 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

:where(.entry-content) li {
	font-size: 17px;
	line-height: 1.7;
}

:where(.entry-content) a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

:where(.entry-content) img,
:where(.entry-content) video {
	width: 100%;
	height: auto;
	border-radius: 2px;
}

/* An iframe has no intrinsic size, so `height: auto` on one resolves to the
   CSS default of 150px rather than to its height attribute — which collapsed
   every oEmbed to a 730x150 blank strip. Videos get a ratio so they still
   scale; any other iframe keeps the height it declared. */
:where(.entry-content) iframe {
	max-width: 100%;
	border: 0;
	border-radius: 2px;
}

:where(.entry-content) iframe[src*="youtube.com"],
:where(.entry-content) iframe[src*="youtube-nocookie.com"],
:where(.entry-content) iframe[src*="youtu.be"],
:where(.entry-content) iframe[src*="vimeo.com"],
:where(.entry-content) iframe[src*="dailymotion.com"],
:where(.entry-content) iframe[src*="ted.com"] {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* Block embeds carry their own ratio class; honour it and fill the wrapper. */
:where(.entry-content) .wp-block-embed__wrapper {
	position: relative;
}

:where(.entry-content) .wp-embed-aspect-16-9 .wp-block-embed__wrapper,
:where(.entry-content) .wp-embed-aspect-4-3 .wp-block-embed__wrapper,
:where(.entry-content) .wp-embed-aspect-1-1 .wp-block-embed__wrapper {
	aspect-ratio: var(--embed-ratio, 16 / 9);
}

:where(.entry-content) .wp-embed-aspect-4-3 .wp-block-embed__wrapper {
	--embed-ratio: 4 / 3;
}

:where(.entry-content) .wp-embed-aspect-1-1 .wp-block-embed__wrapper {
	--embed-ratio: 1 / 1;
}

:where(.entry-content) .wp-block-embed__wrapper > iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
}

:where(.entry-content) figure {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

:where(.entry-content) figcaption {
	font-family: var(--font-courier);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

:where(.entry-content) code,
:where(.entry-content) pre {
	font-family: var(--font-courier);
	font-size: 14px;
}

:where(.entry-content) pre {
	background: var(--card);
	border: 1px solid var(--rule);
	padding: 16px 18px;
	overflow-x: auto;
	line-height: 1.7;
}

:where(.entry-content) table {
	width: 100%;
	border-collapse: collapse;
	display: block;
	overflow-x: auto;
}

:where(.entry-content) th,
:where(.entry-content) td {
	border-bottom: 1px solid var(--rule);
	padding: 10px 12px;
	text-align: left;
	font-size: 16px;
}

:where(.entry-content) th {
	background: var(--band);
	font-family: var(--font-courier);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   The three body devices — as template parts and as block styles

   These are deliberately not scoped to .entry-content. The block editor loads
   this stylesheet into its own canvas, which has no such wrapper, and a writer
   who applies a block style should see it. The generic element rules above are
   wrapped in :where() so they carry no specificity and a device rule always
   wins, whichever file it lives in.
   -------------------------------------------------------------------------- */

/* Verbatim: something quoted from a report. Courier, on --card stock. */
.is-style-journal-verbatim,
.entry-content .j-verbatim {
	background: var(--card);
	border: 1px solid var(--rule);
	border-left: 1px solid var(--rule);
	padding: 18px 20px;
	font-family: var(--font-courier);
	font-size: 13px;
	line-height: 1.8;
	color: var(--ink);
	margin: 0;
}

.is-style-journal-verbatim p,
.entry-content .j-verbatim p {
	font-family: var(--font-courier);
	font-size: 13px;
	line-height: 1.8;
	text-wrap: initial;
}

/* The core quote block puts its cite last. In this box the cite is the
   Courier eyebrow, so it is ordered to the top visually while staying after
   the quote it attributes for a screen reader. */
.is-style-journal-verbatim {
	display: flex;
	flex-direction: column;
}

.is-style-journal-verbatim cite,
.entry-content .j-verbatim cite {
	order: -1;
	display: block;
	font-style: normal;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--magenta);
	font-weight: 700;
	font-size: 12px;
	margin-bottom: 2px;
}

/* Pull quote: magenta left border, 23px at 700. */
.post-pull,
.is-style-journal-pull-quote {
	border-left: 3px solid var(--magenta);
	border-right: 0;
	border-top: 0;
	border-bottom: 0;
	padding: 4px 0 4px 20px;
	margin: 0;
	background: none;
	color: var(--ink);
	text-align: left;
}

.post-pull p,
.is-style-journal-pull-quote p {
	font-size: 23px;
	line-height: 1.45;
	font-weight: 700;
	text-wrap: pretty;
}

.is-style-journal-pull-quote cite {
	display: block;
	font-family: var(--font-courier);
	font-size: 12px;
	font-style: normal;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-top: 8px;
}

/* Margin row: prose with a handwritten aside in a 190px cell. */
.post-margin-row,
.is-style-journal-margin-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 190px;
	gap: 26px;
	align-items: start;
}

/* core/group wraps its children in an inner container, which would otherwise
   be the grid's only item and stack the aside under the prose. Making the
   wrapper transparent to layout puts the paragraphs back on the grid, and
   costs nothing when the wrapper is absent — as it is in the template part.
   The rules that size those paragraphs use a descendant combinator for the
   same reason: display:contents changes layout, not the DOM a selector walks. */
.is-style-journal-margin-row > .wp-block-group__inner-container,
.is-style-journal-dashed > .wp-block-group__inner-container {
	display: contents;
}

.post-margin-row__text {
	font-size: 17px;
	line-height: 1.75;
}

.post-margin-row__note,
.is-style-journal-margin-row .j-hand {
	font-size: 20px;
}

/* --------------------------------------------------------------------------
   Foot block and date line
   -------------------------------------------------------------------------- */

.post-foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	border-top: 2px solid var(--ink);
	padding-top: 16px;
	margin-top: 8px;
}

.post-foot__by {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.post-foot__name {
	font-size: 16px;
	font-weight: 800;
}

.post-dateline {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	border-top: 1px solid var(--rule);
	padding-top: 11px;
	font-family: var(--font-courier);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Next in section
   -------------------------------------------------------------------------- */

.post-next {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 14px;
}

.post-next__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.post-next__card {
	background: var(--card);
	border: 1px solid var(--rule);
	padding: 15px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: var(--ink);
}

.post-next__card:hover,
.post-next__card:focus-visible {
	border-color: var(--ink-soft);
	color: var(--ink);
	text-decoration: none;
}

.post-next__title {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	text-wrap: balance;
}

.post-next__card:hover .post-next__title,
.post-next__card:focus-visible .post-next__title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Table of contents
   -------------------------------------------------------------------------- */

.toc__details > summary {
	cursor: pointer;
}

.toc__summary h2 {
	display: inline;
}

.toc__list {
	margin-top: 9px;
}

@media (min-width: 1081px) {
	/* Above the stacking breakpoint the block reads as a plain list, so the
	   disclosure marker comes off. The summary stays operable — a reader who
	   wants the list out of the way can still collapse it. */
	.toc__summary {
		cursor: default;
		list-style: none;
	}

	.toc__summary::-webkit-details-marker {
		display: none;
	}

	.toc__summary::marker {
		content: '';
	}
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
	.post-margin-row,
	.is-style-journal-margin-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}
}

@media (max-width: 640px) {
	.entry-content h2 {
		font-size: 26px;
	}

	.post-figure__img {
		aspect-ratio: auto;
		height: 220px;
	}

	.post-next__cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.post-foot {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
}