brand: deviation banner — labels run parallel to their curves via textPath

brand/social/twitter-header-deviation-1500x500.svg

@@ -51,20 +51,35 @@
        transformed to sit on the right side of the banner. Scale 1.85x places it
        from roughly x=730..1420, y=115..400. -->
   <g transform="translate(708 34) scale(1.85)">
+    <defs>
+      <!-- Visible curves: exact hero geometry from deviant_website.html:679-681 -->
+      <path id="path-default" d="M 12 70 C 110 96, 150 120, 200 138 C 255 158, 305 176, 368 198"/>
+      <path id="path-deviation" d="M 200 138 C 250 120, 300 84, 368 44"/>
+      <!-- Text-baseline offsets: parallel copies shifted perpendicular to each
+           curve so labels sit BELOW the default (down-drift) and ABOVE the
+           deviation (up-lift). Same control-point shape, y shifted uniformly. -->
+      <path id="path-default-below"  d="M 12 86 C 110 112, 150 136, 200 154 C 255 174, 305 192, 368 214"/>
+      <path id="path-deviation-above" d="M 200 122 C 250 104, 300 68, 368 28"/>
+    </defs>
+
     <!-- Default trajectory: dashed, muted, curves down-right -->
-    <path d="M 12 70 C 110 96, 150 120, 200 138 C 255 158, 305 176, 368 198"
-          stroke="#6a7488" stroke-width="1.8" fill="none" opacity="0.75"
-          stroke-dasharray="4 8" stroke-linecap="round"/>
+    <use href="#path-default" stroke="#6a7488" stroke-width="1.8" fill="none" opacity="0.75"
+         stroke-dasharray="4 8" stroke-linecap="round"/>
     <!-- Branch dot at the divergence -->
     <circle cx="200" cy="138" r="4" fill="#6a7488"/>
     <!-- Deviation: solid, acid, curves up-right -->
-    <path d="M 200 138 C 250 120, 300 84, 368 44"
-          stroke="#d6ff3d" stroke-width="3" fill="none" stroke-linecap="round"
-          filter="url(#acid-glow)"/>
+    <use href="#path-deviation" stroke="#d6ff3d" stroke-width="3" fill="none" stroke-linecap="round"
+         filter="url(#acid-glow)"/>
     <!-- Terminal acid node -->
     <circle cx="368" cy="44" r="6" fill="#d6ff3d" filter="url(#node-glow)"/>
-    <!-- Labels -->
-    <text class="mono" x="12" y="222" font-size="10" fill="#6a7488" letter-spacing="2" text-transform="uppercase">DEFAULT TRAJECTORY</text>
-    <text class="mono" x="368" y="30" font-size="10" fill="#d6ff3d" letter-spacing="2" text-anchor="end">DEVIATION</text>
+
+    <!-- Labels run parallel to their respective curves via textPath. Start offsets
+         chosen so labels sit near the mid/end of each curve. -->
+    <text class="mono" font-size="10" fill="#6a7488" letter-spacing="2.5">
+      <textPath href="#path-default-below" startOffset="4%">DEFAULT TRAJECTORY</textPath>
+    </text>
+    <text class="mono" font-size="10" fill="#d6ff3d" letter-spacing="2.5">
+      <textPath href="#path-deviation-above" startOffset="30%">DEVIATION</textPath>
+    </text>
   </g>
 </svg>