Wiki cards — adopt Hermes user-stories tile design

- Masonry column layout (3 cols, 2 tablet, 1 mobile) via CSS columns
- Tile: 14px radius, thin border, subtle shadow, hover lift via translate
- Topic-colored 3px accent bar across top edge (CSS var --topic-accent)
- Pill-shaped topic badge (999px radius) instead of boxed badge
- Removed stale duplicate visual styles from animation block

js/main.js

@@ -762,6 +762,8 @@ function renderWikiCards(data) {
     
     const topic = currentLang === 'en' && item.topic_en ? item.topic_en : (item.topic || 'Unknown');
     const topicColor = getTopicColor(topic);
+    // Feed topic accent into CSS custom properties (top bar + hover border)
+    card.style.setProperty('--topic-accent', topicColor.border);
     
     const subtopic = currentLang === 'en' && item.subtopic_en ? item.subtopic_en : (item.subtopic || '');
     const content = currentLang === 'en' && item.wiki_en ? item.wiki_en : (item.wiki || '');
@@ -769,7 +771,7 @@ function renderWikiCards(data) {
     const teaser = content.trim().substring(0, 180);
     const teaserEnd = content.trim().length > 180 ? '...' : '';
     
-    const badgeStyle = 'background:' + topicColor.bg + ';color:' + topicColor.text + ';border-left:4px solid ' + topicColor.border;
+    const badgeStyle = 'background:' + topicColor.bg + ';color:' + topicColor.text;
     
     card.innerHTML = '<span class="wiki-topic-badge" style="' + badgeStyle + '">' + escapeHtml(topic).toUpperCase() + '</span>' +
       '<h3 class="wiki-subtopic-headline">' + escapeHtml(subtopic) + '</h3>' +