Fix flipbook viewer: robust positioning and consistent 16:9 aspect ratio

- Replace flex centering with fixed positioning + calculated translate
  for reliable scaling inside iframes
- Reserve space for nav bar when calculating slide scale
- Clear transform on slide change to prevent stale positioning
- Keep mobile flipbook embed at 16:9 to match slide aspect ratio

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

deck.html

@@ -50,17 +50,20 @@ body {
    SCREEN: single-slide viewer
    ============================ */
 @media screen {
-    body {
+    html, body {
-        background: #000;
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
         overflow: hidden;
-        width: 100vw;
+        background: #000;
-        height: 100vh;
-        display: flex;
-        align-items: center;
-        justify-content: center;
     }
     .slide {
         display: none !important;
+        position: fixed;
+        top: 0;
+        left: 0;
+        transform-origin: 0 0;
         page-break-after: auto;
     }
     .slide.active {
@@ -68,35 +71,35 @@ body {
     }
     .slide-nav {
         position: fixed;
-        bottom: 20px;
+        bottom: 12px;
         left: 50%;
         transform: translateX(-50%);
         display: flex;
         align-items: center;
         gap: 16px;
         z-index: 100;
-        background: rgba(0,0,0,0.6);
+        background: rgba(0,0,0,0.7);
-        padding: 8px 20px;
+        padding: 6px 18px;
-        border-radius: 24px;
+        border-radius: 20px;
     }
     .slide-nav button {
         background: none;
         border: 1px solid rgba(245,237,224,0.3);
         color: var(--sand);
-        font-size: 18px;
+        font-size: 16px;
-        padding: 6px 16px;
+        padding: 4px 14px;
         cursor: pointer;
         border-radius: 4px;
         font-family: 'Inter', sans-serif;
     }
     .slide-nav button:hover {
-        background: rgba(245,237,224,0.1);
+        background: rgba(245,237,224,0.15);
     }
     .slide-nav span {
         color: rgba(245,237,224,0.5);
-        font-size: 14px;
+        font-size: 13px;
         font-family: 'Inter', sans-serif;
-        min-width: 60px;
+        min-width: 50px;
         text-align: center;
     }
 }
@@ -897,9 +900,11 @@ body {
     var total = slides.length;
     var current = 0;
     var counter = document.getElementById('counter');
+    var navH = 48;
 
     function show(i) {
         slides[current].classList.remove('active');
+        slides[current].style.transform = '';
         current = (i + total) % total;
         slides[current].classList.add('active');
         counter.textContent = (current + 1) + ' / ' + total;
@@ -908,11 +913,14 @@ body {
 
     function fitSlide() {
         var slide = slides[current];
-        var scaleX = window.innerWidth / 1920;
+        var vw = window.innerWidth;
-        var scaleY = window.innerHeight / 1080;
+        var vh = window.innerHeight - navH;
+        var scaleX = vw / 1920;
+        var scaleY = vh / 1080;
         var scale = Math.min(scaleX, scaleY);
-        slide.style.transform = 'scale(' + scale + ')';
+        var x = (vw - 1920 * scale) / 2;
-        slide.style.transformOrigin = 'center center';
+        var y = (vh - 1080 * scale) / 2;
+        slide.style.transform = 'translate(' + x + 'px,' + y + 'px) scale(' + scale + ')';
     }
 
     slides[0].classList.add('active');

index.html

@@ -642,7 +642,7 @@
             .flipbook-section { padding: 3.5rem 1rem; }
 
             .flipbook-embed {
-                aspect-ratio: 4/3;
+                aspect-ratio: 16/9;
             }
 
             .sensory-tags {