/*
 * People Grid. Portraits on a fixed 4:5 frame so a grid of mixed source
 * crops still aligns, with the name and detail lines stacked beneath.
 */

.cobell-people__header {
	margin-inline: auto;
	margin-bottom: var( --wp--preset--spacing--60 );
	max-width: 40rem;
	text-align: center;
}

.cobell-people__heading {
	margin: 0;
	font-size: var( --wp--preset--font-size--xxx-large );
	line-height: 1;
}

.cobell-people__intro {
	margin-top: var( --wp--preset--spacing--40 );
	color: var( --cobell-body-color );
	font-size: var( --cobell-body-size );
}

.cobell-people__list {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: var( --wp--preset--spacing--50 );
	margin: 0;
	padding: 0;
	list-style: none;
}

.cobell-people__portrait {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: var( --wp--preset--spacing--30 );
	border-radius: 0.125rem;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: top;
	box-shadow: 0 14px 30px -14px rgba( 0, 0, 0, 0.2 );
}

.cobell-people__name {
	margin: 0;
	font-size: clamp( 1.125rem, 1.6vw, 1.375rem );
	line-height: 1.15;
}

.cobell-people__meta {
	margin: 0.375rem 0 0;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 85%, transparent );
	font-size: 0.875rem;
	line-height: 1.4;
}

/* The tribal affiliation is the line the design lifts, in small caps. */
.cobell-people__meta--tribe {
	color: var( --wp--preset--color--ember );
	font-size: var( --wp--custom--eyebrow-size );
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

@media ( min-width: 40rem ) {
	.cobell-people--cols-3 .cobell-people__list,
	.cobell-people--cols-5 .cobell-people__list {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 62rem ) {
	.cobell-people--cols-4 .cobell-people__list {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}

	.cobell-people--cols-5 .cobell-people__list {
		grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
	}
}

/*
 * Biography. The IEI leadership and board entries carry a paragraph each, where
 * the scholar lineups carry only label lines. Measure is capped so a three-line
 * bio in a four-column grid does not set an unreadably narrow column.
 */
.cobell-people__bio {
	margin: var( --wp--preset--spacing--30 ) 0 0;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 85%, transparent );
	font-size: 0.875rem;
	line-height: 1.6;
	text-wrap: pretty;
}

.cobell-section--dark .cobell-people__bio {
	color: color-mix( in srgb, var( --wp--preset--color--cream ) 88%, transparent );
}

/*
 * Bio behind a dialog. `people-modal.js` hides the inline bio and inserts the
 * trigger; without the script neither rule matches anything and the bio reads
 * as prose, which is the no-JS state.
 */
.cobell-people__trigger {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	margin-top: var( --wp--preset--spacing--30 );
	padding: 0 0 0.25rem;
	border: 0;
	border-bottom: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 40%, transparent );
	background: none;
	color: inherit;
	font-family: inherit;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	cursor: pointer;
}

.cobell-people__trigger:hover,
.cobell-people__trigger:focus-visible {
	border-bottom-color: var( --wp--preset--color--ember );
	color: var( --wp--preset--color--ember );
}

.cobell-section--dark .cobell-people__trigger {
	border-bottom-color: color-mix( in srgb, var( --wp--preset--color--cream ) 40%, transparent );
}

.cobell-section--dark .cobell-people__trigger:hover,
.cobell-section--dark .cobell-people__trigger:focus-visible {
	border-bottom-color: var( --wp--preset--color--flame );
	color: var( --wp--preset--color--flame );
}

/*
 * ── The bio dialog ──
 *
 * Two columns: the portrait in a faintly tinted aside, the bio opposite it under
 * a ruled role label and the name. Below 48rem the two stack, portrait first.
 *
 * The <dialog> element is the panel itself rather than a full-viewport overlay
 * with a panel inside it — the reference needs that second box because its
 * overlay is a flex container it positions by hand, and the native element
 * already centres itself. So the surface, the radius and the clip live here and
 * ::backdrop paints behind.
 *
 * Below 40rem it is a bottom sheet: full width, flush to the bottom edge, only
 * the top corners rounded. `margin` is what moves it — a dialog's UA style is
 * `inset: 0; margin: auto`, so replacing the block margin is the whole change.
 *
 * The dialog is appended to <body>, so it sits outside the block's subtree and
 * cannot inherit the section tokens — every value here resolves from the root
 * custom properties instead. That is also why .cobell-people__figure below is
 * unscoped: the tile's figure is cloned into this dialog, and a rule keyed to
 * .cobell-people--caption could not reach it here.
 */
.cobell-people-dialog {
	/*
	 * Both of these are load-bearing and neither is obvious:
	 *
	 * The theme sets no global border-box, so the 1px border below would
	 * otherwise sit outside the 48rem and put the panel 2px wider than live's.
	 *
	 * Chrome's UA stylesheet caps a modal dialog at `calc(100% - 2em - 6px)`,
	 * which is 38px at the root size. Without an explicit max-width the mobile
	 * sheet stops 19px short of each edge instead of running full bleed, and it
	 * reads as a stray margin rather than a default nobody wrote.
	 */
	box-sizing: border-box;
	display: none;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	max-height: 92vh;
	max-height: 92svh;
	margin: auto auto 0;
	padding: 0;
	border: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 15%, transparent );
	border-radius: 1rem 1rem 0 0;
	background-color: var( --wp--preset--color--cream );
	color: var( --wp--preset--color--forest );
	box-shadow: 0 25px 50px -12px color-mix( in srgb, var( --wp--preset--color--forest-deep ) 30%, transparent );
	overflow: hidden;
}

/*
 * The display switch has to hang off [open], and an author `display` on the
 * base rule is not a harmless default: the UA's `dialog:not([open])` rule is
 * user-agent origin, so any author declaration beats it whatever its
 * specificity. A dialog left at `display: flex` therefore stays on the page
 * after close() — the ::backdrop goes with the top layer and the panel does
 * not, which reads as "the close button removed the scrim and nothing else"
 * and leaves the visitor with no way out but a reload. Same shape as the
 * [hidden] note under the ledger card, in the opposite direction.
 */
.cobell-people-dialog[open] {
	display: flex;
}

.cobell-people-dialog::backdrop {
	background-color: color-mix( in srgb, #14201a 55%, transparent );
	-webkit-backdrop-filter: blur( 8px );
	backdrop-filter: blur( 8px );
}

/*
 * Entrance. The reference's own comment says this modal mirrors the need-help
 * wizard's register exactly, so it takes need-help.css's timings rather than
 * the reference's raw GSAP ones (0.6s backdrop, 1.1s panel at a 0.12s lead) —
 * the two dialogs in this build have to feel like one component, and that port
 * is the one already shipped.
 *
 * Toggling display on [open] restarts the animation, so no arming class is
 * needed. The blur and the fade go on the dialog element itself, which here is
 * the panel; neither reaches ::backdrop, so the scrim keeps its own fade.
 */
@media ( prefers-reduced-motion: no-preference ) {
	.cobell-people-dialog[open] {
		animation: cobell-people-dialog-panel 600ms cubic-bezier( 0.165, 0.84, 0.44, 1 ) both;
	}

	.cobell-people-dialog[open]::backdrop {
		animation: cobell-people-dialog-backdrop 400ms ease both;
	}
}

@keyframes cobell-people-dialog-panel {
	from {
		opacity: 0;
		filter: blur( 12px );
		transform: translateY( 0.75rem );
	}
}

@keyframes cobell-people-dialog-backdrop {
	from {
		opacity: 0;
	}
}

/* The panel is clipped, so the scrolling happens one level in — otherwise a long
   bio on a short viewport has nowhere to go. */
.cobell-people-dialog__scroll {
	flex: 1;
	overflow-y: auto;
}

.cobell-people-dialog__grid {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
}

.cobell-people-dialog__aside {
	padding: 1.5rem;
	background-color: color-mix( in srgb, var( --wp--preset--color--forest ) 4%, transparent );
}

/* Capped and centred while the columns are stacked: a portrait at the full width
   of a phone screen is a page of its own before the bio starts. */
.cobell-people-dialog__figure {
	margin-inline: auto;
	max-width: 15rem;
}

.cobell-people-dialog__main {
	padding: 1.5rem 1.5rem 2.5rem;
}

/*
 * The role label is the shared eyebrow with a shorter rule, tighter tracking and
 * clay rather than terracotta — all three are live's, and the block stylesheet
 * cannot rely on load order against the theme's own .cobell-eyebrow, so each
 * override carries the dialog class as well.
 *
 * Clay on cream measures 3.72:1 at this size, under 1.4.3's 4.5:1. It is the same
 * trade already recorded at the top of need-help.css for the clay pill, kept for
 * the same reason — live is the target. Ember reaches 6.26:1 and is the
 * substitute if that is reversed; the role is also announced as part of the
 * dialog's own text, so nothing here is only conveyed by the colour.
 */
.cobell-people-dialog .cobell-people-dialog__meta {
	margin: 0 0 1rem;
	color: var( --wp--preset--color--clay );
	letter-spacing: 0.4em;
}

.cobell-people-dialog .cobell-people-dialog__meta::before {
	width: 1.5rem;
	background-color: color-mix( in srgb, var( --wp--preset--color--clay ) 60%, transparent );
}

.cobell-people-dialog__title {
	margin: 0;
	color: var( --wp--preset--color--forest );
	font-family: var( --wp--preset--font-family--serif );
	font-size: clamp( 1.875rem, 3.6vw, 2.5rem );
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: var( --wp--custom--heading-tracking );
}

/* The cap is on the wrapper, at the inherited size, so 58ch is the same measure
   live sets; the type size belongs to the paragraph inside it. */
.cobell-people-dialog__body {
	margin-top: 1.5rem;
	max-width: 58ch;
}

.cobell-people-dialog__body p {
	margin: 0;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 85%, transparent );
	font-size: 0.96875rem;
	line-height: 1.65;
}

.cobell-people-dialog__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: 999px;
	background: none;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 70%, transparent );
	cursor: pointer;
}

.cobell-people-dialog__close:hover {
	background-color: color-mix( in srgb, var( --wp--preset--color--forest ) 10%, transparent );
	color: var( --wp--preset--color--forest );
}

.cobell-people-dialog__close:focus-visible {
	outline: 2px solid var( --wp--preset--color--teal );
	outline-offset: 2px;
}

/* The plate register has no figure to clone, so its dialog gets a bare portrait
   and needs the frame the figure would otherwise have supplied. */
.cobell-people-dialog__figure > img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.25rem;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	object-position: top;
}

@media ( min-width: 40rem ) {
	.cobell-people-dialog {
		width: calc( 100% - 3rem );
		max-width: 48rem;
		margin: auto;
		border-radius: 1rem;
	}
}

@media ( min-width: 48rem ) {
	.cobell-people-dialog__grid {
		grid-template-columns: minmax( 0, 5fr ) minmax( 0, 7fr );
	}

	.cobell-people-dialog__aside {
		padding: 2rem;
	}

	.cobell-people-dialog__figure {
		max-width: none;
	}

	.cobell-people-dialog__main {
		padding: 3rem 2.5rem;
	}
}

@media ( prefers-reduced-motion: no-preference ) {
	.cobell-people-dialog__close {
		transition:
			background-color 200ms ease,
			color 200ms ease;
	}
}

/*
 * Display register. The alumni lineup opens at 64px bold on live; the IEI
 * leadership and board rosters stay at the section default. Same block, two
 * reference components, so the size is a field.
 */
.cobell-people--display .cobell-people__heading {
	font-size: clamp( 2.25rem, 5vw, 4rem );
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.015em;
}

/*
 * Collapsed register. Applied by script only, so the no-JS page keeps the full
 * list. The mask is a gradient rather than a hard cut so the fold reads as
 * "there is more" instead of "this is the end".
 */
.cobell-people__list.is-collapsed {
	max-height: 34rem;
	overflow: hidden;
	-webkit-mask-image: linear-gradient( to bottom, #000 68%, transparent 100% );
	mask-image: linear-gradient( to bottom, #000 68%, transparent 100% );
}

@media ( min-width: 64rem ) {
	.cobell-people__list.is-collapsed {
		max-height: 40rem;
	}
}

/*
 * `display: flex` with `width: fit-content`, not `inline-flex`. Auto inline
 * margins compute to zero on an inline-level box, so the pill was never centred
 * by the `auto` below — it sat hard against the left edge of the section and had
 * done since the control was added.
 */
.cobell-people__more {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 0.75rem;
	line-height: 1.5;
	margin: 2.5rem auto 0;
	padding: 0.875rem 1.75rem;
	border: 0;
	border-radius: 999px;
	background-color: var( --wp--preset--color--forest );
	color: var( --wp--preset--color--cream );
	font-family: inherit;
	font-size: 0.78rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 300ms ease;
}

.cobell-people__more:hover,
.cobell-people__more:focus-visible {
	background-color: var( --wp--preset--color--forest-deep );
}

.cobell-people__more-count {
	color: color-mix( in srgb, var( --wp--preset--color--cream ) 55%, transparent );
}

.cobell-people__more-label {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding-left: 0.75rem;
}

.cobell-people__more-glyph {
	flex: none;
}

.cobell-people__more.is-open .cobell-people__more-glyph {
	transform: rotate( 45deg );
}

@media ( prefers-reduced-motion: no-preference ) {
	.cobell-people__more-glyph {
		transition: transform 300ms ease;
	}
}

.cobell-people__more-label::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 1px;
	height: 0.9em;
	background-color: color-mix( in srgb, var( --wp--preset--color--cream ) 25%, transparent );
}

@media ( prefers-reduced-motion: reduce ) {
	.cobell-people__more {
		transition: none;
	}
}

/*
 * ── Caption register: the /about-iei team and board ──
 *
 * A 2:3 portrait with the name on a feathered glass strip across the foot of the
 * image, rather than set beneath it. Same chrome as the Elouise spotlight and the
 * scholar lineup captions, which is the site's canonical caption treatment.
 *
 * The list is flex, not grid, so a trailing partial row centres under the full
 * ones — nine people at five columns is 5 + 4, and a grid would leave the four
 * hard against the left edge. Live builds it the same way for the same reason.
 *
 * The column ladder is per column count rather than shared, because live's two
 * rosters ladder differently: the five-up team goes 2 / 3 / 5 and the three-up
 * board goes 1 / 2 / 3. Both are reproduced here; the counts nobody uses in this
 * register get the sane middle of the two.
 *
 * Live's container is 80rem, not the theme's 72rem wide-size, and the three-up
 * board list is capped tighter still at 64rem so three portraits do not stretch
 * into the five-up cadence above them.
 */

.cobell-people--caption .cobell-section__inner {
	max-width: 80rem;
}

.cobell-people--caption .cobell-people__header {
	margin-bottom: 4rem;
	max-width: 42rem;
}

.cobell-people--caption .cobell-people__list {
	--cobell-people-gap: 1.5rem;
	--cobell-people-track: 2;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var( --cobell-people-gap );
}

.cobell-people--caption .cobell-people__item {
	flex-basis: calc(
		( 100% - ( var( --cobell-people-track ) - 1 ) * var( --cobell-people-gap ) ) / var( --cobell-people-track )
	);
}

.cobell-people--caption.cobell-people--cols-2 .cobell-people__list,
.cobell-people--caption.cobell-people--cols-3 .cobell-people__list {
	--cobell-people-track: 1;
}

.cobell-people--caption.cobell-people--cols-3 .cobell-people__list {
	margin-inline: auto;
	max-width: 64rem;
	row-gap: 3rem;
}

/*
 * The portrait. The frame owns the aspect ratio and the shadow so the caption can
 * be pinned to it; the image drops the plate register's own frame entirely.
 *
 * Deliberately not scoped to .cobell-people--caption. The bio dialog clones this
 * figure and is appended to <body>, so a rule keyed to an ancestor inside the
 * section cannot reach the clone — the portrait would arrive there unframed and
 * at the plate register's 4:5. The image override is keyed to the figure instead
 * of the register, which is true in both places and still outranks the plate
 * register's own rule on .cobell-people__portrait.
 */
.cobell-people__figure {
	position: relative;
	margin: 0;
	border-radius: 0.25rem;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	box-shadow:
		0 10px 15px -3px rgba( 0, 0, 0, 0.15 ),
		0 4px 6px -4px rgba( 0, 0, 0, 0.15 );
}

.cobell-people__figure .cobell-people__portrait {
	width: 100%;
	height: 100%;
	margin-bottom: 0;
	border-radius: 0;
	aspect-ratio: auto;
	box-shadow: none;
}

/*
 * The glass strip itself is `.cobell-caption-plate` in the theme stylesheet —
 * the same primitive the scholarship heroes and detail bodies use. The rules
 * that used to be duplicated here were byte-identical to it; nothing about this
 * roster's caption is specific to this block.
 */

/*
 * The strip carries the words on screen, so the text copies stay in the document
 * for assistive technology and out of the layout. clip-path rather than
 * display:none, for the same reason .screen-reader-text uses it.
 */
.cobell-people--caption .cobell-people__name,
.cobell-people--caption .cobell-people__meta,
.cobell-people--rail .cobell-people__name,
.cobell-people--rail .cobell-people__meta {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

/*
 * The whole portrait is the bio trigger, built by people-modal.js. With no script
 * there is no button, no hover lift and no cue glyph — and the bio is still there
 * as prose beneath the portrait, which is the state render.php prints.
 */
.cobell-people__tile {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.cobell-people__tile:focus-visible {
	outline: 2px solid var( --wp--preset--color--forest );
	outline-offset: 4px;
}

.cobell-people__tile:hover .cobell-people__figure,
.cobell-people__tile:focus-visible .cobell-people__figure {
	transform: translateY( -2px );
	box-shadow:
		0 20px 25px -5px rgba( 0, 0, 0, 0.2 ),
		0 8px 10px -6px rgba( 0, 0, 0, 0.2 );
}

/* The quiet "there is more" mark. The button supplies the interaction; this is
   only the cue, so it takes no pointer events of its own. */
.cobell-people__tile-cue {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border: 1px solid color-mix( in srgb, var( --wp--preset--color--cream ) 30%, transparent );
	border-radius: 999px;
	background-color: color-mix( in srgb, #14201a 35%, transparent );
	color: var( --wp--preset--color--cream );
	opacity: 0.6;
	-webkit-backdrop-filter: blur( 4px );
	backdrop-filter: blur( 4px );
	pointer-events: none;
}

.cobell-people__tile:hover .cobell-people__tile-cue,
.cobell-people__tile:focus-visible .cobell-people__tile-cue {
	opacity: 1;
}

@media ( prefers-reduced-motion: no-preference ) {
	.cobell-people__tile .cobell-people__figure {
		transition:
			transform 200ms ease-out,
			box-shadow 200ms ease-out;
	}

	.cobell-people__tile-cue {
		transition: opacity 200ms ease-out;
	}
}

@media ( min-width: 40rem ) {
	.cobell-people--caption.cobell-people--cols-2 .cobell-people__list,
	.cobell-people--caption.cobell-people--cols-3 .cobell-people__list {
		--cobell-people-track: 2;
	}
}

@media ( min-width: 48rem ) {
	.cobell-people--caption .cobell-people__header {
		margin-bottom: 5rem;
	}

	.cobell-people--caption .cobell-people__list {
		--cobell-people-gap: 2rem;
	}

	.cobell-people--caption.cobell-people--cols-3 .cobell-people__list {
		row-gap: 4rem;
	}

	.cobell-people--caption.cobell-people--cols-4 .cobell-people__list,
	.cobell-people--caption.cobell-people--cols-5 .cobell-people__list {
		--cobell-people-track: 3;
	}
}

@media ( min-width: 64rem ) {
	.cobell-people--caption.cobell-people--cols-3 .cobell-people__list {
		--cobell-people-track: 3;
	}

	.cobell-people--caption.cobell-people--cols-4 .cobell-people__list {
		--cobell-people-track: 4;
	}

	.cobell-people--caption.cobell-people--cols-5 .cobell-people__list {
		--cobell-people-track: 5;
	}
}

/*
 * ── Rail register: the alumni spotlight ──
 *
 * ScholarsLineup in its alumni mode. A hand-placed masonry of 3:4 cards across
 * five columns, each carrying its caption on the glass and swapping it for a tag
 * on hover. Closes all six scholarship detail pages.
 *
 * Two structural decisions worth knowing, because the reference reaches the same
 * arrangement a different way:
 *
 * The reference distributes the roster into five column elements in JavaScript —
 * column[0] takes items 0, 5, 10, 15 — so its DOM order is column-major and the
 * reading order a screen reader gets is not the roster order. Here it is one grid
 * and the offsets are applied per column with :nth-child, which puts the same
 * cards in the same places while leaving the DOM in roster order. It also means
 * the arrangement exists before any script runs.
 *
 * The offsets are transforms, so they do not contribute to the grid's height:
 * the lower cards in an offset column overhang the bottom edge. That overhang is
 * the effect, and it is why the list reserves padding beneath itself rather than
 * letting a translated column land on the "view more" control.
 */

.cobell-people--rail .cobell-section__inner {
	max-width: 80rem;
}

/* Live sets the alumni section 112 over 96, stepping to 144 over 128 — deeper
   above than below, because the masonry's own overhang carries the bottom. Two
   classes: the shell's padding comes from a stylesheet loaded after this one. */
.cobell-section.cobell-people--rail {
	padding-block: 7rem 6rem;
}

@media ( min-width: 48rem ) {
	.cobell-section.cobell-people--rail {
		padding-block: 9rem 8rem;
	}
}

/* IEILeadership and IEIBoard both run `py-28 md:py-36`, symmetrical, where the
   rail above is deeper at the top than the bottom. Same band as card-grid's
   `--split`, which is the third of /about-iei's sections — the page carries one
   authored rhythm across all three rather than three components each choosing.
   Two classes for the reason the rail's rule gives. */
.cobell-section.cobell-people--caption {
	padding-block: 7rem;
}

@media ( min-width: 48rem ) {
	.cobell-section.cobell-people--caption {
		padding-block: 9rem;
	}
}

/*
 * The header's measure is 720 stepping to 656, not the 768 the reference's
 * `max-w-3xl` reads as: live pads that column with `px-6 md:px-14` from inside,
 * so the type column is the 48rem cap minus its own gutter. Ours takes the
 * section's gutter from outside, so the cap has to carry the difference or the
 * heading sets one line where live sets two.
 */
.cobell-people--rail .cobell-people__header {
	margin-bottom: 4rem;
	max-width: 45rem;
}

@media ( min-width: 48rem ) {
	.cobell-people--rail .cobell-people__header {
		margin-bottom: 5rem;
		max-width: 41rem;
	}
}

/*
 * The eyebrow here is clay, not the terracotta every other eyebrow on the site
 * takes, and it is set a shade larger on slightly tighter tracking with no
 * flanking rules. That is live's, verified on all six pages — the alumni rail
 * predates the shared section header the rest of the site was rebuilt onto and
 * kept its own kicker. Clay on cream measures 3.72:1, so it is the same known
 * 1.4.3 failure the terracotta eyebrows carry rather than a new one.
 */
.cobell-people--rail .cobell-eyebrow {
	/* Block, not the shared eyebrow's inline-flex: with no hairlines to sit
	   beside, live sets this as a plain centred line and the flex row would
	   shrink it to its text and lose the centring the header gives it. */
	display: block;
	margin-bottom: 1.5rem;
	color: var( --wp--preset--color--clay );
	font-size: 0.7rem;
	font-weight: 400;
	letter-spacing: 0.42em;
}

.cobell-people--rail .cobell-people__intro {
	margin-inline: auto;
	margin-top: 1.25rem;
	max-width: 36rem;
}

/*
 * The grid. Two columns to 48rem and five above it, which is where the reference
 * switches. Gaps are equal on both axes so the composition reads as a wall
 * rather than as rows.
 */
.cobell-people--rail .cobell-people__list {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 0.75rem;
	margin-top: 4rem;
}

@media ( min-width: 48rem ) {
	.cobell-people--rail .cobell-people__list {
		grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
		gap: 1.25rem;
		margin-top: 5rem;
		/* Reserve for the overhang: the offsets and the parallax both push
		   columns down out of the grid's measured height, and without this the
		   lowest cards would land on the "view more" control. */
		padding-bottom: 8rem;
	}
}

/*
 * Per-column placement. `--offset` is the resting stagger and is asymmetric on
 * purpose — the rail reads as hand-placed rather than as a rigid grid. `--shift`
 * is the scroll parallax, written by motion.js onto the list as five properties
 * and picked up here per column, so a frame costs five property writes rather
 * than one per card.
 *
 * Both default to zero, so with no script and under reduced motion the rail
 * still lands in its staggered arrangement.
 */
.cobell-people--rail .cobell-people__item {
	transform: translateY( calc( var( --offset, 0rem ) + var( --shift, 0px ) ) );
}

.cobell-people--rail .cobell-people__item:nth-child( 2n + 2 ) {
	--offset: 1.75rem;
	--shift: var( --cobell-rail-shift-2, 0px );
}

@media ( min-width: 48rem ) {
	.cobell-people--rail .cobell-people__item:nth-child( 5n + 1 ) {
		--offset: 0rem;
		--shift: var( --cobell-rail-shift-1, 0px );
	}

	.cobell-people--rail .cobell-people__item:nth-child( 5n + 2 ) {
		--offset: 1.75rem;
		--shift: var( --cobell-rail-shift-2, 0px );
	}

	.cobell-people--rail .cobell-people__item:nth-child( 5n + 3 ) {
		--offset: 0.5rem;
		--shift: var( --cobell-rail-shift-3, 0px );
	}

	.cobell-people--rail .cobell-people__item:nth-child( 5n + 4 ) {
		--offset: 2.25rem;
		--shift: var( --cobell-rail-shift-4, 0px );
	}

	.cobell-people--rail .cobell-people__item:nth-child( 5n + 5 ) {
		--offset: 1rem;
		--shift: var( --cobell-rail-shift-5, 0px );
	}
}

/* The card. A 3:4 frame with a soft cast and a generous radius — the rail's
   cards are rounder than any other portrait frame on the site, which is live's. */
.cobell-people--rail .cobell-people__figure {
	position: relative;
	margin: 0;
	border-radius: 1rem;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	box-shadow: 0 4px 6px -1px rgba( 0, 0, 0, 0.1 ), 0 2px 4px -2px rgba( 0, 0, 0, 0.1 );
}

.cobell-people--rail .cobell-people__portrait {
	width: 100%;
	height: 100%;
	margin-bottom: 0;
	border-radius: 0;
	aspect-ratio: auto;
	box-shadow: none;
}

/*
 * The glass, on its own layer beneath the type. The mask dissolves its top edge
 * into the photograph; putting the type inside it would fade the top of the name
 * with the glass, which is why these are two elements.
 */
.cobell-people--rail .cobell-people__rail-glass {
	position: absolute;
	inset: auto 0 0;
	height: 12rem;
	background-color: color-mix( in srgb, #14201a 60%, transparent );
	-webkit-backdrop-filter: blur( 40px );
	backdrop-filter: blur( 40px );
	-webkit-mask-image: linear-gradient( to top, #000 55%, transparent 100% );
	mask-image: linear-gradient( to top, #000 55%, transparent 100% );
	pointer-events: none;
}

.cobell-people--rail .cobell-people__rail-caption {
	position: absolute;
	inset: auto 0 0;
	padding: 2.5rem 1rem 1.25rem;
	color: var( --wp--preset--color--cream );
	text-align: left;
}

.cobell-people--rail .cobell-people__rail-name {
	display: block;
	font-family: var( --wp--preset--font-family--serif );
	font-size: 1.05rem;
	letter-spacing: -0.01em;
	line-height: 1.1;
}

.cobell-people--rail .cobell-people__rail-tribe {
	display: block;
	margin-top: 0.5rem;
	color: color-mix( in srgb, var( --wp--preset--color--cream ) 80%, transparent );
	font-size: 0.625rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.cobell-people--rail .cobell-people__rail-detail {
	display: block;
	margin-top: 0.25rem;
	color: color-mix( in srgb, var( --wp--preset--color--cream ) 70%, transparent );
	font-size: 0.7rem;
	line-height: 1.4;
}

/*
 * Hover and focus. The caption crossfades out and the tag comes in over the
 * whole card. `:focus-within` is what makes it reachable from the keyboard —
 * people-modal.js turns the figure into a button in this register too, so the
 * card takes focus.
 *
 * Nothing is only available on hover: the name, nation, award and institution
 * are all in the document as real text beneath the card, and the tag itself says
 * nothing the roster does not already carry.
 */
.cobell-people--rail .cobell-people__rail-hover {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0 1.25rem 1.75rem;
	background-color: color-mix( in srgb, #14201a 70%, transparent );
	opacity: 0;
	-webkit-backdrop-filter: blur( 12px );
	backdrop-filter: blur( 12px );
	pointer-events: none;
}

.cobell-people--rail .cobell-people__rail-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 1rem;
	border: 1px solid color-mix( in srgb, var( --wp--preset--color--cream ) 30%, transparent );
	border-radius: 999px;
	color: var( --wp--preset--color--cream );
	font-size: 0.6rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
}

.cobell-people--rail .cobell-people__rail-tag::before {
	content: "";
	width: 0.25rem;
	height: 0.25rem;
	border-radius: 999px;
	background-color: var( --wp--preset--color--terracotta );
}

.cobell-people--rail .cobell-people__figure:hover .cobell-people__rail-hover,
.cobell-people--rail .cobell-people__tile:hover .cobell-people__rail-hover,
.cobell-people--rail .cobell-people__tile:focus-visible .cobell-people__rail-hover {
	opacity: 1;
}

.cobell-people--rail .cobell-people__figure:hover .cobell-people__rail-glass,
.cobell-people--rail .cobell-people__figure:hover .cobell-people__rail-caption,
.cobell-people--rail .cobell-people__tile:hover .cobell-people__rail-glass,
.cobell-people--rail .cobell-people__tile:hover .cobell-people__rail-caption,
.cobell-people--rail .cobell-people__tile:focus-visible .cobell-people__rail-glass,
.cobell-people--rail .cobell-people__tile:focus-visible .cobell-people__rail-caption {
	opacity: 0;
}

@media ( prefers-reduced-motion: no-preference ) {
	.cobell-people--rail .cobell-people__rail-glass,
	.cobell-people--rail .cobell-people__rail-caption,
	.cobell-people--rail .cobell-people__rail-hover {
		transition: opacity 300ms ease;
	}
}

/*
 * The rail folds shorter than the roster registers do — live collapses it to
 * 20rem, stepping to 28. Three classes, so it beats the shared collapsed rule
 * above whichever order the two end up in.
 */
.cobell-people--rail .cobell-people__list.is-collapsed {
	max-height: 20rem;
}

@media ( min-width: 48rem ) {
	.cobell-people--rail .cobell-people__list.is-collapsed {
		max-height: 28rem;
	}
}

/* The rail's cards do not lift on hover the way the roster's do — the caption
   crossfade is the whole of the feedback, and a lift on a translated column
   fights the parallax. */
.cobell-people--rail .cobell-people__tile:hover .cobell-people__figure,
.cobell-people--rail .cobell-people__tile:focus-visible .cobell-people__figure {
	transform: none;
	box-shadow: 0 4px 6px -1px rgba( 0, 0, 0, 0.1 ), 0 2px 4px -2px rgba( 0, 0, 0, 0.1 );
}