v3: a journal headline stays readable when you point at it — over an image card the title rests white on the scrim and hovers in the theme's accent, which over a busy or bright thumbnail could sink into the picture, and in nyt's light scheme went black on black. A hovered title now picks up a backing plate of its own, grown around the text by padding that an equal negative margin cancels, so nothing shifts, and hugging the headline rather than spanning the card. The plate is a dark glass by default and each theme reskins it through --journal-title-hover-* properties: smooth frosts it in page colour so terracotta on cream and jasmine on Prussian Blue stay the pairs, kanagawa sets it on sumiInk with a selection edge, nyt in square flat ink, brutalist as a solid accent stamp with a hard offset shadow, geocities as a neon marquee, melange as a coffee pillow in warm shadow. nyt's unread dot, inked in the theme's black accent, goes white over a photo too.

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

src/App.css

@@ -5920,11 +5920,40 @@ body.has-player .chat-fab {
   );
 }
 
+/* The scrim is tuned for white ink at rest; the hover colour is whatever the
+   theme's accent is, which over a busy or bright thumbnail can sink into it.
+   So a pointed-at title picks up a backing of its own — a dark glass plate by
+   default, reskinned per theme through the --journal-title-hover-* props. The
+   padding is always there and cancelled by an equal negative margin, so the
+   plate grows around the text instead of shifting it; `align-self` keeps it
+   hugging the headline rather than spanning the whole card. */
 .journal-card--image .journal-card-title {
+  --journal-title-hover-pad-y: 0.12em;
+  --journal-title-hover-pad-x: 0.35em;
+  --journal-title-hover-bg: rgb(0 0 0 / 0.66);
+  --journal-title-hover-color: var(--color-accent);
+  --journal-title-hover-radius: var(--radius-sm);
+  --journal-title-hover-shadow: none;
+  --journal-title-hover-filter: none;
+  --journal-title-hover-text-shadow: none;
+  align-self: flex-start;
+  max-width: calc(100% + 2 * var(--journal-title-hover-pad-x));
+  padding: var(--journal-title-hover-pad-y) var(--journal-title-hover-pad-x);
+  margin: calc(-1 * var(--journal-title-hover-pad-y))
+    calc(-1 * var(--journal-title-hover-pad-x));
+  border-radius: var(--journal-title-hover-radius);
   color: #fff;
+  transition:
+    color var(--dur-base),
+    background-color var(--dur-base),
+    box-shadow var(--dur-base);
 }
 .journal-card--image .journal-card-title:hover {
-  color: var(--color-accent);
+  color: var(--journal-title-hover-color);
+  background-color: var(--journal-title-hover-bg);
+  box-shadow: var(--journal-title-hover-shadow);
+  backdrop-filter: var(--journal-title-hover-filter);
+  text-shadow: var(--journal-title-hover-text-shadow);
 }
 .journal-card--image .journal-card-meta {
   color: rgba(255, 255, 255, 0.78);

src/themes/brutalist.css

@@ -190,6 +190,16 @@
   --journal-break-rule: 2px solid var(--color-border);
 }
 
+/* A pointed-at headline over a photo becomes a label slapped on it: a solid
+   accent block, hard offset shadow, no glass — the same stamp every button
+   here is made of. */
+[data-style="brutalist"] .journal-card--image .journal-card-title {
+  --journal-title-hover-bg: var(--color-accent);
+  --journal-title-hover-color: var(--color-on-accent);
+  --journal-title-hover-radius: 0;
+  --journal-title-hover-shadow: 3px 3px 0 var(--color-text);
+}
+
 /* ── Dump post detail header ─────────────────────────────────────── */
 [data-style="brutalist"] .dump-post-header {
   border: 2px solid var(--color-border);

src/themes/geocities.css

@@ -268,6 +268,16 @@
   box-shadow: 0 0 16px color-mix(in srgb, var(--color-accent) 75%, transparent);
 }
 
+/* A pointed-at headline over a photo lights up like a marquee: neon yellow
+   on a black plate, ringed and glowing in the accent. */
+[data-style="geocities"] .journal-card--image .journal-card-title {
+  --journal-title-hover-bg: rgb(0 0 0 / 0.82);
+  --journal-title-hover-color: #ffff00;
+  --journal-title-hover-shadow: 0 0 0 2px var(--color-accent),
+    0 0 10px var(--color-accent);
+  --journal-title-hover-text-shadow: 0 0 6px rgb(255 255 0 / 0.6);
+}
+
 /* The divider GIF, minus the GIF: the rainbow the header ends on, run again
    between sub-blocks with a sparkle sitting in the middle of it. */
 [data-style="geocities"] .journal-break {

src/themes/kanagawa.css

@@ -161,8 +161,14 @@
 }
 
 /* ── On the scrim, links hover in the dark scheme's blue ─────────── */
-[data-style="kanagawa"] .journal-card--image .journal-card-title:hover {
-  color: var(--kngw-accent-on-photo);
+/* …on a plate of sumiInk, the Wave page itself, in either scheme: the blue
+   is the dark scheme's, so its ground has to be too. Square-ish, like the
+   selection block an editor draws behind a match. */
+[data-style="kanagawa"] .journal-card--image .journal-card-title {
+  --journal-title-hover-color: var(--kngw-accent-on-photo);
+  --journal-title-hover-bg: rgb(31 31 40 / 0.86);
+  --journal-title-hover-radius: var(--radius-xs);
+  --journal-title-hover-shadow: inset 2px 0 0 var(--kngw-accent-on-photo);
 }
 
 [data-style="kanagawa"]

src/themes/melange.css

@@ -314,6 +314,16 @@
   color: var(--mel-dust);
 }
 
+/* A pointed-at headline over a photo sits on a pillow of roasted coffee —
+   the dark scheme's ground in either scheme, since the scrim under it is
+   dark in both — lit in the dark scheme's amber, in warm shadow. */
+[data-style="melange"] .journal-card--image .journal-card-title {
+  --journal-title-hover-bg: rgb(41 37 34 / 0.84);
+  --journal-title-hover-color: #ebc06d;
+  --journal-title-hover-radius: var(--radius-sm);
+  --journal-title-hover-shadow: 0 4px 14px -4px rgb(0 0 0 / 0.5);
+}
+
 /* ── A quote is a printed pull-quote: big soft mark, terracotta ──── */
 [data-style="melange"] .journal-card--quote {
   background: var(--color-surface);

src/themes/nyt.css

@@ -131,8 +131,18 @@
 }
 /* …except over a photo, where the headline is white on a dark scrim: ink
    there goes black-on-black in the light scheme. */
+[data-style="nyt"] .journal-card--image .journal-card-title {
+  --journal-title-hover-color: #fff;
+  /* A caption box set in solid ink — square, flat, no glass. */
+  --journal-title-hover-bg: rgb(0 0 0 / 0.8);
+  --journal-title-hover-radius: 0;
+}
 [data-style="nyt"] .journal-card--image .journal-card-title:hover {
-  color: #fff;
+  color: var(--journal-title-hover-color);
+}
+/* The accent is ink, so over the photo the unread dot goes white with it. */
+[data-style="nyt"] .journal-card--image .unread-dot {
+  background: #fff;
 }
 /* Over a playable thumb the card's "open" cue stands down (see App.css). */
 [data-style="nyt"]

src/themes/smooth.css

@@ -99,3 +99,17 @@
   --btn-primary-shadow: var(--shadow-1);
   --btn-primary-shadow-hover: var(--shadow-1);
 }
+
+/* A pointed-at journal headline sits on frosted page colour rather than on
+   black glass: terracotta on cream and jasmine on Prussian Blue are the
+   pairs this palette was picked for, where the accent on a black plate
+   would lose the light scheme's terracotta. */
+:root:not([data-style]) .journal-card--image .journal-card-title,
+[data-style="smooth"] .journal-card--image .journal-card-title {
+  --journal-title-hover-bg: light-dark(
+    rgb(255 253 248 / 0.9),
+    rgb(1 21 42 / 0.78)
+  );
+  --journal-title-hover-radius: var(--radius-md);
+  --journal-title-hover-filter: blur(6px);
+}