site: editorial tooling, grid masonry fix, new reviews + finds

UI / dev tooling
- /find/ index: sort by file birthtime desc (sub-day chronology even when
  many finds share the same frontmatter date); render the captured-at on
  its own line under the host (~0.65rem mono muted)
- New dev-only filter at the top of /find/: All / Not in lists, persisted
  in localStorage; "not in lists" hides finds referenced by any superpost
- New editorial-tags chip strip on each find card (dev-only): selected
  tags visible by default, full picker on hover/focus-within with a "…"
  button for arbitrary tag entry; clicks copy /edit-find-tag <slug> <tag>
  to the clipboard via the existing EditConfirm singleton
- New optional editorialTags: string[] field on the find collection
- New src/data/editorial-tags.json — master list of available tags (initial
  set: ["delete"]); display order follows file order

/grid/ now uses the JS Masonry component instead of CSS column-count, so
the middle column no longer "dips"; tile hover updated to match the home
page's accent-glow / no-translate style

Content
- New review: apex-markdown-processor (graduated from find of same slug;
  hero reused from the find folder)
- New review: sindre-sorhus-older-mac-apps (graduated; intentionally
  hero-less per the source page's text-only design)
- New review: superkey (added by user; hero wired in src/lib/hero.ts)
- 24 new finds captured by /daily-finds across travel, jokes, quotes,
  product picks, and indie tools
- 2 new finds superposts: 2026-05-04-a-small-atlas, 2026-05-04-off-until-needed

Misc
- daily-finds.log.md and candidate-sources.md updated with the day's runs
- build-finds skill prompt iterated by user

src/pages/grid.astro

@@ -1,6 +1,7 @@
 ---
 import { getCollection } from 'astro:content';
 import BaseLayout from '../layouts/BaseLayout.astro';
+import Masonry from '../components/Masonry.astro';
 import { heroes } from '../lib/hero';
 
 const reviews = (await getCollection('reviews')).sort(
@@ -24,79 +25,56 @@ const lastUpdated = reviews[0]?.data.date;
   lastUpdated={lastUpdated}
   noindex
 >
-  <ul class="grid">
-    {
-      tiles.map((tile) => (
-        <li>
-          <a href={tile.href} class:list={['tile', { 'text-only': !tile.hero }]}>
-            {tile.hero?.kind === 'image' && (
-              <img
-                class="media"
-                src={tile.hero.src.src}
-                width={tile.hero.src.width}
-                height={tile.hero.src.height}
-                loading="lazy"
-                decoding="async"
-                alt={tile.name}
-              />
-            )}
-            {tile.hero?.kind === 'video' && (
-              <video
-                class="media"
-                src={tile.hero.src}
-                autoplay
-                loop
-                muted
-                playsinline
-                preload="none"
-                aria-label={tile.name}
-              />
-            )}
-            <div class="text">
-              <span class="name">{tile.name}</span>
-              <span class="subtitle">{tile.subtitle}</span>
-            </div>
-          </a>
-        </li>
-      ))
-    }
-  </ul>
+  <Masonry>
+    {tiles.map((tile) => (
+      <article>
+        <a href={tile.href} class:list={['tile', { 'text-only': !tile.hero }]}>
+          {tile.hero?.kind === 'image' && (
+            <img
+              class="media"
+              src={tile.hero.src.src}
+              width={tile.hero.src.width}
+              height={tile.hero.src.height}
+              loading="lazy"
+              decoding="async"
+              alt={tile.name}
+            />
+          )}
+          {tile.hero?.kind === 'video' && (
+            <video
+              class="media"
+              src={tile.hero.src}
+              autoplay
+              loop
+              muted
+              playsinline
+              preload="none"
+              aria-label={tile.name}
+            />
+          )}
+          <div class="text">
+            <span class="name">{tile.name}</span>
+            <span class="subtitle">{tile.subtitle}</span>
+          </div>
+        </a>
+      </article>
+    ))}
+  </Masonry>
 
   <style>
-    .grid {
-      column-count: 3;
-      column-gap: 1rem;
-      list-style: none;
-      margin: 0;
-      padding: 0;
-    }
-    @media (max-width: 880px) {
-      .grid { column-count: 2; }
-    }
-    @media (max-width: 520px) {
-      .grid { column-count: 1; }
-    }
-
-    .grid > li {
-      break-inside: avoid;
-      display: block;
-      margin: 0 0 1rem;
-    }
-
     .tile {
       display: block;
       border-radius: 8px;
       overflow: hidden;
-      border: 1px solid var(--rule);
+      border: 2px solid var(--rule);
       background: var(--bg);
       color: inherit;
-      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
+      transition: box-shadow 0.18s ease, border-color 0.18s ease;
     }
     .tile:hover {
       text-decoration: none;
-      transform: translateY(-2px);
-      border-color: color-mix(in srgb, var(--accent) 40%, var(--rule));
-      box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.18);
+      border-color: color-mix(in srgb, var(--accent) 50%, var(--rule));
+      box-shadow: 0 0 20px -4px color-mix(in srgb, var(--accent) 30%, transparent);
     }
     .tile:hover .name { color: var(--accent); }
 
@@ -112,6 +90,7 @@ const lastUpdated = reviews[0]?.data.date;
       display: flex;
       flex-direction: column;
       gap: 0.2rem;
+      background: var(--card-fill);
     }
     .name {
       font-family: ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;