/*
 * SECTION STYLE: NOTE FROM THE FOUNDER.
 *
 * The design: a light panel (#f9f9f9) with the small label, the title on
 * a yellow mark, the big heading, the note, the signature at the bottom
 * left and the portrait at the bottom right.
 *
 * Measures from the Figma frame (1440):
 *   71   the label          91   the title on the yellow mark
 *   178  the heading        279  the first paragraph
 *   910  the signature      967  the signature caption
 *   The portrait sits at the bottom right of the panel.
 */

/* The Figma panel is not centred: it starts at x = 81 and ends at
 * x = 1163 on the 1440 frame, so the right margin is deliberately
 * wider (277 px) than the left one. The 74 px below the panel is the
 * gap before the footer. */
.aitio-founder {
	background: var(--aitio-page);
	padding: 80px 0 74px;
}

.aitio-founder__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	max-width: var(--aitio-col-panel);
	min-height: 1014px;
	padding: 65px 34px 0;
	background: var(--aitio-white);
}

.aitio-founder__text {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1;
	flex-direction: column;
	/* The note stays on the left, clear of the portrait. The portrait
	 * starts at about 618 px from the panel's left edge, so the text
	 * column must end before that. */
	max-width: 540px;
}

/* ---- the small label and the title on the yellow mark --------------- */

.aitio-founder__label {
	margin: 0;
	color: var(--aitio-dark);
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
	letter-spacing: 0;
	text-transform: uppercase;
}

.aitio-founder__title {
	margin: 0 0 59px;
}

.aitio-founder__mark {
	display: inline-block;
	padding: 0 8px 0 4px;
	background: var(--aitio-yellow);
	color: var(--aitio-dark);
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
	letter-spacing: 0;
	text-transform: uppercase;
}

/* ---- the heading ---------------------------------------------------- */

.aitio-founder__heading {
	margin: 0 0 60px;
	max-width: 560px;
	color: var(--aitio-ink);
	font-family: var(--aitio-font);
	font-size: 36px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.03em;
}

/* ---- the note ------------------------------------------------------- */

.aitio-founder__body {
	color: var(--aitio-ink);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0;
}

.aitio-founder__body p {
	margin: 0 0 24px;
}

.aitio-founder__body p:last-child {
	margin-bottom: 0;
}

/* ---- the signature -------------------------------------------------- */

.aitio-founder__bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	padding-top: 48px;
}

.aitio-founder__sign {
	padding: 0 0 34px;
}

.aitio-founder__signature {
	display: block;
}

.aitio-founder__signature img {
	display: block;
	width: 195px;
	/* The space is reserved, so the page never jumps while the
	 * picture is still loading. */
	aspect-ratio: 195 / 56;
	height: auto;
}

.aitio-founder__signer {
	display: block;
	margin-top: 13px;
	color: var(--aitio-dark);
	font-size: 11px;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: 0;
}

/* ---- the portrait ---------------------------------------------------- */

.aitio-founder__portrait {
	flex-shrink: 0;
	width: 42.62%;
}

.aitio-founder__photo {
	display: block;
	width: 100%;
	/* The Figma portrait frame is 461 x 524. The photo is cropped
	 * inside it, not stretched. */
	aspect-ratio: 461 / 524;
	height: auto;
	object-fit: cover;
	object-position: center top;
}

/* ---- smaller screens -------------------------------------------------- */

@media (max-width: 1100px) {

	.aitio-founder {
		padding: 56px 0 0;
	}

	.aitio-founder__panel {
		min-height: 0;
		padding: 48px 28px 0;
	}

	.aitio-founder__portrait {
		width: min(301px, 60%);
		margin: 0;
	}

	.aitio-founder__sign {
		padding-bottom: 40px;
	}
}

@media (max-width: 640px) {

	.aitio-founder {
		padding: 32px 0 0;
	}

	.aitio-founder__panel {
		padding: 36px 20px 0;
	}

	.aitio-founder__heading {
		font-size: 25px;
	}

	.aitio-founder__text {
		max-width: 100%;
	}
}