[aMonteSl]

Problem

After centring the hero (#10), its text column was still about 840px tall. Usual laptop viewports, after browser chrome, are 630–790px tall (1366×768 → ~657px, 1536×864 → ~750px, 1440×900 → ~790px). The bio, the metrics and part of the CTAs fell below the fold.

Fix

• short custom variant: @media (max-height: 56.25rem), i.e. 900px or less.
• Bio "Read more": the hero bio keeps its full text but is clamped on short screens (3 lines from lg, 4 on phones). A Read more / Show less toggle (aria-expanded + aria-controls) expands it. The full text stays in the DOM, so screen readers and search engines still get all of it. Tall screens show it unclamped with no toggle.
• First screen from lg: the hero takes the first screen (min-h-svh), with tighter padding on short screens.
  • The name scales with height, clamp(2.75rem, 7svh, 4.5rem), and fits on one line on laptops.
  • The portrait scales the same way, clamp(8rem, 21svh, 14rem).
• Short lg screens: tighter spacing and compact metric tiles. Below xl the tiles drop their detail line, which wrapped onto two lines in the narrower column.

Measurements (headless Edge, bottom of the hero content vs viewport height)

Viewport	Before	After
1024×650	1039	615
1280×630	953	618
1366×657	953	608
1536×750	953	677
1440×790	953	698
1920×950	953	884 (full bio)

1024×768, 1180×820, 1366×1024 and 2560×1300 also fit.

Test plan

• npm run check passes and npm run build passes.
• Screenshots:
  • 1366×657, 1024×650 and 1920×950: the whole hero is visible.
  • 390×844 (phone): the bio is clamped to 4 lines, with the toggle left-aligned.
• Toggle checked in the browser: 78px → 260px → 78px, with the label and aria-expanded updating.
• The exported HTML has "Read more" in EN and "Leer más" in ES.

🤖 Generated with Claude Code