diff --git a/assets/scss/common/_custom.scss b/assets/scss/common/_custom.scss
index f340b8f..7b66404 100644
--- a/assets/scss/common/_custom.scss
+++ b/assets/scss/common/_custom.scss
@@ -1,12 +1,64 @@
 // Put your custom SCSS code here
 
-// Shrink the top-right navbar icons (social links + color mode toggler)
+// The navbar's icons, all one size. Search was the theme's 24px beside four 20px
+// links, so the row read as two sets of icons.
 #socialMenu .social-link svg,
-#buttonColorMode svg {
+#buttonColorMode svg,
+#searchToggleDesktop svg,
+#searchToggleMobile svg {
+  // Block, not the default inline: an inline svg sits on a text line and keeps
+  // room under it for descenders, which made each 20px icon a 43px link and the
+  // navbar 68px tall around them.
+  display: block;
   width: 20px;
   height: 20px;
 }
 
+// Muted at rest and the accent on hover, like a link. The theme drew them in the
+// body ink, darker than any text on the page under them.
+#socialMenu .social-link,
+#searchToggleDesktop,
+#searchToggleMobile,
+.navbar [data-bs-target="#offcanvasNavMain"] {
+  color: $gray-600;
+  transition: color 0.15s ease;
+
+  &:hover,
+  &:focus-visible {
+    color: $primary;
+  }
+}
+
+// The navbar row centred rather than stretched, and the search button without the
+// border and line box it brings as a Bootstrap `.btn`, so nothing in the row is
+// taller than the 36px icon links.
+@include media-breakpoint-up(lg) {
+  .navbar .offcanvas-body {
+    align-items: center;
+  }
+}
+
+#searchToggleDesktop {
+  border: 0;
+  line-height: 1;
+}
+
+// And the theme's 4px above and below each social icon's list item, the last thing
+// holding the row taller than its 36px links.
+#socialMenu .nav-item {
+  margin-block: 0;
+}
+
+// The navbar at a fixed 60px, its logo and icons centred in it. Height rather than
+// the theme's padding, so it is the same 60 on a phone, where the row holds the
+// search and menu buttons, as on a desktop, where it holds the links. Its width is
+// the theme's own container: narrowed to the cards' width, and then the map's, the
+// logo and the icons sat too far into the middle of the page.
+.navbar {
+  min-height: 60px;
+  padding-block: 0;
+}
+
 // Skip link: the first focusable thing on the page, hidden until it has focus.
 //
 // Not Bootstrap's `.visually-hidden-focusable`, so this does not depend on that
@@ -68,10 +120,22 @@ body > * {
 .home h1.home-title {
   // `clamp()` passes through to CSS; Sass would try to evaluate `min()`
   // itself and fail on the mixed rem/vw units.
-  font-size: clamp(1.5rem, 3.4vw, 3rem);
+  //
+  //
+  // The top of the page's type scale, which runs (as rendered, through the
+  // homepage's `zoom: 0.9`) 36 / 18 / 16 / 14 / 12px: this headline; "Projects";
+  // the tagline and the card titles; the card text; the map key's names. 2.5rem is
+  // the 36px — wide enough (about 560px) for the tagline to sit under it on one
+  // line. It was 3rem, 43px, and read as a banner; 30px left the tagline the wider.
+  //
+  // The vw term is the tagline's ×2.25, so the two shrink together with the window
+  // and the tagline keeps fitting under the headline until both reach their floors.
+  // The 1.9rem floor is the narrowest headline the 13.5px tagline still fits under,
+  // so tablets keep one line too; only a phone, too narrow for either, wraps them.
+  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
   // Doks pulls the home headline up by 1rem, which eats into the hero padding.
   margin-top: 0;
-  margin-bottom: 1.75rem;
+  margin-bottom: 1rem;
 }
 
 // One line, but only where one line fits. Below `sm` the headline would have to
@@ -84,11 +148,36 @@ body > * {
   }
 }
 
+// The headline's box, sized by the headline alone. `fit-content` would take the
+// wider of the two lines; the tagline is taken out of that sum by `width: 0` and then
+// filled back to the box's width by `min-width: 100%`, so it wraps to the
+// headline's width rather than setting it. It was the longer of the two — 499px
+// under a 341px headline on a tablet — which made the subtitle the widest thing in
+// the hero. `balance` evens the two lines it wraps into.
+.home-hero {
+  width: fit-content;
+  max-width: 100%;
+  margin-inline: auto;
+
+  .lead {
+    width: 0;
+    min-width: 100%;
+    max-width: none;
+    text-wrap: balance;
+  }
+}
+
 // The one piece of prose on the page. Constrained because a full-width measure
 // under a centred headline reads as a caption rather than a statement.
 .home .lead {
   max-width: 40rem;
   margin-inline: auto;
+  // 16px rendered at most, the card titles' size. Bootstrap's `.lead` is 1.25rem,
+  // 18px here, which put the tagline level with "Projects". Scaled with the window
+  // in step with the headline (see `.home-title`), so it stays on one line under it
+  // wherever the headline is wide enough to hold it.
+  font-size: clamp(0.9375rem, 1.42vw, 1.125rem);
+  line-height: 1.5;
   opacity: 0.75;
   // Doks gives `.lead` a bottom margin. It is the last thing in the hero, so that
   // margin only stacked on top of the hero's own bottom padding — which is what
@@ -172,13 +261,26 @@ $home-gap: clamp(2rem, 4.5vw, 3.5rem);
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
+  // The bar's height came from here: the theme's 5px of brand padding around a 32px
+  // logo made a 43px block in a 68px navbar whose icons are 20px. Without the padding,
+  // and with the mark and the wordmark a step smaller, it no longer sets the bar's
+  // height; with the icon fixes above, the bar is 52px, the height of what is in it.
+  padding-block: 0;
+  font-size: 1.25rem;
+  // The headings' ink rather than the theme's pure black, which was the one black
+  // thing on a page drawn in $body-color.
+  color: $body-color;
+
+  &:hover {
+    color: $body-color;
+  }
 
   &::before {
     content: "";
     display: inline-block;
     flex: 0 0 auto;
-    width: 32px;
-    height: 32px;
+    width: 28px;
+    height: 28px;
     background: url("images/logo.png") no-repeat center / contain;
     border-radius: 50%;
   }
@@ -196,38 +298,24 @@ $feature-gap: 1.25rem;
 // the clamp on `.feature-card p`, which is what holds a longer description to it.
 $feature-card-height: calc(3rem + 1.125rem * #{$line-height-base} + 0.5rem + 3rem * #{$line-height-base});
 
-// Names the grid without shouting: smaller than the headline, uppercase and
-// tracked out so it reads as a label for the section rather than a second title
-// competing with the hero.
+// Names the grid without shouting: a label for the section rather than a second
+// title competing with the hero.
 //
 // Deliberately not called `.section-title` — the theme already uses that for the
 // "Related posts" heading on blog and legal pages (doks-core _posts.scss:55), and
 // this would have restyled those into tiny uppercase labels.
 .feature-grid-title {
-  margin-top: 0;
-  margin-bottom: 1.5rem;
+  margin: 0 0 1.25rem;
   text-align: center;
-  font-size: 0.8125rem;
+  // A real section heading. At the map key's 13px it was smaller than the card text
+  // under it and read as a caption; with the map's own label gone it is the only
+  // heading between the hero and the footer. Above the 1.125rem card titles and
+  // under the hero, in the body ink at the card titles' weight family.
+  // 18px rendered: under the 30px headline, over the 16px card titles.
+  font-size: 1.25rem;
   font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  // Not lower: at 13px this is normal-size text for WCAG, so it needs 4.5:1.
-  // 0.5 measured 3.01:1 and failed; 0.7 measures 5.4:1.
-  opacity: 0.7;
-}
-
-// A heading kept for screen readers and dropped from the layout — the standard
-// visually-hidden recipe, as in `.skip-link` above, and for the same reason not
-// Bootstrap's `.visually-hidden`: this does not depend on that utility surviving
-// purgecss.
-.home-hidden-title {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: 0;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
+  line-height: 1.3;
+  color: $body-color;
 }
 
 .feature-grid {
@@ -1127,100 +1215,74 @@ $map-pulse-offsets:
 // a spreadsheet next to a graphic that has no lines in it at all.
 .worldmap-summary {
   width: 100%;
-  // The label and the regions on one centred line from `lg`; stacked below it, where
-  // at `md` the one line took the container's full 744px with nothing to spare, and
-  // the regions become a grid of their own.
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.625rem;
-  font-size: 0.8125rem;
-  line-height: 1.4;
-}
-
-@include media-breakpoint-up(lg) {
-  .worldmap-summary {
-    flex-direction: row;
-    justify-content: center;
-    align-items: baseline;
-    gap: 0;
-  }
+  // Narrower than the map: seven columns across its full width spread the figures
+  // so far apart that they read as seven separate things rather than one row.
+  max-width: 44rem;
+  margin-inline: auto;
 }
 
-// The section's heading, as the key's label: a dot in the map's mark colour and the
-// word, so the key says what a dot on the map is. Sentence case at the key's own
-// size — tracked capitals made it a second heading standing apart from the line it
-// labels.
+// "By region", a caption over the row.
 .worldmap-key-title {
-  display: inline-flex;
-  align-items: baseline;
-  gap: 0.4375rem;
-  margin: 0;
-  font-size: inherit;
-  // One size and one weight across the whole key, the label included: a 600 label
-  // and 500 figures beside 400 names read as three sizes of type on one line.
+  margin: 0 0 0.625rem;
+  text-align: center;
+  // 12px rendered, the smallest step of the page's scale.
+  font-size: 0.8125rem;
   font-weight: 400;
-  line-height: inherit;
-  color: $gray-700;
-}
-
-.worldmap-key-dot {
-  flex: 0 0 auto;
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 50%;
-  background: $map-mark;
-  // Onto the x-height rather than the baseline it is aligned to.
-  transform: translateY(-0.0625rem);
-}
-
-// A hairline between the label and what it labels, on the one-line layout only.
-@include media-breakpoint-up(lg) {
-  .worldmap-key-title {
-    padding-right: 1.25rem;
-    margin-right: 1.25rem;
-    border-right: 1px solid $map-region;
-  }
+  line-height: 1.4;
+  // $gray-600, 4.7:1 on white: $gray-500 is only 2:1, under the 4.5:1 text this
+  // size needs.
+  color: $gray-600;
 }
 
+// The row: seven columns of one width from `md`; on a phone, four to a row with the
+// last three centred under them.
 .worldmap-regions {
-  // Three columns by two rows on a phone. Wrapped as a line, six entries broke four
-  // and two, and the short second line read as an afterthought.
-  display: grid;
-  grid-template-columns: repeat(3, auto);
-  gap: 0.375rem 1.25rem;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  row-gap: 0.875rem;
   margin: 0;
   padding-left: 0;
   list-style: none;
 
   li {
+    flex: 0 0 25%;
     display: flex;
-    align-items: baseline;
-    gap: 0.3125rem;
-    white-space: nowrap;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.125rem;
+    min-width: 0;
   }
 }
 
-@include media-breakpoint-up(lg) {
-  .worldmap-regions {
-    display: flex;
-    // Wider between entries than inside one, so each figure stays paired with its
-    // own name without a separator to say so.
-    column-gap: 1.5rem;
+@include media-breakpoint-up(md) {
+  .worldmap-regions li {
+    flex: 1 1 0;
   }
 }
 
-// The name is the label and the figure the value, told apart by ink alone: the
-// figure darker, both at the key's one size and weight. Bold figures beside every
-// name made six loud numbers the most prominent thing under the map.
-.worldmap-region-name {
-  color: $map-text;
-}
-
+// The figure is what the row is for: the larger of the two, and the darker.
 .worldmap-region-share {
   // Digits of equal width, so the figures do not jitter in size against each other.
   font-variant-numeric: tabular-nums;
-  color: $gray-800;
+  font-size: 1.0625rem;
+  font-weight: 500;
+  line-height: 1.3;
+  color: $gray-900;
+}
+
+.worldmap-region-name {
+  // 12px rendered, like the caption.
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  white-space: nowrap;
+  color: $gray-600;
+}
+
+// "Others": its figure in the names' lighter ink, so the largest share is not the
+// loudest number in the row.
+.worldmap-regions .worldmap-region-rest .worldmap-region-share {
+  color: $gray-600;
 }
 
 // The donation call to action. Deliberately unboxed: a panel here competed with
diff --git a/config/_default/menus/menus.en.toml b/config/_default/menus/menus.en.toml
index bad2df8..cafdba8 100644
--- a/config/_default/menus/menus.en.toml
+++ b/config/_default/menus/menus.en.toml
@@ -34,10 +34,12 @@
 # # url = "/docs/1.0/prologue/introduction/"
   # weight = 10
 
-[[main]]
-  name = "Blog"
-  url = "/blog/"
-  weight = 30
+# Hidden for now, along with the section itself (draft: true in
+# content/blog/_index.md). Restore both together.
+# [[main]]
+#   name = "Blog"
+#   url = "/blog/"
+#   weight = 30
 
 [[social]]
   name = "GitHub"
@@ -58,6 +60,15 @@
   url = "https://discord.com/invite/UWnjUG6X8j"
   weight = 40
 
+# Sponsorship, as an icon beside the others rather than a "Sponsor" item in the
+# main nav, where it carried the same weight as "Blog". `name` is the link's
+# accessible label (the theme renders it visually hidden), so it says where it goes.
+[[social]]
+  name = "Sponsor on Open Collective"
+  pre = '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path></svg>'
+  url = "https://opencollective.com/inftyai"
+  weight = 50
+
 # [[sidebar_docs]]
 #   name = "Guides"
 #   pageRef = "/docs/guides"
diff --git a/content/_index.md b/content/_index.md
index 59e5bbc..7a77003 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -1,9 +1,10 @@
 ---
 title: "Exploring the ∞ possibilities of AI"
-# Shown under the headline. Placeholder copy in your voice — edit freely; it is
-# the only prose on the page, so it is what tells a first-time visitor what
-# InftyAI actually does.
-lead: "We build open source infrastructure for AI."
+# Shown under the headline. It is the only prose on the page, so it is what tells a
+# first-time visitor what InftyAI actually does — and, sitting directly above the
+# map, it is also what says the map is of contributors: the key under the map has
+# no visible label of its own.
+lead: "Open source AI infrastructure, built by contributors around the world."
 description: "InftyAI is a non-profit organization focused on building AI infrastructure, including model training & inference, agentic systems and more. We 💙 Open Source."
 date: 2023-09-07T16:33:54+02:00
 lastmod: 2023-09-07T16:33:54+02:00
diff --git a/content/blog/_index.md b/content/blog/_index.md
index 3d61fc5..05ea576 100644
--- a/content/blog/_index.md
+++ b/content/blog/_index.md
@@ -4,7 +4,9 @@ description: ""
 summary: ""
 date: 2023-09-07T16:21:44+02:00
 lastmod: 2023-09-07T16:21:44+02:00
-draft: false
+# Hidden for now: a draft section is not built, so /blog/ is the site 404 and
+# the navbar link is commented out in config/_default/menus/menus.en.toml.
+draft: true
 weight: 50
 categories: []
 tags: []
diff --git a/hugo_stats.json b/hugo_stats.json
index 4b687bd..0198217 100644
--- a/hugo_stats.json
+++ b/hugo_stats.json
@@ -31,6 +31,7 @@
       "noscript",
       "p",
       "path",
+      "rect",
       "script",
       "section",
       "small",
@@ -46,8 +47,6 @@
     ],
     "classes": [
       "DocSearch-Label",
-      "active",
-      "blog",
       "blog-header",
       "btn",
       "btn-close",
@@ -92,13 +91,14 @@
       "h-auto",
       "h5",
       "home",
-      "home-hidden-title",
+      "home-hero",
       "home-title",
       "icon",
       "icon-tabler",
       "icon-tabler-brand-discord",
       "icon-tabler-brand-github",
       "icon-tabler-brand-x",
+      "icon-tabler-heart",
       "icon-tabler-menu",
       "icon-tabler-search",
       "icon-tabler-x",
@@ -181,6 +181,9 @@
       "visually-hidden",
       "worldmap",
       "worldmap-avatar",
+      "worldmap-bar",
+      "worldmap-bar-rest",
+      "worldmap-bar-segment",
       "worldmap-city",
       "worldmap-city-head",
       "worldmap-city-login",
@@ -190,18 +193,23 @@
       "worldmap-hit",
       "worldmap-hit-left",
       "worldmap-hits",
-      "worldmap-key-dot",
+      "worldmap-key-by",
+      "worldmap-key-hidden",
       "worldmap-key-title",
       "worldmap-label",
       "worldmap-land",
       "worldmap-layout",
       "worldmap-place",
       "worldmap-pulse",
+      "worldmap-region-bar",
       "worldmap-region-name",
+      "worldmap-region-rest",
       "worldmap-region-share",
+      "worldmap-region-track",
       "worldmap-regions",
       "worldmap-summary",
       "worldmap-svg",
+      "worldmap-swatch",
       "wrap"
     ],
     "ids": [
diff --git a/layouts/_default/home.html b/layouts/_default/home.html
index 6cffec0..36a05e7 100644
--- a/layouts/_default/home.html
+++ b/layouts/_default/home.html
@@ -2,10 +2,15 @@
 {{/* No `py-*` utility: Bootstrap marks those `!important`, so the hero spacing
      could not then be set from _custom.scss. */}}
 <section class="section container-fluid text-center">
+    {{/* The headline and the tagline in one box as wide as the headline, so the
+         tagline is never the wider of the two: it wraps under the headline instead
+         of running past both its ends. See `.home-hero` in _custom.scss. */}}
+    <div class="home-hero">
     <h1 class="home-title">{{ .Title }}</h1>
     {{ with .Params.lead -}}
     <p class="lead">{{ . | safeHTML }}</p>
     {{ end -}}
+    </div>
     {{ .Content }}
 </section>
 {{ end }}
@@ -302,25 +307,31 @@ <h1 class="home-title">{{ .Title }}</h1>
              It is also what a screen reader or a keyboard gets, since the svg is a
              single `role="img"` graphic. */}}
         <div class="worldmap-summary">
-            {{/* After the figure in source order, which costs nothing: the svg is a
-                 labelled `role="img"`, so a screen reader announces what it is before
-                 reaching this. */}}
-            {{/* The key's own label, first on its line, so the map is named as
-                 the contributors' map without a heading band above it. */}}
-            {{/* The dot is the map's own mark, so the label reads as a legend entry —
-                 this is what a dot is — as well as the section's name. */}}
-            <h2 class="worldmap-key-title"><span class="worldmap-key-dot" aria-hidden="true"></span>Contributors</h2>
+            {{/* One line of text: "By region", then each region and its share. The
+                 tagline above the map already says whose map it is, so all the line
+                 needs to say is what the shares are split by. "Contributors" is read
+                 out in front of it, so a screen reader hears "Contributors by region".
+
+                 Simple on purpose: a stacked bar and then a chart of ranked bars were
+                 both tried here, and both were more to read than seven numbers. */}}
+            {{/* A row of figures: each region's share, large, over its name, in
+                 columns of one width. The numbers are what this is for, and as a
+                 line of text — name, share, name, share — they had to be picked out
+                 of it. "Others", the contributors whose profile does not say where
+                 they are, comes last and in the label's lighter ink, so the largest
+                 share of the seven does not read as the biggest region.
+
+                 The heading is read out as "Contributors by region" (its
+                 `aria-label`); on screen the tagline is what names the map. */}}
+            <h2 class="worldmap-key-title" aria-label="Contributors by region">By region</h2>
             <ul class="worldmap-regions">
-                {{/* Without "Others", the contributors whose profile does not say
-                     where they are: a "location unknown" row was the key's largest
-                     region. The shares stay shares of everyone, as
-                     tools/contributors.mjs computes them. */}}
-                {{ range where .regions "name" "ne" "Others" -}}
-                <li>
-                    <span class="worldmap-region-name">{{ .name }}</span>
-                    {{/* Percentages, not counts, and they add to 100 — see the
-                         apportionment in tools/contributors.mjs. */}}
+                {{/* Largest first, as tools/contributors.mjs ranks them; "Others"
+                     last, so a remainder never heads a list of places. With it the
+                     shares add to 100 — see the apportionment there. */}}
+                {{ range .regions -}}
+                <li{{ with .note }} class="worldmap-region-rest" title="{{ . }}"{{ end }}>
                     <span class="worldmap-region-share">{{ .percent }}%</span>
+                    <span class="worldmap-region-name">{{ .name }}</span>
                 </li>
                 {{ end -}}
             </ul>
@@ -357,10 +368,10 @@ <h2 class="worldmap-key-title"><span class="worldmap-key-dot" aria-hidden="true"
 <section class="section section-md section-features">
     <div class="container">
         {{/* Names the grid, so the seven project headings hang off a section
-             instead of directly off the page's h1. Read out but not shown: seven
-             cards of repositories with star counts say what they are, and the label
-             was one more band between the map and them. */}}
-        <h2 class="feature-grid-title home-hidden-title">Projects</h2>
+             instead of directly off the page's h1. Shown, as a section heading:
+             without it nothing said these are InftyAI's projects and not a list
+             of tools it recommends. */}}
+        <h2 class="feature-grid-title">Projects</h2>
         {{/* A list, because that is what seven sibling projects are: screen
              readers announce the count and allow item-by-item navigation.
              Flexbox rather than Bootstrap's row/col — it needs no breakpoint