changed the location of the travel summary to left

src/lib/timeline/TimelineView.svelte

@@ -37,37 +37,37 @@
 <div class="journal-page">
 
   {#if selected}
-    <!-- Detail view: full width, scrollable -->
     <div class="detail-scroll">
       <JournalDetail entry={selected} onBack={() => (selected = null)} />
     </div>
   {:else}
-    <!-- Two-column layout -->
     <aside class="left-panel">
       <JournalSummary entries={sortedEntries} />
     </aside>
 
     <div class="right-panel">
-      <TimelineToolbar {sortKey} onSort={(k) => (sortKey = k)} />
+      <div class="right-inner">
+        <TimelineToolbar {sortKey} onSort={(k) => (sortKey = k)} />
 
-      {#if sortedEntries.length === 0}
-        <p class="empty">No journal entries yet.</p>
-      {:else}
-        <ol class="v-list">
-          {#each sortedEntries as entry, i (entry.id)}
-            {#if i === 0 || getYear(entry.date) !== getYear(sortedEntries[i - 1].date)}
-              <li class="year-marker" aria-hidden="true">
-                <span class="year-label">{getYear(entry.date)}</span>
-              </li>
-            {/if}
-            <TimelineCard {entry} onClick={() => (selected = entry)} />
-          {/each}
-        </ol>
-      {/if}
+        {#if sortedEntries.length === 0}
+          <p class="empty">No journal entries yet.</p>
+        {:else}
+          <ol class="v-list">
+            {#each sortedEntries as entry, i (entry.id)}
+              {#if i === 0 || getYear(entry.date) !== getYear(sortedEntries[i - 1].date)}
+                <li class="year-marker" aria-hidden="true">
+                  <span class="year-label">{getYear(entry.date)}</span>
+                </li>
+              {/if}
+              <TimelineCard {entry} onClick={() => (selected = entry)} />
+            {/each}
+          </ol>
+        {/if}
 
-      <footer class="page-footer">
-        {sortedEntries.length} {sortedEntries.length === 1 ? 'entry' : 'entries'}
-      </footer>
+        <footer class="page-footer">
+          {sortedEntries.length} {sortedEntries.length === 1 ? 'entry' : 'entries'}
+        </footer>
+      </div>
     </div>
   {/if}
 
@@ -83,28 +83,49 @@
     overflow: hidden;
   }
 
-  /* ── Left: summary panel ── */
+  /* ── Left panel ── */
   .left-panel {
-    width: 280px;
+    width: 260px;
     flex-shrink: 0;
     overflow-y: auto;
     border-right: 1px solid var(--border);
-    background: var(--bg);
-    padding: 32px 20px;
+    background: var(--bg-raised);
+    padding: 40px 28px;
   }
 
-  /* ── Right: timeline ── */
+  /* ── Right panel ── */
   .right-panel {
     flex: 1;
     min-width: 0;
     overflow-y: auto;
-    padding: 32px 32px 64px;
+    background: var(--bg);
+  }
+
+  /* Inner container with max-width + generous side padding */
+  .right-inner {
+    max-width: 640px;
+    margin: 0 auto;
+    padding: 40px 48px 80px;
+  }
+
+  /* ── Responsive: narrow viewport ── */
+  @media (max-width: 700px) {
+    .journal-page { flex-direction: column; overflow-y: auto; overflow-x: hidden; }
+    .left-panel {
+      width: 100%;
+      border-right: none;
+      border-bottom: 1px solid var(--border);
+      padding: 24px 20px;
+    }
+    .right-panel { overflow-y: unset; }
+    .right-inner { padding: 24px 20px 60px; }
   }
 
   /* ── Detail view ── */
   .detail-scroll {
     flex: 1;
     overflow-y: auto;
+    background: var(--bg);
   }
 
   /* ── Timeline list ── */
@@ -112,44 +133,34 @@
     list-style: none;
     padding: 0;
     margin: 0;
-    position: relative;
-  }
-  .v-list::before {
-    content: '';
-    position: absolute;
-    left: 4px;
-    top: 6px;
-    bottom: 6px;
-    width: 2px;
-    background: var(--border);
-    border-radius: 1px;
+    display: flex;
+    flex-direction: column;
+    gap: 0;
   }
 
   /* Year marker */
   .year-marker {
-    display: flex;
-    align-items: center;
-    padding-bottom: 20px;
+    padding: 32px 0 16px;
   }
   .year-label {
-    font-size: var(--text-2xl);
+    font-size: 11px;
     font-weight: 400;
-    color: var(--accent);
-    letter-spacing: -1px;
-    line-height: 1;
-    position: relative;
-    z-index: 1;
-    padding-left: 24px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--text-sub);
   }
 
   .page-footer {
-    margin-top: 40px;
+    margin-top: 56px;
     text-align: center;
-    font-size: 13px;
-    color: var(--text);
+    font-size: 11px;
+    font-weight: 300;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--text-sub);
     padding-top: 24px;
     border-top: 1px solid var(--border);
   }
 
-  .empty { text-align: center; color: var(--text); padding: 80px 0; }
+  .empty { text-align: center; color: var(--text-sub); padding: 80px 0; }
 </style>