[Enhancement] Storyline page: redesign header into 3 clear zones (Ridibooks-inspired)

[realproject7]

Problem

The current storyline page header crams everything into one dense area — Moleskine cover, title, rating, writer info, genre, plot count, AND 3 stat boxes all inside the same flex container. It feels cluttered compared to professional web fiction platforms like Ridibooks.

Design Reference

Ridibooks (Korean web fiction platform) uses a clear 3-zone layout:

• Zone 1: Cover + core identity (title, rating, author) — minimal and clean
• Zone 2: Metadata/stats in a separate bordered section below the hero
• Zone 3: Content (chapter list)

Reference images are available in the GitHub issue comments (Ridibooks desktop + mobile screenshots).

Solution — 3-Zone Layout

Zone 1: Hero (Cover + Identity)

┌─────────────────────────────────────────────────────────┐
│                                                         │
│  ┌──────────┐   Title                                   │
│  │          │   ★★★★★ 5.0 (2) · 👁 38                  │
│  │ MYSTERY  │                                           │
│  │          │   Writer    @project7                      │
│  │  Book    │   Genre     Mystery · English              │
│  │  Title   │                                           │
│  │          │                                           │
│  │  4 plots │                                           │
│  └──────────┘                                           │
│                                                         │
└─────────────────────────────────────────────────────────┘

What changes:

• Remove stat boxes (Market Cap, Supply, Deadline) from this area
• Remove "Plots" info row (already shown on cover)
• Keep ONLY: title, rating/views, writer, genre/language
• Result: clean, scannable identity section

Zone 2: Stats Card + Action (new bordered section)

┌─────────────────────────────────────────────────────────┐
│  MARKET CAP        SUPPLY MINTED      DEADLINE          │
│  $100.51 +259%     535,445 tokens     4h 54m 24s        │
│                                                         │
│  TOKEN PRICE       PLOTS              CREATED           │
│  0.000187 PLOT     4 plots            Jan 15, 2026      │
└─────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────┐
│                  + Add a new Plot                        │
└─────────────────────────────────────────────────────────┘

What changes:

• Stats get their own bordered card, visually separated from the hero
• Expand from 3 boxes to a 2-row × 3-col grid (6 items):
  • Row 1: Market Cap | Supply Minted | Deadline
  • Row 2: Token Price | Plot Count | Created date
• "Add a new Plot" button below the stats card
• Each cell uses the existing stat box style: label (text-[9px] uppercase text-muted) + value (text-sm font-bold)

Zone 3: Content (unchanged)

Genesis section → chained plots. No changes needed.

---

Mobile Wireframe

┌───────────────────────┐
│    ┌──────────┐       │
│    │          │       │
│    │ MYSTERY  │       │
│    │          │       │
│    │  Book    │       │
│    │  Title   │       │
│    │          │       │
│    │  4 plots │       │
│    └──────────┘       │
│                       │
│ Title                 │
│ ★★★★★ 5.0 (2) · 👁 5 │
│ Writer   @project7    │
│ Genre    Mystery      │
│                       │
├───────────────────────┤
│ MARKET CAP  │ SUPPLY  │
│ $100 +259%  │ 535,445 │
│─────────────┼─────────│
│ DEADLINE    │ PLOTS   │
│ 4h 54m 24s  │ 4 plots │
│─────────────┼─────────│
│ TOKEN PRICE │ CREATED │
│ 0.000187    │ Jan 15  │
├───────────────────────┤
│    + Add a new Plot   │
└───────────────────────┘

Mobile notes:

• Cover centered, text left-aligned below (per Storyline page: left-align title and info on mobile #806)
• Stats card: grid-cols-2 on mobile (2×3), grid-cols-3 on desktop (3×2)
• Full-width bordered card, separated from hero by a gap

Implementation Notes

1. Split StoryHeader into two sections: StoryHero (Zone 1) and StoryStats (Zone 2)
2. Stats card sits between the header border-bottom and the Genesis section
3. New data to surface: Token Price (already available from priceInfo.pricePerToken) and Created date (from storyline.block_timestamp)
4. "Add a new Plot" moves from inside the header to below the stats card
5. The Moleskine cover remains decorative — title/genre shown on it are supplementary to the info panel

Acceptance Criteria

• Zone 1 (hero): only cover + title + rating + writer + genre — no stat boxes
• Zone 2 (stats): bordered card with 6 stat cells in responsive grid (3-col desktop, 2-col mobile)
• Zone 2 includes: Market Cap, Supply Minted, Deadline, Token Price, Plot Count, Created date
• "Add a new Plot" button below the stats card
• Mobile: cover centered, text left-aligned, stats in 2-col grid
• Desktop: cover + info side-by-side, stats in 3-col grid
• Existing deadline/sunset logic preserved
• No visual regression on the rest of the page

Branch

task/<issue>-storyline-header-3zone