diff --git a/layouts/posts/single.html b/layouts/posts/single.html
index fe10eb6..62fd1fa 100644
--- a/layouts/posts/single.html
+++ b/layouts/posts/single.html
@@ -169,43 +169,46 @@
         aria-modal="true"
         aria-label="Media lightbox"
       >
-        <!-- Gradient accent line top -->
-        <div class="absolute top-0 inset-x-0 h-px gradient-line"></div>
+        <!-- ── Top chrome bar ── -->
+        <div class="absolute top-0 inset-x-0 z-10 flex items-center justify-between px-2 h-14"
+          style="background: linear-gradient(to bottom, rgba(5,5,16,0.85), transparent)">
+          <!-- gradient accent -->
+          <div class="absolute top-0 inset-x-0 h-px gradient-line"></div>
+          <!-- left spacer (mirrors right buttons width) -->
+          <div class="w-24"></div>
+          <!-- counter centred -->
+          <div class="label text-fog tabular-nums"
+            x-text="`${String(idx + 1).padStart(2,'0')} / ${String(items.length).padStart(2,'0')}`"></div>
+          <!-- right actions: fill toggle + close -->
+          <div class="flex items-center w-24 justify-end gap-1">
+            <button
+              @click="fill = !fill"
+              class="w-10 h-10 flex items-center justify-center label transition-colors"
+              :class="fill ? 'text-heat hover:text-chalk' : 'text-fog hover:text-heat'"
+              :aria-label="fill ? 'Switch to fit mode' : 'Switch to fill mode'"
+              x-text="fill ? 'FIT' : 'FILL'"
+            ></button>
+            <button
+              @click="close()"
+              class="w-10 h-10 flex items-center justify-center label text-fog hover:text-chalk transition-colors"
+              aria-label="Close"
+            >✕</button>
+          </div>
+        </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>
-
-        <!-- Fill / Fit toggle -->
-        <button
-          @click="fill = !fill"
-          class="absolute top-3 right-16 w-10 h-10 flex items-center justify-center label transition-colors"
-          :class="fill ? 'text-heat hover:text-chalk' : 'text-fog hover:text-heat'"
-          :aria-label="fill ? 'Switch to fit mode' : 'Switch to fill mode'"
-          x-text="fill ? 'FIT' : 'FILL'"
-        ></button>
-
-        <!-- 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 -->
+        <!-- ── 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"
+          class="absolute left-2 top-1/2 -translate-y-1/2 z-10 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 -->
+        <!-- ── Media ── -->
         <div
-          class="w-full h-full flex items-center justify-center transition-all duration-300"
-          :class="fill ? 'p-0' : 'px-14 md:px-20 py-14'"
+          class="absolute inset-0 flex items-center justify-center transition-[padding] duration-300"
+          :class="fill ? 'p-0' : 'pt-14 pb-14 px-14 md:px-20'"
         >
-          <!-- Video -->
           <video
             x-show="items[idx] && items[idx].video"
             :src="items[idx] && items[idx].video ? items[idx].video : ''"
@@ -215,7 +218,6 @@
             class="transition-all duration-300"
             controls loop muted playsinline
           ></video>
-          <!-- Image -->
           <img
             x-show="items[idx] && !items[idx].video"
             :src="items[idx] && !items[idx].video ? items[idx].img : ''"
@@ -225,16 +227,19 @@
           >
         </div>
 
-        <!-- Next -->
+        <!-- ── 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"
+          class="absolute right-2 top-1/2 -translate-y-1/2 z-10 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">
+        <!-- ── Bottom chrome bar (dots) ── -->
+        <div x-show="items.length > 1"
+          class="absolute bottom-0 inset-x-0 z-10 flex items-center justify-center h-14 gap-2"
+          style="background: linear-gradient(to top, rgba(5,5,16,0.85), transparent)">
+          <div class="absolute bottom-0 inset-x-0 h-px gradient-line"></div>
           <template x-for="(item, i) in items" :key="i">
             <button
               @click="idx = i"
@@ -244,9 +249,6 @@
             ></button>
           </template>
         </div>
-
-        <!-- Gradient accent line bottom -->
-        <div class="absolute bottom-0 inset-x-0 h-px gradient-line"></div>
       </div>
     </template>