/*
 * Our Story — editorial longform page.
 * Enqueued on template-our-story.php only.
 * All values use existing design tokens — no new variables.
 */

/*--------------------------------------------------------------
# Page wrapper
--------------------------------------------------------------*/

.page-our-story {
	background-color: var(--bone);
}

/*--------------------------------------------------------------
# Page header: H1, dek, gold rule
--------------------------------------------------------------*/

.our-story-header {
	padding: var(--space-9) var(--space-5) var(--space-6);
	text-align: center;
	max-width: var(--prose-max);
	margin-inline: auto;
}

.our-story-header .page-eyebrow {
	display: block;
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mute);
	margin-bottom: var(--space-3);
}

.our-story-title {
	font-family: 'Fraunces', Georgia, serif;
	font-size: clamp(var(--text-3xl), 7vw, var(--text-4xl));
	font-weight: 700;
	line-height: 1.05;
	color: var(--ink);
	margin: 0 0 var(--space-3);
}

.our-story-dek {
	font-family: 'Fraunces', Georgia, serif;
	font-size: clamp(var(--text-xl), 3.5vw, var(--text-2xl));
	font-weight: 400;
	font-style: italic;
	color: var(--mute);
	line-height: 1.4;
	margin: 0 0 var(--space-5);
}

.our-story-rule {
	width: 60px;
	height: 2px;
	background-color: var(--gold);
	border: none;
	margin: 0 auto;
}

/*--------------------------------------------------------------
# Header photo slot
--------------------------------------------------------------*/

.our-story-header-photo {
	max-width: 860px;
	margin-inline: auto;
	padding: var(--space-6) var(--space-5) 0;
}

.our-story-header-photo figure {
	margin: 0;
}

.our-story-header-photo .placeholder-image {
	aspect-ratio: 16 / 7;
	min-height: 0;
}

.our-story-header-photo img {
	width: 100%;
	height: auto;
	display: block;
}

.our-story-header-photo figcaption {
	font-size: var(--text-xs);
	color: var(--mute);
	font-style: italic;
	text-align: center;
	margin-top: var(--space-2);
}

/*--------------------------------------------------------------
# Main prose container
--------------------------------------------------------------*/

.our-story-content {
	max-width: var(--prose-max);
	margin-inline: auto;
	padding: var(--space-7) var(--space-5) var(--space-8);
}

/*--------------------------------------------------------------
# Prose typography — slightly more literary than site default
--------------------------------------------------------------*/

.our-story-prose {
	font-size: var(--text-lg);
	line-height: 1.78;
	color: var(--ink);
}

.our-story-prose p {
	margin: 0 0 var(--space-4);
}

.our-story-prose p:last-child {
	margin-bottom: 0;
}

/*--------------------------------------------------------------
# Drop cap on the opening paragraph
--------------------------------------------------------------*/

.drop-cap::first-letter {
	float: left;
	font-family: 'Fraunces', Georgia, serif;
	font-size: 5.2rem;
	font-weight: 700;
	line-height: 0.78;
	color: var(--gold);
	margin-right: 0.1em;
	margin-top: 0.05em;
}

/*--------------------------------------------------------------
# Section headings
--------------------------------------------------------------*/

.our-story-prose h2 {
	font-family: 'Fraunces', Georgia, serif;
	font-size: clamp(var(--text-xl), 3.2vw, var(--text-2xl));
	font-weight: 700;
	line-height: 1.2;
	color: var(--ink);
	margin: var(--space-8) 0 var(--space-4);
	padding-top: var(--space-6);
	border-top: 1px solid var(--rule);
}

/*--------------------------------------------------------------
# "Forty years later" — the story's pivot paragraph
# Pulled slightly left with a gold border to mark the turn
--------------------------------------------------------------*/

.our-story-pivot {
	font-family: 'Fraunces', Georgia, serif;
	font-size: clamp(var(--text-lg), 2.5vw, var(--text-xl));
	font-style: italic;
	font-weight: 400;
	line-height: 1.55;
	color: var(--ink);
	margin: var(--space-6) 0 !important;
	padding-left: var(--space-4);
	border-left: 3px solid var(--gold);
}

/*--------------------------------------------------------------
# Float photo slot — portrait, beside prose
--------------------------------------------------------------*/

.our-story-photo-float {
	float: right;
	width: 280px;
	margin: var(--space-1) 0 var(--space-4) var(--space-6);
	clear: right;
}

.our-story-photo-float .placeholder-image {
	aspect-ratio: 3 / 4;
	min-height: 0;
}

.our-story-photo-float img {
	width: 100%;
	height: auto;
	display: block;
}

.our-story-photo-float figcaption {
	font-size: var(--text-xs);
	color: var(--mute);
	font-style: italic;
	margin-top: var(--space-2);
}

/*--------------------------------------------------------------
# Wide photo slot — landscape, full prose-column width
--------------------------------------------------------------*/

.our-story-photo-wide {
	margin: var(--space-6) 0;
	clear: both;
}

.our-story-photo-wide .placeholder-image {
	aspect-ratio: 16 / 7;
	min-height: 0;
}

.our-story-photo-wide img {
	width: 100%;
	height: auto;
	display: block;
}

.our-story-photo-wide figcaption {
	font-size: var(--text-xs);
	color: var(--mute);
	font-style: italic;
	text-align: center;
	margin-top: var(--space-2);
}

/*--------------------------------------------------------------
# Closing typographic moment
# The last line of the copy, treated as a standalone visual statement
--------------------------------------------------------------*/

.our-story-close {
	text-align: center;
	padding: var(--space-9) var(--space-5);
	background-color: var(--paper);
	border-top: 1px solid var(--rule);
}

.our-story-close blockquote {
	max-width: 680px;
	margin-inline: auto;
	padding: 0;
	border: none;
}

.our-story-close .close-quote {
	font-family: 'Fraunces', Georgia, serif;
	font-size: clamp(var(--text-xl), 4vw, var(--text-3xl));
	font-style: italic;
	font-weight: 400;
	color: var(--wine);
	line-height: 1.35;
	margin: 0;
}

.our-story-close .close-attribution {
	display: block;
	font-size: var(--text-sm);
	color: var(--mute);
	margin-top: var(--space-5);
	letter-spacing: 0.03em;
}

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

@media ( max-width: 760px ) {
	.our-story-header {
		padding: var(--space-7) var(--space-4) var(--space-5);
	}

	.our-story-header-photo {
		padding-left: var(--space-4);
		padding-right: var(--space-4);
	}

	.our-story-content {
		padding: var(--space-6) var(--space-4) var(--space-7);
	}

	/* Float becomes block on mobile — reading width too narrow to share */
	.our-story-photo-float {
		float: none;
		width: 100%;
		margin: 0 0 var(--space-5);
	}

	.our-story-photo-float .placeholder-image {
		aspect-ratio: 4 / 3;
	}

	.our-story-prose h2 {
		margin-top: var(--space-7);
		padding-top: var(--space-5);
		font-size: var(--text-xl);
	}

	/* Drop cap — rein in slightly at small sizes */
	.drop-cap::first-letter {
		font-size: 3.8rem;
		line-height: 0.82;
	}

	.our-story-pivot {
		font-size: var(--text-base);
		padding-left: var(--space-3);
		margin: var(--space-5) 0 !important;
	}

	.our-story-close {
		padding: var(--space-7) var(--space-4);
	}

	.our-story-close .close-quote {
		font-size: var(--text-xl);
	}
}