feat(web): r3 signature moments — ribbon, breath, gloss-fuse, callback

Four restraint-first signature additions, all callbacks to gestures the
page already makes:

- Marginalia ribbon (new ui/marginalia-ribbon.tsx + layout mount + CSS).
  Editorial running header in the top-right gutter, tracks the active
  section via IntersectionObserver, mono caps + vermilion stripe + ja
  mincho. Mirrors a printed yūhō page header. Hidden ≤1100 px.

- KG-2 ticker caret breath. Replaces the hard 1.05 s blink with a
  2.4 s opacity pulse 0.55 → 1 → 0.55. Reads as "the judge is watching"
  rather than a typing cursor. Demo-input caret keeps caretBlink (right
  semantics).

- Cite-gloss popover bidirectionality. ReadAlong EN-pane spans now
  carry data-gloss-label/aux too — the popover fires on EN→JA hover
  with `SOURCE · {customId}` + truncated JA mate, mirroring the JA→EN
  direction already present.

- Manifest accent inking-underline callback. Same 2 px vermilion
  hairline + faint ink-bleed shadow as the hero's `In English.`
  end-state, fading in on .reveal.is-in. No wet-smear cinema — this is
  recognition, not declaration. Bookends the document the same way the
  宣 / 結 seals do.

~108 LOC across 4 files. Typecheck clean, vitest 41/41, build clean.

Author: javierdejesusda

web/app/globals.css

@@ -686,6 +686,57 @@ body.use-system-cursor #cursor-dot { display: none !important; }
   .progress-rail { display: none; }
 }
 
+/* ── Marginalia ribbon ────────────────────────────────────────────
+   Editorial running header — sits in the top-right gutter just below
+   the topbar, tracks the section the reader is in. Reads as a printed
+   yūhō page-header: §-numbered chapter, mono caps, a vermilion margin
+   stripe, the kanji label in mincho. Hidden on coarse-pointer / mobile
+   so the narrow viewport keeps the typographic spine clean. */
+.marginalia-ribbon {
+  position: fixed;
+  top: 76px;
+  right: 56px;
+  z-index: 48;
+  display: inline-flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 6px 12px 6px 10px;
+  background: rgba(14, 14, 16, 0.78);
+  -webkit-backdrop-filter: blur(10px) saturate(120%);
+          backdrop-filter: blur(10px) saturate(120%);
+  border-left: 1px solid var(--vermilion);
+  font-family: var(--f-mono);
+  font-size: 9px;
+  letter-spacing: 0.32em;
+  text-transform: uppercase;
+  color: var(--type-faint);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 380ms var(--ease-out);
+  font-variant-numeric: tabular-nums;
+}
+:root[data-theme="light"] .marginalia-ribbon {
+  background: rgba(250, 247, 238, 0.82);
+  color: var(--type-muted);
+}
+.marginalia-ribbon.is-visible { opacity: 1; }
+.marginalia-ribbon__num {
+  color: var(--vermilion);
+  font-weight: 500;
+}
+.marginalia-ribbon__sep { color: var(--type-faint); }
+.marginalia-ribbon__ja {
+  font-family: var(--f-jp);
+  font-size: 12px;
+  letter-spacing: 0.04em;
+  text-transform: none;
+  color: var(--paper-aged);
+}
+:root[data-theme="light"] .marginalia-ribbon__ja { color: var(--type-primary); }
+@media (max-width: 1100px) {
+  .marginalia-ribbon { display: none; }
+}
+
 /* ── Top scroll progress ───────────────────────────────────────── */
 #progress {
   position: fixed; top: 0; left: 0; right: 0; height: 2px;
@@ -1411,7 +1462,16 @@ h1.hero-title .accent::after {
   font-size: 14px;
   line-height: 1;
   vertical-align: -1px;
-  animation: caretBlink 1.05s steps(2, end) infinite;
+  /* Kg-2 caret breathes (slow opacity pulse) rather than blinking — the
+     ticker carries the brand's "live judge" promise, and a typing-cursor
+     blink reads as code, not as a heartbeat. The 2.4 s cycle and 0.55
+     floor keep the breath quiet enough to not pull the eye, but visible
+     enough that a reader who notices it once notices it again. */
+  animation: kg2Breath 2.4s var(--ease-in-out) infinite;
+}
+@keyframes kg2Breath {
+  0%, 100% { opacity: 0.55; }
+  50%      { opacity: 1; }
 }
 @media (prefers-reduced-motion: reduce) {
   .mt-caret { animation: none; opacity: 0.6; }
@@ -3041,6 +3101,39 @@ section[data-paper-stage].manifest > .right {
   margin-inline: 0 !important;
 }
 .manifest .left h2 { margin-bottom: 32px; }
+
+/* Manifest accent — quiet callback to the hero's inking underline.
+   Same 2px vermilion hairline + faint ink-bleed shadow as the hero's
+   end-state, fading in on .reveal.is-in. No wet-smear cinema: this is
+   recognition, not declaration. The pair of underlines (`In English.`
+   opening, `not a chatbot.` closing) bookends the document the same way
+   the 宣 / 結 seals do — opening promise, closing acknowledgement. */
+.manifest .section-title .accent {
+  position: relative;
+  display: inline-block;
+}
+.manifest .section-title .accent::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -0.05em;
+  height: 2px;
+  background: var(--vermilion);
+  box-shadow: 0 1px 0 rgba(232, 80, 58, 0.20);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 600ms var(--ease-out);
+}
+.manifest .reveal.is-in .section-title .accent::after {
+  opacity: 1;
+}
+@media (prefers-reduced-motion: reduce) {
+  .manifest .section-title .accent::after {
+    transition: none;
+    opacity: 1;
+  }
+}
 .manifest .left .sig {
   margin-top: 48px;
   font-family: var(--f-jp);

web/app/layout.tsx

@@ -4,6 +4,7 @@ import Script from "next/script";
 import { CiteDrawerProvider } from "@/components/ui/cite-drawer";
 import { CiteGlossLayer } from "@/components/ui/cite-gloss-tip";
 import { CustomCursor } from "@/components/ui/custom-cursor";
+import { MarginaliaRibbon } from "@/components/ui/marginalia-ribbon";
 import { ProgressRail } from "@/components/ui/progress-rail";
 import { Preloader } from "@/components/ui/preloader";
 import { TopBar } from "@/components/ui/topbar";
@@ -122,6 +123,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         </LenisProvider>
         <CustomCursor />
         <CiteGlossLayer />
+        <MarginaliaRibbon />
         <ProgressRail />
         <Script
           id="ld-json"

web/components/sections/readalong.tsx

@@ -189,6 +189,8 @@ export function ReadAlong() {
                   key={p.pair}
                   className={"ra-span" + (hovered === p.pair ? " is-on" : "")}
                   data-pair={p.pair}
+                  data-gloss-label={`SOURCE · ${filer.customId}`}
+                  data-gloss-aux={truncate(p.jp, 60)}
                   onMouseEnter={() => setHovered(p.pair)}
                   onMouseLeave={() => setHovered(null)}
                 >

web/components/ui/marginalia-ribbon.tsx

@@ -0,0 +1,75 @@
+"use client";
+import { useEffect, useState } from "react";
+
+type SectionMeta = { id: string; num: string; ja: string };
+
+// Section-header data, mirrored from each section's `<div className="section-tag">`.
+// Phase-4 ships these in the post-Phase-5 §-numbering format so the ribbon
+// reads coherently from day one; Phase 5 brings the in-section tags into
+// alignment. Hero / Access intentionally omitted — they bookend the document
+// and don't carry a §-numbered chapter label.
+const SECTIONS: SectionMeta[] = [
+  { id: "problem", num: "§ 01", ja: "読まれない" },
+  { id: "how", num: "§ 02", ja: "仕組み" },
+  { id: "repro", num: "§ 02 · 3", ja: "明細" },
+  { id: "demo", num: "§ 02 · 5", ja: "実演" },
+  { id: "hardware", num: "§ 02 · 6", ja: "適合" },
+  { id: "dag", num: "§ 02 · 7", ja: "骨格" },
+  { id: "readalong", num: "§ 02 · 8", ja: "対訳" },
+  { id: "kg2", num: "§ 02 · 9", ja: "実証" },
+  { id: "reports", num: "§ 03", ja: "本棚" },
+  { id: "failures", num: "§ 03 · 5", ja: "節度" },
+  { id: "manifest", num: "§ 04", ja: "節度" },
+  { id: "faq", num: "§ 04 · 5", ja: "余白" },
+];
+
+// Editorial running header. Sits in the top-right gutter just below the
+// topbar, fades in 1.5 s after page-load (same delay as ProgressRail) so
+// it never competes with the hero. Tracks the section currently dominant
+// in the viewport via an IntersectionObserver tuned to the centre band
+// (rootMargin: -30% 0px -30% 0px) so it reads what the user is reading,
+// not what is just barely on screen. Hidden on tablet/mobile so the
+// reduced viewport keeps the typographic spine.
+export function MarginaliaRibbon() {
+  const [active, setActive] = useState<SectionMeta | null>(null);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const t = setTimeout(() => setVisible(true), 1500);
+    return () => clearTimeout(t);
+  }, []);
+
+  useEffect(() => {
+    const obs = new IntersectionObserver(
+      (entries) => {
+        const inView = entries
+          .filter((e) => e.isIntersecting)
+          .sort((a, b) => b.intersectionRatio - a.intersectionRatio);
+        if (inView[0]) {
+          const id = (inView[0].target as HTMLElement).id;
+          const meta = SECTIONS.find((s) => s.id === id);
+          if (meta) setActive(meta);
+        }
+      },
+      { rootMargin: "-30% 0px -30% 0px", threshold: [0, 0.25, 0.5, 0.75, 1] },
+    );
+    SECTIONS.forEach((s) => {
+      const el = document.getElementById(s.id);
+      if (el) obs.observe(el);
+    });
+    return () => obs.disconnect();
+  }, []);
+
+  if (!active) return null;
+
+  return (
+    <aside
+      className={"marginalia-ribbon" + (visible ? " is-visible" : "")}
+      aria-hidden="true"
+    >
+      <span className="marginalia-ribbon__num">{active.num}</span>
+      <span className="marginalia-ribbon__sep">·</span>
+      <span className="marginalia-ribbon__ja" lang="ja">{active.ja}</span>
+    </aside>
+  );
+}