scss/westgate/_pages.scss

@@ -542,3 +542,60 @@ 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 {
+	max-width: 760px;
+	margin: 0 auto;
+	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 {
+	color: var(--wg-text-soft);
+
+	img,
+	video {
+		display: block;
+		max-width: 100%;
+		border-radius: 8px;
+	}
+}

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:
-    radial-gradient(120% 90% at 18% 0%, rgba(58, 24, 48, 0.6), transparent 60%),
-    linear-gradient(100deg, #2a1222, #110f15 55%, #09080b) !important;
+  @include wg-velvet-cover;
 }
 
 .account,