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

css/styles.css

@@ -234,24 +234,10 @@
   animation: cardStack 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 }
 
-/* Wiki cards — staggered entrance */
+/* Wiki cards — staggered entrance (visual design lives in WIKI NEW DESIGN section) */
 .wiki-card-new {
   opacity: 0;
   transform: translateY(25px);
-  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
-              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
-  /* Visual styles */
-  background: #ffffff;
-  border-radius: 12px;
-  padding: 16px;
-  border: 1px solid #e4e6eb;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  cursor: pointer;
-  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
-}
-.wiki-card-new:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  border-color: #1877f2;
 }
 .wiki-card-new.visible {
   opacity: 1 !important;
@@ -1064,12 +1050,18 @@ body[data-lang="en"] .hide-de { display: none !important; }
 /* ========================================
    WIKI CARDS
    ======================================== */
+/* Masonry column grid (like Hermes user-stories) */
 .wiki-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: 20px;
+  column-count: 3;
+  column-gap: 20px;
   margin-top: 30px;
 }
+@media (max-width: 1024px) {
+  .wiki-grid { column-count: 2; }
+}
+@media (max-width: 640px) {
+  .wiki-grid { column-count: 1; }
+}
 .wiki-card {
   padding: 16px;
   border-radius: 10px;
@@ -1122,61 +1114,76 @@ body[data-lang="en"] .hide-de { display: none !important; }
 .wiki-card-subtopic { color: #1877f2; }
 
 /* ========================================
-   WIKI NEW DESIGN — Individual Cards
+   WIKI NEW DESIGN — Hermes-style tiles
+   (accent top bar, pill badge, masonry tile)
 */
 .wiki-card-new {
+  break-inside: avoid;
+  -webkit-column-break-inside: avoid;
   background: #fff;
-  border-radius: 12px;
-  padding: 24px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-  cursor: pointer;
-  border-left: 4px solid #1877f2;
+  border: 1px solid #e4e6eb;
+  border-radius: 14px;
+  padding: 18px 19px 17px;
+  margin: 0 0 20px;
+  display: inline-block;
+  width: 100%;
   position: relative;
   overflow: hidden;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  cursor: pointer;
+  transition: translate 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
 }
+/* topic-colored accent bar across the top edge */
+.wiki-card-new::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 3px;
+  background: var(--topic-accent, #1877f2);
+  opacity: 0.9;
+}
+/* hover lift uses `translate` (separate property) so the cardStack
+   animation's forwards-fill on `transform` doesn't kill it */
 .wiki-card-new:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-  border-left-color: #0d5fc9;
+  translate: 0 -3px;
+  border-color: var(--topic-accent, #1877f2);
+  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.25);
 }
 .wiki-card-new:active {
-  transform: translateY(0) scale(0.99);
+  scale: 0.99;
 }
 
 .wiki-topic-badge {
   display: inline-block;
-  padding: 4px 10px;
-  font-size: 12px;
+  padding: 2px 10px;
+  font-size: 11px;
   font-weight: 600;
-  border-radius: 6px;
-  margin-bottom: 12px;
+  border-radius: 999px;
+  margin-bottom: 10px;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
-  border-left: 4px solid transparent;
-  transition: all 0.2s ease;
+  letter-spacing: 0.04em;
 }
 
 .wiki-subtopic-headline {
-  font-size: 18px;
+  font-size: 16px;
   font-weight: 700;
-  color: #1a1a2e;
-  margin: 0 0 12px 0;
+  color: #1c1e21;
+  margin: 0 0 8px 0;
   line-height: 1.3;
 }
 
 .wiki-teaser {
   font-size: 14px;
-  color: #65676b;
-  line-height: 1.5;
-  margin: 0 0 16px 0;
+  color: #57606a;
+  line-height: 1.55;
+  margin: 0 0 14px 0;
 }
 
 .wiki-card-meta {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding-top: 12px;
+  padding-top: 10px;
   border-top: 1px solid #f0f2f5;
 }
 

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>' +