reverting x1

assets/scripts/hidden-details.js

@@ -750,19 +750,27 @@
   function addWhispers() {
     // Event: click one of the tiny "?" marks appended to long paragraphs.
     const paragraphs = Array.from(document.querySelectorAll("main p, #content p, article p")).filter((p) => p.textContent.trim().length > 80);
+    let added = 0;
     paragraphs.slice(0, 5).forEach((p, index) => {
-      if ((hash(path + index) + index) % 3 !== 0) return;
+      if ((hash(path + index) + index) % 3 !== 0 && added > 0) return;
+      const message = pick(index % 2 ? poems : details, `whisper-${index}`);
       const mark = document.createElement("span");
       mark.className = "hidden-whisper";
       mark.tabIndex = 0;
       mark.textContent = " ?";
-      mark.title = pick(index % 2 ? poems : details, `whisper-${index}`);
-      mark.dataset.character = characterFromText(mark.title);
+      mark.title = message;
+      mark.dataset.hiddenMemory = message;
+      mark.dataset.character = characterFromText(message);
       mark.addEventListener("click", () => {
         awardLayer(index % 2 ? 2 : 1, "paragraph whisper");
-        toast(mark.title, undefined, mark.dataset.character);
+        toast(message, undefined, mark.dataset.character);
       });
+      mark.addEventListener("focus", () => showInlineHint(mark, message));
+      mark.addEventListener("mouseenter", () => showInlineHint(mark, message));
+      mark.addEventListener("mouseleave", () => hideInlineHint(mark));
+      mark.addEventListener("blur", () => hideInlineHint(mark));
       p.appendChild(mark);
+      added += 1;
     });
   }
 
@@ -1164,9 +1172,40 @@
       if (index > 5) return;
       heading.classList.add("hidden-hover-memory");
       heading.dataset.hiddenMemory = pick([...lore.quotes, ...lore.journals, ...poems], `heading-${index}`);
+      heading.tabIndex = heading.tabIndex >= 0 ? heading.tabIndex : 0;
+      heading.addEventListener("mouseenter", () => showHeadingMemory(heading));
+      heading.addEventListener("focus", () => showHeadingMemory(heading));
+      heading.addEventListener("mouseleave", () => hideHeadingMemory(heading));
+      heading.addEventListener("blur", () => hideHeadingMemory(heading));
     });
   }
 
+  function showInlineHint(anchor, message) {
+    hideInlineHint(anchor);
+    const hint = document.createElement("span");
+    hint.className = "hidden-inline-hint";
+    hint.textContent = message;
+    anchor.insertAdjacentElement("afterend", hint);
+  }
+
+  function hideInlineHint(anchor) {
+    const next = anchor.nextElementSibling;
+    if (next?.classList.contains("hidden-inline-hint")) next.remove();
+  }
+
+  function showHeadingMemory(heading) {
+    hideHeadingMemory(heading);
+    const note = document.createElement("div");
+    note.className = "hidden-heading-memory";
+    note.textContent = heading.dataset.hiddenMemory || "";
+    heading.insertAdjacentElement("afterend", note);
+  }
+
+  function hideHeadingMemory(heading) {
+    const next = heading.nextElementSibling;
+    if (next?.classList.contains("hidden-heading-memory")) next.remove();
+  }
+
   function playTinySong() {
     try {
       const AudioContext = window.AudioContext || window.webkitAudioContext;
@@ -1227,6 +1266,12 @@
 
   document.addEventListener("DOMContentLoaded", () => {
     const memory = rememberVisit();
-    FEATURES.forEach((addFeature) => addFeature(memory));
+    FEATURES.forEach((addFeature) => {
+      try {
+        addFeature(memory);
+      } catch (error) {
+        console.warn("hidden detail feature failed", addFeature.name, error);
+      }
+    });
   });
 }());

assets/styles/hidden-details.css

@@ -11,6 +11,27 @@
     text-underline-offset: 0.22em;
 }
 
+.hidden-whisper:hover,
+.hidden-whisper:focus-visible {
+    color: var(--fg);
+    outline: none;
+}
+
+.hidden-inline-hint {
+    display: inline-block;
+    max-width: min(28rem, 82vw);
+    margin-left: 0.35rem;
+    padding: 0.32rem 0.48rem;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--surface);
+    color: var(--muted);
+    font-size: 0.78rem;
+    line-height: 1.35;
+    vertical-align: baseline;
+    box-shadow: 0 10px 24px color-mix(in oklab, #000 12%, transparent);
+}
+
 .hidden-whisper::selection,
 .hidden-greeting::selection,
 .hidden-footer-note::selection {
@@ -252,13 +273,14 @@
     position: relative;
 }
 
-.hidden-hover-memory:hover::after {
-    content: attr(data-hidden-memory);
-    position: absolute;
-    left: 0;
-    top: 100%;
+.hidden-hover-memory:focus-visible {
+    outline: 2px solid color-mix(in oklab, var(--accent) 48%, transparent);
+    outline-offset: 0.18em;
+}
+
+.hidden-heading-memory {
     width: min(28rem, 80vw);
-    margin-top: 0.25rem;
+    margin: -0.2rem 0 0.65rem;
     padding: 0.55rem 0.65rem;
     border: 1px solid var(--border);
     border-radius: 8px;
@@ -268,7 +290,6 @@
     font-family: 'Noto', system-ui, sans-serif;
     font-weight: 400;
     line-height: 1.35;
-    z-index: 30;
     box-shadow: 0 12px 28px color-mix(in oklab, #000 12%, transparent);
 }