[aMonteSl]

Problem

From xl (≥1280px) the home content keeps a 19rem left offset for the fixed sidebar. The sidebar stays hidden while the hero is on screen, so at the top of the page the hero sat inside that offset column:

• an empty band on the left;
• the h1 and the bio running almost into the right edge;
• nothing lined up with the full-width header.

It was most visible between about 1280 and 1600px.

Fix

• Hero layout: at xl the hero cancels the offset (SIDEBAR_BLEED_CLASS = 'xl:-ml-[19rem]') and centres in the same max-w-7xl column as the header. The avatar card now lines up with the brand.
• Morph timing: at xl, the header-to-sidebar morph range is measured from the hero (MorphNavProvider, kept up to date with a ResizeObserver).
  • The crossfade covers the last 30% of the viewport (at least 200px) before the hero's bottom edge reaches the 64px header. By then the hero's left column has scrolled away, so the sidebar never covers it.
  • MorphSidebar fades in over the same range, exposed as morphRange in the context.
• Below xl: unchanged. The fixed 100–450px range still drives the header fade and the floating menu button.

Test plan

• npm run check passes (lint, typecheck, translations, journey timeline) and npm run build passes.
• Screenshots of the static export:
  • At 1280×720, 1333×722 and 1920×1080, the hero is centred under the header.
  • At 1280 (scroll 700) and 1333 (scroll 500/800/1000), the sidebar only fades in after the avatar card has left the viewport. There is no overlap, and the sidebar is complete once the Profile section starts.
  • At 1024×768 the layout is identical to before.

🤖 Generated with Claude Code