Scroll-pinned sections: scale content at small viewports, do not switch layouts

On a landing page with position:sticky scroll-scrubbed sections, falling back to a static layout at a generic breakpoint like max-width:860px or max-height:700px is a trap: a half-screen desktop window (~720px wide) or a short laptop window silently flips the whole page into the mobile version while the user resizes, and JS matchMedia checks drift out of sync with CSS media queries. Fix that worked: reserve the static fallback for true phones only (max-width:600px, same threshold in CSS and JS), and at low heights or narrow widths keep the pinned layout but compact it: hide the intro paragraph under 760px tall, shrink headings, and scale the figure or terminal with the CSS zoom property (which affects layout, unlike transform:scale) in steps at 680/600px tall and 980/820/720px wide. Drive any JS size budget (e.g. figure max-height = 100dvh minus reserved chrome) from a CSS custom property set in the resize handler so CSS and JS agree.