Add full-image zoom overlay to single post pages

A "View full image" button appears in the single-post hero alongside
the return link. Clicking the lightbox main image also opens the same
overlay from any page. The overlay is pure image on a near-black
backdrop; click backdrop, close button, or Escape to dismiss.

Escape is layered: closes zoom first, then lightbox if zoom is not open.

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

layouts/_default/single.html

@@ -1,15 +1,37 @@
 {{ define "main" }}
 {{- $issue    := index (.Params.issues | default (slice "01")) 0 }}
 {{- $issueURL := printf "/issues/%s/" $issue }}
+{{- $img      := .Resources.GetMatch "*.png" }}
+{{- $cardSrc  := "" }}
+{{- if $img }}{{- $c := $img.Resize "900x1350 webp" }}{{- $cardSrc = $c.RelPermalink }}{{- end }}
+
 <section id="hero" class="px-[var(--pad)] pt-[clamp(36px,5vw,64px)] pb-[clamp(28px,3.5vw,48px)] border-b border-[var(--rule)]">
   <div class="font-sans font-medium text-[10px] leading-none tracking-[.22em] uppercase text-ink-soft mb-4">
     № {{ $issue }} · {{ index (.Params.categories | default (slice "Plate")) 0 }}
   </div>
   <h1 class="font-display font-normal text-[clamp(48px,7vw,96px)] leading-[0.94] m-0 mb-4"><em>{{ .Title }}</em></h1>
-  <p class="font-serif italic text-[clamp(13px,1vw,16px)] leading-[1.65] text-ink-2 max-w-[55ch] m-0">
+  <p class="font-serif italic text-[clamp(13px,1vw,16px)] leading-[1.65] text-ink-2 max-w-[55ch] m-0 mb-5">
     {{ .Params.description }}
-    <a href="{{ $issueURL }}" class="border-b border-current ml-1">Return to issue →</a>
   </p>
+  <div class="flex items-center gap-5 flex-wrap">
+    <a href="{{ $issueURL }}"
+       class="font-sans font-medium text-[11px] leading-none tracking-[.16em] uppercase text-ink-soft
+              border-b border-[var(--rule)] pb-px transition-colors duration-200 hover:text-ink hover:border-ink">
+      ← Return to issue
+    </a>
+    {{- if $cardSrc }}
+    <button id="viewFull" data-src="{{ $cardSrc }}"
+            class="inline-flex items-center gap-[7px]
+                   font-sans font-medium text-[11px] leading-none tracking-[.16em] uppercase text-ink-soft
+                   border-b border-[var(--rule)] pb-px transition-colors duration-200 hover:text-ink hover:border-ink">
+      <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="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/>
+      </svg>
+      View full image
+    </button>
+    {{- end }}
+  </div>
 </section>
 
 <section id="grid" data-density="default"

layouts/baseof.html

@@ -59,6 +59,23 @@
     {{- $posts | jsonify | safeJS }}
   </script>
 
+  {{/* Pure image zoom — opened by hero button or clicking the lightbox main image */}}
+  <div id="imgZoom" class="img-zoom" role="dialog" aria-modal="true" aria-label="Full size image">
+    <button id="imgZoomClose"
+            class="absolute top-4 right-4 z-10
+                   w-10 h-10 grid place-items-center
+                   border border-white/20 rounded-full
+                   text-white/60 hover:text-white hover:bg-white/10
+                   transition-colors duration-200"
+            aria-label="Close full image">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+           stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M18 6 6 18"/><path d="m6 6 12 12"/>
+      </svg>
+    </button>
+    <img id="imgZoomImg" src="" alt="" class="max-w-[96vw] max-h-[96vh] object-contain select-none" />
+  </div>
+
   <script src="/js/app.js" defer></script>
 </body>
 </html>