diff --git a/src/app.css b/src/app.css
index 26d4db9..3af86af 100644
--- a/src/app.css
+++ b/src/app.css
@@ -2,24 +2,25 @@
 
 /* ── Color tokens ─────────────────────────────────────────── */
 :root {
-  /* Indigo & Lavender palette */
-  --accent:        #6366f1;   /* indigo-500 */
-  --accent-dark:   #4f46e5;   /* indigo-600 */
-  --accent-light:  #818cf8;   /* indigo-400 */
-  --accent-bg:     rgba(99, 102, 241, 0.08);
-  --accent-border: rgba(99, 102, 241, 0.35);
+  --accent:        #7c3aed;   /* indigo-600 */
+  --accent-dark:   #5b21b6;
+  --accent-light:  #a78bfa;
+  --accent-bg:     rgba(124, 58, 237, 0.07);
+  --accent-border: rgba(124, 58, 237, 0.2);
 
-  --lavender:      #c4b5fd;   /* violet-300 — lavender highlight */
-  --lavender-bg:   rgba(196, 181, 253, 0.15);
+  --lavender:      #a78bfa;
+  --lavender-bg:   rgba(167, 139, 250, 0.1);
 
-  /* Neutrals */
-  --text:          #6b7280;   /* body copy */
-  --text-h:        #1e1b4b;   /* headings — deep indigo-950 */
-  --text-sub:      #9ca3af;   /* captions / secondary */
-  --bg:            #fafafe;   /* faint indigo tint on white */
-  --bg-raised:     #ffffff;
-  --border:        #e0e7ff;   /* indigo-100 */
-  --shadow:        rgba(99, 102, 241, 0.12) 0 4px 24px -4px;
+  /* Light-first neutrals */
+  --text:          #52525b;   /* zinc-600 */
+  --text-h:        #18181b;   /* zinc-900 */
+  --text-sub:      #a1a1aa;   /* zinc-400 */
+  --bg:            #ffffff;   /* white */
+  --bg-raised:     #fafafa;   /* off-white */
+  --bg-subtle:     #f4f4f5;   /* zinc-100 */
+  --border:        #e4e4e7;   /* zinc-200 */
+  --border-bright: #d4d4d8;   /* zinc-300 */
+  --shadow:        0 4px 24px rgba(0,0,0,0.08);
 
   /* Typography */
   --sans:    'Bricolage Grotesque', system-ui, sans-serif;
@@ -32,13 +33,13 @@
   --text-base: 14px;
   --text-md:   16px;
   --text-lg:   20px;
-  --text-xl:   26px;
-  --text-2xl:  32px;
+  --text-xl:   28px;
+  --text-2xl:  40px;
 
   font-family: var(--sans);
   font-size: var(--text-base);
   line-height: 1.6;
-  font-weight: 400;
+  font-weight: 300;
   letter-spacing: 0.01em;
   color: var(--text);
   background: var(--bg);
@@ -48,28 +49,6 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-/* ── Dark mode ────────────────────────────────────────────── */
-@media (prefers-color-scheme: dark) {
-  :root {
-    --accent:        #818cf8;
-    --accent-dark:   #6366f1;
-    --accent-light:  #a5b4fc;
-    --accent-bg:     rgba(129, 140, 248, 0.12);
-    --accent-border: rgba(129, 140, 248, 0.35);
-
-    --lavender:      #a78bfa;
-    --lavender-bg:   rgba(167, 139, 250, 0.12);
-
-    --text:          #9ca3af;
-    --text-h:        #e0e7ff;
-    --text-sub:      #6b7280;
-    --bg:            #0f0e1a;
-    --bg-raised:     #16152a;
-    --border:        #2e2a5e;
-    --shadow:        rgba(0, 0, 0, 0.5) 0 4px 24px -4px;
-  }
-}
-
 /* ── Reset ────────────────────────────────────────────────── */
 *, *::before, *::after {
   box-sizing: border-box;
@@ -87,16 +66,16 @@ html, body, #app {
 h1 {
   font-size: var(--text-2xl);
   font-weight: 400;
-  line-height: 1.15;
-  letter-spacing: -0.6px;
+  line-height: 1.1;
+  letter-spacing: -1px;
   color: var(--text-h);
 }
 
 h2 {
   font-size: var(--text-xl);
   font-weight: 400;
-  line-height: 1.2;
-  letter-spacing: -0.4px;
+  line-height: 1.15;
+  letter-spacing: -0.5px;
   color: var(--text-h);
 }
 
@@ -113,16 +92,4 @@ h4, h5, h6 {
   color: var(--text-h);
 }
 
-p {
-  margin: 0;
-  color: var(--text);
-}
-
-/* Eyebrow / label style */
-.label-xs {
-  font-size: var(--text-xs);
-  font-weight: 600;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: var(--accent);
-}
+p { margin: 0; color: var(--text); }
diff --git a/src/lib/layout/Footer.svelte b/src/lib/layout/Footer.svelte
index c0a1d01..d2517b1 100644
--- a/src/lib/layout/Footer.svelte
+++ b/src/lib/layout/Footer.svelte
@@ -8,7 +8,7 @@
 
 <style>
   .footer {
-    height: 36px;
+    height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -17,8 +17,9 @@
     font-weight: 300;
     color: var(--text-sub);
     border-top: 1px solid var(--border);
-    background: var(--bg-raised);
+    background: var(--bg);
     flex-shrink: 0;
-    letter-spacing: 0.02em;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
   }
 </style>
diff --git a/src/lib/layout/TopBar.svelte b/src/lib/layout/TopBar.svelte
index 3149de7..20dc095 100644
--- a/src/lib/layout/TopBar.svelte
+++ b/src/lib/layout/TopBar.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <nav class="topbar">
-  <span class="logo">🗺 MapJournal</span>
+  <span class="logo">Map Journal</span>
   <div class="nav-links">
     <button class="nav-btn" class:active={screen === 'worldmap'} onclick={() => onNavigate('worldmap')}>Map</button>
     <button class="nav-btn" class:active={screen === 'timeline'} onclick={() => onNavigate('timeline')}>Journal</button>
@@ -15,19 +15,20 @@
     position: relative;
     display: flex;
     align-items: center;
-    padding: 0 24px;
+    padding: 0 32px;
     height: 52px;
     border-bottom: 1px solid var(--border);
-    background: var(--bg-raised);
+    background: var(--bg);
     flex-shrink: 0;
+    z-index: 10;
   }
 
   .logo {
     font-family: var(--heading);
-    font-size: 15px;
+    font-size: 14px;
     font-weight: 400;
     color: var(--text-h);
-    letter-spacing: -0.4px;
+    letter-spacing: 0.01em;
   }
 
   .nav-links {
@@ -36,8 +37,9 @@
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
-    background: var(--accent-bg);
-    border-radius: 10px;
+    background: var(--bg-subtle);
+    border: 1px solid var(--border);
+    border-radius: 8px;
     padding: 3px;
   }
 
@@ -45,18 +47,19 @@
     font-family: var(--sans);
     font-size: 13px;
     font-weight: 300;
-    padding: 5px 16px;
-    border-radius: 8px;
+    padding: 4px 18px;
+    border-radius: 6px;
     border: none;
     background: none;
     color: var(--text);
     cursor: pointer;
     transition: background 0.15s, color 0.15s;
+    letter-spacing: 0.01em;
   }
-  .nav-btn:hover { color: var(--accent); }
+  .nav-btn:hover { color: var(--text-h); }
   .nav-btn.active {
-    background: var(--bg-raised);
-    color: var(--accent-dark);
-    box-shadow: 0 1px 4px rgba(99,102,241,0.15);
+    background: var(--bg);
+    color: var(--text-h);
+    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
   }
 </style>
diff --git a/src/lib/timeline/JournalDetail.svelte b/src/lib/timeline/JournalDetail.svelte
index ac36318..90ebc23 100644
--- a/src/lib/timeline/JournalDetail.svelte
+++ b/src/lib/timeline/JournalDetail.svelte
@@ -71,9 +71,9 @@
 
 <style>
   .detail-page {
-    max-width: 680px;
+    max-width: 720px;
     margin: 0 auto;
-    padding: 32px 24px 80px;
+    padding: 48px 40px 100px;
     font-family: var(--sans, system-ui, sans-serif);
   }
 
@@ -115,8 +115,8 @@
     border-radius: 20px;
   }
   .loc-badge { background: var(--accent-bg); color: var(--accent); }
-  .trip-badge--solo    { background: rgba(245,158,11,0.12); color: #b45309; }
-  .trip-badge--friends { background: rgba(59,130,246,0.12); color: #1d4ed8; }
+  .trip-badge--solo    { background: rgba(245,158,11,0.1); color: #92400e; }
+  .trip-badge--friends { background: var(--accent-bg); color: var(--accent); }
 
   .detail-title {
     font-size: 28px;
diff --git a/src/lib/timeline/TimelineCard.svelte b/src/lib/timeline/TimelineCard.svelte
index 21993ee..6ac1df9 100644
--- a/src/lib/timeline/TimelineCard.svelte
+++ b/src/lib/timeline/TimelineCard.svelte
@@ -8,7 +8,7 @@
     });
   }
 
-  let mainPhoto  = $derived(entry.photos[0] ?? null);
+  let mainPhoto   = $derived(entry.photos[0] ?? null);
   let thumbPhotos = $derived(entry.photos.slice(1, 4));
   let extraCount  = $derived(entry.photos.length > 4 ? entry.photos.length - 4 : 0);
 </script>
@@ -20,20 +20,18 @@
     onclick={onClick}
     onkeydown={(e) => e.key === 'Enter' && onClick()}>
 
-    <!-- Photo grid -->
     <div class="photo-grid" class:has-thumbs={thumbPhotos.length > 0}>
       <div class="photo-main">
         {#if mainPhoto}
-          <img src={mainPhoto} alt="photo 1" loading="lazy" />
+          <img src={mainPhoto} alt="" loading="lazy" />
         {:else}
           <div class="photo-placeholder"></div>
         {/if}
 
-        <!-- Overlay -->
         <div class="overlay">
           <div class="overlay-top">
             <span class="trip-badge trip-badge--{entry.tripType}">
-              {entry.tripType === 'solo' ? 'Solo' : 'With Friends'}
+              {entry.tripType === 'solo' ? 'Solo' : 'Friends'}
             </span>
           </div>
           <div class="overlay-bottom">
@@ -48,7 +46,7 @@
         <div class="photo-thumbs">
           {#each thumbPhotos as photo, i}
             <div class="photo-thumb">
-              <img src={photo} alt="photo {i + 2}" loading="lazy" />
+              <img src={photo} alt="" loading="lazy" />
               {#if i === 2 && extraCount > 0}
                 <div class="extra-overlay">+{extraCount}</div>
               {/if}
@@ -64,50 +62,76 @@
 <style>
   .v-item {
     display: flex;
-    gap: 16px;
+    gap: 14px;
     align-items: flex-start;
-    padding-bottom: 20px;
+    padding-bottom: 24px;
+    position: relative;
   }
   .v-item:last-child { padding-bottom: 0; }
+  .v-item:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    left: 4px;
+    top: 30px;
+    bottom: 0;
+    width: 1px;
+    background: var(--border);
+  }
 
   .v-dot {
     flex-shrink: 0;
-    width: 10px;
-    height: 10px;
+    width: 9px;
+    height: 9px;
     border-radius: 50%;
-    background: var(--accent);
-    margin-top: 22px;
+    background: var(--bg);
+    border: 1.5px solid var(--accent);
+    margin-top: 20px;
     z-index: 1;
   }
 
-  /* Card */
+  /* ── Card ── */
   .entry-card {
     flex: 1;
     min-width: 0;
-    border-radius: 16px;
+    border-radius: 14px;
     overflow: hidden;
     cursor: pointer;
+    border: 1px solid var(--border);
+    box-shadow: var(--shadow);
+    background: var(--bg-raised);
     transition: box-shadow 0.2s, transform 0.15s;
-    box-shadow: 0 2px 12px rgba(99,102,241,0.08);
   }
   .entry-card:hover {
-    box-shadow: var(--shadow);
+    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
     transform: translateY(-2px);
   }
 
-  /* Photo grid */
+  /* ── Photo grid — fluid, breakpoint via container width ── */
   .photo-grid {
     display: grid;
     grid-template-columns: 1fr;
-    height: 220px;
-    background: #111;
+    /* height adapts: taller when single photo */
+    height: 200px;
+    background: var(--bg-subtle);
   }
   .photo-grid.has-thumbs {
     grid-template-columns: 2fr 1fr;
     gap: 2px;
+    height: 200px;
   }
 
-  /* Main photo + overlay */
+  /* Collapse to single column on narrow cards (< 340px) */
+  @container card (max-width: 340px) {
+    .photo-grid.has-thumbs {
+      grid-template-columns: 1fr;
+      height: 180px;
+    }
+    .photo-thumbs { display: none; }
+  }
+
+  .entry-card { container-type: inline-size; container-name: card; }
+
+  /* ── Main photo ── */
   .photo-main {
     position: relative;
     overflow: hidden;
@@ -122,68 +146,61 @@
   }
   .photo-placeholder { background: var(--accent-bg); }
 
+  /* ── Overlay gradient ── */
   .overlay {
     position: absolute;
     inset: 0;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    padding: 14px;
+    padding: 12px;
     background: linear-gradient(
       to bottom,
-      rgba(0,0,0,0.28) 0%,
+      rgba(0,0,0,0.22) 0%,
       transparent 35%,
       transparent 50%,
-      rgba(0,0,0,0.65) 100%
+      rgba(0,0,0,0.6) 100%
     );
   }
 
-  .overlay-top {
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  .overlay-bottom {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
+  .overlay-top { display: flex; justify-content: flex-end; }
+  .overlay-bottom { display: flex; flex-direction: column; gap: 2px; }
 
   .city {
     font-size: 12px;
     font-weight: 300;
-    color: rgba(255,255,255,0.75);
+    color: rgba(255,255,255,0.8);
     letter-spacing: 0.04em;
   }
-
   .country {
-    font-size: 22px;
+    font-size: 20px;
     font-weight: 400;
     color: #fff;
-    letter-spacing: -0.5px;
+    letter-spacing: -0.3px;
     line-height: 1.1;
-    text-shadow: 0 1px 8px rgba(0,0,0,0.4);
+    text-shadow: 0 1px 6px rgba(0,0,0,0.35);
   }
-
   .meta {
-    font-size: 12px;
+    font-size: 11px;
     font-weight: 300;
     color: rgba(255,255,255,0.7);
-    margin-top: 4px;
+    margin-top: 3px;
+    letter-spacing: 0.02em;
   }
 
-  /* Badges */
+  /* ── Trip badge ── */
   .trip-badge {
     font-size: 11px;
-    font-weight: 400;
-    padding: 3px 10px;
+    font-weight: 300;
+    padding: 2px 9px;
     border-radius: 20px;
-    backdrop-filter: blur(6px);
+    backdrop-filter: blur(8px);
+    letter-spacing: 0.04em;
   }
-  .trip-badge--solo    { background: rgba(245,158,11,0.75); color: #fff; }
-  .trip-badge--friends { background: rgba(99,102,241,0.75); color: #fff; }
+  .trip-badge--solo    { background: rgba(245,158,11,0.7); color: #fff; }
+  .trip-badge--friends { background: rgba(124,58,237,0.7); color: #fff; }
 
-  /* Thumbs */
+  /* ── Thumbs ── */
   .photo-thumbs {
     display: flex;
     flex-direction: column;
@@ -205,11 +222,11 @@
   .extra-overlay {
     position: absolute;
     inset: 0;
-    background: rgba(0,0,0,0.5);
+    background: rgba(0,0,0,0.45);
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 16px;
+    font-size: 15px;
     font-weight: 400;
     color: #fff;
   }
diff --git a/src/lib/timeline/TimelineToolbar.svelte b/src/lib/timeline/TimelineToolbar.svelte
index 3e173b1..507b12f 100644
--- a/src/lib/timeline/TimelineToolbar.svelte
+++ b/src/lib/timeline/TimelineToolbar.svelte
@@ -1,22 +1,17 @@
 <script>
   const sortOptions = [
-    { value: 'date-desc',    label: 'Newest First' },
-    { value: 'date-asc',     label: 'Oldest First' },
+    { value: 'date-desc',    label: 'Newest first' },
+    { value: 'date-asc',     label: 'Oldest first' },
     { value: 'country-asc',  label: 'Country A → Z' },
     { value: 'country-desc', label: 'Country Z → A' },
   ];
 
-  /** @type {{ sortKey: string, onSort: (key: string) => void }} */
   let { sortKey, onSort } = $props();
 </script>
 
 <header class="toolbar">
-  <div class="title-block">
-    <p class="eyebrow">Travel Journal</p>
-    <h1 class="page-title">My Journey</h1>
-  </div>
+  <h1 class="page-title">My Journey</h1>
   <div class="sort-control">
-    <label for="sort-select">Sort</label>
     <select id="sort-select" onchange={(e) => onSort(e.currentTarget.value)}>
       {#each sortOptions as opt}
         <option value={opt.value} selected={opt.value === sortKey}>{opt.label}</option>
@@ -30,48 +25,38 @@
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
-    flex-wrap: wrap;
-    gap: 20px;
-    margin-bottom: 48px;
+    gap: 16px;
+    margin-bottom: 32px;
     padding-bottom: 24px;
-    border-bottom: 1px solid var(--border, #e5e4e7);
-  }
-
-  .eyebrow {
-    font-size: 11px;
-    letter-spacing: 3px;
-    text-transform: uppercase;
-    color: var(--accent);
-    margin: 0 0 6px;
+    border-bottom: 1px solid var(--border);
   }
 
   .page-title {
-    font-size: 32px;
+    font-size: var(--text-xl);
     font-weight: 400;
-    color: var(--text-h, #08060d);
+    color: var(--text-h);
+    letter-spacing: -0.5px;
     margin: 0;
-    letter-spacing: -0.8px;
   }
 
-  .sort-control { display: flex; align-items: center; gap: 8px; }
-  .sort-control label { font-size: 13px; color: var(--text, #6b6375); }
-
   select {
-    font-size: 13px;
-    padding: 7px 28px 7px 10px;
-    border: 1px solid var(--border, #e5e4e7);
-    border-radius: 8px;
-    background: var(--bg, #fff);
-    color: var(--text-h, #08060d);
+    font-family: var(--sans);
+    font-size: var(--text-xs);
+    font-weight: 300;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    padding: 6px 28px 6px 12px;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    background: var(--bg-subtle);
+    color: var(--text);
     cursor: pointer;
     appearance: none;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6375' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2352525b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 10px center;
+    transition: border-color 0.15s, color 0.15s;
   }
-  select:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
-
-  @media (max-width: 600px) {
-    .page-title { font-size: 26px; }
-  }
+  select:hover { border-color: var(--border-bright); color: var(--text-h); }
+  select:focus { outline: 1px solid var(--accent-border); outline-offset: 2px; }
 </style>
diff --git a/src/lib/timeline/TimelineView.svelte b/src/lib/timeline/TimelineView.svelte
index 4d9f541..69daa47 100644
--- a/src/lib/timeline/TimelineView.svelte
+++ b/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>
diff --git a/src/lib/world-map/StatsPanel.svelte b/src/lib/world-map/StatsPanel.svelte
index cdfe792..a734312 100644
--- a/src/lib/world-map/StatsPanel.svelte
+++ b/src/lib/world-map/StatsPanel.svelte
@@ -99,12 +99,12 @@
                 <text x={seg.lx} y={seg.ly} text-anchor="middle" dominant-baseline="middle" class="donut-label" style="font-size: {seg.angle < 20 ? 12 : 15}px">{seg.cont}</text>
               </g>
             {/each}
-            <circle cx="90" cy="90" r="30" fill="#f8fafc" />
+            <circle cx="90" cy="90" r="30" fill="var(--bg-raised)" />
           </svg>
         {:else}
           <svg viewBox="0 0 180 180" class="donut-svg">
-            <circle cx="90" cy="90" r="65" fill="#e2e8f0" />
-            <circle cx="90" cy="90" r="30" fill="#f8fafc" />
+            <circle cx="90" cy="90" r="65" fill="var(--border)" />
+            <circle cx="90" cy="90" r="30" fill="var(--bg-raised)" />
           </svg>
         {/if}
       </div>