Reposition figure callouts to land on articulation points

Move callouts inside .figure-img-wrap so coordinates are image-relative
instead of stage-relative — fixes dots drifting off the figure on layouts
where the stage is wider than the image. Anchor each callout by the dot's
vertical center via translateY(-50%) so `top` refers to the dot, not the
container's top edge.

Tuned coordinates (top, right):
- ARTICULATED · ARM: 32%, 47% (on her upper arm holding the lasso)
- BALL-JOINT · KNEE: 46%, 45% (on her bent raised knee)
- SOFT-GOODS · PLASTIC: 60%, 32% (on the horse's body)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

static/action-variants.jsx

@@ -27,34 +27,36 @@ function HeroVariant({ onFile, heroImage }) {
           <div className="grid-lines" />
           <div className="grain" />
 
-          {/* Standing figure — wrapped with aspect-ratio so corner crops align to the image edges */}
+          {/* Standing figure — wrapped with aspect-ratio so corner crops align to the image edges.
+              Callouts live INSIDE the wrap so coordinates are image-relative. Each callout is a
+              single flex row: [label][short line][dot]. The container is anchored by its
+              right-center, so the `top`/`right` percentages refer to the dot's position. */}
           <div className="figure-stage">
             <div className="figure-img-wrap">
               <span className="figure-crop tl"/><span className="figure-crop tr"/>
               <span className="figure-crop bl"/><span className="figure-crop br"/>
               <img className="figure-img" src={heroImage} alt="action figure" />
+
+              <div className="callout" style={{ top: '32%', right: '47%' }}>
+                <span className="lbl">ARTICULATED · ARM</span>
+                <span className="line"/>
+                <span className="dot"/>
+              </div>
+              <div className="callout" style={{ top: '46%', right: '45%' }}>
+                <span className="lbl">BALL-JOINT · KNEE</span>
+                <span className="line"/>
+                <span className="dot"/>
+              </div>
+              <div className="callout" style={{ top: '60%', right: '32%' }}>
+                <span className="lbl">SOFT-GOODS · PLASTIC</span>
+                <span className="line"/>
+                <span className="dot"/>
+              </div>
             </div>
             <div className="plinth"/>
             <div className="floor"/>
           </div>
 
-          {/* Callouts — positioned for the lasso cowgirl hero (rearing horse, sunset, 5:4 landscape) */}
-          <div className="callout" style={{ top: '40%', right: '28%' }}>
-            <span className="lbl">ARTICULATED · ARM</span>
-            <span className="line"/>
-            <span className="dot"/>
-          </div>
-          <div className="callout" style={{ top: '52%', right: '19%' }}>
-            <span className="lbl">BALL-JOINT · KNEE</span>
-            <span className="line"/>
-            <span className="dot"/>
-          </div>
-          <div className="callout" style={{ top: '60%', right: '22%' }}>
-            <span className="lbl">SOFT-GOODS · PLASTIC</span>
-            <span className="line"/>
-            <span className="dot"/>
-          </div>
-
           <div className="left">
             <div>
               <div className="eyebrow"><span className="line"/>SYSTMS / ACTION · v0.9</div>

static/action.css

@@ -24,11 +24,13 @@
 .v-hero.v-action .lead{max-width:480px}
 .v-hero.v-action .side{display:none}
 
-/* Figure callout chip — points at an articulation point */
-.callout{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.22em;color:var(--muted);text-transform:uppercase}
-.callout .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(255,45,30,0.2)}
-.callout .line{width:40px;height:1px;background:var(--line-2)}
-.callout .lbl{background:rgba(10,10,10,0.85);border:1px solid var(--line-2);padding:4px 8px;border-radius:3px;backdrop-filter:blur(6px);color:var(--text)}
+/* Figure callout chip — short label + stub line + dot pinned to an articulation point.
+   Lives inside .figure-img-wrap so `top`/`right` are image-relative. The container is
+   shifted up by half its height so `top` refers to the dot's vertical centre. */
+.callout{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;transform:translateY(-50%);font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.22em;color:var(--muted);text-transform:uppercase}
+.callout .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(255,45,30,0.2);flex-shrink:0}
+.callout .line{width:40px;height:1px;background:var(--line-2);flex-shrink:0}
+.callout .lbl{background:rgba(10,10,10,0.85);border:1px solid var(--line-2);padding:4px 8px;border-radius:3px;backdrop-filter:blur(6px);color:var(--text);white-space:nowrap}
 .callout.left-side{flex-direction:row-reverse}
 .callout.left-side .line{transform:rotate(180deg)}