feat: celebrate evergreen garden stage promotions

Adds a "Recently Evergreened" section to /garden/ showing posts that
reached evergreen status within the last 90 days, with a dedicated
green celebration card style.

- New `recentEvergreens` Eleventy collection (evergreeSince within 90d)
- garden.njk: conditional celebration section above the stage groups
- tailwind.css: .garden-evergreen-celebration card (evergreen palette)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

css/tailwind.css

@@ -1135,4 +1135,23 @@ body[data-indiekit-auth="true"] .share-post-btn:hover {
            hover:bg-surface-50 dark:hover:bg-surface-800/50
            transition-colors;
   }
+
+  /* Celebration card for posts that recently reached evergreen status */
+  .garden-evergreen-celebration {
+    @apply p-4 rounded-lg border transition-colors;
+    border-color: rgb(66 123 88 / 0.4);
+    background-color: rgb(66 123 88 / 0.06);
+  }
+  .garden-evergreen-celebration:hover {
+    border-color: rgb(66 123 88 / 0.6);
+    background-color: rgb(66 123 88 / 0.1);
+  }
+  .dark .garden-evergreen-celebration {
+    border-color: rgb(142 192 124 / 0.3);
+    background-color: rgb(142 192 124 / 0.06);
+  }
+  .dark .garden-evergreen-celebration:hover {
+    border-color: rgb(142 192 124 / 0.45);
+    background-color: rgb(142 192 124 / 0.1);
+  }
 }

eleventy.config.js

@@ -1288,6 +1288,26 @@ export default function (eleventyConfig) {
       .sort((a, b) => b.date - a.date);
   });
 
+  // Posts that recently reached evergreen status (within the last 90 days).
+  // Requires evergreeSince frontmatter field, written by the Micropub plugin on first evergreen publish.
+  eleventyConfig.addCollection("recentEvergreens", function (collectionApi) {
+    const cutoff = new Date();
+    cutoff.setDate(cutoff.getDate() - 90);
+    return collectionApi
+      .getFilteredByGlob("content/**/*.md")
+      .filter(isPublished)
+      .filter((item) => {
+        if (item.data.gardenStage !== "evergreen") return false;
+        if (!item.data.evergreeSince) return false;
+        const d = new Date(item.data.evergreeSince);
+        return !isNaN(d.getTime()) && d >= cutoff;
+      })
+      .sort(
+        (a, b) =>
+          new Date(b.data.evergreeSince) - new Date(a.data.evergreeSince),
+      );
+  });
+
   // Weekly digests — posts grouped by ISO week for digest pages and RSS feed
   eleventyConfig.addCollection("weeklyDigests", function (collectionApi) {
     const allPosts = collectionApi

garden.njk

@@ -32,6 +32,50 @@ pagefindIgnore: true
     </div>
   </div>
 
+  {# ── Recently Evergreened ─────────────────────────────────────────────── #}
+  {% if collections.recentEvergreens and collections.recentEvergreens.length > 0 %}
+  <section class="mb-10">
+    <div class="flex items-baseline gap-3 mb-1">
+      <h2 class="text-xl font-bold text-surface-900 dark:text-surface-100 flex items-center gap-2">
+        <span>🌳</span>
+        <span>Recently Evergreened</span>
+      </h2>
+      <span class="text-sm text-surface-500 dark:text-surface-400">
+        reached maturity in the last 90 days
+      </span>
+    </div>
+    <p class="text-sm text-surface-500 dark:text-surface-400 mb-4 italic">
+      These notes have grown into stable, reference-worthy pieces.
+    </p>
+    <ul class="space-y-3 list-none p-0 m-0">
+      {% for post in collections.recentEvergreens | head(5) %}
+      <li class="h-entry garden-evergreen-celebration">
+        <div class="flex items-start gap-3">
+          <div class="flex-1 min-w-0">
+            <h3 class="font-medium text-surface-900 dark:text-surface-100 mb-0.5">
+              <a class="u-url p-name hover:text-accent-700 dark:hover:text-accent-300 transition-colors"
+                 href="{{ post.url }}">
+                {{ post.data.title or (post.templateContent | striptags | truncate(80)) or "Untitled" }}
+              </a>
+            </h3>
+            <div class="flex items-center gap-3 text-xs text-surface-500 dark:text-surface-400">
+              <span>🌳 Evergreen since
+                <time datetime="{{ post.data.evergreeSince }}">{{ post.data.evergreeSince }}</time>
+              </span>
+            </div>
+            {% if post.data.summary or post.data.description %}
+            <p class="p-summary text-sm text-surface-600 dark:text-surface-400 mt-1 line-clamp-2">
+              {{ post.data.summary or post.data.description }}
+            </p>
+            {% endif %}
+          </div>
+        </div>
+      </li>
+      {% endfor %}
+    </ul>
+  </section>
+  {% endif %}
+
   {# ── Posts grouped by stage ──────────────────────────────────────────── #}
   {% set _stages = ["plant", "cultivate", "evergreen", "question", "repot", "revitalize", "revisit"] %}