/* The thread: the orange line from the hero carries on behind the page and
   weaves between the sections as you scroll. Drawn by thread.js. */

.thread { position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; overflow: visible; }
/* Full orange where it leaves the picture, then a quiet line the rest of the way (gradient set in thread.js). */
.thread path { fill: none; stroke: url(#thread-fade); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.thread stop { stop-color: var(--accent); }

/* Page content sits above the line, so it runs behind text and cards. */
main, .footer { position: relative; z-index: 1; }