/* «Стаття» — a single news article (single.php) — plan 06 task 5.

   Figma: 1440 `3834:14918` (breadcrumbs `3850:8934`, article `3850:8683`,
   «Більше новин» `3880:9895`), 390 `4436:33485`. inventory.md draws no 768 or
   1920 frame, so the 1440 values start at 1440 — the width they are drawn at —
   and the type steps through tokens.css's own breakpoint modes.

   Page rhythm, frame to frame:

   | gap                        | 390 | 1440 |
   |----------------------------|-----|------|
   | breadcrumbs → article      |  24 |   40 |
   | hero → body                |  60 |   80 |
   | body → «Більше новин»      | 121 |  180 |

   Design note `4550:25475` (the new .fig of 22.09.2026), with its arrow on the
   hero image: «Parallax effect: зображення рухається повільніше за основний
   контент під час скролу» (reference: Locomotive Scroll, 02. Parallax effect).
   It is a CSS scroll-driven animation on the hero image alone — see the block
   at the end of this file. The note gives no speed, so the travel is recorded
   in designer-questions.md as a chosen value.

   Everything under `.article-rich` styles the post body, which is
   Gutenberg — and, for the 40 imported articles, classic HTML. So the
   selectors are elements first (`p`, `h2`, `figure`) with the block classes
   added where a block adds structure of its own: an imported `<p>` has to look
   like a `core/paragraph`, because on this site it is one.

   Colours: the body's own #C3C6CA-free — every value here is a token. */

/* The column is `--page-gutter` (components/container.css, enqueued as
   `podil-container`) — the same centred 1328 block every other page of the plan
   uses: equal gutters from 1441 to 1919, so the article, «Більше новин» and the
   footer never stagger against each other. This sheet carried its own copy of
   the ladder until plan 06's final review (I2). */

/* ======================================================== Breadcrumbs

   `4436:33485`: «Frame 1437255379» VERTICAL 24 between the trail and the
   article. `3834:14918`: the trail ends at y 152 and the article starts at 192.
   */
.article-crumbs {
	box-sizing: border-box;
	padding: 0 var(--page-gutter);
}

.article {
	box-sizing: border-box;
	padding: 24px var(--page-gutter) 0;
}

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

   `3850:8683`: the plate and the date (22 high), the `h1` («H1/H1 S», 56/56 at
   1440 and 40/40 at 390), the author line, «Поширити:», then the image. The
   gaps are per-child, not one auto-layout step: 24 / 12 / 32 at 1440 and
   20 / 20 / 24 / 24 at 390. */
.article-hero {
	display: flex;
	flex-direction: column;

	/* `4436:33487`: «Hero» VERTICAL 24 at 390 — the wrappers below
	   go `display: contents` there, so this one gap carries the
	   whole column. */
	gap: 24px;
}

/* `3850:8685` / `3850:8686` / `3850:8693`: the frame's own three
   wrappers. At 390 the column is flat (tags, image, share) and «Item
   and Share Buttons» is not a row at all, so both wrappers step aside
   and their children become items of the hero itself. */
.article-hero__heading,
.article-hero__row {
	display: contents;
}

/* With both wrappers out of the way the hero's own items are, in markup
   order, the tag block, the author, «Поширити:» and the image — and
   `4436:33485` draws them as the tag block, the author, the image,
   «Поширити:» (y 115 / 321 / 373 / 558.7). Neither the image (no
   focusable element, empty `alt`) nor the share row changes meaning by
   swapping, so the order is CSS (ruling R16). */
.article-hero__tags {
	order: 1;
}

.article-hero__byline {
	order: 2;
}

.article-hero__media {
	order: 3;
}

.article-share--hero {
	order: 4;
}

.article-hero__tags {
	display: flex;
	flex-direction: column;

	/* `4436:33489`: VERTICAL 20 between the plate row and the `h1`. */
	gap: 20px;
}

.article-hero__meta {
	display: flex;
	align-items: center;
	gap: 20px;
	width: fit-content;
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
}

/* «Frame 1321315694» — the category plate: radius 100, «S/S text (semi bold)»
   #272B30, no fill of its own in either frame. */
.article-hero__category {
	border-radius: 100px;
	color: var(--color-neutral-800);
	font-weight: 600;
}

.article-hero__date {
	color: var(--color-neutral-600);
	font-weight: 400;
}

.article-hero__title {
	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);

	/* Kilok is not licensed, so the site runs Exo 2 under its name (fonts.css):
	   Figma trims to Kilok's 0.70 em cap and the substitute's is 0.659 em, so
	   the 0.041 em goes back as bottom padding — the remedy section-title.css
	   documents for every «leadingTrim CAP_HEIGHT» heading in this design. */
	padding-bottom: 0.041em;
	text-box: trim-both cap alphabetic;
	text-transform: uppercase;

	/* A long Ukrainian word at 150 % text scale must wrap, not widen the page
	   (WCAG 1.4.4 / 1.4.10). */
	overflow-wrap: anywhere;
}

/* «Item» — the 28×28 #F3F4F6 icon box and the author's name in «S/S text
   (regular)». */
.article-hero__byline {
	display: flex;
	align-items: center;
	gap: 8px;
	width: fit-content;

	/* `4436:33489` keeps the author inside «Heading and tags», whose step is 20,
	   while the hero's own column step at 390 is 24 — so the author's row gives
	   the 4 back. From 768 up it sits in the frame's own row and the negative
	   margin is replaced by that row's placement. */
	margin: -4px 0 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);
}

.article-hero__byline-icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 28px;
	height: 28px;
	padding: 4px;
	background: var(--color-neutral-100);
}

.article-hero__byline-icon svg {
	width: 16px;
	height: 16px;
	color: var(--color-primary-500);
}

.article-hero__media {

	/* `3850:8683`: «Image» 1328×600 at 1440, 358×161.747 at 390 — a fixed box
	   with the photograph cropped to fill it, and the box is what the spec
	   measures. The image inside it is the parallax layer (end of this file),
	   which is why it is the box and not the `<img>` that carries the size. */
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	width: 100%;
	height: 161.747px;
}

.article-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The banner is 1328×600 (and 358×161.747); the shared parallax's own
   80 px of travel is the value that module documents, so nothing is
   overridden here. */

/* ============================================================= Share

   «Share Buttons» `3850:8683`: «Поширити:» in «S/S text (regular)» and four
   40×40 boxes with a 2px #12AD99 inside stroke, 6 between them, 12 after the
   label. */
.article-share {
	display: flex;
	align-items: center;
	gap: 12px;
	width: fit-content;
}

.article-share__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);
}

.article-share__list {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.article-share__link {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;

	/* «Social Media Icon»'s own auto-layout gap. It separates nothing on screen —
	   the box holds one icon and a visually hidden name — but it is the frame's
	   value and the box centres its content either way. */
	gap: 10px;
	width: 40px;
	height: 40px;
	color: var(--color-neutral-800);
	box-shadow: inset 0 0 0 2px var(--color-primary-500);
}

.article-share__link svg {
	width: 20px;
	height: 20px;
}

/* `3850:8683` draws every one of the four glyphs in #272B30, while the shared
   Facebook file carries the footer's own teal as a presentation attribute — CSS
   wins over that, so all four follow the box's colour and the hover below moves
   the stroke alone, exactly as the variant does. */
.article-share__link svg path,
.article-share__link svg rect {
	fill: currentcolor;
}

/* «Social Media Icon» 4351:26134 → 4351:26136 (animations.md, row «Соцмережі»):
   ON_HOVER, SMART_ANIMATE, 600 ms, ease-out — the inside stroke goes
   #12AD99 → #272B30, and nothing else changes. The set has no `mob=on` hover,
   so, as with every other hover in this theme, it starts at 768 and only where
   a pointer can hover. */
@media (min-width: 768px) {

	.article-share__link {
		transition: box-shadow 600ms cubic-bezier(0, 0, 0.58, 1);
	}

	.article-share__link:focus-visible {
		box-shadow: inset 0 0 0 2px var(--color-neutral-800);
	}
}

@media (min-width: 768px) and (hover: hover) {

	.article-share__link:hover {
		box-shadow: inset 0 0 0 2px var(--color-neutral-800);
	}
}

/* `3850:9149` at 1440 and the row at the same place in `4436:33485`:
   «Share Buttons» with 60 of padding above it, at the foot of the text
   column — a second copy of the same four links, so that a reader who has
   just finished a long article does not have to go back up to share it. */
.article-share--foot {
	margin-top: 60px;
}

/* The foot copy lives inside `.article-rich__column`, whose list and link rules
   below (`ul`, `li`, `li::before`, `a`) are written for the post body and would
   otherwise reach it — a column of teal squares instead of the row of boxes
   (ПР-9). Same specificity as those rules, later in the sheet, so the
   component wins without touching the body's own selectors. */
.article-rich__column .article-share__list {
	flex-direction: row;
	gap: 6px;
	margin: 0;
	counter-reset: none;
}

.article-rich__column .article-share__item {
	display: block;
	gap: 0;
}

.article-rich__column .article-share__item::before {
	content: none;
}

.article-rich__column .article-share__link {
	color: var(--color-neutral-800);
}

/* ============================================================== Body

   `3850:8683`: «body of the article» is a row at 1440 — «Contents» 313 wide
   with a 1px #D0D5DC rule on its right edge and 12 of padding before it, and
   «Rich Text» 1015 wide holding an 878 column centred in it. At 390 the two
   stack, the contents first, with 80 of padding under it. */
.article-body {
	margin-top: 60px;
}

.article-toc {
	display: flex;
	flex-direction: column;

	/* `3877:9814` / `4436:33513`: VERTICAL 12 between «Зміст» and the list. */
	gap: 12px;
	box-sizing: border-box;
	padding: 0 12px 80px 0;
}

.article-toc__title {
	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;
}

.article-toc__list {
	display: flex;
	flex-direction: column;

	/* «Contents» VERTICAL 4. */
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.article-toc__link {
	display: flex;
	align-items: center;
	box-sizing: border-box;

	/* «Item»: 34 high, pad 6, radius 100, the bullet 4 before the label. */
	gap: 4px;
	min-height: 34px;
	padding: 6px;
	border-radius: 100px;
	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);
	text-decoration: none;
}

/* «Frame 1321315904» is an 8-wide, 22-high box; «Frame 1321315898» inside it is
   the 8×8 #12AD99 square, centred by that box's own 0/8 padding — so the square
   is the content box and the padding is what centres it. 22 at both widths, so
   it is written out rather than taken from the line height, and `--font-scale`
   keeps it growing with the accessibility text size. */
.article-toc__bullet {
	display: block;
	flex: 0 0 8px;
	box-sizing: border-box;
	width: 8px;
	height: calc(22px * var(--font-scale));
	padding: calc(7px * var(--font-scale)) 0;
	background: var(--color-primary-500);
	background-clip: content-box;
}

.article-toc__text {
	min-width: 0;
}

/* The entry the reader has reached: `3850:8683` draws the first entry's label
   in
   #12AD99. Set by news.js from an IntersectionObserver; nothing moves, so there
   is no transition to switch off under reduced motion. Underlined as well as
   coloured, so the mark is not colour alone (WCAG 1.4.1). */
.article-toc__link[aria-current="location"] {
	color: var(--color-primary-700);
	text-decoration: underline;
}

.article-rich {
	display: flex;
	justify-content: center;
}

.article-rich__column {
	min-width: 0;

	/* `3850:8683`: «Rich Text» inner column 878 at 1440; at 390 it fills the
	   358 the page gives it. */
	width: 100%;
	max-width: 878px;
}

/* ================================================= The body's own blocks */

/* «Introduction» / «Conclusion» — the article's section headings. The design
   draws them at the «H3» text style (36/36 at 1440, 28/28 at 390), which is
   what this theme's `--fs-h3` mode is; in the markup they are `h2`, because the
   contents is built from H2 and the page's one `h1` is the article's title
   (datamapping §4.5). Rhythm: «Content» pad 0/0/32/0 before the first one and
   32/0/32/0 between sections. */
.article-rich__column h2,
.article-rich__column h3 {
	margin: 32px 0;
	color: var(--color-neutral-800);
	font-family: var(--font-title);
	font-weight: 400;
	padding-bottom: 0.041em;
	text-box: trim-both cap alphabetic;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.article-rich__column h2 {
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	letter-spacing: var(--ls-h3);
}

/* The body draws one heading style only, so the second level takes the next
   step
   the design does use inside an article — «H6/2» (24/24 at 1440, 20/20 at 390),
   the style of the FAQ question and of the list's accent numbers. Recorded in
   designer-questions.md. */
.article-rich__column h3 {
	font-size: var(--fs-h6);
	line-height: var(--lh-h6);
	letter-spacing: var(--ls-h6);
}

.article-rich__column > *:first-child {
	margin-top: 0;
}

.article-rich__column > *:last-child {
	margin-bottom: 0;
}

/* «S/S text (regular)», «Content» pad 0/0/16/0. */
.article-rich__column p {
	margin: 0 0 16px;
	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);
}

/* «Лід» — the paragraph style `is-style-lead` (Editor\NewsBlocks): «M/M text
   (semi bold)» uppercase, «Content» pad 20/0/24/0. */
.article-rich__column p.is-style-lead {
	margin: 20px 0 24px;
	font-size: var(--fs-m-text);
	font-weight: 600;
	line-height: var(--lh-m-text);
	letter-spacing: var(--ls-m-text);
	text-transform: uppercase;
}

.article-rich__column a {
	color: var(--color-primary-700);
}

/* Lists — «Content» gap 12, pad 0/0/16/0; each row is the accent marker and the
   text, 12 apart at 1440 and 4 at 390. An ordered list's marker is «H6/2»
   #12AD99 in a 36-wide column («01»); an unordered list's is the same 8×8
   square
   the contents uses. */
.article-rich__column ol,
.article-rich__column ul {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	counter-reset: article-item;
}

.article-rich__column li {
	display: flex;
	align-items: flex-start;
	gap: 4px;
	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);
}

.article-rich__column ol > li {
	counter-increment: article-item;
}

.article-rich__column ol > li::before {
	content: counter(article-item, decimal-leading-zero);
	flex: 0 0 36px;
	width: 36px;
	color: var(--color-primary-500);
	font-family: var(--font-title);
	font-size: var(--fs-h6);
	font-weight: 400;
	line-height: var(--lh-h6);
	letter-spacing: var(--ls-h6);
	text-box: trim-both cap alphabetic;
}

.article-rich__column ul > li::before {
	content: "";
	flex: 0 0 8px;
	width: 8px;
	height: 8px;

	/* Centred on the first line of the text beside it: half the line box minus
	   half the square. */
	margin: calc((var(--lh-s-text) - 8px) / 2) 8px 0;
	background: var(--color-primary-500);
}

/* Images — «Content» pad 32/0/32/0 at 390 and 48/0/48/0 at 1440, and the
   caption
   is a #F3F4F6 band over the photograph's bottom edge, its text inset 20
   («Frame 1437255213», 83 high for one line, 97 for two). */
.article-rich__column figure {
	position: relative;
	margin: 32px 0;
}

.article-rich__column figure img {
	display: block;
	width: 100%;
	height: auto;
}

.article-rich__column figure figcaption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 83px;
	padding: 0 20px;
	background: var(--color-neutral-100);
	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);
}

/* «дві картинки» — `core/columns` with one image each: «Frame 1321315910», a
   row
   of two equal columns 8 apart, each holding the same image-and-band figure. */
.article-rich__column .wp-block-columns {
	display: flex;

	/* `4436:33485` stacks the pair at 390 (two 358-wide figures at y 2721.75 and
	   2997.75); `3850:8683` sets them side by side at 1440. */
	flex-direction: column;
	gap: 8px;
	margin: 32px 0;
}

.article-rich__column .wp-block-column {
	flex: 1 1 0;
	min-width: 0;
}

.article-rich__column .wp-block-column figure {
	margin: 0;
}

/* «Цитата» — «Content» pad 36/0/36/0, «Figure» a row with a 2px #12AD99 rule
   (radius 100) the full height of the text, 20 before it and 20 of padding
   after the words; the words in «M/M text» regular. NOT the `c-quote` card:
   that
   component is the 652×295 plate of the performance page, and this is a
   different drawing. */
.article-rich__column blockquote {
	display: flex;
	gap: 20px;
	margin: 36px 0;
	padding: 0 20px 0 0;
}

.article-rich__column blockquote::before {
	content: "";
	flex: 0 0 2px;
	width: 2px;
	border-radius: 100px;
	background: var(--color-primary-500);
}

.article-rich__column blockquote > * {
	min-width: 0;
}

.article-rich__column blockquote p {
	margin: 0;
	font-size: var(--fs-m-text);
	font-weight: 400;
	line-height: var(--lh-m-text);
	letter-spacing: var(--ls-m-text);
}

/* `core/quote`'s own attribution, and the design's «Image caption goes here»
   under a quote inside its #F3F4F6 plate («Frame 1321315924»: pad 24, gap 12).
   */
.article-rich__column blockquote cite {
	display: block;
	margin-top: 20px;
	font-size: var(--fs-s-text);
	font-style: normal;
	line-height: var(--lh-s-text);
}

/* «Відео» — the lite player (template-parts/components/video.php), wrapped by
   the `core/embed` filter in inc/parts/news.php. «Content» pad 48/0/48/0 at
   1440
   and 32/0/32/0 at 390. */
.article-video {
	margin: 32px 0;
}

/* «Кнопка» — the «Button» set `4277:28369`: `Default, mob=on` 36 high, pad 8/0,
   «S/S text (semi bold) caps» 14/18; `Default, mob=off` 40 high, pad 10/0,
   16/22. Both are #FFFFFF with a 0.8px #272B30 inside stroke. The set is a
   fixed-width component (153), so it specifies no horizontal padding: 20/24 is
   this theme's own choice, recorded in designer-questions.md. */
.article-rich__column .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 32px 0;
}

.article-rich__column .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 36px;
	padding: 8px 20px;
	border-radius: 0;
	background: var(--color-base-white);
	color: var(--color-neutral-800);
	box-shadow: inset 0 0 0 0.8px 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-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

/* ================================================== «Більше новин»

   `3880:9895`: a full-bleed #F3F4F6 band, pad 100/56 at 1440 and 80/16 at 390,
   the H2 («H2/H2 S» 56/56 at 1440, 38/40 at 390) with the arrow pair opposite
   it from 768 up, then the three cards 54 (1440) / 24 (390) under the heading.
   */
.article-more {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;

	/* `4436:33983`: «News Content» VERTICAL 40, pad 80/16. */
	gap: 40px;
	margin-top: 121px;
	padding: 80px var(--page-gutter);
	background: var(--color-neutral-100);
}

.article-more__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);
	padding-bottom: 0.041em;
	text-box: trim-both cap alphabetic;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

/* `4436:33986`: «Container» VERTICAL 24 — the card track and the
   navigation row. */
.article-more__body {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* «Navigation Container» `4436:33992`: «1/3» at the row's start and the 40×40
   pair at its end, the two buttons overlapping by 1 px (the frame's gap −1). */
.article-more__nav .c-slider__arrows--detached {
	display: flex;
	align-items: center;
}

.article-more__nav .c-slider__counter {

	/* «S/S text» 16/22 in `4436:33993`, where this theme's mobile mode of that
	   style is 14/18; 16 px is `--fs-m-text`'s mobile mode and its 20 px line
	   box is inside the 2 px the line-height tolerance allows. */
	margin-right: auto;
	font-size: var(--fs-m-text);
	line-height: var(--lh-m-text);
}

.article-more__nav .c-slider__arrow--next {
	margin-left: -1px;
}

/* `4436:33988`: the card is 266 wide inside the 358 column and the next
   one is cut at the page's edge — 92 px of window, the gap included, is
   what the shared slider calls `--c-slider-peek` (ruling R18: the
   consumer says how much). */
.article-more .c-slider {
	--c-slider-peek: 92px;

	/* `4436:33987`: «News Cards Container» HORIZONTAL 20 at 390 against the
	   shared slider's own default 24, which is what `3880:9902` draws at 1440. */
	--c-slider-track-gap: 20px;
}

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

@media (min-width: 768px) {

	/* `3850:8684`: «Hero» VERTICAL 32 over «Heading» and the image; «Heading»
	   `3850:8685` VERTICAL 12 over «Heading and tags» and «Item and Share
	   Buttons»; `3850:8686` VERTICAL 24; `3850:8693` a row, space-between. */
	.article-hero {
		gap: 32px;
	}

	.article-hero__heading {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.article-hero__tags {
		gap: 24px;
	}

	.article-hero__row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
	}

	/* The two wrappers are real again here, so the 390 ordering above would
	   reshuffle them instead: `order` goes back to the markup's. */
	.article-hero__tags,
	.article-hero__byline,
	.article-hero__media,
	.article-share--hero {
		order: 0;
	}

	.article-hero__byline {
		margin-top: 0;
	}

	.article-hero__media {
		height: 600px;
	}

	/* The 266-wide compact card is the 390 frame's; from 768 up «Більше новин»
	   draws the 427 variant `3880:9903` with its own body gap (the same
	   neutralisation home.css makes for the home page's news row). */
	.article-more .c-article-card--compact .c-article-card__body {
		gap: 24px;
	}


	.article-body {
		display: grid;

		/* «Contents» 313 + «Rich Text» 1015 = the 1328 column. */
		grid-template-columns: 313px minmax(0, 1fr);
		margin-top: 80px;
	}

	.article-body--no-toc {
		grid-template-columns: minmax(0, 1fr);
	}

	.article-toc {

		/* ТЗ §4.11: «ліва колонка "Зміст" … липка». The offset the design does
		   not give is 24 px, recorded in designer-questions.md. */
		position: sticky;
		top: 24px;
		align-self: start;
		padding-bottom: 0;

		/* «border=0/1/0/0px #D0D5DC (inside)» — the rule between the two columns. */
		box-shadow: inset -1px 0 0 0 var(--color-neutral-300);
	}

	.article-rich__column {

		/* «Rich Text» 878 inside 1015, centred (68.5 each side). */
		width: 878px;
		max-width: 100%;
	}

	.article-rich__column figure,
	.article-rich__column .wp-block-columns,
	.article-video {
		margin-block: 48px;
	}

	/* `3850:8683`: «Frame 1321315910» — the two 435-wide figures side by side. */
	.article-rich__column .wp-block-columns {
		flex-direction: row;
	}

	.article-rich__column li {
		gap: 12px;
	}

	.article-rich__column .wp-block-button__link {
		min-height: 40px;
		padding: 10px 24px;
	}

	/* `3880:9895`: «News Section» pad 100/56, VERTICAL 54, and its first row is
	   «News Header» — the heading with the arrow pair opposite it, 64 high. The
	   `display: contents` on the body lets the pair and the track become rows of
	   this grid without a second DOM order. */
	.article-more {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		row-gap: 54px;
		margin-top: 180px;
		padding-block: 100px;
	}

	.article-more__title {
		grid-area: 1 / 1 / 2 / 2;
	}

	.article-more__body {
		display: contents;
	}

	.article-more .c-slider {
		--c-slider-peek: 0px;

		/* `3880:9902`: HORIZONTAL 24 — the slider's own default. */
		--c-slider-track-gap: 24px;

		grid-area: 2 / 1 / 3 / 3;
	}

	.article-more__nav {
		grid-area: 1 / 2 / 2 / 3;
		justify-self: end;
	}

	/* The 390 frame is the only one that draws a counter; `3880:9896` has the pair
	   alone. */
	.article-more__nav .c-slider__counter {
		display: none;
	}
}

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

@media (min-width: 1440px) {

	.article {
		padding-top: 40px;
	}
}

/* ================================================= Parallax, hero image

   Design note `4550:25475`: «зображення рухається повільніше за основний
   контент під час скролу», reference Locomotive Scroll 02 — one of the twelve
   notes that ask for the same effect, so the mechanism is the shared
   `c-parallax` (parallax.css) and this file only says which layer carries it.
   The box keeps its own size, which is what the spec measures; the layer inside
   it is what moves. */
.article-hero__media {
	position: relative;
}

/* ======================================================== Forced colours */
@media (forced-colors: active) {

	.article-share__link {
		outline: 2px solid CanvasText;
		outline-offset: -2px;
	}

	.article-toc {
		border-right: 1px solid CanvasText;
	}

	.article-rich__column .wp-block-button__link {
		outline: 1px solid CanvasText;
		outline-offset: -1px;
	}

	/* The caption band is a fill, which forced-colors flattens onto the
	   photograph behind it: an edge keeps the words readable as a band. */
	.article-rich__column figure figcaption {
		border-top: 1px solid CanvasText;
	}
}