.route-story{--pin:22px;--rail:30px;position:relative}.route-svg{pointer-events:none;opacity:0;width:100%;height:100%;transition:opacity .4s;position:absolute;inset:0;overflow:visible}.route-story.is-drawn .route-svg{opacity:1}.route-track,.route-progress{fill:none;stroke-linecap:round;stroke-linejoin:round}.route-track{stroke:var(--hairline);stroke-width:3px;stroke-dasharray:2 9}.route-progress{stroke:var(--plum);stroke-width:4px}.route-dude{z-index:3;background:var(--saffron);width:22px;height:22px;box-shadow:0 0 0 5px var(--bg,var(--cream)), 0 6px 16px #2a12224d;opacity:0;will-change:transform;border-radius:50%;margin:-11px 0 0 -11px;position:absolute;top:0;left:0}.route-story.is-drawn .route-dude{opacity:1}.route-stops{gap:clamp(56px,9vw,120px);margin:0;padding:0;list-style:none;display:grid;position:relative}.route-stops:before{content:"";top:12px;bottom:12px;border-inline-start:3px dotted var(--plum);position:absolute;inset-inline-start:calc(var(--rail) / 2 - 1.5px)}.route-story.is-drawn .route-stops:before{display:none}.route-stop{gap:12px;max-width:34rem;padding-inline-start:calc(var(--rail) + clamp(22px, 4vw, 48px));display:grid;position:relative}.route-pin{inset-inline-start:calc(var(--rail) / 2 - var(--pin) / 2);width:var(--pin);height:var(--pin);background:var(--bg,var(--cream));box-shadow:inset 0 0 0 3px var(--plum);z-index:2;border-radius:50%;transition:background-color .3s,box-shadow .3s;position:absolute;top:13px}.route-stop.is-reached .route-pin{background:var(--bougainvillea);box-shadow:inset 0 0 0 3px var(--bougainvillea)}.route-stop h3{font-size:var(--step-2);letter-spacing:-.03em}.route-stop p{color:var(--fg-soft);max-width:32ch}.route-story.is-drawn .route-stop:not(.is-reached) .plaque{color:var(--bougainvillea);box-shadow:inset 0 0 0 2px var(--bougainvillea);background:0 0}.route-story.is-drawn .route-stop.is-reached .plaque{transform:translateY(-2px)}.plaque-list,.plaque-home{background:var(--plum);box-shadow:inset 0 0 0 2px var(--plum), inset 0 0 0 4px #fbf3ea80}.route-story.is-drawn .route-stop:not(.is-reached) .plaque-list,.route-story.is-drawn .route-stop:not(.is-reached) .plaque-home{color:var(--plum);box-shadow:inset 0 0 0 2px var(--plum)}.route-arrival{transform-origin:20% 80%;width:clamp(84px,10vw,120px);height:auto;margin-top:8px}.route-story.is-drawn .route-arrival{opacity:0;transition:opacity .5s var(--ease-out), transform .6s var(--ease-out);transform:scale(.6)}.route-story.is-drawn.is-home .route-arrival{opacity:1;transform:none}.route-story.is-home .route-dude{box-shadow:0 0 0 5px var(--bg,var(--cream)), 0 0 0 10px #ffb01f59}