Style full-width article reader pages (#24)

## Summary

- add banner and article-reader styling for news and blog pages
- let article pages use the shared content rail without a private width cap
- give the article body a post-like ledger surface without ruling seams
- present Older/Newer navigation as large directional links at opposite page edges

## Verification

- all six `node tests/*.test.js` contract scripts
- NodeBB `make dev-build` asset compilation

Generated with Claude Code

Reviewed-on: #24
Co-authored-by: vickydotbat <vickydotbat@tutamail.com>
Co-committed-by: vickydotbat <vickydotbat@tutamail.com>

scss/westgate/_pages.scss

@@ -542,3 +542,203 @@ a.sow-card:hover {
 		grid-template-columns: 1fr;
 	}
 }
+
+// Banners: first post image, or the shared velvet gradient
+.sow-banner {
+	height: 140px;
+	background-size: cover;
+	background-position: center;
+}
+
+.sow-banner-gradient {
+	@include wg-velvet-cover;
+}
+
+.sow-list-item .sow-banner {
+	grid-column: 1 / -1;
+	height: 110px;
+	margin: calc(var(--wg-space-sm) * -1) calc(var(--wg-space-md) * -1) 0;
+	border-radius: 8px 8px 0 0;
+}
+
+// Article page
+.sow-article-banner {
+	height: clamp(180px, 32vw, 340px);
+	background-size: cover;
+	background-position: center;
+	border: 1px solid var(--wg-border);
+	border-radius: 8px;
+}
+
+.sow-article {
+	padding: var(--wg-space-lg) 0;
+
+	header h1 {
+		margin: 0 0 6px;
+	}
+}
+
+.sow-article-date {
+	font-family: var(--wg-font-code);
+	font-size: 0.75rem;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+	color: var(--wg-text-muted);
+	margin-bottom: var(--wg-space-md);
+}
+
+.sow-article-body {
+	padding: var(--wg-space-md);
+	color: var(--wg-text-soft);
+	font-size: 1.0625rem;
+	line-height: 1.7;
+	background: var(--wg-ledger-panel);
+	border: 1px solid var(--wg-ledger-border);
+	border-left-color: rgba(194, 163, 90, 0.32);
+	border-radius: 6px;
+	box-shadow: var(--wg-ledger-shadow);
+
+	h2 {
+		margin: var(--wg-space-xl) 0 var(--wg-space-sm);
+	}
+
+	h3 {
+		margin: var(--wg-space-lg) 0 var(--wg-space-xs);
+	}
+
+	p,
+	ul,
+	ol,
+	blockquote {
+		margin-bottom: var(--wg-space-md);
+	}
+
+	blockquote {
+		padding-left: var(--wg-space-md);
+		border-left: 2px solid var(--wg-gold-soft);
+		color: var(--wg-text-muted);
+	}
+
+	img,
+	video {
+		display: block;
+		max-width: 100%;
+		border-radius: 8px;
+	}
+}
+
+.sow-byline,
+.sow-byline-author {
+	display: flex;
+	align-items: center;
+	gap: var(--wg-space-xs);
+}
+
+.sow-byline {
+	margin-bottom: var(--wg-space-lg);
+	color: var(--wg-text-muted);
+	font-size: 0.875rem;
+}
+
+.sow-byline-author img {
+	width: 32px;
+	height: 32px;
+	border-radius: 50%;
+	object-fit: cover;
+}
+
+.sow-active-filter {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--wg-space-xs);
+	margin-top: var(--wg-space-md);
+	padding: 3px 9px;
+	color: var(--wg-gold);
+	background: rgba(194, 163, 90, 0.08);
+	border: 1px solid var(--wg-gold-soft);
+	border-radius: 4px;
+}
+
+.sow-active-filter a {
+	color: inherit;
+	font-size: 1.125rem;
+	line-height: 1;
+}
+
+.sow-article-neighbors,
+.sow-pagination {
+	display: flex;
+	justify-content: space-between;
+	gap: var(--wg-space-md);
+	margin-top: var(--wg-space-xl);
+}
+
+.sow-article-neighbors a {
+	display: flex;
+	align-items: baseline;
+	gap: var(--wg-space-xs);
+}
+
+.sow-article-older {
+	margin-right: auto;
+}
+
+.sow-article-newer {
+	justify-content: flex-end;
+	margin-left: auto;
+	text-align: right;
+}
+
+.sow-article-neighbors span {
+	font-family: var(--wg-font-code);
+	font-size: 0.6875rem;
+	text-transform: uppercase;
+	color: var(--wg-text-muted);
+}
+
+.sow-article-neighbors .sow-article-arrow {
+	font-size: 1.5rem;
+	line-height: 1;
+}
+
+.sow-related {
+	margin-top: var(--wg-space-xl);
+}
+
+.sow-related-grid {
+	display: grid;
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+	gap: var(--wg-space-sm);
+}
+
+.sow-related-grid .sow-banner {
+	height: 90px;
+}
+
+.sow-pagination a {
+	display: inline-block;
+	font-family: var(--wg-font-ui);
+	font-size: 0.8125rem;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+	font-weight: 600;
+	color: #d8cec0;
+	background: rgba(194, 163, 90, 0.06);
+	padding: 12px 24px;
+	border: 1px solid rgba(216, 194, 138, 0.28);
+	border-radius: 6px;
+}
+
+@media (max-width: 700px) {
+	.sow-related-grid {
+		grid-template-columns: 1fr;
+	}
+
+	.sow-article-neighbors {
+		flex-direction: column;
+	}
+
+	.sow-article-newer {
+		align-self: flex-end;
+	}
+}

scss/westgate/_surfaces.scss

@@ -251,13 +251,18 @@ li[component="category/topic"] .user-icon {
   }
 }
 
+// shared velvet gradient: groups/profile default covers + sow banner fallback
+@mixin wg-velvet-cover {
+  background-image:
+    radial-gradient(120% 90% at 18% 0%, rgba(58, 24, 48, 0.6), transparent 60%),
+    linear-gradient(100deg, #2a1222, #110f15 55%, #09080b) !important;
+}
+
 // replace core's grey-triangle default cover with the velvet material
 // (.cover on profiles, .list-cover on the groups list)
 .cover[style*="cover-default.png"],
 .list-cover[style*="cover-default.png"] {
-  background-image:
+  @include wg-velvet-cover;
-    radial-gradient(120% 90% at 18% 0%, rgba(58, 24, 48, 0.6), transparent 60%),
-    linear-gradient(100deg, #2a1222, #110f15 55%, #09080b) !important;
 }
 
 .account,