diff --git a/apps/web/e2e/smoke.mjs b/apps/web/e2e/smoke.mjs
index 702404c..30073f5 100644
--- a/apps/web/e2e/smoke.mjs
+++ b/apps/web/e2e/smoke.mjs
@@ -10,7 +10,7 @@ const BASE = `http://localhost:${PORT}`;
 const API = (process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:8000").replace(/\/+$/, "");
 
 const PAGES = [
-  ["/", /Strata/],
+  ["/", /layer by layer/],
   ["/library/", /Reference populations/],
   ["/library/population/", /No population was specified|Loading/],
   ["/examples/", /Example analyses/],
diff --git a/apps/web/src/app/analyses/new/page.tsx b/apps/web/src/app/analyses/new/page.tsx
index bc0ac09..ef72676 100644
--- a/apps/web/src/app/analyses/new/page.tsx
+++ b/apps/web/src/app/analyses/new/page.tsx
@@ -53,8 +53,9 @@ function Composer() {
   const spaces = useResource((s) => api.spaces(s), []);
   const qpadmOk = health?.capabilities.qpadm ?? false;
 
+  const methodParam = sp.get("method");
   const [state, setState] = useState<ComposerState>({
-    method: "admixture_fit",
+    method: METHODS.some((m) => m.key === methodParam) ? (methodParam as MethodKey) : "admixture_fit",
     datasetId: sp.get("dataset") ?? "",
     sample: "",
     targetPopulation: [],
@@ -90,9 +91,12 @@ function Composer() {
   }, [datasets.data, state.datasetId]);
   useEffect(() => {
     if (ds && !ds.sample_names.includes(state.sample)) set({ sample: ds.sample_names[0] ?? "" });
-    // Exploratory methods need a dataset whose coordinates live in a known space.
-    if (ds?.space && !state.space) set({ space: ds.space });
-  }, [ds, state.sample, state.space]);
+  }, [ds, state.sample]);
+  // A dataset whose coordinates live in a known space (G25 rows) can only be analysed there,
+  // so choosing it also chooses its space.
+  useEffect(() => {
+    if (ds?.space) set({ space: ds.space });
+  }, [ds?.id, ds?.space]);
   useEffect(() => {
     if (!state.space && spaces.data?.length) set({ space: spaces.data[0]!.id });
   }, [spaces.data, state.space]);
@@ -122,46 +126,58 @@ function Composer() {
       <PageHeader
         kicker="Compose"
         title="New analysis"
-        lede="Choose a target, a method and its parameters. Exploratory methods work in a PCA or G25 space; qpAdm tests a model formally on f-statistics."
+        lede="Pick a method, a target and its sources."
       />
 
-      <div className="grid gap-12 lg:grid-cols-[minmax(0,1fr)_17rem] lg:gap-14">
+      <div className="grid gap-12 lg:grid-cols-[minmax(0,1fr)_19rem] lg:gap-12">
         <div className="min-w-0">
           <Section n={1} title="Method">
             <fieldset>
               <legend className="sr-only">Method</legend>
-              <div className="border-t border-ink">
-                {METHODS.map((m) => {
-                  const disabled = m.formal && !qpadmOk;
-                  return (
-                    <label
-                      key={m.key}
-                      className={`grid cursor-pointer grid-cols-[1.5rem_1fr] gap-2 border-b border-rule py-3 ${
-                        disabled ? "cursor-not-allowed opacity-50" : ""
-                      }`}
-                    >
-                      <input
-                        type="radio"
-                        name="method"
-                        value={m.key}
-                        checked={state.method === m.key}
-                        disabled={disabled}
-                        onChange={() => set({ method: m.key as MethodKey })}
-                        className="mt-1.5 accent-black"
-                      />
-                      <span>
-                        <span className="text-h3">{m.label}</span> <KindMark kind={m.formal ? "formal" : "exploratory"} />
-                        <span className="mt-0.5 block text-small text-ink-2">{m.description}</span>
-                        {disabled ? (
-                          <span className="mt-0.5 block text-caption text-ink-3 italic">
-                            ADMIXTOOLS&nbsp;2 is not installed on this server; see the worker documentation.
+              {(["exploratory", "formal"] as const).map((kind) => (
+                <div key={kind} className="mb-5">
+                  <p className="mb-2">
+                    <KindMark kind={kind} />
+                  </p>
+                  <div className="grid gap-2 sm:grid-cols-2">
+                    {METHODS.filter((m) => m.formal === (kind === "formal")).map((m) => {
+                      const disabled = m.formal && !qpadmOk;
+                      const checked = state.method === m.key;
+                      return (
+                        <label
+                          key={m.key}
+                          className={`relative grid grid-cols-[1.1rem_1fr] gap-x-3 rounded-[var(--radius-panel)] border p-4 transition-colors ${
+                            disabled
+                              ? "cursor-not-allowed border-dashed border-rule bg-transparent opacity-60"
+                              : checked
+                                ? `cursor-pointer bg-panel ${m.formal ? "border-malachite" : "border-[#c08419]"} shadow-[0_0_0_1px_currentColor] ${m.formal ? "text-malachite" : "text-[#c08419]"}`
+                                : "cursor-pointer border-rule bg-panel hover:border-ink-3"
+                          }`}
+                        >
+                          <input
+                            type="radio"
+                            name="method"
+                            value={m.key}
+                            checked={checked}
+                            disabled={disabled}
+                            onChange={() => set({ method: m.key as MethodKey })}
+                            className="mt-1 self-start"
+                          />
+                          <span className="text-ink">
+                            <span className="block text-[1.2rem] leading-snug font-semibold">{m.label}</span>
+                            <span className="mt-1 block text-small leading-[1.5] text-ink-2">{m.description}</span>
+                            {disabled ? (
+                              <span className="mt-1.5 block text-caption text-ink-3">
+                                Not installed on this server.
+                              </span>
+                            ) : null}
                           </span>
-                        ) : null}
-                      </span>
-                    </label>
-                  );
-                })}
-              </div>
+                        </label>
+                      );
+                    })}
+                  </div>
+                </div>
+              ))}
             </fieldset>
           </Section>
 
@@ -170,7 +186,7 @@ function Composer() {
               <div className="mb-6 max-w-[28rem]">
                 <PopulationPicker
                   label="Target population from the library"
-                  hint="Or leave empty and choose a sample from an uploaded raw-genotype dataset below."
+                  hint="Or use an uploaded sample below."
                   value={state.targetPopulation}
                   onChange={(v: Picked[]) => set({ targetPopulation: v })}
                   max={1}
@@ -241,7 +257,7 @@ function Composer() {
                   <div className="sm:col-span-2">
                     <PopulationPicker
                       label="Sources"
-                      hint="Two to eight candidate source populations."
+                      hint="2 to 8 sources."
                       value={state.sources}
                       onChange={(sources) => set({ sources })}
                       max={8}
@@ -253,18 +269,18 @@ function Composer() {
                     value={state.bootstrap}
                     min={0}
                     max={5000}
-                    hint="Resamples individuals within each source; 0 disables intervals."
+                    hint="0 turns intervals off."
                     onChange={(bootstrap) => set({ bootstrap })}
                   />
                   <NumberField label="Random seed" value={state.seed} min={0} onChange={(seed) => set({ seed })} />
                   <label className="flex items-baseline gap-2 text-small sm:col-span-2">
                     <input
                       type="checkbox"
-                      className="accent-black"
+                      className=""
                       checked={state.sensitivity}
                       onChange={(e) => set({ sensitivity: e.target.checked })}
                     />
-                    Run leave-one-out sensitivity diagnostics
+                    Leave-one-out checks
                   </label>
                 </>
               ) : null}
@@ -274,7 +290,7 @@ function Composer() {
                   <div className="sm:col-span-2">
                     <PopulationPicker
                       label="Candidate sources"
-                      hint="Every combination within the size range is fitted and ranked."
+                      hint="Every combination is fitted."
                       value={state.sources}
                       onChange={(sources) => set({ sources })}
                       max={24}
@@ -302,7 +318,7 @@ function Composer() {
                   <div>
                     <PopulationPicker
                       label="Right (outgroups)"
-                      hint="Populations differentially related to the sources. Use more right than left populations."
+                      hint="Use more right than left."
                       value={state.right}
                       onChange={(right) => set({ right })}
                       max={30}
@@ -313,8 +329,8 @@ function Composer() {
                     <NumberField label="Most sources per model" value={state.maxSources} min={1} max={5} onChange={(maxSources) => set({ maxSources })} />
                   ) : null}
                   <label className="flex items-baseline gap-2 text-small sm:col-span-2">
-                    <input type="checkbox" className="accent-black" checked={state.allsnps} onChange={(e) => set({ allsnps: e.target.checked })} />
-                    Use all SNPs per f4-statistic (allsnps), rather than only SNPs present in every population
+                    <input type="checkbox" className="" checked={state.allsnps} onChange={(e) => set({ allsnps: e.target.checked })} />
+                    Use all SNPs per f4-statistic (allsnps)
                   </label>
                 </>
               ) : null}
@@ -326,27 +342,61 @@ function Composer() {
             </div>
           </Section>
 
-          <div className="border-t border-ink pt-6">
+        </div>
+
+        <aside className="lg:sticky lg:top-8 lg:self-start">
+          <div className="panel p-5">
+                        <p className="mt-1 flex flex-wrap items-center gap-2 text-[1.2rem] font-semibold">
+              {method.label}{" "}
+              <span key={method.key} className="pop inline-block">
+                <KindMark kind={method.formal ? "formal" : "exploratory"} />
+              </span>
+            </p>
+            <ul className="mt-4 space-y-1.5 text-small">
+              {[
+                ["Target", formalTarget && state.targetPopulation[0] ? state.targetPopulation[0].name : ds ? `${state.sample || "—"} (${ds.name})` : null],
+                ...(method.formal
+                  ? ([
+                      ["Left", state.left.length ? `${state.left.length} chosen` : null],
+                      ["Right", state.right.length ? `${state.right.length} chosen` : null],
+                    ] as Array<[string, string | null]>)
+                  : state.method === "admixture_fit" || state.method === "admixture_rotate"
+                    ? ([["Sources", state.sources.length ? `${state.sources.length} chosen` : null]] as Array<[string, string | null]>)
+                    : []),
+              ].map(([k, v]) => (
+                <li key={k as string} className="grid grid-cols-[1rem_4rem_1fr] items-baseline gap-x-2">
+                  <span key={v ? "y" : "n"} className={`inline-block ${v ? "pop text-malachite" : "text-ink-3"}`} aria-hidden>
+                    {v ? "\u2713" : "\u25CB"}
+                  </span>
+                  <span className="text-ink-3">{k}</span>
+                  <span className={`truncate ${v ? "text-ink" : "text-ink-3"}`}>{v ?? "not chosen"}</span>
+                </li>
+              ))}
+            </ul>
             {!built.ok ? (
-              <ul className="mb-4 list-disc space-y-0.5 pl-5 text-small text-ink-2">
+              <ul className="mt-4 space-y-1 border-t border-rule-soft pt-3 text-caption leading-[1.5] text-ink-2">
                 {built.problems.map((p) => (
                   <li key={p}>{p}</li>
                 ))}
               </ul>
             ) : null}
-            <button type="button" className="btn" disabled={!built.ok || busy} onClick={submit}>
-              {busy ? "Submitting…" : `Run ${method.label.toLowerCase()}`}
+            <button type="button" className="btn mt-5 w-full" disabled={!built.ok || busy} onClick={submit}>
+              {busy ? "Submitting\u2026" : `Run ${method.label.toLowerCase()}`}
             </button>
             {error ? <ErrorNote error={error} /> : null}
           </div>
-        </div>
-
-        <aside className="text-caption leading-[1.6] text-ink-2 lg:pt-14">
-          <p className="mb-2 italic text-ink">On choosing a method</p>
-          <p>{method.guidance}</p>
-          <p className="mt-3">
-            See <Link href="/methods/">Methods</Link> for the statistics and their assumptions.
-          </p>
+          <details className="group mt-4 px-1 text-caption leading-[1.6] text-ink-2">
+            <summary className="cursor-pointer list-none font-semibold text-ink marker:hidden hover:text-malachite [&::-webkit-details-marker]:hidden">
+              <span className="mr-1.5 inline-block text-[0.8em] text-ink-3 transition-transform group-open:rotate-90" aria-hidden>
+                &#9656;
+              </span>
+              When to use this
+            </summary>
+            <p className="mt-2">{method.guidance}</p>
+            <p className="mt-2">
+              <Link href="/methods/">Methods</Link>
+            </p>
+          </details>
         </aside>
       </div>
     </>
diff --git a/apps/web/src/app/analysis/page.tsx b/apps/web/src/app/analysis/page.tsx
index dd1e311..5c12002 100644
--- a/apps/web/src/app/analysis/page.tsx
+++ b/apps/web/src/app/analysis/page.tsx
@@ -4,7 +4,7 @@ import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 import { Suspense, useEffect, useState } from "react";
 import { ApiError, api, pollJob, TERMINAL } from "@/lib/api";
-import { analysisLabel, dateTime } from "@/lib/format";
+import { analysisLabel } from "@/lib/format";
 import { useResource } from "@/lib/useResource";
 import type { Job } from "@/lib/types";
 import { AnalysisDocument } from "@/components/results/AnalysisDocument";
@@ -26,8 +26,8 @@ function FailureNote({ message }: { message: string }) {
       <ErrorNote error={new ApiError(503, text, { detail: text, code: "reference_unavailable" })} />
     );
   return (
-    <div role="alert" className="my-6 max-w-[44rem] border-l-2 border-alert py-1 pl-5 text-small">
-      <p className="text-alert">The analysis failed.</p>
+    <div role="alert" className="my-6 max-w-[46rem] rounded-r-[6px] border-l-[3px] border-alert bg-[#fbecea] py-3 pr-4 pl-4 text-small">
+      <p className="font-semibold text-alert">The analysis failed.</p>
       <p className="mt-1 text-ink-2">{text}</p>
     </div>
   );
@@ -73,13 +73,11 @@ function AnalysisInner() {
         <div role="status" aria-live="polite" className="measure">
           <p className="text-h3 italic">{STATUS_TEXT[status]}</p>
           <p className="mt-2 text-small text-ink-2">
-            Submitted {dateTime(a.created_at)}
-            {job?.started_at ? `; started ${dateTime(job.started_at)}` : ""}.
-            {typeof job?.progress === "number" ? ` ${Math.round(job.progress * 100)}% complete.` : ""} This
-            page updates by itself; you can leave it and return from your workspace.
+            {typeof job?.progress === "number" ? `${Math.round(job.progress * 100)}% complete. ` : ""}You can
+            leave this page.
           </p>
-          <div className="mt-6 h-px w-full overflow-hidden bg-rule" aria-hidden>
-            <div className="h-px w-1/4 animate-[strata-progress_1.8s_ease-in-out_infinite] bg-ink" />
+          <div className="mt-6 h-1 w-full max-w-[40rem] overflow-hidden rounded-full bg-rule-soft" aria-hidden>
+            <div className="h-1 w-1/4 animate-[strata-progress_1.8s_ease-in-out_infinite] rounded-full bg-malachite" />
           </div>
           {pollError ? <ErrorNote error={pollError} retry={analysis.reload} /> : null}
         </div>
diff --git a/apps/web/src/app/assistant/page.tsx b/apps/web/src/app/assistant/page.tsx
index bbdb164..d60d853 100644
--- a/apps/web/src/app/assistant/page.tsx
+++ b/apps/web/src/app/assistant/page.tsx
@@ -97,7 +97,7 @@ function MethodNote({ part }: { part: ToolPart }) {
     <details id={`method-${part.id}`} className="group border-b border-rule-soft py-1.5 text-caption">
       <summary className="cursor-pointer list-none text-ink-2 marker:hidden">
         <sup className="num mr-1.5 text-ink">{part.n}</sup>
-        <span className="font-mono text-[0.72rem] text-ink">{part.name}</span>
+        <span className="font-mono text-[0.82rem] text-ink">{part.name}</span>
         <span className="ml-2">
           {part.status === "running"
             ? "running…"
@@ -110,13 +110,13 @@ function MethodNote({ part }: { part: ToolPart }) {
       <div className="mt-2 grid gap-3 md:grid-cols-2">
         <div>
           <p className="mb-1 italic">Input</p>
-          <pre className="max-h-60 overflow-auto border border-rule bg-wash p-2 text-[0.7rem] leading-[1.5]">
+          <pre className="max-h-60 overflow-auto border border-rule bg-wash p-2 text-[0.8rem] leading-[1.5]">
             {JSON.stringify(part.input, null, 2)}
           </pre>
         </div>
         <div>
           <p className="mb-1 italic">Result</p>
-          <pre className="max-h-60 overflow-auto border border-rule bg-wash p-2 text-[0.7rem] leading-[1.5]">
+          <pre className="max-h-60 overflow-auto border border-rule bg-wash p-2 text-[0.8rem] leading-[1.5]">
             {part.status === "running" ? "…" : JSON.stringify(part.result ?? part.error, null, 2)}
           </pre>
         </div>
@@ -133,7 +133,7 @@ function AssistantAnswer({ turn, index }: { turn: AssistantTurn; index: number }
     .filter((x) => x.r !== null);
   return (
     <div>
-      <div className="text-body">
+      <div className="serif text-[1.2rem] leading-[1.65]">
         {turn.parts.map((p, i) =>
           p.kind === "text" ? (
             <Prose key={i} text={p.text} citations={turn.citations} />
@@ -156,7 +156,7 @@ function AssistantAnswer({ turn, index }: { turn: AssistantTurn; index: number }
             <span className="font-semibold text-ink">
               Result {index}.{t.n}.
             </span>{" "}
-            Output of <span className="font-mono text-[0.72rem]">{t.name}</span>
+            Output of <span className="font-mono text-[0.82rem]">{t.name}</span>
             {typeof t.result?.analysis_id === "string" ? (
               <>
                 ; <Link href={`/analysis/?id=${encodeURIComponent(t.result.analysis_id)}`}>open the full analysis</Link>
@@ -305,13 +305,8 @@ export default function AssistantPage() {
       <PageHeader
         kicker="Research assistant"
         title="Ask a question"
-        lede="The assistant answers by running Strata's analyses and reading the methods documentation. Each tool it runs is listed as a numbered method beneath the answer, with its inputs and results."
-        aside={
-          <p>
-            It sees population identifiers and derived coordinates, never genotypes. Numbers it
-            states are checked against tool results; unverified values are flagged.
-          </p>
-        }
+        lede="Answers come from real analyses, with every step shown."
+        aside={<p>It never sees genotypes.</p>}
       />
 
       <div className="max-w-[46rem]">
@@ -353,15 +348,19 @@ export default function AssistantPage() {
         </fieldset>
         {turns.length === 0 ? (
           <div className="mb-10 text-small text-ink-2">
-            <p className="mb-2 italic text-ink">For example</p>
-            <ul className="space-y-1.5">
+            <p className="mb-3 font-semibold text-ink">Start from a question like these</p>
+            <ul className="flex flex-col gap-2">
               {[
                 "Which reference populations are closest to Yamnaya Samara in the Strata PCA?",
-                "Fit Corded Ware as a mixture of Yamnaya and Globular Amphora, with intervals.",
+                "Which Bronze Age populations in the library come from the steppe?",
                 "What does a qpAdm p-value of 0.2 tell me, and what does it not?",
               ].map((q) => (
                 <li key={q}>
-                  <button type="button" className="linkish text-left" onClick={() => setInput(q)}>
+                  <button
+                    type="button"
+                    className="w-full rounded-[var(--radius-control)] border border-rule bg-panel px-4 py-2.5 text-left text-ink transition-colors hover:border-malachite hover:text-malachite"
+                    onClick={() => setInput(q)}
+                  >
                     {q}
                   </button>
                 </li>
@@ -370,19 +369,19 @@ export default function AssistantPage() {
           </div>
         ) : null}
 
-        <ol className="space-y-10">
+        <ol className="space-y-6">
           {turns.map((t, i) => {
             if (t.role === "user")
               return (
-                <li key={i} className="grid grid-cols-[3.5rem_1fr] gap-2 border-t border-rule pt-4">
-                  <span className="smallcaps pt-1 text-ink-3">Q.</span>
-                  <p className="whitespace-pre-wrap italic">{t.content}</p>
+                <li key={i} className="ml-auto max-w-[38rem] rounded-[var(--radius-panel)] rounded-br-[3px] bg-basalt px-5 py-3.5 text-[#eef1f3]">
+                  <span className="sr-only">You asked: </span>
+                  <p className="whitespace-pre-wrap">{t.content}</p>
                 </li>
               );
             answerNo += 1;
             return (
-              <li key={i} className="grid grid-cols-[3.5rem_1fr] gap-2" aria-live={i === turns.length - 1 && streaming ? "polite" : undefined}>
-                <span className="smallcaps pt-1.5 text-ink-3">A.</span>
+              <li key={i} className="panel p-5 sm:p-6" aria-live={i === turns.length - 1 && streaming ? "polite" : undefined}>
+                <span className="sr-only">Answer: </span>
                 <div className="min-w-0">
                   <AssistantAnswer turn={t} index={answerNo} />
                 </div>
@@ -395,7 +394,7 @@ export default function AssistantPage() {
         {error ? <ErrorNote error={error} /> : null}
 
         <form
-          className="mt-10 border-t border-ink pt-5"
+          className="panel sticky bottom-4 z-10 mt-8 p-4 shadow-[0_8px_30px_-12px_rgba(30,38,48,0.25)] sm:p-5"
           onSubmit={(e) => {
             e.preventDefault();
             void send();
@@ -409,7 +408,7 @@ export default function AssistantPage() {
                   <label key={d.id} className="flex items-baseline gap-2">
                     <input
                       type="checkbox"
-                      className="accent-black"
+                      className=""
                       checked={shared.includes(d.id)}
                       onChange={(e) =>
                         setShared((s) => (e.target.checked ? [...s, d.id] : s.filter((x) => x !== d.id)))
@@ -426,7 +425,7 @@ export default function AssistantPage() {
           </label>
           <textarea
             id="question"
-            className="field h-28 resize-y !font-serif !text-body !leading-[1.5]"
+            className="field h-24 resize-y !font-sans !text-body !leading-[1.5]"
             value={input}
             maxLength={8000}
             disabled={!connected || streaming}
diff --git a/apps/web/src/app/data/page.tsx b/apps/web/src/app/data/page.tsx
index c795a3b..f269870 100644
--- a/apps/web/src/app/data/page.tsx
+++ b/apps/web/src/app/data/page.tsx
@@ -43,7 +43,7 @@ export default function DataPage() {
       <PageHeader
         kicker="Provenance"
         title="Data sources and licences"
-        lede="Where the reference data come from, how they were processed, and the terms under which they may be reused."
+        lede="Sources, processing and licences."
       />
 
       <Section n={++n} title="Principles" aside="Strata does not redistribute raw genotype data from the Allen Ancient DNA Resource; the pipeline downloads it from its original source.">
diff --git a/apps/web/src/app/examples/page.tsx b/apps/web/src/app/examples/page.tsx
index 8447397..e8ce315 100644
--- a/apps/web/src/app/examples/page.tsx
+++ b/apps/web/src/app/examples/page.tsx
@@ -13,7 +13,7 @@ export default function ExamplesPage() {
       <PageHeader
         kicker="Worked examples"
         title="Example analyses"
-        lede="Analyses computed from public reference data with the same code that runs your own. Each records its inputs, parameters and provenance."
+        lede="Real analyses on public data."
       />
       {ex.loading ? (
         <Loading what="examples" />
@@ -32,23 +32,25 @@ export default function ExamplesPage() {
             {c}
           </Caveat>
         ))}
-        <ol className="max-w-[52rem] border-t border-ink">
-          {ex.data.map((e, i) => (
-            <li key={e.slug} className="grid grid-cols-[2.5rem_1fr] gap-2 border-b border-rule py-5">
-              <span className="num pt-1 text-small text-ink-3">{i + 1}.</span>
-              <div>
-                <h2 className="text-h3">
-                  <Link href={`/examples/view/?slug=${encodeURIComponent(e.slug)}`}>{e.title}</Link>
+        <ul className="panel max-w-[56rem] divide-y divide-rule-soft">
+          {ex.data.map((e) => (
+            <li key={e.slug}>
+              <Link
+                href={`/examples/view/?slug=${encodeURIComponent(e.slug)}`}
+                className="group block px-5 py-5 no-underline hover:bg-wash sm:px-6"
+              >
+                <span className="flex flex-wrap items-center gap-2 text-caption text-ink-3">
+                  <KindMark kind={e.result_kind} />
+                  {analysisLabel(e.kind)}
+                  {e.tags?.length ? <span>{e.tags.join(", ")}</span> : null}
+                </span>
+                <h2 className="mt-1.5 text-[1.35rem] leading-snug font-semibold text-ink group-hover:text-malachite">
+                  {e.title}
                 </h2>
-                <p className="mt-1 text-small text-ink-2">
-                  <KindMark kind={e.result_kind} /> {analysisLabel(e.kind)}
-                  {e.tags?.length ? <span className="text-ink-3">; {e.tags.join(", ")}</span> : null}
-                </p>
-                <p className="measure mt-2 text-small leading-[1.55]">{e.summary}</p>
-              </div>
+              </Link>
             </li>
           ))}
-        </ol>
+        </ul>
         </>
       )}
     </>
diff --git a/apps/web/src/app/examples/view/page.tsx b/apps/web/src/app/examples/view/page.tsx
index 7d203a1..de07010 100644
--- a/apps/web/src/app/examples/view/page.tsx
+++ b/apps/web/src/app/examples/view/page.tsx
@@ -9,7 +9,7 @@ import { asAnalysisResult } from "@/lib/results";
 import { useResource } from "@/lib/useResource";
 import { ResultView } from "@/components/results/ResultView";
 import { describeParams, ProvenanceList } from "@/components/results/AnalysisDocument";
-import { Caveat, Empty, ErrorNote, KindMark, Loading, PageHeader, Section } from "@/components/typography";
+import { Empty, ErrorNote, Fold, KindMark, Loading, PageHeader } from "@/components/typography";
 
 function ExampleInner() {
   const slug = useSearchParams().get("slug");
@@ -37,31 +37,31 @@ function ExampleInner() {
       <PageHeader
         kicker={analysisLabel(e.kind)}
         title={e.title}
-        lede={e.summary}
         aside={
           <p>
             <KindMark kind={e.result_kind} />
           </p>
         }
       />
-      {e.caveats?.length ? (
-        <div className="mb-10">
-          {e.caveats.map((c, i) => (
-            <Caveat key={i} title={i === 0 ? "About this example" : "Reading the result"}>
-              {c}
-            </Caveat>
-          ))}
-        </div>
-      ) : null}
-      {e.description ? (
-        <div className="measure prose-journal mb-12">
-          {e.description.split(/\n{2,}/).map((para, i) => (
-            <p key={i}>{para}</p>
-          ))}
-        </div>
-      ) : null}
-      <Section n={1} title="Inputs and parameters">
-        <dl className="grid max-w-[48rem] grid-cols-[minmax(8rem,auto)_1fr] gap-x-6 gap-y-1 text-small">
+      <section className="mb-12" aria-label="Results">
+        {result ? <ResultView result={result} /> : <Empty>This example has no displayable result.</Empty>}
+      </section>
+      <Fold title="About this example">
+        {e.description ? (
+          <div className="measure prose-journal">
+            {e.description.split(/\n{2,}/).map((para, i) => (
+              <p key={i}>{para}</p>
+            ))}
+          </div>
+        ) : null}
+        {e.caveats?.map((c, i) => (
+          <p key={i} className="measure mt-3 text-small text-ink-2">
+            {c}
+          </p>
+        ))}
+      </Fold>
+      <Fold title="Inputs and parameters">
+        <dl className="kv max-w-[48rem]">
           {[...inputs, ...params].map(([k, v]) => (
             <div key={k} className="contents">
               <dt className="text-ink-3">{k}</dt>
@@ -69,13 +69,10 @@ function ExampleInner() {
             </div>
           ))}
         </dl>
-      </Section>
-      <Section n={2} title="Results">
-        {result ? <ResultView result={result} /> : <Empty>This example has no displayable result.</Empty>}
-      </Section>
-      <Section n={3} title="Provenance">
+      </Fold>
+      <Fold title="Provenance">
         <ProvenanceList provenance={e.provenance} />
-      </Section>
+      </Fold>
     </article>
   );
 }
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index 1c4797c..1d75071 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -1,50 +1,67 @@
 @import "tailwindcss";
 
 /*
- * Strata typographic system: a single Garamond family set like a journal page.
- * Sizes follow a modular scale on a 19px text size; leading 1.5 for serif body.
+ * Strata visual system.
+ *
+ * The page is cool field-stone; working surfaces (figures, tables, forms) are white panels set on
+ * it. Ink is slate, not black. Malachite marks interaction and formal results; ochre marks
+ * exploratory results. The sediment ramp (light, young, at the top; dark, old, at the bottom) is
+ * reserved for periods of time, so a colour always means the same layer wherever it appears.
+ *
+ * Type: a single EB Garamond family, set like a journal page, with IBM Plex Mono for code.
  */
 @theme {
   --font-serif: "EB Garamond", "Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
-  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
   --font-sans: var(--font-serif);
+  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
 
-  --color-paper: #ffffff;
-  --color-ink: #000000;
-  --color-ink-2: #333333;
-  --color-ink-3: #5c5c5c; /* 6.7:1 on white */
-  --color-rule: #d6d6d6;
-  --color-rule-soft: #ececec;
-  --color-wash: #f6f6f4; /* the only tinted surface: table hover and code */
+  --color-paper: #f1f3ef; /* field stone: the page */
+  --color-panel: #ffffff; /* working surfaces */
+  --color-ink: #1e2630; /* slate */
+  --color-ink-2: #444e59;
+  --color-ink-3: #5f6974; /* 5.2:1 on stone, 5.6:1 on white */
+  --color-rule: #ccd2d0;
+  --color-rule-soft: #e3e7e4;
+  --color-wash: #eaeee9;
 
-  /* chart hues; never used for text */
+  --color-malachite: #1d6b56; /* interaction, formal results; 6.0:1 on white */
+  --color-malachite-soft: #e2efe9;
+  --color-loess: #9a6a12; /* exploratory results as text; 4.8:1 on white */
+  --color-loess-soft: #f6eedb;
+  --color-basalt: #1a2129; /* the rail */
+
+  /* chart hues; never used for body text */
   --color-blue: #2c5c94;
   --color-ochre: #c08419;
   --color-rose: #a13f5e;
   --color-sage: #4a9a68;
   --color-violet: #7c6fc0;
   --color-umber: #8a5418;
-  --color-alert: #8f1d1d;
+  --color-alert: #a32a1f;
 
-  --text-caption: 0.8125rem;
-  --text-small: 0.9rem;
+  --text-caption: 0.875rem;
+  --text-small: 0.98rem;
   --text-body: 1.1875rem;
-  --text-h3: 1.3125rem;
-  --text-h2: 1.6875rem;
-  --text-h1: 2.5rem;
-  --text-display: 3.5rem;
+  --text-h3: 1.375rem;
+  --text-h2: 1.8125rem;
+  --text-h1: 2.875rem;
+  --text-display: 4.75rem;
+
+  --radius-panel: 10px;
+  --radius-control: 6px;
+  --radius-tag: 3px;
 }
 
 @layer base {
   html {
-    font-family: var(--font-serif);
+    font-family: var(--font-sans);
     font-size: 100%;
     color: var(--color-ink);
     background: var(--color-paper);
     font-kerning: normal;
+    font-variant-ligatures: common-ligatures;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
-    font-variant-ligatures: common-ligatures;
   }
   body {
     background: var(--color-paper);
@@ -57,71 +74,96 @@
   h3,
   h4 {
     font-weight: 500;
-    line-height: 1.2;
+    line-height: 1.12;
     text-wrap: balance;
   }
   p {
     text-wrap: pretty;
-    hyphens: auto;
   }
   a {
     color: inherit;
     text-decoration-line: underline;
-    text-decoration-thickness: 0.06em;
-    text-underline-offset: 0.18em;
-    text-decoration-color: var(--color-ink-3);
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.2em;
+    text-decoration-color: color-mix(in srgb, var(--color-malachite) 55%, transparent);
   }
   a:hover {
-    text-decoration-color: var(--color-ink);
+    color: var(--color-malachite);
+    text-decoration-color: var(--color-malachite);
   }
   :focus-visible {
-    outline: 2px solid var(--color-ink);
-    outline-offset: 3px;
+    outline: 2px solid var(--color-malachite);
+    outline-offset: 2px;
+    border-radius: 2px;
   }
   ::selection {
-    background: #e4e9f1;
+    background: #cfe5dc;
   }
   code,
   kbd,
   samp,
   pre {
     font-family: var(--font-mono);
-    font-size: 0.8em;
+    font-size: 0.84em;
   }
   hr {
     border: 0;
     border-top: 1px solid var(--color-rule);
   }
+  input[type="checkbox"],
+  input[type="radio"] {
+    accent-color: var(--color-malachite);
+  }
   @media (prefers-reduced-motion: reduce) {
     *,
     *::before,
     *::after {
       animation-duration: 0.01ms !important;
+      animation-delay: 0ms !important;
       transition-duration: 0.01ms !important;
     }
   }
 }
 
 @layer components {
-  /* Small capitals, set by hand: the web cut of EB Garamond ships without smcp. */
+  /* A quiet label: semibold, slightly tracked, sentence case. */
   .smallcaps {
-    text-transform: uppercase;
-    font-size: 0.74em;
-    letter-spacing: 0.085em;
-    font-weight: 500;
+    font-size: 0.8em;
+    letter-spacing: 0.01em;
+    font-weight: 600;
   }
   .num {
     font-variant-numeric: tabular-nums lining-nums;
   }
   .measure {
-    max-width: 38rem;
+    max-width: 40rem;
   }
-  .prose-journal p + p {
-    text-indent: 1.4em;
-    margin-top: 0;
+  .display {
+    font-weight: 500;
+    letter-spacing: -0.015em;
+    line-height: 0.96;
+  }
+  .serif {
+    font-family: var(--font-serif);
+  }
+
+  .panel {
+    background: var(--color-panel);
+    border: 1px solid var(--color-rule);
+    border-radius: var(--radius-panel);
+  }
+
+  /* Reading text: worked examples, methods, the assistant. */
+  .prose-journal {
+    font-family: var(--font-serif);
+    font-size: var(--text-body);
+    line-height: 1.6;
   }
   .prose-journal p {
-    margin: 0 0 0;
+    margin: 0;
+  }
+  .prose-journal p + p {
+    margin-top: 0.75rem;
   }
   .prose-journal > * + *:not(p) {
     margin-top: 1.25rem;
@@ -130,30 +172,42 @@
   .prose-journal > :not(p) + p {
     margin-top: 0.9rem;
   }
+  .prose-journal h1,
+  .prose-journal h2,
+  .prose-journal h3,
+  .prose-journal h4 {
+    font-family: var(--font-sans);
+  }
 
-  /* Booktabs tables: three rules, no verticals, tabular figures. */
+  /* Tables: header band, soft row rules, tabular figures. */
   .booktabs {
     width: 100%;
     border-collapse: collapse;
     font-size: var(--text-small);
-    line-height: 1.35;
+    line-height: 1.4;
     font-variant-numeric: tabular-nums lining-nums;
   }
   .booktabs > thead > tr > th {
-    border-top: 1.25px solid var(--color-ink);
-    border-bottom: 0.75px solid var(--color-ink);
-    font-weight: 500;
+    border-bottom: 1px solid var(--color-ink);
+    font-weight: 600;
+    font-size: var(--text-caption);
+    color: var(--color-ink-2);
     text-align: left;
-    padding: 0.45rem 0.75rem 0.4rem 0;
+    padding: 0.5rem 0.9rem 0.45rem 0;
     vertical-align: bottom;
+    white-space: nowrap;
   }
   .booktabs > tbody > tr > td {
-    padding: 0.38rem 0.75rem 0.38rem 0;
+    padding: 0.5rem 0.9rem 0.5rem 0;
     vertical-align: top;
-    border-bottom: 0.5px solid var(--color-rule-soft);
+    border-bottom: 1px solid var(--color-rule-soft);
   }
   .booktabs > tbody > tr:last-child > td {
-    border-bottom: 1.25px solid var(--color-ink);
+    border-bottom: 0;
+  }
+  .booktabs > thead > tr > th:first-child,
+  .booktabs > tbody > tr > td:first-child {
+    padding-left: 0.25rem;
   }
   .booktabs .r {
     text-align: right;
@@ -162,83 +216,112 @@
     background: var(--color-wash);
   }
 
-  /* Form controls: underlined fields like a printed form. */
+  /* Form controls: boxed, white, with a malachite focus ring. */
   .field {
     display: block;
     width: 100%;
-    background: transparent;
-    border: 0;
-    border-bottom: 1px solid var(--color-ink-3);
-    padding: 0.3rem 0 0.25rem;
+    background: var(--color-panel);
+    border: 1px solid var(--color-rule);
+    border-radius: var(--radius-control);
+    padding: 0.5rem 0.7rem;
     font: inherit;
     font-size: var(--text-small);
     color: var(--color-ink);
-    border-radius: 0;
+    transition:
+      border-color 120ms,
+      box-shadow 120ms;
+  }
+  .field::placeholder {
+    color: #8a929a;
+  }
+  .field:hover {
+    border-color: #aeb6b5;
   }
   .field:focus {
     outline: none;
-    border-bottom-color: var(--color-ink);
-    box-shadow: 0 1px 0 0 var(--color-ink);
+    border-color: var(--color-malachite);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-malachite) 18%, transparent);
   }
   select.field {
     appearance: none;
-    background-image: linear-gradient(45deg, transparent 50%, var(--color-ink) 50%),
-      linear-gradient(135deg, var(--color-ink) 50%, transparent 50%);
+    background-image: linear-gradient(45deg, transparent 50%, var(--color-ink-2) 50%),
+      linear-gradient(135deg, var(--color-ink-2) 50%, transparent 50%);
     background-position:
-      calc(100% - 9px) 55%,
-      calc(100% - 5px) 55%;
+      calc(100% - 15px) 52%,
+      calc(100% - 11px) 52%;
     background-size:
       4px 4px,
       4px 4px;
     background-repeat: no-repeat;
-    padding-right: 1.25rem;
+    padding-right: 2rem;
   }
   textarea.field {
-    border: 1px solid var(--color-rule);
-    padding: 0.6rem 0.7rem;
     font-family: var(--font-mono);
     font-size: 0.78rem;
     line-height: 1.55;
-  }
-  textarea.field:focus {
-    border-color: var(--color-ink);
-    box-shadow: none;
+    padding: 0.7rem 0.8rem;
   }
   .label {
     display: block;
     font-size: var(--text-caption);
+    font-weight: 600;
     color: var(--color-ink-2);
-    margin-bottom: 0.1rem;
+    margin-bottom: 0.3rem;
   }
 
   .btn {
     display: inline-flex;
     align-items: center;
+    justify-content: center;
     gap: 0.5rem;
     font: inherit;
     font-size: var(--text-small);
-    padding: 0.4rem 1rem 0.42rem;
-    border: 1px solid var(--color-ink);
-    background: var(--color-ink);
-    color: var(--color-paper);
-    border-radius: 0;
+    font-weight: 600;
+    padding: 0.6rem 1.15rem;
+    border: 1px solid var(--color-malachite);
+    background: var(--color-malachite);
+    color: #fff;
+    border-radius: var(--radius-control);
     cursor: pointer;
     text-decoration: none;
-    line-height: 1.3;
+    line-height: 1.25;
+    /* A chunky, pressable button: it sits on a ledge and sinks when pressed. */
+    box-shadow: 0 3px 0 #0f3d31;
+    transition:
+      background-color 120ms,
+      transform 90ms ease-out,
+      box-shadow 90ms ease-out;
   }
   .btn:hover {
-    background: #262626;
+    background: #165444;
+    color: #fff;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 0 #0f3d31;
+  }
+  .btn:active {
+    transform: translateY(2px);
+    box-shadow: 0 1px 0 #0f3d31;
   }
   .btn:disabled {
-    opacity: 0.45;
+    background: #9aa5a1;
+    border-color: #9aa5a1;
+    box-shadow: 0 3px 0 #7d8884;
+    transform: none;
     cursor: not-allowed;
   }
   .btn-quiet {
-    background: transparent;
+    background: var(--color-panel);
     color: var(--color-ink);
+    border-color: var(--color-rule);
+    box-shadow: 0 3px 0 var(--color-rule);
   }
   .btn-quiet:hover {
     background: var(--color-wash);
+    color: var(--color-ink);
+    box-shadow: 0 4px 0 #b9c1bf;
+  }
+  .btn-quiet:active {
+    box-shadow: 0 1px 0 #b9c1bf;
   }
   .linkish {
     background: none;
@@ -248,9 +331,67 @@
     color: inherit;
     cursor: pointer;
     text-decoration: underline;
-    text-decoration-thickness: 0.06em;
-    text-underline-offset: 0.18em;
-    text-decoration-color: var(--color-ink-3);
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.2em;
+    text-decoration-color: color-mix(in srgb, var(--color-malachite) 55%, transparent);
+  }
+  .linkish:hover {
+    color: var(--color-malachite);
+  }
+
+  /* Key-value lists (inputs, parameters, provenance) as a ruled panel. */
+  .kv {
+    display: grid;
+    grid-template-columns: minmax(9rem, max-content) minmax(0, 1fr);
+    background: var(--color-panel);
+    border: 1px solid var(--color-rule);
+    border-radius: var(--radius-panel);
+    font-size: var(--text-small);
+    overflow: hidden;
+  }
+  .kv dt,
+  .kv dd {
+    padding: 0.45rem 1rem;
+    border-bottom: 1px solid var(--color-rule-soft);
+  }
+  .kv dt {
+    background: #f7f8f6;
+    border-right: 1px solid var(--color-rule-soft);
+  }
+  .kv > div:last-child > dt,
+  .kv > div:last-child > dd {
+    border-bottom: 0;
+  }
+
+  /* The signature rule draws itself in, left to right, each time a page opens. */
+  .stratum-draw {
+    animation: strata-draw 1100ms cubic-bezier(0.65, 0, 0.35, 1) 120ms both;
+  }
+
+  /* Headline words drop in and settle like grains. */
+  .settle {
+    display: inline-block;
+    animation: strata-settle 700ms cubic-bezier(0.2, 0.9, 0.25, 1.25) both;
+  }
+
+  /* A brief pop, for something that has just become true (a ticked requirement, a chosen chip). */
+  .pop {
+    animation: strata-pop 360ms cubic-bezier(0.3, 1.6, 0.5, 1) both;
+  }
+
+  /* The signature rule: a thin sediment column laid on its side. */
+  .stratum-rule {
+    height: 6px;
+    border-radius: 1px;
+    background: linear-gradient(
+      90deg,
+      #e9ddb4 0 30%,
+      #cdae66 30% 46%,
+      #a46a3a 46% 60%,
+      #7f8b62 60% 74%,
+      #4e6a7a 74% 88%,
+      #34404f 88% 100%
+    );
   }
 }
 
@@ -262,3 +403,145 @@
     transform: translateX(400%);
   }
 }
+
+/* Layers settle from the oldest upward when the landing core first draws. */
+@keyframes strata-deposit {
+  from {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+  to {
+    transform: scaleY(1);
+    opacity: 1;
+  }
+}
+@keyframes strata-label {
+  from {
+    opacity: 0;
+    transform: translateX(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes strata-draw {
+  from {
+    clip-path: inset(0 100% 0 0);
+  }
+  to {
+    clip-path: inset(0 0 0 0);
+  }
+}
+@keyframes strata-settle {
+  0% {
+    opacity: 0;
+    transform: translateY(-0.45em) rotate(-3deg);
+  }
+  70% {
+    opacity: 1;
+    transform: translateY(0.04em) rotate(0.4deg);
+  }
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes strata-pop {
+  0% {
+    transform: scale(0.6);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+/* Grains of sediment drifting down through the top of the core. */
+@keyframes strata-grain {
+  0% {
+    transform: translateY(-8px);
+    opacity: 0;
+  }
+  15% {
+    opacity: 0.9;
+  }
+  85% {
+    opacity: 0.7;
+  }
+  100% {
+    transform: translateY(var(--fall, 60px));
+    opacity: 0;
+  }
+}
+/* The core shudders when its surface is tapped. */
+@keyframes strata-quake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  15% {
+    transform: translateX(-4px) rotate(-0.6deg);
+  }
+  30% {
+    transform: translateX(4px) rotate(0.5deg);
+  }
+  45% {
+    transform: translateX(-3px);
+  }
+  60% {
+    transform: translateX(2px);
+  }
+  80% {
+    transform: translateX(-1px);
+  }
+}
+/* Loading: four layers drop onto a stack, then the stack clears and starts again. */
+@keyframes strata-stack {
+  0% {
+    transform: translateY(-14px);
+    opacity: 0;
+  }
+  18%,
+  80% {
+    transform: none;
+    opacity: 1;
+  }
+  100% {
+    transform: none;
+    opacity: 0;
+  }
+}
+/* The mark's layers ripple on hover. */
+@keyframes strata-ripple {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(2px);
+  }
+}
+
+.group:hover .strata-mark path {
+  animation: strata-ripple 520ms ease-in-out;
+}
+.group:hover .strata-mark path:nth-child(2) {
+  animation-delay: 60ms;
+}
+.group:hover .strata-mark path:nth-child(3) {
+  animation-delay: 120ms;
+}
+.group:hover .strata-mark path:nth-child(4) {
+  animation-delay: 180ms;
+}
+.group:hover .strata-mark path:nth-child(5) {
+  animation-delay: 240ms;
+}
+@keyframes strata-pull {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(12px);
+  }
+}
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 94a8c14..f8f19b6 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -15,18 +15,22 @@ export const metadata: Metadata = {
     "A research instrument for population genetics: PCA projection, exploratory admixture fitting and formal qpAdm modelling against a curated ancient-DNA reference library.",
 };
 
-export const viewport: Viewport = { themeColor: "#ffffff", colorScheme: "light" };
+export const viewport: Viewport = { themeColor: "#1a2129", colorScheme: "light" };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <body className="flex min-h-screen flex-col">
+      <body>
         <SessionProvider>
-          <SiteHeader />
-          <main id="main" className="mx-auto w-full max-w-[72rem] flex-1 px-5 pt-12 sm:px-8">
-            {children}
-          </main>
-          <SiteFooter />
+          <div className="lg:grid lg:grid-cols-[16rem_minmax(0,1fr)] lg:bg-[linear-gradient(to_right,var(--color-basalt)_16rem,transparent_16rem)]">
+            <SiteHeader />
+            <div className="flex min-h-screen min-w-0 flex-col">
+              <main id="main" className="mx-auto w-full max-w-[76rem] flex-1 px-5 pt-10 sm:px-10 lg:pt-14">
+                {children}
+              </main>
+              <SiteFooter />
+            </div>
+          </div>
         </SessionProvider>
       </body>
     </html>
diff --git a/apps/web/src/app/library/page.tsx b/apps/web/src/app/library/page.tsx
index 78ba523..fc85e52 100644
--- a/apps/web/src/app/library/page.tsx
+++ b/apps/web/src/app/library/page.tsx
@@ -10,6 +10,7 @@ import type { Facets, PopulationQuery, Publication } from "@/lib/types";
 import { OriginsMap } from "@/components/charts/OriginsMap";
 import { Empty, ErrorNote, Figure, Loading, PageHeader } from "@/components/typography";
 import { shortCitation } from "@/lib/citation";
+import { periodStyle, sortPeriods } from "@/lib/periods";
 
 const PAGE_SIZE = 50;
 
@@ -106,7 +107,6 @@ function Library() {
 
   const selects: Array<[string, keyof Facets, string | undefined, (v: string) => void]> = [
     ["Region", "region", query.region, (v) => set({ region: v || undefined })],
-    ["Period", "period", query.period, (v) => set({ period: v || undefined })],
     ["Source dataset", "source_dataset", query.source_dataset, (v) => set({ source_dataset: v || undefined })],
   ];
 
@@ -115,12 +115,11 @@ function Library() {
       <PageHeader
         kicker="Reference library"
         title="Reference populations"
-        lede="Ancient and present-day groups available as sources, outgroups and points of comparison. Dates are calibrated years before present (BP, present = 1950)."
+        lede="Dates in calibrated years BP."
         aside={
           data ? (
             <p className="num">
-              {int(data.total)} population{data.total === 1 ? "" : "s"} match
-              {data.total === 1 ? "es" : ""} the current filters.
+              {int(data.total)} population{data.total === 1 ? "" : "s"}
             </p>
           ) : null
         }
@@ -129,11 +128,46 @@ function Library() {
       <form
         role="search"
         aria-label="Filter reference populations"
-        className="mb-10 grid grid-cols-2 gap-x-6 gap-y-5 md:grid-cols-4 lg:grid-cols-[2fr_1fr_1fr_1fr_0.7fr_0.7fr]"
+        className="panel mb-10 p-4 sm:p-5"
         onSubmit={(e) => e.preventDefault()}
       >
+        <fieldset className="mb-5">
+          <legend className="label">Period</legend>
+          <div className="flex flex-wrap gap-1.5">
+            {[null, ...sortPeriods(facets.period, (p) => p)].map((p) => {
+              const active = (query.period ?? null) === p;
+              const st = periodStyle(p);
+              return (
+                <button
+                  key={p ?? "all"}
+                  type="button"
+                  aria-pressed={active}
+                  onClick={() => set({ period: p ?? undefined })}
+                  className={`inline-flex items-center gap-2 rounded-full border py-1 pr-3 pl-1.5 text-small transition-colors ${
+                    active
+                      ? "border-ink bg-ink text-white"
+                      : "border-rule bg-panel text-ink-2 hover:border-ink-3 hover:text-ink"
+                  }`}
+                >
+                  {p ? (
+                    <span
+                      key={active ? "on" : "off"}
+                      className={`size-3.5 rounded-full ring-1 ring-black/10 ${active ? "pop" : ""}`}
+                      style={{ background: st.color }}
+                      aria-hidden
+                    />
+                  ) : (
+                    <span className="stratum-rule size-3.5 rounded-full" aria-hidden />
+                  )}
+                  {p ?? "All periods"}
+                </button>
+              );
+            })}
+          </div>
+        </fieldset>
+        <div className="grid grid-cols-2 gap-x-4 gap-y-4 md:grid-cols-4 lg:grid-cols-[2fr_1fr_1fr_0.7fr_0.7fr]">
         <label className="col-span-2 md:col-span-4 lg:col-span-1">
-          <span className="label">Search names, sites and publications</span>
+          <span className="label">Search</span>
           <input
             className="field"
             type="search"
@@ -175,6 +209,7 @@ function Library() {
             placeholder="50 000"
           />
         </label>
+        </div>
       </form>
 
       {pops.loading && !data ? <Loading what="the reference library" /> : null}
@@ -196,7 +231,7 @@ function Library() {
         <>
           <Figure
             n={1}
-            caption={`Sampling locations of the ${last - first + 1} populations listed in Table 1. Marker area is proportional to the number of individuals. Select a marker to open the population.`}
+            caption="Marker size is the number of individuals. Click one to open it."
           >
             <OriginsMap
               title="Map of population sampling locations"
@@ -216,14 +251,12 @@ function Library() {
 
           <figure className="my-8">
             <figcaption className="mb-2 text-caption text-ink-2">
-              <span className="font-semibold text-ink">Table 1.</span> Reference populations{" "}
               <span className="num">
                 {first}&ndash;{last}
               </span>{" "}
-              of <span className="num">{int(data.total)}</span>. Dates give the range of sample
-              dates within the group; <em>n</em> is the number of individuals.
+              of <span className="num">{int(data.total)}</span>
             </figcaption>
-            <div className="overflow-x-auto">
+            <div className="panel overflow-x-auto px-4 py-2">
               <table className="booktabs">
                 <thead>
                   <tr>
@@ -241,11 +274,20 @@ function Library() {
                 <tbody>
                   {data.items.map((p) => (
                     <tr key={p.id} data-interactive="">
-                      <td>
-                        <Link href={`/library/population/?id=${encodeURIComponent(p.id)}`}>{p.name}</Link>
+                      <td className="font-medium">
+                        <Link href={`/library/population/?id=${encodeURIComponent(p.id)}`} className="no-underline hover:underline">
+                          {p.name}
+                        </Link>
                       </td>
                       <td>{p.region ?? "—"}</td>
-                      <td>{p.period ?? "—"}</td>
+                      <td className="whitespace-nowrap">
+                        <span
+                          className="mr-2 inline-block h-2.5 w-4 rounded-[2px] align-[0.02em] ring-1 ring-black/10"
+                          style={{ background: periodStyle(p.period).color }}
+                          aria-hidden
+                        />
+                        {p.period ?? "—"}
+                      </td>
                       <td className="r num whitespace-nowrap">
                         {bpRange(p.date_min_bp, p.date_max_bp, p.date_mean_bp)}
                       </td>
@@ -253,12 +295,14 @@ function Library() {
                       <td>{p.data_source}</td>
                       <td className="text-ink-2">
                         {p.publication_ids.length
-                          ? p.publication_ids
-                              .map((id) => {
-                                const pub = pubIndex.get(id);
-                                return pub ? shortCitation(pub) : id;
-                              })
-                              .join("; ")
+                          ? [
+                              ...new Set(
+                                p.publication_ids.map((id) => {
+                                  const pub = pubIndex.get(id);
+                                  return pub ? shortCitation(pub) : id;
+                                }),
+                              ),
+                            ].join("; ")
                           : "—"}
                       </td>
                     </tr>
diff --git a/apps/web/src/app/methods/page.tsx b/apps/web/src/app/methods/page.tsx
index 2bfae17..6a277c8 100644
--- a/apps/web/src/app/methods/page.tsx
+++ b/apps/web/src/app/methods/page.tsx
@@ -12,7 +12,7 @@ export default function MethodsPage() {
       <PageHeader
         kicker="Documentation"
         title="Methods"
-        lede="The statistics Strata computes, their assumptions, and how their results should be read. The research assistant retrieves from these same texts and cites them by section."
+        lede="What each statistic assumes."
       />
       {docs.length === 0 ? (
         <Empty>
diff --git a/apps/web/src/app/not-found.tsx b/apps/web/src/app/not-found.tsx
new file mode 100644
index 0000000..bd0ae66
--- /dev/null
+++ b/apps/web/src/app/not-found.tsx
@@ -0,0 +1,29 @@
+import Link from "next/link";
+import { StrataMark } from "@/components/StrataMark";
+
+export default function NotFound() {
+  return (
+    <article className="flex flex-col items-start gap-6 py-10 sm:flex-row sm:items-center sm:gap-12">
+      <div className="relative h-56 w-20 shrink-0 overflow-hidden rounded-b-[40%_12px] border border-dashed border-ink-3/60">
+        <div className="absolute inset-x-0 bottom-0 h-1/4 bg-[#34404f]/15" />
+        <div className="absolute inset-x-0 top-3 flex justify-center opacity-60">
+          <StrataMark size={18} />
+        </div>
+      </div>
+      <div>
+        <h1 className="display text-[2.6rem] sm:text-h1">Nothing at this depth.</h1>
+        <p className="measure mt-4 text-[1.3rem] leading-[1.5] text-ink-2">
+          The page you dug for is not in this core. It may have moved, or the link may be wrong.
+        </p>
+        <div className="mt-7 flex flex-wrap gap-3">
+          <Link href="/" className="btn">
+            Back to the surface
+          </Link>
+          <Link href="/library/" className="btn btn-quiet">
+            Browse the library
+          </Link>
+        </div>
+      </div>
+    </article>
+  );
+}
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 3f7adc4..9bc33c5 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -1,39 +1,210 @@
 "use client";
 
 import Link from "next/link";
+import { Fragment, useEffect, useMemo, useRef, useState } from "react";
 import { api } from "@/lib/api";
 import { useResource } from "@/lib/useResource";
-import { analysisLabel } from "@/lib/format";
+import { analysisLabel, int } from "@/lib/format";
+import { sortPeriods } from "@/lib/periods";
+import type { PopulationSummary } from "@/lib/types";
 import { PcaPlot } from "@/components/charts/PcaPlot";
+import { CoreSample, type Layer } from "@/components/charts/CoreSample";
 import { useSession } from "@/components/SessionProvider";
-import { Empty, ErrorNote, Figure, Footnote, KindMark, Loading, Section } from "@/components/typography";
+import { Empty, ErrorNote, KindMark, Loading } from "@/components/typography";
 
-function LibraryFigure() {
+/** Every population in the library, fetched page by page (the API caps a page). */
+async function allPopulations(signal: AbortSignal): Promise<PopulationSummary[]> {
+  const out: PopulationSummary[] = [];
+  for (let page = 1; page < 50; page++) {
+    const res = await api.populations({ page, page_size: 200 }, signal);
+    out.push(...res.items);
+    if (out.length >= res.total || res.items.length === 0) break;
+  }
+  return out;
+}
+
+function toLayers(pops: PopulationSummary[]): Layer[] {
+  const by = new Map<string, Layer>();
+  for (const p of pops) {
+    const key = p.period ?? "Undated";
+    const l = by.get(key) ?? { period: key, populations: 0, individuals: 0, minBp: null, maxBp: null };
+    l.populations += 1;
+    l.individuals += p.n_samples ?? 0;
+    const lo = p.date_min_bp ?? p.date_mean_bp;
+    const hi = p.date_max_bp ?? p.date_mean_bp;
+    if (lo !== null && lo !== undefined) l.minBp = l.minBp === null ? lo : Math.min(l.minBp, lo);
+    if (hi !== null && hi !== undefined) l.maxBp = l.maxBp === null ? hi : Math.max(l.maxBp, hi);
+    by.set(key, l);
+  }
+  return sortPeriods([...by.values()], (l) => l.period);
+}
+
+function LibraryCore() {
+  const pops = useResource((s) => allPopulations(s), []);
+  const layers = useMemo(() => toLayers(pops.data ?? []), [pops.data]);
+  if (pops.loading) return <Loading what="the reference library" />;
+  if (pops.error) return <ErrorNote error={pops.error} retry={pops.reload} />;
+  if (!layers.length)
+    return (
+      <Empty>
+        The reference library has not been built on this server yet. The data pipeline in{" "}
+        <code>data/pipeline</code> builds it; see <Link href="/data/">Data</Link>.
+      </Empty>
+    );
+  const total = pops.data!.length;
+  const individuals = pops.data!.reduce((a, p) => a + (p.n_samples ?? 0), 0);
+  return (
+    <figure>
+      <CoreSample layers={layers} height={540} />
+      <figcaption className="mt-4 text-caption text-ink-3">
+        <span className="num text-ink-2">{int(total)}</span> populations,{" "}
+        <span className="num text-ink-2">{int(individuals)}</span> individuals. Click a layer to browse it.
+      </figcaption>
+    </figure>
+  );
+}
+
+const STEPS: Array<{ title: string; body: string; href: string; action: string }> = [
+  {
+    title: "Upload",
+    body: "23andMe, AncestryDNA, VCF or G25.",
+    href: "/upload/",
+    action: "Upload a file",
+  },
+  {
+    title: "Place",
+    body: "See where you sit in the reference PCA.",
+    href: "/analyses/new/?method=pca_project",
+    action: "Project a sample",
+  },
+  {
+    title: "Fit",
+    body: "Find the closest mix of source populations.",
+    href: "/analyses/new/?method=admixture_fit",
+    action: "Fit sources",
+  },
+  {
+    title: "Test",
+    body: "Test that mix formally with qpAdm.",
+    href: "/analyses/new/?method=qpadm",
+    action: "Set up qpAdm",
+  },
+];
+
+/** True once the element has scrolled into view (and stays true). */
+function useSeen<T extends HTMLElement>(): [React.RefObject<T | null>, boolean] {
+  const ref = useRef<T | null>(null);
+  const [seen, setSeen] = useState(false);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || typeof IntersectionObserver === "undefined") {
+      setSeen(true);
+      return;
+    }
+    const io = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((e) => e.isIntersecting)) {
+          setSeen(true);
+          io.disconnect();
+        }
+      },
+      { threshold: 0.35 },
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, []);
+  return [ref, seen];
+}
+
+function Workflow() {
+  const [ref, seen] = useSeen<HTMLOListElement>();
+  return (
+    <ol ref={ref} className="relative grid gap-8 sm:grid-cols-2 lg:grid-cols-4 lg:gap-6">
+      <span
+        aria-hidden
+        className="absolute top-[0.9rem] right-[calc(25%-0.6rem)] left-[0.9rem] hidden h-px origin-left bg-ink/25 transition-transform duration-[1400ms] ease-[cubic-bezier(.65,0,.35,1)] lg:block"
+        style={{ transform: seen ? "scaleX(1)" : "scaleX(0)" }}
+      />
+      {STEPS.map((s, i) => (
+        <li key={s.title} className="group relative">
+          <span
+            className={`num relative z-10 mb-4 flex size-7 items-center justify-center rounded-full bg-ink text-[0.9rem] font-semibold text-white transition-[background-color,transform] duration-200 group-hover:-translate-y-0.5 group-hover:rotate-[-8deg] group-hover:bg-malachite ${
+              seen ? "pop" : ""
+            }`}
+            style={{ animationDelay: `${i * 300}ms` }}
+          >
+            {i + 1}
+          </span>
+          <h3 className="text-h3">{s.title}</h3>
+          <p className="mt-1.5 text-small leading-[1.55] text-ink-2">{s.body}</p>
+          <Link href={s.href} className="mt-3 inline-block text-small font-semibold">
+            {s.action}
+          </Link>
+        </li>
+      ))}
+    </ol>
+  );
+}
+
+function ReferenceSpace() {
   const spaces = useResource((s) => api.spaces(s), []);
   if (spaces.loading) return <Loading what="the reference space" />;
   if (spaces.error) return <ErrorNote error={spaces.error} retry={spaces.reload} />;
   const space = spaces.data?.find((s) => s.populations.length > 0);
   if (!space)
-    return (
-      <Empty>
-        The reference library has not been built on this server yet, so there is nothing to plot.
-        The data pipeline in <code>data/pipeline</code> builds it; see <Link href="/data/">Data</Link>.
-      </Empty>
-    );
+    return <Empty>The reference space has not been built on this server yet, so there is nothing to plot.</Empty>;
   return (
-    <Figure
-      n={1}
-      caption={
-        <>
-          The reference library in the <em>{space.name}</em> coordinate space, first two components.
-          Each mark is a population mean ({space.populations.length} populations), coloured and shaped
-          by region. Hover a mark for its name and sample count; the full interactive view is in the{" "}
-          <Link href="/library/">library</Link>.
-        </>
-      }
-    >
-      <PcaPlot space={space} compact height={420} />
-    </Figure>
+    <div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_16rem] lg:gap-12">
+      <figure className="panel min-w-0 p-3 sm:p-5">
+        <PcaPlot space={space} compact height={430} />
+      </figure>
+      <div className="text-small leading-[1.6] text-ink-2 lg:pt-2">
+        <p>
+          <span className="num font-semibold text-ink">{space.populations.length}</span> populations. Hover
+          a mark for its name.
+        </p>
+        <p className="mt-4">
+          <Link href="/library/" className="font-semibold">
+            Open the library
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function TwoKinds() {
+  const rows: Array<[string, string, string]> = [
+    ["Asks", "Which mix of sources sits closest?", "Does this model survive the data?"],
+    ["Remember", "A good fit is not proof of admixture.", "Not rejected is not the same as true."],
+  ];
+  const col = (k: 1 | 2) => (
+    <dl className="space-y-4">
+      {rows.map((r) => (
+        <div key={r[0]}>
+          <dt className="text-caption font-semibold text-ink-3">{r[0]}</dt>
+          <dd className="mt-0.5 text-small leading-[1.55] text-ink">{r[k]}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+  return (
+    <div className="grid gap-4 md:grid-cols-2">
+      <div className="rounded-[var(--radius-panel)] border border-dashed border-[#c08419] bg-loess-soft/60 p-5 sm:p-6">
+        <p className="mb-4 flex items-center gap-2">
+          <KindMark kind="exploratory" />
+          <span className="text-small text-ink-2">PCA, nearest, mixture fits</span>
+        </p>
+        {col(1)}
+      </div>
+      <div className="rounded-[var(--radius-panel)] border border-malachite bg-malachite-soft/70 p-5 sm:p-6">
+        <p className="mb-4 flex items-center gap-2">
+          <KindMark kind="formal" />
+          <span className="text-small text-ink-2">qpAdm, qpWave, f4</span>
+        </p>
+        {col(2)}
+      </div>
+    </div>
   );
 }
 
@@ -42,180 +213,107 @@ function ExampleList() {
   if (ex.loading) return <Loading what="examples" />;
   if (ex.error) return <ErrorNote error={ex.error} retry={ex.reload} />;
   if (!ex.data?.length)
-    return (
-      <Empty>
-        No precomputed examples are published on this server yet. They are produced by{" "}
-        <code>data/pipeline</code> from public reference data.
-      </Empty>
-    );
+    return <Empty>No precomputed examples are published on this server yet.</Empty>;
   const notes = [...new Set(ex.data.map((e) => e.caveats?.[0]).filter((c): c is string => !!c))];
   return (
     <>
-    <ol className="divide-y divide-rule-soft border-y border-rule">
-      {ex.data.slice(0, 5).map((e, i) => (
-        <li key={e.slug} className="grid grid-cols-[2rem_1fr] gap-2 py-3">
-          <span className="num pt-0.5 text-small text-ink-3">{i + 1}.</span>
-          <div>
-            <Link href={`/examples/view/?slug=${encodeURIComponent(e.slug)}`} className="text-h3 leading-tight">
-              {e.title}
-            </Link>{" "}
-            <KindMark kind={e.result_kind} />
-            <p className="mt-1 text-small text-ink-2">
-              {analysisLabel(e.kind)}. {e.summary}
-            </p>
-          </div>
-        </li>
-      ))}
-    </ol>
-    {notes.map((n) => (
-      <Footnote key={n} mark="*">
-        {n}
-      </Footnote>
-    ))}
+      <ul className="panel divide-y divide-rule-soft">
+        {ex.data.slice(0, 5).map((e) => (
+          <li key={e.slug}>
+            <Link
+              href={`/examples/view/?slug=${encodeURIComponent(e.slug)}`}
+              className="group grid gap-x-6 gap-y-1 px-5 py-4 no-underline hover:bg-wash sm:grid-cols-[minmax(0,1fr)_auto]"
+            >
+              <span className="min-w-0">
+                <span className="block text-[1.2rem] leading-snug font-semibold text-ink group-hover:text-malachite">
+                  {e.title}
+                </span>
+              </span>
+              <span className="flex items-start gap-2 sm:justify-end sm:pt-0.5">
+                <span className="text-caption text-ink-3">{analysisLabel(e.kind)}</span>
+                <KindMark kind={e.result_kind} />
+              </span>
+            </Link>
+          </li>
+        ))}
+      </ul>
+      {notes.length ? (
+        <p className="mt-3 text-caption text-ink-3">Archaic demo data from ADMIXTOOLS 2, not South Asian samples.</p>
+      ) : null}
     </>
   );
 }
 
+function Heading({ children, id }: { children: React.ReactNode; id: string }) {
+  return (
+    <h2 id={id} className="mb-6 text-h2">
+      {children}
+    </h2>
+  );
+}
+
 export default function Home() {
   const { session } = useSession();
   return (
     <article>
-      <header className="mb-14 grid gap-10 lg:grid-cols-[minmax(0,1fr)_15rem] lg:gap-14">
-        <div>
-          <h1 className="text-[2.6rem] leading-[1.06] font-normal sm:text-display">
-            Strata
-            <span className="mt-2 block text-[1.6rem] leading-[1.2] text-ink-2 italic sm:text-[2.1rem]">
-              a research instrument for population genetics
-            </span>
+      <header className="mb-20 grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(20rem,26rem)] lg:gap-14">
+        <div className="flex flex-col">
+          <h1 className="display text-[2.9rem] sm:text-[3.6rem] xl:text-display">
+            {["Ancient", "DNA,", "read", "layer", "by", "layer."].map((w, i) => (
+              <Fragment key={i}>
+                <span className="settle" style={{ animationDelay: `${120 + i * 90}ms` }}>
+                  {w}
+                </span>{" "}
+              </Fragment>
+            ))}
           </h1>
-          <div className="measure mt-10">
-            <p className="smallcaps mb-2 text-ink-3">Abstract</p>
-            <p className="text-[1.25rem] leading-[1.55]">
-              Strata places a genome, or a set of Global25-style coordinates, among a curated library
-              of ancient and present-day reference populations. It projects samples into a shared
-              principal-component space, ranks nearby populations, fits exploratory mixture models
-              with bootstrap intervals, and runs formal qpAdm tests on f-statistics through
-              ADMIXTOOLS&nbsp;2. Every result states its method, its uncertainty and the reference
-              data it rests on.
-            </p>
-          </div>
-          <div className="mt-8 flex flex-wrap items-center gap-x-6 gap-y-3">
-            <Link href="/upload/" className="btn no-underline">
-              Upload a dataset
+          <p className="serif measure mt-7 text-[1.4rem] leading-[1.55] text-ink-2">
+            Place your genome among ancient populations, then test models of your ancestry.
+          </p>
+          <div className="mt-8 flex flex-wrap items-center gap-3">
+            <Link href="/upload/" className="btn">
+              Upload a genome
             </Link>
-            <Link href="/examples/" className="text-small">
-              Read the worked examples
+            <Link href="/examples/" className="btn btn-quiet">
+              See worked examples
             </Link>
           </div>
-        </div>
-        <aside className="self-end border-t border-ink pt-3 text-caption leading-[1.6] text-ink-2">
-          <p>
-            {session.status === "guest"
-              ? "You are working as a guest. Uploads and analyses are kept for 24 hours, then deleted."
-              : session.status === "signed-in"
-                ? "You are signed in. Your workspace persists until you delete it."
-                : session.status === "offline"
-                  ? "The API is not reachable, so a guest workspace could not be opened."
-                  : "Opening a guest workspace…"}
-          </p>
-          <p className="mt-2">
-            Raw genotype files are parsed in memory. Only the SNPs on the reference panel are kept,
-            encrypted, and they are never sent to a language model.
+          <p className="mt-auto pt-10 text-caption text-ink-3">
+            Your genotypes are encrypted and never reach the AI.
+            {session.status === "guest" ? " Guest data is deleted after 24 hours." : ""}
           </p>
-        </aside>
+        </div>
+        <div className="min-w-0">
+          <LibraryCore />
+        </div>
       </header>
 
-      <Section n={1} title="What it does" id="what">
-        <div className="grid gap-10 lg:grid-cols-[minmax(0,1fr)_15rem] lg:gap-14">
-          <div className="min-w-0">
-            <LibraryFigure />
-          </div>
-          <ol className="space-y-4 text-small leading-[1.55] text-ink-2 lg:pt-8">
-            <li>
-              <span className="text-ink">Project.</span> Place a sample in the reference PCA using
-              only the SNPs it carries.
-            </li>
-            <li>
-              <span className="text-ink">Compare.</span> Rank reference populations by distance in
-              the same space.
-            </li>
-            <li>
-              <span className="text-ink">Model.</span> Fit and rotate candidate sources, then test
-              the surviving models formally with qpAdm.
-            </li>
-            <li>
-              <span className="text-ink">Ask.</span> Pose questions to a research assistant that
-              runs these analyses and cites what it ran.
-            </li>
-          </ol>
-        </div>
-      </Section>
+      <section className="mb-20" aria-labelledby="flow">
+        <Heading id="flow">How it works</Heading>
+        <Workflow />
+      </section>
 
-      <Section n={2} title="Exploratory fits and formal tests" id="kinds">
-        <p className="measure mb-6">
-          Strata keeps two families of results apart, because they answer different questions. The
-          distinction is marked on every result.
-        </p>
-        <div className="overflow-x-auto">
-          <table className="booktabs max-w-[52rem]">
-            <thead>
-              <tr>
-                <th className="w-[11rem]" />
-                <th>
-                  <KindMark kind="exploratory" />
-                </th>
-                <th>
-                  <KindMark kind="formal" />
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td className="italic">Method</td>
-                <td>Non-negative least squares on PCA or G25 coordinates</td>
-                <td>qpAdm on f4-statistics (ADMIXTOOLS&nbsp;2)</td>
-              </tr>
-              <tr>
-                <td className="italic">Question</td>
-                <td>Which mixture of sources lies closest to the target in this space?</td>
-                <td>Is the target consistent with descending from these sources, given outgroups?</td>
-              </tr>
-              <tr>
-                <td className="italic">Uncertainty</td>
-                <td>Bootstrap over source individuals; sensitivity to dropped sources and dimensions</td>
-                <td>Block-jackknife standard errors; tail probability of the rank test</td>
-              </tr>
-              <tr>
-                <td className="italic">Reading</td>
-                <td>A description of geometry. A good fit is not evidence of admixture.</td>
-                <td>A model can be rejected. A model that is not rejected may still be wrong.</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </Section>
+      <section className="mb-20" aria-labelledby="space">
+        <Heading id="space">The reference space</Heading>
+        <ReferenceSpace />
+      </section>
 
-      <Section n={3} title="Worked examples" id="examples">
-        <p className="measure mb-6">
-          Each example is computed from public reference data with the same code you run here, and
-          carries its inputs and provenance.
-        </p>
-        <ExampleList />
-      </Section>
-
-      <Section n={4} title="Where to begin" id="begin">
-        <div className="measure space-y-3">
-          <p>
-            Browse the <Link href="/library/">reference library</Link> to see which populations and
-            periods are covered. Then <Link href="/upload/">upload</Link> a raw file from 23andMe,
-            AncestryDNA, FamilyTreeDNA or MyHeritage, a single-sample VCF, or paste G25 coordinates,
-            and <Link href="/analyses/new/">compose an analysis</Link>.
-          </p>
-          <p>
-            The <Link href="/methods/">methods</Link> describe each statistic and its assumptions.
-          </p>
+      <section className="mb-20" aria-labelledby="kinds">
+        <Heading id="kinds">Two kinds of answer</Heading>
+        <TwoKinds />
+      </section>
+
+      <section aria-labelledby="examples">
+        <div className="mb-6 flex flex-wrap items-baseline justify-between gap-4">
+          <h2 id="examples" className="text-h2">
+            Worked examples
+          </h2>
+          <Link href="/examples/" className="text-small font-semibold">
+            All examples
+          </Link>
         </div>
-      </Section>
+        <ExampleList />
+      </section>
     </article>
   );
 }
diff --git a/apps/web/src/app/upload/page.tsx b/apps/web/src/app/upload/page.tsx
index 849c2c0..0a9628a 100644
--- a/apps/web/src/app/upload/page.tsx
+++ b/apps/web/src/app/upload/page.tsx
@@ -57,10 +57,9 @@ export default function UploadPage() {
       <PageHeader
         kicker="Datasets"
         title="Upload a dataset"
-        lede="Paste Global25-style coordinates, or add a raw genotype file from a consumer test or a single-sample VCF."
       />
 
-      <Caveat title="How your genetic data is handled">
+      <Caveat title="Your data is encrypted, and the assistant never sees it">
         Files are parsed in memory on the Strata server. Only genotypes at SNPs on the reference panel
         are kept, encrypted with a key unique to this dataset; deleting the dataset destroys the key.
         {session.status === "guest" ? (
@@ -84,54 +83,10 @@ export default function UploadPage() {
         />
       </div>
 
-      <div className="grid gap-14 lg:grid-cols-2">
-        <Section n={1} title="G25 coordinates" id="g25">
-          <label htmlFor={ids.g25} className="label">
-            One sample per line: a name, then 25 comma-separated coordinates. A header row is optional.
-          </label>
-          <textarea
-            id={ids.g25}
-            className="field h-56 resize-y"
-            spellCheck={false}
-            value={g25}
-            onChange={(e) => setG25(e.target.value)}
-            placeholder={"Sample_1,0.1234,0.0456,-0.0210, … (25 values)"}
-            aria-describedby={`${ids.g25}-status`}
-          />
-          <div id={`${ids.g25}-status`} className="mt-2 min-h-[1.5rem] text-caption" aria-live="polite">
-            {preview ? (
-              preview.errors.length ? (
-                <ul className="space-y-0.5 text-alert">
-                  {preview.errors.slice(0, 4).map((e) => (
-                    <li key={e.line}>
-                      Line {e.line}: {e.message}.
-                    </li>
-                  ))}
-                  {preview.errors.length > 4 ? <li>and {preview.errors.length - 4} more problems.</li> : null}
-                </ul>
-              ) : (
-                <p className="text-ink-2">
-                  {preview.rows.length} sample{preview.rows.length === 1 ? "" : "s"} recognised
-                  {preview.hadHeader ? ", header row skipped" : ""}.
-                  {preview.warnings.length ? ` ${preview.warnings[0]!.message}.` : ""}
-                </p>
-              )
-            ) : null}
-          </div>
-          <button
-            type="button"
-            className="btn mt-4"
-            disabled={busy || !preview || preview.rows.length === 0 || preview.errors.length > 0}
-            onClick={() => submit("g25")}
-          >
-            {busy ? "Uploading…" : "Upload coordinates"}
-          </button>
-        </Section>
-
-        <Section n={2} title="Raw genotype file" id="raw">
+      <div className="grid gap-x-14 gap-y-4 lg:grid-cols-2">
+        <Section title="Raw genotype file" id="raw">
           <p className="mb-3 text-small text-ink-2">
-            23andMe (v3 to v5), AncestryDNA (v1, v2), FamilyTreeDNA and MyHeritage CSV, or a
-            single-sample VCF. Plain text, .zip or .gz, up to 60&nbsp;MB.
+            23andMe, AncestryDNA, FamilyTreeDNA, MyHeritage or VCF. Up to 60&nbsp;MB.
           </p>
           <div
             onDragOver={(e) => {
@@ -144,8 +99,8 @@ export default function UploadPage() {
               setDragging(false);
               pick(e.dataTransfer.files[0]);
             }}
-            className={`flex h-56 flex-col items-center justify-center border border-dashed px-6 text-center text-small ${
-              dragging ? "border-ink bg-wash" : "border-ink-3"
+            className={`flex h-56 flex-col items-center justify-center rounded-[var(--radius-panel)] border-2 border-dashed px-6 text-center text-small transition-colors ${
+              dragging ? "border-malachite bg-malachite-soft" : "border-rule bg-panel"
             }`}
           >
             {file ? (
@@ -158,7 +113,7 @@ export default function UploadPage() {
               </>
             ) : (
               <>
-                <p className="italic">Drop the file here</p>
+                <p className="text-[1.2rem] font-semibold">Drop the file here</p>
                 <p className="my-1 text-caption text-ink-3">or</p>
                 <label htmlFor={ids.file} className="linkish cursor-pointer">
                   choose a file from your computer
@@ -178,6 +133,50 @@ export default function UploadPage() {
             {busy ? "Uploading and checking…" : "Upload file"}
           </button>
         </Section>
+
+        <Section title="Or paste G25 coordinates" id="g25">
+          <label htmlFor={ids.g25} className="label">
+            One sample per line: a name, then 25 values.
+          </label>
+          <textarea
+            id={ids.g25}
+            className="field h-56 resize-y"
+            spellCheck={false}
+            value={g25}
+            onChange={(e) => setG25(e.target.value)}
+            placeholder={"Sample_1,0.1234,0.0456,-0.0210, … (25 values)"}
+            aria-describedby={`${ids.g25}-status`}
+          />
+          <div id={`${ids.g25}-status`} className="mt-2 min-h-[1.5rem] text-caption" aria-live="polite">
+            {preview ? (
+              preview.errors.length ? (
+                <ul className="space-y-0.5 text-alert">
+                  {preview.errors.slice(0, 4).map((e) => (
+                    <li key={e.line}>
+                      Line {e.line}: {e.message}.
+                    </li>
+                  ))}
+                  {preview.errors.length > 4 ? <li>and {preview.errors.length - 4} more problems.</li> : null}
+                </ul>
+              ) : (
+                <p className="text-ink-2">
+                  {preview.rows.length} sample{preview.rows.length === 1 ? "" : "s"} recognised
+                  {preview.hadHeader ? ", header row skipped" : ""}.
+                  {preview.warnings.length ? ` ${preview.warnings[0]!.message}.` : ""}
+                </p>
+              )
+            ) : null}
+          </div>
+          <button
+            type="button"
+            className="btn mt-4"
+            disabled={busy || !preview || preview.rows.length === 0 || preview.errors.length > 0}
+            onClick={() => submit("g25")}
+          >
+            {busy ? "Uploading…" : "Upload coordinates"}
+          </button>
+        </Section>
+
       </div>
 
       {error ? <ErrorNote error={error} /> : null}
diff --git a/apps/web/src/app/workspace/page.tsx b/apps/web/src/app/workspace/page.tsx
index d266015..262e1a6 100644
--- a/apps/web/src/app/workspace/page.tsx
+++ b/apps/web/src/app/workspace/page.tsx
@@ -164,8 +164,8 @@ export default function WorkspacePage() {
         title="Your analyses and datasets"
         lede={
           session.status === "guest"
-            ? "This is a guest workspace. Everything here is deleted 24 hours after it was created."
-            : "Analyses and datasets you have created. Deleting a dataset destroys its encryption key."
+            ? "Guest workspace. Deleted after 24 hours."
+            : undefined
         }
       />
 
@@ -203,7 +203,7 @@ export default function WorkspacePage() {
                     <td>
                       <input
                         type="checkbox"
-                        className="accent-black"
+                        className=""
                         aria-label={`Compare ${a.title ?? analysisLabel(a.kind)}`}
                         disabled={!comparable(a) || (!selected.includes(a.id) && selected.length >= MAX_COMPARE)}
                         checked={selected.includes(a.id)}
diff --git a/apps/web/src/components/SiteFooter.tsx b/apps/web/src/components/SiteFooter.tsx
index 9dfa27f..ae4c329 100644
--- a/apps/web/src/components/SiteFooter.tsx
+++ b/apps/web/src/components/SiteFooter.tsx
@@ -1,36 +1,15 @@
-"use client";
-
 import Link from "next/link";
-import { useSession } from "./SessionProvider";
 
 export function SiteFooter() {
-  const { health } = useSession();
-  const caps = health?.capabilities;
   return (
-    <footer className="mx-auto mt-24 w-full max-w-[72rem] px-5 pb-12 sm:px-8">
-      <div className="grid gap-6 border-t border-ink pt-5 text-caption leading-[1.6] text-ink-2 sm:grid-cols-3">
-        <p>
-          Strata is open-source software for population-genetic analysis. Exploratory fits in PCA
-          or G25 space are not formal tests; see <Link href="/methods/">Methods</Link>.
-        </p>
-        <p>
-          Reference data derive from the Allen Ancient DNA Resource and the publications cited in
-          the <Link href="/library/">library</Link>. Provenance and licences are listed under{" "}
-          <Link href="/data/">Data</Link>.
-        </p>
-        <dl className="grid grid-cols-[auto_1fr] gap-x-4">
-          <dt>API</dt>
-          <dd className="num">{health ? `${health.status}, v${health.version}` : "not connected"}</dd>
-          <dt>Reference</dt>
-          <dd className="num">{caps?.reference_version ?? "not built"}</dd>
-          <dt>qpAdm</dt>
-          <dd>{caps ? (caps.qpadm ? "available" : "unavailable on this server") : "—"}</dd>
-          <dt>Assistant</dt>
-          <dd>
-            {caps ? (caps.llm_providers.length ? caps.llm_providers.join(", ") : "bring your own API key") : "—"}
-          </dd>
-        </dl>
-      </div>
+    <footer className="mx-auto mt-24 w-full max-w-[76rem] px-5 pb-10 sm:px-10">
+      <div className="stratum-rule mb-5 opacity-80 transition-[height,opacity] duration-300 hover:h-4 hover:opacity-100" aria-hidden />
+      <p className="flex flex-wrap gap-x-5 gap-y-1 text-caption text-ink-3">
+        <span className="italic">Dug up by hand, one layer at a time.</span>
+        <Link href="/methods/">Methods</Link>
+        <Link href="/data/">Data and licences</Link>
+        <a href="https://github.com/gothicscientist/strata">Source</a>
+      </p>
     </footer>
   );
 }
diff --git a/apps/web/src/components/SiteHeader.tsx b/apps/web/src/components/SiteHeader.tsx
index f24576e..81d9e44 100644
--- a/apps/web/src/components/SiteHeader.tsx
+++ b/apps/web/src/components/SiteHeader.tsx
@@ -2,23 +2,55 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
 import { useSession } from "./SessionProvider";
+import { StrataMark } from "./StrataMark";
 import { relativeExpiry } from "@/lib/format";
 
-const NAV: Array<{ href: string; label: string }> = [
-  { href: "/library/", label: "Library" },
-  { href: "/examples/", label: "Examples" },
-  { href: "/upload/", label: "Upload" },
-  { href: "/analyses/new/", label: "Compose" },
-  { href: "/workspace/", label: "Workspace" },
-  { href: "/assistant/", label: "Assistant" },
-  { href: "/methods/", label: "Methods" },
-  { href: "/data/", label: "Data" },
+interface NavItem {
+  href: string;
+  label: string;
+  hint: string;
+  step?: number;
+}
+
+/**
+ * Navigation follows the work. Upload, compose and review are a real sequence and are numbered;
+ * the other groups are places you visit in any order.
+ */
+const GROUPS: Array<{ title: string; items: NavItem[] }> = [
+  {
+    title: "Explore",
+    items: [
+      { href: "/library/", label: "Library", hint: "Reference populations" },
+      { href: "/examples/", label: "Examples", hint: "Worked qpAdm and f4 tests" },
+    ],
+  },
+  {
+    title: "Analyse",
+    items: [
+      { href: "/upload/", label: "Upload", hint: "Raw file, VCF or G25", step: 1 },
+      { href: "/analyses/new/", label: "Compose", hint: "Choose a method", step: 2 },
+      { href: "/workspace/", label: "Workspace", hint: "Datasets and results", step: 3 },
+    ],
+  },
+  {
+    title: "Ask",
+    items: [{ href: "/assistant/", label: "Assistant", hint: "Questions answered with analyses" }],
+  },
+  {
+    title: "Reference",
+    items: [
+      { href: "/methods/", label: "Methods", hint: "Statistics and assumptions" },
+      { href: "/data/", label: "Data", hint: "Sources and licences" },
+    ],
+  },
 ];
 
 function isActive(path: string, href: string): boolean {
   const p = path.endsWith("/") ? path : `${path}/`;
-  if (href === "/analyses/new/") return p.startsWith("/analyses/") || p.startsWith("/analysis/");
+  if (href === "/analyses/new/") return p.startsWith("/analyses/");
+  if (href === "/workspace/") return p.startsWith("/workspace/") || p.startsWith("/analysis/");
   return p.startsWith(href);
 }
 
@@ -26,12 +58,11 @@ export function SessionLine() {
   const { session, retry } = useSession();
   switch (session.status) {
     case "connecting":
-      return <span className="italic">Connecting to the API&hellip;</span>;
+      return <span>Connecting to the API&hellip;</span>;
     case "guest":
       return (
         <span>
-          Guest workspace, {relativeExpiry(session.expiresAt)}.{" "}
-          <Link href="/account/">Account</Link>
+          Guest workspace, {relativeExpiry(session.expiresAt)}. <Link href="/account/">Account</Link>
         </span>
       );
     case "signed-in":
@@ -43,7 +74,7 @@ export function SessionLine() {
     case "offline":
       return (
         <span>
-          <span className="text-alert">API offline.</span>{" "}
+          <span className="text-[#f0a79c]">API offline.</span>{" "}
           <button type="button" className="linkish" onClick={retry}>
             Retry
           </button>
@@ -52,44 +83,140 @@ export function SessionLine() {
   }
 }
 
+function Readout({ label, value, state }: { label: string; value: string; state: "ok" | "off" | "wait" }) {
+  const dot = state === "ok" ? "bg-[#62c39a]" : state === "off" ? "bg-[#d39a3a]" : "bg-[#6b7682]";
+  return (
+    <div className="grid grid-cols-[0.5rem_4.75rem_1fr] items-baseline gap-x-2">
+      <span className={`inline-block size-1.5 -translate-y-px rounded-full ${dot}`} aria-hidden />
+      <dt className="text-[#8d98a3]">{label}</dt>
+      <dd className="num truncate text-[#d5dbe0]" title={value}>
+        {value}
+      </dd>
+    </div>
+  );
+}
+
+function Status() {
+  const { health } = useSession();
+  const caps = health?.capabilities;
+  const wait = !health;
+  return (
+    <dl className="space-y-1 text-[0.86rem] leading-[1.5]" aria-label="Server status">
+      <Readout label="API" value={health ? `${health.status}, v${health.version}` : "not connected"} state={wait ? "wait" : health.status === "ok" ? "ok" : "off"} />
+      <Readout label="Reference" value={caps?.reference_version ?? "not built"} state={wait ? "wait" : caps?.reference_loaded ? "ok" : "off"} />
+      <Readout label="qpAdm" value={caps ? (caps.qpadm ? "available" : "not installed") : "—"} state={wait ? "wait" : caps?.qpadm ? "ok" : "off"} />
+      <Readout
+        label="Assistant"
+        value={caps ? (caps.llm_providers.length ? caps.llm_providers.join(", ") : "bring your own API key") : "—"}
+        state={wait ? "wait" : caps?.llm_providers.length ? "ok" : "off"}
+      />
+    </dl>
+  );
+}
+
+function Nav({ path, onNavigate }: { path: string; onNavigate?: () => void }) {
+  return (
+    <nav aria-label="Primary" className="space-y-6">
+      {GROUPS.map((g) => (
+        <div key={g.title}>
+          <p className="mb-1.5 px-3 text-[0.82rem] font-semibold tracking-[0.02em] text-[#7f8a95]">{g.title}</p>
+          <ul className="space-y-px">
+            {g.items.map((n) => {
+              const active = isActive(path, n.href);
+              return (
+                <li key={n.href}>
+                  <Link
+                    href={n.href}
+                    onClick={onNavigate}
+                    aria-current={active ? "page" : undefined}
+                    className={`group relative grid grid-cols-[1.25rem_1fr] items-baseline gap-x-2 rounded-[6px] px-3 py-1 no-underline transition-colors ${
+                      active ? "bg-white/[0.07] text-white" : "text-[#c3cbd2] hover:bg-white/[0.04] hover:text-white"
+                    }`}
+                  >
+                    {active ? (
+                      <span className="pop absolute top-1.5 bottom-1.5 left-0 w-[3px] origin-center rounded-r bg-[#62c39a]" aria-hidden />
+                    ) : null}
+                    <span className={`num text-[0.82rem] ${active ? "text-[#62c39a]" : "text-[#6f7a86]"}`}>
+                      {n.step ?? ""}
+                    </span>
+                    <span className="transition-transform duration-150 group-hover:translate-x-0.5">
+                      <span className="block text-[1.06rem] font-medium leading-tight">{n.label}</span>
+                    </span>
+                  </Link>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      ))}
+    </nav>
+  );
+}
+
 export function SiteHeader() {
   const path = usePathname() ?? "/";
+  const [open, setOpen] = useState(false);
+  useEffect(() => setOpen(false), [path]);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open]);
+
+  const brand = (
+    <Link href="/" className="group flex items-center gap-2.5 text-white no-underline hover:text-white" aria-label="Strata, home">
+      <StrataMark size={24} />
+      <span className="text-[1.55rem] leading-none font-semibold tracking-[-0.01em]">Strata</span>
+    </Link>
+  );
+
   return (
-    <header className="mx-auto w-full max-w-[72rem] px-5 pt-7 sm:px-8">
+    <>
       <a
         href="#main"
-        className="absolute left-2 top-2 -translate-y-20 bg-paper px-3 py-2 text-small focus:translate-y-0"
+        className="absolute top-2 left-2 z-50 -translate-y-20 rounded-[6px] bg-panel px-3 py-2 text-small focus:translate-y-0"
       >
         Skip to content
       </a>
-      <div className="flex flex-wrap items-baseline justify-between gap-x-8 gap-y-2 border-b border-ink pb-3">
-        <Link href="/" className="no-underline" aria-label="Strata, home">
-          <span className="text-[2rem] leading-none font-medium tracking-[0.01em]">Strata</span>
-        </Link>
-        <p className="text-caption text-ink-2">
-          <SessionLine />
-        </p>
-      </div>
-      <nav aria-label="Primary" className="-mx-5 overflow-x-auto border-b border-rule px-5 sm:mx-0 sm:px-0">
-        <ul className="-mx-2 flex gap-x-1 py-1.5 whitespace-nowrap sm:flex-wrap">
-          {NAV.map((n) => {
-            const active = isActive(path, n.href);
-            return (
-              <li key={n.href}>
-                <Link
-                  href={n.href}
-                  aria-current={active ? "page" : undefined}
-                  className={`smallcaps inline-block px-2 py-1 ${
-                    active ? "text-ink underline decoration-ink" : "text-ink-2 no-underline hover:text-ink"
-                  }`}
-                >
-                  {n.label}
-                </Link>
-              </li>
-            );
-          })}
-        </ul>
-      </nav>
-    </header>
+
+      {/* Small screens: a bar with a menu that opens the same rail as a sheet. */}
+      <header className="sticky top-0 z-40 flex items-center justify-between bg-basalt px-5 py-3 lg:hidden">
+        {brand}
+        <button
+          type="button"
+          className="rounded-[6px] border border-white/15 px-3 py-1.5 text-small font-medium text-white"
+          aria-expanded={open}
+          aria-controls="rail"
+          onClick={() => setOpen((o) => !o)}
+        >
+          {open ? "Close" : "Menu"}
+        </button>
+      </header>
+      {open ? (
+        <button
+          type="button"
+          aria-label="Close menu"
+          className="fixed inset-0 z-40 bg-basalt/40 lg:hidden"
+          onClick={() => setOpen(false)}
+        />
+      ) : null}
+
+      <aside
+        id="rail"
+        className={`fixed inset-y-0 left-0 z-50 flex w-[16rem] flex-col overflow-y-auto bg-basalt px-3 pt-6 pb-5 text-[#c3cbd2] transition-transform lg:sticky lg:top-0 lg:z-auto lg:h-screen lg:translate-x-0 ${
+          open ? "translate-x-0" : "-translate-x-full"
+        }`}
+      >
+        <div className="mb-8 px-3">{brand}</div>
+        <Nav path={path} onNavigate={() => setOpen(false)} />
+        <div className="mt-auto space-y-4 px-3 pt-10">
+          <Status />
+          <p className="border-t border-white/10 pt-3 text-[0.86rem] leading-[1.5] text-[#a9b3bc] [&_a]:text-[#d5dbe0]">
+            <SessionLine />
+          </p>
+        </div>
+      </aside>
+    </>
   );
 }
diff --git a/apps/web/src/components/StrataMark.tsx b/apps/web/src/components/StrataMark.tsx
new file mode 100644
index 0000000..b60662a
--- /dev/null
+++ b/apps/web/src/components/StrataMark.tsx
@@ -0,0 +1,29 @@
+/** The Strata mark: five sediment layers in a core, youngest on top. */
+export function StrataMark({ size = 22, className }: { size?: number; className?: string }) {
+  const bands = ["#e9ddb4", "#cdae66", "#a46a3a", "#5f7f6e", "#34404f"];
+  const h = size;
+  const w = Math.round(size * 0.78);
+  const step = h / bands.length;
+  return (
+    <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} aria-hidden className={`strata-mark overflow-visible ${className ?? ""}`}>
+      <defs>
+        <clipPath id="strata-mark-clip">
+          <rect x={0} y={0} width={w} height={h} rx={2.5} />
+        </clipPath>
+      </defs>
+      <g>
+        {bands.map((c, i) => {
+          const y = i * step;
+          const wobble = i % 2 ? 1.1 : -1.1;
+          return (
+            <path
+              key={c}
+              d={`M0 ${y + (i ? wobble : 0)} Q ${w / 2} ${y - (i ? wobble : 0)} ${w} ${y + (i ? wobble * 0.4 : 0)} V ${h} H 0 Z`}
+              fill={c}
+            />
+          );
+        })}
+      </g>
+    </svg>
+  );
+}
diff --git a/apps/web/src/components/charts/CoreSample.tsx b/apps/web/src/components/charts/CoreSample.tsx
new file mode 100644
index 0000000..73d7e60
--- /dev/null
+++ b/apps/web/src/components/charts/CoreSample.tsx
@@ -0,0 +1,291 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { useWidth } from "./useWidth";
+import { bpRange, int } from "@/lib/format";
+import { periodStyle, type Lithology, type PeriodStyle } from "@/lib/periods";
+
+export interface Layer {
+  period: string;
+  populations: number;
+  individuals: number;
+  minBp: number | null;
+  maxBp: number | null;
+}
+
+function slug(s: string): string {
+  return s.toLowerCase().replace(/[^a-z0-9]+/g, "-");
+}
+
+/** Lithology symbols, after the conventions of a measured geological section. */
+function PatternMarks({ kind, mark }: { kind: Lithology; mark: string }) {
+  const s = { stroke: mark, strokeWidth: 1, fill: "none" } as const;
+  switch (kind) {
+    case "soil":
+      return (
+        <>
+          <circle cx={3} cy={4} r={0.8} fill={mark} />
+          <circle cx={10} cy={11} r={0.8} fill={mark} />
+          <path d="M8 3h3M1 10h2" {...s} />
+        </>
+      );
+    case "sand":
+      return (
+        <>
+          {[
+            [2, 2],
+            [7, 4],
+            [12, 1],
+            [4, 8],
+            [10, 9],
+            [1, 13],
+            [7, 12],
+            [13, 13],
+          ].map(([x, y]) => (
+            <circle key={`${x}-${y}`} cx={x} cy={y} r={0.65} fill={mark} />
+          ))}
+        </>
+      );
+    case "silt":
+      return <path d="M1 4h5M9 4h4M4 11h5M12 11h2" {...s} />;
+    case "brick":
+      return <path d="M0 0.5h14M0 7.5h14M3 0.5v7M10 7.5v7" {...s} />;
+    case "hatch":
+      return <path d="M-2 4L4 -2M-2 11L11 -2M3 16L16 3M10 16L16 10" {...s} />;
+    case "cross":
+      return <path d="M0 0L14 14M14 0L0 14M7 -7L21 7M-7 7L7 21" {...s} strokeWidth={0.8} />;
+    case "shale":
+      return <path d="M0 3.5h8M10 3.5h4M4 10.5h8" {...s} />;
+    case "gravel":
+      return (
+        <>
+          <ellipse cx={4} cy={4} rx={2.2} ry={1.6} {...s} />
+          <ellipse cx={11} cy={11} rx={1.8} ry={1.4} {...s} />
+        </>
+      );
+    case "tick":
+      return <path d="M3 2v4M10 9v4M10 1v2M3 10v2" {...s} />;
+    default:
+      return null;
+  }
+}
+
+export function LithologyDefs({ periods }: { periods: PeriodStyle[] }) {
+  return (
+    <defs>
+      {periods.map((p) => (
+        <pattern key={p.name} id={`lith-${slug(p.name)}`} width={14} height={14} patternUnits="userSpaceOnUse">
+          <rect width={14} height={14} fill={p.color} />
+          <PatternMarks kind={p.lithology} mark={p.mark} />
+        </pattern>
+      ))}
+    </defs>
+  );
+}
+
+/**
+ * The reference library drawn as a drilled core: one layer per period, youngest at the surface.
+ * Layer thickness grows with the square root of the number of populations, with a floor so a
+ * period holding one population is still legible.
+ */
+export function CoreSample({ layers, height = 520 }: { layers: Layer[]; height?: number }) {
+  const router = useRouter();
+  const [hover, setHover] = useState<string | null>(null);
+  // Tapping the surface of the core shakes it and lets the layers settle again.
+  const [quakes, setQuakes] = useState(0);
+  const [ref, width] = useWidth<HTMLDivElement>(420);
+  const narrow = width < 440;
+  const floor = 42;
+  const free = Math.max(0, height - floor * layers.length);
+  const roots = layers.map((l) => Math.sqrt(l.populations));
+  const sum = roots.reduce((a, b) => a + b, 0) || 1;
+  let y = 0;
+  const placed = layers.map((l, i) => {
+    const h = floor + (free * roots[i]!) / sum;
+    const out = { ...l, y, h, style: periodStyle(l.period) };
+    y += h;
+    return out;
+  });
+  const total = y;
+  const coreW = narrow ? 64 : 116;
+  const cap = 9; // half-height of the elliptical cap at the surface
+  const n = placed.length;
+
+  // Boundaries between layers wobble a little, as real contacts do; deterministic per index.
+  const contact = (yy: number, i: number) => {
+    const a = 2.2 * Math.sin(i * 1.7 + 0.6);
+    const b = 1.6 * Math.cos(i * 2.3);
+    return `M0 ${yy + a} C ${coreW * 0.3} ${yy - b} ${coreW * 0.65} ${yy + b + a * 0.5} ${coreW} ${yy - a * 0.4}`;
+  };
+
+  const href = (p: string) => `/library/?period=${encodeURIComponent(p)}`;
+
+  return (
+    <div ref={ref} className="relative" style={{ height: total + cap * 2 + 8 }}>
+      <div key={quakes} className="absolute inset-0" style={{ animation: quakes ? "strata-quake 620ms ease-out" : undefined }}>
+      <svg
+        width={coreW + 24}
+        height={total + cap * 2 + 8}
+        className="absolute top-0 left-0 overflow-visible"
+        role="img"
+        aria-label={`Reference library by period: ${placed.map((p) => `${p.period}, ${p.populations} populations`).join("; ")}`}
+      >
+        <LithologyDefs periods={placed.map((p) => p.style)} />
+        <defs>
+          <linearGradient id="core-shade" x1="0" x2="1" y1="0" y2="0">
+            <stop offset="0" stopColor="#1e2630" stopOpacity="0.22" />
+            <stop offset="0.18" stopColor="#1e2630" stopOpacity="0.02" />
+            <stop offset="0.42" stopColor="#fff" stopOpacity="0.2" />
+            <stop offset="0.7" stopColor="#1e2630" stopOpacity="0.03" />
+            <stop offset="1" stopColor="#1e2630" stopOpacity="0.3" />
+          </linearGradient>
+          <clipPath id="core-clip">
+            <path d={`M0 ${cap} V ${total + cap} A ${coreW / 2} ${cap} 0 0 0 ${coreW} ${total + cap} V ${cap} Z`} />
+          </clipPath>
+        </defs>
+        <g clipPath="url(#core-clip)">
+          {placed.map((p, i) => (
+            <g
+              key={p.period}
+              style={{
+                transformBox: "fill-box",
+                transformOrigin: "50% 100%",
+                animation: `strata-deposit 520ms cubic-bezier(.2,.7,.2,1) ${(n - 1 - i) * 85}ms both`,
+              }}
+            >
+              <path
+                d={`${contact(p.y + cap, i)} V ${p.y + p.h + cap + 6} H 0 Z`}
+                fill={`url(#lith-${slug(p.period)})`}
+                className="cursor-pointer"
+                onMouseEnter={() => setHover(p.period)}
+                onMouseLeave={() => setHover(null)}
+                onClick={() => router.push(href(p.period))}
+              />
+              {i > 0 ? (
+                <path d={contact(p.y + cap, i)} fill="none" stroke="#1e2630" strokeOpacity={0.35} strokeWidth={0.8} />
+              ) : null}
+            </g>
+          ))}
+          <rect x={0} y={0} width={coreW} height={total + cap * 2} fill="url(#core-shade)" pointerEvents="none" />
+          {hover
+            ? (() => {
+                const p = placed.find((q) => q.period === hover);
+                return p ? (
+                  <rect x={0} y={p.y + cap} width={coreW} height={p.h} fill="#fff" fillOpacity={0.18} pointerEvents="none" />
+                ) : null;
+              })()
+            : null}
+          {/* Grains still settling through the youngest layer. */}
+          {placed[0]
+            ? [0.14, 0.31, 0.47, 0.6, 0.73, 0.88].map((fx, k) => (
+                <circle
+                  key={fx}
+                  cx={coreW * fx}
+                  cy={cap + 2}
+                  r={k % 2 ? 1 : 1.4}
+                  fill={placed[0]!.style.mark}
+                  pointerEvents="none"
+                  style={
+                    {
+                      "--fall": `${placed[0]!.h - 6}px`,
+                      animation: `strata-grain ${4.2 + (k % 3) * 1.3}s linear ${1.4 + k * 0.9}s infinite both`,
+                    } as React.CSSProperties
+                  }
+                />
+              ))
+            : null}
+        </g>
+        {/* The hovered layer slides out of the core like a sample chip being pulled. */}
+        {hover
+          ? (() => {
+              const i = placed.findIndex((q) => q.period === hover);
+              const p = placed[i];
+              if (!p) return null;
+              return (
+                <g key={hover} pointerEvents="none" style={{ animation: "strata-pull 240ms cubic-bezier(.2,.9,.3,1.2) both" }}>
+                  <clipPath id="pull-clip">
+                    <rect x={0} y={p.y + cap} width={coreW} height={p.h} rx={2} />
+                  </clipPath>
+                  <g clipPath="url(#pull-clip)" style={{ filter: "drop-shadow(3px 3px 0 rgba(30,38,48,.25))" }}>
+                    <rect x={0} y={p.y + cap} width={coreW} height={p.h} fill={`url(#lith-${slug(p.period)})`} />
+                    <rect x={0} y={p.y + cap} width={coreW} height={p.h} fill="url(#core-shade)" />
+                    <rect x={0.5} y={p.y + cap + 0.5} width={coreW - 1} height={p.h - 1} fill="none" stroke="#1e2630" strokeOpacity={0.5} />
+                  </g>
+                </g>
+              );
+            })()
+          : null}
+        {/* Surface of the core */}
+        <ellipse cx={coreW / 2} cy={cap} rx={coreW / 2} ry={cap} fill={placed[0]?.style.color ?? "#ddd"} />
+        <ellipse
+          cx={coreW / 2}
+          cy={cap}
+          rx={coreW / 2}
+          ry={cap}
+          fill="#fff"
+          fillOpacity={0.35}
+          stroke="#1e2630"
+          strokeOpacity={0.25}
+          strokeWidth={0.8}
+          className="cursor-pointer"
+          onClick={() => setQuakes((q) => q + 1)}
+        >
+          <title>Tap the surface</title>
+        </ellipse>
+        {/* Ticks to the labels */}
+        {placed.map((p) => (
+          <line
+            key={p.period}
+            x1={coreW + 4}
+            x2={coreW + 20}
+            y1={p.y + cap + p.h / 2}
+            y2={p.y + cap + p.h / 2}
+            stroke="#1e2630"
+            strokeOpacity={hover === p.period ? 0.9 : 0.35}
+            strokeWidth={1}
+          />
+        ))}
+      </svg>
+
+      <ol className="absolute top-0 right-0" style={{ left: coreW + 30 }}>
+        {placed.map((p, i) => (
+          <li
+            key={p.period}
+            className="absolute right-0 left-0 flex items-center"
+            style={{
+              top: p.y + cap,
+              height: p.h,
+              animation: `strata-label 420ms ease-out ${(n - 1 - i) * 85 + 200}ms both`,
+            }}
+          >
+            <Link
+              href={href(p.period)}
+              onMouseEnter={() => setHover(p.period)}
+              onMouseLeave={() => setHover(null)}
+              onFocus={() => setHover(p.period)}
+              onBlur={() => setHover(null)}
+              className={`-mx-2 grid w-full grid-cols-[minmax(0,1fr)_auto] items-baseline gap-x-4 rounded-[6px] px-2 py-1 no-underline transition-[background-color,transform] duration-200 ${
+                hover === p.period ? "translate-x-2 bg-panel" : ""
+              }`}
+            >
+              <span className="min-w-0">
+                <span className="block truncate text-[1.08rem] leading-tight font-semibold text-ink">{p.period}</span>
+                <span className="num block truncate text-[0.86rem] leading-snug text-ink-3">
+                  {bpRange(p.minBp, p.maxBp)}
+                </span>
+              </span>
+              <span className="num text-right text-[0.9rem] leading-tight text-ink-2">
+                <span className="text-[1.2rem] font-semibold text-ink">{p.populations}</span>{" "}
+                {p.populations === 1 ? "population" : "populations"}
+                <span className="block text-[0.82rem] text-ink-3">{int(p.individuals)} individuals</span>
+              </span>
+            </Link>
+          </li>
+        ))}
+      </ol>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/charts/OriginsMap.tsx b/apps/web/src/components/charts/OriginsMap.tsx
index 426b06e..991749d 100644
--- a/apps/web/src/components/charts/OriginsMap.tsx
+++ b/apps/web/src/components/charts/OriginsMap.tsx
@@ -95,9 +95,9 @@ export function OriginsMap({
           </clipPath>
         </defs>
         <g clipPath="url(#map-clip)">
-          <path d={path({ type: "Sphere" } as never) ?? ""} fill="#ffffff" stroke="#d6d6d6" strokeWidth={0.75} />
-          <path d={graticule} fill="none" stroke="#f0f0f0" strokeWidth={0.5} />
-          <path d={path(LAND as never) ?? ""} fill="#ededeb" stroke="#b9b9b9" strokeWidth={0.5} />
+          <path d={path({ type: "Sphere" } as never) ?? ""} fill="#f7f9f8" stroke="#ccd2d0" strokeWidth={0.75} />
+          <path d={graticule} fill="none" stroke="#e6eae8" strokeWidth={0.5} />
+          <path d={path(LAND as never) ?? ""} fill="#dde3df" stroke="#b8c1bd" strokeWidth={0.5} />
           {valid.map((p) => {
             const xy = project(p.lon, p.lat);
             if (!xy) return null;
@@ -115,8 +115,8 @@ export function OriginsMap({
                 <circle r={Math.max(r, 9)} fill="transparent" />
                 <circle
                   r={r}
-                  fill={p.emphasis ? "#000" : "rgba(44,92,148,0.18)"}
-                  stroke={p.emphasis ? "#fff" : "#2c5c94"}
+                  fill={p.emphasis ? "#1e2630" : "rgba(29,107,86,0.2)"}
+                  stroke={p.emphasis ? "#fff" : "#1d6b56"}
                   strokeWidth={active ? 1.75 : 1}
                 />
               </g>
diff --git a/apps/web/src/components/charts/PcaPlot.tsx b/apps/web/src/components/charts/PcaPlot.tsx
index 21d7e5c..87584ff 100644
--- a/apps/web/src/components/charts/PcaPlot.tsx
+++ b/apps/web/src/components/charts/PcaPlot.tsx
@@ -57,7 +57,7 @@ export function PcaPlot({ space, targets = [], height = 520, compact = false, hi
           symbol: slot.symbol,
           size: compact ? 5 : 7,
           opacity: 0.78,
-          line: { width: pts.map((p) => (hl.has(p.population_id) ? 1.5 : 0)), color: "#000" },
+          line: { width: pts.map((p) => (hl.has(p.population_id) ? 1.5 : 0)), color: "#1e2630" },
         },
       };
     });
@@ -71,9 +71,9 @@ export function PcaPlot({ space, targets = [], height = 520, compact = false, hi
             y: targets.map((t) => t.coords[y] ?? null),
             text: targets.map((t) => t.name),
             textposition: "top right",
-            textfont: { family: SERIF, size: 14, color: "#000" },
+            textfont: { family: SERIF, size: 14, color: "#1e2630" },
             hovertemplate: "%{text} (projected)<extra></extra>",
-            marker: { color: "#000", symbol: "star", size: 15, line: { color: "#fff", width: 1.5 } },
+            marker: { color: "#1e2630", symbol: "star", size: 15, line: { color: "#fff", width: 1.5 } },
           },
         ]
       : [];
diff --git a/apps/web/src/components/charts/Plot.tsx b/apps/web/src/components/charts/Plot.tsx
index a10c914..6901b00 100644
--- a/apps/web/src/components/charts/Plot.tsx
+++ b/apps/web/src/components/charts/Plot.tsx
@@ -27,20 +27,20 @@ export const SERIF = '"EB Garamond", Garamond, Georgia, serif';
 /** Shared publication styling: thin black axes, no grid, serif labels. */
 export function journalAxis(title: string, extra: Record<string, unknown> = {}) {
   return {
-    title: { text: title, font: { family: SERIF, size: 14, color: "#000" }, standoff: 8 },
+    title: { text: title, font: { family: SERIF, size: 14, color: "#1e2630" }, standoff: 8 },
     showgrid: false,
     zeroline: true,
-    zerolinecolor: "#e2e2e2",
+    zerolinecolor: "#e3e7e4",
     zerolinewidth: 1,
     showline: true,
-    linecolor: "#000",
+    linecolor: "#1e2630",
     linewidth: 0.75,
     mirror: false,
     ticks: "outside",
     ticklen: 4,
     tickwidth: 0.75,
-    tickcolor: "#000",
-    tickfont: { family: SERIF, size: 12, color: "#333" },
+    tickcolor: "#1e2630",
+    tickfont: { family: SERIF, size: 12, color: "#444e59" },
     automargin: true,
     ...extra,
   };
@@ -49,15 +49,15 @@ export function journalAxis(title: string, extra: Record<string, unknown> = {})
 export const journalLayout = {
   paper_bgcolor: "#ffffff",
   plot_bgcolor: "#ffffff",
-  font: { family: SERIF, size: 13, color: "#000" },
+  font: { family: SERIF, size: 13, color: "#1e2630" },
   hoverlabel: {
     bgcolor: "#ffffff",
-    bordercolor: "#000000",
-    font: { family: SERIF, size: 13, color: "#000" },
+    bordercolor: "#1e2630",
+    font: { family: SERIF, size: 13, color: "#1e2630" },
     align: "left",
   },
   legend: {
-    font: { family: SERIF, size: 12, color: "#333" },
+    font: { family: SERIF, size: 12, color: "#444e59" },
     bgcolor: "rgba(255,255,255,0)",
     borderwidth: 0,
     itemsizing: "constant",
diff --git a/apps/web/src/components/charts/ResidualsChart.tsx b/apps/web/src/components/charts/ResidualsChart.tsx
index b38c30a..c8e5772 100644
--- a/apps/web/src/components/charts/ResidualsChart.tsx
+++ b/apps/web/src/components/charts/ResidualsChart.tsx
@@ -46,14 +46,14 @@ export function ResidualsChart({
 
   return (
     <div ref={ref} className="relative">
-      <svg width={width} height={h + m.t + m.b} role="img" aria-label={title} className="block font-serif">
+      <svg width={width} height={h + m.t + m.b} role="img" aria-label={title} className="block font-sans">
         <g transform={`translate(${m.l},${m.t})`}>
           {band ? (
             [band, -band].map((b) => (
-              <line key={b} x1={0} x2={w} y1={y(b)} y2={y(b)} stroke="#9a9a9a" strokeWidth={0.75} strokeDasharray="3 3" />
+              <line key={b} x1={0} x2={w} y1={y(b)} y2={y(b)} stroke="#9aa3a8" strokeWidth={0.75} strokeDasharray="3 3" />
             ))
           ) : null}
-          <line x1={0} x2={w} y1={y(0)} y2={y(0)} stroke="#000" strokeWidth={0.75} />
+          <line x1={0} x2={w} y1={y(0)} y2={y(0)} stroke="#1e2630" strokeWidth={0.75} />
           {points.map((p, i) => {
             const cx = (x(`${i}`) ?? 0) + x.bandwidth() / 2;
             const out = highlightAbove !== undefined && Math.abs(p.value) > highlightAbove;
@@ -66,20 +66,20 @@ export function ResidualsChart({
                     x2={cx}
                     y1={y(p.value - 1.96 * p.se)}
                     y2={y(p.value + 1.96 * p.se)}
-                    stroke="#9a9a9a"
+                    stroke="#9aa3a8"
                     strokeWidth={1}
                   />
                 ) : null}
-                <line x1={cx} x2={cx} y1={y(0)} y2={y(p.value)} stroke="#000" strokeWidth={hover === i ? 2 : 1.25} />
-                <circle cx={cx} cy={y(p.value)} r={4} fill={out ? "#a13f5e" : "#000"} stroke="#fff" strokeWidth={1.5} />
+                <line x1={cx} x2={cx} y1={y(0)} y2={y(p.value)} stroke="#1e2630" strokeWidth={hover === i ? 2 : 1.25} />
+                <circle cx={cx} cy={y(p.value)} r={4} fill={out ? "#a13f5e" : "#1e2630"} stroke="#fff" strokeWidth={1.5} />
               </g>
             );
           })}
-          <line x1={0} x2={0} y1={0} y2={h} stroke="#000" strokeWidth={0.75} />
+          <line x1={0} x2={0} y1={0} y2={h} stroke="#1e2630" strokeWidth={0.75} />
           {y.ticks(5).map((t) => (
             <g key={t} transform={`translate(0,${y(t)})`}>
-              <line x2={-4} stroke="#000" strokeWidth={0.75} />
-              <text x={-7} dy="0.35em" textAnchor="end" fontSize={12} fill="#333" className="num">
+              <line x2={-4} stroke="#1e2630" strokeWidth={0.75} />
+              <text x={-7} dy="0.35em" textAnchor="end" fontSize={12} fill="#444e59" className="num">
                 {tickFmt(t).replace("-", "\u2212")}
               </text>
             </g>
@@ -93,7 +93,7 @@ export function ResidualsChart({
                 transform={`translate(${cx},${h + 14}) ${rotate ? "rotate(-50)" : ""}`}
                 textAnchor={rotate ? "end" : "middle"}
                 fontSize={11.5}
-                fill="#333"
+                fill="#444e59"
               >
                 {p.label}
               </text>
diff --git a/apps/web/src/components/charts/WeightsChart.tsx b/apps/web/src/components/charts/WeightsChart.tsx
index 6aac8e6..220bfb2 100644
--- a/apps/web/src/components/charts/WeightsChart.tsx
+++ b/apps/web/src/components/charts/WeightsChart.tsx
@@ -63,11 +63,11 @@ export function WeightsChart({
         height={height}
         role="img"
         aria-label={`${title}. ${rows.map((r) => `${r.label} ${pctText(r.weight)}`).join(", ")}`}
-        className="block overflow-visible font-serif"
+        className="block overflow-visible font-sans"
       >
         {allInRange ? (
           <g transform={`translate(${left},${stackTop})`}>
-            <text x={-12} y={barH / 2} dy="0.35em" textAnchor="end" fontSize={13} fill="#333" fontStyle="italic">
+            <text x={-12} y={barH / 2} dy="0.35em" textAnchor="end" fontSize={13} fill="#444e59" >
               (a) composition
             </text>
             {segments.map((s) => {
@@ -104,7 +104,7 @@ export function WeightsChart({
 
         <g transform={`translate(${left},${forestTop})`}>
           {allInRange ? (
-            <text x={-12} y={-12} textAnchor="end" fontSize={13} fill="#333" fontStyle="italic">
+            <text x={-12} y={-12} textAnchor="end" fontSize={13} fill="#444e59" >
               (b) estimates
             </text>
           ) : null}
@@ -115,7 +115,7 @@ export function WeightsChart({
               x2={x(t)}
               y1={0}
               y2={rows.length * rowH}
-              stroke={t === 0 ? "#9a9a9a" : "#efefef"}
+              stroke={t === 0 ? "#9aa3a8" : "#e3e7e4"}
               strokeWidth={t === 0 ? 0.75 : 0.75}
             />
           ))}
@@ -130,15 +130,15 @@ export function WeightsChart({
                 opacity={hover === null || hover === i ? 1 : 0.5}
               >
                 <rect x={-left} y={i * rowH} width={left + plotW + right} height={rowH} fill="transparent" />
-                <text x={-12} y={cy} dy="0.35em" textAnchor="end" fontSize={13.5} fill="#000">
+                <text x={-12} y={cy} dy="0.35em" textAnchor="end" fontSize={13.5} fill="#1e2630">
                   {r.label.length > 30 ? `${r.label.slice(0, 29)}…` : r.label}
                   <title>{r.label}</title>
                 </text>
                 {hasCi ? (
                   <>
-                    <line x1={x(r.lo!)} x2={x(r.hi!)} y1={cy} y2={cy} stroke="#000" strokeWidth={1} />
-                    <line x1={x(r.lo!)} x2={x(r.lo!)} y1={cy - 5} y2={cy + 5} stroke="#000" strokeWidth={1} />
-                    <line x1={x(r.hi!)} x2={x(r.hi!)} y1={cy - 5} y2={cy + 5} stroke="#000" strokeWidth={1} />
+                    <line x1={x(r.lo!)} x2={x(r.hi!)} y1={cy} y2={cy} stroke="#1e2630" strokeWidth={1} />
+                    <line x1={x(r.lo!)} x2={x(r.lo!)} y1={cy - 5} y2={cy + 5} stroke="#1e2630" strokeWidth={1} />
+                    <line x1={x(r.hi!)} x2={x(r.hi!)} y1={cy - 5} y2={cy + 5} stroke="#1e2630" strokeWidth={1} />
                   </>
                 ) : null}
                 <rect
@@ -146,23 +146,23 @@ export function WeightsChart({
                   y={cy - 4.5}
                   width={9}
                   height={9}
-                  fill={allInRange ? sourceColor(i) : "#000"}
+                  fill={allInRange ? sourceColor(i) : "#1e2630"}
                   stroke="#fff"
                   strokeWidth={1.5}
                 />
               </g>
             );
           })}
-          <line x1={0} x2={plotW} y1={rows.length * rowH} y2={rows.length * rowH} stroke="#000" strokeWidth={0.75} />
+          <line x1={0} x2={plotW} y1={rows.length * rowH} y2={rows.length * rowH} stroke="#1e2630" strokeWidth={0.75} />
           {ticks.map((t) => (
             <g key={t} transform={`translate(${x(t)},${rows.length * rowH})`}>
-              <line y2={4} stroke="#000" strokeWidth={0.75} />
-              <text y={17} textAnchor="middle" fontSize={12} fill="#333" className="num">
+              <line y2={4} stroke="#1e2630" strokeWidth={0.75} />
+              <text y={17} textAnchor="middle" fontSize={12} fill="#444e59" className="num">
                 {Math.round(t * 100).toString().replace("-", "−")}%
               </text>
             </g>
           ))}
-          <text x={plotW / 2} y={rows.length * rowH + 32} textAnchor="middle" fontSize={13} fill="#000">
+          <text x={plotW / 2} y={rows.length * rowH + 32} textAnchor="middle" fontSize={13} fill="#1e2630">
             Mixture weight; whiskers: {intervalLabel}
           </text>
         </g>
diff --git a/apps/web/src/components/results/AnalysisDocument.tsx b/apps/web/src/components/results/AnalysisDocument.tsx
index dab4c48..dad14c4 100644
--- a/apps/web/src/components/results/AnalysisDocument.tsx
+++ b/apps/web/src/components/results/AnalysisDocument.tsx
@@ -5,7 +5,7 @@ import { api } from "@/lib/api";
 import { analysisLabel, dateTime, isFormal } from "@/lib/format";
 import type { Analysis } from "@/lib/types";
 import { ResultView } from "./ResultView";
-import { ErrorNote, KindMark, PageHeader, Section } from "@/components/typography";
+import { ErrorNote, Fold, KindMark, PageHeader } from "@/components/typography";
 
 /** Plain-language description of an analysis' parameters, in the voice of a methods section. */
 export function describeParams(params: Record<string, unknown>): Array<[string, string]> {
@@ -72,7 +72,7 @@ export function ReportButtons({ id }: { id: string }) {
 export function ProvenanceList({ provenance }: { provenance: Record<string, unknown> | null | undefined }) {
   if (!provenance || Object.keys(provenance).length === 0) return null;
   return (
-    <dl className="grid max-w-[48rem] grid-cols-[minmax(8rem,auto)_minmax(0,1fr)] gap-x-6 gap-y-1 text-small">
+    <dl className="kv max-w-[48rem]">
       {describeParams(provenance).map(([k, v]) => (
         <div key={k} className="contents">
           <dt className="text-ink-3">{k}</dt>
@@ -92,24 +92,24 @@ export function AnalysisDocument({ analysis }: { analysis: Analysis }) {
         kicker={analysisLabel(analysis.kind)}
         title={analysis.title ?? `${analysisLabel(analysis.kind)}${analysis.params.target ? ` of ${String(analysis.params.target)}` : ""}`}
         aside={
-          <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1">
-            <dt className="text-ink-3">Kind</dt>
-            <dd>
-              <KindMark kind={formal ? "formal" : "exploratory"} />
-            </dd>
-            <dt className="text-ink-3">Created</dt>
-            <dd>{dateTime(analysis.created_at)}</dd>
-            <dt className="text-ink-3">Finished</dt>
-            <dd>{dateTime(analysis.finished_at)}</dd>
-            <dt className="text-ink-3">Identifier</dt>
-            <dd className="font-mono text-[0.72rem] break-all">{analysis.id}</dd>
-          </dl>
+          <p className="flex flex-wrap items-center gap-2">
+            <KindMark kind={formal ? "formal" : "exploratory"} />
+            <span className="text-ink-3">{dateTime(analysis.finished_at ?? analysis.created_at)}</span>
+          </p>
         }
       />
 
-      <Section n={1} title="Methods">
+      <section className="mb-12" aria-label="Results">
+        {analysis.result ? (
+          <ResultView result={analysis.result} />
+        ) : (
+          <ErrorNote error={new Error(analysis.error ?? "The analysis produced no result.")} />
+        )}
+      </section>
+
+      <Fold title="Parameters">
         {params.length ? (
-          <dl className="grid max-w-[48rem] grid-cols-[minmax(8rem,auto)_minmax(0,1fr)] gap-x-6 gap-y-1 text-small">
+          <dl className="kv max-w-[48rem]">
             {params.map(([k, v]) => (
               <div key={k} className="contents">
                 <dt className="text-ink-3">{k}</dt>
@@ -120,29 +120,17 @@ export function AnalysisDocument({ analysis }: { analysis: Analysis }) {
         ) : (
           <p className="text-small text-ink-2 italic">Default parameters.</p>
         )}
-      </Section>
-
-      <Section n={2} title="Results">
-        {analysis.result ? (
-          <ResultView result={analysis.result} />
-        ) : (
-          <ErrorNote error={new Error(analysis.error ?? "The analysis produced no result.")} />
-        )}
-      </Section>
+      </Fold>
 
       {analysis.provenance ? (
-        <Section n={3} title="Provenance">
+        <Fold title="Provenance">
           <ProvenanceList provenance={analysis.provenance} />
-        </Section>
+        </Fold>
       ) : null}
 
-      <Section n={analysis.provenance ? 4 : 3} title="Report">
-        <p className="measure mb-4 text-small text-ink-2">
-          The report records inputs, parameters, software and reference versions and every number
-          shown above, so the analysis can be reproduced.
-        </p>
+      <div className="mt-8">
         <ReportButtons id={analysis.id} />
-      </Section>
+      </div>
     </article>
   );
 }
diff --git a/apps/web/src/components/results/ResultView.tsx b/apps/web/src/components/results/ResultView.tsx
index 089e7a1..fefbfc0 100644
--- a/apps/web/src/components/results/ResultView.tsx
+++ b/apps/web/src/components/results/ResultView.tsx
@@ -108,7 +108,7 @@ function PcaView({ r, compact }: { r: PcaProjectionResult; compact: boolean }) {
       ) : space ? (
         <Figure
           n={1}
-          caption={`Projected target${r.targets.length === 1 ? "" : "s"} (black star) against reference population means in ${space.name}, coloured and shaped by region. Projection uses only the SNPs present in the sample (least-squares, as smartpca lsqproject); low-coverage samples shrink towards the origin.`}
+          caption={`Your sample (star) among reference populations. Low-coverage samples drift toward the centre.`}
         >
           <PcaPlot space={space} targets={r.targets} height={compact ? 380 : 540} />
         </Figure>
@@ -156,8 +156,7 @@ function NearestView({ r }: { r: NearestResult }) {
         n={1}
         caption={
           <>
-            Reference populations nearest to <em>{r.target}</em> in {r.space}, by {r.metric} distance
-            between the target and population means.
+            Nearest to <em>{r.target}</em> ({r.metric} distance).
           </>
         }
         notes="Distances in different coordinate spaces are not comparable. Small differences between neighbours are not meaningful without an estimate of sampling error."
@@ -196,7 +195,7 @@ function SensitivityTables({ s, start }: { s: Sensitivity; start: number }) {
       {s.leave_one_source_out.length ? (
         <TableFigure
           n={start}
-          caption="Leave-one-source-out sensitivity. Each row refits the model without one source; a large increase in distance means that source is needed."
+          caption="Drop one source. A big jump means it is needed."
         >
           <table className="booktabs max-w-[40rem]">
             <thead>
@@ -221,7 +220,7 @@ function SensitivityTables({ s, start }: { s: Sensitivity; start: number }) {
       {s.leave_one_dimension_out.length ? (
         <TableFigure
           n={start + 1}
-          caption="Leave-one-dimension-out sensitivity. Rows with large changes indicate a fit driven by a single component."
+          caption="Drop one dimension. Big changes mean one component drives the fit."
         >
           <table className="booktabs max-w-[48rem]">
             <thead>
@@ -274,8 +273,8 @@ function FitView({ r, compact }: { r: AdmixtureFitResult; compact: boolean }) {
         n={1}
         caption={
           hasCi
-            ? `Mixture weights for ${r.target}. (a) Point estimates. (b) Estimates with 95% bootstrap intervals (2.5th to 97.5th percentile, resampling individuals within each source).`
-            : `Mixture weights for ${r.target}. No bootstrap was run, so no interval is shown.`
+            ? `Mixture weights for ${r.target}, with 95% bootstrap intervals.`
+            : `Mixture weights for ${r.target}.`
         }
       >
         <WeightsChart
@@ -311,7 +310,7 @@ function FitView({ r, compact }: { r: AdmixtureFitResult; compact: boolean }) {
       {!compact && r.residuals.length ? (
         <Figure
           n={2}
-          caption="Per-dimension residuals of the fitted mixture (fit minus target). Systematic residuals on one component point to ancestry not represented among the sources."
+          caption="Residuals per dimension. A lopsided one hints at a missing source."
         >
           <ResidualsChart
             title="Residuals by dimension"
@@ -356,7 +355,7 @@ function RotationView({ r }: { r: RotationResult }) {
       </p>
       <TableFigure
         n={1}
-        caption="Source rotation, ranked by residual distance. Sources with weight below 1% are pruned and the model refitted."
+        caption="Models ranked by distance. Sources under 1% are pruned."
         notes={
           <>
             {r.preferred_rank ? (
@@ -424,24 +423,32 @@ function QpAdmView({ r, compact }: { r: QpAdmResult; compact: boolean }) {
         ) : null}
         .
       </p>
-      <dl className="mb-6 grid max-w-[40rem] grid-cols-2 gap-y-1 border-y border-ink py-3 text-small sm:grid-cols-4">
-        <div>
+      <dl className="panel mb-6 grid max-w-[44rem] grid-cols-2 overflow-hidden text-small sm:grid-cols-4">
+        <div className="border-r border-b border-rule-soft px-4 py-3 sm:border-b-0">
           <dt className="text-caption text-ink-3">Tail probability</dt>
-          <dd className="num text-h3">{pv(r.p_value)}</dd>
+          <dd className="num mt-0.5 text-[1.7rem] leading-tight font-semibold">{pv(r.p_value)}</dd>
         </div>
-        <div>
+        <div className="border-b border-rule-soft px-4 py-3 sm:border-r sm:border-b-0">
           <dt className="text-caption text-ink-3">
             &chi;<sup>2</sup>
           </dt>
-          <dd className="num text-h3">{fixed(r.chisq, 2)}</dd>
+          <dd className="num mt-0.5 text-[1.7rem] leading-tight font-semibold">{fixed(r.chisq, 2)}</dd>
         </div>
-        <div>
+        <div className="border-r border-rule-soft px-4 py-3">
           <dt className="text-caption text-ink-3">Degrees of freedom</dt>
-          <dd className="num text-h3">{r.dof}</dd>
+          <dd className="num mt-0.5 text-[1.7rem] leading-tight font-semibold">{r.dof}</dd>
         </div>
-        <div>
+        <div
+          className={`px-4 py-3 ${
+            verdict === "rejected" || verdict === "infeasible" ? "bg-[#fbecea]" : verdict === "plausible" || verdict === "not rejected" ? "bg-malachite-soft" : "bg-wash"
+          }`}
+        >
           <dt className="text-caption text-ink-3">Verdict</dt>
-          <dd className={`text-h3 italic ${verdict === "rejected" || verdict === "infeasible" ? "text-alert" : ""}`}>
+          <dd
+            className={`mt-0.5 text-[1.7rem] leading-tight font-semibold capitalize ${
+              verdict === "rejected" || verdict === "infeasible" ? "text-alert" : verdict === "plausible" || verdict === "not rejected" ? "text-malachite" : ""
+            }`}
+          >
             {verdict}
           </dd>
         </div>
@@ -450,7 +457,7 @@ function QpAdmView({ r, compact }: { r: QpAdmResult; compact: boolean }) {
       {drawable ? (
       <Figure
           n={1}
-          caption={`qpAdm mixture weights for ${r.target} with ±1.96 block-jackknife standard errors. Weights are unconstrained and may fall outside [0, 1].`}
+          caption={`qpAdm weights for ${r.target}, ±1.96 SE.`}
         >
           <WeightsChart
             title={`qpAdm weights for ${r.target}`}
@@ -465,13 +472,12 @@ function QpAdmView({ r, compact }: { r: QpAdmResult; compact: boolean }) {
         </Figure>
       ) : (
         <p className="my-6 max-w-[44rem] text-small text-ink-2 italic">
-          No weight figure is drawn: {verdict === "infeasible" ? "the model is infeasible and " : ""}at least one
-          weight lies outside [0, 1], so the estimates cannot be shown as proportions. They are listed in Table 1.
+          No chart: weights fall outside [0, 1]. See Table 1.
         </p>
       )}
       <TableFigure
         n={1}
-        caption="Estimated weights. SE from the block jackknife; z = weight / SE. Weights are unconstrained and need not lie in [0, 1]."
+        caption="Weights, block-jackknife SE."
       >
         <table className="booktabs max-w-[40rem]">
           <thead>
@@ -498,7 +504,7 @@ function QpAdmView({ r, compact }: { r: QpAdmResult; compact: boolean }) {
       {r.rank_tests.length ? (
         <TableFigure
           n={2}
-          caption="Rank tests (qpWave). Each row tests whether the f4 matrix between left and right populations has at most the given rank; the full model corresponds to rank = number of sources − 1."
+          caption="Rank tests (qpWave)."
         >
           <table className="booktabs max-w-[44rem]">
             <thead>
@@ -540,7 +546,7 @@ function QpAdmView({ r, compact }: { r: QpAdmResult; compact: boolean }) {
       {!compact && f4Residuals(r).length ? (
         <Figure
           n={2}
-          caption="Residual f4-statistics, f4(target, left; right₁, right₂) observed minus fitted, as z-scores. Dashed lines mark |z| = 2; residuals beyond |z| = 3 are drawn in rose."
+          caption="Residual f4 z-scores. Beyond |z| = 3 in rose."
         >
           <ResidualsChart
             title="f4 residual z-scores"
@@ -578,12 +584,8 @@ function QpAdmView({ r, compact }: { r: QpAdmResult; compact: boolean }) {
           <p>{r.right.join(", ")}</p>
         </div>
       </div>
-      {r.feasibility?.note ? <Footnote mark="†">{r.feasibility.note}</Footnote> : null}
+      {r.feasibility?.note ? <Caveat title="About the verdict">{r.feasibility.note}</Caveat> : null}
       {r.caveat ? <Caveat title="Formal result">{r.caveat}</Caveat> : null}
-      <Footnote mark="*">
-        A non-rejected model is consistent with the data given this right set; it is not unique.
-        Results depend on the choice of right populations and on the f2 blocks used.
-      </Footnote>
     </div>
   );
 }
@@ -615,10 +617,9 @@ function QpAdmRotateView({ r }: { r: QpAdmRotateResult }) {
         n={1}
         caption={
           engineRanked
-            ? "qpAdm models in the order ranked by the engine. The verdict combines the tail probability with the feasibility of the weights; a high p does not rescue weights outside [0, 1]."
-            : "qpAdm models ordered with feasible, non-rejected models first, then by tail probability."
+            ? "Models as ranked by the engine."
+            : "Feasible, non-rejected models first."
         }
-        notes="Weights are unconstrained estimates (proportions, ± SE). Verdicts follow standard qpAdm reporting conventions; they are not a model-selection procedure."
       >
         <table className="booktabs">
           <thead>
@@ -681,7 +682,7 @@ function F4View({ r }: { r: F4StatResult }) {
       {rows.filter((f) => f.z !== null).length >= 6 ? (
         <Figure
           n={1}
-          caption="z-scores of each statistic (estimate / SE). Dashed lines mark |z| = 3, a common threshold for a significant departure from zero."
+          caption="z-scores. Dashed lines at |z| = 3."
         >
           <ResidualsChart
             title="f4 z-scores"
@@ -691,7 +692,7 @@ function F4View({ r }: { r: F4StatResult }) {
           />
         </Figure>
       ) : null}
-      <TableFigure n={1} caption="f4-statistics. A value consistent with zero means A and B are symmetrically related to C and D.">
+      <TableFigure n={1} caption="f4-statistics. Near zero means symmetric.">
         <table className="booktabs">
           <thead>
             <tr>
@@ -750,7 +751,7 @@ function QpWaveView({ r }: { r: QpWaveResult }) {
       </p>
       <TableFigure
         n={1}
-        caption="Rank tests. Each row tests whether the f4 matrix between left and right populations has at most the given rank."
+        caption="Rank tests."
       >
         <table className="booktabs max-w-[44rem]">
           <thead>
diff --git a/apps/web/src/components/typography.tsx b/apps/web/src/components/typography.tsx
index bd82c56..9533629 100644
--- a/apps/web/src/components/typography.tsx
+++ b/apps/web/src/components/typography.tsx
@@ -7,26 +7,32 @@ export function PageHeader({
   lede,
   aside,
 }: {
+  /** Kept for callers; the rail already says where you are, so it is not drawn. */
   kicker?: string;
   title: ReactNode;
   lede?: ReactNode;
   aside?: ReactNode;
 }) {
+  void kicker;
   return (
-    <header className="mb-12 grid gap-6 border-b border-ink pb-8 lg:grid-cols-[minmax(0,1fr)_15rem] lg:gap-14">
-      <div>
-        {kicker ? <p className="smallcaps mb-3 text-ink-3">{kicker}</p> : null}
-        <h1 className="text-[2.1rem] leading-[1.12] sm:text-h1">{title}</h1>
-        {lede ? (
-          <div className="measure mt-4 text-[1.25rem] leading-[1.45] text-ink-2 italic">{lede}</div>
-        ) : null}
+    <header className="mb-12">
+      <div className="grid gap-6 pb-7 lg:grid-cols-[minmax(0,1fr)_16rem] lg:items-end lg:gap-14">
+        <div>
+          <h1 className="text-[2.15rem] leading-[1.04] font-medium tracking-[-0.01em] sm:text-h1">
+            {title}
+          </h1>
+          {lede ? (
+            <div className="serif measure mt-4 text-[1.35rem] leading-[1.5] text-ink-2">{lede}</div>
+          ) : null}
+        </div>
+        {aside ? <div className="text-small leading-[1.5] text-ink-2 lg:pb-1">{aside}</div> : null}
       </div>
-      {aside ? <div className="self-end text-small text-ink-2 lg:pb-1">{aside}</div> : null}
+      <div className="stratum-rule stratum-draw" aria-hidden />
     </header>
   );
 }
 
-/** A numbered section in the manner of a paper: "2. Methods". */
+/** A section of a page. Numbers are for real sequences (steps of a form, parts of a report). */
 export function Section({
   n,
   title,
@@ -41,13 +47,20 @@ export function Section({
   aside?: ReactNode;
 }) {
   return (
-    <section id={id} className="mb-14 scroll-mt-8" aria-labelledby={id ? `${id}-h` : undefined}>
-      <h2 id={id ? `${id}-h` : undefined} className="mb-5 flex items-baseline gap-3 text-h2">
-        {n !== undefined ? <span className="num text-ink-3 tabular-nums">{n}.</span> : null}
+    <section id={id} className="mb-16 scroll-mt-20" aria-labelledby={id ? `${id}-h` : undefined}>
+      <h2 id={id ? `${id}-h` : undefined} className="mb-5 flex items-center gap-3 text-h2">
+        {n !== undefined ? (
+          <span
+            className="num inline-flex size-7 shrink-0 items-center justify-center rounded-full border border-ink text-[0.9rem] font-semibold"
+            aria-hidden
+          >
+            {n}
+          </span>
+        ) : null}
         <span>{title}</span>
       </h2>
       {aside ? (
-        <div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_15rem] lg:gap-14">
+        <div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_16rem] lg:gap-14">
           <div className="min-w-0">{children}</div>
           <aside className="text-caption leading-relaxed text-ink-2">{aside}</aside>
         </div>
@@ -71,8 +84,8 @@ export function Figure({
 }) {
   return (
     <figure className="my-8">
-      <div className="border-y border-rule py-4">{children}</div>
-      <figcaption className="mt-3 max-w-[44rem] text-caption leading-[1.5] text-ink-2">
+      <div className="panel overflow-hidden p-3 sm:p-5">{children}</div>
+      <figcaption className="mt-3 max-w-[46rem] text-caption leading-[1.55] text-ink-2">
         <span className="font-semibold text-ink">
           {label} {n}.
         </span>{" "}
@@ -82,7 +95,7 @@ export function Figure({
   );
 }
 
-/** Table with a journal caption above it ("Table 2. ..."). */
+/** Table with its caption above it ("Table 2. ..."). */
 export function TableFigure({
   n,
   caption,
@@ -96,11 +109,11 @@ export function TableFigure({
 }) {
   return (
     <figure className="my-8">
-      <figcaption className="mb-2 max-w-[44rem] text-caption leading-[1.5] text-ink-2">
+      <figcaption className="mb-2.5 max-w-[46rem] text-caption leading-[1.55] text-ink-2">
         <span className="font-semibold text-ink">Table {n}.</span> {caption}
       </figcaption>
-      <div className="overflow-x-auto">{children}</div>
-      {notes ? <div className="mt-2 max-w-[44rem] text-caption leading-[1.5] text-ink-3">{notes}</div> : null}
+      <div className="panel overflow-x-auto px-4 py-2">{children}</div>
+      {notes ? <div className="mt-2 max-w-[46rem] text-caption leading-[1.55] text-ink-3">{notes}</div> : null}
     </figure>
   );
 }
@@ -108,33 +121,66 @@ export function TableFigure({
 /** Footnote-style caveat with a marker. */
 export function Footnote({ mark = "*", children }: { mark?: string; children: ReactNode }) {
   return (
-    <p className="mt-3 max-w-[44rem] text-caption leading-[1.5] text-ink-2">
+    <p className="mt-3 max-w-[46rem] text-caption leading-[1.55] text-ink-3">
       <sup className="mr-1">{mark}</sup>
       {children}
     </p>
   );
 }
 
-/** A ruled note in the margin of the text block, used for caveats that must be read. */
+/** A caveat, folded to its title; one click opens the full text. */
 export function Caveat({ title, children }: { title: string; children: ReactNode }) {
   return (
-    <div className="my-6 max-w-[44rem] border-l border-ink py-1 pl-5 text-small leading-[1.55]">
-      <p className="mb-1 italic">{title}</p>
-      <div className="text-ink-2">{children}</div>
-    </div>
+    <details className="group my-4 max-w-[46rem] rounded-r-[6px] border-l-[3px] border-[#c08419] bg-loess-soft text-small leading-[1.55]">
+      <summary className="flex cursor-pointer list-none items-center gap-2 py-2 pr-4 pl-4 font-semibold text-ink marker:hidden [&::-webkit-details-marker]:hidden">
+        <span className="inline-block text-[0.8em] text-[#c08419] transition-transform group-open:rotate-90" aria-hidden>
+          &#9656;
+        </span>
+        {title}
+      </summary>
+      <div className="px-4 pb-3 text-ink-2">{children}</div>
+    </details>
+  );
+}
+
+/** Secondary detail (inputs, provenance, background) kept one click away. */
+export function Fold({ title, children, open = false }: { title: ReactNode; children: ReactNode; open?: boolean }) {
+  return (
+    <details open={open} className="group mb-3 max-w-[48rem] border-t border-rule">
+      <summary className="flex cursor-pointer list-none items-center gap-2 py-3 text-[1.15rem] text-ink marker:hidden hover:text-malachite [&::-webkit-details-marker]:hidden">
+        <span className="inline-block text-[0.75em] text-ink-3 transition-transform group-open:rotate-90" aria-hidden>
+          &#9656;
+        </span>
+        {title}
+      </summary>
+      <div className="pb-6">{children}</div>
+    </details>
   );
 }
 
 export function Loading({ what }: { what: string }) {
   return (
-    <p className="py-6 text-small text-ink-3 italic" role="status" aria-live="polite">
-      Loading {what}&hellip;
+    <p className="flex items-center gap-3 py-6 text-small text-ink-3" role="status" aria-live="polite">
+      <span className="flex h-5 w-5 flex-col-reverse justify-start gap-px" aria-hidden>
+        {["#34404f", "#5f7f6e", "#a46a3a", "#cdae66"].map((c, i) => (
+          <span
+            key={c}
+            className="block h-[4px] w-full rounded-[1px]"
+            style={{ background: c, animation: `strata-stack 1.6s ease-out ${i * 0.18}s infinite both` }}
+          />
+        ))}
+      </span>
+      <span className="italic">Loading {what}&hellip;</span>
     </p>
   );
 }
 
 export function Empty({ children }: { children: ReactNode }) {
-  return <div className="py-6 text-small text-ink-2 italic">{children}</div>;
+  return (
+    <div className="my-4 rounded-[var(--radius-panel)] border border-dashed border-rule bg-panel/60 px-5 py-5 text-small leading-[1.6] text-ink-2">
+      {children}
+    </div>
+  );
 }
 
 export function describeError(error: unknown): { title: string; detail: string; expected?: boolean } {
@@ -177,9 +223,11 @@ export function ErrorNote({ error, retry }: { error: unknown; retry?: () => void
   return (
     <div
       role={expected ? "status" : "alert"}
-      className={`my-6 max-w-[44rem] border-l py-1 pl-5 text-small ${expected ? "border-ink-3" : "border-l-2 border-alert"}`}
+      className={`my-6 max-w-[46rem] rounded-r-[6px] border-l-[3px] py-3 pr-4 pl-4 text-small ${
+        expected ? "border-ink-3 bg-wash" : "border-alert bg-[#fbecea]"
+      }`}
     >
-      <p className={expected ? "italic" : "text-alert"}>{title}</p>
+      <p className={`font-semibold ${expected ? "text-ink" : "text-alert"}`}>{title}</p>
       <p className="mt-1 text-ink-2">{detail}</p>
       {retry && !expected ? (
         <button type="button" className="linkish mt-2 text-small" onClick={retry}>
@@ -190,12 +238,18 @@ export function ErrorNote({ error, retry }: { error: unknown; retry?: () => void
   );
 }
 
-/** Marks a result as exploratory (G25/PCA distance fitting) or formal (qpAdm f-statistics). */
+/**
+ * Marks a result as exploratory (G25/PCA distance fitting) or formal (qpAdm f-statistics).
+ * Formal is solid malachite; exploratory is a dashed ochre outline, so the two differ in shape
+ * as well as colour.
+ */
 export function KindMark({ kind }: { kind: "exploratory" | "formal" }) {
   return (
     <span
-      className={`smallcaps inline-block border px-1 py-px align-[0.12em] text-[0.62em] ${
-        kind === "formal" ? "border-ink text-ink" : "border-ink-3 text-ink-2"
+      className={`inline-block rounded-[var(--radius-tag)] px-1.5 py-px align-[0.14em] text-[0.8rem] leading-[1.35] font-semibold tracking-[0.01em] whitespace-nowrap ${
+        kind === "formal"
+          ? "border border-malachite bg-malachite text-white"
+          : "border border-dashed border-[#c08419] bg-loess-soft text-loess"
       }`}
       title={
         kind === "formal"
@@ -203,7 +257,7 @@ export function KindMark({ kind }: { kind: "exploratory" | "formal" }) {
           : "Exploratory: geometric fit in a PCA/G25 space. Not a test of admixture."
       }
     >
-      {kind}
+      {kind === "formal" ? "Formal" : "Exploratory"}
     </span>
   );
 }
diff --git a/apps/web/src/lib/composer.ts b/apps/web/src/lib/composer.ts
index 944156a..89c4c86 100644
--- a/apps/web/src/lib/composer.ts
+++ b/apps/web/src/lib/composer.ts
@@ -20,7 +20,7 @@ export const METHODS: MethodInfo[] = [
     key: "pca_project",
     label: "PCA projection",
     formal: false,
-    description: "Place the sample in the reference principal-component space.",
+    description: "Where the sample sits in the PCA.",
     guidance:
       "Projection shows where a sample falls relative to reference populations. Proximity in two components can hide differences in the others; inspect several pairs of axes.",
   },
@@ -28,7 +28,7 @@ export const METHODS: MethodInfo[] = [
     key: "nearest",
     label: "Nearest populations",
     formal: false,
-    description: "Rank reference populations by distance to the sample.",
+    description: "The closest reference populations.",
     guidance:
       "Nearest populations are a description of similarity in one coordinate space, not of descent. Closely ranked neighbours are usually indistinguishable.",
   },
@@ -36,7 +36,7 @@ export const METHODS: MethodInfo[] = [
     key: "admixture_fit",
     label: "Exploratory admixture fit",
     formal: false,
-    description: "Best non-negative mixture of chosen sources, with bootstrap intervals.",
+    description: "Best mix of the sources you choose.",
     guidance:
       "The fit finds the convex combination of source means closest to the target. Any target can be fitted; the residual distance and the sensitivity diagnostics tell you how well. A tight fit is not evidence that admixture happened.",
   },
@@ -44,7 +44,7 @@ export const METHODS: MethodInfo[] = [
     key: "admixture_rotate",
     label: "Source rotation",
     formal: false,
-    description: "Fit every combination of candidate sources and rank the models.",
+    description: "Try every combination of sources.",
     guidance:
       "Rotation explores many models at once. Treat the ranking as a shortlist for qpAdm, not as a result in itself.",
   },
@@ -52,7 +52,7 @@ export const METHODS: MethodInfo[] = [
     key: "qpadm",
     label: "qpAdm",
     formal: true,
-    description: "Formal test of a mixture model on f4-statistics against an outgroup set.",
+    description: "Formal test of a mixture model.",
     guidance:
       "qpAdm asks whether the target's f4-statistics with the right populations are explained by the left populations. Choose right populations that are differentially related to the sources; a model is rejected at p < 0.01.",
   },
@@ -60,7 +60,7 @@ export const METHODS: MethodInfo[] = [
     key: "qpadm_rotate",
     label: "qpAdm rotation",
     formal: true,
-    description: "Test all subsets of candidate sources with qpAdm.",
+    description: "qpAdm on every subset of sources.",
     guidance:
       "Rotation tests every subset of the candidate left populations against a fixed right set. Several models may be non-rejected; prefer the simplest feasible one and report the others.",
   },
diff --git a/apps/web/src/lib/palette.ts b/apps/web/src/lib/palette.ts
index 44cd25f..5f207bf 100644
--- a/apps/web/src/lib/palette.ts
+++ b/apps/web/src/lib/palette.ts
@@ -8,9 +8,9 @@
 export const SERIES = ["#2c5c94", "#c08419", "#a13f5e", "#4a9a68", "#7c6fc0", "#8a5418"] as const;
 export const SYMBOLS = ["circle", "square", "diamond", "triangle-up", "cross", "triangle-down"];
 export const OTHER = "#a3a3a3";
-export const INK = "#000000";
-export const INK_3 = "#5c5c5c";
-export const RULE = "#d6d6d6";
+export const INK = "#1e2630";
+export const INK_3 = "#5f6974";
+export const RULE = "#ccd2d0";
 
 /** Assign a fixed slot to each region by count (largest first), stable by name. */
 export function regionSlots(
diff --git a/apps/web/src/lib/periods.ts b/apps/web/src/lib/periods.ts
new file mode 100644
index 0000000..5130b0c
--- /dev/null
+++ b/apps/web/src/lib/periods.ts
@@ -0,0 +1,50 @@
+/**
+ * Archaeological periods as layers of sediment: youngest (lightest) on top, oldest (darkest) at
+ * the bottom. The same colour stands for the same period on every screen (landing core, library
+ * filters, table swatches), so the ramp is reserved for time and never reused for regions.
+ */
+
+export type Lithology = "soil" | "sand" | "silt" | "brick" | "hatch" | "cross" | "shale" | "gravel" | "tick" | "none";
+
+export interface PeriodStyle {
+  name: string;
+  color: string;
+  /** Pattern drawn over the band, after the symbols of a geological section. */
+  lithology: Lithology;
+  /** Ink for pattern marks over this colour. */
+  mark: string;
+}
+
+const ORDER: PeriodStyle[] = [
+  { name: "Modern", color: "#e9ddb4", lithology: "soil", mark: "#b9a76c" },
+  { name: "Early Modern", color: "#dfcb8f", lithology: "sand", mark: "#a88f48" },
+  { name: "Medieval", color: "#cdae66", lithology: "silt", mark: "#8f7333" },
+  { name: "Iron Age", color: "#b98a4a", lithology: "brick", mark: "#7e5823" },
+  { name: "Bronze Age", color: "#a46a3a", lithology: "hatch", mark: "#6c401d" },
+  { name: "Chalcolithic", color: "#7f8b62", lithology: "cross", mark: "#525c3b" },
+  { name: "Neolithic", color: "#5f7f6e", lithology: "shale", mark: "#3c5648" },
+  { name: "Mesolithic", color: "#4e6a7a", lithology: "gravel", mark: "#2f4553" },
+  { name: "Upper Palaeolithic", color: "#34404f", lithology: "tick", mark: "#55657a" },
+];
+
+const UNKNOWN: PeriodStyle = { name: "Undated", color: "#b4b0a6", lithology: "none", mark: "#8a867c" };
+
+const INDEX = new Map(ORDER.map((p, i) => [p.name.toLowerCase(), i]));
+
+export function periodStyle(name: string | null | undefined): PeriodStyle {
+  if (!name) return UNKNOWN;
+  const i = INDEX.get(name.toLowerCase());
+  return i === undefined ? { ...UNKNOWN, name } : ORDER[i]!;
+}
+
+/** Sort key: youngest first; unknown periods sink below the known ones, alphabetically. */
+export function periodRank(name: string | null | undefined): number {
+  if (!name) return ORDER.length + 1;
+  return INDEX.get(name.toLowerCase()) ?? ORDER.length;
+}
+
+export function sortPeriods<T>(items: T[], key: (t: T) => string | null | undefined): T[] {
+  return [...items].sort(
+    (a, b) => periodRank(key(a)) - periodRank(key(b)) || String(key(a) ?? "").localeCompare(String(key(b) ?? "")),
+  );
+}
diff --git a/apps/web/test/components.test.tsx b/apps/web/test/components.test.tsx
index b953497..c4a7ecc 100644
--- a/apps/web/test/components.test.tsx
+++ b/apps/web/test/components.test.tsx
@@ -32,7 +32,7 @@ describe("components", () => {
 
   it("labels results as exploratory or formal", () => {
     render(<KindMark kind="formal" />);
-    expect(screen.getByText("formal")).toHaveAttribute("title", expect.stringMatching(/qpAdm/));
+    expect(screen.getByText("Formal")).toHaveAttribute("title", expect.stringMatching(/qpAdm/));
   });
 
   it("renders a nearest-population table with an exploratory caveat", () => {
@@ -52,7 +52,7 @@ describe("components", () => {
     render(<ResultView result={synthQpAdm} />);
     expect(screen.getByText("infeasible")).toBeInTheDocument();
     expect(screen.getByText(/Infeasible weights/)).toBeInTheDocument();
-    expect(screen.getByText(/No weight figure is drawn/)).toBeInTheDocument();
+    expect(screen.getByText(/No chart: weights fall outside/)).toBeInTheDocument();
     expect(screen.queryByRole("img", { name: /qpAdm weights/ })).toBeNull();
     expect(screen.getByText("1.120 ± 0.200")).toBeInTheDocument();
   });
diff --git a/docs/screenshots/analysis-status.png b/docs/screenshots/analysis-status.png
index 2bfb324..572b4b3 100644
Binary files a/docs/screenshots/analysis-status.png and b/docs/screenshots/analysis-status.png differ
diff --git a/docs/screenshots/assistant.png b/docs/screenshots/assistant.png
index 3d0e736..64f20c6 100644
Binary files a/docs/screenshots/assistant.png and b/docs/screenshots/assistant.png differ
diff --git a/docs/screenshots/before-redesign/compose.png b/docs/screenshots/before-redesign/compose.png
new file mode 100644
index 0000000..6094bc2
Binary files /dev/null and b/docs/screenshots/before-redesign/compose.png differ
diff --git a/docs/screenshots/before-redesign/example-qpadm.png b/docs/screenshots/before-redesign/example-qpadm.png
new file mode 100644
index 0000000..9eb0bb9
Binary files /dev/null and b/docs/screenshots/before-redesign/example-qpadm.png differ
diff --git a/docs/screenshots/before-redesign/landing.png b/docs/screenshots/before-redesign/landing.png
new file mode 100644
index 0000000..a3f8f37
Binary files /dev/null and b/docs/screenshots/before-redesign/landing.png differ
diff --git a/docs/screenshots/before-redesign/library.png b/docs/screenshots/before-redesign/library.png
new file mode 100644
index 0000000..39a2aed
Binary files /dev/null and b/docs/screenshots/before-redesign/library.png differ
diff --git a/docs/screenshots/compose-mobile.png b/docs/screenshots/compose-mobile.png
index 193d9fc..6b1db57 100644
Binary files a/docs/screenshots/compose-mobile.png and b/docs/screenshots/compose-mobile.png differ
diff --git a/docs/screenshots/compose.png b/docs/screenshots/compose.png
index 6c55645..f150466 100644
Binary files a/docs/screenshots/compose.png and b/docs/screenshots/compose.png differ
diff --git a/docs/screenshots/data.png b/docs/screenshots/data.png
index 32d6e38..594b458 100644
Binary files a/docs/screenshots/data.png and b/docs/screenshots/data.png differ
diff --git a/docs/screenshots/example-f4.png b/docs/screenshots/example-f4.png
index 1706c1d..42d2259 100644
Binary files a/docs/screenshots/example-f4.png and b/docs/screenshots/example-f4.png differ
diff --git a/docs/screenshots/example-qpadm-rotate.png b/docs/screenshots/example-qpadm-rotate.png
index db9cd26..8136350 100644
Binary files a/docs/screenshots/example-qpadm-rotate.png and b/docs/screenshots/example-qpadm-rotate.png differ
diff --git a/docs/screenshots/example-qpadm-single-source.png b/docs/screenshots/example-qpadm-single-source.png
index b7bf097..ad19f07 100644
Binary files a/docs/screenshots/example-qpadm-single-source.png and b/docs/screenshots/example-qpadm-single-source.png differ
diff --git a/docs/screenshots/example-qpadm-two-source.png b/docs/screenshots/example-qpadm-two-source.png
index 98b041c..8e0e049 100644
Binary files a/docs/screenshots/example-qpadm-two-source.png and b/docs/screenshots/example-qpadm-two-source.png differ
diff --git a/docs/screenshots/example-qpwave.png b/docs/screenshots/example-qpwave.png
index 30d73cc..b4f6edd 100644
Binary files a/docs/screenshots/example-qpwave.png and b/docs/screenshots/example-qpwave.png differ
diff --git a/docs/screenshots/examples.png b/docs/screenshots/examples.png
index 94a7699..3b47593 100644
Binary files a/docs/screenshots/examples.png and b/docs/screenshots/examples.png differ
diff --git a/docs/screenshots/landing-mobile.png b/docs/screenshots/landing-mobile.png
index ac46155..544bde5 100644
Binary files a/docs/screenshots/landing-mobile.png and b/docs/screenshots/landing-mobile.png differ
diff --git a/docs/screenshots/landing.png b/docs/screenshots/landing.png
index 27f4720..ee586f9 100644
Binary files a/docs/screenshots/landing.png and b/docs/screenshots/landing.png differ
diff --git a/docs/screenshots/library-mobile.png b/docs/screenshots/library-mobile.png
index 9be1ebe..2be7a06 100644
Binary files a/docs/screenshots/library-mobile.png and b/docs/screenshots/library-mobile.png differ
diff --git a/docs/screenshots/library.png b/docs/screenshots/library.png
index fc1fb16..0408ead 100644
Binary files a/docs/screenshots/library.png and b/docs/screenshots/library.png differ
diff --git a/docs/screenshots/methods.png b/docs/screenshots/methods.png
index 899c0d2..282a3a3 100644
Binary files a/docs/screenshots/methods.png and b/docs/screenshots/methods.png differ
diff --git a/docs/screenshots/population.png b/docs/screenshots/population.png
new file mode 100644
index 0000000..e744004
Binary files /dev/null and b/docs/screenshots/population.png differ
diff --git a/docs/screenshots/upload-qc.png b/docs/screenshots/upload-qc.png
index 86eea58..47a8db2 100644
Binary files a/docs/screenshots/upload-qc.png and b/docs/screenshots/upload-qc.png differ
diff --git a/docs/screenshots/upload.png b/docs/screenshots/upload.png
index d63e261..96ff393 100644
Binary files a/docs/screenshots/upload.png and b/docs/screenshots/upload.png differ
diff --git a/docs/screenshots/workspace-dataset.png b/docs/screenshots/workspace-dataset.png
index e18415d..ce0daac 100644
Binary files a/docs/screenshots/workspace-dataset.png and b/docs/screenshots/workspace-dataset.png differ
diff --git a/docs/screenshots/workspace.png b/docs/screenshots/workspace.png
index ebbae7a..516ff2e 100644
Binary files a/docs/screenshots/workspace.png and b/docs/screenshots/workspace.png differ