feat(layout): add PageShell, ColumnsLayout, PageSection primitives

Introduces three new layout primitives (no consumers yet). Adds
--page-pad-x/y/collapse CSS tokens to :root and .dark. Updates
PageHeader to read padding from tokens. Removes ignored size="large"
props from welcome and series pages. Fixes stray markdown in SidebarLayout.

app/components/ColumnsLayout.vue

@@ -0,0 +1,98 @@
+<template>
+  <div
+    class="columns-layout"
+    :class="[`columns-${cols}`, `divider-${divider}`, `collapse-${collapse}`]"
+  >
+    <template v-if="cols === 'events-sidebar'">
+      <div class="col col-main">
+        <slot />
+      </div>
+      <EventsMiniSidebar :events="upcomingEvents" />
+    </template>
+    <template v-else>
+      <!-- cols="2": named slots only. Use <template #left> and <template #right>. -->
+      <div class="col col-left">
+        <slot name="left" />
+      </div>
+      <div class="col col-right">
+        <slot name="right" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  cols: { type: String, default: '2' }, // "2" | "events-sidebar"
+  divider: { type: String, default: 'dashed' }, // "dashed" | "none"
+  collapse: { type: String, default: '1024' }, // "1024" | "768"
+  limit: { type: Number, default: 3 },
+})
+
+const upcomingEvents = ref([])
+if (props.cols === 'events-sidebar') {
+  const { data } = await useFetch('/api/events', {
+    query: { upcoming: true, limit: props.limit },
+    default: () => [],
+  })
+  upcomingEvents.value = data.value || []
+}
+</script>
+
+<style scoped>
+.columns-layout {
+  display: grid;
+  align-items: stretch;
+}
+
+/* cols="2" */
+.columns-2 {
+  grid-template-columns: 1fr 1fr;
+}
+
+/* cols="events-sidebar" */
+.columns-events-sidebar {
+  grid-template-columns: 1fr 200px;
+}
+
+/* Ensure grid children don't overflow */
+.col {
+  min-width: 0;
+}
+
+/* Dashed divider: right border on the first column child */
+.divider-dashed .col:first-child,
+.divider-dashed .col-main {
+  border-right: 1px dashed var(--border);
+}
+
+/* Responsive collapse at 1024px (default) */
+.collapse-1024 {
+  --col-collapse: 1024px;
+}
+
+/* Responsive collapse at 768px */
+.collapse-768 {
+  --col-collapse: 768px;
+}
+
+@media (max-width: 1024px) {
+  .collapse-1024 {
+    grid-template-columns: 1fr;
+  }
+  .collapse-1024 .col:first-child,
+  .collapse-1024 .col-main {
+    border-right: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .collapse-768 {
+    grid-template-columns: 1fr;
+  }
+  .collapse-768 .col:first-child,
+  .collapse-768 .col-main {
+    border-right: none;
+  }
+}
+</style>