/**
 * OSHIDA — about / goal.
 *
 * @figma 2014:2619  Group 425 — statement 842.69 x 257 at (298.65, 6809.88)
 * @figma 2014:2620  its three type runs: a ~26px bold opener, ~18px body on
 *                   48px leading, then the ~36px gold closing line
 * @figma 2014:2504  Frame 433 — card 1168 x 729 at (136, 7216.81), r=50
 * @figma 2014:2505  card heading 1048.94 x 74 at parent (59.06, 75)
 * @figma 2014:2506  card copy    1048.94 x 495 at parent (59.06, 159)
 *
 * Owner: work package C2.
 */

.o-about-goal {
	padding-block-start: var(--o-about-gap);
}

.o-about-goal__statement {
	max-inline-size: 843px;
	margin-inline: auto;
	text-align: center;
}

.o-about-goal__lead,
.o-about-goal__body,
.o-about-goal__claim {
	margin: 0;
}

.o-about-goal__lead {
	font-size: var(--o-fs-h3);
	font-weight: var(--o-fw-black);
	line-height: var(--o-lh-heading);
	letter-spacing: var(--o-track-tight);
}

.o-about-goal__body {
	margin-block-start: var(--o-space-xs);
	font-size: var(--o-fs-md);
	font-weight: var(--o-fw-extralight);
	line-height: 48px; /* measured pitch 6885 -> 6933 */
	letter-spacing: var(--o-track-tight);
}

.o-about-goal__claim {
	margin-block-start: clamp(20px, 3.2vw, 46px);
	color: var(--o-gold);
	font-size: var(--o-fs-h1);
	font-weight: var(--o-fw-black);
	line-height: var(--o-lh-heading);
	letter-spacing: var(--o-track-snug);
}

/* --------------------------------------------------------------------------
 * The card
 * -------------------------------------------------------------------------- */

.o-about-goal__card {
	margin-block-start: var(--o-about-gap); /* 7216.81 - 7066.88 */
	padding-block: clamp(28px, 5.2vw, 75px);
	padding-inline: clamp(20px, 4.1vw, 59px);
	border: var(--o-line-width) solid var(--o-line-soft);
	border-radius: var(--o-radius-xl);
	background-color: var(--o-veil-panel);
	box-shadow: var(--o-shadow-panel);
	font-size: var(--o-fs-md);
	font-weight: var(--o-fw-extralight);
	line-height: 45px; /* @figma 2014:2506 — 495 / 11 lines */
	letter-spacing: var(--o-track-tight);
}

.o-about-goal__title {
	margin: 0;
	margin-block-end: clamp(16px, 0.7vw, 10px);
	font-size: var(--o-about-fs-title);
	font-weight: var(--o-fw-black);
	line-height: var(--o-lh-heading);
	letter-spacing: var(--o-track-snug);
}

.o-about-goal__card p {
	margin: 0;
}

.o-about-goal__card p + p {
	margin-block-start: var(--o-space-2xs);
}

.o-about-goal__card-claim {
	font-weight: var(--o-fw-black);
}

@media (max-width: 899px) {
	.o-about-goal__body,
	.o-about-goal__card {
		line-height: var(--o-lh-body);
	}
}