/* About page v3: humanities note and the "Professional side quester" road (career.js). */

/* ---------- What I studied ---------- */
.studied{padding:25px 0 5px;border-top:1px solid var(--line);margin-top:30px}
.studied h2{font-size:1.8rem}
.studied>p{font-size:16px}
.study-list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.study-list li{display:flex;flex-direction:column;padding:10px 18px 11px;border:1.5px solid var(--plum);border-radius:999px;background:var(--surface);box-shadow:3px 4px 0 var(--rose-light)}
.study-list strong{font-family:var(--serif);font-weight:400;font-size:1.1rem;line-height:1.2}
.study-list span{font-size:12.5px;opacity:.78}

/* ---------- Road section ---------- */
.career{--road-ahead:#d7e1f6;--road-done:#eeb3c0;--road-line:#fff;margin-top:80px;padding-top:70px;border-top:1px solid var(--line)}
:root[data-theme="dark"] .career{--road-ahead:#283152;--road-done:#9d6a92;--road-line:#141a30}
.career-intro{max-width:620px;margin:0 auto 30px;text-align:center}
.career-intro h2{margin-bottom:16px}
.career-intro p{font-size:18px}
.career-road{position:relative;max-width:1060px;margin:0 auto;padding:150px 0 150px}
.road-svg{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.road-ahead,.road-done{fill:none;stroke-linecap:round;stroke-linejoin:round}
.road-ahead{stroke:var(--road-ahead)}
.road-done{stroke:var(--road-done)}
.road-dash{fill:none;stroke:var(--road-line);stroke-width:2;stroke-dasharray:9 11;stroke-linecap:round}
.road-stop{fill:var(--surface);stroke:var(--plum);stroke-width:3;transition:fill .3s ease,stroke .3s ease}
.road-stop.reached{fill:var(--cherry);stroke:var(--cherry)}

/* Stops: alternate either side of the road; the middle column belongs to the road. */
.career-stops{list-style:none;margin:0;padding:0;position:relative;z-index:1;display:grid;grid-template-columns:1fr minmax(270px,30%) 1fr}
.career-stop{grid-column:1;justify-self:end;width:min(100%,370px)}
.career-stop:nth-child(even){grid-column:3;justify-self:start}
/* One row per stop, so the two sides stagger down the road instead of pairing up. */
.career-stop:nth-child(1){grid-row:1}.career-stop:nth-child(2){grid-row:2}.career-stop:nth-child(3){grid-row:3}
.career-stop:nth-child(4){grid-row:4}.career-stop:nth-child(5){grid-row:5}.career-stop:nth-child(6){grid-row:6}
.career-stop+.career-stop{margin-top:-70px}
.stop-card{background:var(--surface);border:1.5px solid var(--plum);border-radius:18px;padding:22px 24px 20px;box-shadow:6px 7px 0 var(--rose-light)}
.career-stop:nth-child(odd) .stop-card{box-shadow:-6px 7px 0 var(--rose-light)}
.stop-when{font-family:var(--serif);font-size:1.45rem;line-height:1.2;color:var(--cherry);margin:0 0 8px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.stop-tag{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border:1px solid var(--plum);border-radius:999px;color:var(--plum)}
.stop-tag.is-now{background:var(--cherry);border-color:var(--cherry);color:var(--on-action)}
.stop-card h3{font-size:1.45rem;margin:0 0 4px}
.stop-where{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--plum);margin-bottom:12px}
.stop-card p{font-size:15.5px;line-height:1.6;margin-bottom:12px}
.stop-card p:last-child{margin-bottom:0}
.stop-learnt{background:var(--rose-light);border-radius:12px;padding:12px 15px}
.stop-learnt strong{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--plum);margin-bottom:3px}
.stop-card .text-link{font-size:15px}

/* Reveal: each stop wakes up as she reaches it (only once JS has drawn the road). */
.road-ready .career-stop{opacity:.22;transform:translateY(18px) scale(.98);transition:opacity .55s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.road-ready .career-stop.reached{opacity:1;transform:none}

/* ---------- Walker ---------- */
.walker{position:absolute;left:0;top:0;z-index:2;width:0;height:0;pointer-events:none;will-change:transform}
.walker-shadow{position:absolute;left:-23px;top:-7px;width:46px;height:12px;border-radius:50%;background:rgba(39,41,74,.2)}
.walker-body{position:absolute;left:-33px;bottom:-4px;width:66px;transform-origin:50% 100%}
.walker-body img{width:100%;height:auto;display:block;transition:transform .25s ease}
.walker.facing-left .walker-body img{transform:scaleX(-1)}
.walker.walking .walker-body{animation:walker-step .46s ease-in-out infinite}
.walker-bubble{position:absolute;left:44px;bottom:96px;white-space:nowrap;font-size:13px;font-weight:700;background:var(--surface);color:var(--ink);border:1.5px solid var(--plum);border-radius:14px 14px 14px 3px;padding:6px 12px;opacity:0;transform:translateY(6px) scale(.9);transform-origin:0 100%;transition:opacity .3s ease,transform .3s ease}
.walker.arrived .walker-bubble{opacity:1;transform:none}
@keyframes walker-step{0%,100%{transform:translateY(0) rotate(-3deg)}25%{transform:translateY(-6px) rotate(0)}50%{transform:translateY(0) rotate(3deg)}75%{transform:translateY(-6px) rotate(0)}}

/* ---------- Narrow road (set by career.js from the road's own width) ---------- */
.career-road.is-narrow{padding:110px 0 130px}
.is-narrow .career-stops{grid-template-columns:1fr;padding-left:78px}
.is-narrow .career-stop,.is-narrow .career-stop:nth-child(even){grid-column:1;grid-row:auto;justify-self:stretch;width:auto}
.is-narrow .career-stop+.career-stop{margin-top:26px}
.is-narrow .career-stop:nth-child(odd) .stop-card{box-shadow:5px 6px 0 var(--rose-light)}
.is-narrow .stop-card{padding:18px 18px 16px}
.is-narrow .walker-body{left:-23px;width:46px}
.is-narrow .walker-shadow{left:-16px;width:32px;height:9px;top:-5px}
.is-narrow .walker-bubble{display:none}

@media(max-width:760px){
  .career{margin-top:55px;padding-top:50px}
  .career-intro{text-align:left;margin-bottom:10px}
  .career-intro p{font-size:16px}
  .study-list li{padding:9px 15px}
}

@media(prefers-reduced-motion:reduce){
  .road-ready .career-stop{transition:none}
  .walker.walking .walker-body{animation:none}
  .walker-bubble{transition:none}
}