/* ==========================================================================
   POTR About (I'm Pauline) + stats band
   1u = 1% of block width (capped at 14.4px). Numbers = mockup px at 1366 / 13.66.
   ========================================================================== */

.potr-about:not(#potr){
	--u: min(1cqw, 14.4px);
	--potr-font-display: "Kudryashev Display", "Kudryashev Display Contrast", "POTR Display", "Bodoni Moda", "Didot", "Bodoni 72", "Playfair Display", Georgia, serif;
	--potr-font-body: "POTR Sans", "Sofia Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	container-type: inline-size;
	container-name: potr-about;
	box-sizing: border-box;
	position: relative;
	margin-block: 0;
	max-width: none;
	color: var(--potr-ab-text, #000);
}

.potr-about *:not(#potr),
.potr-about *:not(#potr)::before,
.potr-about *:not(#potr)::after{
	box-sizing: border-box;
}

.potr-about.potr-about--breakout:not(#potr){
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ---------- Main area: soft peach background + 2-column grid ---------- */

.potr-about__main:not(#potr){
	/* Desktop values (unitless, x --u) */
	--card-w: 23.35;   /* photo card width                */
	--card-h: 40.22;   /* photo height inside the card    */
	--card-pad: 0.73;  /* white frame around the photo    */
	--card-up: 2.49;   /* how far the card rises above the band */
	--pl: 14.7;        /* left padding                    */
	--pr: 10;          /* right padding                   */
	--col-gap: 3.37;
	--text-w: 48.3;    /* max text column width           */
	--pt: 3.71;        /* text column top padding         */
	--pb: 3.8;         /* bottom padding                  */

	position: relative;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.34) 100%),
		linear-gradient(90deg, var(--potr-ab-bg-left, #fff2eb) 0%, var(--potr-ab-bg-right, #fffefd) 100%);
}

.potr-about__grid:not(#potr){
	display: grid;
	grid-template-columns: calc(var(--u) * var(--card-w)) minmax(0, calc(var(--u) * var(--text-w)));
	column-gap: calc(var(--u) * var(--col-gap));
	align-items: start;
	max-width: calc(var(--u) * 100);
	margin-inline: auto;
	padding: 0 calc(var(--u) * var(--pr)) calc(var(--u) * var(--pb)) calc(var(--u) * var(--pl));
}

/* ---------- Photo card ---------- */

.potr-about__card:not(#potr){
	margin: calc(var(--u) * var(--card-up) * -1) 0 0;
	padding: calc(var(--u) * var(--card-pad));
	background: #fff;
	border: 1px solid rgba(40, 30, 25, 0.07);
	line-height: 0;
	position: relative;
	z-index: 1; /* sits above the white "Featured In" block it overlaps */
}

.potr-about__photo:not(#potr){
	display: block;
	width: 100%;
	height: calc(var(--u) * var(--card-h));
	object-fit: cover;
	object-position: center;
	margin: 0;
	max-width: none;
}

/* ---------- Text column ---------- */

.potr-about__text:not(#potr){
	padding-top: calc(var(--u) * var(--pt));
	min-width: 0;
}

.potr-about__eyebrow:not(#potr){
	margin: 0;
	font-family: var(--potr-font-display);
	font-weight: 400;
	font-variation-settings: "opsz" 24;
	font-optical-sizing: none;
	font-size: calc(var(--u) * 1.85);
	line-height: 1.2;
	letter-spacing: 0;
}

.potr-about__heading:not(#potr){
	margin: calc(var(--u) * 1.57) 0 0;
	padding: 0;
	font-family: var(--potr-font-display);
	font-weight: 400;
	font-variation-settings: "opsz" 24;
	font-optical-sizing: none;
	font-size: calc(var(--u) * 4.57);
	line-height: 1.058;
	letter-spacing: calc(0.09em * var(--potr-ls-k, 1));
	text-transform: uppercase;
	color: inherit;
}

.potr-about__line:not(#potr){
	display: block;
}

.potr-about__bio:not(#potr){
	margin: calc(var(--u) * 1.74) 0 0;
	max-width: calc(var(--u) * var(--text-w));
	font-family: var(--potr-font-body);
	font-weight: 300;
	font-size: max(16px, calc(var(--u) * 1.56));
	line-height: 1.36;
	letter-spacing: 0;
	color: inherit;
}

.potr-about__bio a:not(#potr){
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.potr-about__button:not(#potr){
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: calc(var(--u) * 3.53);
	min-height: calc(var(--u) * 4.25);
	padding: 0 calc(var(--u) * 4.06);
	border-radius: 999px;
	background: var(--potr-ab-btn, #ad8330);
	color: var(--potr-ab-btn-text, #fff);
	font-family: var(--potr-font-body);
	font-weight: 700;
	font-size: max(16px, calc(var(--u) * 1.72));
	line-height: 1;
	text-decoration: none;
	transition: filter 0.15s ease;
}

.potr-about__button:hover:not(#potr){
	filter: brightness(1.08);
}

.potr-about__button:focus-visible:not(#potr){
	outline: 2px solid var(--potr-ab-btn, #ad8330);
	outline-offset: 3px;
}

/* ---------- Dark stats band ---------- */

.potr-about__stats:not(#potr){
	--stat-w: 18.7;
	--st-pt: 2.83;
	--st-pb: 2.7;

	background: var(--potr-ab-stats-bg, #21180e);
	color: var(--potr-ab-stats-text, #fff);
	padding: calc(var(--u) * var(--st-pt)) calc(var(--u) * 2) calc(var(--u) * var(--st-pb));
}

.potr-about__stats-list:not(#potr){
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: calc(var(--u) * 100);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.potr-about__stat:not(#potr){
	flex: 0 0 calc(var(--u) * var(--stat-w));
	margin: 0;
	padding: 0;
	text-align: center;
}

.potr-about__stat-value:not(#potr){
	display: block;
	font-family: var(--potr-font-display);
	font-weight: 400;
	font-variation-settings: "opsz" 24;
	font-optical-sizing: none;
	font-size: calc(var(--u) * 3.3);
	line-height: 1.1;
	letter-spacing: calc(0.04em * var(--potr-ls-k, 1));
}

.potr-about__stat-label:not(#potr){
	display: block;
	margin-top: calc(var(--u) * 0.49);
	font-family: var(--potr-font-body);
	font-weight: 300;
	font-size: max(13px, calc(var(--u) * 1.2));
	line-height: 1.2;
}

/* ==========================================================================
   Mobile layout (no mobile mockup provided): stacked, photo on top, 2x2 stats.
   ========================================================================== */

@container potr-about (max-width: 559px) {
	.potr-about__main:not(#potr){
		--card-w: 74;
		--card-h: 120;
		--card-pad: 2.6;
		--card-up: 7;
		--pt: 8;
		--pb: 11;
	}

	.potr-about__grid:not(#potr){
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
		justify-items: center;
		padding: 0 calc(var(--u) * 7) calc(var(--u) * var(--pb));
	}

	.potr-about__card:not(#potr){
		width: calc(var(--u) * var(--card-w));
	}

	.potr-about__text:not(#potr){
		width: 100%;
		padding-top: calc(var(--u) * var(--pt));
	}

	.potr-about__eyebrow:not(#potr){
		font-size: calc(var(--u) * 6.4);
	}

	.potr-about__heading:not(#potr){
		font-size: calc(var(--u) * 14.2);
		margin-top: calc(var(--u) * 3);
	}

	.potr-about__bio:not(#potr){
		font-size: max(17px, calc(var(--u) * 4.6));
		line-height: 1.5;
		margin-top: calc(var(--u) * 6);
		max-width: none;
	}

	.potr-about__button:not(#potr){
		margin-top: calc(var(--u) * 8);
		min-height: calc(var(--u) * 14);
		padding: 0 calc(var(--u) * 12);
		font-size: max(17px, calc(var(--u) * 4.8));
	}

	.potr-about__stats:not(#potr){
		--stat-w: 45;
		--st-pt: 10;
		--st-pb: 8;
		padding-inline: calc(var(--u) * 4);
	}

	.potr-about__stat:not(#potr){
		margin-bottom: calc(var(--u) * 6);
	}

	.potr-about__stat-value:not(#potr){
		font-size: calc(var(--u) * 10.4);
	}

	.potr-about__stat-label:not(#potr){
		font-size: max(14px, calc(var(--u) * 3.6));
		margin-top: calc(var(--u) * 1.5);
	}
}