/* Sitewide typographic wrapping. Enqueued unconditionally (and added to add_editor_style) for the same reason as header-footer.css and section-spacing.css: headings appear on every template, so there is nothing to gate on. text-wrap: balance evens the line lengths of short multi-line text instead of leaving a long first line and one orphaned word underneath. It is scoped to typographic role, not tag, because this design system does not always use a heading element for heading-sized text — the pull-quote (patterns/pull-quote.php) is a paragraph carrying .has-heading-lg-font-size, and the hero stat values are headings. Matching the preset classes catches both, and it means any future block the client styles as a heading in the editor inherits the behaviour without a CSS change. Body copy gets text-wrap: pretty instead, set on so it inherits everywhere rather than needing an element list that would inevitably miss a block. pretty only reconsiders the last few lines to avoid a one-word orphan, so it has no line cap and is cheap enough to apply broadly — unlike balance, which browsers cap at a small number of lines (six in Chromium) and silently skip beyond, making it either a no-op or a cost on long paragraphs. The two do not fight. A directly targeted declaration always beats an inherited value regardless of specificity, so every heading below takes balance even though it also inherits pretty from . That holds no matter what order these rules end up in, so neither is order-fragile. Progressive enhancement: unsupported browsers ignore both declarations and wrap normally. No fallback needed, and no interaction with the fluid font-size clamps (theme.json) beyond both recalculating on resize, which is the intent. */ body { text-wrap: pretty; } :is(h1, h2, h3, h4, h5, h6), .has-heading-xs-font-size, .has-heading-sm-font-size, .has-heading-md-font-size, .has-heading-lg-font-size, .has-display-sm-font-size, .has-display-lg-font-size { text-wrap: balance; } /* Links break mid-word when they have to. Body copy from the old site links out with long anchor text and bare URLs; at 375px an unbreakable one pushes the page 4px wider than the viewport, which verify-layout.mjs correctly fails on. break-word (not anywhere) only breaks a word that cannot fit on a line of its own, so ordinary link text still wraps at spaces the way it reads best. */ a { overflow-wrap: break-word; }