feat: chapter openers over the road, reading panels, next-exit signs, two-column case studies and a destination ending

src/components/PortfolioSection.vue

@@ -10,11 +10,13 @@ defineProps<{
   exit?: string | undefined;
   /** Next chapter label for the plate's "then" line (decorative, CSS-generated). */
   nextLabel?: string | undefined;
+  /** Next chapter's exit number, for the end-of-chapter "next exit" sign. */
+  nextExit?: string | undefined;
 }>();
 </script>
 
 <template>
-  <section :id="id" class="portfolio-section" :aria-labelledby="`${id}-heading`" :data-layout="layout" :data-exit="exit" :data-next="nextLabel">
+  <section :id="id" class="portfolio-section" :aria-labelledby="`${id}-heading`" :data-layout="layout" :data-exit="exit" :data-next="nextLabel" :data-next-exit="nextExit">
     <div v-if="$slots.lead" class="project-stage__lead">
       <p v-if="eyebrow" class="section-eyebrow">{{ eyebrow }}</p>
       <h2 :id="`${id}-heading`" tabindex="-1">{{ heading }}</h2>
@@ -24,6 +26,7 @@ defineProps<{
       <p v-if="eyebrow" class="section-eyebrow">{{ eyebrow }}</p>
       <h2 :id="`${id}-heading`" tabindex="-1">{{ heading }}</h2>
     </template>
-    <slot />
+    <slot v-if="$slots.lead" />
+    <div v-else class="chapter-body"><slot /></div>
   </section>
 </template>