/* ==========================================================================
   Chapter 02 — About · Develop
   The darkroom: statement, the giant "15" with the portrait developing over
   it, the approach, and Inspiring Collabs — one chapter.
   ========================================================================== */

.chapter--about {
	padding-bottom: var(--s-9);
}

.about__intro {
	row-gap: var(--s-6);
	padding-top: var(--chapter-pad);
}

.about__statement {
	font-size: clamp(1.875rem, 1rem + 3.3vw, 4.25rem);
	line-height: 1.04;
}

/* 15 — Years in business, with the portrait over it ------------------------
   A compact block: about half a desktop screen. */

.about__years {
	margin-top: var(--s-7);
	row-gap: var(--s-5);
}

/* Phones & tablets: the label sits beside the numeral. */
.about__figure {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	gap: var(--s-4);
}

/* The "1" sits exactly on the margin (its side bearing is 0.024 em); the
   digits are spaced like the chapter titles, with clear air between them. */
.about__numeral {
	display: block;
	margin-left: -0.024em;
	font-size: min(52vw, 22rem);
	font-weight: 800;
	font-stretch: 62%;
	line-height: 0.74;
	letter-spacing: 0.01em;
	font-variant-numeric: lining-nums;
}

.about__years-label {
	max-width: 5.2em;
	font-size: clamp(1.375rem, 1rem + 1.4vw, 2.5rem);
	line-height: 1;
}

.about__portrait {
	position: relative;
	z-index: 2;
	width: 68%;
	margin: -4vw 0 0 auto;
}

.about__text {
	margin-top: var(--s-4);
}

/* Inspiring Collabs --------------------------------------------------------- */

.about__collabs {
	margin-top: var(--s-9);
	row-gap: var(--s-6);
}

.about__collabs-title {
	font-size: min(var(--fs-masthead), (100vw - 2 * var(--margin)) / (var(--word, 1) * 0.5));
	font-weight: 800;
	font-stretch: 64%;
	line-height: 0.84;
	letter-spacing: -0.012em;
	text-transform: uppercase;
	display: flex;
	flex-direction: column;
}

.about__collabs-title .line {
	display: block;
	overflow: hidden;
	/* Room in the mask for accents on capitals (É, À, Ó) and descenders, without moving the lines. */
	padding: 0.16em 0 0.1em;
	margin: -0.16em 0 -0.1em;
}

.about__collabs-title .line__inner {
	display: block;
}

.about__lead {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: var(--fs-title);
	line-height: 1.05;
	letter-spacing: -0.015em;
	text-wrap: balance;
	max-width: 14em;
}

.about__collabs-text {
	max-width: 30em;
	font-size: var(--fs-lede);
	line-height: 1.42;
	text-wrap: pretty;
}

@media (min-width: 48em) {
	.about__portrait {
		width: 50%;
		margin-top: -10vw;
	}
}

@media (min-width: 64em) {
	.about__statement {
		grid-column: 1 / span 11;
	}

	.about__years {
		align-items: end;
	}

	.about__numeral {
		font-size: clamp(10rem, 25vw, 26rem);
		letter-spacing: 0;
	}

	/* Archivo's 5 has a stem leaning 2.9° (measured); beside the portrait's
	   straight edge it read as tilted. Set upright around its centre — too
	   small a correction to show anywhere else in the glyph. */
	.about__digit--5 {
		display: inline-block;
		transform: skewX(2.9deg);
		transform-origin: 50% 55%;
	}

	.about__figure {
		grid-column: 1 / span 3;
		grid-row: 1;
		align-self: start;
		display: grid;
		justify-items: start;
		gap: var(--s-4);
	}

	/* The portrait overlaps the "5": type and print layered, as on the wall.
	   Its top-left corner follows the 5; it is 30 % larger than its three
	   columns, growing towards the bottom right, so it ends a little below
	   the text beside it. */
	.about__portrait {
		grid-column: 3 / span 3;
		grid-row: 1;
		align-self: start;
		width: 130%;
		margin: 5vw 0 0 -0.5vw;
	}

	.about__text {
		grid-column: 8 / span 5;
		grid-row: 1;
		align-self: end;
		margin: 0 0 2vw;
	}

	.about__process {
		grid-column: 1 / span 7;
		grid-row: 2 / span 2;
	}

	.about__lead {
		grid-column: 9 / span 4;
		grid-row: 2;
		align-self: end;
	}

	.about__collabs-text {
		grid-column: 9 / span 4;
		grid-row: 3;
		align-self: start;
	}
}