fix(story): refine evidence panels and copy

Author: sankalpgambhir

index.html

@@ -35,7 +35,7 @@ <h1>
       <section class="findings-panel" aria-labelledby="findings-title">
         <div class="section-kicker">
           <p class="eyebrow">Key findings</p>
-          <h2 id="findings-title">Europe grew. Markets repriced the world elsewhere.</h2>
+          <h2 id="findings-title">Europe grew. Public equity gains concentrated in the US.</h2>
         </div>
         <div class="finding-grid">
           <article class="finding-card">
@@ -92,10 +92,11 @@ <h2>Europe did not stop growing.</h2>
               <h2>The benchmark is not arbitrary.</h2>
               <p>
                 The United States and Europe are both high-income, institutionally
-                mature markets that matter in global portfolios. Comparing them
-                lets us separate a real-economy question from a listed-market
-                question: did people get poorer, or did public equity value
-                compound somewhere else?
+                mature markets that matter in global portfolios. From here on,
+                we keep the comparison anchored on these rich-market blocs so
+                later gaps are not driven by emerging-market catch-up. The
+                question is whether output growth diverged, or whether listed
+                equity gains accumulated much more strongly in the US.
               </p>
               <div class="story-stat-row">
                 <span><strong>Rich-market</strong> baseline</span>
@@ -145,25 +146,25 @@ <h2>Europe is not one datapoint.</h2>
                 <span><strong>1.52x</strong> US ETF</span>
                 <span><strong>Switzerland</strong> main exception</span>
               </div>
-              <p class="story-analysis-note">
-                Read: Europe is heterogeneous, but no selected European country
-                carries the market story the way the US does. The gap is not only
-                a single weak country dragging down the average.
-              </p>
               <button class="story-preset-button" type="button" data-story-action="europe-dispersion">
                 Show Europe spread
               </button>
             </article>
 
             <article class="story-step" data-story-preset="sector-drivers">
               <p class="eyebrow">Act 5 &middot; Industry drivers</p>
-              <h2>The winning sectors sit elsewhere.</h2>
+              <h2>The sectors driving divergence.</h2>
               <p>
                 The ACWI snapshots translate the country story into sector
                 exposure. From 2015 to 2026, global index weight becomes more
                 concentrated in the United States, and information technology
                 becomes the dominant sector block.
               </p>
+              <p>
+                The US begins with a strong weight for tech, and as the sector
+                inflates in value over the decade outpacing all others, the US
+                share of the ACWI outpaces the rest of the world.
+              </p>
               <div class="story-stat-row">
                 <span><strong>63.7%</strong> US ACWI weight</span>
                 <span><strong>30.7%</strong> information technology</span>
@@ -195,15 +196,29 @@ <h2>Europe is not collapsing. Listed-market power moved elsewhere.</h2>
               <div class="story-verdict-panel" aria-label="Conclusion verdict">
                 <strong>Final read</strong>
                 <p>
-                  The evidence does not support a simple European collapse story.
-                  It supports a more specific claim: Europe kept growing, but the
-                  investable market story shifted toward the US, especially through
-                  listed equity concentration and technology-heavy sectors.
+                  The evidence does not support a simple European collapse
+                  story. It supports a more specific claim: Europe continued to
+                  grow, but was outpaced in capital markets, especially through
+                  listed equity concentration in the US and in technology-heavy
+                  sectors. The divergence is much sharper in market proxies than
+                  in real output, and the gap opens around the 2008 crisis
+                  window.
+                  <!-- Europe kept growing, but the
+                  market values shifted toward the US, especially through
+                  listed equity concentration and technology-heavy sectors. -->
                 </p>
                 <p>
                   The limitation is equally important: these charts measure output
                   and listed capital, not the full well-being of households.
                 </p>
+                <p>
+                  It leads to a final question: do market gains and indicators
+                  really represent lived well-being trends? The data
+                  demonstrates a divergence in perceived market values, but the
+                  divergence is much smaller in real output terms. This
+                  necessitates a deeper future focus on how and whether market
+                  trends translate to broader economic welfare.
+                </p>
               </div>
               <button class="story-preset-button" type="button" data-story-action="wrap-up">
                 Show final comparison
@@ -295,17 +310,16 @@ <h2>Profile comparison</h2>
               <p class="eyebrow">2008 break</p>
               <h2>The break-year test points to the crisis window.</h2>
               <p>
-                This is the Act 3 evidence: candidate break years cluster around
-                the crisis window, and the interactive normalization explorer
-                lets you test whether the split depends on the base year or lens.
+                The break-year finder and normalization explorer let you inspect
+                when the split appears and how much it depends on the base year,
+                metric, and price adjustment.
               </p>
             </div>
             <section class="story-break-subpanel" aria-label="Interactive normalization explorer">
               <h3>Interactive divergence explorer</h3>
               <p>
                 Choose the base year and switch between GDP lenses, ETF, and
-                market-cap proxies. This is the original interactive divergence
-                plot, restored inside the divergence act.
+                market-cap proxies.
               </p>
               <div id="normalization-explorer" class="normalization-explorer"></div>
             </section>

src/main.js

@@ -123,6 +123,7 @@ async function main() {
     );
   }
   createNormalizationExplorer(getRequiredElement("normalization-explorer"), data);
+  const storyPlotEvidenceCallout = getRequiredElement("story-evidence-callout-inline");
   /*
    * Previous candidate analysis views are commented out in index.html and kept
    * here for easy restoration if the team wants a longer appendix after the
@@ -301,7 +302,12 @@ async function main() {
     selectedRegions = getValidRegions(preset.selectedRegions, DEFAULT_REGIONS);
     setTreemapSnapshot(preset.treemapSnapshot);
     setVisibleStageSteps(storyStage, preset.stageSteps);
-    renderStoryEvidenceCallout(storyEvidenceCallout, preset.callout);
+    renderStoryEvidenceCallouts(
+      storyEvidenceCallout,
+      storyPlotEvidenceCallout,
+      preset.callout,
+      preset.calloutPlacement,
+    );
     render();
     setStageFocus(storyStage, treemapPanel, preset.stageFocus);
   }
@@ -525,6 +531,36 @@ function renderStoryEvidenceCallout(container, callout) {
   content.append(statList);
 }
 
+/**
+ * Routes the story evidence callout to either the map overlay or an inline slot.
+ *
+ * @param {HTMLElement} overlayContainer Overlay callout host.
+ * @param {HTMLElement} secondaryContainer Secondary callout host.
+ * @param {{ label: string, title: string, body: string, stats?: string[] } | undefined} callout Story callout copy.
+ * @param {"overlay" | "inline" | undefined} [placement] Preferred callout placement.
+ */
+function renderStoryEvidenceCallouts(
+  overlayContainer,
+  secondaryContainer,
+  callout,
+  placement = "overlay",
+) {
+  const useSecondary = placement === "inline";
+  resetStoryEvidenceCallout(useSecondary ? overlayContainer : secondaryContainer);
+  renderStoryEvidenceCallout(useSecondary ? secondaryContainer : overlayContainer, callout);
+}
+
+/**
+ * Hides and clears a story evidence callout host.
+ *
+ * @param {HTMLElement} container Callout container.
+ */
+function resetStoryEvidenceCallout(container) {
+  container.replaceChildren();
+  container.hidden = true;
+  container.removeAttribute("tabindex");
+}
+
 /**
  * Toggles spider overlay visibility.
  *

src/normalization-explorer.js

@@ -67,7 +67,10 @@ export function createNormalizationExplorer(container, data) {
       </label>
       <div class="normalization-explorer__series" id="normalization-series"></div>
     </div>
-    <div class="analysis-chart normalization-explorer__chart" id="normalization-chart"></div>
+    <div class="normalization-explorer__chart-shell">
+      <div class="analysis-chart normalization-explorer__chart" id="normalization-chart"></div>
+      <aside id="story-evidence-callout-inline" class="story-evidence-callout story-evidence-callout--plot" aria-live="polite" hidden></aside>
+    </div>
     <p class="normalization-explorer__note" id="normalization-unit-note"></p>
   `;
 

src/story-presets.js

@@ -20,9 +20,9 @@ export const STORY_PRESETS = {
     stageFocus: "stage-map",
     callout: {
       label: "Act 1 evidence",
-      title: "Europe still grew.",
-      body: "The map is set to compounded regional GDP growth in 2023. Europe is not flat: it is 1.38x its 2000 GDP baseline in this dataset.",
-      stats: ["Compounded since 2000", "Regions selected", "2023"],
+      title: "The regional view rules out collapse.",
+      body: "Europe stays above its 2000 baseline on both GDP and GDP per capita. The rest of the story is about relative pace and market outcomes, not whether Europe stopped growing outright.",
+      stats: ["GDP and GDP/person > 1x", "Regional comparison", "2023"],
     },
   },
   "us-eu-frame": {
@@ -40,9 +40,9 @@ export const STORY_PRESETS = {
     stageFocus: "stage-map",
     callout: {
       label: "Act 2 evidence",
-      title: "This is the benchmark.",
-      body: "The graph zooms into North America and Europe and switches to countries, so Canada no longer hides the US path inside a regional average.",
-      stats: ["Compounded since 2000", "Country-level view", "GDP per capita"],
+      title: "The comparison frame is deliberate.",
+      body: "From this point on, the chart holds Europe and North America as rich-market peers at country level. That keeps the rest of the story focused on within-peer divergence rather than global catch-up.",
+      stats: ["Rich-market peers", "Country-level frame", "Rest of story"],
     },
   },
   "divergence-hypothesis": {
@@ -55,13 +55,14 @@ export const STORY_PRESETS = {
     selectedRegions: ["Europe", "North America", "Asia-Pacific"],
     selectedIso3: ["DEU", "GBR", "USA", "KOR", "JPN"],
     treemapSnapshot: "latest",
-    stageSteps: ["stage-map", "stage-evolution"],
+    stageSteps: ["stage-evolution"],
     stageFocus: "stage-evolution",
+    calloutPlacement: "inline",
     callout: {
       label: "Act 3 evidence",
-      title: "The market proxy separates.",
-      body: "Scatter mode compares GDP per capita growth with ETF growth. The US sits far above major European markets on the ETF axis.",
-      stats: ["ETF Price", "Scatter view", "Selected outliers"],
+      title: "The break clusters around 2008.",
+      body: "Candidate break years concentrate around the crisis window, and the normalization explorer lets you test how much the split changes with the base year, lens, and price adjustment.",
+      stats: ["Break-year test", "Normalization explorer", "Lens-sensitive gap"],
     },
   },
   "europe-dispersion": {

src/story.css

@@ -503,6 +503,16 @@
   display: none;
 }
 
+.story-evidence-callout--plot {
+  top: 18px;
+  right: 22px;
+}
+
+.story-evidence-callout--plot:hover,
+.story-evidence-callout--plot:focus-within {
+  width: min(304px, calc(100% - 44px));
+}
+
 .story-evidence-callout:hover,
 .story-evidence-callout:focus-within {
   width: min(320px, calc(100% - 44px));
@@ -519,6 +529,10 @@
   outline-offset: 4px;
 }
 
+.story-evidence-callout--plot:focus-visible {
+  outline-offset: 2px;
+}
+
 .map-tooltip {
   position: absolute;
   z-index: 6;
@@ -624,6 +638,15 @@
   transform: translateY(0);
 }
 
+.story-evidence-callout--plot .story-evidence-callout__content {
+  gap: 8px;
+}
+
+.story-evidence-callout--plot:hover .story-evidence-callout__content,
+.story-evidence-callout--plot:focus-within .story-evidence-callout__content {
+  margin-top: 8px;
+}
+
 .story-evidence-callout h3 {
   margin: 0;
   color: var(--text-primary);
@@ -632,6 +655,12 @@
   letter-spacing: -0.035em;
 }
 
+.story-evidence-callout--plot h3 {
+  font-size: clamp(0.98rem, 1.35vw, 1.16rem);
+  line-height: 1.14;
+  letter-spacing: -0.02em;
+}
+
 .story-evidence-callout__body {
   margin: 0;
   color: var(--text-secondary);

src/style.css

@@ -529,6 +529,10 @@ input:focus-visible {
   min-height: 360px;
 }
 
+.normalization-explorer__chart-shell {
+  position: relative;
+}
+
 .normalization-explorer__note {
   margin: 0;
   padding-top: 2px;

src/treemap-dominance.js

@@ -30,7 +30,7 @@ export function renderTreemapDominanceSummary(container, data, snapshotKey) {
 
   const label = document.createElement("p");
   label.className = "treemap-dominance__label";
-  label.textContent = "Homogeneity test";
+  label.textContent = "Focused View";
 
   const title = document.createElement("h3");
   title.textContent = "Does one country or industry carry the index?";