better seo, russian history extension

Not shown: a picture, a generated file, or past the length shown per change.

@@ -0,0 +1,19 @@
+---
+// The last section of the home page: what the project is for, in two sentences, and the way
+// to the About page, where its numbers, aims and commitments are set out.
+const base = import.meta.env.BASE_URL;
+---
+<section class="section about-hint" id="about">
+  <div class="section-head">
+    <div>
+      <h2>About the project</h2>
+    </div>
+  </div>
+  <div class="about-hint-body">
+    <p class="about-hint-lede">The aim is larger than a ranking: to become the most complete and most trustworthy source of knowledge on cannabis law and cannabis freedom anywhere.</p>
+    <div>
+      <p>The law as written, the law as enforced, its history and the lives lived under it. Every claim sourced, every file open, every mistake corrected in public.</p>
+      <p class="front-go"><a class="go solid" href={`${base}about/`}>What this is, and what it commits to <span aria-hidden="true">→</span></a></p>
+    </div>
+  </div>
+</section>

@@ -3,5 +3,5 @@ import Base from "../layouts/Base.astro";
 import DidYouKnow from "../components/DidYouKnow.astro";
 import Changes from "../components/Changes.astro";
-import ProjectNumbers from "../components/ProjectNumbers.astro";
+import AboutHint from "../components/AboutHint.astro";
 import Tools from "./Tools.astro";
 import { survey } from "../lib/survey.js";
@@ -158,5 +158,5 @@ const columnGroups = [["Shown by default", BASE_COLUMNS], ...["Score segments",
       {/* The two ends of the ranking, side by side: the leader of each list is set largest. */}
       <div class="extremes">
-        {[["Freest", countries.slice(0, 5)], ["Least free", countries.slice(-5).reverse()]].map(([label, list]) => (
+        {[["Freest", countries.slice(0, 5), "asc", "Full rankings"], ["Least free", countries.slice(-5).reverse(), "desc", "Full rankings, least free first"]].map(([label, list, order, more]) => (
           <section aria-label={label}>
             <h2>{label}</h2>
@@ -173,4 +173,6 @@ const columnGroups = [["Shown by default", BASE_COLUMNS], ...["Score segments",
               ))}
             </ol>
+            {/* down to the rankings table, sorted the way this list reads (see the table script) */}
+            <p class="ext-more"><a class="go" href="#rankings" data-rank-order={order}>{more} <span aria-hidden="true">↓</span></a></p>
           </section>
         ))}
@@ -405,5 +407,5 @@ const columnGroups = [["Shown by default", BASE_COLUMNS], ...["Score segments",
     {!view && <Tools />}
 
-    {!view && <ProjectNumbers />}
+    {!view && <AboutHint />}
 
   </main>
@@ -718,4 +720,13 @@ const columnGroups = [["Shown by default", BASE_COLUMNS], ...["Score segments",
       applyTable();
     });
+    // "Full rankings" under the two top lists: put the table in rank order, best first or worst
+    // first, before the link scrolls down to it.
+    document.addEventListener("click", (e) => {
+      const link = e.target.closest("a[data-rank-order]");
+      if (!link) return;
+      state.sort = "rank";
+      state.asc = link.dataset.rankOrder === "asc";
+      applyTable();
+    });
     // A plain click opens the drawer; modified clicks (new tab etc.) follow the link to the full page.
     tbody.addEventListener("click", (e) => {

@@ -1,4 +1,4 @@
 ---
-// The project in numbers, at the end of the home page: how much is scored, how much history is
+// The project in numbers, on the About page: how much is scored, how much history is
 // recorded and how much of it is sourced. Each number links to where that material can be seen.
 import { SEGMENTS, DATA_SNAPSHOT, places, countries, changes, articles } from "../lib/countries.js";

@@ -108,5 +108,5 @@ const schemas = jsonld ? [jsonld].flat() : [];
   <footer class="footer">
     <p>Cannabis Freedom Index · Informational only, not legal advice · Map data © Natural Earth</p>
-    <p class="footer-links"><a href={`${base}can-i/`}>Can I?</a> · <a href={`${base}compare/`}>Compare</a> · <a href={`${base}changelog/`}>Changelog</a> · <a href={`${base}rss.xml`}>RSS</a> · <a href={`${base}data/`}>Download the data</a> · <a href={`${base}llms.txt`} title="A plain-text guide to this site for language models">For AI: llms.txt</a> · <a href={`${base}data/#licence`}>Licence: data CC BY 4.0, code MIT</a></p>
+    <p class="footer-links"><a href={`${base}about/`}>About</a> · <a href={`${base}can-i/`}>Can I?</a> · <a href={`${base}compare/`}>Compare</a> · <a href={`${base}changelog/`}>Changelog</a> · <a href={`${base}rss.xml`}>RSS</a> · <a href={`${base}data/`}>Download the data</a> · <a href={`${base}llms.txt`} title="A plain-text guide to this site for language models">For AI: llms.txt</a> · <a href={`${base}data/#licence`}>Licence: data CC BY 4.0, code MIT</a></p>
     <p>Open source — the scores, explanations and code are on <a href={repo} target="_blank" rel="noopener noreferrer">GitHub</a>. Spotted a mistake or a law that changed? <a href={`${repo}/issues`} target="_blank" rel="noopener noreferrer">Open an issue</a> or send a pull request.</p>
   </footer>

@@ -58,4 +58,5 @@ const curated = [
 const fromHistory = [
   { kicker: "500 BC · China", history: "china-jirzankal-study-2019", text: "The earliest clear evidence of people burning cannabis for its effect comes from 2,500-year-old braziers in a cemetery in the mountains of western [[CN|China]], where trafficking it can now bring the death penalty." },
+  { kicker: "1563 · England", history: "england-hemp-mandate-1563", text: "In 1563 Elizabeth I ordered every landowner with 60 acres or more in England to grow hemp, or pay a fine of five pounds. The navy needed rope. The same country, the [[GB|United Kingdom]], [[h:uk-ban-1928|banned cannabis]] in 1928." },
   { kicker: "1787 · Madagascar", history: "madagascar-merina-ban-1787", text: "One of the earliest national bans on record is from [[MG|Madagascar]]: in 1787 King Andrianampoinimerina prohibited cannabis across the Merina kingdom, with death as the penalty." },
   { kicker: "1798 · India", history: "india-bhang-tax-1798", text: "In 1798 the British Parliament taxed bhang, ganja and charas in [[IN|India]], saying the aim was to reduce consumption. Attempts to make cannabis a crime in 1838, 1871 and 1877 were never enacted." },
@@ -66,4 +67,7 @@ const fromHistory = [
   { kicker: "1894 · India", history: "india-hemp-drugs-commission-1894", text: "After hearing nearly 1,200 witnesses, the Indian Hemp Drugs Commission concluded in 1894 that moderate use does practically no harm and that a ban would be unjustified. [[IN|India]] taxed and licensed cannabis until 1985." },
   { kicker: "1915 · Trinidad", history: "trinidad-ganja-licensing-1915", text: "[[TT|Trinidad and Tobago]] set up licensed ganja sellers in 1915. Ten years later it [[h:trinidad-ganja-ordinance-1925|banned the plant outright]]." },
+  { kicker: "1922 · Ten tons", history: "de-monfreid-ten-tons-1922", text: "In 1922 a French adventurer shipped ten tons of Indian cannabis out of Bombay, labelled as insecticide. British officials watched it for two years, from the Seychelles to Hamburg. When the bags were finally opened, they held fertiliser." },
+  { kicker: "1920 · United Kingdom", history: "uk-dangerous-drugs-act-1920", text: "When the [[GB|United Kingdom]] wrote its first Dangerous Drugs Act in 1920, cannabis was not left out on purpose: the committee never discussed it. Police asked for hashish to be added and were told there was no evidence that the habit was at all common." },
+  { kicker: "1925 · United Kingdom", history: "uk-cannabis-poison-schedule-1925", text: "When cannabis was declared a poison in the [[GB|United Kingdom]] in 1925, the only objection raised in Parliament was about corn plasters: manufacturers who used it in them had five weeks to relabel millions of packets." },
   { kicker: "1923 · Canada", history: "canada-ban-1923", text: `[[CA|Canada]]${countries[0].id === "CA" ? ", today's highest-scoring country," : ""} banned cannabis in 1923 without a word of debate in Parliament. Nobody has established why: there was almost no use, and the first seizure came nine years later.` },
   { kicker: "1923 · South Africa", history: "south-africa-league-request-1923", text: `It was [[ZA|South Africa]] that asked the League of Nations in 1923 to treat cannabis like opium and cocaine. A century later it ranks #${byId("ZA")?.rank} in the world for cannabis freedom.` },

@@ -40,5 +40,6 @@ export function flagOf(id) {
 // it (the template, the props, this file), and reused while that hash stays the same.
 const CACHE = path.join(ROOT, ".cache", "og");
-const self = readFileSync(new URL(import.meta.url));
+// this file as written, not the bundle it is built into, which changes with unrelated code
+const self = readFileSync(path.join(ROOT, "src", "og", "render.js"));
 // The template's text reaches satori as HTML, where ' " & < > arrive as entities that satori
 // draws letter for letter ("d&#39;Ivoire"). Typographic forms of the same characters pass through.

@@ -0,0 +1,123 @@
+---
+// About: what the project is, what it is for, where it is meant to go and what it commits to.
+// The figures are counted from the data at build time, so the page stays true as the data grows.
+import Base from "../layouts/Base.astro";
+import ProjectNumbers from "../components/ProjectNumbers.astro";
+import { SEGMENTS, DATA_SNAPSHOT, places, countries, changes, articles } from "../lib/countries.js";
+import { archivedCount } from "../lib/archive.js";
+import { sourceKey } from "../lib/sources.js";
+import { survey } from "../lib/survey.js";
+
+const base = import.meta.env.BASE_URL;
+const repo = "https://github.com/burningtree/cannabis-freedom-index";
+const num = (n) => n.toLocaleString("en-GB");
+const dated = changes.filter((ch) => !ch.estimate);
+const sources = new Set();
+for (const c of places) for (const s of c.details.sources) sources.add(s[3]);
+for (const ch of changes) for (const s of ch.sources) sources.add(s[3]);
+for (const a of articles.values()) for (const s of a.data.sources) sources.add(sourceKey(s));
+const oldest = dated.at(-1).date.slice(0, 4);
+const checked = Math.round((dated.filter((ch) => ch.checked).length / dated.length) * 100);
+
+// What exists today, layer by layer, and what each is meant to become.
+const layers = [
+  ["The law today", `${base}#rankings`, `A score from 0 to 100 for each of ${places.length} countries and territories, built from ${SEGMENTS.length} questions a person actually faces: may I carry it, grow it, share it, use it, buy it, and what happens if I am caught. Every score comes with the rule it rests on and the source for that rule.`],
+  ["How it got that way", `${base}history/`, `${num(dated.length)} dated laws, court rulings and treaties since ${oldest}, each showing whether and how it moved a country's score. ${num(articles.size)} of them are told in full as articles.`],
+  ["Life under the law", `${base}survey/`, `State of Cannabis, a yearly survey of what people do, what they believe and what they see in the countries they know. The index measures the statute; this measures what it is like to live with it.`],
+  ["The people and beliefs behind it", `${base}culture/`, `A slower strand of work on stigma, tradition, obedience and resistance: why a law nobody respects is still obeyed, and why one everybody breaks is still on the books.`],
+  ["Data anyone can build on", `${base}data/`, `Every score, every history entry and a yearly panel since 1900 as open files, for researchers, journalists and other projects.`],
+];
+const commitments = [
+  ["Every claim has a source", `The rule is that nothing is scored or stated from memory or from a search summary. Each rule and each event cites where it comes from, with primary law preferred over commentary. ${num(sources.size)} sources are cited so far, and ${checked}% of history entries have been checked against a source that was opened and read.`],
+  ["Sources are kept from disappearing", `Links die. ${archivedCount > 0 ? `${num(archivedCount)} of the cited pages already have a copy saved in the Internet Archive, and the rest are being saved.` : "Cited pages are being saved in the Internet Archive."}`],
+  ["Open by default", `The data is free to reuse under CC BY 4.0 and the code under the MIT licence. The files, the methodology and the questionnaire are public, so any figure can be checked and any judgment disputed.`],
+  ["Mistakes are corrected in the open", `Laws change and this project gets things wrong. Every change to a score is logged with its date, and anyone can report an error or a new law.`],
+  ["The reader's side, not the industry's", `The index asks what a person is free to do. It does not measure market size, investment climate or how friendly a country is to cannabis businesses.`],
+  ["Scores are judgments, and say so", `A number cannot hold a legal system. The method is published, the weights are stated, and each score can be traced to the text it was read from. Where the law on paper and the practice differ, both are described.`],
+  ["Respondents are protected", `The survey asks for no name, email or account. Answers are encrypted, only counts are published, and small groups are never shown.`],
+  ["Machine help is disclosed", `Research and drafting are done with the help of AI models. Articles are labelled with the model that wrote them and the date, and the rule that every statement must rest on a source that was read applies to machines as it does to people.`],
+];
+---
+<Base title="About" description="What the Cannabis Freedom Index is, what it is for, where it is going and what it commits to: sourced, open, corrected in public.">
+  <main class="changes-page culture about">
+    <section class="hero hero-sm">
+      <p class="eyebrow">About <span>{DATA_SNAPSHOT} edition</span></p>
+      <h1>What this is, and what it is for</h1>
+      <p class="lede">The Cannabis Freedom Index sets out, for every country in the world, how free a person is to carry, grow, share and use cannabis, and how the law came to be what it is.</p>
+      <p class="lede">The aim is larger than a ranking. It is to become the most complete and most trustworthy source of knowledge on cannabis law and cannabis freedom anywhere: the law as written, the law as enforced, its history, and the lives lived under it, all sourced, all open, all in one place.</p>
+    </section>
+
+    <ProjectNumbers />
+
+    <section class="section">
+      <div class="section-head"><div>
+        <h2>Why it exists</h2>
+      </div></div>
+      <div class="about-prose">
+        <p>Cannabis law is scattered across some two hundred legal systems, written in dozens of languages, amended constantly and reported badly. The simple question, <em>what am I allowed to do here?</em>, usually has no simple, reliable answer. What can be found is often out of date, copied from somewhere else, or written to sell something.</p>
+        <p>The usual labels do not help much either. "Legal", "decriminalised" and "illegal" hide more than they show: a country can let adults possess cannabis and give them no lawful way to obtain it; another can ban it on paper and never enforce the ban; a third can license exports while jailing its own citizens for a gram. The index looks past the label to what a person is, in fact, free to do.</p>
+        <p>And a law is never only a law. It has a history, usually longer and stranger than expected, and it lands on real people who obey it, ignore it or resist it. Understanding cannabis freedom means holding all of that together. That is the work.</p>
+      </div>
+    </section>
+
+    <section class="section">
+      <div class="section-head"><div>
+        <h2>What it covers</h2>
+        <p class="sub">Five layers, each built on the one before. Together they are meant to answer not only what the law says, but why, since when, and with what effect.</p>
+      </div></div>
+      <ol class="culture-threads about-layers">
+        {layers.map(([name, href, text], i) => (
+          <li>
+            <a href={href}>
+              <time>{String(i + 1).padStart(2, "0")}</time>
+              <span>{name}</span>
+              <p>{text}</p>
+            </a>
+          </li>
+        ))}
+      </ol>
+    </section>
+
+    <section class="section">
+      <div class="section-head"><div>
+        <h2>Where it is going</h2>
+      </div></div>
+      <div class="about-prose">
+        <p>The intention is breadth and depth at once. Breadth means every country, including the ones nobody writes about, described as a whole and not by one city or one headline. Depth means going back to the statute and the court ruling, following each law to its origin, and recording how it is applied in practice: arrests, prices, clubs, the black market, what happens to a visitor or a driver.</p>
+        <p>Three things are being built towards. First, a complete legal record: the present law of every country resting on primary sources, and its history traced back as far as the record goes. Second, evidence of reality beside the record: what people report, year after year, through the <a href={`${base}survey/`}>State of Cannabis</a> survey, so that the distance between law and life can be measured and watched over time. Third, a dataset good enough to study: consistent across countries and across decades, documented, citable and permanent.</p>
+        <p>None of this is finished, and parts of it are thin. The page on <a href={`${base}#methodology`}>how the scores are made</a> says how each judgment is reached; the <a href={`${base}changelog/`}>changelog</a> shows what has been corrected.</p>
+      </div>
+    </section>
+
+    <section class="section">
+      <div class="section-head"><div>
+        <h2>What it commits to</h2>
+        <p class="sub">The standards the project holds itself to. They are the reason to trust it, and the measure to hold it against.</p>
+      </div></div>
+      <dl class="culture-themes about-commitments">
+        {commitments.map(([name, text]) => <div><dt>{name}</dt><dd>{text}</dd></div>)}
+      </dl>
+    </section>
+
+    <section class="section">
+      <div class="section-head"><div>
+        <h2>What it is not</h2>
+      </div></div>
+      <div class="about-prose">
+        <p>It is not legal advice. Laws change faster than any index, enforcement varies from one town and one police officer to the next, and nothing here should be relied on in front of a court or a border guard. Check the current law, and ask a lawyer where it matters.</p>
+        <p>It is not an encouragement to use cannabis, and not a campaign for any particular law. A score describes freedom, not wisdom; a low score is a description of a legal system, not a verdict on a country. The survey, likewise, describes the people who chose to answer it and not the population of any country.</p>
+      </div>
+    </section>
+
+    <section class="section">
+      <div class="section-head"><div>
+        <h2>How to help</h2>
+      </div></div>
+      <dl class="culture-themes three">
+        <div><dt>Correct it</dt><dd>Found a mistake, or a law that changed? <a href={`${repo}/issues`} target="_blank" rel="noopener noreferrer">Open an issue</a> or send a pull request. A link to the law itself is the most useful thing you can bring.</dd></div>
+        <div><dt>Tell it what you know</dt><dd>{survey.open ? <><a href={`${base}survey/take/`}>Take the survey</a>, and report on the places and prices you know. No account is needed.</> : <>The <a href={`${base}survey/`}>State of Cannabis</a> survey opens soon: answers from people who live under these laws.</>}</dd></div>
+        <div><dt>Use it</dt><dd><a href={`${base}data/`}>Download the data</a>, cite it, build on it. It is open so that it can be checked, and so that it outlasts this website. The project lives on <a href={repo} target="_blank" rel="noopener noreferrer">GitHub</a>.</dd></div>
+      </dl>
+    </section>
+  </main>
+</Base>

@@ -47,4 +47,5 @@ const cards = {
   index: page("How free is cannabis in every country?", "Every country scored from 0 to 100 for how free you are to carry, grow, share and use cannabis.", indexFacts),
   history: page("A history of cannabis law", "The laws, court rulings and treaties that made cannabis legal or illegal, and how each moved a country's score.", historyFacts),
+  about: page("What this is, and what it is for", "The law in every country, its history and the lives lived under it: sourced, open and corrected in public.", indexFacts, `ABOUT · ${BRAND}`),
   "can-i": page("Can I?", "Pick a country and get plain answers: can I carry it, grow it, buy it, use it in public, and what happens if I am caught?"),
   compare: page("Compare countries", "Up to six countries side by side: their scores, exact rules and sources in one table."),

@@ -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/"], ["Did you know?", "Curious cases from the index", "did-you-know/"], ["State of Cannabis", "The yearly survey and its results", "survey/"], ["Take the survey", "Anonymous, about ten minutes", "survey/take/"], ["Culture", "The people behind the laws", "culture/"], ["Sources", "Every source the index cites", "sources/"],
+    ["Articles", "The longer reads on single events", "articles/"], ["About", "What the project is, its aims and commitments", "about/"], ["Did you know?", "Curious cases from the index", "did-you-know/"], ["State of Cannabis", "The yearly survey and its results", "survey/"], ["Take the survey", "Anonymous, about ten minutes", "survey/take/"], ["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

@@ -15,4 +15,5 @@ export function GET({ site }) {
     ["survey/", latest, 0.6],
     ["survey/take/", latest, 0.5],
+    ["about/", latest, 0.6],
     ["did-you-know/", latest, 0.5],
     ["changelog/", latest, 0.5],

@@ -1048,9 +1048,11 @@ details.segrow .segrow-top > span, .segrow:not(details) .segrow-top > span { fon
 .reads .sub a { text-decoration: underline; text-underline-offset: 3px; }
 .hist-periods { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; align-items: end; height: 150px; margin-top: clamp(36px, 5vw, 60px); border-bottom: 1px solid var(--text); }
-.hist-periods a { display: grid; grid-template-rows: auto 1fr auto; align-items: end; height: 100%; min-width: 0; color: var(--muted); }
+.hist-periods a { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; align-items: end; height: 100%; min-width: 0; color: var(--muted); }
 .hist-periods i { display: block; align-self: end; background: var(--border); }
 .hist-periods .hp-n { font: 400 10.5px var(--mono); padding-bottom: 4px; text-align: center; }
 .hist-periods .hp-label { position: relative; height: 0; font: 400 10px var(--mono); letter-spacing: .02em; text-align: center; white-space: nowrap; }
 .hist-periods .hp-label { top: 8px; }
+/* the column is narrower than its number and its label: both stay centred over it */
+.hist-periods .hp-n, .hist-periods .hp-label { justify-self: center; }
 .hist-periods a:hover { color: var(--text); }
 .hist-periods a:hover i { background: var(--muted); }
@@ -1102,4 +1104,9 @@ details.segrow .segrow-top > span, .segrow:not(details) .segrow-top > span { fon
   .hist-periods .hp-label, .hist-periods .hp-n { visibility: hidden; }
   .hist-periods a[aria-current] .hp-label, .hist-periods a[aria-current] .hp-n { visibility: visible; }
+  /* on a narrow screen the label of the chosen period sits under the middle of the chart */
+  .hist-periods { position: relative; gap: 2px; }
+  .hist-periods a:not([aria-current]) .hp-label { display: none; }
+  .hist-periods a:not([aria-current]) .hp-n { max-width: 100%; overflow: hidden; }
+  .hist-periods a[aria-current] .hp-label { position: absolute; left: 0; right: 0; top: 100%; margin-top: 8px; height: auto; font-size: 11px; }
   .hist-year { grid-template-columns: 1fr; }
   .hist-year h2 { position: static; font-size: 56px; padding-bottom: 12px; }
@@ -1586,2 +1593,28 @@ button.sv-row .sv-chip { font: 400 10.5px var(--mono); text-transform: uppercase
 .sv-credit a { text-decoration: underline; text-underline-offset: 3px; }
 .sv-credit + .sv-nav { margin-top: 12px; }
+/* "Full rankings" under the freest and least free lists */
+.ext-more { margin: 0; padding: 16px 0 0; border-top: 1px solid var(--border); }
+.extremes .ext-more a.go { display: inline-flex; grid-template-columns: none; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid var(--text); border-radius: var(--r); font: 400 11.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text); }
+.extremes .ext-more a.go:hover { background: var(--text); color: var(--bg); }
+/* /about/ */
+.about .hero .lede + .lede { color: var(--text); }
+.about .hist-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+.about-prose { max-width: 70ch; display: grid; gap: 16px; font-size: 17px; line-height: 1.6; border-top: 1px solid var(--text); padding-top: 20px; }
+.about-prose p { margin: 0; text-wrap: pretty; }
+.about-prose a, .about .culture-themes dd a { text-decoration: underline; text-underline-offset: 3px; }
+.about-layers a { grid-template-columns: 4ch 24ch 1fr; }
+.about-layers span { color: var(--text); }
+.about-layers p { font: 400 16px/1.55 var(--sans, inherit); color: var(--text-2); }
+.about-layers a:hover p { text-decoration: none; }
+.about-layers a:hover span { text-decoration: underline; text-underline-offset: 4px; }
+.about-commitments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.about-commitments dd { max-width: 56ch; }
+@media (max-width: 900px) { .about .hist-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .about-commitments { grid-template-columns: 1fr; } .about-layers a { grid-template-columns: 4ch 1fr; } }
+/* the hint at the About page that closes the home page */
+.about-hint-body { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px clamp(28px, 6vw, 96px); align-items: start; border-top: 1px solid var(--text); padding-top: 22px; }
+.about-hint-lede { margin: 0; font: 400 clamp(26px, 3vw, 40px)/1.15 var(--display); text-wrap: balance; }
+.about-hint-body > div p { margin: 0 0 20px; color: var(--text-2); font-size: 16.5px; line-height: 1.55; max-width: 48ch; }
+.about-hint .front-go { margin: 0; }
+@media (max-width: 900px) { .about-hint-body { grid-template-columns: 1fr; } }
+.about .numbers-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+@media (max-width: 760px) { .about .numbers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }