/* ---- TWO-COLUMN ARTICLE --------------------------------------------------- Chosen 2026-08-13. The body runs in two columns on a laptop and collapses to one below 64rem. Anything that is not a paragraph spans both columns, because a heading or an image trapped in one column breaks the grid it is meant to interrupt. Every element in the article - breadcrumbs, byline, body - shares ONE container width. They were previously set independently, so the crumb trail and the byline floated at a different width from the article and read as detached from it. */ /* The byline sits immediately above the body, so the flow does not need a full section gap on top of it - that is a separator for unrelated sections, and it left "Key takeaways" detached from the line that introduces the article. The bottom keeps the full gap: below the body there IS a section boundary. */ .artcol > .section:has(article.prose) { padding-block-start: var(--space-l); } .artcol { --artcol-max: 68rem; } .artcol > .center, .artcol .center[data-measure] { --center-max: var(--artcol-max); } @media (min-width: 64rem) { .artcol article.prose { columns: 2; column-gap: var(--space-2xl); } /* Anything that is not a paragraph spans both columns. The list is explicit rather than "everything except p", because a block missing from it is not an error the browser reports - it simply flows inside one column, which is how .factband ended up as a narrow panel in column two. */ /* A spanning element resets the column flow; without column-span the browser splits it down the middle of one column. */ /* INVERTED 2026-08-14: everything spans EXCEPT text-level flow. It used to list what spans, and the comparison table proved why that fails: the allowlist named `.compare`, the renderer wraps it in `.compare-wrap`, so the rule never matched and a five-column table was squeezed into one 528px column. Exactly the failure the note below predicted, one wrapper later. A list of what SPANS has to be extended for every block type anyone adds. A list of what STAYS IN THE COLUMN is paragraphs, headings and lists - text that is meant to flow - and it is closed. Nothing new can be forgotten. */ .artcol .prose > :not(p, h2, h3, h4, ul, ol, blockquote) { column-span: all; /* THE SPANNER OWNS THE SPACE AROUND IT, and it has to. Measured before this: below every full-width block the LEFT column got 24px and the RIGHT column got 0, text starting flush against the image or the CTA band. The 24px was never the block's own margin - all six had margin-bottom: 0 - it was the margin-top of whatever element happened to follow, and a margin at the top of a column fragment is truncated by the browser. So the left column got the following element's margin and the right column got nothing. Giving the margin to the spanner fixes both columns with one value, because a spanner's own box is not at a column break. 44px is one step above the largest gap in the flow (24px before a heading), so a full-width block reads as an interruption rather than as another paragraph, and it sits in the same range as the site's tightest section separation. */ margin-block: var(--space-3xl); } /* Zeroed, or the left column adds it to the spanner's margin and the two columns disagree again - the same asymmetry, larger. */ .artcol .prose > :not(p, h2, h3, h4, ul, ol, blockquote) + * { margin-block-start: 0; } /* A SPANNER THAT OPENS THE ARTICLE HAS NOTHING TO SEPARATE FROM. `summary-box` is the first block on every supporting page, so its 44px top margin sat on top of the section's own 72px padding and pushed "Key takeaways" 119px below the byline. 07-prose.css already zeroes the first child; this selector is more specific, so it was overriding it. */ .artcol .prose > :first-child { margin-block-start: 0; } /* -------------------------------------------------------------------------- HEADINGS FLOW INSIDE A COLUMN. Oleksandr, 2026-08-14. They used to span both and sit centred, which turned every subheading into a full-width divider and chopped the body into a stack of short two-column slabs. Inside the column the text runs as one continuous read. A heading in a column flow needs two guards the spanning version never did: break-after: avoid keeps it with the paragraph it introduces, so it cannot be left as the last line of the left column with its own text starting at the top of the right. break-inside: avoid keeps a two-line heading from splitting across the column break. Left-aligned and back to the normal heading rhythm, because the reason for centring was that it spanned. -------------------------------------------------------------------------- */ .artcol .prose > :is(h2, h3) { column-span: none; text-align: start; break-after: avoid; break-inside: avoid; -webkit-column-break-after: avoid; /* Safari still wants the prefixed form */ -webkit-column-break-inside: avoid; } .artcol .prose > h2:first-child { margin-block-start: 0; } } /* Paragraphs fill their column rather than the reading measure: the column IS the measure here. */ .artcol article.prose > p { max-inline-size: none; } /* A spanning BLOCK under a centred spanning heading must be centred too. `.steps` spanned the full 1088px column set while its items filled only the left half, so a centred "Plan Your Route" sat over a left-hugging list and the pair read as unrelated. Constraining the block and centring it puts the heading and its content on the same axis. */ @media (min-width: 64rem) { /* .steps ONLY. faq and ctaband were narrowed with it and neither was asked for - they span the full column set, which is what they did before. */ .artcol .prose > .steps { max-inline-size: 44rem; margin-inline: auto; } }