Three phone defects, one of them measured (#215)

[bdelanghe]

From two screenshots on a phone. All three are on the live page right now.

1. The arrows were emoji

The external-link marker is U+2197 NORTH EAST ARROW, which has emoji presentation by default on iOS. Every external link on a phone trailed a blue-and-white tile instead of a hairline arrow. ︎ (variation selector-15) forces text presentation.

Applied in all four places that emit it: index.html, 404.html, build.mjs's nav renderer, gen-conformance.mjs.

2. Card copy at 32 characters per line

Measured at 393px, not eyeballed. These are 30-word blurbs rather than long-form prose, so the 45–75 guidance doesn't transfer directly — but 32 is tight even for a card, and the cost was structural: the card spent 64px of the viewport on its own inset and the wrap another 32, so a third of the screen was margin.

	before	after
characters per line	32	36
tallest card	351px	284px (−19%)
document height	4776px	4605px

The page gutter stays at 16px — dropping it to 12 buys one more character and makes the page look like it's falling off the edge. 16px of card inset is also comfortably clear of the 12px floor the card-inset gate enforces, so that gate still has room to catch a real regression.

3. Underlines that weren't underlines

.btn-link drew its rule with border-bottom, which spans the padding box. On a phone, where the colophon links stack instead of sitting in a row, each one trailed a rule wider than its own text and the section read as a list of dividers. Now text-decoration, which hugs the glyphs.

The padding stays — it's the touch target, and shrinking that to fix a hairline would be a bad trade.

What would have caught #2: nothing in the stack

You asked whether padding is an axe check. It isn't. axe scores the accessibility tree — contrast, names, roles, focus order, target size. Whitespace isn't in it.

And the card-inset gate (#216) checks the floor: text must clear its border by 12px. It is structurally incapable of seeing a ceiling — too much padding looks identical to correct padding from where it stands.

A characters-per-line floor would have caught this. I have not added one. That would be the fourth instrument this session, and the ceremony budget says stop. Recorded here so the choice is visible rather than silently skipped — say the word and it's about six lines inside the gate that already renders the page.

Verified

npm run check (23 gates) · brand meta/content/coverage/a11y · axe (13 pages, 0 serious) · a11y-heuristic (0 errors) · structure-audit · legibility PASS · and the unmerged card-inset gate from #216 run against this tree: 8 renders, all clear.

---

Generated by Claude Code