+```
+
+- [ ] **Step 2: Update `events.hbs` partial call**
+
+Find the line:
+
+```handlebars
+{{> post-filter-list collection="events" filter="tag:[hash-insights,hash-insights-2]" mode="or"}}
+```
+
+Replace with:
+
+```handlebars
+{{> post-filter-list collection="events" filter="tag:[hash-insights,hash-insights-2]" tagSlugs="hash-insights,hash-insights-2" mode="or"}}
+```
+
+- [ ] **Step 3: Update `interviews.hbs` partial call**
+
+Find the line:
+
+```handlebars
+{{> post-filter-list collection="interviews" filter="tag:[hash-conversations,hash-conversations-2,hash-conversations-3,hash-reflections,hash-reflections-2]" mode="or"}}
+```
+
+Replace with:
+
+```handlebars
+{{> post-filter-list collection="interviews" filter="tag:[hash-conversations,hash-conversations-2,hash-conversations-3,hash-reflections,hash-reflections-2]" tagSlugs="hash-conversations,hash-conversations-2,hash-conversations-3,hash-reflections,hash-reflections-2" mode="or"}}
+```
+
+(Yes, the slug list appears twice in each call — once for Ghost's `{{#get}}` filter expression, once as a plain comma-separated string for Typesense. Source of truth remains `routes.yaml`.)
+
+- [ ] **Step 4: Build and lint**
+
+```
+npx gulp build
+npm run test
+```
+
+- [ ] **Step 5: Manually verify in browser (DevTools console)**
+
+Reload `http://localhost:2368/events/`. Console:
+
+```javascript
+const c = Alpine.$data(document.querySelector('[x-data^="postFilterList"]'));
+console.log(c.tagSlugs);
+// Should print: ['hash-insights', 'hash-insights-2']
+```
+
+Same on interviews — should print the 5-element array.
+
+- [ ] **Step 6: Commit**
+
+```
+git add partials/post-filter-list.hbs events.hbs interviews.hbs
+git commit -m "feat(filter): thread page tagSlugs into Alpine component for search scoping"
+```
+
+---
+
+## Task 7: Search state, debounced fetch, AbortController, integration into filter pipeline
+
+**Files:**
+
+- Modify: `assets/js/post-filter-list.js` (add import; extend state, init, filtered, clearFilters; add `_runSearch`, `setSearchQuery`; extend URL state)
+
+Wire the Typesense wrapper into the component. UI for the search input lands in Task 8 — for now the state is testable from the console.
+
+- [ ] **Step 1: Add the import at the top of `assets/js/post-filter-list.js`**
+
+At the very top of the file, before the existing comment header, add:
+
+```javascript
+import { searchSlugs } from "./typesense-search.js";
+```
+
+- [ ] **Step 2: Extend the returned state object**
+
+Inside the `return { ... }` block, find the `--- state ---` section. After `tagSlugs: ...,` add:
+
+```javascript
+ searchQuery: '',
+ searchSlugs: null, // null = no search active or query < 2 chars; Set = Typesense results
+ searchError: false,
+ isSearching: false,
+ _searchAbortController: null,
+ _searchDebounceTimer: null,
+```
+
+The two underscore-prefixed fields are non-reactive runtime handles (Alpine will still proxy them, but we never bind to them in templates). Keeping them on the component avoids module-level state.
+
+- [ ] **Step 3: Extend `init()` to seed search from URL and watch `searchQuery`**
+
+Replace the existing `init()` body with:
+
+```javascript
+ init() {
+ this.allCards = this._readCardsFromDom();
+ this.availableTags = this._buildAvailableTags(this.allCards);
+
+ const state = this._readStateFromUrl();
+ this.selectedTags = state.tags;
+ this.sortMode = state.sort;
+ this.searchQuery = state.q;
+
+ this.$watch('selectedTags', () => {
+ this.visibleCount = PAGE_SIZE;
+ this._writeStateToUrl();
+ });
+ this.$watch('sortMode', () => {
+ this.visibleCount = PAGE_SIZE;
+ this._reorderDom();
+ this._writeStateToUrl();
+ });
+
+ // Apply initial DOM order if URL specified a non-default sort.
+ if (this.sortMode !== 'newest') {
+ this._reorderDom();
+ }
+
+ // Fire a search if URL had ?q=… on load.
+ if (this.searchQuery.trim().length >= 2) {
+ this._runSearch();
+ }
+ },
+```
+
+- [ ] **Step 4: Update `filtered()` to apply the search filter**
+
+Replace the existing `filtered()` body with:
+
+```javascript
+ filtered() {
+ let result = this.allCards.filter((c) => this.matches(c));
+ if (this.searchSlugs !== null) {
+ result = result.filter((c) => this.searchSlugs.has(c.slug));
+ }
+ return this._sorted(result);
+ },
+```
+
+- [ ] **Step 5: Update `clearFilters()` to reset all state**
+
+Replace the existing `clearFilters()` body with:
+
+```javascript
+ clearFilters() {
+ this.selectedTags = [];
+ this.sortMode = 'newest';
+ this.searchQuery = '';
+ this.searchSlugs = null;
+ this.searchError = false;
+ },
+```
+
+- [ ] **Step 6: Add `setSearchQuery` and `_runSearch` to the component**
+
+Inside the `--- actions ---` section, before `clearFilters`, add:
+
+```javascript
+ setSearchQuery(value) {
+ this.searchQuery = value;
+ clearTimeout(this._searchDebounceTimer);
+ this._searchDebounceTimer = setTimeout(() => {
+ this._runSearch();
+ }, 250);
+ },
+```
+
+Inside the `--- internals ---` section, after `_reorderDom()`, add:
+
+```javascript
+ async _runSearch() {
+ const trimmed = this.searchQuery.trim();
+
+ // Cancel any in-flight request — newer query supersedes it.
+ if (this._searchAbortController) {
+ this._searchAbortController.abort();
+ }
+
+ // Short-circuit: <2 chars means no search active.
+ if (trimmed.length < 2) {
+ this.searchSlugs = null;
+ this.searchError = false;
+ this.isSearching = false;
+ this.visibleCount = PAGE_SIZE;
+ this._writeStateToUrl();
+ return;
+ }
+
+ this._searchAbortController = new AbortController();
+ this.isSearching = true;
+
+ try {
+ const slugs = await searchSlugs(
+ trimmed,
+ this.tagSlugs,
+ this._searchAbortController.signal,
+ );
+ this.searchSlugs = slugs;
+ this.searchError = false;
+ this.visibleCount = PAGE_SIZE;
+ this._writeStateToUrl();
+ } catch (err) {
+ if (err.name === 'AbortError') return; // newer query is in flight
+ this.searchSlugs = null;
+ this.searchError = true;
+ } finally {
+ this.isSearching = false;
+ }
+ },
+```
+
+- [ ] **Step 7: Extend `_readStateFromUrl` and `_writeStateToUrl` to handle `q`**
+
+Replace the existing `_readStateFromUrl` body with:
+
+```javascript
+ _readStateFromUrl() {
+ const params = new URLSearchParams(window.location.search);
+
+ const tags = (params.get('tags') || '')
+ .split(',')
+ .map((s) => s.trim())
+ .filter(Boolean);
+
+ const rawSort = params.get('sort') || 'newest';
+ const validSorts = ['newest', 'oldest', 'az', 'za'];
+ const sort = validSorts.includes(rawSort) ? rawSort : 'newest';
+
+ const q = params.get('q') || '';
+
+ return { tags, sort, q };
+ },
+```
+
+Replace the existing `_writeStateToUrl` body with:
+
+```javascript
+ _writeStateToUrl() {
+ const params = new URLSearchParams(window.location.search);
+
+ if (this.selectedTags.length) {
+ params.set('tags', this.selectedTags.join(','));
+ } else {
+ params.delete('tags');
+ }
+
+ if (this.sortMode && this.sortMode !== 'newest') {
+ params.set('sort', this.sortMode);
+ } else {
+ params.delete('sort');
+ }
+
+ const q = (this.searchQuery || '').trim();
+ if (q.length >= 2) {
+ params.set('q', q);
+ } else {
+ params.delete('q');
+ }
+
+ const qs = params.toString();
+ const newUrl = qs
+ ? `${window.location.pathname}?${qs}`
+ : window.location.pathname;
+ window.history.replaceState(null, '', newUrl);
+ },
+```
+
+- [ ] **Step 8: Build and lint**
+
+```
+npx gulp build
+npm run test
+```
+
+- [ ] **Step 9: Manually verify in browser (DevTools console)**
+
+Reload `http://localhost:2368/events/`. Console:
+
+```javascript
+const c = Alpine.$data(document.querySelector('[x-data^="postFilterList"]'));
+
+// Trigger a search programmatically (simulates UI input).
+c.setSearchQuery("stoic");
+
+// Wait ~500ms then inspect.
+setTimeout(() => {
+ console.log(
+ "searchSlugs size:",
+ c.searchSlugs?.size,
+ "isSearching:",
+ c.isSearching,
+ "searchError:",
+ c.searchError,
+ );
+ console.log("visible count:", c.visible().length);
+ console.log("URL:", location.search);
+}, 600);
+```
+
+Expected:
+
+- `searchSlugs` is a `Set` with 0+ entries.
+- `isSearching` is `false` (request completed).
+- `visible count` reflects the intersection of search results with loaded cards.
+- URL has `?q=stoic`.
+
+Reload `http://localhost:2368/events/?q=banking`. Console — search should fire on init, narrow results.
+
+Test the abort path:
+
+```javascript
+c.setSearchQuery("a"); // <2 chars → searchSlugs = null
+c.setSearchQuery("ab"); // fires search
+c.setSearchQuery("abc"); // aborts the prior, fires new
+```
+
+Network panel: only the latest request should complete; earlier ones show `cancelled` status.
+
+Test error path: in DevTools → Network, right-click → Block request URL on the Typesense host. Then `c.setSearchQuery('test')`. Wait. `c.searchError` should become `true`. Unblock URL.
+
+- [ ] **Step 10: Commit**
+
+```
+git add assets/js/post-filter-list.js
+git commit -m "feat(search): integrate Typesense search into filter pipeline"
+```
+
+---
+
+## Task 8: Search input UI, searching indicator, error banner, empty-state copy, Clear-filters scope
+
+**Files:**
+
+- Modify: `partials/post-filter-list.hbs` (toolbar block, chip-row Clear button, empty state, error banner)
+
+Add the search input to the toolbar (left side, flex-1) alongside the existing sort dropdown (right side). Add a `Searching…` indicator. Add a Typesense-error banner. Adapt the empty-state copy to mention search. Extend the Clear-filters button visibility to also trigger when search or sort is active.
+
+- [ ] **Step 1: Replace the toolbar block in `partials/post-filter-list.hbs`**
+
+Find the toolbar block added in Task 4:
+
+```handlebars
+{{! Toolbar: sort dropdown (and search input — added in Task 8). }}
+
+
+
+
+
+
+```
+
+Replace with:
+
+```handlebars
+{{! Toolbar: search input (left, flex-1) + sort dropdown (right). }}
+
+
+
+
+
+ Searching…
+
+
+
+
+
+
+
+
+{{! Search error banner }}
+
+ Search temporarily unavailable. Filters and sorting still work.
+
+```
+
+- [ ] **Step 2: Extend the chip-row Clear-filters button visibility**
+
+Find the existing chip-row Clear-filters button (currently inside the `filter-chips` div):
+
+```handlebars
+
+```
+
+Replace the `x-show` attribute:
+
+```handlebars
+
+```
+
+- [ ] **Step 3: Adapt the empty-state copy**
+
+Find the empty state block:
+
+```handlebars
+{{! Empty state }}
+
+
No posts match your selected tags.
+
+
+```
+
+Replace the entire block with:
+
+```handlebars
+{{! Empty state }}
+
+
No
+ posts match your search and filters.
+
No
+ posts match your search.
+
No
+ posts match your selected tags.
+
No
+ posts to show.
+
+
+```
+
+- [ ] **Step 4: Build and lint**
+
+```
+npx gulp build
+npm run test
+```
+
+- [ ] **Step 5: Manually verify in browser**
+
+Reload `http://localhost:2368/events/`.
+
+1. Toolbar shows search input (left, full-width) and sort dropdown (right).
+2. Type a query — results live-narrow after ~250ms; "Searching…" appears briefly.
+3. Combine with a tag chip — narrows further (intersection).
+4. Clear search — full set returns.
+5. Type a nonsense query like "asdfqwerzxcv" — empty state shows "No posts match your search." with Clear filters button.
+6. Click Clear filters — search input empties, chips deselect, sort returns to Newest first.
+7. Press Esc inside the search input — clears the input and refocuses it.
+8. Reload `?q=banking&sort=oldest&tags=hash-insights` — all three apply correctly on initial paint.
+9. (Mobile) Resize viewport to 375px — toolbar wraps: search above, sort below. Both still functional.
+10. (Error path) DevTools → Network → block `typesense.advisory.sg`. Type a search. Red error banner appears: "Search temporarily unavailable…". Chips and sort still work. Unblock and clear search to dismiss banner.
+
+Same checks on `/interviews/`.
+
+- [ ] **Step 6: Commit**
+
+```
+git add partials/post-filter-list.hbs
+git commit -m "feat(search): add search input, indicator, banner, and empty-state adaptation"
+```
+
+---
+
+## Task 9: End-to-end manual verification matrix
+
+**Files:** none (verification only)
+
+A final pass against the spec's testing checklist (section 12 of the spec). No code changes. Catch anything missed before handing back to the user.
+
+- [ ] **Step 1: Run the full matrix on `/events/`**
+
+Walk through every scenario in `docs/superpowers/specs/2026-05-06-search-sort-fullload-design.md` § "Testing and verification":
+
+1. ✅ Page loads → toolbar visible, chips visible, full event-post count present in DOM (`document.querySelectorAll('.filter-card-wrapper').length` matches expected).
+2. ✅ Type "stoic" → live narrow, count updates, URL gets `?q=stoic`.
+3. ✅ Click an interviews-related chip + search → AND-narrow.
+4. ✅ Change sort to "Title A→Z" → cards visually reorder. URL has `sort=az`.
+5. ✅ Refresh `/events/?q=banking&tags=hash-insights&sort=oldest` → all three pre-applied correctly on first paint.
+6. ✅ Block Typesense host → banner appears on next search; chips and sort still work.
+7. ✅ Type "x" (one char) → no Typesense request fires (verify in Network panel). Type "xy" → request fires.
+8. ✅ Type fast (multiple chars rapidly) → in-flight requests get cancelled (`status: cancelled` in Network panel).
+9. ✅ Disable JavaScript in DevTools → all posts visible in static grid; no toolbar; no chip UI.
+10. ✅ Mobile viewport (375px) → toolbar wraps to two rows.
+11. ✅ Tab through controls with keyboard. Tab order: search → sort → first chip → other chips → first card → load-more (if visible).
+12. ✅ Esc inside search input clears + refocuses.
+13. ✅ Clear filters button (in chip row AND in empty state) clears all four dimensions: tags, search, sort.
+
+- [ ] **Step 2: Run the same matrix on `/interviews/`**
+
+Identical checks; substitute interview tag slugs.
+
+- [ ] **Step 3: Confirm `/posts/` is unaffected**
+
+Load `http://localhost:2368/posts/`. Should show plain post grid, no toolbar, no chips, title "Posts". This template (`index.hbs`) shouldn't have changed.
+
+- [ ] **Step 4: Confirm tag pages are unaffected**
+
+Load `http://localhost:2368/tag/
/`. Should show normal tag page, no filter UI. (Reads from `tag.hbs`, not touched.)
+
+- [ ] **Step 5: Run `gscan` one final time**
+
+```
+npm run test
+```
+
+Should pass with no errors.
+
+- [ ] **Step 6: Hand back to user**
+
+Report:
+
+- Total commits added on this branch since the start of the plan.
+- Any scenario from the matrix that didn't behave as expected.
+- Any surprises or deviations from the spec that the implementer made.
+- Suggested next step (typically: invoke `superpowers:finishing-a-development-branch` for PR/merge).
+
+---
+
+## Self-review notes (writer's check)
+
+**Spec coverage check:**
+
+- Full-corpus load (Approach A, 20 blocks, 2000 ceiling) → Task 1.
+- Sort options + UI + URL sync → Tasks 2, 3, 4.
+- Typesense search wrapper → Task 5.
+- `tagSlugs` plumbing for `filter_by` → Task 6.
+- Search state, debounce, AbortController, error handling → Task 7.
+- Search UI, searching indicator, error banner, empty-state copy, Clear-filters scope → Task 8.
+- Accessibility (sr-only label, aria-controls, aria-live, role=alert, native select) → Task 8.
+- All scenarios in spec § "Testing and verification" → Task 9.
+
+**Type/name consistency check:**
+
+- `_readStateFromUrl` / `_writeStateToUrl` introduced in Task 3, extended in Task 7. Same names throughout.
+- `searchSlugs` (component state) vs `searchSlugs` (imported function from `typesense-search.js`) — same name, different scope. Module export is namespaced via `import { searchSlugs } from './typesense-search.js'` and called as `searchSlugs(...)` (function call), distinct from `this.searchSlugs` (property access). No actual collision but worth knowing.
+- `tagSlugs` parameter (string from partial) vs `tagSlugs` state (parsed array on the component) — same name, parsed in the component constructor. Confirmed in Task 3, Step 1 ("comma-separated string of tag slugs … Not consumed in Task 3" → parsed in `tagSlugs: (tagSlugs || '').split(',')...`).
+- `setSearchQuery` (Task 7 step 6) is called from the input handler in Task 8 step 1 (`@input="setSearchQuery($event.target.value)"`). Names match.
+- `data-published-at` (Task 2) → `inner.dataset.publishedAt` (Task 3, `_readCardsFromDom`). Camelcase auto-conversion is correct.
diff --git a/docs/superpowers/plans/2026-05-06-sort-filter.md b/docs/superpowers/plans/2026-05-06-sort-filter.md
new file mode 100644
index 00000000..dcf2ee0f
--- /dev/null
+++ b/docs/superpowers/plans/2026-05-06-sort-filter.md
@@ -0,0 +1,893 @@
+# Sort & Filter (Events / Interviews) Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Add an in-place, multi-tag, client-side filter to `/events/` and `/interviews/`, with URL-synced state, "Load more" pagination, and a configurable OR/AND mode.
+
+**Architecture:** All matching posts are server-rendered into the page once via Ghost's `{{#get}}` helper. An Alpine.js component reads the post DOM, builds an available-tag list, watches a `selectedTags` array, and toggles `x-show` on each card to filter and paginate without re-fetching. Filter state syncs to `?tags=...` via `history.replaceState`.
+
+**Tech Stack:** Ghost theme (Handlebars partials + `routes.yaml`), Alpine.js (already a dep), Tailwind CSS (already a dep), webpack via gulp (already configured). No new dependencies.
+
+**Spec:** `docs/superpowers/specs/2026-05-06-sort-filter-design.md`
+
+## Working environment
+
+- Local Ghost instance at `http://localhost:2368` with this theme installed.
+- Build the theme one-shot: `npx gulp build` (compiles HBS, CSS, JS into `assets/built/`).
+- Watch mode for active dev: `npm run dev` (runs `gulp` default — build + livereload + watch). Leave it running in a separate terminal.
+- Theme linter: `npm run test` (runs `gscan .`). Must show no errors. CI form: `npm run test:ci`.
+- Pre-commit hook (husky + pretty-quick) runs Prettier on staged files. Don't fight it — let it reformat.
+- All tasks commit to the current branch (`filter-addition`).
+
+## File map
+
+**Created:**
+
+- `interviews.hbs` — page template for `/interviews/` (mirror of `index.hbs` using the new partial).
+- `partials/post-filter-list.hbs` — reusable filter UI + post grid + load-more.
+- `assets/js/post-filter-list.js` — Alpine component definition.
+
+**Modified:**
+
+- `partials/post-card.hbs` — add `data-tags` and `data-tag-names` to root ``.
+- `events.hbs` — swap tags-listing/foreach/pagination block for the new partial.
+- `assets/js/main.js` — import the component file and register before `Alpine.start()`.
+- `config/routes.yaml` — point `/interviews/` template at `interviews` instead of `index`.
+
+**Untouched:**
+
+- `index.hbs` — still serves `/posts/` as a generic collection.
+- `partials/tags-listing.hbs` — left intact.
+- `tag.hbs` — left intact.
+
+---
+
+## Task 1: Add `data-tags` and `data-tag-names` to `post-card.hbs`
+
+**Files:**
+
+- Modify: `partials/post-card.hbs:1`
+
+This card partial is shared across many pages (homepage, related posts, listings, tag pages). Adding two extra `data-*` attributes is harmless everywhere else and is what the new filter component reads.
+
+- [ ] **Step 1: Edit the root `` element**
+
+Change line 1 of `partials/post-card.hbs` from:
+
+```handlebars
+
+```
+
+to:
+
+```handlebars
+
+```
+
+The `visibility="public"` argument excludes Ghost's internal hash-prefixed routing tags (`#insights`, `#conversations`, etc.) so they don't surface as filter chips.
+
+- [ ] **Step 2: Build and lint**
+
+Run:
+
+```
+npx gulp build
+npm run test
+```
+
+Both should complete with no errors.
+
+- [ ] **Step 3: Manually verify in browser**
+
+With `npm run dev` running and Ghost serving the theme, load `http://localhost:2368/events/` in a browser. Open DevTools, inspect any `.feed-card` element, and confirm both `data-tags="..."` and `data-tag-names="..."` are present. They should contain only public tag slugs/names (no `hash-...` entries).
+
+- [ ] **Step 4: Commit**
+
+```
+git add partials/post-card.hbs
+git commit -m "feat(post-card): expose public tags via data attributes"
+```
+
+---
+
+## Task 2: Add the Alpine component skeleton
+
+**Files:**
+
+- Create: `assets/js/post-filter-list.js`
+- Modify: `assets/js/main.js:1-12`
+
+Land the component file with all methods stubbed/empty so we can wire it into `main.js`, build, and verify Alpine doesn't error before adding logic.
+
+- [ ] **Step 1: Create `assets/js/post-filter-list.js`**
+
+```javascript
+// Alpine component for client-side multi-tag filter, load-more, and URL sync.
+// Used by partials/post-filter-list.hbs on /events/ and /interviews/.
+//
+// Call site:
+//
+export default function postFilterList({ collection, mode }) {
+ const PAGE_SIZE = 12;
+
+ return {
+ selectedTags: [],
+ visibleCount: PAGE_SIZE,
+ allCards: [],
+ availableTags: [],
+
+ init() {
+ this.allCards = this._readCardsFromDom();
+ this.availableTags = this._buildAvailableTags();
+ this.selectedTags = this._readTagsFromUrl();
+ this.$watch("selectedTags", () => {
+ this.visibleCount = PAGE_SIZE;
+ this._writeTagsToUrl();
+ });
+ },
+
+ // --- queries -----------------------------------------------------
+
+ matches(card) {
+ if (this.selectedTags.length === 0) return true;
+ if (mode === "and") {
+ return this.selectedTags.every((t) => card.tagSlugs.has(t));
+ }
+ return this.selectedTags.some((t) => card.tagSlugs.has(t));
+ },
+
+ filtered() {
+ return this.allCards.filter((c) => this.matches(c));
+ },
+
+ visible() {
+ return this.filtered().slice(0, this.visibleCount);
+ },
+
+ isVisible(el) {
+ return this.visible().some((c) => c.el === el);
+ },
+
+ unknownTags() {
+ const known = new Set(this.availableTags.map((t) => t.slug));
+ return this.selectedTags.filter((s) => !known.has(s));
+ },
+
+ hasMore() {
+ return this.filtered().length > this.visibleCount;
+ },
+
+ // --- actions -----------------------------------------------------
+
+ isSelected(slug) {
+ return this.selectedTags.includes(slug);
+ },
+
+ toggleTag(slug) {
+ if (this.isSelected(slug)) {
+ this.selectedTags = this.selectedTags.filter((s) => s !== slug);
+ } else {
+ this.selectedTags = [...this.selectedTags, slug];
+ }
+ },
+
+ loadMore() {
+ this.visibleCount += PAGE_SIZE;
+ // Move focus to the first newly-revealed card for keyboard users.
+ this.$nextTick(() => {
+ const newIndex = this.visibleCount - PAGE_SIZE;
+ const card = this.filtered()[newIndex];
+ if (card && card.el) card.el.focus();
+ });
+ },
+
+ clearFilters() {
+ this.selectedTags = [];
+ },
+
+ // --- internals ---------------------------------------------------
+
+ _readCardsFromDom() {
+ const root = this.$root || this.$el;
+ const cards = root.querySelectorAll("[data-tags]");
+ return Array.from(cards).map((el) => {
+ const slugs = (el.dataset.tags || "")
+ .split(",")
+ .map((s) => s.trim())
+ .filter(Boolean);
+ return { el, tagSlugs: new Set(slugs) };
+ });
+ },
+
+ _buildAvailableTags() {
+ const root = this.$root || this.$el;
+ const cards = root.querySelectorAll("[data-tags]");
+ const map = new Map();
+ cards.forEach((el) => {
+ const slugs = (el.dataset.tags || "").split(",");
+ const names = (el.dataset.tagNames || "").split(",");
+ slugs.forEach((slug, i) => {
+ const s = slug.trim();
+ if (!s) return;
+ if (!map.has(s)) {
+ map.set(s, { slug: s, name: (names[i] || s).trim() });
+ }
+ });
+ });
+ return Array.from(map.values()).sort((a, b) =>
+ a.name.localeCompare(b.name),
+ );
+ },
+
+ _readTagsFromUrl() {
+ const params = new URLSearchParams(window.location.search);
+ const raw = params.get("tags") || "";
+ return raw
+ .split(",")
+ .map((s) => s.trim())
+ .filter(Boolean);
+ },
+
+ _writeTagsToUrl() {
+ const params = new URLSearchParams(window.location.search);
+ if (this.selectedTags.length) {
+ params.set("tags", this.selectedTags.join(","));
+ } else {
+ params.delete("tags");
+ }
+ const qs = params.toString();
+ const newUrl = qs
+ ? `${window.location.pathname}?${qs}`
+ : window.location.pathname;
+ window.history.replaceState(null, "", newUrl);
+ },
+ };
+}
+```
+
+- [ ] **Step 2: Wire it into `main.js`**
+
+Modify the top of `assets/js/main.js`. Find:
+
+```javascript
+import "./jquery-global.js";
+
+import InfiniteScroll from "infinite-scroll";
+import fitvids from "fitvids";
+import "lazysizes";
+
+import Glide from "@glidejs/glide";
+import Alpine from "alpinejs";
+import "flowbite";
+
+window.Alpine = Alpine;
+Alpine.start();
+```
+
+Replace with:
+
+```javascript
+import "./jquery-global.js";
+
+import InfiniteScroll from "infinite-scroll";
+import fitvids from "fitvids";
+import "lazysizes";
+
+import Glide from "@glidejs/glide";
+import Alpine from "alpinejs";
+import "flowbite";
+
+import postFilterList from "./post-filter-list.js";
+
+window.Alpine = Alpine;
+Alpine.data("postFilterList", postFilterList);
+Alpine.start();
+```
+
+Order matters: `Alpine.data(...)` must run before `Alpine.start()`.
+
+- [ ] **Step 3: Build**
+
+Run:
+
+```
+npx gulp build
+```
+
+Should complete with no webpack errors.
+
+- [ ] **Step 4: Verify Alpine still works**
+
+Reload `http://localhost:2368/events/` in a browser. Open DevTools console — there should be no Alpine errors. Other Alpine-driven widgets on the page (if any — flowbite uses Alpine) should still work normally.
+
+- [ ] **Step 5: Commit**
+
+```
+git add assets/js/post-filter-list.js assets/js/main.js
+git commit -m "feat(js): add postFilterList Alpine component"
+```
+
+---
+
+## Task 3: Create `partials/post-filter-list.hbs` and use it on `/events/`
+
+**Files:**
+
+- Create: `partials/post-filter-list.hbs`
+- Modify: `events.hbs` (entire body)
+
+Render the partial with full markup but no chip interaction yet — just the post grid via `{{#get}}`. This is the first user-visible step: `/events/` should look almost identical to before, with a chip row added above and a "Load more" button below.
+
+- [ ] **Step 1: Create the partial**
+
+Create `partials/post-filter-list.hbs`:
+
+```handlebars
+{{!-- Reusable filter UI + post grid + load-more.
+ Parameters:
+ collection — string label (used as DOM id namespace)
+ filter — Ghost filter string passed to {{#get "posts"}}
+ mode — "or" (default) or "and" --}}
+
+
+
+ {{!-- Filter chips (only visible if there are tags to filter by) --}}
+
+
+
+
+
+
+
+ {{!-- Live result count for screen readers --}}
+
+
+
+
+ {{!-- Unknown-tags banner (URL referenced tags not on this page) --}}
+
+ The following tags don't exist on this page:
+
+
+
+ {{!-- Empty state --}}
+
+
No posts match your selected tags.
+
+
+ {{!-- Server-rendered post grid. Cards stay in DOM; Alpine toggles x-show. --}}
+
+
+ {{#get "posts" limit="1000" filter=filter include="tags" order="published_at desc" as |posts|}}
+
+ {{#foreach posts}}
+
+ {{> "post-card"}}
+
+ {{/foreach}}
+ {{/get}}
+
+
+ {{!-- Load more button --}}
+
+
+
+
+
+
+```
+
+Note on `isVisible`: each card is wrapped in a `
`, and the wrapper's `x-show` calls `isVisible()` against the inner `[data-tags]` element (the `
` produced by `post-card.hbs`).
+
+- [ ] **Step 2: Update `events.hbs` to use the partial**
+
+Replace the entire contents of `events.hbs` with:
+
+```handlebars
+{{!< default}}
+
+{{#contentFor "title"}}Events{{/contentFor}}
+
+
+
+
+ {{> post-filter-list collection="events" filter="tag:hash-insights" mode="or"}}
+
+
+```
+
+- [ ] **Step 3: Build and lint**
+
+Run:
+
+```
+npx gulp build
+npm run test
+```
+
+Both should complete with no errors.
+
+- [ ] **Step 4: Manual verification at `localhost:2368/events/`**
+
+In the browser:
+
+- The page should render with a row of pill chips at the top (one per tag found across event posts), a "Showing X of Y" line, and the same post grid as before. A "Load more" button appears below if there are more than 12 posts.
+- Click a chip — nothing should happen yet. Why: the `x-show` on each card uses `isVisible($el.querySelector('[data-tags]'))`, which depends on `visible()`, which depends on `selectedTags` and `visibleCount`. **It will work** as soon as `selectedTags` changes via `toggleTag` — but visually verify that the chips render and that the initial 12-card limit is enforced.
+- Verify in DevTools: every `.feed-card` `` is wrapped in a `.filter-card-wrapper`, and only the first 12 wrappers are visible (the rest have `display: none` from Alpine's `x-show`).
+- Click a chip — the page should now filter to posts with that tag. Click again to deselect.
+- Click two chips — posts with **either** tag should show (OR mode default).
+- The URL should update to `?tags=...` as you click.
+
+- [ ] **Step 5: Commit**
+
+```
+git add partials/post-filter-list.hbs events.hbs
+git commit -m "feat(events): add multi-tag filter and load-more"
+```
+
+---
+
+## Task 4: Verify URL sync end-to-end
+
+**Files:** None modified. This is a manual verification gate.
+
+The Alpine component already implements URL sync (Task 2) and the partial is wired up (Task 3). This task confirms the end-to-end behavior matches the spec.
+
+- [ ] **Step 1: Filter from a clean URL**
+
+- Visit `http://localhost:2368/events/` (no query).
+- Click two chips. URL should become `http://localhost:2368/events/?tags=slug-1,slug-2` (with whatever slugs you picked).
+- Click one chip again to deselect. URL should drop that slug.
+- Click "Clear filters". URL should drop `?tags=` entirely (back to plain `/events/`).
+
+- [ ] **Step 2: Land on a pre-filtered URL**
+
+- Manually navigate to `http://localhost:2368/events/?tags=` in the address bar.
+- The page should load with that chip already selected and posts filtered.
+
+- [ ] **Step 3: Land on an unknown-tag URL**
+
+- Navigate to `http://localhost:2368/events/?tags=marine-biology-no-such-tag`.
+- Expected: amber banner listing `marine-biology-no-such-tag`, empty post grid, "Showing 0 of 0", and "Clear filters" button visible.
+- Click "Clear filters". Banner disappears, all posts return.
+
+- [ ] **Step 4: Land on a mixed URL (one valid, one unknown)**
+
+- Navigate to `http://localhost:2368/events/?tags=,nonexistent-slug`.
+- Expected: real-slug chip selected, posts filtered to that real tag, banner showing only `nonexistent-slug`.
+
+- [ ] **Step 5: Land on a malformed URL**
+
+- Navigate to `http://localhost:2368/events/?tags=,,,`.
+- Expected: no error, no filter applied, no banner (the empties are stripped).
+
+- [ ] **Step 6: Browser back/forward**
+
+- From `/events/`, click a chip → URL changes via `replaceState`.
+- Press browser Back. You should leave `/events/` entirely (not bounce between filter states), because we used `replaceState` not `pushState`. This is the intended behavior per the spec.
+
+- [ ] **Step 7: Commit (no code change — just a marker)**
+
+If everything passes, no code changes are needed. Skip the commit. If something fails, debug and re-run this task before continuing.
+
+---
+
+## Task 5: Verify load-more behavior
+
+**Files:** None modified. Another manual verification gate.
+
+- [ ] **Step 1: Initial state**
+
+- Visit `http://localhost:2368/events/`.
+- Verify exactly 12 posts are visible (or all of them if the collection has fewer than 12).
+- "Load more" button appears only if there are more than 12 matching posts.
+
+- [ ] **Step 2: Click "Load more"**
+
+- Click the button.
+- 12 more posts become visible (or all remaining, whichever is smaller).
+- Counter updates: "Showing 24 of N" (or similar).
+- Button hides when all matches are visible.
+
+- [ ] **Step 3: Filter resets count**
+
+- After loading more (e.g. 24 visible of 30), click any chip.
+- Visible count should reset to 12 (of however many match the filter).
+- The `visibleCount = PAGE_SIZE` line in the `$watch('selectedTags')` callback drives this.
+
+- [ ] **Step 4: Focus moves on load-more**
+
+- Tab through the page using the keyboard until focus is on "Load more".
+- Press Enter or Space.
+- Focus should jump to the first newly-revealed card (the 13th overall, or the 13th match if a filter is applied). Verify by pressing Tab again — focus should move from card 13 onward, not from the start of the page.
+
+- [ ] **Step 5: Commit (no code change)**
+
+If everything passes, skip the commit. If focus management or the count reset isn't working, re-read Task 2 step 1 (component code) and fix.
+
+---
+
+## Task 6: Add and manually verify the AND mode
+
+**Files:**
+
+- Modify: `events.hbs` (one-character change for the duration of this task; will be reverted)
+
+The component already handles `mode === 'and'` (Task 2 step 1). This task verifies it works end-to-end.
+
+- [ ] **Step 1: Switch the mode in `events.hbs`**
+
+Change:
+
+```handlebars
+{{> post-filter-list collection="events" filter="tag:hash-insights" mode="or"}}
+```
+
+to:
+
+```handlebars
+{{> post-filter-list collection="events" filter="tag:hash-insights" mode="and"}}
+```
+
+- [ ] **Step 2: Build**
+
+```
+npx gulp build
+```
+
+- [ ] **Step 3: Manual verification**
+
+- Visit `http://localhost:2368/events/`.
+- Click one chip. Same posts as OR mode (single-tag selection behaves identically in both modes).
+- Click a second chip. Now only posts that have **both** selected tags should show. If no post has both, you should see the empty state ("No posts match your selected tags").
+- Deselect one chip. Filter relaxes to whatever the remaining chip alone matches.
+
+- [ ] **Step 4: Revert to OR**
+
+Change the `mode="and"` back to `mode="or"`. Build again.
+
+- [ ] **Step 5: Commit (no code change since we reverted)**
+
+If verification passed, skip. The `mode` parameter is now production-ready; production runs OR.
+
+---
+
+## Task 7: Add `interviews.hbs` and update `routes.yaml`
+
+**Files:**
+
+- Create: `interviews.hbs`
+- Modify: `config/routes.yaml:10-13`
+
+Now repeat the events setup for the interviews collection. Create a dedicated `interviews.hbs` template (so the filter UI does not bleed onto generic `/posts/` or other pages that share `index.hbs`).
+
+- [ ] **Step 1: Create `interviews.hbs`**
+
+```handlebars
+{{!< default}}
+
+{{#contentFor "title"}}Interviews{{/contentFor}}
+
+
+
+
+ {{> post-filter-list
+ collection="interviews"
+ filter="tag:[hash-conversations,hash-reflections]"
+ mode="or"}}
+
+
+```
+
+- [ ] **Step 2: Update `config/routes.yaml`**
+
+Find:
+
+```yaml
+/interviews/:
+ permalink: /{year}/{month}/{day}/{slug}/
+ template: index
+ filter: tag:[hash-conversations,hash-reflections]
+```
+
+Change `template: index` to `template: interviews`:
+
+```yaml
+/interviews/:
+ permalink: /{year}/{month}/{day}/{slug}/
+ template: interviews
+ filter: tag:[hash-conversations,hash-reflections]
+```
+
+- [ ] **Step 3: Reload routes in Ghost**
+
+Ghost loads `routes.yaml` from the active theme. If it doesn't pick up the change automatically, in the Ghost admin (`http://localhost:2368/ghost/`) go to **Settings → Labs → Routes**, download/upload the routes file, or restart Ghost. (Locally, restarting Ghost is the simplest reliable option.)
+
+- [ ] **Step 4: Build and lint**
+
+```
+npx gulp build
+npm run test
+```
+
+- [ ] **Step 5: Manual verification**
+
+- Visit `http://localhost:2368/interviews/`. Verify chips appear, filtering works, load-more works, URL sync works (same scenarios as Tasks 4–5 but on interviews).
+- Visit `http://localhost:2368/posts/` (the generic collection that still uses `index.hbs`). Verify **no filter UI** appears here.
+- Visit `http://localhost:2368/tag//`. Verify **no filter UI** appears here either (still uses `tag.hbs`).
+
+- [ ] **Step 6: Commit**
+
+```
+git add interviews.hbs config/routes.yaml
+git commit -m "feat(interviews): add filter using shared partial"
+```
+
+---
+
+## Task 8: Add canonical link to event/interview templates
+
+**Files:**
+
+- Modify: `events.hbs`, `interviews.hbs` (only if `{{ghost_head}}` does not already emit a canonical)
+
+Filtered URLs (`?tags=...`) are content variants of the canonical pages. Canonical link tags tell search engines to dedupe.
+
+- [ ] **Step 1: Check what `{{ghost_head}}` emits**
+
+Visit `http://localhost:2368/events/?tags=test` and view source. Look in `` for an existing `` tag.
+
+- If a canonical tag is present and points to `/events/` (without `?tags=`): you're done. Skip to Step 3.
+- If no canonical, or it points to the filtered URL: proceed to Step 2.
+
+- [ ] **Step 2: Add canonical to both templates**
+
+Add this inside the `{{#contentFor "title"}}...{{/contentFor}}` blocks, or as a separate `contentFor "head"` block if `default.hbs` supports it. If it doesn't, add directly inside the body of the template — browsers and crawlers also accept it inside `` though `` is preferred.
+
+In `events.hbs`, after the `{{#contentFor "title"}}` line:
+
+```handlebars
+{{#contentFor "head"}}
+
+{{/contentFor}}
+```
+
+In `interviews.hbs`, similarly:
+
+```handlebars
+{{#contentFor "head"}}
+
+{{/contentFor}}
+```
+
+Then check `default.hbs` — if it does not have `{{{block "head"}}}` inside ``, add it just before `{{ghost_head}}`:
+
+```handlebars
+{{{block "head"}}}
+{{ghost_head}}
+```
+
+- [ ] **Step 3: Build and verify**
+
+```
+npx gulp build
+```
+
+Visit `http://localhost:2368/events/?tags=test` and view source. Confirm a single canonical pointing to `/events/` (not `/events/?tags=test`).
+
+- [ ] **Step 4: Commit (only if you made changes)**
+
+```
+git add events.hbs interviews.hbs default.hbs
+git commit -m "seo: canonicalize filtered events/interviews URLs"
+```
+
+---
+
+## Task 9: Accessibility manual verification
+
+**Files:** None modified, unless issues are found.
+
+The component already includes `role="checkbox"`, `aria-checked`, `aria-live`, and focus management. This task spot-checks them.
+
+- [ ] **Step 1: Keyboard tab order**
+
+- Visit `http://localhost:2368/events/`.
+- From the address bar, press Tab until focus enters the chip row.
+- Verify each chip is reachable and visible focus indicator appears.
+- Press Space on a chip — it should toggle, posts should filter, screen reader (if available) should announce the new "Showing X of Y" count via the `aria-live` region.
+
+- [ ] **Step 2: Screen reader spot check (optional, if available)**
+
+- Enable VoiceOver (macOS), NVDA (Windows), or Orca (Linux).
+- Tab to a chip — should announce "checkbox, not checked" (or similar).
+- Activate it — should announce the updated result count.
+
+- [ ] **Step 3: Contrast and visual focus**
+
+- Tab through chips. Each focused chip should have a visible focus ring (browser default is fine; Tailwind doesn't strip it unless explicitly told to).
+- Selected vs unselected chips should differ in **more than just color** (we use background + border change + a checkmark concept via `aria-checked` styling). If selected chips look indistinguishable to the eye, add a checkmark icon: edit the chip `