/**
 * Single essay (post) — editorial reading layout.
 * Spec: docs/LAYOUT_AND_VISUAL_DIRECTION.md §4.6
 */

.studio-essay {
	background-color: var(--studio-paper, #faf9f7);
}

/* ─── Header band (light — not cluster hero) ───────────────── */

.studio-essay__header {
	border-bottom: 1px solid rgba(14, 26, 31, 0.08);
	max-width: 45rem;
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 1.5rem);
	padding-inline-end: var(--wp--style--root--padding-right, 1.5rem);
}

.studio-essay__crumb {
	font-family: var(--wp--preset--font-family--sans, 'Source Sans 3', sans-serif);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 0 0 var(--wp--preset--spacing--30, 1rem) !important;
}

.studio-essay__crumb a {
	color: var(--studio-teal, #2c5f6e);
	text-decoration: none;
}

.studio-essay__crumb a:hover {
	text-decoration: underline;
}

.studio-essay__title,
.studio-essay__title.wp-block-post-title {
	font-family: var(--wp--preset--font-family--serif, Fraunces, serif) !important;
	font-size: clamp(2rem, 4.5vw, 2.75rem) !important;
	font-weight: 300 !important;
	line-height: 1.12 !important;
	color: var(--studio-ink, #0e1a1f) !important;
	margin: 0 0 var(--wp--preset--spacing--30, 1rem) !important;
	max-width: 22ch;
}

.studio-essay__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.75rem;
	margin-bottom: var(--wp--preset--spacing--40, 1.5rem);
}

.studio-essay__date,
.studio-essay__date.wp-block-post-date {
	font-family: var(--wp--preset--font-family--sans, 'Source Sans 3', sans-serif);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted, #6b6560);
	margin: 0 !important;
}

.studio-essay__tags,
.studio-essay__tags.wp-block-post-terms {
	font-family: var(--wp--preset--font-family--sans, 'Source Sans 3', sans-serif);
	font-size: 0.8rem;
	margin: 0 !important;
}

.studio-essay__tags a {
	color: var(--studio-teal, #2c5f6e);
	text-decoration: none;
	font-weight: 600;
}

.studio-essay__tags a:hover {
	text-decoration: underline;
}

.studio-essay__lede,
.studio-essay__lede.wp-block-post-excerpt {
	font-family: var(--wp--preset--font-family--serif, Fraunces, serif) !important;
	font-size: 1.2rem !important;
	line-height: 1.5 !important;
	color: var(--wp--preset--color--muted, #6b6560) !important;
	margin: 0 !important;
	max-width: 38rem;
}

/* ─── Prose body (~720px) ──────────────────────────────────── */

.studio-essay__prose {
	padding-top: var(--wp--preset--spacing--50, 2.5rem);
	padding-bottom: var(--wp--preset--spacing--50, 2.5rem);
}

.studio-essay__prose .wp-block-post-content,
.studio-essay__prose .entry-content {
	max-width: 45rem;
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 1.5rem);
	padding-inline-end: var(--wp--style--root--padding-right, 1.5rem);
}

.studio-essay__prose p {
	font-family: var(--wp--preset--font-family--sans, 'Source Sans 3', sans-serif);
	font-size: 1.125rem;
	line-height: 1.55;
	color: var(--wp--preset--color--contrast, #1a1a1a);
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--40, 1.5rem);
}

.studio-essay__prose h2 {
	font-family: var(--wp--preset--font-family--serif, Fraunces, serif);
	font-size: clamp(1.35rem, 3vw, 1.65rem);
	font-weight: 400;
	line-height: 1.2;
	color: var(--studio-ink, #0e1a1f);
	margin-top: var(--wp--preset--spacing--55, 3rem);
	margin-bottom: var(--wp--preset--spacing--30, 1rem);
	padding-top: var(--wp--preset--spacing--30, 1rem);
	border-top: 1px solid rgba(14, 26, 31, 0.06);
	max-width: 28ch;
}

.studio-essay__prose h2:first-child {
	border-top: none;
	padding-top: 0;
	margin-top: 0;
}

.studio-essay__prose h2 em,
.studio-essay__prose h3 em {
	font-style: italic;
	color: var(--wp--preset--color--accent, #2c5f6e);
}

.studio-essay__prose h3 {
	font-family: var(--wp--preset--font-family--serif, Fraunces, serif);
	font-size: 1.2rem;
	margin-top: var(--wp--preset--spacing--45, 2rem);
	margin-bottom: var(--wp--preset--spacing--20, 0.75rem);
}

.studio-essay__prose a {
	color: var(--studio-teal, #2c5f6e);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.studio-essay__prose a:hover {
	color: var(--studio-ink, #0e1a1f);
}

.studio-essay__prose strong {
	font-weight: 600;
	color: var(--studio-ink, #0e1a1f);
}

.studio-essay__prose ul,
.studio-essay__prose ol {
	margin: 0 0 var(--wp--preset--spacing--40, 1.5rem);
	padding-left: 1.35rem;
	font-size: 1.125rem;
	line-height: 1.55;
}

.studio-essay__prose li {
	margin-bottom: 0.5rem;
}

.studio-essay__prose blockquote,
.studio-essay__prose .wp-block-quote {
	font-family: var(--wp--preset--font-family--serif, Fraunces, serif);
	font-size: 1.2rem;
	line-height: 1.45;
	font-style: italic;
	color: var(--studio-teal, #2c5f6e);
	border-left: 3px solid var(--studio-teal, #2c5f6e);
	margin: var(--wp--preset--spacing--45, 2rem) 0;
	padding: 0.25rem 0 0.25rem var(--wp--preset--spacing--40, 1.5rem);
}

/* Podcast / related lines at end of body */
.studio-essay__prose p:last-child {
	font-size: 0.95rem;
	color: var(--wp--preset--color--muted, #6b6560);
	margin-top: var(--wp--preset--spacing--50, 2.5rem);
	padding-top: var(--wp--preset--spacing--30, 1rem);
	border-top: 1px solid rgba(14, 26, 31, 0.06);
}

/* ─── Footer band ────────────────────────────────────────── */

.studio-essay__footer {
	max-width: 45rem;
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 1.5rem);
	padding-inline-end: var(--wp--style--root--padding-right, 1.5rem);
}

.studio-essay__rule {
	margin: 0 0 var(--wp--preset--spacing--40, 1.5rem) !important;
	opacity: 0.35;
}

.studio-essay__back {
	font-family: var(--wp--preset--font-family--sans, 'Source Sans 3', sans-serif);
	font-size: var(--wp--preset--font-size--small, 0.95rem);
	font-weight: 600;
	margin: 0 !important;
}

.studio-essay__back a {
	color: var(--studio-teal, #2c5f6e);
	text-decoration: none;
}

.studio-essay__back a:hover {
	text-decoration: underline;
}

/* Related project callout — optional block in content */
.studio-essay__prose .studio-essay-related {
	background: var(--studio-cream, #f3efe8);
	border-radius: 4px;
	padding: var(--wp--preset--spacing--30, 1rem) var(--wp--preset--spacing--40, 1.5rem);
	margin: var(--wp--preset--spacing--50, 2.5rem) 0;
	font-size: 0.95rem;
}

@media (max-width: 640px) {
	.studio-essay__title,
	.studio-essay__title.wp-block-post-title {
		max-width: none;
	}

	.studio-essay__prose h2 {
		max-width: none;
	}
}