Art full-screen: light gallery wall, No-frame goes big, recessed-mat depth

- No frame in full-screen now fills the screen (img max 96vw / 88vh instead of the
  framed cap).
- Full-screen backdrop is a soft top-lit gallery wall (light, not dark) so the Black
  frame — and every frame — reads like a piece hung on a real wall; caption text darkened
  to match.
- Mat now sits recessed below the moulding: a rabbet groove line at the lip, frame shadow
  on the mat's top/left, catch-light on bottom/right — a small chiseled step in place of
  the flat frame→mat transition.

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

frontend/src/routes/art/+page.svelte

@@ -266,7 +266,15 @@
   .mat {
     display: block; position: relative; z-index: 1; background: #fbf8f1; border-radius: 1px;
     padding: var(--mat);
-    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.14), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
+    /* The mat sits recessed below the moulding: a crisp rabbet groove at the lip, the
+       frame casting shadow onto the top/left of the mat, the bottom/right catching light
+       — a small chiseled step instead of a flat transition. */
+    box-shadow:
+      inset 0 0 0 1px rgba(40, 28, 16, 0.18),
+      inset 0 6px 9px -3px rgba(0, 0, 0, 0.34),
+      inset 6px 0 9px -4px rgba(0, 0, 0, 0.24),
+      inset 0 -3px 6px -2px rgba(255, 255, 255, 0.55),
+      inset -3px 0 6px -2px rgba(255, 255, 255, 0.40);
   }
   .frame img { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; border-radius: 1px; }
 
@@ -336,7 +344,10 @@
 
   .lightbox {
     position: fixed; inset: 0; z-index: 50; border: none; cursor: zoom-out;
-    background: rgba(18, 22, 28, 0.94); display: flex; flex-direction: column;
+    /* A soft, top-lit gallery wall — lighter than the page so every frame (Black
+       included) reads, like a piece hung on a real wall. */
+    background: linear-gradient(180deg, #efe9dd, #e2dbcc);
+    display: flex; flex-direction: column;
     align-items: center; justify-content: center; gap: 12px; padding: 2.5vmin;
   }
   /* The full-screen view wears the same frame. Rail + mat are only a touch larger than the
@@ -349,6 +360,7 @@
   }
   .lb-frame.frame--none { --rail: 0px; --mat: 0px; }   /* bare art fills the screen */
   .lb-frame img { max-width: 86vw; max-height: 66vh; width: auto; height: auto; object-fit: contain; }
-  .lb-cap { color: #e9e2d6; font-size: 0.9rem; }
+  .lb-frame.frame--none img { max-width: 96vw; max-height: 88vh; }   /* no frame → go big */
-  .lb-cap .sep { color: #9aa0a6; }
+  .lb-cap { color: #5b636e; font-size: 0.9rem; }
+  .lb-cap .sep { color: #a6acb4; }
 </style>