/* One content column for every page of the site — the same one the header and
   the footer stand on.

   | viewport  | side gutter | column                                    |
   |---|---|---|
   | < 768     | 16          | fluid                                     |
   | 768…1439  | 32          | fluid (704 at 768 — `4181:18182`)         |
   | 1440…1919 | 56          | fluid (1328 at 1440 — `1159:7335`)        |
   | ≥ 1920    | 112         | fluid (1696 at 1920 — `4190:19490`)       |

   The column is FLUID at every step: a wider screen widens the content, it
   never centres a capped block with two empty margins. That is what the frames
   draw — at each of the four widths the header's own content, every section
   under it and the footer's columns share one right edge and one left edge:

   | frame                     | header       | sections     | footer       |
   |---|---|---|---|
   | `4036:10415` mob 390      | 12…374       | 16…374       | 16…374       |
   | `4181:18182` tablet 768   | 24…736       | 32…736       | 32…736       |
   | `1159:7335` Головна 1440  | 43…1384      | 56…1384      | 56…1384      |
   | `4190:19490` Full HD 1920 | 100…1808     | 112…1808     | 112…1808     |

   (The header's LEFT number is the logo mark alone, which the design hangs
   4/8/13/12 px outside the column at the four steps — an optical overhang of
   that one glyph, applied as a negative margin in site-header.css. Its own box,
   and everything else in the bar, starts on the column.)

   Above 1920 no frame exists, and the ladder therefore has to extrapolate. It
   holds the gutter and lets the column grow, because that is the only
   extrapolation under which the header and the content stay the same width by
   construction: the header's bar is a full-width row with a fixed gutter, so a
   `max(gutter, (100% − N) / 2)` content column is narrower than it at every
   width that is not exactly 1440 or exactly 1920. That is the shape this token
   used to have, and the client saw it (fix ПР-20, a screenshot at ≈2000):
   «весь сайт должен быть той же ширины что и хедер, а сейчас он уже». Measured
   at the time, home page, content vs header content: 1905 → 288.5 against 43
   (232 px of margin the header does not have), 2000 → 152 against 112,
   2560 → 432 against 112. At 1440 and at 1920 the old ladder and this one
   compute the SAME two numbers (56 and 112), which is why the frames still
   measure PASS: the fix is only about the widths between and above them.

   `%` resolves against the element the variable is USED on, so a consumer
   applies it to a full-width section (padding) or to a full-width block
   (margin) — never to an already-narrowed box, where a percentage would be
   measured against the wrong width. With a plain length that no longer
   matters, and it is kept as the house rule because `--page-gutter-1328`
   below is still a percentage.

   THIS IS THE ONLY COPY OF THE RULE. The ladder lived in four places at once
   — here, `--home-gutter` (home.css), `--news-gutter` (news.css),
   `--article-gutter` (article.css) — plus four literal `max(56px, (100% -
   1328px) / 2)` in performance-shows.css, performance-t14.css and visit.css.
   All four steps were identical, so nothing was broken; what was broken was
   that the NEXT change to the column width would have moved one page and not
   the others, and the client accepts the work by putting pages side by side at
   1905 (plan 06 final review, I2). The three aliases and the four literals are
   gone; everything reads this variable — including the header
   (site-header.css) and the footer (site-footer.css), which used to spell the
   same 16/32/56/112 out for themselves, and that is what made ПР-20 possible
   in the first place.

   Blocks whose INTERNAL layout is a fixed-width design block with no wide
   frame stay centred inside this column rather than stretching: the
   collective's 1177 staggered grid and the repertoire's 1176 one (client fixes
   ПР-2/ПР-3), the performance page's 1328 five-track hero and the sections
   that line up under it (`--page-gutter-1328` below), the shared FAQ's 1328
   two-column grid. A centred block inside a fluid column is still centred in
   the viewport, because the column's own two gutters are equal.

   Whoever needs the column names `podil-container` as a dependency of its own
   sheet (inc/parts/container.php), which both enqueues it and prints it
   first. */

:root {
	--page-gutter: 16px;
}

@media (min-width: 768px) {

	:root {
		--page-gutter: 32px;
	}
}

@media (min-width: 1440px) {

	:root {
		--page-gutter: 56px;
	}
}

@media (min-width: 1920px) {

	:root {
		--page-gutter: 112px;
	}
}

/* The 1328 column, CENTRED: 16 / 32, then the 1440 frame's own 1328 block held
   at that width from 1440 up with a 56px floor. Same two numbers as
   `--page-gutter` at 390, 768 and exactly 1440; from there up it keeps the
   block and grows the margins, where `--page-gutter` keeps the gutter and
   grows the block.

   Two sections need it and both for the same reason: «Розклад показів»
   (performance-shows.css) and «Відгуки» (performance-t14.css) stand under the
   performance page's hero, whose five tracks are fixed lengths adding up to
   1328 (performance-hero.css) with no wider frame to redraw them from, so the
   hero is centred at that width above 1440 and these two follow it. Reading
   `--page-gutter` instead would widen them to the page's own column and leave
   them disagreeing with the hero they belong to — 1793 against 1328 at 1905.
   It lives here rather than inline in those two sheets so that a change to
   the column still happens in one file (plan 06 final review, I2), and it is
   the expression that token computed to at every width ≥ 1440 before ПР-20
   made `--page-gutter` fluid, so neither section moves by a pixel. */

:root {
	--page-gutter-1328: var(--page-gutter);
}

@media (min-width: 1440px) {

	:root {
		--page-gutter-1328: max(56px, (100% - 1328px) / 2);
	}
}