chore(visual): Phase 4 audit polish on event/series surface

Migrates event/series UI from Tailwind/Nuxt UI form components to the
zine pattern (dashed borders, CSS-var palette, native inputs). Restructures
single-event and series detail/index pages to the two-column grid pattern
matching about.vue and member/dashboard.vue.

Touches:
- app/components/EventSeriesTicketCard.vue — phantom-palette → CSS-var
  migration (--candle, --ember, --surface), color="gray" → "neutral"
- app/components/EventTicketCard.vue — --candle-faint border var
- app/components/EventTicketPurchase.vue — accent-color: var(--candle)
- app/pages/events/[slug].vue — page-fill flex chain, .event-body grid
- app/pages/events/index.vue — series link uses series.id (was _id)
- app/pages/series/[id].vue — two-column layout (1fr/280px) + sidebar
- app/pages/series/index.vue — full rewrite to dashed-border zine pattern

Per docs/specs/events-visual-audit-findings.md Phase 4. Behavior unchanged.

app/pages/events/[slug].vue

@@ -7,7 +7,7 @@
     <NuxtLink to="/events">&larr; Back to Events</NuxtLink>
   </div>
 
-  <div v-else>
+  <div v-else class="page-fill">
     <!-- EVENT HEADER -->
     <div class="event-header">
       <h1>{{ event.title }}</h1>
@@ -48,7 +48,7 @@
       <img
         :src="event.featureImage.url"
         :alt="event.featureImage.alt || event.title"
-      />
+      >
     </div>
 
     <!-- TWO-COLUMN BODY -->
@@ -294,10 +294,19 @@ useHead(() => ({
   margin-bottom: 4px;
 }
 
+/* ---- PAGE FILL (aside border reaches viewport bottom) ---- */
+.page-fill {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
 /* ---- TWO-COLUMN BODY ---- */
 .event-body {
   display: grid;
   grid-template-columns: 1fr 280px;
+  flex: 1;
 }
 .event-main {
   min-width: 0;