A.7.5-polish-7 h2 3-letter suffix spacing — Sky/Sea/Kit use space-around instead of space-between so the trio doesn't park letters at slot edges. User-reported 2026-05-25 PM: "These three 3-letter titles—Sky, Sea, and Kit—take up way too much space" — the default justify-content: space-between on the suffix word-span (_base.scss:248-253) put the first + last letter flush against the slot's edges + left a yawning gap mid-span ("S E A" reads as a stretched-apart trio).

**Fix** (length-keyed via data attr — extensible to other lengths):
1. `base.html` h2 letter-splitter script adds `span.dataset.letters = String(text.length)` to every word-span as it splits. Length surfaces as `data-letters="3"` / `"4"` / etc. on the DOM.
2. `_base.scss`'s h2 block gets a new `> span[data-letters="3"] { justify-content: space-around; }` override AFTER the default `> span` rule. `space-around` puts equal padding on both sides of each letter, clustering the trio inside the slot rather than splaying it.

Surfaces affected (any suffix == 3 letters): Game Sky, Game Sea, Game Kit, Dash Sky — basically every page whose `{% block header_text %}` renders a 3-char suffix tail.  Other lengths (Sign / Note / Post / Board / Wallet etc.) unaffected — they keep the default `space-between` because the larger letter count fills the slot naturally w/o looking stretched.

**Why length-keyed selector over class-naming**: future expansion. If a 2-letter title ever lands (hypothetical AP / WR), the same selector pattern (`[data-letters="2"]`) bolts in w/o needing a new class taxonomy. The data attr is universal + readable in DevTools. The same hook also opens up `[data-letters]` font-size scaling later if needed.

**No regression risk for prefix word**: prefixes are always 4-letter (BILL / DASH / GAME etc. per the `_base.scss` comment at line 222: "First word (always 4 letters)") so `[data-letters="3"]` never matches them; default `space-between` continues for prefix. Verified across all `{% block header_text %}` consumers — none use a 3-letter prefix.

Tests: 1314/1314 IT+UT total green (74s; pure SCSS + 1-line JS data-attr addition, no test surface). Visual verify pending user confirmation but the change is contained: the new rule is additive at higher specificity (`> span[data-letters="3"]` = 0,0,2,0 vs `> span` = 0,0,0,1 child combinator) + only justifies-content differently; nothing else cascades.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/static_src/scss/_base.scss

@@ -264,6 +264,19 @@ body {
                         flex: 0 0 55%;
                         padding-inline-start: 0.4em;
                     }
+                    // Sprint A.7.5-polish-7 — 3-letter suffix special case
+                    // (SKY / SEA / KIT). Default `space-between` parks the
+                    // first + last letter at the slot edges + leaves a yawning
+                    // gap mid-span ("S      E      A"). `space-around` puts
+                    // equal padding on both sides of each letter so the trio
+                    // sits more tightly clustered inside the slot. Data attr
+                    // `data-letters` injected by `base.html`'s splitter script
+                    // — length-keyed so future special cases (e.g. 2-letter
+                    // for a hypothetical AP / WR title) bolt in via the same
+                    // selector pattern.
+                    > span[data-letters="3"] {
+                        justify-content: space-around;
+                    }
                 }
             }
         }

src/templates/core/base.html

@@ -88,6 +88,13 @@
                 var text = (span.textContent || '').trim();
                 if (!text) continue;
                 span.dataset.lettersSplit = '1';
+                // Sprint A.7.5-polish-7 — letter count exposed as data-letters
+                // so CSS can special-case justification per length. 3-letter
+                // suffixes (SKY/SEA/KIT) get `space-around` instead of the
+                // default `space-between` to avoid the letters parking at the
+                // slot edges w. a yawning gap mid-span. See `_base.scss`'s
+                // `h2 > span[data-letters="3"]` rule.
+                span.dataset.letters = String(text.length);
                 span.setAttribute('aria-label', text);
                 span.textContent = '';
                 for (var j = 0; j < text.length; j++) {