diff --git a/src/app/globals.css b/src/app/globals.css
index 5e205ea..f0a0725 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -23,6 +23,11 @@
   --scrim-soft: rgba(10, 10, 10, 0.55);
   --grid-line: rgba(255, 255, 255, 0.05);
   --shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.7);
+  --elevated-bg: rgba(36, 36, 36, 0.94);
+  --elevated-border: rgba(255, 255, 255, 0.24);
+  --elevated-shadow:
+    0 10px 28px -14px rgba(0, 0, 0, 0.5),
+    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
 }
 :root.light {
   --bg: #ffffff;
@@ -44,6 +49,9 @@
   --scrim-soft: rgba(255, 255, 255, 0.55);
   --grid-line: rgba(10, 10, 10, 0.05);
   --shadow: 0 18px 50px -28px rgba(0, 0, 0, 0.22);
+  --elevated-bg: color-mix(in srgb, var(--surface) 92%, var(--bg-deep));
+  --elevated-border: var(--border-strong);
+  --elevated-shadow: 0 8px 20px -16px rgba(0, 0, 0, 0.1);
 }
 
 * {
@@ -111,10 +119,12 @@ button {
   margin: 0 auto;
   height: 62px;
   padding: 0 10px 0 22px;
-  background: var(--nav-bg);
-  border: 1px solid var(--border);
+  background: var(--elevated-bg);
+  border: 1px solid var(--elevated-border);
   border-radius: 100px;
-  box-shadow: var(--shadow);
+  box-shadow: var(--elevated-shadow);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
   opacity: 0;
   animation: pillExpand 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
 }
@@ -133,21 +143,16 @@ button {
 
 .brand-mark {
   display: block;
-  width: auto;
-  height: auto;
-  object-fit: contain;
-}
-
-.brand-mark--light {
-  display: none;
-}
-
-:root.light .brand-mark--dark {
-  display: none;
-}
-
-:root.light .brand-mark--light {
-  display: block;
+  flex-shrink: 0;
+  background-color: var(--accent);
+  mask-image: url("/brand-mark-dark.png");
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-image: url("/brand-mark-dark.png");
+  -webkit-mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
 }
 
 .brand .word {
@@ -171,7 +176,7 @@ button {
 
 .nav-links a {
   font-size: 14.5px;
-  color: var(--text-muted);
+  color: var(--text-secondary);
   padding: 9px 14px;
   border-radius: 100px;
   letter-spacing: -0.01em;
@@ -245,8 +250,11 @@ button {
   grid-template-rows: 1fr;
   margin-top: 4px;
   padding: 10px;
-  border-color: var(--border);
-  box-shadow: var(--shadow);
+  background: var(--elevated-bg);
+  border-color: var(--elevated-border);
+  box-shadow: var(--elevated-shadow);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
@@ -265,7 +273,7 @@ button {
   align-items: center;
   gap: 7px;
   font-size: 15px;
-  color: var(--text-muted);
+  color: var(--text-secondary);
   padding: 12px 16px;
   border-radius: 100px;
   letter-spacing: -0.01em;
@@ -537,6 +545,10 @@ button {
   color: var(--bg-deep) !important;
 }
 
+:root:not(.light) body:has(.map-shell) .nav-inner {
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
+}
+
 .hero h1 .accent {
   color: var(--accent-bright);
   text-shadow:
@@ -581,8 +593,7 @@ button {
   font-weight: 500;
   color: var(--text);
   letter-spacing: -0.01em;
-  background: color-mix(in srgb, var(--surface) 30%, transparent);
-  backdrop-filter: blur(6px);
+  background: var(--surface);
   transition: border-color 0.2s, background 0.2s;
 }
 
@@ -688,25 +699,35 @@ button {
   z-index: 2;
   width: min(360px, calc(100vw - 32px));
   padding: 18px 18px 16px;
-  border: 1px solid var(--border-strong);
+  --map-readout-border: var(--elevated-border);
+  border: 1px solid var(--map-readout-border);
   border-radius: 18px;
   color: var(--text);
-  background: color-mix(in srgb, var(--surface) 92%, var(--bg-deep));
+  background: var(--elevated-bg);
   backdrop-filter: blur(16px);
-  box-shadow: var(--shadow);
+  -webkit-backdrop-filter: blur(16px);
+  box-shadow: var(--elevated-shadow);
+}
+
+.map-readout-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 8px;
 }
 
 .map-readout-kicker {
   display: inline-flex;
   align-items: center;
   width: fit-content;
-  font-size: 12px;
+  flex-shrink: 0;
+  font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--accent);
-  margin-bottom: 12px;
-  padding: 7px 12px;
+  padding: 5px 10px;
   border-radius: 100px;
   border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
   background: color-mix(in srgb, var(--accent) 14%, transparent);
@@ -716,13 +737,13 @@ button {
   font-size: 20px;
   font-weight: 600;
   letter-spacing: -0.03em;
-  margin-bottom: 8px;
+  margin-bottom: 0;
   color: var(--text);
 }
 
 .map-readout-hint,
 .map-readout-empty {
-  color: var(--text-muted);
+  color: var(--text-secondary);
   font-size: 13px;
   line-height: 1.55;
 }
@@ -732,7 +753,7 @@ button {
   gap: 10px;
   margin-top: 16px;
   padding-top: 14px;
-  border-top: 1px solid var(--border-strong);
+  border-top: 1px solid var(--map-readout-border);
 }
 
 .map-readout-control-header {
@@ -746,7 +767,7 @@ button {
   font-size: 12px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
-  color: var(--text-muted);
+  color: var(--text-secondary);
   font-weight: 500;
 }
 
@@ -756,29 +777,6 @@ button {
   font-weight: 600;
 }
 
-.map-readout-slider {
-  width: 100%;
-  accent-color: var(--accent);
-  cursor: pointer;
-}
-
-.map-readout-control-hint {
-  color: var(--text-dim);
-  font-size: 12px;
-  line-height: 1.45;
-}
-
-.map-readout-grid {
-  display: grid;
-  gap: 12px;
-  margin-top: 14px;
-}
-
-.map-readout-grid div {
-  display: grid;
-  gap: 4px;
-}
-
 .map-readout-grid dt {
   font-size: 12px;
   letter-spacing: 0.06em;
@@ -794,37 +792,34 @@ button {
   font-weight: 500;
 }
 
-.map-readout-span {
-  padding-top: 8px;
-  border-top: 1px solid var(--border-strong);
-}
-
-.map-readout-span dd {
-  color: var(--text-muted);
-  font-weight: 400;
-}
-
-:root:not(.light) .map-readout {
-  background: rgba(18, 18, 18, 0.96);
-  border-color: rgba(255, 255, 255, 0.16);
+.map-readout-slider {
+  width: 100%;
+  accent-color: var(--accent);
+  cursor: pointer;
 }
 
-:root:not(.light) .map-readout-title {
-  color: #ffffff;
+.map-readout-selection {
+  margin-top: 14px;
+  padding-top: 14px;
+  border-top: 1px solid var(--map-readout-border);
 }
 
-:root:not(.light) .map-readout-hint,
-:root:not(.light) .map-readout-empty,
-:root:not(.light) .map-readout-span dd {
-  color: rgba(255, 255, 255, 0.72);
+.map-readout-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px 16px;
 }
 
-:root:not(.light) .map-readout-grid dt {
-  color: rgba(255, 255, 255, 0.62);
+.map-readout-grid div {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
 }
 
-:root:not(.light) .map-readout-grid dd {
-  color: #ffffff;
+.map-readout-span {
+  grid-column: 1 / -1;
+  padding-top: 8px;
+  border-top: 1px solid var(--map-readout-border);
 }
 
 /* ============================================================
diff --git a/src/components/map/EarthMap.tsx b/src/components/map/EarthMap.tsx
index a8b5205..def3ee2 100644
--- a/src/components/map/EarthMap.tsx
+++ b/src/components/map/EarthMap.tsx
@@ -1,18 +1,28 @@
 "use client";
 
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import DeckGL from "@deck.gl/react";
-import { ScatterplotLayer } from "@deck.gl/layers";
-import type { PickingInfo } from "@deck.gl/core";
+import { PathLayer, PolygonLayer } from "@deck.gl/layers";
+import { PathStyleExtension } from "@deck.gl/extensions";
+import type { PickingInfo, ViewStateChangeParameters } from "@deck.gl/core";
 import Map from "react-map-gl/maplibre";
+import type { StyleSpecification } from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
-import { geoPointToZarrGrid } from "@/lib/map/geogrid";
-import { TEAL_ON_DARK_RGB } from "@/lib/constants/theme";
-import { DEFAULT_MAP_VIEW, MAP_BASE_STYLES } from "@/lib/map/viewState";
+import {
+  geoPointToZarrGrid,
+  gridCellToBounds,
+  gridCellToGuidePaths,
+  gridCellToPolygon,
+} from "@/lib/map/geogrid";
+import { loadDarkMapStyle, brightenDarkMapPlaceLabels } from "@/lib/map/mapLabels";
+import type { MapLibreEvent, MapStyleDataEvent } from "maplibre-gl";
+import { viewportToGeoBounds } from "@/lib/map/viewportBounds";
+import { TEAL_ON_DARK_RGB, TEAL_RGB } from "@/lib/constants/theme";
+import { DEFAULT_MAP_VIEW, MAP_BASE_STYLES, viewStateFocusedOnCell } from "@/lib/map/viewState";
 import { openZarrStore } from "@/lib/zarr/store";
 import { ZarrChunkReader } from "@/lib/zarr/ZarrChunkReader";
 import { DEFAULT_HISTORY_YEARS } from "@/lib/zarr/timeRange";
-import type { MapSelection } from "@/types/map";
+import type { MapSelection, MapViewState } from "@/types/map";
 import { useTheme } from "@/providers/ThemeProvider";
 import { MapReadout } from "@/components/map/MapReadout";
 
@@ -20,11 +30,32 @@ type EarthMapProps = {
   className?: string;
 };
 
+const dashedPathExtension = new PathStyleExtension({ dash: true });
+
+const GUIDE_LINE_COLOR = {
+  light: [110, 110, 110, 170] as [number, number, number, number],
+  dark: [190, 190, 190, 150] as [number, number, number, number],
+};
+
+const SELECTION_CELL_COLOR = {
+  light: {
+    fill: [...TEAL_RGB, 36] as [number, number, number, number],
+    line: [...TEAL_RGB, 255] as [number, number, number, number],
+  },
+  dark: {
+    fill: [255, 255, 255, 48] as [number, number, number, number],
+    line: [...TEAL_ON_DARK_RGB, 255] as [number, number, number, number],
+  },
+};
+
 export function EarthMap({ className }: EarthMapProps) {
   const { isLight } = useTheme();
   const readerPromiseRef = useRef<Promise<ZarrChunkReader> | null>(null);
   const requestIdRef = useRef(0);
+  const mapStageRef = useRef<HTMLDivElement>(null);
 
+  const [viewState, setViewState] = useState<MapViewState>(DEFAULT_MAP_VIEW);
+  const [mapSize, setMapSize] = useState({ width: 0, height: 0 });
   const [selection, setSelection] = useState<MapSelection | null>(null);
   const [historyYears, setHistoryYears] = useState(DEFAULT_HISTORY_YEARS);
   const [loadingSeries, setLoadingSeries] = useState(false);
@@ -32,6 +63,38 @@ export function EarthMap({ className }: EarthMapProps) {
   const [seriesLength, setSeriesLength] = useState<number | null>(null);
   const [seriesPreview, setSeriesPreview] = useState<number[] | null>(null);
   const [seriesUnits, setSeriesUnits] = useState<string | null>(null);
+  const [darkMapStyle, setDarkMapStyle] = useState<StyleSpecification | null>(
+    null,
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+
+    void loadDarkMapStyle()
+      .then((style) => {
+        if (!cancelled) setDarkMapStyle(style);
+      })
+      .catch(() => {
+        // Fall back to the remote style URL if patching fails.
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  useEffect(() => {
+    const node = mapStageRef.current;
+    if (!node) return;
+
+    const observer = new ResizeObserver(([entry]) => {
+      const { width, height } = entry.contentRect;
+      setMapSize({ width, height });
+    });
+
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
 
   const loadTimeSeries = useCallback(
     async (nextSelection: MapSelection, years: number) => {
@@ -102,46 +165,111 @@ export function EarthMap({ className }: EarthMapProps) {
       };
 
       setSelection(nextSelection);
+      setViewState((current) =>
+        viewStateFocusedOnCell(current, nextSelection.grid),
+      );
       void loadTimeSeries(nextSelection, historyYears);
     },
     [historyYears, loadTimeSeries],
   );
 
+  const handleViewStateChange = useCallback(
+    ({ viewState: nextViewState }: ViewStateChangeParameters) => {
+      setViewState(nextViewState as MapViewState);
+    },
+    [],
+  );
+
+  const mapStyle = isLight
+    ? MAP_BASE_STYLES.light
+    : darkMapStyle;
+
+  const applyDarkMapLabelColors = useCallback(
+    (event: MapLibreEvent | MapStyleDataEvent) => {
+      if (isLight) return;
+      brightenDarkMapPlaceLabels(event.target);
+    },
+    [isLight],
+  );
+
+  const handleMapLoad = useCallback(
+    (event: MapLibreEvent) => {
+      applyDarkMapLabelColors(event);
+    },
+    [applyDarkMapLabelColors],
+  );
+
+  const handleStyleData = useCallback(
+    (event: MapStyleDataEvent) => {
+      if (event.dataType !== "style") return;
+      applyDarkMapLabelColors(event);
+    },
+    [applyDarkMapLabelColors],
+  );
+
   const layers = useMemo(() => {
-    if (!selection) return [];
+    if (!selection || mapSize.width === 0 || mapSize.height === 0) return [];
+
+    const cellBounds = gridCellToBounds(selection.grid);
+    const viewportBounds = viewportToGeoBounds(
+      viewState,
+      mapSize.width,
+      mapSize.height,
+    );
+    const guidePaths = gridCellToGuidePaths(cellBounds, viewportBounds);
+    const guideColor = isLight ? GUIDE_LINE_COLOR.light : GUIDE_LINE_COLOR.dark;
+    const cellColor = isLight ? SELECTION_CELL_COLOR.light : SELECTION_CELL_COLOR.dark;
 
     return [
-      new ScatterplotLayer({
+      new PathLayer({
+        id: "selected-grid-cell-guides",
+        data: guidePaths,
+        getPath: (path) => path,
+        pickable: false,
+        widthUnits: "pixels",
+        getWidth: 1,
+        getColor: guideColor,
+        extensions: [dashedPathExtension],
+        getDashArray: [6, 5],
+        dashJustified: true,
+      }),
+      new PolygonLayer({
         id: "selected-grid-cell",
         data: [selection.grid],
-        getPosition: (point: MapSelection["grid"]) => [point.lon, point.lat],
-        getFillColor: [255, 255, 255, 230],
-        getLineColor: [...TEAL_ON_DARK_RGB, 255],
-        lineWidthUnits: "pixels",
-        getLineWidth: 2,
+        getPolygon: (cell: MapSelection["grid"]) => [
+          gridCellToPolygon(cell).map((point) => [point.lon, point.lat]),
+        ],
+        filled: true,
         stroked: true,
-        radiusUnits: "pixels",
-        getRadius: 8,
         pickable: false,
+        getFillColor: cellColor.fill,
+        getLineColor: cellColor.line,
+        getLineWidth: 2,
+        lineWidthUnits: "pixels",
       }),
     ];
-  }, [selection]);
+  }, [isLight, mapSize.height, mapSize.width, selection, viewState]);
 
   return (
     <div className={className ?? "map-shell"}>
-      <div className="map-stage">
+      <div className="map-stage" ref={mapStageRef}>
         <DeckGL
-          initialViewState={DEFAULT_MAP_VIEW}
+          viewState={viewState}
+          onViewStateChange={handleViewStateChange}
           controller
           layers={layers}
           onClick={handleClick}
           getCursor={() => "crosshair"}
         >
-          <Map
-            mapStyle={isLight ? MAP_BASE_STYLES.light : MAP_BASE_STYLES.dark}
-            attributionControl={false}
-            reuseMaps
-          />
+          {mapStyle ? (
+            <Map
+              mapStyle={mapStyle}
+              attributionControl={false}
+              reuseMaps
+              onLoad={handleMapLoad}
+              onStyleData={handleStyleData}
+            />
+          ) : null}
         </DeckGL>
       </div>
 
diff --git a/src/components/map/MapReadout.tsx b/src/components/map/MapReadout.tsx
index 42412f7..680a994 100644
--- a/src/components/map/MapReadout.tsx
+++ b/src/components/map/MapReadout.tsx
@@ -31,8 +31,10 @@ export function MapReadout({
 
   return (
     <aside className="map-readout" aria-live="polite">
-      <p className="map-readout-kicker mono">{ZARR_STORE.kicker}</p>
-      <h2 className="map-readout-title">Pixel location</h2>
+      <div className="map-readout-heading">
+        <h2 className="map-readout-title">Pixel location</h2>
+        <p className="map-readout-kicker mono">{ZARR_STORE.kicker}</p>
+      </div>
       <p className="map-readout-hint">
         Click the map to snap to the {ZARR_STORE.spatialResolutionDeg}°
         grid used by the Zarr Store.
@@ -57,49 +59,51 @@ export function MapReadout({
             onHistoryYearsChange(Number(event.currentTarget.value))
           }
         />
-        <p className="map-readout-control-hint">
+        <p className="map-readout-hint">
           Fetch only the most recent window to keep pixel loads fast.
         </p>
       </div>
 
-      {selection ? (
-        <dl className="map-readout-grid mono">
-          <div>
-            <dt>Click</dt>
-            <dd>{formatGeoPoint(selection.click)}</dd>
-          </div>
-          <div>
-            <dt>Grid cell</dt>
-            <dd>{formatGeoPoint(selection.grid)}</dd>
-          </div>
-          <div>
-            <dt>Indices</dt>
-            <dd>
-              lon {selection.grid.lonIndex}, lat {selection.grid.latIndex}
-            </dd>
-          </div>
-          <div>
-            <dt>Variable</dt>
-            <dd>{ZARR_STORE.defaultVariable}</dd>
-          </div>
-          <div className="map-readout-span">
-            <dt>Time series</dt>
-            <dd>
-              {loadingSeries && "Fetching from Zarr…"}
-              {!loadingSeries && seriesError && seriesError}
-              {!loadingSeries &&
-                !seriesError &&
-                seriesPreview &&
-                seriesLength !== null &&
-                `${seriesLength} steps · first ${seriesPreview
-                  .map((value) => value.toFixed(2))
-                  .join(", ")}${seriesUnits ? ` ${seriesUnits}` : ""}`}
-            </dd>
-          </div>
-        </dl>
-      ) : (
-        <p className="map-readout-empty">No pixel selected yet.</p>
-      )}
+      <div className="map-readout-selection">
+        {selection ? (
+          <dl className="map-readout-grid mono">
+            <div>
+              <dt>Click</dt>
+              <dd>{formatGeoPoint(selection.click)}</dd>
+            </div>
+            <div>
+              <dt>Grid cell</dt>
+              <dd>{formatGeoPoint(selection.grid)}</dd>
+            </div>
+            <div>
+              <dt>Indices</dt>
+              <dd>
+                lon {selection.grid.lonIndex}, lat {selection.grid.latIndex}
+              </dd>
+            </div>
+            <div>
+              <dt>Variable</dt>
+              <dd>{ZARR_STORE.defaultVariable}</dd>
+            </div>
+            <div className="map-readout-span">
+              <dt>Time series</dt>
+              <dd>
+                {loadingSeries && "Fetching from Zarr…"}
+                {!loadingSeries && seriesError && seriesError}
+                {!loadingSeries &&
+                  !seriesError &&
+                  seriesPreview &&
+                  seriesLength !== null &&
+                  `${seriesLength} steps · first ${seriesPreview
+                    .map((value) => value.toFixed(2))
+                    .join(", ")}${seriesUnits ? ` ${seriesUnits}` : ""}`}
+              </dd>
+            </div>
+          </dl>
+        ) : (
+          <p className="map-readout-empty">No pixel selected yet.</p>
+        )}
+      </div>
     </aside>
   );
 }
diff --git a/src/components/nav/Brand.tsx b/src/components/nav/Brand.tsx
index bf5b71f..bcbc235 100644
--- a/src/components/nav/Brand.tsx
+++ b/src/components/nav/Brand.tsx
@@ -6,7 +6,7 @@ export function Brand() {
   return (
     <Link href="/" className="brand" aria-label={`${SITE_NAME} home`}>
       <span className="mark">
-        <BrandMark />
+        <BrandMark size={32} />
       </span>
       <span className="word">
         <b>{SITE_NAME}</b>
diff --git a/src/icons/BrandMark.tsx b/src/icons/BrandMark.tsx
index b3f631e..9bcdb8b 100644
--- a/src/icons/BrandMark.tsx
+++ b/src/icons/BrandMark.tsx
@@ -1,28 +1,13 @@
-import Image from "next/image";
-
 type BrandMarkProps = {
   size?: number;
 };
 
 export function BrandMark({ size = 24 }: BrandMarkProps) {
   return (
-    <>
-      <Image
-        src="/brand-mark-dark.png"
-        alt=""
-        width={size}
-        height={size}
-        className="brand-mark brand-mark--dark"
-        priority
-      />
-      <Image
-        src="/brand-mark-light.png"
-        alt=""
-        width={size}
-        height={size}
-        className="brand-mark brand-mark--light"
-        priority
-      />
-    </>
+    <span
+      className="brand-mark"
+      style={{ width: size, height: size }}
+      aria-hidden="true"
+    />
   );
 }
diff --git a/src/lib/map/geogrid.test.ts b/src/lib/map/geogrid.test.ts
new file mode 100644
index 0000000..8e7927c
--- /dev/null
+++ b/src/lib/map/geogrid.test.ts
@@ -0,0 +1,74 @@
+import { describe, expect, it } from "vitest";
+import {
+  geoPointToZarrGrid,
+  gridCellToBounds,
+  gridCellToGuidePaths,
+  gridCellToPolygon,
+} from "@/lib/map/geogrid";
+import { ZARR_STORE } from "@/lib/constants/store";
+
+describe("gridCellToBounds", () => {
+  it("returns a 0.05° footprint centered on the snapped cell", () => {
+    const cell = geoPointToZarrGrid({ lon: 10.012, lat: 51.998 });
+    const bounds = gridCellToBounds(cell);
+
+    expect(bounds.east - bounds.west).toBeCloseTo(
+      ZARR_STORE.spatialResolutionDeg,
+    );
+    expect(bounds.north - bounds.south).toBeCloseTo(
+      ZARR_STORE.spatialResolutionDeg,
+    );
+    expect(cell.lon).toBeCloseTo((bounds.west + bounds.east) / 2);
+    expect(cell.lat).toBeCloseTo((bounds.south + bounds.north) / 2);
+  });
+});
+
+describe("gridCellToPolygon", () => {
+  it("returns a four-corner ring around the cell center", () => {
+    const cell = geoPointToZarrGrid({ lon: 10.012, lat: 51.998 });
+    const bounds = gridCellToBounds(cell);
+
+    expect(gridCellToPolygon(cell)).toEqual([
+      { lon: bounds.west, lat: bounds.north },
+      { lon: bounds.east, lat: bounds.north },
+      { lon: bounds.east, lat: bounds.south },
+      { lon: bounds.west, lat: bounds.south },
+    ]);
+  });
+});
+
+describe("gridCellToGuidePaths", () => {
+  it("extends a line from each cell edge to the viewport border", () => {
+    const cell = {
+      west: 9.975,
+      east: 10.025,
+      south: 51.975,
+      north: 52.025,
+    };
+    const viewport = {
+      west: 9,
+      east: 11,
+      south: 51,
+      north: 53,
+    };
+
+    expect(gridCellToGuidePaths(cell, viewport)).toEqual([
+      [
+        [10, 52.025],
+        [10, 53],
+      ],
+      [
+        [10, 51.975],
+        [10, 51],
+      ],
+      [
+        [10.025, 52],
+        [11, 52],
+      ],
+      [
+        [9.975, 52],
+        [9, 52],
+      ],
+    ]);
+  });
+});
diff --git a/src/lib/map/geogrid.ts b/src/lib/map/geogrid.ts
index 36bbe40..c4970b4 100644
--- a/src/lib/map/geogrid.ts
+++ b/src/lib/map/geogrid.ts
@@ -18,7 +18,7 @@ function snapToAxis(value: number, start: number, step: number, count: number):
   };
 }
 
-/** Snap a WGS-84 point to the nearest ESDC 2.5° grid cell. */
+/** Snap a WGS-84 point to the nearest Zarr grid cell center. */
 export function geoPointToZarrGrid(point: GeoPoint): GridCell {
   const lon = snapToAxis(point.lon, grid.lonStart, grid.lonStep, dimensions.lon);
   const lat = snapToAxis(point.lat, grid.latStart, grid.latStep, dimensions.lat);
@@ -31,6 +31,68 @@ export function geoPointToZarrGrid(point: GeoPoint): GridCell {
   };
 }
 
+export type GridCellBounds = {
+  west: number;
+  east: number;
+  south: number;
+  north: number;
+};
+
+/** Half-open cell edges around a snapped cell center. */
+export function gridCellToBounds(cell: GridCell): GridCellBounds {
+  const halfLon = Math.abs(grid.lonStep) / 2;
+  const halfLat = Math.abs(grid.latStep) / 2;
+
+  return {
+    west: cell.lon - halfLon,
+    east: cell.lon + halfLon,
+    south: cell.lat - halfLat,
+    north: cell.lat + halfLat,
+  };
+}
+
+/** Closed lon/lat ring for the cell footprint (counter-clockwise). */
+export function gridCellToPolygon(cell: GridCell): GeoPoint[] {
+  const { west, east, south, north } = gridCellToBounds(cell);
+
+  return [
+    { lon: west, lat: north },
+    { lon: east, lat: north },
+    { lon: east, lat: south },
+    { lon: west, lat: south },
+  ];
+}
+
+export type LonLatPath = [lon: number, lat: number][];
+
+/** Dotted guide lines from each cell edge to the viewport border. */
+export function gridCellToGuidePaths(
+  cell: GridCellBounds,
+  viewport: GridCellBounds,
+): LonLatPath[] {
+  const centerLon = (cell.west + cell.east) / 2;
+  const centerLat = (cell.south + cell.north) / 2;
+
+  return [
+    [
+      [centerLon, cell.north],
+      [centerLon, viewport.north],
+    ],
+    [
+      [centerLon, cell.south],
+      [centerLon, viewport.south],
+    ],
+    [
+      [cell.east, centerLat],
+      [viewport.east, centerLat],
+    ],
+    [
+      [cell.west, centerLat],
+      [viewport.west, centerLat],
+    ],
+  ];
+}
+
 export function formatCoordinate(value: number, digits = 3): string {
   const direction = value >= 0 ? "" : "-";
   return `${direction}${Math.abs(value).toFixed(digits)}°`;
diff --git a/src/lib/map/mapLabels.test.ts b/src/lib/map/mapLabels.test.ts
new file mode 100644
index 0000000..cad6efb
--- /dev/null
+++ b/src/lib/map/mapLabels.test.ts
@@ -0,0 +1,109 @@
+import { describe, expect, it } from "vitest";
+import {
+  isDarkBasemapTextLayer,
+  isPlaceLabelLayer,
+  isPrimaryDarkBasemapTextLayer,
+  patchDarkMapLabelStyle,
+  SINGLE_LINE_LABEL_TEXT_FIELD,
+} from "@/lib/map/mapLabels";
+
+describe("isPlaceLabelLayer", () => {
+  it("matches OpenFreeMap place label layers", () => {
+    expect(isPlaceLabelLayer("place_city")).toBe(true);
+    expect(isPlaceLabelLayer("place_country_major")).toBe(true);
+  });
+
+  it("ignores non-place symbol layers", () => {
+    expect(isPlaceLabelLayer("highway_name_other")).toBe(false);
+    expect(isPlaceLabelLayer("water_name")).toBe(false);
+  });
+});
+
+describe("isDarkBasemapTextLayer", () => {
+  it("includes place and water labels", () => {
+    expect(isDarkBasemapTextLayer("place_city")).toBe(true);
+    expect(isDarkBasemapTextLayer("water_name")).toBe(true);
+  });
+
+  it("ignores highway labels", () => {
+    expect(isDarkBasemapTextLayer("highway_name_other")).toBe(false);
+  });
+});
+
+describe("isPrimaryDarkBasemapTextLayer", () => {
+  it("treats countries and large cities as primary", () => {
+    expect(isPrimaryDarkBasemapTextLayer("place_country_major")).toBe(true);
+    expect(isPrimaryDarkBasemapTextLayer("place_city_large")).toBe(true);
+    expect(isPrimaryDarkBasemapTextLayer("water_name")).toBe(true);
+  });
+
+  it("treats states and smaller cities as secondary", () => {
+    expect(isPrimaryDarkBasemapTextLayer("place_state")).toBe(false);
+    expect(isPrimaryDarkBasemapTextLayer("place_city")).toBe(false);
+  });
+});
+
+describe("patchDarkMapLabelStyle", () => {
+  it("brightens primary labels, defers secondary labels, and uses single-line text", () => {
+    const style = patchDarkMapLabelStyle({
+      version: 8,
+      sources: {},
+      layers: [
+        {
+          id: "place_country_major",
+          type: "symbol",
+          source: "openmaptiles",
+          layout: {
+            "text-field": [
+              "concat",
+              ["get", "name:latin"],
+              "\n",
+              ["get", "name:nonlatin"],
+            ],
+          },
+          paint: {
+            "text-color": "rgb(101,101,101)",
+            "text-halo-color": "rgba(0,0,0,0.7)",
+          },
+        },
+        {
+          id: "place_state",
+          type: "symbol",
+          source: "openmaptiles",
+          maxzoom: 12,
+          layout: { "text-field": ["get", "name"] },
+          paint: { "text-color": "rgb(101,101,101)" },
+        },
+        {
+          id: "water_name",
+          type: "symbol",
+          source: "openmaptiles",
+          layout: { "text-field": ["get", "name"] },
+          paint: { "text-color": "hsla(0,0%,0%,0.7)" },
+        },
+        {
+          id: "highway_name_other",
+          type: "symbol",
+          source: "openmaptiles",
+          layout: { "text-field": ["get", "name"] },
+          paint: { "text-color": "rgba(80, 78, 78, 1)" },
+        },
+      ],
+    });
+
+    expect(style.layers?.[0]?.layout?.["text-field"]).toEqual(
+      SINGLE_LINE_LABEL_TEXT_FIELD,
+    );
+    expect(style.layers?.[0]?.paint?.["text-color"]).toBe("#ffffff");
+    expect(style.layers?.[0]?.paint?.["text-halo-color"]).toBe(
+      "rgba(0, 0, 0, 0.92)",
+    );
+    expect(style.layers?.[0]?.paint?.["text-halo-width"]).toBe(1.6);
+    expect(style.layers?.[1]?.minzoom).toBe(5);
+    expect(style.layers?.[1]?.paint?.["text-color"]).toBe(
+      "rgba(255, 255, 255, 0.9)",
+    );
+    expect(style.layers?.[2]?.paint?.["text-color"]).toBe("#ffffff");
+    expect(style.layers?.[3]?.paint?.["text-color"]).toBe("rgba(80, 78, 78, 1)");
+  });
+});
diff --git a/src/lib/map/mapLabels.ts b/src/lib/map/mapLabels.ts
new file mode 100644
index 0000000..9dadcec
--- /dev/null
+++ b/src/lib/map/mapLabels.ts
@@ -0,0 +1,151 @@
+import type {
+  ExpressionSpecification,
+  LayerSpecification,
+  Map as MapLibreMap,
+  StyleSpecification,
+} from "maplibre-gl";
+import { MAP_BASE_STYLES } from "@/lib/map/viewState";
+
+/** Country and major-city labels at world/region zoom. */
+export const DARK_MAP_PRIMARY_LABEL_COLOR = "#ffffff";
+
+/** State and city labels when zoomed in further. */
+export const DARK_MAP_SECONDARY_LABEL_COLOR = "rgba(255, 255, 255, 0.9)";
+
+/** Dark halo keeps white labels legible over land and water. */
+export const DARK_MAP_LABEL_HALO_COLOR = "rgba(0, 0, 0, 0.92)";
+
+export const DARK_MAP_LABEL_HALO_WIDTH = 1.6;
+
+/** English/Latin only — avoids stacked bilingual lines that crowd the map. */
+export const SINGLE_LINE_LABEL_TEXT_FIELD: ExpressionSpecification = [
+  "coalesce",
+  ["get", "name_en"],
+  ["get", "name:latin"],
+  ["get", "name"],
+];
+
+const PRIMARY_DARK_LABEL_LAYERS = new Set([
+  "place_country_major",
+  "place_country_minor",
+  "place_country_other",
+  "place_city_large",
+  "water_name",
+]);
+
+/** Minimum zoom before smaller admin/city labels appear. */
+const DARK_LABEL_MIN_ZOOM: Partial<Record<string, number>> = {
+  place_city_large: 3,
+  place_state: 5,
+  place_city: 6,
+  place_town: 7,
+  place_village: 8,
+  place_suburb: 9,
+  place_other: 9,
+};
+
+export function isPlaceLabelLayer(layerId: string): boolean {
+  return layerId.startsWith("place_");
+}
+
+export function isDarkBasemapTextLayer(layerId: string): boolean {
+  if (layerId.startsWith("highway_")) return false;
+  return isPlaceLabelLayer(layerId) || layerId === "water_name";
+}
+
+export function isPrimaryDarkBasemapTextLayer(layerId: string): boolean {
+  return PRIMARY_DARK_LABEL_LAYERS.has(layerId);
+}
+
+function patchSymbolLayer(layer: LayerSpecification): LayerSpecification {
+  if (layer.type !== "symbol") return layer;
+
+  const layout = layer.layout as Record<string, unknown> | undefined;
+  if (!layout?.["text-field"]) return layer;
+  if (!isDarkBasemapTextLayer(layer.id)) return layer;
+
+  const isPrimary = isPrimaryDarkBasemapTextLayer(layer.id);
+  const minzoom = DARK_LABEL_MIN_ZOOM[layer.id];
+
+  const paint = {
+    ...(layer.paint as Record<string, unknown> | undefined),
+    "text-color": isPrimary
+      ? DARK_MAP_PRIMARY_LABEL_COLOR
+      : DARK_MAP_SECONDARY_LABEL_COLOR,
+    "text-halo-color": DARK_MAP_LABEL_HALO_COLOR,
+    "text-halo-width": DARK_MAP_LABEL_HALO_WIDTH,
+  };
+
+  return {
+    ...layer,
+    ...(minzoom !== undefined ? { minzoom } : {}),
+    layout: {
+      ...layout,
+      "text-field": SINGLE_LINE_LABEL_TEXT_FIELD,
+    },
+    paint,
+  };
+}
+
+export function patchDarkMapLabelStyle(
+  style: StyleSpecification,
+): StyleSpecification {
+  return {
+    ...style,
+    layers: style.layers?.map(patchSymbolLayer) ?? [],
+  };
+}
+
+let darkMapStylePromise: Promise<StyleSpecification> | null = null;
+let darkMapStyleCacheVersion = -1;
+const DARK_MAP_STYLE_PATCH_VERSION = 3;
+
+export function loadDarkMapStyle(): Promise<StyleSpecification> {
+  if (
+    !darkMapStylePromise ||
+    darkMapStyleCacheVersion !== DARK_MAP_STYLE_PATCH_VERSION
+  ) {
+    darkMapStyleCacheVersion = DARK_MAP_STYLE_PATCH_VERSION;
+    darkMapStylePromise = fetch(MAP_BASE_STYLES.dark)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`Could not load dark map style (${response.status}).`);
+        }
+        return response.json() as Promise<StyleSpecification>;
+      })
+      .then(patchDarkMapLabelStyle);
+  }
+
+  return darkMapStylePromise;
+}
+
+/** Brighten city/country labels in the dark basemap; leaves roads and fills unchanged. */
+export function brightenDarkMapPlaceLabels(map: MapLibreMap): void {
+  const style = map.getStyle();
+  if (!style?.layers) return;
+
+  for (const layer of style.layers) {
+    if (layer.type !== "symbol") continue;
+    if (!layer.layout?.["text-field"]) continue;
+    if (!isDarkBasemapTextLayer(layer.id)) continue;
+
+    const isPrimary = isPrimaryDarkBasemapTextLayer(layer.id);
+    map.setPaintProperty(
+      layer.id,
+      "text-color",
+      isPrimary ? DARK_MAP_PRIMARY_LABEL_COLOR : DARK_MAP_SECONDARY_LABEL_COLOR,
+    );
+    map.setPaintProperty(layer.id, "text-halo-color", DARK_MAP_LABEL_HALO_COLOR);
+    map.setPaintProperty(
+      layer.id,
+      "text-halo-width",
+      DARK_MAP_LABEL_HALO_WIDTH,
+    );
+    map.setLayoutProperty(layer.id, "text-field", SINGLE_LINE_LABEL_TEXT_FIELD);
+
+    const minzoom = DARK_LABEL_MIN_ZOOM[layer.id];
+    if (minzoom !== undefined) {
+      map.setLayerZoomRange(layer.id, minzoom, layer.maxzoom ?? 24);
+    }
+  }
+}
diff --git a/src/lib/map/viewState.test.ts b/src/lib/map/viewState.test.ts
new file mode 100644
index 0000000..f038cca
--- /dev/null
+++ b/src/lib/map/viewState.test.ts
@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vitest";
+import {
+  DEFAULT_MAP_VIEW,
+  SELECTION_FOCUS_TRANSITION_MS,
+  SELECTION_FOCUS_ZOOM,
+  viewStateFocusedOnCell,
+} from "@/lib/map/viewState";
+
+describe("viewStateFocusedOnCell", () => {
+  const cell = {
+    lon: 10.025,
+    lat: 52.025,
+    lonIndex: 3800,
+    latIndex: 759,
+  };
+
+  it("centers and zooms in when the map is zoomed out", () => {
+    const next = viewStateFocusedOnCell(DEFAULT_MAP_VIEW, cell);
+
+    expect(next.longitude).toBe(cell.lon);
+    expect(next.latitude).toBe(cell.lat);
+    expect(next.zoom).toBe(SELECTION_FOCUS_ZOOM);
+    expect(next.transitionDuration).toBe(SELECTION_FOCUS_TRANSITION_MS);
+  });
+
+  it("recenters but keeps zoom when already closer than the focus level", () => {
+    const current = { ...DEFAULT_MAP_VIEW, zoom: 11 };
+    const next = viewStateFocusedOnCell(current, cell);
+
+    expect(next.longitude).toBe(cell.lon);
+    expect(next.latitude).toBe(cell.lat);
+    expect(next.zoom).toBe(11);
+  });
+
+  it("returns the same object when nothing changes", () => {
+    const current = {
+      ...DEFAULT_MAP_VIEW,
+      longitude: cell.lon,
+      latitude: cell.lat,
+      zoom: SELECTION_FOCUS_ZOOM,
+    };
+
+    expect(viewStateFocusedOnCell(current, cell)).toBe(current);
+  });
+});
diff --git a/src/lib/map/viewState.ts b/src/lib/map/viewState.ts
index 3a92fd9..43a35dc 100644
--- a/src/lib/map/viewState.ts
+++ b/src/lib/map/viewState.ts
@@ -1,4 +1,5 @@
-import type { MapViewState } from "@/types/map";
+import { FlyToInterpolator } from "@deck.gl/core";
+import type { GridCell, MapViewState } from "@/types/map";
 
 export const DEFAULT_MAP_VIEW: MapViewState = {
   longitude: 10,
@@ -8,7 +9,37 @@ export const DEFAULT_MAP_VIEW: MapViewState = {
   pitch: 0,
 };
 
+/** Minimum zoom when focusing a selected 0.05° grid cell. */
+export const SELECTION_FOCUS_ZOOM = 9;
+
+export const SELECTION_FOCUS_TRANSITION_MS = 1000;
+
+const selectionFocusInterpolator = new FlyToInterpolator();
+
+/** Center on a snapped cell and zoom in only if the view is still too wide. */
+export function viewStateFocusedOnCell(
+  current: MapViewState,
+  cell: GridCell,
+): MapViewState {
+  const nextZoom = Math.max(current.zoom, SELECTION_FOCUS_ZOOM);
+  const isChangingView =
+    current.longitude !== cell.lon ||
+    current.latitude !== cell.lat ||
+    nextZoom !== current.zoom;
+
+  if (!isChangingView) return current;
+
+  return {
+    ...current,
+    longitude: cell.lon,
+    latitude: cell.lat,
+    zoom: nextZoom,
+    transitionDuration: SELECTION_FOCUS_TRANSITION_MS,
+    transitionInterpolator: selectionFocusInterpolator,
+  };
+}
+
 export const MAP_BASE_STYLES = {
-  dark: "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
-  light: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json",
+  dark: "https://tiles.openfreemap.org/styles/dark",
+  light: "https://tiles.openfreemap.org/styles/positron",
 } as const;
diff --git a/src/lib/map/viewportBounds.ts b/src/lib/map/viewportBounds.ts
new file mode 100644
index 0000000..6892739
--- /dev/null
+++ b/src/lib/map/viewportBounds.ts
@@ -0,0 +1,30 @@
+import { WebMercatorViewport } from "@deck.gl/core";
+import type { GridCellBounds } from "@/lib/map/geogrid";
+import type { MapViewState } from "@/types/map";
+
+/** Geographic bounds of the visible map viewport. */
+export function viewportToGeoBounds(
+  viewState: MapViewState,
+  width: number,
+  height: number,
+): GridCellBounds {
+  const viewport = new WebMercatorViewport({
+    width,
+    height,
+    longitude: viewState.longitude,
+    latitude: viewState.latitude,
+    zoom: viewState.zoom,
+    bearing: viewState.bearing ?? 0,
+    pitch: viewState.pitch ?? 0,
+  });
+
+  const [west, north] = viewport.unproject([0, 0]);
+  const [east, south] = viewport.unproject([width, height]);
+
+  return {
+    west: Math.min(west, east),
+    east: Math.max(west, east),
+    south: Math.min(south, north),
+    north: Math.max(south, north),
+  };
+}
diff --git a/src/types/map.ts b/src/types/map.ts
index ec55036..5a97a70 100644
--- a/src/types/map.ts
+++ b/src/types/map.ts
@@ -1,3 +1,5 @@
+import type { TransitionInterpolator } from "@deck.gl/core";
+
 export type GeoPoint = {
   lon: number;
   lat: number;
@@ -19,4 +21,6 @@ export type MapViewState = {
   zoom: number;
   bearing?: number;
   pitch?: number;
+  transitionDuration?: number;
+  transitionInterpolator?: TransitionInterpolator;
 };