feat: add journal-post CSS component and dot-sync JS; remove stale journal-card-only rules

themes/intotheeast/css/style.css

@@ -120,54 +120,7 @@ body::after {
 
 .entry-card: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: flex-end;
-    gap: var(--space-3);
-    flex-wrap: wrap;
-}
 
-.entry-date-overlay {
-    font-size: var(--text-xs);
-    font-weight: 700;
-    letter-spacing: 0.08em;
-    color: rgba(255,255,255,0.92);
-}
-
-.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: 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 */
 
@@ -183,18 +136,6 @@ body::after {
 
 .entry-card: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) */
 
@@ -216,7 +157,105 @@ body::after {
     100% { background-color: transparent; }
 }
 
-.entry-card.is-highlighted {
+
+/* ── Journal post (inline feed) ─────────────────────────────────────────────── */
+
+.journal-post {
+    border-bottom: 1px solid var(--color-border);
+    padding-bottom: var(--space-12);
+    margin-bottom: var(--space-12);
+}
+
+.journal-post-header {
+    margin-bottom: var(--space-4);
+}
+
+.journal-post-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-2);
+}
+
+.journal-post-meta {
+    font-size: var(--text-xs);
+    color: var(--color-ink-muted);
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+}
+
+.journal-post-permalink {
+    color: var(--color-ink-muted);
+    text-decoration: none;
+    font-weight: 700;
+    letter-spacing: 0.07em;
+}
+
+.journal-post-permalink:hover { color: var(--color-accent); }
+
+.journal-post-location,
+.journal-post-weather {
+    color: var(--color-ink-muted);
+}
+
+.journal-photo-strip {
+    display: flex;
+    overflow-x: scroll;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+    border-radius: var(--radius-md);
+    margin-bottom: var(--space-3);
+}
+
+.journal-photo-strip::-webkit-scrollbar { display: none; }
+
+.journal-photo-slide {
+    flex: 0 0 100%;
+    scroll-snap-align: start;
+    aspect-ratio: 3 / 2;
+    overflow: hidden;
+}
+
+.journal-photo-slide img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.journal-photo-dots {
+    display: flex;
+    justify-content: center;
+    gap: var(--space-2);
+    margin-bottom: var(--space-4);
+}
+
+.journal-photo-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 9999px;
+    background: var(--color-border);
+    transition: background 0.2s;
+}
+
+.journal-photo-dot.is-active {
+    background: var(--color-ink-muted);
+}
+
+.journal-post-body {
+    font-size: var(--text-base);
+    line-height: var(--leading-normal);
+    color: var(--color-ink-2);
+}
+
+.journal-post-body p { margin-bottom: var(--space-4); }
+.journal-post-body p:last-child { margin-bottom: 0; }
+
+.journal-post.is-highlighted {
     animation: card-highlight 0.7s ease-out forwards;
 }
 

themes/intotheeast/templates/partials/base.html.twig

@@ -26,5 +26,18 @@
         {% block content %}{% endblock %}
     </main>
     {{ assets.js('bottom')|raw }}
+<script>
+(function () {
+    document.querySelectorAll('.journal-photo-strip').forEach(function (strip) {
+        var dots = strip.nextElementSibling;
+        if (!dots || !dots.classList.contains('journal-photo-dots')) return;
+        var dotEls = Array.from(dots.querySelectorAll('.journal-photo-dot'));
+        strip.addEventListener('scroll', function () {
+            var idx = Math.round(strip.scrollLeft / strip.offsetWidth);
+            dotEls.forEach(function (d, i) { d.classList.toggle('is-active', i === idx); });
+        }, { passive: true });
+    });
+})();
+</script>
 </body>
 </html>