/* About Us — the index's warm-paper language applied to a prose page:
   same paper tones and gutters as index/index.css, with the page's own
   overture, editorial story stanza, and team band on top. Load order:
   tokens.css → style.css → this file. */

/* The paper tones (--paper, --paper-deep) and --ink-soft come from
   ../shared/tokens.css, shared with the index. */

/* Page base — same block as index.css, so both light pages render
   identically: parchment background, Garamond with fallbacks, feature
   settings without "kern". The canvas/body split (and why body must
   span the content) is explained there; this page ends on the same
   ink CTA, so it takes the same treatment. */
html,
body {
	font-family: var(--font-sans);
	font-feature-settings: "liga", "onum";
}

html {
	height: 100%;
	background: var(--ink);
}

body {
	min-height: 100%;
	background: var(--paper);
}

/* ── Overture ───────────────────────────────────────────────── */

/* The for-captives overture shape — eyebrow over a display line, one
   center axis — in this page's Garamond voice. The mission statement
   is the display line; there is no lede, the story is the next
   section. Same vertical strokes as the for-captives hero. */
.who {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--gap-copy);
	padding: var(--stroke-hero) var(--gutter-mobile);
}

/* Quieter than the for-captives title (its line is a slogan; this one
   is a full sentence over three lines). */
.who h1 {
	font-size: var(--text-display-quiet);
	line-height: 1.2;
}

/* ── Why captives: the editorial stanza ─────────────────────── */

/* The index's two-column stanza with structure in place of art —
   bound into one body: the label-and-thesis column is a narrower
   margin rail, and the prose hangs on a hairline rule between them
   (equal columns across 8rem of bare parchment read as two separate
   sections). Centered like the index's copy-against-art rows. */
.story {
	display: grid;
	/* The margin rail: 24rem from the 1600px design width up (slope
	   1.05 × rem, the fluid tokens' convergence rule), proportional
	   below — a fixed rail left the prose column narrower than the
	   rail it hangs on at ~1000px windows. */
	grid-template-columns: clamp(var(--space-12), 25.2vw, 24rem) 1fr;
	gap: var(--space-3);
	align-items: center;
	/* The for-captives stroke, not the index's 8rem: prose-only rows
	   don't earn the art sections' air. The top stroke is shaved
	   further so the stanza sits closer to the overture. */
	padding: var(--space-3) var(--gutter) var(--stroke-band);
}

.story .copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--gap-copy);
}

/* The index stanzas' accent-label size, over the lede size the
   for-captives overture established for supporting display copy. */
.story h1 {
	font-size: var(--text-heading);
}

.story h2 {
	font-size: var(--text-lede);
	line-height: 1.4;
}

.story .prose {
	display: flex;
	flex-direction: column;
	gap: var(--space-15);
	max-width: var(--measure);
	/* The site's hairline (header border, portrait edges) as the
	   column rule that joins the rail to the argument. */
	border-left: var(--hairline) solid var(--rule);
	padding-left: var(--space-3);
}

/* The dark pages' 1.4rem body vocabulary (plStepBody), replacing the
   UA-default paragraph size the first draft left in place. */
.story .prose p {
	font-size: var(--text-body);
	line-height: 1.6;
	margin: 0;
}

/* The stance reads as the close, not a third act — half a beat of
   extra separation on top of the column gap. */
.story .prose p:last-child {
	margin-top: var(--gap-copy);
}

/* ── The team: the cream band ───────────────────────────────── */

/* The site's tonal fold (for-captives row 2, the index's
   --paper-deep): one deeper band breaks the parchment run before the
   ink CTA. */
.team {
	/* The band's own column: three cards per row, so five people wrap
	   3 + 2 — wide screens would otherwise strand the fifth alone under
	   a row of four. Derived: three card widths plus the two gaps
	   between them. The copy above the grid shares it, so both start on
	   the same left edge. */
	--team-column: calc(3 * 16rem + 2 * var(--space-3));
	background: var(--paper-deep);
	/* The for-captives fold row's stroke — the band's edges already
	   divide it from its neighbors, so it doesn't need the index's
	   8rem on top. */
	padding: var(--stroke-band) var(--gutter);
}

/* The band's copy ranges left off the grid's own left edge — label,
   display line, and paragraph all hanging off the edge the first card
   starts on. It takes the grid's centered column to find it; the
   paragraph keeps its own measure inside. */
.team .copy {
	width: 100%;
	max-width: var(--team-column);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--gap-copy);
}

.team h1 {
	font-size: var(--text-heading);
}

.team h2 {
	font-size: var(--text-lede);
}

.team .copy p {
	max-width: var(--measure-wide);
	line-height: 1.6;
	margin: 0;
}

/* ── Team grid ──────────────────────────────────────────────── */

.team-grid {
	list-style: none;
	margin: var(--space-3) auto 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
	max-width: var(--team-column);
}

.person {
	width: 16rem;
	display: flex;
	flex-direction: column;
	text-align: left;
}

/* Square, and narrower than the card it sits in. The masters are square,
   so the slot is too — a 3/4 slot would crop a quarter off every photo
   to no purpose. At the card's full 16rem the portrait was the tallest
   object on the page and read as the card's lid; at 12rem, ranged left,
   the name and bio run past it and the photo becomes one element of the
   card instead. Parchment fill behind, so a portrait yet to decode still
   reads as a card on the band (the cascade's document-on-paper
   relationship, inverted) rather than a hole in it. */
.portrait {
	margin: 0 0 var(--space-15);
	width: 12rem;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	background: var(--paper);
	border: var(--hairline) solid var(--rule);
	border-radius: var(--radius);
}

/* The name and its mark, as one group rather than a justified row: the
   mark trails the name by a word-space. Ranged to the card's right edge
   it read as a column of its own, and once the portrait came down to
   12rem it was stranded well past the picture besides. */
.person-name {
	font-size: var(--text-body);
	line-height: 1.2;
	display: flex;
	align-items: baseline;
	gap: var(--space-075);
}

.person-role {
	font-style: italic;
	color: var(--ink-soft);
	margin: var(--space-025) 0 var(--space-075);
}

.person-bio {
	line-height: 1.5;
	margin: 0;
}

/* Quiet LinkedIn mark after the name, in the header nav's idiom:
   soft ink that firms up on hover — no accent color spent here. */
.person-link {
	position: relative;
	/* Never squeezed by a long name — it wraps instead. */
	flex: none;
	color: var(--ink-soft);
	transition: color var(--duration-ui) ease-in-out;
}

/* The mark is a 24px glyph — well under a thumb. This grows the hit
   area to ~49 × 45px. An out-of-flow pseudo-element rather than
   padding with cancelling negative margins: the name row is a
   baseline-aligned flex line, and padding on the item moved its
   baseline enough to grow every card 0.39px on desktop too. This
   costs no layout at any width. */
.person-link::after {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--space-05)) calc(-1 * var(--space-075));
}

.person-link:hover {
	color: var(--ink);
}

.person-link svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	vertical-align: -0.125em; /* seat the mark on the baseline (optical) */
}

/* ── CTA (the index CTA, in flow) ───────────────────────────── */

main > section.cta {
	position: relative;
	padding: var(--stroke-cta) var(--gutter);
	background-color: var(--ink);
	color: var(--parchment);
}

main > section.cta .copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gap-copy);
}

main > section.cta .copy .button {
	margin-top: var(--gap-copy);
}

/* The index has no small-screen handling; this page follows the dark
   pages and lets the fixed gutter collapse. */
@media (max-width: 900px) {
	header,
	.story,
	.team,
	main > section.cta {
		padding-left: var(--gutter-mobile);
		padding-right: var(--gutter-mobile);
	}

	.story {
		grid-template-columns: 1fr;
		gap: var(--space-2);
	}

	/* Stacked column: the rail sits above the prose, so the column
	   rule has nothing to divide. */
	.story .prose {
		border-left: none;
		padding-left: 0;
	}

	/* The for-captives rows' stacked-column stroke. */
	.story,
	.team {
		padding-top: var(--stroke-mobile);
		padding-bottom: var(--stroke-mobile);
	}

	/* The team band is the run-up to the closing one: its foot takes
	   the deeper stroke the CTA gave back (--stroke-cta-lead). */
	.team:has(+ section.cta) {
		padding-bottom: var(--stroke-cta-lead);
	}

	/* Except on top of the stanza: the overture's own bottom stroke and
	   this one stacked to ~109px of bare parchment between the
	   statement and "Why captives" — an eighth of the screen, and the
	   widest gap on the page. The overture's stroke is the whole
	   distance now, the way the index teasers let their sections start
	   on the seam. */
	.story {
		padding-top: 0;
	}

	/* The overture ranges left on a phone, as the for-captives one
	   does: the centered axis is a wide-page device — there the
	   statement is a block centered in a much wider column — but on a
	   phone it fills the gutter box, so its rag fights the flush-left
	   copy of every section below it. */
	.who {
		/* Top stroke down to the hero clamp's own floor: the 4rem bar
		   overhead is already a band of air, and the full 7vh on top of
		   it opened the page on nothing. The foot keeps the clamp —
		   here it is the ONLY thing between the statement and the
		   stanza (.story takes padding-top: 0 above). */
		padding-top: var(--space-2);
		align-items: flex-start;
		text-align: left;
	}

	/* The overture's breaks are set for the desktop measure: kept on a
	   phone they ran the sentence to seven lines with "growth" alone
	   on the fifth. Below the threshold the line finds its own breaks.
	   No text-wrap: balance — ranged left, balancing pulls the block
	   in off the gutter and reads as a narrower measure than the
	   copy beneath it. (Page-scoped on purpose; the other three heroes
	   hard-break too, but their copy is theirs.) */
	.who h1 br {
		display: none;
	}

	/* One rung down, the rung tokens.css reserves for body copy on a
	   phone: 1.4rem on the mobile gutter box is ~30 characters a line,
	   which ran the first paragraph to eleven ragged ones. The step
	   also does the work the dropped column rule used to — stacked,
	   the thesis and the prose were separated by weight alone. */
	.story .prose p {
		font-size: var(--text-body-mobile);
	}
}

/* ── Team rows ──────────────────────────────────────────────── */

/* Below the width where the grid can still hold two cards side by side
   (2 × 16rem + the gap + both gutters ≈ 638px), a lone centered card
   sits 35px inside the margin every other line of the page starts on,
   and five stacked portraits at 3/4 of the full column made the band
   two thirds of the page's height. So on phones the card becomes a
   row: portrait and identity across the top, bio on the full measure
   beneath — the page's own left margin restored, the band a third
   shorter, and no copy cut. Its own breakpoint rather than the site's
   900px: at tablet widths the two-up grid still reads well, and the
   row leaves the LinkedIn mark stranded across a 600px gap. */
@media (max-width: 640px) {
	/* One rung up from the desktop grid's gap: stacked, each row is a
	   wide band rather than a card with air on both sides, so the only
	   thing separating one person from the next is this. */
	.team-grid {
		max-width: none;
		gap: var(--space-3);
	}

	.person {
		width: 100%;
		display: grid;
		grid-template-columns: var(--space-6) 1fr;
		column-gap: var(--space-1);
	}

	/* The portrait spans both identity rows, and is taller than they
	   are: the pair meets in its middle (name ranged to the bottom of
	   its row, role to the top of the next). Back to filling its column:
	   the desktop 12rem is wider than the column itself down here. */
	.portrait {
		grid-column: 1;
		grid-row: 1 / span 2;
		margin: 0;
		width: 100%;
	}

	.person-name {
		grid-column: 2;
		grid-row: 1;
		align-self: end;
	}

	.person-role {
		grid-column: 2;
		grid-row: 2;
		align-self: start;
		margin: var(--space-025) 0 0;
	}

	/* Across both columns, so the bio reads on the page measure rather
	   than in the ~24-character ribbon left beside the portrait. */
	.person-bio {
		grid-column: 1 / -1;
		grid-row: 3;
		margin-top: var(--space-075);
		font-size: var(--text-body-mobile);
	}
}