diff --git a/components/PublicGrid.tsx b/components/PublicGrid.tsx
index 6793f2d..91f512c 100644
--- a/components/PublicGrid.tsx
+++ b/components/PublicGrid.tsx
@@ -520,8 +520,24 @@ function FlipBook({ pages, onClose }: { pages: string[]; onClose: () => void })
       >✕</button>
 
       <style dangerouslySetInnerHTML={{ __html: `
-        .stf__item.--left  { box-shadow: inset -10px 0 16px -10px rgba(0,0,0,0.5); }
-        .stf__item.--right { box-shadow: inset  10px 0 16px -10px rgba(0,0,0,0.5); }
+        .stf__item.--left::after,
+        .stf__item.--right::after {
+          content: '';
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          width: 28px;
+          pointer-events: none;
+          z-index: 2;
+        }
+        .stf__item.--left::after {
+          right: 0;
+          background: linear-gradient(to left, rgba(0,0,0,0.45), transparent);
+        }
+        .stf__item.--right::after {
+          left: 0;
+          background: linear-gradient(to right, rgba(0,0,0,0.45), transparent);
+        }
       `}} />
       <div
         ref={containerRef}