diff --git a/layouts/posts/single.html b/layouts/posts/single.html
index d3567c3..a38bb83 100644
--- a/layouts/posts/single.html
+++ b/layouts/posts/single.html
@@ -101,26 +101,139 @@
   <div class="max-w-5xl mx-auto">
 
   {{- if $bundleImages -}}
-  <div class="flex items-center gap-5 mb-10">
-    <span class="badge badge-gradient">Gallery</span>
-    <span class="label text-fog">{{ len $bundleImages }} {{ if eq (len $bundleImages) 1 }}work{{ else }}works{{ end }}</span>
-    <div class="flex-1 gradient-line ml-2"></div>
-  </div>
-  <!-- Numbered png+mp4 pairs from page bundle -->
-  <div class="columns-1 sm:columns-2 lg:columns-3 gap-5 space-y-5">
-    {{- range $bundleImages -}}
+  {{- /* Pre-compute lightbox items so Alpine gets a static JSON array */ -}}
+  {{- $lbItems := slice -}}
+  {{- range $bundleImages -}}
     {{- $stem  := .Name | strings.TrimSuffix ".png" -}}
     {{- $video := $.Resources.GetMatch (printf "%s.mp4" $stem) -}}
-    <figure class="break-inside-avoid group card-comic">
-      <div class="card-media min-h-48">
-        {{- if $video -}}
-        <video class="w-full" src="{{ $video.RelPermalink }}" poster="{{ .RelPermalink }}" autoplay loop muted playsinline></video>
-        {{- else -}}
-        {{- partial "img.html" (dict "res" . "widths" (slice 800 1200) "sizes" "(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw" "class" "w-full") -}}
-        {{- end -}}
+    {{- $webp  := .Resize "1200x webp" -}}
+    {{- $entry := dict "img" $webp.RelPermalink "video" "" -}}
+    {{- if $video -}}{{- $entry = dict "img" $webp.RelPermalink "video" $video.RelPermalink -}}{{- end -}}
+    {{- $lbItems = $lbItems | append $entry -}}
+  {{- end -}}
+
+  <div
+    x-data="{
+      open: false,
+      idx:  0,
+      items: {{ $lbItems | jsonify }},
+      show(i)  { this.idx = i; this.open = true },
+      close()  { this.open = false },
+      prev()   { this.idx = (this.idx - 1 + this.items.length) % this.items.length },
+      next()   { this.idx = (this.idx + 1) % this.items.length }
+    }"
+    @keydown.escape.window="open && close()"
+    @keydown.arrow-left.window="open && prev()"
+    @keydown.arrow-right.window="open && next()"
+  >
+
+    <div class="flex items-center gap-5 mb-10">
+      <span class="badge badge-gradient">Gallery</span>
+      <span class="label text-fog">{{ len $bundleImages }} {{ if eq (len $bundleImages) 1 }}work{{ else }}works{{ end }}</span>
+      <div class="flex-1 gradient-line ml-2"></div>
+    </div>
+
+    <!-- Numbered png+mp4 pairs from page bundle -->
+    <div class="columns-1 sm:columns-2 lg:columns-3 gap-5 space-y-5">
+      {{- range $i, $img := $bundleImages -}}
+      {{- $stem  := $img.Name | strings.TrimSuffix ".png" -}}
+      {{- $video := $.Resources.GetMatch (printf "%s.mp4" $stem) -}}
+      <figure class="break-inside-avoid group card-comic cursor-zoom-in" @click="show({{ $i }})">
+        <div class="card-media min-h-48">
+          {{- if $video -}}
+          <video class="w-full pointer-events-none" src="{{ $video.RelPermalink }}" poster="{{ $img.RelPermalink }}" autoplay loop muted playsinline></video>
+          {{- else -}}
+          {{- partial "img.html" (dict "res" $img "widths" (slice 800 1200) "sizes" "(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw" "class" "w-full pointer-events-none") -}}
+          {{- end -}}
+        </div>
+      </figure>
+      {{- end -}}
+    </div>
+
+    <!-- Lightbox — teleported to <body> to escape stacking context -->
+    <template x-teleport="body">
+      <div
+        x-show="open"
+        x-cloak
+        x-transition:enter="transition duration-200 ease-out"
+        x-transition:enter-start="opacity-0"
+        x-transition:enter-end="opacity-100"
+        x-transition:leave="transition duration-150 ease-in"
+        x-transition:leave-start="opacity-100"
+        x-transition:leave-end="opacity-0"
+        class="fixed inset-0 z-50 flex items-center justify-center bg-void/95 backdrop-blur-sm"
+        @click.self="close()"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Media lightbox"
+      >
+        <!-- Gradient accent line top -->
+        <div class="absolute top-0 inset-x-0 h-px gradient-line"></div>
+
+        <!-- Counter -->
+        <div class="absolute top-5 left-1/2 -translate-x-1/2 label text-fog tabular-nums"
+          x-text="`${String(idx + 1).padStart(2,'0')} / ${String(items.length).padStart(2,'0')}`"></div>
+
+        <!-- Close -->
+        <button
+          @click="close()"
+          class="absolute top-3 right-4 w-10 h-10 flex items-center justify-center label text-fog hover:text-chalk transition-colors"
+          aria-label="Close"
+        >✕</button>
+
+        <!-- Prev -->
+        <button
+          @click="prev()"
+          x-show="items.length > 1"
+          class="absolute left-3 top-1/2 -translate-y-1/2 w-10 h-10 md:w-12 md:h-12 flex items-center justify-center text-fog hover:text-heat transition-colors text-xl"
+          aria-label="Previous"
+        >{{ partial "icon.html" "arrow-left" }}</button>
+
+        <!-- Media -->
+        <div class="w-full h-full flex items-center justify-center px-14 md:px-20 py-14">
+          <!-- Video -->
+          <video
+            x-show="items[idx] && items[idx].video"
+            :src="items[idx] && items[idx].video ? items[idx].video : ''"
+            :poster="items[idx] ? items[idx].img : ''"
+            x-effect="if (open && items[idx] && items[idx].video) { $el.load(); $el.play() }"
+            class="max-w-full max-h-full object-contain"
+            controls loop muted playsinline
+          ></video>
+          <!-- Image -->
+          <img
+            x-show="items[idx] && !items[idx].video"
+            :src="items[idx] && !items[idx].video ? items[idx].img : ''"
+            alt=""
+            class="max-w-full max-h-full object-contain"
+          >
+        </div>
+
+        <!-- Next -->
+        <button
+          @click="next()"
+          x-show="items.length > 1"
+          class="absolute right-3 top-1/2 -translate-y-1/2 w-10 h-10 md:w-12 md:h-12 flex items-center justify-center text-fog hover:text-heat transition-colors text-xl"
+          aria-label="Next"
+        >{{ partial "icon.html" "arrow-right" }}</button>
+
+        <!-- Dot indicators -->
+        <div x-show="items.length > 1" class="absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-2">
+          <template x-for="(item, i) in items" :key="i">
+            <button
+              @click="idx = i"
+              class="h-1.5 rounded-full transition-all duration-300"
+              :class="i === idx ? 'w-5 bg-heat' : 'w-1.5 bg-fog hover:bg-chalk'"
+              :aria-label="`Go to item ${i + 1}`"
+            ></button>
+          </template>
+        </div>
+
+        <!-- Gradient accent line bottom -->
+        <div class="absolute bottom-0 inset-x-0 h-px gradient-line"></div>
       </div>
-    </figure>
-    {{- end -}}
+    </template>
+
   </div>
 
   {{- else -}}
