Fix OG image — match home page moleskine book shape with proper margins

[realproject7]

Summary

The current OG image thumbnail is getting cut off on the edges (PLOTLINK branding, genre tag, plotlink.xyz text all clipped). The layout needs to match the exact moleskine notebook shape from the home page, with content properly centered and enough margin so nothing gets cut.

Current behavior

• Content extends too close to edges — gets clipped in Farcaster/social previews
• PLOTLINK branding top-left is cut
• Genre tag top-right is cut ("Advent..." truncated)
• "plotlink.xyz" bottom-right is cut
• The notebook doesn't look like the home page moleskine shape

Expected behavior

• Moleskine book shape: Exact same visual as the home page story cards — the notebook with rounded corners, cream paper, ruled lines, red margin line
• Title and author INSIDE the moleskine shape: Just like the home page card
• Metadata OUTSIDE the moleskine shape: Plot count, price, genre, PlotLink branding displayed outside/below the notebook shape on the darker background
• Generous margins: All content well within the 1200x630 safe area — nothing should be clipped even with platform cropping
• Centered composition: The moleskine book centered in the image with balanced spacing

File

• src/app/story/[storylineId]/og/route.tsx

Acceptance Criteria

• OG image moleskine shape matches home page story cards exactly
• Title + author inside the notebook
• Metadata (plots, price, genre, branding) outside the notebook
• No content clipped in Farcaster embed preview
• Sufficient margins on all sides