diff --git a/src/app/api/economy/series/route.ts b/src/app/api/economy/series/route.ts
new file mode 100644
index 0000000..37d971f
--- /dev/null
+++ b/src/app/api/economy/series/route.ts
@@ -0,0 +1,26 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getEconomicSeries } from "@/lib/api/economy";
+import { MEASURE_SLUGS } from "@/app/economic-indicators/indicators";
+
+// Same-origin proxy for york_factory's public series endpoint so client
+// components (the canvas page) can fetch without cross-origin config. The
+// upstream fetch is server-cached for an hour by getEconomicSeries.
+export async function GET(request: NextRequest) {
+  const measure = request.nextUrl.searchParams.get("measure");
+
+  if (!measure || !MEASURE_SLUGS.has(measure)) {
+    return NextResponse.json({ error: "Unknown measure" }, { status: 400 });
+  }
+
+  try {
+    const response = await getEconomicSeries(measure);
+    return NextResponse.json(response, {
+      headers: { "Cache-Control": "public, s-maxage=3600, max-age=600" },
+    });
+  } catch {
+    return NextResponse.json(
+      { error: "Upstream data unavailable" },
+      { status: 502 },
+    );
+  }
+}
diff --git a/src/app/economic-indicators/CombinedSectionChart.tsx b/src/app/economic-indicators/CombinedSectionChart.tsx
new file mode 100644
index 0000000..fb8ef91
--- /dev/null
+++ b/src/app/economic-indicators/CombinedSectionChart.tsx
@@ -0,0 +1,180 @@
+"use client";
+
+import { useMemo } from "react";
+import {
+  Bounds,
+  createTestDataset,
+  DimensionProperty,
+  GRAPHER_CHART_TYPES,
+  Grapher,
+  GrapherState,
+  legacyToChartsTableAndDimensionsWithMandatorySlug,
+} from "@buildcanada/charts";
+import {
+  humanizeSourceName,
+  type EconomySeriesResponse,
+} from "@/lib/api/economy";
+import {
+  BENCHMARK_COLOR,
+  CANADA_COLOR,
+  type IndicatorBenchmark,
+} from "./indicators";
+import { benchmarkValue, daysSinceGrapherEpoch } from "./IndicatorChart";
+import { displayUnit } from "./units";
+import { useChartSize } from "./useChartSize";
+
+// Overlays one section's indicators as lines on a single chart — one entity
+// per measure instead of one per jurisdiction. Assumes every item shares the
+// same unit and frequency (e.g. the Cost of Living CPI components), and that
+// each measure is Canada-only or that its Canada series is the one to show.
+export type CombinedChartItem = {
+  label: string;
+  response: EconomySeriesResponse;
+};
+
+function buildGrapherState(
+  heading: string,
+  items: CombinedChartItem[],
+  bounds: Bounds,
+  benchmark?: IndicatorBenchmark,
+): GrapherState | null {
+  const first = items[0]?.response;
+  if (!first) return null;
+  const monthly = first.data.measure.frequency === "monthly";
+  const { source } = first.meta;
+
+  const itemSeries = items.map(
+    (item) =>
+      item.response.data.series.find((s) => s.jurisdiction.slug === "ca") ??
+      item.response.data.series[0],
+  );
+
+  const data = items.flatMap((item, idx) => {
+    const series = itemSeries[idx];
+    if (!series) return [];
+    return series.points.map((p) => ({
+      year: monthly && p.date ? daysSinceGrapherEpoch(p.date) : p.year,
+      entity: { id: idx + 1, code: item.label, name: item.label },
+      value: p.value,
+    }));
+  });
+  if (data.length === 0) return null;
+
+  if (benchmark) {
+    // One benchmark point per time in the longest series, so the reference
+    // line spans exactly the observed range.
+    const longest = itemSeries
+      .filter((s) => s !== undefined)
+      .reduce((a, b) => (b.points.length > a.points.length ? b : a));
+    const entity = {
+      id: items.length + 1,
+      code: "TARGET",
+      name: benchmark.label,
+    };
+    data.push(
+      ...longest.points.map((p) => ({
+        year: monthly && p.date ? daysSinceGrapherEpoch(p.date) : p.year,
+        entity,
+        value: benchmarkValue(benchmark, p.year),
+      })),
+    );
+  }
+
+  const variableId = 1;
+  const dimensions = [{ variableId, property: DimensionProperty.y }];
+
+  const metadata = {
+    id: variableId,
+    display: {
+      name: heading,
+      ...displayUnit(first.data.measure.unit),
+      ...(monthly ? { yearIsDay: true } : {}),
+    },
+    origins: source
+      ? [
+          {
+            id: 1,
+            title: humanizeSourceName(source.name),
+            urlMain: source.url ?? undefined,
+            datePublished: source.last_fetched_at ?? undefined,
+          },
+        ]
+      : [],
+  };
+
+  // Emphasize the first item (the section's headline series) in brand red;
+  // the component lines render in Grapher's palette, muted until hovered.
+  const headlineLabel = items[0].label;
+  const entityColors: Record<string, string> = {
+    [headlineLabel]: CANADA_COLOR,
+    ...(benchmark ? { [benchmark.label]: BENCHMARK_COLOR } : {}),
+  };
+  const selectedEntityNames = [
+    ...items.map((item) => item.label),
+    ...(benchmark ? [benchmark.label] : []),
+  ];
+
+  const grapherState = new GrapherState({
+    bounds,
+    isEmbeddedInPage: true,
+    chartTypes: [GRAPHER_CHART_TYPES.LineChart],
+    selectedEntityNames,
+    selectedEntityColors: entityColors,
+    dimensions,
+  });
+
+  grapherState.entityType = "series";
+  grapherState.focusedSeriesNames = [headlineLabel];
+  grapherState.focusArray.clearAllAndAdd(headlineLabel);
+  grapherState.variant = "uncaptioned" as typeof grapherState.variant;
+
+  grapherState.inputTable = legacyToChartsTableAndDimensionsWithMandatorySlug(
+    createTestDataset([{ data, metadata }]),
+    dimensions,
+    entityColors,
+  );
+
+  return grapherState;
+}
+
+export default function CombinedSectionChart({
+  heading,
+  items,
+  benchmark,
+}: {
+  heading: string;
+  items: CombinedChartItem[];
+  benchmark?: IndicatorBenchmark;
+}) {
+  const { containerRef, size } = useChartSize();
+
+  const grapherState = useMemo(
+    () =>
+      buildGrapherState(
+        heading,
+        items,
+        new Bounds(0, 0, size.width, size.height),
+        benchmark,
+      ),
+    [heading, items, size.width, size.height, benchmark],
+  );
+
+  return (
+    <div
+      ref={containerRef}
+      className="border border-border-light bg-bg p-2 [&_svg]:overflow-visible"
+    >
+      {grapherState ? (
+        <div style={{ width: size.width, height: size.height }}>
+          <Grapher grapherState={grapherState} />
+        </div>
+      ) : (
+        <div className="flex h-[360px] items-center justify-center">
+          <p className="type-body text-dark/60">
+            No data available for this chart.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/economic-indicators/CombinedSectionChartClient.tsx b/src/app/economic-indicators/CombinedSectionChartClient.tsx
new file mode 100644
index 0000000..5935577
--- /dev/null
+++ b/src/app/economic-indicators/CombinedSectionChartClient.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import type { CombinedChartItem } from "./CombinedSectionChart";
+import type { IndicatorBenchmark } from "./indicators";
+
+const CombinedSectionChart = dynamic(() => import("./CombinedSectionChart"), {
+  ssr: false,
+  loading: () => (
+    // Mirrors the useChartSize clamp so deep-link hash scrolls stay accurate
+    // when the placeholder swaps for the real chart.
+    <div className="h-[clamp(338px,50vw_-_20px,478px)] animate-pulse border border-border-light bg-dark/5" />
+  ),
+});
+
+export default function CombinedSectionChartClient({
+  heading,
+  items,
+  benchmark,
+}: {
+  heading: string;
+  items: CombinedChartItem[];
+  benchmark?: IndicatorBenchmark;
+}) {
+  return (
+    <CombinedSectionChart heading={heading} items={items} benchmark={benchmark} />
+  );
+}
diff --git a/src/app/economic-indicators/IndicatorChart.tsx b/src/app/economic-indicators/IndicatorChart.tsx
new file mode 100644
index 0000000..d3f1027
--- /dev/null
+++ b/src/app/economic-indicators/IndicatorChart.tsx
@@ -0,0 +1,186 @@
+"use client";
+
+import { useMemo } from "react";
+import {
+  Bounds,
+  createTestDataset,
+  DimensionProperty,
+  GRAPHER_CHART_TYPES,
+  Grapher,
+  GrapherState,
+  legacyToChartsTableAndDimensionsWithMandatorySlug,
+} from "@buildcanada/charts";
+import {
+  humanizeSourceName,
+  type EconomySeriesResponse,
+} from "@/lib/api/economy";
+import {
+  BENCHMARK_COLOR,
+  CANADA_COLOR,
+  type IndicatorBenchmark,
+} from "./indicators";
+import { displayUnit } from "./units";
+import { useChartSize } from "./useChartSize";
+
+const ENTITY_COLORS = { Canada: CANADA_COLOR };
+
+// Grapher represents sub-annual time as integer days since its epoch date
+// (EPOCH_DATE in @buildcanada/charts) on a column flagged yearIsDay — the
+// OWID convention for daily/monthly series.
+const GRAPHER_EPOCH_MS = Date.UTC(2020, 0, 21);
+const DAY_MS = 86_400_000;
+
+export function daysSinceGrapherEpoch(isoDate: string): number {
+  return Math.round((Date.parse(isoDate) - GRAPHER_EPOCH_MS) / DAY_MS);
+}
+
+// Benchmark values compound through the anchor point; `year` is fractional
+// for monthly points, so the line stays smooth between Januaries.
+export function benchmarkValue(
+  benchmark: IndicatorBenchmark,
+  year: number,
+): number {
+  return (
+    benchmark.anchorValue *
+    Math.pow(1 + benchmark.annualRatePct / 100, year - benchmark.anchorYear)
+  );
+}
+
+function buildGrapherState(
+  response: EconomySeriesResponse,
+  bounds: Bounds,
+  benchmark?: IndicatorBenchmark,
+): GrapherState | null {
+  const { measure, series } = response.data;
+  const { source } = response.meta;
+  const monthly = measure.frequency === "monthly";
+
+  const data = series.flatMap((s, idx) =>
+    s.points.map((p) => ({
+      year: monthly && p.date ? daysSinceGrapherEpoch(p.date) : p.year,
+      entity: { id: idx + 1, code: s.jurisdiction.code, name: s.jurisdiction.name },
+      value: p.value,
+    })),
+  );
+  if (data.length === 0) return null;
+
+  if (benchmark) {
+    // One benchmark point per time in the longest series, so the reference
+    // line spans exactly the observed range.
+    const longest = series.reduce((a, b) =>
+      b.points.length > a.points.length ? b : a,
+    );
+    const entity = {
+      id: series.length + 1,
+      code: "TARGET",
+      name: benchmark.label,
+    };
+    data.push(
+      ...longest.points.map((p) => ({
+        year: monthly && p.date ? daysSinceGrapherEpoch(p.date) : p.year,
+        entity,
+        value: benchmarkValue(benchmark, p.year),
+      })),
+    );
+  }
+
+  const variableId = 1;
+  const dimensions = [{ variableId, property: DimensionProperty.y }];
+
+  const metadata = {
+    id: variableId,
+    display: {
+      name: measure.name,
+      ...displayUnit(measure.unit),
+      ...(monthly ? { yearIsDay: true } : {}),
+    },
+    origins: source
+      ? [
+          {
+            id: 1,
+            title: humanizeSourceName(source.name),
+            urlMain: source.url ?? undefined,
+            datePublished: source.last_fetched_at ?? undefined,
+          },
+        ]
+      : [],
+  };
+
+  const entityColors = benchmark
+    ? { ...ENTITY_COLORS, [benchmark.label]: BENCHMARK_COLOR }
+    : ENTITY_COLORS;
+  const selectedEntityNames = [
+    ...series.map((s) => s.jurisdiction.name),
+    ...(benchmark ? [benchmark.label] : []),
+  ];
+
+  const grapherState = new GrapherState({
+    bounds,
+    // Fill the available bounds exactly instead of scaling to Grapher's
+    // ideal 680x480 aspect ratio.
+    isEmbeddedInPage: true,
+    chartTypes: [GRAPHER_CHART_TYPES.LineChart],
+    selectedEntityNames,
+    selectedEntityColors: entityColors,
+    dimensions,
+  });
+
+  grapherState.entityType = "country";
+  // Emphasize Canada; the other series render muted until hovered.
+  grapherState.focusedSeriesNames = ["Canada"];
+  grapherState.focusArray.clearAllAndAdd("Canada");
+  // Chart area only — no header (title/logo), tabs, entity selector,
+  // timeline, or footer (data source, download, full-screen). The enum
+  // isn't re-exported from the package root, hence the cast.
+  grapherState.variant = "uncaptioned" as typeof grapherState.variant;
+
+  grapherState.inputTable = legacyToChartsTableAndDimensionsWithMandatorySlug(
+    createTestDataset([{ data, metadata }]),
+    dimensions,
+    entityColors,
+  );
+
+  return grapherState;
+}
+
+export default function IndicatorChart({
+  response,
+  benchmark,
+}: {
+  response: EconomySeriesResponse;
+  benchmark?: IndicatorBenchmark;
+}) {
+  const { containerRef, size } = useChartSize();
+
+  const grapherState = useMemo(
+    () =>
+      buildGrapherState(
+        response,
+        new Bounds(0, 0, size.width, size.height),
+        benchmark,
+      ),
+    [response, size.width, size.height, benchmark],
+  );
+
+  return (
+    // In the uncaptioned variant, Grapher draws chart content at the padded
+    // origin (24,24) inside an svg whose viewBox starts at 0,0 — the bottom
+    // axis and right-edge labels get clipped unless the svg can overflow.
+    <div
+      ref={containerRef}
+      className="border border-border-light bg-bg p-2 [&_svg]:overflow-visible"
+    >
+      {grapherState ? (
+        <div style={{ width: size.width, height: size.height }}>
+          <Grapher grapherState={grapherState} />
+        </div>
+      ) : (
+        <div className="flex h-[360px] items-center justify-center">
+          <p className="type-body text-dark/60">
+            No data available for this indicator.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/economic-indicators/IndicatorChartClient.tsx b/src/app/economic-indicators/IndicatorChartClient.tsx
new file mode 100644
index 0000000..4591b9d
--- /dev/null
+++ b/src/app/economic-indicators/IndicatorChartClient.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import type { EconomySeriesResponse } from "@/lib/api/economy";
+import type { IndicatorBenchmark } from "./indicators";
+
+const IndicatorChart = dynamic(() => import("./IndicatorChart"), {
+  ssr: false,
+  loading: () => (
+    // Mirrors the useChartSize clamp so deep-link hash scrolls stay accurate
+    // when the placeholder swaps for the real chart.
+    <div className="h-[clamp(338px,50vw_-_20px,478px)] animate-pulse border border-border-light bg-dark/5" />
+  ),
+});
+
+export default function IndicatorChartClient({
+  response,
+  benchmark,
+}: {
+  response: EconomySeriesResponse;
+  benchmark?: IndicatorBenchmark;
+}) {
+  return <IndicatorChart response={response} benchmark={benchmark} />;
+}
diff --git a/src/app/economic-indicators/SectionNav.tsx b/src/app/economic-indicators/SectionNav.tsx
new file mode 100644
index 0000000..65d9ce4
--- /dev/null
+++ b/src/app/economic-indicators/SectionNav.tsx
@@ -0,0 +1,43 @@
+import Link from "next/link";
+import { SECTIONS } from "./indicators";
+
+// Sits below the global navbar (~70px) in the sticky stack.
+export default function SectionNav({ currentId }: { currentId?: string }) {
+  return (
+    <nav
+      aria-label="Indicator sections"
+      className="sticky top-[70px] z-40 border-b border-border-light bg-bg px-5 py-3"
+    >
+      <div className="max-w-[1080px] mx-auto flex flex-wrap gap-x-6 gap-y-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+        <Link
+          href="/economic-indicators"
+          aria-current={currentId === undefined ? "page" : undefined}
+          className={
+            currentId === undefined
+              ? "type-label text-accent underline underline-offset-4 whitespace-nowrap"
+              : "type-label text-dark/60 hover:text-dark underline-offset-4 hover:underline whitespace-nowrap"
+          }
+        >
+          Overview
+        </Link>
+        {SECTIONS.map((section) => {
+          const isActive = section.id === currentId;
+          return (
+            <Link
+              key={section.id}
+              href={`/economic-indicators/${section.id}`}
+              aria-current={isActive ? "page" : undefined}
+              className={
+                isActive
+                  ? "type-label text-accent underline underline-offset-4 whitespace-nowrap"
+                  : "type-label text-dark/60 hover:text-dark underline-offset-4 hover:underline whitespace-nowrap"
+              }
+            >
+              {section.title}
+            </Link>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}
diff --git a/src/app/economic-indicators/SectionSparkline.tsx b/src/app/economic-indicators/SectionSparkline.tsx
new file mode 100644
index 0000000..8faac19
--- /dev/null
+++ b/src/app/economic-indicators/SectionSparkline.tsx
@@ -0,0 +1,129 @@
+import type { EconomySeriesResponse } from "@/lib/api/economy";
+import { CANADA_COLOR } from "./indicators";
+
+// Decorative preview of a section's featured chart, rendered as a static
+// inline SVG on the server — Canada in brand red over muted peer lines,
+// mirroring the focused/muted treatment of the full Grapher charts.
+
+const VIEW_W = 100;
+const VIEW_H = 32;
+const PAD_Y = 2;
+// Century-scale series (CO₂ reaches back to 1750) would render as a long
+// flat tail at card size — preview only the recent era.
+const MAX_SPAN_YEARS = 60;
+
+type Line = { name: string; points: string; endX: number; endY: number };
+
+function buildLines(response: EconomySeriesResponse): {
+  lines: Line[];
+  minYear: number;
+  maxYear: number;
+} | null {
+  const allYears = response.data.series.flatMap((s) =>
+    s.points.map((p) => p.year),
+  );
+  if (allYears.length === 0) return null;
+  const windowStart = Math.max(...allYears) - MAX_SPAN_YEARS;
+
+  const series = response.data.series
+    .map((s) => ({
+      ...s,
+      points: s.points.filter((p) => p.year >= windowStart),
+    }))
+    .filter((s) => s.points.length >= 2);
+  if (series.length === 0) return null;
+
+  const allPoints = series.flatMap((s) => s.points);
+  const minYear = Math.min(...allPoints.map((p) => p.year));
+  const maxYear = Math.max(...allPoints.map((p) => p.year));
+  const minValue = Math.min(...allPoints.map((p) => p.value));
+  const maxValue = Math.max(...allPoints.map((p) => p.value));
+  if (minYear === maxYear) return null;
+
+  const valueSpan = maxValue - minValue;
+  const toX = (year: number) =>
+    ((year - minYear) / (maxYear - minYear)) * VIEW_W;
+  const toY = (value: number) =>
+    valueSpan === 0
+      ? VIEW_H / 2
+      : VIEW_H - PAD_Y - ((value - minValue) / valueSpan) * (VIEW_H - 2 * PAD_Y);
+
+  const lines = series.map((s) => {
+    const points = s.points
+      .map((p) => `${toX(p.year).toFixed(2)},${toY(p.value).toFixed(2)}`)
+      .join(" ");
+    const last = s.points[s.points.length - 1];
+    return {
+      name: s.jurisdiction.name,
+      points,
+      endX: toX(last.year),
+      endY: toY(last.value),
+    };
+  });
+
+  return { lines, minYear, maxYear };
+}
+
+export default function SectionSparkline({
+  response,
+}: {
+  response: EconomySeriesResponse;
+}) {
+  const built = buildLines(response);
+  if (!built) return null;
+
+  const { lines, minYear, maxYear } = built;
+  const canada = lines.find((l) => l.name === "Canada");
+  const peers = lines.filter((l) => l !== canada);
+
+  return (
+    <div aria-hidden="true">
+      {/* preserveAspectRatio="none" stretches the viewBox to the card, so
+          every stroke uses non-scaling-stroke to stay crisp in px units. */}
+      <svg
+        viewBox={`0 0 ${VIEW_W} ${VIEW_H}`}
+        preserveAspectRatio="none"
+        className="block h-20 w-full"
+      >
+        {peers.map((line) => (
+          <polyline
+            key={line.name}
+            points={line.points}
+            fill="none"
+            stroke="var(--color-dark)"
+            strokeOpacity={0.15}
+            strokeWidth={1}
+            vectorEffect="non-scaling-stroke"
+          />
+        ))}
+        {canada && (
+          <>
+            <polyline
+              points={canada.points}
+              fill="none"
+              stroke={CANADA_COLOR}
+              strokeWidth={2}
+              strokeLinejoin="round"
+              strokeLinecap="round"
+              vectorEffect="non-scaling-stroke"
+            />
+            {/* Zero-length round-capped stroke = a dot immune to the
+                non-uniform viewBox scaling that would distort a circle. */}
+            <path
+              d={`M ${canada.endX.toFixed(2)} ${canada.endY.toFixed(2)} h 0.01`}
+              stroke={CANADA_COLOR}
+              strokeWidth={5}
+              strokeLinecap="round"
+              vectorEffect="non-scaling-stroke"
+            />
+          </>
+        )}
+      </svg>
+      <div className="mt-1 flex justify-between type-label-sm text-dark/40">
+        {/* Monthly series carry fractional years (year + monthIndex / 12). */}
+        <span>{Math.floor(minYear)}</span>
+        <span>{Math.floor(maxYear)}</span>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/economic-indicators/[section]/page.tsx b/src/app/economic-indicators/[section]/page.tsx
new file mode 100644
index 0000000..09143ea
--- /dev/null
+++ b/src/app/economic-indicators/[section]/page.tsx
@@ -0,0 +1,283 @@
+import "@buildcanada/charts/styles.css";
+
+import type { Metadata } from "next";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { getSiteConfig } from "@/lib/api";
+import {
+  getEconomicSeries,
+  humanizeSourceName,
+  type EconomySeriesResponse,
+} from "@/lib/api/economy";
+import { PageHeader } from "@/components/ui/page-header";
+import { buildGraph } from "@/lib/schemas/graph";
+import { generateOrganizationSchema } from "@/lib/schemas/generators/organization";
+import { generateBreadcrumbSchema } from "@/lib/schemas/generators/breadcrumb";
+import { Signpost } from "@/components/custom/signpost";
+import CombinedSectionChartClient from "../CombinedSectionChartClient";
+import IndicatorChartClient from "../IndicatorChartClient";
+import SectionNav from "../SectionNav";
+import { SECTIONS } from "../indicators";
+
+export const dynamicParams = false;
+
+export function generateStaticParams() {
+  return SECTIONS.map((section) => ({ section: section.id }));
+}
+
+type PageProps = { params: Promise<{ section: string }> };
+
+export async function generateMetadata({
+  params,
+}: PageProps): Promise<Metadata> {
+  const { section: sectionId } = await params;
+  const section = SECTIONS.find((s) => s.id === sectionId);
+  if (!section) return {};
+  const title = `${section.title} — Economic Indicators`;
+  return {
+    title,
+    description: section.description,
+    alternates: { canonical: `/economic-indicators/${section.id}` },
+    openGraph: {
+      title,
+      description: section.description,
+      type: "website",
+    },
+    twitter: {
+      card: "summary_large_image",
+      title,
+    },
+  };
+}
+
+function formatFetchedDate(iso: string): string {
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return "";
+  return new Intl.DateTimeFormat("en-CA", { dateStyle: "long" }).format(date);
+}
+
+function SourceLine({ response }: { response: EconomySeriesResponse }) {
+  const source = response.meta.source;
+  if (!source) return null;
+  const updated = source.last_fetched_at
+    ? formatFetchedDate(source.last_fetched_at)
+    : "";
+  const sourceName = humanizeSourceName(source.name);
+  return (
+    <p className="mt-3 type-label-sm text-dark/60">
+      Source:{" "}
+      {source.url ? (
+        <a
+          href={source.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="underline hover:text-dark"
+        >
+          {sourceName}
+        </a>
+      ) : (
+        sourceName
+      )}
+      {updated && <> &middot; Updated {updated}</>}
+    </p>
+  );
+}
+
+// Deep-link targets must clear the sticky navbar + SectionNav stack, whose
+// height grows as the section links wrap on narrower screens.
+const SECTION_SCROLL_MT =
+  "scroll-mt-[300px] sm:scroll-mt-[220px] md:scroll-mt-[200px]";
+
+// Chart headings link to their own anchor so a reader can grab a URL
+// straight to one chart.
+function AnchoredHeading({ id, text }: { id: string; text: string }) {
+  return (
+    <h2 className="type-h4 text-dark">
+      <a href={`#${id}`} className="group">
+        {text}
+        <span
+          aria-hidden="true"
+          className="ml-2 text-dark/30 opacity-0 group-hover:opacity-100 transition-opacity"
+        >
+          #
+        </span>
+      </a>
+    </h2>
+  );
+}
+
+function UnavailablePanel() {
+  return (
+    <div className="flex h-[360px] items-center justify-center border border-border-light bg-bg">
+      <p className="type-body text-dark/60">
+        Data is temporarily unavailable. Please check back soon.
+      </p>
+    </div>
+  );
+}
+
+export default async function IndicatorSectionPage({ params }: PageProps) {
+  const { section: sectionId } = await params;
+  const sectionIndex = SECTIONS.findIndex((s) => s.id === sectionId);
+  if (sectionIndex === -1) notFound();
+
+  const section = SECTIONS[sectionIndex];
+  const prev = sectionIndex > 0 ? SECTIONS[sectionIndex - 1] : null;
+  const next =
+    sectionIndex < SECTIONS.length - 1 ? SECTIONS[sectionIndex + 1] : null;
+
+  const configData = getSiteConfig();
+
+  const jsonLd = buildGraph(
+    generateOrganizationSchema(configData),
+    generateBreadcrumbSchema(
+      `/economic-indicators/${section.id}`,
+      section.title,
+      configData.siteUrl,
+    ),
+  );
+
+  const results = await Promise.all(
+    section.indicators.map((indicator) =>
+      getEconomicSeries(indicator.slug).catch(() => null),
+    ),
+  );
+
+  const combinedItems = section.combined
+    ? section.indicators.flatMap((indicator, i) => {
+        const response = results[i];
+        return response
+          ? [{ label: indicator.chartLabel ?? indicator.heading, response }]
+          : [];
+      })
+    : [];
+
+  const signpostHeadings = [
+    ...(section.combined && combinedItems.length > 0
+      ? [{ id: "combined", text: section.combined.heading, level: 2 as const }]
+      : []),
+    ...section.indicators.map((indicator) => ({
+      id: indicator.slug,
+      text: indicator.heading,
+      level: 2 as const,
+    })),
+  ];
+
+  return (
+    <div className="mx-[10px] my-[10px] border border-border-light bg-bg overflow-x-clip">
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
+      <PageHeader title={section.title} description={section.description} />
+
+      <SectionNav currentId={section.id} />
+
+      <section className="px-5 py-12">
+        {/* Same layout as memo pages: a signpost rail column appears at
+            2xl-memo; below that, SectionNav is the page's navigation. The
+            rail's sticky top and scroll offset clear the navbar (~70px)
+            plus the sticky SectionNav (up to two wrapped rows). */}
+        <div className="max-w-[1400px] mx-auto 2xl-memo:grid 2xl-memo:grid-cols-[240px_minmax(0,1fr)] 2xl-memo:gap-12">
+          <Signpost
+            headings={signpostHeadings}
+            desktopTopClass="top-[170px]"
+            scrollOffset={200}
+            showMobileBar={false}
+            showTopBorder={false}
+          />
+          <div className="max-w-[1080px] mx-auto 2xl-memo:mx-0 w-full min-w-0 space-y-16">
+            {section.combined && combinedItems.length > 0 && (
+              <section id="combined" className={SECTION_SCROLL_MT}>
+                <AnchoredHeading id="combined" text={section.combined.heading} />
+                <p className="mt-1 mb-6 type-body-sm text-dark/60 max-w-[720px]">
+                  {section.combined.blurb}
+                </p>
+                <CombinedSectionChartClient
+                  heading={section.combined.heading}
+                  items={combinedItems}
+                  benchmark={section.benchmark}
+                />
+                <SourceLine response={combinedItems[0].response} />
+              </section>
+            )}
+
+            {section.indicators.map((indicator, i) => {
+              const response = results[i];
+              return (
+                <section
+                  key={indicator.slug}
+                  id={indicator.slug}
+                  className={SECTION_SCROLL_MT}
+                >
+                  <AnchoredHeading
+                    id={indicator.slug}
+                    text={indicator.heading}
+                  />
+                  <p className="mt-1 mb-6 type-body-sm text-dark/60 max-w-[720px]">
+                    {indicator.blurb ||
+                      response?.data.measure.description ||
+                      ""}
+                  </p>
+                  {response ? (
+                    <>
+                      <IndicatorChartClient
+                        response={response}
+                        benchmark={section.benchmark}
+                      />
+                      <SourceLine response={response} />
+                    </>
+                  ) : (
+                    <UnavailablePanel />
+                  )}
+                </section>
+              );
+            })}
+
+            <nav
+              aria-label="Section pagination"
+              className="flex justify-between gap-4 border-t border-border-light pt-8"
+            >
+              {prev ? (
+                <Link
+                  href={`/economic-indicators/${prev.id}`}
+                  className="type-label text-dark/70 hover:text-dark underline-offset-4 hover:underline"
+                >
+                  &larr; {prev.title}
+                </Link>
+              ) : (
+                <span />
+              )}
+              {next ? (
+                <Link
+                  href={`/economic-indicators/${next.id}`}
+                  className="type-label text-dark/70 hover:text-dark underline-offset-4 hover:underline text-right"
+                >
+                  {next.title} &rarr;
+                </Link>
+              ) : (
+                <span />
+              )}
+            </nav>
+
+            <div className="border-t border-border-light pt-12 text-center">
+              <h2 className="type-h3 text-dark">
+                Want to see another indicator?
+              </h2>
+              <p className="mt-2 type-body text-dark/70 max-w-[560px] mx-auto">
+                We&rsquo;re expanding this dashboard. If there&rsquo;s a metric
+                you&rsquo;d like us to track, let us know.
+              </p>
+              <a
+                href="mailto:hi@buildcanada.com?subject=Economic%20indicators%20request"
+                className="mt-6 inline-block border border-dark px-5 py-2.5 type-label text-dark hover:bg-dark hover:text-bg transition-colors"
+              >
+                Email us
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/src/app/economic-indicators/canvas/CanvasClient.tsx b/src/app/economic-indicators/canvas/CanvasClient.tsx
new file mode 100644
index 0000000..6f2c425
--- /dev/null
+++ b/src/app/economic-indicators/canvas/CanvasClient.tsx
@@ -0,0 +1,341 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import dynamic from "next/dynamic";
+import { useSearchParams } from "next/navigation";
+import type { EconomySeriesResponse } from "@/lib/api/economy";
+import { SECTIONS, MEASURE_SLUGS, indicatorHeading } from "../indicators";
+import type { OverlaySeries, OverlayMode } from "./overlay-types";
+
+const OverlayChart = dynamic(() => import("./OverlayChart"), {
+  ssr: false,
+  loading: () => (
+    <div className="h-[480px] animate-pulse border border-border-light bg-dark/5" />
+  ),
+});
+
+// auburn-600, lake-600, pine-600 from the brand palette.
+const FEED_COLORS = ["#c43e3e", "#0880b5", "#17794d"];
+const MAX_FEEDS = 3;
+const DEFAULT_MEASURE = "gdp-per-capita-ppp";
+// Canada's warehouse jurisdiction slug (the pre-existing federal CA row).
+const DEFAULT_JURISDICTION = "ca";
+
+type Feed = { measure: string; jurisdiction: string };
+type MeasureData = EconomySeriesResponse | "loading" | "error";
+
+function parseFeedsParam(param: string | null): Feed[] {
+  if (!param) return [];
+  return param
+    .split("|")
+    .map((part) => {
+      const [measure, jurisdiction] = part.split(":");
+      if (!measure || !MEASURE_SLUGS.has(measure)) return null;
+      return { measure, jurisdiction: jurisdiction || DEFAULT_JURISDICTION };
+    })
+    .filter((f): f is Feed => f !== null)
+    .slice(0, MAX_FEEDS);
+}
+
+function serializeFeeds(feeds: Feed[]): string {
+  return feeds.map((f) => `${f.measure}:${f.jurisdiction}`).join("|");
+}
+
+// Pearson correlation over the years where both series report a value.
+function pearson(
+  a: { year: number; value: number }[],
+  b: { year: number; value: number }[],
+): { r: number; n: number } | null {
+  const byYear = new Map(a.map((p) => [p.year, p.value]));
+  const pairs = b
+    .filter((p) => byYear.has(p.year))
+    .map((p) => [byYear.get(p.year) as number, p.value]);
+  const n = pairs.length;
+  if (n < 3) return null;
+
+  const meanX = pairs.reduce((s, [x]) => s + x, 0) / n;
+  const meanY = pairs.reduce((s, [, y]) => s + y, 0) / n;
+  let cov = 0;
+  let varX = 0;
+  let varY = 0;
+  for (const [x, y] of pairs) {
+    cov += (x - meanX) * (y - meanY);
+    varX += (x - meanX) ** 2;
+    varY += (y - meanY) ** 2;
+  }
+  if (varX === 0 || varY === 0) return null;
+  return { r: cov / Math.sqrt(varX * varY), n };
+}
+
+export default function CanvasClient() {
+  const searchParams = useSearchParams();
+
+  const [feeds, setFeeds] = useState<Feed[]>(() => {
+    const fromUrl = parseFeedsParam(searchParams.get("f"));
+    return fromUrl.length > 0
+      ? fromUrl
+      : [{ measure: DEFAULT_MEASURE, jurisdiction: DEFAULT_JURISDICTION }];
+  });
+  const [mode, setMode] = useState<OverlayMode>(() =>
+    searchParams.get("mode") === "raw" ? "raw" : "indexed",
+  );
+  const [dataByMeasure, setDataByMeasure] = useState<
+    Record<string, MeasureData>
+  >({});
+
+  const inflightMeasures = useRef(new Set<string>());
+
+  // A feed's stored jurisdiction can be invalid for its measure (e.g. after
+  // switching to a Canada-only measure), so resolve it against the loaded
+  // series at render time instead of correcting state in an effect.
+  const resolvedFeeds: Feed[] = useMemo(
+    () =>
+      feeds.map((feed) => {
+        const data = dataByMeasure[feed.measure];
+        if (!data || data === "loading" || data === "error") return feed;
+        const slugs = data.data.series.map((s) => s.jurisdiction.slug);
+        if (slugs.includes(feed.jurisdiction)) return feed;
+        return {
+          ...feed,
+          jurisdiction: slugs.includes(DEFAULT_JURISDICTION)
+            ? DEFAULT_JURISDICTION
+            : (slugs[0] ?? feed.jurisdiction),
+        };
+      }),
+    [feeds, dataByMeasure],
+  );
+
+  // Keep the URL shareable. Shallow replaceState only — router.replace would
+  // refetch the RSC payload and remount this component on every change.
+  useEffect(() => {
+    const params = new URLSearchParams();
+    params.set("f", serializeFeeds(resolvedFeeds));
+    if (mode !== "indexed") params.set("mode", mode);
+    const next = `/economic-indicators/canvas?${params.toString()}`;
+    if (`${window.location.pathname}${window.location.search}` !== next) {
+      window.history.replaceState(null, "", next);
+    }
+  }, [resolvedFeeds, mode]);
+
+  // Fetch series data for any selected measure we haven't loaded yet.
+  useEffect(() => {
+    for (const feed of feeds) {
+      const measure = feed.measure;
+      if (dataByMeasure[measure] || inflightMeasures.current.has(measure)) {
+        continue;
+      }
+      inflightMeasures.current.add(measure);
+      fetch(`/api/economy/series?measure=${encodeURIComponent(measure)}`)
+        .then((res) => (res.ok ? res.json() : Promise.reject()))
+        .then((json: EconomySeriesResponse) =>
+          setDataByMeasure((prev) => ({ ...prev, [measure]: json })),
+        )
+        .catch(() =>
+          setDataByMeasure((prev) => ({ ...prev, [measure]: "error" })),
+        )
+        .finally(() => inflightMeasures.current.delete(measure));
+    }
+  }, [feeds, dataByMeasure]);
+
+  const overlaySeries: (OverlaySeries | null)[] = useMemo(
+    () =>
+      resolvedFeeds.map((feed, i) => {
+        const data = dataByMeasure[feed.measure];
+        if (!data || data === "loading" || data === "error") return null;
+        const series = data.data.series.find(
+          (s) => s.jurisdiction.slug === feed.jurisdiction,
+        );
+        if (!series) return null;
+        return {
+          label: `${indicatorHeading(feed.measure)} — ${series.jurisdiction.name}`,
+          color: FEED_COLORS[i],
+          unitSymbol: data.data.measure.unit.symbol,
+          points: series.points,
+        };
+      }),
+    [resolvedFeeds, dataByMeasure],
+  );
+
+  const loadedSeries = overlaySeries.filter(
+    (s): s is OverlaySeries => s !== null,
+  );
+
+  const updateFeed = (index: number, patch: Partial<Feed>) =>
+    setFeeds((prev) =>
+      prev.map((f, i) => (i === index ? { ...f, ...patch } : f)),
+    );
+
+  const correlations = useMemo(() => {
+    const out: { a: string; b: string; r: number; n: number }[] = [];
+    for (let i = 0; i < loadedSeries.length; i++) {
+      for (let j = i + 1; j < loadedSeries.length; j++) {
+        const result = pearson(loadedSeries[i].points, loadedSeries[j].points);
+        if (result) {
+          out.push({
+            a: loadedSeries[i].label,
+            b: loadedSeries[j].label,
+            ...result,
+          });
+        }
+      }
+    }
+    return out;
+    // loadedSeries is derived fresh each render from overlaySeries.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [overlaySeries]);
+
+  return (
+    <div>
+      {/* Chart is the primary content — it comes first. */}
+      <div>
+        {loadedSeries.length > 0 ? (
+          <OverlayChart series={loadedSeries} mode={mode} />
+        ) : (
+          <div className="flex h-[480px] items-center justify-center border border-border-light">
+            <p className="type-body text-dark/60">
+              {feeds.some((f) => dataByMeasure[f.measure] === "error")
+                ? "Data is temporarily unavailable."
+                : "Loading data…"}
+            </p>
+          </div>
+        )}
+      </div>
+
+      {/* Subtle controls, tucked beneath the chart. */}
+      <div className="mt-6 border-t border-border-light pt-5">
+        <div className="space-y-2">
+          {resolvedFeeds.map((feed, i) => {
+            const data = dataByMeasure[feed.measure];
+            const jurisdictions =
+              data && data !== "loading" && data !== "error"
+                ? data.data.series.map((s) => s.jurisdiction)
+                : [];
+            return (
+              <div key={i} className="flex flex-wrap items-center gap-2">
+                <span
+                  aria-hidden
+                  className="inline-block h-2.5 w-2.5 shrink-0 rounded-full"
+                  style={{ backgroundColor: FEED_COLORS[i] }}
+                />
+                <select
+                  aria-label={`Feed ${i + 1} indicator`}
+                  value={feed.measure}
+                  onChange={(e) => updateFeed(i, { measure: e.target.value })}
+                  className="type-label-sm border-0 bg-transparent px-1 py-0.5 text-dark/80 hover:text-dark focus:outline-none focus:ring-0"
+                >
+                  {SECTIONS.map((section) => (
+                    <optgroup key={section.id} label={section.title}>
+                      {section.indicators.map((indicator) => (
+                        <option key={indicator.slug} value={indicator.slug}>
+                          {indicator.heading}
+                        </option>
+                      ))}
+                    </optgroup>
+                  ))}
+                </select>
+                <select
+                  aria-label={`Feed ${i + 1} jurisdiction`}
+                  value={feed.jurisdiction}
+                  onChange={(e) =>
+                    updateFeed(i, { jurisdiction: e.target.value })
+                  }
+                  disabled={jurisdictions.length === 0}
+                  className="type-label-sm border-0 bg-transparent px-1 py-0.5 text-dark/60 hover:text-dark focus:outline-none focus:ring-0 disabled:opacity-50"
+                >
+                  {jurisdictions.length === 0 ? (
+                    <option value={feed.jurisdiction}>
+                      {data === "error" ? "unavailable" : "loading…"}
+                    </option>
+                  ) : (
+                    jurisdictions.map((j) => (
+                      <option key={j.slug} value={j.slug}>
+                        {j.name}
+                      </option>
+                    ))
+                  )}
+                </select>
+                {data === "error" && (
+                  <span className="type-label-sm text-accent">
+                    Failed to load this indicator.
+                  </span>
+                )}
+                {feeds.length > 1 && (
+                  <button
+                    type="button"
+                    onClick={() =>
+                      setFeeds((prev) => prev.filter((_, idx) => idx !== i))
+                    }
+                    className="ml-auto type-label-sm text-dark/40 hover:text-dark"
+                    aria-label={`Remove feed ${i + 1}`}
+                  >
+                    &times;
+                  </button>
+                )}
+              </div>
+            );
+          })}
+        </div>
+
+        <div className="mt-4 flex flex-wrap items-center gap-x-5 gap-y-2">
+          {feeds.length < MAX_FEEDS && (
+            <button
+              type="button"
+              onClick={() =>
+                setFeeds((prev) => [
+                  ...prev,
+                  {
+                    measure: DEFAULT_MEASURE,
+                    jurisdiction: DEFAULT_JURISDICTION,
+                  },
+                ])
+              }
+              className="type-label-sm text-dark/60 hover:text-dark underline underline-offset-4"
+            >
+              + Add data feed
+            </button>
+          )}
+
+          <fieldset className="flex items-center gap-3">
+            <legend className="sr-only">Scale mode</legend>
+            {(
+              [
+                ["indexed", "Indexed (first shared year = 100)"],
+                ["raw", "Raw values (separate axes)"],
+              ] as const
+            ).map(([value, label]) => (
+              <label
+                key={value}
+                className="flex items-center gap-1.5 type-label-sm text-dark/60"
+              >
+                <input
+                  type="radio"
+                  name="mode"
+                  value={value}
+                  checked={mode === value}
+                  onChange={() => setMode(value)}
+                />
+                {label}
+              </label>
+            ))}
+          </fieldset>
+        </div>
+
+        {correlations.length > 0 && (
+          <div className="mt-4 space-y-0.5">
+            {correlations.map((c) => (
+              <p
+                key={`${c.a}|${c.b}`}
+                className="type-label-sm text-dark/60"
+              >
+                r = {c.r.toFixed(2)} &middot; {c.a} vs {c.b}{" "}
+                <span className="text-dark/40">
+                  ({c.n} overlapping points; correlation &ne; causation)
+                </span>
+              </p>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/economic-indicators/canvas/OverlayChart.tsx b/src/app/economic-indicators/canvas/OverlayChart.tsx
new file mode 100644
index 0000000..4c1a249
--- /dev/null
+++ b/src/app/economic-indicators/canvas/OverlayChart.tsx
@@ -0,0 +1,176 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import {
+  Chart as ChartJS,
+  LinearScale,
+  PointElement,
+  LineElement,
+  LineController,
+  Tooltip,
+  Legend,
+} from "chart.js";
+import { axisLabel, formatValue } from "../units";
+import type { OverlaySeries, OverlayMode } from "./overlay-types";
+
+ChartJS.register(
+  LinearScale,
+  PointElement,
+  LineElement,
+  LineController,
+  Tooltip,
+  Legend,
+);
+
+const MONTH_FORMAT = new Intl.DateTimeFormat("en-CA", {
+  month: "short",
+  year: "numeric",
+  timeZone: "UTC",
+});
+
+function formatMonth(isoDate: string): string {
+  return MONTH_FORMAT.format(new Date(isoDate));
+}
+
+// The first year present in every series, so indexed mode rebases all series
+// to a shared point. Falls back to each series' own first year when the
+// series never overlap.
+function firstSharedYear(series: OverlaySeries[]): number | null {
+  if (series.length === 0) return null;
+  const shared = series
+    .map((s) => new Set(s.points.map((p) => p.year)))
+    .reduce((acc, years) => new Set([...acc].filter((y) => years.has(y))));
+  if (shared.size === 0) return null;
+  return Math.min(...shared);
+}
+
+export default function OverlayChart({
+  series,
+  mode,
+}: {
+  series: OverlaySeries[];
+  mode: OverlayMode;
+}) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const chartRef = useRef<ChartJS | null>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const baseYear = mode === "indexed" ? firstSharedYear(series) : null;
+
+    const datasets = series.map((s, i) => {
+      const base =
+        baseYear !== null
+          ? (s.points.find((p) => p.year === baseYear)?.value ??
+            s.points[0]?.value)
+          : s.points[0]?.value;
+
+      return {
+        label: s.label,
+        data: s.points.map((p) => ({
+          x: p.year,
+          y:
+            mode === "indexed" && base
+              ? (p.value / base) * 100
+              : p.value,
+          raw: p.value,
+          date: p.date,
+        })),
+        borderColor: s.color,
+        backgroundColor: s.color,
+        pointRadius: 0,
+        pointHoverRadius: 4,
+        borderWidth: 2,
+        tension: 0.15,
+        yAxisID: mode === "raw" ? `y${i}` : "y",
+      };
+    });
+
+    const rawAxes = Object.fromEntries(
+      mode === "raw"
+        ? series.map((s, i) => [
+            `y${i}`,
+            {
+              type: "linear" as const,
+              position: i === 0 ? ("left" as const) : ("right" as const),
+              title: {
+                display: true,
+                text: axisLabel(s.unitSymbol),
+                color: s.color,
+              },
+              ticks: { color: s.color },
+              grid: { drawOnChartArea: i === 0 },
+            },
+          ])
+        : [],
+    );
+
+    chartRef.current?.destroy();
+    chartRef.current = new ChartJS(canvas, {
+      type: "line",
+      data: { datasets },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        interaction: { mode: "nearest", axis: "x", intersect: false },
+        scales: {
+          x: {
+            type: "linear",
+            ticks: { callback: (v) => String(v), precision: 0 },
+            grid: { display: false },
+          },
+          ...(mode === "indexed"
+            ? {
+                y: {
+                  type: "linear" as const,
+                  title: {
+                    display: true,
+                    text:
+                      baseYear !== null
+                        ? `Index (${baseYear} = 100)`
+                        : "Index (first year = 100)",
+                  },
+                },
+              }
+            : rawAxes),
+        },
+        plugins: {
+          legend: { position: "bottom", labels: { boxWidth: 12 } },
+          tooltip: {
+            callbacks: {
+              // Monthly points carry an ISO date; annual points show the year.
+              title: (items) => {
+                const raw = items[0]?.raw as { date?: string } | undefined;
+                if (raw?.date) return formatMonth(raw.date);
+                return String(items[0]?.parsed.x ?? "");
+              },
+              label: (item) => {
+                const s = series[item.datasetIndex];
+                const raw = (item.raw as { raw: number }).raw;
+                const formatted = formatValue(raw, s.unitSymbol);
+                if (mode === "indexed") {
+                  const indexed = item.parsed.y ?? 0;
+                  return `${s.label}: ${indexed.toFixed(1)} (${formatted})`;
+                }
+                return `${s.label}: ${formatted}`;
+              },
+            },
+          },
+        },
+      },
+    });
+
+    return () => {
+      chartRef.current?.destroy();
+      chartRef.current = null;
+    };
+  }, [series, mode]);
+
+  return (
+    <div className="h-[480px] border border-border-light bg-bg p-3">
+      <canvas ref={canvasRef} />
+    </div>
+  );
+}
diff --git a/src/app/economic-indicators/canvas/overlay-types.ts b/src/app/economic-indicators/canvas/overlay-types.ts
new file mode 100644
index 0000000..4071cb7
--- /dev/null
+++ b/src/app/economic-indicators/canvas/overlay-types.ts
@@ -0,0 +1,10 @@
+import type { EconomySeriesPoint } from "@/lib/api/economy";
+
+export type OverlayMode = "indexed" | "raw";
+
+export type OverlaySeries = {
+  label: string;
+  color: string;
+  unitSymbol: string;
+  points: EconomySeriesPoint[];
+};
diff --git a/src/app/economic-indicators/canvas/page.tsx b/src/app/economic-indicators/canvas/page.tsx
new file mode 100644
index 0000000..e300c41
--- /dev/null
+++ b/src/app/economic-indicators/canvas/page.tsx
@@ -0,0 +1,53 @@
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import Link from "next/link";
+import { PageHeader } from "@/components/ui/page-header";
+import CanvasClient from "./CanvasClient";
+
+const DESCRIPTION =
+  "Overlay up to three economic indicator series and eyeball how they move together.";
+
+export const metadata: Metadata = {
+  title: "Indicator Canvas",
+  description: DESCRIPTION,
+  alternates: { canonical: "/economic-indicators/canvas" },
+  openGraph: {
+    title: "Indicator Canvas",
+    description: DESCRIPTION,
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Indicator Canvas",
+  },
+};
+
+export default function CanvasPage() {
+  return (
+    <div className="mx-[10px] my-[10px] border border-border-light bg-bg overflow-x-clip">
+      <PageHeader
+        title="Indicator Canvas"
+        description="Pick up to three data feeds and overlay them to see how they move together."
+      />
+
+      <nav className="border-b border-border-light px-5 py-3">
+        <div className="max-w-[1080px] mx-auto">
+          <Link
+            href="/economic-indicators"
+            className="type-label text-dark/70 hover:text-dark underline-offset-4 hover:underline"
+          >
+            &larr; All economic indicators
+          </Link>
+        </div>
+      </nav>
+
+      <section className="px-5 py-12">
+        <div className="max-w-[1080px] mx-auto">
+          <Suspense>
+            <CanvasClient />
+          </Suspense>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/src/app/economic-indicators/indicators.ts b/src/app/economic-indicators/indicators.ts
new file mode 100644
index 0000000..a9c710f
--- /dev/null
+++ b/src/app/economic-indicators/indicators.ts
@@ -0,0 +1,419 @@
+// Shared catalog of the economic indicator measures served by york_factory's
+// /kpis/series endpoint — each section gets its own /economic-indicators/[section]
+// page and the canvas page uses the flat list as the feed picker.
+
+export type Indicator = {
+  slug: string;
+  heading: string;
+  blurb: string;
+  // Short line label used when the indicator appears in a combined chart.
+  chartLabel?: string;
+};
+// Reference line drawn on every chart in a section (including the combined
+// chart): a value compounding at annualRatePct per year through
+// (anchorYear, anchorValue).
+export type IndicatorBenchmark = {
+  label: string;
+  annualRatePct: number;
+  anchorYear: number;
+  anchorValue: number;
+};
+export type IndicatorSection = {
+  id: string;
+  title: string;
+  description: string;
+  // The section's most striking chart, previewed on the landing-page card.
+  featuredSlug: string;
+  // Renders one overlay chart of every indicator in the section above the
+  // individual charts. Only for sections whose indicators all share the
+  // same unit and frequency.
+  combined?: { heading: string; blurb: string };
+  benchmark?: IndicatorBenchmark;
+  indicators: Indicator[];
+};
+
+// auburn-600 — Canada renders in the same brand red on every chart,
+// matching the canvas feed palette. Pinned as a literal because the
+// auburn tokens get swapped in subsection themes (e.g. Toronto).
+export const CANADA_COLOR = "#c43e3e";
+
+// Neutral grey for benchmark reference lines (e.g. the 2% inflation target).
+export const BENCHMARK_COLOR = "#8c8880";
+
+export const SECTIONS: IndicatorSection[] = [
+  {
+    id: "economy",
+    title: "Overall Economy",
+    description:
+      "Is Canada's economy growing and producing enough to sustain rising living standards?",
+    featuredSlug: "gdp-per-capita-ppp",
+    indicators: [
+      {
+        slug: "gdp-monthly-canada",
+        heading: "Real GDP, monthly (Canada)",
+        blurb:
+          "Statistics Canada's monthly real GDP, all industries, in chained 2017 dollars. Canada's output pulse with only a ~60-day lag, where the international series below run a year or more behind.",
+      },
+      {
+        slug: "gdp-per-capita-ppp",
+        heading: "GDP per capita vs. other countries",
+        blurb:
+          "Output per person, adjusted for purchasing power. The clearest single measure of how living standards in Canada compare with peer economies.",
+      },
+      {
+        slug: "gdp-growth-annual",
+        heading: "GDP growth",
+        blurb:
+          "Annual growth in real gross domestic product. Sustained growth is what compounds into higher incomes over a generation.",
+      },
+      {
+        slug: "inflation-cpi-annual",
+        heading: "Inflation",
+        blurb:
+          "Annual change in consumer prices. Inflation quietly erodes wages and savings — price stability is the foundation everything else is built on.",
+      },
+      {
+        slug: "trade-balance-pct-gdp",
+        heading: "Trade balance",
+        blurb:
+          "External balance on goods and services as a share of GDP. Shows whether Canada sells more to the world than it buys.",
+      },
+      {
+        slug: "labour-productivity-gdp-per-hour",
+        heading: "Labour productivity",
+        blurb:
+          "GDP per hour worked. Productivity growth is the engine of rising wages — and where Canada has fallen furthest behind.",
+      },
+    ],
+  },
+  {
+    id: "cost-of-living",
+    title: "Cost of Living",
+    description:
+      "What Canadians actually pay for the essentials — monthly consumer prices for food, shelter, and getting around (2002 = 100).",
+    featuredSlug: "cpi-all-items",
+    combined: {
+      heading: "The essentials, side by side",
+      blurb:
+        "Every cost-of-living component on one chart, indexed to 2002 = 100. The grey line is where prices would sit had they grown at the Bank of Canada's 2% inflation target — everything above it has outrun the target.",
+    },
+    // Bank of Canada inflation-control target (2% midpoint), compounded
+    // through the CPI's 2002 = 100 index base.
+    benchmark: {
+      label: "2% target",
+      annualRatePct: 2,
+      anchorYear: 2002,
+      anchorValue: 100,
+    },
+    indicators: [
+      {
+        slug: "cpi-all-items",
+        heading: "CPI, all items",
+        chartLabel: "All items",
+        blurb:
+          "The all-items Consumer Price Index, month by month. The headline measure of what a basket of everyday goods and services costs in Canada.",
+      },
+      {
+        slug: "cpi-food",
+        heading: "Food prices",
+        chartLabel: "Food",
+        blurb:
+          "Consumer prices for food, at the store and in restaurants. The cost increase families feel most immediately and most often.",
+      },
+      {
+        slug: "cpi-shelter",
+        heading: "Shelter costs",
+        chartLabel: "Shelter",
+        blurb:
+          "The full cost of keeping a roof overhead — rent, mortgage interest, utilities, taxes, and upkeep. The largest single item in most household budgets.",
+      },
+      {
+        slug: "cpi-rent",
+        heading: "Rent",
+        blurb:
+          "Rented accommodation alone, separated from the broader shelter index. What the third of Canadian households who rent are actually paying.",
+      },
+      {
+        slug: "cpi-clothing-footwear",
+        heading: "Clothing and footwear",
+        chartLabel: "Clothing",
+        blurb:
+          "Consumer prices for clothing and footwear — one of the few essentials where globalized supply chains have held prices nearly flat for decades.",
+      },
+      {
+        slug: "cpi-transportation",
+        heading: "Transportation",
+        blurb:
+          "The cost of getting around — vehicles, fuel, insurance, maintenance, and transit fares combined.",
+      },
+      {
+        slug: "cpi-gasoline",
+        heading: "Gasoline",
+        blurb:
+          "Pump prices, month by month. The most volatile line in the index, and a swing factor in everything that moves by truck.",
+      },
+      {
+        slug: "cpi-energy",
+        heading: "Energy",
+        blurb:
+          "Household energy overall — gasoline, natural gas, electricity, and heating fuel. What it costs to heat a home and power a life in a cold country.",
+      },
+    ],
+  },
+  {
+    id: "welfare",
+    title: "Individual Economics & Welfare",
+    description:
+      "Does prosperity reach everyday Canadians — in wages, work, and the distribution of income?",
+    featuredSlug: "household-debt-to-income",
+    indicators: [
+      {
+        slug: "employment-rate",
+        heading: "Employment rate",
+        blurb:
+          "Share of the population aged 15 and over that is employed. The broadest gauge of whether people who could work, do.",
+      },
+      {
+        slug: "real-minimum-wage-ppp",
+        heading: "Real minimum wage",
+        blurb:
+          "Statutory hourly minimum wage at constant prices, in purchasing-power dollars. Italy has no statutory minimum wage, so no G7 average is shown.",
+      },
+      {
+        slug: "average-annual-hours-worked",
+        heading: "Hours worked",
+        blurb:
+          "Average annual hours actually worked per worker. Working more hours for the same income is not prosperity.",
+      },
+      {
+        slug: "household-debt-to-income",
+        heading: "Household debt",
+        blurb:
+          "Household debt as a share of net disposable income. Canadian households carry among the heaviest debt loads in the G7.",
+      },
+      {
+        slug: "gini-index",
+        heading: "Income inequality (Gini index)",
+        blurb:
+          "Gini index of income inequality on a 0–100 scale, where 0 is perfect equality. World Bank estimates, internationally comparable.",
+      },
+      {
+        slug: "gini-after-tax-canada",
+        heading: "Income inequality after tax (Canada)",
+        blurb:
+          "Statistics Canada's official Gini coefficient of adjusted after-tax income — a longer and more current Canada-only series.",
+      },
+      {
+        slug: "bottom-quintile-income-share",
+        heading: "Bottom-quintile income share",
+        blurb:
+          "Share of income that accrues to the poorest 20%. A direct check on whether growth reaches the bottom of the distribution.",
+      },
+      {
+        slug: "age-dependency-ratio",
+        heading: "Age dependency ratio",
+        blurb:
+          "Dependents (under 15 or over 64) per 100 working-age people. A rising ratio means fewer workers supporting more people.",
+      },
+      {
+        slug: "low-income-entry-rate",
+        heading: "Low income entry rate",
+        blurb:
+          "Share of Canadian tax filers not in low income who fell into it the following year. Measures how many people poverty pulls in.",
+      },
+      {
+        slug: "low-income-exit-rate",
+        heading: "Low income exit rate",
+        blurb:
+          "Share of Canadian tax filers in low income who escaped it the following year. Measures how quickly people get back out.",
+      },
+    ],
+  },
+  {
+    id: "wellbeing",
+    title: "Happiness & Wellbeing",
+    description:
+      "Are Canadians satisfied with their lives — and confident enough in the future to build one here?",
+    featuredSlug: "life-satisfaction",
+    indicators: [
+      {
+        slug: "life-satisfaction",
+        heading: "Life satisfaction",
+        blurb:
+          "Average self-reported life evaluation on the 0–10 Cantril ladder — the score the World Happiness Report ranks countries by.",
+      },
+      {
+        slug: "fertility-rate",
+        heading: "Fertility rate",
+        blurb:
+          "Births per woman. A blunt but honest proxy for whether people feel confident enough in the future to start families.",
+      },
+    ],
+  },
+  {
+    id: "safety",
+    title: "Crime & Public Safety",
+    description: "Is Canada getting safer or more dangerous?",
+    featuredSlug: "crime-severity-index",
+    indicators: [
+      {
+        slug: "crime-severity-index",
+        heading: "Crime Severity Index",
+        blurb:
+          "Statistics Canada's headline crime measure, weighting offences by seriousness (2006 = 100).",
+      },
+      {
+        slug: "police-reported-crime-rate",
+        heading: "Police-reported crime rate",
+        blurb:
+          "Criminal Code incidents (excluding traffic) per 100,000 Canadians.",
+      },
+      {
+        slug: "homicide-rate",
+        heading: "Homicide rate",
+        blurb:
+          "Intentional homicides per 100,000 people — the crime statistic least affected by reporting differences across countries.",
+      },
+    ],
+  },
+  {
+    id: "governance",
+    title: "Governance & Transparency",
+    description:
+      "Is Canada's government clean, capable, and accountable by international standards?",
+    featuredSlug: "corruption-perceptions-index",
+    indicators: [
+      {
+        slug: "corruption-perceptions-index",
+        heading: "Corruption perceptions",
+        blurb:
+          "Transparency International's index from 0 (highly corrupt) to 100 (very clean). Comparable since 2012.",
+      },
+      {
+        slug: "government-effectiveness",
+        heading: "Government effectiveness",
+        blurb:
+          "World Governance Indicators estimate of public service quality and policy execution, from −2.5 (weak) to 2.5 (strong).",
+      },
+    ],
+  },
+  {
+    id: "infrastructure",
+    title: "Infrastructure & Industry",
+    description:
+      "Is Canada investing in the physical and technological capacity to compete?",
+    featuredSlug: "rd-spending-pct-gdp",
+    indicators: [
+      {
+        slug: "rd-spending-pct-gdp",
+        heading: "R&D spending",
+        blurb:
+          "Gross domestic expenditure on research and development as a share of GDP.",
+      },
+      {
+        slug: "manufacturing-value-added-pct-gdp",
+        heading: "Manufacturing value added",
+        blurb: "Manufacturing's contribution to GDP.",
+      },
+      {
+        slug: "fixed-broadband-subscriptions",
+        heading: "Broadband penetration",
+        blurb: "Fixed broadband subscriptions per 100 people.",
+      },
+      {
+        slug: "rail-freight-tonne-km",
+        heading: "Rail freight",
+        blurb:
+          "Goods moved by rail, in million ton-kilometres. A physical-economy pulse check.",
+      },
+    ],
+  },
+  {
+    id: "international",
+    title: "International Relations",
+    description: "Does Canada pull its weight in the world?",
+    featuredSlug: "oda-pct-gni",
+    indicators: [
+      {
+        slug: "oda-pct-gni",
+        heading: "Development assistance",
+        blurb:
+          "Official development assistance as a share of gross national income, against the UN's 0.7% target.",
+      },
+    ],
+  },
+  {
+    id: "environment",
+    title: "Environment",
+    description:
+      "Is Canada cutting emissions and protecting land while the economy grows? Overlay CO₂ with GDP on the canvas to see decoupling.",
+    featuredSlug: "co2-emissions-per-capita",
+    indicators: [
+      {
+        slug: "co2-emissions-per-capita",
+        heading: "CO₂ emissions per capita",
+        blurb:
+          "Production-based carbon emissions per person, in tonnes per year.",
+      },
+      {
+        slug: "air-pollution-pm25",
+        heading: "Air quality (PM2.5)",
+        blurb:
+          "Population-weighted exposure to fine particulate matter. The WHO guideline is 5 µg/m³.",
+      },
+      {
+        slug: "protected-areas-pct",
+        heading: "Protected areas",
+        blurb: "Terrestrial protected areas as a share of total land.",
+      },
+      {
+        slug: "forest-area-pct",
+        heading: "Forest coverage",
+        blurb: "Forested land as a share of total land area.",
+      },
+    ],
+  },
+  {
+    id: "housing",
+    title: "Housing",
+    description:
+      "Can Canadians afford a home — and is the country building enough of them?",
+    featuredSlug: "real-house-price-index",
+    indicators: [
+      {
+        slug: "house-price-to-income",
+        heading: "House price to income",
+        blurb:
+          "House prices relative to disposable income per person, shown against each country's long-term average (100). The OECD's headline affordability indicator.",
+      },
+      {
+        slug: "real-house-price-index",
+        heading: "Real house prices",
+        blurb:
+          "House prices adjusted for inflation, indexed to 2015. Shows how far prices have outrun the general cost of living.",
+      },
+      {
+        slug: "housing-starts-canada",
+        heading: "Housing starts",
+        blurb:
+          "Dwelling units started per year across Canada, from CMHC's starts and completions survey. The supply side of the housing equation.",
+      },
+      {
+        slug: "rental-vacancy-rate-canada",
+        heading: "Rental vacancy rate",
+        blurb:
+          "Vacancy rate in purpose-built rental apartments across census metropolitan areas. A healthy rental market sits near 3%.",
+      },
+    ],
+  },
+];
+
+export const ALL_INDICATORS: Indicator[] = SECTIONS.flatMap(
+  (s) => s.indicators,
+);
+
+export const MEASURE_SLUGS = new Set(ALL_INDICATORS.map((i) => i.slug));
+
+export function indicatorHeading(slug: string): string {
+  return ALL_INDICATORS.find((i) => i.slug === slug)?.heading ?? slug;
+}
diff --git a/src/app/economic-indicators/page.tsx b/src/app/economic-indicators/page.tsx
new file mode 100644
index 0000000..1ea42cd
--- /dev/null
+++ b/src/app/economic-indicators/page.tsx
@@ -0,0 +1,164 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { getSiteConfig } from "@/lib/api";
+import { getEconomicSeries } from "@/lib/api/economy";
+import { PageHeader } from "@/components/ui/page-header";
+import { buildGraph } from "@/lib/schemas/graph";
+import { generateOrganizationSchema } from "@/lib/schemas/generators/organization";
+import { generateBreadcrumbSchema } from "@/lib/schemas/generators/breadcrumb";
+import SectionNav from "./SectionNav";
+import SectionSparkline from "./SectionSparkline";
+import { SECTIONS } from "./indicators";
+
+const DESCRIPTION =
+  "Are we moving in the right direction? Canada's growth, incomes, housing, safety, and wellbeing, measured against the G7 and OECD.";
+
+export const metadata: Metadata = {
+  title: "Economic Indicators",
+  description: DESCRIPTION,
+  alternates: { canonical: "/economic-indicators" },
+  openGraph: {
+    title: "Economic Indicators",
+    description: DESCRIPTION,
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Economic Indicators",
+  },
+};
+
+export default async function EconomicIndicatorsPage() {
+  const configData = getSiteConfig();
+
+  const featuredSeries = await Promise.all(
+    SECTIONS.map((section) =>
+      getEconomicSeries(section.featuredSlug).catch(() => null),
+    ),
+  );
+
+  const jsonLd = buildGraph(
+    generateOrganizationSchema(configData),
+    generateBreadcrumbSchema(
+      "/economic-indicators",
+      "Economic Indicators",
+      configData.siteUrl,
+    ),
+  );
+
+  return (
+    <div className="mx-[10px] my-[10px] border border-border-light bg-bg overflow-x-clip">
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
+      <PageHeader
+        title="Economic Indicators"
+        description="Are we moving in the right direction? Canadian prosperity, measured."
+      />
+
+      <SectionNav />
+
+      <section className="px-5 py-12">
+        <div className="max-w-[1080px] mx-auto">
+          <div className="mb-10 max-w-[720px] space-y-4">
+            <p className="type-body text-dark/80">
+              <strong className="text-dark">
+                Canada should be the most prosperous country in the world.
+              </strong>{" "}
+              The question
+              is whether we are turning those advantages into better lives —
+              and that is measurable.
+            </p>
+            <p className="type-body text-dark/80">
+              Prosperity is more than a growing GDP. It&rsquo;s paycheques
+              that buy more each year, homes people can afford, streets that
+              are safe, air that is clean, institutions worth trusting, and
+              lives people are satisfied with, confident enough in the
+              future to build one here. That is what these charts measure.
+            </p>
+            <p className="type-body text-dark/80">
+              Where the world offers a yardstick, Canada is the red line
+              against its G7 and OECD peers. Where the question is ours alone, how many homes we start, how fast people climb out of low income, we measure Canada against its own record. Every chart
+              asks the same question: are we moving in the right direction?
+            </p>
+          </div>
+
+          <div className="grid gap-5 sm:grid-cols-2">
+            {SECTIONS.map((section, i) => {
+              const preview = featuredSeries[i];
+              const featuredHeading = section.indicators.find(
+                (indicator) => indicator.slug === section.featuredSlug,
+              )?.heading;
+              return (
+                <Link
+                  key={section.id}
+                  href={`/economic-indicators/${section.id}`}
+                  className="group flex flex-col border border-border-light p-6 hover:border-dark transition-colors"
+                >
+                  <h2 className="type-h4 text-dark group-hover:underline underline-offset-4">
+                    {section.title}
+                  </h2>
+                  <p className="mt-2 type-body-sm text-dark/70">
+                    {section.description}
+                  </p>
+                  {preview && (
+                    <div className="mt-5">
+                      <p className="type-label-sm text-dark/50">
+                        {featuredHeading}
+                      </p>
+                      <div className="mt-2">
+                        <SectionSparkline response={preview} />
+                      </div>
+                    </div>
+                  )}
+                  <p className="mt-4 type-label-sm text-dark/50">
+                    {section.indicators.map((i) => i.heading).join(" · ")}
+                  </p>
+                  <span className="mt-auto pt-4 type-label text-dark/70 group-hover:text-dark">
+                    View {section.indicators.length}{" "}
+                    {section.indicators.length === 1 ? "chart" : "charts"}{" "}
+                    &rarr;
+                  </span>
+                </Link>
+              );
+            })}
+
+            <Link
+              href="/economic-indicators/canvas"
+              className="group flex flex-col border border-border-light p-6 hover:border-dark transition-colors"
+            >
+              <h2 className="type-h4 text-dark group-hover:underline underline-offset-4">
+                Indicator Canvas
+              </h2>
+              <p className="mt-2 type-body-sm text-dark/70">
+                Overlay up to three indicator series and eyeball how they move
+                together.
+              </p>
+              <span className="mt-auto pt-4 type-label text-dark/70 group-hover:text-dark">
+                Open the canvas &rarr;
+              </span>
+            </Link>
+          </div>
+
+          <div className="mt-16 border-t border-border-light pt-12 text-center">
+            <h2 className="type-h3 text-dark">
+              Missing a measure that matters?
+            </h2>
+            <p className="mt-2 type-body text-dark/70 max-w-[560px] mx-auto">
+              We&rsquo;re expanding this dashboard. If there&rsquo;s an
+              indicator that would sharpen the picture — for better or worse
+              — tell us and we&rsquo;ll track it.
+            </p>
+            <a
+              href="mailto:hi@buildcanada.com?subject=Economic%20indicators%20request"
+              className="mt-6 inline-block border border-dark px-5 py-2.5 type-label text-dark hover:bg-dark hover:text-bg transition-colors"
+            >
+              Email us
+            </a>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/src/app/economic-indicators/units.ts b/src/app/economic-indicators/units.ts
new file mode 100644
index 0000000..2d90acc
--- /dev/null
+++ b/src/app/economic-indicators/units.ts
@@ -0,0 +1,160 @@
+import type { EconomySeriesUnit } from "@/lib/api/economy";
+
+// Every presentation of a unit symbol lives in this one table — the Grapher
+// display config (indicator/section charts), the canvas axis title, and the
+// canvas tooltip formatter — so adding a unit means adding one row. The API's
+// unit object only carries identity (symbol/base_unit/scale); once
+// york_factory ships display config with it, this table goes away.
+
+type UnitDisplay = {
+  // Grapher display column config.
+  name: string;
+  shortUnit: string;
+  numDecimalPlaces: number;
+  conversionFactor?: number;
+  // Canvas (Chart.js) presentation.
+  axisLabel: string;
+  formatValue: (value: number) => string;
+};
+
+const int = (value: number) => Math.round(value).toLocaleString("en-CA");
+
+const UNIT_DISPLAY: Record<string, UnitDisplay> = {
+  "%": {
+    name: "%",
+    shortUnit: "%",
+    numDecimalPlaces: 1,
+    axisLabel: "%",
+    formatValue: (v) => `${v.toFixed(1)}%`,
+  },
+  intl_$: {
+    name: "international-$",
+    shortUnit: "$",
+    numDecimalPlaces: 0,
+    axisLabel: "international-$",
+    formatValue: (v) => `$${int(v)}`,
+  },
+  intl_$_per_hour: {
+    name: "international-$ per hour worked",
+    shortUnit: "$",
+    numDecimalPlaces: 1,
+    axisLabel: "international-$ / hour",
+    formatValue: (v) => `$${v.toFixed(2)}/h`,
+  },
+  // Values arrive in millions; convert to dollars so Grapher's magnitude
+  // abbreviations ("$2.4 trillion") come out true.
+  $M: {
+    name: "CAD",
+    shortUnit: "$",
+    numDecimalPlaces: 0,
+    conversionFactor: 1_000_000,
+    axisLabel: "million $",
+    formatValue: (v) => `$${int(v)}M`,
+  },
+  index: {
+    name: "index",
+    shortUnit: "",
+    numDecimalPlaces: 1,
+    axisLabel: "index",
+    formatValue: (v) => v.toFixed(1),
+  },
+  ratio: {
+    name: "ratio",
+    shortUnit: "",
+    numDecimalPlaces: 3,
+    axisLabel: "ratio",
+    formatValue: (v) => v.toFixed(3),
+  },
+  units: {
+    name: "dwelling units",
+    shortUnit: "",
+    numDecimalPlaces: 0,
+    axisLabel: "dwelling units",
+    formatValue: int,
+  },
+  hours: {
+    name: "hours per year",
+    shortUnit: "",
+    numDecimalPlaces: 0,
+    axisLabel: "hours / year",
+    formatValue: (v) => `${int(v)} h`,
+  },
+  score: {
+    name: "score",
+    shortUnit: "",
+    numDecimalPlaces: 2,
+    axisLabel: "score",
+    formatValue: (v) => v.toFixed(2),
+  },
+  births_per_woman: {
+    name: "births per woman",
+    shortUnit: "",
+    numDecimalPlaces: 2,
+    axisLabel: "births per woman",
+    formatValue: (v) => v.toFixed(2),
+  },
+  per_100_people: {
+    name: "per 100 people",
+    shortUnit: "",
+    numDecimalPlaces: 1,
+    axisLabel: "per 100 people",
+    formatValue: (v) => v.toFixed(1),
+  },
+  rate_per_100k: {
+    name: "per 100,000 people",
+    shortUnit: "",
+    numDecimalPlaces: 2,
+    axisLabel: "per 100,000",
+    formatValue: (v) => v.toFixed(1),
+  },
+  t_co2_per_capita: {
+    name: "tonnes of CO₂ per person",
+    shortUnit: "t",
+    numDecimalPlaces: 1,
+    axisLabel: "t CO₂ / person",
+    formatValue: (v) => v.toFixed(1),
+  },
+  ug_m3: {
+    name: "µg/m³",
+    shortUnit: "µg/m³",
+    numDecimalPlaces: 1,
+    axisLabel: "µg/m³",
+    formatValue: (v) => v.toFixed(1),
+  },
+  tonne_km_millions: {
+    name: "million ton-km",
+    shortUnit: "",
+    numDecimalPlaces: 0,
+    axisLabel: "million ton-km",
+    formatValue: int,
+  },
+};
+
+export function displayUnit(unit: EconomySeriesUnit): {
+  unit: string;
+  shortUnit: string;
+  numDecimalPlaces: number;
+  conversionFactor?: number;
+} {
+  const display = UNIT_DISPLAY[unit.symbol];
+  if (!display) {
+    return { unit: unit.base_unit, shortUnit: unit.symbol, numDecimalPlaces: 1 };
+  }
+  return {
+    unit: display.name,
+    shortUnit: display.shortUnit,
+    numDecimalPlaces: display.numDecimalPlaces,
+    ...(display.conversionFactor
+      ? { conversionFactor: display.conversionFactor }
+      : {}),
+  };
+}
+
+export function axisLabel(unitSymbol: string): string {
+  return UNIT_DISPLAY[unitSymbol]?.axisLabel ?? unitSymbol;
+}
+
+export function formatValue(value: number, unitSymbol: string): string {
+  const display = UNIT_DISPLAY[unitSymbol];
+  return display ? display.formatValue(value) : value.toLocaleString("en-CA");
+}
diff --git a/src/app/economic-indicators/useChartSize.ts b/src/app/economic-indicators/useChartSize.ts
new file mode 100644
index 0000000..41a376e
--- /dev/null
+++ b/src/app/economic-indicators/useChartSize.ts
@@ -0,0 +1,27 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+// Tracks the chart container's rendered width and derives clamped ~2:1
+// Grapher bounds from it. Shared by the single-indicator and combined
+// section charts.
+export function useChartSize() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [size, setSize] = useState({ width: 800, height: 480 });
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const measure = () => {
+      const w = Math.min(1040, Math.max(320, el.clientWidth - 16));
+      const h = Math.max(320, Math.min(460, Math.round(w * 0.5)));
+      setSize({ width: w, height: h });
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  return { containerRef, size };
+}
diff --git a/src/app/sitemap.ts b/src/app/sitemap.ts
index f6d8536..5245bb0 100644
--- a/src/app/sitemap.ts
+++ b/src/app/sitemap.ts
@@ -8,6 +8,7 @@ import type {
 import { getBillsFromCivicsProject } from "@/app/bills/server/get-all-bills-from-civics-project";
 import { getAllBillsFromDB } from "@/app/bills/server/get-all-bills-from-db";
 import { buildAbsoluteUrl } from "@/app/bills/utils/basePath";
+import { SECTIONS as ECONOMIC_SECTIONS } from "@/app/economic-indicators/indicators";
 
 function toValidDate(value?: Date | string): Date | undefined {
   if (!value) return undefined;
@@ -23,6 +24,14 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
     { url: `${baseUrl}/memos`, lastModified: new Date(), changeFrequency: "daily", priority: 0.9 },
     { url: `${baseUrl}/posts`, lastModified: new Date(), changeFrequency: "daily", priority: 0.8 },
     { url: `${baseUrl}/projects`, lastModified: new Date(), changeFrequency: "weekly", priority: 0.8 },
+    { url: `${baseUrl}/economic-indicators`, lastModified: new Date(), changeFrequency: "weekly", priority: 0.7 },
+    ...ECONOMIC_SECTIONS.map((section) => ({
+      url: `${baseUrl}/economic-indicators/${section.id}`,
+      lastModified: new Date(),
+      changeFrequency: "weekly" as const,
+      priority: 0.6,
+    })),
+    { url: `${baseUrl}/economic-indicators/canvas`, lastModified: new Date(), changeFrequency: "weekly", priority: 0.5 },
     { url: `${baseUrl}/tracker`, lastModified: new Date(), changeFrequency: "weekly", priority: 0.8 },
     { url: `${baseUrl}/tracker/commitments`, lastModified: new Date(), changeFrequency: "weekly", priority: 0.7 },
     { url: `${baseUrl}/tracker/faq`, lastModified: new Date(), changeFrequency: "monthly", priority: 0.4 },
diff --git a/src/components/ScrollToTop.tsx b/src/components/ScrollToTop.tsx
index b3e00e2..01a74bd 100644
--- a/src/components/ScrollToTop.tsx
+++ b/src/components/ScrollToTop.tsx
@@ -7,6 +7,9 @@ export default function ScrollToTop() {
   const pathname = usePathname();
 
   useEffect(() => {
+    // A #hash means the visitor was deep-linked to an anchor — leave the
+    // browser's native jump alone.
+    if (window.location.hash) return;
     window.scrollTo(0, 0);
   }, [pathname]);
 
diff --git a/src/components/custom/signpost/config.ts b/src/components/custom/signpost/config.ts
index de0ff08..36edb6c 100644
--- a/src/components/custom/signpost/config.ts
+++ b/src/components/custom/signpost/config.ts
@@ -13,6 +13,13 @@ export interface SignpostProps {
   headings: Heading[];
   shareTitle?: string;
   shareUrl?: string;
+  // Pages with an extra sticky bar below the global navbar (e.g. the
+  // economic-indicators section nav) push the rail and scroll target down,
+  // and may already have their own narrow-screen navigation.
+  desktopTopClass?: string;
+  scrollOffset?: number;
+  showMobileBar?: boolean;
+  showTopBorder?: boolean;
 }
 
 export const COL = 24;
diff --git a/src/components/custom/signpost/desktop-nav.tsx b/src/components/custom/signpost/desktop-nav.tsx
index d109ed2..e2e860b 100644
--- a/src/components/custom/signpost/desktop-nav.tsx
+++ b/src/components/custom/signpost/desktop-nav.tsx
@@ -8,8 +8,15 @@ import { Indicator } from "./progress-tracker";
 import { TocTree } from "./toc-tree";
 import { ShareButtons } from "@/components/share/ui/ShareButtons";
 
-export function DesktopNav() {
-  const { activeId, activeParentId, navigateTo, shareTitle, shareUrl } = useSignpost();
+export function DesktopNav({
+  topClass = "top-[90px]",
+  showTopBorder = true,
+}: {
+  topClass?: string;
+  showTopBorder?: boolean;
+}) {
+  const { activeId, activeParentId, navigateTo, shareTitle, shareUrl } =
+    useSignpost();
   const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -22,7 +29,8 @@ export function DesktopNav() {
       }
       const dot = container.querySelector(`[data-dot="${activeId}"]`);
       if (!dot) return;
-      const h = (dot as HTMLElement).offsetTop + (dot as HTMLElement).offsetHeight / 2;
+      const h =
+        (dot as HTMLElement).offsetTop + (dot as HTMLElement).offsetHeight / 2;
       container.style.setProperty("--progress-height", `${h}px`);
     };
     measure();
@@ -38,20 +46,21 @@ export function DesktopNav() {
 
   return (
     <nav className="hidden 2xl-memo:block" aria-label="Table of contents">
-      <div className="sticky top-[90px] border-accent border-t-[2px] overflow-x-hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+      <div
+        className={`sticky ${topClass} ${showTopBorder ? "border-accent border-t-[2px] " : ""}overflow-x-hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden`}
+      >
         {shareTitle && shareUrl && (
           <div className="pb-4 mb-4 border-b border-border-light">
-            <span className="type-label text-text-secondary block mb-3">Share</span>
+            <span className="type-label text-text-secondary block mb-3">
+              Share
+            </span>
             <ShareButtons title={shareTitle} url={shareUrl} />
           </div>
         )}
         <div className="relative" ref={containerRef}>
           <Track />
           <Indicator visible={!!activeId} />
-          <TocTree
-            showChildren={showChildren}
-            onNavigate={navigateTo}
-          />
+          <TocTree showChildren={showChildren} onNavigate={navigateTo} />
         </div>
       </div>
     </nav>
diff --git a/src/components/custom/signpost/index.tsx b/src/components/custom/signpost/index.tsx
index 946d817..fecf54c 100644
--- a/src/components/custom/signpost/index.tsx
+++ b/src/components/custom/signpost/index.tsx
@@ -8,7 +8,15 @@ import { SignpostProvider } from "./store";
 import { MobileBar } from "./mobile-bar";
 import { DesktopNav } from "./desktop-nav";
 
-export function Signpost({ headings, shareTitle, shareUrl }: SignpostProps) {
+export function Signpost({
+  headings,
+  shareTitle,
+  shareUrl,
+  desktopTopClass,
+  scrollOffset = 120,
+  showMobileBar = true,
+  showTopBorder,
+}: SignpostProps) {
   const activeId = useScrollSpy(headings);
   const progress = useReadingProgress();
   const tree = useBuildTree(headings);
@@ -22,14 +30,21 @@ export function Signpost({ headings, shareTitle, shareUrl }: SignpostProps) {
     return new Set(headings.slice(0, idx + 1).map((h) => h.id));
   }, [activeId, headings]);
 
-  const navigateTo = useCallback((id: string) => {
-    const el = document.getElementById(id);
-    if (!el) return;
-    const y = el.getBoundingClientRect().top + window.scrollY - 120;
-    window.scrollTo({ top: y, behavior: "smooth" });
-  }, []);
+  const navigateTo = useCallback(
+    (id: string) => {
+      const el = document.getElementById(id);
+      if (!el) return;
+      const y = el.getBoundingClientRect().top + window.scrollY - scrollOffset;
+      window.scrollTo({ top: y, behavior: "smooth" });
+      // Reflect the target in the URL so the reader can share a deep link,
+      // without triggering the browser's own hash jump.
+      history.replaceState(null, "", `#${id}`);
+    },
+    [scrollOffset],
+  );
 
-  if (headings.length === 0) return <div className="hidden 2xl-memo:block" aria-hidden="true" />;
+  if (headings.length === 0)
+    return <div className="hidden 2xl-memo:block" aria-hidden="true" />;
 
   return (
     <SignpostProvider
@@ -46,8 +61,8 @@ export function Signpost({ headings, shareTitle, shareUrl }: SignpostProps) {
         shareUrl,
       }}
     >
-      <MobileBar />
-      <DesktopNav />
+      {showMobileBar && <MobileBar />}
+      <DesktopNav topClass={desktopTopClass} showTopBorder={showTopBorder} />
     </SignpostProvider>
   );
 }
diff --git a/src/lib/api/economy.ts b/src/lib/api/economy.ts
new file mode 100644
index 0000000..4cb49dc
--- /dev/null
+++ b/src/lib/api/economy.ts
@@ -0,0 +1,133 @@
+import { apiFetch } from "./client";
+
+export interface EconomySeriesUnit {
+  id: number;
+  symbol: string;
+  kind: "absolute" | "rate" | "ratio" | string;
+  base_unit: string;
+  scale: number | null;
+  currency_code: string | null;
+  denominator_unit: string | null;
+  denominator_scale: number | null;
+}
+
+export interface EconomySeriesMeasure {
+  slug: string;
+  name: string;
+  description: string | null;
+  category: string;
+  frequency: string;
+  higher_is_bad: boolean;
+  unit: EconomySeriesUnit;
+}
+
+export interface EconomySeriesJurisdiction {
+  slug: string;
+  code: string;
+  name: string;
+  level: string;
+}
+
+// The API serves annual points as { year, value } and monthly points
+// (measure.frequency === "monthly") as { date, value }. getEconomicSeries
+// normalizes both to a numeric `year` time axis — fractional for monthly
+// (year + monthIndex / 12) — so charts keep a single numeric x dimension,
+// with the ISO first-of-month date preserved for date formatting.
+export interface EconomySeriesPoint {
+  year: number;
+  date?: string;
+  value: number;
+}
+
+interface RawSeriesPoint {
+  year?: number;
+  date?: string;
+  value: number;
+}
+
+export interface EconomySeries {
+  jurisdiction: EconomySeriesJurisdiction;
+  computed: boolean;
+  points: EconomySeriesPoint[];
+}
+
+export interface EconomySeriesSource {
+  name: string;
+  url: string | null;
+  last_fetched_at: string | null;
+}
+
+export interface EconomySeriesResponse {
+  data: {
+    measure: EconomySeriesMeasure;
+    series: EconomySeries[];
+  };
+  meta: {
+    source: EconomySeriesSource | null;
+    year_range: [number, number] | [];
+  };
+}
+
+// The API reports source names as internal pipeline identifiers
+// (e.g. "econ_worldbank_gdp_growth"); map them to public attributions.
+const SOURCE_NAMES: Record<string, string> = {
+  econ_oecd_labour_productivity: "OECD Productivity Database",
+  econ_oecd_real_minimum_wage: "OECD Earnings Database",
+  econ_oecd_hours_worked: "OECD Employment Database",
+  econ_oecd_household_debt: "OECD National Accounts at a Glance",
+  econ_oecd_house_price_to_income: "OECD Analytical House Prices Database",
+  econ_oecd_real_house_prices: "OECD Analytical House Prices Database",
+  econ_statcan_gini_after_tax: "Statistics Canada (table 11-10-0134)",
+  econ_statcan_low_income_dynamics: "Statistics Canada (table 11-10-0024)",
+  econ_statcan_housing_starts: "CMHC via Statistics Canada (table 34-10-0126)",
+  econ_statcan_rental_vacancy: "CMHC via Statistics Canada (table 34-10-0127)",
+  econ_statcan_crime_severity: "Statistics Canada (table 35-10-0026)",
+  econ_statcan_crime_rate: "Statistics Canada (table 35-10-0177)",
+  econ_statcan_cpi_essentials: "Statistics Canada (table 18-10-0004)",
+  econ_statcan_gdp_monthly: "Statistics Canada (table 36-10-0434)",
+  econ_oecd_oda: "OECD DAC1",
+  econ_owid_life_satisfaction: "World Happiness Report via Our World in Data",
+  econ_owid_homicide_rate: "UNODC via Our World in Data",
+  econ_owid_corruption_perceptions:
+    "Transparency International via Our World in Data",
+  econ_owid_co2_per_capita: "Global Carbon Budget via Our World in Data",
+};
+
+export function humanizeSourceName(name: string): string {
+  if (SOURCE_NAMES[name]) return SOURCE_NAMES[name];
+  if (name.startsWith("econ_worldbank"))
+    return "World Bank, World Development Indicators";
+  if (name.startsWith("econ_oecd")) return "OECD";
+  if (name.startsWith("econ_statcan")) return "Statistics Canada";
+  return name;
+}
+
+// Annual data refreshed at most weekly; matches the API's Cache-Control max-age.
+const REVALIDATE = 3600;
+
+function normalizePoint(point: RawSeriesPoint): EconomySeriesPoint {
+  if (point.date) {
+    const [year, month] = point.date.split("-").map(Number);
+    return { year: year + (month - 1) / 12, date: point.date, value: point.value };
+  }
+  return { year: point.year ?? 0, value: point.value };
+}
+
+export async function getEconomicSeries(
+  measure: string,
+): Promise<EconomySeriesResponse> {
+  const response = await apiFetch<EconomySeriesResponse>("/kpis/series", {
+    revalidate: REVALIDATE,
+    params: { measure },
+  });
+  return {
+    ...response,
+    data: {
+      ...response.data,
+      series: response.data.series.map((s) => ({
+        ...s,
+        points: (s.points as RawSeriesPoint[]).map(normalizePoint),
+      })),
+    },
+  };
+}
diff --git a/src/lib/schemas/generators/breadcrumb.ts b/src/lib/schemas/generators/breadcrumb.ts
index 9ecb875..ef42646 100644
--- a/src/lib/schemas/generators/breadcrumb.ts
+++ b/src/lib/schemas/generators/breadcrumb.ts
@@ -3,6 +3,7 @@ const ROUTE_LABELS: Record<string, string> = {
   about: "About",
   projects: "Projects",
   content: "Content",
+  "economic-indicators": "Economic Indicators",
 };
 
 export function generateBreadcrumbSchema(