more feats

@@ -25,5 +25,5 @@ const shortDate = (iso) =>
             <span class="mini-tl-body">
               <span class="mini-tl-country">{ch.country.flag} {ch.country.name}</span>
-              <b>{ch.title}</b>
+              <b><span class="kind" title={ch.kind.label} aria-hidden="true">{ch.kind.emoji}</span><span class="visually-hidden">{ch.kind.label}: </span>{ch.title}</b>
               <ScoreChange score={ch.score} />
             </span>

@@ -69,4 +69,5 @@ const circ = 2 * Math.PI * r;
           ? `An estimate: there is no national survey, so the median rate of surveyed countries in ${c.region} is assumed.`
           : `People who used cannabis in the past year, from a ${use.year} survey applied to today's population.`}</p>
+        <p class="c-use-src">Source: <a href="https://www.unodc.org/unodc/en/data-and-analysis/wdr2022_annex.html" target="_blank" rel="noopener noreferrer">UNODC World Drug Report</a> prevalence figures, as collected in <a href="https://en.wikipedia.org/wiki/List_of_countries_by_annual_cannabis_use" target="_blank" rel="noopener noreferrer">Wikipedia's list of annual cannabis use by country</a>; population aged 15–64 from the <a href="https://data.worldbank.org/indicator/SP.POP.1564.TO" target="_blank" rel="noopener noreferrer">World Bank</a>.</p>
       </dl>
     )}

@@ -14,5 +14,5 @@ const base = import.meta.env.BASE_URL;
         <a href={`${base}history/${ch.id}/`}>
           <time datetime={ch.date}>{changeDate(ch)}</time>
-          <b>{ch.title}</b>
+          <b><span class="kind" title={ch.kind.label} aria-hidden="true">{ch.kind.emoji}</span><span class="visually-hidden">{ch.kind.label}: </span>{ch.title}</b>
           {ch.score && <span class="c-change-score">
             {ch.score.before} <span aria-hidden="true">→</span><span class="visually-hidden">to</span> {ch.score.after}

@@ -1,10 +1,11 @@
 ---
-// One page of the History list: a period of entries, newest first, grouped by year, with links
-// to the other periods above and below.
+// One page of the History list, newest first and grouped by year. It shows either a period
+// (`period`) or every entry of one kind (`kind`, a key of CHANGE_CATEGORIES). The period links
+// and the kind filters above the list lead to the other pages.
 import ScoreChange from "./ScoreChange.astro";
-import { historyPeriods, formatDate } from "../lib/countries.js";
+import { changes, historyPeriods, formatDate, CHANGE_CATEGORIES } from "../lib/countries.js";
 import { tierColor } from "../lib/tiers.js";
 
-const { period } = Astro.props;
+const { period, kind } = Astro.props;
 const base = import.meta.env.BASE_URL;
 // the newest period lives at /history/ itself
@@ -13,6 +14,10 @@ const index = historyPeriods.indexOf(period);
 const newer = historyPeriods[index - 1];
 const older = historyPeriods[index + 1];
-const years = [...new Set(period.items.map((ch) => ch.date.slice(0, 4)))]
-  .map((year) => ({ year, items: period.items.filter((ch) => ch.date.startsWith(year)) }));
+// estimated entries have no real date, so they are not listed
+const dated = changes.filter((ch) => !ch.estimate);
+const items = kind ? dated.filter((ch) => ch.category === kind) : period.items;
+const kindCount = (key) => dated.filter((ch) => ch.category === key).length;
+const years = [...new Set(items.map((ch) => ch.date.slice(0, 4)))]
+  .map((year) => ({ year, items: items.filter((ch) => ch.date.startsWith(year)) }));
 ---
 <nav class="periods" aria-label="Periods">
@@ -22,4 +27,13 @@ const years = [...new Set(period.items.map((ch) => ch.date.slice(0, 4)))]
 </nav>
 
+<nav class="kinds" aria-label="Filter by kind of event">
+  <a href={`${base}history/`} aria-current={kind ? undefined : "true"}>All kinds</a>
+  {Object.entries(CHANGE_CATEGORIES).map(([key, k]) => (
+    <a href={`${base}history/kind/${key}/`} title={k.help} aria-current={key === kind ? "page" : undefined}>
+      <span aria-hidden="true">{k.emoji}</span> {k.label} <small>{kindCount(key)}</small>
+    </a>
+  ))}
+</nav>
+
 <div class="chlog">
   {years.map(({ year, items }) => (
@@ -34,5 +48,5 @@ const years = [...new Set(period.items.map((ch) => ch.date.slice(0, 4)))]
                 <span>{ch.place.flag} {ch.place.name}</span>
               </p>
-              <h3>{ch.title}</h3>
+              <h3><span class="kind" title={ch.kind.label} aria-hidden="true">{ch.kind.emoji}</span><span class="visually-hidden">{ch.kind.label}: </span>{ch.title}</h3>
               <p class="chl-text">{ch.description}</p>
               {ch.score && <ScoreChange score={ch.score} />}
@@ -45,5 +59,5 @@ const years = [...new Set(period.items.map((ch) => ch.date.slice(0, 4)))]
 </div>
 
-<nav class="pager chl-pager" aria-label="Other periods">
+{period && <nav class="pager chl-pager" aria-label="Other periods">
   {newer
     ? <a href={href(newer)}><small>Newer</small><span>← {newer.label}</span></a>
@@ -52,3 +66,3 @@ const years = [...new Set(period.items.map((ch) => ch.date.slice(0, 4)))]
     ? <a class="next" href={href(older)}><small>Older</small><span>{older.label} →</span></a>
     : <span></span>}
-</nav>
+</nav>}

@@ -4,5 +4,5 @@ import { defineCollection } from "astro:content";
 import { glob, file } from "astro/loaders";
 import { z } from "astro/zod";
-import { SEGMENT_IDS, CONTEXT_IDS } from "./lib/segment-ids.js";
+import { SEGMENT_IDS, CONTEXT_IDS, CHANGE_CATEGORIES } from "./lib/segment-ids.js";
 
 const score = z.number().int().min(0).max(10);
@@ -116,4 +116,5 @@ const changes = defineCollection({
       id: z.string(),
       date: z.string().regex(/^\d{4}(-\d{2}(-\d{2})?)?$/, "use YYYY-MM-DD, YYYY-MM or YYYY"),
+      category: z.enum(Object.keys(CHANGE_CATEGORIES) as [string, ...string[]]), // what kind of event it is; see segment-ids.js
       // A change has `country` and `before`. Without `before` the entry is context that moves no
       // score: a report or ruling in that country, or with no `country` a treaty or UN decision.

@@ -2,5 +2,6 @@
 // pages need: index scores, ranks, averages. Runs once at build time.
 import { getCollection } from "astro:content";
-import { SEGMENT_IDS } from "./segment-ids.js";
+import { CHANGE_CATEGORIES, SEGMENT_IDS } from "./segment-ids.js";
+export { CHANGE_CATEGORIES };
 
 export const DATA_SNAPSHOT = "2026";
@@ -130,5 +131,6 @@ export const changes = changeEntries
     if (data.country && !country) throw new Error(`changes.yaml: "${data.id}" refers to unknown country "${data.country}"`);
     // context only (a treaty, report or ruling): part of the history, but it moves no score
-    if (!data.before) return { ...data, country, place: country ?? { flag: "🌐", name: "International" }, source: pair(data.source), score: null, segments: [] };
+    const kind = CHANGE_CATEGORIES[data.category]; // { emoji, label, help }
+    if (!data.before) return { ...data, kind, country, place: country ?? { flag: "🌐", name: "International" }, source: pair(data.source), score: null, segments: [] };
     const next = changeEntries.slice(i + 1).find((x) => x.country === data.country && x.before);
     const before = scoreList(data.before);
@@ -137,4 +139,5 @@ export const changes = changeEntries
     return {
       ...data,
+      kind,
       country,
       place: country,

@@ -3,2 +3,14 @@
 export const SEGMENT_IDS = ["possession", "cultivation", "enforcement", "sharing", "consumption", "access"];
 export const CONTEXT_IDS = ["production", "products", "medical", "consequences"];
+// What kind of event a History entry is, in the order the legend lists them.
+export const CHANGE_CATEGORIES = {
+  ban: { emoji: "⛔", label: "Ban", help: "Cannabis is prohibited or restricted for the first time, or banned again" },
+  tightening: { emoji: "👎", label: "Tightening", help: "Harsher penalties, new offences or a crackdown" },
+  death: { emoji: "☠️", label: "Death penalty", help: "The death penalty is introduced, used, limited or removed" },
+  easing: { emoji: "👍", label: "Easing", help: "Decriminalisation, lighter penalties or a ruling that protects users" },
+  legalisation: { emoji: "✅", label: "Legalisation", help: "Possession, growing or sales become legal for adults" },
+  medical: { emoji: "💊", label: "Medical", help: "Medical cannabis is allowed, widened or refused" },
+  debate: { emoji: "🗳️", label: "Debate", help: "Reports, commissions, votes and plans that changed no rule by themselves" },
+  international: { emoji: "🌐", label: "International", help: "Treaties and decisions of international bodies" },
+  other: { emoji: "📜", label: "Other law", help: "Other laws and rulings, including hemp and CBD rules" },
+};

@@ -22,5 +22,5 @@ const diff = (seg) => seg.after - seg.before;
 
     <article class="change-detail">
-      <p class="eyebrow"><time datetime={ch.date}>{changeDate(ch)}</time> · {ch.place.name}</p>
+      <p class="eyebrow"><span title={ch.kind.help}>{ch.kind.emoji} {ch.kind.label}</span> · <time datetime={ch.date}>{changeDate(ch)}</time> · {ch.place.name}</p>
       <h1>{ch.title}</h1>
       <p class="lede">{ch.description}</p>

@@ -0,0 +1,23 @@
+---
+// Every History entry of one kind, across all periods.
+import Base from "../../../layouts/Base.astro";
+import HistoryList from "../../../components/HistoryList.astro";
+import { CHANGE_CATEGORIES } from "../../../lib/countries.js";
+
+export function getStaticPaths() {
+  return Object.keys(CHANGE_CATEGORIES).map((kind) => ({ params: { kind } }));
+}
+
+const { kind } = Astro.params;
+const k = CHANGE_CATEGORIES[kind];
+---
+<Base title={`History: ${k.label}`} description={`${k.help}. Every such entry in the history of cannabis law, newest first.`}>
+  <main class="changes-page">
+    <section class="hero hero-sm">
+      <p class="eyebrow">History</p>
+      <h1>{k.emoji} {k.label}</h1>
+      <p class="lede">{k.help}.</p>
+    </section>
+    <HistoryList kind={kind} />
+  </main>
+</Base>

@@ -14,5 +14,5 @@ const useNote = (c) => c.use.estimate
   : `${c.use.prevalence}% of people aged 15–64 used cannabis in the past year (${c.use.year} survey)`;
 const stats = [
-  [worldAvg.toFixed(1), "world average, out of 100"],
+  [countries.length, "countries scored"],
   [count((c) => c.raw >= 60), "reach the “Free” tier (60+)"],
   [count((c) => c.raw >= 40), "score 40+: legal to possess and grow, with limits"],
@@ -25,9 +25,17 @@ const legend = [...TIERS].reverse().map((t, i, arr) => ({
 const MED_ORDER = ["yes", "limited", "no"];
 // What the browser needs for the map: scores only, no prose.
-const mapData = countries.map(({ id, num, name, flag, raw, score, rank, s, use }) => ({ id, num, name, flag, raw, score, rank, s, use }));
+// `ratio` is the share of people who use cannabis divided by the index score: how far use runs
+// ahead of freedom. A score below 1 counts as 1, so that a zero does not divide.
+const mapData = countries.map(({ id, num, name, flag, raw, score, rank, s, use }) =>
+  ({ id, num, name, flag, raw, score, rank, s, use: { ...use, ratio: +(use.prevalence / Math.max(raw, 1)).toFixed(2) } }));
 // Cannabis use on the map: one hue from light to dark, in five steps. Each step starts at `min`.
 const USE_SCALES = {
   users: { label: "Cannabis users", steps: [[0, "Under 10k"], [1e4, "10k–100k"], [1e5, "100k–1M"], [1e6, "1M–10M"], [1e7, "10M or more"]] },
   prevalence: { label: "Share who use cannabis", steps: [[0, "Under 1%"], [1, "1–3%"], [3, "3–7%"], [7, "7–15%"], [15, "15% or more"]] },
+  ratio: {
+    label: "Use relative to freedom",
+    steps: [[0, "Under 0.15"], [0.15, "0.15–0.3"], [0.3, "0.3–0.5"], [0.5, "0.5–1"], [1, "1 or more"]],
+    note: "Share of people aged 15–64 who use cannabis, divided by the index score. A high value means many people use cannabis where the law gives them little freedom to.",
+  },
 };
 ---
@@ -48,5 +56,5 @@ const USE_SCALES = {
         <div>
           <h2>World map</h2>
-          <p class="sub" id="mapSub" data-score="Red means prison risk, green means free. Select a country for its full breakdown." data-use="The stronger the blue, the more people use cannabis. Select a country for its full breakdown.">Red means prison risk, green means free. Select a country for its full breakdown.</p>
+          <p class="sub" id="mapSub" data-score="Red means prison risk, green means free. Select a country for its full breakdown." data-use="The stronger the blue, the more people use cannabis. Select a country for its full breakdown." data-ratio="The stronger the blue, the further cannabis use runs ahead of the freedom to use it. Select a country for its full breakdown.">Red means prison risk, green means free. Select a country for its full breakdown.</p>
         </div>
         <label class="field">
@@ -57,4 +65,5 @@ const USE_SCALES = {
             <option value="users">Cannabis users (number)</option>
             <option value="prevalence">Cannabis users (share of adults)</option>
+            <option value="ratio">Share of users ÷ index</option>
           </select>
         </label>
@@ -79,5 +88,5 @@ const USE_SCALES = {
             {scale.steps.map(([, text], i) => <span><i class="sw" style={`background:var(--u${i})`}></i>{text}</span>)}
             <span><i class="sw sw-nodata"></i>No data</span>
-            <span class="legend-note">People aged 15–64 who used cannabis in the past year. Figures marked ~ are regional estimates.</span>
+            <span class="legend-note">{scale.note ?? "People aged 15–64 who used cannabis in the past year. Figures marked ~ are regional estimates."}</span>
           </div>
         ))}
@@ -235,5 +244,5 @@ const USE_SCALES = {
       document.querySelectorAll("[data-legend]").forEach((el) => { el.hidden = el.dataset.legend !== shown; });
       const sub = $("#mapSub");
-      sub.textContent = isUse() ? sub.dataset.use : sub.dataset.score;
+      sub.textContent = metric === "ratio" ? sub.dataset.ratio : isUse() ? sub.dataset.use : sub.dataset.score;
     }
     $("#metric").addEventListener("change", (e) => { metric = e.target.value; paintMap(); });
@@ -275,5 +284,10 @@ const USE_SCALES = {
         .on("pointermove", (e, d) => {
           const c = d.c;
-          tip.innerHTML = c && isUse()
+          tip.innerHTML = c && metric === "ratio"
+            ? `<strong>${c.flag} ${c.name}</strong>
+               <div class="row"><span>Share ÷ index</span><b>${c.use.estimate ? "~" : ""}${c.use.ratio}</b></div>
+               <div class="row"><span>Share aged 15–64</span><b>${c.use.estimate ? "~" : ""}${c.use.prevalence}%</b></div>
+               <div class="row"><span>Index</span><b>${c.score} / 100</b></div>`
+            : c && isUse()
             ? `<strong>${c.flag} ${c.name}</strong>
                <div class="row"><span>Users</span><b>${c.use.estimate ? "~" : ""}${compact(c.use.users)}</b></div>

@@ -576,2 +576,14 @@ th.num-col { text-align: right; }
 .c-use dd { margin: 0; font-family: "Space Grotesk", Inter, system-ui, sans-serif; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
 .c-use p { grid-column: 1 / -1; margin: 6px 0 0; color: var(--muted); font-size: 12.5px; }
+.c-use .c-use-src { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 11.5px; line-height: 1.45; }
+.c-use-src a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px; }
+.c-use-src a:hover { color: var(--text); text-decoration-color: currentColor; }
+
+/* ── History entry kinds ────────────────────────────── */
+.kind { margin-right: 6px; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; letter-spacing: 0; }
+/* the kinds double as filters: each leads to a page listing only that kind */
+.kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; max-width: 760px; }
+.kinds a { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-2); font-size: 12.5px; white-space: nowrap; }
+.kinds a:hover { border-color: var(--muted); color: var(--text); }
+.kinds a[aria-current] { background: var(--surface-2); border-color: var(--muted); color: var(--text); font-weight: 600; }
+.kinds small { opacity: .7; font-weight: 400; font-variant-numeric: tabular-nums; }