Correct the brand typography bindings and add the mobile type scale

Problem/Motivation

The theme typography does not match the brand stylesheet (VBN — Stylesheet, Foundation page) in four bindings, and the mobile scale is absent entirely.

1. The brand serif is bound to Bootstrap monospace variable. scss/_bootstrap-variables.scss sets $font-family-monospace: 'EB Garamond', serif. The consequence is concrete and measurable: the only consumers of the serif are code, pre and kbd, which render at weight 400, so the EB Garamond 700 face the theme loads renders nowhere on the site. The theme is also left with no real monospace stack. Both faces are correctly vendored and attached in vartheme_bs5_rightup.libraries.yml with exactly the weights the design needs (Rubik 400/500, EB Garamond 400/700 plus italic), so this is purely a wiring bug.

2. Heading weight is 700; the design specifies 500. Every heading level in the design is Rubik Medium 500. The theme sets $headings-font-weight: 700, so all headings render too heavy.

3. Heading line-height is 140%; the design specifies 135%. The theme sets $headings-line-height: 140%.

4. Body colour is Bootstrap default #212529; the design specifies #242424.

5. There is no mobile type scale at all. The design specifies separate Desktop and Mobile values for every heading and body style. The theme implements desktop only.

Desktop heading sizes are already exact and must not be touched: 52 / 42 / 24 / 20 / 16 / 14 px for H1 to H6.

Steps to reproduce

1. Install a site with Vartheme BS5 Rightup as the default theme.
2. Inspect any article body text: it renders in Rubik, while the design binds every body style to the serif.
3. Inspect any heading: computed font-weight is 700 and line-height is 1.4, against 500 and 1.35 in the design.
4. Search the compiled CSS for a rule that uses EB Garamond at weight 700. There is none, because the serif reaches only code, pre and kbd.
5. Narrow the viewport to a phone width: every type size stays at its desktop value.

Proposed resolution

Prose-serif, UI-sans. The design uses the serif for prose and the sans for interface: its header renders nav items and the Newsletter button in Rubik, and the Foundation tables use Rubik for header rows with the serif only for prose specimens. So:

• $font-family-base stays Rubik for chrome: buttons, forms, nav, admin strings.
• EB Garamond applies to prose only: article body, rich text and lead, through the Bootstrap type partial plus the CKEditor editor stylesheet in the same commit, so the editor and the front end stay in sync.
• $font-family-monospace goes back to a real monospace stack.
• $headings-font-weight 700 to 500.
• $headings-line-height 140% to 135%.
• Body colour #212529 to #242424.
• Add the mobile scale: H1 38, H4 18, H5 16, H6 12, and all six body sizes (Regular 16, Bold 16 at 700, Lead 18, Small 14, Inline Link 16, lists 16).

Mobile H2 and H3 are deliberately excluded from this issue and stay at their desktop values with a comment naming the open question. Both cells look like design-file errors and are with the designer:

• Mobile H2 = 14 would render smaller than mobile H4 (18) and equal to desktop H6, inverting the hierarchy. Mobile H1 is 38, so a coherent value sits somewhere near 30 to 34.
• Mobile H3 = 30 is larger than desktop H3 (24), the only level that grows on mobile. The bound styles differ too: desktop uses Desktop/Heading/H3/Medium-Default while mobile uses Mobile/Heading/H3/Large-Default, so the mobile specimen looks bound to the wrong size variant.

This will therefore land in two passes: everything unambiguous now, the two cells once the designer answers.

Remaining tasks

• ✅ File an issue
• ❌ Addition/Change/Update/Fix
• ❌ Testing to ensure no regression
• ➖ Automated unit/functional testing coverage
• ➖ Developer Documentation support
• ➖ User Guide Documentation support
• ❌ UX/UI designer responsibilities
• ❌ Accessibility and Readability
• ❌ Reviewed by a human
• ❌ Code review by maintainers
• ❌ Full testing and approval
• ❌ Credit contributors
• ❌ Review with the product owner
• ✅ Update Release Notes
• ✅ Release

User interface changes

• Article body, rich text and lead copy render in EB Garamond instead of Rubik.
• All headings become lighter (500 rather than 700) and slightly tighter (135% rather than 140%).
• Body text colour changes from #212529 to #242424.
• Type sizes shrink at phone widths, where previously the desktop scale applied at every width.

API changes

• N/A

Data model changes

• N/A

Release notes snippet

• Corrected the brand typography bindings: the brand serif is applied to prose rather than to code, headings render at weight 500 and line-height 135%, body copy uses #242424, and a mobile type scale was added.