Mobile combing: WOTD watermark, Entertainment card breathing, Art lightbox fit

- WOTD /word: watermark was nudged too far down last round; bring it back up to
  sit JUST below the date (clears it by a few px instead of dropping markedly).
- home3 Entertainment card: stacked on mobile it lost the height it borrowed from
  Play on desktop and felt crowded — add vertical breathing (padding + gaps), not
  as tall as desktop.
- /art lightbox: on a narrow portrait phone the framed piece (image + mat + rail)
  overflowed the viewport (rail clipped → looked distorted). Cap the image so the
  WHOLE frame fits, leaving room for the caption.

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

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

@@ -405,4 +405,13 @@
   .lb-frame.frame--none img { max-width: 96vw; max-height: 88vh; }   /* no frame → go big */
   .lb-cap { color: #5b636e; font-size: 0.9rem; }
   .lb-cap .sep { color: #a6acb4; }
+
+  /* On a narrow portrait phone the framed piece (image + mat + rail) overflowed the
+     viewport — the rail got clipped and the whole thing read as distorted. Pull the
+     image cap in so the WHOLE frame fits on screen, and leave room for the caption. */
+  @media (max-width: 640px) {
+    .lb-frame { max-width: 94vw; }
+    .lb-frame img { max-width: 72vw; max-height: 60vh; }
+    .lb-frame.frame--none img { max-width: 92vw; max-height: 78vh; }
+  }
 </style>

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

@@ -482,5 +482,10 @@
     .joys { grid-template-columns: 1fr; }
     /* tighten the joys header so the title + dots/arrows never collide on a phone */
     .joys-head { flex-wrap: wrap; gap: 8px 12px; }
+    /* Entertainment: when stacked it loses the height it borrowed from Play on desktop,
+       so the content felt crowded. Give it room to breathe (not as tall as desktop). */
+    .moment { padding: 30px 24px; gap: 6px; }
+    .moment-mid { gap: 18px; padding: 12px 0; }
+    .moment-meta { margin-top: 18px; }
   }
 </style>

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

@@ -101,9 +101,9 @@
     box-shadow: 0 18px 50px -34px rgba(80, 60, 25, 0.55);
   }
   /* faded oversized initial bleeding off the right edge */
-  /* nudged down so the glyph's top curve clears the date in the top-right corner */
+  /* sits JUST below the date in the top-right corner — clear it, don't drop far beneath */
   .wm {
-    position: absolute; right: clamp(-60px, -4vw, -28px); top: clamp(72px, 13vw, 118px);
+    position: absolute; right: clamp(-60px, -4vw, -28px); top: clamp(45px, 7vw, 62px);
     font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 400;
     font-size: clamp(220px, 42vw, 380px); line-height: 1; color: rgba(62, 110, 151, 0.06);
     pointer-events: none; user-select: none;