feat(method): lay out the stack as a ruled cell strip with roles

[yigitdot]

What changed

The stack line under How it works was a single inline run (Rust · BLAKE3 · QUIC · iroh · USDC · EVM). It's now a ruled strip of cells. Each cell shows the name set large and a small uppercase role label, prefixed by a plain square in the section's ink. There's no accent colour.

name	role
Rust	node & client
BLAKE3	verification
QUIC	transport
iroh	connectivity
USDC	payment
EVM	settlement

• Layout: 2 columns on phones, 3 at @xl, one row of 6 at @6xl. Each hairline comes from the list's top/left border plus each cell's right/bottom border. The result is a single rule at any column count, and a closed grid whenever STACK.length divides evenly by the column count.
• Six-across sizing: at 6 columns the longest name (currently BLAKE3) overflows --text-h3, so there names size off the Frame's container width (3.4cqi, ≈44px at the 1280px max frame, ≈39px at the narrowest 6-column width).
• Labels: .meta and .hug are unlayered in globals.css, so a Tailwind utility beside either can't override it. The role label therefore writes .meta out as utilities at 12px rather than fighting it with !.
• a11y: the square marker is aria-hidden, and the <ul> is named by the stack eyebrow via aria-labelledby.

Data / mirror

• STACK in lib/copy.ts is now readonly StackItem[] ({ name, role }), so the roles live with the rest of the homepage copy.
• llms-full.txt serialises it through a new stackLine() helper: Stack: Rust (node & client) · BLAKE3 (verification) · ….

Tests

• lib/copy.test.ts
  • screens both fields of every STACK item;
  • pins exactly six items (the grid assumes 2/3/6 columns);
  • checks that each name appears once (name is the React key).
• components/site/Method.test.ts (new)
  • one <li> per STACK item, in order, with the name span over the role span;
  • the marker is aria-hidden;
  • the list is labelled by the stack eyebrow.
• app/llms-full.txt/route.test.ts asserts the serialised Stack: line, built independently of stackLine().

Review follow-ups (second commit)

A multi-agent review (code, comments, tests, types) found no bugs. The follow-ups:

• dropped a dead tracking-[-0.03em] (.hug already sets -0.04em; rendering unchanged);
• made the comments accurate and less likely to go stale;
• added the invariant and render tests above;
• added the list's accessible name.

Verification

• pnpm typecheck, pnpm lint, pnpm format:check and pnpm build (incl. check:out / check:og-image) pass.
• Checked in the browser at 1440, 1240, 768 and 375px: no overflow and no horizontal scroll. When a label wraps on mobile, its square stays on the first line.
• pnpm test: 474 passed. components/site/FaqList.test.ts fails to load locally with react 19.2.8 vs react-dom 19.2.7 installed. That's a local install mismatch unrelated to this diff.

🤖 Generated with Claude Code

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[cloudflare-workers-and-pages]

Deploying website with    Cloudflare Pages

Latest commit:	79dbbfe
Status:	✅  Deploy successful!
Preview URL:	https://c8fa3014.website-70y.pages.dev
Branch Preview URL:	https://claude-frontend-design-rust.website-70y.pages.dev

View logs