fix(coming-soon): let logged-in admins bypass the gate

Admins can now load the public site and their dashboard while coming-soon
mode is on, instead of being redirected to /coming-soon for everything
outside /admin/*.

.env.example

@@ -6,6 +6,8 @@ MONGODB_URI=mongodb://localhost:27017/ghostguild
 # HELCIM_API_TOKEN=your-live-helcim-api-token
 HELCIM_API_TOKEN=your-test-helcim-api-token
 NUXT_PUBLIC_HELCIM_ACCOUNT_ID=your-helcim-account-id
+NUXT_HELCIM_MONTHLY_PLAN_ID=<set_after_migration>
+NUXT_HELCIM_ANNUAL_PLAN_ID=<set_after_migration>
 
 # Email Configuration (Resend)
 RESEND_API_KEY=your-resend-api-key

.forgejo/workflows/test.yml

@@ -21,16 +21,16 @@ jobs:
   playwright:
     runs-on: ubuntu-latest
     needs: vitest
-    services:
-      mongo:
-        image: mongo:7
-        ports:
-          - 27017:27017
     env:
-      MONGODB_URI: mongodb://localhost:27017/ghostguild-test
+      MONGODB_URI: mongodb://mongo-ci:27017/ghostguild-test
       JWT_SECRET: ci-test-jwt-secret
+      RESEND_API_KEY: re_ci_dummy_not_used
+      HELCIM_API_TOKEN: helcim_ci_dummy_not_used
+      OIDC_COOKIE_SECRET: ci-oidc-cookie-secret-not-secret
       NUXT_PUBLIC_COMING_SOON: 'false'
       NODE_ENV: development
+      ALLOW_DEV_TEST_ENDPOINTS: 'true'
+      BASE_URL: http://localhost:3000
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
@@ -39,15 +39,35 @@ jobs:
           cache: npm
       - run: npm ci
       - run: npx playwright install --with-deps chromium
+      - name: Start MongoDB
+        run: |
+          docker rm -f mongo-ci 2>/dev/null || true
+          docker run -d --name mongo-ci mongo:7
+          # Forgejo runs each job inside its own container; attach Mongo to
+          # that container's network so MONGODB_URI=mongodb://mongo-ci:27017
+          # resolves from inside the runner.
+          RUNNER_NET=$(docker inspect "$HOSTNAME" --format '{{range $k,$v := .NetworkSettings.Networks}}{{$k}} {{end}}' | awk '{print $1}')
+          docker network connect "$RUNNER_NET" mongo-ci
+          docker ps
+      - name: Wait for MongoDB
+        run: timeout 30 sh -c 'until docker exec mongo-ci mongosh --quiet --eval "1" >/dev/null 2>&1; do sleep 1; done'
+      - name: MongoDB log on failure
+        if: failure()
+        run: docker logs mongo-ci || true
+      - name: Seed test data
+        run: node scripts/seed-all.js && node scripts/seed-tags.js
       - run: npm run build
       - name: Start server
-        run: node .output/server/index.mjs &
+        run: node .output/server/index.mjs > /tmp/server.log 2>&1 &
         env:
           PORT: 3000
       - name: Wait for server
         run: timeout 30 sh -c 'until curl -sf http://localhost:3000; do sleep 1; done'
-      - run: npx playwright test --ignore-snapshots
-      - uses: actions/upload-artifact@v4
+      - name: Server log on failure
+        if: failure()
+        run: cat /tmp/server.log || true
+      - run: npx playwright test
+      - uses: actions/upload-artifact@v3
         if: failure()
         with:
           name: playwright-report
@@ -68,39 +88,3 @@ jobs:
             -H 'Content-type: application/json' \
             --data "{\"text\":\":x: *Ghost Guild CI failed* on \`${{ github.ref_name }}\`\nCommit: ${{ github.sha }}\n${{ github.server_url }}/${{ github.repository }}/actions\"}"
 
-  visual:
-    runs-on: ubuntu-latest
-    needs: vitest
-    continue-on-error: true
-    services:
-      mongo:
-        image: mongo:7
-        ports:
-          - 27017:27017
-    env:
-      MONGODB_URI: mongodb://localhost:27017/ghostguild-test
-      JWT_SECRET: ci-test-jwt-secret
-      NUXT_PUBLIC_COMING_SOON: 'false'
-      NODE_ENV: development
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 22
-          cache: npm
-      - run: npm ci
-      - run: npx playwright install --with-deps chromium
-      - run: npm run build
-      - name: Start server
-        run: node .output/server/index.mjs &
-        env:
-          PORT: 3000
-      - name: Wait for server
-        run: timeout 30 sh -c 'until curl -sf http://localhost:3000; do sleep 1; done'
-      - run: npx playwright test e2e/visual/
-      - uses: actions/upload-artifact@v4
-        if: failure()
-        with:
-          name: visual-diffs
-          path: e2e/test-results/
-          retention-days: 7

.gitignore

@@ -26,6 +26,9 @@ logs
 !.env.example
 scripts/*.js
 
+# Migration backup files
+.migration-backup-*.json
+
 # Playwright
 e2e/test-results/
 playwright-report/
@@ -35,3 +38,6 @@ e2e/.auth/
 .worktrees/
 .claude/worktrees/
 .superpowers/
+
+.claude
+scripts/dump-babyghosts-preregistrations.mjs

.serena/project.yml

@@ -3,15 +3,18 @@ project_name: "ghostguild-org"
 
 
 # list of languages for which language servers are started; choose from:
-#   al                  bash                clojure             cpp                 csharp
-#   csharp_omnisharp    dart                elixir              elm                 erlang
-#   fortran             fsharp              go                  groovy              haskell
-#   java                julia               kotlin              lua                 markdown
-#   matlab              nix                 pascal              perl                php
-#   php_phpactor        powershell          python              python_jedi         r
-#   rego                ruby                ruby_solargraph     rust                scala
-#   swift               terraform           toml                typescript          typescript_vts
-#   vue                 yaml                zig
+#   al                  ansible             bash                clojure             cpp
+#   cpp_ccls            crystal             csharp              csharp_omnisharp    dart
+#   elixir              elm                 erlang              fortran             fsharp
+#   go                  groovy              haskell             haxe                hlsl
+#   java                json                julia               kotlin              lean4
+#   lua                 luau                markdown            matlab              msl
+#   nix                 ocaml               pascal              perl                php
+#   php_phpactor        powershell          python              python_jedi         python_ty
+#   r                   rego                ruby                ruby_solargraph     rust
+#   scala               solidity            swift               systemverilog       terraform
+#   toml                typescript          typescript_vts      vue                 yaml
+#   zig
 #   (This list may be outdated. For the current list, see values of Language enum here:
 #   https://github.com/oraios/serena/blob/main/src/solidlsp/ls_config.py
 #   For some languages, there are alternative language servers, e.g. csharp_omnisharp, ruby_solargraph.)
@@ -65,53 +68,17 @@ read_only: false
 
 # list of tool names to exclude.
 # This extends the existing exclusions (e.g. from the global configuration)
-#
-# Below is the complete list of tools for convenience.
-# To make sure you have the latest list of tools, and to view their descriptions, 
-# execute `uv run scripts/print_tool_overview.py`.
-#
-#  * `activate_project`: Activates a project by name.
-#  * `check_onboarding_performed`: Checks whether project onboarding was already performed.
-#  * `create_text_file`: Creates/overwrites a file in the project directory.
-#  * `delete_lines`: Deletes a range of lines within a file.
-#  * `delete_memory`: Deletes a memory from Serena's project-specific memory store.
-#  * `execute_shell_command`: Executes a shell command.
-#  * `find_referencing_code_snippets`: Finds code snippets in which the symbol at the given location is referenced.
-#  * `find_referencing_symbols`: Finds symbols that reference the symbol at the given location (optionally filtered by type).
-#  * `find_symbol`: Performs a global (or local) search for symbols with/containing a given name/substring (optionally filtered by type).
-#  * `get_current_config`: Prints the current configuration of the agent, including the active and available projects, tools, contexts, and modes.
-#  * `get_symbols_overview`: Gets an overview of the top-level symbols defined in a given file.
-#  * `initial_instructions`: Gets the initial instructions for the current project.
-#     Should only be used in settings where the system prompt cannot be set,
-#     e.g. in clients you have no control over, like Claude Desktop.
-#  * `insert_after_symbol`: Inserts content after the end of the definition of a given symbol.
-#  * `insert_at_line`: Inserts content at a given line in a file.
-#  * `insert_before_symbol`: Inserts content before the beginning of the definition of a given symbol.
-#  * `list_dir`: Lists files and directories in the given directory (optionally with recursion).
-#  * `list_memories`: Lists memories in Serena's project-specific memory store.
-#  * `onboarding`: Performs onboarding (identifying the project structure and essential tasks, e.g. for testing or building).
-#  * `prepare_for_new_conversation`: Provides instructions for preparing for a new conversation (in order to continue with the necessary context).
-#  * `read_file`: Reads a file within the project directory.
-#  * `read_memory`: Reads the memory with the given name from Serena's project-specific memory store.
-#  * `remove_project`: Removes a project from the Serena configuration.
-#  * `replace_lines`: Replaces a range of lines within a file with new content.
-#  * `replace_symbol_body`: Replaces the full definition of a symbol.
-#  * `restart_language_server`: Restarts the language server, may be necessary when edits not through Serena happen.
-#  * `search_for_pattern`: Performs a search for a pattern in the project.
-#  * `summarize_changes`: Provides instructions for summarizing the changes made to the codebase.
-#  * `switch_modes`: Activates modes by providing a list of their names
-#  * `think_about_collected_information`: Thinking tool for pondering the completeness of collected information.
-#  * `think_about_task_adherence`: Thinking tool for determining whether the agent is still on track with the current task.
-#  * `think_about_whether_you_are_done`: Thinking tool for determining whether the task is truly completed.
-#  * `write_memory`: Writes a named memory (for future reference) to Serena's project-specific memory store.
+# Find the list of tools here: https://oraios.github.io/serena/01-about/035_tools.html
 excluded_tools: []
 
 # list of tools to include that would otherwise be disabled (particularly optional tools that are disabled by default).
 # This extends the existing inclusions (e.g. from the global configuration).
+# Find the list of tools here: https://oraios.github.io/serena/01-about/035_tools.html
 included_optional_tools: []
 
 # fixed set of tools to use as the base tool set (if non-empty), replacing Serena's default set of tools.
 # This cannot be combined with non-empty excluded_tools or included_optional_tools.
+# Find the list of tools here: https://oraios.github.io/serena/01-about/035_tools.html
 fixed_tools: []
 
 # list of mode names to that are always to be included in the set of active modes
@@ -122,11 +89,14 @@ fixed_tools: []
 # Set this to a list of mode names to always include the respective modes for this project.
 base_modes:
 
-# list of mode names that are to be activated by default.
-# The full set of modes to be activated is base_modes + default_modes.
-# If the setting is undefined, the default_modes from the global configuration (serena_config.yml) apply.
+# list of mode names that are to be activated by default, overriding the setting in the global configuration.
+# The full set of modes to be activated is base_modes (from global config) + default_modes + added_modes.
+# If the setting is undefined/empty, the default_modes from the global configuration (serena_config.yml) apply.
 # Otherwise, this overrides the setting from the global configuration (serena_config.yml).
+# Therefore, you can set this to [] if you do not want the default modes defined in the global config to apply
+# for this project.
 # This setting can, in turn, be overridden by CLI parameters (--mode).
+# See https://oraios.github.io/serena/02-usage/050_configuration.html#modes
 default_modes:
 
 # initial prompt for the project. It will always be given to the LLM upon activating the project
@@ -150,3 +120,8 @@ read_only_memory_patterns: []
 # Extends the list from the global configuration, merging the two lists.
 # Example: ["_archive/.*", "_episodes/.*"]
 ignored_memory_patterns: []
+
+# list of mode names to be activated additionally for this project, e.g. ["query-projects"]
+# The full set of modes to be activated is base_modes (from global config) + default_modes + added_modes.
+# See https://oraios.github.io/serena/02-usage/050_configuration.html#modes
+added_modes:

Dockerfile

@@ -1,5 +1,5 @@
 # Build stage
-FROM node:20-alpine AS builder
+FROM node:22-alpine AS builder
 
 WORKDIR /app
 COPY package*.json ./
@@ -7,8 +7,11 @@ RUN npm ci --ignore-scripts && npx nuxt prepare
 COPY . .
 RUN npm run build
 
-# Production stage — only the self-contained .output is needed
-FROM node:20-alpine
+# Production stage — only the self-contained .output is needed.
+# bash + curl are added so Dokploy scheduled tasks (which wrap commands in
+# `bash -c "..."`) can run; alpine ships only ash and has no curl by default.
+FROM node:22-alpine
+RUN apk add --no-cache bash curl
 WORKDIR /app
 COPY --from=builder /app/.output .output
 

app/assets/css/main.css

@@ -27,7 +27,10 @@
   --text: #2a2015;
   --text-bright: #1a1008;
   --text-dim: #5a5040;
-  --text-faint: #746a58;
+  /* Darkened from #746a58 (4.01:1 on --surface, fails WCAG AA) to #665c4b
+     (4.94:1 on --surface, 5.13:1 on --bg). Stays visually quieter than
+     --text-dim (5.80:1) while meeting AA for small text. */
+  --text-faint: #665c4b;
   --parch: #2a2015;
   --parch-hover: #3a3025;
   --parch-text: #ede4d0;
@@ -273,6 +276,98 @@ p a, blockquote a {
   min-width: 0;
 }
 
+/* ---- Nuxt UI placeholder contrast ----
+   Default Nuxt UI placeholder uses `text-dimmed` (#a6a09b) which fails WCAG
+   AA on cream and white backgrounds (≈2.4:1). Override globally to --text-dim
+   so USelect/USelectMenu placeholders meet the 4.5:1 ratio. */
+[data-slot="placeholder"] {
+  color: var(--text-dim);
+}
+
+/* ---- SHARED USelectMenu STYLES ----
+   Apply via: <USelectMenu class="zine-select" :ui="{ content: 'tz-content', item: 'tz-item', input: 'tz-input' }" />
+   Classes are global (not scoped) because Nuxt UI portals the popup content to body. */
+button.zine-select,
+button.timezone-select {
+  display: flex !important;
+  width: 100%;
+  padding: 5px 8px !important;
+  font-family: "Commit Mono", monospace !important;
+  font-size: 13px !important;
+  color: var(--text-bright) !important;
+  background: var(--input-bg) !important;
+  border: 1px solid var(--border) !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  min-height: 0;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-color: transparent;
+}
+
+button.zine-select:hover,
+button.timezone-select:hover {
+  background: var(--input-bg) !important;
+}
+
+button.zine-select:focus,
+button.zine-select:focus-visible,
+button.zine-select[aria-expanded="true"],
+button.timezone-select:focus,
+button.timezone-select:focus-visible,
+button.timezone-select[aria-expanded="true"] {
+  border-color: var(--candle) !important;
+}
+
+.tz-content {
+  background: var(--input-bg) !important;
+  border: 1px solid var(--border) !important;
+  border-radius: 0 !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
+  --tw-ring-shadow: 0 0 #0000 !important;
+  --tw-ring-offset-shadow: 0 0 #0000 !important;
+  font-family: "Commit Mono", monospace !important;
+}
+
+.tz-input {
+  border-bottom: 1px dashed var(--border) !important;
+}
+
+.tz-input input {
+  font-family: "Commit Mono", monospace !important;
+  font-size: 13px !important;
+  color: var(--text-bright) !important;
+  background: transparent !important;
+  border-radius: 0 !important;
+  padding: 6px 8px !important;
+  box-shadow: none !important;
+  --tw-ring-shadow: 0 0 #0000 !important;
+  --tw-ring-offset-shadow: 0 0 #0000 !important;
+}
+
+.tz-item {
+  font-family: "Commit Mono", monospace !important;
+  font-size: 13px !important;
+  color: var(--text) !important;
+  border-radius: 0 !important;
+  padding: 6px 8px !important;
+}
+
+.tz-item::before {
+  border-radius: 0 !important;
+}
+
+.tz-item[data-highlighted]::before,
+.tz-item[data-highlighted]:not([data-disabled])::before {
+  background: var(--surface-hover) !important;
+}
+
+.tz-item[data-highlighted],
+.tz-item[data-highlighted]:not([data-disabled]) {
+  color: var(--text-bright) !important;
+}
+
 /* ---- MOBILE ---- */
 @media (max-width: 1023px) {
   body {

app/components/AppNavigation.vue

@@ -25,11 +25,6 @@
                 />
               </NuxtLink>
             </li>
-            <li>
-              <a href="#" class="sign-out" @click.prevent="handleLogout"
-                >Sign out</a
-              >
-            </li>
           </ul>
 
           <div class="sidebar-section">Explore</div>
@@ -138,11 +133,11 @@
     <div class="sidebar-meta">
       <ClientOnly>
         Part of
-        <a href="https://babyghosts.org" target="_blank">Baby Ghosts</a><br />
+        <a href="https://babyghosts.org" target="_blank">Baby Ghosts</a><br >
         A Canadian nonprofit
         <template #fallback>
           Part of
-          <a href="https://babyghosts.org" target="_blank">Baby Ghosts</a><br />
+          <a href="https://babyghosts.org" target="_blank">Baby Ghosts</a><br >
           A Canadian nonprofit
         </template>
       </ClientOnly>
@@ -204,7 +199,6 @@ const youItems = [
   { label: "Dashboard", path: "/member/dashboard" },
   { label: "Profile", path: "/member/profile" },
   { label: "Account", path: "/member/account" },
-  { label: "Activity Log", path: "/member/activity" },
 ];
 
 const exploreItems = [
@@ -336,8 +330,9 @@ const exploreItems = [
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: var(--candle);
-  margin-left: 6px;
+  background: var(--green);
+  margin-left: 0px;
   vertical-align: middle;
+  transform: translateY(-1px);
 }
 </style>

app/components/BoardPostCard.vue

@@ -2,13 +2,18 @@
   <article class="board-post">
     <header class="post-header">
       <span class="post-meta">{{ typeLabel }}</span>
-      <div v-if="editable" class="post-actions">
+      <div v-if="editable && !pendingDelete" class="post-actions">
         <button type="button" class="action-btn" @click="$emit('edit', post)">Edit</button>
         <button type="button" class="action-btn danger" @click="$emit('delete', post)">Delete</button>
       </div>
+      <div v-else-if="editable && pendingDelete" class="post-actions confirm">
+        <span class="confirm-label">Delete?</span>
+        <button type="button" class="action-btn" @click="$emit('cancel-delete', post)">Cancel</button>
+        <button type="button" class="action-btn danger" @click="$emit('confirm-delete', post)">Confirm</button>
+      </div>
     </header>
 
-    <h3 class="post-title">{{ post.title }}</h3>
+    <h2 class="post-title">{{ post.title }}</h2>
 
     <div v-if="post.seeking" class="post-block">
       <div class="block-label">Seeking</div>
@@ -34,7 +39,7 @@
           :alt="post.author.name"
           class="author-avatar"
         >
-        <span v-else class="author-avatar avatar-placeholder" />
+        <span v-else class="author-avatar avatar-placeholder" aria-hidden="true">{{ authorInitial }}</span>
         <span class="author-name">{{ post.author ? post.author.name : 'Unknown' }}</span>
         <span v-if="slackHandle" class="slack-handle-wrap">
           <button
@@ -76,9 +81,12 @@ const props = defineProps({
   channels: { type: Array, default: () => [] },
   tags: { type: Array, default: () => [] },
   editable: { type: Boolean, default: false },
+  pendingDelete: { type: Boolean, default: false },
 })
 
-defineEmits(['edit', 'delete'])
+defineEmits(['edit', 'delete', 'confirm-delete', 'cancel-delete'])
+
+const { slackUrl } = useBoardChannels()
 
 const capitalizeAvatar = (str) => {
   if (str.toLowerCase() === 'wtf') return 'WTF'
@@ -96,6 +104,11 @@ const authorAvatar = computed(() => {
 
 const slackHandle = computed(() => props.post.author?.board?.slackHandle || '')
 
+const authorInitial = computed(() => {
+  const name = props.post.author?.name || ''
+  return name.trim().charAt(0).toUpperCase() || '?'
+})
+
 const copied = ref(false)
 const copySlackHandle = async () => {
   if (!slackHandle.value) return
@@ -137,7 +150,7 @@ const slackLinks = computed(() => {
     .map((c) => ({
       id: c.slackChannelId,
       name: c.slackChannelName || c.name || c.slackChannelId,
-      url: `https://gammaspace.slack.com/archives/${c.slackChannelId}`,
+      url: slackUrl(c.slackChannelId),
     }))
 })
 </script>
@@ -145,7 +158,7 @@ const slackLinks = computed(() => {
 <style scoped>
 .board-post {
   border: 1px dashed var(--border);
-  padding: 18px 22px;
+  padding: 20px 24px;
   background: var(--surface);
   break-inside: avoid;
   -webkit-column-break-inside: avoid;
@@ -165,12 +178,21 @@ const slackLinks = computed(() => {
   font-size: 10px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
-  color: var(--text-faint);
+  /* --text-faint fails WCAG AA (4.01:1) on the cream card bg */
+  color: var(--text-dim);
 }
 
 .post-actions {
   display: flex;
   gap: 6px;
+  align-items: center;
+}
+.post-actions.confirm .confirm-label {
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--ember);
+  margin-right: 2px;
 }
 .action-btn {
   font-family: "Commit Mono", monospace;
@@ -191,10 +213,14 @@ const slackLinks = computed(() => {
   color: var(--ember);
   border-color: var(--ember);
 }
+.action-btn:focus-visible {
+  outline: 2px dashed var(--candle);
+  outline-offset: 2px;
+}
 
 .post-title {
   font-family: "Brygada 1918", serif;
-  font-size: 19px;
+  font-size: 18px;
   font-weight: 500;
   color: var(--text-bright);
   margin: 0 0 12px;
@@ -208,7 +234,8 @@ const slackLinks = computed(() => {
   font-size: 10px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
-  color: var(--text-faint);
+  /* --text-faint fails WCAG AA (4.01:1) on the cream card bg */
+  color: var(--text-dim);
   margin-bottom: 2px;
 }
 .block-text {
@@ -219,7 +246,8 @@ const slackLinks = computed(() => {
 
 .post-note {
   font-size: 11px;
-  color: var(--text-faint);
+  /* --text-faint fails WCAG AA (4.01:1) on the cream card bg */
+  color: var(--text-dim);
   font-style: italic;
   margin: 8px 0;
   white-space: pre-wrap;
@@ -262,7 +290,15 @@ const slackLinks = computed(() => {
   object-fit: cover;
 }
 .avatar-placeholder {
-  background: var(--surface);
+  background: transparent;
+  border: 1px dashed var(--border);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  /* --text-faint fails WCAG AA (4.01:1) on the cream card bg */
+  color: var(--text-dim);
+  font-family: "Commit Mono", monospace;
 }
 .author-name {
   font-size: 11px;
@@ -276,7 +312,8 @@ const slackLinks = computed(() => {
 }
 .slack-handle {
   font-size: 11px;
-  color: var(--text-faint);
+  /* --text-faint fails WCAG AA (4.01:1) on the cream card bg */
+  color: var(--text-dim);
   font-family: "Commit Mono", monospace;
   background: transparent;
   border: none;
@@ -286,6 +323,11 @@ const slackLinks = computed(() => {
 .slack-handle:hover {
   color: var(--candle);
 }
+.slack-handle:focus-visible,
+.copy-link:focus-visible {
+  outline: 2px dashed var(--candle);
+  outline-offset: 2px;
+}
 .copy-link {
   font-size: 11px;
   font-family: "Commit Mono", monospace;

app/components/BoardPostForm.vue

@@ -1,7 +1,7 @@
 <template>
   <form class="post-form" @submit.prevent="handleSubmit">
     <div class="form-header">
-      <h3 class="form-title">{{ isEdit ? 'Edit post' : 'New post' }}</h3>
+      <h2 class="form-title">{{ isEdit ? 'Edit post' : 'New post' }}</h2>
       <p class="form-hint">Fill in <em>Seeking</em> or <em>Offering</em> (or both).</p>
     </div>
 
@@ -138,8 +138,8 @@ function handleSubmit() {
 <style scoped>
 .post-form {
   border: 1px dashed var(--border);
-  padding: 14px 16px;
-  background: var(--bg);
+  padding: 16px 16px;
+  background: transparent;
 }
 
 .form-header {
@@ -147,7 +147,7 @@ function handleSubmit() {
 }
 .form-title {
   font-family: "Brygada 1918", serif;
-  font-size: 15px;
+  font-size: 16px;
   font-weight: 500;
   color: var(--text-bright);
 }
@@ -183,7 +183,7 @@ function handleSubmit() {
   color: var(--text-faint);
   text-transform: none;
   letter-spacing: 0;
-  font-size: 9px;
+  font-size: 10px;
   margin-left: 4px;
   opacity: 0.7;
 }
@@ -204,14 +204,6 @@ function handleSubmit() {
   border-color: var(--candle);
 }
 
-.char-count {
-  font-size: 9px;
-  font-family: "Commit Mono", monospace;
-  color: var(--text-faint);
-  text-align: right;
-  margin-top: 2px;
-}
-
 .pill-grid {
   display: flex;
   flex-wrap: wrap;
@@ -220,11 +212,11 @@ function handleSubmit() {
 .pill {
   display: inline-flex;
   align-items: center;
-  padding: 2px 9px;
+  padding: 2px 8px;
   border: 1px dashed var(--border);
   background: transparent;
   color: var(--text-faint);
-  font-size: 11px;
+  font-size: 10px;
   font-family: "Commit Mono", monospace;
   cursor: pointer;
   user-select: none;
@@ -241,6 +233,10 @@ function handleSubmit() {
   border-color: var(--candle);
   border-style: solid;
 }
+.pill:focus-visible {
+  outline: 2px dashed var(--candle);
+  outline-offset: 2px;
+}
 
 .form-error {
   font-size: 11px;

app/components/CirclePicker.vue

@@ -4,13 +4,16 @@
       v-for="circle in circles"
       :key="circle.value"
       class="circle-option"
-      :class="{ current: modelValue === circle.value }"
+      :class="{
+        selected: modelValue === circle.value,
+        current: savedValue === circle.value,
+      }"
       @click="$emit('update:modelValue', circle.value)"
     >
       <span class="circle-name">{{ circle.label }}</span>
       <span class="circle-desc">{{ circle.description }}</span>
       <span
-        v-if="modelValue === circle.value"
+        v-if="savedValue === circle.value"
         class="circle-tag"
         :style="{ color: `var(--c-${circle.value})`, borderColor: `var(--c-${circle.value})` }"
       >Current</span>
@@ -21,6 +24,7 @@
 <script setup>
 defineProps({
   modelValue: { type: String, default: '' },
+  savedValue: { type: String, default: '' },
   circles: {
     type: Array,
     default: () => [
@@ -44,7 +48,7 @@ defineEmits(['update:modelValue'])
 
 .circle-option {
   border: 1px dashed var(--border);
-  padding: 14px 12px;
+  padding: 12px 12px;
   background: var(--bg);
   cursor: pointer;
   transition: all 0.15s;
@@ -54,7 +58,7 @@ defineEmits(['update:modelValue'])
   background: var(--surface-hover);
 }
 
-.circle-option.current {
+.circle-option.selected {
   border-color: var(--candle);
   border-style: solid;
   background: var(--surface);
@@ -67,19 +71,19 @@ defineEmits(['update:modelValue'])
   margin-bottom: 4px;
 }
 
-.circle-option.current .circle-name {
+.circle-option.selected .circle-name {
   color: var(--candle);
 }
 
 .circle-desc {
   font-size: 11px;
-  color: var(--text-faint);
+  color: var(--text-dim);
   line-height: 1.5;
   display: block;
 }
 
 .circle-tag {
-  font-size: 9px;
+  font-size: 10px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   margin-top: 6px;

app/components/EventSeriesBadge.vue

@@ -1,70 +0,0 @@
-<template>
-  <div
-    class="series-badge p-4 bg-guild-800/50 dark:bg-guild-700/30 rounded-xl border border-guild-600 dark:border-guild-600"
-  >
-    <div class="flex items-start justify-between gap-6">
-      <div class="flex-1 min-w-0">
-        <div class="flex flex-wrap items-center gap-2 mb-2">
-          <span
-            class="series-badge__label text-sm font-semibold text-guild-300 dark:text-guild-300"
-          >
-            Part of a Series
-          </span>
-          <span
-            v-if="totalEvents"
-            class="series-badge__count inline-flex items-center px-2 py-0.5 rounded-md bg-guild-700/50 dark:bg-guild-600/50 text-sm font-medium text-guild-200 dark:text-guild-200"
-          >
-            <template v-if="position">
-              Event {{ position }} of {{ totalEvents }}
-            </template>
-            <template v-else> {{ totalEvents }} events in series </template>
-          </span>
-        </div>
-        <h3
-          class="series-badge__title text-lg font-semibold text-guild-100 dark:text-guild-100 mb-2"
-        >
-          {{ title }}
-        </h3>
-        <p
-          v-if="description"
-          class="series-badge__description text-sm text-guild-300 dark:text-guild-300"
-        >
-          {{ description }}
-        </p>
-      </div>
-      <div v-if="seriesId" class="flex-shrink-0 self-start">
-        <UButton
-          :to="`/series/${seriesId}`"
-          color="primary"
-          size="md"
-          label="View Series"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-const props = defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-    default: "",
-  },
-  position: {
-    type: Number,
-    default: null,
-  },
-  totalEvents: {
-    type: Number,
-    default: null,
-  },
-  seriesId: {
-    type: String,
-    required: true,
-  },
-});
-</script>

app/components/EventSeriesTicketCard.vue

@@ -1,37 +1,27 @@
 <template>
-  <div
-    class="series-ticket-card border border-guild-600 dark:border-guild-600 rounded-xl overflow-hidden"
-  >
+  <div class="series-ticket-card" style="border: 1px solid var(--border); overflow: hidden">
     <!-- Header -->
-    <div
-      class="bg-gradient-to-br from-candlelight-500 to-candlelight-700 dark:from-candlelight-600 dark:to-candlelight-800 p-6"
-    >
+    <div class="p-6" style="background: var(--candle); color: var(--parch-text)">
       <div class="flex items-start justify-between gap-4">
         <div class="flex-1">
           <div class="flex items-center gap-2 mb-2">
-            <Icon
-              name="heroicons:ticket"
-              class="w-5 h-5 text-candlelight-900 dark:text-candlelight-200"
-            />
-            <span class="text-sm font-semibold text-candlelight-900 dark:text-candlelight-200">
+            <Icon name="heroicons:ticket" class="w-5 h-5" style="color: var(--parch-text)" />
+            <span class="text-sm font-semibold" style="color: var(--parch-text)">
               Series Pass
             </span>
           </div>
-          <h3 class="text-xl font-bold text-white mb-1">
+          <h3 class="font-display text-xl font-bold mb-1" style="color: var(--parch-text)">
             {{ ticket.name }}
           </h3>
-          <p v-if="ticket.description" class="text-sm text-candlelight-900 dark:text-candlelight-200">
+          <p v-if="ticket.description" class="text-sm" style="color: var(--parch-text); opacity: 0.85">
             {{ ticket.description }}
           </p>
         </div>
         <div class="text-right flex-shrink-0">
-          <div class="text-3xl font-bold text-white text-ui-mono">
+          <div class="text-3xl font-bold" style="color: var(--parch-text)">
             {{ formatPrice(ticket.price, ticket.currency) }}
           </div>
-          <div
-            v-if="ticket.isEarlyBird"
-            class="text-xs text-candlelight-900 dark:text-candlelight-200 mt-1"
-          >
+          <div v-if="ticket.isEarlyBird" class="text-xs mt-1" style="color: var(--parch-text); opacity: 0.85">
             Early Bird Price
           </div>
         </div>
@@ -39,29 +29,23 @@
     </div>
 
     <!-- Body -->
-    <div class="p-6 bg-guild-800/50 dark:bg-guild-700/30">
+    <div class="p-6" style="background: var(--surface)">
       <!-- What's Included -->
       <div class="mb-6">
-        <h4 class="text-sm font-semibold text-guild-200 dark:text-guild-200 mb-3 uppercase tracking-wide">
+        <h4 class="text-sm font-semibold mb-3 uppercase tracking-wide" style="color: var(--text-faint)">
           What's Included
         </h4>
         <div class="space-y-2">
-          <div class="flex items-center gap-2 text-guild-300 dark:text-guild-300">
-            <Icon name="heroicons:check-circle" class="w-5 h-5 text-candlelight-400" />
+          <div class="flex items-center gap-2" style="color: var(--text)">
+            <Icon name="heroicons:check-circle" class="w-5 h-5" style="color: var(--candle)" />
             <span>Access to all {{ totalEvents }} events in the series</span>
           </div>
-          <div
-            v-if="ticket.isFree && !isMember"
-            class="flex items-center gap-2 text-guild-300 dark:text-guild-300"
-          >
-            <Icon name="heroicons:check-circle" class="w-5 h-5 text-candlelight-400" />
+          <div v-if="ticket.isFree && !isMember" class="flex items-center gap-2" style="color: var(--text)">
+            <Icon name="heroicons:check-circle" class="w-5 h-5" style="color: var(--candle)" />
             <span>Automatic registration for all sessions</span>
           </div>
-          <div
-            v-if="memberSavings > 0"
-            class="flex items-center gap-2 text-guild-300 dark:text-guild-300"
-          >
-            <Icon name="heroicons:check-circle" class="w-5 h-5 text-candlelight-400" />
+          <div v-if="memberSavings > 0" class="flex items-center gap-2" style="color: var(--text)">
+            <Icon name="heroicons:check-circle" class="w-5 h-5" style="color: var(--candle)" />
             <span>Save {{ formatPrice(memberSavings, ticket.currency) }} as a member</span>
           </div>
         </div>
@@ -69,33 +53,31 @@
 
       <!-- Events List Preview -->
       <div v-if="events && events.length > 0" class="mb-6">
-        <h4 class="text-sm font-semibold text-guild-200 dark:text-guild-200 mb-3 uppercase tracking-wide">
+        <h4 class="text-sm font-semibold mb-3 uppercase tracking-wide" style="color: var(--text-faint)">
           Series Schedule
         </h4>
         <div class="space-y-2">
           <div
             v-for="(event, index) in events.slice(0, 3)"
             :key="event.id"
-            class="flex items-start gap-3 p-3 bg-guild-700/50 dark:bg-guild-600/30 rounded-lg"
+            class="flex items-start gap-3 p-3"
           >
             <div
-              class="w-8 h-8 rounded-full bg-candlelight-600/20 border border-candlelight-500/30 flex items-center justify-center flex-shrink-0"
+              class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0"
+              style="background: color-mix(in srgb, var(--candle) 15%, transparent); border: 1px solid var(--candle)"
             >
-              <span class="text-sm font-bold text-candlelight-300">{{ index + 1 }}</span>
+              <span class="text-sm font-bold" style="color: var(--candle)">{{ index + 1 }}</span>
             </div>
             <div class="flex-1 min-w-0">
-              <div class="font-medium text-guild-100 dark:text-guild-100 text-sm">
+              <div class="font-medium text-sm" style="color: var(--text)">
                 {{ event.title }}
               </div>
-              <div class="text-xs text-guild-400 dark:text-guild-400 mt-1">
+              <div class="text-xs mt-1" style="color: var(--text-faint)">
                 {{ formatEventDate(event.startDate) }}
               </div>
             </div>
           </div>
-          <div
-            v-if="events.length > 3"
-            class="text-center text-sm text-guild-400 dark:text-guild-400 pt-2"
-          >
+          <div v-if="events.length > 3" class="text-center text-sm pt-2" style="color: var(--text-faint)">
             + {{ events.length - 3 }} more event{{ events.length - 3 !== 1 ? 's' : '' }}
           </div>
         </div>
@@ -104,13 +86,14 @@
       <!-- Member Benefit Callout -->
       <div
         v-if="ticket.isFree && isMember"
-        class="p-4 bg-candlelight-900/20 border border-candlelight-700/30 rounded-lg mb-6"
+        class="p-4 mb-6"
+        style="background: color-mix(in srgb, var(--candle) 15%, transparent); border: 1px solid var(--candle)"
       >
         <div class="flex items-start gap-3">
-          <Icon name="heroicons:sparkles" class="w-5 h-5 text-candlelight-400 flex-shrink-0 mt-0.5" />
+          <Icon name="heroicons:sparkles" class="w-5 h-5 flex-shrink-0 mt-0.5" style="color: var(--candle)" />
           <div>
-            <div class="font-semibold text-candlelight-300 mb-1">Member Benefit</div>
-            <div class="text-sm text-candlelight-400">
+            <div class="font-semibold mb-1" style="color: var(--candle)">Member Benefit</div>
+            <div class="text-sm" style="color: var(--candle)">
               This series pass is free for Ghost Guild members! Complete registration to secure your spot.
             </div>
           </div>
@@ -120,13 +103,14 @@
       <!-- Public vs Member Pricing -->
       <div
         v-if="!ticket.isFree && publicPrice && ticket.type === 'member'"
-        class="p-4 bg-candlelight-900/20 border border-candlelight-700/30 rounded-lg mb-6"
+        class="p-4 mb-6"
+        style="background: color-mix(in srgb, var(--candle) 15%, transparent); border: 1px solid var(--candle)"
       >
         <div class="flex items-start gap-3">
-          <Icon name="heroicons:tag" class="w-5 h-5 text-candlelight-400 flex-shrink-0 mt-0.5" />
+          <Icon name="heroicons:tag" class="w-5 h-5 flex-shrink-0 mt-0.5" style="color: var(--candle)" />
           <div class="flex-1">
-            <div class="font-semibold text-candlelight-300 mb-1">Member Savings</div>
-            <div class="text-sm text-candlelight-400">
+            <div class="font-semibold mb-1" style="color: var(--candle)">Member Savings</div>
+            <div class="text-sm" style="color: var(--candle)">
               You're saving {{ formatPrice(memberSavings, ticket.currency) }} as a member.
               Public price: {{ formatPrice(publicPrice, ticket.currency) }}
             </div>
@@ -136,22 +120,15 @@
 
       <!-- Availability -->
       <div v-if="availability" class="mb-6">
-        <div
-          v-if="!availability.unlimited && availability.remaining !== null"
-          class="flex items-center gap-2"
-        >
+        <div v-if="!availability.unlimited && availability.remaining !== null" class="flex items-center gap-2">
           <Icon
             :name="availability.remaining > 5 ? 'heroicons:check-circle' : 'heroicons:exclamation-triangle'"
-            :class="[
-              'w-5 h-5',
-              availability.remaining > 5 ? 'text-candlelight-400' : 'text-ember-400'
-            ]"
+            class="w-5 h-5"
+            :style="{ color: availability.remaining > 5 ? 'var(--candle)' : 'var(--ember)' }"
           />
           <span
-            :class="[
-              'text-sm font-medium',
-              availability.remaining > 5 ? 'text-candlelight-300' : 'text-ember-300'
-            ]"
+            class="text-sm font-medium"
+            :style="{ color: availability.remaining > 5 ? 'var(--candle)' : 'var(--ember)' }"
           >
             {{ availability.remaining }} series pass{{ availability.remaining !== 1 ? 'es' : '' }} remaining
           </span>
@@ -160,12 +137,12 @@
 
       <!-- Sold Out / Waitlist -->
       <div v-if="!available" class="space-y-3">
-        <div class="p-4 bg-ember-900/20 border border-ember-700/30 rounded-lg">
+        <div class="p-4" style="background: var(--ember-bg); border: 1px solid var(--ember)">
           <div class="flex items-start gap-3">
-            <Icon name="heroicons:exclamation-circle" class="w-5 h-5 text-ember-400 flex-shrink-0 mt-0.5" />
+            <Icon name="heroicons:exclamation-circle" class="w-5 h-5 flex-shrink-0 mt-0.5" style="color: var(--ember)" />
             <div>
-              <div class="font-semibold text-ember-300 mb-1">Series Pass Sold Out</div>
-              <div class="text-sm text-ember-400">
+              <div class="font-semibold mb-1" style="color: var(--ember)">Series Pass Sold Out</div>
+              <div class="text-sm" style="color: var(--ember)">
                 All series passes have been claimed.
               </div>
             </div>
@@ -174,7 +151,7 @@
         <UButton
           v-if="availability?.waitlistAvailable"
           block
-          color="gray"
+          color="neutral"
           size="lg"
           @click="$emit('join-waitlist')"
         >
@@ -183,12 +160,16 @@
       </div>
 
       <!-- Already Registered -->
-      <div v-else-if="alreadyRegistered" class="p-4 bg-candlelight-900/20 border border-candlelight-700/30 rounded-lg">
+      <div
+        v-else-if="alreadyRegistered"
+        class="p-4"
+        style="background: color-mix(in srgb, var(--candle) 15%, transparent); border: 1px solid var(--candle)"
+      >
         <div class="flex items-start gap-3">
-          <Icon name="heroicons:check-badge" class="w-6 h-6 text-candlelight-400 flex-shrink-0" />
+          <Icon name="heroicons:check-badge" class="w-6 h-6 flex-shrink-0" style="color: var(--candle)" />
           <div>
-            <div class="font-semibold text-candlelight-300 mb-1">You're Registered!</div>
-            <div class="text-sm text-candlelight-400">
+            <div class="font-semibold mb-1" style="color: var(--candle)">You're Registered!</div>
+            <div class="text-sm" style="color: var(--candle)">
               You have a series pass and are registered for all {{ totalEvents }} events.
             </div>
           </div>

app/components/EventTicketCard.vue

@@ -199,7 +199,7 @@ const formatPrice = (amount) => {
 
 .early-bird {
   color: var(--candle-dim);
-  border-color: rgba(122, 90, 16, 0.35);
+  border-color: var(--candle-faint);
 }
 
 .ticket-savings {

app/components/EventTicketPurchase.vue

@@ -120,23 +120,29 @@
 
         <form @submit.prevent="handleSubmit">
           <div class="field">
-            <label>Full Name</label>
+            <label for="ticket-name">Full Name</label>
             <input
+              id="ticket-name"
               v-model="form.name"
+              name="name"
               type="text"
+              autocomplete="name"
               required
               :disabled="processing"
-            />
+            >
           </div>
 
           <div class="field">
-            <label>Email Address</label>
+            <label for="ticket-email">Email Address</label>
             <input
+              id="ticket-email"
               v-model="form.email"
+              name="email"
               type="email"
+              autocomplete="email"
               required
               :disabled="processing"
-            />
+            >
           </div>
 
           <p
@@ -148,6 +154,20 @@
             securely
           </p>
 
+          <div class="consent-block">
+            <label class="consent-field">
+              <input
+                v-model="form.createAccount"
+                type="checkbox"
+                :disabled="processing"
+              >
+              <span>Create a free guest account so I can manage my registration</span>
+            </label>
+            <p class="field-hint consent-hint">
+              Guest accounts let you view your tickets and register faster next time. We won't add you to member communications.
+            </p>
+          </div>
+
           <button
             type="submit"
             class="btn btn-primary"
@@ -235,6 +255,7 @@ const ticketInfo = ref(null);
 const form = ref({
   name: props.userName || "",
   email: props.userEmail || "",
+  createAccount: true,
 });
 
 const isLoggedIn = computed(() => !!props.userEmail);
@@ -244,11 +265,13 @@ onMounted(async () => {
   await fetchTicketInfo();
 });
 
-const fetchTicketInfo = async () => {
+const fetchTicketInfo = async (emailOverride = null) => {
   loading.value = true;
   error.value = null;
 
   try {
+    const effectiveEmail = emailOverride || props.userEmail;
+
     // First check if this event requires a series pass
     if (props.userEmail) {
       try {
@@ -284,7 +307,7 @@ const fetchTicketInfo = async () => {
     }
 
     // Regular ticket availability check
-    const params = props.userEmail ? `?email=${props.userEmail}` : "";
+    const params = effectiveEmail ? `?email=${encodeURIComponent(effectiveEmail)}` : "";
     const response = await $fetch(
       `/api/events/${props.eventId}/tickets/available${params}`,
     );
@@ -309,7 +332,6 @@ const handleSubmit = async () => {
       await initializeTicketPayment(
         props.eventId,
         form.value.email,
-        ticketInfo.value.price,
         props.eventTitle,
       );
 
@@ -326,15 +348,18 @@ const handleSubmit = async () => {
       }
     }
 
+    const body = {
+      name: form.value.name,
+      email: form.value.email,
+      createAccount: form.value.createAccount,
+    };
+    if (transactionId) body.transactionId = transactionId;
+
     const response = await $fetch(
       `/api/events/${props.eventId}/tickets/purchase`,
       {
         method: "POST",
-        body: {
-          name: form.value.name,
-          email: form.value.email,
-          transactionId,
-        },
+        body,
       },
     );
 
@@ -347,7 +372,14 @@ const handleSubmit = async () => {
     });
 
     emit("success", response);
-    await fetchTicketInfo();
+
+    if (response?.signedIn) {
+      // New guest account or returning guest — refresh client auth state so the
+      // rest of the app sees them as logged in.
+      await useAuth().checkMemberStatus();
+    }
+
+    await fetchTicketInfo(form.value.email);
   } catch (err) {
     console.error("Error purchasing ticket:", err);
 
@@ -419,4 +451,27 @@ const formatEventDate = (date) => {
   color: var(--text-faint);
   margin-top: 2px;
 }
+
+.consent-block {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: flex-start;
+  column-gap: 8px;
+  row-gap: 4px;
+  margin-bottom: 14px;
+}
+.consent-field {
+  display: contents;
+  font-size: 12px;
+  color: var(--text);
+  cursor: pointer;
+}
+.consent-field input[type="checkbox"] {
+  margin-top: 3px;
+  accent-color: var(--candle);
+}
+.consent-hint {
+  grid-column: 2;
+  margin: 0;
+}
 </style>

app/components/EventsMiniSidebar.vue

@@ -104,7 +104,7 @@ const formatDate = (dateStr) => {
 }
 
 .em-circle {
-  font-size: 9px;
+  font-size: 10px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   margin-top: 2px;

app/components/FilterBar.vue

@@ -22,7 +22,7 @@ defineEmits(['update:modelValue'])
 
 <style scoped>
 .filter-bar {
-  padding: 14px 32px;
+  padding: 16px 28px;
   border-bottom: 1px dashed var(--border);
   display: flex;
   align-items: center;

app/components/ImageUpload.vue

@@ -5,14 +5,16 @@
       <img
         :src="transformedImageUrl"
         :alt="modelValue.alt || 'Event image'"
-        class="w-full h-48 object-cover rounded-lg border border-guild-700"
+        class="w-full h-48 object-cover"
+        style="border: 1px solid var(--border)"
         @error="console.log('Image failed to load:', transformedImageUrl)"
         @load="console.log('Image loaded successfully:', transformedImageUrl)"
-      />
+      >
       <button
-        @click="removeImage"
         type="button"
-        class="absolute top-2 right-2 p-1 bg-ember-500 text-white rounded-full hover:bg-ember-600 transition-colors"
+        class="absolute top-2 right-2 p-1 rounded-full transition-colors"
+        style="background: var(--ember); color: var(--parch-text)"
+        @click="removeImage"
       >
         <Icon name="heroicons:x-mark" class="w-4 h-4" />
       </button>
@@ -21,67 +23,84 @@
     <!-- Upload Area -->
     <div
       v-if="!modelValue?.url"
-      class="border-2 border-dashed border-guild-700 rounded-lg p-6 text-center hover:border-guild-600 transition-colors"
+      class="border-2 border-dashed p-6 text-center transition-colors"
+      :style="
+        isDragging
+          ? 'border-color: var(--candle); background: color-mix(in srgb, var(--candle) 15%, transparent)'
+          : 'border-color: var(--border)'
+      "
       @dragover.prevent="isDragging = true"
       @dragleave.prevent="isDragging = false"
       @drop.prevent="handleDrop"
-      :class="{ 'border-candlelight-400 bg-candlelight-900/20': isDragging }"
     >
       <input
         ref="fileInput"
         type="file"
         accept="image/*"
-        @change="handleFileSelect"
         class="hidden"
-      />
+        @change="handleFileSelect"
+      >
 
       <div class="space-y-3">
-        <Icon name="heroicons:photo" class="w-12 h-12 text-guild-400 mx-auto" />
+        <Icon
+          name="heroicons:photo"
+          class="w-12 h-12 mx-auto"
+          style="color: var(--text-dim)"
+        />
         <div>
-          <p class="text-guild-400">
+          <p style="color: var(--text-dim)">
             <button
               type="button"
+              class="font-medium"
+              style="color: var(--candle)"
               @click="$refs.fileInput.click()"
-              class="text-candlelight-400 hover:text-candlelight-300 font-medium"
             >
               Click to upload
             </button>
             or drag and drop
           </p>
-          <p class="text-sm text-guild-500">PNG, JPG, GIF up to 10MB</p>
+          <p class="text-sm" style="color: var(--text-faint)">
+            PNG, JPG, GIF up to 10MB
+          </p>
         </div>
       </div>
     </div>
 
     <!-- Alt Text Input -->
     <div v-if="modelValue?.url">
-      <label class="block text-sm font-medium text-guild-100 mb-1">
+      <label
+        class="block text-sm font-medium mb-1"
+        style="color: var(--text-bright)"
+      >
         Alt Text (for accessibility)
       </label>
       <input
         :value="modelValue.alt || ''"
-        @input="updateAltText($event.target.value)"
         placeholder="Describe this image..."
-        class="w-full bg-guild-800 border border-guild-700 rounded-lg px-3 py-2 text-guild-100 placeholder-guild-500 focus:ring-2 focus:ring-candlelight-500 focus:border-transparent"
-      />
+        class="w-full px-3 py-2 alt-text-input"
+        @input="updateAltText($event.target.value)"
+      >
     </div>
 
     <!-- Upload Progress -->
     <div v-if="isUploading" class="space-y-2">
       <div class="flex items-center justify-between text-sm">
-        <span class="text-guild-400">Uploading...</span>
-        <span class="text-guild-400">{{ uploadProgress }}%</span>
+        <span style="color: var(--text-dim)">Uploading...</span>
+        <span style="color: var(--text-dim)">{{ uploadProgress }}%</span>
       </div>
-      <div class="w-full bg-guild-800 rounded-full h-2">
+      <div
+        class="w-full rounded-full h-2"
+        style="background: var(--surface)"
+      >
         <div
-          class="bg-candlelight-600 h-2 rounded-full transition-all duration-300"
-          :style="`width: ${uploadProgress}%`"
+          class="h-2 rounded-full transition-all duration-300"
+          :style="`width: ${uploadProgress}%; background: var(--candle)`"
         />
       </div>
     </div>
 
     <!-- Error Message -->
-    <div v-if="errorMessage" class="text-sm text-ember-400">
+    <div v-if="errorMessage" class="text-sm" style="color: var(--ember)">
       {{ errorMessage }}
     </div>
   </div>
@@ -201,3 +220,16 @@ const updateAltText = (altText) => {
   });
 };
 </script>
+
+<style scoped>
+.alt-text-input {
+  background: var(--input-bg);
+  border: 1px solid var(--border);
+  color: var(--text);
+}
+
+.alt-text-input:focus {
+  outline: none;
+  border-color: var(--candle);
+}
+</style>

app/components/LoginModal.vue

@@ -40,7 +40,7 @@
                 type="email"
                 placeholder="your.email@example.com"
                 required
-              />
+              >
             </div>
 
             <div class="info-box">
@@ -182,7 +182,7 @@ onUnmounted(() => document.removeEventListener('keydown', handleKeydown))
 
 .modal-overline {
   font-family: 'Brygada 1918', serif;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 600;
   color: var(--candle);
   margin-bottom: 12px;
@@ -218,7 +218,7 @@ onUnmounted(() => document.removeEventListener('keydown', handleKeydown))
 .info-box {
   font-size: 11px;
   color: var(--text-faint);
-  padding: 10px 14px;
+  padding: 12px 16px;
   border: 1px dashed var(--border);
   margin-bottom: 16px;
   line-height: 1.6;

app/components/NaturalDateInput.vue

@@ -18,12 +18,14 @@
           <Icon
             v-if="isValidParse && naturalInput.trim()"
             name="heroicons:check-circle"
-            class="w-5 h-5 text-candlelight-500"
+            class="w-5 h-5"
+            style="color: var(--candle)"
           />
           <Icon
             v-else-if="hasError && naturalInput.trim()"
             name="heroicons:exclamation-circle"
-            class="w-5 h-5 text-ember-500"
+            class="w-5 h-5"
+            style="color: var(--ember)"
           />
         </template>
       </UInput>
@@ -31,7 +33,8 @@
 
     <div
       v-if="parsedDate && isValidParse"
-      class="text-sm text-candlelight-400 bg-candlelight-900/20 px-3 py-2 rounded-lg border border-candlelight-800"
+      class="text-sm px-3 py-2"
+      style="color: var(--candle); background: color-mix(in srgb, var(--candle) 15%, transparent); border: 1px solid var(--candle)"
     >
       <div class="flex items-center gap-2">
         <Icon name="heroicons:calendar" class="w-4 h-4" />
@@ -41,7 +44,8 @@
 
     <div
       v-if="hasError && naturalInput.trim()"
-      class="text-sm text-ember-400 bg-ember-900/20 px-3 py-2 rounded-lg border border-ember-800"
+      class="text-sm px-3 py-2"
+      style="color: var(--ember); background: color-mix(in srgb, var(--ember) 15%, transparent); border: 1px solid var(--ember)"
     >
       <div class="flex items-center gap-2">
         <Icon name="heroicons:exclamation-triangle" class="w-4 h-4" />
@@ -51,7 +55,7 @@
 
     <!-- Fallback datetime-local input -->
     <details class="text-sm">
-      <summary class="cursor-pointer text-guild-400 hover:text-guild-100">
+      <summary class="cursor-pointer" style="color: var(--text-dim)">
         Use traditional date picker
       </summary>
       <div class="mt-2">

app/components/OnboardingWidget.vue

@@ -26,6 +26,12 @@
         <div class="ow-progress">
           <span class="ow-bar"><span class="ow-bar-fill">{{ barFill }}</span><span class="ow-bar-empty">{{ barEmpty }}</span></span>
           {{ completedCount }} of 4 explored
+          <button
+            v-if="currentSuggestion.key"
+            type="button"
+            class="ow-skip"
+            @click="handleSkip"
+          >Skip this</button>
         </div>
       </template>
 
@@ -62,7 +68,12 @@
 </template>
 
 <script setup>
-const { goals, isComplete, currentSuggestion, trackGoal, loading } = useOnboarding()
+const { goals, isComplete, currentSuggestion, trackGoal, skipSuggestion, loading } = useOnboarding()
+
+const handleSkip = () => {
+  const key = currentSuggestion.value?.key
+  if (key) skipSuggestion(key)
+}
 
 const completedCount = computed(() => {
   const g = goals.value
@@ -107,7 +118,7 @@ const barEmpty = computed(() => '-'.repeat((4 - completedCount.value) * 2) + ']'
   display: inline-block;
   margin-top: 8px;
   padding: 4px 12px;
-  border: 1px dashed rgba(237, 228, 208, 0.25);
+  border: 1px dashed color-mix(in srgb, var(--parch-text) 25%, transparent);
   color: var(--parch-accent);
   font-size: 11px;
   text-decoration: none;
@@ -123,7 +134,7 @@ const barEmpty = computed(() => '-'.repeat((4 - completedCount.value) * 2) + ']'
 .ow-progress {
   margin-top: 10px;
   padding-top: 8px;
-  border-top: 1px dashed rgba(237, 228, 208, 0.12);
+  border-top: 1px dashed color-mix(in srgb, var(--parch-text) 12%, transparent);
   font-size: 11px;
   color: var(--parch-text-dim);
   display: flex;
@@ -142,6 +153,24 @@ const barEmpty = computed(() => '-'.repeat((4 - completedCount.value) * 2) + ']'
 }
 
 .ow-bar-empty {
-  color: rgba(237, 228, 208, 0.2);
+  color: color-mix(in srgb, var(--parch-text) 20%, transparent);
+}
+
+.ow-skip {
+  margin-left: auto;
+  background: none;
+  border: none;
+  color: var(--parch-text-dim);
+  font-family: inherit;
+  font-size: 11px;
+  cursor: pointer;
+  padding: 0;
+  text-decoration: underline;
+  text-decoration-style: dashed;
+  text-underline-offset: 2px;
+}
+
+.ow-skip:hover {
+  color: var(--parch-accent);
 }
 </style>

app/components/PrivacyToggle.vue

@@ -1,66 +0,0 @@
-<template>
-  <div class="priv segmented">
-    <span
-      v-for="opt in options"
-      :key="opt.value"
-      :class="{ on: modelValue === opt.value }"
-      @click="$emit('update:modelValue', opt.value)"
-      >{{ opt.label }}</span
-    >
-  </div>
-</template>
-
-<script setup>
-defineProps({
-  modelValue: { type: String, default: "public" },
-});
-
-defineEmits(["update:modelValue"]);
-
-const options = [
-  { label: "Public", value: "public" },
-  { label: "Members", value: "members" },
-  { label: "Private", value: "private" },
-];
-</script>
-
-<style scoped>
-.priv {
-  display: inline-flex;
-  gap: 0;
-  font-size: 9px;
-  font-family: "Commit Mono", monospace;
-  letter-spacing: 0.02em;
-}
-
-.priv span {
-  padding: 2px 7px;
-  height: 18px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px dashed var(--border);
-  color: var(--text-faint);
-  cursor: pointer;
-  transition: all 0.12s;
-  user-select: none;
-  white-space: nowrap;
-  position: relative;
-}
-
-.priv span + span {
-  margin-left: -1px;
-}
-
-.priv span:hover {
-  color: var(--text-dim);
-}
-
-.priv span.on {
-  background: var(--surface);
-  color: var(--text-bright);
-  border-color: var(--candle);
-  border-style: solid;
-  z-index: 1;
-}
-</style>

app/components/SeriesPassPurchase.vue

@@ -4,19 +4,16 @@
     <div v-if="loading" class="text-center py-8">
       <div
         class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"
-      ></div>
+      />
       <p class="text-[--ui-text-muted]">Loading series pass information...</p>
     </div>
 
     <!-- Error State -->
-    <div
-      v-else-if="error"
-      class="p-6 bg-ember-900/20 rounded-xl border border-ember-800"
-    >
-      <h3 class="text-lg font-semibold text-ember-300 mb-2">
+    <div v-else-if="error" class="error-state p-6">
+      <h3 class="error-state__heading text-lg font-semibold mb-2">
         Unable to Load Series Pass
       </h3>
-      <p class="text-ember-400">{{ error }}</p>
+      <p class="error-state__body">{{ error }}</p>
     </div>
 
     <!-- Content -->
@@ -48,7 +45,7 @@
       <!-- Registration Form -->
       <div
         v-if="passInfo.available && !passInfo.alreadyRegistered"
-        class="bg-guild-800/50 dark:bg-guild-700/30 rounded-xl border border-guild-600 dark:border-guild-600 p-6"
+        class="registration-form p-6"
       >
         <h3 class="text-xl font-bold text-[--ui-text] mb-6">
           {{
@@ -58,7 +55,7 @@
           }}
         </h3>
 
-        <form @submit.prevent="handleSubmit" class="space-y-6">
+        <form class="space-y-6" @submit.prevent="handleSubmit">
           <!-- Name Field -->
           <div>
             <label
@@ -103,18 +100,20 @@
           <!-- Member Benefits Notice -->
           <div
             v-if="passInfo.ticket.isFree && passInfo.memberInfo?.isMember"
-            class="p-4 bg-candlelight-900/20 border border-candlelight-700/30 rounded-lg"
+            class="p-4"
+            style="background: color-mix(in srgb, var(--candle) 15%, transparent); border: 1px solid var(--candle)"
           >
             <div class="flex items-start gap-3">
               <Icon
                 name="heroicons:sparkles"
-                class="w-5 h-5 text-candlelight-400 flex-shrink-0 mt-0.5"
+                class="w-5 h-5 flex-shrink-0 mt-0.5"
+                style="color: var(--candle)"
               />
               <div>
-                <div class="font-semibold text-candlelight-300 mb-1">
+                <div class="font-semibold mb-1" style="color: var(--candle)">
                   Member Benefit
                 </div>
-                <div class="text-sm text-candlelight-400">
+                <div class="text-sm" style="color: var(--candle)">
                   This series pass is free for Ghost Guild members!
                 </div>
               </div>
@@ -144,6 +143,7 @@
           <p class="text-xs text-[--ui-text-muted] text-center">
             By registering, you'll be automatically registered for all
             {{ seriesInfo.totalEvents }} events in this series.
+            <span v-if="!isLoggedIn"> We'll create a free guest account so you can access your pass.</span>
           </p>
         </form>
       </div>
@@ -182,7 +182,7 @@ const props = defineProps({
 const emit = defineEmits(["purchase-success", "purchase-error"]);
 
 const toast = useToast();
-const { initializeTicketPayment, verifyPayment } = useHelcimPay();
+const { initializeSeriesTicketPayment, verifyPayment } = useHelcimPay();
 
 // State
 const loading = ref(true);
@@ -264,10 +264,9 @@ const handleSubmit = async () => {
       paymentProcessing.value = true;
 
       // Initialize Helcim payment for series pass
-      await initializeTicketPayment(
+      await initializeSeriesTicketPayment(
         props.seriesId,
         form.value.email,
-        passInfo.value.ticket.price,
         props.seriesInfo.title,
       );
 
@@ -286,6 +285,7 @@ const handleSubmit = async () => {
     const purchaseBody = {
       name: form.value.name,
       email: form.value.email,
+      ticketType: passInfo.value.ticket.type,
     };
     if (transactionId) purchaseBody.paymentId = transactionId;
 
@@ -297,12 +297,17 @@ const handleSubmit = async () => {
       }
     );
 
+    // Refresh client auth state if server signed us in (guest upgrade)
+    if (purchaseResponse?.signedIn) {
+      await useAuth().checkMemberStatus();
+    }
+
     // Show success message
     toast.add({
       title: "Series Pass Purchased!",
       description: `You're now registered for all ${purchaseResponse.registration.eventsRegistered} events in this series.`,
       color: "green",
-      timeout: 5000,
+      duration: 5000,
     });
 
     // Emit success event
@@ -322,7 +327,7 @@ const handleSubmit = async () => {
       title: "Purchase Failed",
       description: errorMessage,
       color: "red",
-      timeout: 5000,
+      duration: 5000,
     });
 
     emit("purchase-error", errorMessage);
@@ -349,3 +354,18 @@ const formatPrice = (price, currency = "CAD") => {
   }).format(price);
 };
 </script>
+
+<style scoped>
+.error-state {
+  background: color-mix(in srgb, var(--ember) 8%, transparent);
+  border: 1px dashed var(--ember);
+}
+.error-state__heading,
+.error-state__body {
+  color: var(--ember);
+}
+.registration-form {
+  background: var(--surface);
+  border: 1px dashed var(--border);
+}
+</style>

app/components/SignupFlowOverlay.vue

@@ -0,0 +1,186 @@
+<template>
+  <Teleport to="body">
+    <div v-if="state !== 'idle'" class="signup-flow-overlay">
+      <div class="signup-flow-card">
+        <div class="signup-flow-step">{{ stepLabel }}</div>
+
+        <template v-if="isProgress">
+          <h2 class="signup-flow-heading">{{ progressHeading }}</h2>
+          <p class="signup-flow-body">
+            Please don't close this window. This usually takes a few seconds.
+          </p>
+        </template>
+
+        <template v-if="state === 'success'">
+          <h2 class="signup-flow-heading">Welcome to Ghost Guild!</h2>
+          <DashedBox :hoverable="false">
+            <div class="section-label" style="margin-bottom: 12px">
+              Membership Details
+            </div>
+            <dl class="details-list">
+              <div class="details-row">
+                <dt>Name</dt><dd>{{ summary?.name }}</dd>
+              </div>
+              <div class="details-row">
+                <dt>Email</dt><dd>{{ summary?.email }}</dd>
+              </div>
+              <div class="details-row">
+                <dt>Circle</dt><dd class="capitalize">{{ summary?.circle }}</dd>
+              </div>
+              <div class="details-row">
+                <dt>Contribution</dt><dd>{{ summary?.contribution }}</dd>
+              </div>
+            </dl>
+          </DashedBox>
+          <p class="signup-flow-body" style="margin-top: 16px">
+            Check {{ summary?.email }} for a sign-in link to finish setting up
+            your account. The link expires in 15 minutes.
+          </p>
+        </template>
+
+        <template v-if="state === 'error'">
+          <h2 class="signup-flow-heading">We couldn't complete your signup</h2>
+          <div v-if="errorMessage" class="error-box">
+            {{ errorMessage }}
+          </div>
+          <div class="button-row" style="margin-top: 20px">
+            <button class="btn" @click="$emit('close')">
+              Back to form
+            </button>
+          </div>
+        </template>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  state: { type: String, required: true },
+  summary: { type: Object, default: null },
+  errorMessage: { type: String, default: "" },
+  dashboardHref: { type: String, default: "/welcome" },
+});
+
+defineEmits(["close"]);
+
+const PROGRESS_STATES = [
+  "creating-customer",
+  "opening-payment",
+  "processing-payment",
+  "creating-subscription",
+];
+
+const isProgress = computed(() => PROGRESS_STATES.includes(props.state));
+
+const progressHeading = computed(() => {
+  switch (props.state) {
+    case "creating-customer": return "Creating your account...";
+    case "opening-payment": return "Opening secure payment...";
+    case "processing-payment": return "Confirming your card...";
+    case "creating-subscription": return "Activating your membership...";
+    default: return "";
+  }
+});
+
+const stepLabel = computed(() => {
+  switch (props.state) {
+    case "creating-customer":
+    case "opening-payment":
+      return "Step 2 of 3 — Payment";
+    case "processing-payment":
+    case "creating-subscription":
+      return "Step 2 of 3 — Finalizing";
+    case "success":
+      return "Step 3 of 3 — Welcome";
+    case "error":
+      return "Something went wrong";
+    default:
+      return "";
+  }
+});
+</script>
+
+<style scoped>
+.signup-flow-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background: color-mix(in srgb, var(--parch) 72%, transparent);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+
+.signup-flow-card {
+  background: var(--bg);
+  border: 1px dashed var(--border);
+  padding: 32px;
+  max-width: 520px;
+  width: 100%;
+  max-height: calc(100vh - 48px);
+  overflow-y: auto;
+}
+
+.signup-flow-step {
+  font-family: var(--font-body);
+  font-size: 0.75rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-dim);
+  margin-bottom: 12px;
+}
+
+.signup-flow-heading {
+  font-family: var(--font-display);
+  font-size: 1.5rem;
+  color: var(--text-bright);
+  margin: 0 0 16px;
+}
+
+.signup-flow-body {
+  font-family: var(--font-body);
+  color: var(--text);
+  line-height: 1.5;
+  margin: 0;
+}
+
+.details-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.details-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  font-size: 13px;
+}
+
+.details-row dt {
+  color: var(--text-faint);
+}
+
+.details-row dd {
+  color: var(--text-bright);
+  font-weight: 500;
+}
+
+.error-box {
+  border: 1px dashed var(--ember);
+  color: var(--ember);
+  padding: 12px 16px;
+  font-size: 12px;
+}
+
+.button-row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+</style>

app/components/TierPicker.vue

@@ -1,102 +0,0 @@
-<template>
-  <div class="tier-picker">
-    <div
-      v-for="tier in tiers"
-      :key="tier.amount"
-      class="tier-option"
-      :class="{ current: modelValue === tier.amount }"
-      @click="$emit('update:modelValue', tier.amount)"
-    >
-      <span class="tier-amount">{{ tier.display }}</span>
-      <span class="tier-label">{{ tier.label }}</span>
-    </div>
-  </div>
-</template>
-
-<script setup>
-defineProps({
-  modelValue: { type: Number, default: 0 },
-  tiers: {
-    type: Array,
-    default: () => [
-      { amount: 0, display: "$0", label: "Free" },
-      { amount: 5, display: "$5", label: "/month" },
-      { amount: 15, display: "$15", label: "/month" },
-      { amount: 30, display: "$30", label: "/month" },
-      { amount: 50, display: "$50", label: "/month" },
-    ],
-  },
-});
-
-defineEmits(["update:modelValue"]);
-</script>
-
-<style scoped>
-.tier-picker {
-  display: flex;
-  gap: 0;
-  margin-bottom: 12px;
-}
-
-.tier-option {
-  flex: 1;
-  padding: 10px 8px;
-  text-align: center;
-  border: 1px dashed var(--border);
-  background: var(--bg);
-  cursor: pointer;
-  transition: all 0.15s;
-  position: relative;
-}
-
-/* Overlap adjacent borders so dashed lines collapse into one */
-.tier-option + .tier-option {
-  margin-left: -1px;
-}
-
-.tier-option:hover {
-  background: var(--surface-hover);
-}
-
-/* Active item paints its solid border on top of any neighbor */
-.tier-option.current {
-  border-color: var(--candle);
-  border-style: solid;
-  background: var(--surface);
-  z-index: 1;
-}
-
-.tier-amount {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--text);
-  font-family: "Brygada 1918", serif;
-  display: block;
-}
-
-.tier-option.current .tier-amount {
-  color: var(--candle);
-}
-
-.tier-label {
-  font-size: 9px;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--text-faint);
-  display: block;
-  margin-top: 2px;
-}
-
-.tier-option.current .tier-label {
-  color: var(--candle-dim);
-}
-
-@media (max-width: 768px) {
-  .tier-picker {
-    flex-wrap: wrap;
-  }
-  .tier-option {
-    min-width: 60px;
-  }
-}
-</style>

app/components/TopStrip.vue

@@ -17,7 +17,7 @@
         </span>
       </slot>
     </span>
-    <span>
+    <span class="right">
       <slot name="right">
         <ClientOnly>
           <template v-if="memberData">
@@ -27,7 +27,7 @@
                 :src="`/ghosties/Ghost-${capitalize(memberData.avatar)}.png`"
                 :alt="memberData.name"
                 class="member-avatar"
-              />
+              >
               <svg
                 v-else
                 class="member-avatar default-ghost"
@@ -56,6 +56,10 @@
               </svg>
               {{ memberData.name }}
             </NuxtLink>
+            <span class="sep" aria-hidden="true">/</span>
+            <a href="#" class="sign-out" @click.prevent="handleLogout"
+              >sign out</a
+            >
           </template>
           <template v-else> The Baby Ghosts member program </template>
           <template #fallback> The Baby Ghosts member program </template>
@@ -70,7 +74,12 @@ const props = defineProps({
   pagePath: { type: String, default: "" },
 });
 
-const { memberData } = useAuth();
+const { memberData, logout } = useAuth();
+
+const handleLogout = async () => {
+  await logout();
+  navigateTo("/");
+};
 
 const capitalize = (str) => {
   if (!str) return "";
@@ -112,6 +121,9 @@ const breadcrumbs = computed(() => {
   gap: 6px;
   text-decoration: none;
 }
+.member-link:hover {
+  text-decoration: underline;
+}
 .member-avatar {
   width: 18px;
   height: 18px;
@@ -120,6 +132,23 @@ const breadcrumbs = computed(() => {
 .default-ghost {
   color: var(--border);
 }
+.right {
+  display: inline-flex;
+  align-items: center;
+}
+.sep {
+  color: var(--text-faint);
+  margin: 0 8px;
+}
+.top-strip a.sign-out {
+  font-size: 12px;
+  color: var(--ember);
+  text-decoration: none;
+}
+.top-strip a.sign-out:hover {
+  color: var(--ember);
+  text-decoration: underline;
+}
 
 .breadcrumb-nav {
   display: inline;

app/composables/useBoardChannels.js

@@ -1,7 +1,3 @@
-/**
- * Board Channels Composable
- * Shared state + helpers for mapping board tags to Slack channels.
- */
 export function useBoardChannels() {
   const channels = useState('board.channels', () => [])
 
@@ -11,15 +7,6 @@ export function useBoardChannels() {
     return channels.value
   }
 
-  function resolveTagChannel(tagSlugs = []) {
-    if (!tagSlugs?.length) return null
-    return (
-      channels.value.find((channel) =>
-        (channel.tagSlugs || []).some((slug) => tagSlugs.includes(slug))
-      ) || null
-    )
-  }
-
   function slackUrl(channelId) {
     return `https://gammaspace.slack.com/archives/${channelId}`
   }
@@ -27,7 +14,6 @@ export function useBoardChannels() {
   return {
     channels: readonly(channels),
     fetchChannels,
-    resolveTagChannel,
     slackUrl,
   }
 }

app/composables/useBoardPosts.js

@@ -1,7 +1,3 @@
-/**
- * Board Posts Composable
- * Shared state + CRUD for board posts.
- */
 export function useBoardPosts() {
   const posts = useState('board.posts', () => [])
   const loading = useState('board.loading', () => false)
@@ -17,29 +13,29 @@ export function useBoardPosts() {
     }
   }
 
-  async function createPost(body, refreshParams = {}) {
+  async function createPost(body) {
     const created = await $fetch('/api/board/posts', {
       method: 'POST',
       body,
     })
-    await fetchPosts(refreshParams)
+    await fetchPosts()
     return created
   }
 
-  async function updatePost(id, body, refreshParams = {}) {
+  async function updatePost(id, body) {
     const updated = await $fetch(`/api/board/posts/${id}`, {
       method: 'PATCH',
       body,
     })
-    await fetchPosts(refreshParams)
+    await fetchPosts()
     return updated
   }
 
-  async function deletePost(id, refreshParams = {}) {
+  async function deletePost(id) {
     const result = await $fetch(`/api/board/posts/${id}`, {
       method: 'DELETE',
     })
-    await fetchPosts(refreshParams)
+    await fetchPosts()
     return result
   }
 

app/composables/useHelcim.js

@@ -1,90 +0,0 @@
-// Helcim API integration composable
-export const useHelcim = () => {
-  const config = useRuntimeConfig()
-  const helcimToken = config.public.helcimToken
-
-  // Base URL for Helcim API
-  const HELCIM_API_BASE = 'https://api.helcim.com/v2'
-
-  // Helper function to make API requests
-  const makeHelcimRequest = async (endpoint, method = 'GET', body = null) => {
-    try {
-      const response = await $fetch(`${HELCIM_API_BASE}${endpoint}`, {
-        method,
-        headers: {
-          'accept': 'application/json',
-          'content-type': 'application/json',
-          'api-token': helcimToken
-        },
-        body: body ? JSON.stringify(body) : undefined
-      })
-      return response
-    } catch (error) {
-      console.error('Helcim API error:', error)
-      throw error
-    }
-  }
-
-  // Create a customer
-  const createCustomer = async (customerData) => {
-    return await makeHelcimRequest('/customers', 'POST', {
-      customerType: 'PERSON',
-      contactName: customerData.name,
-      email: customerData.email,
-      billingAddress: customerData.billingAddress || {}
-    })
-  }
-
-  // Create a subscription
-  const createSubscription = async (customerId, planId, cardToken) => {
-    return await makeHelcimRequest('/recurring/subscriptions', 'POST', {
-      customerId,
-      planId,
-      cardToken,
-      startDate: new Date().toISOString().split('T')[0] // Today's date
-    })
-  }
-
-  // Get customer details
-  const getCustomer = async (customerId) => {
-    return await makeHelcimRequest(`/customers/${customerId}`)
-  }
-
-  // Get subscription details
-  const getSubscription = async (subscriptionId) => {
-    return await makeHelcimRequest(`/recurring/subscriptions/${subscriptionId}`)
-  }
-
-  // Update subscription
-  const updateSubscription = async (subscriptionId, updates) => {
-    return await makeHelcimRequest(`/recurring/subscriptions/${subscriptionId}`, 'PATCH', updates)
-  }
-
-  // Cancel subscription
-  const cancelSubscription = async (subscriptionId) => {
-    return await makeHelcimRequest(`/recurring/subscriptions/${subscriptionId}`, 'DELETE')
-  }
-
-  // Get payment plans
-  const getPaymentPlans = async () => {
-    return await makeHelcimRequest('/recurring/plans')
-  }
-
-  // Verify card token (for testing)
-  const verifyCardToken = async (cardToken) => {
-    return await makeHelcimRequest('/cards/verify', 'POST', {
-      cardToken
-    })
-  }
-
-  return {
-    createCustomer,
-    createSubscription,
-    getCustomer,
-    getSubscription,
-    updateSubscription,
-    cancelSubscription,
-    getPaymentPlans,
-    verifyCardToken
-  }
-}

app/composables/useHelcimPay.js

@@ -3,7 +3,7 @@ export const useHelcimPay = () => {
   let checkoutToken = null;
   let secretToken = null;
 
-  // Initialize HelcimPay.js session
+  // Initialize HelcimPay.js session (membership signup flow)
   const initializeHelcimPay = async (customerId, customerCode, amount = 0) => {
     try {
       const response = await $fetch("/api/helcim/initialize-payment", {
@@ -12,6 +12,7 @@ export const useHelcimPay = () => {
           customerId,
           customerCode,
           amount,
+          metadata: { type: "membership_signup" },
         },
       });
 
@@ -28,26 +29,14 @@ export const useHelcimPay = () => {
     }
   };
 
-  // Initialize payment for event ticket purchase
-  const initializeTicketPayment = async (
-    eventId,
-    email,
-    amount,
-    eventTitle = null,
-  ) => {
+  const _initializeTicket = async (metadata, errorPrefix) => {
     try {
       const response = await $fetch("/api/helcim/initialize-payment", {
         method: "POST",
         body: {
           customerId: null,
-          customerCode: email, // Use email as customer code for event tickets
-          amount,
-          metadata: {
-            type: "event_ticket",
-            eventId,
-            email,
-            eventTitle,
-          },
+          customerCode: metadata.email,
+          metadata,
         },
       });
 
@@ -57,16 +46,29 @@ export const useHelcimPay = () => {
         return {
           success: true,
           checkoutToken: response.checkoutToken,
+          amount: response.amount,
         };
       }
 
-      throw new Error("Failed to initialize ticket payment session");
+      throw new Error(`Failed to initialize ${errorPrefix} session`);
     } catch (error) {
-      console.error("Ticket payment initialization error:", error);
+      console.error(`${errorPrefix} initialization error:`, error);
       throw error;
     }
   };
 
+  const initializeTicketPayment = (eventId, email, eventTitle = null) =>
+    _initializeTicket(
+      { type: "event_ticket", eventId, email, eventTitle },
+      "ticket payment",
+    );
+
+  const initializeSeriesTicketPayment = (seriesId, email, seriesTitle = null) =>
+    _initializeTicket(
+      { type: "series_ticket", seriesId, email, eventTitle: seriesTitle },
+      "series payment",
+    );
+
   // Show payment modal
   const showPaymentModal = () => {
     return new Promise((resolve, reject) => {
@@ -139,6 +141,7 @@ export const useHelcimPay = () => {
       if (typeof window.appendHelcimPayIframe === "function") {
         // Set up event listener for HelcimPay.js responses
         const helcimPayJsIdentifierKey = "helcim-pay-js-" + checkoutToken;
+        let observerTimer, paymentTimer;
 
         const handleHelcimPayEvent = (event) => {
           console.log("Received window message:", event.data);
@@ -148,6 +151,8 @@ export const useHelcimPay = () => {
 
             // Remove event listener to prevent multiple responses
             window.removeEventListener("message", handleHelcimPayEvent);
+            clearTimeout(observerTimer);
+            clearTimeout(paymentTimer);
 
             // Close the Helcim modal
             if (typeof window.removeHelcimPayIframe === "function") {
@@ -237,10 +242,10 @@ export const useHelcimPay = () => {
         );
 
         // Clean up observer after a timeout
-        setTimeout(() => observer.disconnect(), 5000);
+        observerTimer = setTimeout(() => observer.disconnect(), 5000);
 
         // Add timeout to clean up if no response (10 minutes for manual card entry)
-        setTimeout(() => {
+        paymentTimer = setTimeout(() => {
           console.log("Payment timeout reached, cleaning up event listener...");
           window.removeEventListener("message", handleHelcimPayEvent);
           reject(new Error("Payment timeout - no response received"));
@@ -272,6 +277,7 @@ export const useHelcimPay = () => {
   return {
     initializeHelcimPay,
     initializeTicketPayment,
+    initializeSeriesTicketPayment,
     verifyPayment,
     cleanup,
   };

app/composables/useMemberPayment.js

@@ -25,45 +25,81 @@ export const useMemberPayment = () => {
     paymentSuccess.value = false
 
     try {
-      // Step 1: Get or create Helcim customer
-      await getOrCreateCustomer()
-
-      // Step 2: Initialize Helcim payment with $0 for card verification
-      await initializeHelcimPay(
-        customerId.value,
-        customerCode.value,
-        0,
+      // Fast-path: when both Helcim ids are already cached on the member doc
+      // AND a card's on file, we can skip the paid getOrCreateCustomer round
+      // trip entirely and go straight to subscription creation.
+      const hasCachedHelcimIds = Boolean(
+        memberData.value?.helcimCustomerId && memberData.value?.helcimCustomerCode
       )
 
-      // Step 3: Show payment modal and get payment result
-      const paymentResult = await verifyPayment()
-      console.log('Payment result:', paymentResult)
+      let existing = null
+      let probedExistingCard = false
+      let cardToken = null
 
-      if (!paymentResult.success) {
-        throw new Error('Payment verification failed')
+      if (hasCachedHelcimIds) {
+        existing = await $fetch('/api/helcim/existing-card').catch((err) => {
+          console.warn('[payment] existing-card lookup failed, falling back to verify flow:', err)
+          return null
+        })
+        probedExistingCard = true
+        if (existing?.cardToken) {
+          customerId.value = memberData.value.helcimCustomerId
+          customerCode.value = memberData.value.helcimCustomerCode
+          cardToken = existing.cardToken
+        }
       }
 
-      // Step 4: Verify payment on backend
-      const verifyResult = await $fetch('/api/helcim/verify-payment', {
-        method: 'POST',
-        body: {
-          cardToken: paymentResult.cardToken,
-          customerId: customerId.value,
-        },
-      })
+      if (!cardToken) {
+        // Skip HelcimPay verify if a card's already on file — Helcim refuses
+        // to re-save it, breaking retries after a partial-failed signup.
+        const [, existingFromFull] = await Promise.all([
+          getOrCreateCustomer(),
+          probedExistingCard
+            ? Promise.resolve(existing)
+            : $fetch('/api/helcim/existing-card').catch((err) => {
+                console.warn('[payment] existing-card lookup failed, falling back to verify flow:', err)
+                return null
+              }),
+        ])
 
-      if (!verifyResult.success) {
-        throw new Error('Payment verification failed on backend')
+        cardToken = existingFromFull?.cardToken || null
+      }
+
+      if (!cardToken) {
+        await initializeHelcimPay(
+          customerId.value,
+          customerCode.value,
+          0,
+        )
+
+        const paymentResult = await verifyPayment()
+
+        if (!paymentResult.success) {
+          throw new Error('Payment verification failed')
+        }
+
+        const verifyResult = await $fetch('/api/helcim/verify-payment', {
+          method: 'POST',
+          body: {
+            cardToken: paymentResult.cardToken,
+            customerId: customerId.value,
+          },
+        })
+
+        if (!verifyResult.success) {
+          throw new Error('Payment verification failed on backend')
+        }
+
+        cardToken = paymentResult.cardToken
       }
 
-      // Step 5: Create subscription with proper contribution tier
       const subscriptionResponse = await $fetch('/api/helcim/subscription', {
         method: 'POST',
         body: {
           customerId: customerId.value,
           customerCode: customerCode.value,
-          contributionTier: memberData.value?.contributionTier || '5',
-          cardToken: paymentResult.cardToken,
+          contributionAmount: memberData.value?.contributionAmount ?? 5,
+          cardToken,
         },
       })
 
@@ -71,7 +107,6 @@ export const useMemberPayment = () => {
         throw new Error('Subscription creation failed')
       }
 
-      // Step 6: Payment successful - refresh member data
       paymentSuccess.value = true
       await checkMemberStatus()
 

app/composables/useMemberStatus.js

@@ -12,16 +12,16 @@ export const MEMBER_STATUSES = {
 
 export const MEMBER_STATUS_CONFIG = {
   pending_payment: {
-    label: "Payment Pending",
+    label: "Setting up payment",
     color: "orange",
     bgColor: "bg-orange-500/10",
     borderColor: "border-orange-500/30",
     textColor: "text-orange-300",
     icon: "heroicons:exclamation-triangle",
     severity: "warning",
-    canRSVP: false,
+    canRSVP: true,
     canAccessMembers: true,
-    canPeerSupport: false,
+    canPeerSupport: true,
   },
   active: {
     label: "Active Member",
@@ -126,24 +126,21 @@ export const useMemberStatus = () => {
   // Get banner message based on status
   const getBannerMessage = () => {
     if (isPendingPayment.value) {
-      return "Your membership is pending payment. Please complete your payment to unlock full features.";
+      return "Your payment setup isn't finished yet. Your membership and access aren't affected — finish whenever you're ready, or reach out if there's a snag.";
     }
     if (isSuspended.value) {
-      return "Your membership has been suspended. Please contact support to reactivate your account.";
+      return "Your account is paused while we work through a community issue. We'll be in touch.";
     }
     if (isCancelled.value) {
-      return "Your membership has been cancelled. Would you like to reactivate?";
+      return "Your account is closed. Reach out if you'd like to come back.";
     }
     return null;
   };
 
   // Get RSVP restriction message
   const getRSVPMessage = () => {
-    if (isPendingPayment.value) {
-      return "Complete your payment to register for events";
-    }
     if (isSuspended.value || isCancelled.value) {
-      return "Your membership status prevents RSVP. Please reactivate your account.";
+      return "Your account isn't active right now. Reach out if you have questions.";
     }
     return null;
   };

app/composables/useOnboarding.js

@@ -10,6 +10,13 @@ export function useOnboarding(options = {}) {
     hasClickedWiki: false,
   }))
 
+  const skipped = useState('onboarding.skipped', () => ({
+    profileTags: false,
+    visitEvent: false,
+    board: false,
+    wiki: false,
+  }))
+
   const completedAt = useState('onboarding.completedAt', () => null)
   const loading = useState('onboarding.loading', () => false)
   const recommendations = useState('onboarding.recommendations', () => ({
@@ -20,12 +27,21 @@ export function useOnboarding(options = {}) {
   // Track whether we've already fetched status this session
   const _fetched = useState('onboarding._fetched', () => false)
 
+  // For the purpose of advancing the suggestion widget, a skipped goal is
+  // treated as "done" — the underlying goal/graduation check is unchanged.
+  const effectiveGoals = computed(() => ({
+    hasProfileTags: goals.value.hasProfileTags || skipped.value.profileTags,
+    hasVisitedEvent: goals.value.hasVisitedEvent || skipped.value.visitEvent,
+    hasEngagedBoard: goals.value.hasEngagedBoard || skipped.value.board,
+    hasClickedWiki: goals.value.hasClickedWiki || skipped.value.wiki,
+  }))
+
   const isComplete = computed(() =>
     !!completedAt.value ||
-    (goals.value.hasProfileTags &&
-    goals.value.hasVisitedEvent &&
-    goals.value.hasEngagedBoard &&
-    goals.value.hasClickedWiki)
+    (effectiveGoals.value.hasProfileTags &&
+    effectiveGoals.value.hasVisitedEvent &&
+    effectiveGoals.value.hasEngagedBoard &&
+    effectiveGoals.value.hasClickedWiki)
   )
 
   const pickCategory = options.pickCategory || ((categories) => {
@@ -33,9 +49,9 @@ export function useOnboarding(options = {}) {
   })
 
   const currentSuggestion = computed(() => {
-    // Not graduated — return highest-priority incomplete goal
+    // Not graduated — return highest-priority incomplete, non-skipped goal
     if (!isComplete.value) {
-      if (!goals.value.hasProfileTags) {
+      if (!effectiveGoals.value.hasProfileTags) {
         return {
           key: 'profileTags',
           text: 'Complete your profile by adding your craft and community tags',
@@ -43,7 +59,7 @@ export function useOnboarding(options = {}) {
           actionText: 'Set up tags',
         }
       }
-      if (!goals.value.hasVisitedEvent) {
+      if (!effectiveGoals.value.hasVisitedEvent) {
         return {
           key: 'visitEvent',
           text: 'Check out upcoming events',
@@ -51,7 +67,7 @@ export function useOnboarding(options = {}) {
           actionText: 'Browse events',
         }
       }
-      if (!goals.value.hasEngagedBoard) {
+      if (!effectiveGoals.value.hasEngagedBoard) {
         return {
           key: 'board',
           text: 'Explore the board to find collaborators',
@@ -59,7 +75,7 @@ export function useOnboarding(options = {}) {
           actionText: 'Explore board',
         }
       }
-      if (!goals.value.hasClickedWiki) {
+      if (!effectiveGoals.value.hasClickedWiki) {
         return {
           key: 'wiki',
           text: 'Browse the wiki for resources and guides',
@@ -118,6 +134,9 @@ export function useOnboarding(options = {}) {
       if (data?.goals) {
         goals.value = { ...goals.value, ...data.goals }
       }
+      if (data?.skipped) {
+        skipped.value = { ...skipped.value, ...data.skipped }
+      }
       if (data?.completedAt) {
         completedAt.value = data.completedAt
       }
@@ -157,6 +176,21 @@ export function useOnboarding(options = {}) {
     }
   }
 
+  async function skipSuggestion(key) {
+    // Optimistically advance locally; server call is fire-and-forget.
+    if (skipped.value[key] !== undefined) {
+      skipped.value = { ...skipped.value, [key]: true }
+    }
+    try {
+      await $fetch('/api/onboarding/track', {
+        method: 'POST',
+        body: { skip: key },
+      })
+    } catch {
+      // Non-fatal — will re-fetch on next session
+    }
+  }
+
   // Initialize on first use
   fetchStatus()
 
@@ -166,6 +200,8 @@ export function useOnboarding(options = {}) {
     completedAt: readonly(completedAt),
     currentSuggestion,
     trackGoal,
+    skipSuggestion,
+    skipped: readonly(skipped),
     recommendations: readonly(recommendations),
     loading: readonly(loading),
   }

app/config/contributions.js

@@ -1,82 +1,22 @@
-// Central configuration for Ghost Guild Contribution Levels and Helcim Plans
-export const CONTRIBUTION_TIERS = {
-  FREE: {
-    value: "0",
-    amount: 0,
-    label: "$0 - I need support right now",
-    tier: "free",
-    helcimPlanId: null, // No Helcim plan needed for free tier
-  },
-  SUPPORTER: {
-    value: "5",
-    amount: 5,
-    label: "$5 - I can contribute",
-    tier: "supporter",
-    helcimPlanId: "supporter-monthly-5",
-  },
-  MEMBER: {
-    value: "15",
-    amount: 15,
-    label: "$15 - I can sustain the community",
-    tier: "member",
-    helcimPlanId: "member-monthly-15",
-  },
-  ADVOCATE: {
-    value: "30",
-    amount: 30,
-    label: "$30 - I can support others too",
-    tier: "advocate",
-    helcimPlanId: "advocate-monthly-30",
-  },
-  CHAMPION: {
-    value: "50",
-    amount: 50,
-    label: "$50 - I want to sponsor multiple members",
-    tier: "champion",
-    helcimPlanId: "champion-monthly-50",
-  },
-};
+// Guidance presets for the contribution amount input.
+// These are NOT tiers — just suggested amounts with matching guidance copy.
+export const CONTRIBUTION_PRESETS = [
+  { amount: 0,  label: "I need support right now" },
+  { amount: 5,  label: "I can contribute" },
+  { amount: 15, label: "I can sustain the community" },
+  { amount: 30, label: "I can support others too" },
+  { amount: 50, label: "I want to sponsor multiple members" },
+]
 
-// Get all contribution options as an array (useful for forms)
-export const getContributionOptions = () => {
-  return Object.values(CONTRIBUTION_TIERS);
-};
+export const requiresPayment = (amount) => amount > 0
 
-// Get valid contribution values for validation
-export const getValidContributionValues = () => {
-  return Object.values(CONTRIBUTION_TIERS).map((tier) => tier.value);
-};
+export const isValidContributionAmount = (amount) =>
+  Number.isInteger(amount) && amount >= 0
 
-// Get contribution tier by value
-export const getContributionTierByValue = (value) => {
-  return Object.values(CONTRIBUTION_TIERS).find((tier) => tier.value === value);
-};
-
-// Get Helcim plan ID for a contribution tier
-export const getHelcimPlanId = (contributionValue) => {
-  const tier = getContributionTierByValue(contributionValue);
-  return tier?.helcimPlanId || null;
-};
-
-// Check if a contribution tier requires payment
-export const requiresPayment = (contributionValue) => {
-  const tier = getContributionTierByValue(contributionValue);
-  return tier?.amount > 0;
-};
-
-// Check if a contribution value is valid
-export const isValidContributionValue = (value) => {
-  return getValidContributionValues().includes(value);
-};
-
-// Get contribution tier by Helcim plan ID
-export const getContributionTierByHelcimPlan = (helcimPlanId) => {
-  return Object.values(CONTRIBUTION_TIERS).find(
-    (tier) => tier.helcimPlanId === helcimPlanId,
-  );
-};
-
-// Get paid tiers only (excluding free tier)
-export const getPaidContributionTiers = () => {
-  return Object.values(CONTRIBUTION_TIERS).filter((tier) => tier.amount > 0);
-};
+export const getGuidanceLabel = (amount) => {
+  if (amount === null || amount === undefined) return null
+  const n = Number(amount)
+  if (!Number.isFinite(n) || n < 0) return null
+  const match = CONTRIBUTION_PRESETS.findLast(p => p.amount <= n)
+  return match?.label ?? null
+}

app/config/memberStatus.js

@@ -0,0 +1,8 @@
+export const STATUS_LABELS = {
+  active: "Active",
+  pending_payment: "Payment setup incomplete",
+  suspended: "Paused",
+  cancelled: "Closed",
+};
+
+export const statusLabel = (s) => STATUS_LABELS[s] || "Pending";

app/config/timezones.js

@@ -0,0 +1,39 @@
+// Curated IANA timezone options for the profile editor.
+// Grouped roughly by region; values are standard IANA identifiers.
+export const TIMEZONE_OPTIONS = [
+  // Americas
+  { label: 'Pacific — Los Angeles', value: 'America/Los_Angeles' },
+  { label: 'Pacific — Vancouver', value: 'America/Vancouver' },
+  { label: 'Mountain — Denver', value: 'America/Denver' },
+  { label: 'Mountain — Edmonton', value: 'America/Edmonton' },
+  { label: 'Central — Chicago', value: 'America/Chicago' },
+  { label: 'Central — Mexico City', value: 'America/Mexico_City' },
+  { label: 'Eastern — Toronto', value: 'America/Toronto' },
+  { label: 'Eastern — New York', value: 'America/New_York' },
+  { label: 'Atlantic — Halifax', value: 'America/Halifax' },
+  { label: 'Newfoundland — St. John’s', value: 'America/St_Johns' },
+  { label: 'Brazil — São Paulo', value: 'America/Sao_Paulo' },
+  { label: 'Argentina — Buenos Aires', value: 'America/Argentina/Buenos_Aires' },
+
+  // Europe / Africa
+  { label: 'UTC', value: 'UTC' },
+  { label: 'UK — London', value: 'Europe/London' },
+  { label: 'Ireland — Dublin', value: 'Europe/Dublin' },
+  { label: 'Central Europe — Berlin', value: 'Europe/Berlin' },
+  { label: 'Central Europe — Paris', value: 'Europe/Paris' },
+  { label: 'Central Europe — Madrid', value: 'Europe/Madrid' },
+  { label: 'Eastern Europe — Helsinki', value: 'Europe/Helsinki' },
+  { label: 'Africa — Lagos', value: 'Africa/Lagos' },
+  { label: 'Africa — Johannesburg', value: 'Africa/Johannesburg' },
+
+  // Asia / Oceania
+  { label: 'Middle East — Dubai', value: 'Asia/Dubai' },
+  { label: 'India — Kolkata', value: 'Asia/Kolkata' },
+  { label: 'Southeast Asia — Bangkok', value: 'Asia/Bangkok' },
+  { label: 'China — Shanghai', value: 'Asia/Shanghai' },
+  { label: 'Japan — Tokyo', value: 'Asia/Tokyo' },
+  { label: 'Korea — Seoul', value: 'Asia/Seoul' },
+  { label: 'Australia — Sydney', value: 'Australia/Sydney' },
+  { label: 'Australia — Perth', value: 'Australia/Perth' },
+  { label: 'New Zealand — Auckland', value: 'Pacific/Auckland' },
+];

app/layouts/admin.vue

@@ -66,6 +66,14 @@
               Board Channels
             </NuxtLink>
           </li>
+          <li>
+            <NuxtLink
+              to="/admin/site-content"
+              :class="{ active: route.path.startsWith('/admin/site-content') }"
+            >
+              Site Content
+            </NuxtLink>
+          </li>
         </ul>
 
         <div class="sidebar-section">Site</div>
@@ -76,7 +84,7 @@
       </div>
 
       <div class="sidebar-meta">
-        <span class="admin-tag">admin</span><br />
+        <span class="admin-tag">admin</span><br >
         <a href="#" @click.prevent="logout">Sign out</a>
       </div>
     </aside>
@@ -170,6 +178,15 @@
                   Board Channels
                 </NuxtLink>
               </li>
+              <li>
+                <NuxtLink
+                  to="/admin/site-content"
+                  :class="{ active: route.path.startsWith('/admin/site-content') }"
+                  @click="isMobileMenuOpen = false"
+                >
+                  Site Content
+                </NuxtLink>
+              </li>
             </ul>
 
             <div class="sidebar-section">Site</div>
@@ -190,7 +207,7 @@
           </div>
 
           <div class="sidebar-meta">
-            <span class="admin-tag">admin</span><br />
+            <span class="admin-tag">admin</span><br >
             <a href="#" @click.prevent="logout">Sign out</a>
           </div>
         </aside>

app/middleware/coming-soon.global.js

@@ -12,11 +12,24 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
   if (
     to.path === "/coming-soon" ||
     to.path === "/auth/wiki-login" ||
+    to.path === "/auth/oidc-error" ||
+    to.path === "/auth/logout-confirm" ||
+    to.path === "/auth/logout-success" ||
+    to.path === "/verify" ||
     to.path.startsWith("/admin")
   ) {
     return;
   }
 
+  // Logged-in admins bypass coming-soon (and see the public site + their dashboard)
+  try {
+    const headers = import.meta.server ? useRequestHeaders(["cookie"]) : undefined;
+    const member = await $fetch("/api/auth/member", { headers });
+    if (member?.role === "admin") return;
+  } catch {
+    // Not authenticated — fall through to redirect
+  }
+
   // Redirect all other routes to coming-soon
   return navigateTo("/coming-soon");
 });

app/pages/about.vue

@@ -38,16 +38,16 @@
         <div class="section-label">The Circles</div>
         <div class="circles-grid">
           <div id="community" class="circle-cell">
-            <h3 style="color: var(--c-community)">Community</h3>
+            <h2 style="color: var(--c-community)">Community</h2>
 
             <p>For anyone exploring cooperative models.</p>
           </div>
           <div id="founder" class="circle-cell">
-            <h3 style="color: var(--c-founder)">Founder</h3>
+            <h2 style="color: var(--c-founder)">Founder</h2>
             <p>For people actively building cooperatives.</p>
           </div>
           <div id="practitioner" class="circle-cell">
-            <h3 style="color: var(--c-practitioner)">Practitioner</h3>
+            <h2 style="color: var(--c-practitioner)">Practitioner</h2>
             <p>For experienced practitioners sharing what they know.</p>
           </div>
         </div>

app/pages/accept-invite.vue

@@ -32,7 +32,7 @@
               class="form-input"
               type="text"
               required
-            />
+            >
           </div>
           <div class="form-group">
             <label class="form-label" for="accept-email">Email</label>
@@ -42,7 +42,7 @@
               class="form-input"
               type="email"
               disabled
-            />
+            >
             <p class="field-note">Email cannot be changed. Contact us if you need to use a different email.</p>
           </div>
           <div class="form-group">
@@ -53,7 +53,7 @@
               class="form-input"
               type="text"
               placeholder="e.g. they/them, she/her"
-            />
+            >
           </div>
           <div class="form-group">
             <label class="form-label" for="accept-location">City / Region</label>
@@ -63,7 +63,7 @@
               class="form-input"
               type="text"
               placeholder="e.g. Vancouver, BC"
-            />
+            >
           </div>
 
           <div class="form-group full-width">
@@ -77,7 +77,7 @@
                   type="radio"
                   name="circle"
                   value="community"
-                />
+                >
                 <label for="circle-community">
                   <span class="circle-label-name" style="color: var(--c-community);">Community</span>
                   <span class="circle-label-desc">Learning about co-ops</span>
@@ -90,7 +90,7 @@
                   type="radio"
                   name="circle"
                   value="founder"
-                />
+                >
                 <label for="circle-founder">
                   <span class="circle-label-name" style="color: var(--c-founder);">Founder</span>
                   <span class="circle-label-desc">Building your studio</span>
@@ -103,7 +103,7 @@
                   type="radio"
                   name="circle"
                   value="practitioner"
-                />
+                >
                 <label for="circle-practitioner">
                   <span class="circle-label-name" style="color: var(--c-practitioner);">Practitioner</span>
                   <span class="circle-label-desc">Leading and mentoring</span>
@@ -120,36 +120,90 @@
               class="form-input"
               rows="3"
               placeholder="2-3 sentences about what you're looking for"
-            ></textarea>
+            />
           </div>
 
           <div class="form-group full-width">
-            <label class="form-label" for="accept-tier">Monthly Contribution</label>
-            <select
-              id="accept-tier"
-              v-model="form.contributionTier"
-              class="form-select"
-            >
-              <option value="0">$0/mo -- I need support right now</option>
-              <option value="5">$5/mo -- I can contribute</option>
-              <option value="15">$15/mo -- I can sustain the community (suggested)</option>
-              <option value="30">$30/mo -- I can support others too</option>
-              <option value="50">$50/mo -- I want to sponsor multiple members</option>
-            </select>
+            <label class="form-label">Billing Cadence</label>
+            <div class="cadence-radios">
+              <div class="circle-radio">
+                <input
+                  id="accept-cadence-annual"
+                  v-model="cadence"
+                  type="radio"
+                  name="cadence"
+                  value="annual"
+                >
+                <label for="accept-cadence-annual">
+                  <span class="circle-label-name">Per Year</span>
+                </label>
+              </div>
+              <div class="circle-radio">
+                <input
+                  id="accept-cadence-monthly"
+                  v-model="cadence"
+                  type="radio"
+                  name="cadence"
+                  value="monthly"
+                >
+                <label for="accept-cadence-monthly">
+                  <span class="circle-label-name">Per Month</span>
+                </label>
+              </div>
+            </div>
+          </div>
+
+          <div class="form-group full-width">
+            <label class="form-label" for="accept-contribution">
+              Monthly Contribution
+            </label>
+            <div class="contribution-input-row">
+              <span class="contribution-currency">$</span>
+              <input
+                id="accept-contribution"
+                v-model.number="form.contributionAmount"
+                type="number"
+                min="0"
+                step="1"
+                inputmode="numeric"
+                class="contribution-input"
+              >
+            </div>
+            <div class="contribution-presets" role="group" aria-label="Suggested amounts">
+              <button
+                v-for="preset in CONTRIBUTION_PRESETS"
+                :key="preset.amount"
+                type="button"
+                class="contribution-preset-chip"
+                @click="form.contributionAmount = preset.amount"
+              >
+                ${{ preset.amount }}
+              </button>
+            </div>
+            <p v-if="guidanceLabel" class="contribution-guidance">{{ guidanceLabel }}</p>
             <p class="field-note">Pay what you can. If you can pay more, you're making room for someone who can't.</p>
           </div>
 
+          <div v-if="form.contributionAmount > 0" class="form-group full-width">
+            <div class="billing-summary">
+              <p class="billing-summary-line">
+                You'll be charged <strong>${{ firstCharge }} today</strong><span v-if="cadence === 'annual'"> (${{ form.contributionAmount }}/month &times; 12)</span>.
+              </p>
+              <p class="billing-summary-line">
+                Then <strong>${{ firstCharge }} every {{ cadence === 'annual' ? 'year' : 'month' }}</strong>, until you cancel.
+              </p>
+            </div>
+          </div>
+
           <div class="form-group full-width">
             <label class="checkbox-label">
               <input
+                v-model="form.agreedToGuidelines"
                 type="checkbox"
-                v-model="form.agreedToTerms"
-              />
+              >
               <span>
-                I've read and agree to the
-                <NuxtLink to="/agreement" target="_blank">Member Agreement</NuxtLink>
-                and
-                <NuxtLink to="/guidelines" target="_blank">Code of Conduct</NuxtLink>
+                I agree to the Ghost Guild
+                <NuxtLink to="/community-guidelines" target="_blank">Community Guidelines</NuxtLink>.
               </span>
             </label>
           </div>
@@ -169,43 +223,28 @@
       </form>
     </div>
 
-    <!-- Payment Step -->
-    <div v-else-if="step === 'payment'" class="form-container">
-      <h1>Payment Information</h1>
-      <p class="form-intro">
-        You're signing up for ${{ form.contributionTier }} CAD / month.
-      </p>
-
-      <div v-if="errorMessage" class="error-box">{{ errorMessage }}</div>
-
-      <DashedBox :hoverable="false">
-        <p class="payment-instruction">Click "Complete Payment" below to open the secure payment modal and verify your payment method.</p>
-      </DashedBox>
-
-      <div class="button-row" style="margin-top: 24px;">
-        <button class="btn" :disabled="isSubmitting" @click="step = 'form'">Back</button>
-        <button class="form-submit" :disabled="isSubmitting" @click="processPayment">
-          <span v-if="isSubmitting">Processing...</span>
-          <span v-else>Complete Payment</span>
-        </button>
-      </div>
-    </div>
-
-    <!-- Confirmation -->
-    <div v-else-if="step === 'confirmation'" class="center-box">
-      <h1>Welcome to Ghost Guild!</h1>
-      <p>Your membership is active. Redirecting to your dashboard...</p>
-      <NuxtLink to="/welcome" class="btn btn-primary" style="margin-top: 16px">Go to Dashboard</NuxtLink>
-    </div>
+    <!-- Flow overlay: covers the page through payment + redirect. -->
+    <SignupFlowOverlay
+      :state="flowState"
+      :summary="flowSummary"
+      :error-message="errorMessage"
+      dashboard-href="/member/dashboard?welcome=1"
+      @close="closeFlowOverlay"
+    />
   </div>
 </template>
 
 <script setup>
-import { requiresPayment } from "~/config/contributions";
+import {
+  requiresPayment,
+  CONTRIBUTION_PRESETS,
+  getGuidanceLabel,
+} from "~/config/contributions";
 
 definePageMeta({ layout: false });
 
 const { checkMemberStatus } = useAuth();
+const { initializeHelcimPay, verifyPayment } = useHelcimPay();
 
 const step = ref("verifying");
 const errorMessage = ref("");
@@ -213,6 +252,10 @@ const isSubmitting = ref(false);
 const preRegId = ref(null);
 const preRegEmail = ref("");
 const token = ref("");
+const cadence = ref("annual"); // 'monthly' | 'annual'
+
+// Flow overlay state — drives the post-submit full-viewport UI.
+const flowState = ref("idle");
 
 const form = reactive({
   name: "",
@@ -220,22 +263,49 @@ const form = reactive({
   location: "",
   circle: "community",
   motivation: "",
-  contributionTier: "15",
-  agreedToTerms: false,
+  contributionAmount: 15,
+  agreedToGuidelines: false,
 });
 
 const isFormValid = computed(() => {
-  return form.name && form.circle && form.contributionTier && form.agreedToTerms;
+  return (
+    form.name &&
+    form.circle &&
+    Number.isInteger(form.contributionAmount) &&
+    form.contributionAmount >= 0 &&
+    form.agreedToGuidelines
+  );
 });
 
 const needsPayment = computed(() => {
-  return requiresPayment(form.contributionTier);
+  return requiresPayment(form.contributionAmount);
 });
 
-// Helcim state for paid tiers
-const memberId = ref(null);
-const customerId = ref(null);
-const customerCode = ref(null);
+const guidanceLabel = computed(() => getGuidanceLabel(form.contributionAmount));
+
+const firstCharge = computed(() => {
+  const amount = form.contributionAmount || 0;
+  return cadence.value === "annual" ? amount * 12 : amount;
+});
+
+const formatContributionAmount = (amount) => {
+  if (!amount || amount === 0) return "$0";
+  const display = cadence.value === "annual" ? amount * 12 : amount;
+  const suffix = cadence.value === "annual" ? "/yr" : "/mo";
+  return `$${display}${suffix}`;
+};
+
+const flowSummary = computed(() => ({
+  name: form.name,
+  email: preRegEmail.value,
+  circle: form.circle,
+  contribution: formatContributionAmount(form.contributionAmount),
+}));
+
+const closeFlowOverlay = () => {
+  flowState.value = "idle";
+  errorMessage.value = "";
+};
 
 // On mount: extract token from fragment, verify
 onMounted(async () => {
@@ -271,9 +341,10 @@ const handleAccept = async () => {
 
   isSubmitting.value = true;
   errorMessage.value = "";
+  flowState.value = "creating-customer";
 
   try {
-    const result = await $fetch("/api/invite/accept", {
+    const accepted = await $fetch("/api/invite/accept", {
       method: "POST",
       body: {
         preRegistrationId: preRegId.value,
@@ -282,96 +353,59 @@ const handleAccept = async () => {
         location: form.location || undefined,
         circle: form.circle,
         motivation: form.motivation || undefined,
-        contributionTier: form.contributionTier,
-        agreedToTerms: form.agreedToTerms,
+        contributionAmount: form.contributionAmount,
+        agreedToGuidelines: form.agreedToGuidelines,
         token: token.value,
       },
     });
 
-    memberId.value = result.member.id;
-
-    if (result.requiresPayment) {
-      // Need to create Helcim customer + payment
-      await setupPayment(result.member);
-    } else {
+    if (!accepted.requiresPayment) {
       // Free tier — session cookie already set by accept endpoint
       await checkMemberStatus();
-      step.value = "confirmation";
-      setTimeout(() => navigateTo("/welcome"), 3000);
+      flowState.value = "success";
+      setTimeout(() => navigateTo("/member/dashboard?welcome=1"), 1500);
+      return;
     }
-  } catch (err) {
-    errorMessage.value =
-      err.data?.statusMessage || "Failed to accept invitation. Please try again.";
-  } finally {
-    isSubmitting.value = false;
-  }
-};
 
-const setupPayment = async (member) => {
-  try {
-    // Create Helcim customer for paid tier
-    const customerResult = await $fetch("/api/helcim/customer", {
+    // Paid tier: initialize HelcimPay session, auto-open modal
+    flowState.value = "opening-payment";
+    await initializeHelcimPay(accepted.customerId, accepted.customerCode, 0);
+
+    const paymentResult = await verifyPayment();
+    if (!paymentResult?.success) {
+      throw new Error("Payment was not completed.");
+    }
+
+    flowState.value = "processing-payment";
+    await $fetch("/api/helcim/verify-payment", {
       method: "POST",
       body: {
-        name: member.name,
-        email: member.email,
-        circle: member.circle,
-        contributionTier: form.contributionTier,
+        cardToken: paymentResult.cardToken,
+        customerId: accepted.customerId,
       },
     });
 
-    customerId.value = customerResult.customerId;
-    customerCode.value = customerResult.customerCode;
+    flowState.value = "creating-subscription";
+    await $fetch("/api/helcim/subscription", {
+      method: "POST",
+      body: {
+        customerId: accepted.customerId,
+        customerCode: accepted.customerCode,
+        contributionAmount: form.contributionAmount,
+        cadence: cadence.value,
+        cardToken: paymentResult.cardToken,
+      },
+    });
 
-    // Initialize HelcimPay.js
-    const { initializeHelcimPay } = useHelcimPay();
-    await initializeHelcimPay(customerId.value, customerCode.value, 0);
-
-    step.value = "payment";
+    await checkMemberStatus();
+    flowState.value = "success";
+    setTimeout(() => navigateTo("/member/dashboard?welcome=1"), 1500);
   } catch (err) {
     errorMessage.value =
-      err.data?.statusMessage || "Failed to set up payment. Please try again.";
-  }
-};
-
-const processPayment = async () => {
-  if (isSubmitting.value) return;
-
-  isSubmitting.value = true;
-  errorMessage.value = "";
-
-  try {
-    const { verifyPayment } = useHelcimPay();
-    const paymentResult = await verifyPayment();
-
-    if (paymentResult.success) {
-      // Verify payment on server
-      await $fetch("/api/helcim/verify-payment", {
-        method: "POST",
-        body: {
-          cardToken: paymentResult.cardToken,
-          customerId: customerId.value,
-        },
-      });
-
-      // Create subscription
-      await $fetch("/api/helcim/subscription", {
-        method: "POST",
-        body: {
-          customerId: customerId.value,
-          customerCode: customerCode.value,
-          contributionTier: form.contributionTier,
-          cardToken: paymentResult.cardToken,
-        },
-      });
-
-      await checkMemberStatus();
-      step.value = "confirmation";
-      setTimeout(() => navigateTo("/welcome"), 3000);
-    }
-  } catch (err) {
-    errorMessage.value =
-      err.message || "Payment verification failed. Please try again.";
+      err.data?.statusMessage ||
+      err.message ||
+      "Failed to accept invitation. Please try again.";
+    flowState.value = "error";
   } finally {
     isSubmitting.value = false;
   }
@@ -489,6 +523,72 @@ textarea.form-input {
   line-height: 1.4;
 }
 
+/* ---- CONTRIBUTION AMOUNT INPUT + CHIPS ---- */
+.contribution-input-row {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.contribution-currency {
+  font-weight: 600;
+}
+.contribution-input {
+  flex: 1;
+  padding: 0.5rem 0.75rem;
+  background: var(--input-bg);
+  border: 1px solid var(--parch);
+  font-family: 'Commit Mono', monospace;
+  font-size: 1rem;
+}
+.contribution-input:focus {
+  outline: none;
+  border-color: var(--candle);
+}
+.contribution-presets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+.contribution-preset-chip {
+  padding: 0.25rem 0.75rem;
+  background: transparent;
+  border: 1px dashed var(--parch);
+  font-family: 'Commit Mono', monospace;
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+.contribution-preset-chip:hover {
+  border-style: solid;
+  border-color: var(--candle);
+}
+.contribution-guidance {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  font-style: italic;
+  color: var(--ink-soft, currentColor);
+}
+
+/* ---- BILLING SUMMARY ---- */
+.billing-summary {
+  padding: 12px 16px;
+  border: 1px dashed var(--border);
+  background: var(--surface);
+}
+.billing-summary-line {
+  font-size: 13px;
+  color: var(--text);
+  line-height: 1.5;
+  margin: 0;
+}
+.billing-summary-line + .billing-summary-line {
+  margin-top: 4px;
+}
+.billing-summary-line strong {
+  color: var(--text-bright);
+  font-weight: 600;
+}
+
 /* ---- CIRCLE RADIOS ---- */
 .circle-radios {
   display: grid;
@@ -496,6 +596,12 @@ textarea.form-input {
   gap: 8px;
 }
 
+.cadence-radios {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+}
+
 .circle-radio {
   position: relative;
 }
@@ -613,5 +719,9 @@ textarea.form-input {
   .circle-radios {
     grid-template-columns: 1fr;
   }
+
+  .cadence-radios {
+    grid-template-columns: 1fr;
+  }
 }
 </style>

app/pages/admin/events/index.vue

@@ -570,7 +570,7 @@ tbody td {
   letter-spacing: 0.04em;
   text-transform: uppercase;
   color: var(--c-founder);
-  border: 1px dashed rgba(138, 68, 32, 0.3);
+  border: 1px dashed color-mix(in srgb, var(--ember) 30%, transparent);
   padding: 2px 8px;
 }
 
@@ -583,7 +583,7 @@ tbody td {
   font-size: 10px;
   font-weight: 600;
   color: var(--c-founder);
-  border: 1px dashed rgba(138, 68, 32, 0.4);
+  border: 1px dashed color-mix(in srgb, var(--ember) 40%, transparent);
   border-radius: 50%;
 }
 
@@ -632,12 +632,12 @@ tbody td {
 
 .status-upcoming {
   color: var(--candle);
-  border-color: rgba(122, 90, 16, 0.3);
+  border-color: color-mix(in srgb, var(--candle) 30%, transparent);
 }
 
 .status-ongoing {
   color: var(--green);
-  border-color: rgba(74, 106, 56, 0.3);
+  border-color: color-mix(in srgb, var(--green) 30%, transparent);
 }
 
 .status-past {
@@ -647,7 +647,7 @@ tbody td {
 
 .status-cancelled {
   color: var(--ember);
-  border-color: rgba(138, 68, 32, 0.3);
+  border-color: color-mix(in srgb, var(--ember) 30%, transparent);
   margin-top: 4px;
 }
 

app/pages/admin/index.vue

@@ -65,7 +65,7 @@
                 <span class="item-sub">{{ member.email }}</span>
               </div>
               <div class="item-meta">
-                <span class="badge" :class="member.circle">{{ member.circle }}</span>
+                <CircleBadge :circle="member.circle" />
                 <span class="item-date">{{ formatDate(member.createdAt) }}</span>
               </div>
             </div>

app/pages/admin/members/[id].vue

@@ -16,7 +16,7 @@
           <p v-if="member" class="member-email">{{ member.email }}</p>
         </div>
         <div v-if="member" class="header-badges">
-          <span class="badge" :class="member.circle">{{ member.circle }}</span>
+          <CircleBadge :circle="member.circle" />
           <span :class="statusClass(member.status)" class="status-badge">{{ member.status }}</span>
         </div>
       </div>
@@ -39,11 +39,11 @@
             <form class="edit-form" @submit.prevent="submitEdit">
               <div class="field">
                 <label>Name</label>
-                <input v-model="form.name" type="text" required />
+                <input v-model="form.name" type="text" required >
               </div>
               <div class="field">
                 <label>Email</label>
-                <input v-model="form.email" type="email" required />
+                <input v-model="form.email" type="email" required >
               </div>
               <div class="field">
                 <label>Circle</label>
@@ -54,22 +54,20 @@
                 </select>
               </div>
               <div class="field">
-                <label>Contribution tier ($/mo)</label>
-                <select v-model="form.contributionTier">
-                  <option value="0">$0</option>
-                  <option value="5">$5</option>
-                  <option value="15">$15</option>
-                  <option value="30">$30</option>
-                  <option value="50">$50</option>
-                </select>
+                <label>Contribution ($/mo)</label>
+                <input v-model.number="form.contributionAmount" type="number" min="0" step="1">
+                <p class="field-hint field-hint--warn">
+                  Writes to our database only. If the member is on a paid plan, also update <code>recurringAmount</code> in the Helcim dashboard — this form does not sync.
+                </p>
               </div>
               <div class="field">
                 <label>Status</label>
                 <select v-model="form.status">
-                  <option value="pending_payment">pending_payment</option>
-                  <option value="active">active</option>
-                  <option value="suspended">suspended</option>
-                  <option value="cancelled">cancelled</option>
+                  <option
+                    v-for="(label, value) in STATUS_LABELS"
+                    :key="value"
+                    :value="value"
+                  >{{ label }}</option>
                 </select>
               </div>
               <div class="field">
@@ -112,8 +110,19 @@
               </div>
               <div class="meta-row">
                 <dt>Slack invite</dt>
-                <dd :class="member.slackInvited ? 'status-ok' : 'status-dim'">
-                  {{ member.slackInvited ? "Invited" : "Pending" }}
+                <dd v-if="member.slackInvited" class="status-ok">
+                  Invited {{ formatDate(member.slackInvitedAt) }}
+                </dd>
+                <dd v-else class="meta-action">
+                  <span class="status-dim">Not yet invited</span>
+                  <button
+                    type="button"
+                    class="link-btn"
+                    :disabled="markingSlackInvited"
+                    @click="markSlackInvited"
+                  >
+                    {{ markingSlackInvited ? "Marking…" : "Mark as Slack invited" }}
+                  </button>
                 </dd>
               </div>
               <div v-if="member.helcimCustomerId" class="meta-row">
@@ -161,12 +170,6 @@
                   {{ member.onboarding?.completedAt ? formatDate(member.onboarding.completedAt) : 'In progress' }}
                 </dd>
               </div>
-              <div class="meta-row">
-                <dt>Slack status</dt>
-                <dd :class="slackStatusClass">
-                  {{ member.slackInviteStatus || 'none' }}
-                </dd>
-              </div>
             </dl>
           </section>
 
@@ -240,6 +243,7 @@
 
 <script setup>
 import { formatActivity } from '~/utils/activityText'
+import { STATUS_LABELS } from '~/config/memberStatus'
 
 definePageMeta({
   layout: "admin",
@@ -270,7 +274,7 @@ const form = reactive({
   name: "",
   email: "",
   circle: "",
-  contributionTier: "",
+  contributionAmount: 0,
   status: "",
   role: "",
 });
@@ -282,7 +286,7 @@ function populateForm(m) {
   form.name = m.name;
   form.email = m.email;
   form.circle = m.circle;
-  form.contributionTier = String(m.contributionTier);
+  form.contributionAmount = m.contributionAmount ?? 0;
   form.status = m.status || "pending_payment";
   form.role = m.role || "member";
 }
@@ -304,7 +308,7 @@ async function submitEdit() {
         name: form.name,
         email: form.email,
         circle: form.circle,
-        contributionTier: form.contributionTier,
+        contributionAmount: form.contributionAmount,
         status: form.status,
       },
     });
@@ -362,12 +366,31 @@ const hasBoardEngaged = computed(() => {
   )
 })
 
-const slackStatusClass = computed(() => {
-  const status = member.value?.slackInviteStatus
-  if (status === 'joined') return 'status-ok'
-  if (status === 'invited') return 'status-dim'
-  return 'status-dim'
-})
+const markingSlackInvited = ref(false)
+
+async function markSlackInvited() {
+  if (!member.value || markingSlackInvited.value) return
+  markingSlackInvited.value = true
+  try {
+    const res = await $fetch(
+      `/api/admin/members/${route.params.id}/slack-status`,
+      {
+        method: "PATCH",
+        body: { slackInvited: true },
+      },
+    )
+    member.value = { ...member.value, ...res.member }
+    toast.add({ title: "Marked as Slack invited", color: "success" })
+  } catch (err) {
+    toast.add({
+      title: "Failed to mark Slack invited",
+      description: err.data?.statusMessage || err.message,
+      color: "error",
+    })
+  } finally {
+    markingSlackInvited.value = false
+  }
+}
 
 // Activity log
 const activityEntries = ref([])
@@ -516,6 +539,24 @@ onMounted(loadActivity)
   margin-top: 12px;
 }
 
+.field-hint {
+  font-size: 11px;
+  color: var(--text-faint);
+  margin: 6px 0 0;
+  line-height: 1.4;
+}
+
+.field-hint--warn {
+  color: var(--ember);
+  border-left: 2px solid var(--ember);
+  padding: 4px 0 4px 8px;
+}
+
+.field-hint code {
+  font-family: "Commit Mono", monospace;
+  font-size: 10px;
+}
+
 .form-actions {
   display: flex;
   gap: 8px;
@@ -559,6 +600,32 @@ onMounted(loadActivity)
   word-break: break-all;
 }
 
+.meta-action {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.link-btn {
+  background: none;
+  border: none;
+  color: var(--candle);
+  cursor: pointer;
+  font-family: "Commit Mono", monospace;
+  font-size: 11px;
+  padding: 2px 6px;
+}
+
+.link-btn:hover {
+  text-decoration: underline;
+}
+
+.link-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 .mono {
   font-family: "Commit Mono", monospace;
   font-size: 11px;

app/pages/admin/members/index.vue

@@ -28,7 +28,7 @@
     <!-- Search / Filter -->
     <div class="filter-bar">
       <div class="field" style="margin-bottom: 0; flex: 1">
-        <input v-model="searchQuery" placeholder="Search members..." />
+        <input v-model="searchQuery" placeholder="Search members..." >
       </div>
       <div class="field" style="margin-bottom: 0">
         <select v-model="circleFilter" aria-label="Filter by circle">
@@ -38,6 +38,16 @@
           <option value="practitioner">Practitioner</option>
         </select>
       </div>
+      <div class="field" style="margin-bottom: 0">
+        <select v-model="statusFilter" aria-label="Filter by status">
+          <option value="">All Statuses</option>
+          <option
+            v-for="(label, value) in STATUS_LABELS"
+            :key="value"
+            :value="value"
+          >{{ label }}</option>
+        </select>
+      </div>
     </div>
 
     <!-- Members Table -->
@@ -61,17 +71,18 @@
                   :checked="allVisibleSelected"
                   :indeterminate="!allVisibleSelected && someVisibleSelected"
                   @change="toggleSelectAll"
-                />
+                >
                 <span class="check-mark" />
               </label>
             </th>
-            <th>Name</th>
-            <th>Email</th>
-            <th>Circle</th>
-            <th>Tier</th>
+            <th class="sortable" @click="toggleSort('name')">Name <span class="sort-ind">{{ sortIndicator('name') }}</span></th>
+            <th class="sortable" @click="toggleSort('email')">Email <span class="sort-ind">{{ sortIndicator('email') }}</span></th>
+            <th class="sortable" @click="toggleSort('circle')">Circle <span class="sort-ind">{{ sortIndicator('circle') }}</span></th>
+            <th class="sortable" @click="toggleSort('contributionAmount')">Contribution <span class="sort-ind">{{ sortIndicator('contributionAmount') }}</span></th>
+            <th class="sortable" @click="toggleSort('status')">Status <span class="sort-ind">{{ sortIndicator('status') }}</span></th>
             <th>Invite</th>
             <th>Slack</th>
-            <th>Joined</th>
+            <th class="sortable" @click="toggleSort('createdAt')">Joined <span class="sort-ind">{{ sortIndicator('createdAt') }}</span></th>
             <th>Actions</th>
           </tr>
         </thead>
@@ -89,7 +100,7 @@
                   type="checkbox"
                   :checked="selectedMemberIds.includes(member._id)"
                   @change="toggleSelect(member._id)"
-                />
+                >
                 <span class="check-mark" />
               </label>
             </td>
@@ -98,11 +109,12 @@
             </td>
             <td class="col-email">{{ member.email }}</td>
             <td>
-              <span class="badge" :class="member.circle">{{
-                member.circle
-              }}</span>
+              <CircleBadge :circle="member.circle" />
+            </td>
+            <td class="col-mono">${{ member.contributionAmount ?? 0 }}/mo</td>
+            <td>
+              <span class="badge status" :class="`status-${member.status || 'pending_payment'}`">{{ statusLabel(member.status) }}</span>
             </td>
-            <td class="col-mono">${{ member.contributionTier }}/mo</td>
             <td>
               <span
                 :class="member.inviteEmailSent ? 'status-ok' : 'status-dim'"
@@ -111,8 +123,11 @@
               </span>
             </td>
             <td>
-              <span :class="member.slackInvited ? 'status-ok' : 'status-dim'">
-                {{ member.slackInvited ? "Invited" : "Pending" }}
+              <span v-if="member.slackInvited" class="status-ok">
+                Invited {{ formatDate(member.slackInvitedAt) }}
+              </span>
+              <span v-else class="status-dim">
+                Not yet invited
               </span>
             </td>
             <td class="col-mono col-date">
@@ -122,10 +137,14 @@
               <NuxtLink :to="`/admin/members/${member._id}`" class="link-btn" @click.stop
                 >View</NuxtLink
               >
-              <button @click.stop="sendSlackInvite(member)" class="link-btn">
-                Slack
+              <button
+                v-if="!member.slackInvited"
+                class="link-btn"
+                @click.stop="markSlackInvited(member)"
+              >
+                Mark as Slack invited
               </button>
-              <button @click.stop="editMember(member)" class="link-btn">Edit</button>
+              <button class="link-btn" @click.stop="editMember(member)">Edit</button>
             </td>
           </tr>
         </tbody>
@@ -150,10 +169,10 @@
           </button>
         </div>
 
-        <form @submit.prevent="createMember" class="modal-body">
+        <form class="modal-body" @submit.prevent="createMember">
           <div class="field">
             <label>Name</label>
-            <input v-model="newMember.name" placeholder="Full name" required />
+            <input v-model="newMember.name" placeholder="Full name" required >
           </div>
           <div class="field">
             <label>Email</label>
@@ -162,7 +181,7 @@
               type="email"
               placeholder="email@example.com"
               required
-            />
+            >
           </div>
           <div class="field">
             <label>Circle</label>
@@ -173,14 +192,8 @@
             </select>
           </div>
           <div class="field">
-            <label>Contribution Tier</label>
-            <select v-model="newMember.contributionTier">
-              <option value="0">$0/month</option>
-              <option value="5">$5/month</option>
-              <option value="15">$15/month</option>
-              <option value="30">$30/month</option>
-              <option value="50">$50/month</option>
-            </select>
+            <label>Contribution ($/mo)</label>
+            <input v-model.number="newMember.contributionAmount" type="number" min="0" step="1">
           </div>
           <div class="modal-actions">
             <button type="button" class="btn" @click="showCreateModal = false">
@@ -210,19 +223,18 @@
           <div v-if="!csvRows.length">
             <p class="help-text">
               Upload a CSV with columns:
-              <code>name,email,circle,contributionTier</code>
+              <code>name,email,circle,contributionAmount</code>
             </p>
             <p class="help-text" style="margin-bottom: 12px">
-              Valid circles: community, founder, practitioner. Valid tiers: 0,
-              5, 15, 30, 50.
+              Valid circles: community, founder, practitioner. Contribution: whole number ≥ 0.
             </p>
             <input
               ref="csvFileInput"
               type="file"
               accept=".csv"
-              @change="handleCsvFile"
               class="file-input"
-            />
+              @change="handleCsvFile"
+            >
           </div>
 
           <div v-if="csvParseError" class="error-box">
@@ -243,7 +255,7 @@
               >
                 {{ csvRows.length - csvValidRows.length }} with errors.
               </span>
-              <button @click="resetCsvImport" class="link-btn">
+              <button class="link-btn" @click="resetCsvImport">
                 Choose different file
               </button>
             </div>
@@ -256,7 +268,7 @@
                     <th>Name</th>
                     <th>Email</th>
                     <th>Circle</th>
-                    <th>Tier</th>
+                    <th>Contribution</th>
                   </tr>
                 </thead>
                 <tbody>
@@ -274,7 +286,7 @@
                     <td>{{ row.name }}</td>
                     <td class="col-email">{{ row.email }}</td>
                     <td>{{ row.circle }}</td>
-                    <td>${{ row.contributionTier }}/mo</td>
+                    <td>${{ row.contributionAmount }}/mo</td>
                   </tr>
                 </tbody>
               </table>
@@ -303,14 +315,14 @@
         </div>
 
         <div class="modal-actions">
-          <button @click="closeImportModal" class="btn">
+          <button class="btn" @click="closeImportModal">
             {{ importResults ? "Done" : "Cancel" }}
           </button>
           <button
             v-if="csvValidRows.length && !importResults"
             :disabled="importing"
-            @click="submitImport"
             class="btn btn-primary"
+            @click="submitImport"
           >
             {{
               importing
@@ -336,14 +348,14 @@
           </button>
         </div>
 
-        <form @submit.prevent="submitEditMember" class="modal-body">
+        <form class="modal-body" @submit.prevent="submitEditMember">
           <div class="field">
             <label>Name</label>
-            <input v-model="editingMember.name" required />
+            <input v-model="editingMember.name" required >
           </div>
           <div class="field">
             <label>Email</label>
-            <input v-model="editingMember.email" type="email" required />
+            <input v-model="editingMember.email" type="email" required >
           </div>
           <div class="field">
             <label>Circle</label>
@@ -354,22 +366,17 @@
             </select>
           </div>
           <div class="field">
-            <label>Contribution Tier</label>
-            <select v-model="editingMember.contributionTier">
-              <option value="0">$0/month</option>
-              <option value="5">$5/month</option>
-              <option value="15">$15/month</option>
-              <option value="30">$30/month</option>
-              <option value="50">$50/month</option>
-            </select>
+            <label>Contribution ($/mo)</label>
+            <input v-model.number="editingMember.contributionAmount" type="number" min="0" step="1">
           </div>
           <div class="field">
             <label>Status</label>
             <select v-model="editingMember.status">
-              <option value="pending_payment">Pending Payment</option>
-              <option value="active">Active</option>
-              <option value="suspended">Suspended</option>
-              <option value="cancelled">Cancelled</option>
+              <option
+                v-for="(label, value) in STATUS_LABELS"
+                :key="value"
+                :value="value"
+              >{{ label }}</option>
             </select>
           </div>
           <div class="modal-actions">
@@ -407,7 +414,7 @@
 
           <div class="field">
             <label>Email Template</label>
-            <textarea v-model="inviteTemplate" rows="12"></textarea>
+            <textarea v-model="inviteTemplate" rows="12"/>
             <p class="help-text" style="margin-top: 4px">
               Tokens: <code>{name}</code>, <code>{loginLink}</code>,
               <code>{circle}</code>
@@ -439,14 +446,14 @@
         </div>
 
         <div class="modal-actions">
-          <button @click="showInviteModal = false" class="btn">
+          <button class="btn" @click="showInviteModal = false">
             {{ inviteResults ? "Done" : "Cancel" }}
           </button>
           <button
             v-if="!inviteResults"
             :disabled="sendingInvites"
-            @click="submitInvites"
             class="btn btn-primary"
+            @click="submitInvites"
           >
             {{
               sendingInvites
@@ -461,6 +468,8 @@
 </template>
 
 <script setup>
+import { STATUS_LABELS, statusLabel } from "~/config/memberStatus";
+
 definePageMeta({
   layout: "admin",
   middleware: "admin",
@@ -477,6 +486,22 @@ const {
 
 const searchQuery = ref("");
 const circleFilter = ref("");
+const statusFilter = ref("");
+const sortKey = ref("createdAt");
+const sortDir = ref("desc");
+
+const toggleSort = (key) => {
+  if (sortKey.value === key) {
+    sortDir.value = sortDir.value === "asc" ? "desc" : "asc";
+  } else {
+    sortKey.value = key;
+    sortDir.value = key === "createdAt" ? "desc" : "asc";
+  }
+};
+const sortIndicator = (key) => {
+  if (sortKey.value !== key) return "";
+  return sortDir.value === "asc" ? "▲" : "▼";
+};
 const showCreateModal = ref(false);
 const creating = ref(false);
 
@@ -498,14 +523,14 @@ const inviteResults = ref(null);
 
 const DEFAULT_INVITE_TEMPLATE = `Hi {name},
 
-You've been invited to Ghost Guild as a member of the {circle} circle.
+You've been invited to Ghost Guild.
 
 Sign in here to get started:
 {loginLink}
 
 This link expires in 48 hours. After that, you can always request a new login link at https://ghostguild.org/login.
 
-See you inside.`;
+Reply to this email if you have any trouble!`;
 
 const inviteTemplate = ref(DEFAULT_INVITE_TEMPLATE);
 
@@ -513,13 +538,13 @@ const newMember = reactive({
   name: "",
   email: "",
   circle: "community",
-  contributionTier: "0",
+  contributionAmount: 0,
 });
 
 const filteredMembers = computed(() => {
   if (!members.value) return [];
 
-  return members.value.filter((member) => {
+  const filtered = members.value.filter((member) => {
     const matchesSearch =
       !searchQuery.value ||
       member.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
@@ -528,7 +553,33 @@ const filteredMembers = computed(() => {
     const matchesCircle =
       !circleFilter.value || member.circle === circleFilter.value;
 
-    return matchesSearch && matchesCircle;
+    const matchesStatus =
+      !statusFilter.value || (member.status || "pending_payment") === statusFilter.value;
+
+    return matchesSearch && matchesCircle && matchesStatus;
+  });
+
+  const key = sortKey.value;
+  const dir = sortDir.value === "asc" ? 1 : -1;
+  return [...filtered].sort((a, b) => {
+    let av = a[key];
+    let bv = b[key];
+    if (key === "contributionAmount") {
+      av = Number(av) || 0;
+      bv = Number(bv) || 0;
+    } else if (key === "createdAt") {
+      av = av ? new Date(av).getTime() : 0;
+      bv = bv ? new Date(bv).getTime() : 0;
+    } else if (key === "status") {
+      av = a.status || "pending_payment";
+      bv = b.status || "pending_payment";
+    } else {
+      av = (av || "").toString().toLowerCase();
+      bv = (bv || "").toString().toLowerCase();
+    }
+    if (av < bv) return -1 * dir;
+    if (av > bv) return 1 * dir;
+    return 0;
   });
 });
 
@@ -605,7 +656,7 @@ const createMember = async () => {
       name: "",
       email: "",
       circle: "community",
-      contributionTier: "0",
+      contributionAmount: 0,
     });
 
     await refresh();
@@ -624,7 +675,6 @@ const createMember = async () => {
 
 // --- CSV Import ---
 const VALID_CIRCLES = ["community", "founder", "practitioner"];
-const VALID_TIERS = ["0", "5", "15", "30", "50"];
 
 const handleCsvFile = (event) => {
   const file = event.target.files[0];
@@ -653,10 +703,10 @@ const parseCsv = (text) => {
   const nameIdx = header.indexOf("name");
   const emailIdx = header.indexOf("email");
   const circleIdx = header.indexOf("circle");
-  const tierIdx = header.indexOf("contributiontier");
+  const amountIdx = header.indexOf("contributionamount");
 
-  if (nameIdx === -1 || emailIdx === -1 || circleIdx === -1 || tierIdx === -1) {
-    csvParseError.value = `Missing required columns. Found: ${header.join(", ")}. Need: name, email, circle, contributionTier`;
+  if (nameIdx === -1 || emailIdx === -1 || circleIdx === -1 || amountIdx === -1) {
+    csvParseError.value = `Missing required columns. Found: ${header.join(", ")}. Need: name, email, circle, contributionAmount`;
     return;
   }
 
@@ -668,20 +718,21 @@ const parseCsv = (text) => {
     const name = cols[nameIdx] || "";
     const email = (cols[emailIdx] || "").toLowerCase();
     const circle = (cols[circleIdx] || "").toLowerCase();
-    const contributionTier = cols[tierIdx] || "";
+    const rawAmount = cols[amountIdx] || "";
+    const contributionAmount = Number(rawAmount);
 
     let error = null;
     if (!name) error = "Missing name";
     else if (!email || !email.includes("@")) error = "Invalid email";
     else if (!VALID_CIRCLES.includes(circle))
       error = `Invalid circle: ${circle}`;
-    else if (!VALID_TIERS.includes(contributionTier))
-      error = `Invalid tier: ${contributionTier}`;
+    else if (!Number.isInteger(contributionAmount) || contributionAmount < 0)
+      error = `Invalid contribution: ${rawAmount}`;
     else if (seenEmails.has(email)) error = "Duplicate email in CSV";
 
     if (!error) seenEmails.add(email);
 
-    rows.push({ name, email, circle, contributionTier, error });
+    rows.push({ name, email, circle, contributionAmount, error });
   }
 
   csvRows.value = rows;
@@ -708,11 +759,11 @@ const submitImport = async () => {
   importing.value = true;
   try {
     const payload = csvValidRows.value.map(
-      ({ name, email, circle, contributionTier }) => ({
+      ({ name, email, circle, contributionAmount }) => ({
         name,
         email,
         circle,
-        contributionTier,
+        contributionAmount,
       }),
     );
 
@@ -779,8 +830,25 @@ const submitInvites = async () => {
 };
 
 // --- Existing actions ---
-const sendSlackInvite = (member) => {
-  console.log("Send Slack invite to:", member.email);
+const markSlackInvited = async (member) => {
+  try {
+    const res = await $fetch(
+      `/api/admin/members/${member._id}/slack-status`,
+      {
+        method: "PATCH",
+        body: { slackInvited: true },
+      },
+    );
+    const idx = members.value.findIndex((m) => m._id === member._id);
+    if (idx !== -1) members.value[idx] = { ...members.value[idx], ...res.member };
+    toast.add({ title: "Marked as Slack invited", color: "success" });
+  } catch (err) {
+    toast.add({
+      title: "Failed to mark Slack invited",
+      description: err.data?.statusMessage || err.message,
+      color: "error",
+    });
+  }
 };
 
 // --- Edit Member ---
@@ -791,7 +859,7 @@ const editingMember = reactive({
   name: "",
   email: "",
   circle: "community",
-  contributionTier: "0",
+  contributionAmount: 0,
   status: "pending_payment",
 });
 
@@ -801,7 +869,7 @@ const editMember = (member) => {
     name: member.name,
     email: member.email,
     circle: member.circle,
-    contributionTier: String(member.contributionTier),
+    contributionAmount: member.contributionAmount ?? 0,
     status: member.status || "pending_payment",
   });
   showEditModal.value = true;
@@ -816,7 +884,7 @@ const submitEditMember = async () => {
         name: editingMember.name,
         email: editingMember.email,
         circle: editingMember.circle,
-        contributionTier: editingMember.contributionTier,
+        contributionAmount: editingMember.contributionAmount,
         status: editingMember.status,
       },
     });
@@ -1055,6 +1123,44 @@ tbody td {
   font-size: 11px;
 }
 
+/* ---- SORTABLE HEADERS ---- */
+th.sortable {
+  cursor: pointer;
+  user-select: none;
+}
+th.sortable:hover {
+  color: var(--candle);
+}
+.sort-ind {
+  display: inline-block;
+  width: 10px;
+  font-size: 9px;
+  color: var(--candle);
+  margin-left: 2px;
+}
+
+/* ---- MEMBER STATUS BADGES ---- */
+.badge.status {
+  text-transform: uppercase;
+}
+.badge.status-active {
+  color: var(--green);
+  border-color: rgba(58, 107, 58, 0.45);
+}
+.badge.status-pending_payment {
+  color: var(--text-dim);
+  border-color: var(--border);
+}
+.badge.status-suspended {
+  color: var(--ember);
+  border-color: color-mix(in srgb, var(--ember) 45%, transparent);
+}
+.badge.status-cancelled {
+  color: var(--text-faint);
+  border-color: var(--border);
+  opacity: 0.7;
+}
+
 /* ---- MODALS ---- */
 .modal-overlay {
   position: fixed;
@@ -1195,7 +1301,7 @@ tbody td {
 }
 
 .row-error {
-  background: rgba(138, 68, 32, 0.04);
+  background: color-mix(in srgb, var(--ember) 4%, transparent);
 }
 
 /* ---- PREVIEW BOX ---- */

app/pages/admin/pre-registrants/index.vue

@@ -247,9 +247,11 @@ Click below to accept your invitation, choose your circle, and set your contribu
 
 {acceptLink}
 
-This link expires in 48 hours. If it expires, we can send you a new one.
+This link expires in 48 hours. If it expires, we can send you a new one. Just reply to this email.
 
-See you inside.`;
+See you soon!
+
+– Ghost Guild`;
 
 const inviteTemplate = ref(DEFAULT_INVITE_TEMPLATE);
 
@@ -641,8 +643,8 @@ tbody td {
 }
 
 .status-accepted {
-  color: var(--green, #4a7);
-  border-color: var(--green, #4a7);
+  color: var(--green);
+  border-color: var(--green);
 }
 
 .status-expired {
@@ -669,7 +671,7 @@ tbody td {
 
 /* ---- STATUS INDICATORS ---- */
 .status-ok {
-  color: var(--green, #4a7);
+  color: var(--green);
   font-size: 11px;
 }
 

app/pages/admin/series-management.vue

@@ -112,7 +112,6 @@
               <button @click="manageSeriesTickets(series)" class="link-btn">Ticketing</button>
               <button @click="editSeries(series)" class="link-btn">Edit</button>
               <button @click="addEventToSeries(series)" class="link-btn">Add Event</button>
-              <button @click="duplicateSeries(series)" class="link-btn">Duplicate</button>
               <button @click="deleteSeries(series)" class="link-btn link-btn-danger">Delete</button>
             </div>
           </div>
@@ -171,14 +170,6 @@
         </div>
         <div class="modal-body">
           <div class="section-label">Series Management Tools</div>
-          <button @click="reorderAllSeries" class="btn bulk-action">
-            <strong>Auto-Reorder Series</strong>
-            <span>Fix position numbers based on event dates</span>
-          </button>
-          <button @click="validateAllSeries" class="btn bulk-action">
-            <strong>Validate Series Data</strong>
-            <span>Check for consistency issues</span>
-          </button>
           <button @click="exportSeriesData" class="btn bulk-action">
             <strong>Export Series Data</strong>
             <span>Download series information as JSON</span>
@@ -575,10 +566,6 @@ const addEventToSeries = (series) => {
   navigateTo('/admin/events/create?series=true')
 }
 
-const duplicateSeries = () => {
-  // TODO: Implement
-}
-
 const editSeries = (series) => {
   editingSeriesId.value = series.id
   editingSeriesData.value = {
@@ -696,9 +683,6 @@ const saveTicketsEdit = async () => {
   }
 }
 
-const reorderAllSeries = () => { /* TODO */ }
-const validateAllSeries = () => { /* TODO */ }
-
 const exportSeriesData = () => {
   const dataStr = JSON.stringify(activeSeries.value, null, 2)
   const dataBlob = new Blob([dataStr], { type: 'application/json' })
@@ -866,7 +850,7 @@ const exportSeriesData = () => {
   font-size: 11px;
   font-weight: 600;
   color: var(--c-founder);
-  border: 1px dashed rgba(138, 68, 32, 0.4);
+  border: 1px dashed color-mix(in srgb, var(--ember) 40%, transparent);
   border-radius: 50%;
   flex-shrink: 0;
 }
@@ -947,12 +931,12 @@ const exportSeriesData = () => {
 
 .status-active {
   color: var(--green);
-  border-color: rgba(74, 106, 56, 0.3);
+  border-color: color-mix(in srgb, var(--green) 30%, transparent);
 }
 
 .status-upcoming {
   color: var(--candle);
-  border-color: rgba(122, 90, 16, 0.3);
+  border-color: color-mix(in srgb, var(--candle) 30%, transparent);
 }
 
 .status-completed {
@@ -962,7 +946,7 @@ const exportSeriesData = () => {
 
 .status-ongoing {
   color: var(--green);
-  border-color: rgba(74, 106, 56, 0.3);
+  border-color: color-mix(in srgb, var(--green) 30%, transparent);
 }
 
 /* ---- LINK BUTTONS ---- */

app/pages/admin/site-content.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="admin-site-content">
+    <div class="page-header">
+      <h1>Site Content</h1>
+      <p>Editable copy rendered on the public site. Leave fields blank to use defaults.</p>
+    </div>
+
+    <div v-if="pending" class="loading-state">Loading…</div>
+    <div v-else class="content-blocks">
+      <section v-for="entry in entries" :key="entry.key" class="content-block">
+        <div class="block-header">
+          <div>
+            <div class="block-key">{{ entry.key }}</div>
+            <div class="block-label">{{ KEY_LABELS[entry.key] || entry.key }}</div>
+          </div>
+          <div v-if="entry.updatedAt" class="block-meta">
+            Updated {{ formatTime(entry.updatedAt) }}
+          </div>
+        </div>
+
+        <div class="field">
+          <label>Title</label>
+          <input v-model="entry.title" type="text" maxlength="300" >
+        </div>
+
+        <div class="field">
+          <label>Body</label>
+          <textarea v-model="entry.body" rows="8" maxlength="5000" />
+          <p class="help-text">Paragraphs separated by blank lines. Plain text only.</p>
+        </div>
+
+        <div class="block-actions">
+          <button
+            class="btn btn-primary"
+            :disabled="entry.saving"
+            @click="save(entry)"
+          >
+            {{ entry.saving ? 'Saving…' : 'Save' }}
+          </button>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  layout: 'admin',
+  middleware: 'admin',
+})
+
+const toast = useToast()
+
+const KEY_LABELS = {
+  'homepage.wiki_feature': 'Homepage: From the Wiki',
+}
+
+const { data: keysData } = await useFetch('/api/site-content/keys')
+const knownKeys = computed(() => keysData.value?.keys || [])
+
+const entries = ref([])
+const pending = ref(true)
+
+const load = async () => {
+  pending.value = true
+  const results = await Promise.all(
+    knownKeys.value.map((key) => $fetch(`/api/site-content/${key}`))
+  )
+  entries.value = results.map((r) => ({
+    key: r.key,
+    title: r.title || '',
+    body: r.body || '',
+    updatedAt: r.updatedAt || null,
+    saving: false,
+  }))
+  pending.value = false
+}
+
+await load()
+
+const save = async (entry) => {
+  entry.saving = true
+  try {
+    const updated = await $fetch(`/api/admin/site-content/${entry.key}`, {
+      method: 'PUT',
+      body: { title: entry.title, body: entry.body },
+    })
+    entry.updatedAt = updated.updatedAt
+    toast.add({ title: 'Saved', color: 'green' })
+  } catch (err) {
+    toast.add({
+      title: 'Save failed',
+      description: err.data?.statusMessage || err.message,
+      color: 'red',
+    })
+  } finally {
+    entry.saving = false
+  }
+}
+
+const formatTime = (iso) => {
+  if (!iso) return ''
+  const d = new Date(iso)
+  return d.toLocaleString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  })
+}
+</script>
+
+<style scoped>
+.admin-site-content {
+  padding: 24px;
+  max-width: 780px;
+}
+
+.page-header {
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px dashed var(--border);
+}
+
+.page-header h1 {
+  font-family: 'Brygada 1918', serif;
+  font-size: 28px;
+  margin-bottom: 4px;
+}
+
+.page-header p {
+  color: var(--text-dim);
+  font-size: 13px;
+}
+
+.loading-state {
+  color: var(--text-faint);
+  font-size: 13px;
+  padding: 24px 0;
+}
+
+.content-blocks {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.content-block {
+  border: 1px dashed var(--border);
+  padding: 20px;
+  background: var(--bg);
+}
+
+.block-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.block-key {
+  font-family: 'Commit Mono', monospace;
+  font-size: 11px;
+  color: var(--text-faint);
+  margin-bottom: 2px;
+}
+
+.block-label {
+  font-size: 14px;
+  color: var(--text-bright);
+}
+
+.block-meta {
+  font-size: 11px;
+  color: var(--text-faint);
+}
+
+.field {
+  margin-bottom: 16px;
+}
+
+.field label {
+  display: block;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-dim);
+  margin-bottom: 6px;
+}
+
+.field input,
+.field textarea {
+  width: 100%;
+  padding: 8px 10px;
+  background: var(--input-bg);
+  border: 1px solid var(--border);
+  font-family: inherit;
+  font-size: 13px;
+  color: var(--text);
+  line-height: 1.6;
+}
+
+.field textarea {
+  resize: vertical;
+  font-family: 'Commit Mono', monospace;
+}
+
+.field input:focus,
+.field textarea:focus {
+  outline: none;
+  border-color: var(--candle);
+}
+
+.help-text {
+  font-size: 11px;
+  color: var(--text-faint);
+  margin-top: 4px;
+}
+
+.block-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

app/pages/admin/wiki.vue

@@ -954,8 +954,8 @@ const applyBatchVisibility = async (hidden) => {
 }
 
 .sync-created {
-  color: var(--green, #4a7);
-  border-color: var(--green, #4a7);
+  color: var(--green);
+  border-color: var(--green);
 }
 
 .sync-updated {

app/pages/auth/logout-confirm.vue

@@ -82,7 +82,7 @@ if (import.meta.server && !xsrf.value) {
 .auth-title {
   font-family: var(--font-display);
   font-size: 28px;
-  font-weight: 700;
+  font-weight: 600;
   line-height: 1.1;
   letter-spacing: -0.01em;
   color: var(--candle);

app/pages/auth/logout-success.vue

@@ -46,7 +46,7 @@ useHead({ title: "Signed Out — Ghost Guild" });
 .auth-title {
   font-family: var(--font-display);
   font-size: 28px;
-  font-weight: 700;
+  font-weight: 600;
   line-height: 1.1;
   letter-spacing: -0.01em;
   color: var(--candle);

app/pages/auth/oidc-error.vue

@@ -70,7 +70,7 @@ const hasDetail = computed(
 .auth-title {
   font-family: var(--font-display);
   font-size: 28px;
-  font-weight: 700;
+  font-weight: 600;
   line-height: 1.1;
   letter-spacing: -0.01em;
   color: var(--candle);
@@ -97,7 +97,7 @@ const hasDetail = computed(
 
 .auth-detail-code {
   color: var(--ember);
-  font-weight: 700;
+  font-weight: 600;
   margin: 0 0 4px;
 }
 

app/pages/auth/wiki-login.vue

@@ -8,6 +8,7 @@ const uid = route.query.uid as string;
 
 const email = ref("");
 const sent = ref(false);
+const notRegistered = ref(false);
 const loading = ref(false);
 const error = ref("");
 
@@ -15,13 +16,21 @@ async function sendMagicLink() {
   if (!email.value || !uid) return;
   loading.value = true;
   error.value = "";
+  notRegistered.value = false;
 
   try {
-    await $fetch("/oidc/interaction/login", {
-      method: "POST",
-      body: { email: email.value, uid },
-    });
-    sent.value = true;
+    const response = await $fetch<{ success: boolean; registered: boolean }>(
+      "/oidc/interaction/login",
+      {
+        method: "POST",
+        body: { email: email.value, uid },
+      }
+    );
+    if (response.registered === false) {
+      notRegistered.value = true;
+    } else {
+      sent.value = true;
+    }
   } catch (e: any) {
     error.value =
       e?.data?.statusMessage || "Something went wrong. Please try again.";
@@ -29,6 +38,12 @@ async function sendMagicLink() {
     loading.value = false;
   }
 }
+
+function resetForm() {
+  sent.value = false;
+  notRegistered.value = false;
+  email.value = "";
+}
 </script>
 
 <template>
@@ -39,11 +54,11 @@ async function sendMagicLink() {
         <h1 class="wiki-login-title">Wiki</h1>
       </header>
 
-      <hr class="section-divider" />
+      <hr class="section-divider" >
 
       <Transition name="wiki-fade" mode="out-in">
         <form
-          v-if="!sent"
+          v-if="!sent && !notRegistered"
           key="form"
           class="wiki-login-form"
           @submit.prevent="sendMagicLink"
@@ -58,7 +73,7 @@ async function sendMagicLink() {
               autocomplete="email"
               placeholder="you@example.com"
               :disabled="loading"
-            />
+            >
           </div>
 
           <p
@@ -89,7 +104,7 @@ async function sendMagicLink() {
         </form>
 
         <div
-          v-else
+          v-else-if="sent"
           key="sent"
           class="wiki-login-sent"
           role="status"
@@ -99,13 +114,35 @@ async function sendMagicLink() {
           <p class="wiki-login-sent-detail">
             A sign-in link was sent to <strong>{{ email }}</strong>
           </p>
-          <button
-            class="wiki-login-reset"
-            @click="
-              sent = false;
-              email = '';
-            "
-          >
+          <button class="wiki-login-reset" @click="resetForm">
+            Try a different email
+          </button>
+        </div>
+
+        <div
+          v-else
+          key="not-registered"
+          class="wiki-login-sent"
+          role="status"
+          aria-live="polite"
+        >
+          <h2 class="wiki-login-sent-heading">Not a member yet</h2>
+          <p class="wiki-login-sent-detail">
+            <strong>{{ email }}</strong> isn't registered as a Ghost Guild
+            member. If you've pre-registered, an admin needs to invite you
+            before you can sign in.
+          </p>
+          <p class="wiki-login-sent-detail">
+            <a href="https://babyghosts.org/ghost-guild/" class="wiki-login-link"
+              >Pre-register at Baby Ghosts</a
+            >
+            or email
+            <a href="mailto:hello@babyghosts.org" class="wiki-login-link"
+              >hello@babyghosts.org</a
+            >
+            if you think this is a mistake.
+          </p>
+          <button class="wiki-login-reset" @click="resetForm">
             Try a different email
           </button>
         </div>
@@ -135,8 +172,8 @@ async function sendMagicLink() {
 
 .wiki-login-title {
   font-family: var(--font-display);
-  font-size: 32px;
-  font-weight: 700;
+  font-size: 36px;
+  font-weight: 600;
   line-height: 1.1;
   letter-spacing: -0.01em;
   color: var(--candle);
@@ -203,7 +240,7 @@ async function sendMagicLink() {
 .wiki-login-sent-heading {
   font-family: var(--font-display);
   font-size: 20px;
-  font-weight: 700;
+  font-weight: 600;
   color: var(--text-bright);
   margin: 0;
 }
@@ -220,6 +257,16 @@ async function sendMagicLink() {
   font-weight: 600;
 }
 
+.wiki-login-link {
+  color: var(--candle);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.wiki-login-link:hover {
+  color: var(--candle-dim);
+}
+
 .wiki-login-reset {
   font-family: "Commit Mono", monospace;
   font-size: 12px;

app/pages/board.vue

@@ -1,21 +1,24 @@
 <template>
   <PageShell title="Bulletin Board" :subtitle="pageSubtitle">
-    <!-- Action bar -->
+    <p class="page-intro">
+      Make offers and requests related to shared interests and cooperative
+      topics.
+    </p>
     <div class="action-bar">
+      <button
+        v-if="cooperativeTags.length > 0"
+        type="button"
+        class="drawer-btn"
+        @click="showTagsDrawer = !showTagsDrawer"
+      >
+        Tags...
+        <span v-if="activeTagFilter" class="tag-count-badge">1</span>
+      </button>
       <button type="button" class="new-post-btn" @click="openNewForm">
         + New Post
       </button>
     </div>
 
-    <!-- Tags Drawer Toggle -->
-    <div v-if="cooperativeTags.length > 0" class="tags-drawer-toggle">
-      <button type="button" class="drawer-btn" @click="showTagsDrawer = !showTagsDrawer">
-        Tags...
-        <span v-if="activeTagFilter" class="tag-count-badge">1</span>
-      </button>
-    </div>
-
-    <!-- Tags Drawer -->
     <div v-if="showTagsDrawer && cooperativeTags.length > 0" class="tags-drawer">
       <div class="skills-bar">
         <span class="tag-label">Filter:</span>
@@ -40,7 +43,6 @@
       </div>
     </div>
 
-    <!-- Inline form -->
     <div v-if="showForm" class="form-wrapper">
       <BoardPostForm
         :post="editingPost"
@@ -50,7 +52,6 @@
       />
     </div>
 
-    <!-- Content -->
     <ClientOnly>
       <div v-if="loading" class="loading-state">
         <p>Loading board...</p>
@@ -73,8 +74,11 @@
             :channels="channels"
             :tags="cooperativeTags"
             :editable="isAuthor(post)"
+            :pending-delete="pendingDeleteId === post._id"
             @edit="handleEdit"
-            @delete="handleDelete"
+            @delete="requestDelete"
+            @confirm-delete="confirmDelete"
+            @cancel-delete="cancelDelete"
           />
         </div>
       </template>
@@ -103,6 +107,7 @@ const activeTagFilter = ref(null)
 
 const showForm = ref(false)
 const editingPost = ref(null)
+const pendingDeleteId = ref(null)
 
 const currentMemberId = computed(() => memberData.value?._id || null)
 
@@ -144,12 +149,18 @@ const handleEdit = (post) => {
   }
 }
 
-const handleDelete = async (post) => {
-  if (typeof window === 'undefined') return
-  const ok = window.confirm('Delete this post? This cannot be undone.')
-  if (!ok) return
+const requestDelete = (post) => {
+  pendingDeleteId.value = post._id
+}
+
+const cancelDelete = () => {
+  pendingDeleteId.value = null
+}
+
+const confirmDelete = async (post) => {
   try {
     await deletePost(post._id)
+    pendingDeleteId.value = null
   } catch (err) {
     toast.add({
       title: 'Failed to delete post',
@@ -197,11 +208,21 @@ onMounted(async () => {
 </script>
 
 <style scoped>
+.page-intro {
+  padding: 12px 24px 0;
+  color: var(--text-dim);
+  font-size: 13px;
+  line-height: 1.65;
+  max-width: 640px;
+}
+
 .action-bar {
   padding: 12px 24px;
   border-bottom: 1px dashed var(--border);
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
 }
 
 .new-post-btn {
@@ -219,12 +240,12 @@ onMounted(async () => {
   border-style: solid;
   background: rgba(154, 116, 32, 0.08);
 }
+.new-post-btn:focus-visible {
+  outline: 2px dashed var(--candle);
+  outline-offset: 2px;
+}
 
 /* ---- TAGS DRAWER ---- */
-.tags-drawer-toggle {
-  padding: 8px 24px;
-  border-bottom: 1px dashed var(--border);
-}
 .drawer-btn {
   font-family: "Commit Mono", monospace;
   font-size: 11px;
@@ -242,6 +263,10 @@ onMounted(async () => {
   border-color: var(--candle-faint);
   color: var(--text);
 }
+.drawer-btn:focus-visible {
+  outline: 2px dashed var(--candle);
+  outline-offset: 2px;
+}
 .tag-count-badge {
   font-size: 9px;
   background: var(--candle-faint);
@@ -288,6 +313,11 @@ onMounted(async () => {
   color: var(--candle);
   background: rgba(154, 116, 32, 0.08);
 }
+.skills-bar .skill-tag:focus-visible,
+.more-btn:focus-visible {
+  outline: 2px dashed var(--candle);
+  outline-offset: 2px;
+}
 .more-btn {
   font-family: "Commit Mono", monospace;
   font-size: 10px;
@@ -327,13 +357,13 @@ onMounted(async () => {
 
 /* ---- LOADING / EMPTY ---- */
 .loading-state {
-  padding: 60px 24px;
+  padding: 64px 24px;
   text-align: center;
   color: var(--text-faint);
   font-size: 12px;
 }
 .empty-state {
-  padding: 60px 24px;
+  padding: 64px 24px;
   text-align: center;
 }
 .empty-title {
@@ -355,11 +385,11 @@ onMounted(async () => {
   }
 }
 @media (max-width: 768px) {
-  .tags-drawer-toggle {
-    padding: 8px 20px;
+  .action-bar {
+    padding: 12px 16px;
   }
   .skills-bar {
-    padding: 10px 20px;
+    padding: 10px 16px;
   }
   .post-grid,
   .form-wrapper {

app/pages/coming-soon.vue

@@ -124,7 +124,7 @@ const handleLogout = async () => {
 .coming-soon-title {
   font-family: var(--font-display);
   font-size: 3rem;
-  font-weight: 700;
+  font-weight: 600;
   color: var(--text-bright);
   margin-bottom: 8px;
 }

app/pages/community-guidelines.vue

@@ -0,0 +1,377 @@
+<template>
+  <PageShell title="Community Guidelines" subtitle="What you're agreeing to when you join Ghost Guild">
+    <div class="guidelines-prose">
+      <section class="guidelines-section">
+        <h2>Welcome</h2>
+        <p>
+          Ghost Guild is a community for game workers exploring cooperative and
+          worker-centric models. By joining, you're becoming part of a growing
+          community of practice built on mutual support, shared learning, and
+          solidarity.
+        </p>
+        <p>
+          This page covers everything you're agreeing to as a member. Related
+          policies are linked throughout and are part of this agreement.
+        </p>
+      </section>
+
+      <section class="guidelines-section">
+        <h2>What Membership Means</h2>
+        <p>
+          Ghost Guild membership is about community and participation, not
+          access to hidden content. Every member gets the same access to
+          resources, events, and community spaces regardless of what they
+          contribute financially.
+        </p>
+        <p>
+          When you join Ghost Guild, you become a Class B member of Baby
+          Ghosts, our parent charity. Class A membership is held by a small
+          group involved in governance, mainly our directors. Class A and
+          Class B have equal access to resources, community, events, and the
+          Solidarity Fund. Voting at the Annual General Meeting is limited
+          to Class A members, as set out in our
+          <NuxtLink to="/policies/by-laws">by-laws</NuxtLink>.
+        </p>
+
+        <h3>The three circles</h3>
+        <p>
+          Our three membership circles describe where you are in your journey
+          with cooperative models. They're not a hierarchy.
+        </p>
+        <ul>
+          <li>
+            <strong>Community Circle:</strong> for folks learning about
+            cooperative principles
+          </li>
+          <li>
+            <strong>Founder Circle:</strong> for those actively building a
+            cooperative studio
+          </li>
+          <li>
+            <strong>Practitioner Circle:</strong> for experienced cooperative
+            studio leaders
+          </li>
+        </ul>
+        <p>
+          You can move between circles as your work and interests evolve. Just
+          reach out to the Membership Committee when you're ready.
+        </p>
+
+        <h3>Solidarity economics</h3>
+        <p>
+          We operate on a pay-what-you-can model. Your contribution is fully
+          decoupled from your circle. Members with more financial capacity help
+          make space for members with less.
+        </p>
+        <p>
+          If money is tight, choose the $0 option. If you have more capacity,
+          contributing at a higher tier supports others. You can adjust your
+          contribution anytime as your situation changes.
+        </p>
+        <p>
+          The Solidarity Fund is administered by the Membership Committee, and
+          its status is reported to the community each year.
+        </p>
+      </section>
+
+      <section class="guidelines-section">
+        <h2>Your Rights as a Member</h2>
+        <p>As a Ghost Guild member, you have:</p>
+        <ul>
+          <li>
+            Equal access to resources, events, community spaces, and the
+            Solidarity Fund, regardless of circle or contribution level
+          </li>
+          <li>Support from the Solidarity Fund if you face financial barriers</li>
+          <li>The ability to move between circles as your journey evolves</li>
+          <li>
+            Privacy protection in line with our
+            <NuxtLink to="/policies/privacy">Privacy Policy</NuxtLink>
+          </li>
+        </ul>
+      </section>
+
+      <section class="guidelines-section">
+        <h2>Your Responsibilities as a Member</h2>
+        <p>As a Ghost Guild member, you commit to:</p>
+        <ol>
+          <li>
+            Upholding Baby Ghosts' and Gamma Space's shared values, including
+            cooperation, mutual support, and equity
+          </li>
+          <li>
+            Treating fellow members with care and following our
+            <NuxtLink to="/policies/code-of-conduct">Code of Conduct</NuxtLink>
+            at all times
+          </li>
+          <li>
+            Participating within your capacity. This is a community of
+            practice. Show up in whatever way works for you.
+          </li>
+          <li>
+            Contributing dues in line with your ability, or working with the
+            Membership Committee to access the Solidarity Fund
+          </li>
+          <li>
+            Approaching disagreements with openness and using our
+            <NuxtLink to="/policies/conflict-resolution">Conflict Resolution Policy</NuxtLink>
+            when conflicts arise
+          </li>
+        </ol>
+
+        <h3>Community privacy</h3>
+        <p>
+          Our community spaces, including our shared Slack workspace, operate
+          with an assumption of privacy. This means:
+        </p>
+        <ul>
+          <li>
+            Don't share screenshots, message content, or other community
+            content externally without the explicit consent of everyone
+            involved
+          </li>
+          <li>
+            Don't contribute community conversations, messages, or member
+            content to generative AI tools like ChatGPT or Claude. This
+            protects everyone's privacy and contributions.
+          </li>
+          <li>
+            Violations of these privacy norms can result in removal from the
+            community
+          </li>
+        </ul>
+      </section>
+
+      <section class="guidelines-section">
+        <h2>Contributing to the Commons</h2>
+        <p>
+          The Ghost Guild wiki at
+          <a href="https://wiki.ghostguild.org">wiki.ghostguild.org</a> is a
+          knowledge commons. Anything you contribute to it is automatically and
+          irrevocably licensed under the
+          <a href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>
+          (CC-BY-SA 4.0) at the moment you post it.
+        </p>
+        <p>In plain terms:</p>
+        <ul>
+          <li>You still hold the copyright to what you wrote</li>
+          <li>
+            Anyone (members, the public, other cooperatives, organizations
+            adapting the material) can use, share, adapt, and build on your
+            contribution, including for commercial purposes, as long as they
+            credit you and release their derivatives under the same license
+          </li>
+          <li>
+            You can't withdraw your contribution from the commons later, even
+            if you leave Ghost Guild
+          </li>
+          <li>
+            If wiki material gets republished elsewhere (like on
+            <a href="https://coop.love">coop.love</a>), it stays under
+            CC-BY-SA 4.0 and you stay credited
+          </li>
+        </ul>
+        <p>
+          This is how a knowledge commons works, and it's central to what Ghost
+          Guild is doing. If you have something you'd rather keep private or
+          under a more restrictive license, don't put it in the wiki.
+        </p>
+        <p>
+          Profile information, bulletin board posts, comments in member-only
+          spaces, and direct messages aren't part of the commons and stay under
+          your control. See our
+          <NuxtLink to="/policies/terms">Terms of Service</NuxtLink> for the
+          details.
+        </p>
+      </section>
+
+      <section class="guidelines-section">
+        <h2>Our Privacy Commitments</h2>
+        <p>
+          Your personal information is used to administer your membership and
+          to communicate with you about Ghost Guild.
+        </p>
+        <p>
+          We use a small number of third-party services to run the platform
+          (payment processing, email, hosting, analytics). Our
+          <NuxtLink to="/policies/privacy">Privacy Policy</NuxtLink> lists who
+          they are and what they see.
+        </p>
+        <p>
+          We don't sell your data, share it for marketing, or feed any community
+          content into generative AI tools.
+        </p>
+      </section>
+
+      <section class="guidelines-section">
+        <h2>Membership Terms</h2>
+        <p>
+          Membership is valid for one year from joining or renewal. Dues can be
+          paid monthly or annually, and renewal happens by continuing dues
+          payments or arranging support through the Solidarity Fund.
+        </p>
+        <p>
+          You can adjust your contribution to any amount, including $0, at any
+          time. There's no minimum contribution to maintain membership in good
+          standing. A failed monthly payment doesn't end your membership. If a
+          payment doesn't go through, we'll reach out to work it out.
+        </p>
+        <p>
+          You can end your membership at any time by contacting the Membership
+          Committee. In rare cases, membership may be ended for serious
+          violations of these guidelines, following the process in our
+          <NuxtLink to="/policies/conflict-resolution">Conflict Resolution Policy</NuxtLink>.
+          Dues are not refunded.
+        </p>
+        <p>
+          If you leave, your wiki contributions remain in the commons under
+          their CC-BY-SA 4.0 license. Your other personal information is handled
+          according to the retention rules in our
+          <NuxtLink to="/policies/privacy">Privacy Policy</NuxtLink>.
+        </p>
+      </section>
+
+      <section class="guidelines-section">
+        <h2>Related Policies</h2>
+        <p>These policies are part of what you agree to by joining:</p>
+        <ul>
+          <li><NuxtLink to="/policies/code-of-conduct">Code of Conduct</NuxtLink></li>
+          <li><NuxtLink to="/policies/conflict-resolution">Conflict Resolution Policy</NuxtLink></li>
+          <li><NuxtLink to="/policies/privacy">Privacy Policy</NuxtLink></li>
+          <li><NuxtLink to="/policies/terms">Terms of Service</NuxtLink></li>
+        </ul>
+      </section>
+
+      <section class="guidelines-section">
+        <h2>Agreement</h2>
+        <p>
+          By joining Ghost Guild, you're confirming that you've read,
+          understood, and agree to these community guidelines and the policies
+          linked above.
+        </p>
+        <p class="welcome-line">Welcome to the community, Ghostie!</p>
+      </section>
+    </div>
+  </PageShell>
+</template>
+
+<script setup>
+useHead({
+  title: 'Community Guidelines · Ghost Guild',
+})
+</script>
+
+<style scoped>
+.guidelines-prose {
+  max-width: 720px;
+  padding: 32px;
+}
+
+.guidelines-section {
+  padding: 28px 0;
+  border-bottom: 1px dashed var(--border);
+}
+.guidelines-section:last-child {
+  border-bottom: none;
+}
+
+.guidelines-section h2 {
+  font-family: "Brygada 1918", serif;
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--text-bright);
+  letter-spacing: -0.01em;
+  margin-bottom: 16px;
+  line-height: 1.25;
+}
+
+.guidelines-section h3 {
+  font-family: "Commit Mono", monospace;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-bright);
+  margin: 20px 0 10px;
+}
+
+.guidelines-section p {
+  font-size: 13px;
+  color: var(--text-dim);
+  line-height: 1.7;
+  margin-bottom: 12px;
+}
+
+.guidelines-section ul {
+  list-style: none;
+  padding: 0;
+  margin: 8px 0 14px;
+}
+.guidelines-section ul li {
+  position: relative;
+  padding: 2px 0 2px 16px;
+  font-size: 13px;
+  color: var(--text-dim);
+  line-height: 1.7;
+  margin-bottom: 4px;
+}
+.guidelines-section ul li::before {
+  content: "›";
+  position: absolute;
+  left: 0;
+  top: 2px;
+  color: var(--candle-faint);
+  font-size: 14px;
+  line-height: 1.7;
+}
+
+.guidelines-section ol {
+  list-style: none;
+  counter-reset: guideline-item;
+  padding: 0;
+  margin: 8px 0 14px;
+}
+.guidelines-section ol li {
+  counter-increment: guideline-item;
+  position: relative;
+  padding: 2px 0 2px 28px;
+  font-size: 13px;
+  color: var(--text-dim);
+  line-height: 1.7;
+  margin-bottom: 4px;
+}
+.guidelines-section ol li::before {
+  content: counter(guideline-item) ".";
+  position: absolute;
+  left: 0;
+  top: 2px;
+  width: 22px;
+  color: var(--candle-faint);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  padding-right: 6px;
+}
+
+.guidelines-section a {
+  color: var(--candle);
+}
+
+.guidelines-section strong {
+  color: var(--text-bright);
+  font-weight: 600;
+}
+
+.welcome-line {
+  font-family: "Brygada 1918", serif;
+  font-style: italic;
+  color: var(--text-bright);
+  font-size: 16px;
+  margin-top: 12px;
+}
+
+@media (max-width: 640px) {
+  .guidelines-prose {
+    padding: 20px 16px;
+  }
+}
+</style>

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

@@ -11,9 +11,18 @@
 
     <!-- FILTER BAR -->
     <FilterBar v-model="activeFilter" :filters="filterOptions">
-      <label class="filter-toggle">
-        <input v-model="includePastEvents" type="checkbox" /> Show past events
-      </label>
+      <button
+        type="button"
+        class="past-toggle"
+        :class="{ active: includePastEvents }"
+        :aria-pressed="includePastEvents"
+        @click="includePastEvents = !includePastEvents"
+      >
+        <span class="past-toggle-box" aria-hidden="true">
+          <span v-if="includePastEvents" class="past-toggle-check">×</span>
+        </span>
+        Show past events
+      </button>
     </FilterBar>
 
     <!-- EVENT LIST -->
@@ -53,6 +62,14 @@
             <span :class="{ 'seats-warn': isAlmostFull(event) }">
               {{ event.registeredCount || 0 }}/{{ event.maxAttendees }} seats
             </span>
+            <span v-if="isSoldOut(event)" class="capacity-badge sold-out"
+              >Sold out</span
+            >
+            <span
+              v-else-if="isAlmostFull(event)"
+              class="capacity-badge limited"
+              >Limited tickets</span
+            >
           </template>
           <template v-else>Open</template>
         </span>
@@ -71,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>
@@ -90,6 +107,11 @@
             >
           </div>
         </NuxtLink>
+        <div
+          v-if="activeSeries.length % 2"
+          class="series-box series-box-filler"
+          aria-hidden="true"
+        />
       </div>
     </div>
 
@@ -111,9 +133,8 @@ const filterOptions = [
 const { data: eventsData } = await useFetch("/api/events");
 const { data: seriesData } = await useFetch("/api/series");
 
-const now = new Date();
-
 const filteredEvents = computed(() => {
+  const now = new Date();
   if (!eventsData.value) return [];
   return eventsData.value.filter((event) => {
     if (!includePastEvents.value && new Date(event.startDate) < now)
@@ -154,9 +175,15 @@ const formatLocation = (event) => {
   return event.location;
 };
 
+const isSoldOut = (event) => {
+  if (!event.maxAttendees) return false;
+  return (event.registeredCount || 0) >= event.maxAttendees;
+};
+
 const isAlmostFull = (event) => {
   if (!event.maxAttendees) return false;
-  return (event.registeredCount || 0) / event.maxAttendees > 0.8;
+  if (isSoldOut(event)) return false;
+  return (event.registeredCount || 0) / event.maxAttendees >= 0.8;
 };
 </script>
 
@@ -205,8 +232,12 @@ const isAlmostFull = (event) => {
 .event-row:hover {
   padding-left: 4px;
 }
-.event-row.is-cancelled {
-  opacity: 0.5;
+.event-row.is-cancelled .event-title a {
+  text-decoration: line-through;
+  text-decoration-thickness: 1px;
+}
+.event-row.is-cancelled .event-tagline {
+  text-decoration: line-through;
 }
 
 .event-date-col {
@@ -289,10 +320,29 @@ const isAlmostFull = (event) => {
   color: var(--text-faint);
   white-space: nowrap;
   padding-top: 2px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
 }
 .seats-warn {
   color: var(--ember);
 }
+.capacity-badge {
+  font-size: 9px;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  padding: 1px 5px;
+  border: 1px dashed currentColor;
+  line-height: 1.5;
+  white-space: nowrap;
+}
+.capacity-badge.limited {
+  color: var(--ember);
+}
+.capacity-badge.sold-out {
+  color: var(--text-faint);
+  border-style: solid;
+}
 
 .event-badges {
   display: flex;
@@ -326,14 +376,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 {
@@ -358,17 +415,47 @@ const isAlmostFull = (event) => {
 }
 
 
-.filter-toggle {
-  display: flex;
+.past-toggle {
+  display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
   margin-left: auto;
+  font-family: "Commit Mono", monospace;
   font-size: 11px;
+  letter-spacing: 0.04em;
   color: var(--text-faint);
+  background: transparent;
+  border: 1px dashed var(--border);
+  padding: 4px 10px;
   cursor: pointer;
+  transition: all 0.15s;
 }
-.filter-toggle input {
-  accent-color: var(--candle-dim);
+.past-toggle:hover {
+  border-color: var(--candle-faint);
+  color: var(--text-dim);
+}
+.past-toggle:focus-visible {
+  outline: 2px dashed var(--candle);
+  outline-offset: 3px;
+}
+.past-toggle.active {
+  border-color: var(--candle);
+  border-style: solid;
+  color: var(--candle);
+}
+.past-toggle-box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  border: 1px solid currentColor;
+  flex-shrink: 0;
+}
+.past-toggle-check {
+  font-size: 12px;
+  line-height: 1;
+  color: var(--candle);
 }
 
 .empty {
@@ -399,8 +486,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>

app/pages/index.vue

@@ -87,18 +87,24 @@
       >
         From the Wiki
       </div>
-      <h2>What is a cooperative studio?</h2>
-      <p>
-        A cooperative studio is a game development company owned and governed by
-        the people who work there. Decisions are made collectively. Profits are
-        shared according to contribution, not ownership stake.
-      </p>
-      <p>
-        The games industry is full of stories about crunch, layoffs, and studios
-        that extract value from workers. Cooperatives are one alternative — not
-        the only one, but one worth
-        <a href="https://wiki.ghostguild.org">practicing together</a>.
-      </p>
+      <template v-if="hasCustomWikiFeature">
+        <h2>{{ wikiFeature.title || DEFAULT_WIKI_FEATURE_TITLE }}</h2>
+        <p v-for="(para, i) in customWikiParagraphs" :key="i">{{ para }}</p>
+      </template>
+      <template v-else>
+        <h2>What is a cooperative studio?</h2>
+        <p>
+          A cooperative studio is a game development company owned and governed
+          by the people who work there. Decisions are made collectively. Profits
+          are shared according to contribution, not ownership stake.
+        </p>
+        <p>
+          The games industry is full of stories about crunch, layoffs, and
+          studios that extract value from workers. Cooperatives are one
+          alternative — not the only one, but one worth
+          <a href="https://wiki.ghostguild.org">practicing together</a>.
+        </p>
+      </template>
       <p>
         <a href="https://wiki.ghostguild.org">Read more in the wiki &rarr;</a>
       </p>
@@ -121,6 +127,23 @@ const { data: wikiArticles } = await useFetch("/api/wiki/recent", {
   default: () => [],
 });
 
+const DEFAULT_WIKI_FEATURE_TITLE = "What is a cooperative studio?";
+
+const { data: wikiFeature } = await useFetch(
+  "/api/site-content/homepage.wiki_feature",
+  { default: () => ({ title: "", body: "" }) },
+);
+
+const hasCustomWikiFeature = computed(() => !!wikiFeature.value?.body?.trim());
+
+const customWikiParagraphs = computed(() => {
+  const body = wikiFeature.value?.body?.trim() || "";
+  return body
+    .split(/\n{2,}/)
+    .map((p) => p.trim())
+    .filter(Boolean);
+});
+
 const circleData = [
   {
     value: "community",
@@ -141,7 +164,7 @@ const circleData = [
     label: "Practitioner",
     metaphor: "The alcove",
     blurb:
-      "Where experience is shared and knowledge given back. You're here to teach, advise, mentor, and help shape the program itself. Alumni welcome.",
+      "Where experience is shared and knowledge given back. You're here to support newcomers, help shape the Cooperative Foundations program, and find peers.",
   },
 ];
 

app/pages/join.vue

@@ -32,7 +32,7 @@
           <DashedBox :hoverable="false">
             <div class="section-label">Contribution</div>
             <div class="info-value">
-              ${{ memberData?.contributionTier || "0" }} CAD/month
+              ${{ memberData?.contributionAmount ?? 0 }} CAD/month
             </div>
           </DashedBox>
         </div>
@@ -59,86 +59,43 @@
 
     <!-- Not authenticated: show full join page -->
     <template v-else>
-      <!-- HOW MEMBERSHIP WORKS -->
-      <ParchmentInset>
-        <h2>How membership works</h2>
-        <ul>
-          <li>
-            Full access to the knowledge commons, events, Slack community, and
-            peer support
-          </li>
-          <li>One member, one vote in all decisions</li>
-          <li>Your circle is where you are in your journey, not rank</li>
-          <li>
-            Your contribution is what you can afford ($0--50+/month, separate
-            from your circle)
-          </li>
-          <li>
-            Higher contributions create solidarity spots for those who need them
-          </li>
-        </ul>
-      </ParchmentInset>
-
-      <!-- THREE CIRCLES -->
-      <div class="content-row">
-        <div class="content-block">
-          <div class="section-label" style="color: var(--c-community)">
-            Community
-          </div>
-          <h2>Exploring</h2>
-          <p>
-            For game workers curious about cooperatives and people exploring
-            alternative work models. You might be a solo developer, a student, a
-            researcher, or just someone who heard about this and wants to know
-            more. Start here.
-          </p>
-        </div>
-        <div class="content-block">
-          <div class="section-label" style="color: var(--c-founder)">
-            Founder
-          </div>
-          <h2>Building</h2>
-          <p>
-            For people actively building cooperative studios. You have a team,
-            or you are forming one. You are working through governance, legal
-            structure, revenue sharing, and all the hard parts. You want
-            structured support and peers doing the same thing.
-          </p>
-        </div>
-        <div class="content-block">
-          <div class="section-label" style="color: var(--c-practitioner)">
-            Practitioner
-          </div>
-          <h2>Practicing</h2>
-          <p>
-            For those already running cooperative studios or with deep
-            experience in cooperative practice. You are here to teach, advise,
-            mentor, and help shape the program itself. Alumni.
-          </p>
-        </div>
-      </div>
-
       <!-- CONTRIBUTION + SIGN UP (two columns) -->
-      <div v-if="currentStep === 1" class="join-two-col">
+      <div class="join-two-col">
         <!-- Left: Monthly Contribution -->
         <div class="join-col">
           <div class="section-label" style="margin-bottom: 12px">
-            Monthly Contribution
+            {{
+              cadence === "annual"
+                ? "Annual Contribution"
+                : "Monthly Contribution"
+            }}
           </div>
           <h2>Pay what you can</h2>
           <ul class="tier-list">
             <li><span class="tier-amt">$0</span> I need support right now</li>
-            <li><span class="tier-amt">$5</span> I can contribute</li>
             <li>
-              <span class="tier-amt">$15</span> I can sustain the community
-              (suggested)
+              <span class="tier-amt">{{ formatContributionAmount(5) }}</span> I
+              can contribute
             </li>
-            <li><span class="tier-amt">$30</span> I can support others too</li>
             <li>
-              <span class="tier-amt">$50</span> I want to sponsor multiple
-              members
+              <span class="tier-amt">{{ formatContributionAmount(15) }}</span> I
+              can sustain the community (suggested)
+            </li>
+            <li>
+              <span class="tier-amt">{{ formatContributionAmount(30) }}</span> I
+              can support others too
+            </li>
+            <li>
+              <span class="tier-amt">{{ formatContributionAmount(50) }}</span> I
+              want to sponsor multiple members
             </li>
           </ul>
+          <p class="charity-note">
+            Baby Ghosts Studio Development Fund is a registered Canadian
+            charity. Members who file Canadian taxes can claim their
+            contributions. We'll help you set up tax receipts once you've
+            joined.
+          </p>
           <p class="solidarity-note">
             Pay what you can. If you can pay more, you're making room for
             someone who can't.
@@ -242,24 +199,96 @@
                 </div>
               </div>
               <div class="form-group">
-                <label class="form-label" for="join-contribution"
-                  >Monthly Contribution</label
+                <label class="form-label">Billing Cadence</label>
+                <div class="cadence-radios">
+                  <div class="circle-radio">
+                    <input
+                      id="cadence-monthly"
+                      v-model="cadence"
+                      type="radio"
+                      name="cadence"
+                      value="monthly"
+                    />
+                    <label for="cadence-monthly">
+                      <span class="circle-label-name">Per Month</span>
+                    </label>
+                  </div>
+                  <div class="circle-radio">
+                    <input
+                      id="cadence-annual"
+                      v-model="cadence"
+                      type="radio"
+                      name="cadence"
+                      value="annual"
+                    />
+                    <label for="cadence-annual">
+                      <span class="circle-label-name">Per Year</span>
+                    </label>
+                  </div>
+                </div>
+              </div>
+              <div class="form-group">
+                <label class="form-label" for="join-contribution">
+                  Monthly Contribution
+                </label>
+                <div class="contribution-input-row">
+                  <span class="contribution-currency">$</span>
+                  <input
+                    id="join-contribution"
+                    v-model.number="form.contributionAmount"
+                    type="number"
+                    min="0"
+                    step="1"
+                    inputmode="numeric"
+                    class="contribution-input"
+                  />
+                </div>
+                <div
+                  class="contribution-presets"
+                  role="group"
+                  aria-label="Suggested amounts"
                 >
-                <select
-                  id="join-contribution"
-                  v-model="form.contributionTier"
-                  class="form-select"
-                >
-                  <option value="0">$0/mo -- I need support right now</option>
-                  <option value="5">$5/mo -- I can contribute</option>
-                  <option value="15">
-                    $15/mo -- I can sustain the community (suggested)
-                  </option>
-                  <option value="30">$30/mo -- I can support others too</option>
-                  <option value="50">
-                    $50/mo -- I want to sponsor multiple members
-                  </option>
-                </select>
+                  <button
+                    v-for="preset in CONTRIBUTION_PRESETS"
+                    :key="preset.amount"
+                    type="button"
+                    class="contribution-preset-chip"
+                    @click="form.contributionAmount = preset.amount"
+                  >
+                    ${{ preset.amount }}
+                  </button>
+                </div>
+                <p v-if="guidanceLabel" class="contribution-guidance">
+                  {{ guidanceLabel }}
+                </p>
+              </div>
+              <div v-if="form.contributionAmount > 0" class="form-group">
+                <div class="billing-summary">
+                  <p class="billing-summary-line">
+                    You'll be charged <strong>${{ firstCharge }} today</strong
+                    ><span v-if="cadence === 'annual'">
+                      (${{ form.contributionAmount }}/month &times; 12)</span
+                    >.
+                  </p>
+                  <p class="billing-summary-line">
+                    Then
+                    <strong
+                      >${{ firstCharge }} every
+                      {{ cadence === "annual" ? "year" : "month" }}</strong
+                    >, until you cancel.
+                  </p>
+                </div>
+              </div>
+              <div class="form-group full-width">
+                <label class="checkbox-label">
+                  <input v-model="form.agreedToGuidelines" type="checkbox" />
+                  <span>
+                    I agree to the Ghost Guild
+                    <NuxtLink to="/community-guidelines" target="_blank"
+                      >Community Guidelines</NuxtLink
+                    >.
+                  </span>
+                </label>
               </div>
               <div class="form-group">
                 <button
@@ -274,9 +303,7 @@
               </div>
             </div>
             <p class="form-note">
-              By joining you agree to our
-              <NuxtLink to="/guidelines">community guidelines</NuxtLink>. You
-              can change your circle or contribution at any time from your
+              You can change your circle or contribution at any time from your
               dashboard. Payment is handled securely through
               <a href="https://www.helcim.com" target="_blank" rel="noopener"
                 >Helcim</a
@@ -286,101 +313,72 @@
         </div>
       </div>
 
-      <!-- Step 2: Payment -->
-      <div v-if="currentStep === 2" class="form-section">
-        <h2>Payment Information</h2>
-        <p class="form-intro">
-          You're signing up for the {{ selectedTier.label }} plan -- ${{
-            selectedTier.amount
-          }}
-          CAD / month
+      <!-- HOW MEMBERSHIP WORKS -->
+      <ParchmentInset>
+        <h2>How membership works</h2>
+        <ul>
+          <li>Full access to the knowledge commons, events and workshops, and community</li>
+          <li>Free access to all Ghost Guild events</li>
+          <li>Equal access for every member, regardless of contribution</li>
+          <li>Your circle reflects where you are, not rank</li>
+          <li>Pay what you can ($0&ndash;$50+/month, separate from circle)</li>
+          <li>Higher contributions create solidarity spots for others</li>
+        </ul>
+        <p>
+          Community connection happens in our Slack workspace, joined in monthly
+          onboarding waves &mdash; there may be a short wait after you join.
         </p>
+      </ParchmentInset>
 
-        <!-- Error Message -->
-        <div v-if="errorMessage" class="error-box">
-          {{ errorMessage }}
-        </div>
-
-        <DashedBox :hoverable="false">
-          <p class="payment-instruction">
-            Click "Complete Payment" below to open the secure payment modal and
-            verify your payment method.
-          </p>
-        </DashedBox>
-
-        <div class="button-row" style="margin-top: 24px">
-          <button class="btn" :disabled="isSubmitting" @click="goBack">
-            Back
-          </button>
-          <button
-            class="form-submit"
-            :disabled="isSubmitting"
-            @click="processPayment"
-          >
-            <span v-if="isSubmitting">Processing...</span>
-            <span v-else>Complete Payment</span>
-          </button>
-        </div>
-      </div>
-
-      <!-- Step 3: Confirmation -->
-      <div v-if="currentStep === 3" class="form-section">
-        <h2>Welcome to Ghost Guild!</h2>
-
-        <div v-if="successMessage" class="success-box">
-          {{ successMessage }}
-        </div>
-
-        <DashedBox :hoverable="false">
-          <div class="section-label" style="margin-bottom: 12px">
-            Membership Details
+      <!-- THREE CIRCLES -->
+      <div class="content-row">
+        <div class="content-block">
+          <div class="section-label" style="color: var(--c-community)">
+            Community
           </div>
-          <dl class="details-list">
-            <div class="details-row">
-              <dt>Name</dt>
-              <dd>{{ form.name }}</dd>
-            </div>
-            <div class="details-row">
-              <dt>Email</dt>
-              <dd>{{ form.email }}</dd>
-            </div>
-            <div class="details-row">
-              <dt>Circle</dt>
-              <dd class="capitalize">{{ form.circle }}</dd>
-            </div>
-            <div class="details-row">
-              <dt>Contribution</dt>
-              <dd>{{ selectedTier.label }}</dd>
-            </div>
-            <div v-if="customerCode" class="details-row">
-              <dt>Member ID</dt>
-              <dd>{{ customerCode }}</dd>
-            </div>
-          </dl>
-        </DashedBox>
-
-        <p class="form-note" style="margin-top: 20px">
-          We've sent a confirmation email to {{ form.email }} with your
-          membership details.
-        </p>
-
-        <DashedBox :hoverable="false" style="margin-top: 16px">
-          <p class="redirect-note">
-            You will be automatically redirected to your dashboard in a few
-            seconds...
+          <h2>Exploring</h2>
+          <p>
+            For game workers curious about cooperatives and people exploring
+            alternative work models. You might be a solo developer, a student, a
+            researcher, or just someone who heard about this and wants to know
+            more. Start here.
+          </p>
+        </div>
+        <div class="content-block">
+          <div class="section-label" style="color: var(--c-founder)">
+            Founder
+          </div>
+          <h2>Building</h2>
+          <p>
+            For people actively building cooperative studios. You have a team,
+            or you are forming one. You are working through governance, legal
+            structure, revenue sharing, and all the hard parts. You want
+            structured support and peers doing the same thing.
+          </p>
+        </div>
+        <div class="content-block">
+          <div class="section-label" style="color: var(--c-practitioner)">
+            Practitioner
+          </div>
+          <h2>Practicing</h2>
+          <p>
+            For those already running cooperative studios or with deep
+            experience in cooperative practice. You're here to support newcomers
+            and help shape the Cooperative Foundations program.
           </p>
-        </DashedBox>
-
-        <div class="button-row" style="margin-top: 24px">
-          <NuxtLink to="/member/dashboard" class="form-submit"
-            >Go to Dashboard Now</NuxtLink
-          >
-          <button class="btn" @click="resetForm">
-            Register Another Member
-          </button>
         </div>
       </div>
     </template>
+
+    <!-- Flow overlay: covers the page from form submit through redirect.
+         Lives outside v-if/v-else so it survives the auth state flip that
+         fires after checkMemberStatus() at the end of createSubscription. -->
+    <SignupFlowOverlay
+      :state="flowState"
+      :summary="flowSummary"
+      :error-message="errorMessage"
+      @close="closeFlowOverlay"
+    />
   </div>
 </template>
 
@@ -388,9 +386,9 @@
 import { reactive, ref, computed, onMounted, onUnmounted } from "vue";
 import { getCircleOptions } from "~/config/circles";
 import {
-  getContributionOptions,
   requiresPayment,
-  getContributionTierByValue,
+  CONTRIBUTION_PRESETS,
+  getGuidanceLabel,
 } from "~/config/contributions";
 
 // Auth state
@@ -406,7 +404,8 @@ const form = reactive({
   email: "",
   name: "",
   circle: "community",
-  contributionTier: "15",
+  contributionAmount: 15,
+  agreedToGuidelines: false,
   billingAddress: {
     street: "",
     city: "",
@@ -418,9 +417,17 @@ const form = reactive({
 
 // UI state
 const isSubmitting = ref(false);
-const currentStep = ref(1); // 1: Info, 2: Billing (paid only), 3: Payment, 4: Confirmation
 const errorMessage = ref("");
 const successMessage = ref("");
+const cadence = ref("monthly"); // 'monthly' | 'annual'
+
+// Flow overlay state — drives the post-submit full-viewport UI.
+// 'idle' = overlay hidden; user is editing the form.
+// 'creating-customer' | 'opening-payment' | 'processing-payment'
+//   | 'creating-subscription' = progress states, overlay shows a spinner + label.
+// 'success' = overlay shows confirmation, auto-redirect is queued.
+// 'error' = overlay shows error + Retry/Back buttons.
+const flowState = ref("idle");
 
 // Helcim state
 const customerId = ref(null);
@@ -431,8 +438,12 @@ const paymentToken = ref(null);
 // Circle options from central config
 const circleOptions = getCircleOptions();
 
-// Contribution options from central config
-const contributionOptions = getContributionOptions();
+const formatContributionAmount = (amount) => {
+  if (!amount || amount === 0) return "$0";
+  const display = cadence.value === "annual" ? amount * 12 : amount;
+  const suffix = cadence.value === "annual" ? "/yr" : "/mo";
+  return `$${display}${suffix}`;
+};
 
 // Initialize composables
 const {
@@ -443,115 +454,108 @@ const {
 
 // Form validation
 const isFormValid = computed(() => {
-  return form.name && form.email && form.circle && form.contributionTier;
+  return (
+    form.name &&
+    form.email &&
+    form.circle &&
+    Number.isInteger(form.contributionAmount) &&
+    form.contributionAmount >= 0 &&
+    form.agreedToGuidelines
+  );
 });
 
 // Check if payment is required
 const needsPayment = computed(() => {
-  return requiresPayment(form.contributionTier);
+  return requiresPayment(form.contributionAmount);
 });
 
-// Get selected tier info
-const selectedTier = computed(() => {
-  return getContributionTierByValue(form.contributionTier);
+const guidanceLabel = computed(() => getGuidanceLabel(form.contributionAmount));
+
+const firstCharge = computed(() => {
+  const amount = form.contributionAmount || 0;
+  return cadence.value === "annual" ? amount * 12 : amount;
 });
 
-// Step 1: Create customer
+const flowSummary = computed(() => ({
+  name: form.name,
+  email: form.email,
+  circle: form.circle,
+  contribution: formatContributionAmount(form.contributionAmount),
+}));
+
 const handleSubmit = async () => {
   if (isSubmitting.value || !isFormValid.value) return;
 
   isSubmitting.value = true;
   errorMessage.value = "";
+  flowState.value = "creating-customer";
 
   try {
-    // Create customer in Helcim
+    // Create customer
     const response = await $fetch("/api/helcim/customer", {
       method: "POST",
       body: {
         name: form.name,
         email: form.email,
         circle: form.circle,
-        contributionTier: form.contributionTier,
+        contributionAmount: form.contributionAmount,
+        agreedToGuidelines: form.agreedToGuidelines,
         billingAddress: form.billingAddress,
       },
     });
 
-    if (response.success) {
-      customerId.value = response.customerId;
-      customerCode.value = response.customerCode;
-
-      // Token is now set as httpOnly cookie by the server
-      // No need to manually set cookie on client side
-
-      // Move to next step
-      if (needsPayment.value) {
-        currentStep.value = 2;
-        // Initialize HelcimPay.js session for card verification
-        await initializeHelcimPay(customerId.value, customerCode.value, 0);
-      } else {
-        // For free tier, create subscription directly
-        await createSubscription();
-        // Check member status to ensure user is properly authenticated
-        await checkMemberStatus();
-
-        // Automatically redirect to welcome page after a short delay
-        setTimeout(() => {
-          navigateTo("/welcome");
-        }, 3000); // 3 second delay to show success message
-      }
+    if (!response.success) {
+      throw new Error("Failed to create account.");
     }
-  } catch (error) {
-    console.error("Error creating customer:", error);
-    errorMessage.value =
-      error.data?.message || "Failed to create account. Please try again.";
-  } finally {
-    isSubmitting.value = false;
-  }
-};
 
-// Step 2: Process payment
-const processPayment = async () => {
-  if (isSubmitting.value) return;
+    customerId.value = response.customerId;
+    customerCode.value = response.customerCode;
 
-  isSubmitting.value = true;
-  errorMessage.value = "";
+    // Free tier: no Helcim modal, go straight to subscription.
+    if (!needsPayment.value) {
+      flowState.value = "creating-subscription";
+      await createSubscription();
+      return;
+    }
+
+    // Paid tier: initialize HelcimPay session, then auto-open modal.
+    flowState.value = "opening-payment";
+    await initializeHelcimPay(customerId.value, customerCode.value, 0);
 
-  try {
-    // Verify payment through HelcimPay.js
     const paymentResult = await verifyPayment();
+    if (!paymentResult?.success) {
+      throw new Error("Payment was not completed.");
+    }
+    paymentToken.value = paymentResult.cardToken;
 
-    if (paymentResult.success) {
-      paymentToken.value = paymentResult.cardToken;
+    flowState.value = "processing-payment";
+    await $fetch("/api/helcim/verify-payment", {
+      method: "POST",
+      body: {
+        cardToken: paymentResult.cardToken,
+        customerId: customerId.value,
+      },
+    });
 
-      // Verify payment on server
-      const verifyResult = await $fetch("/api/helcim/verify-payment", {
-        method: "POST",
-        body: {
-          cardToken: paymentResult.cardToken,
-          customerId: customerId.value,
-        },
-      });
+    flowState.value = "creating-subscription";
+    const subscriptionResult = await createSubscription(
+      paymentResult.cardToken,
+    );
 
-      // Create subscription (don't let subscription errors prevent form progression)
-      const subscriptionResult = await createSubscription(
-        paymentResult.cardToken,
-      );
-
-      if (!subscriptionResult || !subscriptionResult.success) {
-        console.warn(
-          "Subscription creation failed but payment succeeded:",
-          subscriptionResult?.error,
-        );
-        // Still progress to success page since payment worked
-        currentStep.value = 3;
-        successMessage.value =
-          "Payment successful! Subscription setup may need manual completion.";
-      }
+    if (!subscriptionResult || subscriptionResult.success === false) {
+      // Payment succeeded but subscription couldn't be created.
+      // Keep overlay in success state; admin follow-up will reconcile.
+      successMessage.value =
+        "Payment successful. Subscription setup may need manual completion.";
+      flowState.value = "success";
     }
   } catch (error) {
-    console.error("Payment process error:", error);
+    console.error("Join flow error:", error);
     errorMessage.value =
-      error.message || "Payment verification failed. Please try again.";
+      error.data?.message ||
+      error.message ||
+      "Something went wrong. Please try again.";
+    flowState.value = "error";
   } finally {
     isSubmitting.value = false;
   }
@@ -565,23 +569,20 @@ const createSubscription = async (cardToken = null) => {
       body: {
         customerId: customerId.value,
         customerCode: customerCode.value,
-        contributionTier: form.contributionTier,
+        contributionAmount: form.contributionAmount,
+        cadence: cadence.value,
         cardToken: cardToken,
       },
     });
 
     if (response.success) {
       subscriptionData.value = response.subscription;
-      currentStep.value = 3;
+      flowState.value = "success";
       successMessage.value = "Your membership is active.";
 
-      // Check member status to ensure user is properly authenticated
-      await checkMemberStatus();
-
-      // Automatically redirect to welcome page after a short delay
-      setTimeout(() => {
-        navigateTo("/welcome");
-      }, 3000); // 3 second delay to show success message
+      // Sign-in cookie is now issued by the email-verify magic link
+      // (see /api/helcim/customer). Don't auto-navigate to a gated page —
+      // the success state instructs the user to check their inbox.
     } else {
       throw new Error("Subscription creation failed - response not successful");
     }
@@ -605,27 +606,9 @@ const createSubscription = async (cardToken = null) => {
   }
 };
 
-// Go back to previous step
-const goBack = () => {
-  if (currentStep.value > 1) {
-    currentStep.value--;
-    errorMessage.value = "";
-  }
-};
-
-// Reset form
-const resetForm = () => {
-  currentStep.value = 1;
-  customerId.value = null;
-  customerCode.value = null;
-  subscriptionData.value = null;
-  paymentToken.value = null;
+const closeFlowOverlay = () => {
+  flowState.value = "idle";
   errorMessage.value = "";
-  successMessage.value = "";
-  form.email = "";
-  form.name = "";
-  form.circle = "community";
-  form.contributionTier = "15";
 };
 
 // Cleanup on unmount
@@ -671,11 +654,12 @@ onUnmounted(() => {
   position: relative;
 }
 :deep(.parchment-inset ul li::before) {
-  content: "--";
+  content: "›";
   position: absolute;
   left: 0;
-  color: var(--candle-dim);
-  opacity: 0.5;
+  color: var(--candle-faint);
+  font-size: 14px;
+  line-height: 1.4;
 }
 
 .parchment-link {
@@ -767,7 +751,7 @@ onUnmounted(() => {
   padding: 0;
 }
 .tier-list li {
-  padding: 5px 0;
+  padding: 4px 0;
   font-size: 12px;
   color: var(--text-dim);
   border-bottom: 1px dashed var(--border);
@@ -789,6 +773,13 @@ onUnmounted(() => {
   margin-top: 16px;
 }
 
+.charity-note {
+  font-size: 12px;
+  color: var(--text-dim);
+  line-height: 1.65;
+  margin-top: 16px;
+}
+
 /* ---- FORM SECTION ---- */
 .form-section {
   padding: 32px;
@@ -843,6 +834,79 @@ onUnmounted(() => {
   color: var(--text-faint);
 }
 
+/* ---- CADENCE RADIOS ---- */
+.cadence-radios {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+}
+
+/* ---- CONTRIBUTION AMOUNT INPUT + CHIPS ---- */
+.contribution-input-row {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.contribution-currency {
+  font-weight: 600;
+}
+.contribution-input {
+  flex: 1;
+  padding: 0.5rem 0.75rem;
+  background: var(--input-bg);
+  border: 1px solid var(--parch);
+  font-family: "Commit Mono", monospace;
+  font-size: 1rem;
+}
+.contribution-input:focus {
+  outline: none;
+  border-color: var(--candle);
+}
+.contribution-presets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+.contribution-preset-chip {
+  padding: 0.25rem 0.75rem;
+  background: transparent;
+  border: 1px dashed var(--parch);
+  font-family: "Commit Mono", monospace;
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+.contribution-preset-chip:hover {
+  border-style: solid;
+  border-color: var(--candle);
+}
+.contribution-guidance {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  font-style: italic;
+  color: var(--ink-soft, currentColor);
+}
+
+/* ---- BILLING SUMMARY ---- */
+.billing-summary {
+  padding: 12px 16px;
+  border: 1px dashed var(--border);
+  background: var(--surface);
+}
+.billing-summary-line {
+  font-size: 13px;
+  color: var(--text);
+  line-height: 1.5;
+  margin: 0;
+}
+.billing-summary-line + .billing-summary-line {
+  margin-top: 4px;
+}
+.billing-summary-line strong {
+  color: var(--text-bright);
+  font-weight: 600;
+}
+
 /* ---- CIRCLE RADIOS ---- */
 .circle-radios {
   display: grid;
@@ -961,6 +1025,26 @@ onUnmounted(() => {
   color: var(--candle-dim);
 }
 
+/* ---- CHECKBOX ---- */
+.checkbox-label {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--text-dim);
+  line-height: 1.5;
+}
+.checkbox-label input {
+  margin-top: 3px;
+  flex-shrink: 0;
+}
+.checkbox-label a,
+.checkbox-label :deep(a) {
+  color: var(--candle);
+  text-decoration: underline;
+}
+
 /* ---- ERROR & SUCCESS BOXES ---- */
 .error-box {
   border: 1px dashed var(--ember);
@@ -979,26 +1063,6 @@ onUnmounted(() => {
   max-width: 600px;
 }
 
-/* ---- DETAILS LIST (confirmation) ---- */
-.details-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.details-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  font-size: 13px;
-}
-.details-row dt {
-  color: var(--text-faint);
-}
-.details-row dd {
-  color: var(--text-bright);
-  font-weight: 500;
-}
-
 /* ---- PAYMENT INSTRUCTION ---- */
 .payment-instruction {
   font-size: 13px;

app/pages/member/account.vue

@@ -34,7 +34,7 @@
                     <span
                       class="status-dot"
                       :class="memberData.status || 'active'"
-                    ></span>
+                    />
                     <span>{{
                       formatStatus(memberData.status || "active")
                     }}</span>
@@ -57,9 +57,11 @@
                 </div>
                 <div class="membership-row">
                   <span class="membership-k">Contribution</span>
-                  <span class="membership-v"
-                    >${{ memberData.contributionTier || 0 }} / month</span
-                  >
+                  <span class="membership-v">{{ currentContributionLabel }}</span>
+                </div>
+                <div v-if="nextPaymentDate" class="membership-row">
+                  <span class="membership-k">Next payment</span>
+                  <span class="membership-v">{{ formatNextPaymentDate(nextPaymentDate) }}</span>
                 </div>
                 <div class="membership-row">
                   <span class="membership-k">Member since</span>
@@ -70,6 +72,89 @@
               </div>
             </PageSection>
 
+            <!-- PAYMENT HISTORY (shown when a paid plan is active OR past payments exist) -->
+            <PageSection
+              v-if="memberData.helcimCustomerId && ((memberData.contributionAmount || 0) > 0 || paymentHistory.length > 0)"
+              divider="top"
+            >
+              <div class="section-label">Payment history</div>
+
+              <div v-if="nextPaymentDate" class="next-charge">
+                <span class="next-charge-label">Next charge</span>
+                <span class="next-charge-value">${{ nextChargeAmount }} on {{ formatNextPaymentDate(nextPaymentDate) }}</span>
+              </div>
+
+              <div v-if="paymentHistoryLoading" class="history-card">
+                <div class="history-row history-state">Loading…</div>
+              </div>
+
+              <div
+                v-else-if="paymentHistoryError"
+                class="history-card"
+              >
+                <div class="history-row history-state">
+                  Payment history temporarily unavailable. Try again in a few minutes.
+                </div>
+              </div>
+
+              <div
+                v-else-if="paymentHistory.length === 0"
+                class="history-card"
+              >
+                <div class="history-row history-state">
+                  No payments yet. Your first charge will appear here after your next billing cycle.
+                </div>
+              </div>
+
+              <div v-else class="history-card">
+                <div
+                  v-for="txn in paymentHistory"
+                  :key="txn.id"
+                  class="history-row"
+                >
+                  <span class="history-date">{{ formatTxnDate(txn.date) }}</span>
+                  <span class="history-amount">{{ formatTxnAmount(txn.amount, txn.currency) }}</span>
+                  <span
+                    class="history-status"
+                    :class="`status-${txn.status}`"
+                  >{{ formatTxnStatus(txn.status) }}</span>
+                </div>
+              </div>
+            </PageSection>
+
+            <!-- CHANGE CARD (only for active subscriptions) -->
+            <PageSection
+              v-if="canChangeCard"
+              divider="top"
+            >
+              <div class="section-label">Change card</div>
+              <p class="change-card-hint">
+                Replace the card on file. Future charges will use the new card.
+              </p>
+              <button
+                class="btn btn-primary btn-section"
+                :disabled="isChangingCard"
+                @click="handleChangeCard"
+              >
+                {{ changeCardButtonLabel }}
+              </button>
+            </PageSection>
+
+            <!-- ADVANCED BILLING LINK (escape hatch) -->
+            <PageSection
+              v-if="helcimPortalUrl && memberData.helcimCustomerId"
+              divider="top"
+            >
+              <a
+                :href="helcimPortalUrl"
+                target="_blank"
+                rel="noopener"
+                class="billing-link"
+              >
+                Advanced billing in Helcim &rarr;
+              </a>
+            </PageSection>
+
             <PageSection divider="top">
               <div class="section-label">Email</div>
 
@@ -84,26 +169,26 @@
                 <div class="field">
                   <label>New email address</label>
                   <input
-                    type="email"
                     v-model="newEmail"
+                    type="email"
                     placeholder="you@example.com"
+                    autofocus
                     @keydown.enter="handleUpdateEmail"
                     @keydown.escape="cancelEmailEdit"
-                    autofocus
-                  />
+                  >
                 </div>
                 <div class="email-edit-actions">
                   <button
                     class="btn btn-primary"
-                    @click="handleUpdateEmail"
                     :disabled="isUpdatingEmail || !newEmail.trim()"
+                    @click="handleUpdateEmail"
                   >
                     {{ isUpdatingEmail ? "Saving…" : "Save" }}
                   </button>
                   <button
                     class="btn"
-                    @click="cancelEmailEdit"
                     :disabled="isUpdatingEmail"
+                    @click="cancelEmailEdit"
                   >
                     Cancel
                   </button>
@@ -119,9 +204,12 @@
               <div class="section-label danger">Danger Zone</div>
               <div class="danger-zone">
                 <p>
-                  Cancelling your membership will immediately revoke access to
-                  member-only resources, events, and the Slack workspace.
-                  <strong>This action cannot be easily undone.</strong>
+                  Cancelling closes your account and ends access to member-only
+                  spaces, including Slack.<template v-if="(memberData.contributionAmount || 0) > 0"> If you're cancelling because of a
+                  money issue, the
+                  <NuxtLink to="/community-guidelines">Solidarity Fund</NuxtLink>
+                  and the $0 tier are always available — reach out before you
+                  go.</template>
                 </p>
                 <div v-if="showCancelConfirm" class="cancel-confirm">
                   <p class="cancel-confirm-prompt">
@@ -130,8 +218,8 @@
                   <div class="cancel-confirm-actions">
                     <button
                       class="btn btn-danger"
-                      @click="confirmCancelMembership"
                       :disabled="isCancelling"
+                      @click="confirmCancelMembership"
                     >
                       {{ isCancelling ? "Cancelling…" : "Yes, Cancel" }}
                     </button>
@@ -143,8 +231,8 @@
                 <button
                   v-else
                   class="btn btn-danger"
-                  @click="handleCancelMembership"
                   :disabled="isCancelling"
+                  @click="handleCancelMembership"
                 >
                   Cancel Membership
                 </button>
@@ -157,17 +245,45 @@
             <PageSection>
               <div class="section-label">Change Contribution</div>
 
-              <TierPicker v-model="selectedTier" :tiers="tiers" />
-              <div class="tier-hint">
-                Changes take effect on your next billing cycle
+              <div class="form-group">
+                <label class="form-label" for="account-contribution">
+                  Monthly Contribution
+                </label>
+                <div class="contribution-input-row">
+                  <span class="contribution-currency">$</span>
+                  <input
+                    id="account-contribution"
+                    v-model.number="form.contributionAmount"
+                    type="number"
+                    min="0"
+                    step="1"
+                    inputmode="numeric"
+                    class="contribution-input"
+                  >
+                </div>
+                <div class="contribution-presets" role="group" aria-label="Suggested amounts">
+                  <button
+                    v-for="preset in CONTRIBUTION_PRESETS"
+                    :key="preset.amount"
+                    type="button"
+                    class="contribution-preset-chip"
+                    @click="form.contributionAmount = preset.amount"
+                  >
+                    ${{ preset.amount }}
+                  </button>
+                </div>
+                <p v-if="guidanceLabel" class="contribution-guidance">{{ guidanceLabel }}</p>
+              </div>
+              <div v-if="contributionChangeHint" class="tier-hint">
+                {{ contributionChangeHint }}
               </div>
               <button
                 class="btn btn-primary btn-section"
-                @click="handleUpdateTier"
                 :disabled="
-                  selectedTier === Number(memberData.contributionTier || 0) ||
+                  form.contributionAmount === Number(memberData.contributionAmount || 0) ||
                   isUpdating
                 "
+                @click="handleUpdateContribution"
               >
                 {{ isUpdating ? "Updating…" : "Update Contribution" }}
               </button>
@@ -178,12 +294,13 @@
 
               <CirclePicker
                 v-model="selectedCircle"
+                :saved-value="memberData.circle"
                 :circles="circleOptions"
               />
               <button
                 class="btn btn-primary btn-section"
-                @click="handleUpdateCircle"
                 :disabled="selectedCircle === memberData.circle || isUpdating"
+                @click="handleUpdateCircle"
               >
                 {{ isUpdating ? "Updating…" : "Update Circle" }}
               </button>
@@ -197,15 +314,20 @@
 </template>
 
 <script setup>
+import { CONTRIBUTION_PRESETS, getGuidanceLabel, requiresPayment } from '~/config/contributions';
+import { STATUS_LABELS } from '~/config/memberStatus';
+
 definePageMeta({
   middleware: "auth",
 });
 
 const { memberData, checkMemberStatus } = useAuth();
 const { openLoginModal } = useLoginModal();
+const { initializeHelcimPay, verifyPayment, cleanup: cleanupHelcimPay } = useHelcimPay();
 const toast = useToast();
+const helcimPortalUrl = useRuntimeConfig().public.helcimPortalUrl || '';
 
-const selectedTier = ref(0);
+const form = reactive({ contributionAmount: 0 });
 const selectedCircle = ref("");
 const isUpdating = ref(false);
 const isCancelling = ref(false);
@@ -215,13 +337,68 @@ const showEmailEdit = ref(false);
 const newEmail = ref("");
 const isUpdatingEmail = ref(false);
 
-const tiers = [
-  { amount: 0, display: "$0", label: "I need support right now" },
-  { amount: 5, display: "$5", label: "I can contribute" },
-  { amount: 15, display: "$15", label: "I can sustain the community" },
-  { amount: 30, display: "$30", label: "I can support others too" },
-  { amount: 50, display: "$50", label: "I want to sponsor multiple members" },
-];
+// Payment history state
+const paymentHistory = ref([]);
+const paymentHistoryLoading = ref(false);
+const paymentHistoryError = ref(false);
+const paymentHistoryLoaded = ref(false);
+
+// Next payment (refreshed lazily from Helcim when cached date is stale)
+const refreshedNextBillingDate = ref(null);
+const nextBillingRefreshed = ref(false);
+
+const nextPaymentDate = computed(() => {
+  const m = memberData.value;
+  if (!m) return null;
+  if (m.status !== 'active') return null;
+  if (!Number(m.contributionAmount)) return null;
+  return refreshedNextBillingDate.value || m.nextBillingDate || null;
+});
+
+// Change-card state
+const isChangingCard = ref(false);
+const changeCardButtonLabel = ref("Change card");
+
+const canChangeCard = computed(() => {
+  const m = memberData.value;
+  if (!m) return false;
+  if (!m.helcimCustomerId) return false;
+  if (!["active", "pending_payment"].includes(m.status)) return false;
+  // $0 tier has no subscription to attach a card to
+  if (!requiresPayment(Number(m.contributionAmount || 0))) return false;
+  return true;
+});
+
+const cadence = computed(() => memberData.value?.billingCadence || 'monthly');
+
+const guidanceLabel = computed(() => getGuidanceLabel(form.contributionAmount));
+
+const contributionChangeHint = computed(() => {
+  const current = Number(memberData.value?.contributionAmount || 0);
+  const next = Number(form.contributionAmount || 0);
+  if (current === next) return "";
+  if (current === 0 && next > 0) {
+    const firstCharge = cadence.value === "annual" ? next * 12 : next;
+    return `You'll be charged $${firstCharge} today to start your subscription.`;
+  }
+  if (current > 0 && next === 0) {
+    return "Your paid subscription will be cancelled.";
+  }
+  return "Changes apply on your next billing cycle.";
+});
+
+const currentContributionLabel = computed(() => {
+  const amount = Number(memberData.value?.contributionAmount || 0);
+  if (!amount) return '$0';
+  const displayAmount = cadence.value === 'annual' ? amount * 12 : amount;
+  return cadence.value === 'annual' ? `$${displayAmount} / year` : `$${displayAmount} / month`;
+});
+
+const nextChargeAmount = computed(() => {
+  const amount = Number(memberData.value?.contributionAmount || 0);
+  if (!amount) return null;
+  return cadence.value === 'annual' ? amount * 12 : amount;
+});
 
 const circleOptions = [
   {
@@ -241,13 +418,6 @@ const circleOptions = [
   },
 ];
 
-const STATUS_LABELS = {
-  active: "Active",
-  pending_payment: "Pending",
-  suspended: "Suspended",
-  cancelled: "Cancelled",
-};
-
 const formatStatus = (s) => STATUS_LABELS[s] || s;
 
 const capitalise = (s) => (s ? s.charAt(0).toUpperCase() + s.slice(1) : s);
@@ -255,7 +425,7 @@ const capitalise = (s) => (s ? s.charAt(0).toUpperCase() + s.slice(1) : s);
 // Initialize from member data
 watchEffect(() => {
   if (memberData.value) {
-    selectedTier.value = Number(memberData.value.contributionTier || 0);
+    form.contributionAmount = Number(memberData.value.contributionAmount || 0);
     selectedCircle.value = memberData.value.circle || "community";
   }
 });
@@ -268,21 +438,71 @@ const formatMemberSince = (dateStr) => {
   });
 };
 
-const handleUpdateTier = async () => {
+const formatNextPaymentDate = (dateStr) => {
+  if (!dateStr) return "";
+  const d = new Date(dateStr);
+  if (Number.isNaN(d.getTime())) return "";
+  return d.toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  });
+};
+
+const STALE_WINDOW_MS = 24 * 60 * 60 * 1000;
+
+const isNextBillingStale = (dateStr) => {
+  if (!dateStr) return true;
+  const d = new Date(dateStr);
+  if (Number.isNaN(d.getTime())) return true;
+  return d.getTime() - Date.now() < STALE_WINDOW_MS;
+};
+
+const refreshNextBillingIfStale = async () => {
+  if (nextBillingRefreshed.value) return;
+  const m = memberData.value;
+  if (!m) return;
+  if (m.status !== 'active') return;
+  if (!Number(m.contributionAmount)) return;
+  if (!isNextBillingStale(m.nextBillingDate)) return;
+
+  nextBillingRefreshed.value = true;
+  try {
+    const response = await $fetch("/api/helcim/subscription");
+    const fresh = response?.subscription?.nextBillingDate;
+    if (fresh) refreshedNextBillingDate.value = fresh;
+  } catch (err) {
+    // Silent — fall back to cached value (if any)
+  }
+};
+
+const handleUpdateContribution = async () => {
   isUpdating.value = true;
   try {
     await $fetch("/api/members/update-contribution", {
       method: "POST",
-      body: { contributionTier: String(selectedTier.value) },
+      body: {
+        contributionAmount: form.contributionAmount,
+        cadence: cadence.value,
+      },
     });
     await checkMemberStatus();
-    toast.add({ title: "Contribution updated", color: "green" });
+    toast.add({ title: "Contribution updated", color: "success" });
   } catch (err) {
-    selectedTier.value = Number(memberData.value?.contributionTier || 0);
+    // Paid upgrade without a saved card — route to payment setup instead of erroring.
+    if (err.data?.data?.requiresPaymentSetup) {
+      await navigateTo(
+        `/member/payment-setup?tier=${form.contributionAmount}&circle=${
+          selectedCircle.value || memberData.value?.circle || 'community'
+        }`,
+      );
+      return;
+    }
+    form.contributionAmount = Number(memberData.value?.contributionAmount || 0);
     toast.add({
       title: "Update failed",
       description: err.data?.statusMessage || "Please try again.",
-      color: "red",
+      color: "error",
     });
   } finally {
     isUpdating.value = false;
@@ -297,13 +517,13 @@ const handleUpdateCircle = async () => {
       body: { circle: selectedCircle.value },
     });
     await checkMemberStatus();
-    toast.add({ title: "Circle updated", color: "green" });
+    toast.add({ title: "Circle updated", color: "success" });
   } catch (err) {
     selectedCircle.value = memberData.value?.circle || "community";
     toast.add({
       title: "Update failed",
       description: err.data?.statusMessage || "Please try again.",
-      color: "red",
+      color: "error",
     });
   } finally {
     isUpdating.value = false;
@@ -326,18 +546,163 @@ const handleUpdateEmail = async () => {
     });
     await checkMemberStatus();
     cancelEmailEdit();
-    toast.add({ title: "Email updated", color: "green" });
+    toast.add({ title: "Email updated", color: "success" });
   } catch (err) {
     toast.add({
       title: "Update failed",
       description: err.data?.statusMessage || "Please try again.",
-      color: "red",
+      color: "error",
     });
   } finally {
     isUpdatingEmail.value = false;
   }
 };
 
+// Payment history
+const loadPaymentHistory = async () => {
+  if (paymentHistoryLoaded.value) return;
+  if (!memberData.value?.helcimCustomerId) return;
+  paymentHistoryLoading.value = true;
+  paymentHistoryError.value = false;
+  try {
+    const response = await $fetch("/api/helcim/payment-history");
+    if (response?.error === "unavailable") {
+      paymentHistoryError.value = true;
+      paymentHistory.value = [];
+    } else {
+      paymentHistory.value = Array.isArray(response?.transactions)
+        ? response.transactions
+        : [];
+    }
+  } catch (err) {
+    paymentHistoryError.value = true;
+    paymentHistory.value = [];
+  } finally {
+    paymentHistoryLoading.value = false;
+    paymentHistoryLoaded.value = true;
+  }
+};
+
+onMounted(() => {
+  if (memberData.value?.helcimCustomerId) {
+    loadPaymentHistory();
+  }
+  refreshNextBillingIfStale();
+});
+
+watch(
+  () => memberData.value?.helcimCustomerId,
+  (id) => {
+    if (id && !paymentHistoryLoaded.value) {
+      loadPaymentHistory();
+    }
+  },
+);
+
+watch(
+  () => memberData.value?.status,
+  () => {
+    refreshNextBillingIfStale();
+  },
+);
+
+const formatTxnDate = (iso) => {
+  if (!iso) return "—";
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return "—";
+  return d.toLocaleDateString("en-US", {
+    month: "short",
+    day: "2-digit",
+    year: "numeric",
+  });
+};
+
+const formatTxnAmount = (amount, currency) => {
+  const num = Number(amount) || 0;
+  const cur = currency ? ` ${currency}` : "";
+  return `$${num.toFixed(2)}${cur}`;
+};
+
+const STATUS_BADGE = {
+  paid: "Paid",
+  refunded: "Refunded",
+  failed: "Failed",
+  other: "—",
+};
+
+const formatTxnStatus = (s) => STATUS_BADGE[s] || "—";
+
+// Change card
+const handleChangeCard = async () => {
+  if (isChangingCard.value) return;
+  if (!canChangeCard.value) return;
+
+  isChangingCard.value = true;
+  changeCardButtonLabel.value = "Opening…";
+
+  try {
+    // Fetch current customer id + code
+    const customerResponse = await $fetch("/api/helcim/customer-code");
+    const customerId = customerResponse?.customerId;
+    const customerCode = customerResponse?.customerCode;
+    if (!customerId || !customerCode) {
+      throw new Error("Could not locate customer record");
+    }
+
+    await initializeHelcimPay(customerId, customerCode, 0);
+
+    let paymentResult;
+    try {
+      paymentResult = await verifyPayment();
+    } catch (cancelOrFailure) {
+      // User cancelled or iframe failed — no server call
+      return;
+    }
+
+    if (!paymentResult?.success || !paymentResult?.cardToken) {
+      return;
+    }
+
+    changeCardButtonLabel.value = "Updating…";
+
+    try {
+      await $fetch("/api/helcim/update-card", {
+        method: "POST",
+        body: { cardToken: paymentResult.cardToken },
+      });
+      toast.add({
+        title: "Card updated",
+        description: "Future charges will use your new card.",
+        color: "success",
+      });
+    } catch (err) {
+      console.error("[change-card] update failed", err);
+      toast.add({
+        title: "Could not update card",
+        description: "Please try again.",
+        color: "error",
+        actions: [
+          {
+            label: "Retry",
+            onClick: () => handleChangeCard(),
+          },
+        ],
+      });
+    }
+  } catch (err) {
+    console.error("[change-card] flow failed", err);
+    toast.add({
+      title: "Could not update card",
+      description: "Please try again.",
+      color: "error",
+    });
+  } finally {
+    cleanupHelcimPay();
+    isChangingCard.value = false;
+    changeCardButtonLabel.value = "Change card";
+  }
+};
+
 const showCancelConfirm = ref(false);
 
 const handleCancelMembership = () => {
@@ -359,13 +724,13 @@ const confirmCancelMembership = async () => {
         color: "neutral",
       });
     } else {
-      toast.add({ title: "Membership cancelled", color: "orange" });
+      toast.add({ title: "Membership cancelled", color: "warning" });
     }
   } catch (err) {
     toast.add({
       title: "Cancellation failed",
       description: err.data?.statusMessage || "Please try again.",
-      color: "red",
+      color: "error",
     });
   } finally {
     isCancelling.value = false;
@@ -523,9 +888,136 @@ const confirmCancelMembership = async () => {
   margin-bottom: 12px;
 }
 
+/* ---- CONTRIBUTION AMOUNT INPUT + CHIPS ---- */
+.contribution-input-row {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.contribution-currency {
+  font-weight: 600;
+}
+.contribution-input {
+  flex: 1;
+  padding: 0.5rem 0.75rem;
+  background: var(--input-bg);
+  border: 1px solid var(--parch);
+  font-family: 'Commit Mono', monospace;
+  font-size: 1rem;
+}
+.contribution-input:focus {
+  outline: none;
+  border-color: var(--candle);
+}
+.contribution-presets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+.contribution-preset-chip {
+  padding: 0.25rem 0.75rem;
+  background: transparent;
+  border: 1px dashed var(--parch);
+  font-family: 'Commit Mono', monospace;
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+.contribution-preset-chip:hover {
+  border-style: solid;
+  border-color: var(--candle);
+}
+.contribution-guidance {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  font-style: italic;
+  color: var(--ink-soft, currentColor);
+}
+
 .btn-section {
   width: 100%;
   text-align: center;
 }
 
+.billing-link {
+  display: inline-block;
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  color: var(--text-faint);
+  text-decoration: none;
+}
+
+.billing-link:hover {
+  color: var(--candle);
+  text-decoration: underline;
+}
+
+/* ---- NEXT CHARGE ---- */
+.next-charge {
+  display: grid;
+  grid-template-columns: 120px 1fr;
+  gap: 0 12px;
+  align-items: center;
+  padding: 10px 20px;
+  font-size: 12px;
+  border: 1px dashed var(--candle);
+  margin-bottom: 12px;
+}
+.next-charge-label {
+  color: var(--text-faint);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  font-size: 11px;
+}
+.next-charge-value {
+  color: var(--text);
+}
+
+/* ---- PAYMENT HISTORY ---- */
+.history-card {
+  border: 1px dashed var(--border);
+  padding: 0;
+  margin-bottom: 12px;
+}
+.history-row {
+  display: grid;
+  grid-template-columns: 120px 1fr auto;
+  gap: 0 12px;
+  align-items: center;
+  padding: 10px 20px;
+  font-size: 12px;
+  border-bottom: 1px dashed var(--border);
+}
+.history-row:last-child {
+  border-bottom: none;
+}
+.history-date {
+  color: var(--text-faint);
+}
+.history-amount {
+  color: var(--text);
+}
+.history-status {
+  color: var(--text-faint);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+}
+.history-status.status-failed {
+  color: var(--ember);
+}
+.history-state {
+  color: var(--text-faint);
+  font-style: italic;
+  display: block;
+  grid-template-columns: 1fr;
+}
+
+/* ---- CHANGE CARD ---- */
+.change-card-hint {
+  font-size: 11px;
+  color: var(--text-faint);
+  margin-bottom: 12px;
+  line-height: 1.6;
+}
+
 </style>

app/pages/member/activity.vue

@@ -1,332 +0,0 @@
-<template>
-  <PageShell
-    title="Activity Log"
-    subtitle="Your recent activity"
-  >
-    <ColumnsLayout cols="events-sidebar" :limit="5">
-      <ClientOnly>
-        <!-- Loading State -->
-        <div v-if="loading && !entries.length" class="state-box">
-          <div class="spinner"></div>
-          <p class="state-text">Loading activity...</p>
-        </div>
-
-        <!-- Timeline -->
-        <div v-else-if="entries.length" class="timeline-wrap">
-          <div class="timeline">
-            <div v-for="entry in entries" :key="entry._id" class="tl-item">
-              <div class="tl-dot">
-                <UIcon :name="getActivity(entry).icon" class="tl-icon" />
-              </div>
-              <div class="tl-time">{{ formatDate(entry.timestamp) }}</div>
-              <div class="tl-text">
-                <template v-if="getActivity(entry).link">
-                  <span>{{ getActivity(entry).text.split(getActivity(entry).linkText)[0] }}</span>
-                  <NuxtLink :to="getActivity(entry).link" class="tl-link">{{ getActivity(entry).linkText }}</NuxtLink>
-                </template>
-                <span v-else>{{ getActivity(entry).text }}</span>
-                <span v-if="entry.performedBy" class="tl-admin-badge">admin</span>
-              </div>
-
-              <!-- Email body expandable -->
-              <div v-if="entry.type === 'email_sent' && getActivity(entry).emailBody" class="tl-email">
-                <button class="tl-email-toggle" @click="toggleEmail(entry._id)">
-                  {{ expandedEmails[entry._id] ? 'Hide email' : 'View email' }}
-                </button>
-                <div v-if="expandedEmails[entry._id]" class="dashed-box tl-email-body">
-                  <pre>{{ getActivity(entry).emailBody }}</pre>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Load More -->
-          <div v-if="hasMore" class="load-more">
-            <button class="btn" :disabled="loadingMore" @click="loadMore">
-              {{ loadingMore ? 'Loading...' : 'Load More' }}
-            </button>
-          </div>
-        </div>
-
-        <!-- Empty State -->
-        <div v-else class="state-box">
-          <div class="state-icon">
-            <UIcon name="i-lucide-activity" />
-          </div>
-          <h2 class="state-heading">No activity yet</h2>
-          <p class="state-text">Your activity will appear here as you use the Guild</p>
-        </div>
-
-        <template #fallback>
-          <div class="state-box">
-            <div class="spinner"></div>
-            <p class="state-text">Loading activity...</p>
-          </div>
-        </template>
-      </ClientOnly>
-    </ColumnsLayout>
-  </PageShell>
-</template>
-
-<script setup>
-import { formatActivity } from '~/utils/activityText'
-
-const entries = ref([])
-const loading = ref(false)
-const loadingMore = ref(false)
-const hasMore = ref(false)
-const nextCursor = ref(null)
-const expandedEmails = ref({})
-
-const getActivity = (entry) => formatActivity(entry)
-
-const toggleEmail = (id) => {
-  expandedEmails.value[id] = !expandedEmails.value[id]
-}
-
-const formatDate = (date) => {
-  const now = new Date()
-  const d = new Date(date)
-  const diffInSeconds = Math.floor((now - d) / 1000)
-
-  if (diffInSeconds < 60) return 'just now'
-  if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)} minutes ago`
-  if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)} hours ago`
-  if (diffInSeconds < 604800) return `${Math.floor(diffInSeconds / 86400)} days ago`
-
-  return d.toLocaleDateString('en-US', {
-    month: 'short',
-    day: 'numeric',
-    year: d.getFullYear() !== now.getFullYear() ? 'numeric' : undefined
-  })
-}
-
-const loadEntries = async () => {
-  loading.value = true
-  try {
-    const data = await $fetch('/api/members/me/activity', {
-      params: { limit: 20 }
-    })
-    entries.value = data.entries
-    hasMore.value = data.hasMore
-    nextCursor.value = data.nextCursor
-  } catch (err) {
-    console.error('Failed to load activity:', err)
-  } finally {
-    loading.value = false
-  }
-}
-
-const loadMore = async () => {
-  if (!nextCursor.value) return
-  loadingMore.value = true
-  try {
-    const data = await $fetch('/api/members/me/activity', {
-      params: { limit: 20, before: nextCursor.value }
-    })
-    entries.value.push(...data.entries)
-    hasMore.value = data.hasMore
-    nextCursor.value = data.nextCursor
-  } catch (err) {
-    console.error('Failed to load more activity:', err)
-  } finally {
-    loadingMore.value = false
-  }
-}
-
-onMounted(loadEntries)
-
-useHead({ title: 'Activity Log - Ghost Guild' })
-</script>
-
-<style scoped>
-/* ---- STATE BOXES ---- */
-.state-box {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 64px 32px;
-  text-align: center;
-}
-
-.state-icon {
-  width: 48px;
-  height: 48px;
-  border: 1px dashed var(--border);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 16px;
-  color: var(--text-faint);
-  font-size: 20px;
-}
-
-.state-heading {
-  font-family: 'Brygada 1918', serif;
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--text-bright);
-  margin-bottom: 6px;
-}
-
-.state-text {
-  font-size: 12px;
-  color: var(--text-dim);
-  margin-bottom: 20px;
-  max-width: 320px;
-}
-
-.spinner {
-  width: 20px;
-  height: 20px;
-  border: 2px dashed var(--candle);
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-  margin-bottom: 12px;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-/* ---- TIMELINE ---- */
-.timeline-wrap {
-  padding: 24px 32px 48px;
-}
-
-.timeline {
-  position: relative;
-  padding-left: 32px;
-}
-
-.timeline::before {
-  content: '';
-  position: absolute;
-  left: 11px;
-  top: 0;
-  bottom: 0;
-  width: 1px;
-  border-left: 1px dashed var(--border);
-}
-
-.tl-item {
-  position: relative;
-  padding: 0 0 24px;
-}
-
-.tl-item:last-child {
-  padding-bottom: 0;
-}
-
-.tl-dot {
-  position: absolute;
-  left: -32px;
-  top: 2px;
-  width: 22px;
-  height: 22px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--bg);
-  border: 1px dashed var(--border);
-  font-size: 12px;
-  color: var(--text-dim);
-}
-
-.tl-icon {
-  width: 12px;
-  height: 12px;
-}
-
-.tl-time {
-  font-size: 11px;
-  color: var(--text-faint);
-  margin-bottom: 2px;
-}
-
-.tl-text {
-  font-size: 13px;
-  color: var(--text);
-  line-height: 1.5;
-  display: flex;
-  align-items: baseline;
-  gap: 4px;
-  flex-wrap: wrap;
-}
-
-.tl-link {
-  color: var(--candle);
-  text-decoration: none;
-  font-weight: 500;
-}
-
-.tl-link:hover {
-  text-decoration: underline;
-}
-
-.tl-admin-badge {
-  font-size: 10px;
-  color: var(--text-faint);
-  border: 1px dashed var(--border);
-  padding: 1px 5px;
-  margin-left: 4px;
-}
-
-/* ---- EMAIL EXPANDABLE ---- */
-.tl-email {
-  margin-top: 4px;
-}
-
-.tl-email-toggle {
-  font-family: 'Commit Mono', monospace;
-  font-size: 11px;
-  color: var(--text-faint);
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  transition: color 0.15s;
-}
-
-.tl-email-toggle:hover {
-  color: var(--candle);
-}
-
-.tl-email-body {
-  margin-top: 6px;
-  padding: 12px;
-  font-size: 12px;
-  color: var(--text-dim);
-  line-height: 1.6;
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.tl-email-body pre {
-  white-space: pre-wrap;
-  word-break: break-word;
-  font-family: 'Commit Mono', monospace;
-  font-size: 12px;
-  margin: 0;
-}
-
-/* ---- LOAD MORE ---- */
-.load-more {
-  display: flex;
-  justify-content: center;
-  padding-top: 8px;
-}
-
-/* ---- RESPONSIVE ---- */
-@media (max-width: 768px) {
-  .timeline-wrap {
-    padding: 20px 20px 40px;
-  }
-
-  .state-box {
-    padding: 48px 20px;
-  }
-}
-</style>

app/pages/member/dashboard.vue

@@ -33,11 +33,15 @@
           <MemberStatusBanner />
 
           <!-- Welcome Header -->
-          <PageHeader :title="`Welcome back, ${memberData?.name || ''}`">
+          <PageHeader :title="welcomeTitle">
             <div class="dashboard-meta">
               <CircleBadge :circle="memberData?.circle || 'community'" />
-              <span>${{ memberData?.contributionTier }} CAD/mo</span>
+              <span>${{ memberData?.contributionAmount ?? 0 }} CAD/mo</span>
             </div>
+            <p v-if="showSlackComingNote" class="slack-coming-note">
+              Slack workspace access is part of your membership. Invitations are
+              sent in monthly onboarding waves &mdash; we'll be in touch.
+            </p>
           </PageHeader>
 
           <!-- Upcoming Events + Quick Actions -->
@@ -90,8 +94,8 @@
                   <strong>How to Subscribe to Your Calendar</strong>
                   <button
                     type="button"
-                    @click="showCalendarInstructions = false"
                     class="ci-close"
+                    @click="showCalendarInstructions = false"
                   >
                     &times;
                   </button>
@@ -169,7 +173,7 @@
               <div class="membership-row">
                 <span class="key">Contribution</span>
                 <span class="val"
-                  >${{ memberData?.contributionTier }} CAD/month</span
+                  >${{ memberData?.contributionAmount ?? 0 }} CAD/month</span
                 >
               </div>
               <div class="membership-row">
@@ -192,14 +196,14 @@
             </div>
 
             <div class="content-block">
-              <div class="section-label">Community</div>
+              <div class="section-label">Bulletin Board</div>
               <DashedBox>
                 <p class="peer-text">
-                  Connect with other members through shared interests and
+                  Make offers and requests related to shared interests and
                   cooperative topics.
                 </p>
                 <NuxtLink to="/board" class="section-link">
-                  Browse the board &rarr;
+                  Browse the Bulletin Board &rarr;
                 </NuxtLink>
               </DashedBox>
             </div>
@@ -221,6 +225,19 @@
 const { memberData, checkMemberStatus } = useAuth();
 const { isActive, statusConfig, isPendingPayment, canPeerSupport } =
   useMemberStatus();
+
+const route = useRoute();
+const isNewSignup = computed(() => route.query.welcome === "1");
+const showSlackComingNote = computed(
+  () =>
+    memberData.value?.status === "active" && !memberData.value?.slackInvited,
+);
+const welcomeTitle = computed(() => {
+  const name = memberData.value?.name || "";
+  return isNewSignup.value
+    ? `Welcome to Ghost Guild, ${name}`
+    : `Welcome back, ${name}`;
+});
 const { completePayment, isProcessingPayment } = useMemberPayment();
 const { trackGoal, isComplete: onboardingComplete } = useOnboarding();
 
@@ -459,6 +476,13 @@ useHead({
   margin-top: 8px;
 }
 
+.slack-coming-note {
+  margin-top: 12px;
+  font-size: 12px;
+  color: var(--text-dim);
+  line-height: 1.65;
+}
+
 .content-row {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));

app/pages/member/payment-setup.vue

@@ -0,0 +1,224 @@
+<template>
+  <PageShell>
+    <ClientOnly>
+      <PageHeader
+        title="Set Up Payment"
+        :subtitle="targetAmount != null ? `Upgrading to $${targetAmount}/month` : 'Payment setup'"
+      />
+
+      <PageSection>
+          <div v-if="step === 'loading'" class="status-block">
+            <p>Preparing payment setup…</p>
+          </div>
+
+          <div v-else-if="step === 'error'" class="status-block">
+            <div class="error-box">{{ errorMessage }}</div>
+            <div class="button-row">
+              <button class="btn" @click="initialize">Try again</button>
+              <NuxtLink to="/member/account" class="btn">Back to account</NuxtLink>
+            </div>
+          </div>
+
+          <div v-else-if="step === 'ready'" class="status-block">
+            <p>
+              To upgrade to <strong>${{ targetAmount }}/month</strong>, we need a
+              payment method on file. Click below to open the secure payment
+              form — we'll verify your card with a $0 authorization and then
+              activate your new tier.
+            </p>
+            <div v-if="errorMessage" class="error-box">{{ errorMessage }}</div>
+            <div class="button-row">
+              <button
+                class="btn btn-primary"
+                :disabled="isProcessing"
+                @click="openModal"
+              >
+                {{ isProcessing ? 'Processing…' : 'Enter payment details' }}
+              </button>
+              <NuxtLink to="/member/account" class="btn">Cancel</NuxtLink>
+            </div>
+          </div>
+
+          <div v-else-if="step === 'success'" class="status-block">
+            <p>Payment setup complete. Redirecting to your account…</p>
+          </div>
+      </PageSection>
+    </ClientOnly>
+  </PageShell>
+</template>
+
+<script setup>
+definePageMeta({ middleware: 'auth' });
+
+const route = useRoute();
+const router = useRouter();
+const toast = useToast();
+const { memberData, checkMemberStatus } = useAuth();
+const { initializeHelcimPay, verifyPayment, cleanup: cleanupHelcim } = useHelcimPay();
+
+const VALID_CIRCLES = ['community', 'founder', 'practitioner'];
+
+const targetAmount = computed(() => {
+  const n = Number(route.query.tier);
+  return Number.isInteger(n) && n > 0 ? n : null;
+});
+const targetCircle = computed(() => {
+  const c = String(route.query.circle || '');
+  return VALID_CIRCLES.includes(c) ? c : null;
+});
+
+const step = ref('loading'); // loading | ready | success | error
+const errorMessage = ref('');
+const isProcessing = ref(false);
+const customerId = ref('');
+const customerCode = ref('');
+const hasExistingCard = ref(false);
+
+const initialize = async () => {
+  errorMessage.value = '';
+  step.value = 'loading';
+
+  if (targetAmount.value == null) {
+    errorMessage.value = 'Missing or invalid target amount.';
+    step.value = 'error';
+    return;
+  }
+
+  try {
+    // Fast-path: when both Helcim ids are already cached on the member doc
+    // AND a card's on file, skip the paid get-or-create-customer round trip.
+    const hasCachedHelcimIds = Boolean(
+      memberData.value?.helcimCustomerId && memberData.value?.helcimCustomerCode
+    );
+
+    let existing = null;
+    let probedExistingCard = false;
+    if (hasCachedHelcimIds) {
+      existing = await $fetch('/api/helcim/existing-card').catch((err) => {
+        console.warn('[payment-setup] existing-card lookup failed, falling back to verify flow:', err);
+        return null;
+      });
+      probedExistingCard = true;
+      if (existing?.cardToken) {
+        customerId.value = memberData.value.helcimCustomerId;
+        customerCode.value = memberData.value.helcimCustomerCode;
+        hasExistingCard.value = true;
+      }
+    }
+
+    if (!hasExistingCard.value) {
+      // Skip HelcimPay verify if a card's already on file — Helcim refuses
+      // to re-save it, breaking retries after a partial-failed signup.
+      const [customer, existingFromFull] = await Promise.all([
+        $fetch('/api/helcim/get-or-create-customer', { method: 'POST' }),
+        probedExistingCard
+          ? Promise.resolve(existing)
+          : $fetch('/api/helcim/existing-card').catch((err) => {
+              console.warn('[payment-setup] existing-card lookup failed, falling back to verify flow:', err);
+              return null;
+            }),
+      ]);
+      customerId.value = customer.customerId;
+      customerCode.value = customer.customerCode;
+      hasExistingCard.value = Boolean(existingFromFull?.cardToken);
+
+      if (!hasExistingCard.value) {
+        await initializeHelcimPay(customerId.value, customerCode.value, 0);
+      }
+    }
+    step.value = 'ready';
+  } catch (err) {
+    console.error('Payment setup init failed:', err);
+    errorMessage.value =
+      err.data?.statusMessage || err.message || 'Failed to initialize payment.';
+    step.value = 'error';
+  }
+};
+
+const openModal = async () => {
+  if (isProcessing.value) return;
+  isProcessing.value = true;
+  errorMessage.value = '';
+
+  try {
+    if (!hasExistingCard.value) {
+      const result = await verifyPayment();
+      if (!result?.success) throw new Error('Payment was not completed.');
+
+      await $fetch('/api/helcim/verify-payment', {
+        method: 'POST',
+        body: {
+          cardToken: result.cardToken,
+          customerId: customerId.value,
+        },
+      });
+    }
+
+    // Update circle first if it changed — update-contribution only touches tier.
+    if (targetCircle.value && targetCircle.value !== memberData.value?.circle) {
+      await $fetch('/api/members/update-circle', {
+        method: 'POST',
+        body: { circle: targetCircle.value },
+      });
+    }
+
+    await $fetch('/api/members/update-contribution', {
+      method: 'POST',
+      // cadence: annual upgrades go through /join; this page is monthly-only
+      body: { contributionAmount: targetAmount.value, cadence: 'monthly' },
+    });
+
+    await checkMemberStatus();
+    step.value = 'success';
+    toast.add({ title: 'Payment method saved', color: 'success' });
+    setTimeout(() => router.push('/member/account'), 1500);
+  } catch (err) {
+    console.error('Payment setup error:', err);
+    errorMessage.value =
+      err.data?.statusMessage || err.message || 'Payment setup failed.';
+    // Re-initialize Helcim session so the user can try again.
+    cleanupHelcim();
+    await initialize();
+  } finally {
+    isProcessing.value = false;
+  }
+};
+
+onMounted(() => {
+  initialize();
+});
+
+onBeforeUnmount(() => {
+  cleanupHelcim();
+});
+
+useHead({ title: 'Set Up Payment - Ghost Guild' });
+</script>
+
+<style scoped>
+.status-block {
+  padding: 12px 0;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text);
+}
+
+.status-block p {
+  margin-bottom: 16px;
+}
+
+.error-box {
+  padding: 12px 14px;
+  border: 1px dashed var(--ember);
+  color: var(--ember);
+  font-size: 12px;
+  margin-bottom: 16px;
+}
+
+.button-row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+</style>

app/pages/member/profile.vue

@@ -1,272 +1,313 @@
 <template>
   <PageShell as="form" @submit.prevent="handleSubmit">
     <ClientOnly>
-    <div v-if="loading" class="loading-state">
-      <p style="color: var(--text-faint)">Loading your profile...</p>
-    </div>
+      <div v-if="loading" class="loading-state">
+        <p style="color: var(--text-faint)">Loading your profile...</p>
+      </div>
 
-    <div v-else-if="!memberData" class="loading-state">
-      <p style="color: var(--text-faint); margin-bottom: 12px">
-        Please sign in to access your profile settings.
-      </p>
-      <button
-        type="button"
-        class="btn btn-primary"
-        @click="
-          openLoginModal({
-            title: 'Sign in to your profile',
-            description: 'Enter your email to manage your profile settings',
-          })
-        "
-      >
-        Sign In
-      </button>
-    </div>
-
-    <template v-else>
-      <!-- PAGE HEADER -->
-      <PageHeader
-        title="Edit Profile"
-        subtitle="How you appear to other members"
-      >
-        <NuxtLink
-          v-if="memberId && memberData?.status === MEMBER_STATUSES.ACTIVE && formData.showInDirectory"
-          :to="`/members/${memberId}`"
-          class="view-profile-link"
+      <div v-else-if="!memberData" class="loading-state">
+        <p style="color: var(--text-faint); margin-bottom: 12px">
+          Please sign in to access your profile settings.
+        </p>
+        <button
+          type="button"
+          class="btn btn-primary"
+          @click="
+            openLoginModal({
+              title: 'Sign in to your profile',
+              description: 'Enter your email to manage your profile settings',
+            })
+          "
         >
-          View my public profile &rarr;
-        </NuxtLink>
-      </PageHeader>
+          Sign In
+        </button>
+      </div>
 
-      <ColumnsLayout cols="2">
-        <template #left>
-          <PageSection>
-            <div class="section-label">Basics</div>
+      <template v-else>
+        <!-- PAGE HEADER -->
+        <PageHeader title="Edit Profile">
+          <NuxtLink
+            v-if="
+              memberId &&
+              memberData?.status === MEMBER_STATUSES.ACTIVE &&
+              formData.showInDirectory
+            "
+            :to="`/members/${memberId}`"
+            class="view-profile-link"
+          >
+            View my public profile &rarr;
+          </NuxtLink>
+        </PageHeader>
 
-            <div class="field">
-              <label>Name</label>
-              <input
-                v-model="formData.name"
-                type="text"
-                placeholder="Your name"
-                required
-              />
-            </div>
+        <ColumnsLayout cols="2">
+          <template #left>
+            <PageSection>
+              <div class="section-label">Basics</div>
+
+              <div class="field">
+                <label>Name</label>
+                <input
+                  v-model="formData.name"
+                  type="text"
+                  placeholder="Your name"
+                  required
+                >
+              </div>
 
-            <div class="row-2">
               <div class="field">
                 <label>Pronouns</label>
                 <input
                   v-model="formData.pronouns"
                   type="text"
                   placeholder="e.g., she/her, they/them"
-                />
-                <PrivacyToggle v-model="formData.pronounsPrivacy" />
+                >
               </div>
               <div class="field">
                 <label>Timezone</label>
-                <input
+                <USelectMenu
                   v-model="formData.timeZone"
-                  type="text"
-                  placeholder="e.g., America/Toronto"
+                  :items="timezoneItems"
+                  value-key="value"
+                  searchable
+                  searchable-placeholder="Search timezones..."
+                  placeholder="Select a timezone"
+                  class="timezone-select"
+                  :ui="{
+                    content: 'tz-content',
+                    item: 'tz-item',
+                    input: 'tz-input',
+                  }"
                 />
-                <PrivacyToggle v-model="formData.timeZonePrivacy" />
               </div>
-            </div>
 
-            <div class="field">
-              <label>Avatar</label>
-              <div class="avatar-row">
-                <button
-                  v-for="ghost in availableGhosts"
-                  :key="ghost.value"
-                  type="button"
-                  class="avatar-option"
-                  :class="{ selected: formData.avatar === ghost.value }"
-                  :title="ghost.label"
-                  @click="formData.avatar = ghost.value"
-                >
-                  <img :src="ghost.image" :alt="ghost.label" />
-                </button>
-              </div>
-              <PrivacyToggle v-model="formData.avatarPrivacy" />
-            </div>
-          </PageSection>
-
-          <PageSection divider="top">
-            <div class="section-label">About You</div>
-
-            <div class="row-2">
               <div class="field">
-                <label>Studio / Organization</label>
-                <input
-                  v-model="formData.studio"
-                  type="text"
-                  placeholder="Studio name"
-                />
-                <PrivacyToggle v-model="formData.studioPrivacy" />
-              </div>
-              <div class="field">
-                <label>Location</label>
-                <input
-                  v-model="formData.location"
-                  type="text"
-                  placeholder="Toronto, ON"
-                />
-                <PrivacyToggle v-model="formData.locationPrivacy" />
-              </div>
-            </div>
-
-            <div class="field">
-              <label>Bio</label>
-              <textarea
-                v-model="formData.bio"
-                rows="4"
-                placeholder="Share your background, interests, and experience..."
-                maxlength="300"
-              ></textarea>
-              <div class="char-count">
-                {{ formData.bio?.length || 0 }} / 300
-              </div>
-              <PrivacyToggle v-model="formData.bioPrivacy" />
-            </div>
-
-            <div class="field">
-              <label>What I Do</label>
-              <CraftTagSelector
-                v-model="formData.craftTags"
-                :tags="craftTags"
-                @suggest="openTagSuggest('craft')"
-              />
-              <PrivacyToggle v-model="formData.craftTagsPrivacy" />
-            </div>
-          </PageSection>
-
-          <PageSection divider="top">
-            <div class="section-label">Visibility</div>
-
-            <div class="toggle-field">
-              <USwitch
-                v-model="formData.showInDirectory"
-                aria-label="Show in Member Directory"
-              />
-              <div class="toggle-label">
-                Show in Member Directory
-                <span class="toggle-sub"
-                  >Your profile will appear in the public member listing</span
-                >
-              </div>
-            </div>
-          </PageSection>
-        </template>
-
-        <template #right>
-          <PageSection>
-            <div class="section-label">Board</div>
-
-            <div class="field">
-              <label>Slack Handle</label>
-              <input
-                v-model="formData.boardSlackHandle"
-                type="text"
-                placeholder="@yourslackname"
-              />
-              <div class="field-help">
-                Shown on your board posts so other members can reach out.
-              </div>
-            </div>
-
-            <div class="posts-header">
-              <div class="posts-heading">Your Posts</div>
-              <NuxtLink to="/board" class="posts-new-link">+ New Post</NuxtLink>
-            </div>
-
-            <div v-if="myPosts.length === 0" class="posts-empty">
-              No posts yet.
-              <NuxtLink to="/board" class="posts-empty-link">
-                Visit the Board
-              </NuxtLink>
-              to share what you're seeking or offering.
-            </div>
-
-            <ul v-else class="posts-list">
-              <li v-for="post in myPosts" :key="post._id" class="post-item">
-                <div class="post-body">
-                  <div class="post-title">{{ post.title }}</div>
-                  <div class="post-excerpt">{{ postExcerpt(post) }}</div>
-                </div>
-                <div class="post-actions">
-                  <NuxtLink to="/board" class="post-action">Edit</NuxtLink>
+                <label>Avatar</label>
+                <div class="avatar-row">
                   <button
+                    v-for="ghost in availableGhosts"
+                    :key="ghost.value"
                     type="button"
-                    class="post-action post-action-danger"
-                    @click="handleDeletePost(post)"
+                    class="avatar-option"
+                    :class="{ selected: formData.avatar === ghost.value }"
+                    :title="ghost.label"
+                    @click="formData.avatar = ghost.value"
                   >
-                    Delete
+                    <img :src="ghost.image" :alt="ghost.label" >
                   </button>
                 </div>
-              </li>
-            </ul>
-          </PageSection>
-
-          <PageSection divider="top">
-            <div class="section-label">Notifications</div>
-
-            <div
-              v-for="toggle in notificationToggles"
-              :key="toggle.key"
-              class="toggle-field"
-            >
-              <USwitch
-                v-model="formData.notifications[toggle.key]"
-                :aria-label="toggle.label"
-              />
-              <div class="toggle-label">
-                {{ toggle.label }}
-                <span class="toggle-sub">{{ toggle.sub }}</span>
               </div>
-            </div>
-          </PageSection>
-        </template>
-      </ColumnsLayout>
+            </PageSection>
 
-      <!-- ======== SAVE BAR ======== -->
-      <div class="save-bar">
-        <button
-          type="submit"
-          class="btn btn-primary"
-          :disabled="saving || !hasChanges"
-        >
-          {{ saving ? "Saving..." : "Save Profile" }}
-        </button>
-        <button type="button" class="btn" @click="resetForm">
-          Reset Changes
-        </button>
-        <span v-if="saveSuccess" class="save-msg save-msg-ok"
-          >Profile updated.</span
-        >
-        <span v-if="saveError" class="save-msg save-msg-err">{{
-          saveError
-        }}</span>
-      </div>
-    </template>
+            <PageSection divider="top">
+              <div class="section-label">About You</div>
 
-    <template #fallback>
-      <div class="loading-state">
-        <p style="color: var(--text-faint)">Loading your profile...</p>
-      </div>
-    </template>
+              <div class="row-2">
+                <div class="field">
+                  <label>Studio / Organization</label>
+                  <input
+                    v-model="formData.studio"
+                    type="text"
+                    placeholder="Studio name"
+                  >
+                </div>
+                <div class="field">
+                  <label>Location</label>
+                  <input
+                    v-model="formData.location"
+                    type="text"
+                    placeholder="Toronto, ON"
+                  >
+                </div>
+              </div>
+
+              <div class="field">
+                <label>Bio</label>
+                <textarea
+                  v-model="formData.bio"
+                  rows="4"
+                  placeholder="Share your background, interests, and experience..."
+                  maxlength="300"
+                />
+                <div class="char-count">
+                  {{ formData.bio?.length || 0 }} / 300
+                </div>
+              </div>
+
+              <div class="field">
+                <label>What I Do</label>
+                <CraftTagSelector
+                  v-model="formData.craftTags"
+                  :tags="craftTags"
+                  @suggest="openTagSuggest('craft')"
+                />
+              </div>
+            </PageSection>
+
+            <PageSection divider="top">
+              <div class="section-label">Visibility</div>
+
+              <div class="toggle-field">
+                <USwitch
+                  v-model="formData.showInDirectory"
+                  aria-label="Show in Member Directory"
+                />
+                <div class="toggle-label">
+                  Show in Member Directory
+                  <span class="toggle-sub"
+                    >Your profile will appear in the private member
+                    directory.</span
+                  >
+                </div>
+              </div>
+            </PageSection>
+          </template>
+
+          <template #right>
+            <PageSection>
+              <div class="section-label">Board</div>
+
+              <div class="field">
+                <label>Gamma Space Slack Handle</label>
+                <input
+                  v-model="formData.boardSlackHandle"
+                  type="text"
+                  placeholder="@yourslackname"
+                >
+                <div class="field-help">
+                  Shown on your board posts so other members can reach out.
+                </div>
+              </div>
+
+              <div class="posts-header">
+                <div class="posts-heading">Your Posts</div>
+                <NuxtLink to="/board" class="posts-new-link"
+                  >+ New Post</NuxtLink
+                >
+              </div>
+
+              <div v-if="myPosts.length === 0" class="posts-empty">
+                No posts yet.
+                <NuxtLink to="/board" class="posts-empty-link">
+                  Visit the Board
+                </NuxtLink>
+                to share what you're seeking or offering.
+              </div>
+
+              <ul v-else class="posts-list">
+                <li v-for="post in myPosts" :key="post._id" class="post-item">
+                  <div class="post-body">
+                    <div class="post-title">{{ post.title }}</div>
+                    <div class="post-excerpt">{{ postExcerpt(post) }}</div>
+                  </div>
+                  <div class="post-actions">
+                    <NuxtLink to="/board" class="post-action">Edit</NuxtLink>
+                    <button
+                      type="button"
+                      class="post-action post-action-danger"
+                      @click="handleDeletePost(post)"
+                    >
+                      Delete
+                    </button>
+                  </div>
+                </li>
+              </ul>
+            </PageSection>
+
+            <PageSection divider="top">
+              <div class="section-label">Notifications</div>
+
+              <div
+                v-for="toggle in notificationToggles"
+                :key="toggle.key"
+                class="toggle-field"
+              >
+                <USwitch
+                  v-model="formData.notifications[toggle.key]"
+                  :aria-label="toggle.label"
+                />
+                <div class="toggle-label">
+                  {{ toggle.label }}
+                  <span class="toggle-sub">{{ toggle.sub }}</span>
+                </div>
+              </div>
+            </PageSection>
+
+            <PageSection divider="top">
+              <div class="section-label">Recent Activity</div>
+
+              <div v-if="activityLoading" class="activity-empty">
+                Loading activity…
+              </div>
+              <ul v-else-if="recentActivity.length" class="activity-list">
+                <li
+                  v-for="entry in recentActivity"
+                  :key="entry._id"
+                  class="activity-item"
+                >
+                  <div class="activity-time">
+                    {{ formatActivityTime(entry.timestamp) }}
+                  </div>
+                  <div class="activity-text">
+                    <template v-if="formatActivity(entry).link">
+                      <span>{{
+                        formatActivity(entry).text.split(
+                          formatActivity(entry).linkText,
+                        )[0]
+                      }}</span>
+                      <NuxtLink
+                        :to="formatActivity(entry).link"
+                        class="activity-link"
+                      >
+                        {{ formatActivity(entry).linkText }}
+                      </NuxtLink>
+                    </template>
+                    <span v-else>{{ formatActivity(entry).text }}</span>
+                  </div>
+                </li>
+              </ul>
+              <div v-else class="activity-empty">
+                Your activity will appear here as you use the Guild.
+              </div>
+            </PageSection>
+          </template>
+        </ColumnsLayout>
+
+        <!-- ======== SAVE BAR ======== -->
+        <div class="save-bar">
+          <button
+            type="submit"
+            class="btn btn-primary"
+            :disabled="saving || !hasChanges"
+          >
+            {{ saving ? "Saving..." : "Save Profile" }}
+          </button>
+          <button type="button" class="btn" @click="resetForm">
+            Reset Changes
+          </button>
+        </div>
+      </template>
+
+      <template #fallback>
+        <div class="loading-state">
+          <p style="color: var(--text-faint)">Loading your profile...</p>
+        </div>
+      </template>
     </ClientOnly>
 
-    <TagSuggestModal v-model:open="showTagSuggestModal" :pool="tagSuggestPool" />
+    <TagSuggestModal
+      v-model:open="showTagSuggestModal"
+      :pool="tagSuggestPool"
+    />
   </PageShell>
 </template>
 
 <script setup>
 import { MEMBER_STATUSES } from "~/composables/useMemberStatus";
+import { TIMEZONE_OPTIONS } from "~/config/timezones";
+import { formatActivity } from "~/utils/activityText";
 
 definePageMeta({
-  middleware: 'auth',
+  middleware: "auth",
 });
 
 const { memberData, checkMemberStatus } = useAuth();
@@ -275,17 +316,62 @@ const { posts: myPosts, fetchPosts, deletePost } = useBoardPosts();
 const toast = useToast();
 
 const availableGhosts = [
-  { value: "disbelieving", label: "Disbelieving", image: "/ghosties/Ghost-Disbelieving.png" },
-  { value: "double-take", label: "Double Take", image: "/ghosties/Ghost-Double-Take.png" },
-  { value: "exasperated", label: "Exasperated", image: "/ghosties/Ghost-Exasperated.png" },
+  {
+    value: "disbelieving",
+    label: "Disbelieving",
+    image: "/ghosties/Ghost-Disbelieving.png",
+  },
+  {
+    value: "double-take",
+    label: "Double Take",
+    image: "/ghosties/Ghost-Double-Take.png",
+  },
+  {
+    value: "exasperated",
+    label: "Exasperated",
+    image: "/ghosties/Ghost-Exasperated.png",
+  },
   { value: "mild", label: "Mild", image: "/ghosties/Ghost-Mild.png" },
   { value: "sweet", label: "Sweet", image: "/ghosties/Ghost-Sweet.png" },
   { value: "wtf", label: "WTF", image: "/ghosties/Ghost-WTF.png" },
 ];
 
+// Compute current UTC offset for an IANA timezone (DST-aware).
+const utcOffset = (tz) => {
+  try {
+    const parts = new Intl.DateTimeFormat("en-US", {
+      timeZone: tz,
+      timeZoneName: "longOffset",
+    }).formatToParts(new Date());
+    const name = parts.find((p) => p.type === "timeZoneName")?.value || "";
+    // "GMT-05:00" → "UTC-05:00"; "GMT" → "UTC+00:00"
+    if (name === "GMT") return "UTC+00:00";
+    return name.replace("GMT", "UTC");
+  } catch {
+    return "";
+  }
+};
+
+// Include the saved timezone as a custom option if it's not in the curated list.
+const timezoneItems = computed(() => {
+  const saved = formData.timeZone;
+  const list = TIMEZONE_OPTIONS.map((t) => {
+    const off = utcOffset(t.value);
+    return { ...t, label: off ? `${t.label} (${off})` : t.label };
+  });
+  if (saved && !TIMEZONE_OPTIONS.some((t) => t.value === saved)) {
+    const off = utcOffset(saved);
+    list.unshift({ label: off ? `${saved} (${off})` : saved, value: saved });
+  }
+  return list;
+});
+
 const notificationToggles = [
-  { key: "events", label: "Event reminders", sub: "Get notified about upcoming events" },
-  { key: "updates", label: "Community updates", sub: "New posts from members you follow" },
+  {
+    key: "events",
+    label: "Registration & cancellation emails",
+    sub: "Confirmation when you register for an event, and notice if it's cancelled",
+  },
 ];
 
 const { data: tagsData } = await useFetch("/api/tags");
@@ -312,26 +398,48 @@ const formData = reactive({
   location: "",
   showInDirectory: true,
   craftTags: [],
-  craftTagsPrivacy: "members",
   boardSlackHandle: "",
-  pronounsPrivacy: "members",
-  timeZonePrivacy: "members",
-  avatarPrivacy: "members",
-  studioPrivacy: "members",
-  bioPrivacy: "members",
-  locationPrivacy: "members",
   notifications: {
     events: true,
-    updates: true,
   },
 });
 
 const loading = ref(false);
 const saving = ref(false);
-const saveSuccess = ref(false);
-const saveError = ref(null);
 const initialData = ref(null);
-let saveSuccessTimer = null;
+
+const recentActivity = ref([]);
+const activityLoading = ref(false);
+
+const formatActivityTime = (date) => {
+  const now = new Date();
+  const d = new Date(date);
+  const diff = Math.floor((now - d) / 1000);
+  if (diff < 60) return "just now";
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+  if (diff < 604800) return `${Math.floor(diff / 86400)}d ago`;
+  return d.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: d.getFullYear() !== now.getFullYear() ? "numeric" : undefined,
+  });
+};
+
+const loadRecentActivity = async () => {
+  activityLoading.value = true;
+  try {
+    const data = await $fetch("/api/members/me/activity", {
+      params: { limit: 5 },
+    });
+    recentActivity.value = data.entries || [];
+  } catch (err) {
+    console.error("Failed to load activity:", err);
+    recentActivity.value = [];
+  } finally {
+    activityLoading.value = false;
+  }
+};
 
 const memberId = computed(() => memberData.value?._id || memberData.value?.id);
 
@@ -358,26 +466,14 @@ const loadProfile = () => {
   const board = memberData.value.board || {};
   formData.boardSlackHandle = board.slackHandle || "";
 
-  const privacy = memberData.value.privacy || {};
-  formData.pronounsPrivacy = privacy.pronouns || "members";
-  formData.timeZonePrivacy = privacy.timeZone || "members";
-  formData.avatarPrivacy = privacy.avatar || "members";
-  formData.studioPrivacy = privacy.studio || "members";
-  formData.bioPrivacy = privacy.bio || "members";
-  formData.locationPrivacy = privacy.location || "members";
-  formData.craftTagsPrivacy = privacy.craftTags || "members";
-
   const notifs = memberData.value.notifications || {};
   formData.notifications.events = notifs.events ?? true;
-  formData.notifications.updates = notifs.updates ?? true;
 
   initialData.value = JSON.parse(JSON.stringify(formData));
 };
 
 const handleSubmit = async () => {
   saving.value = true;
-  saveSuccess.value = false;
-  saveError.value = null;
 
   try {
     await $fetch("/api/members/profile", {
@@ -385,20 +481,18 @@ const handleSubmit = async () => {
       body: { ...formData },
     });
 
-    saveSuccess.value = true;
-
     await checkMemberStatus();
     loadProfile();
 
-    if (saveSuccessTimer) clearTimeout(saveSuccessTimer);
-    saveSuccessTimer = setTimeout(() => {
-      saveSuccess.value = false;
-      saveSuccessTimer = null;
-    }, 3000);
+    toast.add({ title: "Profile updated", color: "success" });
   } catch (error) {
     console.error("Profile save error:", error);
-    saveError.value =
-      error.data?.message || "Failed to save profile. Please try again.";
+    toast.add({
+      title: "Update failed",
+      description:
+        error.data?.statusMessage || error.data?.message || "Please try again.",
+      color: "error",
+    });
   } finally {
     saving.value = false;
   }
@@ -406,8 +500,6 @@ const handleSubmit = async () => {
 
 const resetForm = () => {
   loadProfile();
-  saveSuccess.value = false;
-  saveError.value = null;
 };
 
 onMounted(async () => {
@@ -428,7 +520,10 @@ onMounted(async () => {
   loadProfile();
 
   if (memberId.value) {
-    await fetchPosts({ author: memberId.value });
+    await Promise.allSettled([
+      fetchPosts({ author: memberId.value }),
+      loadRecentActivity(),
+    ]);
   }
 });
 
@@ -452,10 +547,6 @@ const handleDeletePost = async (post) => {
   }
 };
 
-onBeforeUnmount(() => {
-  if (saveSuccessTimer) clearTimeout(saveSuccessTimer);
-});
-
 useHead({
   title: "Edit Profile - Ghost Guild",
 });
@@ -479,11 +570,6 @@ useHead({
   gap: 12px;
 }
 
-/* ---- PRIVACY TOGGLE SPACING ---- */
-.field :deep(.priv) {
-  margin-top: 4px;
-}
-
 /* ---- FIELD LABELS (distinct from .section-label) ---- */
 .field label {
   font-size: 11px;
@@ -626,10 +712,6 @@ useHead({
 
 .posts-empty-link {
   color: var(--candle);
-  text-decoration: none;
-}
-
-.posts-empty-link:hover {
   text-decoration: underline;
 }
 
@@ -691,6 +773,41 @@ useHead({
   color: var(--ember);
 }
 
+/* ---- RECENT ACTIVITY ---- */
+.activity-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border-top: 1px dashed var(--border);
+}
+.activity-item {
+  padding: 8px 0;
+  border-bottom: 1px dashed var(--border);
+  font-size: 12px;
+  color: var(--text);
+  line-height: 1.5;
+}
+.activity-time {
+  font-size: 10px;
+  color: var(--text-faint);
+  margin-bottom: 2px;
+}
+.activity-text {
+  color: var(--text);
+}
+.activity-link {
+  color: var(--candle);
+  text-decoration: none;
+}
+.activity-link:hover {
+  text-decoration: underline;
+}
+.activity-empty {
+  font-size: 12px;
+  color: var(--text-faint);
+  padding: 10px 0;
+}
+
 /* ---- DISABLED BUTTON ---- */
 .btn:disabled {
   opacity: 0.4;
@@ -708,19 +825,6 @@ useHead({
   gap: 12px;
 }
 
-.save-msg {
-  font-size: 11px;
-  margin-left: auto;
-}
-
-.save-msg-ok {
-  color: var(--green);
-}
-
-.save-msg-err {
-  color: var(--ember);
-}
-
 /* ---- RESPONSIVE ---- */
 @media (max-width: 768px) {
   .row-2 {
@@ -734,3 +838,4 @@ useHead({
   }
 }
 </style>
+

app/pages/members/[id].vue

@@ -37,9 +37,7 @@
               <span class="profile-pronouns">{{ member.pronouns }}</span>
             </div>
             <div class="profile-meta">
-              <span v-if="member.circle" class="badge" :class="member.circle">
-                {{ circleLabels[member.circle] }}
-              </span>
+              <CircleBadge v-if="member.circle" :circle="member.circle" :label="circleLabels[member.circle]" />
               <template v-if="member.studio">
                 <span class="meta-sep">&middot;</span>
                 <span class="profile-studio">{{ member.studio }}</span>
@@ -372,7 +370,7 @@ useHead({
 }
 .profile-name {
   font-family: "Brygada 1918", serif;
-  font-size: 42px;
+  font-size: 36px;
   font-weight: 600;
   color: var(--text-bright);
   margin: 0;

app/pages/members/index.vue

@@ -1,8 +1,5 @@
 <template>
-  <PageShell
-    title="Members"
-    :subtitle="pageSubtitle"
-  >
+  <PageShell title="Members">
     <!-- Filter Bar -->
     <div class="filter-bar">
       <input
@@ -11,34 +8,25 @@
         class="filter-search"
         placeholder="Search members..."
         @input="debouncedSearch"
-      />
-      <select
-        v-model="selectedCircle"
-        class="filter-select"
-        @change="loadMembers"
       >
-        <option
-          v-for="opt in circleOptions"
-          :key="opt.value"
-          :value="opt.value"
-        >
-          {{ opt.label }}
-        </option>
-      </select>
-      <label class="filter-toggle">
-        <input
-          type="checkbox"
-          :checked="peerSupportFilter === 'true'"
-          @change="togglePeerSupport"
-        />
-        Offering support
-      </label>
-      <span class="filter-count">Showing {{ totalCount }} member{{ totalCount === 1 ? '' : 's' }} across 3 circles</span>
-    </div>
-
-    <!-- Tags Drawer Toggle -->
-    <div v-if="craftTagOptions.length > 0" class="tags-drawer-toggle">
-      <button type="button" class="drawer-btn" @click="showTagsDrawer = !showTagsDrawer">
+      <USelectMenu
+        v-model="selectedCircle"
+        :items="circleOptions"
+        value-key="value"
+        :search-input="false"
+        class="zine-select circle-select"
+        :ui="{
+          content: 'tz-content',
+          item: 'tz-item',
+        }"
+        @update:model-value="loadMembers"
+      />
+      <button
+        v-if="craftTagOptions.length > 0"
+        type="button"
+        class="drawer-btn"
+        @click="showTagsDrawer = !showTagsDrawer"
+      >
         Tags...
         <span v-if="directoryCraftTags.length > 0" class="tag-count-badge">{{ directoryCraftTags.length }}</span>
       </button>
@@ -76,10 +64,6 @@
         {{ circleLabels[selectedCircle] }}
         <button type="button" @click="clearCircleFilter">&times;</button>
       </span>
-      <span v-if="peerSupportFilter === 'true'" class="af-tag">
-        Offering Support
-        <button type="button" @click="clearPeerSupportFilter">&times;</button>
-      </span>
       <span v-for="slug in directoryCraftTags" :key="'c-' + slug" class="af-tag">
         {{ craftTagLabel(slug) }}
         <button type="button" @click="toggleDirectoryCraftTag(slug)">&times;</button>
@@ -108,7 +92,7 @@
               :src="`/ghosties/Ghost-${capitalize(member.avatar)}.png`"
               :alt="member.name"
               class="mc-avatar-img"
-            />
+            >
             <span v-else>{{ getInitials(member.name) }}</span>
           </div>
           <div class="mc-info">
@@ -130,16 +114,16 @@
           v-if="member.bio"
           class="mc-bio"
           v-html="renderMarkdown(member.bio)"
-        ></div>
+        />
 
         <div v-if="member.craftTags?.length > 0" class="mc-tags">
           <span class="tag-label">Craft:</span>
           <span
-            v-for="tag in member.craftTags.slice(0, 5)"
+            v-for="tag in member.craftTags.slice(0, 3)"
             :key="tag"
             class="skill-tag"
           >{{ craftTagLabel(tag) }}</span>
-          <span v-if="member.craftTags.length > 5" class="tag-overflow">+{{ member.craftTags.length - 5 }}</span>
+          <span v-if="member.craftTags.length > 3" class="tag-overflow">+{{ member.craftTags.length - 3 }} more</span>
         </div>
       </div>
     </div>
@@ -159,7 +143,6 @@
 <script setup>
 definePageMeta({ middleware: ['members-auth'] })
 
-const route = useRoute()
 const { render: renderMarkdown } = useMarkdown()
 
 // ---- Directory state ----
@@ -168,7 +151,6 @@ const totalCount = ref(0)
 const loading = ref(true)
 const searchQuery = ref('')
 const selectedCircle = ref('all')
-const peerSupportFilter = ref('all')
 const directoryCraftTags = ref([])
 const craftTagOptions = ref([])
 const showAllTags = ref(false)
@@ -218,14 +200,9 @@ const visibleTagOptions = computed(() =>
 
 const hasActiveFilters = computed(() =>
   (selectedCircle.value && selectedCircle.value !== 'all') ||
-  peerSupportFilter.value === 'true' ||
   directoryCraftTags.value.length > 0
 )
 
-const pageSubtitle = computed(() =>
-  `${totalCount.value} member${totalCount.value === 1 ? '' : 's'} across 3 circles`
-)
-
 // ---- Load members ----
 const loadMembers = async () => {
   loading.value = true
@@ -233,7 +210,6 @@ const loadMembers = async () => {
     const params = {}
     if (searchQuery.value) params.search = searchQuery.value
     if (selectedCircle.value && selectedCircle.value !== 'all') params.circle = selectedCircle.value
-    if (peerSupportFilter.value === 'true') params.peerSupport = 'true'
     if (directoryCraftTags.value.length === 1) params.craftTag = directoryCraftTags.value[0]
 
     const data = await $fetch('/api/members/directory', { params })
@@ -266,11 +242,6 @@ const loadTagOptions = async () => {
 }
 
 // ---- Filter helpers ----
-const togglePeerSupport = (e) => {
-  peerSupportFilter.value = e.target.checked ? 'true' : 'all'
-  loadMembers()
-}
-
 let searchTimeout
 const debouncedSearch = () => {
   clearTimeout(searchTimeout)
@@ -294,15 +265,9 @@ const clearCircleFilter = () => {
   loadMembers()
 }
 
-const clearPeerSupportFilter = () => {
-  peerSupportFilter.value = 'all'
-  loadMembers()
-}
-
 const clearAllFilters = () => {
   searchQuery.value = ''
   selectedCircle.value = 'all'
-  peerSupportFilter.value = 'all'
   directoryCraftTags.value = []
   showTagsDrawer.value = false
   loadMembers()
@@ -325,10 +290,6 @@ useHead({
 
 // ---- Init ----
 onMounted(async () => {
-  if (route.query.peerSupport === 'true') {
-    peerSupportFilter.value = 'true'
-  }
-
   await loadTagOptions()
   await loadMembers()
 })
@@ -363,51 +324,15 @@ onMounted(async () => {
   border-color: var(--candle-faint);
 }
 
-.filter-select {
-  font-family: "Commit Mono", monospace;
-  font-size: 11px;
-  padding: 5px 10px;
-  border: 1px dashed var(--border);
-  background: transparent;
-  color: var(--text-dim);
-  cursor: pointer;
-  outline: none;
-  -webkit-appearance: none;
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%238a7e6a' stroke-width='1.2'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-right: 26px;
-}
-.filter-select:focus {
-  border-color: var(--candle-faint);
-}
-
-.filter-toggle {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 11px;
-  color: var(--text-dim);
-  cursor: pointer;
-}
-.filter-toggle input {
-  accent-color: var(--candle-dim);
-}
-
-.filter-count {
-  margin-left: auto;
-  font-size: 11px;
-  color: var(--text-faint);
+/* Constrain the circle USelectMenu button width so it doesn't stretch. */
+:deep(.circle-select) {
+  width: auto !important;
+  min-width: 150px;
 }
 
 /* ---- TAGS DRAWER ---- */
-.tags-drawer-toggle {
-  padding: 8px 24px;
-  border-bottom: 1px dashed var(--border);
-}
-
 .drawer-btn {
+  margin-left: auto;
   font-family: "Commit Mono", monospace;
   font-size: 11px;
   color: var(--text-dim);
@@ -579,7 +504,7 @@ onMounted(async () => {
 .mc-avatar {
   width: 32px;
   height: 32px;
-  background: var(--surface);
+  background: transparent;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -720,15 +645,12 @@ onMounted(async () => {
     align-items: stretch;
     padding: 14px 20px;
   }
-  .filter-count {
+  .drawer-btn {
     margin-left: 0;
   }
   .skills-bar {
     padding: 10px 20px;
   }
-  .tags-drawer-toggle {
-    padding: 8px 20px;
-  }
   .active-filters {
     padding: 8px 20px;
   }
@@ -748,14 +670,5 @@ onMounted(async () => {
     flex: 1 1 auto;
     min-width: 0;
   }
-  .filter-select {
-    flex: 1 1 45%;
-  }
-  .filter-toggle {
-    flex: 1 1 45%;
-  }
-  .filter-count {
-    flex-basis: 100%;
-  }
 }
 </style>

app/pages/policies/[slug].vue

@@ -0,0 +1,79 @@
+<template>
+  <PageShell :title="policy.title" subtitle="Ghost Guild Policy">
+    <div class="policy-prose">
+      <p class="policy-status">This policy is being finalized.</p>
+      <p>
+        {{ policy.description }}
+      </p>
+      <p>
+        The full text will be published here ahead of launch. In the meantime,
+        the expectations that apply are summarized in our
+        <NuxtLink to="/community-guidelines">Community Guidelines</NuxtLink>.
+      </p>
+      <p>
+        Questions? Contact the Membership Committee at
+        <a href="mailto:hello@ghostguild.org">hello@ghostguild.org</a>.
+      </p>
+    </div>
+  </PageShell>
+</template>
+
+<script setup>
+// Note: /policies/code-of-conduct and /policies/conflict-resolution are
+// handled by routeRules in nuxt.config.ts and redirect to external Obsidian
+// pages. /policies/privacy and /policies/terms have dedicated pages
+// (privacy.vue, terms.vue) that take precedence over this dynamic route.
+const POLICIES = {
+  'by-laws': {
+    title: 'By-Laws',
+    description:
+      "Ghost Guild's governing by-laws, including membership classes, voting rights, and the structure of the Membership Committee.",
+  },
+}
+
+const route = useRoute()
+const slug = String(route.params.slug || '')
+const policy = POLICIES[slug]
+
+if (!policy) {
+  throw createError({ statusCode: 404, statusMessage: 'Policy not found', fatal: true })
+}
+
+useHead({
+  title: `${policy.title} · Ghost Guild`,
+})
+</script>
+
+<style scoped>
+.policy-prose {
+  max-width: 640px;
+  padding: 32px;
+}
+
+.policy-status {
+  font-family: "Commit Mono", monospace;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--candle);
+  margin-bottom: 16px;
+}
+
+.policy-prose p {
+  font-size: 13px;
+  color: var(--text-dim);
+  line-height: 1.7;
+  margin-bottom: 14px;
+}
+
+.policy-prose a {
+  color: var(--candle);
+}
+
+@media (max-width: 640px) {
+  .policy-prose {
+    padding: 20px 16px;
+  }
+}
+</style>

app/pages/policies/privacy.vue

@@ -0,0 +1,328 @@
+<template>
+  <PageShell title="Privacy Policy" subtitle="How Ghost Guild handles your data">
+    <div class="policy-prose">
+      <p class="policy-updated">Last updated: April 18, 2026</p>
+
+      <section class="policy-section">
+        <p>
+          Ghost Guild is a program of Baby Ghosts, a Canadian non-profit. This
+          policy explains what information we collect when you use
+          ghostguild.org and wiki.ghostguild.org, what we do with it, and what
+          choices you have.
+        </p>
+        <p>
+          We treat your data as something you've trusted us with, not something
+          we own. If anything here is unclear or feels off, email us at
+          <a href="mailto:hello@ghostguild.org">hello@ghostguild.org</a>.
+        </p>
+      </section>
+
+      <section class="policy-section">
+        <h2>What we collect</h2>
+        <p>
+          <strong>When you apply for membership:</strong> your name, pronouns,
+          location, email, the answers you give in your application, and which
+          membership circle you're applying for.
+        </p>
+        <p>
+          <strong>When you build a profile:</strong> anything you choose to add
+          (bio, studio affiliation, skills, social links, availability for peer
+          support, Slack handle). Your profile is visible to other Ghost Guild
+          members. It isn't made public or visible to search engines. If you
+          don't want something seen by other members, don't put it in your
+          profile.
+        </p>
+        <p>
+          <strong>When you contribute to the wiki:</strong> your edits,
+          comments, and authorship are recorded so members can see who wrote
+          what and so we can roll back if needed.
+        </p>
+        <p>
+          <strong>When you post on the bulletin board:</strong> your posts
+          (needs you have, offers you can make), your name as the poster, and
+          the timestamps. The actual connecting between members happens in
+          Slack, not on our platform.
+        </p>
+        <p>
+          <strong>When you pay dues:</strong> payment is handled by Helcim. We
+          see the amount, date, and that the payment came from you. We don't
+          see or store card numbers or banking details.
+        </p>
+        <p>
+          <strong>When you get emails from us:</strong> Resend delivers them.
+          They process your email address and basic delivery metadata.
+        </p>
+        <p>
+          <strong>For site analytics:</strong> we use Plausible. Plausible
+          doesn't use tracking cookies, doesn't store IP addresses, and doesn't
+          follow you across sites. It tells us aggregate things like which
+          pages get visited and roughly how many people use the site. It
+          doesn't tell us who you are.
+        </p>
+        <p>
+          We don't use Google Analytics, advertising pixels, or any other
+          tracking. The site uses cookies needed to keep you logged in. That's
+          it.
+        </p>
+      </section>
+
+      <section class="policy-section">
+        <h2>Why we collect it</h2>
+        <p>
+          <strong>To run the membership program:</strong> review applications,
+          give you access, support your participation, send you things you've
+          signed up for.
+        </p>
+        <p>
+          <strong>To help members find each other:</strong> making your profile
+          and bulletin board posts visible to the rest of the community.
+        </p>
+        <p>
+          <strong>To report on impact:</strong> anonymized, aggregated numbers
+          for funders and the community (how many members, what topics come up
+          on the bulletin board, where members are based).
+        </p>
+        <p>
+          <strong>To meet our obligations</strong> as a non-profit corporation
+          under Canadian law.
+        </p>
+      </section>
+
+      <section class="policy-section">
+        <h2>Who else sees it</h2>
+        <p>The services that store or process your data on our behalf:</p>
+        <ul>
+          <li>Helcim, payment processing, Canada</li>
+          <li>Resend, transactional email, US</li>
+          <li>Hetzner, server hosting, Germany</li>
+          <li>Outline, wiki software running on our Hetzner server</li>
+          <li>Plausible, anonymous site analytics, EU</li>
+          <li>
+            Slack, if you accept an invitation to the shared Gamma Space
+            workspace
+          </li>
+        </ul>
+        <p>
+          <strong>Other Ghost Guild members:</strong> they can see your profile
+          and any bulletin board posts you make. None of this is public or
+          visible to search engines.
+        </p>
+        <p>
+          <strong>Wiki contributions:</strong> anything you post on
+          wiki.ghostguild.org is part of a public knowledge commons (see the
+          <NuxtLink to="/policies/terms">Terms of Service</NuxtLink> for the
+          specifics) and may be visible to anyone on the internet.
+        </p>
+        <p>
+          <strong>Baby Ghosts staff and the Membership Committee:</strong> for
+          purposes related to running the program.
+        </p>
+      </section>
+
+      <section class="policy-section">
+        <h2>What we don't do</h2>
+        <p>We don't sell your data.</p>
+        <p>We don't share it with third parties for marketing.</p>
+        <p>
+          We don't feed your messages, profile, applications, bulletin board
+          posts, or other community content into generative AI tools, and we
+          don't allow members to do that with each other's content either. This
+          is a community commitment, not just a policy line.
+        </p>
+        <p>
+          If we ever want to do something different than what's in this policy,
+          we'll ask first.
+        </p>
+      </section>
+
+      <section class="policy-section">
+        <h2>How long we keep it</h2>
+        <p>
+          <strong>While you're a member:</strong> as long as you have an
+          account.
+        </p>
+        <p>
+          <strong>After you leave:</strong> we keep basic account records for
+          one year for administrative reasons (renewals, returning members,
+          financial records we're required to keep). Your wiki contributions
+          remain in the commons under their license; that's how a commons works
+          (see <NuxtLink to="/policies/terms">Terms of Service</NuxtLink>).
+          Your bulletin board posts are removed when you close your account.
+          Aggregate impact data has no expiry and doesn't identify you.
+        </p>
+        <p>
+          <strong>Financial records:</strong> we keep what we have to keep
+          under tax law (currently six years).
+        </p>
+        <p>
+          You can ask us to delete your account and personal data at any time.
+          We'll do it unless we're legally required to retain something
+          specific, in which case we'll tell you what and why.
+        </p>
+      </section>
+
+      <section class="policy-section">
+        <h2>Your rights</h2>
+        <p>You can:</p>
+        <ul>
+          <li>See what we have about you</li>
+          <li>Correct anything that's wrong</li>
+          <li>Download your data</li>
+          <li>Delete your account</li>
+          <li>Withdraw consent for anything you previously agreed to</li>
+        </ul>
+        <p>
+          To do any of these, email
+          <a href="mailto:hello@ghostguild.org">hello@ghostguild.org</a>. We'll
+          respond within 30 days.
+        </p>
+        <p>
+          If you live in a province with its own privacy law (Quebec, British
+          Columbia, Alberta), you may have additional rights under that law.
+          PIPEDA may also apply to some of what we do. We'll respect those
+          rights regardless of which framework technically covers your
+          situation.
+        </p>
+      </section>
+
+      <section class="policy-section">
+        <h2>Security</h2>
+        <p>
+          We host on a private server, encrypt data in transit, and limit
+          access to staff who need it. Perfect security doesn't exist. If
+          something happens that affects your data, we'll tell you within a
+          reasonable time and explain what we're doing about it.
+        </p>
+      </section>
+
+      <section class="policy-section">
+        <h2>Children</h2>
+        <p>
+          Ghost Guild is for adults. We don't knowingly collect data from
+          anyone under 18.
+        </p>
+      </section>
+
+      <section class="policy-section">
+        <h2>Changes</h2>
+        <p>
+          If we change this policy in a way that affects how we handle your
+          data, we'll email members and post the change with a date stamp at
+          least 30 days before it takes effect. Continued use after that means
+          you accept the changes. If you don't, close your account first.
+        </p>
+      </section>
+
+      <section class="policy-section">
+        <h2>Contact</h2>
+        <p>
+          Questions, requests, complaints:
+          <a href="mailto:hello@ghostguild.org">hello@ghostguild.org</a>
+        </p>
+        <p class="policy-address">
+          Baby Ghosts<br>
+          3230 Yonge Street #4052<br>
+          Toronto ON M4N 3P6<br>
+          Canada
+        </p>
+      </section>
+    </div>
+  </PageShell>
+</template>
+
+<script setup>
+useHead({
+  title: 'Privacy Policy · Ghost Guild',
+})
+</script>
+
+<style scoped>
+.policy-prose {
+  max-width: 720px;
+  padding: 32px;
+}
+
+.policy-updated {
+  font-family: "Commit Mono", monospace;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--candle);
+  margin-bottom: 24px;
+}
+
+.policy-section {
+  padding: 28px 0;
+  border-bottom: 1px dashed var(--border);
+}
+.policy-section:first-of-type {
+  padding-top: 0;
+}
+.policy-section:last-child {
+  border-bottom: none;
+}
+
+.policy-section h2 {
+  font-family: "Brygada 1918", serif;
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--text-bright);
+  letter-spacing: -0.01em;
+  margin-bottom: 16px;
+  line-height: 1.25;
+}
+
+.policy-section p {
+  font-size: 13px;
+  color: var(--text-dim);
+  line-height: 1.7;
+  margin-bottom: 12px;
+}
+
+.policy-section ul {
+  list-style: none;
+  padding: 0;
+  margin: 8px 0 14px;
+}
+.policy-section ul li {
+  position: relative;
+  padding: 2px 0 2px 18px;
+  font-size: 13px;
+  color: var(--text-dim);
+  line-height: 1.7;
+  margin-bottom: 4px;
+}
+.policy-section ul li::before {
+  content: "›";
+  position: absolute;
+  left: 0;
+  top: 2px;
+  color: var(--candle-faint);
+  font-size: 14px;
+  line-height: 1.7;
+}
+
+.policy-section a {
+  color: var(--candle);
+}
+
+.policy-section strong {
+  color: var(--text-bright);
+  font-weight: 600;
+}
+
+.policy-address {
+  font-family: "Commit Mono", monospace;
+  font-size: 12px;
+  line-height: 1.7;
+  color: var(--text-dim);
+  margin-top: 16px;
+}
+
+@media (max-width: 640px) {
+  .policy-prose {
+    padding: 20px 16px;
+  }
+}
+</style>

app/pages/policies/refunds.vue

@@ -0,0 +1,116 @@
+<template>
+  <PageShell title="Refund Policy" subtitle="How Ghost Guild handles refund requests">
+    <div class="policy-prose">
+      <p class="policy-updated">Last updated: April 20, 2026</p>
+
+      <section class="policy-section">
+        <p>
+          Ghost Guild is a program of Baby Ghosts, a Canadian non-profit.
+          Contributions and event ticket revenue go directly toward running the
+          program. We handle refund requests on a case-by-case basis rather
+          than by blanket rule.
+        </p>
+      </section>
+
+      <section class="policy-section">
+        <h2>Membership dues</h2>
+        <p>
+          Membership is pay-what-you-can, and you can change or pause your
+          contribution any time as your situation changes. We don't refund dues
+          that have already been charged. If paying ever becomes a problem, the
+          Solidarity Fund is there for that reason; reach out and we'll work it
+          out.
+        </p>
+      </section>
+
+      <section class="policy-section">
+        <h2>Event tickets</h2>
+        <p>
+          Paid event registrations can't be cancelled from your account page.
+          Refunds for events are considered case-by-case at admin discretion,
+          taking into account how close to the event you're asking, whether
+          your spot can be filled, and the circumstances behind the request.
+        </p>
+        <p>
+          If you can no longer attend an event you've paid for, email
+          <a href="mailto:hello@ghostguild.org">hello@ghostguild.org</a> as
+          early as you can and we'll sort it out with you.
+        </p>
+      </section>
+
+      <section class="policy-section">
+        <h2>Contact</h2>
+        <p>
+          Refund requests, questions, anything else:
+          <a href="mailto:hello@ghostguild.org">hello@ghostguild.org</a>
+        </p>
+      </section>
+    </div>
+  </PageShell>
+</template>
+
+<script setup>
+useHead({
+  title: 'Refund Policy · Ghost Guild',
+})
+</script>
+
+<style scoped>
+.policy-prose {
+  max-width: 720px;
+  padding: 32px;
+}
+
+.policy-updated {
+  font-family: "Commit Mono", monospace;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--candle);
+  margin-bottom: 24px;
+}
+
+.policy-section {
+  padding: 28px 0;
+  border-bottom: 1px dashed var(--border);
+}
+.policy-section:first-of-type {
+  padding-top: 0;
+}
+.policy-section:last-child {
+  border-bottom: none;
+}
+
+.policy-section h2 {
+  font-family: "Brygada 1918", serif;
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--text-bright);
+  letter-spacing: -0.01em;
+  margin-bottom: 16px;
+  line-height: 1.25;
+}
+
+.policy-section p {
+  font-size: 13px;
+  color: var(--text-dim);
+  line-height: 1.7;
+  margin-bottom: 12px;
+}
+
+.policy-section a {
+  color: var(--candle);
+}
+
+.policy-section strong {
+  color: var(--text-bright);
+  font-weight: 600;
+}
+
+@media (max-width: 640px) {
+  .policy-prose {
+    padding: 20px 16px;
+  }
+}
+</style>

app/pages/policies/terms.vue

@@ -0,0 +1,357 @@
+<template>
+  <PageShell title="Terms of Service" subtitle="Using ghostguild.org and wiki.ghostguild.org">
+    <div class="policy-prose">
+      <p class="policy-updated">Last updated: April 18, 2026</p>
+
+      <section class="policy-section">
+        <p>
+          These terms apply to your use of ghostguild.org and
+          wiki.ghostguild.org, run by Baby Ghosts (a Canadian non-profit). The
+          <NuxtLink to="/community-guidelines">Member Agreement</NuxtLink> and
+          <NuxtLink to="/policies/code-of-conduct">Code of Conduct</NuxtLink>
+          also apply if you're a member; they sit alongside these terms, and
+          the more specific document wins if there's ever a conflict.
+        </p>
+      </section>
+
+      <section class="policy-section">
+        <h2>Who can use Ghost Guild</h2>
+        <p>You can browse public pages without an account.</p>
+        <p>
+          To become a member, you have to be 18 or older, complete an
+          application, and be accepted by the Membership Committee. Membership
+          is reviewed against our values and processes; we can decline
+          applications, and we don't always provide detailed reasons.
+        </p>
+      </section>
+
+      <section class="policy-section">
+        <h2>Your account</h2>
+        <p>
+          You're responsible for what happens under your account. Don't share
+          login credentials. If you suspect unauthorized access, tell us at
+          <a href="mailto:hello@ghostguild.org">hello@ghostguild.org</a>.
+        </p>
+        <p>
+          We may suspend or close accounts that violate these terms, the
+          <NuxtLink to="/policies/code-of-conduct">Code of Conduct</NuxtLink>,
+          or the
+          <NuxtLink to="/community-guidelines">Member Agreement</NuxtLink>. The
+          process for that lives in our
+          <NuxtLink to="/policies/conflict-resolution">Conflict Resolution Policy</NuxtLink>.
+        </p>
+        <p>
+          We don't suspend or close accounts because a payment didn't go
+          through. If there's a problem with your contribution, we'll reach
+          out.
+        </p>
+      </section>
+
+      <section class="policy-section">
+        <h2>Membership and dues</h2>
+        <p>
+          Membership runs annually and renews unless you cancel. You can pay
+          your annual dues all at once or in monthly installments; both result
+          in the same annual membership.
+        </p>
+        <p>
+          Dues are pay-what-you-can: you choose your contribution, and you can
+          change it any time as your situation changes. The full pricing
+          structure is on the membership page.
+        </p>
+        <p>
+          We don't refund dues. If paying ever becomes a problem, the
+          Solidarity Fund is there for that reason; reach out and we'll work it
+          out.
+        </p>
+      </section>
+
+      <section class="policy-section">
+        <h2>Acceptable use</h2>
+        <p>
+          The
+          <NuxtLink to="/policies/code-of-conduct">Code of Conduct</NuxtLink>
+          governs how members behave in Ghost Guild spaces. Some basics that
+          also apply here:
+        </p>
+        <ul>
+          <li>Don't harass, harm, or discriminate against other members</li>
+          <li>
+            Don't share other members' content (Slack messages, profile
+            information, bulletin board posts, application materials, private
+            comments) outside the community without their consent
+          </li>
+          <li>
+            Don't feed community content, including other members'
+            contributions, into generative AI tools
+          </li>
+          <li>
+            Don't use Ghost Guild for illegal activity, spam, or attempts to
+            compromise the platform
+          </li>
+          <li>
+            Don't impersonate others or misrepresent your identity or
+            affiliations
+          </li>
+          <li>
+            Don't scrape the site or use automated tools to extract member data
+          </li>
+        </ul>
+        <p>
+          If you violate these, we follow the
+          <NuxtLink to="/policies/conflict-resolution">Conflict Resolution Policy</NuxtLink>.
+          Outcomes range from a conversation through to removal from the
+          community.
+        </p>
+      </section>
+
+      <section class="policy-section">
+        <h2>Your content</h2>
+        <p>
+          There are two different things happening with content on Ghost Guild,
+          and they work differently.
+        </p>
+
+        <h3>Profiles, bulletin board posts, comments, and other member-only content</h3>
+        <p>
+          You keep ownership of profile information, bulletin board posts,
+          comments, messages, and anything else you post in member-only spaces.
+          By posting these, you give Ghost Guild a non-exclusive license to
+          display them within the platform to other members.
+        </p>
+        <p>
+          If you delete your account, we remove this content from member-facing
+          areas. Backups may persist for a reasonable period before being
+          purged.
+        </p>
+
+        <h3>Wiki contributions</h3>
+        <p>
+          The wiki at
+          <a href="https://wiki.ghostguild.org">wiki.ghostguild.org</a> is a
+          knowledge commons. When you contribute to it (creating pages, editing
+          existing ones, adding examples, leaving comments on wiki pages), your
+          contribution is automatically and irrevocably licensed under the
+          <a href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>
+          (CC-BY-SA 4.0).
+        </p>
+        <p>In plain terms:</p>
+        <ul>
+          <li>You still hold the copyright to what you wrote</li>
+          <li>
+            Anyone (members, the public, other cooperatives, organizations
+            adapting the material) can use, share, adapt, and build on your
+            contribution, including for commercial purposes, as long as they
+            credit you and license their derivatives under the same terms
+          </li>
+          <li>
+            You can't pull your contribution back out of the commons later,
+            even if you leave Ghost Guild
+          </li>
+          <li>
+            If we publish wiki material in other places (like
+            <a href="https://coop.love">coop.love</a>), it stays under
+            CC-BY-SA 4.0 and you stay credited
+          </li>
+        </ul>
+        <p>
+          This is how a knowledge commons works, and it's central to what Ghost
+          Guild is doing. We're explicit about it because we want you to
+          contribute knowing exactly what's happening to your work. If you have
+          something you'd rather keep private or under a more restrictive
+          license, don't put it in the wiki.
+        </p>
+      </section>
+
+      <section class="policy-section">
+        <h2>Our content</h2>
+        <p>
+          Educational materials, templates, and resources we publish on
+          ghostguild.org are for member use within the spirit of the
+          cooperative movement. Where a specific license is attached (like
+          Creative Commons), follow that license. We ask for attribution to
+          Ghost Guild or Baby Ghosts.
+        </p>
+      </section>
+
+      <section class="policy-section">
+        <h2>Third-party services</h2>
+        <p>
+          Ghost Guild relies on Helcim (payments), Resend (email), Hetzner
+          (hosting), Outline (wiki), Plausible (analytics), and Slack (via the
+          shared Gamma Space workspace). Their terms apply when you interact
+          with their services. We've picked them carefully but we can't
+          guarantee they'll never have outages, security issues, or policy
+          changes.
+        </p>
+      </section>
+
+      <section class="policy-section">
+        <h2>Disclaimers</h2>
+        <p>
+          Ghost Guild is provided as-is. We work to keep things running and
+          resources accurate, but we don't guarantee uptime, completeness, or
+          that information on the site is right for your specific situation.
+          Treat our templates and educational materials as starting points, not
+          legal, financial, or business advice. Talk to qualified professionals
+          before you make decisions that need them.
+        </p>
+      </section>
+
+      <section class="policy-section">
+        <h2>Limitation of liability</h2>
+        <p>
+          To the extent the law allows, Baby Ghosts isn't liable for indirect,
+          incidental, or consequential damages arising from your use of the
+          site. Our total liability is capped at the amount of dues you've paid
+          in the past 12 months (which may well be zero, given how our pricing
+          works).
+        </p>
+      </section>
+
+      <section class="policy-section">
+        <h2>Disputes</h2>
+        <p>
+          For disputes between members, we use the
+          <NuxtLink to="/policies/conflict-resolution">Conflict Resolution Policy</NuxtLink>.
+        </p>
+        <p>
+          For disputes with Baby Ghosts about these terms or your account,
+          please reach out first. Most things we can sort out by talking. If we
+          can't, the dispute will be governed by the laws of Ontario, Canada.
+        </p>
+      </section>
+
+      <section class="policy-section">
+        <h2>Changes</h2>
+        <p>
+          We'll update these terms from time to time. For changes that
+          materially affect your rights or our obligations, we'll email members
+          at least 30 days before the new terms take effect. Continued use
+          after that means you accept the changes. If you don't, close your
+          account before they kick in.
+        </p>
+      </section>
+
+      <section class="policy-section">
+        <h2>Contact</h2>
+        <p>
+          <a href="mailto:hello@ghostguild.org">hello@ghostguild.org</a>
+        </p>
+        <p class="policy-address">
+          Baby Ghosts<br>
+          3230 Yonge Street #4052<br>
+          Toronto ON M4N 3P6<br>
+          Canada
+        </p>
+      </section>
+    </div>
+  </PageShell>
+</template>
+
+<script setup>
+useHead({
+  title: 'Terms of Service · Ghost Guild',
+})
+</script>
+
+<style scoped>
+.policy-prose {
+  max-width: 720px;
+  padding: 32px;
+}
+
+.policy-updated {
+  font-family: "Commit Mono", monospace;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--candle);
+  margin-bottom: 24px;
+}
+
+.policy-section {
+  padding: 28px 0;
+  border-bottom: 1px dashed var(--border);
+}
+.policy-section:first-of-type {
+  padding-top: 0;
+}
+.policy-section:last-child {
+  border-bottom: none;
+}
+
+.policy-section h2 {
+  font-family: "Brygada 1918", serif;
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--text-bright);
+  letter-spacing: -0.01em;
+  margin-bottom: 16px;
+  line-height: 1.25;
+}
+
+.policy-section h3 {
+  font-family: "Commit Mono", monospace;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-bright);
+  margin: 20px 0 10px;
+}
+
+.policy-section p {
+  font-size: 13px;
+  color: var(--text-dim);
+  line-height: 1.7;
+  margin-bottom: 12px;
+}
+
+.policy-section ul {
+  list-style: none;
+  padding: 0;
+  margin: 8px 0 14px;
+}
+.policy-section ul li {
+  position: relative;
+  padding: 2px 0 2px 18px;
+  font-size: 13px;
+  color: var(--text-dim);
+  line-height: 1.7;
+  margin-bottom: 4px;
+}
+.policy-section ul li::before {
+  content: "›";
+  position: absolute;
+  left: 0;
+  top: 2px;
+  color: var(--candle-faint);
+  font-size: 14px;
+  line-height: 1.7;
+}
+
+.policy-section a {
+  color: var(--candle);
+}
+
+.policy-section strong {
+  color: var(--text-bright);
+  font-weight: 600;
+}
+
+.policy-address {
+  font-family: "Commit Mono", monospace;
+  font-size: 12px;
+  line-height: 1.7;
+  color: var(--text-dim);
+  margin-top: 16px;
+}
+
+@media (max-width: 640px) {
+  .policy-prose {
+    padding: 20px 16px;
+  }
+}
+</style>

app/pages/series/[id].vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="page-fill">
     <div v-if="pending" class="loading">Loading series details...</div>
 
     <div v-else-if="error" class="loading">
@@ -8,7 +8,7 @@
       <NuxtLink to="/events">&larr; Back to Events</NuxtLink>
     </div>
 
-    <div v-else>
+    <div v-else class="page-fill">
       <!-- BACK LINK -->
       <div class="back-link">
         <NuxtLink to="/events">&larr; Back to Events</NuxtLink>
@@ -26,46 +26,59 @@
         </div>
       </div>
 
-      <!-- DESCRIPTION -->
-      <div v-if="series.description" class="section">
-        <p>{{ series.description }}</p>
-      </div>
+      <!-- TWO-COLUMN BODY -->
+      <div class="series-body" :class="{ 'has-aside': series.tickets?.enabled }">
+        <!-- LEFT: MAIN CONTENT -->
+        <div class="series-main">
+          <div v-if="series.description" class="section description">
+            <p>{{ series.description }}</p>
+          </div>
 
-      <!-- EVENT LIST -->
-      <div class="section">
-        <div class="section-label">Sessions</div>
-        <div v-if="series.events?.length">
-          <div v-for="(event, index) in series.events" :key="event._id || index" class="event-row">
-            <span class="event-num">{{ String(index + 1).padStart(2, '0') }}</span>
-            <span class="event-date">{{ formatDate(event.startDate) }}</span>
-            <div class="event-info">
-              <NuxtLink :to="`/events/${event.slug || event._id || event.id}`" class="event-title-link">
-                {{ event.title }}
-              </NuxtLink>
-              <span class="event-status">{{ getEventStatus(event) }}</span>
+          <div class="section" :class="{ 'section-flush': series.events?.length }">
+            <div class="section-label">Sessions</div>
+            <div v-if="series.events?.length" class="sessions-box">
+              <div v-for="(event, index) in series.events" :key="event._id || index" class="event-row">
+                <span class="event-num">{{ String(index + 1).padStart(2, '0') }}</span>
+                <span class="event-date">{{ formatDate(event.startDate) }}</span>
+                <div class="event-info">
+                  <div class="event-info-head">
+                    <NuxtLink :to="`/events/${event.slug || event._id || event.id}`" class="event-title-link">
+                      {{ event.title }}
+                    </NuxtLink>
+                    <span class="event-status">{{ getEventStatus(event) }}</span>
+                  </div>
+                  <p v-if="event.description" class="event-description">{{ event.description }}</p>
+                </div>
+              </div>
             </div>
+            <p v-else class="empty">No sessions scheduled yet.</p>
+          </div>
+
+          <!-- Questions (inline when no sidebar) -->
+          <div v-if="!series.tickets?.enabled" class="section">
+            <div class="section-label">Questions?</div>
+            <p>If you have questions about this series, reach out to us.</p>
+            <a href="mailto:events@ghostguild.org">events@ghostguild.org</a>
           </div>
         </div>
-        <p v-else class="empty">No sessions scheduled yet.</p>
-      </div>
 
-      <!-- PASS PURCHASE -->
-      <div v-if="series.tickets?.enabled" class="section">
-        <SeriesPassPurchase
-          :series-id="series.id"
-          :series-info="{ id: series.id, title: series.title, totalEvents: series.totalEvents || series.events?.length || 0, type: series.type }"
-          :series-events="series.events || []"
-          :user-email="memberData?.email"
-          :user-name="memberData?.name"
-          @purchase-success="handlePurchaseSuccess"
-        />
-      </div>
+        <!-- RIGHT: SIDEBAR -->
+        <aside v-if="series.tickets?.enabled" class="series-aside">
+          <SeriesPassPurchase
+            :series-id="series.id"
+            :series-info="{ id: series.id, title: series.title, totalEvents: series.totalEvents || series.events?.length || 0, type: series.type }"
+            :series-events="series.events || []"
+            :user-email="memberData?.email"
+            :user-name="memberData?.name"
+            @purchase-success="handlePurchaseSuccess"
+          />
 
-      <!-- QUESTIONS -->
-      <div class="section">
-        <div class="section-label">Questions?</div>
-        <p>If you have questions about this series, reach out to us.</p>
-        <a href="mailto:events@ghostguild.org">events@ghostguild.org</a>
+          <div class="aside-panel">
+            <div class="box-title">Questions?</div>
+            <p class="aside-detail">Drop us a line.</p>
+            <a class="aside-link" href="mailto:events@ghostguild.org">events@ghostguild.org</a>
+          </div>
+        </aside>
       </div>
     </div>
   </div>
@@ -137,28 +150,105 @@ useHead(() => ({
 }
 .meta-text { color: var(--text-faint); }
 
+/* ---- PAGE FILL (aside border reaches viewport bottom) ---- */
+.page-fill {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+/* ---- TWO-COLUMN BODY ---- */
+.series-body {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+.series-body.has-aside {
+  grid-template-columns: 1fr 280px;
+  flex: 1;
+}
+.series-main { min-width: 0; }
+.series-aside {
+  border-left: 1px dashed var(--border);
+  padding: 0;
+}
+
 .section {
   padding: 24px 32px;
   border-bottom: 1px dashed var(--border);
 }
+.series-main .section:last-child {
+  border-bottom: none;
+}
 .section p { font-size: 12px; color: var(--text-dim); line-height: 1.7; max-width: 560px; margin-bottom: 8px; }
 .section a { font-size: 12px; color: var(--candle); }
+.section.description p { font-size: 14px; color: var(--text); }
 
+.section-flush { padding-bottom: 0; }
+.sessions-box {
+  border-top: 1px dashed var(--border);
+  margin: 10px -32px 0;
+}
 .event-row {
   display: grid;
-  grid-template-columns: 32px 80px 1fr;
+  grid-template-columns: 32px auto 1fr;
   gap: 12px;
   align-items: baseline;
-  padding: 10px 0;
+  padding: 10px 32px;
   border-bottom: 1px dashed var(--border);
   font-size: 12px;
 }
 .event-row:last-child { border-bottom: none; }
 .event-num { color: var(--text-faint); font-size: 11px; }
-.event-date { color: var(--text-faint); }
+.event-date { color: var(--text-faint); white-space: nowrap; }
+.event-info { min-width: 0; }
 .event-title-link { color: var(--text); text-decoration: none; font-size: 13px; }
 .event-title-link:hover { color: var(--candle); }
 .event-status { font-size: 10px; color: var(--text-faint); margin-left: 8px; }
+.event-description {
+  font-size: 11px;
+  color: var(--text-dim);
+  line-height: 1.5;
+  margin: 4px 0 0;
+  max-width: 560px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
 
 .empty { font-size: 12px; color: var(--text-faint); }
+
+/* ---- ASIDE PANELS ---- */
+.aside-panel {
+  padding: 20px 24px;
+  border-bottom: 1px dashed var(--border);
+}
+.aside-panel:last-child { border-bottom: none; }
+.box-title {
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  margin-bottom: 8px;
+}
+.aside-detail {
+  font-size: 12px;
+  color: var(--text-dim);
+  margin-bottom: 4px;
+}
+.aside-link {
+  font-size: 12px;
+  color: var(--candle);
+}
+
+@media (max-width: 768px) {
+  .series-body.has-aside {
+    grid-template-columns: 1fr;
+  }
+  .series-aside {
+    border-left: none;
+    border-top: 1px dashed var(--border);
+  }
+}
 </style>

app/pages/series/index.vue

@@ -1,197 +1,77 @@
 <template>
   <div>
-    <!-- Page Header -->
     <PageHeader
       title="Event Series"
       subtitle="Multi-session events on cooperative topics"
     />
 
-    <!-- Series Grid -->
-    <section class="py-20 bg-[--ui-bg]">
-      <UContainer>
-        <div v-if="pending" class="text-center py-12">
-          <div
-            class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"
-          ></div>
-          <p class="text-[--ui-text-muted]">Loading series...</p>
+    <div v-if="pending" class="state-msg">Loading series...</div>
+
+    <div v-else-if="!filteredSeries.length" class="state-msg">
+      <p>
+        No series right now. Check back later or browse
+        <NuxtLink to="/events">upcoming events</NuxtLink>.
+      </p>
+    </div>
+
+    <div v-else>
+      <section
+        v-for="series in filteredSeries"
+        :key="series.id"
+        class="series-section"
+      >
+        <div class="series-head">
+          <h2>{{ series.title }}</h2>
+          <div class="series-meta-row">
+            <span v-if="series.type" class="badge all">{{ formatSeriesType(series.type) }}</span>
+            <span class="meta-text">
+              {{ series.eventCount }} sessions<template v-if="series.totalEvents"> of {{ series.totalEvents }} planned</template>
+            </span>
+            <span v-if="series.startDate && series.endDate" class="meta-text">
+              {{ formatDateRange(series.startDate, series.endDate) }}
+            </span>
+            <span v-if="series.totalRegistrations" class="meta-text">
+              {{ series.totalRegistrations }} registered
+            </span>
+          </div>
+          <p v-if="series.description" class="series-desc">
+            {{ series.description }}
+          </p>
         </div>
 
-        <div
-          v-else-if="filteredSeries.length > 0"
-          class="max-w-4xl mx-auto space-y-6"
-        >
+        <div v-if="series.events?.length" class="sessions">
           <div
-            v-for="series in filteredSeries"
-            :key="series.id"
-            class="border border-[--ui-border] rounded overflow-hidden hover:border-primary transition-colors"
+            v-for="(event, index) in series.events"
+            :key="event.id"
+            class="event-row"
           >
-            <!-- Series Header -->
-            <div class="p-6 border-b border-[--ui-border]">
-              <div
-                class="flex flex-col md:flex-row md:items-start md:justify-between gap-4"
+            <span class="event-num">
+              {{ String(event.series?.position || index + 1).padStart(2, '0') }}
+            </span>
+            <span class="event-date">{{ formatEventDate(event.startDate) }}</span>
+            <div class="event-info">
+              <NuxtLink
+                :to="`/events/${event.slug || event.id}`"
+                class="event-title-link"
               >
-                <div class="flex-1">
-                  <div class="flex items-center gap-3 mb-3 flex-wrap">
-                    <span
-                      :class="[
-                        'inline-flex items-center px-3 py-1 rounded text-sm font-medium',
-                        getSeriesTypeBadgeClass(series.type),
-                      ]"
-                    >
-                      {{ formatSeriesType(series.type) }}
-                    </span>
-                    <span
-                      :class="[
-                        'inline-flex items-center px-2 py-1 rounded text-xs font-medium',
-                        series.status === 'active'
-                          ? 'bg-candlelight-900/20 text-candlelight-500 dark:text-candlelight-400 border border-candlelight-700/30'
-                          : series.status === 'upcoming'
-                            ? 'bg-guild-500/10 text-guild-300 dark:text-guild-300 border border-guild-500/30'
-                            : 'bg-guild-500/10 text-guild-400 dark:text-guild-400 border border-guild-500/30',
-                      ]"
-                    >
-                      {{ series.status }}
-                    </span>
-                  </div>
-                  <h2 class="text-display-sm font-bold text-[--ui-text] mb-2">
-                    {{ series.title }}
-                  </h2>
-                  <p class="text-[--ui-text-muted] leading-relaxed">
-                    {{ series.description }}
-                  </p>
-                </div>
-                <div class="text-center md:text-right flex-shrink-0">
-                  <div class="text-3xl font-bold text-[--ui-text] mb-1">
-                    {{ series.eventCount }}
-                  </div>
-                  <div class="text-sm text-[--ui-text-muted]">Events</div>
-                  <div
-                    v-if="series.totalEvents"
-                    class="text-xs text-[--ui-text-muted] mt-1"
-                  >
-                    of {{ series.totalEvents }} planned
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- Events List -->
-            <div class="divide-y divide-[--ui-border]">
-              <div
-                v-for="event in series.events"
-                :key="event.id"
-                class="p-4 hover:bg-[--ui-bg-elevated] transition-colors"
-              >
-                <div class="flex items-center justify-between gap-4">
-                  <div class="flex items-center gap-4 flex-1 min-w-0">
-                    <div
-                      class="w-8 h-8 bg-candlelight-900/20 text-candlelight-500 dark:text-candlelight-400 rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0 border border-candlelight-700/30"
-                    >
-                      {{ event.series?.position || "?" }}
-                    </div>
-                    <div class="flex-1 min-w-0">
-                      <h3 class="font-medium text-[--ui-text] mb-1">
-                        {{ event.title }}
-                      </h3>
-                      <div
-                        class="flex items-center gap-4 text-sm text-[--ui-text-muted] flex-wrap"
-                      >
-                        <div class="flex items-center gap-1">
-                          <Icon
-                            name="heroicons:calendar-days"
-                            class="w-4 h-4"
-                          />
-                          {{ formatEventDate(event.startDate) }}
-                        </div>
-                        <div class="flex items-center gap-1">
-                          <Icon name="heroicons:clock" class="w-4 h-4" />
-                          {{ formatEventTime(event.startDate) }}
-                        </div>
-                        <div
-                          v-if="event.registrations?.length"
-                          class="flex items-center gap-1"
-                        >
-                          <Icon name="heroicons:users" class="w-4 h-4" />
-                          {{ event.registrations.length }} registered
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="flex items-center gap-3 flex-shrink-0">
-                    <span
-                      :class="[
-                        'inline-flex items-center px-2 py-1 rounded text-xs font-medium',
-                        getEventStatusClass(event),
-                      ]"
-                    >
-                      {{ getEventStatus(event) }}
-                    </span>
-                    <NuxtLink
-                      :to="`/events/${event.slug || event.id}`"
-                      class="inline-flex items-center px-3 py-1 bg-primary text-white text-sm rounded hover:bg-primary/90 transition-colors"
-                    >
-                      View
-                    </NuxtLink>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- Series Footer -->
-            <div
-              class="px-6 py-4 bg-[--ui-bg-elevated] border-t border-[--ui-border]"
-            >
-              <div class="flex items-center justify-between gap-4">
-                <div
-                  class="flex items-center gap-4 text-sm text-[--ui-text-muted] flex-wrap"
-                >
-                  <div
-                    v-if="series.startDate && series.endDate"
-                    class="flex items-center gap-1"
-                  >
-                    <Icon name="heroicons:calendar-days" class="w-4 h-4" />
-                    {{ formatDateRange(series.startDate, series.endDate) }}
-                  </div>
-                  <div
-                    v-if="series.totalRegistrations"
-                    class="flex items-center gap-1"
-                  >
-                    <Icon name="heroicons:users" class="w-4 h-4" />
-                    {{ series.totalRegistrations }} total registrations
-                  </div>
-                </div>
-                <NuxtLink
-                  :to="`/series/${series.id}`"
-                  class="inline-flex items-center px-4 py-2 bg-primary text-white text-sm font-medium rounded hover:bg-primary/90 transition-colors"
-                >
-                  View Series
-                  <Icon name="heroicons:arrow-right" class="w-4 h-4 ml-2" />
-                </NuxtLink>
-              </div>
+                {{ event.title }}
+              </NuxtLink>
+              <span class="event-status">{{ getEventStatus(event) }}</span>
             </div>
           </div>
         </div>
 
-        <div v-else class="text-center py-16">
-          <Icon
-            name="heroicons:squares-2x2"
-            class="w-16 h-16 text-[--ui-text-muted] mx-auto mb-4 opacity-50"
-          />
-          <h3 class="text-display-sm font-semibold text-[--ui-text] mb-2">
-            No series right now
-          </h3>
-          <p class="text-[--ui-text-muted] max-w-md mx-auto">
-            Check back later or browse
-            <NuxtLink to="/events" class="text-primary">upcoming events</NuxtLink>.
-          </p>
+        <div class="series-foot">
+          <NuxtLink :to="`/series/${series.id}`" class="view-link">
+            View series &rarr;
+          </NuxtLink>
         </div>
-      </UContainer>
-    </section>
+      </section>
+    </div>
   </div>
 </template>
 
 <script setup>
-// SEO
 useHead({
   title: "Event Series - Ghost Guild",
   meta: [
@@ -203,12 +83,10 @@ useHead({
   ],
 });
 
-// Fetch series data
 const { data: seriesData, pending } = await useFetch("/api/series", {
   query: { includeHidden: false },
 });
 
-// Filter for active and upcoming series only
 const filteredSeries = computed(() => {
   if (!seriesData.value) return [];
   return seriesData.value.filter(
@@ -216,7 +94,6 @@ const filteredSeries = computed(() => {
   );
 });
 
-// Helper functions
 const formatSeriesType = (type) => {
   const types = {
     workshop_series: "Workshop Series",
@@ -228,25 +105,6 @@ const formatSeriesType = (type) => {
   return types[type] || type;
 };
 
-const getSeriesTypeBadgeClass = (type) => {
-  const classes = {
-    workshop_series:
-      "bg-candlelight-900/20 text-candlelight-500 dark:text-candlelight-400 border border-candlelight-700/30",
-    recurring_meetup:
-      "bg-guild-500/10 text-guild-300 dark:text-guild-300 border border-guild-500/30",
-    multi_day:
-      "bg-ember-900/20 text-ember-500 dark:text-ember-400 border border-ember-700/30",
-    course:
-      "bg-candlelight-900/20 text-candlelight-500 dark:text-candlelight-400 border border-candlelight-700/30",
-    tournament:
-      "bg-ember-900/20 text-ember-500 dark:text-ember-400 border border-ember-700/30",
-  };
-  return (
-    classes[type] ||
-    "bg-earth-900/20 text-earth-400 dark:text-earth-400 border border-earth-700/30"
-  );
-};
-
 const formatEventDate = (date) => {
   return new Date(date).toLocaleDateString("en-US", {
     month: "short",
@@ -255,50 +113,133 @@ const formatEventDate = (date) => {
   });
 };
 
-const formatEventTime = (date) => {
-  return new Date(date).toLocaleTimeString("en-US", {
-    hour: "numeric",
-    minute: "2-digit",
-    hour12: true,
-  });
-};
-
 const formatDateRange = (startDate, endDate) => {
   const start = new Date(startDate);
   const end = new Date(endDate);
-
   const formatter = new Intl.DateTimeFormat("en-US", {
     month: "short",
     day: "numeric",
     year: "numeric",
   });
-
-  return `${formatter.format(start)} to ${formatter.format(end)}`;
+  return `${formatter.format(start)} – ${formatter.format(end)}`;
 };
 
 const getEventStatus = (event) => {
   const now = new Date();
   const startDate = new Date(event.startDate);
   const endDate = new Date(event.endDate);
-
   if (now < startDate) return "Upcoming";
   if (now >= startDate && now <= endDate) return "Ongoing";
   return "Completed";
 };
-
-const getEventStatusClass = (event) => {
-  const status = getEventStatus(event);
-  const classes = {
-    Upcoming:
-      "bg-guild-500/10 text-guild-300 dark:text-guild-300 border border-guild-500/30",
-    Ongoing:
-      "bg-candlelight-900/20 text-candlelight-500 dark:text-candlelight-400 border border-candlelight-700/30",
-    Completed:
-      "bg-guild-500/10 text-guild-400 dark:text-guild-400 border border-guild-500/30",
-  };
-  return (
-    classes[status] ||
-    "bg-guild-500/10 text-guild-400 dark:text-guild-400 border border-guild-500/30"
-  );
-};
 </script>
+
+<style scoped>
+.state-msg {
+  padding: 32px 28px;
+  color: var(--text-dim);
+  font-size: 12px;
+}
+.state-msg p { max-width: 560px; }
+
+.series-section {
+  border-bottom: 1px dashed var(--border);
+}
+
+.series-head {
+  padding: 24px 28px 16px;
+}
+.series-head h2 {
+  font-family: var(--font-display);
+  font-size: 22px;
+  font-weight: 600;
+  color: var(--text-bright);
+  line-height: 1.2;
+  margin-bottom: 10px;
+}
+.series-meta-row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+  font-size: 12px;
+}
+.meta-text {
+  color: var(--text-faint);
+  font-size: 12px;
+}
+.series-desc {
+  font-size: 13px;
+  color: var(--text-dim);
+  line-height: 1.7;
+  max-width: 640px;
+  margin: 0;
+}
+
+.sessions {
+  border-top: 1px dashed var(--border);
+  border-bottom: 1px dashed var(--border);
+}
+.event-row {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  padding: 12px 28px;
+  border-bottom: 1px dashed var(--border);
+  font-size: 12px;
+}
+.event-row:last-child { border-bottom: none; }
+.event-num {
+  flex: 0 0 24px;
+  color: var(--text-faint);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+.event-date {
+  flex: 0 0 110px;
+  color: var(--text-faint);
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+.event-info { flex: 1 1 0; min-width: 0; }
+.event-title-link {
+  color: var(--text);
+  text-decoration: none;
+  font-size: 13px;
+}
+.event-title-link:hover { color: var(--candle); }
+.event-status {
+  font-size: 10px;
+  color: var(--text-faint);
+  margin-left: 8px;
+}
+
+.series-foot {
+  padding: 14px 28px 24px;
+}
+.view-link {
+  font-size: 12px;
+  color: var(--candle);
+  letter-spacing: 0.04em;
+}
+.view-link:hover { text-decoration: underline; }
+
+@media (max-width: 768px) {
+  .series-head,
+  .series-foot {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+  .event-row {
+    flex-wrap: wrap;
+    padding-left: 20px;
+    padding-right: 20px;
+    row-gap: 2px;
+  }
+  .event-info {
+    flex-basis: 100%;
+    margin-left: 36px;
+  }
+}
+</style>

app/pages/welcome.vue

@@ -1,3 +1,3 @@
 <script setup>
-await navigateTo('/member/dashboard', { redirectCode: 301 })
+await navigateTo('/member/dashboard?welcome=1', { redirectCode: 301 })
 </script>

app/utils/activityText.js

@@ -42,7 +42,7 @@ const formatters = {
     icon: 'i-lucide-user-pen'
   }),
   subscription_created: (m) => ({
-    text: m.tier ? `Started $${m.tier}/mo subscription` : 'Started subscription',
+    text: m.amount != null ? `Started $${m.amount}/mo subscription` : 'Started subscription',
     icon: 'i-lucide-credit-card'
   }),
   subscription_cancelled: () => ({

docs/BACKLOG.md

@@ -0,0 +1,122 @@
+# Ghost Guild — Open Backlog
+
+_Last consolidated: 2026-04-30. Single source of truth for every open issue across the codebase. Pulls from `LAUNCH_READINESS.md`, `TODO.md`, the post-launch backlog memory, and a fresh sweep of in-code TODO/FIXME comments._
+
+Cutover has not happened yet. Deploy steps live separately in [`LAUNCH_READINESS.md`](./LAUNCH_READINESS.md).
+
+---
+
+## Pre-cutover (do once)
+
+Operational steps that have to run during cutover. Full details + env-var list in [`LAUNCH_READINESS.md`](./LAUNCH_READINESS.md).
+
+- [ ] Provision the Dokploy app, set env vars (full list in LAUNCH_READINESS.md), confirm `BASE_URL` exact-matches the public origin and `NODE_ENV=production`.
+- [ ] Add the daily Dokploy Scheduled Task that POSTs to `/api/internal/reconcile-payments` with `X-Reconcile-Token`.
+- [ ] **Run `node scripts/migrate-contribution-amount.cjs --apply` against prod Mongo BEFORE the new code serves traffic.**
+- [ ] Set `NUXT_HELCIM_MONTHLY_PLAN_ID=50302` and `NUXT_HELCIM_ANNUAL_PLAN_ID=50303` in Dokploy.
+- [ ] Set `NUXT_RECONCILE_TOKEN` to a 32+ char random string.
+- [ ] Push local `main` to `origin/main`.
+- [ ] Deploy.
+- [ ] **Run `node scripts/reconcile-helcim-payments.mjs --apply` against prod Mongo AFTER the new code serves traffic.**
+- [ ] Audit prod for pre-fix series-pass bypass registrations (registrations on pass-only series children with `registeredAt < 2026-04-20` from non-pass-holders). Decide per case.
+- [ ] In Helcim dashboard: disable the default payment-confirmation email for plans 50302 + 50303 (we send our own CRA-safe version via Resend).
+- [ ] Run one real test charge and verify (a) Payment doc in Mongo and (b) exactly one CRA-compliant confirmation email.
+- [ ] Rotate `HELCIM_API_TOKEN` in the Helcim merchant portal and update the Dokploy env var.
+- [ ] Trigger the daily reconcile task once manually in Dokploy to confirm it's wired correctly.
+
+## Pilot smoke walks (before first wave)
+
+Once cutover lands, before the first Slack onboarding wave goes out:
+
+- [ ] **Pilot smoke walk for Slack-invited workflow.** One admin manually clicks "Mark as Slack invited" against a real test member in production, confirms the row updates in place, and confirms the dashboard "Slack coming" note disappears for that member. Unit tests cover the pieces; nothing covers the live admin-to-member round-trip.
+
+---
+
+## Bylaws-decoupling (waiting on amendment ratification)
+
+Membership status is being decoupled from payment status. Copy + UI gates already align; behavioral changes below remain.
+
+- [ ] **B1.** `server/api/members/cancel-subscription.post.js:31,48` flips status to `pending_payment` on cancel. Under the new bylaws, cancellation should keep status `active` (just zero contribution). Update the `findByIdAndUpdate` payload + response, the comment at line 26, and add coverage in `tests/server/api/cancel-subscription.test.js`.
+- ~~B3 cancelled.~~ `pending_payment` stays.
+- ~~B4 admin "Pending Payment" → "Payment setup incomplete"~~ shipped 2026-04-29 (`59d2be2`).
+
+---
+
+## Known gotchas (post-launch)
+
+- **Admin edit does not sync Helcim `recurringAmount`.** `/admin/members/[id]` PUT writes `contributionAmount` direct to Mongo by design. Admins must PATCH Helcim manually. The admin form already shows an `--ember`-bordered notice (commit `e756170`); a real sync flow is a future enhancement.
+- **Cadence switch rejected on active subscriptions.** `server/api/members/update-contribution.post.js:206` refuses cadence changes mid-subscription with a TODO comment pointing here. No UI toggle exists on `/member/account`. Adding cadence switch requires a Helcim subscription replacement flow, not a plain update.
+- **S2 test fixture id/slug mismatch (local dev only).** Seeded S2 series has `id: 'test-s2-drop-in-allowed'` but `slug: 'test-s2-drop-in-allowed-series'`. Doesn't affect prod — fix the seed script if anyone re-runs fixtures.
+- **`/admin/series-management` "Delete" button doesn't actually delete.** Click handler iterates events to PUT-unlink each from the series, never calls `DELETE /api/admin/series/:id`. For an empty series the button is a no-op; for a series with events it just orphans them. Either rename to "Unlink events" or add the actual DELETE call. Surfaced by `e2e/admin-series.spec.js` (delete test skipped). Flagged 2026-04-30.
+- **Past-deadline events and sold-out events render identically.** `EventTicketPurchase.vue` falls through to "Event Sold Out" panel for both `tickets.available.reason === 'Registration deadline has passed'` and zero-stock cases. If "Registration closed" is meant to read differently from "Sold out," add a distinct branch. Flagged 2026-04-30 (no e2e written — gated on this UX decision).
+
+---
+
+## Accessibility / a11y
+
+- [ ] **Button minimum target size.** Site-wide `.btn` renders ~35px tall. WCAG AA 2.5.8 (24×24) passes; AAA 2.5.5 (44×44) fails. Bumping padding affects every button — design call, not a drop-in fix. Flagged 2026-04-11.
+- [ ] **`/board` color-contrast violations (WCAG AA).** `.block-label` ("Offering" tag) and `.slack-handle` use `#746a58` on `#e8dfc8` → 4.01:1; AA needs 4.5:1 for small text. Surfaced by `e2e/a11y.spec.js` (the `/board` route fails; test is intentionally left red until fixed). Likely a single CSS variable adjustment. Flagged 2026-04-30.
+
+---
+
+## Deferred features (own session each)
+
+- [ ] **Email automation system.** Patterned after Tranzac's implementation (separate project, already built). HTML email bodies with template management and drip sequences. Deferred 2026-04-20 — ruled wasted work given the larger system is designed elsewhere. Current transactional email lives in `server/utils/resend.js` + inline in `server/api/auth/login.post.js`, `server/routes/oidc/interaction/login.post.ts`, `server/api/admin/{members,pre-registrants}/invite.post.js`. Copy dump at `docs/email-copy-dump.md`. See memory: `project_email_automation_future`.
+- [ ] **Receipts for event ticket purchases (Phase 2).** Phase 1 receipts only cover membership payments. Event tickets — especially guest purchases without member accounts — need a receipt flow. Likely an emailed PDF/HTML receipt at purchase time. Build target: June–Oct 2026, live Jan 2027. See memory: `project_receipts`.
+- [ ] **Series/event waitlist.** Admin can configure `tickets.waitlist.enabled` and `maxSize`; `server/utils/tickets.js` returns `waitlistAvailable: true` when full; `app/components/SeriesPassPurchase.vue:341` and `EventTicketPurchase.vue` have stub `handleJoinWaitlist` that toasts "Waitlist Coming Soon." No server endpoint, no confirmation email, no `event_waitlisted` activity hook. Either implement end-to-end or hide the button by removing the `v-if="availability?.waitlistAvailable"` branches in `EventSeriesTicketCard.vue:175` and `EventTicketCard.vue:73`.
+- [ ] **ASVS Phase 4.** File-upload validation pipeline, granular RBAC, credential encryption.
+
+---
+
+## Wave-Slack pilot follow-ups
+
+- [ ] **`/api/auth/member` doesn't return `slackInvited`.** Dashboard's Slack-coming note is gated on `memberData.slackInvited`, which is always `undefined` client-side, so the note shows for *every* active member regardless of state. Real bug. Add `slackInvited` (and `slackInvitedAt`) to the auth/member response. Surfaced by wave-slack §7.2 e2e (skipped pending this fix). Flagged 2026-04-30.
+- [ ] **Admin members list row mutation isn't reactive.** `markSlackInvited` in `app/pages/admin/members/index.vue` does `Object.assign(member, res.member)` on a plain object inside a `useFetch` array; Vue doesn't react, so the "Mark as Slack invited" button stays visible until a manual reload. Fix: `members.value[i] = { ...members.value[i], ...res.member }` or `splice`. Detail page uses the right pattern (covered by §6.6). Surfaced by wave-slack §6.2 e2e (skipped pending this fix). Flagged 2026-04-30.
+- [ ] **Deprecated `slackInviteStatus` field still serialized.** Removed from UI but still on `Member` documents and the `/api/admin/members` payload. Project it away in the API response and run a one-shot `$unset` cleanup. Surfaced by wave-slack §6.7 e2e. Flagged 2026-04-30.
+- [ ] **Spec vs shipped-UI mismatch on wave language.** `docs/specs/wave-based-slack-onboarding-tests.md` §7.5 asserts "no wave/cohort/batch language" in the dashboard note, but the shipped welcome-email and dashboard copy say "monthly onboarding waves." Decide which side wins; update the other.
+- [ ] **E2E coverage for `e2e/wave-slack-onboarding.spec.js`.** 9 of 16 scaffolded tests now passing (admin Slack-invited button + non-trivial dashboard cases). 7 remain skipped pending the bugs above (7.2, 6.2), seeding gaps (7.4 — no dev endpoint to mint members of arbitrary status), Open Questions (7.8, 6.9), or spec-vs-UI conflicts (7.5, 6.7).
+- [ ] **Pilot exit decision (~8 weeks post-launch).** Either restore `server/_archive/utils/checkSlackJoins.js` + its plugin if polling is needed, or delete the archive permanently. Driven by whether the manual-invite cadence is sustainable post-pilot.
+- [ ] **`slack_invite_failed` enum slug cleanup.** Detector and alert removed in `d15458b`, but the slug remains in `server/models/adminAlertDismissal.js` enum so historical dismissal rows continue to validate. Full removal needs a one-shot cleanup of stale dismissal rows in the DB. Roll into a future schema-tidy pass.
+
+---
+
+## Simplify-pass follow-ups (still open)
+
+Items surfaced during the 2026-04-29 /simplify review. The 2026-04-30 small-wins batch shipped 3 items (STATUS_LABELS dedup, ImageUpload focus, signupBridge rename). Remaining:
+
+- [ ] **Extract `.tint-candle` / `.tint-ember` utility classes.** The `color-mix(in srgb, var(--candle) 15%, transparent)` + matching border pattern is now inlined as `style=""` in ~9 sites across `EventSeriesTicketCard.vue`, `SeriesPassPurchase.vue`, `NaturalDateInput.vue`, `ImageUpload.vue`. Promote to utility classes in `app/assets/css/main.css` so future tints don't keep multiplying inline styles (and so `:hover` / `:focus` variants are reachable).
+- [ ] **Audit `member &&` truthy checks in sibling ticket/subscription routes.** Commit `f66455e` fixed `server/api/events/[id]/tickets/available.get.js:115` to use `hasMemberAccess(member)`. Same anti-pattern likely exists in adjacent routes (`tickets/purchase.post.js`, subscription endpoints). Guests/suspended/cancelled members would currently look like full members for any feature gated on truthiness alone.
+- [ ] **STATUS_LABELS dedup — verify.** The 2026-04-30 small-wins batch claimed STATUS_LABELS dedup, but `e2e/admin-members.spec.js` expansion found an inline copy still at `app/pages/admin/members/index.vue:491` and another at `app/pages/member/account.vue:420`. Either the previous dedup was partial or a new copy was reintroduced — confirm and finish dedup into a shared constants module.
+- [ ] **`app/pages/admin/members/[id].vue` status select still hand-written.** Commit `441a5f5` aligned the index page's status `<select>` to `STATUS_LABELS`, but the detail page (`[id].vue`) still hand-codes raw status options. Refactor to drive from the same constant.
+
+---
+
+## Optional / low-priority
+
+- [ ] **Welcome-email Slack-timing mention.** Currently the welcome email doesn't mention Slack timing — the dashboard carries that note. Could add a one-line "Slack invitation comes in monthly waves — there may be a short wait" if the dashboard turns out not to be enough signal.
+
+---
+
+## E2e infrastructure gaps
+
+Surfaced during the 2026-04-30 e2e expansion. None block a green suite, but each blocks specific coverage from being added.
+
+- [ ] **Other email routes still send real emails in dev mode.** The `ALLOW_DEV_TEST_ENDPOINTS` short-circuit was added to `server/api/admin/pre-registrants/invite.post.js` (which calls `new Resend(...)` directly), but the five wrapper functions in `server/utils/resend.js` (event registration, cancellation, waitlist, series pass, welcome) still dispatch live. Either add the same gate to each wrapper, or refactor the wrappers into a single `sendEmail({ from, to, subject, text, html })` helper holding the gate centrally — would also dedupe ~5 near-identical try/catch blocks.
+- [ ] **No dev endpoint to seed members of arbitrary status.** Wave-slack §7.4 (note hidden for suspended/cancelled/guest) is gated on this. `/api/dev/test-login` only mints an `active` admin. A minimal `/api/dev/members.post` accepting `{ email, status, slackInvited, ... }` would unblock many more dashboard-state e2e tests.
+- [ ] **SSR `useFetch` blocks `page.route` mocking.** Page-level fetches in `[slug].vue` files run during SSR and can't be intercepted client-side. Affects: hidden-event 404 e2e, any test that needs a mocked event payload before client hydration. Either expose a client-side fetch alternative, add a server-side test mock layer, or accept that DB seeding is required for these cases.
+- [ ] **Self-cancel block on paid event registrations not e2e-tested.** Requires seeding a logged-in member with a paid registration row. Out of scope for this round.
+- [ ] **Visual snapshot for `join — desktop` is stale.** 12,676px diff (2% of image) from layout drift. Regenerate via `npx playwright test --update-snapshots e2e/visual/pages.spec.js` once a designer eyeballs the diff.
+- [ ] **E2e cross-file races on admin specs.** With `fullyParallel: false` + `workers: 4` + `retries: 1`, ~1 admin CRUD test still fails per full-suite run (rotates between `admin-events` CRUD, `board` page-loads, and wave-slack §6.4). Each passes 100% in isolation. Root cause: tests anchor on "first row" / "any visible button" rather than uniquely-identified data, so they race when other admin specs mutate the shared dev DB. Proper fix is per-test data isolation: each test creates its own scoped record with a `Date.now()` suffix and queries by that exact identifier. Out of scope for the e2e expansion.
+
+---
+
+## Deeplink memories
+
+- `project_post_launch_backlog.md` — high-level digest of this file
+- `project_launch_readiness.md` — cutover status (NOT YET happened)
+- `project_launch_flow_map.md` — onboarding flow + Slack wave model
+- `project_pre_registrants.md` — invitation system + pre-reg lifecycle
+- `project_helcim_plan_model.md` — cadence-keyed plan model
+- `project_contribution_amount_redesign.md` — arbitrary $ amount + guidance presets
+- `project_receipts.md` — Phase 1 done, Phase 2 pending
+- `project_email_automation_future.md` — Tranzac reference for full system

docs/LAUNCH_READINESS.md

@@ -0,0 +1,112 @@
+# Launch Readiness
+
+**Status as of 2026-04-30. Cutover has not happened yet.** Code is on local `main`; deploy steps below still need to execute.
+
+Pre-cutover deploy checklist is the live content on this page. Everything else (post-launch work, bylaws decoupling, deferred features, simplify follow-ups, a11y) lives in [`BACKLOG.md`](./BACKLOG.md). Completed launch-blocker items are archived — see `~/.claude/projects/-Users-jennie-Sites-ghostguild-org/memory/project_launch_readiness_archive.md`.
+
+---
+
+## Current state
+
+- Vitest snapshot 2026-04-25 ~18:23 local: **703 passing / 8 failing / 2 skipped (713 total)**. The previously-flagged 6 helcim-payment failures are now green. The 8 current failures are in `tests/server/api/auth-verify.test.js` and `tests/server/api/cancel-subscription.smoke.test.js`, both belonging to in-flight Phase 5 fixes (#10 and #9) being landed by parallel impl subagents — they will resolve as those branches merge.
+- All launch code is on local `main`: Helcim plan consolidation, contribution-amount redesign, cadence UX unification, and receipts Phase 1. Not pushed — site is not on Netlify yet.
+- Helcim plan consolidation migration **ran against prod 2026-04-18** (Monthly plan id `50302`, Annual plan id `50303`).
+- Contribution-amount migration has **NOT** yet been run against prod.
+- Receipts Phase 1 code is shipped; remaining work is deploy-time only (see Deploy checklist).
+
+---
+
+## P0 — Must fix before launch
+
+None outstanding.
+
+---
+
+## P1 — Strongly preferred before launch
+
+None outstanding.
+
+---
+
+## Deploy checklist
+
+Applies when the app is deployed to **Dokploy on Hetzner**. Build is via the in-repo `Dockerfile` (`node:20-alpine`, runs `node .output/server/index.mjs` on port 3000); Dokploy autodetects it. Traefik (Dokploy's reverse proxy) handles SSL; `oidc-provider.ts:194` and the rate-limit middleware already trust `X-Forwarded-Proto` / `X-Forwarded-For`.
+
+### One-time host setup
+
+- [ ] **Provision the Dokploy app** pointing at this repo. Build context: repo root. Default Dockerfile. Container port: `3000`.
+- [ ] **Set env vars in the Dokploy UI** (full list below). The `validate-env.js` Nitro plugin fails fast at boot if `MONGODB_URI` / `JWT_SECRET` / `RESEND_API_KEY` / `HELCIM_API_TOKEN` are missing — container refuses to start, so misconfig surfaces immediately in logs.
+- [ ] **`BASE_URL` must exactly match the public origin** (e.g. `https://ghostguild.org`, no trailing slash). The `/api/helcim/customer` origin check at `server/api/helcim/customer.post.js:11-15` does exact-match comparison against the `Origin` header — if `BASE_URL` is wrong or unset, signup 403s.
+- [ ] **`NODE_ENV=production`** must be set. Without it: `Secure` cookie flag, HSTS, and CSP all silently no-op.
+- [ ] **Add a Dokploy Scheduled Task** for daily reconciliation. Command:
+  ```
+  curl -fsS -X POST "$BASE_URL/api/internal/reconcile-payments" -H "X-Reconcile-Token: $NUXT_RECONCILE_TOKEN"
+  ```
+  Schedule: `0 4 * * *` (or any time of day). The Nitro route does the heavy lifting (Mongo iteration, Helcim API, retries) — the scheduler just wakes it up.
+
+### Cutover
+
+- [ ] Push local `main` to `origin/main`.
+- [ ] **Run `node scripts/migrate-contribution-amount.cjs --apply` against prod Mongo BEFORE the new code serves traffic.** Idempotent; dry-run on local counted 34 members. Requires `MONGODB_URI` in env. The script writes `contributionAmount` (Number) derived from existing `contributionTier` (String) on every Member doc; the old field is left intact for a window.
+- [ ] Set `NUXT_HELCIM_MONTHLY_PLAN_ID=50302` in Dokploy env.
+- [ ] Set `NUXT_HELCIM_ANNUAL_PLAN_ID=50303` in Dokploy env.
+- [ ] **Set `NUXT_RECONCILE_TOKEN`** to any 32+ char random string. Shared secret between the Dokploy scheduled task and `/api/internal/reconcile-payments`.
+- [ ] Deploy.
+- [ ] **Run `node scripts/reconcile-helcim-payments.mjs --apply` against prod Mongo AFTER the new code serves traffic** to backfill Payment records for pre-existing members. Idempotent (unique `helcimTransactionId`); the daily Dokploy cron picks it up from there.
+- [ ] **Prod audit for pre-fix series-pass bypass registrations.** Fixed in `f34b062` + `4e1888a` (2026-04-20). Before that, child events of pass-only series (`tickets.requiresSeriesTicket=true && tickets.allowIndividualEventTickets=false`) accepted drop-in registrations from non-pass-holders. For every such series, list its child-event `registrations` where the registrant is not in the parent series' pass-holder list, filter to `registeredAt < 2026-04-20`, and decide per-case: grandfather (keep + notify), refund + unregister, or silently unregister. Local Mongo was scrubbed of 2 such rows on 2026-04-20; prod was intentionally untouched.
+- [ ] **Helcim dashboard: disable the default payment-confirmation email for plans 50302 + 50303.** We send our own CRA-safe confirmation via Resend (`server/emails/paymentConfirmation.js`) triggered from `upsertPaymentFromHelcim`; leaving Helcim's default on = duplicate emails.
+- [ ] **Run one real test charge against the deployed app** and verify (a) a Payment doc in Mongo with `amount`, `paymentType`, `status: 'success'`, and (b) exactly one CRA-compliant confirmation email (charity name + "not an official donation receipt" disclaimer; no banned assertive phrasing).
+- [ ] **Rotate HELCIM_API_TOKEN** in the Helcim merchant portal and update the Dokploy env var. The token was previously exposed in `window.__NUXT__` payload until commit `208638e`.
+- [ ] **Trigger the daily reconcile task once manually** in Dokploy to confirm scheduled task + token are wired correctly. Expect a `[reconcile] done {...}` log line.
+
+**Env vars required in Dokploy (reference):**
+- `NODE_ENV=production`
+- `BASE_URL` (exact public origin, no trailing slash)
+- `MONGODB_URI`
+- `JWT_SECRET` (or `NUXT_JWT_SECRET` — the `NUXT_` variant wins)
+- `RESEND_API_KEY`
+- `HELCIM_API_TOKEN`
+- `NUXT_HELCIM_MONTHLY_PLAN_ID=50302`
+- `NUXT_HELCIM_ANNUAL_PLAN_ID=50303`
+- `NUXT_PUBLIC_HELCIM_PORTAL_URL`
+- `NUXT_RECONCILE_TOKEN` (32+ char random string)
+- `SLACK_BOT_TOKEN`
+- `OIDC_COOKIE_SECRET`
+
+---
+
+## Fixed 2026-04-25
+
+Day-of-launch security and correctness audit. All commit shas TBD until Phase 5.
+
+### CRITICAL (security)
+- **Fix #1** — `HELCIM_API_TOKEN` removed from public runtime config + dead `useHelcim.js` deleted. **Token must be rotated post-deploy** (was previously exposed via `window.__NUXT__`).
+- **Fix #2** — `/api/helcim/customer` gated with origin check + per-IP/email rate limit + magic-link email verification (replaces unauthenticated `setAuthCookie`).
+- **Fix #3** — `/api/events/[id]/payment` deleted (dead code with auth bypass). `processHelcimPayment` stub + `eventPaymentSchema` removed.
+- **Fix #4** — `/api/helcim/initialize-payment` re-derives ticket amount server-side via `calculateTicketPrice`; new `series_ticket` metadata type.
+- **Fix #5** — `/api/helcim/customer` upgrades existing `status:guest` members in place rather than rejecting with 409.
+
+### HIGH (correctness)
+- **Fix #6** — Recurring reconciliation: Netlify scheduled function calls `/api/internal/reconcile-payments` daily. Requires `NUXT_RECONCILE_TOKEN` env var.
+- **Fix #7** — `validateBeforeSave: false` added to event subdoc saves (waitlist endpoints) to dodge legacy location validators.
+- **Fix #8** — Series-pass purchase always creates a guest Member when caller is unauthenticated, mirroring event-ticket flow.
+- **Fix #9** — `cancel-subscription` leaves status `active` (per ratified bylaws); adds `lastCancelledAt` audit field.
+- **Fix #10** — `/api/auth/verify` uses `validateBody` with `.strict()` Zod schema.
+- **Fix #11** — Added 8 vitest cases for `cancel-subscription.post.js` (was uncovered).
+
+### Side-quests
+- Visual audit Phase 4 changes (events/series surface)
+- Per-fix branch verification: see `docs/superpowers/specs/2026-04-25-fix-*.md`
+
+---
+
+## Manual browser tests still needed
+
+None outstanding. All launch-blocking flows verified via local dev or cloudflared tunnel with real Helcim test card + real email (see archive for the full log). The one remaining browser verification is the staging test charge bundled into the Deploy checklist above.
+
+---
+
+## Post-launch & deferred work
+
+Bylaws decoupling, post-launch a11y, ASVS Phase 4, deferred features, simplify-pass follow-ups, known gotchas, wave-Slack pilot follow-ups — **everything that isn't a deploy step has moved to [`BACKLOG.md`](./BACKLOG.md).**
+