did you know? subpage

@@ -13,4 +13,5 @@ const PER_PAGE = 3;
     <h2>Did you know?</h2>
     <div class="dyk-nav">
+      <a class="dyk-all-link" href={`${base}did-you-know/`}>All {facts.length} →</a>
       <span class="dyk-count" id="dykCount">1 / {Math.ceil(facts.length / PER_PAGE)}</span>
       <button type="button" id="dykPrev" aria-label="Previous three">←</button>

@@ -103,8 +103,10 @@ function parse(text) {
 
 export function getFacts() {
-  return [...fromHistory, ...curated, ...computed()].map((f) => {
+  // `group` says where a fact comes from; the /did-you-know/ page lists them under it.
+  const all = [...fromHistory.map((f) => ({ ...f, group: "history" })), ...curated.map((f) => ({ ...f, group: "countries" })), ...computed().map((f) => ({ ...f, group: "scores" }))];
+  return all.map((f) => {
     const history = f.history ? changes.find((ch) => ch.id === f.history) : null;
     if (f.history && !history) throw new Error(`facts.js: unknown history entry "${f.history}"`);
-    return { kicker: f.kicker, parts: parse(f.text), history };
+    return { kicker: f.kicker, parts: parse(f.text), history, group: f.group };
   });
 }

@@ -0,0 +1,44 @@
+---
+// Every "Did you know?" case on one page, grouped by where it comes from. The home page shows
+// the same cases three at a time, shuffled; here they are all open and in a fixed order.
+import Base from "../layouts/Base.astro";
+import { getFacts } from "../lib/facts.js";
+
+const base = import.meta.env.BASE_URL;
+const facts = getFacts();
+const groups = [
+  ["history", "From the history", "Moments from two centuries of cannabis law, oldest first."],
+  ["countries", "From the country profiles", "Rules that are odd, generous or harsh in one particular place."],
+  ["scores", "From the scores", "Worked out from today's scores, so they change when the data does."],
+].map(([id, name, sub]) => ({ id, name, sub, facts: facts.filter((f) => f.group === id) }));
+---
+<Base title="Did you know?" description={`${facts.length} curious cases from the Cannabis Freedom Index: strange rules, forgotten laws and what the scores show, each linked to its source page.`}>
+  <main class="changes-page">
+    <section class="hero hero-sm">
+      <p class="eyebrow">Cannabis Freedom Index</p>
+      <h1>Did you know?</h1>
+      <p class="lede">{facts.length} curious cases from the index: strange rules, forgotten laws and what the scores show. Each one links to the country or the <a href={`${base}history/`}>history</a> entry it comes from.</p>
+    </section>
+    {groups.map((g) => (
+      <section class="section" id={g.id}>
+        <div class="section-head"><div>
+          <h2>{g.name} <span class="dyk-n">{g.facts.length}</span></h2>
+          <p class="sub">{g.sub}</p>
+        </div></div>
+        <ol class="dyk-facts dyk-all">
+          {g.facts.map((f) => (
+            <li class="dyk-fact">
+              <p class="dyk-kicker">{f.kicker}</p>
+              <p class="dyk-text">
+                {f.parts.map((part) => typeof part === "string" ? part
+                  : part.country ? <a href={`${base}country/${part.country.slug}/`}>{part.label}</a>
+                  : <a href={`${base}history/${part.change.id}/`}>{part.label}</a>)}
+              </p>
+              {f.history && <a class="dyk-more" href={`${base}history/${f.history.id}/`}>The full story →</a>}
+            </li>
+          ))}
+        </ol>
+      </section>
+    ))}
+  </main>
+</Base>

@@ -16,5 +16,5 @@ const rows = [
     ["History", "Laws, rulings and treaties", "history/"], ["Can I?", "Plain answers per country", "can-i/"], ["Compare", "Countries side by side", "compare/"],
     ["Download the data", "Scores, history and yearly panel", "data/"], ["Changelog", "Every score change", "changelog/"],
-    ["Articles", "The longer reads on single events", "articles/"], ["Culture", "The people behind the laws", "culture/"], ["Sources", "Every source the index cites", "sources/"],
+    ["Articles", "The longer reads on single events", "articles/"], ["Did you know?", "Curious cases from the index", "did-you-know/"], ["Culture", "The people behind the laws", "culture/"], ["Sources", "Every source the index cites", "sources/"],
   ].map(([n, s, u]) => ({ t: "p", n, s, u })),
   // every map view, history kind and history period has its own page

@@ -13,4 +13,5 @@ export function GET({ site }) {
     ["history/", latest, 0.8],
     ["compare/", latest, 0.6],
+    ["did-you-know/", latest, 0.5],
     ["changelog/", latest, 0.5],
     ["data/", latest, 0.5],

@@ -899,4 +899,10 @@ h3 { font-size: 22px; }
 .dyk-more:hover { color: var(--text); }
 @media (max-width: 900px) { .dyk-facts { grid-template-columns: 1fr; min-height: 0; } }
+.dyk-all-link { color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; }
+.dyk-all-link:hover { color: var(--text); }
+/* /did-you-know/: every case at once, each in its own ruled cell */
+.dyk-all { min-height: 0; border-top: 0; gap: 0 clamp(28px, 4vw, 56px); }
+.dyk-all .dyk-fact { padding: 18px 0 26px; border-top: 1px solid var(--border); }
+.dyk-n { font: 400 11.5px var(--mono); color: var(--muted); vertical-align: middle; margin-left: 6px; }
 /* latest changes: a ledger */
 .ledger { margin-top: clamp(44px, 7vw, 88px); border-top: 1px solid var(--text); }