Stop the landing clause number from landing on top of its heading
The number beside each landing block was an absolutely positioned
::before, and the gutter it needs was reserved by a padding that only
existed inside a `min-width: 62rem` media query. Everywhere else the
number was painted straight onto the first letter of the title: the
teal "01" sat on the Q of "Qué es" at every width below 992px, at
200 % and 400 % browser zoom, and at any width at all once the reader
enlarges the default text size, because a rem media query resolves
against that size and 62rem stops matching a 1440px window as soon as
the default goes past 23px. I measured it at 20 of the 26 cases I
checked, in both locales.
The number is now a real box in the layout instead of an overlay. Each
block is a wrapping flex line of two items, the number and the block
body, so the space is reserved by the layout itself at every width:
when the line has room the number sits in its gutter beside the
heading, and when it does not the body wraps and the number ends up on
its own line above the title. There is no threshold left to get wrong,
and no state in which the two can occupy the same pixels.
scripts/check-home-headings.mjs proves it: 40 cases, both locales, 320
to 1920 px, 200 % and 400 % zoom, and default text sizes of 24 and 32
px. It asserts that no clause number overlaps any text of its block,
that no step number overlaps its step heading, that the list markers
fit the indent their item reserves, and that the document never
scrolls sideways.