/**
 * Variant CSS: about--manifesto-quote-large
 * Layer 2 - Path B universal ABOUT variant (one oversized mission statement).
 *
 * Concept: a single VERY large centered statement (the brand's belief/mission)
 * that fills the frame, with a small kicker above, a one-line follow-up below
 * and a compact signature (tiny avatar + name + role). Pure typography - no
 * cards, no numerals - so it reads as a manifesto, distinct from the 3-principle
 * roman-numerals grid and from the medium founder-portrait-quote.
 *
 * Surface contract: section sits on --background. The statement is the focal
 * element; an <em> inside it lifts to --accent. Text = --text-primary, follow-up
 * = --text-secondary, role = --accent eyebrow. Semantic tokens only; never a
 * hardcoded hex on a theme surface; never color:var(--bg-main) as foreground.
 * A8 left-pin: every centered + max-width block uses margin:0 auto (not 0 0).
 */

/* === Section shell - generous vertical air so the statement can breathe ==== */
body.aibt-universal .universal-about--manifesto-quote-large {
	background: var(--background);
	color: var(--text-primary);
	border-bottom: 1px solid var(--divider-primary);
	text-align: center;
	padding-top: calc(clamp(3.5rem, 8vh, 7rem) * var(--density, 1)) !important;
	padding-bottom: calc(clamp(3.5rem, 8vh, 7rem) * var(--density, 1)) !important;
}

/* === Kicker - small centered eyebrow ====================================== */
body.aibt-universal .universal-about--manifesto-quote-large .universal-about__kicker {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-widest) !important;
	text-transform: uppercase !important;
	color: var(--accent) !important;
	/* centered + (implicit) — keep auto sides so it never left-pins (A8) */
	margin: 0 auto var(--space-lg) auto !important;
}

/* === The statement - dominant typographic focal point ===================== */
body.aibt-universal .universal-about--manifesto-quote-large h2.universal-about__statement,
body.aibt-universal .universal-about--manifesto-quote-large .universal-about__statement {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	/* centered + max-width measure -> auto sides (A8 left-pin guard) */
	max-width: 18ch;
	margin: 0 auto !important;
	text-wrap: balance;
}

/* Accent lift on the emphasised fragment - the only color in the statement. */
body.aibt-universal .universal-about--manifesto-quote-large .universal-about__statement em {
	font-style: italic;
	color: var(--accent);
}

/* === Follow-up line - quiet, narrower than the statement ================== */
body.aibt-universal .universal-about--manifesto-quote-large .universal-about__sub {
	font-family: var(--font-body) !important;
	font-size: var(--text-lg) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--text-secondary) !important;
	/* centered + max-width measure -> auto sides (A8 left-pin guard) */
	max-width: 54ch;
	margin: var(--space-lg) auto 0 auto !important;
}

/* === Signature - tiny avatar + name + role, centered ====================== */
body.aibt-universal .universal-about--manifesto-quote-large .universal-about__attribution {
	margin-top: clamp(2rem, 5vh, 3.25rem) !important;
	align-items: center;
}

body.aibt-universal .universal-about--manifesto-quote-large .universal-about__avatar {
	margin: 0 !important;
	flex: 0 0 auto;
}

body.aibt-universal .universal-about--manifesto-quote-large .universal-about__avatar img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	display: block;
	border-radius: var(--decor-radius-pill, 999px);
}

body.aibt-universal .universal-about--manifesto-quote-large .universal-about__attribution-text {
	text-align: left;
}

body.aibt-universal .universal-about--manifesto-quote-large .universal-about__name {
	font-family: var(--font-display) !important;
	font-weight: 600 !important;
	font-size: var(--text-base) !important;
	color: var(--text-primary) !important;
	line-height: 1.2 !important;
	margin: 0 !important;
}

body.aibt-universal .universal-about--manifesto-quote-large .universal-about__role {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-wide) !important;
	text-transform: uppercase !important;
	color: var(--accent) !important;
	margin: 0 !important;
}

/* === Mobile: tighten wide kicker tracking (A5) ============================ */
@media (max-width: 640px) {
	body.aibt-universal .universal-about--manifesto-quote-large .universal-about__kicker {
		letter-spacing: 0 !important;
	}
	/* widen the statement measure a touch so big type doesn't over-wrap narrow */
	body.aibt-universal .universal-about--manifesto-quote-large .universal-about__statement {
		max-width: 100%;
	}
}