Add text-wrap: balance to headings

[alexgibson]

The CSS property text-wrap: balance; is now supported in Firefox 121, and has pretty good support across browsers: https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap

I propose we should add this to all heading elements in Protocol's base styles as a general typographical improvement.

[reemhamz]

I'm so excited this is finally out 🎉
However, since it's still experimental on newer browser versions, we should probably wrap it (pun intended) in the CSS @supports rule to be on the safer side if we're looking to implement it?

See here for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

[alexgibson]

Hmm, good suggestion @reemhamz, but I’m not 100% sure we’d need that in this case. @supports is useful for when we want to fallback to a different rule in older browsers, but I’m not sure if there’s an existing text-wrap value we’d need to fall back to here? If an older browser encounters a CSS rule it does not yet understand, it should just safely ignore it.

We could do a test first to be sure 👍