feat(web): refresh site, book, and social card with "Drafting Table" identity

Landing page:
- Drafting-table hero (blueprint grid, redlined brand mark, title block)
- Honest 4-command surface (init/new-track/implement/review) + routing diagram
- Broadened problem/pipeline/features copy; bughunt recast as review escalation
- Accuracy sweep: 159 languages, 33 commands, 6 graph modes, 6 platforms

Book (shared css/book.css refresh layer — applies to all 50 pages):
- Drawing-label eyebrows, redline reading-progress, calmer surfaces
- Landing rebuilt as a drafting sheet with title block
- Metadata corrected: "24 chapters" -> "22 chapters and 2 appendices"

Social card (social-preview.svg/.png):
- Redesigned to Drafting Table identity (grid, redline mark, title block)
- Fixed stale stats: v3.2.1 -> 3.3.1, 9 -> 159 languages
- Cache-bust og:image/twitter:image (?v=331) + og:image dimensions site-wide
- Aligned og:image:alt to new positioning

New: web/css/refresh-v4.css. command-reference: row anchors + /draft:jira row.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: mayurpise

web/blog/blast-radius-walkthrough/index.html

@@ -14,11 +14,13 @@
     <meta property="og:description" content="A real impact-mode run on a hotspot before a single line gets written. 47 downstream files, 12 tests, 3 config templates — and a refactor plan reshaped before /draft:implement starts.">
     <meta property="og:type" content="article">
     <meta property="og:url" content="https://getdraft.dev/blog/blast-radius-walkthrough/">
-    <meta property="og:image" content="https://getdraft.dev/social-preview.png">
+    <meta property="og:image" content="https://getdraft.dev/social-preview.png?v=331">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="630">
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="What Will This Change Break? A Real Blast-Radius Walkthrough">
     <meta name="twitter:description" content="From 'small change' to 47 downstream files, 12 tests, 3 config templates — and the refactor plan reshaped before any code lands.">
-    <meta name="twitter:image" content="https://getdraft.dev/social-preview.png">
+    <meta name="twitter:image" content="https://getdraft.dev/social-preview.png?v=331">
     <link rel="canonical" href="https://getdraft.dev/blog/blast-radius-walkthrough/">
 
     <script type="application/ld+json">

web/blog/decompose-payment-gateway/index.html

@@ -14,11 +14,13 @@
     <meta property="og:description" content="Eight modules, a circular dependency caught and broken before any code, and an LLD with contracts for the two high-complexity modules.">
     <meta property="og:type" content="article">
     <meta property="og:url" content="https://getdraft.dev/blog/decompose-payment-gateway/">
-    <meta property="og:image" content="https://getdraft.dev/social-preview.png">
+    <meta property="og:image" content="https://getdraft.dev/social-preview.png?v=331">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="630">
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="Decomposing a Payment Gateway Integration: A Real /draft:decompose Walkthrough">
     <meta name="twitter:description" content="From tangled task list to four cleanly-phased module builds, with a circular dependency caught before a single line of code.">
-    <meta name="twitter:image" content="https://getdraft.dev/social-preview.png">
+    <meta name="twitter:image" content="https://getdraft.dev/social-preview.png?v=331">
     <link rel="canonical" href="https://getdraft.dev/blog/decompose-payment-gateway/">
 
     <script type="application/ld+json">

web/blog/graph-engine-vs-grep/index.html

@@ -14,11 +14,13 @@
     <meta property="og:description" content="grep is faster on trivial lookups. It's also wrong more often and costs your AI agent up to 108× more tokens to reach the right answer. Accuracy and tokens — not latency — are the axes that matter in an agent loop.">
     <meta property="og:type" content="article">
     <meta property="og:url" content="https://getdraft.dev/blog/graph-engine-vs-grep/">
-    <meta property="og:image" content="https://getdraft.dev/social-preview.png">
+    <meta property="og:image" content="https://getdraft.dev/social-preview.png?v=331">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="630">
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="Speed Is the Wrong Axis: Draft's Graph Engine vs grep">
     <meta name="twitter:description" content="grep wins raw latency. The graph engine wins accuracy (2× precision/recall) and tokens (up to 108× cheaper per correct answer) — and the gap grows with codebase size.">
-    <meta name="twitter:image" content="https://getdraft.dev/social-preview.png">
+    <meta name="twitter:image" content="https://getdraft.dev/social-preview.png?v=331">
     <link rel="canonical" href="https://getdraft.dev/blog/graph-engine-vs-grep/">
 
     <script type="application/ld+json">

web/blog/index.html

@@ -13,11 +13,13 @@
     <meta property="og:description" content="Field notes on Context-Driven Development, Draft's knowledge graph, and getting AI to write production code.">
     <meta property="og:type" content="website">
     <meta property="og:url" content="https://getdraft.dev/blog/">
-    <meta property="og:image" content="https://getdraft.dev/social-preview.png">
+    <meta property="og:image" content="https://getdraft.dev/social-preview.png?v=331">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="630">
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="Blog — Draft">
     <meta name="twitter:description" content="Field notes on Context-Driven Development, Draft's knowledge graph, and getting AI to write production code.">
-    <meta name="twitter:image" content="https://getdraft.dev/social-preview.png">
+    <meta name="twitter:image" content="https://getdraft.dev/social-preview.png?v=331">
     <link rel="canonical" href="https://getdraft.dev/blog/">
     <link rel="alternate" type="application/rss+xml" title="Draft Blog RSS" href="https://getdraft.dev/feed.xml">
 

web/blog/local-graph-engine/index.html

@@ -14,11 +14,13 @@
     <meta property="og:description" content="A local, live-queried knowledge graph, powered by codebase-memory-mcp and installed alongside the Draft plugin. No MCP server, no SaaS, no cloud, no API key, no leaked code.">
     <meta property="og:type" content="article">
     <meta property="og:url" content="https://getdraft.dev/blog/local-graph-engine/">
-    <meta property="og:image" content="https://getdraft.dev/social-preview.png">
+    <meta property="og:image" content="https://getdraft.dev/social-preview.png?v=331">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="630">
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="Your AI Assistant Doesn't Understand Your Codebase. Here's the Fix That Lives Inside Your Repo.">
     <meta name="twitter:description" content="Draft's graph engine: deterministic codebase understanding for AI assistants, with no MCP server, no SaaS, no leaked code.">
-    <meta name="twitter:image" content="https://getdraft.dev/social-preview.png">
+    <meta name="twitter:image" content="https://getdraft.dev/social-preview.png?v=331">
     <link rel="canonical" href="https://getdraft.dev/blog/local-graph-engine/">
 
     <script type="application/ld+json">

web/blog/mcp-tool-discovery/index.html

@@ -14,11 +14,13 @@
     <meta property="og:description" content="Loading every MCP tool schema upfront costs 50–140K tokens. Three agents fixed it. One still hasn't. A 2026 field comparison.">
     <meta property="og:type" content="article">
     <meta property="og:url" content="https://getdraft.dev/blog/mcp-tool-discovery/">
-    <meta property="og:image" content="https://getdraft.dev/social-preview.png">
+    <meta property="og:image" content="https://getdraft.dev/social-preview.png?v=331">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="630">
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="The Tool Tax: How Four Coding Agents Handle 200 MCP Tools">
     <meta name="twitter:description" content="Same pattern, four incompatible implementations. The 2026 comparison of dynamic MCP tool discovery across Claude Code, Cursor, Copilot, and Codex CLI.">
-    <meta name="twitter:image" content="https://getdraft.dev/social-preview.png">
+    <meta name="twitter:image" content="https://getdraft.dev/social-preview.png?v=331">
     <link rel="canonical" href="https://getdraft.dev/blog/mcp-tool-discovery/">
 
     <script type="application/ld+json">

web/blog/replaced-kiro-with-free-plugin/index.html

@@ -14,11 +14,13 @@
     <meta property="og:description" content="Bug hunting, ACID enforcement, three-stage review, architecture discovery, IDE portability, and a $0 price tag — Kiro vs Draft, the honest comparison.">
     <meta property="og:type" content="article">
     <meta property="og:url" content="https://getdraft.dev/blog/replaced-kiro-with-free-plugin/">
-    <meta property="og:image" content="https://getdraft.dev/social-preview.png">
+    <meta property="og:image" content="https://getdraft.dev/social-preview.png?v=331">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="630">
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="I Replaced Kiro With a Free Plugin — Here's What Happened">
     <meta name="twitter:description" content="Kiro vs Draft, the honest comparison from a solo developer competing with Amazon.">
-    <meta name="twitter:image" content="https://getdraft.dev/social-preview.png">
+    <meta name="twitter:image" content="https://getdraft.dev/social-preview.png?v=331">
     <link rel="canonical" href="https://getdraft.dev/blog/replaced-kiro-with-free-plugin/">
 
     <script type="application/ld+json">

web/book/adrs/index.html

@@ -14,12 +14,14 @@
     <meta property="og:description" content="Architecture Decision Records — structured decision capture with context, rationale, consequences, and lifecycle management.">
     <meta property="og:type" content="article">
     <meta property="og:url" content="https://getdraft.dev/book/adrs/">
-    <meta property="og:image" content="https://getdraft.dev/social-preview.png">
+    <meta property="og:image" content="https://getdraft.dev/social-preview.png?v=331">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="630">
     <meta property="og:image:alt" content="Architecture Decision Records — Draft Book">
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="Architecture Decision Records — Draft Book">
     <meta name="twitter:description" content="Architecture Decision Records — structured decision capture with context, rationale, consequences, and lifecycle management.">
-    <meta name="twitter:image" content="https://getdraft.dev/social-preview.png">
+    <meta name="twitter:image" content="https://getdraft.dev/social-preview.png?v=331">
     <meta name="twitter:image:alt" content="Architecture Decision Records — Draft Book">
     <link rel="canonical" href="https://getdraft.dev/book/adrs/">
 

web/book/agent-system/index.html

@@ -14,12 +14,14 @@
     <meta property="og:description" content="Seven specialized agents — Architect, Debugger, Ops, Planner, RCA, Reviewer, and Writer — each with behavioral protocols tuned for their domain.">
     <meta property="og:type" content="article">
     <meta property="og:url" content="https://getdraft.dev/book/agent-system/">
-    <meta property="og:image" content="https://getdraft.dev/social-preview.png">
+    <meta property="og:image" content="https://getdraft.dev/social-preview.png?v=331">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="630">
     <meta property="og:image:alt" content="The Agent System — Draft Book">
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="The Agent System — Draft Book">
     <meta name="twitter:description" content="Seven specialized agents — Architect, Debugger, Ops, Planner, RCA, Reviewer, and Writer — each with behavioral protocols tuned for their domain.">
-    <meta name="twitter:image" content="https://getdraft.dev/social-preview.png">
+    <meta name="twitter:image" content="https://getdraft.dev/social-preview.png?v=331">
     <meta name="twitter:image:alt" content="The Agent System — Draft Book">
     <link rel="canonical" href="https://getdraft.dev/book/agent-system/">
 

web/book/bug-hunt/index.html

@@ -14,12 +14,14 @@
     <meta property="og:description" content="14-dimension bug hunting sweep — from null safety to concurrency, security to algorithmic complexity. Only HIGH/CONFIRMED confidence reported.">
     <meta property="og:type" content="article">
     <meta property="og:url" content="https://getdraft.dev/book/bug-hunt/">
-    <meta property="og:image" content="https://getdraft.dev/social-preview.png">
+    <meta property="og:image" content="https://getdraft.dev/social-preview.png?v=331">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="630">
     <meta property="og:image:alt" content="Bug Hunt — Draft Book">
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="Bug Hunt — Draft Book">
     <meta name="twitter:description" content="14-dimension bug hunting sweep — from null safety to concurrency, security to algorithmic complexity. Only HIGH/CONFIRMED confidence reported.">
-    <meta name="twitter:image" content="https://getdraft.dev/social-preview.png">
+    <meta name="twitter:image" content="https://getdraft.dev/social-preview.png?v=331">
     <meta name="twitter:image:alt" content="Bug Hunt — Draft Book">
     <link rel="canonical" href="https://getdraft.dev/book/bug-hunt/">