fix: keep real spaces between the closer quote's words

src/components/SceneCanvas.vue

@@ -78,12 +78,13 @@ if (posterFailed.value) recordTestFaultEvent('poster-failure');
   >
     <!-- Closing quote, revealed word by word in the outro letterbox at sunrise. -->
     <span v-if="closer" class="journey-world__credit">
-      <span class="journey-world__quote"><span
+      <span class="journey-world__quote"><template
         v-for="(word, index) in closer.quote.split(' ')"
         :key="index"
+      ><span
         class="journey-world__word"
         :style="{ '--i': index }"
-      >{{ word }}</span></span>
+      >{{ word }}</span>{{ ' ' }}</template></span>
       <span class="journey-world__by">{{ closer.attribution }}</span>
     </span>
     <picture v-if="!posterFailed">

src/styles/world.css

@@ -583,7 +583,6 @@ html:is([data-dawn='sunrise'], [data-dawn='day']) .journey-world::after { backgr
   display: inline-block;
   opacity: 0;
 }
-.journey-world__word + .journey-world__word { margin-inline-start: 0.28em; }
 .journey-world__by {
   color: rgb(255 226 196 / 68%);
   font: 600 0.66rem/1.2 var(--mono, ui-monospace, monospace);

tests/unit/SceneCanvas.test.ts

@@ -147,6 +147,10 @@ describe("SceneCanvas", () => {
       "There is more day to dawn. The sun is but a morning star.",
     );
     expect(words[3]!.attributes("style")).toContain("--i: 3");
+    // Real spaces between the word spans, so copy and screen readers get words.
+    expect(wrapper.get(".journey-world__quote").element.textContent).toBe(
+      "There is more day to dawn. The sun is but a morning star. ",
+    );
     expect(wrapper.get(".journey-world__by").text()).toBe("Henry David Thoreau, Walden");
     expect(wrapper.get(".journey-world").element.contains(wrapper.get(".journey-world__credit").element)).toBe(true);
     wrapper.unmount();