/* ==========================================================================
   Celia Noire — The Founder
   Same underlying grid as About the Studio directly above it (identical
   grid-template-columns formula) so the text column lands exactly under
   "Vision, edited." at any viewport width, by construction rather than a
   hand-tuned approximation. The portrait itself stays capped to an
   editorial-but-contained width — narrower than About's own full-bleed,
   cover-cropped photo — displayed at its natural, uncropped 4:5 ratio.
   ========================================================================== */

.cn-founder__grid {
	max-width: none;
	margin-left: 0;
	/* Cancels .cn-shell's own padding-inline — that padding would otherwise
	   shrink the 46% column's basis below the full viewport width About's
	   identical column is computed against, throwing off the match. */
	padding-inline: 0;
	display: grid;
	/* Identical to .cn-about__grid's column formula — this is what makes the
	   text column land exactly under About's title at every width, not just
	   at one calibrated viewport. */
	grid-template-columns: minmax(280px, 46%) 1fr;
	align-items: center;
	padding-block: clamp(3.5rem, 6vw, 6.5rem);
	/* No padding-inline and no column-gap, deliberately — .cn-about__grid has
	   neither either; both would shift the 46% column's basis or the text's
	   start position away from an exact match with About. The space before
	   the text (image-to-text gap) comes entirely from .cn-founder__copy's
	   own left padding below, exactly mirroring .cn-about__copy. */
}

.cn-founder__media {
	align-self: center;
}

.cn-founder__image {
	display: block;
	/* Capped well short of the 46% column it sits in — a major editorial
	   portrait, not full-bleed like About's own photo. ~410px at a 1440px
	   desktop viewport. */
	width: clamp(340px, 28vw, 430px);
	height: auto;
	/* Pushes the image to the right side of its 46% column — since that
	   column's right edge sits at the exact same viewport position as
	   About's full-bleed image (identical grid formula, both sections), this
	   is what makes the two images' right edges line up. */
	margin-left: auto;
}

.cn-founder__copy {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	/* Box-sizing is border-box, so padding-left eats into max-width — adding
	   it back here matches .cn-about__copy-inner's plain 34rem cap (that
	   element carries no padding of its own), which is what lines this
	   text's right edge up with "Vision, edited." above it. */
	max-width: calc(clamp(2rem, 6vw, 5rem) + 34rem);
	/* Matches .cn-about__copy's own left padding exactly — this is what
	   makes the text land precisely under "Vision, edited." at any width,
	   and it doubles as the generous, controlled image-to-text gap. */
	padding-left: clamp(2rem, 6vw, 5rem);
}

.cn-founder__name {
	font-size: var(--cn-text-h2);
}

.cn-founder__title {
	margin-top: -0.3rem;
	font-family: var(--cn-font-body);
	font-size: var(--cn-text-xs);
	font-weight: 500;
	letter-spacing: var(--cn-tracking-wider);
	text-transform: uppercase;
	color: var(--cn-warm-gray);
}

.cn-founder__body {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	margin-top: 0.4rem;
	color: var(--cn-fg);
	font-size: 1.0625em;
	line-height: 1.85;
}

.cn-founder__location {
	margin-top: 0.6rem;
	font-size: var(--cn-text-xs);
	letter-spacing: 0.02em;
	color: var(--cn-warm-gray);
}

/* --------------------------------------------------------------------------
   Below ~900px: stack, photo first — DOM order already puts the eyebrow,
   name, title, body and location in the requested sequence after it.
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
	.cn-founder__grid {
		grid-template-columns: 1fr;
		row-gap: clamp(2rem, 6vw, 3rem);
		padding-block: clamp(2.5rem, 7vw, 5rem);
		/* Unlike desktop, mobile/tablet needs the standard gutter inset —
		   there's no second column left to derive it from. */
		padding-inline: var(--cn-gutter);
	}

	.cn-founder__image {
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: 65vh;
		margin-inline: auto;
	}

	.cn-founder__copy {
		max-width: none;
		padding-left: 0;
	}
}