/* V7 QUIET RED — red is rare and thin: 1px threads only in five places. Everything else stays cream hairline. */
:root { --red: #E8372C; }
/* 1. scroll spine (functional, hidden over hero) */
.hd::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: calc(var(--sp, 0) * 100%); background: var(--red); } .hd.dark::after { opacity: 0; }
/* 2. a single vertical thread from the hero bridge into Selected Work */
#work::before { background: linear-gradient(var(--red), var(--red)) calc(max(var(--gut), (100vw - var(--max)) / 2 + var(--gut))) 100% / 1px 100% no-repeat, linear-gradient(#FFFFFF, var(--paper)); }
/* 3. the two indexes (Works, Services): top rule only; active/hover row gets a thin red underline */
.wh-idx, .sv-list { border-top: 1px solid var(--red); }
.sv-row.on { border-bottom-color: var(--red); } .wh-idx a:hover { border-bottom-color: var(--red); }
/* 4. timelines: line stays quiet cream, only the dot is red */
.tl i::after { background: var(--red); width: 6px; height: 6px; top: -3px; }
/* 5. motion progress */
.mo-bar { height: 2px; } .mo-bar i { background: var(--red); height: 2px; }
/* labels return to the quiet amber */
.kick.mute, .lb.mute { color: var(--amber); }