diff --git a/themes/intotheeast/css/style.css b/themes/intotheeast/css/style.css
index 87dd0bc..3b323ac 100644
--- a/themes/intotheeast/css/style.css
+++ b/themes/intotheeast/css/style.css
@@ -73,78 +73,129 @@ body {
     .site-nav a { padding: var(--space-2); font-size: 0.8rem; }
 }
 
-/* ── Feed ──────────────────────────────────────────────────────────────────── */
+/* ── Feed ────────────────────────────────────────────────────────────────────── */
 
-.feed { display: flex; flex-direction: column; gap: 2rem; }
+.feed { display: flex; flex-direction: column; gap: var(--space-12); }
+.feed-empty { color: var(--color-ink-muted); font-style: italic; }
 
-.entry-card {
-    border-bottom: 1px solid #e5e5e5;
-    padding-bottom: 2rem;
-}
+.entry-card { border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-12); }
 
-.entry-date {
+.entry-card-inner {
     display: block;
-    font-size: 0.8rem;
-    color: #666;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    margin-bottom: 0.25rem;
+    text-decoration: none;
+    color: inherit;
 }
 
-.entry-card-meta {
+/* Card: photo variant */
+
+.entry-card-photo {
+    position: relative;
+    aspect-ratio: 16 / 9;
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    background: var(--color-border);
+    margin-bottom: var(--space-5);
+}
+
+.entry-card-photo img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    transition: transform 0.45s ease;
+}
+
+.entry-card-inner:hover .entry-card-photo img { transform: scale(1.04); }
+
+.entry-card-photo-overlay {
+    position: absolute;
+    inset: auto 0 0 0;
+    padding: var(--space-5) var(--space-4) var(--space-3);
+    background: linear-gradient(to top, rgba(0,0,0,0.58) 0%, transparent 100%);
     display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    margin-bottom: 0.5rem;
+    align-items: flex-end;
+    gap: var(--space-3);
     flex-wrap: wrap;
 }
 
-.entry-card-meta .entry-date { margin-bottom: 0; }
-
-.entry-card .entry-title { font-size: 1.3rem; margin-bottom: 0.75rem; }
-.entry-card .entry-title a { color: inherit; text-decoration: none; }
-.entry-card .entry-title a:hover { text-decoration: underline; }
-
-.entry-thumb { margin-bottom: 0.75rem; }
-.entry-thumb img {
-    width: 100%;
-    aspect-ratio: 16 / 9;
-    object-fit: cover;
-    border-radius: 8px;
-    display: block;
+.entry-date-overlay {
+    font-size: var(--text-xs);
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    color: rgba(255,255,255,0.92);
 }
 
-.entry-excerpt { color: #444; margin-bottom: 0.75rem; }
-
-.entry-read-more {
-    font-size: 0.9rem;
-    color: #0066cc;
-    text-decoration: none;
-}
-
-.feed-empty { color: #666; font-style: italic; }
-
-/* ── Location & Weather badges ─────────────────────────────────────────────── */
-
-.entry-location {
-    font-size: 0.82rem;
-    color: #555;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.2rem;
-}
-
-.entry-location--card {
+.entry-location-overlay {
+    font-size: var(--text-xs);
+    color: rgba(255,255,255,0.85);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    max-width: 200px;
+    max-width: 180px;
+}
+
+/* Card: text-only variant */
+
+.entry-card-textmeta {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    margin-bottom: var(--space-3);
+    flex-wrap: wrap;
+}
+
+.entry-date-plain {
+    font-size: var(--text-xs);
+    font-weight: 700;
+    letter-spacing: 0.07em;
+    color: var(--color-ink-muted);
+}
+
+.entry-location-plain {
+    font-size: var(--text-xs);
+    color: var(--color-ink-muted);
+}
+
+/* Card body */
+
+.entry-card .entry-title {
+    font-family: var(--font-display);
+    font-size: var(--text-xl);
+    font-weight: 400;
+    line-height: var(--leading-snug);
+    color: var(--color-ink);
+    margin-bottom: var(--space-3);
+    transition: color 0.15s;
+}
+
+.entry-card-inner:hover .entry-title { color: var(--color-accent); }
+
+.entry-excerpt {
+    font-size: var(--text-base);
+    line-height: var(--leading-normal);
+    color: var(--color-ink-2);
+    margin-bottom: var(--space-3);
+}
+
+.entry-read-more {
+    font-size: var(--text-sm);
+    font-weight: 500;
+    color: var(--color-accent);
+}
+
+/* Location & weather badges (single entry page) */
+
+.entry-location {
+    font-size: var(--text-sm);
+    color: var(--color-ink-2);
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
 }
 
 .entry-weather {
-    font-size: 0.82rem;
-    color: #555;
-    margin-bottom: 0.25rem;
+    font-size: var(--text-sm);
+    color: var(--color-ink-2);
 }
 
 /* ── Single entry ───────────────────────────────────────────────────────────── */
diff --git a/themes/intotheeast/templates/tracker.html.twig b/themes/intotheeast/templates/tracker.html.twig
index a25f324..4f02bc2 100644
--- a/themes/intotheeast/templates/tracker.html.twig
+++ b/themes/intotheeast/templates/tracker.html.twig
@@ -72,36 +72,46 @@ if (latLngs.length === 1) {
                 {% set hero = entry.media.images|first %}
             {% endif %}
 
-            {% if hero %}
-            <div class="entry-thumb">
-                <a href="{{ entry.url }}">
-                    <img src="{{ hero.cropResize(680, 383).url }}" alt="{{ entry.title }}" loading="lazy">
-                </a>
-            </div>
-            {% endif %}
-
-            <div class="entry-card-meta">
-                <time class="entry-date" datetime="{{ entry.date|date('Y-m-d') }}">
-                    {{ entry.date|date('d M Y') }}
-                </time>
-                {% if entry.header.location_city or entry.header.location_country %}
-                <span class="entry-location entry-location--card">
-                    📍
-                    {% if entry.header.location_city %}{{ entry.header.location_city|slice(0,25) }}{% endif %}
-                    {% if entry.header.location_city and entry.header.location_country %}, {% endif %}
-                    {% if entry.header.location_country %}{{ entry.header.location_country }}{% endif %}
-                </span>
+            <a class="entry-card-inner" href="{{ entry.url }}">
+                {% if hero %}
+                <div class="entry-card-photo">
+                    <img src="{{ hero.cropResize(720, 405).url }}" alt="{{ entry.title }}" loading="lazy">
+                    <div class="entry-card-photo-overlay">
+                        <time class="entry-date-overlay" datetime="{{ entry.date|date('Y-m-d') }}">
+                            {{ entry.date|date('d M Y')|upper }}
+                        </time>
+                        {% if entry.header.location_city or entry.header.location_country %}
+                        <span class="entry-location-overlay">
+                            📍
+                            {% if entry.header.location_city %}{{ entry.header.location_city|slice(0,20) }}{% endif %}
+                            {% if entry.header.location_city and entry.header.location_country %}, {% endif %}
+                            {% if entry.header.location_country %}{{ entry.header.location_country }}{% endif %}
+                        </span>
+                        {% endif %}
+                    </div>
+                </div>
+                {% else %}
+                <div class="entry-card-textmeta">
+                    <time class="entry-date-plain" datetime="{{ entry.date|date('Y-m-d') }}">
+                        {{ entry.date|date('d M Y')|upper }}
+                    </time>
+                    {% if entry.header.location_city or entry.header.location_country %}
+                    <span class="entry-location-plain">
+                        📍
+                        {% if entry.header.location_city %}{{ entry.header.location_city }}{% endif %}
+                        {% if entry.header.location_city and entry.header.location_country %}, {% endif %}
+                        {% if entry.header.location_country %}{{ entry.header.location_country }}{% endif %}
+                    </span>
+                    {% endif %}
+                </div>
                 {% endif %}
-            </div>
 
-            <h2 class="entry-title">
-                <a href="{{ entry.url }}">{{ entry.title }}</a>
-            </h2>
-
-            <div class="entry-excerpt">
-                {{ entry.summary }}
-            </div>
-            <a class="entry-read-more" href="{{ entry.url }}">Read more →</a>
+                <div class="entry-card-body">
+                    <h2 class="entry-title">{{ entry.title }}</h2>
+                    <p class="entry-excerpt">{{ entry.summary }}</p>
+                    <span class="entry-read-more">Read entry →</span>
+                </div>
+            </a>
         </article>
         {% endfor %}
     {% else %}