/* ============================================================
   Mountain of Minds — lineage pages (Machine Utopia, Infinite Reflections)
   Loads after site.css and only adds to it.
   A lineage is drawn as a thread with knobs on it, like the light
   bridges on the front page: lit knobs are open, hollow ones are to come.
   ============================================================ */

/* Infinite Reflections takes a cooler, silvered accent (the mirror);
   Machine Utopia keeps the rust of the main site. */
body.ir{--accent:#4C6478}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body.ir{--accent:#8FA7BD}}
:root[data-theme="dark"] body.ir{--accent:#8FA7BD}

/* ---------- the thread ---------- */
.ways{list-style:none;margin:0 0 .4em;padding:0 0 0 30px;position:relative}
.ways::before{content:"";position:absolute;left:5px;top:16px;bottom:16px;width:1px;
  background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 35%,transparent))}
.way{position:relative;padding:12px 0 14px}
.way::before{content:"";position:absolute;left:-30px;top:20px;width:11px;height:11px;border-radius:50%;
  background:var(--paper);border:1px solid var(--accent)}
.way.open::before{background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
.way .state{display:block;font:500 12.5px/1.4 var(--font);letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);margin:0 0 4px}
.way.open .state{color:var(--accent)}
.way h3{font:500 clamp(23px,1.7vw,27px)/1.15 var(--display);letter-spacing:.01em;margin:0}
.way.soon h3{color:var(--ink2)}
.way p{margin:.35em 0 0;color:var(--ink2)}
.way .go{display:inline-block;margin-top:.6em}

/* ---------- reflections (blog index) ---------- */
.posts{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.post{padding:22px 0 24px;border-bottom:1px solid var(--rule)}
.post time{display:block;font:500 12.5px/1.4 var(--font);letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);margin:0 0 6px}
.post h3{font:500 clamp(24px,1.9vw,30px)/1.12 var(--display);letter-spacing:.01em;margin:0}
.post h3 a{background-size:0 1px}
.post h3 a:hover{background-size:100% 1px}
.post p{margin:.45em 0 0;color:var(--ink2)}
.empty{color:var(--ink2);font-style:italic}

/* single reflection */
.post-meta{font-size:14.5px;color:var(--ink2)}
.prose blockquote{margin:1.4em 0;padding:0 0 0 22px;border-left:1px solid var(--accent);color:var(--ink2)}

/* ---------- the other path ---------- */
.crossing{margin-top:clamp(56px,9vh,96px);padding-top:26px;border-top:1px solid var(--rule)}
.crossing .label{display:block;font:500 13px/1.4 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin:0 0 8px}
.crossing p{margin:.5em 0 0;color:var(--ink2)}
.prose .crossing a.cta{background:linear-gradient(currentColor,currentColor) left bottom/100% 1px no-repeat;padding:6px 0 7px}