/* «Люди театру» (/collective/, /collective/{group}/).

   Figma: page `3682:15097` (1440×6427) → hero `3905:17403`, group filter
   `3694:16243`, card grid `3682:15133`, banner `3759:7501`, the second
   grid with «показати більше» `3787:15269`; page `4430:32088`
   (390×11098) → hero `4430:32264`, filter `4430:32326`, grids
   `4430:32463` / `4434:32635`, banner `4434:32630`, «показати більше»
   `4434:32753`. The card itself is actor-card.css (the library set
   `3009:1969`, variant `Variant3`); the button is view-all.css.

   ## Widths

   Only 390 and 1440 are drawn (inventory.md). As in performance-t14.css,
   the 390 layout stays fluid up to 1440 and the 1440 layout then holds
   through 1920; type sizes still step at 768 and 1920, because those
   steps are the .fig's own variable modes carried by tokens.css. The one
   invented step is the two-column grid at 768 — one 736-wide portrait
   card is not drawn either, and it is the same choice
   performance-t14.css made for the same card.

   ## The staggered grid

   `Actor Cards Carousel` 3682:15134 is the same composition as the
   performance page's `Actors Carousel` 3135:3789, number for number:
   three 376 columns at x = 0 / 401 / 801 inside 1177, columns starting
   48 / 120 / 0 lower than the grid, rows repeating every 572 (card 472 +
   100). So the technique is performance-t14.css's: the offset is a top
   margin cancelled by an equal negative bottom margin, so it moves the
   card without moving the row line and therefore repeats on every row;
   the container's bottom padding is the largest offset, so the last row
   stays inside the box. That is what makes the grid measure 1177×1736
   exactly (3 × 472 + 2 × 100 + 120).

   ## Vertical rhythm

   The frame's own gaps, reproduced rather than averaged: at 1440 the
   filter bar ends at 786 and the grid starts at 865 (79), the grid ends
   at 2601 and the banner starts at 2682 (81), the banner ends at 3429
   and the second grid starts at 3509 (80). Three values where one 80 was
   plainly meant — filed in designer-questions.md. At 390 every gap is
   80, then 48 to the button and 120 to the footer (180 at 1440).

   ## Substitutions

   - the breadcrumb link colour `--color-neutral-500` is 4.31:1 on this
     grey hero, so it becomes `--color-neutral-600` (6.9:1) — the same
     local override repertoire.css makes, for the same reason;
   - Kilok is not licensed: Exo 2 runs under its name, its cap height is
     0.659 em against Kilok's 0.70, so the 0.041 em goes back as bottom
     padding on every `text-box`-trimmed heading (`--podil-cap-fix`).

   Animations: none of this page's own nodes carries a prototype action —
   checked with `fig-canvas.js interactions` and with the `interactions`
   field of every node under `3682:15097` and `4430:32088`. The filter
   tabs have no hover variant and no transition, the banner has none, and
   `Variant3` of the card has no `hover` sibling in the set (only
   `Property 1=Default` does). The one animation here is the shared
   «View All» hover, which view-all.css owns. */

.people-hero,
.people-main {
	--podil-cap-fix: 0.041em;
}

/* ---------------------------------------------------------------- hero */

/* `4430:32264`: 390×471 on `--color-neutral-100`, 16 above the
   breadcrumbs and 48 under the heading block. No horizontal padding of
   its own — the strip is full-bleed and the two text blocks carry their
   own insets, which the frame draws at three different values (16 / 16
   at 390; 71 for the breadcrumbs and 64 for the heading at 1440). */
.people-hero {
	padding: 16px 0 48px;
	background: var(--color-neutral-100);
}

/* The breadcrumb <nav> is a block whose <ol> is inline-flex; as an
   inline-level box it would sit on a text baseline and carry the line
   box's leading (the same fix afisha.css and repertoire.css make). */
.people-hero .breadcrumbs {
	display: flex;
	padding-inline: 16px;
}

.people-hero .breadcrumbs a {
	color: var(--color-neutral-600);
}

/* `Photo Strip` 4430:32268: 46 thumbnails, 105×105 and 140×140
   alternating, gap 8.4, top-aligned, 24 under the breadcrumbs. The row
   is 6013 wide inside a 390 frame whose overflow is hidden, so it is
   clipped, not scrolled: `clip` rather than `hidden`, so it never
   becomes a scroll container. Decorative (ТЗ §4.5), hence aria-hidden in
   the markup. */
.people-hero__strip {
	position: relative;
	margin-top: 24px;
	overflow: clip;
}

/* The row itself. Its own box is what moves, so the strip above keeps the
   geometry every recorded measurement was taken against (its height is the
   tallest thumb, 140, as the flex row's own). */
.people-hero__track {
	display: flex;
	align-items: flex-start;
	gap: 8.4px;
	width: max-content;
}

/* «Рядок зображень, що біжить» — note 4550:25462. The note gives no speed,
   no easing and has no prototype transition, so 120 s per pass is this
   task's documented choice: one copy of the row is 6013 px at 390 and
   8596 px at 1440, i.e. 50–72 px a second — a drift a reader can look away
   from, not a ticker.

   Two copies of the row are printed (template-parts/people/hero.php), so
   translating the track by exactly half its width lands copy 2's first
   thumbnail where copy 1's was: the loop has no seam and needs no script.

   Paused while the pointer is over the strip and while the keyboard is
   anywhere inside it, so a reader can stop it just by reaching for it, and
   by the pause control below for everyone else. */
.people-hero__track {
	animation: people-strip 120s linear infinite;
}

@keyframes people-strip {

	from {
		translate: 0;
	}

	to {
		translate: -50% 0;
	}
}

.people-hero__strip:hover .people-hero__track,
.people-hero__strip:focus-within .people-hero__track,
.people-hero__strip:has(.people-hero__pause-input:checked) .people-hero__track {
	animation-play-state: paused;
}

/* Off under both switches. Not by the global rules: they zero the animation
   DURATION, and an `infinite` animation with a 0.01 ms cycle does not stop —
   it flickers. So it goes off by name, and the control goes with it, because
   there is nothing left to pause. */
html[data-motion="reduced"] .people-hero__track {
	/* stylelint-disable-next-line declaration-no-important -- reduced motion */
	animation: none !important;
	translate: none;
}

html[data-motion="reduced"] .people-hero__pause-input,
html[data-motion="reduced"] .people-hero__pause {
	display: none;
}

@media (prefers-reduced-motion: reduce) {

	.people-hero__track {
		/* stylelint-disable-next-line declaration-no-important -- reduced motion */
		animation: none !important;
		translate: none;
	}

	.people-hero__pause-input,
	.people-hero__pause {
		display: none;
	}
}

/* The checkbox is the control; the label is what is seen. The input keeps a
   1px box in the corner rather than `display: none` so it stays focusable and
   keeps its own accessible name from the label. */
.people-hero__pause-input {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}

/* An overlay, so this control — which no frame draws — cannot move the
   banner's recorded composition. Hidden from sight until the pointer is over
   the strip or the keyboard is on it; on a touch device, where no hover can
   reveal it, it is always visible. Its own plate, because it sits on
   photographs and nothing else would guarantee it WCAG 1.4.3 (the same remedy
   performance-t14.css uses for controls over a stage photo). */
.people-hero__pause {
	position: absolute;
	z-index: 1;
	top: 8px;
	right: 8px;
	padding: 6px 12px;
	background: var(--color-neutral-800);
	color: var(--color-base-white);
	font-family: var(--font-body);
	font-size: var(--fs-xs-text);
	line-height: var(--lh-xs-text);
	letter-spacing: var(--ls-xs-text);
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
	opacity: 0;
	transition: opacity 300ms cubic-bezier(0, 0, 0.58, 1);
}

.people-hero__strip:hover .people-hero__pause,
.people-hero__pause-input:focus-visible + .people-hero__pause {
	opacity: 1;
}

/* A deliberate deviation from the global ring (base.css: 2px
   --color-primary-700, offset 2) and from the project's inset-stroke
   convention: this label is a small plate on a dark ground laid over
   photographs, where the teal ring measures under 3:1 and an outward offset
   would fall onto the photographs themselves. White at offset −4 keeps the
   ring on the plate and at 13:1. */
.people-hero__pause-input:focus-visible + .people-hero__pause {
	outline: 2px solid var(--color-base-white);
	outline-offset: -4px;
}

/* «Зупинено» is the checked state's own word: the label text never changes
   (CSS has no business rewriting it), so the plate does, and the checkbox
   reports the state to assistive tech by itself. */
.people-hero__pause-input:checked + .people-hero__pause {
	opacity: 1;
	background: var(--color-primary-700);
}

@media (hover: none) {

	.people-hero__pause {
		opacity: 1;
	}
}

.people-hero__thumb {
	display: block;
	flex: 0 0 auto;
	width: 105px;
	height: 105px;
	background: var(--color-neutral-300);
}

.people-hero__thumb:nth-child(even) {
	width: 140px;
	height: 140px;
}

.people-hero__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* `Frame 1437255223` 4430:32322: 358 wide, VERTICAL, itemSpacing 24,
   48 under the strip. */
.people-hero__heading {
	display: flex;
	flex-direction: column;
	gap: 24px;

	/* A margin, not padding: the frame's `Frame 1437255223` is 358 wide at x 16
	   (1096 at x 64 on 1440), i.e. the inset is outside the block's own box. */
	max-width: calc(100% - 32px);
	margin: 48px 16px 0;
}

/* `Section Title` 4430:32323 — «H1/H1 M», 60/60 at 390 and 120/120 at
   1440, letter-spacing −1, uppercase, leadingTrim CAP_HEIGHT. This page
   is NOT the shared `--banner` variant of section-title.css: that one
   steps «H1/H1 S» → «H1/H1 M» and sits 20/40 from its paragraph, while
   this hero is «H1/H1 M» at both widths and 24/39 from it. */
.people-hero__title {
	margin: 0;
	padding-bottom: var(--podil-cap-fix);
	color: var(--color-neutral-800);
	font-family: var(--font-title);
	font-size: var(--fs-h1-m);
	font-weight: 400;
	line-height: var(--lh-h1-m);
	letter-spacing: var(--ls-h1-m);
	text-box: trim-both cap alphabetic;
	text-transform: uppercase;

	/* At 150 % text scale (the a11y panel, WCAG 1.4.4/1.4.10) one long
	   Ukrainian word is wider than the page; at 100 % nothing breaks, so
	   no measurement changes. */
	overflow-wrap: anywhere;
}

/* `Section Description` 4430:32324 — «S/S text (regular)», 284 wide at
   390 and 244 at 1440 (both fixed in the frame). */
.people-hero__intro {
	width: 284px;
	max-width: 100%;
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	font-weight: 400;
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
}

/* -------------------------------------------------------------- filter */

/* `4430:32326`: full-bleed, flush under the hero, one row of pills.

   The 390 frame draws the row 704 wide inside a 390 page whose overflow
   is hidden, i.e. clipped — so the strip scrolls sideways here and the
   bar keeps the 48 the frame gives it, which is what holds every y below
   it in place. (That frame also carries layoutWrap=WRAP and
   counterAxisSpacing=0, which a hug-width row can never trigger; if a
   wrapping bar was meant, the frame has to say so — designer-questions.md.)
   `flex: 1 1 0` with `min-width: max-content` is Figma's own sizing
   algorithm: the pills that fit share the slack equally (192.333 /
   193.333 / 193.333 at 1440) and the ones that do not keep their content
   width (228 / 350 / 283).

   «Таби фіксуються зверху» — note `4550:25458` on the 1440 frame, with the same
   Locomotive «03. CSS sticky» reference the performance page's anchor tabs
   (`4497:25429`) and the repertoire's filter bar (`4549:26009`) carry: no
   duration, no prototype transition, so `position: sticky` and nothing else.

   At every width, not only 1440: unlike the repertoire — where under 1440 the
   design draws a compact «фільтри» toggle with an overlay panel instead of a
   bar — the 390 frame `4430:32326` draws this very strip, so there is nothing
   else for the note to mean there.

   It sticks BELOW the site header and rides with it (`4549:26006` made the
   header hide on the way down): both custom properties are 0 when the header is
   not sticky — no script, or «Зменшити анімацію» on — which is the plain
   `top: 0` this would otherwise be. z-index 12, the afisha filter bar's value:
   over the cards, under the header's 30.

   The strip keeps its own horizontal scroll: sticky resolves against the page's
   scrollport, not against the row inside this box — the same pair the
   performance anchor nav already runs at 390.

   accessibility-ua.md §3.3 asks that «показати ще» move focus to the first new
   card. A sticky bar could then be sitting on top of it, so this strip's height
   is published as `--podil-people-bar-h` (people.js) and added to the page's
   scroll padding below, exactly as `--podil-anchor-nav-h` is on the performance
   page. */
.people-filter {
	position: sticky;
	z-index: 12;

	/* The shift goes in `top`, never in `transform`: a transform on a
	   `position: sticky` box applies while it is still IN FLOW too, so with the
	   header hidden the bar is lifted a whole header height above its own place
	   and lies over the content above it, focused controls included
	   (fix round 1, C1 — the same defect the three other bars had; WCAG 2.4.11,
	   accessibility-ua §3.5). `top` on a sticky box does nothing until it
	   actually sticks. */
	top: calc(var(--podil-header-h, 0px) + var(--podil-header-shift, 0px));
	overflow-x: auto;
	background: var(--color-base-white);
	transition: top 300ms cubic-bezier(0, 0, 0.58, 1);
}

/* On `:root`, not on `body`: scroll padding is read from the SCROLLING box, and
   for the page that is the document element. `:root:has()` also out-specifies
   site-header.css's own `:root` rule whatever order the two sheets print in
   (performance-shows.css makes the same pair of points). */
:root:has(.people-filter) {
	scroll-padding-top: calc(var(--podil-header-h, 0px) + var(--podil-people-bar-h, 0px));
}

.people-filter__list {
	display: flex;
	padding: 0;
	margin: 0;
	list-style: none;
}

.people-filter__item {
	display: flex;
	flex: 1 1 0;
	min-width: max-content;
}

/* Inactive pill: #FFFFFF with a 1px #D0D5DC inside stroke on top, bottom
   and LEFT only (border=1/0/1/1 in the frame) — the left edges are what
   separates the tabs, and the row's top and bottom rules are therefore
   interrupted at the current tab, which carries no stroke at all.
   Inside strokes are inset box-shadows (global-constraints.md). */
.people-filter__tab {
	display: flex;
	flex: 1 1 auto;
	box-sizing: border-box;
	min-height: 48px;
	align-items: center;
	padding: 8px;
	background: var(--color-base-white);
	box-shadow:
		inset 0 1px 0 0 var(--color-neutral-300),
		inset 0 -1px 0 0 var(--color-neutral-300),
		inset 1px 0 0 0 var(--color-neutral-300);
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-xs-text);
	font-weight: 600;
	line-height: var(--lh-xs-text);
	letter-spacing: var(--ls-xs-text);

	/* Every pill in the 390 frame hugs its label and centres it; at 1440
	   only the CURRENT one does (counterAxisAlignItems=CENTER is set on
	   3694:16244 alone), while the two other pills that grow leave their
	   label at the start of the cell. A hug pill looks the same either
	   way, so this pair of rules reproduces both frames exactly. */
	text-align: start;
	text-decoration: none;
	text-transform: uppercase;
}

.people-filter__item--current .people-filter__tab {
	justify-content: center;
	box-shadow: none;
	background: var(--color-neutral-800);
	color: var(--color-base-white);
	text-align: center;
}

/* ---------------------------------------------------------------- grid */

.people-main {
	padding-bottom: 120px; /* 4434:32753 bottom 9504 → footer 9624. */
	background: var(--color-base-white);
}

/* `4430:32463` / `4434:32635`: one column, itemSpacing 48, 16 margins,
   80 under the filter bar. */
.people-grid {
	display: grid;
	padding: 0;
	margin: 80px 16px 0;

	/* `minmax(0, 1fr)`, not `1fr`: a `1fr` track resolves to at least its
	   content's min-content width, which at 150 % text with the dyslexia
	   font pushes the track past the grid (the idiom repertoire.css and
	   performance-t14.css both settled on). */
	grid-template-columns: minmax(0, 1fr);
	row-gap: 48px;

	/* The row's own height, so the 470 pitch of `4430:32463` holds whatever a card
	   contains: `Variant3` 4316:28111 is 422 tall, and a person with no звання —
	   90 of the theatre's 110 — has a card 30 px shorter than the mock's, which
	   would otherwise pull every card below them up by that much. `minmax`, so a
	   taller card (a two-line name, 150 % text) still opens its row. */
	grid-auto-rows: minmax(422px, auto);
	list-style: none;
}

.people-grid__item {
	min-width: 0;
}

.people-empty {
	margin: 80px 16px 0;
	color: var(--color-neutral-600);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	line-height: var(--lh-s-text);
}

/* -------------------------------------------------------------- banner */

/* `4434:32630`: the photograph alone, 358×201, 80 under the first grid
   and 80 above the second. No text and no gradients at this width — the
   heading is there for assistive technology only (see banner.php). */
.people-banner {
	position: relative;
	aspect-ratio: 358 / 201;
	margin: 80px 16px 0;
	overflow: clip;
}

.people-banner__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.people-banner__title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* ---------------------------------------------------- «показати більше» */

/* `4434:32753`: the button spans the card block, 48 under it. */
.people-more {
	margin: 48px 16px 0;
}

/* ================================================================= 768+ */

@media (min-width: 768px) {

	/* No frame at this width: two columns rather than one 736-wide
	   portrait card, which nobody drew either — the same decision
	   performance-t14.css took for the same card. */
	.people-grid {
		column-gap: var(--grid-gutter, 24px);
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.people-filter__tab {
		font-size: var(--fs-s-text);
		line-height: var(--lh-s-text);
		letter-spacing: var(--ls-s-text);
	}
}

/* ================================================================ 1440+ */

@media (min-width: 1440px) {

	/* `3905:17403`: 1440×580, breadcrumbs flush with the top of the grey
	   (the navigation bar above it carries its own 24 bottom padding, so
	   the visible gap is that), 24 to the strip, 192 to the heading, 60
	   below it. */
	.people-hero {
		padding: 0 0 60px;
	}

	.people-hero .breadcrumbs {
		padding-inline: 71px;
	}

	/* `Photo Strip` 3905:17405: the same 46 thumbnails at 150/200 and gap
	   12 — the 390 strip is this one at 0.7. */
	.people-hero__track {
		gap: 12px;
	}

	.people-hero__thumb {
		width: 150px;
		height: 150px;
	}

	.people-hero__thumb:nth-child(even) {
		width: 200px;
		height: 200px;
	}

	/* `Frame 1437255223` 3905:17404: HORIZONTAL, itemSpacing 39,
	   counter-axis MAX (bottom edges aligned), hugging its two children;
	   192 under the strip. */
	.people-hero__heading {
		flex-direction: row;
		align-items: flex-end;
		gap: 39px;
		width: fit-content;

		/* The margin is outside the box, so `100%` alone would let a 150 %-scaled
		   heading run 64 px past the page and push a horizontal scrollbar. */
		max-width: calc(100% - 64px);
		margin: 192px 0 0 64px;
	}

	/* Shrinkable, with the paragraph beside it fixed at its 244: at the design's
	   own size the heading hugs its word and nothing moves, and at 150 % text it
	   wraps (`overflow-wrap: anywhere`) instead of pushing the paragraph off the
	   page. */
	.people-hero__title {
		flex: 0 1 auto;
		min-width: 0;
	}

	.people-hero__intro {
		flex: 0 0 auto;
		width: 244px;
	}

	/* `3694:16243`: 1440×70, pad 12/20. */
	.people-filter__tab {
		min-height: 70px;
		padding: 12px 20px;
	}

	/* `3682:15133` / `3759:7397`: 1177 wide, centred in the frame (131
	   left, 132 right); three 376 columns with the two 24.5 gutters that
	   `space-between` gives them; rows every 572 = card 472 + row-gap 100
	   with the column offsets cancelled out. */
	.people-grid {
		width: 1177px;
		box-sizing: border-box;
		padding-bottom: 120px;

		/* `calc`, not `auto`: the same 131,5 at 1440 and 371,5 at 1920, but a
		   length the browser reports the same way every time.
		   `getComputedStyle().marginLeft` is defined as the COMPUTED value, and
		   Chromium answers a `margin: auto` with the used one only when layout
		   happens to be fresh — hammered, it read `0px` about one run in five for
		   a block that is plainly centred, and that is what made this page's
		   stored baseline flap. */
		margin: 79px calc((100% - 1177px) / 2) 0;
		column-gap: 0;
		grid-template-columns: repeat(3, 376px);
		justify-content: space-between;
		row-gap: 100px;

		/* The row's own height, not the tallest card's: `Variant3` 3286:10976 is
		   472 tall, so the row pitch is a fixed 572 and the grid a fixed 1736 —
		   which is what keeps every card's y on the frame's line even when a
		   person has no звання and their card is shorter than the mock's (only 20
		   of the theatre's 110 people have one). `minmax`, so a card that outgrows
		   472 at 150 % text still opens its row instead of overlapping the next. */
		grid-auto-rows: minmax(472px, auto);
	}

	.people-grid--rest {
		margin-top: 80px; /* banner bottom 3429 → second grid 3509. */
	}

	.people-grid__item {
		align-self: start;
	}

	.people-grid__item:nth-child(3n + 1) {
		margin-top: 48px;
		margin-bottom: -48px;
	}

	.people-grid__item:nth-child(3n + 2) {
		margin-top: 120px;
		margin-bottom: -120px;
	}

	.people-empty {
		width: 1177px;
		margin: 79px calc((100% - 1177px) / 2) 0;
	}

	/* `3759:7501`: 1328×747 — the page's own 56 margins, wider than the
	   1177 card block. 81 under the first grid (whose box already carries
	   the stagger's 120 padding). */
	.people-banner {
		aspect-ratio: 1328 / 747;
		max-width: 1328px;
		margin: 81px max(0px, calc((100% - 1328px) / 2)) 0;
	}

	/* `Dark Overlay Bottom` 3759:7499 (local y 0) and `Dark Overlay Top`
	   3759:7496 (local y 575): two 172-tall bands, each a linear gradient
	   whose handles run from the band's bottom (transparent) to its top
	   (black at 0.8) — the names are swapped in the file, the geometry is
	   not. Two background layers rather than two empty elements: they
	   carry nothing to read. */
	.people-banner::before {
		content: "";
		position: absolute;
		inset: 0;
		background-image:
			linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%),
			linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
		background-repeat: no-repeat, no-repeat;
		background-position: top left, bottom left;
		background-size: 100% 172px, 100% 172px;
	}

	/* `Hero Title Top` 3759:7498 at 48,48 and `Hero Title Bottom`
	   3759:7500 at 752,604 — one sentence in two corners, «H2/H2 S»
	   56/56 white, letter-spacing −1, leadingTrim CAP_HEIGHT. The
	   heading box itself is only a positioning frame, so the type and the
	   trim sit on the two lines. */
	.people-banner__title {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip-path: none;
		white-space: normal;
	}

	.people-banner__line {
		position: absolute;
		display: block;
		padding-bottom: var(--podil-cap-fix);
		color: var(--color-base-white);
		font-family: var(--font-title);
		font-size: var(--fs-h2-s);
		font-weight: 400;
		line-height: var(--lh-h2-s);
		letter-spacing: var(--ls-h2-s);
		text-box: trim-both cap alphabetic;
		text-transform: uppercase;
	}

	.people-banner__line--top {
		top: 48px;
		left: 48px;
	}

	.people-banner__line--bottom {
		right: 48px;
		bottom: 48px;
	}

	/* `3787:15269` itemSpacing 56; `3682:15147` spans the card block. */
	.people-more {
		width: 1177px;
		margin: 56px calc((100% - 1177px) / 2) 0;
	}

	.people-main {
		padding-bottom: 180px; /* 3682:15147 bottom 5365 → footer 5545. */
	}
}

/* ================================================================ 1920+ */

/* No 1920 frame for this page (inventory.md), so the 1440 composition
   holds: the card block stays 1177 and centres itself, and only the type
   steps, through tokens.css's own 1920 mode. */

/* ------------------------------------------------- Windows High Contrast */

/* forced-colors drops the box-shadow that draws the pill edges and the
   dark fill that marks the current tab, so both come back as outlines —
   outline never participates in the box model (base.css's convention).
   The banner's white type would land on a picture with no ground, so it
   gets one. */
@media (forced-colors: active) {

	.people-filter__tab {
		outline: 1px solid CanvasText;
		outline-offset: -1px;
	}

	.people-filter__item--current .people-filter__tab:not(:focus-visible) {
		outline-width: 3px;
	}

	.people-banner__line {
		padding: 4px 8px;
		background: Canvas;
		color: CanvasText;
		forced-color-adjust: none;
	}
}