fix(site): label the reach figure countries and territories

The page claimed readers in 204 countries. There are 195 countries in the
world, so the claim was impossible on its face and invited exactly the
scrutiny a reach figure should survive.

GA4 is not miscounting. Its country dimension resolves a visitor's IP to an
ISO 3166-1 region, and that standard carries 249 entries because it codes any
territory with its own administrative infrastructure. Hong Kong, Taiwan,
Macao, Puerto Rico, Guam and Reunion each get a code without being sovereign
states. Twenty-six of the 204 are non-sovereign, leaving roughly 178 countries
proper.

The number stays; the word changes to match what is being counted, on the
card, the map caption, the iframe title and the community page. The card label
takes two lines and the readings share a label height so the row still aligns.

Author: profvjreddi

site/community/index.qmd

@@ -50,11 +50,11 @@ format:
 <!-- ── Global Readership ─────────────────────────────────────────────── -->
 <div class="readership-section">
   <h2 class="readership-heading">Global Readership</h2>
-  <p class="readership-intro">{{stats.readers}} readers across {{stats.countries}} countries — thank you for making this community what it is.</p>
+  <p class="readership-intro">{{stats.readers}} readers across {{stats.countries}} countries and territories — thank you for making this community what it is.</p>
   <div class="looker-wrap">
     <iframe
       src="https://lookerstudio.google.com/embed/reporting/e7192975-a8a0-453d-b6fe-1580ac054dbf/page/0pNbE"
-      title="Global readership map — {{stats.readers}} readers across {{stats.countries}} countries"
+      title="Global readership map — {{stats.readers}} readers across {{stats.countries}} countries and territories"
       allowfullscreen="allowfullscreen"
       loading="lazy"
       sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox">

site/index.qmd

@@ -405,13 +405,13 @@ format:
     <div class="mls-looker-wrap">
       <iframe
         src="https://lookerstudio.google.com/embed/reporting/e7192975-a8a0-453d-b6fe-1580ac054dbf/page/0pNbE"
-        title="Global readership map — {{stats.readers}} readers across {{stats.countries}} countries"
+        title="Global readership map — {{stats.readers}} readers across {{stats.countries}} countries and territories"
         allowfullscreen="allowfullscreen"
         loading="lazy"
         sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox">
       </iframe>
     </div>
-    <p class="mls-map-caption">Live readership — {{stats.readers_monthly}} readers a month across {{stats.countries}} countries</p>
+    <p class="mls-map-caption">Live readership — {{stats.readers_monthly}} readers a month across {{stats.countries}} countries and territories</p>
     <p class="mls-map-countries"><span class="mls-map-countries-label">Top countries:</span> {{stats.top_countries}}</p>
   </div>
 
@@ -428,7 +428,7 @@ format:
       </div>
       <div class="mls-reach-item">
         <dd class="mls-reach-value">{{stats.countries}}</dd>
-        <dt class="mls-reach-label">countries</dt>
+        <dt class="mls-reach-label mls-reach-label-wrap">countries &amp;<br/>territories</dt>
       </div>
       <div class="mls-reach-item">
         <dd class="mls-reach-value">{{stats.readers_monthly}}</dd>

site/landing-v3.css

@@ -537,7 +537,17 @@
   margin: 0;
 }
 
+/* GA4 reports ISO 3166-1 regions, which include territories such as Hong Kong
+   and Puerto Rico alongside sovereign states, so the count exceeds the 195
+   countries in the world. The label says what is actually being counted; it
+   takes two lines, and the row aligns on a shared label height. */
+.mls-reach-label-wrap {
+  white-space: normal !important;
+  line-height: 1.25;
+}
+
 .mls-reach-label {
+  min-height: 2.1em;
   font-size: 0.62rem;
   font-weight: 600;
   text-transform: uppercase;