/* «Історія театру» (page-history.php, ТЗ §4.7). Figma «Історія театру (просто
   перегляд)» 3776:11373 at 1440, «mob» 4394:27597 at 390. Column: --page-gutter
   (container.css) — the client compares whole pages at 1905 and 1440, so this
   page lands on the same two edges as every other one of plan 06.

   Three parts: the banner (.history-hero), the history_event timeline
   (.c-history-timeline — the frame's own free-form scatter at both widths,
   no carousel) and «Театр сьогодні» (.c-history-today, 3776:10212). */

/* ==================================================================== Hero */

/* «Hero Section» `3776:10170` — 1440×816, of which the transparent navigation
   bar is the top 136 — and the top of `4394:27304` at 390. Nothing here is in
   auto-layout in the frame either: the breadcrumbs, the text column, the
   theatre's photograph and the two archival photographs are placed against the
   section's own coordinates, so they are placed the same way here, inside a box
   of the frame's own height. `--page-gutter` already resolves to the same
   1328-wide column at 1440 and at 1905, so one set of numbers serves both edges
   the client compares. */

.history-hero {
	position: relative;

	/* «Title Line 1/2» measures #272B30 (--color-neutral-800) and «Subtitle»
	   #12AD99 on a frame with no fill behind this row at all (figma-spec.py,
	   node 3776:11373) — a white hero with dark type, not the dark banner
	   with white type this section first shipped with (fix: the axe
	   color-contrast run below caught the breadcrumbs, invisible on that
	   guess at #272B30). */
	background: var(--color-base-white);
	overflow: hidden;
}

/* 390: «Hero Content» ends at 487 of the page, 411 below the navigation bar
   the site header draws itself. 1440 (below): 816 − 136. */
.history-hero__inner {
	position: relative;
	height: 411px;
	margin-inline: var(--page-gutter);
}

/* «Breadcrumb» `3776:10181`/`4394:27437` sits flush with the section's
   top-left corner — the component's own `ol` is the frame's box
   (tests/design/breadcrumbs), so the `nav` around it carries no padding. */
.history-hero .breadcrumbs {
	position: absolute;
	top: 0;
	left: 0;

	/* `display: flex` and not `block`: the `ol` inside is `inline-flex`, so a
	   block `nav` gives it an inline strut taller than the row itself and
	   pushes it 6px (1440) / 4px (390) below the corner the frame puts it
	   in. */
	display: flex;
	padding: 0;
}

/* «Hero Content» 17,172 357×315 at 390 / 366,240 709×435 at 1440 — the 1px
   between the frame's own x and the page gutter is the frame's rounding, not
   a second column. */
.history-hero__content {
	position: absolute;
	top: 96px;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}

/* «Subtitle» `4394:27349` is «H6/H6» at 390 and «H4» at 1440 (`3776:10173`) —
   two different type styles, not one token that happens to change, so the size
   is switched with the breakpoint rather than read from one of them. 275 wide
   at both widths. */
.history-hero__kicker {
	max-width: 275px;
	margin: 0;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--fs-h6);
	line-height: var(--lh-h6);
	text-transform: uppercase;

	/* Not cap-trimmed at 390: «H6/H6» there draws its two lines as a flat
	   2×20 box (`4394:27349` is 40 tall), while «H4» at 1440 is trimmed
	   (`3776:10173` is 61 = 36 + cap). The frame's own two styles differ;
	   the trim is switched with them, below. */
	text-box: normal;

	/* The frame's own #12AD99 (--color-primary-500) measures 2.81:1 on white
	   — same swap as the timeline year/stat values. Below 1440 the lead is
	   «H6/H6» 20px at weight 600, which WCAG does not count as large text
	   (bold starts at 700), so --color-primary-600's 3.71:1 is short of 4.5
	   there and the next step down, --color-primary-700 (5.5:1), carries it;
	   from 1440 the same lead is «H4» 36px — large text, 3:1 — and stays on
	   -600, the nearest passing step to the frame's own colour. */
	color: var(--color-primary-700);
}

/* `wp_kses_post()` keeps the `<p>` the save-time paste barrier wraps plain text
   in (page-history.php) — reset so both read as the frame's own single text
   node, not a paragraph with its own margin. */
.history-hero__kicker p,
.history-hero__description p {
	margin: 0;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
}

/* The H1 is one element carrying the frame's two text nodes («Title Line 1» /
   «Title Line 2»), split in `podil_history_title_lines()`. 16 below the kicker
   and 12 between the lines at 390 («Title Block» gap 16, «Hero Content» gap
   12); 20 and 23 at 1440. */
.history-hero__title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	margin: 16px 0 0;
	font-family: var(--font-title);
	font-weight: 400;
	font-size: var(--fs-h1-m);
	line-height: var(--lh-h1-m);
	letter-spacing: var(--ls-h1-m);
	text-transform: uppercase;

	/* «Title Line 1/2» — #272B30, the token's own value. */
	color: var(--color-neutral-800);
}

/* Kilok's own cap height is 0.70em — «Title Line 1/2» is exactly 0.7 × the
   font size at both widths (84 of 120, 42 of 60). The substitute (Exo 2 at
   `size-adjust: 95.5%`, fonts.css) caps at 0.659em, so a trimmed line box
   comes out 5px short at 120px and everything under it — the second line, the
   paragraph — climbs by that much and then by twice it. The box keeps the
   design's own height; the glyphs stay the substitute's, and the slack falls
   under the baseline where the real font's descender space would be. */
.history-hero__title-line {
	min-height: 0.7em;
	text-box: trim-both cap alphabetic;
}

/* «Title Line 2» is a 224-wide box flush with the column's right edge at 390
   («Frame 1437255342» 150,282) and 452 wide at 1440 («Title and Description»
   623,428) — centred inside it, as the frame sets it. */
.history-hero__title-line--second {
	align-self: flex-end;
	width: 224px;

	/* The frame's box is fixed, but at 150 % text one word no longer fits in
	   it and `overflow: hidden` on the section would cut the title rather
	   than show it — the box grows leftwards instead, staying flush right. */
	min-width: max-content;
	text-align: center;
}

/* «Hero Description» — the paragraph under the second line, sharing its left
   edge: 224 wide at 390 (`4394:27340`), 397 at 1440 (`3776:10177`), 32 / 40
   below it. */
.history-hero__description {
	width: 224px;
	margin: 32px 0 0 auto;
	font-family: var(--font-body);
	font-size: var(--fs-m-text);
	line-height: var(--lh-m-text);
	text-box: trim-both cap alphabetic;
	color: var(--color-neutral-800);
}

/* «Hero Image» `3776:10180` — the theatre's own photograph, 56,470 449×309 at
   1440. The 390 frame draws no banner photograph at all (the two archival ones
   carry the composition there), so it is not rendered below 1440 rather than
   squeezed in somewhere the design has no place for. */
.history-hero__media {
	display: none;
}

.history-hero__photo,
.history-hero__decor-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* «Background Image Right» `4394:27348` 224,96 150×100 above and «Background
   Image Left» `4394:27365` 16,317 100×99 below — the frame's own names, which
   match neither side at either width; what holds is which of the two is
   higher. */
.history-hero__decor {
	position: absolute;
}

.history-hero__decor--top {
	top: 20px;
	right: 0;
	width: 150px;
	height: 100px;
}

.history-hero__decor--bottom {
	top: 241px;
	left: 0;
	width: 100px;
	height: 99px;
}

@media (min-width: 1440px) {

	.history-hero__inner {
		height: 680px;
	}

	.history-hero__content {
		top: 104px;

		/* «Hero Content» 366..1075 inside the 56..1384 column — 310 of slack
		   on the left and 309 on the right, which is what «centred» means
		   here; the 435 is the frame's own hug height, 13 of which is slack
		   under the paragraph. */
		left: 50%;
		width: 709px;
		height: 435px;
		transform: translateX(-50%);
	}

	.history-hero__kicker {
		font-size: var(--fs-h4);
		line-height: var(--lh-h4);
		letter-spacing: var(--ls-h4);
		text-box: trim-both cap alphabetic;
		color: var(--color-primary-600);
	}

	.history-hero__title {
		gap: 23px;
		margin-top: 20px;
	}

	.history-hero__title-line--second {
		width: 452px;
	}

	.history-hero__description {
		width: 397px;

		/* 709 − 452: the second title line's own left edge, which the
		   paragraph shares. */
		margin: 40px 0 0 257px;
	}

	.history-hero__media {
		position: absolute;
		top: 334px;
		left: 0;
		display: block;
		width: 449px;
		height: 309px;
	}

	.history-hero__decor--top {
		top: 23px;
		right: auto;
		left: 903px;
		width: 314px;
		height: 209px;
	}

	.history-hero__decor--bottom {
		top: 473px;
		left: 1014px;
		width: 209px;
		height: 207px;
	}
}

/* ============================================================== Timeline */

/* «Section Heading» sits 180 below «Key Moments Section»'s own top at 1440
   (`3776:11373`: section 816, heading 996) and 154 below the banner's last
   element at 390 (hero content ends at 487, heading at 641) — the frame's own
   step down to this heading, where the 64 this rule used to carry was a guess.
   The section's total height cannot match the frame: there the «Ключові
   моменти» band is a mock collage of eleven photographs, here it is the
   `history_event` records the theatre actually has. */
.c-history-timeline {
	padding: 154px 0 80px;

	/* The big year keeps the frame's own box (261 wide at 390 for a 140px
	   line), but Exo 2's digits are wider than Kilok's and run ~65px past it;
	   the section clips that bleed at its own edge instead of letting it widen
	   the page. `clip`, not `hidden`: it must not become a scroll container
	   (parallax.css) and the sticky year must keep working. */
	overflow-x: clip;
	background: var(--color-base-white);
}

@media (min-width: 1440px) {

	.c-history-timeline {
		padding: 180px 0;
	}
}

.c-history-timeline__inner {
	padding-inline: var(--page-gutter);
}

/* «Section Heading» and «Section Subheading» are not a stacked pair: the
   heading sits at the column's left edge and the badge hangs off to the right
   at 1440 (`3776:10208`/`3776:10209`) and below-right at 390
   (`4394:27381`/`4394:27444`), both at the section's own coordinates. The
   header is the positioning box for it; at 390 it also has to be tall enough
   to hold the badge, which reaches 52px below the heading's own bottom. */
.c-history-timeline__header {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 263px;

	/* «Frame 1437255351» starts at 928, the heading's own box ends at 828 and
	   the badge at 904 — 24 below the taller of the two. At 1440 the same step
	   is 54 (block «A» at 1201, heading bottom 1147). */
	margin-bottom: 24px;
}

@media (min-width: 1440px) {

	.c-history-timeline__header {

		/* «Section Heading» is 151 tall in the frame and 148.9 in Exo 2 (the
		   cap-height the substitute gives a 56px line); the block's own box
		   keeps the frame's height so the scatter below starts at 1201. */
		min-height: 151px;
		margin-bottom: 54px;
	}
}

.c-history-timeline__heading {
	margin: 0;
	max-width: 900px;
	font-family: var(--font-title);
	font-weight: 400;
	font-size: var(--fs-h2-s);
	line-height: var(--lh-h2-s);
	letter-spacing: var(--ls-h2-s);
	text-transform: uppercase;
	text-box: trim-both cap alphabetic;

	/* Real page overflow at 390+150%+dyslexia (23px,
	   `document.documentElement.scrollWidth`) traced to this
	   heading (`el.scrollWidth > el.clientWidth`, 397 vs
	   358) — a long word in «Ключові моменти, що
	   сформували театр…» doesn't break at that scale. Same
	   fix as `.c-history-today__stat-label` (round 1, I4).
	   Confirmed NOT the footer wordmark, a red herring from
	   an over-broad `[class*="history-"]` check that never
	   queried `el.scrollWidth`, only
	   `getBoundingClientRect()`, which this overflow
	   doesn't trip. */
	overflow-wrap: anywhere;
	color: var(--color-neutral-800);
}

/* The badge's own box — «Section Subheading» 211,852 176.47×51.77 at 390
   (relative to the section's own 487 and the column's 16), 1149.99,1044
   260.70×75.75 at 1440. A plain box: the tilt and the arrow's overhang live
   on the children, so this one keeps the frame's own numbers. */
.c-history-timeline__subheading {
	position: absolute;
	top: 211px;

	/* Anchored on the right, not the left: in the frame the badge hangs 13.47
	   past the column's right edge at 390 (195 + 176.47 against the 358-wide
	   column) and 26.69 past it at 1440 — keeping that overhang instead of
	   the left offset is also what keeps the badge on screen at 320 and 360,
	   which the design does not draw. */
	right: -13.47px;
	width: 176.47px;
	height: 51.77px;
	margin: 0;
}

/* «Arrow Icon» `4394:27446` / `3776:10211`, placed by the box the designer's
   own PDF export draws it in (22.97×34.10 at 390, 41.76×51.80 at 1440) —
   larger than the node's own 2.88×26.23 path box, because the noise texture
   bleeds past the stroke, and free to hang left of the badge's box as it does
   in the frame. */
.c-history-timeline__subheading-arrow {
	position: absolute;
	top: -0.7px;
	left: -9.68px;
	width: 22.97px;
	height: 34.1px;
}

/* «Subheading Text» — 159.75 wide unrotated, two lines, tilted 6.2626° (the
   group's own `rotation` of 0.1093 rad, counter-clockwise), and positioned by
   the centre its rotation turns around so the tilted box lands on the frame's
   own 225.13,853.55 162.34×50.22. The node carries no named text style: the
   size and the 16.24 line-height are its own, set on the layer. */
.c-history-timeline__subheading-text {
	position: absolute;
	top: 10.42px;
	left: 15.42px;
	display: block;
	width: 159.75px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--fs-s-text);
	line-height: 16.24px;
	text-transform: uppercase;
	transform: rotate(-6.2626deg);

	/* «Subheading Text» is #0C9586 (--color-primary-600) — 3.71:1 on white,
	   which clears 3:1 for large text but not the 4.5:1 body floor. At 390 it
	   is 14px bold, short of the 18.66px-bold «large» cutoff, so it takes
	   --color-primary-700 (5.49:1); at 1440 it is 20px bold — large text —
	   and keeps the frame's own step (below). */
	color: var(--color-primary-700);
}

@media (min-width: 1440px) {

	.c-history-timeline__subheading {
		top: 48px;
		right: -26.69px;
		width: 260.7px;
		height: 75.75px;
	}

	.c-history-timeline__subheading-arrow {
		top: -1.45px;
		left: -18.33px;
		width: 41.76px;
		height: 51.8px;
	}

	.c-history-timeline__subheading-text {
		top: 15.02px;
		left: 22.79px;
		width: 236px;
		font-size: var(--fs-m-text);
		line-height: var(--lh-m-text);
		color: var(--color-primary-600);
	}
}

/* The scatter. Every box is placed at the frame's own x/y/w/h inside its own
   block, because the frame places them the same way — «Key Moments Section»
   `3776:10189` is not a grid and not a stack: photographs of four sizes sit
   left and right of the paragraphs. The cycle repeats every three blocks and
   each step is a photo count, so a block's step is its own position in the
   list (timeline-entry.php).

   The list's own left edge is the page column's (`--page-gutter`), so every
   `left` below is the frame's x minus 16 at 390 and minus 56 at 1440. */
.c-history-timeline__list {
	display: flex;
	flex-direction: column;

	/* «Frame 1437255351» gap 100 at 390; 180 at 1440 (2188 − 2008, the same
	   step between all five blocks). */
	gap: 100px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-history-timeline__entry {
	position: relative;

	/* Its own formatting context: the year is the one child still in flow (it
	   has to be, to be sticky), and its 198/115 top margin would otherwise
	   collapse out through the block and push the whole list down. */
	display: flow-root;
}

/* «Frame 1437255347/1437255348/1437255349» own heights at 390. */
.c-history-timeline__entry--a {
	height: 553px;
}

.c-history-timeline__entry--b {
	height: 552.4px;
}

.c-history-timeline__entry--c {
	height: 476.4px;
}

/* «Frame 1437255345» 65,928 261×296, digits bottom-aligned inside it: «19» at
   65,1126 126×98 and «87» at 191,1126 — one 140px line, cap-trimmed, 198 below
   the block's own top. Sticky, so it holds while its block scrolls and the
   next block's year replaces it; `top` clears the sticky site header.

   That offset used to read `--site-header-height`, a variable NOTHING in the
   theme ever defines (ПР-12's finding, ПР-19): the year pinned at the
   fallback's 76 + 16 = 92 at every width. It is the pair `header-reveal.js`
   publishes — `--podil-header-h` (the header's measured height while it is
   sticky, 0 otherwise) and `--podil-header-shift` (0 while it is shown, −h
   while it is hidden) — exactly as `.c-sticky-title` (section-title.css) reads
   them, so the year travels WITH the hide-on-scroll header instead of standing
   still under where the header used to be. Measured before the fix: at 1440 the
   header is 136 tall, so with the header shown the year sat 44 px BEHIND it
   (gap −44), and with it hidden 76 px lower than the frame's own 16. Now the
   gap is that 16 in both states, at 1440 and at 390.

   The 16 is this page's own, not the shared `--c-sticky-title-gap` default of
   24 — and the class itself is not worn here: the year is the timeline's
   counter (its own margin, z-index and 140px line inside the entry's box), not
   a section heading, and history.css does not depend on section-title.css. The
   `transition` is the shared one, so the pinned year and the header move as a
   single thing; base.css zeroes it with every other duration under reduced
   motion. Sticky is layout, not animation, so it stays on there (the same
   ruling animations.md carries for `4549:26031`). */
.c-history-timeline__year {
	position: sticky;
	top: calc(var(--podil-header-h, 0px) + var(--podil-header-shift, 0px) + 16px);
	transition: top 300ms cubic-bezier(0, 0, 0.58, 1);

	/* Above the photographs, the way the frame stacks them: «Year Counter»
	   `3776:10283` is painted after the whole page, not inside it. It matters
	   in code and not in the frame, because Kilok's digits are narrower than
	   the substitute's — the frame's own 389px box holds «1987» with room to
	   spare, and Exo 2 runs about 50px past it into the photograph beside it. */
	z-index: 1;
	width: 261px;
	margin: 198px 0 0 49px;
	font-family: var(--font-title);
	font-weight: 400;
	font-size: 140px;
	line-height: 200px;
	letter-spacing: var(--ls-h1-m);

	/* Kilok caps at 0.70em — «Century Prefix 19» is 140 of a 200px line and
	   98 of a 140px one — where Exo 2 caps at 0.659em; the box keeps the
	   design's own height (the same residual the banner's title lines carry). */
	min-height: 0.7em;
	text-box: trim-both cap alphabetic;

	/* The frame's own #12AD99 (--color-primary-500) measures 2.81:1 on white,
	   under the 3:1 AA floor for large text — swapped for the nearest passing
	   token per figma-rules.md (designer-questions.md carries the line). */
	color: var(--color-primary-600);
}

.c-history-timeline__title {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	font-family: var(--font-title);
	font-weight: 400;
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
	letter-spacing: var(--ls-h4);
	text-transform: uppercase;
	text-box: trim-both cap alphabetic;
	color: var(--color-neutral-800);
}

/* «Частина театрального вечора…» 16,1207 340×91 at 390 — the paragraph under
   the block's first photograph; «Frame 1437255350» stacks two of them 16
   apart in the `--c` step. */
.c-history-timeline__text {
	position: absolute;
	top: 279px;
	left: 0;
	display: flex;
	flex-direction: column;

	/* «Frame 1437255350» itemSpacing — 16 at 390, 20 at 1440; only the `--c`
	   step has two paragraphs to space. */
	gap: 16px;
	width: 340px;
	font-family: var(--font-body);
	font-size: var(--fs-m-text);
	line-height: var(--lh-m-text);
	color: var(--color-neutral-800);
}

.c-history-timeline__text p {
	margin: 0;

	/* leadingTrim=CAP_HEIGHT on «M/M text» here, as everywhere else on this
	   page: the frame's paragraph box is 91 of five 20px lines (134 of six
	   24px ones at 1440), not the full line boxes. */
	text-box: trim-both cap alphabetic;
}

.c-history-timeline__entry--b .c-history-timeline__text,
.c-history-timeline__entry--c .c-history-timeline__text {
	top: 278.4px;
}

/* «Frame 1437255350» is 358 wide and holds two 340-wide paragraphs — the only
   step where the block and its text are not the same box. */
.c-history-timeline__entry--c .c-history-timeline__text {
	width: 358px;
}

.c-history-timeline__entry--c .c-history-timeline__text p {
	width: 340px;
}

/* Photographs: the box is the frame's own, the picture fills it. `height` is
   set on every one of them — `wp_get_attachment_image()` prints the uploaded
   file's own size as presentational attributes, and without a height of its
   own here the attribute wins and the photograph renders as a tall strip
   (client fix ПР-7). */
.c-history-timeline__photo {
	position: absolute;
	display: block;
	object-fit: cover;
}

.c-history-timeline__entry--a .c-history-timeline__photo--1,
.c-history-timeline__entry--b .c-history-timeline__photo--1,
.c-history-timeline__entry--c .c-history-timeline__photo--1 {
	top: 0;
	left: 0;
	width: 358px;
	height: 247px;
}

.c-history-timeline__entry--b .c-history-timeline__photo--1,
.c-history-timeline__entry--c .c-history-timeline__photo--1 {
	height: 246.4px;
}

.c-history-timeline__entry--a .c-history-timeline__photo--2 {
	top: 402px;
	left: 0;
	width: 122px;
	height: 84px;
}

.c-history-timeline__entry--a .c-history-timeline__photo--3 {
	top: 402px;
	left: 138px;
	width: 220px;
	height: 151px;
}

.c-history-timeline__entry--b .c-history-timeline__photo--2 {
	top: 401.4px;
	left: 138px;
	width: 220px;
	height: 151px;
}

/* Below 390 the design draws nothing, and the frame's own boxes (a 358-wide
   photograph in a 326-wide column) would run off the screen — so the scatter
   falls back to what it is made of: the same boxes, in one column, in reading
   order. Everything here is written as the frame's own proportions, not as new
   numbers. */
@media (max-width: 389px) {

	.c-history-timeline__list {
		gap: 64px;
	}

	.c-history-timeline__entry,
	.c-history-timeline__entry--a,
	.c-history-timeline__entry--b,
	.c-history-timeline__entry--c {
		display: flex;
		flex-direction: column;
		gap: 16px;
		height: auto;
	}

	.c-history-timeline__year {
		order: -1;
		width: auto;
		margin: 0;

		/* 140px of digits need 261 of the frame's 358-wide column — the same
		   share of a narrower one. */
		font-size: 38vw;
		line-height: 1.1;
	}

	.c-history-timeline__text,
	.c-history-timeline__entry--c .c-history-timeline__text,
	.c-history-timeline__entry--c .c-history-timeline__text p,
	.c-history-timeline__photo,
	.c-history-timeline__entry--a .c-history-timeline__photo--1,
	.c-history-timeline__entry--b .c-history-timeline__photo--1,
	.c-history-timeline__entry--c .c-history-timeline__photo--1,
	.c-history-timeline__entry--a .c-history-timeline__photo--2,
	.c-history-timeline__entry--a .c-history-timeline__photo--3,
	.c-history-timeline__entry--b .c-history-timeline__photo--2 {
		position: static;
		width: 100%;
		height: auto;
	}

	.c-history-timeline__photo {
		aspect-ratio: 358 / 247;
	}

	.c-history-timeline__entry--a .c-history-timeline__photo--2 {
		aspect-ratio: 122 / 84;
	}

	.c-history-timeline__entry--a .c-history-timeline__photo--3,
	.c-history-timeline__entry--b .c-history-timeline__photo--2 {
		aspect-ratio: 220 / 151;
	}
}

@media (min-width: 1440px) {

	.c-history-timeline__list {
		gap: 180px;
	}

	/* The three steps' own heights at 1440: 1201→2008, 2188→2850, 3030→3477. */
	.c-history-timeline__entry--a {
		height: 807px;
	}

	.c-history-timeline__entry--b {
		height: 662px;
	}

	.c-history-timeline__entry--c {
		height: 447px;
	}

	/* «Century Prefix 19» + «Suffix 87» 543.5,1316 — one 200px line, 115
	   below the first block's own top, 487.5 into the column. */
	.c-history-timeline__year {
		width: 389px;
		margin: 115px 0 0 487.5px;
		font-size: 200px;
	}

	.c-history-timeline__text {
		top: 534px;
		left: 113px;
		width: 314px;
	}

	.c-history-timeline__entry--b .c-history-timeline__text {
		top: 0;
	}

	/* «Moment Description Block» 963,3030 418×240 — the `--c` step puts its
	   two paragraphs to the right of the photograph, not under it. */
	.c-history-timeline__entry--c .c-history-timeline__text,
	.c-history-timeline__entry--c .c-history-timeline__text p {
		top: 0;
		left: 907px;
		width: 418px;
	}

	.c-history-timeline__entry--c .c-history-timeline__text {
		gap: 20px;
	}

	.c-history-timeline__entry--a .c-history-timeline__photo--1 {
		top: 0;
		left: 789px;
		width: 536px;
		height: 369px;
	}

	.c-history-timeline__entry--a .c-history-timeline__photo--2 {
		top: 182px;
		left: 2px;
		width: 425px;
		height: 292px;
	}

	.c-history-timeline__entry--a .c-history-timeline__photo--3 {
		top: 591px;
		left: 676px;
		width: 314px;
		height: 216px;
	}

	.c-history-timeline__entry--b .c-history-timeline__photo--1 {
		top: 0;
		left: 676px;
		width: 649px;
		height: 447px;
	}

	.c-history-timeline__entry--b .c-history-timeline__photo--2 {
		top: 370px;
		left: 2px;
		width: 425px;
		height: 292px;
	}

	.c-history-timeline__entry--c .c-history-timeline__photo--1 {
		top: 0;
		left: 2px;
		width: 649px;
		height: 447px;
	}
}

.c-history-timeline__empty {
	margin: 0;
	padding: 24px;
	font-family: var(--font-body);
	font-size: var(--fs-m-text);

	/* --color-neutral-500 on --color-neutral-100 measures 4.32:1, under the
	   4.5:1 AA floor for this body-text size — the next token up passes. */
	color: var(--color-neutral-600);
	background: var(--color-neutral-100);
	border-radius: 4px;
}

.c-history-timeline__empty a {
	color: var(--color-primary-600);
}


/* ================================================================ Today */

.c-history-today {

	/* «Visit Title» y=120 inside the 2808-tall 390 section, whose last block
	   ends at 2688 — 120 above and below (`4394:27495`); at 1440 the same
	   pair is 180/180 («Visit Title» y=180, block «3» ends at 1877 of 2057 —
	   `3776:10212`). The 96px bottom this rule used to carry was in neither
	   frame and left the section 84px short. */
	padding: 120px 0;
	background: var(--color-base-white);
}

.c-history-today__inner {
	padding-inline: var(--page-gutter);
}

/* «Visit Title» (483 wide) beside «Key Moment» (487 wide, `3776:10212`): the
   shared `section-title` component stacks heading above intro by default
   (its own vertical-pair composition, section-title.css's own docblock) — a
   two-column row is this section's own grid, hooked through the `class` arg
   the component already exposes for exactly this (its docblock: "does NOT
   own the two-column geometry of any one section"). */
@media (min-width: 1440px) {

	.c-history-today {
		padding: 180px 0;
	}

	.c-history-today__header {
		display: grid;

		/* «Visit Title» 56→539 and «Key Moment» 733→1220 inside a 1328-wide
		   content box: two fixed columns 194px apart with the remaining 164
		   left empty on the right, not a pair of stretched fractions (which
		   put «Key Moment» 3.7px early). */
		grid-template-columns: 483px 487px;
		column-gap: 194px;
		justify-content: start;

		/* «Visit Title» 180→331 and «Key Moment» 245→331 (`3776:10212`):
		   the pair is aligned on its BOTTOM edge, not its top. */
		align-items: end;
	}

	.c-history-today__header .c-section-title__intro {
		margin-top: 0;
	}
}

.c-history-today__block {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;

	/* «1»/«2» pad 32/16/32/16 at 390 (`4394:27495`) — 32px only from 1440 up
	   (below). */
	padding: 32px 16px;
	background: var(--color-neutral-100);
}

/* «3» (team) pads 32/20/32/20 at 390 — its own value, not blocks 1/2's. */
.c-history-today__block:nth-child(4) {
	padding: 32px 20px;
}

/* «Frame 1437255159» (block 2) carries a 4px white top border at both widths
   — the frame render shows 28px of white between blocks 1 and 2 against 24
   everywhere else, and Figma counts that inside border in the frame's own
   height (593 against the 589 its padding and children add up to). Outside
   the padding box, as in the frame. */
.c-history-today__block:nth-child(3) {
	border-top: 4px solid var(--color-base-white);
}

/* Block 1's own internal gap is 32 at 390 (node «1», `4394:27495`), not the
   20 blocks 2/3 use — an inconsistency in the frame itself, not normalised
   away; 1440 resets it to match 2/3 below. */
.c-history-today__block:nth-child(2) {
	gap: 32px;
}

@media (min-width: 1440px) {

	.c-history-today__block,
	.c-history-today__block:nth-child(4) {
		padding: 32px;
	}

	.c-history-today__block:nth-child(2) {
		gap: 20px;
	}

	/* «Group 48» — the same 54.58×32.62 teal corner the project already
	   draws on the halls scheme (`3648:13080`) and the press card
	   (`4379:24146`): an 8.52 bar down the right edge and a 14.5 bar along
	   the top, flush with the block's top-right corner (`3776:10222`,
	   `3776:10259`, `3776:10266` — one per block). The 390 frame
	   (`4394:27495`) draws none, so it starts at 1440 with the rest of this
	   section's desktop composition. */
	.c-history-today__block::after {
		content: "";
		position: absolute;
		inset: 0 0 auto auto;
		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;
	}
}

/* Header→block1 385−331=54px («1» frame y − Visit Title bottom); block→block
   691−667=24px / 1308−1284=24px («2»/«3» frame y − previous block bottom) —
   two different gaps, not one repeated (review fix round 1, y-DRIFT). The 390
   frame's own header→block1 step is 32 (`4394:27495`: «1» y 370 − «Key
   Moment» bottom 338), which the flat 54 pushed the whole section 22px down
   by. */
.c-history-today__header {
	margin-bottom: 32px;
}

@media (min-width: 1440px) {

	.c-history-today__header {
		margin-bottom: 54px;
	}
}

.c-history-today__block + .c-history-today__block {
	margin-top: 24px;
}

.c-history-today__block-head {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Block 1's head gap is 12 at 390 («1»/«Frame 1437255160», `4394:27495`)
   where blocks 2/3 use 16 — the same kind of frame-level inconsistency as
   its outer gap above, reproduced rather than normalised; 1440 puts all
   three back on 16. */
.c-history-today__block:nth-child(2) .c-history-today__block-head {
	gap: 12px;
}

@media (min-width: 1440px) {

	.c-history-today__block:nth-child(2) .c-history-today__block-head {
		gap: 16px;
	}
}

/* Stacked at 390 (`Frame 1437255184`/`1437255160` mobile: flex-col gap 24);
   text and link share one row only at 1440+ (below). */
.c-history-today__block-row {
	display: flex;
	flex-direction: column;

	/* «View Schedule Link» is `w:hug` in the frame — as a stretched flex
	   item the link box spanned the whole row and put its arrow at the far
	   right instead of 8px after the words. */
	align-items: flex-start;
	gap: 24px;
}

@media (min-width: 1440px) {

	.c-history-today__block-row {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		gap: 16px;
	}
}

.c-history-today__block-title {
	margin: 0;
	font-family: var(--font-title);
	font-weight: 400;
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	text-transform: uppercase;
	text-box: trim-both cap alphabetic;
	color: var(--color-neutral-800);
}

.c-history-today__block-text {
	margin: 0;
	max-width: 733px;
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	line-height: var(--lh-s-text);
	color: var(--color-neutral-800);
}

.c-history-today__stats {
	display: grid;

	/* «Frame 1437255167» (`4394:27495`/«1») stacks the four tiles in ONE
	   column at 390 (326-wide tiles, `gap: 16`) and lays them in a row of
	   four at 1440 — `repeat(auto-fit, minmax(140px, 1fr))` wrapped to two
	   157px columns at 390 instead (re-review 3), because the minmax floor
	   is far below the frame's own tile width. The frame draws no 768, so
	   the halls list's own two-column step is mirrored there. */
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-history-today__stat {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;

	/* «Frame 1437254912» is `justify=space-between` in tiles 3/4 and
	   `gap: 12` in tiles 1/2 — one rule covers both: where the content
	   fills the card the two read identically, and where it does not
	   («нагород», one line) the label drops to the card's bottom edge as
	   the frame draws it (`3776:10237` y 597, not 575). */
	justify-content: space-between;
	gap: 12px;

	/* The four tiles are `<li>` (no UA margin), but the team block's own
	   «47 людей» card carries the same class on a `<p>` — its default
	   `1em` UA margin placed the absolutely positioned card's MARGIN box at
	   `bottom: 24px` at 1440 and pushed the border box 20px further up
	   (re-review 3: the −25.7px y-drift blamed on rounding for two rounds). */
	margin: 0;
	padding: 16px;
	background: var(--color-base-white);
}

/* Tiles 3 and 4 are `h:fixed` 113 in the frame at BOTH widths
   («Frame 1437255167»/«1437255168»), while 1/2 hug (113 at 1440, where the
   row stretches them; 100 at 390). A floor, not a fixed height, so a longer
   label still grows the card. */
.c-history-today__stat:nth-child(n+3) {
	min-height: 113px;
}

.c-history-today__stat-value {
	font-family: var(--font-title);
	font-weight: 400;
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	text-box: trim-both cap alphabetic;

	/* Same swap as `.c-history-timeline__year` — 2.81:1 on white, under the
	   3:1 AA floor for this large size. */
	color: var(--color-primary-600);
}

.c-history-today__stat-label {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--fs-s-text);
	line-height: var(--lh-s-text);
	text-transform: uppercase;
	color: var(--color-neutral-800);

	/* «Frame 1437254912» labels are a fixed 145px box (hug height) — at the
	   1440 column width (301px) the text fit on one line instead of the
	   frame's own two (height 22 measured vs 44 spec — review fix round 1,
	   I3). `overflow-wrap` is not the 145px box's own rule but this
	   component's: the same tight column at 390 under ≥150% text has no
	   token to fall back on and the un-breakable word overflowed into the
	   sibling card, painted over by its opaque background (I4). */
	max-width: 145px;
	overflow-wrap: anywhere;
}

.c-history-today__halls {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-history-today__hall {
	box-sizing: border-box;
	position: relative;
	display: flex;
	align-items: flex-end;

	/* «Hall Image» pads 16 on all four sides and puts its caption at the
	   bottom (`justify=end`) — the padding used to live on the caption
	   itself, which left the card's own box at 0 and the caption 16px
	   taller than the frame's. The photo and the scrim are `inset: 0`
	   absolutely, so they ignore it. */
	padding: 16px;

	/* «Hall Image» 326×216.997 in «Halls Container» 326×445.993 at 390
	   (`4394:27495`/«2»: 2×216.997 + 12 gap); the 420 the comment used to
	   carry is «Halls Container»'s own 1440 height (`3776:10212`) and was
	   applied at every width (re-review 3). */
	min-height: 217px;
	overflow: hidden;
}

/* The layer the shared `c-parallax` moves (`4549:26036`): its own `position`,
   `top` and `height` come from parallax.css, so this rule only says what the
   picture is — 40px of travel, the card value the rest of the site uses, on a
   box that already clips and already has its own height, so nothing shifts. */
.c-history-today__hall-photo {
	--c-parallax-travel: 40px;

	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* «Hall RoundedRectangle» — the frame's own gradient scrim under the title
   (black 0% → 80% opacity, ≈148px of a 420px-tall card): a text-shadow alone
   left white text at 1.74:1 on the photo (axe color-contrast), the scrim is
   what the design already draws to make it readable, not an invented effect. */
.c-history-today__hall::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	height: 35%;
	background: linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 80%));
	pointer-events: none;
}

.c-history-today__hall-title {
	position: relative;
	z-index: 2;

	/* «Frame 1437255158» caps the caption box at 275 (the long hall name
	   wraps inside it); «Hall Details Container» hugs below that. */
	max-width: 275px;
	font-family: var(--font-title);
	font-size: var(--fs-h6);
	line-height: var(--lh-h6);
	text-box: trim-both cap alphabetic;
	text-transform: uppercase;
	color: var(--color-base-white);
}

/* High contrast (a11y-themes.css): the token remap alone doesn't reach this
   title — `color` is the literal `--color-base-white` (never remapped, by
   design: white text on a dark surface stays white either way), but there
   is no *solid* `background-color` behind it for the panel to measure
   against — the "background" is a photo plus a semi-transparent gradient,
   neither of which is a CSS `background-color` the checker (or a real
   high-contrast user relying on a predictable surface) can count on. Same
   fix pattern a11y-themes.css already uses elsewhere: give the surface an
   opaque token background and stop relying on the photo for legibility
   while the mode is on — `filter: none` on `img` (a11y-themes.css) keeps
   photos visible everywhere else on the site, but a caption *directly on*
   one is a different case from decoration, so this hides it here instead
   of leaving unpredictable contrast under the "every photo stays" rule. */
html[data-contrast="high"] .c-history-today__hall {
	background-color: var(--color-neutral-950);
}

html[data-contrast="high"] .c-history-today__hall-photo,
html[data-contrast="high"] .c-history-today__hall::after {
	display: none;
}

/* «Театр сьогодні» block 3's team row — «Frame 1437255352» 390 / «Frame
   1437255162» 1440 (`3776:10212`/«3»): the director's own card, and the
   atmospheric backdrop photo carrying the «47 people» stat. Stacked at 390
   (`Theater Info` full width, `podol-film` + the stat bar below it, in flow);
   side by side at 1440 (`Theater Info` 332px | `podol-film` 920px, the stat
   card absolutely positioned over the photo's bottom-right corner) — two
   different compositions, not one flexed into the other (round 2 rebuild;
   round 1 flattened both into a single flow column, which is what left the
   ~520px internal y-DRIFT that round asked for but didn't reach). */
.c-history-today__team-row {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.c-history-today__team-card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 12px;
	background: var(--color-base-white);
}

.c-history-today__team-photo-wrap {
	position: relative;
	width: 100%;

	/* «Container» 294×301.133 at 390 (`4394:27495`) / 308×309 at 1440
	   (`3776:10212`) — near-square, but `aspect-ratio: 1` left the 390 photo
	   7px short of the frame, so each width carries its own ratio. */
	aspect-ratio: 294 / 301.133;
	overflow: hidden;
}

.c-history-today__team-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* «Hall RoundedRectangle» under the director's own photo — the same bottom
   scrim the hall cards use, at the frame's own proportion (148/309 ≈ 48% of
   the photo's own height). */
.c-history-today__team-photo-wrap::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 48%;
	background: linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 60%));
	pointer-events: none;
}

.c-history-today__team-details {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
}

.c-history-today__team-name,
.c-history-today__team-role {
	margin: 0;
	font-family: var(--font-body);
}

.c-history-today__team-name {
	font-family: var(--font-title);
	font-size: var(--fs-h6);
	text-box: trim-both cap alphabetic;

	/* «Theater Person» measures #2A2A2A, not a token in tokens.css — the
	   nearest one (also used by every other dark heading on this page). */
	color: var(--color-neutral-800);
}

.c-history-today__team-role {
	font-size: var(--fs-s-text);

	/* --color-neutral-500 on --color-neutral-100 measures 4.32:1, under 4.5:1
	   AA for this size. */
	color: var(--color-neutral-600);
}

.c-history-today__team-backdrop {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.c-history-today__team-backdrop-photo {
	display: block;
	width: 100%;

	/* `wp_get_attachment_image()` prints the real uploaded size as
	   presentational `width`/`height` attributes (1024×576 here) — the UA
	   stylesheet maps those to CSS `width`/`height: auto` by default, but
	   only `width` is overridden above; without resetting `height` too, the
	   attribute wins under `aspect-ratio` and the photo renders ~3.5× too
	   tall below 1440 (round 3 Critical: measured 576px vs a spec-implied
	   ~166–179px, pushing the stat card far out of position). 318×179 at 390
	   — a fixed ratio, not `aspect-ratio: 1` like the portrait above. */
	height: auto;
	aspect-ratio: 318 / 179;
	object-fit: cover;
}

.c-history-today__stat--team {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: center;

	/* «Frame 1437255165» (the padded card) has exactly ONE child, so its own
	   `gap: 10` spaces nothing — the operative value is «Frame 1437254912»'s
	   `gap: 12`, the frame that really holds the value and the label. Read
	   back from raw geometry at both widths: 390 «47» ends at x 78 and the
	   label starts at 90; 1440 «47» ends at y 1741 and the label starts at
	   1753 (re-review 3 reverted round 3's 12→10). */
	gap: 12px;
	padding: 16px;
	background: var(--color-base-white);
}

/* The generic `.c-history-today__stat-label` 145px cap (I3) is this block's
   own overlay-card width at 1440 — at the mobile flow bar the label has the
   row's own width instead (`Frame 1437254912` is `w:fill,grow` there). */
.c-history-today__stat--team .c-history-today__stat-label {
	max-width: none;
	flex: 1;
}

@media (min-width: 1440px) {

	.c-history-today__team-row {
		flex-direction: row;
		gap: 12px;
		height: 400px;
	}

	.c-history-today__team-card {
		flex: 0 0 332px;
		height: 100%;
	}

	.c-history-today__team-photo-wrap {
		width: 308px;
		aspect-ratio: 308 / 309;
	}

	.c-history-today__team-details {
		gap: 8px;
	}

	.c-history-today__team-backdrop {
		position: relative;
		flex: 1;
		height: 100%;
	}

	.c-history-today__team-backdrop-photo {
		height: 100%;
		aspect-ratio: auto;
	}

	/* «Frame 1437255165» 1110,1692 220×129 inside «podol-film» 432,1445
	   920×400: right = 920 − (678 + 220) = 22, bottom = 400 − (247 + 129) =
	   24, where 678/247 are the card's own offset from the photo's origin. */
	.c-history-today__stat--team {
		position: absolute;
		right: 22px;
		bottom: 24px;
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		width: 220px;
		padding: 24px;
	}

	.c-history-today__stat--team .c-history-today__stat-label {
		max-width: 145px;
		flex: none;
	}
}

@media (min-width: 768px) {

	.c-history-today__halls,
	.c-history-today__stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Four columns only once there is room for the widest label («театральний
   сезон») at 150% text (overflow-sweep + the 150%-with-dyslexia e2e test):
   `auto-fit`/`minmax` below 1440 wraps to fewer columns instead of clipping,
   the frame's own four-tile row is unchanged at 1440+. */
@media (min-width: 1440px) {

	.c-history-today__hall {

		/* «Halls Container» height 420 (`3776:10212`). */
		min-height: 420px;
	}

	.c-history-today__stats {
		grid-template-columns: repeat(4, 1fr);

		/* 12px (the base gap) gives four 307px columns in the 1264px inner
		   width; the frame's own cards are 301px with a 20px gap between —
		   solving `(1264 − 3×gap) / 4 = 301` gives 20. Self-admitted x DRIFT
		   on tiles 3/4 (−4/−6px), fixed here rather than left as a residual
		   (review fix round 1, I2). */
		gap: 20px;
	}
}

/* Parallax note 4549:26036 («Театр сьогодні» hall cards) has no numeric spec
   (distance/duration) in the .fig — the project's own convention for an
   unspecified parallax (animations.md: every other such row on this page and
   most others) is to leave it undone rather than invent the missing number,
   so `.c-history-today__hall-photo` stays a plain `object-fit: cover` image. */

/* ======================================================== Forced colours */

@media (forced-colors: active) {

	.c-history-timeline__entry + .c-history-timeline__entry {
		border-top-color: CanvasText;
	}

	.c-history-timeline__empty,
	.c-history-today__block,
	.c-history-today__stat {
		border: 1px solid CanvasText;
	}
}