fix(web): r3 final tightening — hero eyebrow pipe via CSS pseudo

The hero eyebrow rendered the JP yūhō phrase prefixed with a literal
"　|　" (full-width spaces around a pipe). On mobile (<=600 px) the
.hero-eyebrow wraps to a second line and the literal pipe-with-spaces
landed at the start of the wrapped JP run, reading as awkward leading
punctuation rather than a separator.

Fix: drop the inline separator from the JSX text content; render it
via .hero-eyebrow .jp::before with a dimmed mono pipe + 10 px
margin-right. Hidden at <=600 px so the wrap reads cleanly.

Typecheck clean, vitest 41/41.

Author: javierdejesusda

web/app/globals.css

@@ -1329,7 +1329,23 @@ section[data-paper-hide] {
   margin-bottom: 22px;
 }
 .hero-eyebrow .sq { width: 6px; height: 6px; background: var(--vermilion); }
-.hero-eyebrow .jp { font-family: var(--f-jp); letter-spacing: 0.04em; color: var(--paper-aged); font-size: 13px; text-transform: none; }
+.hero-eyebrow .jp { font-family: var(--f-jp); letter-spacing: 0.04em; color: var(--paper-aged); font-size: 13px; text-transform: none; position: relative; }
+/* CSS pseudo-separator instead of an inline `|` glyph: the desktop
+   eyebrow gets a clean mono pipe between the two spans, mobile drops
+   it (the spans wrap to two lines and the gap reads as separation). */
+.hero-eyebrow .jp::before {
+  content: "|";
+  display: inline-block;
+  margin-right: 10px;
+  font-family: var(--f-mono);
+  font-size: 11px;
+  color: var(--type-faint);
+  letter-spacing: 0;
+  vertical-align: 1px;
+}
+@media (max-width: 600px) {
+  .hero-eyebrow .jp::before { display: none; }
+}
 h1.hero-title {
   font-family: var(--f-display);
   font-weight: 500;

web/components/sections/hero.tsx

@@ -24,7 +24,7 @@ export function Hero() {
           <div className="hero-eyebrow paper-orbit">
             <span className="sq" />
             <span>Vol. II — Edition 047</span>
-            <span className="jp">　|　有価証券報告書、英訳。</span>
+            <span className="jp" lang="ja">有価証券報告書、英訳。</span>
           </div>
           <h1 className="hero-title">
             <span className="line"><span className="inner">Every Japanese</span></span>