/**
 * YEBN 2026 — about
 */

.yebn-about {
	max-width: var(--yebn-container);
	margin-inline: auto;
	padding-inline: var(--yebn-space-3);
	padding-block: var(--yebn-space-6) var(--yebn-space-7);
}

.yebn-about > section + section {
	margin-top: var(--yebn-space-7);
}

/* ---------- opening ---------- */

/*
 * The opening is a masthead, not a column: the claim on the left, the evidence
 * for it on the right. Previously the statement stood alone against an empty
 * right-hand half, which is what made the page read as lopsided.
 */
.yebn-about__opening {
	display: grid;
	gap: var(--yebn-space-5);
	margin-bottom: var(--yebn-space-7);
	padding-bottom: var(--yebn-space-5);
	border-bottom: 1px solid var(--yebn-line);
}

@media (min-width: 900px) {
	.yebn-about__opening {
		grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr);
		gap: var(--yebn-space-7);
		align-items: end;
	}
}

/*
 * The measure lives on the HEADING, not on its container.
 *
 * `ch` resolves against the font-size of the element it is declared on. Put
 * `max-width: 22ch` on the wrapper and it is computed at the wrapper's 17px
 * body size — about 190px — and then a 50px heading is forced to wrap inside
 * it, two words to a line. On the element itself, 22ch means 22 characters of
 * the display face, which is what was meant all along.
 */
.yebn-about__statement {
	margin: 0;
	max-width: 24ch;
	font-size: clamp(2.1rem, 4.4vw, 3.3rem);
	line-height: 1.06;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

/* ---------- figures ---------- */

.yebn-about__figures dl {
	margin: 0;
}

.yebn-about__figures div {
	display: grid;
	grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr);
	align-items: baseline;
	gap: var(--yebn-space-2);
	padding-block: var(--yebn-space-2);
	border-top: 1px solid var(--yebn-line);
}

.yebn-about__figures div:first-child { border-top: 0; }

/* Stated plainly. No animated counters — this audience discounts marketing,
   and a number that ticks upward reads as exactly that. Right-aligned and
   tabular so 4,000+ and 6 line up on their last digit. */
.yebn-about__figures dt {
	font-family: var(--yebn-font-display);
	font-size: clamp(1.6rem, 2.4vw, 2rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--yebn-navy);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.yebn-about__figures dd {
	margin: 0;
	font-size: var(--yebn-fs-xs);
	letter-spacing: var(--yebn-ls-label);
	text-transform: uppercase;
	color: var(--yebn-gold-text);
	line-height: 1.3;
}

/* ---------- prose ---------- */

.yebn-about h2 {
	margin: 0 0 var(--yebn-space-3);
	font-size: var(--yebn-fs-2xl);
	padding-bottom: var(--yebn-space-1);
	border-bottom: 2px solid var(--yebn-navy);
}

.yebn-about__prose p {
	max-width: min(var(--yebn-measure), var(--yebn-measure-px));
	margin: 0 0 var(--yebn-space-2);
}

/* ---------- goals ---------- */

.yebn-goals {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--yebn-space-4);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.yebn-goal {
	padding-top: var(--yebn-space-2);
	border-top: 2px solid var(--yebn-gold);
}

.yebn-goal h3 {
	margin: 0 0 var(--yebn-space-1);
	font-size: var(--yebn-fs-lg);
	letter-spacing: var(--yebn-ls-label);
	text-transform: uppercase;
}

.yebn-goal p {
	margin: 0;
	color: var(--yebn-muted);
	font-size: var(--yebn-fs-sm);
	line-height: 1.55;
}

/* ---------- timeline ---------- */

/* Numbered and ordered because the order carries meaning here — this is a
   sequence, not a set of cards that happen to have dates on them. */
.yebn-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
}

.yebn-timeline__item {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	gap: var(--yebn-space-3);
	padding-block: var(--yebn-space-3);
	border-top: 1px solid var(--yebn-line-soft);
}

.yebn-timeline__item:first-child { border-top: 0; }

.yebn-timeline__year {
	margin: 0;
	font-family: var(--yebn-font-display);
	font-size: var(--yebn-fs-lg);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--yebn-gold-text);
	line-height: 1.3;
}

.yebn-timeline__body h3 {
	margin: 0 0 4px;
	font-size: var(--yebn-fs-base);
	font-weight: 600;
}

.yebn-timeline__body p {
	margin: 0;
	max-width: 62ch;
	color: var(--yebn-muted);
	font-size: var(--yebn-fs-sm);
	line-height: 1.55;
}

/* ---------- governance ---------- */

.yebn-about__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--yebn-space-2);
	margin-top: var(--yebn-space-3);
}

.yebn-about__contact {
	margin: var(--yebn-space-3) 0 0;
	font-size: var(--yebn-fs-sm);
	color: var(--yebn-muted);
}