diff --git a/cli.ts b/cli.ts
index 9df0433..67a06d6 100644
--- a/cli.ts
+++ b/cli.ts
@@ -44,6 +44,7 @@ commands
   dispatch   open issues for an item's tasks (dry run; --apply to create)
   build      write roadmap.public.json / roadmap.internal.json (+ --site)
   serve      loopback dev server for the internal view (--static <dir> to serve a build)
+             /harness inspects every view mode at any width, locale and ground
   mcp        read-only MCP server on stdio
 
 flags
@@ -647,6 +648,7 @@ async function cmdServe(args: Args): Promise<number> {
   console.log(
     `${green("nextup serve")} ${url} ${dim(str(args, "static") ? `(static ${str(args, "static")})` : "(internal view, live)")}`
   );
+  if (!str(args, "static")) console.log(dim(`  harness  ${url}/harness`));
   await new Promise(() => {
     // run until killed
   });
diff --git a/harness.test.ts b/harness.test.ts
new file mode 100644
index 0000000..5fefcef
--- /dev/null
+++ b/harness.test.ts
@@ -0,0 +1,125 @@
+import { describe, expect, it } from "vitest";
+import {
+  DEVICES,
+  type HarnessState,
+  harnessFrameQuery,
+  type LoadedSkin,
+  NO_SKIN,
+  parseHarnessState,
+  renderHarnessFrame,
+  renderHarnessPage,
+  VIEW_MODES,
+} from "./harness";
+
+const solo = { id: "lexilink", title: "lexilink", locales: ["de", "en"] };
+const projects = [solo, { id: "other", title: "Other", locales: ["en"] }];
+const skins = [{ id: "lexilink", label: "lexilink" }];
+const parse = (q: string) => parseHarnessState(new URLSearchParams(q), { projects, skins });
+const page = (state: HarnessState) => renderHarnessPage({ projects, skins, state });
+
+describe("parseHarnessState", () => {
+  it("defaults to the first project, the ledger view and its first locale", () => {
+    const s = parse("");
+    expect(s.project).toBe("lexilink");
+    expect(s.view).toBe("ledger");
+    expect(s.locale).toBe("de");
+    expect(s.audience).toBe("internal");
+    expect(s.theme).toBe("light");
+    // A declared skin wins the default; the package look stays selectable.
+    expect(s.skin).toBe("lexilink");
+    expect(parseHarnessState(new URLSearchParams(""), { projects }).skin).toBe(NO_SKIN);
+  });
+  it("falls back rather than trusting the query string", () => {
+    // An unknown mode must not reach renderRoadmapHTML as a class name.
+    expect(parse("view=../../etc/passwd").view).toBe("ledger");
+    expect(parse("device=nonsense").device).toBe("laptop");
+    expect(parse("theme=neon").theme).toBe("light");
+    // An undeclared skin must not reach the file reader.
+    expect(parse("skin=../../etc/passwd").skin).toBe("lexilink");
+    expect(parse("skin=nextup").skin).toBe(NO_SKIN);
+    expect(parse("skin=lexilink").skin).toBe("lexilink");
+    // A locale the project does not declare falls back to its first.
+    expect(parse("project=other&locale=de").locale).toBe("en");
+    expect(parse("project=ghost").project).toBe("lexilink");
+  });
+  it("round-trips every axis it accepts", () => {
+    const s = parse(
+      "project=other&view=bands&locale=en&audience=public&device=phone&theme=dark&landscape=1&skin=lexilink"
+    );
+    expect(s).toEqual({
+      project: "other",
+      skin: "lexilink",
+      view: "bands",
+      locale: "en",
+      audience: "public",
+      device: "phone",
+      theme: "dark",
+      landscape: true,
+    } satisfies HarnessState);
+    expect(harnessFrameQuery(s)).toContain("view=bands");
+    expect(harnessFrameQuery(s)).toContain("theme=dark");
+  });
+});
+
+describe("renderHarnessPage", () => {
+  it("offers every view mode and device, and marks the current state", () => {
+    const html = page(parse("view=bands&device=phone"));
+    for (const m of VIEW_MODES) expect(html).toContain(`value="${m}"`);
+    for (const d of DEVICES) expect(html).toContain(`value="${d.id}"`);
+    expect(html).toContain('<option value="bands" selected>');
+    expect(html).toContain("/harness/frame?");
+    // The project picker is hidden when there is nothing to pick.
+    expect(renderHarnessPage({ projects: [solo], skins, state: parse("") })).not.toContain(
+      'name="project"'
+    );
+    // No skins declared, no skin picker.
+    expect(renderHarnessPage({ projects, skins: [], state: parse("") })).not.toContain(
+      'name="skin"'
+    );
+    expect(html).toContain('name="skin"');
+  });
+});
+
+describe("renderHarnessFrame", () => {
+  it("forces the ground with the attribute the stylesheet understands", () => {
+    const dark = renderHarnessFrame("<p>x</p>", "dark", "de");
+    expect(dark).toContain('data-nextup-theme="dark"');
+    expect(dark).toContain('lang="de"');
+    expect(dark).toContain("color-scheme: dark");
+    expect(renderHarnessFrame("<p>x</p>", "light", "en")).toContain('data-nextup-theme="light"');
+  });
+});
+
+describe("renderHarnessFrame with a skin", () => {
+  const skin: LoadedSkin = {
+    id: "lexilink",
+    label: "lexilink",
+    css: ".roadmap-ledger .nextup-roadmap { --nextup-accent: #f3821d; }",
+    wrapper: "roadmap-ledger",
+    dark: "dark",
+    links: ["https://fonts.googleapis.com/css2?family=Geist"],
+  };
+
+  it("wraps the roadmap, loads the host fonts, and puts the skin last", () => {
+    const html = renderHarnessFrame("<p>x</p>", "light", "de", skin);
+    expect(html).toContain('<div class="roadmap-ledger"><p>x</p></div>');
+    expect(html).toContain(
+      '<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist">'
+    );
+    // Last wins: the skin's mapping must override the package defaults.
+    expect(html.indexOf("--nextup-accent: #f3821d")).toBeGreaterThan(
+      html.indexOf(".nextup-roadmap {")
+    );
+  });
+
+  it("sets the host's dark class only on the dark ground", () => {
+    expect(renderHarnessFrame("<p>x</p>", "dark", "de", skin)).toContain('class="dark"');
+    expect(renderHarnessFrame("<p>x</p>", "light", "de", skin)).not.toContain('class="dark"');
+  });
+
+  it("renders unwrapped and unskinned when no skin is chosen", () => {
+    const html = renderHarnessFrame("<p>x</p>", "light", "de", null);
+    expect(html).toContain("<body><p>x</p></body>");
+    expect(html).not.toContain("roadmap-ledger");
+  });
+});
diff --git a/harness.ts b/harness.ts
new file mode 100644
index 0000000..3148e36
--- /dev/null
+++ b/harness.ts
@@ -0,0 +1,242 @@
+/**
+ * `nextup serve` → `/harness` — the inspection surface for the views.
+ *
+ * A roadmap has to survive more than one shape: five view modes, every locale
+ * the file declares, both audiences, a phone and a desktop, and both grounds.
+ * That is a combinatorial space nobody checks by hand, so this renders one
+ * combination in an iframe and puts the axes in a toolbar above it. The state
+ * lives in the query string, which makes any single combination a link — the
+ * useful currency when the answer is "look at THIS one".
+ *
+ * Pure: HTML strings in and out, no DOM and no data loading (`serve.ts` owns
+ * both), so every axis can be asserted under node.
+ */
+
+import { esc, type ViewMode } from "./render-html";
+import { STYLES } from "./styles";
+
+export const VIEW_MODES: readonly ViewMode[] = [
+  "phases",
+  "list",
+  "compact",
+  "ledger",
+  "bands",
+] as const;
+
+export type Theme = "light" | "dark";
+export type Audience = "public" | "internal";
+
+export interface Device {
+  id: string;
+  label: string;
+  width: number;
+  /** null means "as tall as the viewport allows". */
+  height: number | null;
+}
+
+/** Widths that actually change a layout decision, not a catalogue of handsets. */
+export const DEVICES: readonly Device[] = [
+  { id: "phone", label: "Phone", width: 390, height: 844 },
+  { id: "phone-l", label: "Phone L", width: 430, height: 932 },
+  { id: "tablet", label: "Tablet", width: 768, height: 1024 },
+  { id: "laptop", label: "Laptop", width: 1280, height: null },
+  { id: "desktop", label: "Desktop", width: 1600, height: null },
+  { id: "fit", label: "Fit", width: 0, height: null },
+] as const;
+
+/** A skin as the harness needs it: the CSS already read off disk. */
+export interface LoadedSkin {
+  id: string;
+  label: string;
+  css: string;
+  wrapper: string | null;
+  dark: string | null;
+  links: string[];
+}
+
+export interface HarnessState {
+  project: string;
+  skin: string;
+  view: ViewMode;
+  locale: string;
+  audience: Audience;
+  device: string;
+  theme: Theme;
+  landscape: boolean;
+}
+
+export interface HarnessOptions {
+  projects: { id: string; title: string; locales: string[] }[];
+  /** Empty when no config declared any; the picker then offers only defaults. */
+  skins: { id: string; label: string }[];
+  state: HarnessState;
+}
+
+/** The package's own look, always offered so a skin can be compared against it. */
+export const NO_SKIN = "nextup";
+
+export function parseHarnessState(
+  params: URLSearchParams,
+  opts: { projects: HarnessOptions["projects"]; skins?: { id: string }[] }
+): HarnessState {
+  const first = opts.projects[0];
+  const project = params.get("project") ?? first?.id ?? "";
+  const known = opts.projects.find((p) => p.id === project) ?? first;
+  const view = params.get("view") as ViewMode | null;
+  const device = params.get("device") ?? "laptop";
+  const theme = params.get("theme");
+  const locale = params.get("locale");
+  // A declared skin is the point of previewing: default to the first one and
+  // let the package's own look be an explicit choice, not the thing you land on.
+  const skins = opts.skins ?? [];
+  const skin = params.get("skin") ?? skins[0]?.id ?? NO_SKIN;
+  return {
+    project: known?.id ?? "",
+    skin: skin === NO_SKIN || skins.some((x) => x.id === skin) ? skin : (skins[0]?.id ?? NO_SKIN),
+    view: view && VIEW_MODES.includes(view) ? view : "ledger",
+    locale: locale && known?.locales.includes(locale) ? locale : (known?.locales[0] ?? "en"),
+    audience: params.get("audience") === "public" ? "public" : "internal",
+    device: DEVICES.some((d) => d.id === device) ? device : "laptop",
+    theme: theme === "dark" ? "dark" : "light",
+    landscape: params.get("landscape") === "1",
+  };
+}
+
+export function harnessFrameQuery(s: HarnessState): string {
+  return new URLSearchParams({
+    project: s.project,
+    view: s.view,
+    locale: s.locale,
+    audience: s.audience,
+    theme: s.theme,
+    skin: s.skin,
+  }).toString();
+}
+
+/**
+ * The framed document: the roadmap and nothing else, so what the iframe
+ * measures is the component's own behaviour at that width rather than the
+ * harness chrome's.
+ */
+export function renderHarnessFrame(
+  body: string,
+  theme: Theme,
+  locale: string,
+  skin?: LoadedSkin | null
+): string {
+  // A host that scopes its tokens needs its wrapper, and one that toggles dark
+  // with a class needs that class — otherwise the skin renders half-applied and
+  // the preview lies in a way that is worse than showing the defaults.
+  const wrapped = skin?.wrapper ? `<div class="${esc(skin.wrapper)}">${body}</div>` : body;
+  const htmlClass = skin?.dark && theme === "dark" ? ` class="${esc(skin.dark)}"` : "";
+  const links = (skin?.links ?? []).map((u) => `<link rel="stylesheet" href="${esc(u)}">`).join("");
+  // The skin comes last so its variable mapping wins over the defaults above,
+  // including the forced-ground block, which is the point of a skin.
+  return `<!doctype html><html lang="${esc(locale)}" data-nextup-theme="${esc(theme)}"${htmlClass}><head><meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">${links}
+<style>
+${STYLES}
+html { color-scheme: ${theme}; }
+body { margin: 0; padding: 20px; background: ${theme === "dark" ? "#0d0d0d" : "#ffffff"};
+  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
+${skin ? `/* skin: ${skin.id} */\n${skin.css}` : ""}
+</style></head><body>${wrapped}</body></html>`;
+}
+
+function option(value: string, label: string, selected: string): string {
+  return `<option value="${esc(value)}"${value === selected ? " selected" : ""}>${esc(label)}</option>`;
+}
+
+export function renderHarnessPage(opts: HarnessOptions): string {
+  const { projects, skins, state } = opts;
+  const project = projects.find((p) => p.id === state.project);
+  const src = `/harness/frame?${harnessFrameQuery(state)}`;
+  const sel = (name: string, html: string, label: string) =>
+    `<label class="f"><span>${esc(label)}</span><select name="${esc(name)}">${html}</select></label>`;
+
+  return `<!doctype html><html lang="en"><head><meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>nextup harness · ${esc(project?.title ?? "")}</title><style>
+:root { color-scheme: light dark; --bg:#fbfbfb; --fg:#1a1a1a; --mut:#6b6b6b; --line:#e0e0e0; --chrome:#fff; }
+@media (prefers-color-scheme: dark) { :root { --bg:#151515; --fg:#ececec; --mut:#a0a0a0; --line:#303030; --chrome:#1d1d1d; } }
+* { box-sizing: border-box; }
+body { margin:0; background:var(--bg); color:var(--fg); font:13px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;
+  display:flex; flex-direction:column; height:100vh; }
+header { display:flex; flex-wrap:wrap; gap:14px 18px; align-items:flex-end; padding:10px 16px;
+  background:var(--chrome); border-bottom:1px solid var(--line); }
+.f { display:flex; flex-direction:column; gap:3px; }
+.f > span { font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:var(--mut); }
+select { font:inherit; padding:4px 6px; background:var(--chrome); color:var(--fg);
+  border:1px solid var(--line); border-radius:4px; min-width:104px; }
+.seg { display:flex; border:1px solid var(--line); border-radius:4px; overflow:hidden; }
+.seg a { padding:5px 10px; text-decoration:none; color:var(--fg); background:var(--chrome); font-size:12px; }
+.seg a + a { border-left:1px solid var(--line); }
+.seg a.on { background:var(--fg); color:var(--chrome); }
+.grow { flex:1; }
+.dims { font-variant-numeric:tabular-nums; color:var(--mut); white-space:nowrap; }
+.dims b { color:var(--fg); font-weight:600; }
+main { flex:1; overflow:auto; display:flex; justify-content:center; padding:18px; }
+.stage { background:var(--chrome); border:1px solid var(--line); border-radius:6px; overflow:hidden;
+  box-shadow:0 1px 3px rgba(0,0,0,.07); height:fit-content; }
+iframe { display:block; border:0; width:100%; height:100%; }
+noscript { color:var(--mut); }
+</style></head><body>
+<header>
+  <form id="ctl" class="f" style="flex-direction:row; gap:14px; align-items:flex-end; margin:0;">
+    ${projects.length > 1 ? sel("project", projects.map((p) => option(p.id, p.title, state.project)).join(""), "Project") : ""}
+    ${sel("view", VIEW_MODES.map((m) => option(m, m, state.view)).join(""), "View")}
+    ${sel("locale", (project?.locales ?? ["en"]).map((l) => option(l, l, state.locale)).join(""), "Locale")}
+    ${sel("audience", ["internal", "public"].map((a) => option(a, a, state.audience)).join(""), "Audience")}
+    ${sel("device", DEVICES.map((d) => option(d.id, d.width ? `${d.label} · ${d.width}` : d.label, state.device)).join(""), "Device")}
+    ${sel("theme", ["light", "dark"].map((t) => option(t, t, state.theme)).join(""), "Theme")}
+    ${skins.length > 0 ? sel("skin", [option(NO_SKIN, "nextup (default)", state.skin), ...skins.map((k) => option(k.id, k.label, state.skin))].join(""), "Skin") : ""}
+  </form>
+  <div class="f"><span>Orientation</span><div class="seg">
+    <a href="#" data-set="landscape=0" class="${state.landscape ? "" : "on"}">Portrait</a>
+    <a href="#" data-set="landscape=1" class="${state.landscape ? "on" : ""}">Landscape</a>
+  </div></div>
+  <div class="grow"></div>
+  <div class="dims"><b id="wh">—</b> · <a href="${esc(src)}" target="_blank" rel="noopener">open frame</a></div>
+</header>
+<main><div class="stage" id="stage"><iframe id="f" src="${esc(src)}" title="roadmap preview"></iframe></div></main>
+<script>
+const DEVICES = ${JSON.stringify(DEVICES)};
+const state = ${JSON.stringify(state)};
+function apply() {
+  const d = DEVICES.find((x) => x.id === state.device) || DEVICES[3];
+  const stage = document.getElementById("stage");
+  const main = document.querySelector("main");
+  const avail = main.clientHeight - 36;
+  let w = d.width, h = d.height;
+  if (state.landscape && d.height) { w = d.height; h = d.width; }
+  if (!d.width) { w = main.clientWidth - 36; h = avail; }
+  stage.style.width = w + "px";
+  stage.style.height = (h ? Math.min(h, avail) : avail) + "px";
+  document.getElementById("wh").textContent = w + " × " + stage.clientHeight;
+}
+function go(patch) {
+  const q = new URLSearchParams(location.search);
+  for (const [k, v] of Object.entries(patch)) q.set(k, v);
+  location.search = q.toString();
+}
+document.getElementById("ctl").addEventListener("change", (e) => {
+  go({ [e.target.name]: e.target.value });
+});
+for (const a of document.querySelectorAll("[data-set]")) {
+  a.addEventListener("click", (e) => {
+    e.preventDefault();
+    const [k, v] = a.dataset.set.split("=");
+    go({ [k]: v });
+  });
+}
+addEventListener("resize", apply);
+apply();
+// The server already streams reloads when a roadmap file changes; reload only
+// the frame, so the toolbar keeps its scroll position and focus.
+new EventSource("/events").addEventListener("reload", () => {
+  const f = document.getElementById("f");
+  f.src = f.src;
+});
+</script>
+</body></html>`;
+}
diff --git a/load.ts b/load.ts
index fea8dee..958960f 100644
--- a/load.ts
+++ b/load.ts
@@ -14,7 +14,7 @@ import path from "node:path";
 import YAML from "yaml";
 import type { z } from "zod";
 import { configSchema, estateSchema, roadmapSchema } from "./schema";
-import type { EstateConfig, Finding, NextupConfig, Roadmap } from "./types";
+import type { EstateConfig, Finding, NextupConfig, Roadmap, Skin } from "./types";
 
 export const ROADMAP_FILENAME = "roadmap.yaml";
 export const CONFIG_FILENAME = "nextup.config.yaml";
@@ -86,6 +86,8 @@ export interface Located {
   files: string[];
   /** Which file decided the walk. */
   via: "config" | "roadmap";
+  /** Host skins for the serve harness; empty unless a config declared them. */
+  skins: Skin[];
 }
 
 async function exists(p: string): Promise<boolean> {
@@ -116,12 +118,12 @@ export async function locate(cwd: string): Promise<Located | null> {
     const parsed = parseConfig(await fs.readFile(cfg, "utf8"));
     if (parsed.ok) {
       const files = await expandGlobs(dir, parsed.value.roadmaps);
-      return { root: dir, files, via: "config" };
+      return { root: dir, files, via: "config", skins: parsed.value.skins ?? [] };
     }
   }
   for (const dir of ancestors) {
     if (await exists(path.join(dir, ROADMAP_FILENAME))) {
-      return { root: dir, files: [ROADMAP_FILENAME], via: "roadmap" };
+      return { root: dir, files: [ROADMAP_FILENAME], via: "roadmap", skins: [] };
     }
   }
   return null;
diff --git a/render-html.ts b/render-html.ts
index a11d246..e214c28 100644
--- a/render-html.ts
+++ b/render-html.ts
@@ -6,7 +6,16 @@
 
 import type { ItemView, MilestoneView, PhaseView, RoadmapView } from "./view-model";
 
-export type ViewMode = "phases" | "list" | "compact";
+/**
+ * `phases`, `list` and `compact` share one markup and differ only by the
+ * `is-view-*` class. `ledger` and `bands` do not: a ledger needs a status cell
+ * of its own so the glyph, the title and the status word can hold three fixed
+ * columns, and bands walk `statusGroups` instead of `phases`. Both are
+ * additive — the three original modes emit exactly what they emitted before.
+ */
+export type ViewMode = "phases" | "list" | "compact" | "ledger" | "bands";
+
+const CELL_MODES: ReadonlySet<ViewMode> = new Set<ViewMode>(["ledger", "bands"]);
 
 export function esc(s: string): string {
   return s.replace(
@@ -19,16 +28,28 @@ function badge(label: string, cls: string): string {
   return `<span class="nextup-badge is-${esc(cls)}">${esc(label)}</span>`;
 }
 
-function renderItem(it: ItemView, view: RoadmapView): string {
+function renderItem(it: ItemView, view: RoadmapView, mode: ViewMode = "phases"): string {
+  const cells = CELL_MODES.has(mode);
   const parts: string[] = [];
   parts.push(
     `<li class="nextup-item is-${esc(it.status)}" id="${esc(view.project)}-${esc(it.id)}" data-item="${esc(it.id)}">`
   );
-  parts.push(`<div class="nextup-item-title">${esc(it.title)}${badge(it.statusLabel, it.status)}`);
+  // The glyph is decorative: the status is already written out beside it.
+  if (cells) parts.push('<span class="nextup-mark" aria-hidden="true"></span>');
+  parts.push(
+    `<div class="nextup-item-title">${esc(it.title)}${cells ? "" : badge(it.statusLabel, it.status)}`
+  );
   if (it.internal && it.internal.visibility === "internal")
     parts.push(badge("internal", "internal"));
   parts.push("</div>");
   if (it.summary) parts.push(`<p class="nextup-item-summary">${esc(it.summary)}</p>`);
+  if (cells) {
+    if (mode === "bands")
+      parts.push(
+        `<span class="nextup-item-phase">${esc(it.phaseId)} · ${esc(it.phaseTitle)}</span>`
+      );
+    parts.push(`<span class="nextup-item-status">${esc(it.statusLabel)}</span>`);
+  }
   if (it.links.length > 0) {
     parts.push('<ul class="nextup-links">');
     for (const l of it.links)
@@ -64,7 +85,7 @@ function renderMilestone(m: MilestoneView): string {
   return `<div class="nextup-milestone is-${esc(m.status)}"><span class="nextup-date">${esc(m.dateLabel)}</span><span>${esc(m.title)}</span>${badge(m.statusLabel, m.status)}</div>`;
 }
 
-function renderPhase(p: PhaseView, view: RoadmapView): string {
+function renderPhase(p: PhaseView, view: RoadmapView, mode: ViewMode = "phases"): string {
   const pct = p.progress.total > 0 ? Math.round((p.progress.done / p.progress.total) * 100) : 0;
   const parts: string[] = [];
   parts.push(
@@ -73,6 +94,7 @@ function renderPhase(p: PhaseView, view: RoadmapView): string {
   parts.push(
     `<div class="nextup-phase-head"><h3>${esc(p.title)}</h3><span class="nextup-horizon">${esc(p.horizonLabel)}${p.target ? ` · ${esc(p.target)}` : ""}</span></div>`
   );
+  if (p.getsYou) parts.push(`<p class="nextup-gets">${esc(p.getsYou)}</p>`);
   if (p.goal) parts.push(`<p class="nextup-goal">${esc(p.goal)}</p>`);
   parts.push(`<div class="nextup-meta"><span>${esc(p.progress.label)}</span></div>`);
   parts.push(
@@ -81,7 +103,7 @@ function renderPhase(p: PhaseView, view: RoadmapView): string {
   if (p.items.length === 0) parts.push(`<p class="nextup-empty">—</p>`);
   else {
     parts.push('<ul class="nextup-items">');
-    for (const it of p.items) parts.push(renderItem(it, view));
+    for (const it of p.items) parts.push(renderItem(it, view, mode));
     parts.push("</ul>");
   }
   if (p.milestones.length > 0) {
@@ -93,6 +115,31 @@ function renderPhase(p: PhaseView, view: RoadmapView): string {
   return parts.join("");
 }
 
+/**
+ * One band per status. Empty groups are dropped, except the two that mean
+ * something by their absence: a roadmap with nothing in progress and nothing
+ * blocked should say so rather than quietly omit the row.
+ */
+function renderBands(view: RoadmapView): string {
+  const parts: string[] = ['<div class="nextup-bands">'];
+  for (const g of view.statusGroups) {
+    if (g.items.length === 0 && g.status !== "in-progress" && g.status !== "blocked") continue;
+    parts.push(`<section class="nextup-band is-${esc(g.status)}" data-status="${esc(g.status)}">`);
+    parts.push(
+      `<div class="nextup-band-head"><h3>${esc(g.label)}</h3><span class="nextup-count">${g.items.length}</span></div>`
+    );
+    if (g.items.length === 0) parts.push(`<p class="nextup-empty">—</p>`);
+    else {
+      parts.push('<ul class="nextup-items">');
+      for (const it of g.items) parts.push(renderItem(it, view, "bands"));
+      parts.push("</ul>");
+    }
+    parts.push("</section>");
+  }
+  parts.push("</div>");
+  return parts.join("");
+}
+
 export function renderRoadmapHTML(view: RoadmapView, mode: ViewMode = "phases"): string {
   const parts: string[] = [];
   parts.push(
@@ -103,8 +150,13 @@ export function renderRoadmapHTML(view: RoadmapView, mode: ViewMode = "phases"):
   );
   if (view.stale) parts.push(`<span class="nextup-stale">${esc(view.staleLabel)}</span>`);
   parts.push("</header>");
+  if (mode === "bands") {
+    parts.push(renderBands(view));
+    parts.push("</div>");
+    return parts.join("");
+  }
   parts.push('<div class="nextup-phases">');
-  for (const p of view.phases) parts.push(renderPhase(p, view));
+  for (const p of view.phases) parts.push(renderPhase(p, view, mode));
   parts.push("</div></div>");
   return parts.join("");
 }
diff --git a/schema.ts b/schema.ts
index 0e21cea..b72cf72 100644
--- a/schema.ts
+++ b/schema.ts
@@ -202,9 +202,32 @@ export const roadmapSchema = z.strictObject({
   milestones: z.array(milestoneSchema).default([]),
 });
 
+/**
+ * A host's skin, for `serve`'s harness only: the stylesheets a consuming app
+ * wraps the component in, so the preview shows what that app will show rather
+ * than the package defaults. Never read by `build` — a projection carries no
+ * styling, and a skin must not be able to change what is published.
+ */
+export const skinSchema = z.strictObject({
+  id: z
+    .string()
+    .min(1)
+    .regex(/^[a-z0-9][a-z0-9-]*$/, "lower-case slug"),
+  label: z.string().min(1).optional(),
+  /** Applied in order, after the component's own stylesheet. */
+  css: z.array(z.string().min(1)).min(1),
+  /** Class on a wrapper around the roadmap, when the host scopes its tokens. */
+  wrapper: z.string().min(1).optional(),
+  /** Class the host sets for its dark ground, when it does not use the media query. */
+  dark: z.string().min(1).optional(),
+  /** Stylesheet URLs to load first (webfonts). */
+  links: z.array(z.url()).optional(),
+});
+
 /** `nextup.config.yaml` at a repo root: which roadmap files `--all` walks. */
 export const configSchema = z.strictObject({
   roadmaps: z.array(z.string().min(1)).min(1),
+  skins: z.array(skinSchema).optional(),
 });
 
 /** Estate config for `build --estate`: roadmaps fetched from GitHub, no checkouts. */
diff --git a/serve.ts b/serve.ts
index 4790749..ee6f266 100644
--- a/serve.ts
+++ b/serve.ts
@@ -18,7 +18,18 @@ import { promises as fs, watch } from "node:fs";
 import http from "node:http";
 import path from "node:path";
 import { type LoadedStatus, loadStatus, packageAsset, projectionFor } from "./build";
+import {
+  type LoadedSkin,
+  parseHarnessState,
+  renderHarnessFrame,
+  renderHarnessPage,
+} from "./harness";
+import { resolveText } from "./i18n";
 import { locate } from "./load";
+import { toInternal, toPublic } from "./project";
+import { renderRoadmapHTML } from "./render-html";
+import type { Skin } from "./types";
+import { buildViewModel } from "./view-model";
 
 export interface ServeOptions {
   port: number;
@@ -62,6 +73,35 @@ async function serveFile(root: string, urlPath: string, res: http.ServerResponse
   }
 }
 
+/**
+ * Read a skin's stylesheets. A skin names paths in a config file, so they are
+ * resolved against the repo root and refused if they escape it: `serve` is a
+ * dev server, but it should not become a way to read `~/.ssh` through a config
+ * someone pasted in. Concatenated in declared order — a host's token file
+ * before the file that maps those tokens onto the component.
+ */
+async function loadSkin(root: string, skin: Skin): Promise<LoadedSkin | null> {
+  const parts: string[] = [];
+  for (const rel of skin.css) {
+    const file = path.resolve(root, rel);
+    if (!file.startsWith(path.resolve(root))) return null;
+    try {
+      parts.push(await fs.readFile(file, "utf8"));
+    } catch {
+      // A skin that names a moved file should degrade to the defaults, not 500.
+      return null;
+    }
+  }
+  return {
+    id: skin.id,
+    label: skin.label ?? skin.id,
+    css: parts.join("\n"),
+    wrapper: skin.wrapper ?? null,
+    dark: skin.dark ?? null,
+    links: [...(skin.links ?? [])],
+  };
+}
+
 export function createServer(options: ServeOptions): http.Server {
   const ttl = options.ttlMs ?? 5 * 60 * 1000;
   let cache: { at: number; value: LoadedStatus[] } | null = null;
@@ -124,6 +164,51 @@ export function createServer(options: ServeOptions): http.Server {
           );
         return send(res, 200, html, TYPES[".html"]);
       }
+      // The harness: one view mode, locale, audience, width and ground at a
+      // time, with the axes in the query string so a combination is a link.
+      if (url.pathname === "/harness" || url.pathname === "/harness/frame") {
+        const all = await statuses();
+        const projects = all.map((x) => ({
+          id: x.roadmap.meta.project,
+          // Chrome only, so the file's own first locale is the right one.
+          title: resolveText(x.roadmap.meta.title, x.roadmap.meta.locales[0] ?? "en", [
+            ...x.roadmap.meta.locales,
+          ]),
+          locales: [...x.roadmap.meta.locales],
+        }));
+        if (projects.length === 0) return send(res, 404, "no roadmap under this directory");
+        const located = await locate(options.cwd);
+        const declared = located?.skins ?? [];
+        const state = parseHarnessState(url.searchParams, { projects, skins: declared });
+        if (url.pathname === "/harness")
+          return send(
+            res,
+            200,
+            renderHarnessPage({
+              projects,
+              skins: declared.map((k) => ({ id: k.id, label: k.label ?? k.id })),
+              state,
+            }),
+            TYPES[".html"]
+          );
+        const found = all.find((x) => x.roadmap.meta.project === state.project);
+        if (!found) return send(res, 404, "no such project");
+        // `projectionFor` erases the type for the JSON routes; the harness
+        // renders it, so it takes the typed projection instead.
+        const projection =
+          state.audience === "public"
+            ? toPublic(found.roadmap, found.rollup)
+            : toInternal(found.roadmap, found.rollup, found.file);
+        const vm = buildViewModel(projection, state.locale);
+        const chosen = declared.find((k) => k.id === state.skin);
+        const skin = chosen && located ? await loadSkin(located.root, chosen) : null;
+        return send(
+          res,
+          200,
+          renderHarnessFrame(renderRoadmapHTML(vm, state.view), state.theme, state.locale, skin),
+          TYPES[".html"]
+        );
+      }
       if (url.pathname === "/nextup-roadmap.iife.js") {
         const bundle = await packageAsset("dist/wc/nextup-roadmap.iife.js");
         if (!bundle) return send(res, 500, "bundle not built — run `bun run build:wc`");
diff --git a/styles.ts b/styles.ts
index 23ac5fe..57a5d68 100644
--- a/styles.ts
+++ b/styles.ts
@@ -6,6 +6,32 @@
  * fighting selectors.
  */
 
+/** The two palettes, declared once and emitted three ways: the light one as
+ *  the element's own defaults, the dark one under both the media query and the
+ *  `data-nextup-theme` attribute. Keeping them here is what stops the forced
+ *  theme from drifting away from the automatic one. */
+const LIGHT_VARS = `
+    --nextup-fg: #1a1a1a;
+    --nextup-fg-muted: #6b6b6b;
+    --nextup-card-bg: #ffffff;
+    --nextup-border: #e3e3e3;
+    --nextup-accent: #0e8a16;
+    --nextup-now: #1d76db;
+    --nextup-warn: #b45309;
+    --nextup-danger: #b60205;
+`;
+
+const DARK_VARS = `
+    --nextup-fg: #ececec;
+    --nextup-fg-muted: #a3a3a3;
+    --nextup-card-bg: #171717;
+    --nextup-border: #333;
+    --nextup-accent: #3fb950;
+    --nextup-now: #58a6ff;
+    --nextup-warn: #d29922;
+    --nextup-danger: #f85149;
+`;
+
 export const STYLES = `
 .nextup-roadmap {
   --nextup-fg: #1a1a1a;
@@ -26,6 +52,10 @@ export const STYLES = `
   line-height: 1.45;
 }
 .nextup-roadmap * { box-sizing: border-box; }
+/* The cell views below ask a container query, not a media query: this
+   component is a block on someone else's page and is as likely to be narrow
+   in a sidebar on a desktop as on a phone. */
+.nextup-roadmap { container-type: inline-size; container-name: nextup; }
 .nextup-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-bottom: var(--nextup-gap); }
 .nextup-header h2 { margin: 0; font-size: 1.4rem; }
 .nextup-version { color: var(--nextup-fg-muted); font-size: 0.85rem; }
@@ -40,6 +70,7 @@ export const STYLES = `
 .nextup-horizon { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--nextup-fg-muted); white-space: nowrap; }
 .nextup-phase.is-current .nextup-horizon { color: var(--nextup-now); }
 .nextup-goal { margin: 4px 0 0; color: var(--nextup-fg-muted); font-size: 0.9rem; }
+.nextup-gets { display: none; }
 .nextup-meta { display: flex; gap: 10px; font-size: 0.8rem; color: var(--nextup-fg-muted); margin: 6px 0 10px; }
 .nextup-progress { height: 4px; background: var(--nextup-border); border-radius: 2px; overflow: hidden; margin-bottom: 10px; }
 .nextup-progress > span { display: block; height: 100%; background: var(--nextup-accent); }
@@ -75,16 +106,107 @@ export const STYLES = `
 .nextup-roadmap.is-view-compact .nextup-milestones,
 .nextup-roadmap.is-view-compact .nextup-links { display: none; }
 .nextup-empty { color: var(--nextup-fg-muted); font-style: italic; }
+/* ── ledger ──────────────────────────────────────────────────────────
+   The roadmap as a statement: one column, phase order intact, and three
+   fixed cells per item (glyph, title+summary, status) so status never
+   competes with the title for the eye. Shipped phases collapse to a line
+   and carry gets_you as their whole content — the payoff, not the
+   feature list. */
+.nextup-roadmap.is-view-ledger .nextup-phases { grid-template-columns: 1fr; gap: 0; }
+.nextup-roadmap.is-view-ledger .nextup-phase { border: 0; border-bottom: 1px solid var(--nextup-border); border-radius: 0; padding: 14px 0; background: none; opacity: 1; }
+.nextup-roadmap.is-view-ledger .nextup-phase.is-current { box-shadow: none; border-left: 4px solid var(--nextup-now); padding-left: 12px; }
+.nextup-roadmap.is-view-ledger .nextup-phase-head h3 { font-size: 1.35rem; letter-spacing: -0.01em; }
+.nextup-roadmap.is-view-ledger .nextup-gets { display: block; margin: 6px 0 0; font-size: 1.05rem; font-weight: 500; max-width: 40ch; }
+.nextup-roadmap.is-view-ledger .nextup-goal { max-width: 62ch; }
+.nextup-roadmap.is-view-ledger .nextup-progress { display: none; }
+.nextup-roadmap.is-view-ledger .nextup-items { gap: 0; margin-top: 10px; }
+.nextup-roadmap.is-view-ledger .nextup-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) max-content; align-items: baseline; column-gap: 12px; border-left: 0; border-top: 1px solid var(--nextup-border); padding: 8px 0; }
+.nextup-roadmap.is-view-ledger .nextup-item-title { grid-column: 2; font-size: 0.95rem; }
+.nextup-roadmap.is-view-ledger .nextup-item-summary { grid-column: 2; }
+.nextup-item-status { grid-row: 1; text-align: right; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--nextup-fg-muted); white-space: nowrap; }
+/* Ledger is glyph/body/status; bands insert the phase tag before the status. */
+.nextup-roadmap.is-view-ledger .nextup-item-status { grid-column: 3; }
+.nextup-roadmap.is-view-bands .nextup-item-status { grid-column: 4; }
+/* Anything else the item renders belongs in the content column, not in the
+   glyph gutter that auto-placement would pick. */
+.nextup-roadmap.is-view-ledger .nextup-links,
+.nextup-roadmap.is-view-ledger .nextup-internal,
+.nextup-roadmap.is-view-bands .nextup-links,
+.nextup-roadmap.is-view-bands .nextup-internal { grid-column: 2; }
+
+/* Shipped phases are one line: title, payoff, horizon. */
+.nextup-roadmap.is-view-ledger .nextup-phase.is-done { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) max-content; align-items: baseline; column-gap: 12px; padding: 8px 0; }
+.nextup-roadmap.is-view-ledger .nextup-phase.is-done .nextup-phase-head { display: contents; }
+.nextup-roadmap.is-view-ledger .nextup-phase.is-done .nextup-phase-head h3 { grid-column: 1; font-size: 0.95rem; font-weight: 500; }
+.nextup-roadmap.is-view-ledger .nextup-phase.is-done .nextup-gets { grid-column: 2; grid-row: 1; margin: 0; font-size: 0.9rem; font-weight: 400; color: var(--nextup-fg-muted); max-width: none; }
+.nextup-roadmap.is-view-ledger .nextup-phase.is-done .nextup-horizon { grid-column: 3; grid-row: 1; text-align: right; }
+.nextup-roadmap.is-view-ledger .nextup-phase.is-done .nextup-goal,
+.nextup-roadmap.is-view-ledger .nextup-phase.is-done .nextup-meta,
+.nextup-roadmap.is-view-ledger .nextup-phase.is-done .nextup-items,
+.nextup-roadmap.is-view-ledger .nextup-phase.is-done .nextup-milestones { display: none; }
+
+/* The glyph column. Decorative, hence content in CSS. */
+.nextup-mark { grid-column: 1; grid-row: 1; font-variant-numeric: tabular-nums; color: var(--nextup-fg-muted); text-align: center; }
+.nextup-mark::before { content: "·"; }
+.nextup-item.is-planned .nextup-mark::before { content: "□"; }
+.nextup-item.is-in-progress .nextup-mark::before { content: "▶"; }
+.nextup-item.is-blocked .nextup-mark::before { content: "×"; }
+.nextup-item.is-done .nextup-mark::before { content: "■"; }
+.nextup-item.is-dropped .nextup-mark::before { content: "–"; }
+.nextup-item.is-in-progress .nextup-mark { color: var(--nextup-now); }
+.nextup-item.is-blocked .nextup-mark { color: var(--nextup-danger); }
+.nextup-item.is-done .nextup-mark { color: var(--nextup-accent); }
+.nextup-item.is-blocked .nextup-item-status { color: var(--nextup-danger); }
+.nextup-item.is-in-progress .nextup-item-status { color: var(--nextup-fg); }
+
+/* ── bands ───────────────────────────────────────────────────────────
+   Status first, phase order second: one full-width band per status in
+   urgency order, each item tagged with the phase it belongs to. in-progress
+   and blocked keep their band when empty, because an empty
+   one is the news. */
+.nextup-bands { display: grid; gap: 0; }
+.nextup-band { border-bottom: 1px solid var(--nextup-border); }
+.nextup-band-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--nextup-border); }
+.nextup-band-head h3 { margin: 0; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
+.nextup-count { font-size: 0.78rem; color: var(--nextup-fg-muted); font-variant-numeric: tabular-nums; }
+.nextup-band.is-in-progress .nextup-band-head { border-bottom: 2px solid var(--nextup-now); }
+.nextup-band.is-in-progress .nextup-band-head h3 { color: var(--nextup-now); }
+.nextup-band.is-blocked .nextup-band-head { border-bottom: 2px solid var(--nextup-danger); }
+.nextup-band.is-blocked .nextup-band-head h3 { color: var(--nextup-danger); }
+.nextup-band .nextup-items { gap: 0; }
+.nextup-roadmap.is-view-bands .nextup-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 14rem) max-content; align-items: baseline; column-gap: 12px; border-left: 0; border-bottom: 1px solid var(--nextup-border); padding: 8px 0; }
+.nextup-roadmap.is-view-bands .nextup-item-title { grid-column: 2; }
+.nextup-roadmap.is-view-bands .nextup-item-summary { grid-column: 2; }
+.nextup-item-phase { grid-column: 3; grid-row: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 10px; font-size: 0.75rem; color: var(--nextup-fg-muted); text-transform: uppercase; letter-spacing: 0.06em; }
+.nextup-band.is-done .nextup-item-title { font-weight: 500; color: var(--nextup-fg-muted); }
+.nextup-band.is-done .nextup-item-summary { display: none; }
+.nextup-band.is-proposed .nextup-item-title { font-weight: 500; }
+/* ── narrow ──────────────────────────────────────────────────────────
+   Fixed columns cannot hold at a phone width: the title, the phase tag and
+   the status word end up on top of each other. Below the breakpoint every
+   cell view becomes glyph + stacked content, with the metadata on its own
+   line under the title. */
+@container nextup (max-width: 640px) {
+  .nextup-roadmap.is-view-ledger .nextup-item,
+  .nextup-roadmap.is-view-bands .nextup-item { grid-template-columns: 22px minmax(0, 1fr); row-gap: 2px; }
+  .nextup-roadmap.is-view-ledger .nextup-item-status,
+  .nextup-roadmap.is-view-bands .nextup-item-status { grid-column: 2; grid-row: auto; text-align: left; }
+  .nextup-roadmap.is-view-bands .nextup-item-phase { grid-column: 2; grid-row: auto; white-space: normal; padding-right: 0; }
+  .nextup-roadmap.is-view-ledger .nextup-phase.is-done { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
+  .nextup-roadmap.is-view-ledger .nextup-phase.is-done .nextup-phase-head h3,
+  .nextup-roadmap.is-view-ledger .nextup-phase.is-done .nextup-gets,
+  .nextup-roadmap.is-view-ledger .nextup-phase.is-done .nextup-horizon { grid-column: 1; grid-row: auto; text-align: left; }
+  .nextup-roadmap.is-view-ledger .nextup-phase.is-current { padding-left: 10px; }
+  .nextup-roadmap.is-view-ledger .nextup-phase-head h3 { font-size: 1.15rem; }
+  .nextup-roadmap.is-view-ledger .nextup-gets { font-size: 1rem; }
+}
+
 @media (prefers-color-scheme: dark) {
-  .nextup-roadmap {
-    --nextup-fg: #ececec;
-    --nextup-fg-muted: #a3a3a3;
-    --nextup-card-bg: #171717;
-    --nextup-border: #333;
-    --nextup-accent: #3fb950;
-    --nextup-now: #58a6ff;
-    --nextup-warn: #d29922;
-    --nextup-danger: #f85149;
-  }
+  .nextup-roadmap { ${DARK_VARS} }
 }
+/* The same palette as an attribute, so a host with its own theme toggle (or a
+   preview harness that must show both grounds side by side) can force it
+   without waiting on the OS. Set data-nextup-theme on any ancestor. */
+[data-nextup-theme="dark"] .nextup-roadmap { ${DARK_VARS} }
+[data-nextup-theme="light"] .nextup-roadmap { ${LIGHT_VARS} }
 `;
diff --git a/types.ts b/types.ts
index 128fd0b..e87a2a5 100644
--- a/types.ts
+++ b/types.ts
@@ -26,6 +26,7 @@ import type {
   publicPhaseSchema,
   publicRoadmapSchema,
   roadmapSchema,
+  skinSchema,
   sourceKindSchema,
   sourceSchema,
   taskSchema,
@@ -54,6 +55,7 @@ export type Roadmap = z.infer<typeof roadmapSchema>;
 export type RoadmapInput = z.input<typeof roadmapSchema>;
 
 export type NextupConfig = z.infer<typeof configSchema>;
+export type Skin = z.infer<typeof skinSchema>;
 export type EstateConfig = z.infer<typeof estateSchema>;
 
 export type PublicPhase = z.infer<typeof publicPhaseSchema>;
diff --git a/ui-react/index.tsx b/ui-react/index.tsx
index 231fe4e..0a5155b 100644
--- a/ui-react/index.tsx
+++ b/ui-react/index.tsx
@@ -14,12 +14,17 @@ import {
   type MilestoneView,
   type PhaseView,
   type RoadmapView,
+  type StatusGroupView,
 } from "../view-model";
 
-export type { AnyRoadmap, ItemView, MilestoneView, PhaseView, RoadmapView };
+export type { AnyRoadmap, ItemView, MilestoneView, PhaseView, RoadmapView, StatusGroupView };
 export { buildViewModel };
 
-export type RoadmapViewMode = "phases" | "list" | "compact";
+/** Mirrors `ViewMode` in `render-html.ts`; see the note there on why the two
+ *  new modes need markup of their own. */
+export type RoadmapViewMode = "phases" | "list" | "compact" | "ledger" | "bands";
+
+const CELL_MODES: ReadonlySet<RoadmapViewMode> = new Set<RoadmapViewMode>(["ledger", "bands"]);
 
 export interface RoadmapProps {
   data: AnyRoadmap;
@@ -34,17 +39,32 @@ function Badge({ label, cls }: { label: string; cls: string }) {
   return <span className={`nextup-badge is-${cls}`}>{label}</span>;
 }
 
-function Item({ it, view }: { it: ItemView; view: RoadmapView }) {
+function Item({
+  it,
+  view,
+  mode = "phases",
+}: {
+  it: ItemView;
+  view: RoadmapView;
+  mode?: RoadmapViewMode;
+}) {
   const i = it.internal;
+  const cells = CELL_MODES.has(mode);
   const pending = i ? i.tasks.filter((t) => t.dispatched === null) : [];
   return (
     <li className={`nextup-item is-${it.status}`} id={`${view.project}-${it.id}`} data-item={it.id}>
+      {/* Decorative: the status is written out beside it. */}
+      {cells ? <span className="nextup-mark" aria-hidden="true" /> : null}
       <div className="nextup-item-title">
         {it.title}
-        <Badge label={it.statusLabel} cls={it.status} />
+        {cells ? null : <Badge label={it.statusLabel} cls={it.status} />}
         {i && i.visibility === "internal" ? <Badge label="internal" cls="internal" /> : null}
       </div>
       {it.summary ? <p className="nextup-item-summary">{it.summary}</p> : null}
+      {cells && mode === "bands" ? (
+        <span className="nextup-item-phase">{`${it.phaseId} · ${it.phaseTitle}`}</span>
+      ) : null}
+      {cells ? <span className="nextup-item-status">{it.statusLabel}</span> : null}
       {it.links.length > 0 ? (
         <ul className="nextup-links">
           {it.links.map((l) => (
@@ -96,7 +116,15 @@ function Milestone({ m }: { m: MilestoneView }) {
   );
 }
 
-function Phase({ p, view }: { p: PhaseView; view: RoadmapView }) {
+function Phase({
+  p,
+  view,
+  mode = "phases",
+}: {
+  p: PhaseView;
+  view: RoadmapView;
+  mode?: RoadmapViewMode;
+}) {
   const pct = p.progress.total > 0 ? Math.round((p.progress.done / p.progress.total) * 100) : 0;
   return (
     <section
@@ -110,6 +138,7 @@ function Phase({ p, view }: { p: PhaseView; view: RoadmapView }) {
           {p.target ? ` · ${p.target}` : null}
         </span>
       </div>
+      {p.getsYou ? <p className="nextup-gets">{p.getsYou}</p> : null}
       {p.goal ? <p className="nextup-goal">{p.goal}</p> : null}
       <div className="nextup-meta">
         <span>{p.progress.label}</span>
@@ -128,7 +157,7 @@ function Phase({ p, view }: { p: PhaseView; view: RoadmapView }) {
       ) : (
         <ul className="nextup-items">
           {p.items.map((it) => (
-            <Item key={it.id} it={it} view={view} />
+            <Item key={it.id} it={it} view={view} mode={mode} />
           ))}
         </ul>
       )}
@@ -144,6 +173,26 @@ function Phase({ p, view }: { p: PhaseView; view: RoadmapView }) {
   );
 }
 
+function Band({ g, view }: { g: StatusGroupView; view: RoadmapView }) {
+  return (
+    <section className={`nextup-band is-${g.status}`} data-status={g.status}>
+      <div className="nextup-band-head">
+        <h3>{g.label}</h3>
+        <span className="nextup-count">{g.items.length}</span>
+      </div>
+      {g.items.length === 0 ? (
+        <p className="nextup-empty">—</p>
+      ) : (
+        <ul className="nextup-items">
+          {g.items.map((it) => (
+            <Item key={it.id} it={it} view={view} mode="bands" />
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}
+
 export function Roadmap({ data, locale, view = "phases", className, children }: RoadmapProps) {
   const fallback = "meta" in data ? data.meta.locales[0] : data.locales[0];
   const vm = buildViewModel(data, locale ?? fallback ?? "en");
@@ -158,11 +207,23 @@ export function Roadmap({ data, locale, view = "phases", className, children }:
         {vm.stale ? <span className="nextup-stale">{vm.staleLabel}</span> : null}
         {children}
       </header>
-      <div className="nextup-phases">
-        {vm.phases.map((p) => (
-          <Phase key={p.id} p={p} view={vm} />
-        ))}
-      </div>
+      {view === "bands" ? (
+        <div className="nextup-bands">
+          {vm.statusGroups
+            .filter(
+              (g) => g.items.length > 0 || g.status === "in-progress" || g.status === "blocked"
+            )
+            .map((g) => (
+              <Band key={g.status} g={g} view={vm} />
+            ))}
+        </div>
+      ) : (
+        <div className="nextup-phases">
+          {vm.phases.map((p) => (
+            <Phase key={p.id} p={p} view={vm} mode={view} />
+          ))}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/ui-react/styles.css b/ui-react/styles.css
index d0afa14..05e5720 100644
--- a/ui-react/styles.css
+++ b/ui-react/styles.css
@@ -17,6 +17,10 @@
   line-height: 1.45;
 }
 .nextup-roadmap * { box-sizing: border-box; }
+/* The cell views below ask a container query, not a media query: this
+   component is a block on someone else's page and is as likely to be narrow
+   in a sidebar on a desktop as on a phone. */
+.nextup-roadmap { container-type: inline-size; container-name: nextup; }
 .nextup-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-bottom: var(--nextup-gap); }
 .nextup-header h2 { margin: 0; font-size: 1.4rem; }
 .nextup-version { color: var(--nextup-fg-muted); font-size: 0.85rem; }
@@ -31,6 +35,7 @@
 .nextup-horizon { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--nextup-fg-muted); white-space: nowrap; }
 .nextup-phase.is-current .nextup-horizon { color: var(--nextup-now); }
 .nextup-goal { margin: 4px 0 0; color: var(--nextup-fg-muted); font-size: 0.9rem; }
+.nextup-gets { display: none; }
 .nextup-meta { display: flex; gap: 10px; font-size: 0.8rem; color: var(--nextup-fg-muted); margin: 6px 0 10px; }
 .nextup-progress { height: 4px; background: var(--nextup-border); border-radius: 2px; overflow: hidden; margin-bottom: 10px; }
 .nextup-progress > span { display: block; height: 100%; background: var(--nextup-accent); }
@@ -66,8 +71,103 @@
 .nextup-roadmap.is-view-compact .nextup-milestones,
 .nextup-roadmap.is-view-compact .nextup-links { display: none; }
 .nextup-empty { color: var(--nextup-fg-muted); font-style: italic; }
+/* ── ledger ──────────────────────────────────────────────────────────
+   The roadmap as a statement: one column, phase order intact, and three
+   fixed cells per item (glyph, title+summary, status) so status never
+   competes with the title for the eye. Shipped phases collapse to a line
+   and carry gets_you as their whole content — the payoff, not the
+   feature list. */
+.nextup-roadmap.is-view-ledger .nextup-phases { grid-template-columns: 1fr; gap: 0; }
+.nextup-roadmap.is-view-ledger .nextup-phase { border: 0; border-bottom: 1px solid var(--nextup-border); border-radius: 0; padding: 14px 0; background: none; opacity: 1; }
+.nextup-roadmap.is-view-ledger .nextup-phase.is-current { box-shadow: none; border-left: 4px solid var(--nextup-now); padding-left: 12px; }
+.nextup-roadmap.is-view-ledger .nextup-phase-head h3 { font-size: 1.35rem; letter-spacing: -0.01em; }
+.nextup-roadmap.is-view-ledger .nextup-gets { display: block; margin: 6px 0 0; font-size: 1.05rem; font-weight: 500; max-width: 40ch; }
+.nextup-roadmap.is-view-ledger .nextup-goal { max-width: 62ch; }
+.nextup-roadmap.is-view-ledger .nextup-progress { display: none; }
+.nextup-roadmap.is-view-ledger .nextup-items { gap: 0; margin-top: 10px; }
+.nextup-roadmap.is-view-ledger .nextup-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) max-content; align-items: baseline; column-gap: 12px; border-left: 0; border-top: 1px solid var(--nextup-border); padding: 8px 0; }
+.nextup-roadmap.is-view-ledger .nextup-item-title { grid-column: 2; font-size: 0.95rem; }
+.nextup-roadmap.is-view-ledger .nextup-item-summary { grid-column: 2; }
+.nextup-item-status { grid-row: 1; text-align: right; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--nextup-fg-muted); white-space: nowrap; }
+/* Ledger is glyph/body/status; bands insert the phase tag before the status. */
+.nextup-roadmap.is-view-ledger .nextup-item-status { grid-column: 3; }
+.nextup-roadmap.is-view-bands .nextup-item-status { grid-column: 4; }
+/* Anything else the item renders belongs in the content column, not in the
+   glyph gutter that auto-placement would pick. */
+.nextup-roadmap.is-view-ledger .nextup-links,
+.nextup-roadmap.is-view-ledger .nextup-internal,
+.nextup-roadmap.is-view-bands .nextup-links,
+.nextup-roadmap.is-view-bands .nextup-internal { grid-column: 2; }
+
+/* Shipped phases are one line: title, payoff, horizon. */
+.nextup-roadmap.is-view-ledger .nextup-phase.is-done { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) max-content; align-items: baseline; column-gap: 12px; padding: 8px 0; }
+.nextup-roadmap.is-view-ledger .nextup-phase.is-done .nextup-phase-head { display: contents; }
+.nextup-roadmap.is-view-ledger .nextup-phase.is-done .nextup-phase-head h3 { grid-column: 1; font-size: 0.95rem; font-weight: 500; }
+.nextup-roadmap.is-view-ledger .nextup-phase.is-done .nextup-gets { grid-column: 2; grid-row: 1; margin: 0; font-size: 0.9rem; font-weight: 400; color: var(--nextup-fg-muted); max-width: none; }
+.nextup-roadmap.is-view-ledger .nextup-phase.is-done .nextup-horizon { grid-column: 3; grid-row: 1; text-align: right; }
+.nextup-roadmap.is-view-ledger .nextup-phase.is-done .nextup-goal,
+.nextup-roadmap.is-view-ledger .nextup-phase.is-done .nextup-meta,
+.nextup-roadmap.is-view-ledger .nextup-phase.is-done .nextup-items,
+.nextup-roadmap.is-view-ledger .nextup-phase.is-done .nextup-milestones { display: none; }
+
+/* The glyph column. Decorative, hence content in CSS. */
+.nextup-mark { grid-column: 1; grid-row: 1; font-variant-numeric: tabular-nums; color: var(--nextup-fg-muted); text-align: center; }
+.nextup-mark::before { content: "·"; }
+.nextup-item.is-planned .nextup-mark::before { content: "□"; }
+.nextup-item.is-in-progress .nextup-mark::before { content: "▶"; }
+.nextup-item.is-blocked .nextup-mark::before { content: "×"; }
+.nextup-item.is-done .nextup-mark::before { content: "■"; }
+.nextup-item.is-dropped .nextup-mark::before { content: "–"; }
+.nextup-item.is-in-progress .nextup-mark { color: var(--nextup-now); }
+.nextup-item.is-blocked .nextup-mark { color: var(--nextup-danger); }
+.nextup-item.is-done .nextup-mark { color: var(--nextup-accent); }
+.nextup-item.is-blocked .nextup-item-status { color: var(--nextup-danger); }
+.nextup-item.is-in-progress .nextup-item-status { color: var(--nextup-fg); }
+
+/* ── bands ───────────────────────────────────────────────────────────
+   Status first, phase order second: one full-width band per status in
+   urgency order, each item tagged with the phase it belongs to. in-progress
+   and blocked keep their band when empty, because an empty
+   one is the news. */
+.nextup-bands { display: grid; gap: 0; }
+.nextup-band { border-bottom: 1px solid var(--nextup-border); }
+.nextup-band-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--nextup-border); }
+.nextup-band-head h3 { margin: 0; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
+.nextup-count { font-size: 0.78rem; color: var(--nextup-fg-muted); font-variant-numeric: tabular-nums; }
+.nextup-band.is-in-progress .nextup-band-head { border-bottom: 2px solid var(--nextup-now); }
+.nextup-band.is-in-progress .nextup-band-head h3 { color: var(--nextup-now); }
+.nextup-band.is-blocked .nextup-band-head { border-bottom: 2px solid var(--nextup-danger); }
+.nextup-band.is-blocked .nextup-band-head h3 { color: var(--nextup-danger); }
+.nextup-band .nextup-items { gap: 0; }
+.nextup-roadmap.is-view-bands .nextup-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 14rem) max-content; align-items: baseline; column-gap: 12px; border-left: 0; border-bottom: 1px solid var(--nextup-border); padding: 8px 0; }
+.nextup-roadmap.is-view-bands .nextup-item-title { grid-column: 2; }
+.nextup-roadmap.is-view-bands .nextup-item-summary { grid-column: 2; }
+.nextup-item-phase { grid-column: 3; grid-row: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 10px; font-size: 0.75rem; color: var(--nextup-fg-muted); text-transform: uppercase; letter-spacing: 0.06em; }
+.nextup-band.is-done .nextup-item-title { font-weight: 500; color: var(--nextup-fg-muted); }
+.nextup-band.is-done .nextup-item-summary { display: none; }
+.nextup-band.is-proposed .nextup-item-title { font-weight: 500; }
+/* ── narrow ──────────────────────────────────────────────────────────
+   Fixed columns cannot hold at a phone width: the title, the phase tag and
+   the status word end up on top of each other. Below the breakpoint every
+   cell view becomes glyph + stacked content, with the metadata on its own
+   line under the title. */
+@container nextup (max-width: 640px) {
+  .nextup-roadmap.is-view-ledger .nextup-item,
+  .nextup-roadmap.is-view-bands .nextup-item { grid-template-columns: 22px minmax(0, 1fr); row-gap: 2px; }
+  .nextup-roadmap.is-view-ledger .nextup-item-status,
+  .nextup-roadmap.is-view-bands .nextup-item-status { grid-column: 2; grid-row: auto; text-align: left; }
+  .nextup-roadmap.is-view-bands .nextup-item-phase { grid-column: 2; grid-row: auto; white-space: normal; padding-right: 0; }
+  .nextup-roadmap.is-view-ledger .nextup-phase.is-done { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
+  .nextup-roadmap.is-view-ledger .nextup-phase.is-done .nextup-phase-head h3,
+  .nextup-roadmap.is-view-ledger .nextup-phase.is-done .nextup-gets,
+  .nextup-roadmap.is-view-ledger .nextup-phase.is-done .nextup-horizon { grid-column: 1; grid-row: auto; text-align: left; }
+  .nextup-roadmap.is-view-ledger .nextup-phase.is-current { padding-left: 10px; }
+  .nextup-roadmap.is-view-ledger .nextup-phase-head h3 { font-size: 1.15rem; }
+  .nextup-roadmap.is-view-ledger .nextup-gets { font-size: 1rem; }
+}
+
 @media (prefers-color-scheme: dark) {
-  .nextup-roadmap {
+  .nextup-roadmap { 
     --nextup-fg: #ececec;
     --nextup-fg-muted: #a3a3a3;
     --nextup-card-bg: #171717;
@@ -76,5 +176,28 @@
     --nextup-now: #58a6ff;
     --nextup-warn: #d29922;
     --nextup-danger: #f85149;
-  }
+ }
 }
+/* The same palette as an attribute, so a host with its own theme toggle (or a
+   preview harness that must show both grounds side by side) can force it
+   without waiting on the OS. Set data-nextup-theme on any ancestor. */
+[data-nextup-theme="dark"] .nextup-roadmap { 
+    --nextup-fg: #ececec;
+    --nextup-fg-muted: #a3a3a3;
+    --nextup-card-bg: #171717;
+    --nextup-border: #333;
+    --nextup-accent: #3fb950;
+    --nextup-now: #58a6ff;
+    --nextup-warn: #d29922;
+    --nextup-danger: #f85149;
+ }
+[data-nextup-theme="light"] .nextup-roadmap { 
+    --nextup-fg: #1a1a1a;
+    --nextup-fg-muted: #6b6b6b;
+    --nextup-card-bg: #ffffff;
+    --nextup-border: #e3e3e3;
+    --nextup-accent: #0e8a16;
+    --nextup-now: #1d76db;
+    --nextup-warn: #b45309;
+    --nextup-danger: #b60205;
+ }
diff --git a/view-model.test.ts b/view-model.test.ts
index a0e2b6c..6aba668 100644
--- a/view-model.test.ts
+++ b/view-model.test.ts
@@ -83,6 +83,75 @@ describe("renderRoadmapHTML", () => {
     const html = renderRoadmapHTML(buildViewModel(toPublic(roadmap, roll), "en"), "compact");
     expect(html).toContain("is-view-compact");
   });
+  it("the three original modes emit the same tree; ledger and bands do not", () => {
+    const vm = buildViewModel(toPublic(roadmap, roll), "en");
+    const strip = (m: "phases" | "list" | "compact") =>
+      renderRoadmapHTML(vm, m).replace(`is-view-${m}`, "is-view-X");
+    expect(strip("list")).toBe(strip("phases"));
+    expect(strip("compact")).toBe(strip("phases"));
+    // The cell modes add a status cell and a decorative glyph.
+    expect(renderRoadmapHTML(vm, "phases")).not.toContain("nextup-item-status");
+    expect(renderRoadmapHTML(vm, "ledger")).toContain("nextup-item-status");
+    expect(renderRoadmapHTML(vm, "ledger")).toContain('class="nextup-mark" aria-hidden="true"');
+  });
+  it("ledger keeps phase order and drops the inline badge for a status cell", () => {
+    const vm = buildViewModel(toPublic(roadmap, roll), "en");
+    const html = renderRoadmapHTML(vm, "ledger");
+    expect(html).toContain("is-view-ledger");
+    expect(html).toContain('<div class="nextup-phases">');
+    const order = [...html.matchAll(/data-phase="([^"]+)"/g)].map((m) => m[1]);
+    expect(order).toEqual(vm.phases.map((p) => p.id));
+    // A phase's payoff line is rendered, not just its goal.
+    const withGets = vm.phases.find((p) => p.getsYou);
+    if (withGets) expect(html).toContain('class="nextup-gets"');
+  });
+  it("bands walk statusGroups, tag each item with its phase, and keep the empty hot bands", () => {
+    const vm = buildViewModel(toPublic(roadmap, roll), "en");
+    const html = renderRoadmapHTML(vm, "bands");
+    expect(html).toContain("is-view-bands");
+    expect(html).toContain('<div class="nextup-bands">');
+    expect(html).not.toContain('<div class="nextup-phases">');
+    expect(html).toContain("nextup-item-phase");
+    // in-progress and blocked keep a band even at zero; the rest do not.
+    for (const g of vm.statusGroups) {
+      const shown = g.items.length > 0 || g.status === "in-progress" || g.status === "blocked";
+      expect(html.includes(`data-status="${g.status}"`)).toBe(shown);
+    }
+    // Every item appears exactly once across the bands.
+    const ids = [...html.matchAll(/data-item="([^"]+)"/g)].map((m) => m[1]);
+    expect(ids.length).toBe(vm.phases.flatMap((p) => p.items).length);
+    expect(new Set(ids).size).toBe(ids.length);
+  });
+});
+
+describe("statusGroups", () => {
+  it("regroups the same items in urgency order without losing or duplicating any", () => {
+    const vm = buildViewModel(toPublic(roadmap, roll), "en");
+    expect(vm.statusGroups.map((g) => g.status)).toEqual([
+      "in-progress",
+      "blocked",
+      "planned",
+      "proposed",
+      "done",
+      "dropped",
+    ]);
+    const flat = vm.phases.flatMap((p) => p.items).map((i) => i.id);
+    const grouped = vm.statusGroups.flatMap((g) => g.items).map((i) => i.id);
+    expect(grouped.sort()).toEqual(flat.sort());
+    for (const g of vm.statusGroups) for (const it of g.items) expect(it.status).toBe(g.status);
+  });
+  it("every item names the phase it came from", () => {
+    const vm = buildViewModel(toPublic(roadmap, roll), "de");
+    for (const p of vm.phases)
+      for (const it of p.items) {
+        expect(it.phaseId).toBe(p.id);
+        expect(it.phaseTitle).toBe(p.title);
+      }
+  });
+  it("labels follow the locale", () => {
+    const de = buildViewModel(toPublic(roadmap, roll), "de");
+    expect(de.statusGroups.find((g) => g.status === "in-progress")?.label).toBe("in Arbeit");
+  });
 });
 
 describe("readers", () => {
diff --git a/view-model.ts b/view-model.ts
index 7ab6b2e..47d7d53 100644
--- a/view-model.ts
+++ b/view-model.ts
@@ -91,6 +91,10 @@ export function stringsFor(locale: string): Strings {
 export interface ItemView {
   id: string;
   title: string;
+  /** The phase this item sits in. Carried on the item so a status-grouped
+   *  view can name the phase without walking back up the tree. */
+  phaseId: string;
+  phaseTitle: string;
   summary: string;
   status: ItemStatus;
   statusLabel: string;
@@ -143,6 +147,28 @@ export interface PhaseView {
   milestones: MilestoneView[];
 }
 
+/**
+ * Every status, in a fixed order, with the items that carry it — the same
+ * items as `phases`, regrouped. Emitted for all six statuses even when empty:
+ * an empty "in progress" is a fact a renderer may want to state out loud, and
+ * deciding which groups deserve ink is presentation, not grouping.
+ */
+export interface StatusGroupView {
+  status: ItemStatus;
+  label: string;
+  items: ItemView[];
+}
+
+/** Urgency order: what is moving, what is stuck, then what is merely intended. */
+export const STATUS_ORDER: readonly ItemStatus[] = [
+  "in-progress",
+  "blocked",
+  "planned",
+  "proposed",
+  "done",
+  "dropped",
+];
+
 export interface RoadmapView {
   project: string;
   title: string;
@@ -153,6 +179,7 @@ export interface RoadmapView {
   staleLabel: string;
   currentPhase: string;
   phases: PhaseView[];
+  statusGroups: StatusGroupView[];
   strings: Strings;
 }
 
@@ -184,6 +211,8 @@ export function buildViewModel(data: AnyRoadmap, locale: string): RoadmapView {
       return {
         id: it.id,
         title: text(it.title, locale, fallbacks),
+        phaseId: p.id,
+        phaseTitle: text(p.title, locale, fallbacks),
         summary: text(it.summary, locale, fallbacks),
         status,
         statusLabel: s.status[status],
@@ -246,6 +275,13 @@ export function buildViewModel(data: AnyRoadmap, locale: string): RoadmapView {
     };
   });
 
+  const allItems = phases.flatMap((p) => p.items);
+  const statusGroups: StatusGroupView[] = STATUS_ORDER.map((status) => ({
+    status,
+    label: s.status[status],
+    items: allItems.filter((it) => it.status === status),
+  }));
+
   return {
     project: meta.project,
     title: text(meta.title, locale, fallbacks),
@@ -256,6 +292,7 @@ export function buildViewModel(data: AnyRoadmap, locale: string): RoadmapView {
     staleLabel: s.stale,
     currentPhase: meta.current_phase,
     phases,
+    statusGroups,
     strings: s,
   };
 }