/* ==========================================================================
   The Journal — single page (reference 5E, the plain shell)
   ========================================================================== */

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

.page-head {
	padding-top: 44px;
	border-bottom: 1px solid var(--rule);
}

.page-head__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 30px;
}

.page-head__text {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 1000px;
	min-width: 0;
}

.page-head__eyebrow {
	font-family: var(--font-courier);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--stamp);
}

.page-head__lede {
	max-width: 62ch;
}

/* --------------------------------------------------------------------------
   Boxed meta cells
   -------------------------------------------------------------------------- */

.meta-cells {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 26px 0 22px;
}

.meta-cells__cell {
	background: var(--card);
	border: 1px solid var(--rule);
	padding: 9px 14px;
	font-family: var(--font-courier);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.meta-cells__cell--primary {
	border-color: var(--ink);
	color: var(--ink);
	font-weight: 700;
}

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

.page-content {
	gap: 24px;
}

.page-block {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* A Courier eyebrow that is also the section's heading. The negative bottom
   margin pulls back the flex gap, so the eyebrow sits on the prose it labels
   instead of floating a full block above it. */
.is-style-journal-eyebrow {
	font-family: var(--font-courier);
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ink-soft);
	margin-top: 8px;
	margin-bottom: -14px;
	scroll-margin-top: var(--rail-top);
}

/* --------------------------------------------------------------------------
   Lettered list — as a template part and as a block style
   -------------------------------------------------------------------------- */

.lettered,
.is-style-journal-lettered-list {
	list-style: none;
	counter-reset: lettered;
	margin: 0;
	padding: 0;
	display: block;
}

/* The template part hands over explicit cells, so it can use a grid. */
.lettered__row {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	gap: 18px;
	align-items: start;
	padding: 11px 0;
	border-bottom: 1px solid var(--rule);
}

/* The block style cannot: a core list item is a title element followed by a
   bare text node, and a grid would place that text in the letter's column.
   The letter hangs in the padding instead, so any content flows normally. */
.is-style-journal-lettered-list > li {
	counter-increment: lettered;
	position: relative;
	padding: 11px 0 11px 44px;
	border-bottom: 1px solid var(--rule);
}

.lettered__row:last-child,
.is-style-journal-lettered-list > li:last-child {
	border-bottom: 0;
}

.is-style-journal-lettered-list > li::before {
	content: counter(lettered, upper-alpha);
	position: absolute;
	left: 0;
	top: 11px;
	font-family: var(--font-courier);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--stamp);
	line-height: 1.7;
}

.lettered__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.lettered__title,
.is-style-journal-lettered-list > li > strong:first-child {
	display: block;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
}

.lettered__text {
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink-soft);
}

.is-style-journal-lettered-list > li {
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Dashed box
   -------------------------------------------------------------------------- */

.page-dashed__hand {
	flex: 0 0 140px;
}

.is-style-journal-dashed {
	border: 1px dashed var(--accent);
	padding: 18px 20px;
	display: flex;
	gap: 18px;
	align-items: flex-start;
	flex-wrap: wrap;
}

/* See post.css: core/group's inner container is made transparent to layout so
   the statement and the aside sit side by side rather than stacked. */
.is-style-journal-dashed > .wp-block-group__inner-container {
	display: contents;
}

/* The statement takes the room; the aside keeps its 140px cell. Scoped off
   .j-hand so the handwriting is not dragged into Courier, and a descendant
   combinator rather than a child one so it reaches through core/group's inner
   container — see post.css. */
.is-style-journal-dashed p:not(.j-hand) {
	margin: 0;
	flex: 1;
	font-family: var(--font-courier);
	font-size: 14px;
	line-height: 1.85;
	color: var(--ink);
}

.is-style-journal-dashed .j-hand {
	margin: 0;
	flex: 0 0 140px;
}

/* --------------------------------------------------------------------------
   The CTA row — a primary button and a Courier text link
   -------------------------------------------------------------------------- */

.wp-block-buttons {
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
}

.wp-block-button__link {
	background: var(--accent);
	color: var(--on-accent);
	font-size: 15px;
	font-weight: 700;
	padding: 12px 22px;
	border-radius: var(--radius);
	text-decoration: none;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	background: var(--accent-hover);
	color: var(--on-accent);
	text-decoration: underline;
}

.is-style-outline .wp-block-button__link {
	background: none;
	border: 0;
	padding: 0;
	color: var(--ink-soft);
	font-family: var(--font-courier);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
}

.is-style-outline .wp-block-button__link:hover,
.is-style-outline .wp-block-button__link:focus-visible {
	background: none;
	color: var(--ink);
}

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

@media (max-width: 1080px) {
	.is-style-journal-dashed {
		flex-direction: column;
	}

	.page-dashed {
		flex-direction: column;
	}

	.page-dashed__hand {
		flex: 0 0 auto;
	}
}

@media (max-width: 640px) {
	.page-head {
		padding-top: 26px;
	}

	.page-head__top {
		flex-direction: column;
		gap: 16px;
	}

	.meta-cells {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 20px 0 18px;
	}
}