/* Luthuli Legacy Walk · animated fun-run route (recreation of the 2018 landscape layout). */
.route-chapter{--rm-gold:#f2b81f;--rm-white:#f4f6f7}
.route-map{position:relative;margin:34px 0 0;background:#02203a;border-radius:4px;overflow:hidden}
.route-map-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.route-map-scroll::-webkit-scrollbar{display:none}
.rm-svg{display:block;width:100%;height:auto;font-family:var(--site-font,Inter,system-ui,sans-serif)}
.rm-label{font-size:12.5px;font-weight:700;letter-spacing:.02em;fill:var(--rm-white);text-transform:none}
.rm-label-gold{fill:var(--rm-gold)}
.rm-label-soft{font-weight:600;font-size:12px}
.rm-label-map{font-size:11.5px;letter-spacing:.06em}
.rm-label-rail{font-size:11.5px;letter-spacing:.04em}
.rm-heading{font-size:25px;font-weight:800;font-stretch:80%;letter-spacing:.03em;fill:var(--rm-white)}
.rm-info-key{font-size:9.5px;font-weight:800;letter-spacing:.06em;fill:#e39a2d}
.rm-info-value{font-size:16px;font-weight:700;fill:var(--rm-white)}
.rm-sign-text{font-size:10.5px;font-weight:800;letter-spacing:.06em;fill:#fff}
.rm-pin-icon{transform-box:fill-box;transform-origin:50% 100%}
.rm-runner{opacity:0}
.route-map-bar{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:14px 0 0;font-size:11px;color:var(--muted,#6b7168)}
.route-map-bar .caption{margin:0;padding:0;border:0}
.route-map-actions{display:flex;gap:10px;align-items:center;flex-shrink:0}
.route-map-actions button{font:inherit;font-size:11px;font-weight:600;padding:9px 14px;border:1px solid var(--line,#d6d4c8);border-radius:20px;background:transparent;color:inherit;cursor:pointer}
.route-map-actions button:hover,.route-map-actions button:focus-visible{border-color:currentColor}
.route-map-actions button:disabled{opacity:.45;cursor:default}
.route-map-hint{display:none;font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted,#6b7168);padding:10px 0 0}

/* ---- initial (pre-play) state: everything hidden except the field ---- */
.route-map:not(.is-done) .rm-reveal{stroke-dasharray:1;stroke-dashoffset:1}
.route-map:not(.is-done) .rm-rail-line,.route-map:not(.is-done) .rm-river-band,.route-map:not(.is-done) .rm-river-line{stroke-dasharray:1;stroke-dashoffset:1}
.route-map:not(.is-done) .rm-rail-ties{opacity:0}
.route-map:not(.is-done) .rm-roads,.route-map:not(.is-done) .rm-title,.route-map:not(.is-done) .rm-label-map,.route-map:not(.is-done) .rm-label-rail,.route-map:not(.is-done) .rm-start-label,.route-map:not(.is-done) .rm-finish-label{opacity:0}
.route-map:not(.is-done) .rm-pin .rm-pin-icon{transform:scale(0)}
.route-map:not(.is-done) .rm-pin .rm-label{opacity:0}
.route-map:not(.is-done) .rm-sign{opacity:0}

/* ---- the sequence ---- */
.route-map.is-playing .rm-title{animation:rm-fade .6s ease-out 0s forwards}
.route-map.is-playing .rm-roads{animation:rm-fade 1s ease-out .3s forwards}
.route-map.is-playing .rm-rail-line{animation:rm-draw 1.5s cubic-bezier(.45,0,.35,1) .2s forwards}
.route-map.is-playing .rm-rail-ties{animation:rm-fade .8s ease-out 1.2s forwards}
.route-map.is-playing .rm-label-rail{animation:rm-fade .5s ease-out 1.5s forwards}
.route-map.is-playing .rm-river-band,.route-map.is-playing .rm-river-line{animation:rm-draw 1.8s cubic-bezier(.45,0,.35,1) .35s forwards}
.route-map.is-playing .rm-label-map{animation:rm-fade .5s ease-out 1.9s forwards}
.route-map.is-playing .rm-start-label,.route-map.is-playing .rm-finish-label{animation:rm-fade .5s ease-out var(--d) forwards}
.route-map.is-playing .rm-sign{animation:rm-pop .55s cubic-bezier(.2,1.4,.4,1) var(--d) forwards;transform-box:fill-box;transform-origin:50% 100%}
.route-map.is-playing .rm-reveal{animation:rm-draw 4.0s linear 0.9s forwards}
.route-map.is-playing .rm-pin .rm-pin-icon{animation:rm-pop .5s cubic-bezier(.2,1.4,.4,1) var(--d) forwards}
.route-map.is-playing .rm-pin .rm-label{animation:rm-fade .45s ease-out calc(var(--d) + .1s) forwards}
@supports (offset-path: path("M0,0")) {
 .route-map.is-playing .rm-runner{offset-path:path("M256.0,470.0L430.4,470.0Q440.0,470.0 447.5,464.0L448.0,463.6Q455.0,458.0 455.0,449.0L455.0,449.0Q455.0,440.0 454.6,431.0L445.6,223.0Q445.0,210.0 446.2,197.1L447.8,177.9Q449.0,165.0 453.4,152.8L453.6,152.2Q458.0,140.0 463.6,128.3L464.4,126.7Q470.0,115.0 479.9,106.6L484.2,103.0Q490.0,98.0 497.5,96.5L497.5,96.5Q505.0,95.0 512.6,95.0L530.6,95.0Q538.0,95.0 543.0,100.5L543.0,100.5Q548.0,106.0 548.0,113.4L548.0,192.7Q548.0,200.0 550.0,207.0L550.0,207.0Q552.0,214.0 557.9,218.3L564.5,223.3Q575.0,231.0 588.0,231.0L598.3,231.0Q604.0,231.0 607.5,235.5L609.5,238.0Q611.0,240.0 611.0,242.5L611.0,242.5Q611.0,245.0 611.4,247.5L617.8,291.8Q619.0,300.0 623.5,307.0L623.5,307.0Q628.0,314.0 636.3,314.0L677.1,314.0Q686.0,314.0 691.5,307.0L691.5,307.0Q697.0,300.0 698.6,291.2L702.7,267.8Q705.0,255.0 707.7,242.3L710.2,230.4Q712.0,222.0 713.5,213.5L713.5,213.5Q715.0,205.0 715.0,196.4L715.0,106.9Q715.0,100.0 718.5,94.0L718.5,94.0Q722.0,88.0 728.9,88.0L776.8,88.0Q780.0,88.0 783.0,89.0L783.0,89.0Q786.0,90.0 788.6,91.8L795.5,96.5Q805.0,103.0 816.5,103.0L816.5,103.0Q828.0,103.0 835.9,94.7L848.0,82.0");offset-rotate:0deg;animation:rm-run 4.0s linear 0.9s forwards}
}
@keyframes rm-draw{to{stroke-dashoffset:0}}
@keyframes rm-fade{to{opacity:1}}
@keyframes rm-pop{0%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.18)}100%{opacity:1;transform:scale(1)}}
@keyframes rm-run{0%{offset-distance:0%;opacity:0}4%{opacity:1}96%{opacity:1}100%{offset-distance:100%;opacity:0}}

/* ---- reduced motion or finished: show the full map ---- */
@media (prefers-reduced-motion: reduce){
 .route-map .rm-reveal,.route-map .rm-rail-line,.route-map .rm-river-band,.route-map .rm-river-line{stroke-dashoffset:0!important;animation:none!important}
 .route-map .rm-rail-ties,.route-map .rm-roads,.route-map .rm-title,.route-map .rm-label-map,.route-map .rm-label-rail,.route-map .rm-start-label,.route-map .rm-finish-label,.route-map .rm-pin .rm-label,.route-map .rm-sign{opacity:1!important;animation:none!important}
 .route-map .rm-pin .rm-pin-icon{transform:none!important;animation:none!important}
 .route-map .rm-runner{display:none}
}
@media (max-width:700px){
 .route-map-scroll{scroll-snap-type:x proximity}
 .rm-svg{width:200%;min-width:860px}
 .route-map-hint{display:block}
 .route-map-bar{flex-direction:column;align-items:flex-start}
}

/* Narrow screens: the map turns 90° clockwise into a portrait frame, so the whole route
   fits without sideways scrolling. Copy, pins and signs turn back upright where they land
   (the individual `rotate` property composes with their existing animations). */
@media (max-width:734px){
 .route-map-scroll{position:relative;overflow:hidden;aspect-ratio:600/1050;container-type:inline-size;scroll-snap-type:none}
 .route-map-scroll .rm-svg{position:absolute;left:50%;top:100cqw;width:200cqw;min-width:0;height:100cqw;max-width:none;transform:translate(-50%,-50%) rotate(90deg)}
 .route-map .rm-label,.route-map .rm-title{transform-box:fill-box;transform-origin:center;rotate:-90deg}
 .route-map .rm-pin-icon,.route-map .rm-sign{rotate:-90deg}
 .route-map .rm-label{font-size:14.5px}
 .route-map .rm-heading{font-size:24px}
 .route-map-hint{display:none!important}
}

/* One-line labels sometimes cross the route or rail: a soft halo in the map's own colour
   parts the line around the words, as map apps do (it reads as shade, not as an outline). */
.route-map .rm-label{paint-order:stroke fill;stroke:#10304b;stroke-opacity:.92;stroke-width:5px;stroke-linejoin:round}