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/settings.astro

@@ -0,0 +1,117 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+---
+
+<BaseLayout
+  title="Settings"
+  description="Presentation options for Unique — color theme and other display preferences."
+  subheader="Presentation options."
+  noindex
+>
+  <article>
+    <section class="setting">
+      <h2>Color theme</h2>
+      <p class="hint">
+        Auto follows your system preference. Light or dark overrides it on this
+        device.
+      </p>
+      <div class="theme-toggle" role="group" aria-label="Color theme">
+        <button type="button" data-theme-set="auto">Auto</button>
+        <button type="button" data-theme-set="light">Light</button>
+        <button type="button" data-theme-set="dark">Dark</button>
+      </div>
+    </section>
+
+    <p class="more">More presentation options will land here over time.</p>
+  </article>
+
+  <script>
+    type Theme = 'auto' | 'light' | 'dark';
+    const buttons = document.querySelectorAll<HTMLButtonElement>('[data-theme-set]');
+
+    function currentTheme(): Theme {
+      const t = document.documentElement.getAttribute('data-theme');
+      return t === 'light' || t === 'dark' ? t : 'auto';
+    }
+
+    function setActive(value: Theme) {
+      for (const b of buttons) {
+        if (b.dataset.themeSet === value) b.setAttribute('aria-current', 'true');
+        else b.removeAttribute('aria-current');
+      }
+    }
+
+    function applyTheme(value: Theme) {
+      if (value === 'auto') {
+        document.documentElement.removeAttribute('data-theme');
+        try { localStorage.removeItem('theme'); } catch (e) {}
+      } else {
+        document.documentElement.setAttribute('data-theme', value);
+        try { localStorage.setItem('theme', value); } catch (e) {}
+      }
+      setActive(value);
+    }
+
+    for (const b of buttons) {
+      b.addEventListener('click', () => {
+        const v = b.dataset.themeSet;
+        if (v === 'auto' || v === 'light' || v === 'dark') applyTheme(v);
+      });
+    }
+
+    setActive(currentTheme());
+  </script>
+
+  <style>
+    .setting {
+      padding: 1.5rem 0;
+      border-bottom: 1px solid var(--rule);
+    }
+    .setting:first-child { padding-top: 0; }
+    .setting h2 {
+      margin: 0 0 0.35rem;
+      font-size: 1.05rem;
+    }
+    .hint {
+      margin: 0 0 0.85rem;
+      color: var(--muted);
+      font-size: 0.92rem;
+    }
+
+    .theme-toggle {
+      display: inline-flex;
+      gap: 0;
+      border: 1px solid var(--rule);
+      border-radius: 999px;
+      overflow: hidden;
+    }
+    .theme-toggle button {
+      font-family: ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
+      font-size: 0.85rem;
+      font-weight: 600;
+      letter-spacing: 0.02em;
+      background: none;
+      border: 0;
+      padding: 0.45rem 1rem;
+      margin: 0;
+      color: var(--muted);
+      cursor: pointer;
+      transition: background 0.18s ease, color 0.18s ease;
+    }
+    .theme-toggle button + button {
+      border-left: 1px solid var(--rule);
+    }
+    .theme-toggle button:hover { color: var(--accent); }
+    .theme-toggle button[aria-current="true"] {
+      background: var(--fg);
+      color: var(--bg);
+    }
+
+    .more {
+      margin-top: 2rem;
+      color: var(--muted);
+      font-style: italic;
+      font-size: 0.9rem;
+    }
+  </style>
+</BaseLayout>