/* Person page («Сторінка персони», single-person.php) — plan 06 task 4.

   Figma: 1440 «Актор» `3222:12949`, 390 `4372:22765`. Every number below is
   read off those two frames (figma-spec.py on design/figma/file.json); the
   three slanted bands (the portrait's «У театрі з», the press card's footer
   cut, the gallery photo's caption) are the shared `c-poster-band`
   (poster-band.css), whose rise was measured on the 1:1 frame renders
   (design/figma/frames).

   There is no 768 frame for this page, so — as on the performance page
   (performance-hero.css) — the 390 layout stays fluid up to 1440.

   Section rhythm, frame to frame: every section is 120 below the previous one
   at 390 and 180 at 1440.

   Two colours of the design fail WCAG on this page and land on the nearest
   passing token, as the rest of the site already does
   (designer-questions.md):
   · `#12AD99` as TEXT (the rank, every year) is 2.81:1 on white →
     `--color-primary-700`;
   · `#12AD99` as the ONLY edge of a control (the social buttons) is 2.81:1 →
     `--color-primary-600` (3.38:1), the substitution calendar.css records.
   `#2A2A2A` on the award plate is not in the variable set at all (a raw
   fill); it lands on `--color-neutral-800` `#272B30`, the token it stands
   for. */

/* Figma trims these layers to Kilok's cap height (0.70 em); the substitute's
   is 0.659 em, so a `text-box`-trimmed box lands 0.041 em short and the
   difference is added back as bottom padding — the remedy performance-t14.css
   introduced. */
.person-hero,
.person-career,
.person-awards,
.person-roles,
.person-press,
.person-gallery,
.person-outside {
	--podil-cap-fix: 0.041em;
}

/* ------------------------------------------------------------------ шапка */

/* «Breadcrumbs» 3222:13042 hugs its own row, as the frame's node does; `flex`
   rather than the default block, so the inline-flex list inside does not sit
   in a line box of its own and gain its half-leading. */
.person-hero .breadcrumbs {
	display: flex;
	width: fit-content;
}

.person-hero__inner {
	display: grid;
	box-sizing: border-box;
	padding: 0 var(--page-gutter);
	grid-template-areas:
		"crumbs"
		"media"
		"info";
	grid-template-columns: minmax(0, 1fr);
}

.person-hero .breadcrumbs {
	grid-area: crumbs;
}

/* «ActorPhoto» 4372:22785 — 358×358 at 390, 12 under the breadcrumbs. */
.person-hero__media {
	position: relative;
	margin-top: 12px;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--color-neutral-200);
	grid-area: media;
}

/* The box carries the ratio; the photograph is pinned inside it, because a
   `height: 100%` child of an auto-height box resolves to `auto` and the
   image's own ratio would win over the box's. */
.person-hero__photo,
.person-career__photo,
.person-role__photo,
.person-work__photo,
.person-press-card__photo {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* «Vector 5» 4372:22787 — 358×66, and the caption in «M/M text» 16 in from
   the photo's left edge, not the band's own H6 semi-bold caps. */
.person-hero__band {
	--c-poster-band-height: 66px;

	padding-left: 16px;
	color: var(--color-neutral-800);
	font-size: var(--fs-m-text);
	font-weight: 400;
	line-height: var(--lh-m-text);
	letter-spacing: var(--ls-m-text);
	text-box: trim-both cap alphabetic;
	text-transform: none;
}

.person-hero__info {
	display: flex;
	margin-top: 24px; /* photo bottom 461 → «ActorInfo» 4372:22959 at 485. */
	flex-direction: column;
	gap: 12px; /* «ActorInfo» 4372:22959 / 3222:13079 itemSpacing. */
	grid-area: info;
}

/* «Actor Profile Card» 3222:13075 and its two groups. */
.person-hero__card {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.person-hero__intro,
.person-hero__plate {
	display: flex;
	flex-direction: column;
}

.person-hero__intro {
	gap: 32px; /* «Frame 1437255317» 4372:23878. */
}

.person-hero__plate {
	gap: 24px; /* «Frame 1437255320» 4372:22973. */
}

/* «Заслужена артистка України» 4372:22962 — «Menu,button», teal. */
.person-hero__rank {
	margin: 0;
	color: var(--color-primary-700);
	font-family: var(--font-body);
	font-size: var(--fs-menu-button);
	font-weight: 600;
	line-height: var(--lh-menu-button);
	letter-spacing: var(--ls-menu-button);
	text-transform: uppercase;
}

/* «Actor Name» 4372:22965 — «H1/H1 S», the page's one h1. */
.person-hero__name {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-title);
	font-size: var(--fs-h1-s);
	font-weight: 400;
	line-height: var(--lh-h1-s);
	letter-spacing: var(--ls-h1-s);
	overflow-wrap: anywhere;
	padding-bottom: var(--podil-cap-fix);
	text-box: trim-both cap alphabetic;
	text-transform: uppercase;
}

/* «Actor Bio» 4372:22966 — «S/S text (regular)». */
.person-hero__lead {
	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);
}

/* «View Schedule Link» 4372:22967 hugs its own words. */
.person-hero__schedule {
	align-self: flex-start;
}

/* «Award Badge» 4372:22974 — `#F3F4F6` behind a 2px teal left edge, the text
   in «S/S text (Italic)». */
.person-hero__award {
	box-sizing: border-box;
	margin: 0;
	padding: 20px;
	border-left: 2px solid var(--color-primary-500);
	background: var(--color-neutral-100);
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	font-style: italic;
	font-weight: 400;
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
}

/* «Social Media Section» 4372:22977 — the label over the row of buttons. */
.person-hero__socials {
	display: flex;
	width: fit-content;
	flex-direction: column;
	gap: 8px;
}

.person-hero__socials-label {
	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);
}

.person-hero__socials-list {
	display: flex;
	width: fit-content;
	margin: 0;
	padding: 0;
	gap: 6px;
	list-style: none;
}

/* «Facebook/Instagram/YouTube Button» 4372:22981… — 40×40 with a 2px edge. */
.person-hero__social {
	display: flex;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	gap: 10px; /* «Facebook Button» 3222:13061 itemSpacing. */
	border: 2px solid var(--color-primary-600);
	color: var(--color-neutral-800);
}

.person-hero__social svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* The three «Parallax effect» notes of 22.09 (`4497:25456` head, `4497:25465`
   cards of the press row, `4497:25469` cards of «Робота поза театром») are the
   shared `c-parallax` (parallax.css) on this page's own boxes. None gives a
   distance; the project's own is 80 px over the box's pass through the
   viewport, and the card consumers already cut it to 40 for a short box. The
   460×120 strip of an outside work gets 24 — the same share of its own height
   that 80 gives a banner. */
.person-press-card__photo.c-parallax {
	--c-parallax-travel: 40px;
}

.person-work__photo.c-parallax {
	--c-parallax-travel: 24px;
}

/* ---------------------------------------------------- section rhythm */

/* The last section is 120 above the footer at 390 and 180 at 1440 — the same
   step as between sections («Footer» 3234:13544 at 8715, the last card bottom
   at 8535). It is set on the footer rather than on a section, because which
   section is last depends on what this person has. */
.single-person .site-footer {
	margin-top: 120px;
}

.person-career,
.person-facts,
.person-awards,
.person-roles,
.person-press,
.person-gallery,
.person-outside {
	margin-top: 120px;
}

.person-career__inner,
.person-awards__inner,
.person-press__inner,
.person-outside__inner {
	box-sizing: border-box;
	padding: 0 var(--page-gutter);
}

/* «Awards» 4379:23926 and «WorkOutsideTheater» 4379:24383 are auto-layout
   columns with a gap of their own (40 at 390, 54 at 1440). */
.person-awards__inner,
.person-outside__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* Every section heading on this page is «H2/H2 S», left, with Figma's
   CAP_HEIGHT trim. */
.person-career__title,
.person-awards__title,
.person-press__title,
.person-outside__title,
.person-roles__title {
	margin: 0;
	color: var(--color-neutral-800);
	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);
	overflow-wrap: anywhere;
	padding-bottom: var(--podil-cap-fix);
	text-box: trim-both cap alphabetic;
	text-transform: uppercase;
}

/* -------------------------------------------------- професійний шлях */

/* «Frame 1437255027» 4379:23891 — a square window over the stack of
   photographs; only the first one is in view. */
.person-career__photos {
	position: relative;
	margin-top: 40px;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--color-neutral-200);
}

.person-career__photo {
	transform: translateY(calc(var(--podil-stack-step, 0) * -100%));
	transition: transform 300ms cubic-bezier(0, 0, 0.58, 1); /* animations.md. */
}

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

	.person-career__photo {
		transform: none;
	}
}

html[data-motion="reduced"] .person-career__photo {
	transform: none;
}

.person-career__timeline {
	position: relative;
	margin-top: 24px; /* «Frame 1437255322» 4379:23888 itemSpacing. */
}

/* «Rectangle 6063» 4379:24245 — a 1px hairline through the dots: horizontal
   at 390 (1552×1, 14 in from the strip's left edge, 32 down), vertical at
   1440. Decoration, so it carries no text and no role. */
.person-timeline__rule {
	position: absolute;
	z-index: 0;
	top: 32px;
	left: 14px;
	width: 100%;
	height: 1px;
	background: var(--color-neutral-300);
	pointer-events: none;
}

.person-career__timeline .c-slider {
	position: relative;
	z-index: 1;
}

.person-timeline__entry {
	display: flex;
	flex-direction: column;
	gap: 17px; /* «TimelineEntry-…» 4379:24246 itemSpacing. */
}

/* «YearMarker» 4379:24247 — the year over the dot at 390, beside it at 1440. */
.person-timeline__marker {
	display: flex;
	margin: 0;
	flex-direction: column;
	gap: 7px;
}

.person-timeline__year {
	display: block;

	/* «Year» 4379:23985 is a fixed 90 — which it is while the text is the size
	   the frame was drawn at; scaled by the accessibility widget the number
	   needs more, and a fixed 90 would cut it (fix round 1 C1). */
	min-width: 90px;
	width: max-content;
	color: var(--color-primary-700);
	font-family: var(--font-title);
	font-size: var(--fs-h3);
	font-weight: 400;
	line-height: var(--lh-h3);
	letter-spacing: var(--ls-h3);
	padding-bottom: var(--podil-cap-fix);
	text-box: trim-both cap alphabetic;
	text-transform: uppercase;
}

.person-timeline__dot {
	display: block;
	width: 12px;
	height: 12px;
	background: var(--color-neutral-800);
}

.person-timeline__content {
	display: flex;
	flex-direction: column;
	gap: 16px; /* «EntryDetails» 4379:24252 itemSpacing. */
}

/* «EntryTitle» 4379:24253 — «S/S text (semi bold) caps». */
.person-timeline__kind {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	font-weight: 600;
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
	text-transform: uppercase;
}

.person-timeline__text {
	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);
}

.person-timeline__text + .person-timeline__text {
	margin-top: -4px; /* «Descriptions» 4379:24254 gap 12 inside the 16 of the
	   block above. */
}

/* The strip: 280-wide entries, 32 apart, with 46px of the next one showing
   («Timeline» 4379:24244 is 1840 wide in a 358 window). */
.person-career__timeline .c-slider {
	--c-slider-track-gap: 32px;
	--c-slider-peek: 78px; /* 32 gap + 46 of the next entry. */
}

/* ------------------------------------------------------- ключові факти */

/* «Visit Title» 4379:23904 / 3322:12484 is a fixed-width text box (252 / 370),
   which is what breaks «Ключові факти» over two lines. */
.person-facts .performance-facts__title {
	width: 252px;
	max-width: 100%;

	/* «КЛЮЧОВІ» alone is wider than the 252 the frame gives the box once the
	   accessibility widget scales the text (fix round 1 C1). */
	overflow-wrap: anywhere;
}

/* -------------------------------------------------------- нагороди */

.person-awards__list,
.person-outside__list,
.person-press__grid,
.person-roles__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.person-awards__list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* «Award Card …» 4379:23929 — 20 all round, `#F3F4F6`, 2px teal left edge. */
.person-award {
	display: flex;
	box-sizing: border-box;
	flex-direction: column;
	gap: 12px;
	padding: 20px;
	border-left: 2px solid var(--color-primary-500);
	background: var(--color-neutral-100);
}

.person-award__logo {
	display: block;
	width: 120px;
	height: 120px;
	flex: none;
	object-fit: contain;
}

.person-award__content {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.person-award__year,
.person-role__year,
.person-work__year {
	margin: 0;
	color: var(--color-primary-700);
	font-family: var(--font-body);
	font-size: var(--fs-menu-button);
	font-weight: 600;
	line-height: var(--lh-menu-button);
	letter-spacing: var(--ls-menu-button);
	text-transform: uppercase;
}

.person-award__details {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* «Award Title» 4379:23936 — «H5». */
.person-award__name {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-h5);
	font-weight: 600;
	line-height: var(--lh-h5);
	letter-spacing: var(--ls-h5);
	overflow-wrap: anywhere;
}

/* «Award Description» 4379:23938 — «M/M text», CAP_HEIGHT. */
.person-award__for,
.person-role__character,
.person-work__role {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-m-text);
	font-weight: 400;
	line-height: var(--lh-m-text);
	letter-spacing: var(--ls-m-text);
	text-box: trim-both cap alphabetic;
}

/* ------------------------------------------------------------ ролі */

.person-roles__inner {
	box-sizing: border-box;
}

.person-roles__title {
	margin: 0 var(--page-gutter);
}

/* «Filter Tabs» 4379:23992 — one 1px box around three cells, the current one
   filled. */
.person-roles__tabs {
	margin: 40px var(--page-gutter) 24px; /* title bottom 3690 → tabs 3730 … list
	   3808. */
}

/* «Filter Tabs» 4379:23992 — one 1px box around the cells. The stroke is drawn
   inside (global-constraints.md), so the 1px it occupies in the frame's own hug
   height is padding here: 1 + 52 + 1 = 54 at 390, 1 + 56 + 1 = 58 at 1440. */
.person-roles__tab-list {
	display: flex;
	box-sizing: border-box;

	/* «Filter Tabs» 4379:23992 is a fixed 358 at 390 — the three cells hug
	   (344) and the strip keeps the column's width; at 1440 the strip itself
	   hugs (382). */
	width: 100%;
	margin: 0;
	padding: 1px;
	box-shadow: inset 0 0 0 1px var(--color-neutral-300);
	list-style: none;
	overflow-x: auto;
}

.person-roles__tab {
	display: flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	padding: 16px 32px;
	background: var(--color-base-white); /* «Tab Current» 3327:12701 fill. */
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-menu-button);
	font-weight: 600;
	line-height: var(--lh-menu-button);
	letter-spacing: var(--ls-menu-button);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.person-roles__tab-item + .person-roles__tab-item .person-roles__tab {
	box-shadow: inset 1px 0 0 0 var(--color-neutral-300);
}

.person-roles__tab[aria-current="page"] {
	background: var(--color-neutral-800);
	color: var(--color-base-white);
	box-shadow: none;
}

/* «Role Card» 4379:23980 — a full-width row with a 1px rule under it; the
   first one carries a rule above it too. The rules are drawn inside
   (global-constraints.md) and the frame's hug height counts them, so the px
   each takes is added to the padding on that side. */
.person-role {
	display: grid;
	box-sizing: border-box;
	padding: 24px var(--page-gutter) 25px;
	box-shadow: inset 0 -1px 0 0 var(--color-neutral-300);
	grid-template-areas:
		"media  media"
		"year   badge"
		"play   play"
		"char   char"
		"link   link";
	grid-template-columns: minmax(0, 1fr) auto;
}

.person-role__info,
.person-role__actions {
	display: contents;
}

.person-roles__list > .person-role:first-child {
	padding-top: 25px;
	box-shadow:
		inset 0 1px 0 0 var(--color-neutral-300),
		inset 0 -1px 0 0 var(--color-neutral-300);
}

.person-role__media {
	position: relative;
	margin-bottom: 20px; /* photo bottom 4191 → «Frame 1437255325» 4379:23983. */
	aspect-ratio: 1; /* «Actress Photo» 4379:23982 — 358×358. */
	overflow: hidden;
	background: var(--color-neutral-200);
	grid-area: media;
}

.person-role__year {
	align-self: start; /* «Year» 4379:23985 is 20 tall in a 23-tall row. */
	grid-area: year;
}

.person-role__badge {
	grid-area: badge;
	justify-self: end;
}

.person-role__play {
	grid-area: play;
}

.person-role__character {
	grid-area: char;
}

/* After the shared heading/paragraph rules below, so these win. */
.person-roles__list .person-role__play {
	margin-top: 16px; /* «Frame 1437255325» 4379:23983 itemSpacing. */
}

.person-roles__list .person-role__character {
	margin-top: 20px; /* «Play Details» 4379:23986 itemSpacing. */
}

.person-role__link {
	margin-top: 32px; /* «Role Card» 4379:23980 itemSpacing. */
	grid-area: link;
	justify-self: end;
}


/* «Play Title» 4379:23987 — «H3». */
.person-role__play,
.person-work__name,
.person-press-card__headline {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-title);
	font-size: var(--fs-h3);
	font-weight: 400;
	line-height: var(--lh-h3);
	letter-spacing: var(--ls-h3);
	overflow-wrap: anywhere;
	padding-bottom: var(--podil-cap-fix);
	text-box: trim-both cap alphabetic;
	text-transform: uppercase;
}

/* «Status Badge» 3327:12690 — Variant5 «Активна» on `#CCFBF0`, Variant6
   «Архів» on `#F3F4F6`. The word is the state; the colour only repeats it. */
.person-role__badge {
	box-sizing: border-box;
	margin: 0;
	padding: 4px 8px;
	min-width: 100px;
	background: var(--color-neutral-100);
	color: var(--color-neutral-700);
	font-family: var(--font-body);
	font-size: var(--fs-xs-text);
	font-weight: 400;
	line-height: var(--lh-xs-text);
	letter-spacing: var(--ls-xs-text);
	text-align: center;
}

.person-role--current .person-role__badge {
	background: var(--color-primary-100);
	color: var(--color-primary-800);
}

/* ------------------------------------ дізнатись більше про актора */

.person-press__grid {
	display: grid;
	margin-top: 40px; /* «Frame 1437255332» 4379:24140 itemSpacing. */
	gap: 24px;
	grid-template-columns: minmax(0, 1fr);
}

/* «Article Card» 4379:24141 (Variant2 at 390, Default at 1440): the headline
   in a `#F3F4F6` header, the photograph under it cut by the shared band, and
   a teal corner mark. The whole card is one link — the headline carries it. */
.person-press-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--color-neutral-100);
	overflow: hidden;
}

/* «Card Header» 4379:24148 — a 307-wide, 61-tall box 20 in from the card's
   edges; the card's footer starts at 97. */
.person-press-card__header {
	display: flex;
	box-sizing: border-box;
	align-items: center;
	padding: 20px;
	min-height: 97px;
}

.person-press-card__headline {
	width: 307px;
	max-width: 100%;
}

.person-press-card__headline a {
	color: inherit;
	text-decoration: none;
}

/* One hit area for the whole card, as the .fig's hover shows (the card, not
   the words, changes) — and still one link in the tab order. */
.person-press-card__headline a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.person-press-card__media {
	position: relative;
	aspect-ratio: 358 / 201; /* «Card Footer» 4379:24142. */
	background: var(--color-base-white);
}


/* «Divider Line» 4379:24143 — 358×65, the cut rising 35.8 % of its own
   height (measured on the frame render). */
.person-press-card__band {
	--c-poster-band-height: 65px;
	--c-poster-band-rise: 35.8%;
}

.person-press-card__more {
	position: absolute;
	bottom: 20.5px; /* «Details Link» 4379:24144 at 885.5 of a band ending at 924. */
	left: 20px;
	z-index: 1;
}

/* «Corner Accent» 4379:24146 — two teal bars in the card's top-right corner. */
.person-press-card__corner {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	box-sizing: border-box;
	width: 54.58px;
	height: 32.62px;
	border-top: 14.5px solid var(--color-primary-500);
	border-right: 8.52px solid var(--color-primary-500);
	pointer-events: none;
}

.person-press .c-view-all {
	margin-top: 48px; /* cards bottom 8726 → «View All» 4379:24354 at 8774. */
}

/* --------------------------------------------------- сцени з вистав */

/* «Vector 4» 4379:24367 — the caption band across the bottom of the big
   photograph, with the caption on it in «XS/XS text» (the shared band's own
   type is H6 semi-bold caps). The rise was measured on the frame render. */
.person-gallery .performance-gallery__caption-band {
	--c-poster-band-height: 48px;
	--c-poster-band-rise: 35.8%;

	align-items: flex-start;
	padding: 21px 0 0 12px;
	color: var(--color-neutral-800);
	font-size: var(--fs-xs-text);
	font-weight: 400;
	line-height: var(--lh-xs-text);
	letter-spacing: var(--ls-xs-text);
	text-box: trim-both cap alphabetic;
	text-transform: none;
}

/* ------------------------------------------------ робота поза театром */

.person-outside__list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* «Role Card — …» 4379:24384 — `#F3F4F6` behind a 2px teal left edge. */
.person-work {
	display: flex;
	box-sizing: border-box;
	flex-direction: column;
	gap: 20px;
	padding: 20px;
	border-left: 2px solid var(--color-primary-500);
	background: var(--color-neutral-100);
	border-radius: 3px;
}

/* At 390 the still is UNDER the text («Rectangle 6055» 4379:24387 at 9630,
   «Frame 1437254959» 4379:24388 at 9558); at 1440 it changes sides instead. */
.person-work__media {
	position: relative;
	order: 2;
	aspect-ratio: 460 / 120;
	overflow: hidden;
	background: var(--color-neutral-200);
}


.person-work__content,
.person-work__row {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.person-work__content {
	gap: 0;
}

.person-work__heading {
	display: flex;
	flex-direction: column;
}

/* ------------------------------------------------------------ 1440 */

@media (min-width: 1440px) {

	.person-hero__inner {
		grid-template-areas:
			"media crumbs"
			"media info";

		/* «Breadcrumbs» 3222:13042 is a 16-tall hug row; the list's own box is
		   taller because of the separator's 24px line-height, so the row is
		   pinned to the frame's height and the list starts at its top. */
		grid-template-rows: 16px auto;
		grid-template-columns: 500px minmax(0, 1fr);
		column-gap: 63px; /* photo right 556 → «ActorInfo» 3222:13079 at 619. */
	}

	.person-hero {
		padding-top: 24px; /* navigation bar bottom 136 → photo and crumbs at 160. */
	}

	.person-hero .breadcrumbs {
		align-self: start;
	}

	.person-hero__media {
		margin-top: 0;
		width: 500px;
		height: 500px;
		align-self: start;
	}

	/* «Vector 5» 3222:12986 — 500×90; the caption 28 in from the photo's edge. */
	.person-hero__band {
		--c-poster-band-height: 90px;

		padding-left: 28px;
	}

	.person-hero__info {
		margin-top: 38px; /* breadcrumbs bottom 176 → rank 214. */
		align-self: start; /* «ActorInfo» 3222:13079 hugs; the photo is what makes the row 500. */
	}

	.person-hero__card {
		gap: 48px; /* «Actor Profile Card» 3222:13075 itemSpacing at 1440. */
	}

	.person-hero__plate {
		gap: 32px; /* «Frame 1437255318» 4372:23879 itemSpacing at 1440. */
	}

	.person-hero__lead {
		max-width: 538px; /* «Actor Bio» 3222:13084 is a fixed 538 in a 765 column. */
	}

	.person-hero__award {
		padding: 20px 37px; /* «Award Badge» 3222:13071. */
	}

	.person-career,
	.person-facts,
	.person-awards,
	.person-roles,
	.person-press,
	.person-gallery,
	.person-outside,
	.single-person .site-footer {
		margin-top: 180px;
	}

	/* ------------------------------------------ професійний шлях */

	.person-career {
		padding-top: 20px; /* frame top 840 → «Visit Title» 3322:12462 at 860. */
	}

	.person-career__inner {
		display: grid;
		margin-left: -2px; /* the left column starts at 54, the page column at 56. */
		grid-template-columns: 541px minmax(0, 1fr);
		column-gap: 24px;
	}

	.person-career__photos {
		width: 500px;
		height: 500px;
		margin-top: 54px; /* title bottom 899 → photo 953. */
	}

	.person-career__timeline {
		margin-top: 93px; /* the entries start level with the photograph (953). */

		/* «EntryContent» 3399:9610 is a fixed 652 in a 765 entry — it overhangs
		   its own row by 13 in the frame, and by more once the accessibility
		   widget widens the year beside it. The overhang is empty (the text
		   inside is capped at the frame's 425), so it is clipped here instead
		   of being allowed to push the page a pixel wider (fix round 1 C1).
		   `clip` on one axis only: the column must stay visible vertically. */
		overflow-x: clip;
	}

	/* The frame stops drawing a carousel here: the entries are a vertical list
	   40 apart, and `per_view` is the whole list, so the module leaves every
	   slide in the window and disables the arrows. */
	.person-career__timeline .c-slider {
		--c-slider-peek: 0px;

		display: block;
	}

	.person-career__timeline .c-slider__viewport {
		overflow: visible;
	}

	.person-career__timeline .c-slider__track {
		display: flex;
		flex-direction: column;
		gap: 40px; /* «Timeline» 3426:12035 itemSpacing. */
		transform: none;
	}

	.person-career__timeline .c-slider__nav {
		display: none;
	}

	.person-timeline__entry {
		flex-direction: row;
		align-items: flex-start; /* «YearMarker» 3426:12022 is 25 tall at the entry's top. */
		gap: 17px;
	}

	/* «YearMarker» 3426:12037 — the year and the dot on one line, 109 wide. */
	.person-timeline__marker {
		min-width: 109px; /* «YearMarker» 3426:12022: year 90 + gap 7 + dot 12. */
		flex: none;
		flex-direction: row;
		align-items: center;
		gap: 7px;
	}

	/* «Rectangle 6063» 3322:12460 — 1×990 at x 721, i.e. through the dots,
	   starting 13 below the first entry. */
	.person-timeline__rule {
		top: 13px;
		left: 102px;
		width: 1px;
		height: 990px;
	}

	/* «EntryDetails» 3399:9613 is 652 wide; every «Description» inside it is a
	   fixed 425 (3399:9612), which is what decides where the text wraps. */
	.person-timeline__content {
		width: 652px;
		flex: none; /* the node overhangs its own 765 entry by 13 in the frame. */
		max-width: none;
	}

	.person-timeline__text {
		max-width: 425px;
	}

	.person-timeline__text + .person-timeline__text {
		margin-top: -4px;
	}

	.person-facts .performance-facts__title {
		width: 370px;
		max-width: 100%;
	}

	/* ---------------------------------------------------- нагороди */

	.person-awards__inner,
	.person-outside__inner {
		gap: 54px; /* title bottom 3473 → «Awards List» 3222:13191 at 3527. */
	}

	.person-award {
		flex-direction: row;
		align-items: center;
		gap: 24px;
		padding: 24px;
	}

	.person-award__content {
		flex: 1;
		gap: 12px;
	}

	.person-award__details {
		flex-direction: row;
		align-items: center;
		gap: 24px;
	}

	.person-award__name-box {
		width: 626px; /* «Award Title Container» 3222:13170. */
		flex: none;
	}

	.person-award__for-box {
		flex: 1; /* «Award Description Container» 3222:13172 fills the rest (484). */
	}

	.person-award__name,
	.person-award__for {
		width: 366px; /* the two texts 3222:13171 / 3222:13173. */
	}

	/* -------------------------------------------------------- ролі */

	.person-roles {
		position: relative;
		overflow: hidden;
	}

	.person-roles__inner {
		position: relative;
		box-sizing: border-box;
		padding: 0 var(--page-gutter);
	}

	/* «Section Label Vertical» 3327:12695 — an 84×820 column holding the word
	   turned a quarter turn anticlockwise (rotation −π/2 in the REST dump;
	   the frame render reads bottom to top), centred along its 820. */
	.person-roles__title {
		position: absolute;
		margin: 0;
		top: 0;
		left: calc(var(--page-gutter) + 8px); /* x 64 against the column's 56. */
		width: 84px;
		height: 820px;
		padding: 0;
		font-size: var(--fs-h2-m);
		line-height: var(--lh-h2-m);
		letter-spacing: var(--ls-h2-m);
	}

	.person-roles__title-text {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 820px;
		transform: rotate(-90deg) translateX(-100%);
		transform-origin: 0 0;
		text-align: center;
	}

	.person-roles__tabs {
		margin: 0 3px 54px 148px; /* tabs at x 204, list right edge 1381. */
	}

	.person-roles__tab-list {
		width: fit-content;
	}

	.person-roles__list {
		margin: 0 3px 0 148px;
	}

	.person-role {
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 24px;
		padding: 32px 24px 33px;
	}

	.person-role__info {
		display: flex;
		flex-direction: column;
		gap: 12px; /* «Role Info» 3327:12644 itemSpacing. */
	}

	.person-role__actions {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: space-between;
	}

	/* «Role Info» 3327:12644 is one 12-gap column at 1440, so the per-row
	   offsets of the 390 grid are cleared. */
	.person-roles__list .person-role__play,
	.person-roles__list .person-role__character,
	.person-role__link {
		margin-top: 0;
	}

	.person-roles__list > .person-role:first-child {
		padding-top: 33px;
	}

	/* «Actress Photo» 3327:12706 — a 290×290 still tilted 7.085° (rotation
	   0.1237 rad in the REST dump). animations.md, row «hover effect»
	   (`4497:25463`, the designer's own note on «Roles List» in the 22.09 .fig):
	   «при наведенні з'являється фото» — so the still belongs to the row the
	   pointer is on, and the frame draws it on the one row that also carries
	   the hover fill. It is centred on that row and hidden for every other, at
	   this width only (there is no hover at 390, where each card shows its own
	   photograph in the flow).

	   The node's box in the frame is its rotated bounding box (766, 4264.93,
	   323.56²); an untilted 290×290 with the same centre starts 578.78 from
	   the card's left edge, and its centre is the card's own. */
	.person-role {
		position: relative;
	}

	.person-role__media {
		position: absolute;
		z-index: 2;
		top: 50%;
		left: 578.78px;
		width: 290px;
		height: 290px;
		margin: 0;
		opacity: 0;
		transform: translateY(-50%) rotate(7.085deg);

		/* The annotation gives no timing and the .fig carries no prototype
		   transition on this node (checked with `fig-canvas.js interactions`
		   on the 22.09 file), so the still uses the timing the file gives
		   every other hover — 600 ms `cubic-bezier(0,0,0.58,1)`, which is 623
		   of its ON_HOVER transitions. */
		transition: opacity 600ms cubic-bezier(0, 0, 0.58, 1);
		pointer-events: none;
	}

	/* `:focus-within` as well as `:hover`: the card's «Детальніше» is a tab
	   stop, and a keyboard user must see the same row highlighted — the still
	   is never hover-only. */
	.person-role:hover,
	.person-role:focus-within {
		background: var(--color-neutral-100); /* «Role Card» 3327:12663 fill. */
	}

	.person-role:hover .person-role__media,
	.person-role:focus-within .person-role__media {
		opacity: 1;
	}

	/* A pointer that cannot hover (touch) would otherwise only ever see the
	   still while a link inside the row holds focus. There the row keeps the
	   frame's arrangement — «Role Info», the photograph, «Card Actions» — but
	   the photograph stands in the flow and is simply always there. */
	@media (hover: none) {

		.person-role {
			align-items: center;
		}

		.person-role__media {
			position: static;
			order: 1;
			flex: none;
			margin: 0 24px;
			opacity: 1;
			transform: rotate(7.085deg);
		}

		.person-role__actions {
			order: 2;
		}
	}

	/* The box, the type and the arrow of «Детальніше» are the shared component
	   (details-link.css); the hover is the card's, as it is on the repertoire
	   card — animations.md's «Детальніше» row, 600 ms ease-out, gap 8 → 12 and
	   the text to `--color-primary-700` (the AA substitution for `#0C9586`).
	   The hover treatment lives at this width only: below it the layout is the
	   390 one, where every card already shows its own photograph. */
	.person-role:hover .c-details-link,
	.person-role:focus-within .c-details-link {
		gap: 12px;
		color: var(--color-primary-700);
	}

	.person-role__info {
		width: 480px; /* «Role Info» 3327:12675. */
		flex: none;
		gap: 12px;
	}

	.person-role__actions {
		width: 372px; /* «Card Actions» 3327:12684. */
		flex: none;
		flex-direction: column;
		align-items: flex-end;
		justify-content: space-between;
		align-self: stretch;
		gap: 0;
	}

	/* -------------------------- дізнатись більше про актора */

	.person-press__grid {
		margin-top: 54px; /* title bottom 5383 → cards 5437. */
		gap: 24px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.person-press-card__header {
		padding: 28px;
		min-height: 117px; /* card top → «Card Footer» 3322:12470 at 117. */
	}

	.person-press-card__headline {
		width: 572px; /* «Article Title» 3234:13464 in a 596 header. */
	}

	.person-press-card__media {
		aspect-ratio: 652 / 366;
	}

	.person-press-card__band {
		--c-poster-band-height: 81px;
	}

	.person-press-card__more {
		bottom: 28px;
		left: 28px;
	}

	.person-press .c-view-all {
		margin-top: 56px;
	}

	/* ------------------------------------------- сцени з вистав */

	/* «Vector 4» 3399:9777 — 880×81, the caption in «M/M text» 24 in from the
	   photograph's left edge and 34 down the band. */
	.person-gallery .performance-gallery__caption-band {
		--c-poster-band-height: 81px;

		padding: 34px 0 0 24px;
		font-size: var(--fs-m-text);
		line-height: var(--lh-m-text);
		letter-spacing: var(--ls-m-text);
	}

	/* ---------------------------------------- робота поза театром */

	.person-work {
		flex-direction: row;
		align-items: center;
		gap: 24px;
		padding: 24px;
	}

	.person-work__media {
		width: 460px;
		height: 120px;
		flex: none;
		order: 0;
	}

	.person-work__content {
		height: 52px; /* «Frame 1437254959» 3234:13506. */
		flex: 1;
		align-self: center;
	}

	.person-work__row {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
	}

	.person-work__name {
		width: 366px; /* «Heading 3» 3322:12489. */
	}

	.person-work__role {
		width: 278px; /* «Paragraph» 3322:12492. */
		flex: none;
	}

	/* Every second plate puts the still on the right («Role Card — A Midsummer
	   Night's Dream 1» 3322:12493 …) — decoration, so the DOM keeps one order
	   and the row is reversed here (ruling R16). */
	.person-outside__list > .person-work:nth-child(even) {
		flex-direction: row-reverse;
	}
}

/* Windows High Contrast: Chromium drops author `box-shadow` entirely, and the
   rules of the role list and the box around the filter tabs are inset shadows
   (the project's convention for a Figma inside stroke). They are redrawn here
   as real edges in system colours, the way base.css does for the shared
   controls; the current tab, which is otherwise only a fill, gets the system
   selection colours. */
@media (forced-colors: active) {

	.person-roles__tab-list {
		padding: 0;
		border: 1px solid CanvasText;
		box-shadow: none;
	}

	.person-roles__tab-item + .person-roles__tab-item {
		border-left: 1px solid CanvasText;
	}

	.person-roles__tab[aria-current="page"] {
		background: Highlight;
		color: HighlightText;
	}

	.person-role {
		border-bottom: 1px solid CanvasText;
		box-shadow: none;
	}

	.person-roles__list > .person-role:first-child {
		border-top: 1px solid CanvasText;
	}
}