feat(biography): re-implement ruby pronunciation annotations for CJK names

Add visual pronunciation guides (pinyin, furigana, IPA) displayed as ruby text annotations above the profile name in biography blocks.

- Add conditional ruby rendering in resume-biography and resume-biography-3
- Include browser fallback for non-ruby-supporting browsers

Usage: Set `name.pronunciation` in author YAML (e.g., "Wáng Wěi")

modules/blox/assets/css/blox/biography.css

@@ -28,6 +28,7 @@
 
   .network-icon li {
     margin-right: 10px;
+
     @media (max-width: 640px) {
       /* Min 48px Lighthouse tap targets on mobile */
       margin-right: 12px;
@@ -74,7 +75,87 @@
   z-index: 1;
 }
 
-/* Ruby pronunciation styling for modern look */
+/* Ruby pronunciation styling - 2026+ modern design */
+.hb-ruby-name {
+  ruby-position: over;
+  display: ruby;
+  text-align: center;
+}
+
+.hb-ruby-name rt {
+  /* Elegant, subdued annotation text */
+  font-size: 0.45em;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  line-height: 1.2;
+
+  /* Subtle gradient text for premium feel */
+  background: linear-gradient(135deg,
+      var(--color-gray-500) 0%,
+      var(--color-gray-400) 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+
+  /* Smooth reveal animation */
+  opacity: 0.85;
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.dark .hb-ruby-name rt {
+  background: linear-gradient(135deg,
+      var(--color-gray-400) 0%,
+      var(--color-gray-300) 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+/* Hover enhancement - subtle lift */
+.hb-ruby-name:hover rt {
+  opacity: 1;
+  transform: translateY(-1px);
+}
+
+/* CJK-optimized variant - larger annotation for CJK characters over Latin */
+.hb-ruby-name--cjk rt {
+  font-size: 0.5em;
+  font-weight: 400;
+  letter-spacing: 0.12em;
+}
+
+/* Latin-optimized variant - smaller annotation for romanization over CJK */
+.hb-ruby-name--latin rt {
+  font-size: 0.4em;
+  font-weight: 500;
+  text-transform: none;
+}
+
+/* Accessibility: respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .hb-ruby-name rt {
+    transition: none;
+  }
+
+  .hb-ruby-name:hover rt {
+    transform: none;
+  }
+}
+
+/* Fallback styling for browsers without ruby support */
+@supports not (display: ruby) {
+  .hb-ruby-name {
+    display: inline-block;
+  }
+
+  .hb-ruby-name rt {
+    display: block;
+    font-size: 0.6em;
+    margin-bottom: 0.25em;
+  }
+}
+
+/* Legacy class support */
 .ruby-modern {
   ruby-position: over;
 }
@@ -151,7 +232,8 @@
   text-align: center;
   font-size: 20px;
   background-color: #fff;
-  color: #000; /* override parent alpha */
+  color: #000;
+  /* override parent alpha */
   box-shadow:
     0 10px 20px rgb(0 0 0 / 4%),
     0 2px 6px rgb(0 0 0 / 4%),
@@ -198,4 +280,4 @@
   background-image:
     radial-gradient(at 20% 25%, hsla(212, 35%, 15%, 1) 0px, transparent 50%), radial-gradient(at 75% 30%, hsla(160, 35%, 15%, 1) 0px, transparent 50%),
     radial-gradient(at 25% 80%, hsla(280, 35%, 15%, 1) 0px, transparent 50%), radial-gradient(at 75% 85%, hsla(30, 35%, 15%, 1) 0px, transparent 50%);
-}
+}

modules/blox/blox/resume-biography-3/README.md

@@ -35,6 +35,7 @@ design:
 - **Horizontal Layout**: Desktop-optimized side-by-side arrangement for better space utilization
 - **Integrated Education**: Built-in education timeline with institution details
 - **Interests Section**: Personal interests display for a well-rounded professional image
+- **Name Pronunciation**: Ruby annotation displays pronunciation guides above your name (set `name.pronunciation` in your author YAML)
 - **Social Integration**: Complete social media profile links with proper external handling
 - **Avatar Flexibility**: Multiple size and shape options for personal branding
 - **Academic Icons**: Beautiful education and achievement icons

modules/blox/blox/resume-biography-3/block.html

@@ -185,9 +185,24 @@
 
         {{/* Name and Role - Centered */}}
         <div class="space-y-3">
-          <h1 class="{{ $name_class }} font-black text-gray-900 dark:text-white leading-tight">
-            {{ $profile.title }}
-          </h1>
+          {{/* Extract pronunciation for ruby annotation */}}
+          {{ $name_pronunciation := "" }}
+          {{ with $profile.name_pronunciation }}
+            {{ if eq (printf "%T" .) "string" }}
+              {{ $name_pronunciation = strings.TrimSpace . }}
+            {{ end }}
+          {{ end }}
+
+          {{/* Name with optional ruby pronunciation */}}
+          {{ if and $profile.title $name_pronunciation }}
+            <h1 class="{{ $name_class }} font-black text-gray-900 dark:text-white leading-tight">
+              <ruby class="hb-ruby-name">{{ $profile.title }}<rt>{{ $name_pronunciation }}</rt></ruby>
+            </h1>
+          {{ else }}
+            <h1 class="{{ $name_class }} font-black text-gray-900 dark:text-white leading-tight">
+              {{ $profile.title }}
+            </h1>
+          {{ end }}
           
           {{ $pronouns := "" }}
           {{ with $profile.pronouns }}

modules/blox/blox/resume-biography/README.md

@@ -10,7 +10,7 @@ Present yourself professionally with the Resume Biography block - a comprehensiv
 - **Flexible Shapes**: Choose from circle, square, or rounded avatar styles
 - **Social Integration**: Beautiful social media links with icon support
 - **Banner Support**: Optional header banner for additional visual impact
-- **Name Pronunciation**: Ruby annotation support for proper name pronunciation
+- **Name Pronunciation**: Ruby annotation displays pronunciation guides above your name (set `name.pronunciation` in your author YAML)
 - **Pronoun Support**: Inclusive pronoun display for professional clarity
 - **Organization Links**: Clickable organization affiliations
 - **Download Button**: Optional CV/resume download functionality
@@ -38,7 +38,7 @@ Present yourself professionally with the Resume Biography block - a comprehensiv
 
 - **Immediate Recognition**: Professional photo creates memorable personal brand
 - **Credibility Signals**: Organization affiliations and social links build trust
-- **Accessibility**: Pronunciation guides ensure your name is remembered correctly
+- **Accessibility**: Pronunciation guides (Pinyin, furigana, IPA) displayed above your name help visitors remember and pronounce it correctly
 - **Professional Network**: Social links facilitate professional connections
 
 ## 💡 Customization Options

modules/blox/blox/resume-biography/block.html

@@ -246,9 +246,24 @@
   </div>
   {{ end }}
 
-  <div class="text-3xl font-bold mb-2 mt-6">
-    {{- $profile_title -}}
-  </div>
+  {{/* Extract pronunciation for ruby annotation */}}
+  {{ $name_pronunciation := "" }}
+  {{ with $profile.name_pronunciation }}
+    {{ if eq (printf "%T" .) "string" }}
+      {{ $name_pronunciation = strings.TrimSpace . }}
+    {{ end }}
+  {{ end }}
+
+  {{/* Name with optional ruby pronunciation */}}
+  {{ if and $profile_title $name_pronunciation }}
+    <h1 class="text-3xl font-bold mb-2 mt-6">
+      <ruby class="hb-ruby-name">{{ $profile_title }}<rt>{{ $name_pronunciation }}</rt></ruby>
+    </h1>
+  {{ else }}
+    <div class="text-3xl font-bold mb-2 mt-6">
+      {{- $profile_title -}}
+    </div>
+  {{ end }}
   {{- with $profile_pronouns -}}
     <div class="text-lg font-normal text-gray-600 dark:text-gray-400 -mt-1 mb-2">({{ . }})</div>
   {{- end -}}