/**
 * OSHIDA — about / hero, plus the route-level shell for /about/.
 *
 * @figma 2014:2691  arch group, 872.85 x 887.37 at (283.57, 235.46)
 * @figma 2014:2495  «درباره ما» word-mark, 1041.50 x 348.39 at (199.16, 703.42)
 *
 * FIRST FILE IN THE ROUTE'S CSS LIST, so the page-level custom properties and
 * the background wash live here rather than in a twelfth stylesheet that no
 * node-map slug would justify.
 *
 * THE PAGE HAS ITS OWN GROUND. Sampling tools/figma/renders/about-1440.webp
 * down the gutter at x=20 gives #1E1E1E at y=200, a peak of #2F2F2F at y=1400
 * and a steady fall to #0A0A0A by y=10400 — a single wash behind the whole
 * 11022px frame, not the flat --o-bg every other page sits on. It is built
 * from color-mix() over the tokens so no raw colour enters a section file; a
 * browser without color-mix() drops the gradient and falls back to flat
 * --o-bg, which is the design's ground anyway.
 *
 * TYPE ABOVE THE TOKEN SCALE. This page sets live display type at ~40px, ~44px
 * and ~48px — bigger than --o-fs-h1 (36px), which tokens.css caps because A1
 * assumed every display word-mark was vector art. Declared here as route-local
 * properties so nothing is hard-coded at the point of use. CROSS-REQUEST to
 * A1: promote these into tokens.css as --o-fs-display / --o-fs-title.
 *
 * Owner: work package C2.
 */

body.o-route-about {
	/* Display sizes this page needs and the token scale does not carry. */
	--o-about-fs-display: clamp(30px, 3.33vw, 48px); /* @figma 2014:2653 */
	--o-about-fs-title: clamp(27px, 3.06vw, 44px); /* @figma 2014:2505 */
	--o-about-fs-lead: clamp(25px, 2.78vw, 40px); /* @figma 2014:2486 */

	/* The section rhythm: ~150px between sections at the design width. */
	--o-about-gap: clamp(56px, 10.4vw, 150px);
	--o-about-gap-sm: clamp(40px, 5.6vw, 81px);
	--o-about-gap-lg: clamp(64px, 13.9vw, 200px);

	background-color: var(--o-bg);
}

/*
 * The gradient has to start at the top of the DOCUMENT, not at the top of
 * <main>. The header is a transparent 143px band above main, so painting the
 * gradient only on main left the page ground showing through above it — a hard
 * horizontal edge right across the top of the page. Pulling main up behind the
 * transparent header and padding the same amount back keeps every child where
 * it was and lets the gradient run from y=0.
 */
.o-route-about .o-main {
	margin-block-start: calc(var(--o-header-block-size) * -1);
	padding-block-start: var(--o-header-block-size);
	background-image: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--o-text) 7%, var(--o-bg)) 0%,
		color-mix(in srgb, var(--o-text) 15%, var(--o-bg)) 13%,
		var(--o-bg) 95%
	);
}

/* --------------------------------------------------------------------------
 * Hero
 * -------------------------------------------------------------------------- */

.o-about-hero {
	/* 235.46 - 143 (the header's own box) = 92.46 of section lead-in. */
	padding-block-start: clamp(24px, 6.4vw, 92px);
}

.o-about-hero__art {
	display: block;
	inline-size: min(100%, 1042px);
	margin-inline: auto;
}

.o-about-hero__img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

@media (max-width: 599px) {
	.o-about-hero {
		padding-block-start: var(--o-space-xs);
	}
}