fix: weather icon case mismatch + pin/weather icon alignment

- Lowercase all weather_icons map keys to match stored entry values
  ('sunny', 'partly cloudy', etc.); add |lower filter as safety net
- Remove vertical-align hack from location pin SVG
- Add display:inline-flex + align-items:center to .journal-post-location
  and .journal-post-weather so icons and text share a true center axis

themes/intotheeast/css/style.css

@@ -42,18 +42,28 @@ body::after {
     padding: 0 var(--space-5);
     height: var(--site-header-height);
     background: var(--color-canvas);
-    border-top: 3px solid var(--color-accent);
     border-bottom: 1px solid var(--color-border);
     position: sticky;
     top: 0;
     z-index: 100;
 }
 
+.site-header::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
+    pointer-events: none;
+}
+
 .site-title {
     font-family: var(--font-display);
-    font-size: var(--text-lg);
+    font-size: var(--text-xl);
     font-weight: 400;
-    letter-spacing: -0.01em;
+    letter-spacing: 0.06em;
     text-decoration: none;
     color: var(--color-ink);
     line-height: 1;
@@ -140,21 +150,6 @@ body::after {
 .entry-card:hover .entry-title { 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: var(--text-sm);
-    color: var(--color-ink-2);
-}
-
 @keyframes card-highlight {
     0%   { background-color: color-mix(in srgb, var(--color-accent) 12%, transparent); }
     100% { background-color: transparent; }
@@ -203,6 +198,9 @@ body::after {
 .journal-post-location,
 .journal-post-weather {
     color: var(--color-ink-muted);
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
 }
 
 .journal-photo-wrap {
@@ -346,21 +344,6 @@ body::after {
 
 /* ── Single entry ────────────────────────────────────────────────────────────── */
 
-.entry-hero {
-    width: 100%;
-    max-height: 480px;
-    overflow: hidden;
-    margin-bottom: var(--space-8);
-    border-radius: var(--radius-md);
-}
-
-.entry-hero img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
-}
-
 .entry-back-fixed {
     position: fixed;
     top: calc(var(--site-header-height) + var(--space-3));
@@ -368,91 +351,10 @@ body::after {
     z-index: 100;
 }
 
-.entry-header { margin-bottom: var(--space-8); }
-
-.entry-header-meta {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--space-3);
-    margin-bottom: var(--space-4);
-}
-
-.entry-header .entry-date {
-    font-size: var(--text-sm);
-    font-weight: 600;
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    color: var(--color-ink-muted);
-    display: inline;
-    margin-bottom: 0;
-}
-
-.entry .entry-title {
-    font-family: var(--font-display);
-    font-size: var(--text-2xl);
-    font-weight: 400;
-    line-height: var(--leading-snug);
-    color: var(--color-ink);
-    margin-bottom: var(--space-4);
-}
-
-@media (min-width: 520px) {
-    .entry .entry-title { font-size: var(--text-3xl); }
-}
-
-.entry-title-rule {
-    height: 1px;
-    background: var(--color-border);
-    margin-bottom: var(--space-8);
-}
-
-.entry-body { margin-bottom: var(--space-10); }
-.entry-body p { margin-bottom: 1.4em; font-size: var(--text-md); line-height: var(--leading-normal); color: var(--color-ink-2); }
-.entry-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
-
 .entry-footer { border-top: 1px solid var(--color-border); padding-top: var(--space-5); }
 .entry-footer a { color: var(--color-accent); text-decoration: none; font-size: var(--text-sm); font-weight: 500; }
 .entry-footer a:hover { color: var(--color-accent-hover); }
 
-/* ── Photo gallery ───────────────────────────────────────────────────────────── */
-
-.entry-gallery {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 3px;
-    margin-bottom: var(--space-10);
-    border-radius: var(--radius-md);
-    overflow: hidden;
-}
-
-@media (min-width: 520px) {
-    .entry-gallery { grid-template-columns: repeat(3, 1fr); }
-}
-
-.gallery-thumb {
-    background: none;
-    border: none;
-    padding: 0;
-    cursor: pointer;
-    display: block;
-    aspect-ratio: 1;
-    overflow: hidden;
-}
-
-.gallery-thumb img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
-    transition: opacity 0.15s;
-}
-
-.gallery-thumb:hover img,
-.gallery-thumb:focus img { opacity: 0.82; }
-
-.gallery-thumb:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; }
-
 /* ── PhotoSwipe overrides ─────────────────────────────────────────────────────── */
 
 .pswp__bg { background: #000; }
@@ -593,12 +495,9 @@ body::after {
 }
 
 .stat-block {
-    background: var(--color-canvas);
+    border-left: 2px solid var(--color-accent);
-    border: 1px solid var(--color-border);
+    padding: var(--space-2) 0 var(--space-2) var(--space-4);
-    border-radius: var(--radius-md);
+    text-align: left;
-    padding: var(--space-6) var(--space-5);
-    text-align: center;
-    box-shadow: var(--shadow-sm);
 }
 
 .stat-value {
@@ -606,7 +505,7 @@ body::after {
     font-family: var(--font-display);
     font-size: clamp(2rem, 6vw, var(--text-3xl));
     font-weight: 400;
-    color: var(--color-accent);
+    color: var(--color-ink);
     line-height: 1.1;
     margin-bottom: var(--space-2);
     font-variant-numeric: tabular-nums;
@@ -1004,7 +903,7 @@ body::after {
     color: var(--color-ink-muted);
     background: transparent;
     border: 1px solid var(--color-border);
-    border-radius: var(--radius-full);
+    border-radius: var(--radius-sm);
     padding: var(--space-1) var(--space-4);
     cursor: pointer;
     transition: color 0.15s, border-color 0.15s, background 0.15s;
@@ -1107,6 +1006,24 @@ body::after {
     background: var(--color-surface-raised);
 }
 
+.trip-card-cover {
+    aspect-ratio: 3 / 1;
+    overflow: hidden;
+    border-radius: var(--radius-md) var(--radius-md) 0 0;
+    background: var(--color-border);
+    margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-5);
+}
+
+.trip-card-cover img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    transition: transform 0.45s ease;
+}
+
+.trip-card:hover .trip-card-cover img { transform: scale(1.04); }
+
 .trip-card-title {
     font-family: var(--font-display);
     font-size: var(--text-xl);
@@ -1460,6 +1377,41 @@ body::after {
     text-decoration: none;
 }
 
+/* ── Story progress bar ──────────────────────────────────── */
+.story-progress {
+    position: fixed;
+    top: var(--site-header-height);
+    left: 0;
+    height: 2px;
+    width: 0%;
+    background: var(--color-accent);
+    z-index: 200;
+    pointer-events: none;
+    will-change: width;
+}
+
+/* ── Story opener (location + date eyebrow) ──────────────── */
+.story-opener {
+    text-align: center;
+    padding-bottom: var(--space-12);
+    margin-bottom: var(--space-12);
+    border-bottom: 1px solid var(--color-border);
+    opacity: 0;
+    animation: storyReveal 0.9s cubic-bezier(.16,1,.3,1) 0.8s both;
+}
+
+.story-opener__text {
+    font-family: var(--font-ui);
+    font-size: var(--text-sm);
+    color: var(--color-ink-muted);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .story-opener { opacity: 1; animation: none; }
+}
+
 /* ── Story nav title (desktop: fades into header center) ─────── */
 .story-nav-title {
     position: absolute;

themes/intotheeast/templates/partials/entry-journal.html.twig

@@ -1,12 +1,12 @@
 {% set weather_icons = {
-    'Sunny':         '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="vertical-align:-1px;flex-shrink:0"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>',
+    'sunny':         '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>',
-    'Partly cloudy': '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="vertical-align:-1px;flex-shrink:0"><path d="M12 2v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="M20 12h2"/><path d="m19.07 4.93-1.41 1.41"/><path d="M15.947 12.65a4 4 0 0 0-5.925-4.128"/><path d="M13 22H7a5 5 0 1 1 4.9-6H13a3 3 0 0 1 0 6Z"/></svg>',
+    'partly cloudy': '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="M20 12h2"/><path d="m19.07 4.93-1.41 1.41"/><path d="M15.947 12.65a4 4 0 0 0-5.925-4.128"/><path d="M13 22H7a5 5 0 1 1 4.9-6H13a3 3 0 0 1 0 6Z"/></svg>',
-    'Cloudy':        '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="vertical-align:-1px;flex-shrink:0"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"/></svg>',
+    'cloudy':        '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"/></svg>',
-    'Foggy':         '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="vertical-align:-1px;flex-shrink:0"><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M16 17H7"/><path d="M17 21H9"/></svg>',
+    'foggy':         '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M16 17H7"/><path d="M17 21H9"/></svg>',
-    'Drizzle':       '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="vertical-align:-1px;flex-shrink:0"><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M8 19v1"/><path d="M8 14v1"/><path d="M16 19v1"/><path d="M16 14v1"/><path d="M12 21v1"/><path d="M12 16v1"/></svg>',
+    'drizzle':       '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M8 19v1"/><path d="M8 14v1"/><path d="M16 19v1"/><path d="M16 14v1"/><path d="M12 21v1"/><path d="M12 16v1"/></svg>',
-    'Rain':          '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="vertical-align:-1px;flex-shrink:0"><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M16 14v6"/><path d="M8 14v6"/><path d="M12 16v6"/></svg>',
+    'rain':          '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M16 14v6"/><path d="M8 14v6"/><path d="M12 16v6"/></svg>',
-    'Snow':          '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="vertical-align:-1px;flex-shrink:0"><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M8 15h.01"/><path d="M8 19h.01"/><path d="M12 17h.01"/><path d="M12 21h.01"/><path d="M16 15h.01"/><path d="M16 19h.01"/></svg>',
+    'snow':          '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M8 15h.01"/><path d="M8 19h.01"/><path d="M12 17h.01"/><path d="M12 21h.01"/><path d="M16 15h.01"/><path d="M16 19h.01"/></svg>',
-    'Thunderstorm':  '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="vertical-align:-1px;flex-shrink:0"><path d="M6 16.326A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 .5 8.973"/><path d="m13 12-3 5h4l-3 5"/></svg>'
+    'thunderstorm':  '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 16.326A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 .5 8.973"/><path d="m13 12-3 5h4l-3 5"/></svg>'
 } %}
 <article class="journal-post" id="entry-{{ entry.slug }}" data-type="journal" data-lat="{{ entry.header.lat }}" data-lng="{{ entry.header.lng }}">
     <header class="journal-post-header">
@@ -17,7 +17,7 @@
             </a>
             {% if entry.header.location_city or entry.header.location_country %}
             <span class="journal-post-location">
-                · <svg width="11" height="13" viewBox="0 0 12 14" fill="currentColor" aria-hidden="true" style="flex-shrink:0;vertical-align:-1px"><path d="M6 0C3.24 0 1 2.24 1 5c0 3.75 5 9 5 9s5-5.25 5-9c0-2.76-2.24-5-5-5zm0 6.75A1.75 1.75 0 1 1 6 3.25a1.75 1.75 0 0 1 0 3.5z"/></svg>
+                · <svg width="11" height="13" viewBox="0 0 12 14" fill="currentColor" aria-hidden="true"><path d="M6 0C3.24 0 1 2.24 1 5c0 3.75 5 9 5 9s5-5.25 5-9c0-2.76-2.24-5-5-5zm0 6.75A1.75 1.75 0 1 1 6 3.25a1.75 1.75 0 0 1 0 3.5z"/></svg>
                 {%- set _loc = [] -%}
                 {%- if entry.header.location_city -%}{%- set _loc = _loc|merge([entry.header.location_city]) -%}{%- endif -%}
                 {%- if entry.header.location_country -%}{%- set _loc = _loc|merge([entry.header.location_country]) -%}{%- endif -%}
@@ -25,7 +25,7 @@
             </span>
             {% endif %}
             {% if entry.header.weather_desc %}
-            <span class="journal-post-weather">· {{ weather_icons[entry.header.weather_desc]|default('')|raw }} {{ entry.header.weather_desc }}</span>
+            <span class="journal-post-weather">· {{ weather_icons[entry.header.weather_desc|lower]|default('')|raw }} {{ entry.header.weather_desc }}</span>
             {% endif %}
         </p>
     </header>