From ec24694a6d0a741128c2ee1f427a4e8a0314c4d6 Mon Sep 17 00:00:00 2001
From: Arlind <aru@fenja.ai>
Date: Thu, 18 Jun 2026 16:05:09 +0200
Subject: [PATCH] style(dispatches): rename to "Dispatch", tonal rows,
 back-to-Pulse link

Retitle the page, rewrite the lead, give each row a subtle tonal background,
and add a back arrow to Pulse.
---
 src/pages/dispatches/index.astro | 50 +++++++++++++++++++++++++++-----
 1 file changed, 43 insertions(+), 7 deletions(-)

diff --git a/src/pages/dispatches/index.astro b/src/pages/dispatches/index.astro
index d0c8653..df96ce1 100644
--- a/src/pages/dispatches/index.astro
+++ b/src/pages/dispatches/index.astro
@@ -23,9 +23,16 @@ function fmt(iso: string): string {
 <AppLayout title="Dispatches" user={user}>
   <div class="page">
 
+    <a href="/pulse" class="back-link">
+      <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+        <path d="M15 6l-6 6 6 6" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+      Pulse
+    </a>
+
     <header class="head">
-      <h1 class="head-title">Notes from the studio.</h1>
-      <p class="head-sub">Decisions, half-built ideas, and things we've changed our mind about.</p>
+      <h1 class="head-title">Dispatch.</h1>
+      <p class="head-sub">Where we share news from Fenja — progress, decisions, and what we're building next.</p>
     </header>
 
     {dispatches.length === 0 ? (
@@ -75,6 +82,25 @@ function fmt(iso: string): string {
     gap: var(--space-8);
   }
 
+  /* Back-to-Pulse link — a quiet arrow above the page title. */
+  .back-link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    align-self: flex-start;
+    font-family: var(--font-sans);
+    font-size: var(--text-label-md);
+    letter-spacing: var(--tracking-wide);
+    text-transform: uppercase;
+    color: var(--on-surface-variant);
+    text-decoration: none;
+    border-bottom: none;
+    transition: color var(--duration-fast) var(--ease-standard);
+  }
+  .back-link:hover { color: var(--pigment-terracotta); border-bottom: none; }
+  .back-link svg { transition: transform var(--duration-fast) var(--ease-standard); }
+  .back-link:hover svg { transform: translateX(-2px); }
+
   .head { max-width: 46rem; }
   .head-eyebrow {
     letter-spacing: var(--tracking-wider);
@@ -94,23 +120,33 @@ function fmt(iso: string): string {
   .head-sub { color: var(--on-surface-variant); margin-top: var(--space-3); max-width: 32rem; }
   .empty { color: var(--on-surface-muted); }
 
-  .d-list { list-style: none; padding: 0; margin: 0; }
-  .d-row { border-bottom: 0.5px solid var(--surface-card-border); }
-  .d-row:last-child { border-bottom: none; }
+  /* Rows are now standalone cards on a slight tonal background, separated by
+     whitespace rather than borders (per design system). */
+  .d-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+  .d-row { border-bottom: none; }
 
   .d-link {
     display: grid;
     grid-template-columns: 180px 1fr 130px;
     gap: var(--space-5);
-    padding: var(--space-5) var(--space-3);
+    padding: var(--space-5) var(--space-5);
     align-items: start;
     text-decoration: none;
     border-bottom: none;
     color: inherit;
+    border-radius: var(--radius-md);
+    background: color-mix(in oklab, var(--surface-card) 55%, transparent);
     transition: background var(--duration-fast) var(--ease-standard);
   }
   .d-link:hover {
-    background: color-mix(in oklab, var(--surface-card) 60%, transparent);
+    background: var(--surface-card);
     border-bottom: none;
   }