/* Home · the spine in the gutter (home-spine.js) */
.spine { position: absolute; z-index: 6; width: 24px; pointer-events: none; }
/* one segment per section: a hairline and a fill that scales from its top */
.sp-seg { position: absolute; left: 11px; width: 2px; border-radius: 2px; background: rgba(11,36,67,.12); overflow: hidden; }
.sp-seg.dark { background: rgba(255,255,255,.14); }
.sp-seg b { position: absolute; inset: 0; background: var(--blue); transform-origin: 50% 0; transform: scaleY(0); will-change: transform; }
.sp-seg.dark b { background: var(--sky); }
.sp-head { position: absolute; left: 12px; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); box-shadow: 0 0 0 4px rgba(46,111,216,.14), 0 0 16px 3px rgba(143,193,255,.7); will-change: transform; }
.sp-knot { position: absolute; left: 12px; width: 12px; height: 14px; margin: -7px 0 0 -6px; background: var(--cream); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: background 400ms, transform 500ms var(--ease-out); }
.sp-knot::after { content: ""; position: absolute; inset: 1.5px; background: #fff; clip-path: inherit; transition: background 400ms; }
.sp-knot.dark { background: rgba(255,255,255,.25); } .sp-knot.dark::after { background: var(--navy); }
.sp-knot.lit { background: var(--blue); transform: scale(1.25); } .sp-knot.lit::after { background: var(--blue); }
.sp-knot.dark.lit { background: var(--sky); } .sp-knot.dark.lit::after { background: var(--sky); }
@media (max-width: 1239px) { .spine { display: none !important; } }
html.menu-open .spine, html.profile-open .spine { display: none; }