A heading row between every pair of cards spread the list out. The
letter now sits in a narrow column at the card's left, on the first
row's name line, and the cards close up to the s step.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SfL6MhttDTmvaQkrMSCska

diff --git a/public/admin.css b/public/admin.css
index 3b41fe9..dd41bca 100644
--- a/public/admin.css
+++ b/public/admin.css
@@ -649,17 +649,29 @@ section > h2 {
 }
 
 /* /contacts' rows, one card per first letter (ContactsIndex's
-   letter_groups). The letter is a caption for its card the way a
-   section's heading is for its list, so it keeps a tighter step to
-   its own card than the cards keep to each other: each letter reads
-   as the head of the card under it, not the foot of the one above. */
+   letter_groups), the letter in a narrow column at the card's left
+   rather than a heading over it: a heading row between every pair of
+   cards spread the list out, and at the side the letter still marks
+   where its card starts. The column fits "#" and a W alike. The
+   letter sits on the first row's name line: the row's own top
+   padding, then a line box as tall as the row's (Gloss's .card > li
+   sets step--1, the body's 1.55 carries), so the label's text
+   centers where the name's does. */
 .letter-groups {
   display: flex;
   flex-direction: column;
-  gap: var(--gl-space-m);
+  gap: var(--gl-space-s);
+}
+.letter-groups > section {
+  display: grid;
+  grid-template-columns: 1.5rem minmax(0, 1fr);
+  column-gap: var(--gl-space-xs);
+  align-items: start;
 }
 .letter-groups h3 {
-  margin-bottom: var(--gl-space-2xs);
+  margin: 0;
+  padding-block-start: var(--gl-space-xs);
+  line-height: calc(var(--gl-step--1) * 1.55);
 }
 
 /* base/typography.css's `li + li { margin-top: var(--gl-space-3xs); }`