diff --git a/system/netlify/functions/news.mjs b/system/netlify/functions/news.mjs
index 45dd848746..1b3dec8800 100644
--- a/system/netlify/functions/news.mjs
+++ b/system/netlify/functions/news.mjs
@@ -552,8 +552,10 @@ function renderPostRow(post, idx, basePath) {
     } catch { return ""; }
   })() : "";
   const itemUrl = `${basePath}/${post.code}`;
+  const ext = post.externalAttribution;
+  const rowClass = ext ? `news-row news-row--external news-row--external-${escapeHtml(ext.source || 'bsky')}` : "news-row";
   return `
-  <div class="news-row">
+  <div class="${rowClass}"${ext ? ` data-external-source="${escapeHtml(ext.source || 'bsky')}"` : ""}>
     <div class="news-rank">${idx + 1}.</div>
     <div class="news-content">
       <div class="news-title">
@@ -561,10 +563,10 @@ function renderPostRow(post, idx, basePath) {
         ${displayUrl ? `<span class="news-domain">(<a href="${url}" target="_blank" rel="noreferrer">${displayUrl}</a>)</span>` : ""}
       </div>
       <div class="news-meta">
-        <span>by ${renderHandle(post.handle, post.externalAttribution ? {
+        <span>by ${renderHandle(post.handle, ext ? {
           external: true,
-          profileUrl: post.externalAttribution.profileUrl,
-          sourceLabel: post.externalAttribution.sourceLabel,
+          profileUrl: ext.profileUrl,
+          sourceLabel: ext.sourceLabel,
         } : undefined)}</span>
         <span><a href="${itemUrl}">${formatDate(post.when)}</a></span>
         <span><a href="${itemUrl}">${post.commentCount || 0} comments</a></span>
@@ -860,12 +862,17 @@ async function renderItemPage(database, basePath, code) {
   const hasMedia = youtubeId || kidlispCode || acPiece || imgurUrl || directImageUrl || efluxPreviewHtml || instagramPreviewHtml || ogPreviewHtml;
   const mediaHtml = youtubeEmbedHtml || kidlispPreviewHtml || acPreviewHtml || imgurPreviewHtml || directImagePreviewHtml || efluxPreviewHtml || instagramPreviewHtml || ogPreviewHtml;
 
+  const itemExt = hydratedPost.externalAttribution;
+  const mainClass = itemExt
+    ? `news-main news-item--external news-item--external-${escapeHtml(itemExt.source || 'bsky')}`
+    : "news-main";
+
   const body = `
   ${header(basePath)}
   ${hasMedia ? `<div class="news-hero-media">
     ${mediaHtml}
   </div>` : ''}
-  <main class="news-main">
+  <main class="${mainClass}"${itemExt ? ` data-external-source="${escapeHtml(itemExt.source || 'bsky')}"` : ""}>
     <div class="news-item-header">
       <div class="news-item-info">
         <table class="news-item-table" border="0" cellpadding="0" cellspacing="0">
@@ -890,12 +897,12 @@ async function renderItemPage(database, basePath, code) {
       </div>
     </div>
     ${hydratedPost.text ? `
-    <div class="news-op-text">
-      <div class="news-op-meta">${renderHandle(hydratedPost.handle, hydratedPost.externalAttribution ? {
+    <div class="news-op-text${itemExt ? ' news-op-text--external' : ''}">
+      <div class="news-op-meta">${renderHandle(hydratedPost.handle, itemExt ? {
         external: true,
-        profileUrl: hydratedPost.externalAttribution.profileUrl,
-        sourceLabel: hydratedPost.externalAttribution.sourceLabel,
-      } : undefined)} ${formatDate(hydratedPost.when)}</div>
+        profileUrl: itemExt.profileUrl,
+        sourceLabel: itemExt.sourceLabel,
+      } : undefined)} ${formatDate(hydratedPost.when)}${itemExt?.postUrl ? ` · <a href="${escapeHtml(itemExt.postUrl)}" class="news-external-original" target="_blank" rel="noopener">original</a>` : ""}</div>
       <div class="news-op-body">${renderMarkdown(hydratedPost.text)}</div>
     </div>` : ""}
     <div class="news-comments">
diff --git a/system/public/news.aesthetic.computer/main.css b/system/public/news.aesthetic.computer/main.css
index cbabd5bb1f..8f657dbdc1 100644
--- a/system/public/news.aesthetic.computer/main.css
+++ b/system/public/news.aesthetic.computer/main.css
@@ -455,27 +455,94 @@ body {
   text-decoration: underline;
 }
 
-/* External-source attribution (e.g. Bluesky) */
+/* =========================================================================
+   External-source posts (e.g. Bluesky @artistnewsnetwork).
+   Visually distinct from AC-authored headlines: tinted left accent bar,
+   bsky-blue handle, lowercase "bsky" badge next to the handle.
+   ========================================================================= */
+
+/* Per-source palette. Defaults to Bluesky blue; add new sources here. */
+:root {
+  --external-bsky: #2088ff;
+  --external-bsky-tint: rgba(32, 136, 255, 0.08);
+  --external-bsky-edge: rgba(32, 136, 255, 0.55);
+}
+
+/* --- Row on the list page ----------------------------------------------- */
+.news-row--external {
+  position: relative;
+  padding-left: 8px;
+  border-left: 3px solid var(--external-bsky-edge);
+  background: var(--external-bsky-tint);
+  border-radius: 0 3px 3px 0;
+}
+
+.news-row--external .news-title a {
+  color: var(--text-link);
+}
+
+.news-row--external .news-rank {
+  color: var(--external-bsky-edge);
+}
+
+/* --- Item page main container ------------------------------------------- */
+.news-item--external {
+  border-left: 3px solid var(--external-bsky-edge);
+  padding-left: 10px;
+  background: linear-gradient(
+    to right,
+    var(--external-bsky-tint) 0%,
+    transparent 240px
+  );
+}
+
+.news-op-text--external {
+  border-left: 2px solid var(--external-bsky-edge);
+  padding-left: 10px;
+  margin-left: -2px;
+}
+
+/* --- Handle link ("@artistnewsnetwork") --------------------------------- */
+.news-handle-link.news-external-handle {
+  color: var(--external-bsky);
+}
+.news-handle-link.news-external-handle:hover {
+  color: var(--external-bsky);
+  text-decoration: underline;
+}
+
+/* --- Source badge ("bsky") next to the handle --------------------------- */
 .news-external-badge {
   display: inline-block;
   margin-left: 4px;
-  padding: 0 4px;
+  padding: 0 5px;
   font-size: 0.7em;
   font-weight: normal;
   text-transform: uppercase;
-  letter-spacing: 0.04em;
-  border: 1px solid currentColor;
+  letter-spacing: 0.05em;
+  color: var(--external-bsky);
+  border: 1px solid var(--external-bsky-edge);
   border-radius: 3px;
-  opacity: 0.65;
+  background: var(--external-bsky-tint);
   vertical-align: 1px;
+  opacity: 0.9;
 }
 
+/* --- "via @handle · original" on the item page -------------------------- */
 .news-external-attrib {
-  opacity: 0.75;
+  opacity: 0.8;
   font-size: 0.9em;
   margin-right: 8px;
 }
 
+.news-external-original {
+  color: var(--external-bsky);
+  text-decoration: none;
+}
+.news-external-original:hover {
+  text-decoration: underline;
+}
+
 /* ===== Item Page (HN-style table layout) ===== */
 .news-item-table {
   margin-bottom: 10px;