diff --git a/frontend/src/components/posts/PostCard.vue b/frontend/src/components/posts/PostCard.vue
index 68b537e..c80a0ab 100644
--- a/frontend/src/components/posts/PostCard.vue
+++ b/frontend/src/components/posts/PostCard.vue
@@ -1,10 +1,17 @@
 <template>
-  <v-card class="fc-post-card" variant="outlined">
+  <v-card
+    class="fc-post-card"
+    variant="outlined"
+    tabindex="0"
+    @click="onCardClick"
+    @keydown.enter="onCardClick"
+  >
     <div class="fc-post-card__head">
       <v-chip size="x-small" variant="tonal">{{ post.source.platform }}</v-chip>
       <RouterLink
         :to="{ name: 'artist', params: { slug: post.artist.slug } }"
         class="fc-post-card__artist"
+        @click.stop
       >{{ post.artist.name }}</RouterLink>
       <span class="fc-post-card__date" :title="absoluteDate">{{ relativeDate }}</span>
       <v-spacer />
@@ -13,72 +20,74 @@
         :href="post.post_url" target="_blank" rel="noopener"
         icon="mdi-open-in-new" size="x-small" variant="text"
         :aria-label="`open original post on ${post.source.platform}`"
+        @click.stop
       />
     </div>
 
-    <h3 v-if="post.post_title" class="fc-post-card__title">{{ post.post_title }}</h3>
+    <div class="fc-post-card__body">
+      <div class="fc-post-card__media">
+        <template v-if="post.thumbnails?.length">
+          <div class="fc-post-card__hero">
+            <img :src="hero.thumbnail_url" :alt="`hero thumbnail`" loading="lazy" />
+          </div>
+          <div v-if="rail.length" class="fc-post-card__rail">
+            <div v-for="t in rail" :key="t.image_id" class="fc-post-card__rail-cell">
+              <img :src="t.thumbnail_url" :alt="`thumbnail`" loading="lazy" />
+            </div>
+            <div v-if="moreCount > 0" class="fc-post-card__rail-more">
+              +{{ moreCount }}
+            </div>
+          </div>
+        </template>
+        <PostEmptyThumbs v-else />
+      </div>
 
-    <div v-if="descriptionToShow" class="fc-post-card__desc">
-      <span class="fc-post-card__desc-text">{{ descriptionToShow }}</span>
-      <button
-        v-if="post.description_truncated && !expanded"
-        class="fc-post-card__more" type="button"
-        @click="expand"
-      >Show more</button>
-      <button
-        v-if="expanded"
-        class="fc-post-card__more" type="button"
-        @click="expanded = false"
-      >Show less</button>
-    </div>
+      <div class="fc-post-card__text">
+        <h3 v-if="post.post_title" class="fc-post-card__title">
+          {{ post.post_title }}
+        </h3>
+        <h3 v-else class="fc-post-card__title fc-post-card__title--missing">
+          Post {{ post.external_post_id }}
+        </h3>
 
-    <div v-if="post.thumbnails.length" class="fc-post-card__thumbs">
-      <RouterLink
-        v-for="t in post.thumbnails"
-        :key="t.image_id"
-        :to="{ path: '/gallery', query: { post_id: post.id } }"
-        class="fc-post-card__thumb"
-      >
-        <v-img
-          :src="t.thumbnail_url" cover :alt="`thumbnail`"
-          width="96" height="96" class="fc-post-card__thumb-img"
-        />
-      </RouterLink>
-      <RouterLink
-        v-if="post.thumbnails_more > 0"
-        :to="{ path: '/gallery', query: { post_id: post.id } }"
-        class="fc-post-card__more-thumbs"
-      >+{{ post.thumbnails_more }} more</RouterLink>
-    </div>
+        <p v-if="post.description_plain" class="fc-post-card__desc">
+          {{ post.description_plain }}
+        </p>
+        <p v-else class="fc-post-card__desc fc-post-card__desc--missing">
+          (no description)
+        </p>
 
-    <div v-if="post.attachments.length" class="fc-post-card__attachments">
-      <a
-        v-for="att in post.attachments"
-        :key="att.id"
-        :href="att.download_url"
-        download
-        class="fc-post-card__att"
-      >
-        <v-icon size="small" class="fc-post-card__att-icon">mdi-paperclip</v-icon>
-        <span class="fc-post-card__att-name">{{ att.original_filename }}</span>
-        <span class="fc-post-card__att-size">({{ formatBytes(att.size_bytes) }})</span>
-      </a>
+        <div v-if="post.attachments?.length" class="fc-post-card__atts">
+          <v-icon size="small" class="fc-post-card__att-icon">mdi-paperclip</v-icon>
+          {{ post.attachments.length }} attachment{{ post.attachments.length === 1 ? '' : 's' }}
+        </div>
+      </div>
     </div>
   </v-card>
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
-import { usePostsStore } from '../../stores/posts.js'
+import { computed } from 'vue'
+import { RouterLink } from 'vue-router'
+
+import { usePostModalStore } from '../../stores/postModal.js'
+import PostEmptyThumbs from './PostEmptyThumbs.vue'
 
 const props = defineProps({
   post: { type: Object, required: true },
 })
 
-const postsStore = usePostsStore()
+const postModal = usePostModalStore()
 
-const expanded = ref(false)
-const fullDescription = ref(null)
+const hero = computed(() => props.post.thumbnails?.[0])
+const rail = computed(() => (props.post.thumbnails || []).slice(1, 4))
+const moreCount = computed(() => {
+  const more = props.post.thumbnails_more || 0
+  const railLen = rail.value.length
+  // If feed returned more than (1 hero + 3 rail = 4), extra spills into "+N".
+  const extraShown = Math.max(0, (props.post.thumbnails?.length || 0) - 1 - railLen)
+  return more + extraShown
+})
 
 const sortDateIso = computed(() => props.post.post_date || props.post.downloaded_at)
 const absoluteDate = computed(() => new Date(sortDateIso.value).toLocaleString())
@@ -92,25 +101,8 @@ const relativeDate = computed(() => {
   return new Date(sortDateIso.value).toLocaleDateString()
 })
 
-const descriptionToShow = computed(() => {
-  if (expanded.value && fullDescription.value) return fullDescription.value
-  return props.post.description_plain
-})
-
-async function expand() {
-  if (!fullDescription.value) {
-    const detail = await postsStore.getPostFull(props.post.id)
-    fullDescription.value = detail?.description_full || props.post.description_plain
-  }
-  expanded.value = true
-}
-
-function formatBytes(n) {
-  if (!n) return '0 B'
-  if (n < 1024) return `${n} B`
-  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`
-  if (n < 1024 * 1024 * 1024) return `${(n / 1024 / 1024).toFixed(1)} MB`
-  return `${(n / 1024 / 1024 / 1024).toFixed(1)} GB`
+function onCardClick () {
+  postModal.open(props.post)
 }
 </script>
 
@@ -118,13 +110,25 @@ function formatBytes(n) {
 .fc-post-card {
   padding: 1rem;
   margin-bottom: 1rem;
+  cursor: pointer;
+  container-type: inline-size;
+  transition: border-color 0.15s ease;
 }
+.fc-post-card:hover {
+  border-color: rgb(var(--v-theme-accent));
+}
+.fc-post-card:focus-visible {
+  outline: 2px solid rgb(var(--v-theme-accent));
+  outline-offset: 2px;
+}
+
 .fc-post-card__head {
   display: flex;
   align-items: center;
   gap: 0.6rem;
-  font-size: 0.85rem;
+  font-size: 0.8rem;
   color: rgb(var(--v-theme-on-surface-variant));
+  margin-bottom: 12px;
 }
 .fc-post-card__artist {
   color: rgb(var(--v-theme-on-surface));
@@ -133,72 +137,118 @@ function formatBytes(n) {
 }
 .fc-post-card__artist:hover { color: rgb(var(--v-theme-accent)); }
 .fc-post-card__date { white-space: nowrap; }
-.fc-post-card__title {
-  font-size: 1.05rem;
-  margin: 0.6rem 0 0.4rem;
-}
-.fc-post-card__desc {
-  white-space: pre-wrap;
-  font-size: 0.92rem;
-  color: rgb(var(--v-theme-on-surface));
-  margin-bottom: 0.6rem;
-}
-.fc-post-card__more {
-  background: none;
-  border: none;
-  color: rgb(var(--v-theme-accent));
-  cursor: pointer;
-  padding: 0 0.25rem;
-  font-size: inherit;
-}
-.fc-post-card__thumbs {
+
+.fc-post-card__body {
   display: flex;
-  flex-wrap: wrap;
-  gap: 0.4rem;
-  align-items: center;
-  margin: 0.5rem 0;
+  flex-direction: column;
+  gap: 16px;
 }
-.fc-post-card__thumb { line-height: 0; }
-.fc-post-card__thumb-img {
-  border-radius: 4px;
+@container (min-width: 800px) {
+  .fc-post-card__body {
+    flex-direction: row;
+    gap: 24px;
+  }
+  .fc-post-card__media {
+    flex: 0 0 50%;
+  }
+  .fc-post-card__text {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+}
+
+.fc-post-card__hero {
+  width: 100%;
+  aspect-ratio: 16 / 10;
   overflow: hidden;
+  border-radius: 6px;
 }
-.fc-post-card__more-thumbs {
-  display: inline-flex;
+.fc-post-card__hero img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.fc-post-card__rail {
+  display: flex;
+  gap: 6px;
+  margin-top: 6px;
+}
+.fc-post-card__rail-cell {
+  width: 80px;
+  height: 80px;
+  overflow: hidden;
+  border-radius: 4px;
+}
+.fc-post-card__rail-cell img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.fc-post-card__rail-more {
+  width: 80px;
+  height: 80px;
+  display: flex;
   align-items: center;
   justify-content: center;
-  width: 96px;
-  height: 96px;
   border: 1px dashed rgb(var(--v-theme-on-surface-variant));
   border-radius: 4px;
   color: rgb(var(--v-theme-on-surface-variant));
-  text-decoration: none;
   font-size: 0.85rem;
 }
-.fc-post-card__more-thumbs:hover {
-  color: rgb(var(--v-theme-accent));
-  border-color: rgb(var(--v-theme-accent));
+
+.fc-post-card__title {
+  font-family: 'Fraunces', Georgia, serif;
+  font-size: 18px;
+  font-weight: 500;
+  margin: 0 0 8px 0;
+  color: rgb(var(--v-theme-on-surface));
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
-.fc-post-card__attachments {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.4rem;
-  margin-top: 0.6rem;
+.fc-post-card__title--missing {
+  font-style: italic;
+  color: rgb(var(--v-theme-on-surface-variant));
 }
-.fc-post-card__att {
+@container (min-width: 800px) {
+  .fc-post-card__title {
+    font-size: 20px;
+    -webkit-line-clamp: 1;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+
+.fc-post-card__desc {
+  font-size: 0.9rem;
+  line-height: 1.5;
+  color: rgb(var(--v-theme-on-surface));
+  margin: 0 0 12px 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.fc-post-card__desc--missing {
+  font-style: italic;
+  color: rgb(var(--v-theme-on-surface-variant));
+}
+@container (min-width: 800px) {
+  .fc-post-card__desc {
+    -webkit-line-clamp: 5;
+  }
+}
+
+.fc-post-card__atts {
   display: inline-flex;
   align-items: center;
-  gap: 0.35rem;
-  padding: 0.2rem 0.5rem;
-  border: 1px solid rgb(var(--v-theme-on-surface-variant));
-  border-radius: 999px;
-  color: rgb(var(--v-theme-on-surface));
-  text-decoration: none;
-  font-size: 0.82rem;
+  gap: 6px;
+  font-size: 0.85rem;
+  color: rgb(var(--v-theme-on-surface-variant));
 }
-.fc-post-card__att:hover {
-  color: rgb(var(--v-theme-accent));
-  border-color: rgb(var(--v-theme-accent));
-}
-.fc-post-card__att-size { color: rgb(var(--v-theme-on-surface-variant)); }
+.fc-post-card__att-icon { color: rgb(var(--v-theme-on-surface-variant)); }
 </style>