fix: improve backdrop blur visibility on dropdowns and overlays

- Reduce dropdown background opacity from 97% to 80% so backdrop-filter is visible
- Add glass-dropdown CSS class with blur(16px) and saturate(180%)
- Add backdrop blur to mobile nav overlay for smoother feel
- Increase photo lightbox backdrop blur from 2px to 8px
- Add background-blend-mode: overlay to site-bg for richer texture

src/app/globals.css

@@ -186,13 +186,15 @@ body {
 
 .site-bg {
   background:
-    linear-gradient(to bottom, color-mix(in srgb, var(--color-primary) 18%, rgba(255,255,255,0.7)), rgba(255,255,255,0.85)),
+    linear-gradient(to bottom, color-mix(in srgb, var(--color-primary) 12%, rgba(255,255,255,0.6)), rgba(255,255,255,0.75)),
     url("/assets/images/background-light.jpg") no-repeat fixed center / cover;
+  background-blend-mode: overlay;
 }
 .app.dark .site-bg {
   background:
-    linear-gradient(to bottom, color-mix(in srgb, var(--color-primary) 12%, rgba(15,17,23,0.8)), rgba(15,17,23,0.9)),
+    linear-gradient(to bottom, color-mix(in srgb, var(--color-primary) 8%, rgba(15,17,23,0.7)), rgba(15,17,23,0.85)),
     url("/assets/images/background-dark.jpg") no-repeat fixed center / cover;
+  background-blend-mode: overlay;
 }
 
 .article-body {
@@ -898,6 +900,14 @@ tbody tr:hover {
   border-color: #f97316;
 }
 
+/* ── Glass dropdown (backdrop blur) ─────────────────────────── */
+.glass-dropdown {
+  backdrop-filter: blur(16px) saturate(180%);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+  background-color: color-mix(in srgb, var(--color-dropdown) 78%, transparent);
+  border: 1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent);
+}
+
 /* ── Radio sidebar ──────────────────────────────────────────── */
 .radio-layout {
   display: flex;