Blog: pin the first-contribution post to the top

It was already first by date, which would have stopped being true the next
time anything shipped. Marks it with is-pinned and a Pinned badge so it
holds position on merit rather than by accident, and so readers understand
why it sits above a newer post later on.

The card order is hand-maintained DOM order, so the intent is recorded
where it can actually be acted on: a PINNED comment above the card and a
README note telling you to insert new posts below it.

Bumps the stylesheet to ?v=4 — styles.css is served with max-age=14400,
so without a new URL the badge would render unstyled against fresh markup
for up to four hours.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: ten9876

404.html

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Signal lost — AetherSDR</title>
   <link rel="icon" type="image/png" href="/assets/img/logo-96.png" />
-  <link rel="stylesheet" href="/styles.css?v=3" />
+  <link rel="stylesheet" href="/styles.css?v=4" />
   <style>
     .nf { min-height: 78vh; display: grid; place-items: center; text-align: center; }
     .nf-inner { max-width: 30rem; padding: 0 24px; }

README.md

@@ -39,7 +39,8 @@ is two blocks that share a slug:
 
 1. **A card** in the `.blog-grid`, linking to `#your-slug`. The description is
    clamped to four lines, so write 3–4 lines and don't worry about matching
-   neighbouring card heights.
+   neighbouring card heights. Cards are ordered newest-first by hand — insert
+   yours **below the pinned card** and above the newest release post.
 2. **An `<article class="blog-post" data-post="your-slug" ... hidden>`** further
    down, holding the hero image and full body. Keep the `hidden` attribute — it
    is what keeps the post off the index until it's routed to.
@@ -53,6 +54,15 @@ styles headings, lists, links, quotes, and code blocks for you.
 > out-specifies the browser's `[hidden] { display: none }` and every post would
 > render on the index at once.
 
+The first card carries `is-pinned` and a **Pinned** badge, holding it at the top
+of the index whatever its date. To pin a different post, move the class, the
+badge markup, and the `<!-- PINNED -->` comment to that card.
+
+Editing `styles.css`? Bump the `?v=` on the three `<link rel="stylesheet">` tags
+(`index.html`, `blog.html`, `404.html`). The file is served with `max-age=14400`,
+so without a new URL a browser can pair a stale stylesheet with fresh markup for
+up to four hours.
+
 Cloudflare Pages serves the page extensionless at **`/blog`** and 308-redirects
 `/blog.html` to it, so `canonical` and the `og:`/`twitter:` URLs point at `/blog`.
 Internal links keep the `blog.html` form on purpose — it resolves under

blog.html

@@ -28,7 +28,7 @@
 
   <link rel="icon" type="image/png" href="assets/img/logo-96.png" />
   <link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png" />
-  <link rel="stylesheet" href="styles.css?v=3" />
+  <link rel="stylesheet" href="styles.css?v=4" />
 
   <!-- Without JS there's nothing to route, so show every post stacked under
        the index rather than a grid of cards that go nowhere. -->
@@ -100,13 +100,20 @@ <h2>The AetherSDR blog</h2>
 
         <div class="blog-grid">
 
-          <a class="blog-card" href="#first-contribution">
+          <!-- PINNED: stays at the top regardless of date. New posts go BELOW
+               this card, above the newest release post. -->
+          <a class="blog-card is-pinned" href="#first-contribution">
             <div class="blog-card-media">
               <!-- Topmost card is above the fold: eager, so it isn't the LCP holdup. -->
               <img width="640" height="560" src="assets/img/first-contribution-card.svg" alt="A contribution pipeline drawn as a signal chain — issue, fix, merged — over a spectrum trace" />
             </div>
             <div class="blog-card-body">
               <span class="blog-meta">
+                <span class="blog-pin">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 17v5"/><path d="M9 10.8V4h6v6.8l2.5 3.2h-11z"/></svg>
+                  Pinned
+                </span>
+                <span class="sep" aria-hidden="true">·</span>
                 <time datetime="2026-07-26">July 26, 2026</time>
                 <span class="sep" aria-hidden="true">·</span>
                 <span>8 min read</span>

index.html

@@ -29,7 +29,7 @@
 
   <link rel="icon" type="image/png" href="assets/img/logo-96.png" />
   <link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png" />
-  <link rel="stylesheet" href="styles.css?v=3" />
+  <link rel="stylesheet" href="styles.css?v=4" />
 </head>
 <body>
 

styles.css

@@ -589,6 +589,16 @@ footer.foot { border-top: 1px solid var(--line); margin-top: 30px; padding: 46px
   color: var(--muted-dim); font-size: 12.5px;
   font-family: var(--mono); letter-spacing: 0.01em;
 }
+/* Pinned card — held at the top of the index regardless of date. */
+.blog-card.is-pinned { border-color: var(--line-hi); }
+.blog-card.is-pinned:hover { border-color: var(--cyan); }
+.blog-pin {
+  display: inline-flex; align-items: center; gap: 5px;
+  color: var(--cyan); font-weight: 700; letter-spacing: 0.06em;
+  text-transform: uppercase; font-size: 11.5px;
+}
+.blog-pin svg { width: 13px; height: 13px; }
+
 .blog-more {
   display: inline-flex; align-items: center; gap: 7px;
   margin-top: 15px; color: var(--cyan); font-size: 13.5px; font-weight: 600;