site: founding post, headline post layout, masonry grid, source links

- New "Why this exists" post; masthead "founded" links to it
- Post template: serif headline + date in masthead, "Filed under {category}" in footer
- Drop counts from footer Collections list
- Masonry component for home + sources grid; source badges link to /sources/#slug
- Theme toggle (settings page + cog) with dark-mode-aware tokens
- Six new themed find lists; cluster-finds skill

src/pages/sources.astro

@@ -1,7 +1,9 @@
 ---
 import BaseLayout from '../layouts/BaseLayout.astro';
+import Masonry from '../components/Masonry.astro';
 import sourcesData from '../../sources.json';
 import { getAllFinds } from '../lib/find-items';
+import { sourceSlug } from '../lib/sources';
 import {
   buildOgImage,
   buildBreadcrumbs,
@@ -83,12 +85,12 @@ const breadcrumbs = buildBreadcrumbs([
   ogImage={ogImage}
   jsonLd={[collectionPage, itemList, breadcrumbs]}
 >
-  <ul class="grid">
+  <Masonry>
     {
       sources.map((source) => {
         const recent = (findsBySource.get(source.name) ?? []).slice(0, 5);
         return (
-          <li>
+          <article id={sourceSlug(source.name)} class="source-item">
             <div class="card">
               <a href={source.url} class="head-link" target="_blank" rel="noopener">
                 <div class="head">
@@ -119,29 +121,21 @@ const breadcrumbs = buildBreadcrumbs([
                 </div>
               )}
             </div>
-          </li>
+          </article>
         );
       })
     }
-  </ul>
+  </Masonry>
 
   <p class="back"><a href="/">← back</a></p>
 
   <style>
-    .grid {
-      column-count: 3;
-      column-gap: 1rem;
-      list-style: none;
-      margin: 0;
-      padding: 0;
+    .source-item {
+      scroll-margin-top: 1rem;
     }
-    @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;
+    .source-item:target .card {
+      border-color: var(--accent);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
     }
 
     .card {
@@ -164,10 +158,11 @@ const breadcrumbs = buildBreadcrumbs([
 
     .head {
       display: flex;
-      align-items: baseline;
-      justify-content: space-between;
-      gap: 0.6rem;
+      flex-direction: column;
+      gap: 0.15rem;
       margin-bottom: 0.45rem;
+      min-width: 0;
+      overflow: hidden;
     }
     .name {
       font-family: ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
@@ -178,10 +173,14 @@ const breadcrumbs = buildBreadcrumbs([
       transition: color 0.18s ease;
     }
     .host {
+      display: block;
       font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
       font-size: 0.72rem;
       color: var(--muted);
-      flex-shrink: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 100%;
     }
 
     .notes {