diff --git a/public/icons/icon-192.png b/public/icons/icon-192.png
new file mode 100644
index 0000000..d87fbd6
Binary files /dev/null and b/public/icons/icon-192.png differ
diff --git a/public/icons/icon-512.png b/public/icons/icon-512.png
new file mode 100644
index 0000000..972e1ee
Binary files /dev/null and b/public/icons/icon-512.png differ
diff --git a/public/icons/maskable-512.png b/public/icons/maskable-512.png
new file mode 100644
index 0000000..537ef97
Binary files /dev/null and b/public/icons/maskable-512.png differ
diff --git a/src/app/(map)/map/page.tsx b/src/app/(map)/map/page.tsx
index 75db4bb..67e9650 100644
--- a/src/app/(map)/map/page.tsx
+++ b/src/app/(map)/map/page.tsx
@@ -1,19 +1,24 @@
 "use client";
 
 import { useState } from "react";
-import { MapView } from "@/components/map/MapView";
+import { useTranslations } from "next-intl";
+import { MapView, type MapDestinationClick } from "@/components/map/MapView";
 import { MapHeader } from "@/components/map/MapHeader";
 import { MapDisclaimer } from "@/components/map/MapDisclaimer";
+import { DestinationSheet } from "@/components/map/DestinationSheet";
 import { TimeSlider } from "@/components/controls/TimeSlider";
 import { YearSelector } from "@/components/controls/YearSelector";
 import { HolidayPanel } from "@/components/controls/HolidayPanel";
 import { Legend } from "@/components/controls/Legend";
+import { Sheet } from "@/components/ui/Sheet";
 import { useUrlSync } from "@/hooks/useUrlSync";
 
 export default function MapPage() {
   useUrlSync();
+  const t = useTranslations("map");
   const [isPanelOpen, setIsPanelOpen] = useState(false);
   const [mobileSheetOpen, setMobileSheetOpen] = useState(false);
+  const [selectedDestination, setSelectedDestination] = useState<MapDestinationClick | null>(null);
 
   function handleTogglePanel() {
     setIsPanelOpen((v) => !v);
@@ -31,13 +36,13 @@ export default function MapPage() {
       <div className="flex min-h-0 flex-1">
         <div className="relative min-h-0 flex-1">
           <div className="absolute inset-0">
-            <MapView />
+            <MapView onDestinationClick={setSelectedDestination} />
           </div>
         </div>
 
         {/* Desktop sidebar — always mounted, animated width */}
         <aside
-          className={`hidden shrink-0 overflow-hidden border-l border-gray-200 bg-white transition-[width] duration-300 ease-in-out md:block ${
+          className={`hidden shrink-0 overflow-hidden border-l border-line bg-surface-raised transition-[width] duration-300 ease-in-out md:block ${
             isPanelOpen ? "w-80" : "w-0 border-l-0"
           }`}
         >
@@ -47,49 +52,44 @@ export default function MapPage() {
         </aside>
       </div>
 
-      {/* Footer */}
-      <footer className="z-10 border-t border-gray-200 bg-white px-4 py-3">
+      {/* Bottom control dock */}
+      <footer className="z-10 border-t border-line bg-surface px-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-2.5 sm:px-4 sm:py-3">
         {/* Mobile: year selector + legend side by side */}
         <div className="mb-2 flex items-center justify-between gap-3 md:hidden">
-          <YearSelector className="flex shrink-0 gap-1 rounded-lg bg-gray-100 p-1" />
-          <Legend className="min-w-0 flex-1 rounded-lg bg-gray-50 px-3 py-2" />
+          <YearSelector className="flex shrink-0 gap-1 rounded-[3px] border border-line bg-surface-sunken p-1" />
+          <Legend className="min-w-0 flex-1 rounded-[3px] border border-line bg-surface-sunken px-3 py-1.5" />
         </div>
 
         <div className="flex items-end gap-3">
-          <div className="flex-1">
+          <div className="min-w-0 flex-1">
             <TimeSlider className="px-1" />
           </div>
-          <div className="hidden w-44 shrink-0 md:block">
-            <Legend className="rounded-lg bg-gray-50 px-3 py-2" />
+          <div className="hidden w-44 shrink-0 pb-1 md:block">
+            <Legend className="rounded-[3px] border border-line bg-surface-sunken px-3 py-2" />
           </div>
         </div>
       </footer>
 
+      {/* Destination details sheet (opened by tapping a map dot) */}
+      <DestinationSheet
+        selected={selectedDestination}
+        onClose={() => setSelectedDestination(null)}
+      />
+
       {/* Mobile bottom sheet for HolidayPanel */}
-      {mobileSheetOpen && (
-        <div className="fixed inset-0 z-50 md:hidden">
-          {/* Backdrop */}
-          <div
-            className="absolute inset-0 bg-black/40"
-            onClick={() => setMobileSheetOpen(false)}
-          />
-          {/* Sheet */}
-          <div className="absolute bottom-0 left-0 right-0 max-h-[70vh] overflow-y-auto rounded-t-2xl bg-white p-4 shadow-2xl">
-            <div className="mb-3 flex items-center justify-between">
-              <div className="mx-auto h-1 w-10 rounded-full bg-gray-300" />
-            </div>
-            <button
-              onClick={() => setMobileSheetOpen(false)}
-              className="absolute right-3 top-3 rounded-full p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
-            >
-              <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </button>
-            <HolidayPanel className="p-0" />
-          </div>
-        </div>
-      )}
+      <div className="md:hidden">
+        <Sheet
+          open={mobileSheetOpen}
+          onClose={() => {
+            setMobileSheetOpen(false);
+            setIsPanelOpen(false);
+          }}
+          title={t("holidays")}
+          closeLabel={t("close")}
+        >
+          <HolidayPanel className="max-h-none p-0 pb-4" />
+        </Sheet>
+      </div>
     </>
   );
 }
diff --git a/src/app/(marketing)/best-time/page.tsx b/src/app/(marketing)/best-time/page.tsx
new file mode 100644
index 0000000..1fc6ff9
--- /dev/null
+++ b/src/app/(marketing)/best-time/page.tsx
@@ -0,0 +1,42 @@
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import { getLocale, getTranslations } from "next-intl/server";
+import { SiteHeader } from "@/components/SiteHeader";
+import { SiteFooter } from "@/components/SiteFooter";
+import { SectionHeading } from "@/components/ui/SectionHeading";
+import { BestTimeFinder } from "@/components/best-time/BestTimeFinder";
+
+export async function generateMetadata(): Promise<Metadata> {
+  const locale = await getLocale();
+  const t = await getTranslations({ locale, namespace: "bestTime" });
+  return {
+    title: t("metaTitle"),
+    description: t("metaDescription"),
+  };
+}
+
+export default async function BestTimePage() {
+  const t = await getTranslations("bestTime");
+
+  return (
+    <>
+      <SiteHeader />
+      <main className="min-h-screen bg-atlas-field">
+        <div className="mx-auto max-w-4xl px-4 py-12 sm:px-6 sm:py-16">
+          <SectionHeading
+            eyebrow={<span className="inline-flex items-center gap-2">✦ {t("eyebrow")}</span>}
+            title={t("title")}
+            lede={t("lede")}
+            className="animate-on-scroll"
+          />
+          <div className="animate-on-scroll-delay-1 mt-10">
+            <Suspense>
+              <BestTimeFinder />
+            </Suspense>
+          </div>
+        </div>
+      </main>
+      <SiteFooter />
+    </>
+  );
+}
diff --git a/src/app/(marketing)/compare/page.tsx b/src/app/(marketing)/compare/page.tsx
new file mode 100644
index 0000000..3d46b78
--- /dev/null
+++ b/src/app/(marketing)/compare/page.tsx
@@ -0,0 +1,43 @@
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import { getLocale, getTranslations } from "next-intl/server";
+import { SiteHeader } from "@/components/SiteHeader";
+import { SiteFooter } from "@/components/SiteFooter";
+import { SectionHeading } from "@/components/ui/SectionHeading";
+import { CompareView } from "@/components/compare/CompareView";
+
+export async function generateMetadata(): Promise<Metadata> {
+  const locale = await getLocale();
+  const t = await getTranslations({ locale, namespace: "compare" });
+  return {
+    title: t("metaTitle"),
+    // Content is driven by the visitor's saved places — not indexable.
+    robots: { index: false },
+  };
+}
+
+export default async function ComparePage() {
+  const t = await getTranslations("compare");
+
+  return (
+    <>
+      <SiteHeader />
+      <main className="min-h-screen bg-atlas-field">
+        <div className="mx-auto max-w-4xl px-4 py-12 sm:px-6 sm:py-16">
+          <SectionHeading
+            eyebrow={<span>⇄ {t("eyebrow")}</span>}
+            title={t("title")}
+            lede={t("lede")}
+            className="animate-on-scroll"
+          />
+          <div className="animate-on-scroll-delay-1 mt-10">
+            <Suspense>
+              <CompareView />
+            </Suspense>
+          </div>
+        </div>
+      </main>
+      <SiteFooter />
+    </>
+  );
+}
diff --git a/src/app/(marketing)/contact/page.tsx b/src/app/(marketing)/contact/page.tsx
index ee26513..235340e 100644
--- a/src/app/(marketing)/contact/page.tsx
+++ b/src/app/(marketing)/contact/page.tsx
@@ -3,13 +3,17 @@ import { getTranslations } from "next-intl/server";
 import { SiteHeader } from "@/components/SiteHeader";
 import { SiteFooter } from "@/components/SiteFooter";
 import { ContactForm } from "@/components/contact/ContactForm";
+import { Card } from "@/components/ui/Card";
+import { StampFrame } from "@/components/ui/Ornaments";
 
-export const metadata: Metadata = {
-  title: "Contact — PackedPlaces.com",
-  description:
-    "Get in touch with the PackedPlaces.com team — questions, feedback, and suggestions welcome.",
-  robots: { index: false, follow: false },
-};
+export async function generateMetadata(): Promise<Metadata> {
+  const c = await getTranslations("contact");
+  return {
+    title: c("metaTitle"),
+    description: c("metaDescription"),
+    robots: { index: false, follow: false },
+  };
+}
 
 export default async function ContactPage() {
   const c = await getTranslations("contact");
@@ -18,15 +22,26 @@ export default async function ContactPage() {
     <>
       <SiteHeader />
 
-      <section className="bg-sand-50 py-16">
-        <div className="mx-auto max-w-2xl px-6">
-          <h1 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+      <section className="bg-atlas-field py-16 sm:py-20">
+        <div className="mx-auto max-w-5xl px-6">
+          <h1 className="font-display text-4xl leading-[1.08] text-ink sm:text-5xl">
             {c("title")}
           </h1>
-          <p className="mt-4 text-gray-600">{c("subtitle")}</p>
+          <div aria-hidden className="mt-5 h-px w-16 bg-accent/70" />
+
+          <div className="mt-10 grid gap-10 md:grid-cols-[1fr_20rem] md:gap-14">
+            <div>
+              <ContactForm />
+            </div>
 
-          <div className="mt-10">
-            <ContactForm />
+            <aside>
+              <Card className="p-6">
+                <StampFrame className="h-14 w-14 text-accent" />
+                <p className="mt-5 text-sm leading-relaxed text-ink-muted">
+                  {c("subtitle")}
+                </p>
+              </Card>
+            </aside>
           </div>
         </div>
       </section>
diff --git a/src/app/(marketing)/destination/[slug]/page.tsx b/src/app/(marketing)/destination/[slug]/page.tsx
index 400c51a..ca3395c 100644
--- a/src/app/(marketing)/destination/[slug]/page.tsx
+++ b/src/app/(marketing)/destination/[slug]/page.tsx
@@ -1,24 +1,35 @@
 import type { Metadata } from "next";
-import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getLocale, getTranslations } from "next-intl/server";
 import { JsonLd } from "@/components/seo/JsonLd";
 import { SiteHeader } from "@/components/SiteHeader";
 import { SiteFooter } from "@/components/SiteFooter";
+import { Button } from "@/components/ui/Button";
+import { Card } from "@/components/ui/Card";
 import { getCountryName } from "@/lib/data";
 import {
   allDestinationSlugs,
   getSlugEntry,
+  localizedDestinationName,
   localizedSlugsForSlug,
   hreflangSlugMap,
   type LocalizedSlugs,
 } from "@/lib/destinations";
-import { getMonthlyBusyness } from "@/lib/services/destination-busyness";
+import {
+  getMonthlyBusyness,
+  getWeeklyBusyness,
+} from "@/lib/services/destination-busyness";
+import { quietAlternatives } from "@/lib/quiet-alternatives";
+import { slugForDestination } from "@/lib/destinations";
+import { getCountryFlag } from "@/lib/data";
 import {
   busynessColor,
   busynessLabelKey,
   BUSYNESS_BANDS,
 } from "@/lib/busyness-scale";
+import { CrowdCurve } from "@/components/ui/CrowdCurve";
+import { DestinationActions } from "@/components/destination/DestinationActions";
+import Link from "next/link";
 
 const BASE_URL = "https://packedplaces.com";
 
@@ -47,6 +58,13 @@ function switcherHrefs(alts: LocalizedSlugs): Record<string, string> {
   return hrefs;
 }
 
+/** "48.21°N 16.37°E" — degrees with hemisphere suffixes, 2 decimals. */
+function formatCoordinates(lat: number, lng: number): string {
+  const latStr = `${Math.abs(lat).toFixed(2)}°${lat >= 0 ? "N" : "S"}`;
+  const lngStr = `${Math.abs(lng).toFixed(2)}°${lng >= 0 ? "E" : "W"}`;
+  return `${latStr} ${lngStr}`;
+}
+
 function monthNames(locale: string, style: "long" | "short"): string[] {
   const fmt = new Intl.DateTimeFormat(locale, { month: style });
   return Array.from({ length: 12 }, (_, i) => fmt.format(new Date(2024, i, 1)));
@@ -83,10 +101,12 @@ export async function generateMetadata({
   const { slug } = await params;
   const entry = getSlugEntry(slug);
   if (!entry) return {};
-  const { destination: d, displayName } = entry;
+  const { destination: d } = entry;
   // German slugs (e.g. /destination/wien) always render as the German variant so
   // the hreflang="de" URL genuinely serves German content.
   const locale = entry.locale === "de" ? "de" : await getLocale();
+  // German rendering (via slug or via the language switcher) uses the exonym.
+  const displayName = locale === "de" ? localizedDestinationName(d, "de") : entry.displayName;
   const t = await getTranslations({ locale, namespace: "destination" });
   const long = monthNames(locale, "long");
   const { peakIdx, yearRound } = summarizeBusyness(getMonthlyBusyness(d.id));
@@ -102,7 +122,18 @@ export async function generateMetadata({
       canonical,
       ...(languages ? { languages } : {}),
     },
-    openGraph: { title: t("metaTitle", { name: displayName }), url: canonical },
+    openGraph: {
+      title: t("metaTitle", { name: displayName }),
+      url: canonical,
+      images: [
+        {
+          url: `${BASE_URL}/api/og/destination/${slug}`,
+          width: 1200,
+          height: 630,
+          alt: displayName,
+        },
+      ],
+    },
   };
 }
 
@@ -114,12 +145,16 @@ export default async function DestinationPage({
   const { slug } = await params;
   const entry = getSlugEntry(slug);
   if (!entry) notFound();
-  const { destination: d, displayName } = entry;
+  const { destination: d } = entry;
 
   // German slugs force German rendering (see generateMetadata).
   const locale = entry.locale === "de" ? "de" : await getLocale();
+  const displayName = locale === "de" ? localizedDestinationName(d, "de") : entry.displayName;
   const t = await getTranslations({ locale, namespace: "destination" });
   const tip = await getTranslations({ locale, namespace: "tooltip" });
+  const tSaved = await getTranslations({ locale, namespace: "saved" });
+  const tShare = await getTranslations({ locale, namespace: "share" });
+  const tAlt = await getTranslations({ locale, namespace: "alternatives" });
   const alts = localizedSlugsForSlug(slug);
   const hrefByLocale = alts ? switcherHrefs(alts) : undefined;
 
@@ -128,6 +163,8 @@ export default async function DestinationPage({
   // Same crowdedness model as the map (services/busyness-core), aggregated to
   // months — so the calendar here matches the map instead of a raw peakMonths flag.
   const scores = getMonthlyBusyness(d.id);
+  const weekly = getWeeklyBusyness(d.id).slice(0, 52);
+  const alternatives = quietAlternatives(d.id);
   const { peakIdx, quietIdx, yearRound } = summarizeBusyness(scores);
   const busiest = peakIdx.map((i) => long[i]);
   const quietest = quietIdx.map((i) => long[i]);
@@ -154,15 +191,15 @@ export default async function DestinationPage({
         mapHref={mapUrl}
       />
 
-      <section className="bg-white pb-8 pt-10">
+      <section className="bg-atlas-field pb-10 pt-12">
         <div className="mx-auto max-w-4xl px-6">
-          <p className="text-sm font-medium uppercase tracking-wide text-gray-400">
-            {category} &middot; {country}
+          <p className="font-mono text-[11px] uppercase tracking-widest text-ink-faint">
+            {category} &middot; {country} &middot; {formatCoordinates(d.lat, d.lng)}
           </p>
-          <h1 className="mt-3 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+          <h1 className="mt-4 font-display text-4xl leading-[1.08] text-ink sm:text-5xl">
             {t("h1", { name: displayName })}
           </h1>
-          <p className="mt-4 max-w-2xl text-lg text-gray-600">
+          <p className="mt-5 max-w-2xl text-lg leading-relaxed text-ink-muted">
             {yearRound
               ? t("introYearRound", { name: displayName, category, country })
               : t("intro", {
@@ -172,33 +209,49 @@ export default async function DestinationPage({
                   months: joinList(locale, busiest),
                 })}
           </p>
+          <div className="mt-6">
+            <DestinationActions
+              destinationId={d.id}
+              saveLabel={tSaved("save")}
+              savedLabel={tSaved("saved")}
+              shareLabel={tShare("share")}
+              copiedLabel={tShare("copied")}
+              share={{
+                title: `${displayName} — PackedPlaces`,
+                text: t("shareText", { name: displayName }),
+                url: destUrl(slug),
+              }}
+            />
+          </div>
         </div>
       </section>
 
-      <section className="bg-white pb-16">
+      <section className="bg-surface pb-16 pt-10">
         <div className="mx-auto max-w-4xl px-6">
-          <h2 className="text-xl font-bold text-gray-900">{t("calendarHeading")}</h2>
-          <div className="mt-6 grid grid-cols-6 gap-3 sm:grid-cols-12">
+          <h2 className="font-display text-2xl text-ink">{t("calendarHeading")}</h2>
+          <div className="mt-6 grid grid-cols-6 gap-px sm:grid-cols-12">
             {scores.map((score, i) => {
               const label = tip(busynessLabelKey(score));
               return (
                 <div key={i} className="flex flex-col items-center gap-2">
                   <div
-                    className="h-16 w-full rounded"
+                    className="h-16 w-full rounded-[2px]"
                     style={{ backgroundColor: busynessColor(score) }}
                     title={`${long[i]}: ${label}`}
                     aria-label={`${long[i]}: ${label}`}
                   />
-                  <span className="text-xs text-gray-500">{short[i]}</span>
+                  <span className="font-mono text-[10px] uppercase tracking-wider text-ink-faint">
+                    {short[i]}
+                  </span>
                 </div>
               );
             })}
           </div>
-          <div className="mt-4 flex flex-wrap gap-4 text-xs text-gray-500">
+          <div className="mt-4 flex flex-wrap gap-4 font-mono text-[11px] uppercase tracking-wider text-ink-faint">
             {BUSYNESS_BANDS.map((key, band) => (
               <span key={key} className="inline-flex items-center gap-1.5">
                 <span
-                  className="inline-block h-3 w-3 rounded"
+                  className="inline-block h-3 w-3 rounded-[2px]"
                   style={{ backgroundColor: busynessColor(band * 0.2 + 0.1) }}
                 />
                 {tip(key)}
@@ -207,33 +260,72 @@ export default async function DestinationPage({
           </div>
 
           <div className="mt-10 grid gap-6 sm:grid-cols-2">
-            <div className="rounded-xl border border-gray-200 p-6">
-              <h3 className="text-sm font-semibold uppercase tracking-wide text-gray-500">
+            <Card className="p-6">
+              <h3 className="font-mono text-[11px] uppercase tracking-widest text-accent">
                 {t("busiestHeading")}
               </h3>
-              <p className="mt-2 text-lg font-medium text-gray-900">
+              <p className="mt-3 font-display text-xl text-ink">
                 {busiest.length ? joinList(locale, busiest) : t("none")}
               </p>
-            </div>
-            <div className="rounded-xl border border-gray-200 p-6">
-              <h3 className="text-sm font-semibold uppercase tracking-wide text-gray-500">
+            </Card>
+            <Card className="p-6">
+              <h3 className="font-mono text-[11px] uppercase tracking-widest text-accent-2">
                 {t("quietestHeading")}
               </h3>
-              <p className="mt-2 text-lg font-medium text-gray-900">
+              <p className="mt-3 font-display text-xl text-ink">
                 {quietest.length ? joinList(locale, quietest) : t("none")}
               </p>
+            </Card>
+          </div>
+
+          <div className="mt-12">
+            <h2 className="font-display text-2xl text-ink">{t("curveHeading")}</h2>
+            <div className="mt-5 text-ink">
+              <CrowdCurve
+                series={[{ id: d.id, values: weekly }]}
+                markMinMax
+                ariaLabel={t("curveAria", { name: displayName })}
+                monthLabels={short}
+                className="h-32"
+              />
             </div>
           </div>
 
-          <p className="mt-6 text-xs text-gray-400">{t("disclaimer")}</p>
+          {alternatives.length > 0 && (
+            <div className="mt-12">
+              <h2 className="font-display text-2xl text-ink">{tAlt("title")}</h2>
+              <p className="mt-1 text-sm text-ink-muted">{tAlt("lede")}</p>
+              <div className="mt-5 grid gap-px overflow-hidden rounded-[4px] border border-line bg-line sm:grid-cols-2">
+                {alternatives.map((alt) => (
+                  <Link
+                    key={alt.destination.id}
+                    href={`/destination/${slugForDestination(alt.destination)}`}
+                    className="group bg-surface-raised p-4 transition-colors hover:bg-surface-sunken"
+                  >
+                    <p className="font-display text-lg text-ink transition-colors group-hover:text-accent">
+                      {getCountryFlag(alt.destination.country)}{" "}
+                      {localizedDestinationName(alt.destination, locale)}
+                    </p>
+                    <p className="mt-1 flex items-center justify-between gap-3">
+                      <span className="text-xs text-ink-faint">
+                        {getCountryName(alt.destination.country, locale)}
+                      </span>
+                      <span className="font-mono text-[10px] uppercase tracking-wider text-accent-2">
+                        {tAlt("calmer", { bands: alt.bandsCalmer })}
+                      </span>
+                    </p>
+                  </Link>
+                ))}
+              </div>
+            </div>
+          )}
+
+          <p className="mt-6 text-xs leading-relaxed text-ink-faint">{t("disclaimer")}</p>
 
           <div className="mt-10">
-            <Link
-              href={mapUrl}
-              className="inline-block rounded-lg bg-cta-gradient px-6 py-3 text-base font-medium text-white transition-transform hover:scale-105"
-            >
+            <Button href={mapUrl} size="lg">
               {t("mapCta", { name: displayName })} &rarr;
-            </Link>
+            </Button>
           </div>
         </div>
       </section>
diff --git a/src/app/(marketing)/features/categories/page.tsx b/src/app/(marketing)/features/categories/page.tsx
index a06edb9..0d5a31e 100644
--- a/src/app/(marketing)/features/categories/page.tsx
+++ b/src/app/(marketing)/features/categories/page.tsx
@@ -47,14 +47,14 @@ function CapacityChart() {
               y1={8}
               x2={x}
               y2={chartH - 32}
-              stroke="#e5e7eb"
+              style={{ stroke: "var(--line)" }}
               strokeWidth={0.5}
             />
             <text
               x={x}
               y={chartH - 18}
               fontSize={9}
-              fill="#9ca3af"
+              style={{ fill: "var(--ink-faint)" }}
               textAnchor="middle"
             >
               {v.toFixed(1)}
@@ -75,7 +75,7 @@ function CapacityChart() {
               x={labelW - 8}
               y={y + 12}
               fontSize={10}
-              fill="#374151"
+              style={{ fill: "var(--ink-muted)" }}
               textAnchor="end"
               fontWeight={500}
             >
@@ -87,9 +87,9 @@ function CapacityChart() {
               y={y + 2}
               width={Math.max(offW, 3)}
               height={14}
-              fill="#93c5fd"
+              style={{ fill: "var(--accent-2)" }}
               rx={3}
-              opacity={0.5}
+              opacity={0.35}
             />
             {/* Peak bar (front, narrower) */}
             <rect
@@ -97,7 +97,7 @@ function CapacityChart() {
               y={y + 4}
               width={Math.max(peakW, 3)}
               height={10}
-              fill="#2563eb"
+              style={{ fill: "var(--accent)" }}
               rx={3}
             />
             {/* Values */}
@@ -105,7 +105,7 @@ function CapacityChart() {
               x={labelW + Math.max(peakW, 3) + 6}
               y={y + 13}
               fontSize={9}
-              fill="#6b7280"
+              style={{ fill: "var(--ink-faint)" }}
             >
               {cat.peak} / {cat.offPeak}
             </text>
@@ -115,10 +115,10 @@ function CapacityChart() {
 
       {/* Legend */}
       <g transform={`translate(${labelW}, ${chartH - 10})`}>
-        <rect width={10} height={10} fill="#2563eb" rx={2} />
-        <text x={14} y={9} fontSize={9} fill="#6b7280">Peak capacity</text>
-        <rect x={100} width={10} height={10} fill="#93c5fd" rx={2} opacity={0.5} />
-        <text x={114} y={9} fontSize={9} fill="#6b7280">Off-peak capacity</text>
+        <rect width={10} height={10} style={{ fill: "var(--accent)" }} rx={2} />
+        <text x={14} y={9} fontSize={9} style={{ fill: "var(--ink-muted)" }}>Peak capacity</text>
+        <rect x={100} width={10} height={10} style={{ fill: "var(--accent-2)" }} rx={2} opacity={0.35} />
+        <text x={114} y={9} fontSize={9} style={{ fill: "var(--ink-muted)" }}>Off-peak capacity</text>
       </g>
     </svg>
   );
@@ -131,51 +131,51 @@ export default async function CategoriesPage() {
   return (
     <FeaturePageShell slug="categories">
       {/* Category Grid */}
-      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+      <div className="grid gap-px overflow-hidden rounded-[4px] border border-line bg-line sm:grid-cols-2 lg:grid-cols-3">
         {CATEGORIES.map((cat) => (
           <div
             key={cat.name}
-            className="rounded-lg border border-gray-200 bg-white p-4"
+            className="bg-surface-raised p-4"
           >
             <div className="flex items-baseline justify-between">
-              <h3 className="text-sm font-semibold text-gray-900">
+              <h3 className="font-display text-base text-ink">
                 {cat.name}
               </h3>
-              <span className="text-xs text-gray-400">
+              <span className="font-mono text-xs text-ink-faint">
                 {cat.peak} / {cat.offPeak}
               </span>
             </div>
-            <p className="mt-1 text-xs text-gray-500">{t(cat.descKey)}</p>
-            <p className="mt-2 text-xs text-gray-400">{cat.example}</p>
+            <p className="mt-1 text-xs leading-relaxed text-ink-muted">{t(cat.descKey)}</p>
+            <p className="mt-2 font-mono text-[10px] text-ink-faint">{cat.example}</p>
           </div>
         ))}
       </div>
 
       {/* Capacity Chart */}
-      <h2 className="mt-12 text-xl font-bold text-gray-900">
+      <h2 className="mt-12 font-display text-2xl text-ink">
         {t("capacityChartTitle")}
       </h2>
-      <p className="mt-2 text-sm text-gray-600">
+      <p className="mt-2 text-sm leading-relaxed text-ink-muted">
         {t("capacityChartText")}
       </p>
 
-      <div className="mt-6 overflow-hidden rounded-xl border border-gray-200 bg-gray-50 p-4 sm:p-6">
+      <div className="mt-6 overflow-hidden rounded-[4px] border border-line bg-surface-sunken p-4 sm:p-6">
         <CapacityChart />
       </div>
 
       {/* Key Insight */}
-      <div className="mt-10 rounded-r-lg border-l-4 border-blue-500 bg-blue-50 p-4">
-        <p className="text-sm font-semibold text-blue-900">{s("keyInsight")}</p>
-        <p className="mt-1 text-sm text-blue-800">
+      <div className="mt-10 border-l-2 border-dotted border-accent/50 pl-4">
+        <p className="font-mono text-[11px] font-medium uppercase tracking-widest text-accent">{s("keyInsight")}</p>
+        <p className="mt-2 text-sm leading-relaxed text-ink-muted">
           {t("insightText")}
         </p>
       </div>
 
       {/* How categories are assigned */}
-      <h2 className="mt-12 text-xl font-bold text-gray-900">
+      <h2 className="mt-12 font-display text-2xl text-ink">
         {t("assignmentTitle")}
       </h2>
-      <p className="mt-2 text-sm text-gray-600">
+      <p className="mt-2 text-sm leading-relaxed text-ink-muted">
         {t("assignmentText")}
       </p>
     </FeaturePageShell>
diff --git a/src/app/(marketing)/features/crowdedness/page.tsx b/src/app/(marketing)/features/crowdedness/page.tsx
index 817600e..a0fe7cd 100644
--- a/src/app/(marketing)/features/crowdedness/page.tsx
+++ b/src/app/(marketing)/features/crowdedness/page.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { getTranslations } from "next-intl/server";
 import { FeaturePageShell } from "@/components/features/FeaturePageShell";
+import { crowdColor, crowdCssGradient } from "@/lib/crowd-palette";
 
 export const metadata: Metadata = {
   title: "Crowdedness, Not Traffic — PackedPlaces.com",
@@ -15,192 +16,202 @@ export default async function CrowdednessPage() {
   return (
     <FeaturePageShell slug="crowdedness">
       {/* The Formula */}
-      <div className="rounded-xl border border-gray-200 bg-gray-50 p-6">
-        <h2 className="text-sm font-semibold uppercase tracking-wide text-gray-500">
+      <div className="rounded-[4px] border border-line bg-surface-sunken p-6">
+        <h2 className="font-mono text-[11px] font-medium uppercase tracking-widest text-accent">
           {t("formula")}
         </h2>
         <div className="mt-4 flex flex-col items-center gap-3 sm:flex-row sm:justify-center">
-          <div className="rounded-lg bg-white px-5 py-3 text-center shadow-sm">
-            <p className="text-xs text-gray-500">{t("rawTraffic")}</p>
-            <p className="text-lg font-bold text-gray-900">{t("visitors")}</p>
+          <div className="rounded-[3px] border border-line bg-surface-raised px-5 py-3 text-center">
+            <p className="font-mono text-[10px] uppercase tracking-widest text-ink-faint">{t("rawTraffic")}</p>
+            <p className="mt-1 font-display text-lg text-ink">{t("visitors")}</p>
           </div>
-          <span className="text-2xl font-light text-gray-400">&divide;</span>
-          <div className="rounded-lg bg-white px-5 py-3 text-center shadow-sm">
-            <p className="text-xs text-gray-500">{t("infrastructure")}</p>
-            <p className="text-lg font-bold text-gray-900">{t("capacity")}</p>
+          <span className="font-mono text-2xl text-ink-faint">&divide;</span>
+          <div className="rounded-[3px] border border-line bg-surface-raised px-5 py-3 text-center">
+            <p className="font-mono text-[10px] uppercase tracking-widest text-ink-faint">{t("infrastructure")}</p>
+            <p className="mt-1 font-display text-lg text-ink">{t("capacity")}</p>
           </div>
-          <span className="text-2xl font-light text-gray-400">=</span>
-          <div className="rounded-lg bg-gray-900 px-5 py-3 text-center shadow-sm">
-            <p className="text-xs text-gray-400">{t("theResult")}</p>
-            <p className="text-lg font-bold text-white">{t("crowdedness")}</p>
+          <span className="font-mono text-2xl text-ink-faint">=</span>
+          <div className="rounded-[3px] bg-accent px-5 py-3 text-center">
+            <p className="font-mono text-[10px] uppercase tracking-widest text-accent-ink/70">{t("theResult")}</p>
+            <p className="mt-1 font-display text-lg text-accent-ink">{t("crowdedness")}</p>
           </div>
         </div>
       </div>
 
       {/* Comparison */}
-      <h2 className="mt-12 text-xl font-bold text-gray-900">
+      <h2 className="mt-12 font-display text-2xl text-ink">
         {t("misleadingTitle")}
       </h2>
-      <p className="mt-2 text-sm text-gray-600">
+      <p className="mt-2 text-sm leading-relaxed text-ink-muted">
         {t("misleadingText")}
       </p>
 
       <div className="mt-8 grid gap-6 sm:grid-cols-2">
         {/* NYC Card */}
-        <div className="rounded-xl border border-gray-200 p-6">
-          <div className="text-xs font-medium uppercase tracking-wide text-gray-400">
+        <div className="rounded-[4px] border border-line bg-surface-raised p-6">
+          <div className="font-mono text-[11px] uppercase tracking-widest text-ink-faint">
             {t("city")}
           </div>
-          <div className="mt-1 text-xl font-bold text-gray-900">
+          <div className="mt-1 font-display text-xl text-ink">
             New York City
           </div>
           <div className="mt-6 space-y-4">
             <div>
               <div className="flex justify-between text-sm">
-                <span className="text-gray-600">{t("annualVisitors")}</span>
-                <span className="font-medium text-gray-900">60M</span>
+                <span className="text-ink-muted">{t("annualVisitors")}</span>
+                <span className="font-mono text-ink">60M</span>
               </div>
-              <div className="mt-1.5 h-2.5 rounded-full bg-gray-100">
+              <div className="mt-1.5 h-2.5 rounded-full bg-surface-sunken">
                 <div
-                  className="h-full rounded-full bg-blue-500"
+                  className="h-full rounded-full bg-accent-2"
                   style={{ width: "90%" }}
                 />
               </div>
             </div>
             <div className="flex justify-center">
-              <span className="text-lg font-light text-gray-300">&divide;</span>
+              <span className="font-mono text-lg text-ink-faint">&divide;</span>
             </div>
             <div>
               <div className="flex justify-between text-sm">
-                <span className="text-gray-600">{t("capacity")}</span>
-                <span className="font-medium text-gray-900">5.0 ({t("high")})</span>
+                <span className="text-ink-muted">{t("capacity")}</span>
+                <span className="font-mono text-ink">5.0 ({t("high")})</span>
               </div>
-              <div className="mt-1.5 h-2.5 rounded-full bg-gray-100">
+              <div className="mt-1.5 h-2.5 rounded-full bg-surface-sunken">
                 <div
-                  className="h-full rounded-full bg-blue-300"
+                  className="h-full rounded-full bg-accent-2/40"
                   style={{ width: "100%" }}
                 />
               </div>
             </div>
             <div className="flex justify-center">
-              <span className="text-lg font-light text-gray-300">=</span>
+              <span className="font-mono text-lg text-ink-faint">=</span>
             </div>
             <div>
               <div className="flex justify-between text-sm">
-                <span className="text-gray-600">{t("crowdedness")}</span>
-                <span className="font-medium text-gray-900">35%</span>
+                <span className="text-ink-muted">{t("crowdedness")}</span>
+                <span className="font-mono text-ink">35%</span>
               </div>
-              <div className="mt-1.5 h-3 rounded-full bg-gray-100">
+              <div className="mt-1.5 h-3 rounded-full bg-surface-sunken">
                 <div
-                  className="h-full rounded-full bg-yellow-400"
-                  style={{ width: "35%" }}
+                  className="h-full rounded-full"
+                  style={{ width: "35%", backgroundColor: crowdColor(0.35, "light") }}
                 />
               </div>
             </div>
           </div>
-          <div className="mt-5 rounded-lg bg-yellow-50 px-3 py-2 text-center text-sm font-medium text-yellow-700">
+          <div
+            className="mt-5 rounded-[3px] border border-line bg-surface-sunken px-3 py-2 text-center font-mono text-xs font-medium uppercase tracking-widest"
+            style={{ color: crowdColor(0.35, "light") }}
+          >
             {t("moderate")}
           </div>
         </div>
 
         {/* Hallstatt Card */}
-        <div className="rounded-xl border border-gray-200 p-6">
-          <div className="text-xs font-medium uppercase tracking-wide text-gray-400">
+        <div className="rounded-[4px] border border-line bg-surface-raised p-6">
+          <div className="font-mono text-[11px] uppercase tracking-widest text-ink-faint">
             {t("lakeVillage")}
           </div>
-          <div className="mt-1 text-xl font-bold text-gray-900">Hallstatt</div>
+          <div className="mt-1 font-display text-xl text-ink">Hallstatt</div>
           <div className="mt-6 space-y-4">
             <div>
               <div className="flex justify-between text-sm">
-                <span className="text-gray-600">{t("annualVisitors")}</span>
-                <span className="font-medium text-gray-900">1M</span>
+                <span className="text-ink-muted">{t("annualVisitors")}</span>
+                <span className="font-mono text-ink">1M</span>
               </div>
-              <div className="mt-1.5 h-2.5 rounded-full bg-gray-100">
+              <div className="mt-1.5 h-2.5 rounded-full bg-surface-sunken">
                 <div
-                  className="h-full rounded-full bg-blue-500"
+                  className="h-full rounded-full bg-accent-2"
                   style={{ width: "12%" }}
                 />
               </div>
             </div>
             <div className="flex justify-center">
-              <span className="text-lg font-light text-gray-300">&divide;</span>
+              <span className="font-mono text-lg text-ink-faint">&divide;</span>
             </div>
             <div>
               <div className="flex justify-between text-sm">
-                <span className="text-gray-600">{t("capacity")}</span>
-                <span className="font-medium text-gray-900">
+                <span className="text-ink-muted">{t("capacity")}</span>
+                <span className="font-mono text-ink">
                   0.3 ({t("veryLow")})
                 </span>
               </div>
-              <div className="mt-1.5 h-2.5 rounded-full bg-gray-100">
+              <div className="mt-1.5 h-2.5 rounded-full bg-surface-sunken">
                 <div
-                  className="h-full rounded-full bg-blue-300"
+                  className="h-full rounded-full bg-accent-2/40"
                   style={{ width: "6%" }}
                 />
               </div>
             </div>
             <div className="flex justify-center">
-              <span className="text-lg font-light text-gray-300">=</span>
+              <span className="font-mono text-lg text-ink-faint">=</span>
             </div>
             <div>
               <div className="flex justify-between text-sm">
-                <span className="text-gray-600">{t("crowdedness")}</span>
-                <span className="font-medium text-gray-900">89%</span>
+                <span className="text-ink-muted">{t("crowdedness")}</span>
+                <span className="font-mono text-ink">89%</span>
               </div>
-              <div className="mt-1.5 h-3 rounded-full bg-gray-100">
+              <div className="mt-1.5 h-3 rounded-full bg-surface-sunken">
                 <div
-                  className="h-full rounded-full bg-red-500"
-                  style={{ width: "89%" }}
+                  className="h-full rounded-full"
+                  style={{ width: "89%", backgroundColor: crowdColor(0.89, "light") }}
                 />
               </div>
             </div>
           </div>
-          <div className="mt-5 rounded-lg bg-red-50 px-3 py-2 text-center text-sm font-medium text-red-700">
+          <div
+            className="mt-5 rounded-[3px] border border-line bg-surface-sunken px-3 py-2 text-center font-mono text-xs font-medium uppercase tracking-widest"
+            style={{ color: crowdColor(0.89, "light") }}
+          >
             {t("packed")}
           </div>
         </div>
       </div>
 
       {/* Key Insight */}
-      <div className="mt-10 rounded-r-lg border-l-4 border-blue-500 bg-blue-50 p-4">
-        <p className="text-sm font-semibold text-blue-900">{s("keyInsight")}</p>
-        <p className="mt-1 text-sm text-blue-800">
+      <div className="mt-10 border-l-2 border-dotted border-accent/50 pl-4">
+        <p className="font-mono text-[11px] font-medium uppercase tracking-widest text-accent">{s("keyInsight")}</p>
+        <p className="mt-2 text-sm leading-relaxed text-ink-muted">
           {t("insightText")}
         </p>
       </div>
 
       {/* Crowdedness Scale */}
-      <h2 className="mt-12 text-xl font-bold text-gray-900">
+      <h2 className="mt-12 font-display text-2xl text-ink">
         {t("scaleTitle")}
       </h2>
-      <p className="mt-2 text-sm text-gray-600">
+      <p className="mt-2 text-sm leading-relaxed text-ink-muted">
         {t("scaleText")}
       </p>
-      <div className="mt-6 overflow-hidden rounded-xl border border-gray-200">
-        <div className="flex">
+      <div className="mt-6 overflow-hidden rounded-[4px] border border-line">
+        <div
+          aria-hidden
+          className="h-2"
+          style={{ background: crowdCssGradient("light") }}
+        />
+        <div className="grid grid-cols-5 gap-px border-t border-line bg-line">
           {[
-            { label: t("quiet"), range: "0–20%", color: "bg-green-500", text: "text-green-900", bg: "bg-green-50" },
-            { label: t("moderate"), range: "20–40%", color: "bg-yellow-400", text: "text-yellow-900", bg: "bg-yellow-50" },
-            { label: t("busy"), range: "40–60%", color: "bg-amber-500", text: "text-amber-900", bg: "bg-amber-50" },
-            { label: t("veryBusy"), range: "60–80%", color: "bg-orange-500", text: "text-orange-900", bg: "bg-orange-50" },
-            { label: t("packed"), range: "80–100%", color: "bg-red-500", text: "text-red-900", bg: "bg-red-50" },
+            { label: t("quiet"), range: "0–20%" },
+            { label: t("moderate"), range: "20–40%" },
+            { label: t("busy"), range: "40–60%" },
+            { label: t("veryBusy"), range: "60–80%" },
+            { label: t("packed"), range: "80–100%" },
           ].map((level) => (
-            <div key={level.label} className={`flex-1 ${level.bg} p-3 text-center`}>
-              <div className={`mx-auto h-2 w-12 rounded-full ${level.color}`} />
-              <p className={`mt-2 text-xs font-semibold ${level.text}`}>
+            <div key={level.label} className="bg-surface-raised p-3 text-center">
+              <p className="text-xs font-medium text-ink">
                 {level.label}
               </p>
-              <p className="mt-0.5 text-xs text-gray-500">{level.range}</p>
+              <p className="mt-0.5 font-mono text-[10px] text-ink-faint">{level.range}</p>
             </div>
           ))}
         </div>
       </div>
 
       {/* How capacity is determined */}
-      <h2 className="mt-12 text-xl font-bold text-gray-900">
+      <h2 className="mt-12 font-display text-2xl text-ink">
         {t("howCapacityTitle")}
       </h2>
-      <p className="mt-2 text-sm text-gray-600">
+      <p className="mt-2 text-sm leading-relaxed text-ink-muted">
         {t("howCapacityText")}
       </p>
     </FeaturePageShell>
diff --git a/src/app/(marketing)/features/events/page.tsx b/src/app/(marketing)/features/events/page.tsx
index cf1a557..6d576a3 100644
--- a/src/app/(marketing)/features/events/page.tsx
+++ b/src/app/(marketing)/features/events/page.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { getTranslations } from "next-intl/server";
 import { FeaturePageShell } from "@/components/features/FeaturePageShell";
+import { crowdColor } from "@/lib/crowd-palette";
 
 export const metadata: Metadata = {
   title: "50+ Major Events — PackedPlaces.com",
@@ -9,11 +10,11 @@ export const metadata: Metadata = {
 };
 
 const EVENT_CATEGORIES = [
-  { key: "sports", label: "Sports", color: "#3b82f6" },
-  { key: "festival", label: "Festivals", color: "#f97316" },
-  { key: "cultural", label: "Cultural", color: "#8b5cf6" },
-  { key: "music", label: "Music", color: "#22c55e" },
-  { key: "trade", label: "Trade & Expos", color: "#6b7280" },
+  { key: "sports", label: "Sports", color: "var(--accent-2)" },
+  { key: "festival", label: "Festivals", color: "var(--accent)" },
+  { key: "cultural", label: "Cultural", color: crowdColor(0.3, "light") },
+  { key: "music", label: "Music", color: crowdColor(0.1, "light") },
+  { key: "trade", label: "Trade & Expos", color: "var(--ink-faint)" },
 ];
 
 const EVENTS = [
@@ -78,14 +79,14 @@ function EventTimeline() {
             y1={16}
             x2={chartL + i * monthW}
             y2={chartH - 30}
-            stroke="#e5e7eb"
+            style={{ stroke: "var(--line)" }}
             strokeWidth={0.5}
           />
           <text
             x={chartL + i * monthW + monthW / 2}
             y={12}
             fontSize={9}
-            fill="#9ca3af"
+            style={{ fill: "var(--ink-faint)" }}
             textAnchor="middle"
           >
             {month}
@@ -98,7 +99,7 @@ function EventTimeline() {
         y1={16}
         x2={chartL + 12 * monthW}
         y2={chartH - 30}
-        stroke="#e5e7eb"
+        style={{ stroke: "var(--line)" }}
         strokeWidth={0.5}
       />
 
@@ -107,7 +108,7 @@ function EventTimeline() {
         const x = chartL + evt.month * monthW + 2;
         const w = evt.duration * monthW - 4;
         const y = 20 + rows[i] * rowH;
-        const color = CAT_COLORS[evt.cat] || "#6b7280";
+        const color = CAT_COLORS[evt.cat] || "var(--ink-faint)";
         return (
           <g key={i}>
             <rect
@@ -115,9 +116,9 @@ function EventTimeline() {
               y={y}
               width={w}
               height={rowH - 4}
-              fill={color}
+              style={{ fill: color }}
               opacity={0.2}
-              rx={4}
+              rx={3}
             />
             <rect
               x={x}
@@ -125,17 +126,17 @@ function EventTimeline() {
               width={w}
               height={rowH - 4}
               fill="none"
-              stroke={color}
+              style={{ stroke: color }}
               strokeWidth={1}
               opacity={0.5}
-              rx={4}
+              rx={3}
             />
             {w > 30 && (
               <text
                 x={x + 5}
                 y={y + rowH / 2 + 1}
                 fontSize={7.5}
-                fill="#374151"
+                style={{ fill: "var(--ink)" }}
                 fontWeight={500}
               >
                 {evt.name}
@@ -151,8 +152,8 @@ function EventTimeline() {
           key={cat.key}
           transform={`translate(${labelW + chartL + i * 100}, ${chartH - 14})`}
         >
-          <rect width={10} height={10} fill={cat.color} rx={2} opacity={0.6} />
-          <text x={14} y={9} fontSize={9} fill="#6b7280">
+          <rect width={10} height={10} style={{ fill: cat.color }} rx={2} opacity={0.6} />
+          <text x={14} y={9} fontSize={9} style={{ fill: "var(--ink-muted)" }}>
             {cat.label}
           </text>
         </g>
@@ -162,10 +163,10 @@ function EventTimeline() {
 }
 
 function boostToColor(boost: number): string {
-  if (boost >= 0.7) return "text-red-600 bg-red-50";
-  if (boost >= 0.4) return "text-orange-600 bg-orange-50";
-  if (boost >= 0.2) return "text-yellow-700 bg-yellow-50";
-  return "text-gray-600 bg-gray-50";
+  if (boost >= 0.7) return crowdColor(0.9, "light");
+  if (boost >= 0.4) return crowdColor(0.6, "light");
+  if (boost >= 0.2) return crowdColor(0.3, "light");
+  return "var(--ink-muted)";
 }
 
 function boostToLabelKey(boost: number): string {
@@ -182,76 +183,79 @@ export default async function EventsPage() {
   return (
     <FeaturePageShell slug="events">
       {/* How events work */}
-      <h2 className="text-xl font-bold text-gray-900">
+      <h2 className="font-display text-2xl text-ink">
         {t("addOnTitle")}
       </h2>
-      <p className="mt-2 text-sm text-gray-600">
+      <p className="mt-2 text-sm leading-relaxed text-ink-muted">
         {t("addOnText")}
       </p>
 
       {/* Timeline */}
-      <div className="mt-8 overflow-hidden rounded-xl border border-gray-200 bg-gray-50 p-4 sm:p-6">
-        <h3 className="mb-3 text-sm font-semibold text-gray-700">
+      <div className="mt-8 overflow-hidden rounded-[4px] border border-line bg-surface-sunken p-4 sm:p-6">
+        <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-widest text-accent">
           {t("chartTitle")}
         </h3>
         <EventTimeline />
       </div>
 
       {/* Event categories */}
-      <h2 className="mt-12 text-xl font-bold text-gray-900">
+      <h2 className="mt-12 font-display text-2xl text-ink">
         {t("categoriesTitle")}
       </h2>
-      <div className="mt-4 grid gap-3 sm:grid-cols-5">
+      <div className="mt-4 grid gap-px overflow-hidden rounded-[4px] border border-line bg-line sm:grid-cols-5">
         {EVENT_CATEGORIES.map((cat) => {
           const count = EVENTS.filter((e) => e.cat === cat.key).length;
           return (
             <div
               key={cat.key}
-              className="rounded-lg border border-gray-200 bg-white p-3 text-center"
+              className="bg-surface-raised p-3 text-center"
             >
               <div
+                aria-hidden
                 className="mx-auto h-2 w-8 rounded-full"
                 style={{ backgroundColor: cat.color }}
               />
-              <p className="mt-2 text-sm font-semibold text-gray-900">
+              <p className="mt-2 text-sm font-medium text-ink">
                 {cat.label}
               </p>
-              <p className="text-xs text-gray-500">{t("eventsShown", { count })}</p>
+              <p className="mt-0.5 font-mono text-[10px] text-ink-faint">{t("eventsShown", { count })}</p>
             </div>
           );
         })}
       </div>
 
       {/* Featured events */}
-      <h2 className="mt-12 text-xl font-bold text-gray-900">
+      <h2 className="mt-12 font-display text-2xl text-ink">
         {t("highImpactTitle")}
       </h2>
-      <div className="mt-4 space-y-2">
+      <div className="mt-4 divide-y divide-line border-y border-line">
         {EVENTS.filter((e) => e.boost >= 0.4)
           .sort((a, b) => b.boost - a.boost)
           .map((evt) => (
             <div
               key={evt.name}
-              className="flex items-center gap-3 rounded-lg border border-gray-100 bg-white px-4 py-3"
+              className="flex items-center gap-3 py-3"
             >
               <div
+                aria-hidden
                 className="h-2 w-2 shrink-0 rounded-full"
                 style={{
                   backgroundColor:
                     CAT_COLORS[evt.cat],
                 }}
               />
-              <span className="font-medium text-gray-900 text-sm">
+              <span className="text-sm font-medium text-ink">
                 {evt.name}
               </span>
-              <span className="text-xs text-gray-500">{evt.location}</span>
-              <span className="ml-auto flex items-center gap-2">
+              <span className="text-xs text-ink-faint">{evt.location}</span>
+              <span className="ml-auto flex items-center gap-3">
                 <span
-                  className={`rounded-full px-2 py-0.5 text-xs font-medium ${boostToColor(evt.boost)}`}
+                  className="rounded-[3px] border border-line bg-surface-sunken px-2 py-0.5 font-mono text-[10px] font-medium uppercase tracking-wider"
+                  style={{ color: boostToColor(evt.boost) }}
                 >
                   {t(boostToLabelKey(evt.boost))}
                 </span>
-                <span className="text-sm font-semibold text-gray-700">
+                <span className="font-mono text-sm text-ink">
                   +{(evt.boost * 100).toFixed(0)}%
                 </span>
               </span>
@@ -260,30 +264,30 @@ export default async function EventsPage() {
       </div>
 
       {/* Key Insight */}
-      <div className="mt-10 rounded-r-lg border-l-4 border-orange-500 bg-orange-50 p-4">
-        <p className="text-sm font-semibold text-orange-900">{s("keyInsight")}</p>
-        <p className="mt-1 text-sm text-orange-800">
+      <div className="mt-10 border-l-2 border-dotted border-accent/50 pl-4">
+        <p className="font-mono text-[11px] font-medium uppercase tracking-widest text-accent">{s("keyInsight")}</p>
+        <p className="mt-2 text-sm leading-relaxed text-ink-muted">
           {t("insightText")}
         </p>
       </div>
 
       {/* Recurring vs one-time */}
-      <h2 className="mt-12 text-xl font-bold text-gray-900">
+      <h2 className="mt-12 font-display text-2xl text-ink">
         {t("recurringTitle")}
       </h2>
-      <p className="mt-2 text-sm text-gray-600">
+      <p className="mt-2 text-sm leading-relaxed text-ink-muted">
         {t("recurringText")}
       </p>
-      <div className="mt-4 grid gap-4 sm:grid-cols-2">
-        <div className="rounded-lg border border-gray-200 bg-white p-4">
-          <p className="text-sm font-semibold text-gray-900">{t("recurring")}</p>
-          <p className="mt-1 text-xs text-gray-600">
+      <div className="mt-4 grid gap-px overflow-hidden rounded-[4px] border border-line bg-line sm:grid-cols-2">
+        <div className="bg-surface-raised p-4">
+          <p className="font-display text-base text-ink">{t("recurring")}</p>
+          <p className="mt-1 text-xs leading-relaxed text-ink-muted">
             {t("recurringDesc")}
           </p>
         </div>
-        <div className="rounded-lg border border-gray-200 bg-white p-4">
-          <p className="text-sm font-semibold text-gray-900">{t("oneTime")}</p>
-          <p className="mt-1 text-xs text-gray-600">
+        <div className="bg-surface-raised p-4">
+          <p className="font-display text-base text-ink">{t("oneTime")}</p>
+          <p className="mt-1 text-xs leading-relaxed text-ink-muted">
             {t("oneTimeDesc")}
           </p>
         </div>
diff --git a/src/app/(marketing)/features/holiday-boost/page.tsx b/src/app/(marketing)/features/holiday-boost/page.tsx
index 1480e4d..0f790f2 100644
--- a/src/app/(marketing)/features/holiday-boost/page.tsx
+++ b/src/app/(marketing)/features/holiday-boost/page.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { getTranslations } from "next-intl/server";
 import { FeaturePageShell } from "@/components/features/FeaturePageShell";
+import { crowdColor } from "@/lib/crowd-palette";
 
 export const metadata: Metadata = {
   title: "Holiday Boost Effect — PackedPlaces.com",
@@ -24,13 +25,6 @@ const CT = 20;
 const CW = 490;
 const CH = 180;
 
-function scoreToColor(score: number): string {
-  if (score < 30) return "#22c55e";
-  if (score < 50) return "#facc15";
-  if (score < 70) return "#f97316";
-  return "#dc2626";
-}
-
 interface BoostChartProps {
   labelSchoolHolidays: string;
   legendNormal: string;
@@ -56,14 +50,14 @@ function BoostChart({ labelSchoolHolidays, legendNormal, legendHoliday, legendBa
             x2={CL + CW}
             y1={CT + CH * (1 - v / 100)}
             y2={CT + CH * (1 - v / 100)}
-            stroke="#e5e7eb"
+            style={{ stroke: "var(--line)" }}
             strokeWidth={0.5}
           />
           <text
             x={CL - 6}
             y={CT + CH * (1 - v / 100) + 3.5}
             fontSize={9}
-            fill="#9ca3af"
+            style={{ fill: "var(--ink-faint)" }}
             textAnchor="end"
           >
             {v}%
@@ -77,14 +71,15 @@ function BoostChart({ labelSchoolHolidays, legendNormal, legendHoliday, legendBa
         y={CT - 4}
         width={4 * (barW + 4)}
         height={CH + 8}
-        fill="#fef3c7"
+        style={{ fill: "var(--accent)" }}
+        opacity={0.12}
         rx={4}
       />
       <text
         x={CL + (5 * (barW + 4)) + (4 * (barW + 4)) / 2}
         y={CT - 8}
         fontSize={9}
-        fill="#d97706"
+        style={{ fill: "var(--accent)" }}
         textAnchor="middle"
         fontWeight={600}
       >
@@ -102,7 +97,7 @@ function BoostChart({ labelSchoolHolidays, legendNormal, legendHoliday, legendBa
             y={CT + CH - h}
             width={barW}
             height={h}
-            fill="#d1d5db"
+            style={{ fill: "var(--ink-faint)" }}
             rx={2}
             opacity={HOLIDAY_WEEKS.has(i + 1) ? 0.3 : 0}
           />
@@ -121,10 +116,10 @@ function BoostChart({ labelSchoolHolidays, legendNormal, legendHoliday, legendBa
               y={CT + CH - h}
               width={barW}
               height={h}
-              fill={
+              style={
                 HOLIDAY_WEEKS.has(i + 1)
-                  ? scoreToColor(score)
-                  : "#94a3b8"
+                  ? { fill: crowdColor(score / 100, "light") }
+                  : { fill: "var(--line-strong)" }
               }
               rx={2}
             />
@@ -133,7 +128,7 @@ function BoostChart({ labelSchoolHolidays, legendNormal, legendHoliday, legendBa
                 x={x + barW / 2}
                 y={CT + CH - h - 4}
                 fontSize={8}
-                fill="#d97706"
+                style={{ fill: "var(--accent)" }}
                 textAnchor="middle"
                 fontWeight={600}
               >
@@ -151,7 +146,7 @@ function BoostChart({ labelSchoolHolidays, legendNormal, legendHoliday, legendBa
           x={CL + i * (barW + 4) + 2 + barW / 2}
           y={CT + CH + 14}
           fontSize={8}
-          fill="#9ca3af"
+          style={{ fill: "var(--ink-faint)" }}
           textAnchor="middle"
         >
           W{w}
@@ -160,12 +155,12 @@ function BoostChart({ labelSchoolHolidays, legendNormal, legendHoliday, legendBa
 
       {/* Legend */}
       <g transform={`translate(${CL}, ${CT + CH + 30})`}>
-        <rect width={10} height={10} fill="#94a3b8" rx={2} />
-        <text x={14} y={9} fontSize={9} fill="#6b7280">{legendNormal}</text>
-        <rect x={110} width={10} height={10} fill="#f97316" rx={2} />
-        <text x={124} y={9} fontSize={9} fill="#6b7280">{legendHoliday}</text>
-        <rect x={280} width={10} height={10} fill="#d1d5db" rx={2} opacity={0.5} />
-        <text x={294} y={9} fontSize={9} fill="#6b7280">{legendBase}</text>
+        <rect width={10} height={10} style={{ fill: "var(--line-strong)" }} rx={2} />
+        <text x={14} y={9} fontSize={9} style={{ fill: "var(--ink-muted)" }}>{legendNormal}</text>
+        <rect x={110} width={10} height={10} style={{ fill: crowdColor(0.65, "light") }} rx={2} />
+        <text x={124} y={9} fontSize={9} style={{ fill: "var(--ink-muted)" }}>{legendHoliday}</text>
+        <rect x={280} width={10} height={10} style={{ fill: "var(--ink-faint)" }} rx={2} opacity={0.5} />
+        <text x={294} y={9} fontSize={9} style={{ fill: "var(--ink-muted)" }}>{legendBase}</text>
       </g>
     </svg>
   );
@@ -178,25 +173,25 @@ export default async function HolidayBoostPage() {
   return (
     <FeaturePageShell slug="holiday-boost">
       {/* How it works */}
-      <h2 className="text-xl font-bold text-gray-900">{t("howTitle")}</h2>
-      <p className="mt-2 text-sm text-gray-600">{t("howText")}</p>
+      <h2 className="font-display text-2xl text-ink">{t("howTitle")}</h2>
+      <p className="mt-2 text-sm leading-relaxed text-ink-muted">{t("howText")}</p>
 
       {/* Multiplier visual */}
       <div className="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
-        <div className="rounded-lg border border-gray-200 bg-white px-6 py-4 text-center">
-          <p className="text-3xl font-bold text-gray-400">1.0x</p>
-          <p className="mt-1 text-xs text-gray-500">{t("normalWeek")}</p>
+        <div className="rounded-[4px] border border-line bg-surface-raised px-6 py-4 text-center">
+          <p className="font-display text-3xl text-ink-faint">1.0x</p>
+          <p className="mt-1 font-mono text-[10px] uppercase tracking-widest text-ink-faint">{t("normalWeek")}</p>
         </div>
-        <div className="text-2xl text-gray-300">&rarr;</div>
-        <div className="rounded-lg border-2 border-orange-300 bg-orange-50 px-6 py-4 text-center">
-          <p className="text-3xl font-bold text-orange-600">1.5x</p>
-          <p className="mt-1 text-xs text-orange-700">{t("holidayWeek")}</p>
+        <div aria-hidden className="text-2xl text-ink-faint">&rarr;</div>
+        <div className="rounded-[4px] border border-accent bg-accent/10 px-6 py-4 text-center">
+          <p className="font-display text-3xl text-accent">1.5x</p>
+          <p className="mt-1 font-mono text-[10px] uppercase tracking-widest text-accent">{t("holidayWeek")}</p>
         </div>
       </div>
 
       {/* Chart */}
-      <div className="mt-10 overflow-hidden rounded-xl border border-gray-200 bg-gray-50 p-4 sm:p-6">
-        <h3 className="mb-2 text-sm font-semibold text-gray-700">
+      <div className="mt-10 overflow-hidden rounded-[4px] border border-line bg-surface-sunken p-4 sm:p-6">
+        <h3 className="mb-2 font-mono text-[11px] font-medium uppercase tracking-widest text-accent">
           {t("chartTitle")}
         </h3>
         <BoostChart
@@ -208,28 +203,28 @@ export default async function HolidayBoostPage() {
       </div>
 
       {/* Key Insight */}
-      <div className="mt-10 rounded-r-lg border-l-4 border-orange-500 bg-orange-50 p-4">
-        <p className="text-sm font-semibold text-orange-900">{s("keyInsight")}</p>
-        <p className="mt-1 text-sm text-orange-800">{t("insightText")}</p>
+      <div className="mt-10 border-l-2 border-dotted border-accent/50 pl-4">
+        <p className="font-mono text-[11px] font-medium uppercase tracking-widest text-accent">{s("keyInsight")}</p>
+        <p className="mt-2 text-sm leading-relaxed text-ink-muted">{t("insightText")}</p>
       </div>
 
       {/* Regional staggering */}
-      <h2 className="mt-12 text-xl font-bold text-gray-900">
+      <h2 className="mt-12 font-display text-2xl text-ink">
         {t("staggeringTitle")}
       </h2>
-      <p className="mt-2 text-sm text-gray-600">{t("staggeringText")}</p>
+      <p className="mt-2 text-sm leading-relaxed text-ink-muted">{t("staggeringText")}</p>
 
-      <div className="mt-6 space-y-2">
+      <div className="mt-6 divide-y divide-line border-y border-line">
         {(["Bavaria", "NRW", "England", "IleDeFrance", "NSW"] as const).map((key) => (
           <div
             key={key}
-            className="flex items-center gap-3 rounded-lg border border-gray-100 bg-white px-4 py-2 text-sm"
+            className="flex items-center gap-3 py-2.5 text-sm"
           >
-            <span className="w-36 shrink-0 font-medium text-gray-900">
+            <span className="w-36 shrink-0 font-medium text-ink">
               {t(`region${key}`)}
             </span>
-            <span className="text-gray-600">{t(`dates${key}`)}</span>
-            <span className="ml-auto text-xs text-gray-400">
+            <span className="text-ink-muted">{t(`dates${key}`)}</span>
+            <span className="ml-auto font-mono text-xs text-ink-faint">
               {t(`timing${key}`)}
             </span>
           </div>
diff --git a/src/app/(marketing)/features/holiday-providers/page.tsx b/src/app/(marketing)/features/holiday-providers/page.tsx
index b2f8903..a9911cb 100644
--- a/src/app/(marketing)/features/holiday-providers/page.tsx
+++ b/src/app/(marketing)/features/holiday-providers/page.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { getTranslations } from "next-intl/server";
 import { FeaturePageShell } from "@/components/features/FeaturePageShell";
+import { crowdColor } from "@/lib/crowd-palette";
 
 export const metadata: Metadata = {
   title: "Multi-Provider Holidays — PackedPlaces.com",
@@ -12,10 +13,7 @@ const PROVIDERS = [
   {
     tier: 1,
     nameKey: "manualName" as const,
-    color: "#2563eb",
-    bg: "bg-blue-50",
-    border: "border-blue-200",
-    text: "text-blue-900",
+    color: "var(--accent-2)",
     regions: 20,
     accuracyKey: "highest" as const,
     descKey: "manualDesc" as const,
@@ -24,10 +22,7 @@ const PROVIDERS = [
   {
     tier: 2,
     nameKey: "apiName" as const,
-    color: "#8b5cf6",
-    bg: "bg-purple-50",
-    border: "border-purple-200",
-    text: "text-purple-900",
+    color: "var(--accent)",
     regions: 55,
     accuracyKey: "high" as const,
     descKey: "apiDesc" as const,
@@ -36,10 +31,7 @@ const PROVIDERS = [
   {
     tier: 3,
     nameKey: "libraryName" as const,
-    color: "#f59e0b",
-    bg: "bg-amber-50",
-    border: "border-amber-200",
-    text: "text-amber-900",
+    color: crowdColor(0.3, "light"),
     regions: 52,
     accuracyKey: "good" as const,
     descKey: "libraryDesc" as const,
@@ -69,7 +61,7 @@ function CascadeDiagram() {
         return (
           <g key={p.tier}>
             {/* Tier label */}
-            <text x={0} y={y + 18} fontSize={10} fill="#6b7280">
+            <text x={0} y={y + 18} fontSize={10} style={{ fill: "var(--ink-faint)" }}>
               Tier {p.tier}
             </text>
 
@@ -79,9 +71,9 @@ function CascadeDiagram() {
               y={y}
               width={w}
               height={36}
-              fill={p.color}
+              style={{ fill: p.color }}
               opacity={0.15}
-              rx={6}
+              rx={4}
             />
             <rect
               x={130}
@@ -95,9 +87,9 @@ function CascadeDiagram() {
                 barMax
               }
               height={36}
-              fill={p.color}
+              style={{ fill: p.color }}
               opacity={0.05}
-              rx={i === 0 ? 6 : 0}
+              rx={i === 0 ? 4 : 0}
             />
             {/* New portion highlighted */}
             <rect
@@ -113,13 +105,13 @@ function CascadeDiagram() {
               y={y}
               width={(p.regions / total) * barMax}
               height={36}
-              fill={p.color}
+              style={{ fill: p.color }}
               opacity={0.3}
               rx={
                 i === 0
-                  ? 6
+                  ? 4
                   : i === PROVIDERS.length - 1
-                    ? 6
+                    ? 4
                     : 0
               }
             />
@@ -129,12 +121,12 @@ function CascadeDiagram() {
               x={140}
               y={y + 16}
               fontSize={11}
-              fill="#1f2937"
+              style={{ fill: "var(--ink)" }}
               fontWeight={600}
             >
               Tier {p.tier}
             </text>
-            <text x={140} y={y + 30} fontSize={9} fill="#6b7280">
+            <text x={140} y={y + 30} fontSize={9} style={{ fill: "var(--ink-muted)" }}>
               +{p.regions} regions ({cumulative} total)
             </text>
 
@@ -143,7 +135,7 @@ function CascadeDiagram() {
               x={130 + w + 8}
               y={y + 22}
               fontSize={10}
-              fill={p.color}
+              style={{ fill: p.color }}
               fontWeight={600}
             >
               {Math.round((cumulative / total) * 100)}%
@@ -155,7 +147,7 @@ function CascadeDiagram() {
                 x={60}
                 y={y + 50}
                 fontSize={14}
-                fill="#d1d5db"
+                style={{ fill: "var(--line-strong)" }}
                 textAnchor="middle"
               >
                 &#8595;
@@ -175,15 +167,15 @@ export default async function HolidayProvidersPage() {
   return (
     <FeaturePageShell slug="holiday-providers">
       {/* Provider cascade */}
-      <h2 className="text-xl font-bold text-gray-900">
+      <h2 className="font-display text-2xl text-ink">
         {t("tiersTitle")}
       </h2>
-      <p className="mt-2 text-sm text-gray-600">
+      <p className="mt-2 text-sm leading-relaxed text-ink-muted">
         {t("tiersText")}
       </p>
 
       {/* Cascade diagram */}
-      <div className="mt-8 overflow-hidden rounded-xl border border-gray-200 bg-gray-50 p-4 sm:p-6">
+      <div className="mt-8 overflow-hidden rounded-[4px] border border-line bg-surface-sunken p-4 sm:p-6">
         <CascadeDiagram />
       </div>
 
@@ -192,60 +184,62 @@ export default async function HolidayProvidersPage() {
         {PROVIDERS.map((p) => (
           <div
             key={p.tier}
-            className={`rounded-xl border ${p.border} ${p.bg} p-5`}
+            className="rounded-[4px] border border-line bg-surface-raised p-5"
           >
             <div className="flex items-center gap-3">
               <span
-                className="flex h-7 w-7 items-center justify-center rounded-full text-xs font-bold text-white"
+                aria-hidden
+                className="h-2.5 w-2.5 shrink-0 rounded-full"
                 style={{ backgroundColor: p.color }}
-              >
-                {p.tier}
+              />
+              <span className="font-mono text-xs tracking-widest text-accent">
+                0{p.tier}
               </span>
-              <h3 className={`text-base font-semibold ${p.text}`}>{t(p.nameKey)}</h3>
-              <span className="ml-auto text-sm font-medium text-gray-500">
+              <h3 className="font-display text-base text-ink">{t(p.nameKey)}</h3>
+              <span className="ml-auto font-mono text-xs text-ink-faint">
                 {p.regions} {t("regions")}
               </span>
             </div>
-            <p className="mt-3 text-sm text-gray-700">{t(p.descKey)}</p>
-            <p className="mt-2 text-xs text-gray-500">
-              <span className="font-medium">{t("examples")}:</span> {p.examples}
+            <p className="mt-3 text-sm leading-relaxed text-ink-muted">{t(p.descKey)}</p>
+            <p className="mt-2 text-xs text-ink-faint">
+              <span className="font-medium text-ink-muted">{t("examples")}:</span> {p.examples}
             </p>
           </div>
         ))}
       </div>
 
       {/* Key Insight */}
-      <div className="mt-10 rounded-r-lg border-l-4 border-purple-500 bg-purple-50 p-4">
-        <p className="text-sm font-semibold text-purple-900">{s("keyInsight")}</p>
-        <p className="mt-1 text-sm text-purple-800">
+      <div className="mt-10 border-l-2 border-dotted border-accent/50 pl-4">
+        <p className="font-mono text-[11px] font-medium uppercase tracking-widest text-accent">{s("keyInsight")}</p>
+        <p className="mt-2 text-sm leading-relaxed text-ink-muted">
           {t("insightText")}
         </p>
       </div>
 
       {/* Why school holidays matter */}
-      <h2 className="mt-12 text-xl font-bold text-gray-900">
+      <h2 className="mt-12 font-display text-2xl text-ink">
         {t("whyTitle")}
       </h2>
-      <p className="mt-2 text-sm text-gray-600">
+      <p className="mt-2 text-sm leading-relaxed text-ink-muted">
         {t("whyText")}
       </p>
 
-      <div className="mt-6 grid gap-4 sm:grid-cols-3">
-        <div className="rounded-lg border border-gray-200 bg-white p-4 text-center">
-          <p className="text-2xl font-bold text-gray-900">127</p>
-          <p className="mt-1 text-xs text-gray-500">
+      <div className="mt-6 grid gap-px overflow-hidden rounded-[4px] border border-line bg-line sm:grid-cols-3">
+        <div className="bg-surface-raised p-5 text-center">
+          <p className="font-display text-3xl text-ink">127</p>
+          <p className="mt-2 font-mono text-[10px] uppercase tracking-widest text-ink-faint">
             {t("statRegions")}
           </p>
         </div>
-        <div className="rounded-lg border border-gray-200 bg-white p-4 text-center">
-          <p className="text-2xl font-bold text-gray-900">6–12</p>
-          <p className="mt-1 text-xs text-gray-500">
+        <div className="bg-surface-raised p-5 text-center">
+          <p className="font-display text-3xl text-ink">6–12</p>
+          <p className="mt-2 font-mono text-[10px] uppercase tracking-widest text-ink-faint">
             {t("statWeeks")}
           </p>
         </div>
-        <div className="rounded-lg border border-gray-200 bg-white p-4 text-center">
-          <p className="text-2xl font-bold text-gray-900">1.5x</p>
-          <p className="mt-1 text-xs text-gray-500">
+        <div className="bg-surface-raised p-5 text-center">
+          <p className="font-display text-3xl text-ink">1.5x</p>
+          <p className="mt-2 font-mono text-[10px] uppercase tracking-widest text-ink-faint">
             {t("statMultiplier")}
           </p>
         </div>
diff --git a/src/app/(marketing)/features/seasonality/page.tsx b/src/app/(marketing)/features/seasonality/page.tsx
index c483145..9e8c0fe 100644
--- a/src/app/(marketing)/features/seasonality/page.tsx
+++ b/src/app/(marketing)/features/seasonality/page.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { getTranslations } from "next-intl/server";
 import { FeaturePageShell } from "@/components/features/FeaturePageShell";
+import { crowdColor } from "@/lib/crowd-palette";
 
 export const metadata: Metadata = {
   title: "Weather-Aware Seasonality — PackedPlaces.com",
@@ -13,19 +14,19 @@ const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "
 const DESTINATIONS = [
   {
     name: "Bali",
-    color: "#14b8a6",
+    color: "var(--accent-2)",
     label: "Tropical — dry season Apr–Oct",
     data: [0.05, 0.05, 0.25, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 0.25, 0.05],
   },
   {
     name: "Innsbruck",
-    color: "#3b82f6",
+    color: "var(--accent)",
     label: "Ski — peaks Dec–Mar",
     data: [1.0, 1.0, 1.0, 0.25, 0.05, 0.05, 0.05, 0.05, 0.05, 0.05, 0.25, 1.0],
   },
   {
     name: "Barcelona",
-    color: "#f59e0b",
+    color: crowdColor(0.3, "light"),
     label: "Beach — peaks May–Sep",
     data: [0.05, 0.05, 0.05, 0.25, 1.0, 1.0, 1.0, 1.0, 1.0, 0.25, 0.05, 0.05],
   },
@@ -51,7 +52,7 @@ function SeasonalityChart() {
           x2={CL + CW}
           y1={CT + CH * (1 - v)}
           y2={CT + CH * (1 - v)}
-          stroke="#e5e7eb"
+          style={{ stroke: "var(--line)" }}
           strokeWidth={0.5}
         />
       ))}
@@ -63,7 +64,7 @@ function SeasonalityChart() {
           x={CL - 6}
           y={CT + CH * (1 - v / 100) + 3.5}
           fontSize={9}
-          fill="#9ca3af"
+          style={{ fill: "var(--ink-faint)" }}
           textAnchor="end"
         >
           {v}%
@@ -86,7 +87,7 @@ function SeasonalityChart() {
                   y={y}
                   width={BW}
                   height={barH}
-                  fill={dest.color}
+                  style={{ fill: dest.color }}
                   rx={2}
                   opacity={dest.data[mi] < 0.1 ? 0.3 : 1}
                 />
@@ -96,7 +97,7 @@ function SeasonalityChart() {
               x={CL + mi * MW + MW / 2}
               y={CT + CH + 16}
               fontSize={10}
-              fill="#6b7280"
+              style={{ fill: "var(--ink-faint)" }}
               textAnchor="middle"
             >
               {month}
@@ -108,8 +109,8 @@ function SeasonalityChart() {
       {/* Legend */}
       {DESTINATIONS.map((dest, i) => (
         <g key={i} transform={`translate(${CL + i * 170}, ${CT + CH + 38})`}>
-          <rect width={12} height={12} fill={dest.color} rx={2} />
-          <text x={16} y={10} fontSize={11} fill="#374151">
+          <rect width={12} height={12} style={{ fill: dest.color }} rx={2} />
+          <text x={16} y={10} fontSize={11} style={{ fill: "var(--ink-muted)" }}>
             {dest.name}
           </text>
         </g>
@@ -125,71 +126,71 @@ export default async function SeasonalityPage() {
   return (
     <FeaturePageShell slug="seasonality">
       {/* The Concept */}
-      <h2 className="text-xl font-bold text-gray-900">
+      <h2 className="font-display text-2xl text-ink">
         {t("demandTitle")}
       </h2>
-      <p className="mt-2 text-sm text-gray-600">
+      <p className="mt-2 text-sm leading-relaxed text-ink-muted">
         {t("demandText")}
       </p>
 
       {/* Chart */}
-      <div className="mt-8 overflow-hidden rounded-xl border border-gray-200 bg-gray-50 p-4 sm:p-6">
-        <h3 className="mb-2 text-sm font-semibold text-gray-700">
+      <div className="mt-8 overflow-hidden rounded-[4px] border border-line bg-surface-sunken p-4 sm:p-6">
+        <h3 className="mb-2 font-mono text-[11px] font-medium uppercase tracking-widest text-accent">
           {t("chartTitle")}
         </h3>
         <SeasonalityChart />
       </div>
 
       {/* Attractiveness Model */}
-      <h2 className="mt-12 text-xl font-bold text-gray-900">
+      <h2 className="mt-12 font-display text-2xl text-ink">
         {t("modelTitle")}
       </h2>
-      <p className="mt-2 text-sm text-gray-600">
+      <p className="mt-2 text-sm leading-relaxed text-ink-muted">
         {t("modelText")}
       </p>
-      <div className="mt-6 grid gap-4 sm:grid-cols-3">
-        <div className="rounded-lg border border-gray-200 bg-white p-4 text-center">
-          <p className="text-2xl font-bold text-gray-900">100%</p>
-          <p className="mt-1 text-xs font-medium uppercase tracking-wide text-gray-500">
+      <div className="mt-6 grid gap-px overflow-hidden rounded-[4px] border border-line bg-line sm:grid-cols-3">
+        <div className="bg-surface-raised p-5 text-center">
+          <p className="font-display text-3xl text-ink">100%</p>
+          <p className="mt-2 font-mono text-[10px] uppercase tracking-widest text-ink-faint">
             {t("peakMonths")}
           </p>
-          <p className="mt-2 text-sm text-gray-600">
+          <p className="mt-2 text-sm leading-relaxed text-ink-muted">
             {t("peakMonthsDesc")}
           </p>
         </div>
-        <div className="rounded-lg border border-gray-200 bg-white p-4 text-center">
-          <p className="text-2xl font-bold text-gray-900">25%</p>
-          <p className="mt-1 text-xs font-medium uppercase tracking-wide text-gray-500">
+        <div className="bg-surface-raised p-5 text-center">
+          <p className="font-display text-3xl text-ink">25%</p>
+          <p className="mt-2 font-mono text-[10px] uppercase tracking-widest text-ink-faint">
             {t("shoulderMonths")}
           </p>
-          <p className="mt-2 text-sm text-gray-600">
+          <p className="mt-2 text-sm leading-relaxed text-ink-muted">
             {t("shoulderMonthsDesc")}
           </p>
         </div>
-        <div className="rounded-lg border border-gray-200 bg-white p-4 text-center">
-          <p className="text-2xl font-bold text-gray-900">5%</p>
-          <p className="mt-1 text-xs font-medium uppercase tracking-wide text-gray-500">
+        <div className="bg-surface-raised p-5 text-center">
+          <p className="font-display text-3xl text-ink">5%</p>
+          <p className="mt-2 font-mono text-[10px] uppercase tracking-widest text-ink-faint">
             {t("offSeason")}
           </p>
-          <p className="mt-2 text-sm text-gray-600">
+          <p className="mt-2 text-sm leading-relaxed text-ink-muted">
             {t("offSeasonDesc")}
           </p>
         </div>
       </div>
 
       {/* Key Insight */}
-      <div className="mt-10 rounded-r-lg border-l-4 border-teal-500 bg-teal-50 p-4">
-        <p className="text-sm font-semibold text-teal-900">{s("keyInsight")}</p>
-        <p className="mt-1 text-sm text-teal-800">
+      <div className="mt-10 border-l-2 border-dotted border-accent/50 pl-4">
+        <p className="font-mono text-[11px] font-medium uppercase tracking-widest text-accent">{s("keyInsight")}</p>
+        <p className="mt-2 text-sm leading-relaxed text-ink-muted">
           {t("insightText")}
         </p>
       </div>
 
       {/* Real-world examples */}
-      <h2 className="mt-12 text-xl font-bold text-gray-900">
+      <h2 className="mt-12 font-display text-2xl text-ink">
         {t("patternsTitle")}
       </h2>
-      <div className="mt-4 space-y-3">
+      <div className="mt-4 divide-y divide-line border-y border-line">
         {([
           { pattern: t("monsoon"), desc: t("monsoonDesc") },
           { pattern: t("extremeHeat"), desc: t("extremeHeatDesc") },
@@ -197,11 +198,11 @@ export default async function SeasonalityPage() {
           { pattern: t("cyclone"), desc: t("cycloneDesc") },
           { pattern: t("polarWinters"), desc: t("polarWintersDesc") },
         ] as const).map((item) => (
-          <div key={item.pattern} className="flex gap-3 text-sm">
-            <span className="w-40 shrink-0 font-medium text-gray-900">
+          <div key={item.pattern} className="flex gap-3 py-3 text-sm">
+            <span className="w-40 shrink-0 font-medium text-ink">
               {item.pattern}
             </span>
-            <span className="text-gray-600">{item.desc}</span>
+            <span className="leading-relaxed text-ink-muted">{item.desc}</span>
           </div>
         ))}
       </div>
diff --git a/src/app/(marketing)/features/timeline/page.tsx b/src/app/(marketing)/features/timeline/page.tsx
index dcf4eed..68e9622 100644
--- a/src/app/(marketing)/features/timeline/page.tsx
+++ b/src/app/(marketing)/features/timeline/page.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { getTranslations } from "next-intl/server";
 import { FeaturePageShell } from "@/components/features/FeaturePageShell";
+import { crowdColor } from "@/lib/crowd-palette";
 
 export const metadata: Metadata = {
   title: "Week-by-Week Timeline — PackedPlaces.com",
@@ -45,15 +46,6 @@ const DESTINATIONS = [
   },
 ];
 
-function scoreToColor(score: number): string {
-  if (score < 20) return "#22c55e";
-  if (score < 40) return "#86efac";
-  if (score < 55) return "#facc15";
-  if (score < 70) return "#fb923c";
-  if (score < 85) return "#f97316";
-  return "#dc2626";
-}
-
 function HeatmapStrips() {
   const stripH = 28;
   const labelW = 90;
@@ -74,7 +66,7 @@ function HeatmapStrips() {
           x={labelW + MONTH_STARTS[i] * cellW + (cellW * 4) / 2}
           y={10}
           fontSize={9}
-          fill="#9ca3af"
+          style={{ fill: "var(--ink-faint)" }}
           textAnchor="middle"
         >
           {month}
@@ -90,7 +82,7 @@ function HeatmapStrips() {
               x={0}
               y={y + stripH / 2 + 4}
               fontSize={11}
-              fill="#374151"
+              style={{ fill: "var(--ink)" }}
               fontWeight={500}
             >
               {dest.name}
@@ -99,7 +91,7 @@ function HeatmapStrips() {
               x={0}
               y={y + stripH / 2 + 16}
               fontSize={8}
-              fill="#9ca3af"
+              style={{ fill: "var(--ink-faint)" }}
             >
               {dest.category}
             </text>
@@ -110,7 +102,7 @@ function HeatmapStrips() {
                 y={y}
                 width={cellW + 0.5}
                 height={stripH}
-                fill={scoreToColor(score)}
+                fill={crowdColor(score / 100, "light")}
                 rx={wi === 0 ? 3 : wi === 51 ? 3 : 0}
               />
             ))}
@@ -122,17 +114,17 @@ function HeatmapStrips() {
       {(() => {
         const ly = totalH - 16;
         const steps = [
-          { label: "Quiet", color: "#22c55e" },
-          { label: "Moderate", color: "#facc15" },
-          { label: "Busy", color: "#fb923c" },
-          { label: "Packed", color: "#dc2626" },
+          { label: "Quiet", color: crowdColor(0.1, "light") },
+          { label: "Moderate", color: crowdColor(0.35, "light") },
+          { label: "Busy", color: crowdColor(0.6, "light") },
+          { label: "Packed", color: crowdColor(0.9, "light") },
         ];
         return (
           <g transform={`translate(${labelW}, ${ly})`}>
             {steps.map((s, i) => (
               <g key={s.label} transform={`translate(${i * 95}, 0)`}>
                 <rect width={10} height={10} fill={s.color} rx={2} />
-                <text x={14} y={9} fontSize={9} fill="#6b7280">
+                <text x={14} y={9} fontSize={9} style={{ fill: "var(--ink-muted)" }}>
                   {s.label}
                 </text>
               </g>
@@ -151,77 +143,77 @@ export default async function TimelinePage() {
   return (
     <FeaturePageShell slug="timeline">
       {/* How it works */}
-      <h2 className="text-xl font-bold text-gray-900">
+      <h2 className="font-display text-2xl text-ink">
         {t("snapshotsTitle")}
       </h2>
-      <p className="mt-2 text-sm text-gray-600">
+      <p className="mt-2 text-sm leading-relaxed text-ink-muted">
         {t("snapshotsText")}
       </p>
 
       {/* Heatmap */}
-      <div className="mt-8 overflow-hidden rounded-xl border border-gray-200 bg-gray-50 p-4 sm:p-6">
-        <h3 className="mb-3 text-sm font-semibold text-gray-700">
+      <div className="mt-8 overflow-hidden rounded-[4px] border border-line bg-surface-sunken p-4 sm:p-6">
+        <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-widest text-accent">
           {t("chartTitle")}
         </h3>
         <HeatmapStrips />
       </div>
 
       {/* Pattern highlights */}
-      <h2 className="mt-12 text-xl font-bold text-gray-900">
+      <h2 className="mt-12 font-display text-2xl text-ink">
         {t("patternsTitle")}
       </h2>
-      <div className="mt-4 grid gap-4 sm:grid-cols-3">
-        <div className="rounded-lg border border-gray-200 bg-white p-4">
-          <h3 className="text-sm font-semibold text-gray-900">
+      <div className="mt-4 grid gap-px overflow-hidden rounded-[4px] border border-line bg-line sm:grid-cols-3">
+        <div className="bg-surface-raised p-4">
+          <h3 className="font-display text-base text-ink">
             {t("baliTitle")}
           </h3>
-          <p className="mt-2 text-xs text-gray-600">
+          <p className="mt-2 text-xs leading-relaxed text-ink-muted">
             {t("baliText")}
           </p>
         </div>
-        <div className="rounded-lg border border-gray-200 bg-white p-4">
-          <h3 className="text-sm font-semibold text-gray-900">
+        <div className="bg-surface-raised p-4">
+          <h3 className="font-display text-base text-ink">
             {t("innsbruckTitle")}
           </h3>
-          <p className="mt-2 text-xs text-gray-600">
+          <p className="mt-2 text-xs leading-relaxed text-ink-muted">
             {t("innsbruckText")}
           </p>
         </div>
-        <div className="rounded-lg border border-gray-200 bg-white p-4">
-          <h3 className="text-sm font-semibold text-gray-900">
+        <div className="bg-surface-raised p-4">
+          <h3 className="font-display text-base text-ink">
             {t("barcelonaTitle")}
           </h3>
-          <p className="mt-2 text-xs text-gray-600">
+          <p className="mt-2 text-xs leading-relaxed text-ink-muted">
             {t("barcelonaText")}
           </p>
         </div>
       </div>
 
       {/* Key Insight */}
-      <div className="mt-10 rounded-r-lg border-l-4 border-purple-500 bg-purple-50 p-4">
-        <p className="text-sm font-semibold text-purple-900">{s("keyInsight")}</p>
-        <p className="mt-1 text-sm text-purple-800">
+      <div className="mt-10 border-l-2 border-dotted border-accent/50 pl-4">
+        <p className="font-mono text-[11px] font-medium uppercase tracking-widest text-accent">{s("keyInsight")}</p>
+        <p className="mt-2 text-sm leading-relaxed text-ink-muted">
           {t("insightText")}
         </p>
       </div>
 
       {/* Interactive features */}
-      <h2 className="mt-12 text-xl font-bold text-gray-900">
+      <h2 className="mt-12 font-display text-2xl text-ink">
         {t("controlsTitle")}
       </h2>
-      <p className="mt-2 text-sm text-gray-600">
+      <p className="mt-2 text-sm leading-relaxed text-ink-muted">
         {t("controlsText")}
       </p>
-      <div className="mt-4 grid gap-4 sm:grid-cols-2">
-        <div className="rounded-lg border border-gray-200 bg-white p-4">
-          <p className="text-sm font-semibold text-gray-900">{t("scrub")}</p>
-          <p className="mt-1 text-xs text-gray-600">
+      <div className="mt-4 grid gap-px overflow-hidden rounded-[4px] border border-line bg-line sm:grid-cols-2">
+        <div className="bg-surface-raised p-4">
+          <p className="font-display text-base text-ink">{t("scrub")}</p>
+          <p className="mt-1 text-xs leading-relaxed text-ink-muted">
             {t("scrubText")}
           </p>
         </div>
-        <div className="rounded-lg border border-gray-200 bg-white p-4">
-          <p className="text-sm font-semibold text-gray-900">{t("animate")}</p>
-          <p className="mt-1 text-xs text-gray-600">
+        <div className="bg-surface-raised p-4">
+          <p className="font-display text-base text-ink">{t("animate")}</p>
+          <p className="mt-1 text-xs leading-relaxed text-ink-muted">
             {t("animateText")}
           </p>
         </div>
diff --git a/src/app/(marketing)/page.tsx b/src/app/(marketing)/page.tsx
index 7839865..542553f 100644
--- a/src/app/(marketing)/page.tsx
+++ b/src/app/(marketing)/page.tsx
@@ -1,10 +1,20 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { getTranslations } from "next-intl/server";
+import { getLocale, getTranslations } from "next-intl/server";
 import { JsonLd } from "@/components/seo/JsonLd";
 import { HeroDestinationSearch } from "@/components/HeroDestinationSearch";
 import { SiteHeader } from "@/components/SiteHeader";
 import { SiteFooter } from "@/components/SiteFooter";
+import { SectionHeading } from "@/components/ui/SectionHeading";
+import { Button } from "@/components/ui/Button";
+import { Chip } from "@/components/ui/Chip";
+import { RouteArc } from "@/components/ui/Ornaments";
+import { CrowdCurve } from "@/components/ui/CrowdCurve";
+import { destinations } from "@/lib/data/destinations";
+import { localizedDestinationName } from "@/lib/destinations";
+import { getWeeklyBusyness } from "@/lib/services/destination-busyness";
+import { getShortMonthNames } from "@/lib/week-dates";
+import type { Locale } from "@/i18n/config";
 
 const webAppJsonLd = {
   "@context": "https://schema.org",
@@ -14,7 +24,7 @@ const webAppJsonLd = {
   applicationCategory: "TravelApplication",
   operatingSystem: "Web",
   description:
-    "See how crowded travel destinations really get, week by week, powered by school holiday data from 75 countries.",
+    "See how crowded travel destinations really get, week by week, powered by school holiday data from 100+ countries.",
   inLanguage: ["en", "de", "es", "fr"],
 };
 
@@ -101,72 +111,100 @@ const HERO_STATS = [
 ] as const;
 
 const FEATURES = [
-  { href: "/features/crowdedness", titleKey: "features.crowdednessTitle", textKey: "features.crowdednessText", accent: "border-brand-400", learnColor: "text-brand-600" },
-  { href: "/features/seasonality", titleKey: "features.hemisphereTitle", textKey: "features.hemisphereText", accent: "border-sky-400", learnColor: "text-sky-600" },
-  { href: "/features/categories", titleKey: "features.categoriesTitle", textKey: "features.categoriesText", accent: "border-violet-400", learnColor: "text-violet-600" },
-  { href: "/features/holiday-boost", titleKey: "features.boostTitle", textKey: "features.boostText", accent: "border-sunset-400", learnColor: "text-sunset-600" },
-  { href: "/features/timeline", titleKey: "features.timelineTitle", textKey: "features.timelineText", accent: "border-blue-400", learnColor: "text-blue-600" },
-  { href: "/features/holiday-providers", titleKey: "features.providersTitle", textKey: "features.providersText", accent: "border-emerald-400", learnColor: "text-emerald-600" },
-  { href: "/features/events", titleKey: "features.eventsTitle", textKey: "features.eventsText", accent: "border-orange-400", learnColor: "text-orange-600" },
+  { href: "/features/crowdedness", titleKey: "features.crowdednessTitle", textKey: "features.crowdednessText" },
+  { href: "/features/seasonality", titleKey: "features.hemisphereTitle", textKey: "features.hemisphereText" },
+  { href: "/features/categories", titleKey: "features.categoriesTitle", textKey: "features.categoriesText" },
+  { href: "/features/holiday-boost", titleKey: "features.boostTitle", textKey: "features.boostText" },
+  { href: "/features/timeline", titleKey: "features.timelineTitle", textKey: "features.timelineText" },
+  { href: "/features/holiday-providers", titleKey: "features.providersTitle", textKey: "features.providersText" },
+  { href: "/features/events", titleKey: "features.eventsTitle", textKey: "features.eventsText" },
+] as const;
+
+const CAPACITY_ROWS = [
+  { key: "data.catCity", peak: "5.0", off: "4.0" },
+  { key: "data.catBeach", peak: "2.0", off: "0.5" },
+  { key: "data.catSki", peak: "1.5", off: "0.3" },
+  { key: "data.catIsland", peak: "1.0", off: "0.4" },
+  { key: "data.catSafari", peak: "0.8", off: "0.3" },
+  { key: "data.catDesert", peak: "0.5", off: "0.2" },
 ] as const;
 
 export default async function MarketingPage() {
   const t = await getTranslations();
+  const locale = (await getLocale()) as Locale;
+  const [headlineTop, ...headlineRest] = t("hero.headline").split("\n");
+
+  // Sample crowd curve for the best-time teaser (static model, no DB).
+  const sample =
+    destinations.find((d) => d.name === "Venice") ??
+    destinations.find((d) => d.name === "Hallstatt") ??
+    destinations[0];
+  const sampleWeekly = getWeeklyBusyness(sample.id).slice(0, 52);
 
   return (
     <>
       <JsonLd data={webAppJsonLd} />
       <SiteHeader />
 
-      {/* Hero */}
-      <section className="relative overflow-hidden bg-hero-gradient py-20">
-        <WorldMapDots className="pointer-events-none absolute inset-0 m-auto h-full w-full max-w-5xl text-brand-300 animate-pulse-dot" />
-        <div className="relative mx-auto max-w-6xl px-6 text-center">
-          <h1 className="animate-on-scroll whitespace-pre-line text-4xl font-bold tracking-tight text-gradient-hero sm:text-5xl lg:text-6xl">
-            {t("hero.headline")}
+      {/* Hero — asymmetric editorial split over a cartographic field */}
+      <section className="relative overflow-hidden bg-atlas-field">
+        <WorldMapDots className="pointer-events-none absolute -right-40 top-6 hidden w-[56rem] max-w-none text-accent-2/25 animate-pulse-dot md:block" />
+        <div className="relative mx-auto max-w-6xl px-4 pb-16 pt-14 sm:px-6 sm:pb-24 sm:pt-20">
+          <p className="animate-on-scroll font-mono text-[11px] uppercase tracking-[0.3em] text-accent sm:text-xs">
+            127 {t("hero.statRegions")} · 700+ {t("hero.statDestinations")} · 100+{" "}
+            {t("hero.statCountries")}
+          </p>
+          <h1 className="animate-on-scroll mt-5 max-w-3xl font-display text-4xl leading-[1.08] text-ink sm:text-5xl lg:text-6xl">
+            {headlineTop}
+            {headlineRest.length > 0 && (
+              <span className="block italic text-accent">{headlineRest.join(" ")}</span>
+            )}
           </h1>
-          <p className="animate-on-scroll-delay-1 mx-auto mt-6 max-w-2xl text-lg text-gray-600">
+          <p className="animate-on-scroll-delay-1 mt-6 max-w-xl text-base leading-relaxed text-ink-muted sm:text-lg">
             {t("hero.description")}
           </p>
-          <div className="animate-on-scroll-delay-2 mt-10">
+          <div className="animate-on-scroll-delay-2 mt-8 max-w-xl">
             <HeroDestinationSearch />
-            <p className="mt-4 text-sm text-gray-500">
+            <p className="mt-3 text-sm text-ink-faint">
               {t("hero.searchHint")}{" "}
               <Link
                 href="/map"
-                className="font-medium text-brand-600 underline-offset-2 hover:underline"
+                className="font-medium text-accent-2 underline decoration-dotted underline-offset-4 transition-colors hover:text-accent"
               >
                 {t("hero.cta")} &rarr;
               </Link>
             </p>
           </div>
-          <div className="mx-auto mt-16 grid max-w-4xl grid-cols-2 gap-8 sm:grid-cols-5">
-            {HERO_STATS.map((stat, i) => (
-              <div key={stat.key} className={`animate-on-scroll${i > 0 ? `-delay-${Math.min(i, 3)}` : ""}`}>
-                <p className="text-3xl font-bold text-brand-600">{stat.value}</p>
-                <p className="mt-1 text-sm text-gray-500">{t(stat.key)}</p>
+
+          {/* Stats strip — Fraunces numerals over mono labels, hairline separators */}
+          <div className="animate-on-scroll-delay-3 mt-14 grid grid-cols-2 gap-y-6 sm:flex sm:gap-0 sm:divide-x sm:divide-line">
+            {HERO_STATS.map((stat) => (
+              <div key={stat.key} className="sm:px-8 sm:first:pl-0">
+                <p className="font-display text-3xl text-ink">{stat.value}</p>
+                <p className="mt-1 font-mono text-[10px] uppercase tracking-widest text-ink-faint">
+                  {t(stat.key)}
+                </p>
               </div>
             ))}
           </div>
         </div>
       </section>
 
-      {/* How It Works */}
-      <section id="how-it-works" className="bg-section-warm py-20">
-        <div className="mx-auto max-w-6xl px-6">
-          <h2 className="animate-on-scroll text-center text-3xl font-bold text-gray-900">
-            {t("howItWorks.title")}
-          </h2>
-          <div className="mt-12 grid gap-8 md:grid-cols-2 lg:grid-cols-4">
+      {/* How It Works — hairline grid of numbered steps */}
+      <section id="how-it-works" className="border-y border-line bg-surface-sunken py-16 sm:py-24">
+        <div className="mx-auto max-w-6xl px-4 sm:px-6">
+          <SectionHeading eyebrow="№ 01" title={t("howItWorks.title")} className="animate-on-scroll" />
+          <div className="mt-10 grid gap-px overflow-hidden rounded-[4px] border border-line bg-line sm:grid-cols-2 lg:grid-cols-4">
             {([1, 2, 3, 4] as const).map((step) => (
-              <div key={step} className={`card-hover-lift animate-on-scroll-delay-${Math.min(step, 3)} rounded-xl border border-gray-100 bg-white p-6 shadow-sm`}>
-                <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-brand-100 text-lg font-bold text-brand-700">
-                  {step}
-                </div>
-                <h3 className="text-lg font-semibold text-gray-900">
+              <div
+                key={step}
+                className={`animate-on-scroll-delay-${Math.min(step, 3)} bg-surface-raised p-6`}
+              >
+                <p className="font-mono text-xs tracking-widest text-accent">0{step}</p>
+                <h3 className="mt-3 font-display text-lg text-ink">
                   {t(`howItWorks.step${step}Title`)}
                 </h3>
-                <p className="mt-2 text-sm text-gray-600">
+                <p className="mt-2 text-sm leading-relaxed text-ink-muted">
                   {t(`howItWorks.step${step}Text`)}
                 </p>
               </div>
@@ -175,112 +213,121 @@ export default async function MarketingPage() {
         </div>
       </section>
 
-      {/* Features */}
-      <section id="features" className="bg-white py-20">
-        <div className="mx-auto max-w-6xl px-6">
-          <h2 className="animate-on-scroll text-center text-3xl font-bold text-gray-900">
-            {t("features.title")}
-          </h2>
-          <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+      {/* Features — numbered editorial index */}
+      <section id="features" className="py-16 sm:py-24">
+        <div className="mx-auto max-w-6xl px-4 sm:px-6">
+          <SectionHeading eyebrow="№ 02" title={t("features.title")} className="animate-on-scroll" />
+          <div className="mt-8 grid gap-x-12 md:grid-cols-2">
             {FEATURES.map((feat, i) => (
               <Link
                 key={feat.href}
                 href={feat.href}
-                className={`card-hover-lift animate-on-scroll-delay-${Math.min(i + 1, 3)} block rounded-xl border-t-4 ${feat.accent} border border-gray-100 bg-white p-6 shadow-sm`}
+                className={`group flex gap-5 border-b border-line py-6 transition-colors hover:border-accent animate-on-scroll-delay-${Math.min(i % 4, 3)}`}
               >
-                <h3 className="text-base font-semibold text-gray-900">
-                  {t(feat.titleKey)}
-                </h3>
-                <p className="mt-2 text-sm text-gray-600">
-                  {t(feat.textKey)}
-                </p>
-                <p className={`mt-3 text-sm font-medium ${feat.learnColor}`}>{t("featurePages.shell.learnMore")} &rarr;</p>
+                <span className="pt-1 font-mono text-sm text-accent">
+                  {String(i + 1).padStart(2, "0")}
+                </span>
+                <span className="min-w-0 flex-1">
+                  <span className="flex items-baseline justify-between gap-3">
+                    <h3 className="font-display text-xl text-ink transition-colors group-hover:text-accent">
+                      {t(feat.titleKey)}
+                    </h3>
+                    <span
+                      aria-hidden
+                      className="text-ink-faint transition-all group-hover:translate-x-1 group-hover:text-accent"
+                    >
+                      &rarr;
+                    </span>
+                  </span>
+                  <p className="mt-2 text-sm leading-relaxed text-ink-muted">{t(feat.textKey)}</p>
+                </span>
               </Link>
             ))}
           </div>
         </div>
       </section>
 
+      {/* Best-time teaser */}
+      <section className="border-t border-line bg-surface py-16 sm:py-24">
+        <div className="mx-auto max-w-4xl px-4 sm:px-6">
+          <SectionHeading
+            eyebrow={`✦ ${t("bestTime.eyebrow")}`}
+            title={t("bestTime.title")}
+            lede={t("bestTime.lede")}
+            align="center"
+            className="animate-on-scroll"
+          />
+          <div className="animate-on-scroll-delay-1 mt-10 rounded-[4px] border border-line bg-surface-raised p-5 text-ink sm:p-6">
+            <CrowdCurve
+              series={[{ id: sample.id, values: sampleWeekly }]}
+              markMinMax
+              ariaLabel={t("bestTime.sampleCaption", { name: localizedDestinationName(sample, locale) })}
+              monthLabels={getShortMonthNames(locale)}
+              className="h-28"
+            />
+            <p className="mt-3 text-center font-mono text-[11px] uppercase tracking-wider text-ink-faint">
+              {t("bestTime.sampleCaption", { name: localizedDestinationName(sample, locale) })}
+            </p>
+          </div>
+          <div className="animate-on-scroll-delay-2 mt-8 text-center">
+            <Button href="/best-time" size="lg">
+              {t("bestTime.teaserCta")} &rarr;
+            </Button>
+          </div>
+        </div>
+      </section>
+
       {/* Data & Methodology */}
-      <section id="data" className="bg-section-cool py-20">
-        <div className="mx-auto max-w-6xl px-6">
-          <h2 className="animate-on-scroll text-center text-3xl font-bold text-gray-900">
-            {t("data.title")}
-          </h2>
-          <div className="mt-12 grid gap-12 md:grid-cols-2">
-            <div>
-              <h3 className="text-lg font-semibold text-gray-900">
-                {t("data.sourcesTitle")}
-              </h3>
-              <ul className="mt-4 space-y-3 text-sm text-gray-600">
-                <li className="flex gap-3">
-                  <span className="font-medium text-gray-900">{t("data.populationLabel")}</span>
-                  <span>{t("data.populationText")}</span>
-                </li>
-                <li className="flex gap-3">
-                  <span className="font-medium text-gray-900">{t("data.tourismLabel")}</span>
-                  <span>{t("data.tourismText")}</span>
-                </li>
-                <li className="flex gap-3">
-                  <span className="font-medium text-gray-900">{t("data.holidaysLabel")}</span>
-                  <span>{t("data.holidaysText")}</span>
-                </li>
-                <li className="flex gap-3">
-                  <span className="font-medium text-gray-900">{t("data.eventsLabel")}</span>
-                  <span>{t("data.eventsDataText")}</span>
-                </li>
-                <li className="flex gap-3">
-                  <span className="font-medium text-gray-900">{t("data.geographyLabel")}</span>
-                  <span>{t("data.geographyText")}</span>
-                </li>
+      <section id="data" className="border-y border-line bg-surface-sunken bg-map-grid py-16 sm:py-24">
+        <div className="mx-auto max-w-6xl px-4 sm:px-6">
+          <SectionHeading eyebrow="№ 03" title={t("data.title")} className="animate-on-scroll" />
+          <div className="mt-10 grid gap-12 md:grid-cols-2">
+            <div className="animate-on-scroll-delay-1">
+              <h3 className="font-display text-lg text-ink">{t("data.sourcesTitle")}</h3>
+              <ul className="mt-4 space-y-4 text-sm text-ink-muted">
+                {(
+                  [
+                    ["data.populationLabel", "data.populationText"],
+                    ["data.tourismLabel", "data.tourismText"],
+                    ["data.holidaysLabel", "data.holidaysText"],
+                    ["data.eventsLabel", "data.eventsDataText"],
+                    ["data.geographyLabel", "data.geographyText"],
+                  ] as const
+                ).map(([labelKey, textKey]) => (
+                  <li key={labelKey} className="border-l-2 border-dotted border-accent/50 pl-4">
+                    <span className="font-medium text-ink">{t(labelKey)}</span>{" "}
+                    <span className="leading-relaxed">{t(textKey)}</span>
+                  </li>
+                ))}
               </ul>
             </div>
-            <div>
-              <h3 className="text-lg font-semibold text-gray-900">
-                {t("data.capacityTitle")}
-              </h3>
-              <p className="mt-2 text-sm text-gray-600">
+            <div className="animate-on-scroll-delay-2">
+              <h3 className="font-display text-lg text-ink">{t("data.capacityTitle")}</h3>
+              <p className="mt-2 text-sm leading-relaxed text-ink-muted">
                 {t("data.capacityDescription")}
               </p>
               <table className="mt-4 w-full text-left text-sm">
                 <thead>
-                  <tr className="border-b border-gray-200">
-                    <th className="pb-2 font-medium text-brand-800">{t("data.colCategory")}</th>
-                    <th className="pb-2 font-medium text-brand-800">{t("data.colPeak")}</th>
-                    <th className="pb-2 font-medium text-brand-800">{t("data.colOffPeak")}</th>
+                  <tr className="border-b border-line-strong">
+                    <th className="pb-2 font-mono text-[11px] font-medium uppercase tracking-wider text-ink-muted">
+                      {t("data.colCategory")}
+                    </th>
+                    <th className="pb-2 font-mono text-[11px] font-medium uppercase tracking-wider text-ink-muted">
+                      {t("data.colPeak")}
+                    </th>
+                    <th className="pb-2 font-mono text-[11px] font-medium uppercase tracking-wider text-ink-muted">
+                      {t("data.colOffPeak")}
+                    </th>
                   </tr>
                 </thead>
-                <tbody className="text-gray-600">
-                  <tr className="border-b border-gray-100">
-                    <td className="py-2">{t("data.catCity")}</td>
-                    <td>5.0</td>
-                    <td>4.0</td>
-                  </tr>
-                  <tr className="border-b border-gray-100">
-                    <td className="py-2">{t("data.catBeach")}</td>
-                    <td>2.0</td>
-                    <td>0.5</td>
-                  </tr>
-                  <tr className="border-b border-gray-100">
-                    <td className="py-2">{t("data.catSki")}</td>
-                    <td>1.5</td>
-                    <td>0.3</td>
-                  </tr>
-                  <tr className="border-b border-gray-100">
-                    <td className="py-2">{t("data.catIsland")}</td>
-                    <td>1.0</td>
-                    <td>0.4</td>
-                  </tr>
-                  <tr className="border-b border-gray-100">
-                    <td className="py-2">{t("data.catSafari")}</td>
-                    <td>0.8</td>
-                    <td>0.3</td>
-                  </tr>
-                  <tr>
-                    <td className="py-2">{t("data.catDesert")}</td>
-                    <td>0.5</td>
-                    <td>0.2</td>
-                  </tr>
+                <tbody className="text-ink-muted">
+                  {CAPACITY_ROWS.map((row) => (
+                    <tr key={row.key} className="border-b border-line last:border-b-0">
+                      <td className="py-2 text-ink">{t(row.key)}</td>
+                      <td className="font-mono">{row.peak}</td>
+                      <td className="font-mono">{row.off}</td>
+                    </tr>
+                  ))}
                 </tbody>
               </table>
             </div>
@@ -289,13 +336,16 @@ export default async function MarketingPage() {
       </section>
 
       {/* Open Source */}
-      <section id="open-source" className="relative overflow-hidden bg-hero-gradient py-20">
-        <WorldMapDots className="pointer-events-none absolute inset-0 m-auto h-full w-full max-w-4xl text-brand-300 animate-pulse-dot" />
-        <div className="relative mx-auto max-w-6xl px-6 text-center">
-          <h2 className="animate-on-scroll text-3xl font-bold text-gray-900">{t("openSource.title")}</h2>
-          <p className="animate-on-scroll-delay-1 mx-auto mt-4 max-w-2xl text-gray-600">
-            {t("openSource.description")}
-          </p>
+      <section id="open-source" className="relative overflow-hidden bg-atlas-field py-16 sm:py-24">
+        <div className="relative mx-auto max-w-6xl px-4 text-center sm:px-6">
+          <RouteArc className="mx-auto h-12 w-56 text-accent/60 animate-on-scroll" />
+          <SectionHeading
+            eyebrow="№ 04"
+            title={t("openSource.title")}
+            lede={t("openSource.description")}
+            align="center"
+            className="animate-on-scroll mt-4"
+          />
           <div className="animate-on-scroll-delay-2 mt-8 flex flex-wrap justify-center gap-2">
             {[
               "Next.js 16",
@@ -306,31 +356,23 @@ export default async function MarketingPage() {
               "PostgreSQL",
               "Drizzle ORM",
             ].map((tech) => (
-              <span
-                key={tech}
-                className="rounded-full border border-brand-200 bg-brand-50 px-3 py-1 text-sm text-brand-700"
-              >
+              <Chip key={tech} asLabel>
                 {tech}
-              </span>
+              </Chip>
             ))}
           </div>
           <div className="animate-on-scroll-delay-3 mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
-            <a
-              href="https://github.com/Manuel10i/packedplaces"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-block rounded-lg bg-cta-gradient px-6 py-3 text-sm font-medium text-white transition-transform hover:scale-105"
-            >
+            <Button href="https://github.com/Manuel10i/packedplaces" target="_blank" rel="noopener noreferrer">
               {t("openSource.viewOnGithub")}
-            </a>
-            <a
+            </Button>
+            <Button
               href="https://github.com/Manuel10i/packedplaces/blob/main/docs/ADDING-REGIONS.md"
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-block rounded-lg border border-brand-300 bg-white/80 px-6 py-3 text-sm font-medium text-brand-700 transition-colors hover:bg-white"
+              variant="secondary"
             >
               {t("openSource.contributions")}
-            </a>
+            </Button>
           </div>
         </div>
       </section>
diff --git a/src/app/(marketing)/privacy/page.tsx b/src/app/(marketing)/privacy/page.tsx
index 5dc7cfd..d12dea3 100644
--- a/src/app/(marketing)/privacy/page.tsx
+++ b/src/app/(marketing)/privacy/page.tsx
@@ -4,12 +4,51 @@ import { SiteHeader } from "@/components/SiteHeader";
 import { SiteFooter } from "@/components/SiteFooter";
 import { ConsentControls } from "@/components/ConsentControls";
 
-export const metadata: Metadata = {
-  title: "Privacy Policy — PackedPlaces.com",
-  description:
-    "Privacy policy for PackedPlaces.com — how we handle your data, cookies, and analytics.",
-  robots: { index: false, follow: false },
-};
+export async function generateMetadata(): Promise<Metadata> {
+  const p = await getTranslations("privacy");
+  return {
+    title: p("metaTitle"),
+    description: p("metaDescription"),
+    robots: { index: false, follow: false },
+  };
+}
+
+const SECTIONS = [
+  { titleKey: "controllerTitle", textKey: "controllerText" },
+  { titleKey: "collectTitle", textKey: "collectText" },
+] as const;
+
+const RIGHTS_KEYS = [
+  "rightAccess",
+  "rightRectification",
+  "rightErasure",
+  "rightRestriction",
+  "rightPortability",
+  "rightObjection",
+] as const;
+
+const TAIL_SECTIONS = [
+  { titleKey: "retentionTitle", textKey: "retentionText" },
+  { titleKey: "changesTitle", textKey: "changesText" },
+  { titleKey: "contactTitle", textKey: "contactText" },
+] as const;
+
+function SectionTitle({
+  index,
+  children,
+}: {
+  index: number;
+  children: React.ReactNode;
+}) {
+  return (
+    <h2 className="flex items-baseline gap-3 font-display text-xl text-ink">
+      <span aria-hidden className="font-mono text-xs tracking-widest text-accent">
+        {String(index).padStart(2, "0")}
+      </span>
+      {children}
+    </h2>
+  );
+}
 
 export default async function PrivacyPage() {
   const p = await getTranslations("privacy");
@@ -18,107 +57,78 @@ export default async function PrivacyPage() {
     <>
       <SiteHeader />
 
-      <section className="bg-sand-50 py-16">
+      <section className="bg-surface py-16 sm:py-20">
         <div className="mx-auto max-w-3xl px-6">
-          <h1 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+          <h1 className="font-display text-4xl leading-[1.08] text-ink sm:text-5xl">
             {p("title")}
           </h1>
-          <p className="mt-2 text-sm text-gray-500">{p("lastUpdated")}</p>
-
-          <div className="mt-10 space-y-10 text-gray-600">
-            {/* Data Controller */}
-            <div>
-              <h2 className="border-l-2 border-brand-400 pl-3 text-lg font-semibold text-gray-900">
-                {p("controllerTitle")}
-              </h2>
-              <p className="mt-2 text-sm">{p("controllerText")}</p>
-            </div>
+          <p className="mt-3 font-mono text-[11px] uppercase tracking-widest text-ink-faint">
+            {p("lastUpdated")}
+          </p>
 
-            {/* What Data We Collect */}
-            <div>
-              <h2 className="border-l-2 border-brand-400 pl-3 text-lg font-semibold text-gray-900">
-                {p("collectTitle")}
-              </h2>
-              <p className="mt-2 text-sm">{p("collectText")}</p>
-            </div>
+          <div className="mt-12 space-y-10 text-ink-muted">
+            {/* Data Controller / What Data We Collect */}
+            {SECTIONS.map((s, i) => (
+              <div key={s.titleKey}>
+                <SectionTitle index={i + 1}>{p(s.titleKey)}</SectionTitle>
+                <p className="mt-3 text-sm leading-relaxed">{p(s.textKey)}</p>
+              </div>
+            ))}
 
             {/* Cookies */}
             <div>
-              <h2 className="border-l-2 border-brand-400 pl-3 text-lg font-semibold text-gray-900">
-                {p("cookiesTitle")}
-              </h2>
-              <p className="mt-2 text-sm">{p("cookiesText")}</p>
-              <ul className="mt-3 list-disc space-y-1 pl-5 text-sm">
-                <li>
-                  <strong>NEXT_LOCALE</strong> — {p("cookieLocale")}
+              <SectionTitle index={3}>{p("cookiesTitle")}</SectionTitle>
+              <p className="mt-3 text-sm leading-relaxed">{p("cookiesText")}</p>
+              <ul className="mt-4 space-y-2 text-sm">
+                <li className="border-l-2 border-dotted border-accent/50 pl-4 leading-relaxed">
+                  <strong className="font-mono text-xs text-ink">NEXT_LOCALE</strong> —{" "}
+                  {p("cookieLocale")}
                 </li>
               </ul>
             </div>
 
             {/* Google Analytics */}
             <div>
-              <h2 className="border-l-2 border-brand-400 pl-3 text-lg font-semibold text-gray-900">
-                {p("analyticsTitle")}
-              </h2>
-              <p className="mt-2 text-sm">{p("analyticsText")}</p>
+              <SectionTitle index={4}>{p("analyticsTitle")}</SectionTitle>
+              <p className="mt-3 text-sm leading-relaxed">{p("analyticsText")}</p>
             </div>
 
             {/* Manage consent */}
             <div>
-              <h2 className="border-l-2 border-brand-400 pl-3 text-lg font-semibold text-gray-900">
-                {p("manageTitle")}
-              </h2>
-              <p className="mt-2 text-sm">{p("manageText")}</p>
+              <SectionTitle index={5}>{p("manageTitle")}</SectionTitle>
+              <p className="mt-3 text-sm leading-relaxed">{p("manageText")}</p>
               <ConsentControls />
             </div>
 
             {/* Contact Form */}
             <div>
-              <h2 className="border-l-2 border-brand-400 pl-3 text-lg font-semibold text-gray-900">
-                {p("contactDataTitle")}
-              </h2>
-              <p className="mt-2 text-sm">{p("contactDataText")}</p>
+              <SectionTitle index={6}>{p("contactDataTitle")}</SectionTitle>
+              <p className="mt-3 text-sm leading-relaxed">{p("contactDataText")}</p>
             </div>
 
             {/* Your Rights */}
             <div>
-              <h2 className="border-l-2 border-brand-400 pl-3 text-lg font-semibold text-gray-900">
-                {p("rightsTitle")}
-              </h2>
-              <p className="mt-2 text-sm">{p("rightsText")}</p>
-              <ul className="mt-3 list-disc space-y-1 pl-5 text-sm">
-                <li>{p("rightAccess")}</li>
-                <li>{p("rightRectification")}</li>
-                <li>{p("rightErasure")}</li>
-                <li>{p("rightRestriction")}</li>
-                <li>{p("rightPortability")}</li>
-                <li>{p("rightObjection")}</li>
+              <SectionTitle index={7}>{p("rightsTitle")}</SectionTitle>
+              <p className="mt-3 text-sm leading-relaxed">{p("rightsText")}</p>
+              <ul className="mt-4 space-y-2 text-sm">
+                {RIGHTS_KEYS.map((key) => (
+                  <li
+                    key={key}
+                    className="border-l-2 border-dotted border-accent/50 pl-4 leading-relaxed"
+                  >
+                    {p(key)}
+                  </li>
+                ))}
               </ul>
             </div>
 
-            {/* Data Retention */}
-            <div>
-              <h2 className="border-l-2 border-brand-400 pl-3 text-lg font-semibold text-gray-900">
-                {p("retentionTitle")}
-              </h2>
-              <p className="mt-2 text-sm">{p("retentionText")}</p>
-            </div>
-
-            {/* Policy Changes */}
-            <div>
-              <h2 className="border-l-2 border-brand-400 pl-3 text-lg font-semibold text-gray-900">
-                {p("changesTitle")}
-              </h2>
-              <p className="mt-2 text-sm">{p("changesText")}</p>
-            </div>
-
-            {/* Contact */}
-            <div>
-              <h2 className="border-l-2 border-brand-400 pl-3 text-lg font-semibold text-gray-900">
-                {p("contactTitle")}
-              </h2>
-              <p className="mt-2 text-sm">{p("contactText")}</p>
-            </div>
+            {/* Data Retention / Policy Changes / Contact */}
+            {TAIL_SECTIONS.map((s, i) => (
+              <div key={s.titleKey}>
+                <SectionTitle index={i + 8}>{p(s.titleKey)}</SectionTitle>
+                <p className="mt-3 text-sm leading-relaxed">{p(s.textKey)}</p>
+              </div>
+            ))}
           </div>
         </div>
       </section>
diff --git a/src/app/api/busyness/__tests__/route.test.ts b/src/app/api/busyness/__tests__/route.test.ts
new file mode 100644
index 0000000..f3c2781
--- /dev/null
+++ b/src/app/api/busyness/__tests__/route.test.ts
@@ -0,0 +1,120 @@
+import { vi, describe, it, expect } from "vitest";
+
+const mockRows = [
+  { destinationId: "AT-VIENNA", week: 1, busynessScore: 0.42 },
+  { destinationId: "AT-VIENNA", week: 30, busynessScore: 0.81 },
+  { destinationId: "IT-ROME", week: 30, busynessScore: 0.9 },
+  // Out-of-range week must be ignored, not crash.
+  { destinationId: "AT-VIENNA", week: 53, busynessScore: 0.5 },
+];
+
+// Mock the db module before imports — returns actual rows so the mapping loop
+// is exercised (same pattern as the heatmap route test).
+vi.mock("@/lib/db", () => ({
+  db: {
+    select: () => ({
+      from: () => ({
+        where: () => Promise.resolve(mockRows),
+      }),
+    }),
+  },
+  schema: {
+    heatmapCache: {
+      destinationId: "destinationId",
+      week: "week",
+      year: "year",
+      busynessScore: "busynessScore",
+    },
+  },
+}));
+
+import { GET } from "../route";
+import { NextRequest } from "next/server";
+
+function makeRequest(params: Record<string, string> = {}) {
+  const url = new URL("http://localhost/api/busyness");
+  for (const [key, value] of Object.entries(params)) {
+    url.searchParams.set(key, value);
+  }
+  return new NextRequest(url);
+}
+
+describe("GET /api/busyness", () => {
+  describe("validation", () => {
+    it("returns 400 when no parameters are provided", async () => {
+      const response = await GET(makeRequest());
+      expect(response.status).toBe(400);
+      const body = await response.json();
+      expect(body.error).toBe("Invalid ids or year parameter");
+    });
+
+    it("returns 400 when year is missing", async () => {
+      const response = await GET(makeRequest({ ids: "AT-VIENNA" }));
+      expect(response.status).toBe(400);
+    });
+
+    it("returns 400 when year is non-numeric", async () => {
+      const response = await GET(makeRequest({ ids: "AT-VIENNA", year: "abc" }));
+      expect(response.status).toBe(400);
+    });
+
+    it("returns 400 when ids is missing", async () => {
+      const response = await GET(makeRequest({ year: "2026" }));
+      expect(response.status).toBe(400);
+    });
+
+    it("returns 400 when ids is empty (only commas/whitespace)", async () => {
+      const response = await GET(makeRequest({ ids: " , ,", year: "2026" }));
+      expect(response.status).toBe(400);
+    });
+
+    it("returns 400 when more than 6 ids are given", async () => {
+      const ids = ["A", "B", "C", "D", "E", "F", "G"].join(",");
+      const response = await GET(makeRequest({ ids, year: "2026" }));
+      expect(response.status).toBe(400);
+      const body = await response.json();
+      expect(body.error).toBe("At most 6 ids allowed");
+    });
+  });
+
+  describe("successful response", () => {
+    it("returns series keyed per id with 52 entries and nulls where no rows", async () => {
+      const response = await GET(
+        makeRequest({ ids: "AT-VIENNA,IT-ROME,XX-NONE", year: "2026" }),
+      );
+      expect(response.status).toBe(200);
+
+      const body = await response.json();
+      expect(body.year).toBe(2026);
+      expect(Object.keys(body.series).sort()).toEqual([
+        "AT-VIENNA",
+        "IT-ROME",
+        "XX-NONE",
+      ]);
+
+      for (const id of ["AT-VIENNA", "IT-ROME", "XX-NONE"]) {
+        expect(body.series[id]).toHaveLength(52);
+      }
+
+      // Scores placed at week-1 index.
+      expect(body.series["AT-VIENNA"][0]).toBe(0.42);
+      expect(body.series["AT-VIENNA"][29]).toBe(0.81);
+      expect(body.series["IT-ROME"][29]).toBe(0.9);
+
+      // Weeks without rows stay null.
+      expect(body.series["AT-VIENNA"][1]).toBeNull();
+      expect(body.series["IT-ROME"][0]).toBeNull();
+      expect(body.series["XX-NONE"]).toEqual(new Array(52).fill(null));
+    });
+
+    it("sets a Cache-Control header", async () => {
+      // Note: ids must cover every destination in mockRows — the route relies
+      // on the SQL inArray filter and indexes rows straight into `series`.
+      const response = await GET(makeRequest({ ids: "AT-VIENNA,IT-ROME", year: "2026" }));
+      expect(response.status).toBe(200);
+      expect(response.headers.get("Cache-Control")).toBe(
+        "public, max-age=3600, stale-while-revalidate=86400",
+      );
+    });
+  });
+});
diff --git a/src/app/api/busyness/route.ts b/src/app/api/busyness/route.ts
new file mode 100644
index 0000000..ef6eecd
--- /dev/null
+++ b/src/app/api/busyness/route.ts
@@ -0,0 +1,60 @@
+import { NextRequest, NextResponse } from "next/server";
+import { and, eq, inArray } from "drizzle-orm";
+import { db, schema } from "@/lib/db";
+
+const MAX_IDS = 6;
+const WEEKS = 52;
+
+export interface BusynessSeriesResponse {
+  year: number;
+  series: Record<string, (number | null)[]>;
+}
+
+/**
+ * Weekly busyness series for up to 6 destinations in a given year, from the
+ * precomputed heatmap cache (includes holiday/event boosts, matching the map).
+ * GET /api/busyness?ids=AT-VIENNA,IT-ROME&year=2026
+ */
+export async function GET(request: NextRequest) {
+  const { searchParams } = request.nextUrl;
+  const year = parseInt(searchParams.get("year") ?? "", 10);
+  const ids = (searchParams.get("ids") ?? "")
+    .split(",")
+    .map((s) => s.trim())
+    .filter(Boolean);
+
+  if (isNaN(year) || ids.length === 0) {
+    return NextResponse.json({ error: "Invalid ids or year parameter" }, { status: 400 });
+  }
+  if (ids.length > MAX_IDS) {
+    return NextResponse.json({ error: `At most ${MAX_IDS} ids allowed` }, { status: 400 });
+  }
+
+  const rows = await db
+    .select({
+      destinationId: schema.heatmapCache.destinationId,
+      week: schema.heatmapCache.week,
+      busynessScore: schema.heatmapCache.busynessScore,
+    })
+    .from(schema.heatmapCache)
+    .where(and(eq(schema.heatmapCache.year, year), inArray(schema.heatmapCache.destinationId, ids)));
+
+  const series: Record<string, (number | null)[]> = {};
+  for (const id of ids) {
+    series[id] = new Array(WEEKS).fill(null);
+  }
+  for (const row of rows) {
+    if (row.week >= 1 && row.week <= WEEKS) {
+      series[row.destinationId][row.week - 1] = row.busynessScore;
+    }
+  }
+
+  const response: BusynessSeriesResponse = { year, series };
+  return NextResponse.json(response, {
+    headers: {
+      // Short fresh window so recomputed heatmap data reaches clients quickly;
+      // stale-while-revalidate keeps repeat views instant.
+      "Cache-Control": "public, max-age=3600, stale-while-revalidate=86400",
+    },
+  });
+}
diff --git a/src/app/api/heatmap/route.ts b/src/app/api/heatmap/route.ts
index bf8dc77..ad24268 100644
--- a/src/app/api/heatmap/route.ts
+++ b/src/app/api/heatmap/route.ts
@@ -107,7 +107,9 @@ export async function GET(request: NextRequest) {
 
   return NextResponse.json(response, {
     headers: {
-      "Cache-Control": "public, max-age=86400",
+      // Short fresh window so recomputed heatmap data reaches clients quickly;
+      // stale-while-revalidate keeps repeat views instant.
+      "Cache-Control": "public, max-age=3600, stale-while-revalidate=86400",
     },
   });
 }
diff --git a/src/app/api/og/destination/[slug]/route.tsx b/src/app/api/og/destination/[slug]/route.tsx
new file mode 100644
index 0000000..97b977a
--- /dev/null
+++ b/src/app/api/og/destination/[slug]/route.tsx
@@ -0,0 +1,140 @@
+import { ImageResponse } from "next/og";
+import { getSlugEntry } from "@/lib/destinations";
+import { getMonthlyBusyness } from "@/lib/services/destination-busyness";
+import { crowdColor } from "@/lib/crowd-palette";
+import { getCountryName } from "@/lib/data";
+
+/**
+ * On-demand Open Graph card for a destination (1200×630). Lives under /api so
+ * it stays dynamic while the destination pages remain fully static — the pages
+ * reference it via openGraph.images in their generateMetadata.
+ */
+
+export const runtime = "nodejs";
+
+const SIZE = { width: 1200, height: 630 };
+
+const FRAUNCES_URL =
+  "https://fonts.gstatic.com/s/fraunces/v38/6NVf8FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChJdt9vIVYX9G37lod_sPEKsxx664UJf1iVSv7W.ttf";
+
+const MONTHS = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
+
+let frauncesPromise: Promise<ArrayBuffer | null> | null = null;
+
+function loadFraunces(): Promise<ArrayBuffer | null> {
+  frauncesPromise ??= fetch(FRAUNCES_URL)
+    .then((res) => (res.ok ? res.arrayBuffer() : null))
+    .catch(() => null);
+  return frauncesPromise;
+}
+
+export async function GET(
+  _request: Request,
+  { params }: { params: Promise<{ slug: string }> },
+) {
+  const { slug } = await params;
+  const entry = getSlugEntry(slug);
+  if (!entry) {
+    return new Response("Not found", { status: 404 });
+  }
+
+  const name = entry.displayName;
+  const country = getCountryName(entry.destination.country);
+  const category = entry.destination.category.toUpperCase();
+  const scores = getMonthlyBusyness(entry.destination.id);
+  const fraunces = await loadFraunces();
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between",
+          backgroundColor: "#f6f1e7",
+          backgroundImage:
+            "linear-gradient(to right, rgba(34,48,58,0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(34,48,58,0.06) 1px, transparent 1px)",
+          backgroundSize: "80px 80px",
+          padding: "64px 72px",
+        }}
+      >
+        <div style={{ display: "flex", flexDirection: "column" }}>
+          <div style={{ display: "flex", fontSize: 24, letterSpacing: 6, color: "#c2542f" }}>
+            {[category, country.toUpperCase()].filter(Boolean).join("  ·  ")}
+          </div>
+          <div
+            style={{
+              display: "flex",
+              marginTop: 18,
+              fontSize: 92,
+              lineHeight: 1.05,
+              color: "#22303a",
+              fontFamily: fraunces ? "Fraunces" : undefined,
+              fontStyle: fraunces ? "italic" : undefined,
+            }}
+          >
+            {name}
+          </div>
+        </div>
+
+        <div style={{ display: "flex", flexDirection: "column" }}>
+          <div style={{ display: "flex", gap: 6 }}>
+            {scores.map((s: number, i: number) => (
+              <div
+                key={i}
+                style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}
+              >
+                <div
+                  style={{
+                    width: 82,
+                    height: 96,
+                    borderRadius: 3,
+                    backgroundColor: crowdColor(s, "light"),
+                  }}
+                />
+                <div style={{ display: "flex", fontSize: 17, letterSpacing: 3, color: "#5c6a72" }}>
+                  {MONTHS[i]}
+                </div>
+              </div>
+            ))}
+          </div>
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginTop: 36,
+              paddingTop: 24,
+              borderTop: "1px solid #d8cdb8",
+            }}
+          >
+            <div
+              style={{
+                display: "flex",
+                fontSize: 30,
+                color: "#22303a",
+                fontFamily: fraunces ? "Fraunces" : undefined,
+              }}
+            >
+              PackedPlaces
+            </div>
+            <div style={{ display: "flex", fontSize: 20, letterSpacing: 4, color: "#97998c" }}>
+              PACKEDPLACES.COM
+            </div>
+          </div>
+        </div>
+      </div>
+    ),
+    {
+      ...SIZE,
+      headers: {
+        "Cache-Control": "public, max-age=86400",
+      },
+      fonts: fraunces
+        ? [{ name: "Fraunces", data: fraunces, style: "italic" as const, weight: 600 as const }]
+        : undefined,
+    },
+  );
+}
diff --git a/src/app/apple-icon.png b/src/app/apple-icon.png
new file mode 100644
index 0000000..87299ce
Binary files /dev/null and b/src/app/apple-icon.png differ
diff --git a/src/app/globals.css b/src/app/globals.css
index 6902da4..a04597a 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,56 +1,176 @@
 @import "tailwindcss";
 
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* ───────────────────────────────────────────────────────────────
+   Atlas Editorial — semantic theme tokens
+   Day: warm paper + ink. Night: "night atlas" ink-navy + warm light.
+   Components use the semantic utilities (bg-surface, text-ink, …)
+   and flip automatically when `.dark` is set on <html>.
+   ─────────────────────────────────────────────────────────────── */
+
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --surface: #f6f1e7;
+  --surface-raised: #fdfaf3;
+  --surface-sunken: #ece4d4;
+  --ink: #22303a;
+  --ink-muted: #5c6a72;
+  --ink-faint: #97998c;
+  --line: #d8cdb8;
+  --line-strong: #b4a889;
+  --accent: #c2542f;
+  --accent-hover: #a8452a;
+  --accent-ink: #fdfaf3;
+  --accent-2: #175e5a;
+  --accent-2-hover: #144e4b;
+  --accent-2-ink: #f2f7f6;
+  --grid-line: rgba(34, 48, 58, 0.06);
+  --shadow-ink: rgba(34, 48, 58, 0.12);
+  color-scheme: light;
+}
+
+.dark {
+  --surface: #0f1922;
+  --surface-raised: #16232e;
+  --surface-sunken: #0a121a;
+  --ink: #ede4d3;
+  --ink-muted: #a8a294;
+  --ink-faint: #6e7a72;
+  --line: #2b3a45;
+  --line-strong: #445866;
+  --accent: #d97c55;
+  --accent-hover: #e08d69;
+  --accent-ink: #1a120c;
+  --accent-2: #4fa8a0;
+  --accent-2-hover: #64b8b0;
+  --accent-2-ink: #08201e;
+  --grid-line: rgba(237, 228, 211, 0.05);
+  --shadow-ink: rgba(0, 0, 0, 0.45);
+  color-scheme: dark;
 }
 
 @theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-
-  /* Brand teal — ocean / travel primary */
-  --color-brand-50: #effcfc;
-  --color-brand-100: #d7f6f7;
-  --color-brand-200: #b3ecef;
-  --color-brand-300: #7edde3;
-  --color-brand-400: #41c5cf;
-  --color-brand-500: #25a9b5;
-  --color-brand-600: #228998;
-  --color-brand-700: #226f7c;
-  --color-brand-800: #245a66;
-  --color-brand-900: #224b57;
-
-  /* Sunset orange — warm CTA accent */
-  --color-sunset-50: #fff7ed;
-  --color-sunset-100: #ffedd5;
-  --color-sunset-200: #fed7aa;
-  --color-sunset-300: #fdba74;
-  --color-sunset-400: #fb923c;
-  --color-sunset-500: #f97316;
-  --color-sunset-600: #ea580c;
-  --color-sunset-700: #c2410c;
-
-  /* Sand — warm neutral */
-  --color-sand-50: #faf8f5;
-  --color-sand-100: #f3efe8;
-  --color-sand-200: #e8e0d4;
+  /* semantic */
+  --color-surface: var(--surface);
+  --color-surface-raised: var(--surface-raised);
+  --color-surface-sunken: var(--surface-sunken);
+  --color-ink: var(--ink);
+  --color-ink-muted: var(--ink-muted);
+  --color-ink-faint: var(--ink-faint);
+  --color-line: var(--line);
+  --color-line-strong: var(--line-strong);
+  --color-accent: var(--accent);
+  --color-accent-hover: var(--accent-hover);
+  --color-accent-ink: var(--accent-ink);
+  --color-accent-2: var(--accent-2);
+  --color-accent-2-hover: var(--accent-2-hover);
+  --color-accent-2-ink: var(--accent-2-ink);
+  --color-background: var(--surface);
+  --color-foreground: var(--ink);
+
+  /* fonts */
+  --font-display: var(--font-fraunces);
+  --font-sans: var(--font-instrument);
+  --font-mono: var(--font-plex-mono);
+
+  /* Deep teal scale (was "brand") — static tints for chips/hovers */
+  --color-brand-50: #eef6f5;
+  --color-brand-100: #d9eae8;
+  --color-brand-200: #b3d5d1;
+  --color-brand-300: #83bab4;
+  --color-brand-400: #4f9a93;
+  --color-brand-500: #2f7d77;
+  --color-brand-600: #175e5a;
+  --color-brand-700: #144e4b;
+  --color-brand-800: #123f3d;
+  --color-brand-900: #103432;
+
+  /* Terracotta scale (was "sunset") */
+  --color-sunset-50: #faf0ea;
+  --color-sunset-100: #f4ddd0;
+  --color-sunset-200: #e8bda6;
+  --color-sunset-300: #dc9a78;
+  --color-sunset-400: #cf7750;
+  --color-sunset-500: #c2542f;
+  --color-sunset-600: #a8452a;
+  --color-sunset-700: #8a3a26;
+
+  /* Paper scale (was "sand") */
+  --color-sand-50: #f6f1e7;
+  --color-sand-100: #ece4d4;
+  --color-sand-200: #d8cdb8;
 }
 
+/* ─── Base ─── */
+
 body {
   margin: 0;
   padding: 0;
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  background: var(--surface);
+  color: var(--ink);
+  font-family: var(--font-instrument), ui-sans-serif, system-ui, sans-serif;
+  text-rendering: optimizeLegibility;
+}
+
+h1,
+h2,
+h3 {
+  font-family: var(--font-fraunces), ui-serif, Georgia, serif;
+}
+
+::selection {
+  background: color-mix(in srgb, var(--accent) 28%, transparent);
+}
+
+:focus-visible {
+  outline: 2px solid var(--accent-2);
+  outline-offset: 2px;
+}
+
+/* ─── rc-slider (map time slider) ─── */
+
+.rc-slider-rail {
+  background-color: var(--line) !important;
+  height: 4px !important;
+}
+
+.rc-slider-track {
+  background-color: var(--accent-2) !important;
+  height: 4px !important;
+}
+
+.rc-slider-handle {
+  width: 18px !important;
+  height: 18px !important;
+  margin-top: -7px !important;
+  border: 2px solid var(--accent-2) !important;
+  background-color: var(--surface-raised) !important;
+  opacity: 1 !important;
+  box-shadow: 0 1px 3px var(--shadow-ink) !important;
+}
+
+.rc-slider-handle:active,
+.rc-slider-handle-dragging {
+  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-2) 25%, transparent) !important;
+}
+
+.rc-slider-dot {
+  border-color: var(--line) !important;
+  background-color: var(--surface) !important;
+}
+
+.rc-slider-dot-active {
+  border-color: var(--accent-2) !important;
 }
 
-/* rc-slider mark label styling */
 .rc-slider-mark-text {
+  font-family: var(--font-plex-mono), monospace;
   font-size: 10px !important;
-  color: #9ca3af !important;
+  color: var(--ink-faint) !important;
+}
+
+.rc-slider-mark-text-active {
+  color: var(--ink-muted) !important;
 }
 
 /* ─── Keyframes ─── */
@@ -58,7 +178,7 @@ body {
 @keyframes fade-in-up {
   from {
     opacity: 0;
-    transform: translateY(24px);
+    transform: translateY(20px);
   }
   to {
     opacity: 1;
@@ -81,16 +201,10 @@ body {
   50% { opacity: 0.6; }
 }
 
-@keyframes gradient-shift {
-  0% { background-position: 0% 50%; }
-  50% { background-position: 100% 50%; }
-  100% { background-position: 0% 50%; }
-}
-
 @keyframes scale-in {
   from {
     opacity: 0;
-    transform: scale(0.92);
+    transform: scale(0.95);
   }
   to {
     opacity: 1;
@@ -98,69 +212,145 @@ body {
   }
 }
 
-/* ─── Utility classes ─── */
+@keyframes dash-travel {
+  to { stroke-dashoffset: -24; }
+}
+
+/* ─── Motion utilities (names are load-bearing across marketing pages) ─── */
 
 @utility animate-on-scroll {
-  animation: fade-in-up 0.6s ease-out both;
+  animation: fade-in-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
 }
 
 @utility animate-on-scroll-delay-1 {
-  animation: fade-in-up 0.6s ease-out 0.1s both;
+  animation: fade-in-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
 }
 
 @utility animate-on-scroll-delay-2 {
-  animation: fade-in-up 0.6s ease-out 0.2s both;
+  animation: fade-in-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both;
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
 }
 
 @utility animate-on-scroll-delay-3 {
-  animation: fade-in-up 0.6s ease-out 0.3s both;
+  animation: fade-in-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.36s both;
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
 }
 
 @utility animate-float {
   animation: float 4s ease-in-out infinite;
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
 }
 
 @utility animate-float-slow {
   animation: float-slow 6s ease-in-out infinite;
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
 }
 
 @utility animate-pulse-dot {
   animation: pulse-dot 3s ease-in-out infinite;
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
 }
 
 @utility animate-scale-in {
-  animation: scale-in 0.5s ease-out both;
+  animation: scale-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
 }
 
+@utility animate-dash-travel {
+  animation: dash-travel 1.6s linear infinite;
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+}
+
+/* ─── Surfaces, textures, ornaments ─── */
+
 @utility card-hover-lift {
-  transition: transform 0.25s ease, box-shadow 0.25s ease;
+  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
   &:hover {
-    transform: translateY(-4px) rotate(-0.5deg) scale(1.02);
-    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.1);
+    transform: translateY(-3px) rotate(-0.4deg);
+    box-shadow: 0 14px 28px -12px var(--shadow-ink);
+    border-color: var(--line-strong);
   }
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+    &:hover { transform: none; }
+  }
+}
+
+/* Fine paper-grain noise (neutral grey — works on day paper and night navy). */
+@utility bg-paper-grain {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
+}
+
+/* Faint cartographic graticule. */
+@utility bg-map-grid {
+  background-image:
+    repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px 56px),
+    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px 56px);
 }
 
+/* Grain + graticule in one layer stack. */
+@utility bg-atlas-field {
+  background-image:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E"),
+    repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px 56px),
+    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px 56px);
+}
+
+@utility border-dotted-route {
+  border: 2px dotted color-mix(in srgb, var(--accent) 65%, transparent);
+}
+
+/* Postage-stamp perforated edge. Requires an opaque background on the element. */
+@utility stamp-edge {
+  --stamp-r: 5px;
+  padding: calc(var(--stamp-r) * 2);
+  mask:
+    radial-gradient(var(--stamp-r), transparent 97%, black 100%) round
+      calc(-1 * var(--stamp-r)) calc(-1 * var(--stamp-r)) / calc(var(--stamp-r) * 4)
+      calc(var(--stamp-r) * 4),
+    linear-gradient(black 0 0) content-box;
+}
+
+/* ─── Legacy background utilities (re-pointed to the Atlas palette;
+       removed once all marketing pages migrate to primitives) ─── */
+
 @utility bg-hero-gradient {
-  background: linear-gradient(135deg, var(--color-brand-50) 0%, #e0f2fe 40%, var(--color-sunset-50) 100%);
+  background-color: var(--surface);
 }
 
 @utility bg-section-warm {
-  background-color: var(--color-sand-50);
+  background-color: var(--surface-sunken);
 }
 
 @utility bg-section-cool {
-  background: linear-gradient(180deg, var(--color-brand-50) 0%, #ffffff 100%);
+  background-color: var(--surface);
 }
 
 @utility bg-cta-gradient {
-  background: linear-gradient(135deg, var(--color-brand-600) 0%, var(--color-brand-500) 50%, #0ea5e9 100%);
+  background-color: var(--accent);
 }
 
 @utility text-gradient-hero {
-  background: linear-gradient(135deg, var(--color-brand-700), var(--color-brand-500), #0ea5e9, var(--color-sunset-500));
-  background-size: 200% 200%;
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  animation: gradient-shift 6s ease infinite;
+  color: var(--accent);
+  font-style: italic;
 }
diff --git a/src/app/icon.svg b/src/app/icon.svg
index 472c1fc..b9a39d8 100644
--- a/src/app/icon.svg
+++ b/src/app/icon.svg
@@ -1,22 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-  <defs>
-    <linearGradient id="pin" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0%" stop-color="#111827"/>
-      <stop offset="100%" stop-color="#374151"/>
-    </linearGradient>
-    <radialGradient id="heat" cx="50%" cy="45%" r="50%">
-      <stop offset="0%" stop-color="#ef4444"/>
-      <stop offset="45%" stop-color="#f97316"/>
-      <stop offset="100%" stop-color="#facc15"/>
-    </radialGradient>
-    <filter id="shadow" x="-10%" y="-5%" width="120%" height="120%">
-      <feDropShadow dx="0" dy="6" stdDeviation="12" flood-color="#000" flood-opacity=".18"/>
-    </filter>
-  </defs>
-  <!-- Pin body -->
-  <path d="M256 16C161.3 16 84 93.3 84 188c0 130 172 302 172 302s172-172 172-302C428 93.3 350.7 16 256 16z" fill="url(#pin)" filter="url(#shadow)"/>
-  <!-- Heat core -->
-  <circle cx="256" cy="188" r="96" fill="url(#heat)"/>
-  <!-- Inner bright spot -->
-  <circle cx="256" cy="176" r="36" fill="#fff" opacity=".35"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <!-- Atlas Editorial mark: compass needle over paper with graticule -->
+  <rect width="64" height="64" rx="12" fill="#f6f1e7"/>
+  <g stroke="#22303a" stroke-opacity="0.10" stroke-width="1">
+    <path d="M0 21h64M0 43h64M21 0v64M43 0v64"/>
+  </g>
+  <circle cx="32" cy="32" r="22" fill="none" stroke="#175e5a" stroke-width="2.5"/>
+  <circle cx="32" cy="32" r="16.5" fill="none" stroke="#175e5a" stroke-width="1" stroke-dasharray="2 3" stroke-opacity="0.6"/>
+  <path d="M32 12 L36.5 29 L32 32 L27.5 29 Z" fill="#c2542f"/>
+  <path d="M32 52 L36.5 35 L32 32 L27.5 35 Z" fill="#c2542f" fill-opacity="0.45"/>
+  <circle cx="32" cy="32" r="3" fill="#22303a"/>
 </svg>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c888701..933ccb6 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,44 +1,67 @@
-import type { Metadata } from "next";
-import { Geist } from "next/font/google";
+import type { Metadata, Viewport } from "next";
+import { Fraunces, IBM_Plex_Mono, Instrument_Sans } from "next/font/google";
 import { NextIntlClientProvider } from "next-intl";
-import { getLocale, getMessages } from "next-intl/server";
+import { getLocale, getMessages, getTranslations } from "next-intl/server";
 import { CookieConsent } from "@/components/CookieConsent";
+import { ThemeProvider } from "@/components/theme/ThemeProvider";
+import { THEME_SCRIPT } from "@/components/theme/theme-script";
 import "./globals.css";
 
 const gaId = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID;
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+const fraunces = Fraunces({
+  variable: "--font-fraunces",
   subsets: ["latin"],
+  axes: ["SOFT", "WONK", "opsz"],
 });
 
-export const metadata: Metadata = {
-  title: {
-    // Every page title already includes the brand (e.g. "Contact — PackedPlaces.com"),
-    // so a "%s | PackedPlaces.com" template doubled it. Drop the template; page titles
-    // are used as-is and the brand appears once.
-    default: "PackedPlaces.com — See How Crowded Travel Destinations Really Get",
-    template: "%s",
-  },
-  description:
-    "PackedPlaces.com visualizes tourist crowdedness for 230+ destinations worldwide, week by week, powered by school holiday data from 75 countries.",
-  openGraph: {
-    title: "PackedPlaces.com — See How Crowded Travel Destinations Really Get",
-    description:
-      "Visualize tourist crowdedness for 230+ destinations worldwide, week by week, powered by school holiday data from 75 countries.",
-    url: "https://packedplaces.com",
-    siteName: "PackedPlaces.com",
-    type: "website",
-  },
-  alternates: {
-    languages: {
-      en: "https://packedplaces.com",
-      de: "https://packedplaces.com",
-      es: "https://packedplaces.com",
-      fr: "https://packedplaces.com",
-      "x-default": "https://packedplaces.com",
+const instrumentSans = Instrument_Sans({
+  variable: "--font-instrument",
+  subsets: ["latin"],
+});
+
+const plexMono = IBM_Plex_Mono({
+  variable: "--font-plex-mono",
+  subsets: ["latin"],
+  weight: ["400", "500"],
+});
+
+export async function generateMetadata(): Promise<Metadata> {
+  const locale = await getLocale();
+  const t = await getTranslations({ locale, namespace: "meta" });
+  return {
+    title: {
+      // Every page title already includes the brand (e.g. "Contact — PackedPlaces.com"),
+      // so a "%s | PackedPlaces.com" template doubled it. Drop the template; page titles
+      // are used as-is and the brand appears once.
+      default: t("title"),
+      template: "%s",
+    },
+    description: t("description"),
+    openGraph: {
+      title: t("ogTitle"),
+      description: t("ogDescription"),
+      url: "https://packedplaces.com",
+      siteName: "PackedPlaces.com",
+      type: "website",
+    },
+    alternates: {
+      languages: {
+        en: "https://packedplaces.com",
+        de: "https://packedplaces.com",
+        es: "https://packedplaces.com",
+        fr: "https://packedplaces.com",
+        "x-default": "https://packedplaces.com",
+      },
     },
-  },
+  };
+}
+
+export const viewport: Viewport = {
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "#f6f1e7" },
+    { media: "(prefers-color-scheme: dark)", color: "#0f1922" },
+  ],
 };
 
 export default async function RootLayout({
@@ -50,11 +73,18 @@ export default async function RootLayout({
   const messages = await getMessages();
 
   return (
-    <html lang={locale}>
-      <body className={`${geistSans.variable} antialiased`}>
+    <html lang={locale} suppressHydrationWarning>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: THEME_SCRIPT }} />
+      </head>
+      <body
+        className={`${fraunces.variable} ${instrumentSans.variable} ${plexMono.variable} antialiased`}
+      >
         <NextIntlClientProvider messages={messages}>
-          {children}
-          <CookieConsent gaId={gaId} />
+          <ThemeProvider>
+            {children}
+            <CookieConsent gaId={gaId} />
+          </ThemeProvider>
         </NextIntlClientProvider>
       </body>
     </html>
diff --git a/src/app/manifest.ts b/src/app/manifest.ts
new file mode 100644
index 0000000..78de475
--- /dev/null
+++ b/src/app/manifest.ts
@@ -0,0 +1,38 @@
+import type { MetadataRoute } from "next";
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: "PackedPlaces — Travel Crowd Forecast",
+    short_name: "PackedPlaces",
+    description:
+      "See how crowded travel destinations really get, week by week — and find the quietest time to go.",
+    start_url: "/map?utm_source=pwa",
+    display: "standalone",
+    background_color: "#f6f1e7",
+    theme_color: "#f6f1e7",
+    orientation: "portrait-primary",
+    categories: ["travel", "navigation", "utilities"],
+    icons: [
+      { src: "/icons/icon-192.png", sizes: "192x192", type: "image/png" },
+      { src: "/icons/icon-512.png", sizes: "512x512", type: "image/png" },
+      {
+        src: "/icons/maskable-512.png",
+        sizes: "512x512",
+        type: "image/png",
+        purpose: "maskable",
+      },
+    ],
+    shortcuts: [
+      {
+        name: "Map",
+        url: "/map",
+        icons: [{ src: "/icons/icon-192.png", sizes: "192x192", type: "image/png" }],
+      },
+      {
+        name: "Best time to visit",
+        url: "/best-time",
+        icons: [{ src: "/icons/icon-192.png", sizes: "192x192", type: "image/png" }],
+      },
+    ],
+  };
+}
diff --git a/src/app/opengraph-image.tsx b/src/app/opengraph-image.tsx
new file mode 100644
index 0000000..f68d4ca
--- /dev/null
+++ b/src/app/opengraph-image.tsx
@@ -0,0 +1,114 @@
+import { ImageResponse } from "next/og";
+import { crowdColor } from "@/lib/crowd-palette";
+
+export const size = { width: 1200, height: 630 };
+export const contentType = "image/png";
+
+const FRAUNCES_URL =
+  "https://fonts.gstatic.com/s/fraunces/v38/6NVf8FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChJdt9vIVYX9G37lod_sPEKsxx664UJf1iVSv7W.ttf";
+
+// A stylized "typical year" curve for the brand card.
+const SAMPLE = [0.2, 0.15, 0.2, 0.3, 0.35, 0.55, 0.85, 0.95, 0.6, 0.35, 0.25, 0.45];
+
+async function loadFraunces(): Promise<ArrayBuffer | null> {
+  try {
+    const res = await fetch(FRAUNCES_URL);
+    if (!res.ok) return null;
+    return await res.arrayBuffer();
+  } catch {
+    return null;
+  }
+}
+
+export default async function OgImage() {
+  const fraunces = await loadFraunces();
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between",
+          backgroundColor: "#f6f1e7",
+          backgroundImage:
+            "linear-gradient(to right, rgba(34,48,58,0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(34,48,58,0.06) 1px, transparent 1px)",
+          backgroundSize: "80px 80px",
+          padding: "72px",
+        }}
+      >
+        <div style={{ display: "flex", flexDirection: "column" }}>
+          <div style={{ display: "flex", fontSize: 24, letterSpacing: 6, color: "#c2542f" }}>
+            700+ DESTINATIONS · 100+ COUNTRIES · 52 WEEKS
+          </div>
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              marginTop: 20,
+              fontSize: 88,
+              lineHeight: 1.06,
+              color: "#22303a",
+              fontFamily: fraunces ? "Fraunces" : undefined,
+            }}
+          >
+            <span>See how crowded the world</span>
+            <span style={{ fontStyle: "italic", color: "#c2542f" }}>really gets.</span>
+          </div>
+        </div>
+
+        <div style={{ display: "flex", flexDirection: "column" }}>
+          <div style={{ display: "flex", alignItems: "flex-end", gap: 10, height: 140 }}>
+            {SAMPLE.map((v, i) => (
+              <div
+                key={i}
+                style={{
+                  display: "flex",
+                  width: 78,
+                  height: Math.max(18, v * 140),
+                  borderRadius: 3,
+                  backgroundColor: crowdColor(v, "light"),
+                }}
+              />
+            ))}
+          </div>
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginTop: 32,
+              paddingTop: 24,
+              borderTop: "1px solid #d8cdb8",
+            }}
+          >
+            <div
+              style={{
+                display: "flex",
+                fontSize: 32,
+                color: "#22303a",
+                fontFamily: fraunces ? "Fraunces" : undefined,
+              }}
+            >
+              PackedPlaces
+            </div>
+            <div style={{ display: "flex", fontSize: 20, letterSpacing: 4, color: "#97998c" }}>
+              PACKEDPLACES.COM
+            </div>
+          </div>
+        </div>
+      </div>
+    ),
+    {
+      ...size,
+      fonts: fraunces
+        ? [
+            { name: "Fraunces", data: fraunces, style: "normal" as const, weight: 600 as const },
+            { name: "Fraunces", data: fraunces, style: "italic" as const, weight: 600 as const },
+          ]
+        : undefined,
+    },
+  );
+}
diff --git a/src/app/sitemap.ts b/src/app/sitemap.ts
index 702ff8a..e6af017 100644
--- a/src/app/sitemap.ts
+++ b/src/app/sitemap.ts
@@ -28,6 +28,7 @@ function destinationAlternates(slug: string) {
 const PATHS = [
   { path: "", changeFrequency: "weekly" as const, priority: 1 },
   { path: "map", changeFrequency: "weekly" as const, priority: 0.9 },
+  { path: "best-time", changeFrequency: "weekly" as const, priority: 0.8 },
   { path: "features/crowdedness", changeFrequency: "monthly" as const, priority: 0.7 },
   { path: "features/seasonality", changeFrequency: "monthly" as const, priority: 0.7 },
   { path: "features/categories", changeFrequency: "monthly" as const, priority: 0.7 },
diff --git a/src/components/ConsentControls.tsx b/src/components/ConsentControls.tsx
index 77292a5..aff3c9c 100644
--- a/src/components/ConsentControls.tsx
+++ b/src/components/ConsentControls.tsx
@@ -2,6 +2,7 @@
 
 import { useSyncExternalStore } from "react";
 import { useTranslations } from "next-intl";
+import { Switch } from "@/components/ui/Switch";
 import {
   getConsent,
   setConsent,
@@ -20,6 +21,7 @@ const serverConsent = (): ConsentState => "unknown";
 export function ConsentControls() {
   const t = useTranslations("privacy");
   const state = useSyncExternalStore(subscribeConsent, getConsent, serverConsent);
+  const granted = state === "granted";
 
   const statusLabel =
     state === "granted"
@@ -29,29 +31,24 @@ export function ConsentControls() {
         : t("statusUnknown");
 
   return (
-    <div className="mt-4 rounded-lg border border-gray-200 bg-white p-4">
-      <p className="text-sm text-gray-700">
+    <div className="mt-4 rounded-[4px] border border-line bg-surface-raised p-4">
+      <p className="text-sm text-ink-muted">
         {t("consentStatus")}{" "}
-        <span className="font-semibold text-gray-900">{statusLabel}</span>
+        <span className="font-mono text-[11px] uppercase tracking-widest text-ink">
+          {statusLabel}
+        </span>
       </p>
-      <div className="mt-3 flex flex-wrap gap-3">
-        {state === "granted" ? (
-          <button
-            type="button"
-            onClick={() => setConsent("denied")}
-            className="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50"
-          >
-            {t("revokeConsent")}
-          </button>
-        ) : (
-          <button
-            type="button"
-            onClick={() => setConsent("granted")}
-            className="rounded-lg bg-cta-gradient px-4 py-2 text-sm font-medium text-white transition-transform hover:scale-105"
-          >
-            {t("grantConsent")}
-          </button>
-        )}
+      <div className="mt-4 flex items-center gap-3 border-t border-line pt-4">
+        <Switch
+          id="analytics-consent"
+          checked={granted}
+          onChange={(checked) => setConsent(checked ? "granted" : "denied")}
+          aria-label={granted ? t("revokeConsent") : t("grantConsent")}
+        />
+        {/* htmlFor forwards label clicks to the switch button — no extra handler needed. */}
+        <label htmlFor="analytics-consent" className="cursor-pointer text-sm text-ink-muted">
+          {granted ? t("revokeConsent") : t("grantConsent")}
+        </label>
       </div>
     </div>
   );
diff --git a/src/components/CookieConsent.tsx b/src/components/CookieConsent.tsx
index b2b97d9..4a42525 100644
--- a/src/components/CookieConsent.tsx
+++ b/src/components/CookieConsent.tsx
@@ -4,6 +4,7 @@ import { useEffect, useSyncExternalStore } from "react";
 import Link from "next/link";
 import { GoogleAnalytics } from "@next/third-parties/google";
 import { useTranslations } from "next-intl";
+import { Button } from "@/components/ui/Button";
 import {
   getConsent,
   setConsent,
@@ -61,32 +62,24 @@ export function CookieConsent({ gaId }: Props) {
           <div
             role="dialog"
             aria-label={t("title")}
-            className="mx-auto flex max-w-3xl flex-col gap-3 rounded-xl border border-gray-200 bg-white/95 p-4 shadow-lg backdrop-blur-md sm:flex-row sm:items-center sm:justify-between sm:gap-6"
+            className="mx-auto flex max-w-3xl flex-col gap-3 rounded-[4px] border border-line bg-surface-raised/95 p-4 shadow-xl backdrop-blur-md sm:flex-row sm:items-center sm:justify-between sm:gap-6"
           >
-            <p className="text-sm text-gray-600">
+            <p className="text-sm leading-relaxed text-ink-muted">
               {t("message")}{" "}
               <Link
                 href="/privacy"
-                className="font-medium text-brand-600 underline-offset-2 hover:underline"
+                className="font-medium text-accent-2 underline decoration-dotted underline-offset-4 transition-colors hover:text-accent"
               >
                 {t("learnMore")}
               </Link>
             </p>
             <div className="flex shrink-0 gap-3">
-              <button
-                type="button"
-                onClick={() => setConsent("denied")}
-                className="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50"
-              >
+              <Button variant="secondary" size="sm" onClick={() => setConsent("denied")}>
                 {t("decline")}
-              </button>
-              <button
-                type="button"
-                onClick={() => setConsent("granted")}
-                className="rounded-lg bg-cta-gradient px-4 py-2 text-sm font-medium text-white transition-transform hover:scale-105"
-              >
+              </Button>
+              <Button size="sm" onClick={() => setConsent("granted")}>
                 {t("accept")}
-              </button>
+              </Button>
             </div>
           </div>
         </div>
diff --git a/src/components/HeroDestinationSearch.tsx b/src/components/HeroDestinationSearch.tsx
index c440ca3..9f8fe40 100644
--- a/src/components/HeroDestinationSearch.tsx
+++ b/src/components/HeroDestinationSearch.tsx
@@ -2,86 +2,27 @@
 
 import { useMemo, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
-import { useTranslations } from "next-intl";
-import { destinations as allDestinations } from "@/lib/data/destinations";
-import { geoPlaces, cityAliases } from "@/lib/data/geo-search";
-import { getCountryFlag } from "@/lib/data";
-import type { Destination } from "@/types";
-
-type Match = {
-  id: string;
-  name: string;
-  label: string;
-  lat: number;
-  lng: number;
-  zoom: number;
-};
-
-const normalize = (s: string) =>
-  s
-    .normalize("NFD")
-    .replace(/\p{Diacritic}/gu, "")
-    .toLowerCase()
-    .trim();
-
-type Indexed = Match & { norms: string[] };
-
-// Alternate search names for a place: localized names (from geoPlaces.aliases,
-// e.g. Deutschland for Germany) plus curated city exonyms (e.g. Wien for Vienna).
-function buildNorms(name: string, extra: string[] = []): string[] {
-  const aliases = cityAliases[normalize(name)] ?? [];
-  return [...new Set([name, ...extra, ...aliases].map(normalize))];
-}
-
-// Built once at module load: a slim, diacritic-folded index. Specific
-// destinations rank first (by popularity), then capitals, then countries.
-const destinationMatches: Indexed[] = allDestinations
-  .slice()
-  .sort((a: Destination, b: Destination) => b.basePopularity - a.basePopularity)
-  .map((d: Destination) => ({
-    id: d.id,
-    name: d.name,
-    label: getCountryFlag(d.country) || d.country,
-    lat: d.lat,
-    lng: d.lng,
-    zoom: 8,
-    norms: buildNorms(d.name),
-  }));
-
-// Countries + capitals, skipping any whose name already exists as a destination.
-const seen = new Set(destinationMatches.map((d) => normalize(d.name)));
-const geoMatches: Indexed[] = geoPlaces
-  .filter((p) => !seen.has(normalize(p.name)))
-  .map((p) => ({
-    id: `${p.kind}:${p.cc}`,
-    name: p.name,
-    label: getCountryFlag(p.cc) || p.cc,
-    lat: p.lat,
-    lng: p.lng,
-    zoom: p.zoom,
-    norms: buildNorms(p.name, p.aliases ?? []),
-  }));
-
-const INDEX: Indexed[] = [...destinationMatches, ...geoMatches];
-
-const MAX_RESULTS = 8;
-const MIN_QUERY = 2;
+import { useLocale, useTranslations } from "next-intl";
+import {
+  searchPlaces,
+  matchDisplayName,
+  normalizeQuery,
+  MIN_QUERY,
+  type SearchMatch,
+} from "@/lib/destination-search";
 
 export function HeroDestinationSearch() {
   const t = useTranslations("hero");
+  const locale = useLocale();
   const router = useRouter();
   const [query, setQuery] = useState("");
   const [open, setOpen] = useState(false);
   const [active, setActive] = useState(0);
   const blurTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  const results = useMemo(() => {
-    const q = normalize(query);
-    if (q.length < MIN_QUERY) return [];
-    return INDEX.filter((d) => d.norms.some((n) => n.includes(q))).slice(0, MAX_RESULTS);
-  }, [query]);
+  const results = useMemo(() => searchPlaces(query), [query]);
 
-  const go = (d: Match) => {
+  const go = (d: SearchMatch) => {
     router.push(`/map?lat=${d.lat.toFixed(2)}&lng=${d.lng.toFixed(2)}&zoom=${d.zoom}`);
   };
 
@@ -103,10 +44,21 @@ export function HeroDestinationSearch() {
     }
   };
 
-  const showDropdown = open && normalize(query).length >= MIN_QUERY;
+  const showDropdown = open && normalizeQuery(query).length >= MIN_QUERY;
 
   return (
-    <div className="relative mx-auto max-w-md">
+    <div className="relative max-w-md">
+      <svg
+        aria-hidden
+        className="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-ink-faint"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        strokeWidth={2}
+      >
+        <circle cx="11" cy="11" r="7" />
+        <path strokeLinecap="round" d="m20 20-3.5-3.5" />
+      </svg>
       <input
         type="text"
         value={query}
@@ -123,14 +75,12 @@ export function HeroDestinationSearch() {
         placeholder={t("searchPlaceholder")}
         aria-label={t("searchLabel")}
         autoComplete="off"
-        className="w-full rounded-lg border border-gray-200 bg-white px-5 py-3 text-base text-gray-900 shadow-sm outline-none transition-colors placeholder:text-gray-400 focus:border-brand-400 focus:ring-2 focus:ring-brand-200"
+        className="w-full rounded-[3px] border border-line bg-surface-raised py-3 pl-11 pr-4 text-base text-ink shadow-sm outline-none transition-colors placeholder:text-ink-faint focus:border-accent-2 focus:ring-2 focus:ring-accent-2/20"
       />
       {showDropdown && (
-        <ul className="absolute left-0 right-0 z-50 mt-2 overflow-hidden rounded-lg border border-gray-100 bg-white text-left shadow-lg">
+        <ul className="absolute left-0 right-0 z-50 mt-2 overflow-hidden rounded-[4px] border border-line bg-surface-raised text-left shadow-xl">
           {results.length === 0 ? (
-            <li className="px-5 py-3 text-sm text-gray-400">
-              {t("searchNoResults")}
-            </li>
+            <li className="px-5 py-3 text-sm text-ink-faint">{t("searchNoResults")}</li>
           ) : (
             results.map((d, i) => (
               <li key={d.id}>
@@ -144,14 +94,12 @@ export function HeroDestinationSearch() {
                   onMouseEnter={() => setActive(i)}
                   className={`flex w-full items-center justify-between px-5 py-2.5 text-left text-sm transition-colors ${
                     i === active
-                      ? "bg-brand-50 text-brand-700"
-                      : "text-gray-700 hover:bg-gray-50"
+                      ? "bg-surface-sunken text-accent"
+                      : "text-ink-muted hover:bg-surface-sunken"
                   }`}
                 >
-                  <span className="font-medium">{d.name}</span>
-                  <span className="ml-3 shrink-0 text-xs text-gray-400">
-                    {d.label}
-                  </span>
+                  <span className="font-medium text-ink">{matchDisplayName(d, locale)}</span>
+                  <span className="ml-3 shrink-0 text-xs text-ink-faint">{d.label}</span>
                 </button>
               </li>
             ))
diff --git a/src/components/LanguageSwitcher.tsx b/src/components/LanguageSwitcher.tsx
index 6e2abb0..578553b 100644
--- a/src/components/LanguageSwitcher.tsx
+++ b/src/components/LanguageSwitcher.tsx
@@ -40,7 +40,7 @@ export function LanguageSwitcher({ variant, hrefByLocale, currentLocale }: Props
       <select
         value={locale}
         onChange={handleChange}
-        className="hidden cursor-pointer border-none bg-transparent text-sm text-gray-600 outline-none hover:text-gray-900 sm:inline"
+        className="hidden cursor-pointer border-none bg-transparent text-sm text-ink-muted outline-none hover:text-ink sm:inline"
         aria-label={t("label")}
       >
         {locales.map((l) => (
@@ -57,7 +57,7 @@ export function LanguageSwitcher({ variant, hrefByLocale, currentLocale }: Props
       <select
         value={locale}
         onChange={handleChange}
-        className="cursor-pointer border-none bg-transparent text-sm font-medium text-gray-600 outline-none hover:text-gray-900"
+        className="cursor-pointer border-none bg-transparent text-sm font-medium text-ink-muted outline-none hover:text-ink"
         aria-label={t("label")}
       >
         {locales.map((l) => (
@@ -73,7 +73,7 @@ export function LanguageSwitcher({ variant, hrefByLocale, currentLocale }: Props
     <select
       value={locale}
       onChange={handleChange}
-      className="w-fit cursor-pointer rounded-lg bg-white/95 px-2 py-1 text-xs font-medium text-gray-700 shadow-lg outline-none backdrop-blur-sm"
+      className="w-fit cursor-pointer rounded-[3px] border border-line bg-surface-raised/95 px-2 py-1 text-xs font-medium text-ink-muted shadow-sm outline-none backdrop-blur-sm hover:text-ink"
       aria-label={t("label")}
     >
       {locales.map((l) => (
diff --git a/src/components/MobileNav.tsx b/src/components/MobileNav.tsx
new file mode 100644
index 0000000..3110a75
--- /dev/null
+++ b/src/components/MobileNav.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { LanguageSwitcher } from "@/components/LanguageSwitcher";
+import { ThemeToggle } from "@/components/theme/ThemeToggle";
+import { IconButton } from "@/components/ui/IconButton";
+
+interface NavEntry {
+  href: string;
+  label: string;
+}
+
+interface Props {
+  entries: NavEntry[];
+  menuLabel: string;
+  /** Per-locale hrefs forwarded to the language switcher. */
+  currentLocale?: string;
+  hrefByLocale?: Record<string, string>;
+}
+
+/** Hamburger + dropdown for the marketing header on small screens. */
+export function MobileNav({ entries, menuLabel, currentLocale, hrefByLocale }: Props) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="sm:hidden">
+      <IconButton aria-label={menuLabel} active={open} onClick={() => setOpen((v) => !v)}>
+        {open ? (
+          <svg aria-hidden className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        ) : (
+          <svg aria-hidden className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M4 7h16M4 12h16M4 17h16" />
+          </svg>
+        )}
+      </IconButton>
+
+      {open && (
+        <div className="absolute inset-x-0 top-full border-b border-line bg-surface-raised shadow-lg">
+          <div className="mx-auto flex max-w-6xl flex-col px-4 py-3">
+            {entries.map((entry) => (
+              <Link
+                key={entry.href}
+                href={entry.href}
+                onClick={() => setOpen(false)}
+                className="border-b border-line/60 py-3 text-sm text-ink-muted transition-colors last:border-b-0 hover:text-accent"
+              >
+                {entry.label}
+              </Link>
+            ))}
+            <div className="flex items-center justify-between gap-3 pt-3">
+              <LanguageSwitcher
+                variant="nav"
+                currentLocale={currentLocale}
+                hrefByLocale={hrefByLocale}
+              />
+              <ThemeToggle />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/SiteFooter.tsx b/src/components/SiteFooter.tsx
index d590ceb..9624212 100644
--- a/src/components/SiteFooter.tsx
+++ b/src/components/SiteFooter.tsx
@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
+import { CompassRose } from "@/components/ui/Ornaments";
 
 interface Props {
   /** Render the footer in a specific locale (e.g. a forced-German destination slug). */
@@ -12,33 +13,68 @@ export async function SiteFooter({ locale }: Props) {
     ? await getTranslations({ locale, namespace: "footer" })
     : await getTranslations("footer");
 
+  const links = [
+    { href: "/best-time", label: t("bestTime"), external: false },
+    { href: "/compare", label: t("compare"), external: false },
+    { href: "/privacy", label: t("privacy"), external: false },
+    { href: "/contact", label: t("contact"), external: false },
+    {
+      href: "https://github.com/Manuel10i/packedplaces",
+      label: t("github"),
+      external: true,
+    },
+    {
+      href: "https://github.com/Manuel10i/packedplaces/tree/main/docs",
+      label: t("docs"),
+      external: true,
+    },
+  ];
+
   return (
-    <footer className="border-t border-sand-200 bg-sand-50 py-8">
-      <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 px-6 text-sm text-gray-500 sm:flex-row">
-        <p>{t("copyright", { year: new Date().getFullYear() })}</p>
-        <div className="flex gap-6">
-          <Link href="/privacy" className="transition-colors hover:text-brand-600">
-            {t("privacy")}
-          </Link>
-          <Link href="/contact" className="transition-colors hover:text-brand-600">
-            {t("contact")}
-          </Link>
-          <a
-            href="https://github.com/Manuel10i/packedplaces"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="transition-colors hover:text-brand-600"
-          >
-            {t("github")}
-          </a>
-          <a
-            href="https://github.com/Manuel10i/packedplaces/tree/main/docs"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="transition-colors hover:text-brand-600"
-          >
-            {t("docs")}
-          </a>
+    <footer className="border-t border-line bg-surface-sunken bg-map-grid">
+      <div className="mx-auto max-w-6xl px-4 py-10 sm:px-6">
+        <div className="flex flex-col justify-between gap-8 sm:flex-row sm:items-start">
+          <div className="max-w-xs">
+            <div className="flex items-center gap-3 text-ink-muted">
+              <CompassRose className="h-9 w-9 shrink-0" />
+              <span className="font-display text-lg text-ink">
+                Packed<span className="italic text-accent">Places</span>
+              </span>
+            </div>
+            <p className="mt-3 font-mono text-[11px] uppercase leading-relaxed tracking-widest text-ink-faint">
+              {t("tagline")}
+            </p>
+          </div>
+
+          <nav className="grid grid-cols-2 gap-x-12 gap-y-2 text-sm">
+            {links.map((link) =>
+              link.external ? (
+                <a
+                  key={link.href}
+                  href={link.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-ink-muted transition-colors hover:text-accent"
+                >
+                  {link.label}
+                </a>
+              ) : (
+                <Link
+                  key={link.href}
+                  href={link.href}
+                  className="text-ink-muted transition-colors hover:text-accent"
+                >
+                  {link.label}
+                </Link>
+              ),
+            )}
+          </nav>
+        </div>
+
+        <div className="mt-8 border-t border-line/70 pt-4">
+          <p className="font-mono text-[11px] tracking-wider text-ink-faint">
+            {t("copyright", { year: new Date().getFullYear() })}
+          </p>
         </div>
       </div>
     </footer>
diff --git a/src/components/SiteHeader.tsx b/src/components/SiteHeader.tsx
index 0c787e5..820a845 100644
--- a/src/components/SiteHeader.tsx
+++ b/src/components/SiteHeader.tsx
@@ -1,6 +1,9 @@
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 import { LanguageSwitcher } from "@/components/LanguageSwitcher";
+import { ThemeToggle } from "@/components/theme/ThemeToggle";
+import { MobileNav } from "@/components/MobileNav";
+import { Button } from "@/components/ui/Button";
 
 interface Props {
   /** Render the header in a specific locale (e.g. a forced-German destination slug). */
@@ -24,42 +27,49 @@ export async function SiteHeader({
     ? await getTranslations({ locale, namespace: "nav" })
     : await getTranslations("nav");
 
+  const entries = [
+    { href: "/#how-it-works", label: t("howItWorks") },
+    { href: "/#data", label: t("data") },
+    { href: "/#open-source", label: t("openSource") },
+  ];
+
   return (
-    <nav className="sticky top-0 z-50 border-b border-gray-100 bg-white/90 backdrop-blur-md">
-      <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
-        <Link href="/" className="text-xl font-bold text-gray-900">
-          {t("brand")}
+    <nav className="sticky top-0 z-50 border-b border-line bg-surface/90 backdrop-blur-md">
+      <div className="relative mx-auto flex max-w-6xl items-center justify-between gap-3 px-4 py-3 sm:px-6">
+        <Link href="/" aria-label={t("brand")} className="font-display text-xl text-ink">
+          Packed<span className="italic text-accent">Places</span>
+          <span className="ml-0.5 font-mono text-[10px] uppercase tracking-widest text-ink-faint">
+            .com
+          </span>
         </Link>
-        <div className="flex items-center gap-8">
-          <Link
-            href="/#how-it-works"
-            className="hidden text-sm text-gray-600 transition-colors hover:text-brand-600 sm:inline"
-          >
-            {t("howItWorks")}
-          </Link>
-          <Link
-            href="/#data"
-            className="hidden text-sm text-gray-600 transition-colors hover:text-brand-600 sm:inline"
-          >
-            {t("data")}
-          </Link>
-          <Link
-            href="/#open-source"
-            className="hidden text-sm text-gray-600 transition-colors hover:text-brand-600 sm:inline"
-          >
-            {t("openSource")}
-          </Link>
-          <LanguageSwitcher
-            variant="nav"
+
+        <div className="flex items-center gap-2 sm:gap-5">
+          {entries.map((entry) => (
+            <Link
+              key={entry.href}
+              href={entry.href}
+              className="hidden text-sm text-ink-muted transition-colors hover:text-accent sm:inline"
+            >
+              {entry.label}
+            </Link>
+          ))}
+          <div className="hidden items-center gap-1 sm:flex">
+            <LanguageSwitcher
+              variant="nav"
+              currentLocale={currentLocale}
+              hrefByLocale={hrefByLocale}
+            />
+            <ThemeToggle />
+          </div>
+          <Button href={mapHref} size="sm">
+            {t("openMap")} &rarr;
+          </Button>
+          <MobileNav
+            entries={entries}
+            menuLabel={t("menu")}
             currentLocale={currentLocale}
             hrefByLocale={hrefByLocale}
           />
-          <Link
-            href={mapHref}
-            className="rounded-lg bg-cta-gradient px-4 py-2 text-sm font-medium text-white transition-transform hover:scale-105"
-          >
-            {t("openMap")} &rarr;
-          </Link>
         </div>
       </div>
     </nav>
diff --git a/src/components/best-time/BestTimeFinder.tsx b/src/components/best-time/BestTimeFinder.tsx
new file mode 100644
index 0000000..a7f2e91
--- /dev/null
+++ b/src/components/best-time/BestTimeFinder.tsx
@@ -0,0 +1,345 @@
+"use client";
+
+import { useMemo, useRef, useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { useLocale, useTranslations } from "next-intl";
+import { getISOWeek } from "date-fns";
+import {
+  searchDestinations,
+  matchDisplayName,
+  normalizeQuery,
+  MIN_QUERY,
+  type SearchMatch,
+} from "@/lib/destination-search";
+import { destinations } from "@/lib/data/destinations";
+import { localizedDestinationName } from "@/lib/destinations";
+import { getCountryFlag } from "@/lib/data";
+import { useBusynessSeries } from "@/hooks/useBusynessSeries";
+import { useSavedPlacesStore } from "@/store/useSavedPlacesStore";
+import { getWeekDateRange, getShortMonthNames } from "@/lib/week-dates";
+import { sharePlace } from "@/lib/share";
+import { CrowdCurve } from "@/components/ui/CrowdCurve";
+import { Card } from "@/components/ui/Card";
+import { Chip } from "@/components/ui/Chip";
+import { Button } from "@/components/ui/Button";
+import { IconButton } from "@/components/ui/IconButton";
+import type { Locale } from "@/i18n/config";
+
+const CURRENT_YEAR = new Date().getFullYear();
+const YEARS = [CURRENT_YEAR, CURRENT_YEAR + 1, CURRENT_YEAR + 2];
+
+function matchFromDestinationId(id: string | null): SearchMatch | null {
+  if (!id) return null;
+  const d = destinations.find((x) => x.id === id);
+  if (!d) return null;
+  return {
+    id: d.id,
+    destinationId: d.id,
+    name: d.name,
+    nameDe: localizedDestinationName(d, "de"),
+    label: getCountryFlag(d.country) || d.country,
+    lat: d.lat,
+    lng: d.lng,
+    zoom: 8,
+  };
+}
+
+interface Extremes {
+  minWeek: number;
+  maxWeek: number;
+  topQuiet: number[];
+}
+
+function analyze(values: (number | null)[]): Extremes | "flat" | null {
+  const defined = values
+    .map((v, i) => ({ v, week: i + 1 }))
+    .filter((x): x is { v: number; week: number } => x.v !== null);
+  if (defined.length === 0) return null;
+
+  let min = defined[0];
+  let max = defined[0];
+  for (const x of defined) {
+    if (x.v < min.v) min = x;
+    if (x.v > max.v) max = x;
+  }
+
+  // Saturated/flat curve (e.g. tiny places pinned at 1.0 all year): a
+  // quietest/busiest verdict would be meaningless noise.
+  if (max.v - min.v < 0.02) return "flat";
+
+  // Top quiet weeks, at least 3 weeks apart so they represent distinct windows.
+  const topQuiet: number[] = [];
+  for (const x of [...defined].sort((a, b) => a.v - b.v)) {
+    if (topQuiet.every((w) => Math.abs(w - x.week) > 3)) topQuiet.push(x.week);
+    if (topQuiet.length === 3) break;
+  }
+
+  return { minWeek: min.week, maxWeek: max.week, topQuiet: topQuiet.sort((a, b) => a - b) };
+}
+
+export function BestTimeFinder() {
+  const t = useTranslations("bestTime");
+  const tSaved = useTranslations("saved");
+  const tShare = useTranslations("share");
+  const locale = useLocale() as Locale;
+  const searchParams = useSearchParams();
+
+  const [selected, setSelected] = useState<SearchMatch | null>(() =>
+    matchFromDestinationId(searchParams.get("d")),
+  );
+  const [query, setQuery] = useState(selected ? matchDisplayName(selected, locale) : "");
+  const [open, setOpen] = useState(false);
+  const [active, setActive] = useState(0);
+  const [year, setYear] = useState(CURRENT_YEAR);
+  const [shareState, setShareState] = useState<"idle" | "copied">("idle");
+  const blurTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const { ids: savedIds, toggle, hydrated } = useSavedPlacesStore();
+
+  const results = useMemo(() => searchDestinations(query), [query]);
+  const showDropdown = open && normalizeQuery(query).length >= MIN_QUERY;
+
+  const { data, isLoading } = useBusynessSeries(selected ? [selected.id] : [], year);
+  const values = selected ? data?.series?.[selected.id] : undefined;
+  const analysis = values ? analyze(values) : null;
+  const extremes = analysis !== null && analysis !== "flat" ? analysis : null;
+
+  const isSaved = selected && hydrated ? savedIds.includes(selected.id) : false;
+
+  function pick(d: SearchMatch) {
+    setSelected(d);
+    setQuery(matchDisplayName(d, locale));
+    setOpen(false);
+    setShareState("idle");
+    const url = new URL(window.location.href);
+    url.searchParams.set("d", d.id);
+    window.history.replaceState(null, "", url.toString());
+  }
+
+  async function handleShare() {
+    if (!selected || !extremes) return;
+    const result = await sharePlace({
+      title: `${matchDisplayName(selected, locale)} — PackedPlaces`,
+      text: t("shareText", {
+        name: matchDisplayName(selected, locale),
+        date: getWeekDateRange(year, extremes.minWeek, locale),
+      }),
+      url: window.location.href,
+    });
+    if (result === "copied") {
+      setShareState("copied");
+      setTimeout(() => setShareState("idle"), 2500);
+    }
+  }
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Escape") {
+      setOpen(false);
+      return;
+    }
+    if (!results.length) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActive((i) => Math.min(i + 1, results.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActive((i) => Math.max(i - 1, 0));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      pick(results[active] ?? results[0]);
+    }
+  };
+
+  return (
+    <div>
+      {/* Picker + year */}
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+        <div className="relative max-w-md flex-1">
+          <input
+            type="text"
+            value={query}
+            onChange={(e) => {
+              setQuery(e.target.value);
+              setActive(0);
+              setOpen(true);
+            }}
+            onFocus={() => setOpen(true)}
+            onBlur={() => {
+              blurTimer.current = setTimeout(() => setOpen(false), 120);
+            }}
+            onKeyDown={onKeyDown}
+            placeholder={t("pickerPlaceholder")}
+            aria-label={t("pickerLabel")}
+            autoComplete="off"
+            className="w-full rounded-[3px] border border-line bg-surface-raised px-4 py-3 text-base text-ink shadow-sm outline-none transition-colors placeholder:text-ink-faint focus:border-accent-2 focus:ring-2 focus:ring-accent-2/20"
+          />
+          {showDropdown && (
+            <ul className="absolute left-0 right-0 z-50 mt-2 overflow-hidden rounded-[4px] border border-line bg-surface-raised text-left shadow-xl">
+              {results.length === 0 ? (
+                <li className="px-4 py-3 text-sm text-ink-faint">{t("noResults")}</li>
+              ) : (
+                results.map((d, i) => (
+                  <li key={d.id}>
+                    <button
+                      type="button"
+                      onMouseDown={(e) => {
+                        e.preventDefault();
+                        pick(d);
+                      }}
+                      onMouseEnter={() => setActive(i)}
+                      className={`flex w-full items-center justify-between px-4 py-2.5 text-left text-sm transition-colors ${
+                        i === active ? "bg-surface-sunken text-accent" : "text-ink-muted hover:bg-surface-sunken"
+                      }`}
+                    >
+                      <span className="font-medium text-ink">{matchDisplayName(d, locale)}</span>
+                      <span className="ml-3 shrink-0 text-xs text-ink-faint">{d.label}</span>
+                    </button>
+                  </li>
+                ))
+              )}
+            </ul>
+          )}
+        </div>
+        <div className="flex gap-2">
+          {YEARS.map((y) => (
+            <Chip key={y} selected={y === year} onClick={() => setYear(y)}>
+              {y}
+            </Chip>
+          ))}
+        </div>
+      </div>
+
+      {/* Result */}
+      {!selected && <p className="mt-8 text-sm text-ink-faint">{t("empty")}</p>}
+
+      {selected && (
+        <Card className="mt-8 p-5 sm:p-6">
+          <div className="flex items-start justify-between gap-3">
+            <div>
+              <h2 className="font-display text-2xl text-ink">
+                {matchDisplayName(selected, locale)}
+              </h2>
+              <p className="mt-0.5 font-mono text-[11px] uppercase tracking-widest text-ink-faint">
+                {selected.label} · {year}
+              </p>
+            </div>
+            <div className="flex items-center gap-1">
+              <IconButton
+                aria-label={isSaved ? tSaved("saved") : tSaved("save")}
+                active={isSaved}
+                onClick={() => toggle(selected.id)}
+              >
+                <svg aria-hidden className="h-5 w-5" viewBox="0 0 24 24" fill={isSaved ? "currentColor" : "none"} stroke="currentColor" strokeWidth={1.75}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M11.5 3.6 13.9 8.5l5.4.8-3.9 3.8.9 5.4-4.8-2.5-4.8 2.5.9-5.4L3.6 9.3l5.4-.8Z" />
+                </svg>
+              </IconButton>
+              <IconButton aria-label={tShare("share")} onClick={handleShare}>
+                <svg aria-hidden className="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.75}>
+                  <circle cx="6" cy="12" r="2.5" />
+                  <circle cx="17.5" cy="5.5" r="2.5" />
+                  <circle cx="17.5" cy="18.5" r="2.5" />
+                  <path d="m8.3 10.8 7-4m-7 6.4 7 4" />
+                </svg>
+              </IconButton>
+            </div>
+          </div>
+          {shareState === "copied" && (
+            <p className="mt-1 text-right font-mono text-[11px] uppercase tracking-wider text-accent-2">
+              {tShare("copied")}
+            </p>
+          )}
+
+          {isLoading && !values && <p className="mt-6 text-sm text-ink-faint">{t("loading")}</p>}
+
+          {values && (
+            <>
+              <div className="mt-5 text-ink">
+                <CrowdCurve
+                  series={[{ id: selected.id, values }]}
+                  markMinMax={analysis !== "flat"}
+                  currentWeek={year === CURRENT_YEAR ? getISOWeek(new Date()) : undefined}
+                  ariaLabel={
+                    extremes
+                      ? t("curveAria", {
+                          name: matchDisplayName(selected, locale),
+                          quiet: extremes.minWeek,
+                          busy: extremes.maxWeek,
+                        })
+                      : matchDisplayName(selected, locale)
+                  }
+                  monthLabels={getShortMonthNames(locale)}
+                  className="h-36"
+                />
+              </div>
+
+              {analysis === "flat" && (
+                <p className="mt-5 border-l-2 border-dotted border-accent/50 pl-4 text-sm leading-relaxed text-ink-muted">
+                  {t("flat")}
+                </p>
+              )}
+
+              {extremes && (
+                <>
+                  <div className="mt-6 grid gap-px overflow-hidden rounded-[4px] border border-line bg-line sm:grid-cols-2">
+                    <div className="bg-surface-raised p-4">
+                      <p className="font-mono text-[10px] uppercase tracking-widest text-accent-2">
+                        ○ {t("quietestLabel")}
+                      </p>
+                      <p className="mt-1.5 font-display text-xl text-ink">
+                        {t("weekN", { week: extremes.minWeek })}
+                      </p>
+                      <p className="mt-0.5 text-sm text-ink-muted">
+                        {getWeekDateRange(year, extremes.minWeek, locale)}
+                      </p>
+                    </div>
+                    <div className="bg-surface-raised p-4">
+                      <p className="font-mono text-[10px] uppercase tracking-widest text-accent">
+                        ● {t("busiestLabel")}
+                      </p>
+                      <p className="mt-1.5 font-display text-xl text-ink">
+                        {t("weekN", { week: extremes.maxWeek })}
+                      </p>
+                      <p className="mt-0.5 text-sm text-ink-muted">
+                        {getWeekDateRange(year, extremes.maxWeek, locale)}
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="mt-5">
+                    <p className="font-mono text-[10px] uppercase tracking-widest text-ink-faint">
+                      {t("topWeeksTitle", { year })}
+                    </p>
+                    <ul className="mt-2 divide-y divide-line border-y border-line">
+                      {extremes.topQuiet.map((week, i) => (
+                        <li key={week} className="flex items-baseline gap-4 py-2 text-sm">
+                          <span className="font-mono text-xs text-accent">
+                            {String(i + 1).padStart(2, "0")}
+                          </span>
+                          <span className="font-medium text-ink">{t("weekN", { week })}</span>
+                          <span className="ml-auto text-ink-muted">
+                            {getWeekDateRange(year, week, locale)}
+                          </span>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+
+                  <div className="mt-6 flex flex-wrap gap-3">
+                    <Button
+                      href={`/map?lat=${selected.lat.toFixed(2)}&lng=${selected.lng.toFixed(2)}&zoom=7&week=${extremes.minWeek}&year=${year}`}
+                    >
+                      {t("openOnMap")} &rarr;
+                    </Button>
+                    <Button variant="secondary" href="/compare">
+                      {tSaved("compareCta")}
+                    </Button>
+                  </div>
+                </>
+              )}
+            </>
+          )}
+        </Card>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/compare/CompareView.tsx b/src/components/compare/CompareView.tsx
new file mode 100644
index 0000000..94b8270
--- /dev/null
+++ b/src/components/compare/CompareView.tsx
@@ -0,0 +1,208 @@
+"use client";
+
+import { useMemo, useState, useSyncExternalStore } from "react";
+import { useSearchParams } from "next/navigation";
+import { useLocale, useTranslations } from "next-intl";
+import { destinations } from "@/lib/data/destinations";
+import { localizedDestinationName } from "@/lib/destinations";
+import { getCountryFlag } from "@/lib/data";
+import { useBusynessSeries } from "@/hooks/useBusynessSeries";
+import { useSavedPlacesStore } from "@/store/useSavedPlacesStore";
+import { getWeekDateRange, getShortMonthNames } from "@/lib/week-dates";
+import { sharePlace } from "@/lib/share";
+import { CrowdCurve, SERIES_COLORS } from "@/components/ui/CrowdCurve";
+import { useResolvedTheme } from "@/components/theme/useResolvedTheme";
+import { Card } from "@/components/ui/Card";
+import { Chip } from "@/components/ui/Chip";
+import { Button } from "@/components/ui/Button";
+import type { Locale } from "@/i18n/config";
+
+const CURRENT_YEAR = new Date().getFullYear();
+const YEARS = [CURRENT_YEAR, CURRENT_YEAR + 1, CURRENT_YEAR + 2];
+const MAX_COMPARE = 6;
+
+const DEST_BY_ID = new Map(destinations.map((d) => [d.id, d]));
+
+const emptySubscribe = () => () => {};
+
+function quietestWeek(values: (number | null)[]): number | null {
+  let week: number | null = null;
+  let best = Infinity;
+  values.forEach((v, i) => {
+    if (v !== null && v < best) {
+      best = v;
+      week = i + 1;
+    }
+  });
+  return week;
+}
+
+export function CompareView() {
+  const t = useTranslations("compare");
+  const tShare = useTranslations("share");
+  const locale = useLocale() as Locale;
+  const mode = useResolvedTheme();
+  const searchParams = useSearchParams();
+
+  const { ids: savedIds, toggle, hydrated } = useSavedPlacesStore();
+
+  // ?ids= creates a shareable comparison; otherwise compare saved places.
+  const urlIds = useMemo(
+    () =>
+      (searchParams.get("ids") ?? "")
+        .split(",")
+        .map((s) => s.trim())
+        .filter((id) => DEST_BY_ID.has(id)),
+    [searchParams],
+  );
+  const fromUrl = urlIds.length > 0;
+  const [removed, setRemoved] = useState<string[]>([]);
+  const [year, setYear] = useState(CURRENT_YEAR);
+  const [shareState, setShareState] = useState<"idle" | "copied">("idle");
+
+  const baseIds = fromUrl ? urlIds : savedIds.filter((id) => DEST_BY_ID.has(id));
+  const ids = baseIds.filter((id) => !removed.includes(id)).slice(0, MAX_COMPARE);
+
+  const { data, isLoading } = useBusynessSeries(ids, year);
+
+  // Ready only after hydration so SSR and first client paint agree.
+  const mounted = useSyncExternalStore(
+    emptySubscribe,
+    () => true,
+    () => false,
+  );
+  if (!mounted || (!fromUrl && !hydrated)) return null;
+
+  if (ids.length === 0) {
+    return (
+      <Card className="p-6">
+        <p className="text-ink-muted">{t("empty")}</p>
+        <p className="mt-2 text-sm text-ink-faint">{t("emptyHint")}</p>
+        <div className="mt-5 flex flex-wrap gap-3">
+          <Button href="/best-time">{t("findPlaces")}</Button>
+          <Button variant="secondary" href="/map">
+            {t("openMap")}
+          </Button>
+        </div>
+      </Card>
+    );
+  }
+
+  const series = ids.map((id, i) => ({
+    id,
+    values: data?.series?.[id] ?? new Array<number | null>(52).fill(null),
+    color: SERIES_COLORS[mode][i % SERIES_COLORS[mode].length],
+  }));
+
+  async function handleShare() {
+    const url = new URL(window.location.href);
+    url.searchParams.set("ids", ids.join(","));
+    const result = await sharePlace({
+      title: t("metaTitle"),
+      text: t("shareText", {
+        names: ids
+          .map((id) => localizedDestinationName(DEST_BY_ID.get(id)!, locale))
+          .join(" · "),
+      }),
+      url: url.toString(),
+    });
+    if (result === "copied") {
+      setShareState("copied");
+      setTimeout(() => setShareState("idle"), 2500);
+    }
+  }
+
+  return (
+    <div>
+      <div className="flex flex-wrap items-center gap-2">
+        {ids.map((id, i) => {
+          const d = DEST_BY_ID.get(id)!;
+          return (
+            <span
+              key={id}
+              className="inline-flex items-center gap-1.5 rounded-full border border-line bg-surface-raised py-1 pl-3 pr-1.5 text-xs text-ink"
+            >
+              <span
+                aria-hidden
+                className="h-2 w-2 rounded-full"
+                style={{ backgroundColor: SERIES_COLORS[mode][i % SERIES_COLORS[mode].length] }}
+              />
+              {getCountryFlag(d.country)} {localizedDestinationName(d, locale)}
+              <button
+                type="button"
+                aria-label={t("remove", { name: localizedDestinationName(d, locale) })}
+                onClick={() =>
+                  fromUrl || !savedIds.includes(id) ? setRemoved((r) => [...r, id]) : toggle(id)
+                }
+                className="flex h-5 w-5 items-center justify-center rounded-full text-ink-faint transition-colors hover:bg-surface-sunken hover:text-ink"
+              >
+                <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                  <path strokeLinecap="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </span>
+          );
+        })}
+        <div className="ml-auto flex gap-2">
+          {YEARS.map((y) => (
+            <Chip key={y} selected={y === year} onClick={() => setYear(y)}>
+              {y}
+            </Chip>
+          ))}
+        </div>
+      </div>
+
+      <Card className="mt-5 p-5 sm:p-6">
+        {isLoading && !data ? (
+          <p className="text-sm text-ink-faint">{t("loading")}</p>
+        ) : (
+          <div className="text-ink">
+            <CrowdCurve
+              series={series}
+              ariaLabel={t("curveAria")}
+              monthLabels={getShortMonthNames(locale)}
+              className="h-40"
+            />
+          </div>
+        )}
+
+        <ul className="mt-5 divide-y divide-line border-t border-line">
+          {series.map((s) => {
+            const d = DEST_BY_ID.get(s.id)!;
+            const qw = quietestWeek(s.values);
+            return (
+              <li key={s.id} className="flex items-baseline gap-3 py-2.5 text-sm">
+                <span
+                  aria-hidden
+                  className="h-2.5 w-2.5 shrink-0 self-center rounded-full"
+                  style={{ backgroundColor: s.color }}
+                />
+                <span className="font-medium text-ink">{localizedDestinationName(d, locale)}</span>
+                <span className="text-xs text-ink-faint">{d.country}</span>
+                {qw !== null && (
+                  <span className="ml-auto text-right">
+                    <span className="font-mono text-[10px] uppercase tracking-widest text-ink-faint">
+                      {t("quietestCol")}
+                    </span>{" "}
+                    <span className="text-ink-muted">{getWeekDateRange(year, qw, locale)}</span>
+                  </span>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+
+        <div className="mt-5 flex items-center gap-3">
+          <Button variant="secondary" size="sm" onClick={handleShare}>
+            {tShare("share")}
+          </Button>
+          {shareState === "copied" && (
+            <span className="font-mono text-[11px] uppercase tracking-wider text-accent-2">
+              {tShare("copied")}
+            </span>
+          )}
+        </div>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/components/contact/ContactForm.tsx b/src/components/contact/ContactForm.tsx
index 431539e..73b23b0 100644
--- a/src/components/contact/ContactForm.tsx
+++ b/src/components/contact/ContactForm.tsx
@@ -5,6 +5,9 @@ import { Turnstile, type TurnstileInstance } from "@marsidev/react-turnstile";
 import { useTranslations } from "next-intl";
 import { submitContactForm } from "@/app/(marketing)/contact/actions";
 import { trackEvent } from "@/lib/analytics";
+import { Button } from "@/components/ui/Button";
+import { Input, Textarea } from "@/components/ui/Input";
+import { useResolvedTheme } from "@/components/theme/useResolvedTheme";
 
 type Status = "idle" | "submitting" | "success" | "error";
 
@@ -16,8 +19,12 @@ const ERROR_MAP: Record<string, string> = {
   SERVER_ERROR: "errorServer",
 };
 
+const LABEL_CLASSES =
+  "block font-mono text-[11px] uppercase tracking-widest text-ink-faint";
+
 export function ContactForm() {
   const t = useTranslations("contact");
+  const theme = useResolvedTheme();
   const [status, setStatus] = useState<Status>("idle");
   const [errorKey, setErrorKey] = useState<string | null>(null);
   const turnstileRef = useRef<TurnstileInstance>(null);
@@ -43,11 +50,14 @@ export function ContactForm() {
 
   if (status === "success") {
     return (
-      <div className="rounded-xl border border-green-200 bg-green-50 p-8 text-center">
-        <h2 className="text-xl font-semibold text-green-900">
+      <div className="rounded-[4px] border border-accent-2/40 bg-surface-raised p-8 text-center">
+        <p className="font-mono text-[11px] uppercase tracking-widest text-accent-2">
+          &#10003;
+        </p>
+        <h2 className="mt-3 font-display text-xl text-ink">
           {t("successTitle")}
         </h2>
-        <p className="mt-2 text-sm text-green-700">{t("successText")}</p>
+        <p className="mt-2 text-sm leading-relaxed text-ink-muted">{t("successText")}</p>
       </div>
     );
   }
@@ -55,91 +65,80 @@ export function ContactForm() {
   return (
     <form onSubmit={handleSubmit} className="space-y-6">
       {status === "error" && errorKey && (
-        <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+        <div className="rounded-[3px] border border-accent/50 bg-accent/10 px-4 py-3 text-sm text-ink">
           {t(ERROR_MAP[errorKey] ?? "errorServer")}
         </div>
       )}
 
       <div className="grid gap-6 sm:grid-cols-2">
         <div>
-          <label
-            htmlFor="name"
-            className="block text-sm font-medium text-gray-700"
-          >
+          <label htmlFor="name" className={LABEL_CLASSES}>
             {t("nameLabel")}
           </label>
-          <input
+          <Input
             id="name"
             name="name"
             type="text"
             required
             placeholder={t("namePlaceholder")}
-            className="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500"
+            className="mt-2"
           />
         </div>
         <div>
-          <label
-            htmlFor="email"
-            className="block text-sm font-medium text-gray-700"
-          >
+          <label htmlFor="email" className={LABEL_CLASSES}>
             {t("emailLabel")}
           </label>
-          <input
+          <Input
             id="email"
             name="email"
             type="email"
             required
             placeholder={t("emailPlaceholder")}
-            className="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500"
+            className="mt-2"
           />
         </div>
       </div>
 
       <div>
-        <label
-          htmlFor="subject"
-          className="block text-sm font-medium text-gray-700"
-        >
+        <label htmlFor="subject" className={LABEL_CLASSES}>
           {t("subjectLabel")}
         </label>
-        <input
+        <Input
           id="subject"
           name="subject"
           type="text"
           required
           placeholder={t("subjectPlaceholder")}
-          className="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500"
+          className="mt-2"
         />
       </div>
 
       <div>
-        <label
-          htmlFor="message"
-          className="block text-sm font-medium text-gray-700"
-        >
+        <label htmlFor="message" className={LABEL_CLASSES}>
           {t("messageLabel")}
         </label>
-        <textarea
+        <Textarea
           id="message"
           name="message"
           rows={5}
           required
           placeholder={t("messagePlaceholder")}
-          className="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500"
+          className="mt-2"
         />
       </div>
 
       {siteKey && (
-        <Turnstile ref={turnstileRef} siteKey={siteKey} />
+        <Turnstile ref={turnstileRef} siteKey={siteKey} options={{ theme }} />
       )}
 
-      <button
+      <Button
         type="submit"
         disabled={status === "submitting"}
-        className="rounded-lg bg-cta-gradient px-6 py-3 text-sm font-medium text-white transition-transform hover:scale-105 disabled:opacity-50"
+        size="lg"
+        className="disabled:pointer-events-none disabled:opacity-50"
       >
         {status === "submitting" ? t("submitting") : t("submit")}
-      </button>
+      </Button>
     </form>
   );
 }
diff --git a/src/components/controls/HolidayPanel.tsx b/src/components/controls/HolidayPanel.tsx
index 74f69a4..43df90f 100644
--- a/src/components/controls/HolidayPanel.tsx
+++ b/src/components/controls/HolidayPanel.tsx
@@ -9,6 +9,7 @@ import { getDateLocale } from "@/i18n/date-locale";
 import { getCountryName, getCountryFlag } from "@/lib/data/countries";
 import { REGION_BOUNDS, boundsOverlap } from "@/lib/data/region-bounds";
 import { destinations } from "@/lib/data/destinations";
+import { CATEGORY_EMOJI } from "@/lib/event-categories";
 import type { WorldRegion, MajorEvent } from "@/types";
 
 const DEST_NAME_MAP = new Map(destinations.map((d) => [d.id, d.name]));
@@ -26,14 +27,6 @@ const REGION_LABEL_KEYS: Record<WorldRegion, string> = {
 
 const REGION_ORDER: WorldRegion[] = ["europe", "middle-east", "asia", "americas", "oceania", "africa"];
 
-const CATEGORY_EMOJI: Record<MajorEvent["category"], string> = {
-  sports: "\u26BD",
-  festival: "\uD83C\uDF89",
-  cultural: "\uD83C\uDFAD",
-  music: "\uD83C\uDFB5",
-  trade: "\uD83D\uDCBC",
-};
-
 const CATEGORY_ORDER: MajorEvent["category"][] = ["sports", "festival", "cultural", "music", "trade"];
 
 // Map country codes to world regions for grouping
@@ -47,7 +40,7 @@ interface HolidayPanelProps {
   className?: string;
 }
 
-export function HolidayPanel({ className = "max-h-[70vh] overflow-y-auto rounded-xl bg-white/95 p-4 shadow-lg backdrop-blur-sm" }: HolidayPanelProps) {
+export function HolidayPanel({ className = "max-h-[70vh] overflow-y-auto rounded-[4px] border border-line bg-surface-raised/95 p-4 backdrop-blur-sm" }: HolidayPanelProps) {
   const { selectedWeek, selectedYear, viewportBounds } = useMapStore();
   const { data: holidays } = useHolidayData(selectedWeek, selectedYear);
   const { data: heatmapData } = useHeatmapData(selectedWeek, selectedYear);
@@ -129,7 +122,7 @@ export function HolidayPanel({ className = "max-h-[70vh] overflow-y-auto rounded
       {/* ===== School Holidays section ===== */}
       <button
         onClick={() => setHolidaysOpen((v) => !v)}
-        className="flex w-full items-center gap-2 text-sm font-semibold text-gray-700 hover:text-gray-900"
+        className="flex w-full items-center gap-2 font-display text-sm text-ink hover:text-accent"
       >
         <span
           className="text-[10px] transition-transform"
@@ -138,7 +131,7 @@ export function HolidayPanel({ className = "max-h-[70vh] overflow-y-auto rounded
           &#9662;
         </span>
         {tH("title")}
-        <span className="ml-auto rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-normal text-gray-500">
+        <span className="ml-auto rounded-full border border-line bg-surface-sunken px-2 py-0.5 font-mono text-[10px] text-ink-muted">
           {holidayCount}
         </span>
       </button>
@@ -146,7 +139,7 @@ export function HolidayPanel({ className = "max-h-[70vh] overflow-y-auto rounded
       {holidaysOpen && (
         <div className="mt-2">
           {holidayCount === 0 ? (
-            <p className="text-xs text-gray-400">{tH("noHolidays")}</p>
+            <p className="text-xs text-ink-faint">{tH("noHolidays")}</p>
           ) : (
             activeRegions.map((worldRegion) => {
               const countryCodes = byWorldRegion.get(worldRegion)!;
@@ -158,7 +151,7 @@ export function HolidayPanel({ className = "max-h-[70vh] overflow-y-auto rounded
                   {showRegionHeaders && (
                     <button
                       onClick={() => toggleRegion(worldRegion)}
-                      className="mb-1.5 flex w-full items-center gap-1 text-xs font-bold uppercase tracking-wider text-gray-400 hover:text-gray-600"
+                      className="mb-1.5 flex w-full items-center gap-1 font-mono text-[10px] uppercase tracking-widest text-ink-faint hover:text-ink-muted"
                     >
                       <span className="transition-transform" style={{ transform: isCollapsed ? "rotate(-90deg)" : "rotate(0)" }}>
                         &#9662;
@@ -176,14 +169,14 @@ export function HolidayPanel({ className = "max-h-[70vh] overflow-y-auto rounded
                         <div key={countryCode} className="mb-3 last:mb-0">
                           <button
                             onClick={() => toggleCountry(countryCode)}
-                            className="mb-1.5 flex w-full items-center gap-1 text-xs font-semibold text-gray-500 hover:text-gray-700"
+                            className="mb-1.5 flex w-full items-center gap-1 text-xs font-semibold text-ink-muted hover:text-ink"
                           >
                             <span className="text-[10px] transition-transform" style={{ transform: isCountryCollapsed ? "rotate(-90deg)" : "rotate(0)" }}>
                               &#9662;
                             </span>
                             {getCountryFlag(countryCode)} {getCountryName(countryCode)}
                             {isCountryCollapsed && (
-                              <span className="ml-auto rounded-full bg-gray-100 px-1.5 py-0.5 text-[10px] font-normal text-gray-400">
+                              <span className="ml-auto rounded-full bg-surface-sunken px-1.5 py-0.5 font-mono text-[10px] font-normal text-ink-faint">
                                 {countryHolidays.length}
                               </span>
                             )}
@@ -192,10 +185,10 @@ export function HolidayPanel({ className = "max-h-[70vh] overflow-y-auto rounded
                             countryHolidays.map((h, i) => (
                               <div
                                 key={`${h.regionId}-${i}`}
-                                className="mb-1 rounded-md bg-gray-50 px-2.5 py-1.5 last:mb-0"
+                                className="mb-1 rounded-[3px] border-l-2 border-brand-400/60 bg-surface-sunken px-2.5 py-1.5 last:mb-0"
                               >
-                                <div className="text-xs font-medium text-gray-700">{h.regionName}</div>
-                                <div className="text-xs text-gray-500">
+                                <div className="text-xs font-medium text-ink">{h.regionName}</div>
+                                <div className="text-xs text-ink-muted">
                                   {h.holidayName} &middot; {formatRange(h.startDate, h.endDate, dateLocale)}
                                 </div>
                               </div>
@@ -211,12 +204,12 @@ export function HolidayPanel({ className = "max-h-[70vh] overflow-y-auto rounded
       )}
 
       {/* ===== Divider ===== */}
-      <div className="my-3 border-t border-gray-100" />
+      <div className="my-3 border-t border-line" />
 
       {/* ===== Major Events section ===== */}
       <button
         onClick={() => setEventsOpen((v) => !v)}
-        className="flex w-full items-center gap-2 text-sm font-semibold text-gray-700 hover:text-gray-900"
+        className="flex w-full items-center gap-2 font-display text-sm text-ink hover:text-accent"
       >
         <span
           className="text-[10px] transition-transform"
@@ -225,7 +218,7 @@ export function HolidayPanel({ className = "max-h-[70vh] overflow-y-auto rounded
           &#9662;
         </span>
         {tE("title")}
-        <span className="ml-auto rounded-full bg-orange-100 px-2 py-0.5 text-[10px] font-normal text-orange-600">
+        <span className="ml-auto rounded-full border border-sunset-200 bg-sunset-50 px-2 py-0.5 font-mono text-[10px] text-accent">
           {eventCount}
         </span>
       </button>
@@ -233,23 +226,23 @@ export function HolidayPanel({ className = "max-h-[70vh] overflow-y-auto rounded
       {eventsOpen && (
         <div className="mt-2">
           {eventCount === 0 ? (
-            <p className="text-xs text-gray-400">{tE("noEvents")}</p>
+            <p className="text-xs text-ink-faint">{tE("noEvents")}</p>
           ) : (
             activeCategories.map((category) => {
               const categoryEvents = byCategory.get(category)!;
               return (
                 <div key={category} className="mb-2 last:mb-0">
-                  <div className="mb-1.5 flex items-center gap-1 text-xs font-bold uppercase tracking-wider text-gray-400">
+                  <div className="mb-1.5 flex items-center gap-1 font-mono text-[10px] uppercase tracking-widest text-ink-faint">
                     <span>{CATEGORY_EMOJI[category]}</span>
                     {tE(category)}
                   </div>
                   {categoryEvents.map((event) => (
                     <div
                       key={event.id}
-                      className="mb-1 rounded-md bg-orange-50 px-2.5 py-1.5 last:mb-0"
+                      className="mb-1 rounded-[3px] border-l-2 border-accent/60 bg-surface-sunken px-2.5 py-1.5 last:mb-0"
                     >
-                      <div className="text-xs font-medium text-gray-700">{event.name}</div>
-                      <div className="text-xs text-gray-500">
+                      <div className="text-xs font-medium text-ink">{event.name}</div>
+                      <div className="text-xs text-ink-muted">
                         {DEST_NAME_MAP.get(event.destinationId) ?? event.destinationId}
                         {" \u00b7 "}
                         {formatRange(event.startDate, event.endDate, dateLocale)}
diff --git a/src/components/controls/LayerToggle.tsx b/src/components/controls/LayerToggle.tsx
index ae7053a..fa1f91b 100644
--- a/src/components/controls/LayerToggle.tsx
+++ b/src/components/controls/LayerToggle.tsx
@@ -3,6 +3,7 @@
 import { useState, useRef, useEffect } from "react";
 import { useTranslations } from "next-intl";
 import { useMapStore } from "@/store/useMapStore";
+import { Switch } from "@/components/ui/Switch";
 
 interface LayerToggleProps {
   variant?: "card" | "dropdown";
@@ -17,48 +18,38 @@ export function LayerToggle({ variant = "card" }: LayerToggleProps) {
   const setShowEvents = useMapStore((s) => s.setShowEvents);
   const setShowHolidayRegions = useMapStore((s) => s.setShowHolidayRegions);
 
-  const checkboxes = (
+  const rows: { label: string; checked: boolean; onChange: (v: boolean) => void }[] = [
+    { label: t("heatmap"), checked: showHeatmap, onChange: setShowHeatmap },
+    { label: t("events"), checked: showEvents, onChange: setShowEvents },
+    { label: t("holidayRegions"), checked: showHolidayRegions, onChange: setShowHolidayRegions },
+  ];
+
+  const toggles = (
     <>
-      <label className="flex cursor-pointer items-center gap-2 text-xs text-gray-700">
-        <input
-          type="checkbox"
-          checked={showHeatmap}
-          onChange={(e) => setShowHeatmap(e.target.checked)}
-          className="accent-indigo-600"
-        />
-        {t("heatmap")}
-      </label>
-      <label className="flex cursor-pointer items-center gap-2 text-xs text-gray-700">
-        <input
-          type="checkbox"
-          checked={showEvents}
-          onChange={(e) => setShowEvents(e.target.checked)}
-          className="accent-indigo-600"
-        />
-        {t("events")}
-      </label>
-      <label className="flex cursor-pointer items-center gap-2 text-xs text-gray-700">
-        <input
-          type="checkbox"
-          checked={showHolidayRegions}
-          onChange={(e) => setShowHolidayRegions(e.target.checked)}
-          className="accent-indigo-600"
-        />
-        {t("holidayRegions")}
-      </label>
+      {rows.map((row) => (
+        <label
+          key={row.label}
+          className="flex cursor-pointer items-center justify-between gap-3 py-0.5 text-xs text-ink-muted"
+        >
+          {row.label}
+          <Switch checked={row.checked} onChange={row.onChange} aria-label={row.label} />
+        </label>
+      ))}
     </>
   );
 
   if (variant === "card") {
     return (
-      <div className="rounded-xl bg-white/95 px-4 py-3 shadow-lg backdrop-blur-sm">
-        <div className="mb-1.5 text-xs font-semibold text-gray-500">{t("title")}</div>
-        <div className="flex flex-col gap-1.5">{checkboxes}</div>
+      <div className="rounded-[4px] border border-line bg-surface-raised/95 px-4 py-3 backdrop-blur-sm">
+        <div className="mb-1.5 font-mono text-[10px] uppercase tracking-widest text-ink-muted">
+          {t("title")}
+        </div>
+        <div className="flex flex-col gap-1.5">{toggles}</div>
       </div>
     );
   }
 
-  return <LayerDropdown title={t("title")}>{checkboxes}</LayerDropdown>;
+  return <LayerDropdown title={t("title")}>{toggles}</LayerDropdown>;
 }
 
 function LayerDropdown({ title, children }: { title: string; children: React.ReactNode }) {
@@ -78,7 +69,9 @@ function LayerDropdown({ title, children }: { title: string; children: React.Rea
     <div ref={ref} className="relative">
       <button
         onClick={() => setOpen((v) => !v)}
-        className="flex items-center gap-1 rounded-md px-2 py-1.5 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
+        className={`flex items-center gap-1 rounded-[3px] px-2 py-1.5 text-sm font-medium transition-colors ${
+          open ? "bg-surface-sunken text-ink" : "text-ink-muted hover:bg-surface-sunken hover:text-ink"
+        }`}
       >
         <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
           <path strokeLinecap="round" strokeLinejoin="round" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
@@ -86,7 +79,7 @@ function LayerDropdown({ title, children }: { title: string; children: React.Rea
         {title}
       </button>
       {open && (
-        <div className="absolute right-0 top-full z-50 mt-1 min-w-[160px] rounded-lg bg-white p-3 shadow-lg ring-1 ring-black/5">
+        <div className="absolute right-0 top-full z-50 mt-1 min-w-[190px] rounded-[4px] border border-line bg-surface-raised p-3 shadow-xl">
           <div className="flex flex-col gap-1.5">{children}</div>
         </div>
       )}
diff --git a/src/components/controls/Legend.tsx b/src/components/controls/Legend.tsx
index 9dc0202..a099456 100644
--- a/src/components/controls/Legend.tsx
+++ b/src/components/controls/Legend.tsx
@@ -1,26 +1,29 @@
 "use client";
 
 import { useTranslations } from "next-intl";
+import { crowdCssGradient } from "@/lib/crowd-palette";
+import { useResolvedTheme } from "@/components/theme/useResolvedTheme";
 
 interface LegendProps {
   className?: string;
 }
 
-export function Legend({ className = "rounded-xl bg-white/95 px-4 py-3 shadow-lg backdrop-blur-sm" }: LegendProps) {
+export function Legend({ className = "rounded-md border border-line bg-surface-raised/95 px-4 py-3 backdrop-blur-sm" }: LegendProps) {
   const t = useTranslations("legend");
+  const mode = useResolvedTheme();
 
   return (
     <div className={className}>
-      <div className="mb-1.5 text-xs font-semibold text-gray-500">{t("title")}</div>
+      <div className="mb-1.5 font-mono text-[10px] uppercase tracking-widest text-ink-muted">
+        {t("title")}
+      </div>
       <div className="flex items-center gap-2">
-        <span className="text-xs text-gray-500">{t("quiet")}</span>
+        <span className="text-xs text-ink-muted">{t("quiet")}</span>
         <div
-          className="h-3 flex-1 rounded-full"
-          style={{
-            background: "linear-gradient(to right, #22c55e, #facc15, #f97316, #dc2626)",
-          }}
+          className="h-2.5 flex-1 rounded-full"
+          style={{ background: crowdCssGradient(mode) }}
         />
-        <span className="text-xs text-gray-500">{t("packed")}</span>
+        <span className="text-xs text-ink-muted">{t("packed")}</span>
       </div>
     </div>
   );
diff --git a/src/components/controls/TimeSlider.tsx b/src/components/controls/TimeSlider.tsx
index 772ee6c..09ed59b 100644
--- a/src/components/controls/TimeSlider.tsx
+++ b/src/components/controls/TimeSlider.tsx
@@ -7,19 +7,9 @@ import { useTranslations, useLocale } from "next-intl";
 import { useMapStore } from "@/store/useMapStore";
 import { format, getISOWeek } from "date-fns";
 import { getDateLocale } from "@/i18n/date-locale";
+import { getWeekDateRange } from "@/lib/week-dates";
 import type { Locale } from "@/i18n/config";
 
-function getWeekDateRange(year: number, week: number, locale: Locale): string {
-  const dateLocale = getDateLocale(locale);
-  const jan4 = new Date(year, 0, 4);
-  const dayOfWeek = jan4.getDay() || 7;
-  const monday = new Date(jan4);
-  monday.setDate(jan4.getDate() - dayOfWeek + 1 + (week - 1) * 7);
-  const sunday = new Date(monday);
-  sunday.setDate(monday.getDate() + 6);
-  return `${format(monday, "MMM d", { locale: dateLocale })} - ${format(sunday, "MMM d, yyyy", { locale: dateLocale })}`;
-}
-
 function getMonthMarks(locale: Locale): Record<number, string> {
   const dateLocale = getDateLocale(locale);
   const marks: Record<number, string> = {};
@@ -36,7 +26,7 @@ interface TimeSliderProps {
   className?: string;
 }
 
-export function TimeSlider({ className = "rounded-xl bg-white/95 px-5 py-4 shadow-lg backdrop-blur-sm" }: TimeSliderProps) {
+export function TimeSlider({ className = "" }: TimeSliderProps) {
   const { selectedWeek, selectedYear, isPlaying, setSelectedWeek, setSelectedYear, togglePlaying, advanceWeek } = useMapStore();
   const t = useTranslations("slider");
   const locale = useLocale() as Locale;
@@ -54,36 +44,38 @@ export function TimeSlider({ className = "rounded-xl bg-white/95 px-5 py-4 shado
     };
   }, [isPlaying, advanceWeek]);
 
+  const isCurrentWeek =
+    selectedWeek === getISOWeek(new Date()) && selectedYear === new Date().getFullYear();
+
   return (
     <div className={className}>
-      <div className="mb-1 flex items-center justify-between">
+      <div className="mb-1 flex items-center justify-between gap-2">
         <div className="flex items-center gap-2">
-          <span className="text-sm font-semibold text-gray-700">
-            {t("week", { week: selectedWeek })}
-          </span>
-          {!(selectedWeek === getISOWeek(new Date()) && selectedYear === new Date().getFullYear()) && (
+          <span className="font-mono text-sm text-ink">{t("week", { week: selectedWeek })}</span>
+          {!isCurrentWeek && (
             <button
               onClick={() => {
                 const now = new Date();
                 setSelectedYear(now.getFullYear());
                 setSelectedWeek(getISOWeek(now));
               }}
-              className="rounded px-1.5 py-0.5 text-xs font-medium text-blue-600 transition-colors hover:bg-blue-50"
+              className="rounded-full border border-line px-2 py-0.5 font-mono text-[10px] uppercase tracking-wider text-accent-2 transition-colors hover:border-accent-2"
             >
               {t("today")}
             </button>
           )}
         </div>
-        <span className="text-sm text-gray-500">
+        <span className="truncate text-sm text-ink-faint">
           {getWeekDateRange(selectedYear, selectedWeek, locale)}
         </span>
       </div>
 
-      <div className="flex items-center gap-3">
+      <div className="flex items-center gap-1.5 sm:gap-3">
         <button
           onClick={togglePlaying}
-          className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-600 text-white transition-colors hover:bg-blue-700"
+          className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-accent-2 text-accent-2-ink transition-colors hover:bg-accent-2-hover sm:h-8 sm:w-8"
           title={isPlaying ? t("pause") : t("play")}
+          aria-label={isPlaying ? t("pause") : t("play")}
         >
           {isPlaying ? (
             <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
@@ -97,27 +89,37 @@ export function TimeSlider({ className = "rounded-xl bg-white/95 px-5 py-4 shado
           )}
         </button>
 
-        <div className="flex-1">
+        <button
+          onClick={() => setSelectedWeek(Math.max(1, selectedWeek - 1))}
+          disabled={selectedWeek <= 1}
+          className="flex h-10 w-10 shrink-0 items-center justify-center rounded-[3px] text-ink-muted transition-colors hover:bg-surface-sunken hover:text-ink disabled:opacity-30 sm:hidden"
+          aria-label={t("prevWeek")}
+        >
+          <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+          </svg>
+        </button>
+
+        <div className="min-w-0 flex-1 px-1 pb-4">
           <Slider
             min={1}
             max={52}
             value={selectedWeek}
             onChange={(value) => setSelectedWeek(value as number)}
             marks={getMonthMarks(locale)}
-            styles={{
-              track: { backgroundColor: "#3b82f6", height: 4 },
-              rail: { backgroundColor: "#e5e7eb", height: 4 },
-              handle: {
-                borderColor: "#3b82f6",
-                backgroundColor: "#ffffff",
-                width: 16,
-                height: 16,
-                marginTop: -6,
-                opacity: 1,
-              },
-            }}
           />
         </div>
+
+        <button
+          onClick={() => setSelectedWeek(Math.min(52, selectedWeek + 1))}
+          disabled={selectedWeek >= 52}
+          className="flex h-10 w-10 shrink-0 items-center justify-center rounded-[3px] text-ink-muted transition-colors hover:bg-surface-sunken hover:text-ink disabled:opacity-30 sm:hidden"
+          aria-label={t("nextWeek")}
+        >
+          <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+          </svg>
+        </button>
       </div>
     </div>
   );
diff --git a/src/components/controls/YearSelector.tsx b/src/components/controls/YearSelector.tsx
index 4075688..5734f02 100644
--- a/src/components/controls/YearSelector.tsx
+++ b/src/components/controls/YearSelector.tsx
@@ -9,7 +9,9 @@ interface YearSelectorProps {
   className?: string;
 }
 
-export function YearSelector({ className = "flex w-fit gap-1 rounded-lg bg-white/95 p-1 shadow-lg backdrop-blur-sm" }: YearSelectorProps) {
+export function YearSelector({
+  className = "flex w-fit gap-1 rounded-[3px] border border-line bg-surface-sunken p-1",
+}: YearSelectorProps) {
   const { selectedYear, setSelectedYear } = useMapStore();
 
   return (
@@ -18,10 +20,10 @@ export function YearSelector({ className = "flex w-fit gap-1 rounded-lg bg-white
         <button
           key={year}
           onClick={() => setSelectedYear(year)}
-          className={`rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${
+          className={`rounded-[2px] px-3 py-1.5 font-mono text-sm transition-colors ${
             selectedYear === year
-              ? "bg-blue-600 text-white"
-              : "text-gray-600 hover:bg-gray-100"
+              ? "bg-accent-2 text-accent-2-ink"
+              : "text-ink-muted hover:bg-surface-raised hover:text-ink"
           }`}
         >
           {year}
diff --git a/src/components/controls/__tests__/Legend.test.tsx b/src/components/controls/__tests__/Legend.test.tsx
index 234ef12..2fbc650 100644
--- a/src/components/controls/__tests__/Legend.test.tsx
+++ b/src/components/controls/__tests__/Legend.test.tsx
@@ -1,6 +1,7 @@
 import { describe, it, expect } from "vitest";
 import { screen } from "@testing-library/react";
 import { renderWithIntl } from "@/test-utils";
+import { crowdCssGradient } from "@/lib/crowd-palette";
 import { Legend } from "../Legend";
 
 describe("Legend", () => {
@@ -15,15 +16,10 @@ describe("Legend", () => {
     expect(screen.getByText("Packed")).toBeInTheDocument();
   });
 
-  it("renders the gradient bar div", () => {
+  it("renders the gradient bar with the crowd-palette ramp", () => {
     const { container } = renderWithIntl(<Legend />);
-    const gradientBar = container.querySelector(
-      ".h-3.flex-1.rounded-full",
-    );
+    const gradientBar = container.querySelector(".flex-1.rounded-full");
     expect(gradientBar).toBeInTheDocument();
-    expect(gradientBar).toHaveStyle({
-      background:
-        "linear-gradient(to right, #22c55e, #facc15, #f97316, #dc2626)",
-    });
+    expect(gradientBar).toHaveStyle({ background: crowdCssGradient("light") });
   });
 });
diff --git a/src/components/controls/__tests__/YearSelector.test.tsx b/src/components/controls/__tests__/YearSelector.test.tsx
index 395c316..6862cec 100644
--- a/src/components/controls/__tests__/YearSelector.test.tsx
+++ b/src/components/controls/__tests__/YearSelector.test.tsx
@@ -26,15 +26,15 @@ describe("YearSelector", () => {
     expect(useMapStore.getState().selectedYear).toBe(currentYear + 1);
   });
 
-  it("current year button has the selected style (bg-blue-600)", () => {
+  it("current year button has the selected style (bg-accent-2)", () => {
     render(<YearSelector />);
     const currentYearButton = screen.getByText(String(currentYear));
-    expect(currentYearButton.className).toContain("bg-blue-600");
+    expect(currentYearButton.className).toContain("bg-accent-2");
   });
 
-  it("non-selected year buttons do not have bg-blue-600", () => {
+  it("non-selected year buttons do not have bg-accent-2", () => {
     render(<YearSelector />);
     const nextYearButton = screen.getByText(String(currentYear + 1));
-    expect(nextYearButton.className).not.toContain("bg-blue-600");
+    expect(nextYearButton.className).not.toContain("bg-accent-2");
   });
 });
diff --git a/src/components/destination/DestinationActions.tsx b/src/components/destination/DestinationActions.tsx
new file mode 100644
index 0000000..a315a42
--- /dev/null
+++ b/src/components/destination/DestinationActions.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import { useState } from "react";
+import { useSavedPlacesStore } from "@/store/useSavedPlacesStore";
+import { sharePlace, type ShareData } from "@/lib/share";
+import { Button } from "@/components/ui/Button";
+
+interface Props {
+  destinationId: string;
+  /** Localized labels passed from the server so forced-locale pages stay consistent. */
+  saveLabel: string;
+  savedLabel: string;
+  shareLabel: string;
+  copiedLabel: string;
+  share: ShareData;
+}
+
+/** Save star + share button for a destination page. */
+export function DestinationActions({
+  destinationId,
+  saveLabel,
+  savedLabel,
+  shareLabel,
+  copiedLabel,
+  share,
+}: Props) {
+  const { ids, toggle, hydrated } = useSavedPlacesStore();
+  const saved = hydrated && ids.includes(destinationId);
+  const [copied, setCopied] = useState(false);
+
+  async function handleShare() {
+    const result = await sharePlace(share);
+    if (result === "copied") {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2500);
+    }
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-3">
+      <Button variant="secondary" size="sm" onClick={() => toggle(destinationId)}>
+        <svg
+          aria-hidden
+          className={`h-4 w-4 ${saved ? "text-accent" : ""}`}
+          viewBox="0 0 24 24"
+          fill={saved ? "currentColor" : "none"}
+          stroke="currentColor"
+          strokeWidth={1.75}
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" d="M11.5 3.6 13.9 8.5l5.4.8-3.9 3.8.9 5.4-4.8-2.5-4.8 2.5.9-5.4L3.6 9.3l5.4-.8Z" />
+        </svg>
+        {saved ? savedLabel : saveLabel}
+      </Button>
+      <Button variant="secondary" size="sm" onClick={handleShare}>
+        <svg aria-hidden className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.75}>
+          <circle cx="6" cy="12" r="2.5" />
+          <circle cx="17.5" cy="5.5" r="2.5" />
+          <circle cx="17.5" cy="18.5" r="2.5" />
+          <path d="m8.3 10.8 7-4m-7 6.4 7 4" />
+        </svg>
+        {shareLabel}
+      </Button>
+      {copied && (
+        <span className="font-mono text-[11px] uppercase tracking-wider text-accent-2">
+          {copiedLabel}
+        </span>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/features/FeaturePageShell.tsx b/src/components/features/FeaturePageShell.tsx
index 427d9c7..9dddcf8 100644
--- a/src/components/features/FeaturePageShell.tsx
+++ b/src/components/features/FeaturePageShell.tsx
@@ -2,6 +2,7 @@ import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 import { SiteHeader } from "@/components/SiteHeader";
 import { SiteFooter } from "@/components/SiteFooter";
+import { Button } from "@/components/ui/Button";
 
 const FEATURE_SLUGS = [
   { slug: "crowdedness", key: "crowdedness" },
@@ -23,68 +24,84 @@ export async function FeaturePageShell({ slug, children }: Props) {
   const shell = await getTranslations("featurePages.shell");
   const feature = await getTranslations(`featurePages.${FEATURE_SLUGS.find((f) => f.slug === slug)?.key ?? slug}`);
 
-  const others = FEATURE_SLUGS.filter((f) => f.slug !== slug);
+  const others = FEATURE_SLUGS.map((f, i) => ({ ...f, index: i + 1 })).filter(
+    (f) => f.slug !== slug,
+  );
 
   return (
     <>
       <SiteHeader />
 
-      <section className="bg-white pb-12 pt-8">
+      <section className="bg-atlas-field pb-12 pt-8">
         <div className="mx-auto max-w-4xl px-6">
           <Link
             href="/#features"
-            className="text-sm text-gray-500 transition-colors hover:text-brand-600"
+            className="font-mono text-[11px] uppercase tracking-widest text-ink-faint transition-colors hover:text-accent"
           >
             &larr; {shell("back")}
           </Link>
-          <h1 className="animate-on-scroll mt-6 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+          <h1 className="animate-on-scroll mt-6 font-display text-4xl leading-[1.1] text-ink sm:text-5xl">
             {feature("title")}
           </h1>
-          <p className="animate-on-scroll-delay-1 mt-4 max-w-2xl text-lg text-gray-600">
+          <div aria-hidden className="mt-5 h-px w-16 bg-accent/70" />
+          <p className="animate-on-scroll-delay-1 mt-5 max-w-2xl text-lg leading-relaxed text-ink-muted">
             {feature("subtitle")}
           </p>
         </div>
       </section>
 
-      <section className="bg-white pb-20">
+      <section className="bg-surface pb-20 pt-12">
         <div className="mx-auto max-w-4xl px-6">{children}</div>
       </section>
 
-      <section className="border-t border-sand-200 bg-section-warm py-16">
+      <section className="border-t border-line bg-surface-sunken py-16">
         <div className="mx-auto max-w-4xl px-6">
-          <h2 className="text-lg font-semibold text-gray-900">
+          <h2 className="font-display text-2xl text-ink">
             {shell("exploreOther")}
           </h2>
-          <div className="mt-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          <div aria-hidden className="mt-4 h-px w-16 bg-accent/70" />
+          <div className="mt-6 grid gap-x-12 md:grid-cols-2">
             {others.map((f) => (
               <Link
                 key={f.slug}
                 href={`/features/${f.slug}`}
-                className="card-hover-lift rounded-lg border border-gray-200 bg-white p-4"
+                className="group flex gap-4 border-b border-line py-4 transition-colors hover:border-accent"
               >
-                <h3 className="text-sm font-semibold text-gray-900">
-                  {nav(`${f.key}Title`)}
-                </h3>
-                <p className="mt-1 text-xs text-gray-500">
-                  {nav(`${f.key}Desc`)}
-                </p>
+                <span className="pt-0.5 font-mono text-xs text-accent">
+                  {String(f.index).padStart(2, "0")}
+                </span>
+                <span className="min-w-0 flex-1">
+                  <span className="flex items-baseline justify-between gap-3">
+                    <h3 className="font-display text-base text-ink transition-colors group-hover:text-accent">
+                      {nav(`${f.key}Title`)}
+                    </h3>
+                    <span
+                      aria-hidden
+                      className="text-ink-faint transition-all group-hover:translate-x-1 group-hover:text-accent"
+                    >
+                      &rarr;
+                    </span>
+                  </span>
+                  <p className="mt-1 text-xs leading-relaxed text-ink-muted">
+                    {nav(`${f.key}Desc`)}
+                  </p>
+                </span>
               </Link>
             ))}
           </div>
         </div>
       </section>
 
-      <section className="bg-white py-16 text-center">
-        <h2 className="text-2xl font-bold text-gray-900">
-          {shell("seeInAction")}
-        </h2>
-        <p className="mt-2 text-gray-600">{shell("mapDesc")}</p>
-        <Link
-          href="/map"
-          className="mt-6 inline-block rounded-lg bg-cta-gradient px-8 py-3 text-base font-medium text-white transition-transform hover:scale-105"
-        >
-          {shell("openMap")} &rarr;
-        </Link>
+      <section className="border-t border-line bg-surface bg-map-grid py-16 text-center">
+        <div className="mx-auto max-w-4xl px-6">
+          <h2 className="font-display text-3xl text-ink">
+            {shell("seeInAction")}
+          </h2>
+          <p className="mt-3 text-ink-muted">{shell("mapDesc")}</p>
+          <Button href="/map" size="lg" className="mt-8">
+            {shell("openMap")} &rarr;
+          </Button>
+        </div>
       </section>
 
       <SiteFooter />
diff --git a/src/components/map/DestinationSheet.tsx b/src/components/map/DestinationSheet.tsx
new file mode 100644
index 0000000..1e85228
--- /dev/null
+++ b/src/components/map/DestinationSheet.tsx
@@ -0,0 +1,135 @@
+"use client";
+
+import { useLocale, useTranslations } from "next-intl";
+import { getISOWeek } from "date-fns";
+import { Sheet } from "@/components/ui/Sheet";
+import { CrowdCurve } from "@/components/ui/CrowdCurve";
+import { Button } from "@/components/ui/Button";
+import { IconButton } from "@/components/ui/IconButton";
+import { useBusynessSeries } from "@/hooks/useBusynessSeries";
+import { useSavedPlacesStore } from "@/store/useSavedPlacesStore";
+import { useMapStore } from "@/store/useMapStore";
+import { busynessLabelKey, busynessColor } from "@/lib/busyness-scale";
+import { useResolvedTheme } from "@/components/theme/useResolvedTheme";
+import { sharePlace } from "@/lib/share";
+import { destinations } from "@/lib/data/destinations";
+import { localizedDestinationName } from "@/lib/destinations";
+import { getShortMonthNames } from "@/lib/week-dates";
+import type { Locale } from "@/i18n/config";
+
+const DEST_BY_ID = new Map(destinations.map((d) => [d.id, d]));
+
+export interface SelectedDestination {
+  destinationId: string;
+  name: string;
+  score?: number;
+}
+
+interface Props {
+  selected: SelectedDestination | null;
+  onClose: () => void;
+}
+
+/** Bottom sheet with a destination's crowd details, opened by tapping a map dot. */
+export function DestinationSheet({ selected, onClose }: Props) {
+  const t = useTranslations("map");
+  const tip = useTranslations("tooltip");
+  const tBest = useTranslations("bestTime");
+  const tSaved = useTranslations("saved");
+  const tShare = useTranslations("share");
+  const mode = useResolvedTheme();
+  const locale = useLocale() as Locale;
+  const { selectedWeek, selectedYear } = useMapStore();
+  const { ids, toggle, hydrated } = useSavedPlacesStore();
+
+  const { data } = useBusynessSeries(selected ? [selected.destinationId] : [], selectedYear);
+  const values = selected ? data?.series?.[selected.destinationId] : undefined;
+
+  if (!selected) return null;
+
+  const destination = DEST_BY_ID.get(selected.destinationId);
+  const displayName = destination
+    ? localizedDestinationName(destination, locale)
+    : selected.name;
+  const saved = hydrated && ids.includes(selected.destinationId);
+  const scorePercent = selected.score !== undefined ? Math.round(selected.score * 100) : null;
+
+  async function handleShare() {
+    if (!selected) return;
+    await sharePlace({
+      title: `${displayName} — PackedPlaces`,
+      text: tBest("shareText", { name: displayName, date: `${selectedYear} · W${selectedWeek}` }),
+      url: window.location.href,
+    });
+  }
+
+  return (
+    <Sheet
+      open
+      onClose={onClose}
+      title={displayName}
+      closeLabel={t("close")}
+      headerExtra={
+        <>
+          <IconButton
+            aria-label={saved ? tSaved("saved") : tSaved("save")}
+            active={saved}
+            onClick={() => toggle(selected.destinationId)}
+          >
+            <svg aria-hidden className="h-5 w-5" viewBox="0 0 24 24" fill={saved ? "currentColor" : "none"} stroke="currentColor" strokeWidth={1.75}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M11.5 3.6 13.9 8.5l5.4.8-3.9 3.8.9 5.4-4.8-2.5-4.8 2.5.9-5.4L3.6 9.3l5.4-.8Z" />
+            </svg>
+          </IconButton>
+          <IconButton aria-label={tShare("share")} onClick={handleShare}>
+            <svg aria-hidden className="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.75}>
+              <circle cx="6" cy="12" r="2.5" />
+              <circle cx="17.5" cy="5.5" r="2.5" />
+              <circle cx="17.5" cy="18.5" r="2.5" />
+              <path d="m8.3 10.8 7-4m-7 6.4 7 4" />
+            </svg>
+          </IconButton>
+        </>
+      }
+    >
+      <div className="pb-2">
+        {scorePercent !== null && selected.score !== undefined && (
+          <p className="flex items-center gap-2 text-sm text-ink-muted">
+            <span
+              aria-hidden
+              className="h-2.5 w-2.5 rounded-full"
+              style={{ backgroundColor: busynessColor(selected.score, mode) }}
+            />
+            {tip("crowdedness", {
+              score: scorePercent,
+              label: tip(busynessLabelKey(selected.score)),
+            })}
+          </p>
+        )}
+
+        {values && (
+          <div className="mt-4 text-ink">
+            <CrowdCurve
+              series={[{ id: selected.destinationId, values }]}
+              markMinMax
+              currentWeek={
+                selectedYear === new Date().getFullYear() ? getISOWeek(new Date()) : selectedWeek
+              }
+              ariaLabel={displayName}
+              monthLabels={getShortMonthNames(locale)}
+              className="h-24"
+            />
+          </div>
+        )}
+
+        <div className="mt-5 flex flex-wrap gap-3 pb-2">
+          <Button size="sm" href={`/best-time?d=${selected.destinationId}`}>
+            {tBest("eyebrow")} &rarr;
+          </Button>
+          <Button size="sm" variant="secondary" href="/compare">
+            {tSaved("compareCta")}
+          </Button>
+        </div>
+      </div>
+    </Sheet>
+  );
+}
diff --git a/src/components/map/DestinationTooltip.tsx b/src/components/map/DestinationTooltip.tsx
index 557612d..a7fa4de 100644
--- a/src/components/map/DestinationTooltip.tsx
+++ b/src/components/map/DestinationTooltip.tsx
@@ -2,6 +2,7 @@
 
 import { useTranslations } from "next-intl";
 import { busynessLabelKey, busynessColor } from "@/lib/busyness-scale";
+import { useResolvedTheme } from "@/components/theme/useResolvedTheme";
 
 interface Props {
   x: number;
@@ -14,6 +15,7 @@ interface Props {
 
 export function DestinationTooltip({ x, y, name, score, sources, activeEvents }: Props) {
   const t = useTranslations("tooltip");
+  const mode = useResolvedTheme();
   const scorePercent = Math.round(score * 100);
 
   function getCrowdednessLabel(s: number): string {
@@ -22,34 +24,38 @@ export function DestinationTooltip({ x, y, name, score, sources, activeEvents }:
 
   return (
     <div
-      className="pointer-events-none absolute z-50 rounded-lg bg-white px-3 py-2 text-sm shadow-lg"
+      className="pointer-events-none absolute z-50 rounded-[4px] border border-line bg-surface-raised px-3 py-2 text-sm shadow-xl"
       style={{ left: x + 12, top: y - 12 }}
     >
-      <div className="font-semibold text-gray-900">{name}</div>
+      <div className="font-display text-ink">{name}</div>
       <div className="mt-1 flex items-center gap-2">
         <div
           className="h-2.5 w-2.5 rounded-full"
-          style={{ backgroundColor: busynessColor(score) }}
+          style={{ backgroundColor: busynessColor(score, mode) }}
         />
-        <span className="text-gray-600">
+        <span className="text-ink-muted">
           {t("crowdedness", { score: scorePercent, label: getCrowdednessLabel(score) })}
         </span>
       </div>
       {activeEvents && activeEvents.length > 0 && (
-        <div className="mt-1.5 border-t border-gray-100 pt-1.5">
-          <div className="text-xs font-medium text-gray-500">{t("activeEvents")}</div>
+        <div className="mt-1.5 border-t border-line pt-1.5">
+          <div className="font-mono text-[10px] uppercase tracking-widest text-ink-faint">
+            {t("activeEvents")}
+          </div>
           {activeEvents.map((event, i) => (
-            <div key={i} className="text-xs text-orange-600">
+            <div key={i} className="text-xs text-accent">
               {event}
             </div>
           ))}
         </div>
       )}
       {sources.length > 0 && (
-        <div className="mt-1.5 border-t border-gray-100 pt-1.5">
-          <div className="text-xs font-medium text-gray-500">{t("topSources")}</div>
+        <div className="mt-1.5 border-t border-line pt-1.5">
+          <div className="font-mono text-[10px] uppercase tracking-widest text-ink-faint">
+            {t("topSources")}
+          </div>
           {sources.map((s, i) => (
-            <div key={i} className="text-xs text-gray-600">
+            <div key={i} className="text-xs text-ink-muted">
               {s.regionName}
             </div>
           ))}
diff --git a/src/components/map/HeatmapLayer.tsx b/src/components/map/HeatmapLayer.tsx
index ad3b55c..c374997 100644
--- a/src/components/map/HeatmapLayer.tsx
+++ b/src/components/map/HeatmapLayer.tsx
@@ -2,8 +2,16 @@
 
 import { useMemo } from "react";
 import { Source, Layer, Marker } from "react-map-gl/maplibre";
-import type { HeatmapResponse, AllDestinationsResponse, MajorEvent } from "@/types";
+import type { HeatmapResponse, AllDestinationsResponse } from "@/types";
 import { useMapStore } from "@/store/useMapStore";
+import {
+  crowdCircleColorExpr,
+  crowdHeatmapColorExpr,
+  CIRCLE_STROKE_COLOR,
+  MUTED_DOT_COLOR,
+} from "@/lib/crowd-palette";
+import { CATEGORY_EMOJI, DEFAULT_EVENT_EMOJI } from "@/lib/event-categories";
+import { useResolvedTheme } from "@/components/theme/useResolvedTheme";
 
 interface Props {
   data: HeatmapResponse | undefined;
@@ -15,14 +23,6 @@ const emptyGeoJSON: GeoJSON.FeatureCollection = {
   features: [],
 };
 
-const CATEGORY_EMOJI: Record<MajorEvent["category"], string> = {
-  sports: "\u26BD",
-  festival: "\uD83C\uDF89",
-  cultural: "\uD83C\uDFAD",
-  music: "\uD83C\uDFB5",
-  trade: "\uD83D\uDCBC",
-};
-
 interface EventMarker {
   destinationId: string;
   lng: number;
@@ -36,6 +36,7 @@ const SHOW_ZERO_SCORES = process.env.NEXT_PUBLIC_SHOW_ZERO_SCORES !== "false";
 export function HeatmapLayer({ data, allDestinations }: Props) {
   const showHeatmap = useMapStore((s) => s.showHeatmap);
   const showEvents = useMapStore((s) => s.showEvents);
+  const mode = useResolvedTheme();
 
   const geojson = useMemo(() => {
     if (!data) return emptyGeoJSON;
@@ -72,7 +73,7 @@ export function HeatmapLayer({ data, allDestinations }: Props) {
         existing.names.push(event.name);
       } else {
         byDest.set(event.destinationId, {
-          emoji: CATEGORY_EMOJI[event.category] ?? "\uD83D\uDCCD",
+          emoji: CATEGORY_EMOJI[event.category] ?? DEFAULT_EVENT_EMOJI,
           names: [event.name],
         });
       }
@@ -104,7 +105,7 @@ export function HeatmapLayer({ data, allDestinations }: Props) {
             type="circle"
             paint={{
               "circle-radius": 3,
-              "circle-color": "#9ca3af",
+              "circle-color": MUTED_DOT_COLOR[mode],
               "circle-opacity": 0.5,
             }}
           />
@@ -139,23 +140,7 @@ export function HeatmapLayer({ data, allDestinations }: Props) {
                 6,
                 2,
               ],
-              "heatmap-color": [
-                "interpolate",
-                ["linear"],
-                ["heatmap-density"],
-                0,
-                "rgba(0, 0, 0, 0)",
-                0.1,
-                "rgba(34, 197, 94, 0.4)",
-                0.3,
-                "rgba(250, 204, 21, 0.6)",
-                0.5,
-                "rgba(249, 115, 22, 0.7)",
-                0.7,
-                "rgba(239, 68, 68, 0.8)",
-                1.0,
-                "rgba(185, 28, 28, 0.9)",
-              ],
+              "heatmap-color": crowdHeatmapColorExpr(mode),
               "heatmap-radius": [
                 "interpolate",
                 ["linear"],
@@ -193,19 +178,7 @@ export function HeatmapLayer({ data, allDestinations }: Props) {
                 7,
                 ["interpolate", ["linear"], ["get", "busynessScore"], 0, 8, 1, 14],
               ],
-              "circle-color": [
-                "interpolate",
-                ["linear"],
-                ["get", "busynessScore"],
-                0,
-                "#22c55e",
-                0.3,
-                "#facc15",
-                0.6,
-                "#f97316",
-                1.0,
-                "#dc2626",
-              ],
+              "circle-color": crowdCircleColorExpr(mode),
               "circle-opacity": [
                 "interpolate",
                 ["linear"],
@@ -216,7 +189,7 @@ export function HeatmapLayer({ data, allDestinations }: Props) {
                 0.8,
               ],
               "circle-stroke-width": 1,
-              "circle-stroke-color": "#ffffff",
+              "circle-stroke-color": CIRCLE_STROKE_COLOR[mode],
               "circle-stroke-opacity": [
                 "interpolate",
                 ["linear"],
diff --git a/src/components/map/HolidayRegionsLayer.tsx b/src/components/map/HolidayRegionsLayer.tsx
index 81c3d45..de18c70 100644
--- a/src/components/map/HolidayRegionsLayer.tsx
+++ b/src/components/map/HolidayRegionsLayer.tsx
@@ -4,6 +4,8 @@ import { useMemo } from "react";
 import { Source, Layer } from "react-map-gl/maplibre";
 import { useMapStore } from "@/store/useMapStore";
 import { useRegionBoundaries } from "@/hooks/useRegionBoundaries";
+import { HOLIDAY_REGION_COLOR } from "@/lib/crowd-palette";
+import { useResolvedTheme } from "@/components/theme/useResolvedTheme";
 
 interface RegionOnHoliday {
   regionId: string;
@@ -25,6 +27,8 @@ const emptyGeoJSON: GeoJSON.FeatureCollection = {
 export function HolidayRegionsLayer({ regionsOnHoliday }: Props) {
   const showHolidayRegions = useMapStore((s) => s.showHolidayRegions);
   const { data: boundaries } = useRegionBoundaries();
+  const mode = useResolvedTheme();
+  const regionColor = HOLIDAY_REGION_COLOR[mode];
 
   const filteredGeoJSON = useMemo(() => {
     if (!boundaries || !regionsOnHoliday?.length) return emptyGeoJSON;
@@ -45,15 +49,15 @@ export function HolidayRegionsLayer({ regionsOnHoliday }: Props) {
         id="holiday-regions-fill"
         type="fill"
         paint={{
-          "fill-color": "#4f46e5",
-          "fill-opacity": showHolidayRegions ? 0.25 : 0,
+          "fill-color": regionColor,
+          "fill-opacity": showHolidayRegions ? (mode === "dark" ? 0.3 : 0.25) : 0,
         }}
       />
       <Layer
         id="holiday-regions-outline"
         type="line"
         paint={{
-          "line-color": "#4f46e5",
+          "line-color": regionColor,
           "line-width": 1,
           "line-opacity": showHolidayRegions ? 0.5 : 0,
         }}
diff --git a/src/components/map/MapDisclaimer.tsx b/src/components/map/MapDisclaimer.tsx
index aa023bd..da5cd91 100644
--- a/src/components/map/MapDisclaimer.tsx
+++ b/src/components/map/MapDisclaimer.tsx
@@ -4,6 +4,7 @@ import { useEffect } from "react";
 import { useTranslations } from "next-intl";
 import { useMapStore } from "@/store/useMapStore";
 import { trackEvent } from "@/lib/analytics";
+import { Button } from "@/components/ui/Button";
 
 export function MapDisclaimer() {
   const t = useTranslations("disclaimer");
@@ -34,23 +35,18 @@ export function MapDisclaimer() {
   }
 
   return (
-    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 p-4">
-      <div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-2xl">
-        <h2 className="text-lg font-bold text-gray-900">{t("title")}</h2>
-        <p className="mt-3 text-sm leading-relaxed text-gray-600">{t("body")}</p>
+    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 p-4 backdrop-blur-[2px]">
+      <div className="w-full max-w-md rounded-[4px] border border-line bg-surface-raised bg-paper-grain p-6 shadow-2xl">
+        <h2 className="font-display text-xl text-ink">{t("title")}</h2>
+        <div aria-hidden className="mt-3 h-px w-12 bg-accent/70" />
+        <p className="mt-3 text-sm leading-relaxed text-ink-muted">{t("body")}</p>
         <div className="mt-6 flex gap-3">
-          <button
-            onClick={handleDecline}
-            className="flex-1 rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-50"
-          >
+          <Button variant="secondary" className="flex-1" onClick={handleDecline}>
             {t("decline")}
-          </button>
-          <button
-            onClick={handleAccept}
-            className="flex-1 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700"
-          >
+          </Button>
+          <Button className="flex-1" onClick={handleAccept}>
             {t("accept")}
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/src/components/map/MapHeader.tsx b/src/components/map/MapHeader.tsx
index 8fc8d53..50106f2 100644
--- a/src/components/map/MapHeader.tsx
+++ b/src/components/map/MapHeader.tsx
@@ -6,6 +6,7 @@ import { useTranslations } from "next-intl";
 import { YearSelector } from "@/components/controls/YearSelector";
 import { LayerToggle } from "@/components/controls/LayerToggle";
 import { LanguageSwitcher } from "@/components/LanguageSwitcher";
+import { ThemeToggle } from "@/components/theme/ThemeToggle";
 
 interface MapHeaderProps {
   onTogglePanel: () => void;
@@ -14,21 +15,23 @@ interface MapHeaderProps {
 
 export function MapHeader({ onTogglePanel, isPanelOpen }: MapHeaderProps) {
   const t = useTranslations("map");
+  const tNav = useTranslations("nav");
+  const tSwitcher = useTranslations("switcher");
   const [menuOpen, setMenuOpen] = useState(false);
 
   return (
-    <header className="relative z-20 flex items-center gap-3 border-b border-gray-200 bg-white px-4 py-2">
-      {/* Logo — always visible */}
-      <Link
-        href="/"
-        className="text-lg font-bold text-gray-800 transition-colors hover:text-gray-600"
-      >
-        {t("title")}
+    <header className="relative z-20 flex items-center gap-3 border-b border-line bg-surface px-3 py-2 sm:px-4">
+      {/* Wordmark — always visible */}
+      <Link href="/" aria-label={t("title")} className="font-display text-lg text-ink transition-colors hover:text-accent">
+        Packed<span className="italic text-accent">Places</span>
+        <span className="ml-0.5 font-mono text-[10px] uppercase tracking-widest text-ink-faint">
+          .com
+        </span>
       </Link>
 
       {/* Desktop: year selector */}
       <div className="hidden md:flex">
-        <YearSelector className="flex gap-1 rounded-lg bg-gray-100 p-1" />
+        <YearSelector />
       </div>
 
       <div className="flex-1" />
@@ -37,12 +40,13 @@ export function MapHeader({ onTogglePanel, isPanelOpen }: MapHeaderProps) {
       <div className="hidden items-center gap-1 md:flex">
         <LayerToggle variant="dropdown" />
         <LanguageSwitcher variant="header" />
+        <ThemeToggle />
         <button
           onClick={onTogglePanel}
-          className={`flex items-center gap-1 rounded-md px-2 py-1.5 text-sm font-medium transition-colors ${
+          className={`flex items-center gap-1 rounded-[3px] px-2 py-1.5 text-sm font-medium transition-colors ${
             isPanelOpen
-              ? "bg-blue-50 text-blue-700"
-              : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+              ? "bg-surface-sunken text-accent"
+              : "text-ink-muted hover:bg-surface-sunken hover:text-ink"
           }`}
         >
           <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -55,8 +59,8 @@ export function MapHeader({ onTogglePanel, isPanelOpen }: MapHeaderProps) {
       {/* Mobile: hamburger */}
       <button
         onClick={() => setMenuOpen((v) => !v)}
-        className="flex items-center justify-center rounded-md p-1.5 text-gray-600 hover:bg-gray-100 md:hidden"
-        aria-label="Menu"
+        className="flex h-10 w-10 items-center justify-center rounded-[3px] text-ink-muted transition-colors hover:bg-surface-sunken md:hidden"
+        aria-label={tNav("menu")}
       >
         {menuOpen ? (
           <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -71,19 +75,22 @@ export function MapHeader({ onTogglePanel, isPanelOpen }: MapHeaderProps) {
 
       {/* Mobile dropdown menu */}
       {menuOpen && (
-        <div className="absolute left-0 right-0 top-full z-50 border-b border-gray-200 bg-white p-4 shadow-lg md:hidden">
+        <div className="absolute left-0 right-0 top-full z-50 border-b border-line bg-surface-raised p-4 shadow-xl md:hidden">
           <div className="flex flex-col gap-4">
             <LayerToggle variant="card" />
             <div className="flex items-center gap-2">
-              <span className="text-xs font-semibold text-gray-500">Language</span>
+              <span className="font-mono text-[10px] uppercase tracking-widest text-ink-faint">
+                {tSwitcher("label")}
+              </span>
               <LanguageSwitcher variant="header" />
+              <ThemeToggle />
             </div>
             <button
               onClick={() => {
                 onTogglePanel();
                 setMenuOpen(false);
               }}
-              className="flex items-center gap-2 rounded-md bg-gray-100 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200"
+              className="flex items-center gap-2 rounded-[3px] border border-line bg-surface-sunken px-3 py-2.5 text-sm font-medium text-ink transition-colors hover:border-line-strong"
             >
               <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                 <path strokeLinecap="round" strokeLinejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
diff --git a/src/components/map/MapView.tsx b/src/components/map/MapView.tsx
index c4055ee..1b86818 100644
--- a/src/components/map/MapView.tsx
+++ b/src/components/map/MapView.tsx
@@ -10,6 +10,7 @@ import { DestinationTooltip } from "./DestinationTooltip";
 import { useMapStore } from "@/store/useMapStore";
 import { useHeatmapData, useAllDestinations } from "@/hooks/useHeatmapData";
 import { useLocale } from "next-intl";
+import { useResolvedTheme } from "@/components/theme/useResolvedTheme";
 
 const DEFAULT_VIEW = {
   latitude: 20,
@@ -17,7 +18,11 @@ const DEFAULT_VIEW = {
   zoom: 2,
 };
 
-const MAP_STYLE = "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json";
+/** CARTO basemaps: Positron for day paper, Dark Matter for the night atlas. */
+const MAP_STYLE: Record<"light" | "dark", string> = {
+  light: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
+  dark: "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
+};
 
 function viewFromParams(params: URLSearchParams): typeof DEFAULT_VIEW {
   const lat = parseFloat(params.get("lat") ?? "");
@@ -65,9 +70,20 @@ function setMapLanguage(map: MapRef, locale: string) {
   }
 }
 
-export function MapView() {
+export interface MapDestinationClick {
+  destinationId: string;
+  name: string;
+  score?: number;
+}
+
+interface MapViewProps {
+  onDestinationClick?: (destination: MapDestinationClick) => void;
+}
+
+export function MapView({ onDestinationClick }: MapViewProps) {
   const mapRef = useRef<MapRef>(null);
   const locale = useLocale();
+  const mode = useResolvedTheme();
   const searchParams = useSearchParams();
   const { selectedWeek, selectedYear, setHoveredDestination, setViewportBounds, setViewportCenter, showHeatmap } = useMapStore();
   const { data } = useHeatmapData(selectedWeek, selectedYear);
@@ -127,6 +143,20 @@ export function MapView() {
     setHoveredDestination(null);
   }, [setHoveredDestination]);
 
+  const onClick = useCallback(
+    (e: MapLayerMouseEvent) => {
+      const feature = e.features?.[0];
+      const props = feature?.properties;
+      if (!props?.destinationId || !onDestinationClick) return;
+      onDestinationClick({
+        destinationId: props.destinationId,
+        name: props.name ?? props.destinationId,
+        score: typeof props.busynessScore === "number" ? props.busynessScore : undefined,
+      });
+    },
+    [onDestinationClick],
+  );
+
   const updateViewport = useCallback(() => {
     const map = mapRef.current;
     if (!map) return;
@@ -157,6 +187,16 @@ export function MapView() {
     updateViewport();
   }, [updateViewport, locale]);
 
+  // Re-apply the label language whenever new style data arrives — this covers
+  // the theme-driven basemap swap (setStyle replaces all symbol layers) as
+  // well as tile-style reloads. setMapLanguage is idempotent, so extra calls
+  // are harmless.
+  const onStyleData = useCallback(() => {
+    if (mapRef.current) {
+      setMapLanguage(mapRef.current, locale);
+    }
+  }, [locale]);
+
   // Re-apply language when locale changes after map is already loaded
   useEffect(() => {
     if (mapLoaded.current && mapRef.current) {
@@ -173,12 +213,14 @@ export function MapView() {
       <Map
         ref={mapRef}
         initialViewState={initialView}
-        mapStyle={MAP_STYLE}
+        mapStyle={MAP_STYLE[mode]}
         interactiveLayerIds={interactiveLayerIds}
         onMouseMove={onMouseMove}
         onMouseLeave={onMouseLeave}
+        onClick={onClick}
         onMoveEnd={updateViewport}
         onLoad={onLoad}
+        onStyleData={onStyleData}
       >
         <HolidayRegionsLayer regionsOnHoliday={data?.metadata.regionsOnHoliday} />
         <HeatmapLayer data={data} allDestinations={allDestinations} />
diff --git a/src/components/theme/ThemeProvider.tsx b/src/components/theme/ThemeProvider.tsx
new file mode 100644
index 0000000..fa2bb31
--- /dev/null
+++ b/src/components/theme/ThemeProvider.tsx
@@ -0,0 +1,111 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useSyncExternalStore,
+  type ReactNode,
+} from "react";
+import type { ThemeMode } from "@/lib/crowd-palette";
+import { THEME_STORAGE_KEY } from "./theme-script";
+
+export type ThemePreference = "light" | "dark" | "system";
+
+const THEME_COLOR: Record<ThemeMode, string> = {
+  light: "#f6f1e7",
+  dark: "#0f1922",
+};
+
+interface ThemeContextValue {
+  theme: ThemePreference;
+  resolvedTheme: ThemeMode;
+  setTheme: (theme: ThemePreference) => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+/* ── Preference store (module-level external store; localStorage-backed) ── */
+
+let preference: ThemePreference | null = null;
+const listeners = new Set<() => void>();
+
+function readStoredPreference(): ThemePreference {
+  try {
+    const stored = localStorage.getItem(THEME_STORAGE_KEY);
+    if (stored === "light" || stored === "dark") return stored;
+  } catch {
+    // storage unavailable
+  }
+  return "system";
+}
+
+function getPreference(): ThemePreference {
+  if (preference === null) preference = readStoredPreference();
+  return preference;
+}
+
+function setPreference(next: ThemePreference) {
+  preference = next;
+  try {
+    if (next === "system") {
+      localStorage.removeItem(THEME_STORAGE_KEY);
+    } else {
+      localStorage.setItem(THEME_STORAGE_KEY, next);
+    }
+  } catch {
+    // storage unavailable — preference lives for this session only
+  }
+  listeners.forEach((l) => l());
+}
+
+function subscribePreference(onChange: () => void) {
+  listeners.add(onChange);
+  return () => listeners.delete(onChange);
+}
+
+/* ── OS preference ── */
+
+function subscribeSystem(onChange: () => void) {
+  const mq = window.matchMedia("(prefers-color-scheme: dark)");
+  mq.addEventListener("change", onChange);
+  return () => mq.removeEventListener("change", onChange);
+}
+
+function getSystemTheme(): ThemeMode {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const theme = useSyncExternalStore(subscribePreference, getPreference, () => "system" as const);
+  const systemTheme = useSyncExternalStore(subscribeSystem, getSystemTheme, () => "light" as const);
+  const resolvedTheme: ThemeMode = theme === "system" ? systemTheme : theme;
+
+  // DOM side effects only — the inline theme-script already applied the right
+  // class before first paint, this keeps it in sync afterwards.
+  useEffect(() => {
+    const root = document.documentElement;
+    root.classList.toggle("dark", resolvedTheme === "dark");
+    root.style.colorScheme = resolvedTheme;
+    document
+      .querySelectorAll('meta[name="theme-color"]')
+      .forEach((m) => m.setAttribute("content", THEME_COLOR[resolvedTheme]));
+  }, [resolvedTheme]);
+
+  const setTheme = useCallback((next: ThemePreference) => {
+    setPreference(next);
+  }, []);
+
+  return (
+    <ThemeContext.Provider value={{ theme, resolvedTheme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error("useTheme must be used within ThemeProvider");
+  return ctx;
+}
diff --git a/src/components/theme/ThemeToggle.tsx b/src/components/theme/ThemeToggle.tsx
new file mode 100644
index 0000000..2538da2
--- /dev/null
+++ b/src/components/theme/ThemeToggle.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { useTheme, type ThemePreference } from "./ThemeProvider";
+import { IconButton } from "@/components/ui/IconButton";
+
+const ORDER: ThemePreference[] = ["light", "dark", "system"];
+
+function SunIcon() {
+  return (
+    <svg aria-hidden className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}>
+      <circle cx="12" cy="12" r="4" />
+      <path strokeLinecap="round" d="M12 3v2m0 14v2M4.6 4.6l1.4 1.4m12 12 1.4 1.4M3 12h2m14 0h2M4.6 19.4 6 18m12-12 1.4-1.4" />
+    </svg>
+  );
+}
+
+function MoonIcon() {
+  return (
+    <svg aria-hidden className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M20.5 14.5A8.5 8.5 0 0 1 9.5 3.5a8.5 8.5 0 1 0 11 11Z" />
+    </svg>
+  );
+}
+
+function SystemIcon() {
+  return (
+    <svg aria-hidden className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}>
+      <circle cx="12" cy="12" r="8.5" />
+      <path d="M12 3.5a8.5 8.5 0 0 0 0 17Z" fill="currentColor" stroke="none" />
+    </svg>
+  );
+}
+
+/** Cycles light → dark → system. Shows the active preference's icon. */
+export function ThemeToggle({ className }: { className?: string }) {
+  const { theme, setTheme } = useTheme();
+  const t = useTranslations("theme");
+
+  const next = ORDER[(ORDER.indexOf(theme) + 1) % ORDER.length];
+
+  return (
+    <IconButton
+      aria-label={`${t("label")}: ${t(theme)}`}
+      title={`${t("label")}: ${t(theme)} → ${t(next)}`}
+      onClick={() => setTheme(next)}
+      className={className}
+    >
+      {theme === "light" ? <SunIcon /> : theme === "dark" ? <MoonIcon /> : <SystemIcon />}
+    </IconButton>
+  );
+}
diff --git a/src/components/theme/__tests__/ThemeProvider.test.tsx b/src/components/theme/__tests__/ThemeProvider.test.tsx
new file mode 100644
index 0000000..4134aa7
--- /dev/null
+++ b/src/components/theme/__tests__/ThemeProvider.test.tsx
@@ -0,0 +1,84 @@
+import { vi, describe, it, expect, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { ThemeProvider, useTheme } from "@/components/theme/ThemeProvider";
+
+const STORAGE_KEY = "pp_theme";
+
+function Consumer() {
+  const { theme, resolvedTheme, setTheme } = useTheme();
+  return (
+    <div>
+      <span data-testid="theme">{theme}</span>
+      <span data-testid="resolved">{resolvedTheme}</span>
+      <button onClick={() => setTheme("dark")}>go dark</button>
+      <button onClick={() => setTheme("light")}>go light</button>
+      <button onClick={() => setTheme("system")}>go system</button>
+    </div>
+  );
+}
+
+function renderThemed() {
+  return render(
+    <ThemeProvider>
+      <Consumer />
+    </ThemeProvider>,
+  );
+}
+
+// The module keeps a module-level preference cache, so every test drives
+// setTheme explicitly to a known state instead of relying on initial reads.
+describe("ThemeProvider", () => {
+  beforeEach(() => {
+    localStorage.removeItem(STORAGE_KEY);
+    document.documentElement.classList.remove("dark");
+  });
+
+  it("renders its children", () => {
+    renderThemed();
+    expect(screen.getByTestId("theme")).toBeInTheDocument();
+    expect(screen.getByText("go dark")).toBeInTheDocument();
+  });
+
+  it('setTheme("dark") adds .dark to <html> and stores pp_theme="dark"', () => {
+    renderThemed();
+    fireEvent.click(screen.getByText("go dark"));
+
+    expect(screen.getByTestId("theme")).toHaveTextContent("dark");
+    expect(screen.getByTestId("resolved")).toHaveTextContent("dark");
+    expect(document.documentElement.classList.contains("dark")).toBe(true);
+    expect(document.documentElement.style.colorScheme).toBe("dark");
+    expect(localStorage.getItem(STORAGE_KEY)).toBe("dark");
+  });
+
+  it('setTheme("light") removes .dark and stores pp_theme="light"', () => {
+    renderThemed();
+    fireEvent.click(screen.getByText("go dark"));
+    fireEvent.click(screen.getByText("go light"));
+
+    expect(screen.getByTestId("resolved")).toHaveTextContent("light");
+    expect(document.documentElement.classList.contains("dark")).toBe(false);
+    expect(localStorage.getItem(STORAGE_KEY)).toBe("light");
+  });
+
+  it('setTheme("system") removes the stored key and follows the OS theme', () => {
+    renderThemed();
+    fireEvent.click(screen.getByText("go dark"));
+    expect(localStorage.getItem(STORAGE_KEY)).toBe("dark");
+
+    fireEvent.click(screen.getByText("go system"));
+    expect(localStorage.getItem(STORAGE_KEY)).toBeNull();
+    expect(screen.getByTestId("theme")).toHaveTextContent("system");
+    // The stubbed matchMedia reports matches: false -> light.
+    expect(screen.getByTestId("resolved")).toHaveTextContent("light");
+    expect(document.documentElement.classList.contains("dark")).toBe(false);
+  });
+
+  it("useTheme throws outside a ThemeProvider", () => {
+    // Silence React's error boundary logging for the intentional throw.
+    const spy = vi.spyOn(console, "error").mockImplementation(() => {});
+    expect(() => render(<Consumer />)).toThrow(
+      "useTheme must be used within ThemeProvider",
+    );
+    spy.mockRestore();
+  });
+});
diff --git a/src/components/theme/theme-script.ts b/src/components/theme/theme-script.ts
new file mode 100644
index 0000000..ccae0b5
--- /dev/null
+++ b/src/components/theme/theme-script.ts
@@ -0,0 +1,11 @@
+export const THEME_STORAGE_KEY = "pp_theme";
+
+/**
+ * Inline no-FOUC script injected in <head> before first paint. Resolves the
+ * stored preference ("light" | "dark", absent/anything else = system) against
+ * the OS preference and stamps `.dark` + color-scheme on <html>.
+ * Must stay in sync with ThemeProvider.
+ */
+export const THEME_SCRIPT = `(function(){try{var t=localStorage.getItem(${JSON.stringify(
+  THEME_STORAGE_KEY,
+)});var d=t==="dark"||(t!=="light"&&window.matchMedia("(prefers-color-scheme: dark)").matches);var r=document.documentElement;r.classList.toggle("dark",d);r.style.colorScheme=d?"dark":"light";}catch(e){}})();`;
diff --git a/src/components/theme/useResolvedTheme.ts b/src/components/theme/useResolvedTheme.ts
new file mode 100644
index 0000000..339f3c0
--- /dev/null
+++ b/src/components/theme/useResolvedTheme.ts
@@ -0,0 +1,30 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+import type { ThemeMode } from "@/lib/crowd-palette";
+
+function subscribe(onChange: () => void): () => void {
+  const observer = new MutationObserver(onChange);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["class"],
+  });
+  return () => observer.disconnect();
+}
+
+function getSnapshot(): ThemeMode {
+  return document.documentElement.classList.contains("dark") ? "dark" : "light";
+}
+
+function getServerSnapshot(): ThemeMode {
+  return "light";
+}
+
+/**
+ * The currently applied theme ("light" | "dark"), derived from the `.dark`
+ * class on <html>. Works standalone — it observes the DOM rather than the
+ * ThemeProvider, so map layers and charts can use it anywhere.
+ */
+export function useResolvedTheme(): ThemeMode {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
new file mode 100644
index 0000000..78ca4f4
--- /dev/null
+++ b/src/components/ui/Button.tsx
@@ -0,0 +1,68 @@
+import Link from "next/link";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { cx } from "./cx";
+
+type Variant = "primary" | "secondary" | "ghost" | "link";
+type Size = "sm" | "md" | "lg";
+
+const VARIANT_CLASSES: Record<Variant, string> = {
+  primary:
+    "bg-accent text-accent-ink hover:bg-accent-hover hover:-translate-y-px active:translate-y-0 shadow-[0_2px_0_0_color-mix(in_srgb,var(--accent-hover)_80%,black)]",
+  secondary:
+    "border border-line bg-surface-raised text-ink hover:border-line-strong hover:-translate-y-px active:translate-y-0",
+  ghost: "text-ink-muted hover:bg-surface-sunken hover:text-ink",
+  link: "text-accent-2 underline decoration-dotted underline-offset-4 hover:text-accent",
+};
+
+const SIZE_CLASSES: Record<Size, string> = {
+  sm: "px-3 py-1.5 text-sm gap-1.5",
+  md: "px-5 py-2.5 text-sm gap-2",
+  lg: "px-7 py-3.5 text-base gap-2",
+};
+
+interface CommonProps {
+  variant?: Variant;
+  size?: Size;
+  className?: string;
+  children: ReactNode;
+}
+
+type ButtonAsButton = CommonProps &
+  Omit<ComponentPropsWithoutRef<"button">, keyof CommonProps> & { href?: undefined };
+
+type ButtonAsLink = CommonProps &
+  Omit<ComponentPropsWithoutRef<typeof Link>, keyof CommonProps> & { href: string };
+
+type ButtonProps = ButtonAsButton | ButtonAsLink;
+
+export function Button({
+  variant = "primary",
+  size = "md",
+  className,
+  children,
+  ...rest
+}: ButtonProps) {
+  const classes = cx(
+    "inline-flex select-none items-center justify-center rounded-[3px] font-medium transition-all duration-150",
+    variant !== "link" && "tracking-wide",
+    VARIANT_CLASSES[variant],
+    variant === "link" ? "p-0" : SIZE_CLASSES[size],
+    className,
+  );
+
+  if ("href" in rest && typeof rest.href === "string") {
+    const linkProps = rest as Omit<ButtonAsLink, keyof CommonProps>;
+    return (
+      <Link {...linkProps} className={classes}>
+        {children}
+      </Link>
+    );
+  }
+
+  const buttonProps = rest as Omit<ButtonAsButton, keyof CommonProps>;
+  return (
+    <button type="button" {...buttonProps} className={classes}>
+      {children}
+    </button>
+  );
+}
diff --git a/src/components/ui/Card.tsx b/src/components/ui/Card.tsx
new file mode 100644
index 0000000..8de31dd
--- /dev/null
+++ b/src/components/ui/Card.tsx
@@ -0,0 +1,23 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { cx } from "./cx";
+
+interface CardProps extends ComponentPropsWithoutRef<"div"> {
+  /** Adds the editorial hover lift (slight rise + rotation). */
+  hover?: boolean;
+  /** Recessed variant sitting on sunken paper. */
+  sunken?: boolean;
+}
+
+export function Card({ hover = false, sunken = false, className, ...rest }: CardProps) {
+  return (
+    <div
+      {...rest}
+      className={cx(
+        "rounded-[4px] border border-line",
+        sunken ? "bg-surface-sunken" : "bg-surface-raised",
+        hover && "card-hover-lift",
+        className,
+      )}
+    />
+  );
+}
diff --git a/src/components/ui/Chip.tsx b/src/components/ui/Chip.tsx
new file mode 100644
index 0000000..b1da31f
--- /dev/null
+++ b/src/components/ui/Chip.tsx
@@ -0,0 +1,31 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { cx } from "./cx";
+
+interface ChipProps extends ComponentPropsWithoutRef<"button"> {
+  selected?: boolean;
+  /** Render as a non-interactive span (labels, badges). */
+  asLabel?: boolean;
+}
+
+const BASE =
+  "inline-flex items-center gap-1.5 rounded-full border px-3 py-1 font-mono text-[11px] uppercase tracking-wider transition-colors";
+
+export function Chip({ selected = false, asLabel = false, className, children, ...rest }: ChipProps) {
+  const classes = cx(
+    BASE,
+    selected
+      ? "border-accent-2 bg-accent-2 text-accent-2-ink"
+      : "border-line bg-surface-raised text-ink-muted",
+    !asLabel && !selected && "hover:border-line-strong hover:text-ink",
+    className,
+  );
+
+  if (asLabel) {
+    return <span className={classes}>{children}</span>;
+  }
+  return (
+    <button type="button" {...rest} className={classes}>
+      {children}
+    </button>
+  );
+}
diff --git a/src/components/ui/CrowdCurve.tsx b/src/components/ui/CrowdCurve.tsx
new file mode 100644
index 0000000..30d91cc
--- /dev/null
+++ b/src/components/ui/CrowdCurve.tsx
@@ -0,0 +1,287 @@
+"use client";
+
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { crowdColor, type ThemeMode } from "@/lib/crowd-palette";
+import { useResolvedTheme } from "@/components/theme/useResolvedTheme";
+import { cx } from "./cx";
+
+export interface CrowdCurveSeries {
+  id: string;
+  /** Weekly scores 0–1; index 0 = week 1. null = no data (gap). */
+  values: (number | null)[];
+  /** Stroke colour for multi-series mode; single series uses the crowd ramp. */
+  color?: string;
+}
+
+interface CrowdCurveProps {
+  series: CrowdCurveSeries[];
+  /** Vertical tick for the currently selected week (1-based). */
+  currentWeek?: number;
+  /** Mark the quietest (teal ring) and busiest (terracotta dot) weeks. Single series only. */
+  markMinMax?: boolean;
+  ariaLabel: string;
+  className?: string;
+  /** Localized short month names — rendered as an x-axis row under the chart. */
+  monthLabels?: string[];
+  /** Called with the hovered/tapped week (1-based) or null when leaving. */
+  onScrub?: (week: number | null) => void;
+}
+
+/** Categorical line colours for compare mode (distinct from the crowd ramp). */
+export const SERIES_COLORS: Record<ThemeMode, string[]> = {
+  light: ["#175e5a", "#c2542f", "#345995", "#8a6d1f", "#6d3a78", "#3f5d45"],
+  dark: ["#4fa8a0", "#d97c55", "#7f9fd1", "#d3b356", "#b287bd", "#7fa887"],
+};
+
+// SSR/pre-measure fallback dimensions; replaced by the element's real pixel
+// size after mount so viewBox units always map 1:1 to pixels (no distortion).
+const FALLBACK_W = 520;
+const FALLBACK_H = 130;
+const PAD_TOP = 10;
+const PAD_BOTTOM = 6;
+
+interface Dims {
+  w: number;
+  h: number;
+}
+
+function xFor(weekIndex: number, count: number, dims: Dims): number {
+  return (weekIndex / (count - 1)) * dims.w;
+}
+
+function yFor(value: number, dims: Dims): number {
+  const plotH = dims.h - PAD_TOP - PAD_BOTTOM;
+  return PAD_TOP + (1 - Math.min(Math.max(value, 0), 1)) * plotH;
+}
+
+function buildPath(values: (number | null)[], close: boolean, dims: Dims): string {
+  const count = values.length;
+  let d = "";
+  let started = false;
+  let firstX = NaN;
+  let lastX = 0;
+  values.forEach((v, i) => {
+    if (v === null) {
+      started = false;
+      return;
+    }
+    const x = xFor(i, count, dims);
+    const y = yFor(v, dims);
+    d += started ? ` L ${x.toFixed(1)} ${y.toFixed(1)}` : ` M ${x.toFixed(1)} ${y.toFixed(1)}`;
+    started = true;
+    if (Number.isNaN(firstX)) firstX = x;
+    lastX = x;
+  });
+  if (close && !Number.isNaN(firstX)) {
+    const bottom = dims.h - PAD_BOTTOM;
+    d += ` L ${lastX.toFixed(1)} ${bottom} L ${firstX.toFixed(1)} ${bottom} Z`;
+  }
+  return d;
+}
+
+function minMaxWeeks(values: (number | null)[]): { min: number; max: number } | null {
+  let min = -1;
+  let max = -1;
+  values.forEach((v, i) => {
+    if (v === null) return;
+    if (min === -1 || v < (values[min] as number)) min = i;
+    if (max === -1 || v > (values[max] as number)) max = i;
+  });
+  if (min === -1 || max === -1) return null;
+  return { min, max };
+}
+
+/**
+ * Dependency-free SVG crowd curve over the weeks of a year.
+ * Single series: area + stroke coloured along the x-axis by the crowd ramp.
+ * Multi series: flat categorical strokes for comparison.
+ * The viewBox tracks the element's rendered size, so markers and dashes stay
+ * perfectly round/even at any width.
+ */
+export function CrowdCurve({
+  series,
+  currentWeek,
+  markMinMax = false,
+  ariaLabel,
+  className,
+  monthLabels,
+  onScrub,
+}: CrowdCurveProps) {
+  const mode = useResolvedTheme();
+  const gradientId = useId();
+  const svgRef = useRef<SVGSVGElement>(null);
+  const [scrub, setScrub] = useState<number | null>(null);
+  const [dims, setDims] = useState<Dims>({ w: FALLBACK_W, h: FALLBACK_H });
+
+  // Match the drawing coordinate system to the rendered pixel size.
+  useEffect(() => {
+    const el = svgRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver((entries) => {
+      const rect = entries[0]?.contentRect;
+      if (!rect || rect.width === 0 || rect.height === 0) return;
+      const w = Math.round(rect.width);
+      const h = Math.round(rect.height);
+      setDims((prev) => (prev.w === w && prev.h === h ? prev : { w, h }));
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  const single = series.length === 1 ? series[0] : null;
+  const count = series[0]?.values.length ?? 52;
+
+  const gradientStops = useMemo(() => {
+    if (!single) return [];
+    return single.values.map((v, i) => ({
+      offset: `${((i / (count - 1)) * 100).toFixed(1)}%`,
+      color: crowdColor(v ?? 0, mode),
+    }));
+  }, [single, count, mode]);
+
+  const extremes = single && markMinMax ? minMaxWeeks(single.values) : null;
+
+  function weekFromEvent(e: React.PointerEvent<SVGSVGElement>): number {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const frac = Math.min(Math.max((e.clientX - rect.left) / rect.width, 0), 1);
+    return Math.round(frac * (count - 1)) + 1;
+  }
+
+  function handleScrub(week: number | null) {
+    setScrub(week);
+    onScrub?.(week);
+  }
+
+  const chart = (
+    <svg
+      ref={svgRef}
+      role="img"
+      aria-label={ariaLabel}
+      viewBox={`0 0 ${dims.w} ${dims.h}`}
+      preserveAspectRatio="none"
+      className={cx("block w-full touch-pan-y select-none", className)}
+      onPointerMove={onScrub || markMinMax ? (e) => handleScrub(weekFromEvent(e)) : undefined}
+      onPointerLeave={onScrub || markMinMax ? () => handleScrub(null) : undefined}
+    >
+      {single && (
+        <defs>
+          <linearGradient id={gradientId} x1="0" y1="0" x2="1" y2="0">
+            {gradientStops.map((s, i) => (
+              <stop key={i} offset={s.offset} stopColor={s.color} />
+            ))}
+          </linearGradient>
+        </defs>
+      )}
+
+      {/* faint quarter grid */}
+      {[0.25, 0.5, 0.75].map((f) => (
+        <line
+          key={f}
+          x1={0}
+          x2={dims.w}
+          y1={yFor(f, dims)}
+          y2={yFor(f, dims)}
+          stroke="currentColor"
+          strokeOpacity={0.08}
+          strokeDasharray="2 6"
+        />
+      ))}
+
+      {single ? (
+        <>
+          <path
+            d={buildPath(single.values, true, dims)}
+            fill={`url(#${gradientId})`}
+            fillOpacity={0.18}
+          />
+          <path
+            d={buildPath(single.values, false, dims)}
+            fill="none"
+            stroke={`url(#${gradientId})`}
+            strokeWidth={2.5}
+            strokeLinejoin="round"
+            vectorEffect="non-scaling-stroke"
+          />
+        </>
+      ) : (
+        series.map((s, i) => (
+          <path
+            key={s.id}
+            d={buildPath(s.values, false, dims)}
+            fill="none"
+            stroke={s.color ?? SERIES_COLORS[mode][i % SERIES_COLORS[mode].length]}
+            strokeWidth={2}
+            strokeLinejoin="round"
+            vectorEffect="non-scaling-stroke"
+          />
+        ))
+      )}
+
+      {currentWeek !== undefined && currentWeek >= 1 && currentWeek <= count && (
+        <line
+          x1={xFor(currentWeek - 1, count, dims)}
+          x2={xFor(currentWeek - 1, count, dims)}
+          y1={PAD_TOP - 4}
+          y2={dims.h - PAD_BOTTOM}
+          stroke="currentColor"
+          strokeOpacity={0.45}
+          strokeWidth={1}
+          strokeDasharray="3 3"
+        />
+      )}
+
+      {extremes && single && (
+        <>
+          {/* Quietest week: the copy calls this ring "teal/turquoise" — the
+              light stroke must actually read as turquoise, not near-grey. */}
+          <circle
+            cx={xFor(extremes.min, count, dims)}
+            cy={yFor(single.values[extremes.min] ?? 0, dims)}
+            r={5.5}
+            fill={mode === "dark" ? "#0f1922" : "#fdfaf3"}
+            stroke={mode === "dark" ? "#4fc3b8" : "#0e9488"}
+            strokeWidth={3}
+          />
+          <circle
+            cx={xFor(extremes.max, count, dims)}
+            cy={yFor(single.values[extremes.max] ?? 0, dims)}
+            r={5.5}
+            fill={mode === "dark" ? "#d97c55" : "#c2542f"}
+          />
+        </>
+      )}
+
+      {scrub !== null && single && single.values[scrub - 1] !== null && (
+        <circle
+          cx={xFor(scrub - 1, count, dims)}
+          cy={yFor(single.values[scrub - 1] as number, dims)}
+          r={4}
+          fill={crowdColor(single.values[scrub - 1] as number, mode)}
+          stroke={mode === "dark" ? "#0f1922" : "#fdfaf3"}
+          strokeWidth={1.5}
+        />
+      )}
+    </svg>
+  );
+
+  if (!monthLabels?.length) return chart;
+
+  return (
+    <div>
+      {chart}
+      <div
+        aria-hidden
+        className="mt-1 flex justify-between font-mono text-[9px] uppercase tracking-wider text-ink-faint"
+      >
+        {/* All 12 months always — single letters on narrow screens so the
+            axis still ends with December. */}
+        {monthLabels.map((m, i) => (
+          <span key={i}>
+            <span className="sm:hidden">{m.charAt(0)}</span>
+            <span className="hidden sm:inline">{m}</span>
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ui/IconButton.tsx b/src/components/ui/IconButton.tsx
new file mode 100644
index 0000000..38a9892
--- /dev/null
+++ b/src/components/ui/IconButton.tsx
@@ -0,0 +1,24 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { cx } from "./cx";
+
+interface IconButtonProps extends ComponentPropsWithoutRef<"button"> {
+  "aria-label": string;
+  active?: boolean;
+}
+
+/** Square 40px tap-friendly icon button. */
+export function IconButton({ active = false, className, ...rest }: IconButtonProps) {
+  return (
+    <button
+      type="button"
+      {...rest}
+      className={cx(
+        "inline-flex h-10 w-10 items-center justify-center rounded-[3px] transition-colors",
+        active
+          ? "bg-surface-sunken text-accent"
+          : "text-ink-muted hover:bg-surface-sunken hover:text-ink",
+        className,
+      )}
+    />
+  );
+}
diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx
new file mode 100644
index 0000000..166285c
--- /dev/null
+++ b/src/components/ui/Input.tsx
@@ -0,0 +1,13 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { cx } from "./cx";
+
+const FIELD_CLASSES =
+  "w-full rounded-[3px] border border-line bg-surface-raised px-3.5 py-2.5 text-sm text-ink placeholder:text-ink-faint transition-colors focus:border-accent-2 focus:outline-none focus:ring-2 focus:ring-accent-2/20";
+
+export function Input({ className, ...rest }: ComponentPropsWithoutRef<"input">) {
+  return <input {...rest} className={cx(FIELD_CLASSES, className)} />;
+}
+
+export function Textarea({ className, ...rest }: ComponentPropsWithoutRef<"textarea">) {
+  return <textarea {...rest} className={cx(FIELD_CLASSES, "min-h-28", className)} />;
+}
diff --git a/src/components/ui/Ornaments.tsx b/src/components/ui/Ornaments.tsx
new file mode 100644
index 0000000..13c1a83
--- /dev/null
+++ b/src/components/ui/Ornaments.tsx
@@ -0,0 +1,61 @@
+import { cx } from "./cx";
+
+/**
+ * Decorative cartographic ornaments. All are aria-hidden and use currentColor
+ * so they inherit the surrounding text colour.
+ */
+
+interface OrnamentProps {
+  className?: string;
+}
+
+export function CompassRose({ className }: OrnamentProps) {
+  return (
+    <svg
+      aria-hidden
+      viewBox="0 0 48 48"
+      fill="none"
+      className={cx("h-10 w-10", className)}
+    >
+      <circle cx="24" cy="24" r="22" stroke="currentColor" strokeWidth="1" opacity="0.4" />
+      <circle cx="24" cy="24" r="16" stroke="currentColor" strokeWidth="0.5" opacity="0.3" strokeDasharray="2 3" />
+      <path d="M24 4 L27 21 L24 24 L21 21 Z" fill="currentColor" opacity="0.85" />
+      <path d="M24 44 L27 27 L24 24 L21 27 Z" fill="currentColor" opacity="0.35" />
+      <path d="M4 24 L21 21 L24 24 L21 27 Z" fill="currentColor" opacity="0.35" />
+      <path d="M44 24 L27 21 L24 24 L27 27 Z" fill="currentColor" opacity="0.35" />
+      <circle cx="24" cy="24" r="2" fill="currentColor" />
+    </svg>
+  );
+}
+
+export function RouteArc({ className }: OrnamentProps) {
+  return (
+    <svg
+      aria-hidden
+      viewBox="0 0 200 60"
+      fill="none"
+      className={className}
+    >
+      <path
+        d="M8 52 C 60 8, 140 8, 192 52"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeDasharray="1 8"
+        strokeLinecap="round"
+      />
+      <circle cx="8" cy="52" r="3.5" fill="currentColor" />
+      <circle cx="192" cy="52" r="3.5" stroke="currentColor" strokeWidth="2" fill="none" />
+    </svg>
+  );
+}
+
+export function StampFrame({ className }: OrnamentProps) {
+  return (
+    <svg aria-hidden viewBox="0 0 64 64" fill="none" className={cx("h-12 w-12", className)}>
+      <rect x="6" y="6" width="52" height="52" stroke="currentColor" strokeWidth="1.5" opacity="0.7" />
+      <rect x="11" y="11" width="42" height="42" stroke="currentColor" strokeWidth="0.75" strokeDasharray="3 3" opacity="0.5" />
+      <circle cx="32" cy="32" r="12" stroke="currentColor" strokeWidth="1" strokeDasharray="2 2" opacity="0.6" />
+      <path d="M32 24 L34 30 L40 30 L35 34 L37 40 L32 36 L27 40 L29 34 L24 30 L30 30 Z" fill="currentColor" opacity="0.5" />
+    </svg>
+  );
+}
diff --git a/src/components/ui/SectionHeading.tsx b/src/components/ui/SectionHeading.tsx
new file mode 100644
index 0000000..6e528bf
--- /dev/null
+++ b/src/components/ui/SectionHeading.tsx
@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+import { cx } from "./cx";
+
+interface SectionHeadingProps {
+  /** Small mono kicker above the title, e.g. "01 · THE MODEL". */
+  eyebrow: ReactNode;
+  title: ReactNode;
+  lede?: ReactNode;
+  align?: "left" | "center";
+  className?: string;
+}
+
+/**
+ * The signature Atlas Editorial section opener: mono eyebrow in terracotta,
+ * Fraunces display title, short accent rule, optional lede.
+ */
+export function SectionHeading({
+  eyebrow,
+  title,
+  lede,
+  align = "left",
+  className,
+}: SectionHeadingProps) {
+  const centered = align === "center";
+  return (
+    <div className={cx(centered && "flex flex-col items-center text-center", className)}>
+      <p className="font-mono text-xs uppercase tracking-[0.25em] text-accent">{eyebrow}</p>
+      <h2 className="mt-3 font-display text-3xl leading-tight text-ink sm:text-4xl">{title}</h2>
+      <div aria-hidden className="mt-4 h-px w-16 bg-accent/70" />
+      {lede && <p className="mt-4 max-w-2xl text-base leading-relaxed text-ink-muted">{lede}</p>}
+    </div>
+  );
+}
diff --git a/src/components/ui/Sheet.tsx b/src/components/ui/Sheet.tsx
new file mode 100644
index 0000000..6df9c21
--- /dev/null
+++ b/src/components/ui/Sheet.tsx
@@ -0,0 +1,131 @@
+"use client";
+
+import { useEffect, useId, useRef, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { cx } from "./cx";
+
+interface SheetProps {
+  open: boolean;
+  onClose: () => void;
+  title: ReactNode;
+  children: ReactNode;
+  /** Extra header content rendered next to the title (e.g. segmented tabs). */
+  headerExtra?: ReactNode;
+  /** Localized label for the close button. */
+  closeLabel?: string;
+  className?: string;
+}
+
+const FOCUSABLE =
+  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+/**
+ * Mobile-first bottom sheet (dialog on md+ screens would still work, but the
+ * map screen only uses it below md). Portal-rendered with backdrop, focus
+ * trap, escape-to-close, body scroll lock and safe-area padding.
+ */
+export function Sheet({
+  open,
+  onClose,
+  title,
+  children,
+  headerExtra,
+  closeLabel = "Close",
+  className,
+}: SheetProps) {
+  const panelRef = useRef<HTMLDivElement>(null);
+  const titleId = useId();
+
+  useEffect(() => {
+    if (!open) return;
+
+    const previouslyFocused = document.activeElement as HTMLElement | null;
+    const panel = panelRef.current;
+    panel?.focus();
+
+    const { overflow } = document.body.style;
+    document.body.style.overflow = "hidden";
+
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        onClose();
+        return;
+      }
+      if (e.key !== "Tab" || !panel) return;
+      const focusable = Array.from(panel.querySelectorAll<HTMLElement>(FOCUSABLE));
+      if (focusable.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey && (active === first || active === panel)) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && active === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    }
+
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown, true);
+      document.body.style.overflow = overflow;
+      previouslyFocused?.focus?.();
+    };
+  }, [open, onClose]);
+
+  if (!open || typeof document === "undefined") return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-50">
+      <div
+        aria-hidden
+        className="absolute inset-0 bg-black/45 backdrop-blur-[2px]"
+        onClick={onClose}
+      />
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        tabIndex={-1}
+        className={cx(
+          "absolute inset-x-0 bottom-0 flex max-h-[85dvh] flex-col rounded-t-xl border-t border-line bg-surface-raised shadow-2xl outline-none",
+          // On larger screens: a centered, width-capped sheet (also keeps
+          // stretched charts inside from distorting).
+          "sm:left-1/2 sm:right-auto sm:w-full sm:max-w-xl sm:-translate-x-1/2 sm:rounded-t-xl sm:border-x",
+          "pb-[max(1rem,env(safe-area-inset-bottom))]",
+          className,
+        )}
+      >
+        <div aria-hidden className="flex justify-center pt-2.5">
+          <div className="h-1 w-10 rounded-full bg-line-strong" />
+        </div>
+        <div className="flex items-center justify-between gap-3 px-4 pb-2 pt-2">
+          <h2 id={titleId} className="font-display text-lg text-ink">
+            {title}
+          </h2>
+          <div className="flex items-center gap-2">
+            {headerExtra}
+            <button
+              type="button"
+              onClick={onClose}
+              aria-label={closeLabel}
+              className="flex h-9 w-9 items-center justify-center rounded-full text-ink-muted transition-colors hover:bg-surface-sunken hover:text-ink"
+            >
+              <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div className="min-h-0 flex-1 overflow-y-auto px-4">{children}</div>
+      </div>
+    </div>,
+    document.body,
+  );
+}
diff --git a/src/components/ui/Switch.tsx b/src/components/ui/Switch.tsx
new file mode 100644
index 0000000..caa2d14
--- /dev/null
+++ b/src/components/ui/Switch.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { cx } from "./cx";
+
+interface SwitchProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  "aria-label"?: string;
+  id?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function Switch({ checked, onChange, disabled = false, className, ...rest }: SwitchProps) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      disabled={disabled}
+      onClick={() => onChange(!checked)}
+      className={cx(
+        "relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border transition-colors",
+        checked ? "border-accent-2 bg-accent-2" : "border-line-strong bg-surface-sunken",
+        disabled && "cursor-not-allowed opacity-50",
+        className,
+      )}
+      {...rest}
+    >
+      <span
+        aria-hidden
+        className={cx(
+          "inline-block h-4 w-4 transform rounded-full bg-surface-raised shadow transition-transform",
+          checked ? "translate-x-6" : "translate-x-1",
+        )}
+      />
+    </button>
+  );
+}
diff --git a/src/components/ui/__tests__/primitives.test.tsx b/src/components/ui/__tests__/primitives.test.tsx
new file mode 100644
index 0000000..1ba8b46
--- /dev/null
+++ b/src/components/ui/__tests__/primitives.test.tsx
@@ -0,0 +1,171 @@
+import { vi, describe, it, expect } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { Button } from "@/components/ui/Button";
+import { Switch } from "@/components/ui/Switch";
+import { CrowdCurve } from "@/components/ui/CrowdCurve";
+import { Sheet } from "@/components/ui/Sheet";
+
+describe("Button", () => {
+  it("renders an anchor when href is given", () => {
+    render(<Button href="/destinations">Explore</Button>);
+    const link = screen.getByRole("link", { name: "Explore" });
+    expect(link.tagName).toBe("A");
+    expect(link).toHaveAttribute("href", "/destinations");
+  });
+
+  it("renders a type=button element when no href is given", () => {
+    const onClick = vi.fn();
+    render(<Button onClick={onClick}>Save</Button>);
+    const button = screen.getByRole("button", { name: "Save" });
+    expect(button.tagName).toBe("BUTTON");
+    expect(button).toHaveAttribute("type", "button");
+    fireEvent.click(button);
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("applies variant classes", () => {
+    render(
+      <>
+        <Button variant="primary">Primary</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="ghost">Ghost</Button>
+        <Button variant="link">Linkish</Button>
+      </>,
+    );
+    expect(screen.getByRole("button", { name: "Primary" })).toHaveClass("bg-accent");
+    expect(screen.getByRole("button", { name: "Secondary" })).toHaveClass(
+      "border-line",
+      "bg-surface-raised",
+    );
+    expect(screen.getByRole("button", { name: "Ghost" })).toHaveClass("text-ink-muted");
+    expect(screen.getByRole("button", { name: "Linkish" })).toHaveClass("underline", "p-0");
+  });
+});
+
+describe("Switch", () => {
+  it('has role="switch" and reflects checked via aria-checked', () => {
+    const { rerender } = render(
+      <Switch checked={false} onChange={() => {}} aria-label="Dark mode" />,
+    );
+    const el = screen.getByRole("switch", { name: "Dark mode" });
+    expect(el).toHaveAttribute("aria-checked", "false");
+
+    rerender(<Switch checked onChange={() => {}} aria-label="Dark mode" />);
+    expect(screen.getByRole("switch", { name: "Dark mode" })).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
+  });
+
+  it("calls onChange with the toggled value on click", () => {
+    const onChange = vi.fn();
+    const { rerender } = render(
+      <Switch checked={false} onChange={onChange} aria-label="Dark mode" />,
+    );
+    fireEvent.click(screen.getByRole("switch"));
+    expect(onChange).toHaveBeenCalledWith(true);
+
+    rerender(<Switch checked onChange={onChange} aria-label="Dark mode" />);
+    fireEvent.click(screen.getByRole("switch"));
+    expect(onChange).toHaveBeenLastCalledWith(false);
+  });
+});
+
+describe("CrowdCurve", () => {
+  // 53 weekly values with a clear min (week 6) and max (week 31).
+  const values = Array.from({ length: 53 }, (_, i) => {
+    if (i === 5) return 0.05;
+    if (i === 30) return 0.95;
+    return 0.5;
+  });
+
+  it("renders an svg with role img and the given aria-label", () => {
+    render(
+      <CrowdCurve series={[{ id: "a", values }]} ariaLabel="Weekly crowd levels" />,
+    );
+    const svg = screen.getByRole("img", { name: "Weekly crowd levels" });
+    expect(svg.tagName.toLowerCase()).toBe("svg");
+  });
+
+  it("renders min/max marker circles when markMinMax is set", () => {
+    const { container } = render(
+      <CrowdCurve series={[{ id: "a", values }]} ariaLabel="curve" markMinMax />,
+    );
+    expect(container.querySelectorAll("circle")).toHaveLength(2);
+  });
+
+  it("renders no marker circles without markMinMax", () => {
+    const { container } = render(
+      <CrowdCurve series={[{ id: "a", values }]} ariaLabel="curve" />,
+    );
+    expect(container.querySelectorAll("circle")).toHaveLength(0);
+  });
+
+  it("renders a gradient def for a single series", () => {
+    const { container } = render(
+      <CrowdCurve series={[{ id: "a", values }]} ariaLabel="curve" />,
+    );
+    const gradient = container.querySelector("defs linearGradient");
+    expect(gradient).toBeInTheDocument();
+    expect(gradient!.querySelectorAll("stop").length).toBe(values.length);
+  });
+
+  it("renders flat categorical strokes (no gradient) for multiple series", () => {
+    const { container } = render(
+      <CrowdCurve
+        series={[
+          { id: "a", values },
+          { id: "b", values: values.map((v) => v / 2) },
+        ]}
+        ariaLabel="compare"
+      />,
+    );
+    expect(container.querySelector("defs linearGradient")).not.toBeInTheDocument();
+    expect(container.querySelectorAll('path[fill="none"]')).toHaveLength(2);
+  });
+});
+
+describe("Sheet", () => {
+  it("renders nothing when closed", () => {
+    render(
+      <Sheet open={false} onClose={() => {}} title="Filters">
+        body
+      </Sheet>,
+    );
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+
+  it("renders a dialog labelled by its title when open", () => {
+    render(
+      <Sheet open onClose={() => {}} title="Filters">
+        <p>Sheet body</p>
+      </Sheet>,
+    );
+    const dialog = screen.getByRole("dialog", { name: "Filters" });
+    expect(dialog).toHaveAttribute("aria-modal", "true");
+    expect(screen.getByText("Sheet body")).toBeInTheDocument();
+  });
+
+  it("calls onClose when Escape is pressed", () => {
+    const onClose = vi.fn();
+    render(
+      <Sheet open onClose={onClose} title="Filters">
+        body
+      </Sheet>,
+    );
+    fireEvent.keyDown(document, { key: "Escape" });
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("has a close button with the given closeLabel that calls onClose", () => {
+    const onClose = vi.fn();
+    render(
+      <Sheet open onClose={onClose} title="Filters" closeLabel="Dismiss sheet">
+        body
+      </Sheet>,
+    );
+    const closeButton = screen.getByRole("button", { name: "Dismiss sheet" });
+    fireEvent.click(closeButton);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/components/ui/cx.ts b/src/components/ui/cx.ts
new file mode 100644
index 0000000..982a350
--- /dev/null
+++ b/src/components/ui/cx.ts
@@ -0,0 +1,4 @@
+/** Join class names, skipping falsy values. */
+export function cx(...parts: Array<string | false | null | undefined>): string {
+  return parts.filter(Boolean).join(" ");
+}
diff --git a/src/hooks/useBusynessSeries.ts b/src/hooks/useBusynessSeries.ts
new file mode 100644
index 0000000..327baf4
--- /dev/null
+++ b/src/hooks/useBusynessSeries.ts
@@ -0,0 +1,22 @@
+"use client";
+
+import useSWR from "swr";
+import type { BusynessSeriesResponse } from "@/app/api/busyness/route";
+
+async function fetcher(url: string): Promise<BusynessSeriesResponse> {
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(`Busyness request failed: ${res.status}`);
+  return res.json();
+}
+
+/**
+ * Weekly busyness series (52 values, nulls where uncached) for up to 6
+ * destinations in a year, from the precomputed heatmap cache.
+ */
+export function useBusynessSeries(ids: string[], year: number) {
+  const key = ids.length > 0 ? `/api/busyness?ids=${ids.join(",")}&year=${year}` : null;
+  return useSWR<BusynessSeriesResponse>(key, fetcher, {
+    revalidateOnFocus: false,
+    keepPreviousData: true,
+  });
+}
diff --git a/src/lib/__tests__/busyness-scale.test.ts b/src/lib/__tests__/busyness-scale.test.ts
index 65e0e9e..ee3f068 100644
--- a/src/lib/__tests__/busyness-scale.test.ts
+++ b/src/lib/__tests__/busyness-scale.test.ts
@@ -5,6 +5,7 @@ import {
   busynessColor,
   BUSYNESS_BANDS,
 } from "@/lib/busyness-scale";
+import { crowdColor } from "@/lib/crowd-palette";
 
 describe("busynessLabelKey", () => {
   it("maps scores to the map's five bands", () => {
@@ -37,10 +38,17 @@ describe("busynessBand", () => {
 });
 
 describe("busynessColor", () => {
-  it("ramps green → yellow → orange → red", () => {
-    expect(busynessColor(0.1)).toBe("#22c55e");
-    expect(busynessColor(0.3)).toBe("#facc15");
-    expect(busynessColor(0.6)).toBe("#f97316");
-    expect(busynessColor(0.9)).toBe("#dc2626");
+  it("ramps green → ochre → terracotta → brick (crowd palette, light mode)", () => {
+    expect(busynessColor(0.1)).toBe(crowdColor(0.1, "light"));
+    expect(busynessColor(0.3)).toBe(crowdColor(0.3, "light"));
+    expect(busynessColor(0.6)).toBe(crowdColor(0.6, "light"));
+    expect(busynessColor(0.9)).toBe(crowdColor(0.9, "light"));
+  });
+
+  it("returns four distinct ascending-band colours per mode", () => {
+    for (const mode of ["light", "dark"] as const) {
+      const colors = [0.1, 0.3, 0.6, 0.9].map((s) => busynessColor(s, mode));
+      expect(new Set(colors).size).toBe(4);
+    }
   });
 });
diff --git a/src/lib/__tests__/crowd-palette.test.ts b/src/lib/__tests__/crowd-palette.test.ts
new file mode 100644
index 0000000..b3689c5
--- /dev/null
+++ b/src/lib/__tests__/crowd-palette.test.ts
@@ -0,0 +1,109 @@
+import { describe, it, expect } from "vitest";
+import {
+  crowdColor,
+  crowdCssGradient,
+  crowdHeatmapColorExpr,
+  crowdCircleColorExpr,
+  type ThemeMode,
+} from "@/lib/crowd-palette";
+
+const MODES: ThemeMode[] = ["light", "dark"];
+const HEX = /^#[0-9a-f]{6}$/i;
+const HEX_OR_RGBA = /^(#[0-9a-f]{6}|rgba\(\d+, \d+, \d+, (0|0?\.\d+|1(\.0)?)\))$/i;
+
+describe("crowdColor", () => {
+  it.each(MODES)("returns 4 distinct colours across the bands (%s)", (mode) => {
+    const colors = [0, 0.3, 0.6, 0.9].map((s) => crowdColor(s, mode));
+    expect(new Set(colors).size).toBe(4);
+    for (const c of colors) expect(c).toMatch(HEX);
+  });
+
+  it.each(MODES)("switches band exactly at the thresholds (%s)", (mode) => {
+    // 0.25 boundary: quiet -> moderate
+    expect(crowdColor(0.24, mode)).toBe(crowdColor(0, mode));
+    expect(crowdColor(0.25, mode)).not.toBe(crowdColor(0.24, mode));
+    // 0.5 boundary: moderate -> busy
+    expect(crowdColor(0.49, mode)).toBe(crowdColor(0.25, mode));
+    expect(crowdColor(0.5, mode)).not.toBe(crowdColor(0.49, mode));
+    // 0.75 boundary: busy -> packed
+    expect(crowdColor(0.74, mode)).toBe(crowdColor(0.5, mode));
+    expect(crowdColor(0.75, mode)).not.toBe(crowdColor(0.74, mode));
+    expect(crowdColor(1, mode)).toBe(crowdColor(0.75, mode));
+  });
+
+  it("defaults to light mode", () => {
+    expect(crowdColor(0.9)).toBe(crowdColor(0.9, "light"));
+  });
+
+  it("light and dark band colours differ", () => {
+    for (const score of [0, 0.3, 0.6, 0.9]) {
+      expect(crowdColor(score, "light")).not.toBe(crowdColor(score, "dark"));
+    }
+  });
+});
+
+describe("crowdCssGradient", () => {
+  it.each(MODES)("contains all 4 band colours (%s)", (mode) => {
+    const gradient = crowdCssGradient(mode);
+    expect(gradient).toMatch(/^linear-gradient\(to right, /);
+    for (const score of [0, 0.3, 0.6, 0.9]) {
+      expect(gradient).toContain(crowdColor(score, mode));
+    }
+  });
+
+  it("light and dark gradients differ", () => {
+    expect(crowdCssGradient("light")).not.toBe(crowdCssGradient("dark"));
+  });
+});
+
+describe("crowdHeatmapColorExpr", () => {
+  it.each(MODES)("is an interpolate expression with valid stops (%s)", (mode) => {
+    const expr = crowdHeatmapColorExpr(mode);
+    expect(Array.isArray(expr)).toBe(true);
+    expect(expr[0]).toBe("interpolate");
+    expect(expr[1]).toEqual(["linear"]);
+    expect(expr[2]).toEqual(["heatmap-density"]);
+
+    // Alternating number / colour stops from index 3 onwards.
+    const stops = expr.slice(3);
+    expect(stops.length).toBeGreaterThanOrEqual(8);
+    expect(stops.length % 2).toBe(0);
+    for (let i = 0; i < stops.length; i += 2) {
+      expect(typeof stops[i]).toBe("number");
+      expect(stops[i]).toBeGreaterThanOrEqual(0);
+      expect(stops[i]).toBeLessThanOrEqual(1);
+      expect(stops[i + 1]).toMatch(HEX_OR_RGBA);
+    }
+  });
+
+  it("light and dark expressions differ", () => {
+    expect(crowdHeatmapColorExpr("light")).not.toEqual(crowdHeatmapColorExpr("dark"));
+  });
+});
+
+describe("crowdCircleColorExpr", () => {
+  it.each(MODES)("is an interpolate expression over busynessScore (%s)", (mode) => {
+    const expr = crowdCircleColorExpr(mode);
+    expect(Array.isArray(expr)).toBe(true);
+    expect(expr[0]).toBe("interpolate");
+    expect(expr[1]).toEqual(["linear"]);
+    expect(expr[2]).toEqual(["get", "busynessScore"]);
+
+    const stops = expr.slice(3);
+    expect(stops.length % 2).toBe(0);
+    for (let i = 0; i < stops.length; i += 2) {
+      expect(typeof stops[i]).toBe("number");
+      expect(stops[i + 1]).toMatch(HEX_OR_RGBA);
+    }
+    // All 4 band colours appear as stops.
+    const colors = stops.filter((_, i) => i % 2 === 1);
+    expect(new Set(colors).size).toBe(4);
+    for (const score of [0, 0.3, 0.6, 0.9]) {
+      expect(colors).toContain(crowdColor(score, mode));
+    }
+  });
+
+  it("light and dark expressions differ", () => {
+    expect(crowdCircleColorExpr("light")).not.toEqual(crowdCircleColorExpr("dark"));
+  });
+});
diff --git a/src/lib/__tests__/quiet-alternatives.test.ts b/src/lib/__tests__/quiet-alternatives.test.ts
new file mode 100644
index 0000000..71e5086
--- /dev/null
+++ b/src/lib/__tests__/quiet-alternatives.test.ts
@@ -0,0 +1,58 @@
+import { describe, it, expect } from "vitest";
+import { quietAlternatives } from "@/lib/quiet-alternatives";
+import { destinations } from "@/lib/data/destinations";
+import { getWeeklyBusyness } from "@/lib/services/destination-busyness";
+
+// Pick a real busy destination at test time: sort by weekly peak (this builds
+// the memoized busyness matrix once for the whole file) and take the busiest
+// one that actually yields alternatives.
+const byPeakDesc = [...destinations]
+  .map((d) => ({ d, peak: Math.max(...getWeeklyBusyness(d.id)) }))
+  .sort((a, b) => b.peak - a.peak);
+
+const target = byPeakDesc.find(({ d }) => quietAlternatives(d.id).length > 0)?.d;
+
+describe("quietAlternatives", () => {
+  it("returns [] for an unknown destination id", () => {
+    expect(quietAlternatives("does-not-exist")).toEqual([]);
+  });
+
+  it("finds a busy destination in the dataset that has alternatives", () => {
+    expect(target).toBeDefined();
+  });
+
+  it("returns at most `limit` results", () => {
+    const results = quietAlternatives(target!.id, { limit: 2 });
+    expect(results.length).toBeGreaterThan(0);
+    expect(results.length).toBeLessThanOrEqual(2);
+
+    const defaultResults = quietAlternatives(target!.id);
+    expect(defaultResults.length).toBeLessThanOrEqual(4);
+  });
+
+  it("only suggests destinations of the same category", () => {
+    for (const alt of quietAlternatives(target!.id)) {
+      expect(alt.destination.category).toBe(target!.category);
+    }
+  });
+
+  it("only suggests destinations at least one band calmer", () => {
+    for (const alt of quietAlternatives(target!.id)) {
+      expect(alt.bandsCalmer).toBeGreaterThanOrEqual(1);
+      expect(alt.peakWindowBusyness).toBeGreaterThanOrEqual(0);
+      expect(alt.peakWindowBusyness).toBeLessThanOrEqual(1);
+    }
+  });
+
+  it("never suggests the target itself", () => {
+    for (const alt of quietAlternatives(target!.id)) {
+      expect(alt.destination.id).not.toBe(target!.id);
+    }
+  });
+
+  it("is deterministic", () => {
+    const a = quietAlternatives(target!.id);
+    const b = quietAlternatives(target!.id);
+    expect(a.map((x) => x.destination.id)).toEqual(b.map((x) => x.destination.id));
+  });
+});
diff --git a/src/lib/busyness-scale.ts b/src/lib/busyness-scale.ts
index 2222c8d..402ea3a 100644
--- a/src/lib/busyness-scale.ts
+++ b/src/lib/busyness-scale.ts
@@ -4,6 +4,8 @@
  * scale is identical everywhere.
  */
 
+import { crowdColor, type ThemeMode } from "./crowd-palette";
+
 export type BusynessLabelKey =
   | "quiet"
   | "moderate"
@@ -34,10 +36,7 @@ export function busynessBand(score: number): number {
   return BUSYNESS_BANDS.indexOf(busynessLabelKey(score));
 }
 
-/** Dot/bar colour for a busyness score (green → yellow → orange → red). */
-export function busynessColor(score: number): string {
-  if (score < 0.25) return "#22c55e";
-  if (score < 0.5) return "#facc15";
-  if (score < 0.75) return "#f97316";
-  return "#dc2626";
+/** Dot/bar colour for a busyness score (green → ochre → terracotta → brick). */
+export function busynessColor(score: number, mode: ThemeMode = "light"): string {
+  return crowdColor(score, mode);
 }
diff --git a/src/lib/crowd-palette.ts b/src/lib/crowd-palette.ts
new file mode 100644
index 0000000..a10c138
--- /dev/null
+++ b/src/lib/crowd-palette.ts
@@ -0,0 +1,105 @@
+import type { ExpressionSpecification } from "maplibre-gl";
+
+/**
+ * Single source of truth for the crowdedness colour scale and related map
+ * colours, in both themes. Consumed by busyness-scale.ts, the MapLibre layers,
+ * the Legend and the crowd-curve charts so the scale reads identically
+ * everywhere.
+ *
+ * The ramp keeps the green → yellow → orange → red semantics but is warmed
+ * and desaturated to sit on the Atlas Editorial paper (light) and night-navy
+ * (dark) surfaces.
+ */
+
+export type ThemeMode = "light" | "dark";
+
+/** Band colours quiet → moderate/ochre → busy/terracotta → packed/brick. */
+const BAND_COLORS: Record<ThemeMode, readonly [string, string, string, string]> = {
+  light: ["#3e8e5e", "#d9a83f", "#d0703a", "#a33324"],
+  dark: ["#57b27e", "#e6bd57", "#e08653", "#d15a48"],
+};
+
+/** Extreme end of the ramp, used for the densest heatmap core. */
+const PEAK_COLOR: Record<ThemeMode, string> = {
+  light: "#7f2419",
+  dark: "#e04a38",
+};
+
+/** Grey dots for destinations without a score. */
+export const MUTED_DOT_COLOR: Record<ThemeMode, string> = {
+  light: "#97998c",
+  dark: "#55636e",
+};
+
+/** Stroke around destination circles — matches the raised paper surface. */
+export const CIRCLE_STROKE_COLOR: Record<ThemeMode, string> = {
+  light: "#fdfaf3",
+  dark: "#0f1922",
+};
+
+/** School-holiday region overlay (slate blue — distinct from the crowd ramp). */
+export const HOLIDAY_REGION_COLOR: Record<ThemeMode, string> = {
+  light: "#345995",
+  dark: "#7f9fd1",
+};
+
+/** Discrete colour for a 0–1 busyness score (same thresholds as before). */
+export function crowdColor(score: number, mode: ThemeMode = "light"): string {
+  const bands = BAND_COLORS[mode];
+  if (score < 0.25) return bands[0];
+  if (score < 0.5) return bands[1];
+  if (score < 0.75) return bands[2];
+  return bands[3];
+}
+
+function hexToRgba(hex: string, alpha: number): string {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+/** MapLibre `heatmap-color` expression over heatmap-density. */
+export function crowdHeatmapColorExpr(mode: ThemeMode): ExpressionSpecification {
+  const [quiet, moderate, busy, packed] = BAND_COLORS[mode];
+  return [
+    "interpolate",
+    ["linear"],
+    ["heatmap-density"],
+    0,
+    "rgba(0, 0, 0, 0)",
+    0.1,
+    hexToRgba(quiet, 0.4),
+    0.3,
+    hexToRgba(moderate, 0.6),
+    0.5,
+    hexToRgba(busy, 0.7),
+    0.7,
+    hexToRgba(packed, 0.8),
+    1.0,
+    hexToRgba(PEAK_COLOR[mode], 0.9),
+  ];
+}
+
+/** MapLibre `circle-color` expression over the busynessScore property. */
+export function crowdCircleColorExpr(mode: ThemeMode): ExpressionSpecification {
+  const [quiet, moderate, busy, packed] = BAND_COLORS[mode];
+  return [
+    "interpolate",
+    ["linear"],
+    ["get", "busynessScore"],
+    0,
+    quiet,
+    0.3,
+    moderate,
+    0.6,
+    busy,
+    1.0,
+    packed,
+  ];
+}
+
+/** CSS gradient for the legend bar and chart fills. */
+export function crowdCssGradient(mode: ThemeMode): string {
+  return `linear-gradient(to right, ${BAND_COLORS[mode].join(", ")})`;
+}
diff --git a/src/lib/data/destinations/europe-central.ts b/src/lib/data/destinations/europe-central.ts
index 861e40c..4744394 100644
--- a/src/lib/data/destinations/europe-central.ts
+++ b/src/lib/data/destinations/europe-central.ts
@@ -33,7 +33,11 @@ export const destinations: Destination[] = [
   { id: "IT-SICILY", name: "Sicilia", country: "IT", lat: 37.60, lng: 14.02, category: "beach", peakMonths: [5, 6, 7, 8, 9], basePopularity: 0.72, region: "europe" },
   { id: "IT-CALABRIA", name: "Calabria", country: "IT", lat: 38.91, lng: 16.59, category: "beach", peakMonths: [5, 6, 7, 8, 9], basePopularity: 0.55, region: "europe" },
   { id: "IT-ROME", name: "Rome", country: "IT", lat: 41.90, lng: 12.50, category: "city", peakMonths: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], basePopularity: 0.88, region: "europe" },
-  { id: "IT-VENICE", name: "Venice", country: "IT", lat: 45.44, lng: 12.34, category: "city", peakMonths: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], basePopularity: 0.80, region: "europe" },
+  // Venice's historic centre is tiny (~50k residents) and famously saturated —
+  // nowhere near the metropolis default of 5.0. 3.0 (like Florence) combined
+  // with its heavy travel-pattern inflow yields packed summers with a real
+  // winter dip; lower values saturate the curve flat at 1.0.
+  { id: "IT-VENICE", name: "Venice", country: "IT", lat: 45.44, lng: 12.34, category: "city", peakMonths: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], basePopularity: 0.80, region: "europe", capacityOverride: 3.0 },
 
   // ========================================
   // SPAIN (11)
diff --git a/src/lib/data/patterns/europe-central.ts b/src/lib/data/patterns/europe-central.ts
index 5e2989a..ed33b77 100644
--- a/src/lib/data/patterns/europe-central.ts
+++ b/src/lib/data/patterns/europe-central.ts
@@ -896,6 +896,26 @@ export const travelPatterns: TravelPattern[] = [
   { sourceRegionId: "CH-ZH", destinationId: "IT-FLORENCE", weight: 0.48, season: null },
   { sourceRegionId: "AU-NSW", destinationId: "IT-FLORENCE", weight: 0.42, season: null },
 
+  // ----------------------------------------
+  // IT-VENICE (Venice) — one of the most visited cities in Europe (~20M+/yr);
+  // SI and GB-ENG flows already live in the south-east / north pattern files.
+  // ----------------------------------------
+  { sourceRegionId: "DE-BY", destinationId: "IT-VENICE", weight: 0.60, season: null },
+  { sourceRegionId: "DE-NW", destinationId: "IT-VENICE", weight: 0.55, season: null },
+  { sourceRegionId: "FR-ZA", destinationId: "IT-VENICE", weight: 0.55, season: null },
+  { sourceRegionId: "US-NE", destinationId: "IT-VENICE", weight: 0.80, season: null },
+  { sourceRegionId: "US-W", destinationId: "IT-VENICE", weight: 0.65, season: null },
+  { sourceRegionId: "JP-KANTO", destinationId: "IT-VENICE", weight: 0.65, season: null },
+  { sourceRegionId: "KR", destinationId: "IT-VENICE", weight: 0.55, season: null },
+  { sourceRegionId: "CN-EAST", destinationId: "IT-VENICE", weight: 0.70, season: null },
+  { sourceRegionId: "AU-NSW", destinationId: "IT-VENICE", weight: 0.50, season: null },
+  { sourceRegionId: "CH-ZH", destinationId: "IT-VENICE", weight: 0.50, season: null },
+  { sourceRegionId: "AT-9", destinationId: "IT-VENICE", weight: 0.48, season: null },
+  { sourceRegionId: "NL-SOUTH", destinationId: "IT-VENICE", weight: 0.50, season: null },
+  { sourceRegionId: "ES-MADRID", destinationId: "IT-VENICE", weight: 0.45, season: null },
+  { sourceRegionId: "IT-NORTH", destinationId: "IT-VENICE", weight: 0.65, season: null },
+  { sourceRegionId: "IT-SOUTH", destinationId: "IT-VENICE", weight: 0.45, season: null },
+
   // ----------------------------------------
   // IT-MILAN (Milan)
   // ----------------------------------------
diff --git a/src/lib/destination-search.ts b/src/lib/destination-search.ts
new file mode 100644
index 0000000..5c9d07f
--- /dev/null
+++ b/src/lib/destination-search.ts
@@ -0,0 +1,91 @@
+import { destinations as allDestinations } from "@/lib/data/destinations";
+import { geoPlaces, cityAliases } from "@/lib/data/geo-search";
+import { getCountryFlag } from "@/lib/data";
+import type { Destination } from "@/types";
+
+/**
+ * Client-side search index over destinations, countries and capitals.
+ * Built once at module load: slim and diacritic-folded. Specific destinations
+ * rank first (by popularity), then capitals, then countries.
+ */
+
+export type SearchMatch = {
+  id: string;
+  name: string;
+  /** Curated German exonym (Wien, München, …) when one exists. */
+  nameDe?: string;
+  label: string;
+  lat: number;
+  lng: number;
+  zoom: number;
+  /** Set for real destinations (usable for busyness lookups); absent for geo places. */
+  destinationId?: string;
+};
+
+/** Name to display for a match in the given UI locale. */
+export function matchDisplayName(m: SearchMatch, locale: string): string {
+  return locale === "de" && m.nameDe ? m.nameDe : m.name;
+}
+
+export const normalizeQuery = (s: string) =>
+  s
+    .normalize("NFD")
+    .replace(/\p{Diacritic}/gu, "")
+    .toLowerCase()
+    .trim();
+
+type Indexed = SearchMatch & { norms: string[] };
+
+// Alternate search names for a place: localized names (from geoPlaces.aliases,
+// e.g. Deutschland for Germany) plus curated city exonyms (e.g. Wien for Vienna).
+function buildNorms(name: string, extra: string[] = []): string[] {
+  const aliases = cityAliases[normalizeQuery(name)] ?? [];
+  return [...new Set([name, ...extra, ...aliases].map(normalizeQuery))];
+}
+
+const destinationMatches: Indexed[] = allDestinations
+  .slice()
+  .sort((a: Destination, b: Destination) => b.basePopularity - a.basePopularity)
+  .map((d: Destination) => ({
+    id: d.id,
+    destinationId: d.id,
+    name: d.name,
+    nameDe: cityAliases[normalizeQuery(d.name).replace(/[^a-z0-9]/g, "")]?.[0],
+    label: getCountryFlag(d.country) || d.country,
+    lat: d.lat,
+    lng: d.lng,
+    zoom: 8,
+    norms: buildNorms(d.name),
+  }));
+
+// Countries + capitals, skipping any whose name already exists as a destination.
+const seen = new Set(destinationMatches.map((d) => normalizeQuery(d.name)));
+const geoMatches: Indexed[] = geoPlaces
+  .filter((p) => !seen.has(normalizeQuery(p.name)))
+  .map((p) => ({
+    id: `${p.kind}:${p.cc}`,
+    name: p.name,
+    label: getCountryFlag(p.cc) || p.cc,
+    lat: p.lat,
+    lng: p.lng,
+    zoom: p.zoom,
+    norms: buildNorms(p.name, p.aliases ?? []),
+  }));
+
+const INDEX: Indexed[] = [...destinationMatches, ...geoMatches];
+
+export const MIN_QUERY = 2;
+
+/** Search everything: destinations, capitals, countries. */
+export function searchPlaces(query: string, limit = 8): SearchMatch[] {
+  const q = normalizeQuery(query);
+  if (q.length < MIN_QUERY) return [];
+  return INDEX.filter((d) => d.norms.some((n) => n.includes(q))).slice(0, limit);
+}
+
+/** Search only real destinations (for busyness features). */
+export function searchDestinations(query: string, limit = 8): SearchMatch[] {
+  const q = normalizeQuery(query);
+  if (q.length < MIN_QUERY) return [];
+  return destinationMatches.filter((d) => d.norms.some((n) => n.includes(q))).slice(0, limit);
+}
diff --git a/src/lib/destinations.ts b/src/lib/destinations.ts
index df5fa67..5d6991a 100644
--- a/src/lib/destinations.ts
+++ b/src/lib/destinations.ts
@@ -54,6 +54,19 @@ export interface SlugEntry {
 /** Per-locale slug for a single destination, e.g. { en: "vienna", de: "wien" }. */
 export type LocalizedSlugs = Partial<Record<SlugLocale, string>>;
 
+/**
+ * Display name for a destination in a given UI locale: the curated German
+ * exonym (Wien, München, Rom, …) when rendering German, otherwise the
+ * canonical (English) name. Locales without curated exonyms fall back to the
+ * canonical name.
+ */
+export function localizedDestinationName(d: Destination, locale: string): string {
+  if (locale === "de") {
+    return cityAliases[aliasKey(d.name)]?.[0] ?? d.name;
+  }
+  return d.name;
+}
+
 // Build a deterministic, collision-free slug for every destination.
 // English (primary) slugs come first; German exonym slugs are layered on top so
 // German city names (Wien, München, ...) resolve to the same destination page.
diff --git a/src/lib/event-categories.ts b/src/lib/event-categories.ts
new file mode 100644
index 0000000..5e9bcd5
--- /dev/null
+++ b/src/lib/event-categories.ts
@@ -0,0 +1,12 @@
+import type { MajorEvent } from "@/types";
+
+/** Emoji per event category — shared by the map markers and the holiday panel. */
+export const CATEGORY_EMOJI: Record<MajorEvent["category"], string> = {
+  sports: "⚽",
+  festival: "🎉",
+  cultural: "🎭",
+  music: "🎵",
+  trade: "💼",
+};
+
+export const DEFAULT_EVENT_EMOJI = "📍";
diff --git a/src/lib/quiet-alternatives.ts b/src/lib/quiet-alternatives.ts
new file mode 100644
index 0000000..0c44954
--- /dev/null
+++ b/src/lib/quiet-alternatives.ts
@@ -0,0 +1,95 @@
+import { destinations } from "@/lib/data/destinations";
+import { getWeeklyBusyness } from "@/lib/services/destination-busyness";
+import { busynessBand } from "@/lib/busyness-scale";
+import type { Destination } from "@/types";
+
+export interface QuietAlternative {
+  destination: Destination;
+  /** Mean busyness of the alternative during the target's busiest window. */
+  peakWindowBusyness: number;
+  /** How many bands calmer than the target during that window (>= 1). */
+  bandsCalmer: number;
+}
+
+interface Options {
+  limit?: number;
+}
+
+const PEAK_WINDOW = 6; // weeks around the target's busiest week
+
+function haversineKm(aLat: number, aLng: number, bLat: number, bLng: number): number {
+  const R = 6371;
+  const dLat = ((bLat - aLat) * Math.PI) / 180;
+  const dLng = ((bLng - aLng) * Math.PI) / 180;
+  const s =
+    Math.sin(dLat / 2) ** 2 +
+    Math.cos((aLat * Math.PI) / 180) * Math.cos((bLat * Math.PI) / 180) * Math.sin(dLng / 2) ** 2;
+  return 2 * R * Math.asin(Math.sqrt(s));
+}
+
+/** Weeks (0-based indices) forming the target's busiest window. */
+function peakWindowWeeks(weekly: number[]): number[] {
+  let peak = 0;
+  for (let i = 1; i < weekly.length; i++) {
+    if (weekly[i] > weekly[peak]) peak = i;
+  }
+  const half = Math.floor(PEAK_WINDOW / 2);
+  const weeks: number[] = [];
+  for (let off = -half; off < PEAK_WINDOW - half; off++) {
+    weeks.push((peak + off + weekly.length) % weekly.length);
+  }
+  return weeks;
+}
+
+function meanOver(weekly: number[], weeks: number[]): number {
+  if (weeks.length === 0) return 0;
+  return weeks.reduce((sum, w) => sum + (weekly[w] ?? 0), 0) / weeks.length;
+}
+
+/**
+ * Similar-but-calmer destinations: same category, preferring nearby / same
+ * world-region places, that sit at least one busyness band below the target
+ * during the target's own peak weeks. Pure and deterministic — safe on the
+ * server at build time and in the client bundle.
+ */
+export function quietAlternatives(
+  destinationId: string,
+  { limit = 4 }: Options = {},
+): QuietAlternative[] {
+  const target = destinations.find((d) => d.id === destinationId);
+  if (!target) return [];
+
+  const targetWeekly = getWeeklyBusyness(target.id);
+  const window = peakWindowWeeks(targetWeekly);
+  const targetPeakBusyness = meanOver(targetWeekly, window);
+  const targetBand = busynessBand(targetPeakBusyness);
+  if (targetBand === 0) return []; // already quiet — nothing calmer to suggest
+
+  const scored = destinations
+    .filter((d) => d.id !== target.id && d.category === target.category)
+    .map((d) => {
+      const busyness = meanOver(getWeeklyBusyness(d.id), window);
+      return {
+        destination: d,
+        peakWindowBusyness: Math.round(busyness * 1000) / 1000,
+        bandsCalmer: targetBand - busynessBand(busyness),
+        distanceKm: haversineKm(target.lat, target.lng, d.lat, d.lng),
+      };
+    })
+    .filter((c) => c.bandsCalmer >= 1)
+    .map((c) => {
+      // Rank: calmer is better, closer is better, same world region is a bonus.
+      const proximity = Math.max(0, 1 - c.distanceKm / 4000);
+      const regionBonus = c.destination.region === target.region ? 0.5 : 0;
+      const calmness = 1 - c.peakWindowBusyness;
+      return { ...c, rank: calmness * 1.5 + proximity + regionBonus };
+    })
+    .sort((a, b) => b.rank - a.rank)
+    .slice(0, limit);
+
+  return scored.map(({ destination, peakWindowBusyness, bandsCalmer }) => ({
+    destination,
+    peakWindowBusyness,
+    bandsCalmer,
+  }));
+}
diff --git a/src/lib/services/__tests__/destination-busyness-weekly.test.ts b/src/lib/services/__tests__/destination-busyness-weekly.test.ts
new file mode 100644
index 0000000..2cc2523
--- /dev/null
+++ b/src/lib/services/__tests__/destination-busyness-weekly.test.ts
@@ -0,0 +1,39 @@
+import { describe, it, expect } from "vitest";
+import {
+  getWeeklyBusyness,
+  getMonthlyBusyness,
+} from "@/lib/services/destination-busyness";
+import { destinations } from "@/lib/data/destinations";
+
+function idByName(name: string): string {
+  const d = destinations.find((x) => x.name === name);
+  if (!d) throw new Error(`test fixture missing destination: ${name}`);
+  return d.id;
+}
+
+describe("getWeeklyBusyness", () => {
+  it("returns 53 weekly scores in [0,1]", () => {
+    const scores = getWeeklyBusyness(idByName("Paris"));
+    expect(scores).toHaveLength(53);
+    for (const s of scores) {
+      expect(s).toBeGreaterThanOrEqual(0);
+      expect(s).toBeLessThanOrEqual(1);
+    }
+  });
+
+  it("returns all zeros for an unknown destination id", () => {
+    const scores = getWeeklyBusyness("does-not-exist");
+    expect(scores).toEqual(new Array(53).fill(0));
+  });
+
+  it("is consistent with getMonthlyBusyness for a destination with patterns", () => {
+    const id = idByName("Paris");
+    const weekly = getWeeklyBusyness(id);
+    const monthly = getMonthlyBusyness(id);
+    expect(Math.max(...weekly)).toBeGreaterThan(0);
+    expect(Math.max(...monthly)).toBeGreaterThan(0);
+    // Monthly is an average of weekly values, so its peak cannot exceed the
+    // weekly peak (both rounded to 3 decimals; allow rounding slack).
+    expect(Math.max(...monthly)).toBeLessThanOrEqual(Math.max(...weekly) + 0.001);
+  });
+});
diff --git a/src/lib/services/destination-busyness.ts b/src/lib/services/destination-busyness.ts
index 407aed9..c75d659 100644
--- a/src/lib/services/destination-busyness.ts
+++ b/src/lib/services/destination-busyness.ts
@@ -25,9 +25,14 @@ import {
 const WEEKS = 53;
 const MONTHS = 12;
 
-let matrix: Map<string, number[]> | null = null;
+interface Matrices {
+  monthly: Map<string, number[]>;
+  weekly: Map<string, number[]>;
+}
+
+let matrices: Matrices | null = null;
 
-function buildMatrix(): Map<string, number[]> {
+function buildMatrices(): Matrices {
   const maxPopulation = Math.max(...sourceRegions.map((r) => r.population));
 
   const regionMap = new Map<string, BusynessRegionInfo>(
@@ -60,9 +65,11 @@ function buildMatrix(): Map<string, number[]> {
   // Accumulate weekly normalized scores into their month, then average.
   const monthSums = new Map<string, number[]>();
   const monthCounts = new Map<string, number[]>();
+  const weekly = new Map<string, number[]>();
   for (const d of destinations) {
     monthSums.set(d.id, new Array(MONTHS).fill(0));
     monthCounts.set(d.id, new Array(MONTHS).fill(0));
+    weekly.set(d.id, new Array(WEEKS).fill(0));
   }
 
   for (let week = 1; week <= WEEKS; week++) {
@@ -78,25 +85,26 @@ function buildMatrix(): Map<string, number[]> {
       const normalized = weekResult.get(d.id)?.normalized ?? 0;
       monthSums.get(d.id)![monthIdx] += normalized;
       monthCounts.get(d.id)![monthIdx] += 1;
+      weekly.get(d.id)![week - 1] = Math.round(normalized * 1000) / 1000;
     }
   }
 
-  const result = new Map<string, number[]>();
+  const monthly = new Map<string, number[]>();
   for (const d of destinations) {
     const sums = monthSums.get(d.id)!;
     const counts = monthCounts.get(d.id)!;
-    result.set(
+    monthly.set(
       d.id,
       sums.map((s, i) => (counts[i] > 0 ? Math.round((s / counts[i]) * 1000) / 1000 : 0)),
     );
   }
-  return result;
+  return { monthly, weekly };
 }
 
-/** Lazily build the full destination × month matrix once, then memoize. */
-function getMatrix(): Map<string, number[]> {
-  if (!matrix) matrix = buildMatrix();
-  return matrix;
+/** Lazily build the destination × month/week matrices once, then memoize. */
+function getMatrices(): Matrices {
+  if (!matrices) matrices = buildMatrices();
+  return matrices;
 }
 
 /**
@@ -104,5 +112,14 @@ function getMatrix(): Map<string, number[]> {
  * same normalized scale the map uses. Returns all zeros for unknown ids.
  */
 export function getMonthlyBusyness(destinationId: string): number[] {
-  return getMatrix().get(destinationId) ?? new Array(MONTHS).fill(0);
+  return getMatrices().monthly.get(destinationId) ?? new Array(MONTHS).fill(0);
+}
+
+/**
+ * Weekly baseline busyness for one destination as 53 values (ISO week 1..53),
+ * each 0-1 on the same normalized scale the map uses (no live holiday/event
+ * boosts — the "typical year" curve). Returns all zeros for unknown ids.
+ */
+export function getWeeklyBusyness(destinationId: string): number[] {
+  return getMatrices().weekly.get(destinationId) ?? new Array(WEEKS).fill(0);
 }
diff --git a/src/lib/share.ts b/src/lib/share.ts
new file mode 100644
index 0000000..5164e79
--- /dev/null
+++ b/src/lib/share.ts
@@ -0,0 +1,29 @@
+"use client";
+
+export interface ShareData {
+  title: string;
+  text: string;
+  url: string;
+}
+
+/**
+ * Share via the native share sheet when available, falling back to copying
+ * the URL. Returns "shared", "copied" or "failed" so callers can show a toast.
+ */
+export async function sharePlace(data: ShareData): Promise<"shared" | "copied" | "failed"> {
+  if (typeof navigator !== "undefined" && navigator.share) {
+    try {
+      await navigator.share(data);
+      return "shared";
+    } catch (err) {
+      // AbortError = user dismissed the sheet; not a failure worth a fallback.
+      if (err instanceof DOMException && err.name === "AbortError") return "failed";
+    }
+  }
+  try {
+    await navigator.clipboard.writeText(data.url);
+    return "copied";
+  } catch {
+    return "failed";
+  }
+}
diff --git a/src/lib/week-dates.ts b/src/lib/week-dates.ts
new file mode 100644
index 0000000..e707005
--- /dev/null
+++ b/src/lib/week-dates.ts
@@ -0,0 +1,35 @@
+import { format } from "date-fns";
+import { getDateLocale } from "@/i18n/date-locale";
+import type { Locale } from "@/i18n/config";
+
+/** Monday of the given ISO week. */
+export function isoWeekStart(year: number, week: number): Date {
+  const jan4 = new Date(year, 0, 4);
+  const dayOfWeek = jan4.getDay() || 7;
+  const monday = new Date(jan4);
+  monday.setDate(jan4.getDate() - dayOfWeek + 1 + (week - 1) * 7);
+  return monday;
+}
+
+/** Localized "Aug 3 - Aug 9, 2026" range for an ISO week. */
+export function getWeekDateRange(year: number, week: number, locale: Locale): string {
+  const dateLocale = getDateLocale(locale);
+  const monday = isoWeekStart(year, week);
+  const sunday = new Date(monday);
+  sunday.setDate(monday.getDate() + 6);
+  return `${format(monday, "MMM d", { locale: dateLocale })} - ${format(sunday, "MMM d, yyyy", { locale: dateLocale })}`;
+}
+
+/** Localized short label for a week, e.g. "Aug 3". */
+export function getWeekShortLabel(year: number, week: number, locale: Locale): string {
+  const dateLocale = getDateLocale(locale);
+  return format(isoWeekStart(year, week), "MMM d", { locale: dateLocale });
+}
+
+/** Localized short month names (Jan..Dec) for chart axes. */
+export function getShortMonthNames(locale: Locale): string[] {
+  const dateLocale = getDateLocale(locale);
+  return Array.from({ length: 12 }, (_, i) =>
+    format(new Date(2025, i, 15), "MMM", { locale: dateLocale }),
+  );
+}
diff --git a/src/messages/__tests__/messages-parity.test.ts b/src/messages/__tests__/messages-parity.test.ts
new file mode 100644
index 0000000..f17746b
--- /dev/null
+++ b/src/messages/__tests__/messages-parity.test.ts
@@ -0,0 +1,44 @@
+import { describe, it, expect } from "vitest";
+import en from "@/messages/en.json";
+import de from "@/messages/de.json";
+import es from "@/messages/es.json";
+import fr from "@/messages/fr.json";
+
+/** Recursively collect dot-separated key paths of all leaf values. */
+function keyPaths(obj: Record<string, unknown>, prefix = ""): string[] {
+  return Object.entries(obj).flatMap(([key, value]) => {
+    const path = prefix ? `${prefix}.${key}` : key;
+    return value !== null && typeof value === "object" && !Array.isArray(value)
+      ? keyPaths(value as Record<string, unknown>, path)
+      : [path];
+  });
+}
+
+const enKeys = new Set(keyPaths(en));
+
+const locales: Array<[string, Record<string, unknown>]> = [
+  ["de", de],
+  ["es", es],
+  ["fr", fr],
+];
+
+describe("message catalogue parity", () => {
+  it("en has at least one key", () => {
+    expect(enKeys.size).toBeGreaterThan(0);
+  });
+
+  it.each(locales)("%s has exactly the same keys as en", (locale, messages) => {
+    const localeKeys = new Set(keyPaths(messages));
+    const missing = [...enKeys].filter((k) => !localeKeys.has(k));
+    const extra = [...localeKeys].filter((k) => !enKeys.has(k));
+
+    expect(
+      missing,
+      `${locale}.json is missing keys present in en.json: ${missing.join(", ")}`,
+    ).toEqual([]);
+    expect(
+      extra,
+      `${locale}.json has extra keys not present in en.json: ${extra.join(", ")}`,
+    ).toEqual([]);
+  });
+});
diff --git a/src/messages/de.json b/src/messages/de.json
index 8e97882..575483b 100644
--- a/src/messages/de.json
+++ b/src/messages/de.json
@@ -11,7 +11,8 @@
     "howItWorks": "So funktioniert's",
     "data": "Daten",
     "openSource": "Open Source",
-    "openMap": "Karte öffnen"
+    "openMap": "Karte öffnen",
+    "menu": "Menü"
   },
   "hero": {
     "headline": "Sieh, wie voll Reiseziele\nwirklich werden",
@@ -88,14 +89,18 @@
   },
   "footer": {
     "copyright": "© {year} 10ideen.at",
+    "tagline": "Wissen, wann die Welt reist – und wann nicht.",
     "github": "GitHub",
     "docs": "Dokumentation",
     "privacy": "Datenschutz",
-    "contact": "Kontakt"
+    "contact": "Kontakt",
+    "bestTime": "Beste Reisezeit",
+    "compare": "Orte vergleichen"
   },
   "map": {
     "title": "PackedPlaces.com",
-    "holidays": "Ferien & Events"
+    "holidays": "Ferien & Events",
+    "close": "Schließen"
   },
   "disclaimer": {
     "title": "Datenhinweis",
@@ -107,7 +112,9 @@
     "week": "Woche {week}",
     "play": "Abspielen",
     "pause": "Pause",
-    "today": "Heute"
+    "today": "Heute",
+    "prevWeek": "Vorherige Woche",
+    "nextWeek": "Nächste Woche"
   },
   "holidays": {
     "title": "Schulferien",
@@ -191,7 +198,9 @@
     "changesTitle": "Änderungen dieser Richtlinie",
     "changesText": "Wir können diese Datenschutzerklärung von Zeit zu Zeit aktualisieren. Änderungen werden auf dieser Seite mit aktualisiertem Datum veröffentlicht.",
     "contactTitle": "Kontakt",
-    "contactText": "Bei Fragen zu dieser Datenschutzerklärung oder zur Ausübung Ihrer DSGVO-Rechte nutzen Sie bitte unser Kontaktformular."
+    "contactText": "Bei Fragen zu dieser Datenschutzerklärung oder zur Ausübung Ihrer DSGVO-Rechte nutzen Sie bitte unser Kontaktformular.",
+    "metaTitle": "Datenschutzerklärung — PackedPlaces.com",
+    "metaDescription": "Datenschutzerklärung von PackedPlaces.com — wie wir mit Ihren Daten, Cookies und Analysen umgehen."
   },
   "contact": {
     "title": "Kontakt",
@@ -212,7 +221,9 @@
     "errorEmail": "Bitte geben Sie eine gültige E-Mail-Adresse ein.",
     "errorCaptcha": "Bitte schließen Sie die Captcha-Verifizierung ab.",
     "errorServer": "Etwas ist schiefgelaufen. Bitte versuchen Sie es später erneut.",
-    "errorTurnstile": "Captcha-Überprüfung fehlgeschlagen. Bitte versuchen Sie es erneut."
+    "errorTurnstile": "Captcha-Überprüfung fehlgeschlagen. Bitte versuchen Sie es erneut.",
+    "metaTitle": "Kontakt — PackedPlaces.com",
+    "metaDescription": "Kontaktieren Sie das PackedPlaces.com-Team — Fragen, Feedback und Vorschläge sind willkommen."
   },
   "featurePages": {
     "shell": {
@@ -442,6 +453,72 @@
       "mountain": "Berg",
       "desert": "Wüste",
       "tropical": "Tropen"
-    }
+    },
+    "curveHeading": "Ein typisches Jahr, Woche für Woche",
+    "curveAria": "Wöchentliche Auslastungskurve für {name}: der türkise Ring markiert die ruhigste Woche, der terrakottafarbene Punkt die vollste",
+    "shareText": "Wie voll wird es in {name} wirklich? Sieh die Prognose Woche für Woche."
+  },
+  "theme": {
+    "label": "Design",
+    "light": "Hell",
+    "dark": "Dunkel",
+    "system": "System"
+  },
+  "meta": {
+    "title": "PackedPlaces.com — Sehen Sie, wie voll Reiseziele wirklich werden",
+    "description": "PackedPlaces.com visualisiert die Auslastung von über 700 Reisezielen weltweit, Woche für Woche, basierend auf Schulferien-Daten aus über 100 Ländern.",
+    "ogTitle": "PackedPlaces.com — Sehen Sie, wie voll Reiseziele wirklich werden",
+    "ogDescription": "PackedPlaces.com visualisiert die Auslastung von über 700 Reisezielen weltweit, Woche für Woche, basierend auf Schulferien-Daten aus über 100 Ländern."
+  },
+  "bestTime": {
+    "metaTitle": "Beste Reisezeit — PackedPlaces.com",
+    "metaDescription": "Wähle eines von über 700 Reisezielen und sieh auf einen Blick die ruhigsten und vollsten Wochen des Jahres.",
+    "eyebrow": "Beste Reisezeit",
+    "title": "Wann solltest du reisen?",
+    "lede": "Wähle ein Reiseziel und sieh seine Auslastungskurve für das Jahr — die ruhigsten und vollsten Wochen auf einen Blick.",
+    "pickerPlaceholder": "Reiseziel suchen, z. B. Hallstatt",
+    "pickerLabel": "Reiseziel suchen",
+    "noResults": "Kein Reiseziel gefunden",
+    "empty": "Suche ein Reiseziel, um zu sehen, wann es ruhig ist.",
+    "loading": "Auslastungsdaten werden geladen…",
+    "quietestLabel": "Ruhigste Woche",
+    "busiestLabel": "Vollste Woche",
+    "weekN": "Woche {week}",
+    "topWeeksTitle": "Ruhigste Wochen {year}",
+    "openOnMap": "Auf Karte öffnen",
+    "shareText": "Beste Reisezeit für {name}: um den {date}",
+    "curveAria": "Auslastungskurve für {name}: am ruhigsten in Woche {quiet}, am vollsten in Woche {busy}",
+    "teaserCta": "Finde deine ruhige Woche",
+    "sampleCaption": "Ein Jahr in {name} — der türkise Ring markiert die ruhigste Woche, der terrakottafarbene Punkt die vollste.",
+    "flat": "Die Auslastung ändert sich hier übers Jahr kaum — jede Woche ist ungefähr gleich."
+  },
+  "saved": {
+    "save": "Ort merken",
+    "saved": "Gemerkt",
+    "compareCta": "Gemerkte Orte vergleichen"
+  },
+  "compare": {
+    "metaTitle": "Auslastung vergleichen — PackedPlaces.com",
+    "eyebrow": "Vergleichen",
+    "title": "Wo ist es wann ruhiger?",
+    "lede": "Deine gemerkten Orte nebeneinander, Woche für Woche.",
+    "empty": "Noch keine gemerkten Orte.",
+    "emptyHint": "Markiere Reiseziele auf der Karte, auf Zielseiten oder im Reisezeit-Finder, um sie hier zu vergleichen.",
+    "findPlaces": "Ort finden",
+    "openMap": "Karte öffnen",
+    "loading": "Auslastungsdaten werden geladen…",
+    "quietestCol": "Am ruhigsten",
+    "remove": "{name} entfernen",
+    "shareText": "Auslastungsvergleich: {names}",
+    "curveAria": "Wöchentlicher Auslastungsvergleich der ausgewählten Reiseziele"
+  },
+  "share": {
+    "share": "Teilen",
+    "copied": "Link kopiert"
+  },
+  "alternatives": {
+    "title": "Ruhigere Alternativen",
+    "lede": "Ähnliche Orte, die in der Hochsaison ruhiger bleiben.",
+    "calmer": "{bands, plural, one {# Stufe ruhiger} other {# Stufen ruhiger}}"
   }
 }
diff --git a/src/messages/en.json b/src/messages/en.json
index 249f395..996dd9a 100644
--- a/src/messages/en.json
+++ b/src/messages/en.json
@@ -11,7 +11,8 @@
     "howItWorks": "How It Works",
     "data": "Data",
     "openSource": "Open Source",
-    "openMap": "Open Map"
+    "openMap": "Open Map",
+    "menu": "Menu"
   },
   "hero": {
     "headline": "See How Crowded Travel\nDestinations Really Get",
@@ -88,14 +89,18 @@
   },
   "footer": {
     "copyright": "© {year} 10ideen.at",
+    "tagline": "Know when the world travels — and when it doesn't.",
     "github": "GitHub",
     "docs": "Documentation",
     "privacy": "Privacy",
-    "contact": "Contact"
+    "contact": "Contact",
+    "bestTime": "Best time to visit",
+    "compare": "Compare places"
   },
   "map": {
     "title": "PackedPlaces.com",
-    "holidays": "Holidays & Events"
+    "holidays": "Holidays & Events",
+    "close": "Close"
   },
   "disclaimer": {
     "title": "Data Disclaimer",
@@ -107,7 +112,9 @@
     "week": "Week {week}",
     "play": "Play",
     "pause": "Pause",
-    "today": "Today"
+    "today": "Today",
+    "prevWeek": "Previous week",
+    "nextWeek": "Next week"
   },
   "holidays": {
     "title": "School Holidays",
@@ -191,7 +198,9 @@
     "changesTitle": "Changes to This Policy",
     "changesText": "We may update this privacy policy from time to time. Changes will be posted on this page with an updated date.",
     "contactTitle": "Contact Us",
-    "contactText": "If you have questions about this privacy policy or wish to exercise your GDPR rights, please reach out via our contact form."
+    "contactText": "If you have questions about this privacy policy or wish to exercise your GDPR rights, please reach out via our contact form.",
+    "metaTitle": "Privacy Policy — PackedPlaces.com",
+    "metaDescription": "Privacy policy for PackedPlaces.com — how we handle your data, cookies, and analytics."
   },
   "contact": {
     "title": "Contact Us",
@@ -212,7 +221,9 @@
     "errorEmail": "Please enter a valid email address.",
     "errorCaptcha": "Please complete the captcha verification.",
     "errorServer": "Something went wrong. Please try again later.",
-    "errorTurnstile": "Captcha verification failed. Please try again."
+    "errorTurnstile": "Captcha verification failed. Please try again.",
+    "metaTitle": "Contact — PackedPlaces.com",
+    "metaDescription": "Get in touch with the PackedPlaces.com team — questions, feedback, and suggestions welcome."
   },
   "featurePages": {
     "shell": {
@@ -442,6 +453,72 @@
       "mountain": "mountain",
       "desert": "desert",
       "tropical": "tropical"
-    }
+    },
+    "curveHeading": "A typical year, week by week",
+    "curveAria": "Weekly crowd curve for {name}: teal ring marks the quietest week, terracotta dot the busiest",
+    "shareText": "How crowded does {name} really get? See the week-by-week forecast."
+  },
+  "theme": {
+    "label": "Theme",
+    "light": "Light",
+    "dark": "Dark",
+    "system": "System"
+  },
+  "meta": {
+    "title": "PackedPlaces.com — See How Crowded Travel Destinations Really Get",
+    "description": "PackedPlaces.com visualizes tourist crowdedness for 700+ destinations worldwide, week by week, powered by school holiday data from 100+ countries.",
+    "ogTitle": "PackedPlaces.com — See How Crowded Travel Destinations Really Get",
+    "ogDescription": "PackedPlaces.com visualizes tourist crowdedness for 700+ destinations worldwide, week by week, powered by school holiday data from 100+ countries."
+  },
+  "bestTime": {
+    "metaTitle": "Best Time to Visit — PackedPlaces.com",
+    "metaDescription": "Pick any of 700+ destinations and see its quietest and busiest weeks of the year at a glance.",
+    "eyebrow": "Best time",
+    "title": "When should you go?",
+    "lede": "Pick a destination and see its crowd curve for the year — the quietest and busiest weeks, at a glance.",
+    "pickerPlaceholder": "Search a destination, e.g. Hallstatt",
+    "pickerLabel": "Search a destination",
+    "noResults": "No destination found",
+    "empty": "Search for a destination to see when it's quiet.",
+    "loading": "Loading crowd data…",
+    "quietestLabel": "Quietest week",
+    "busiestLabel": "Busiest week",
+    "weekN": "Week {week}",
+    "topWeeksTitle": "Calmest weeks of {year}",
+    "openOnMap": "Open on map",
+    "shareText": "Best time to visit {name}: around {date}",
+    "curveAria": "Crowd curve for {name}: quietest in week {quiet}, busiest in week {busy}",
+    "teaserCta": "Find your quiet week",
+    "sampleCaption": "A year in {name} — the teal ring marks the quietest week, the terracotta dot the busiest.",
+    "flat": "Crowd levels barely change here over the year — any week is about the same."
+  },
+  "saved": {
+    "save": "Save place",
+    "saved": "Saved",
+    "compareCta": "Compare saved places"
+  },
+  "compare": {
+    "metaTitle": "Compare Crowds — PackedPlaces.com",
+    "eyebrow": "Compare",
+    "title": "Which is calmer, when?",
+    "lede": "Your saved places side by side, week by week.",
+    "empty": "No saved places yet.",
+    "emptyHint": "Star destinations on the map, on destination pages or in the best-time finder to compare them here.",
+    "findPlaces": "Find a place",
+    "openMap": "Open the map",
+    "loading": "Loading crowd data…",
+    "quietestCol": "Quietest",
+    "remove": "Remove {name}",
+    "shareText": "Comparing crowds: {names}",
+    "curveAria": "Weekly crowd comparison of the selected destinations"
+  },
+  "share": {
+    "share": "Share",
+    "copied": "Link copied"
+  },
+  "alternatives": {
+    "title": "Quieter alternatives",
+    "lede": "Similar places that stay calmer in peak season.",
+    "calmer": "{bands, plural, one {# band calmer} other {# bands calmer}}"
   }
 }
diff --git a/src/messages/es.json b/src/messages/es.json
index 880628e..5ca7a44 100644
--- a/src/messages/es.json
+++ b/src/messages/es.json
@@ -11,7 +11,8 @@
     "howItWorks": "Cómo funciona",
     "data": "Datos",
     "openSource": "Código abierto",
-    "openMap": "Abrir mapa"
+    "openMap": "Abrir mapa",
+    "menu": "Menú"
   },
   "hero": {
     "headline": "Descubre lo llenos que están\nlos destinos turísticos",
@@ -88,14 +89,18 @@
   },
   "footer": {
     "copyright": "© {year} 10ideen.at",
+    "tagline": "Saber cuándo viaja el mundo — y cuándo no.",
     "github": "GitHub",
     "docs": "Documentación",
     "privacy": "Privacidad",
-    "contact": "Contacto"
+    "contact": "Contacto",
+    "bestTime": "Mejor época para viajar",
+    "compare": "Comparar lugares"
   },
   "map": {
     "title": "PackedPlaces.com",
-    "holidays": "Vacaciones y eventos"
+    "holidays": "Vacaciones y eventos",
+    "close": "Cerrar"
   },
   "disclaimer": {
     "title": "Aviso sobre los datos",
@@ -107,7 +112,9 @@
     "week": "Semana {week}",
     "play": "Reproducir",
     "pause": "Pausa",
-    "today": "Hoy"
+    "today": "Hoy",
+    "prevWeek": "Semana anterior",
+    "nextWeek": "Semana siguiente"
   },
   "holidays": {
     "title": "Vacaciones escolares",
@@ -191,7 +198,9 @@
     "changesTitle": "Cambios en esta política",
     "changesText": "Podemos actualizar esta política de privacidad de vez en cuando. Los cambios se publicarán en esta página con una fecha actualizada.",
     "contactTitle": "Contacto",
-    "contactText": "Si tiene preguntas sobre esta política de privacidad o desea ejercer sus derechos RGPD, contáctenos a través de nuestro formulario de contacto."
+    "contactText": "Si tiene preguntas sobre esta política de privacidad o desea ejercer sus derechos RGPD, contáctenos a través de nuestro formulario de contacto.",
+    "metaTitle": "Política de privacidad — PackedPlaces.com",
+    "metaDescription": "Política de privacidad de PackedPlaces.com — cómo tratamos sus datos, cookies y analíticas."
   },
   "contact": {
     "title": "Contacto",
@@ -212,7 +221,9 @@
     "errorEmail": "Por favor, introduzca una dirección de correo electrónico válida.",
     "errorCaptcha": "Por favor, complete la verificación captcha.",
     "errorServer": "Algo salió mal. Por favor, inténtelo de nuevo más tarde.",
-    "errorTurnstile": "La verificación captcha falló. Por favor, inténtelo de nuevo."
+    "errorTurnstile": "La verificación captcha falló. Por favor, inténtelo de nuevo.",
+    "metaTitle": "Contacto — PackedPlaces.com",
+    "metaDescription": "Póngase en contacto con el equipo de PackedPlaces.com — preguntas, comentarios y sugerencias son bienvenidos."
   },
   "featurePages": {
     "shell": {
@@ -442,6 +453,72 @@
       "mountain": "montaña",
       "desert": "desierto",
       "tropical": "tropical"
-    }
+    },
+    "curveHeading": "Un año típico, semana a semana",
+    "curveAria": "Curva semanal de afluencia de {name}: el anillo verde azulado marca la semana más tranquila, el punto terracota la más concurrida",
+    "shareText": "¿Cuánta gente hay realmente en {name}? Mira la previsión semana a semana."
+  },
+  "theme": {
+    "label": "Tema",
+    "light": "Claro",
+    "dark": "Oscuro",
+    "system": "Sistema"
+  },
+  "meta": {
+    "title": "PackedPlaces.com — Descubra lo masificados que están realmente los destinos turísticos",
+    "description": "PackedPlaces.com visualiza la masificación turística de más de 700 destinos en todo el mundo, semana a semana, basándose en datos de vacaciones escolares de más de 100 países.",
+    "ogTitle": "PackedPlaces.com — Descubra lo masificados que están realmente los destinos turísticos",
+    "ogDescription": "PackedPlaces.com visualiza la masificación turística de más de 700 destinos en todo el mundo, semana a semana, basándose en datos de vacaciones escolares de más de 100 países."
+  },
+  "bestTime": {
+    "metaTitle": "Mejor época para viajar — PackedPlaces.com",
+    "metaDescription": "Elige uno de los más de 700 destinos y ve de un vistazo sus semanas más tranquilas y más concurridas del año.",
+    "eyebrow": "Mejor época",
+    "title": "¿Cuándo deberías ir?",
+    "lede": "Elige un destino y ve su curva de afluencia del año — las semanas más tranquilas y más concurridas, de un vistazo.",
+    "pickerPlaceholder": "Busca un destino, p. ej. Hallstatt",
+    "pickerLabel": "Buscar un destino",
+    "noResults": "No se encontró ningún destino",
+    "empty": "Busca un destino para ver cuándo está tranquilo.",
+    "loading": "Cargando datos de afluencia…",
+    "quietestLabel": "Semana más tranquila",
+    "busiestLabel": "Semana más concurrida",
+    "weekN": "Semana {week}",
+    "topWeeksTitle": "Semanas más tranquilas de {year}",
+    "openOnMap": "Abrir en el mapa",
+    "shareText": "Mejor época para visitar {name}: alrededor del {date}",
+    "curveAria": "Curva de afluencia de {name}: más tranquila en la semana {quiet}, más concurrida en la semana {busy}",
+    "teaserCta": "Encuentra tu semana tranquila",
+    "sampleCaption": "Un año en {name} — el anillo verde azulado marca la semana más tranquila, el punto terracota la más concurrida.",
+    "flat": "La afluencia apenas cambia aquí a lo largo del año — cualquier semana es parecida."
+  },
+  "saved": {
+    "save": "Guardar lugar",
+    "saved": "Guardado",
+    "compareCta": "Comparar lugares guardados"
+  },
+  "compare": {
+    "metaTitle": "Comparar afluencia — PackedPlaces.com",
+    "eyebrow": "Comparar",
+    "title": "¿Dónde hay menos gente, y cuándo?",
+    "lede": "Tus lugares guardados lado a lado, semana a semana.",
+    "empty": "Aún no hay lugares guardados.",
+    "emptyHint": "Marca destinos en el mapa, en las páginas de destino o en el buscador de mejor época para compararlos aquí.",
+    "findPlaces": "Buscar un lugar",
+    "openMap": "Abrir el mapa",
+    "loading": "Cargando datos de afluencia…",
+    "quietestCol": "Más tranquila",
+    "remove": "Quitar {name}",
+    "shareText": "Comparando afluencia: {names}",
+    "curveAria": "Comparación semanal de afluencia de los destinos seleccionados"
+  },
+  "share": {
+    "share": "Compartir",
+    "copied": "Enlace copiado"
+  },
+  "alternatives": {
+    "title": "Alternativas más tranquilas",
+    "lede": "Lugares similares que se mantienen más tranquilos en temporada alta.",
+    "calmer": "{bands, plural, one {# nivel más tranquilo} other {# niveles más tranquilo}}"
   }
 }
diff --git a/src/messages/fr.json b/src/messages/fr.json
index 9215d2d..66dd0cf 100644
--- a/src/messages/fr.json
+++ b/src/messages/fr.json
@@ -11,7 +11,8 @@
     "howItWorks": "Comment ça marche",
     "data": "Données",
     "openSource": "Open Source",
-    "openMap": "Ouvrir la carte"
+    "openMap": "Ouvrir la carte",
+    "menu": "Menu"
   },
   "hero": {
     "headline": "Découvrez à quel point les destinations\ntouristiques sont fréquentées",
@@ -88,14 +89,18 @@
   },
   "footer": {
     "copyright": "© {year} 10ideen.at",
+    "tagline": "Savoir quand le monde voyage — et quand il ne voyage pas.",
     "github": "GitHub",
     "docs": "Documentation",
     "privacy": "Confidentialité",
-    "contact": "Contact"
+    "contact": "Contact",
+    "bestTime": "Meilleure période",
+    "compare": "Comparer des lieux"
   },
   "map": {
     "title": "PackedPlaces.com",
-    "holidays": "Vacances et événements"
+    "holidays": "Vacances et événements",
+    "close": "Fermer"
   },
   "disclaimer": {
     "title": "Avis sur les données",
@@ -107,7 +112,9 @@
     "week": "Semaine {week}",
     "play": "Lecture",
     "pause": "Pause",
-    "today": "Aujourd'hui"
+    "today": "Aujourd'hui",
+    "prevWeek": "Semaine précédente",
+    "nextWeek": "Semaine suivante"
   },
   "holidays": {
     "title": "Vacances scolaires",
@@ -191,7 +198,9 @@
     "changesTitle": "Modifications de cette politique",
     "changesText": "Nous pouvons mettre à jour cette politique de confidentialité de temps en temps. Les modifications seront publiées sur cette page avec une date mise à jour.",
     "contactTitle": "Nous contacter",
-    "contactText": "Si vous avez des questions sur cette politique de confidentialité ou souhaitez exercer vos droits RGPD, contactez-nous via notre formulaire de contact."
+    "contactText": "Si vous avez des questions sur cette politique de confidentialité ou souhaitez exercer vos droits RGPD, contactez-nous via notre formulaire de contact.",
+    "metaTitle": "Politique de confidentialité — PackedPlaces.com",
+    "metaDescription": "Politique de confidentialité de PackedPlaces.com — comment nous traitons vos données, cookies et analyses."
   },
   "contact": {
     "title": "Contact",
@@ -212,7 +221,9 @@
     "errorEmail": "Veuillez saisir une adresse e-mail valide.",
     "errorCaptcha": "Veuillez compléter la vérification captcha.",
     "errorServer": "Une erreur est survenue. Veuillez réessayer plus tard.",
-    "errorTurnstile": "La vérification captcha a échoué. Veuillez réessayer."
+    "errorTurnstile": "La vérification captcha a échoué. Veuillez réessayer.",
+    "metaTitle": "Contact — PackedPlaces.com",
+    "metaDescription": "Contactez l'équipe de PackedPlaces.com — questions, retours et suggestions bienvenus."
   },
   "featurePages": {
     "shell": {
@@ -442,6 +453,72 @@
       "mountain": "montagne",
       "desert": "désert",
       "tropical": "tropical"
-    }
+    },
+    "curveHeading": "Une année typique, semaine par semaine",
+    "curveAria": "Courbe d'affluence hebdomadaire de {name} : l'anneau sarcelle marque la semaine la plus calme, le point terracotta la plus fréquentée",
+    "shareText": "Quelle affluence à {name}, vraiment ? Voyez la prévision semaine par semaine."
+  },
+  "theme": {
+    "label": "Thème",
+    "light": "Clair",
+    "dark": "Sombre",
+    "system": "Système"
+  },
+  "meta": {
+    "title": "PackedPlaces.com — Découvrez l'affluence réelle des destinations touristiques",
+    "description": "PackedPlaces.com visualise l'affluence touristique de plus de 700 destinations dans le monde, semaine par semaine, à partir des données de vacances scolaires de plus de 100 pays.",
+    "ogTitle": "PackedPlaces.com — Découvrez l'affluence réelle des destinations touristiques",
+    "ogDescription": "PackedPlaces.com visualise l'affluence touristique de plus de 700 destinations dans le monde, semaine par semaine, à partir des données de vacances scolaires de plus de 100 pays."
+  },
+  "bestTime": {
+    "metaTitle": "Meilleure période pour partir — PackedPlaces.com",
+    "metaDescription": "Choisissez l'une des 700+ destinations et voyez d'un coup d'œil ses semaines les plus calmes et les plus fréquentées de l'année.",
+    "eyebrow": "Meilleure période",
+    "title": "Quand partir ?",
+    "lede": "Choisissez une destination et découvrez sa courbe d'affluence sur l'année — les semaines les plus calmes et les plus fréquentées, en un coup d'œil.",
+    "pickerPlaceholder": "Cherchez une destination, par ex. Hallstatt",
+    "pickerLabel": "Rechercher une destination",
+    "noResults": "Aucune destination trouvée",
+    "empty": "Recherchez une destination pour voir quand elle est calme.",
+    "loading": "Chargement des données d'affluence…",
+    "quietestLabel": "Semaine la plus calme",
+    "busiestLabel": "Semaine la plus fréquentée",
+    "weekN": "Semaine {week}",
+    "topWeeksTitle": "Semaines les plus calmes de {year}",
+    "openOnMap": "Ouvrir sur la carte",
+    "shareText": "Meilleure période pour visiter {name} : autour du {date}",
+    "curveAria": "Courbe d'affluence de {name} : la plus calme en semaine {quiet}, la plus fréquentée en semaine {busy}",
+    "teaserCta": "Trouvez votre semaine calme",
+    "sampleCaption": "Une année à {name} — l'anneau sarcelle marque la semaine la plus calme, le point terracotta la plus fréquentée.",
+    "flat": "L'affluence varie à peine ici au fil de l'année — toutes les semaines se valent."
+  },
+  "saved": {
+    "save": "Enregistrer le lieu",
+    "saved": "Enregistré",
+    "compareCta": "Comparer les lieux enregistrés"
+  },
+  "compare": {
+    "metaTitle": "Comparer l'affluence — PackedPlaces.com",
+    "eyebrow": "Comparer",
+    "title": "Où est-ce plus calme, et quand ?",
+    "lede": "Vos lieux enregistrés côte à côte, semaine par semaine.",
+    "empty": "Aucun lieu enregistré pour l'instant.",
+    "emptyHint": "Ajoutez des destinations depuis la carte, les pages de destination ou le chercheur de meilleure période pour les comparer ici.",
+    "findPlaces": "Trouver un lieu",
+    "openMap": "Ouvrir la carte",
+    "loading": "Chargement des données d'affluence…",
+    "quietestCol": "La plus calme",
+    "remove": "Retirer {name}",
+    "shareText": "Comparaison d'affluence : {names}",
+    "curveAria": "Comparaison hebdomadaire de l'affluence des destinations sélectionnées"
+  },
+  "share": {
+    "share": "Partager",
+    "copied": "Lien copié"
+  },
+  "alternatives": {
+    "title": "Alternatives plus calmes",
+    "lede": "Des lieux similaires qui restent plus calmes en haute saison.",
+    "calmer": "{bands, plural, one {# niveau plus calme} other {# niveaux plus calmes}}"
   }
 }
diff --git a/src/middleware.ts b/src/middleware.ts
index eaae7f8..0e6d0ec 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -10,5 +10,8 @@ export function middleware(request: NextRequest) {
 }
 
 export const config = {
-  matcher: ["/((?!api|_next|favicon.ico).*)"],
+  // Skip API routes, Next internals, PWA assets (manifest/icons) and any
+  // static file with an extension so the map-subdomain rewrite never
+  // swallows them.
+  matcher: ["/((?!api|_next|favicon.ico|manifest.webmanifest|icons|.*\\..*).*)"],
 };
diff --git a/src/store/__tests__/useSavedPlacesStore.test.ts b/src/store/__tests__/useSavedPlacesStore.test.ts
new file mode 100644
index 0000000..c880bb9
--- /dev/null
+++ b/src/store/__tests__/useSavedPlacesStore.test.ts
@@ -0,0 +1,52 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { useSavedPlacesStore } from "@/store/useSavedPlacesStore";
+
+const STORAGE_KEY = "pp_saved_places_v1";
+
+describe("useSavedPlacesStore", () => {
+  beforeEach(() => {
+    localStorage.removeItem(STORAGE_KEY);
+    useSavedPlacesStore.setState({ ids: [] });
+  });
+
+  it("toggle adds an id then removes it again", () => {
+    const { toggle } = useSavedPlacesStore.getState();
+
+    toggle("AT-VIENNA");
+    expect(useSavedPlacesStore.getState().ids).toEqual(["AT-VIENNA"]);
+
+    toggle("AT-VIENNA");
+    expect(useSavedPlacesStore.getState().ids).toEqual([]);
+  });
+
+  it("keeps other saved ids when toggling one off", () => {
+    const { toggle } = useSavedPlacesStore.getState();
+    toggle("AT-VIENNA");
+    toggle("IT-ROME");
+    toggle("AT-VIENNA");
+    expect(useSavedPlacesStore.getState().ids).toEqual(["IT-ROME"]);
+  });
+
+  it("isSaved reflects the current state", () => {
+    const { toggle } = useSavedPlacesStore.getState();
+    expect(useSavedPlacesStore.getState().isSaved("AT-VIENNA")).toBe(false);
+
+    toggle("AT-VIENNA");
+    expect(useSavedPlacesStore.getState().isSaved("AT-VIENNA")).toBe(true);
+    expect(useSavedPlacesStore.getState().isSaved("IT-ROME")).toBe(false);
+
+    toggle("AT-VIENNA");
+    expect(useSavedPlacesStore.getState().isSaved("AT-VIENNA")).toBe(false);
+  });
+
+  it("persists saved ids to localStorage under pp_saved_places_v1", () => {
+    useSavedPlacesStore.getState().toggle("AT-VIENNA");
+
+    const raw = localStorage.getItem(STORAGE_KEY);
+    expect(raw).not.toBeNull();
+    const parsed = JSON.parse(raw!);
+    expect(parsed.state.ids).toEqual(["AT-VIENNA"]);
+    // Only ids are persisted (partialize), not hydrated/functions.
+    expect(parsed.state).not.toHaveProperty("hydrated");
+  });
+});
diff --git a/src/store/useSavedPlacesStore.ts b/src/store/useSavedPlacesStore.ts
new file mode 100644
index 0000000..e47abe9
--- /dev/null
+++ b/src/store/useSavedPlacesStore.ts
@@ -0,0 +1,42 @@
+"use client";
+
+import { create } from "zustand";
+import { persist, createJSONStorage } from "zustand/middleware";
+
+interface SavedPlacesState {
+  ids: string[];
+  hydrated: boolean;
+  toggle: (id: string) => void;
+  isSaved: (id: string) => boolean;
+  setHydrated: () => void;
+}
+
+/**
+ * Locally saved ("starred") destinations. Persisted to localStorage under
+ * pp_saved_places_v1. `hydrated` stays false during SSR/first paint so UI can
+ * avoid a saved/unsaved flash mismatch.
+ */
+export const useSavedPlacesStore = create<SavedPlacesState>()(
+  persist(
+    (set, get) => ({
+      ids: [],
+      hydrated: false,
+      toggle: (id) =>
+        set((state) => ({
+          ids: state.ids.includes(id)
+            ? state.ids.filter((x) => x !== id)
+            : [...state.ids, id],
+        })),
+      isSaved: (id) => get().ids.includes(id),
+      setHydrated: () => set({ hydrated: true }),
+    }),
+    {
+      name: "pp_saved_places_v1",
+      storage: createJSONStorage(() => localStorage),
+      partialize: (state) => ({ ids: state.ids }),
+      onRehydrateStorage: () => (state) => {
+        state?.setHydrated();
+      },
+    },
+  ),
+);
diff --git a/src/test-setup.ts b/src/test-setup.ts
index e53de0c..b1265f5 100644
--- a/src/test-setup.ts
+++ b/src/test-setup.ts
@@ -1,6 +1,20 @@
 import "@testing-library/jest-dom/vitest";
 import { vi } from "vitest";
 
+// jsdom has no matchMedia; ThemeProvider (prefers-color-scheme) needs a stub.
+if (typeof window !== "undefined" && !window.matchMedia) {
+  window.matchMedia = ((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    addListener: () => {},
+    removeListener: () => {},
+    dispatchEvent: () => false,
+  })) as unknown as typeof window.matchMedia;
+}
+
 // Mock the db module for all tests
 vi.mock("@/lib/db", () => ({
   db: new Proxy(