Fix OG image — match home page moleskine layout exactly

[realproject7]

Summary

The share thumbnail OG image still doesn't match the home page's moleskine card layout. The current design has a left notebook + right metadata panel, but it should mirror the home page card style exactly.

Current problems

• Moleskine notebook is shoved to the left, not centered
• Genre tag is outside the moleskine (on the right panel) — should be inside, top-left of the cover
• Title and author are inside the notebook but not properly centered
• Plot count and price info are outside on the right — should be inside the moleskine at the bottom
• No TVL/USD value shown

Expected layout — match the home page StoryCard exactly

The OG image should look like a single centered moleskine notebook card:

1. Moleskine cover (centered in the image):
   • Top-left inside: Genre tag (e.g. SCIENCE FICTION badge)
   • Center: Story title (Lora serif, bold)
   • Bottom inside: Plot count badge + TVL with USD value (e.g. [2 plots] TVL: 2.40 PLOT ($0.012))
2. Below the moleskine: Author name (by @project7) and plotlink.xyz branding
3. Moleskine should be centered in the 1200x630 image with generous margins

File

• src/app/story/[storylineId]/og/route.tsx
• Reference: src/components/StoryCard.tsx for the exact home page layout

Acceptance Criteria

• OG image layout matches home page moleskine card style
• Moleskine centered in the image
• Genre tag inside the cover (top-left)
• Title centered inside the cover
• Plot count + TVL with USD inside the cover (bottom)
• Author + branding outside/below the cover
• Nothing clipped in Farcaster/X previews