/**
 * "Meet Herdine" page (/meet-herdine/) body — editorial About layout
 * inspired by herdine.com/about's body composition, rebuilt with
 * Mainsail's own typography/colors/container conventions per
 * MAM-Herdine-About-Body-Gutenberg-Architecture.md. Only enqueued on
 * this page. The page's own hero banner and the sitewide "Connect
 * With Us" footer are untouched — this styles the body content only.
 *
 * Corrected structure (found on live audit — the reference is NOT one
 * intro + one 2-image collage + one closing bio, as first built):
 * it's two near-identical "chapters", each its own full-bleed
 * textured section containing one oversized decorative "H" paired
 * side-by-side with ONE photo (chapter 2 mirrors chapter 1 — image
 * left/H right instead of H left/image right), with that chapter's
 * own biography paragraphs below the pair. The two supplied
 * background-1 / background-1-1 PNGs are each one chapter's full-
 * width section background, not a small per-photo accent.
 *
 * Fonts: same convention already established for the agent/contact
 * pages — "Mulish" for body copy, "Playfair Display" for display
 * type, both falling back to the site's own global font variables
 * (never Herdine's original fonts).
 */

.mainsail-about {
	max-width: 1100px;
	margin: 0 auto;
	padding: 64px 20px 0;
	box-sizing: border-box;
}

.mainsail-about__intro {
	margin-bottom: 24px;
}

.mainsail-about__eyebrow {
	margin: 0;
	font-family: "Montserrat", Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mainsail-color-ink-muted, rgba(0, 0, 0, 0.6));
}

.mainsail-about__heading {
	margin: 4px 0 0;
	font-family: "Poiret One", "Montserrat", Arial, sans-serif;
	font-size: clamp(64px, 14vw, 160px);
	font-weight: 400;
	line-height: 0.9;
	color: var(--mainsail-color-ink, #000000);
}

/* ----------------------------------------------------------------------
   Chapter — one full-bleed textured section (breaks out of the page's
   own max-width the same way this project already breaks other
   elements full-width: 100vw + negative-margin recentring) containing
   one H+photo pair and that chapter's own biography paragraphs.
   ---------------------------------------------------------------------- */

.mainsail-about__chapter {
	position: relative;
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
	padding: 72px 20px;
	background-repeat: no-repeat;
	background-size: min(640px, 46vw) auto;
	box-sizing: border-box;
	overflow: hidden;
}

.mainsail-about__chapter--a {
	margin-top: 40px;
	background-image: url("/wp-content/uploads/2026/09/background-1-e1620143124674.png");
	background-position: left 5% top;
}

.mainsail-about__chapter--b {
	margin-top: 24px;
	background-image: url("/wp-content/uploads/2026/09/background-1-1-e1620152130296.png");
	background-position: right 5% top;
}

.mainsail-about__chapter-inner {
	max-width: 1060px;
	margin: 0 auto;
}

/* H + photo row — side by side, chapter B mirrors chapter A. */
.mainsail-about__chapter-row {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 32px;
}

.mainsail-about__chapter-row--reverse {
	flex-direction: row-reverse;
}

/* ----------------------------------------------------------------------
   Biography copy — narrow editorial measure (~65ch), not full-width.
   ---------------------------------------------------------------------- */

.mainsail-about__story {
	max-width: 640px;
}

.mainsail-about__story p {
	margin: 0 0 22px;
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-size: 17px;
	line-height: 1.85;
	color: var(--mainsail-color-ink-muted, rgba(0, 0, 0, 0.75));
}

.mainsail-about__story p:last-child {
	margin-bottom: 0;
}

.mainsail-about__quote em {
	font-style: italic;
}

/* ----------------------------------------------------------------------
   Photo — no card shadows/rounded corners/gradients, matching the
   reference's plain rectangular treatment.
   ---------------------------------------------------------------------- */

.mainsail-about__media-item {
	flex: 0 0 auto;
	width: min(340px, 42vw);
}

.mainsail-about__media-item img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

/* ----------------------------------------------------------------------
   Decorative oversized initial — text, not an image; one reusable
   style for every occurrence.
   ---------------------------------------------------------------------- */

.mainsail-about__initial {
	flex: 1 1 auto;
	display: block;
	font-family: "Poiret One", "Montserrat", Arial, sans-serif;
	font-size: clamp(120px, 24vw, 320px);
	font-weight: 400;
	line-height: 1;
	text-align: center;
	color: var(--mainsail-color-ink, #000000);
	opacity: 0.08;
	user-select: none;
}

/* ----------------------------------------------------------------------
   Scroll-entry reveal — progressive enhancement only. Content is
   fully visible without JS/CSS support (see the plain, non-reveal
   default state below); .mainsail-about__reveal only takes effect
   once mainsail-about-reveal.js has confirmed IntersectionObserver
   support and toggles .is-visible.
   ---------------------------------------------------------------------- */

.js-reveal-ready .mainsail-about__reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-reveal-ready .mainsail-about__reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.js-reveal-ready .mainsail-about__reveal--image {
	transform: translateY(30px) scale(0.985);
}

.js-reveal-ready .mainsail-about__reveal--image.is-visible {
	transform: translateY(0) scale(1);
}

.js-reveal-ready .mainsail-about__reveal--initial {
	transition-duration: 0.9s;
}

@media (prefers-reduced-motion: reduce) {
	.mainsail-about__reveal,
	.mainsail-about__reveal.is-visible {
		opacity: 1;
		transform: none;
		transition: none;
		animation: none;
	}
}

@media (max-width: 900px) {
	.mainsail-about__chapter {
		background-size: min(480px, 60vw) auto;
	}

	.mainsail-about__initial {
		font-size: clamp(100px, 30vw, 220px);
	}
}

@media (max-width: 600px) {
	.mainsail-about {
		padding: 48px 20px 0;
	}

	.mainsail-about__chapter {
		padding: 48px 16px;
	}

	.mainsail-about__chapter-row,
	.mainsail-about__chapter-row--reverse {
		flex-direction: column;
		gap: 16px;
	}

	.mainsail-about__media-item {
		width: 68%;
		max-width: 260px;
	}

	.mainsail-about__initial {
		font-size: clamp(90px, 34vw, 160px);
	}
}