changed font style, added journey summary, changed card ui

src/lib/layout/Footer.svelte

@@ -0,0 +1,24 @@
+<script>
+  import { getSelected, getTotalCount } from './selection.svelte.js';
+</script>
+
+<footer class="footer">
+  <span>{getSelected().size} / {getTotalCount()} countries visited</span>
+</footer>
+
+<style>
+  .footer {
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--sans);
+    font-size: 12px;
+    font-weight: 300;
+    color: var(--text-sub);
+    border-top: 1px solid var(--border);
+    background: var(--bg-raised);
+    flex-shrink: 0;
+    letter-spacing: 0.02em;
+  }
+</style>

src/lib/layout/Layout.svelte

@@ -0,0 +1,33 @@
+<script>
+  import TopBar from './TopBar.svelte';
+  import Footer from './Footer.svelte';
+
+  let { screen, onNavigate, children } = $props();
+</script>
+
+<div class="layout">
+  <TopBar {screen} {onNavigate} />
+  <main class="main">
+    {@render children()}
+  </main>
+  <Footer />
+</div>
+
+<style>
+  .layout {
+    width: 100vw;
+    height: 100vh;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    overflow: hidden;
+  }
+
+  .main {
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 100%;
+  }
+</style>

src/lib/layout/TopBar.svelte

@@ -0,0 +1,62 @@
+<script>
+  let { screen, onNavigate } = $props();
+</script>
+
+<nav class="topbar">
+  <span class="logo">🗺 MapJournal</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>
+  </div>
+</nav>
+
+<style>
+  .topbar {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 0 24px;
+    height: 52px;
+    border-bottom: 1px solid var(--border);
+    background: var(--bg-raised);
+    flex-shrink: 0;
+  }
+
+  .logo {
+    font-family: var(--heading);
+    font-size: 15px;
+    font-weight: 400;
+    color: var(--text-h);
+    letter-spacing: -0.4px;
+  }
+
+  .nav-links {
+    display: flex;
+    gap: 2px;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--accent-bg);
+    border-radius: 10px;
+    padding: 3px;
+  }
+
+  .nav-btn {
+    font-family: var(--sans);
+    font-size: 13px;
+    font-weight: 300;
+    padding: 5px 16px;
+    border-radius: 8px;
+    border: none;
+    background: none;
+    color: var(--text);
+    cursor: pointer;
+    transition: background 0.15s, color 0.15s;
+  }
+  .nav-btn:hover { color: var(--accent); }
+  .nav-btn.active {
+    background: var(--bg-raised);
+    color: var(--accent-dark);
+    box-shadow: 0 1px 4px rgba(99,102,241,0.15);
+  }
+</style>

src/lib/layout/selection.svelte.js

@@ -0,0 +1,28 @@
+let selected = $state(new Set());
+let totalCountries = $state(0);
+
+export function toggle(id) {
+  const next = new Set(selected);
+  if (next.has(id)) {
+    next.delete(id);
+  } else {
+    next.add(id);
+  }
+  selected = next;
+}
+
+export function clearAll() {
+  selected = new Set();
+}
+
+export function getSelected() {
+  return selected;
+}
+
+export function setTotalCount(n) {
+  totalCountries = n;
+}
+
+export function getTotalCount() {
+  return totalCountries;
+}