Refactor: replace all BEM CSS with Tailwind utility classes

Remove all BEM component classes (hero__*, card__*, issue-card__*, foot__*,
masthead__*, searchpop__*, lb__*) from CSS and templates. Replace with
Tailwind v4 utility classes inline in HTML. Create card.html partial to
avoid repeating verbose utility strings across grid templates. Rename
lightbox CSS to flat lb-* and search popup to sp-*.

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

layouts/baseof.html

@@ -14,10 +14,18 @@
 
   {{- partial "lightbox.html" . }}
 
-  <div class="ribbon" id="ribbon">
-    <span>Roux № {{ .Site.Params.issueNumber }} — out now. <a href="/issues/01/">See the plates →</a></span>
-    <button id="ribbonClose" aria-label="Dismiss">
-      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+  <div id="ribbon"
+       class="ribbon fixed bottom-0 inset-x-0 z-[100]
+              flex items-center justify-between gap-4
+              px-[var(--pad)] py-3
+              bg-ink text-paper
+              font-sans font-medium text-[11px] leading-none tracking-[.16em] uppercase
+              transition-transform duration-300">
+    <span>Roux № {{ .Site.Params.issueNumber }} — out now. <a href="/issues/01/" class="border-b border-current ml-1">See the plates →</a></span>
+    <button id="ribbonClose" aria-label="Dismiss"
+            class="w-6 h-6 shrink-0 grid place-items-center border border-current/30 rounded-full
+                   opacity-60 hover:opacity-100 transition-opacity duration-200">
+      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
     </button>
   </div>