wordmark_ink: an SVG wordmark drawn in the page's own ink, following light and dark everywhere

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GT37Z1Xtfd9pUuQtMTg6Yt

src/app.rs

@@ -973,10 +973,29 @@ fn Hero(
         }
     });
     let has_slides = slideshow.is_some();
-    let mark = move || view! {
-        <a class="wordmark" class:wordmark-house=house_wordmark href="/">
-            <img src=wordmark.clone() alt=site_title.clone() style=wordmark_style.clone()/>
-        </a>
+    // In the page's ink (`wordmark_ink`): a span the file masks, sized
+    // by the file's own proportions through an invisible copy of it,
+    // and named for screen readers as the image would have been.
+    let ink = site.wordmark_ink;
+    let mark = move || {
+        if ink {
+            let mask = format!("--wordmark-src:url(\"{}\")", wordmark.replace('"', "%22"));
+            view! {
+                <a class="wordmark wordmark-ink" href="/" aria-label=site_title.clone()>
+                    <span class="wordmark-ink-mark" style=mask>
+                        <img src=wordmark.clone() alt="" aria-hidden="true" style=wordmark_style.clone()/>
+                    </span>
+                </a>
+            }
+            .into_any()
+        } else {
+            view! {
+                <a class="wordmark" class:wordmark-house=house_wordmark href="/">
+                    <img src=wordmark.clone() alt=site_title.clone() style=wordmark_style.clone()/>
+                </a>
+            }
+            .into_any()
+        }
     };
 
     view! {