Fix connector line x-alignment: anchor to Optimize chip via JS

Previously the .opt-connector used margin:0 auto, centering it in the
card rather than under the Optimize chip (3rd of 4 pipeline chips, so
right-of-center). alignConnector() now measures the chip's center X
at runtime and sets marginLeft accordingly, so the line always drops
straight from Optimize regardless of layout or viewport size.

Also adds a window resize handler to re-align on viewport changes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: githajae

_layouts/research-interests.html

@@ -214,8 +214,27 @@ <h2 class="s-title">The AI<br>Database System.</h2>
   var semChip   = document.getElementById('sem-chip');
   var planChip  = document.getElementById('plan-chip');
   var dots      = document.querySelectorAll('.ri-dot');
+  var currentStep = 1;
+
+  /* Position the opt-connector so it is centred directly below the
+     Optimize chip, no matter where the chip sits in the pipeline row. */
+  function alignConnector() {
+    if (!planChip || !semChip) return;
+    var connector = semChip.querySelector('.opt-connector');
+    if (!connector) return;
+
+    var chipRect   = planChip.getBoundingClientRect();
+    var expandRect = semChip.getBoundingClientRect();
+
+    /* horizontal distance from plan-expand's left edge to chip centre */
+    var offset = (chipRect.left + chipRect.width / 2) - expandRect.left;
+
+    connector.style.marginLeft  = (offset - 1) + 'px'; /* -1 = half of 2px width */
+    connector.style.marginRight = '0';
+  }
 
   function update(activeStep) {
+    currentStep = activeStep;
     elements.forEach(function (el) {
       var from = parseInt(el.dataset.from, 10);
       el.classList.toggle('lit', activeStep >= from);
@@ -225,6 +244,7 @@ <h2 class="s-title">The AI<br>Database System.</h2>
     dots.forEach(function (d, i) {
       d.classList.toggle('active', (i + 1) === activeStep);
     });
+    if (activeStep >= 5) alignConnector();
   }
 
   var observer = new IntersectionObserver(function (entries) {
@@ -237,5 +257,10 @@ <h2 class="s-title">The AI<br>Database System.</h2>
 
   steps.forEach(function (s) { observer.observe(s); });
   update(1); // initialise diagram to step 1
+
+  /* Re-align on resize (e.g. font scaling, window resize) */
+  window.addEventListener('resize', function () {
+    if (currentStep >= 5) alignConnector();
+  });
 }());
 </script>

_sass/custom/_research-interests.scss

@@ -197,11 +197,11 @@ body.page--research-interests #main {
   }
 
   // Vertical line from Optimize chip down to the ops box
+  // (horizontal position set dynamically by JS — see alignConnector())
   .opt-connector {
     width: 2px;
     height: 14px;
     background: rgba(0, 113, 227, 0.45);
-    margin: 0 auto;
     border-radius: 1px;
   }