feat(css): reflow wide decks for portrait phones

[Reebz]

What

A landscape-composed deck clipped on portrait phones because the wide grids and rows never reflowed.

• A @media (max-width: 700px) block collapses the multi-column grids to a single column, stacks the horizontal flex rows, and rotates the architecture arrow to point down when the row is stacked. .slide { overflow: hidden } is left intact, so reflow keeps the no-scroll invariant rather than forcing a scroll.
• A CSS-only .rotate-hint block, gated on a portrait narrow-width query, shows a hint with no JavaScript and clears on rotation to landscape. It is opt-in, framed in SKILL.md as a choice for intentionally landscape-only decks. The default stays adapt-to-portrait via the reflow block.
• The type clamp() floors in viewport-base.css are lifted so body and small text hold a legible minimum. A slide that would have shrunk past the floor now overflows instead, which is the intended fit-failure signal for the author to split the slide.

Test

• At a portrait phone width, flip grids and use-case grids become single column and stat and architecture rows stack, with no horizontal clipping. Desktop and landscape widths are unchanged.
• The rotate hint appears only in portrait below the width threshold and disappears on rotation, with no script involved.
• Body text never renders below the new minimum size.

Dependencies

Touches components.css, so it is cleanest to merge after the safe-area and reduced-motion PR.

Co-Authored-By: Leslie Barbara Knope (Claude Opus 4.8 (1M context)) noreply@anthropic.com

[vercel]

@Reebz is attempting to deploy a commit to the bluedusk's projects Team on Vercel.

A member of the Team first needs to authorize it.