[Bug] Storyline header: restore mobile layout + desktop spacing fixes

[realproject7]

Problem

PR #819 moved stats inside the flex-1 column, which fixed desktop positioning but broke the mobile layout. Three issues:

1. Mobile layout broken (critical)

Previously mobile had a nice layout with cover + info side-by-side, then stats in a full-width section below. Now stats are crammed into the narrow right column next to the cover on mobile too — not enough space.

Fix: On mobile, stats grid and CTA button should be OUTSIDE the flex-row (full-width below). On desktop (sm+), they should stay INSIDE the flex-1 column next to the cover. Use responsive display/visibility or duplicate the stats with hidden/sm:block classes, or restructure with CSS grid.

2. Desktop: more spacing between info rows and stat boxes

The stats grid sits too close to the Writer/Genre rows. Currently mt-3 — increase to mt-5 or mt-6 for more breathing room.

3. Desktop: more gap between Moleskine cover and right info area

The cover and info column are too close together. Currently gap-4 (16px). Increase to gap-6 (24px) on desktop: gap-4 sm:gap-6. The 3-col stats grid should still align with the right edge of the info area (already handled by flex-1).

Acceptance Criteria

• Mobile: stats grid and CTA button are full-width below the cover+info row (restore previous mobile behavior)
• Desktop: stats grid and CTA inside the right column next to the cover (keep Move stats + CTA inside flex-1 column next to Moleskine cover #819 fix)
• Desktop: more spacing between writer/genre rows and stats grid
• Desktop: more gap between cover and info area (sm:gap-6)
• Stats grid right edge still aligns with info text on desktop

Branch

task/<issue>-header-mobile-restore