/* My path: the road. Linked only when cv-text.md has a path section; tokens only. */
.pv .yr{display:block;font-family:var(--font-mono);font-size:var(--size-caption);font-weight:var(--weight-medium);letter-spacing:.04em;color:var(--text-2);margin-bottom:var(--space-1)}
.pv .ln{color:var(--text-1)}
.pv p{margin:0;max-width:62ch}
.pv .mk svg{width:var(--space-4);height:var(--space-4);fill:none;stroke:currentColor;stroke-width:var(--stroke-icon);stroke-linecap:round;stroke-linejoin:round}
.pv-cover{display:block;line-height:0;border-radius:3px;box-shadow:var(--shadow-card)}
.pv-cover .cov{display:block;height:auto;border-radius:3px}
@media (hover:hover){.pv-cover:hover{box-shadow:var(--depth-raised)}}

/* The road: the stops before the bend in grey, the bend with an optional book cover, then the road in the accent to now.
   A parallel track (e.g. a degree) runs beside the road from its start stop through the bend to its end stop. */
.road{margin:0;--xa:var(--space-5);--xb:42%;--lane:calc(var(--space-5) - 2px);--k-trk:var(--k-school);--txt:calc(var(--lane) + var(--space-6) + var(--space-1))}
.road .yr{display:inline-block;padding:2px var(--space-2);margin-bottom:var(--space-2);border-radius:var(--radius-chip);background:var(--surface-2);color:var(--text-2)}
.road .ln{display:block}
.road .ln::first-letter{text-transform:uppercase}
.leg{position:relative;display:grid;gap:var(--space-6);padding:var(--space-4) 0}
.leg-a{--x:var(--xa)}
.leg-b{--x:var(--xb);padding:var(--space-6) 0 0}
.leg::before{content:"";position:absolute;left:calc(var(--x) - 1.5px);top:0;bottom:0;width:3px;border-radius:var(--radius-chip);
  background:color-mix(in srgb,var(--text-3) 55%,transparent)}
.leg-b::before{left:calc(var(--x) - 2px);width:4px;background:var(--accent)}
.st{position:relative;padding-left:calc(var(--x) + var(--txt))}
.st .mk{position:absolute;z-index:1;left:var(--x);top:0;transform:translateX(-50%);display:grid;place-items:center;width:var(--space-6);height:var(--space-6);
  border-radius:var(--radius-chip);background:var(--surface-1);box-shadow:var(--shadow-card);color:var(--text-2)}
.st .mk:empty{top:var(--space-1);width:var(--space-4);height:var(--space-4);background:var(--ground);box-shadow:0 0 0 3px var(--accent)}
/* the parallel track */
.st.trk-start .mk,.st.trk-end .mk{left:calc(var(--x) + var(--lane));color:var(--k-trk);box-shadow:var(--shadow-card),inset 0 0 0 2px var(--k-trk)}
.st.trk-start::before,.st.trk::before{content:"";position:absolute;left:calc(var(--x) + var(--lane) - 1.5px);width:3px;background:var(--k-trk);border-radius:var(--radius-chip)}
.st.trk-start::before{top:var(--space-4);bottom:calc(-1 * var(--space-4))}
.st.trk::before{top:calc(-1 * var(--space-6));bottom:0}
.st.trk-end::before{bottom:auto;height:calc(var(--space-6) + var(--space-4))}
.trk-name{display:block;font-weight:var(--weight-strong);color:var(--text-1);margin-bottom:var(--space-2)}
.trk-name::first-letter{text-transform:uppercase}
.st.trk-start .yr,.st.trk-end .yr{background:color-mix(in srgb,var(--k-trk) 16%,var(--surface-1));color:var(--text-1)}
.st.trk-start .trk-name{font-size:var(--size-heading);line-height:var(--line-height-heading)}
.st.trk-end .trk-name{margin:0}
.st.now .mk{top:0;width:var(--space-5);height:var(--space-5);background:var(--accent);box-shadow:0 0 0 6px var(--accent-soft)}
.st.now::after{content:"";position:absolute;left:calc(var(--x) - 3px);top:var(--space-5);bottom:0;width:6px;background:var(--ground)}
.st.now .yr{background:var(--accent-soft);color:var(--accent)}
.st.now .ln{font-size:var(--size-heading);line-height:var(--line-height-lead)}
/* named blocks of the last stop, in order: the last one carries the accent */
.builds{display:flex;align-items:stretch;gap:var(--space-2);margin-top:var(--space-4);max-width:62ch}
.bd{display:flex;flex-direction:column;gap:2px;padding:var(--space-3) var(--space-4);border-radius:var(--radius-card);background:var(--surface-1);box-shadow:var(--shadow-card)}
.bd-name{font-weight:var(--weight-strong);color:var(--text-1)}
.bd-when{font-family:var(--font-mono);font-size:var(--size-caption);color:var(--text-2);white-space:nowrap}
.bd.bd-now{flex:1;box-shadow:var(--shadow-card),inset 0 0 0 2px var(--accent)}
.bd.bd-now .bd-name{color:var(--accent);font-size:var(--size-heading)}
.bd-arrow{align-self:center;width:var(--space-5);height:2px;background:var(--accent);position:relative;flex:none}
.bd-arrow::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:6px solid var(--accent);border-right:0}
/* side stops: a project card with chips, and small side stops */
.spur{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}
.spur-card{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-3) var(--space-4);border-radius:var(--radius-card);background:var(--surface-1);
  box-shadow:var(--shadow-card);font-size:var(--size-body);color:var(--text-2);max-width:36ch}
.spur-card .yr{margin:0;align-self:flex-start}
.st.now .spur-card .ln{font-size:var(--size-body);line-height:var(--line-height-lead);color:var(--text-1)}
.spur-name{font-weight:var(--weight-strong);color:var(--text-1)}
.spur-tags{display:flex;flex-wrap:wrap;gap:var(--space-1)}
.spur-tags li{padding:2px var(--space-2);border-radius:var(--radius-chip);background:var(--surface-2);color:var(--text-2);font-size:var(--size-caption)}
/* the bend: the turn, with the real cover of a book, whole */
.bend{position:relative;display:flex;align-items:center;min-height:calc(var(--space-10) + var(--space-9))}
.bend-line,.bend-lane{position:absolute;left:var(--xa);top:0;width:calc(var(--xb) - var(--xa));height:100%;overflow:visible}
.bend-lane{left:calc(var(--xa) + var(--lane))}
.bend-line path{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round}
.bend-lane path{fill:none;stroke:var(--k-trk);stroke-width:3;stroke-linecap:round}
.bend-cover{position:absolute;z-index:1;left:calc((var(--xa) + var(--xb)) / 2);top:50%;transform:translate(-50%,-50%);padding:var(--space-2);
  border-radius:var(--space-2);background:var(--surface-1);box-shadow:var(--depth-raised),0 0 0 var(--space-2) var(--accent-soft)}
.bend-cover .pv-cover{box-shadow:none}
.bend-cover .cov{width:calc(var(--space-9) + 4px)}
.pv .bend-text{margin-left:calc(var(--xb) + var(--txt))}
.bend-text .yr{background:var(--accent-soft);color:var(--accent)}
.bend-text .ln{font-size:var(--size-heading);font-weight:var(--weight-strong);line-height:var(--line-height-lead)}
.pv .road-note{margin:var(--space-6) 0 0 calc(var(--xb) + var(--txt));padding-top:var(--space-4);border-top:1px solid var(--line);color:var(--text-2);font-size:var(--size-body)}
@media (max-width:600px){
  .road{--xa:var(--space-4);--xb:calc(var(--space-7) + var(--space-2));--lane:var(--space-4);--txt:calc(var(--lane) + var(--space-5))}
  .bend{min-height:calc(var(--space-10) + var(--space-6))}
  .bend-cover{padding:var(--space-1)}
  .bend-cover .cov{width:calc(var(--space-8) + var(--space-1))}
  .builds{flex-wrap:wrap}
  .bd-arrow{display:none}
}