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;

app/pages/events/index.vue

@@ -88,8 +88,8 @@
       <div class="series-grid">
         <NuxtLink
           v-for="series in activeSeries"
-          :key="series._id"
-          :to="`/series/${series._id}`"
+          :key="series.id"
+          :to="`/series/${series.id}`"
           class="series-box"
         >
           <h2>{{ series.title }}</h2>
@@ -107,6 +107,11 @@
             >
           </div>
         </NuxtLink>
+        <div
+          v-if="activeSeries.length % 2"
+          class="series-box series-box-filler"
+          aria-hidden="true"
+        />
       </div>
     </div>
 
@@ -368,14 +373,21 @@ const isAlmostFull = (event) => {
 }
 .series-box {
   padding: 20px 24px;
-  border-right: 1px dashed var(--border);
   text-decoration: none;
   transition: background 0.15s;
+  border-right: 1px dashed var(--border);
+  border-bottom: 1px dashed var(--border);
 }
-.series-box:last-child {
+.series-box:nth-child(2n) {
   border-right: none;
 }
-.series-box:hover {
+.series-box:nth-last-child(-n + 2) {
+  border-bottom: none;
+}
+.series-box-filler {
+  pointer-events: none;
+}
+.series-box:not(.series-box-filler):hover {
   background: var(--surface-hover);
 }
 .series-box h2 {
@@ -467,8 +479,17 @@ const isAlmostFull = (event) => {
     border-right: none;
     border-bottom: 1px dashed var(--border);
   }
+  .series-box:nth-child(2n) {
+    border-right: none;
+  }
+  .series-box:nth-last-child(-n + 2) {
+    border-bottom: 1px dashed var(--border);
+  }
   .series-box:last-child {
     border-bottom: none;
   }
+  .series-box-filler {
+    display: none;
+  }
 }
 </style>