Show matched interests as a tag row instead of a callout

With the why line gone the accent-bar callout held nothing but "Matches: a · b",
which no longer earned its quoting. Every surface now puts one row directly
under the rubric: a small-caps "Matches" label and one pill chip per interest.
On the web that is one `.interest-chip` component (admins still get links to
the interest's article filter); the EPUB gets `.matches`/`.interest` rules in
both stylesheets, and `Understanding::interests_line` goes.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ESJbbzQ1b8fs5AA65tKw2q

src/epub/templates/style.css

@@ -160,16 +160,19 @@ hr.rule {
   color: #444444;
 }
 
-.why,
-.index-why {
+.matches {
   margin: 0.35em 0 0 0;
-  font-size: 0.9em;
+  font-size: 0.8em;
+  color: #444444;
 }
 
-.why-matches {
-  margin: 0.1em 0 0 0;
-  font-size: 0.85em;
-  color: #444444;
+.interest {
+  display: inline-block;
+  margin: 0 0.15em 0.15em 0;
+  padding: 0 0.5em;
+  border: 1px solid #888888;
+  border-radius: 0.8em;
+  white-space: nowrap;
 }
 
 .summary {