@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#272b28;background:#f7f6f2;font-synthesis:none;--orange:#fc5200;--muted:#747770}*{box-sizing:border-box}body{margin:0}a{color:inherit}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}button:focus-visible,a:focus-visible{outline:3px solid #2584e5;outline-offset:5px}button,a{-webkit-tap-highlight-color:transparent}#journey{height:380vh}.stage{height:100svh;min-height:690px;position:sticky;top:0;overflow:hidden}header{position:absolute;top:0;left:0;right:0;height:104px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;z-index:3;font-size:12px}.wordmark{text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.1em}.wordmark span{color:var(--orange);margin-left:8px;font-size:21px}.header-note{color:var(--muted);font-size:10px;letter-spacing:.18em}header button{font-size:12px}.intro{position:absolute;left:8%;top:26%;width:31%;max-width:425px;z-index:2}.eyebrow{font-size:10px;font-weight:500;letter-spacing:.13em;display:flex;align-items:center;gap:8px;margin:0 0 24px}.eyebrow>span{width:5px;height:5px;border-radius:50%;background:var(--orange)}h1{font-family:Manrope,sans-serif;font-size:clamp(55px,6.1vw,92px);letter-spacing:-.065em;font-weight:500;line-height:1.06;margin:0 0 27px}.orange{color:var(--orange)}.intro p{font-size:16px;line-height:1.8;max-width:335px;margin:0 0 15px;color:#636760}.instruction{display:flex;gap:14px;font-size:12px;line-height:1.7;margin-top:31px;color:var(--muted)}.scroll-arrow{font-size:26px;color:#333}.counter{margin-top:34px;display:flex;align-items:center;gap:13px;font-size:10px;letter-spacing:.12em;color:var(--muted)}#count{font-size:19px;letter-spacing:-.02em;color:#30352e}.counter-line{height:1px;width:34px;background:#bebfb8}.map-area{position:absolute;right:2%;top:9%;width:58%;height:84%;background-image:radial-gradient(#c8c8bf 0.7px,transparent .7px);background-size:22px 22px;mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent)}.map-wrap{position:relative;height:100%;width:100%}#map{width:100%;height:100%;overflow:visible}#route,#routeHalo{fill:none;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}#route{stroke:var(--orange);stroke-width:3.5}#routeHalo{stroke:#f7f6f2;stroke-width:8}#leaders line{stroke:#999b8f;stroke-width:1;stroke-dasharray:2 3}#start circle{fill:#f7f6f2;stroke:#414b40;stroke-width:2}#finish circle{fill:#414b40;stroke:#f7f6f2;stroke-width:2}#start text,#finish text{font-size:10px;letter-spacing:1.2px;fill:#626b5e}.halo{fill:#2584e522}.dot{fill:#2584e5;stroke:#fff;stroke-width:3}.moment{position:absolute;transform:translate(-50%,-50%) rotate(var(--tilt));padding:5px 5px 0;background:#fff;width:108px;box-shadow:0 3px 10px #252b251c,0 15px 35px #252b2510;border:1px solid #e0e1db;border-radius:3px;transition:transform .2s,box-shadow .2s;z-index:2}.moment:hover,.moment:focus-visible,.moment.active{transform:translate(-50%,-50%) rotate(0) scale(1.07);box-shadow:0 4px 17px #30382e30;z-index:4}.moment.active{border-color:#2584e5}.photo{background-image:url('moments.png');background-size:500% auto;background-position:var(--photo-position) center;background-repeat:no-repeat}.moment .photo{width:100%;aspect-ratio:1}.moment-label{display:flex;justify-content:space-between;align-items:center;height:25px;font-size:9px;letter-spacing:.025em}.moment-label b{font-weight:500;color:#8c9187;font-size:9px}.map-caption{position:absolute;bottom:2%;left:17%;right:12%;display:flex;justify-content:space-between;gap:15px;font-size:9px;letter-spacing:.1em;color:#93988d;pointer-events:none}footer{position:absolute;bottom:28px;left:5%;right:5%;display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:.12em;color:#85897f}footer button{font-size:11px;letter-spacing:0}.progress-track{height:2px;width:110px;background:#dedfd7}#fill{height:100%;background:var(--orange);width:0}dialog{padding:0;border:0;border-radius:7px;width:min(560px,calc(100% - 32px));max-height:90svh;background:#fff;color:#272b28;box-shadow:0 20px 90px #23292135;overflow:auto}dialog::backdrop{background:#1d251e50;backdrop-filter:blur(7px)}.modal-photo{height:300px}.modal-copy{padding:30px 36px}.modal-copy .eyebrow{color:#797e74;margin-bottom:14px}h2{font-family:Manrope,sans-serif;font-weight:500;letter-spacing:-.045em;font-size:35px;line-height:1.15;margin:0 0 18px}.modal-copy>p:not(.eyebrow):not(.sample){font-size:16px;line-height:1.8;color:#62675f}.sample{font-size:9px;letter-spacing:.1em;color:#92988c;margin-top:24px}.close{position:absolute;z-index:2;right:13px;top:13px;width:35px;height:35px;border-radius:50%;background:#fff;font-size:24px;box-shadow:0 2px 8px #0001}.modal-nav{border-top:1px solid #e6e8e0;margin-top:24px;padding-top:19px;display:flex;justify-content:space-between;align-items:center;font-size:11px}.modal-nav button{font-size:12px;padding:8px 0}.modal-nav button:disabled{opacity:.3;cursor:default}.modal-copy>a{font-size:13px;text-underline-offset:4px}.skip{position:fixed;top:-90px;z-index:10;background:white;padding:15px}.skip:focus{top:0}
@media(min-width:1500px){.map-area{right:7%;width:51%}}
@media(max-width:760px){.stage{min-height:760px}header{height:64px;padding:0 6%}.header-note{display:none}.wordmark{font-size:11px}header button{font-size:10px}.map-area{top:7%;height:64%;width:100%;right:0;mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 93%,transparent)}.intro{left:8%;top:72%;width:84%;max-width:none}.intro>.eyebrow{display:none}h1{font-size:39px;line-height:1.08;margin-bottom:12px;letter-spacing:-.055em}h1 br{display:none}.intro p{font-size:13px;line-height:1.6;max-width:100%;margin-bottom:8px}.instruction{font-size:10px;margin-top:12px;gap:9px}.instruction br{display:none}.scroll-arrow{font-size:18px}.counter{position:absolute;right:0;bottom:2px;margin:0;font-size:8px}.counter-line{width:17px}#count{font-size:14px}.instruction{max-width:65%}.moment{width:75px;padding:4px 4px 0}.moment-label{height:20px;font-size:8px}.moment-label b{font-size:8px}.map-caption{display:none}footer{bottom:18px;left:8%;right:8%;font-size:8px}footer .progress-track{width:65px}footer>span{display:none}footer button{font-size:10px}.modal-photo{height:260px}.modal-copy{padding:25px}.modal-copy h2{font-size:29px}.modal-copy>p:not(.eyebrow):not(.sample){font-size:15px}}
@media(prefers-reduced-motion:reduce){.moment{transition:none}}

html{scrollbar-gutter:stable}

/* Keep the progress indicator centred after simplifying the footer. */
footer{justify-content:flex-end}footer .progress-track{position:absolute;left:50%;transform:translateX(-50%)}
@media(max-width:760px){footer .progress-track{left:0;transform:none}}

@media(max-width:760px){.map-area{height:59%}.intro{top:66%}.intro p{font-size:13px;line-height:1.6}h1{margin-bottom:14px}}

/* Charcoal terrain: elevation contours and a quiet, dashed journey. */
:root{color:#e8e7e2;background:#17191b;--orange:#d8cdb8;--muted:#969a9b;color-scheme:dark}
.stage{background:radial-gradient(ellipse at 72% 45%,#242729 0%,#1b1e20 39%,#17191b 76%)}
.intro p{color:#a8abad}.wordmark{color:#e8e7e2}.map-area{background:none;mask-image:linear-gradient(to bottom,transparent,#000 7%,#000 94%,transparent);right:0;width:62%;top:7%;height:86%}
#terrain path{fill:none;stroke:#b4babd;stroke-width:.85;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;opacity:.24}
#terrain .major{stroke:#d1d4d2;stroke-width:1.15;opacity:.38}
#route{stroke:#C5E86C;stroke-width:2.5;stroke-dasharray:4 7;stroke-linecap:round}
#routeHalo{stroke:#1b1e20;stroke-width:6;opacity:.75}
#leaders line{stroke:#a0a6a7;opacity:.55;stroke-dasharray:2 5}
#start circle{fill:#202326;stroke:#b9c0c0}#finish circle{fill:#dcd7ca;stroke:#25292b}
#start text,#finish text{fill:#aeb4b4;letter-spacing:1.5px}
.halo{fill:#C5E86C22}.dot{fill:#C5E86C;stroke:#ecf7d5;stroke-width:2.5}
.moment{background:#292d30;border-color:#464c50;box-shadow:0 6px 20px #0006,0 18px 38px #0003;color:#e6e8e5;width:99px}
.moment .photo{filter:saturate(.56) brightness(.83)}.moment:hover .photo,.moment.active .photo{filter:saturate(.85) brightness(1)}
.moment-label b{color:#9ca6a9}.moment.active{border-color:#a1bed1}.moment:hover,.moment:focus-visible,.moment.active{box-shadow:0 5px 25px #0008}
.map-caption{color:#7d878b;pointer-events:auto;font-size:9px;left:14%;right:9%;bottom:0}.map-caption a{text-decoration:none}.map-caption a:hover{text-decoration:underline}
footer{color:#90989b}.progress-track{background:#383f43}#fill{background:#c6c4b9}
dialog{background:#24282b;color:#edece7;box-shadow:0 20px 100px #0009}dialog::backdrop{background:#080b0dcc}
.close{background:#2b3034;color:#fff}.modal-copy>p:not(.eyebrow):not(.sample){color:#b4bdc0}.modal-copy .eyebrow{color:#a5afb4}.sample{color:#919b9f}.modal-nav{border-color:#41484c}.skip{background:#252a2d}
@media(min-width:1500px){.map-area{right:3%;width:59%}}
@media(max-width:760px){.map-area{width:110%;right:-5%;top:6%;height:60%}.moment{width:69px}.intro{top:66%}.map-caption{display:none}#terrain path{stroke-width:.65;opacity:.3}#terrain .major{stroke-width:.9;opacity:.44}#route{stroke-width:2;stroke-dasharray:3 5}}

#terrain path{opacity:.34}#terrain .major{opacity:.52}.map-caption{opacity:.8;bottom:3%}

/* Cartographic moment labels and summit markers. */
.moment{width:max-content;max-width:160px;min-height:32px;display:flex;align-items:center;gap:9px;padding:7px 10px;transform:translate(-50%,-50%);border:1px solid #555f65;border-radius:1px;background:#242a2e;box-shadow:none;color:#e3e9e9;text-align:left;transition:background .18s,border-color .18s;z-index:3}
.moment:hover,.moment:focus-visible,.moment.active{transform:translate(-50%,-50%);box-shadow:none;background:#303a27;border-color:#C5E86C}
.moment-number{font-family:monospace;font-size:11px;color:#aab3b6;letter-spacing:.04em}.moment-name{font-size:11px;letter-spacing:.025em;white-space:nowrap}
.route-marker{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:36px;height:36px;padding:8px;z-index:4;border:0;background:transparent}
.route-marker svg{width:20px;height:20px;overflow:visible}.route-marker path{fill:#d9e1e2;stroke:#171d21;stroke-width:2;stroke-linejoin:round}
.route-marker:hover path,.route-marker:focus-visible path,.route-marker.active path{fill:#C5E86C;stroke:#ecf7d5;stroke-width:1}
#leaders line{stroke:#9aaab4;stroke-dasharray:none;stroke-width:.8;opacity:.72}
@media(max-width:760px){.moment{padding:6px 7px;gap:6px;min-height:29px;max-width:125px}.moment-name{font-size:10px}.moment-number{font-size:10px}.route-marker{width:34px;height:34px;padding:8px}.route-marker svg{width:17px;height:17px}}

@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/instrument-serif.ttf') format('truetype')}
h1,h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-.02em}
h1{font-size:clamp(66px,7.2vw,108px);line-height:.98}h2{font-size:43px;line-height:1.08}
@media(max-width:760px){h1{font-size:49px;line-height:1}.modal-copy h2{font-size:36px}}

.moment.active .moment-number,.moment:hover .moment-number,.moment:focus-visible .moment-number{color:#C5E86C}
button:focus-visible,a:focus-visible{outline-color:#C5E86C}
#fill{background:#C5E86C}

/* Keep full journey names inside their labels, with an explicit open affordance. */
.moment{max-width:225px;min-height:36px}
.moment-name{min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.4}
.moment-number,.moment-plus{flex-shrink:0}
.moment-plus{margin-left:auto;padding-left:3px;color:#C5E86C;font-size:18px;line-height:1;font-weight:400}
@media(max-width:760px){.moment{max-width:150px;min-height:36px}.moment-plus{font-size:16px}}

.linkedin-link{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:-11px;color:#a8abad;text-decoration:none;border-radius:3px;transition:color .18s}
.linkedin-link:hover,.linkedin-link:focus-visible{color:#e8e7e2}
.linkedin-link:focus-visible{outline:2px solid #a8abad;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.linkedin-link{transition:none}}
.linkedin-mobile{display:none}
#momentDialog #modalPhoto.original-photo{height:auto;aspect-ratio:var(--image-ratio,766/401);background-size:contain;background-position:center;background-color:#17191b}
#modalText{white-space:pre-line}
#chapterCopy>p{white-space:pre-line}
#modalText article{white-space:normal;font-size:16px;line-height:1.85;color:#b4bdc0}
#modalText article p{margin:0 0 1.2em}
@media(max-width:760px){#modalText article{font-size:15px}#chapterCopy>p{line-height:1.5}}
#chapterCopy{min-height:360px}
.intro.is-chapter h1{font-size:clamp(46px,5vw,74px);line-height:1.04;overflow-wrap:normal}
#exploreChapter{display:flex;align-items:center;gap:7px;min-height:44px;padding:0;color:#e8e7e2;font-size:13px;text-align:left;text-decoration:none;transition:color .18s}
#exploreChapter span{font-size:inherit;line-height:1.4}
#exploreChapter[hidden]{display:none}
#exploreChapter:hover,#exploreChapter:focus-visible{color:#F28DA8;text-decoration:none}
#exploreChapter:hover .read-more-text,#exploreChapter:focus-visible .read-more-text{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
#exploreChapter:focus-visible{outline-color:#F28DA8}
.intro.is-chapter>.linkedin-link{margin-top:12px}
@media(max-width:760px){
 #chapterCopy{min-height:0}
 .intro.is-chapter #chapterCopy{min-height:155px}
 .intro.is-chapter h1{font-size:36px;line-height:1.05;margin-bottom:12px}
 #exploreChapter{font-size:12px}
}
#momentDialog #modalLabel{display:none}
#modalProjectLink{display:inline-flex;align-items:center;min-height:44px;color:#e8e7e2;text-decoration:underline;text-underline-offset:5px}
#modalProjectLink:hover{color:#F28DA8}
#modalProjectLink[hidden]{display:none}
#modalVideo{display:block;width:100%;max-height:60svh;object-fit:contain;background:#111}
#modalVideo[hidden],#modalPhoto[hidden]{display:none}
/* A spacious chapter on desktop, an edge-to-edge reading panel on mobile. */
#momentDialog{width:min(760px,calc(100% - 64px));max-height:90svh;overflow:hidden}
.moment-content{max-height:90svh;overflow-y:auto;overscroll-behavior:contain}
#momentDialog .modal-photo{height:340px}
#momentDialog .modal-copy{padding:36px 48px 40px;max-width:680px;margin:auto}
#momentDialog .modal-copy>p:not(.eyebrow):not(.sample){line-height:1.85}
#momentDialog .close{width:44px;height:44px;right:16px;top:16px;background:#24282bf2;border:1px solid #596064;z-index:5}
#momentDialog .modal-nav button{min-height:44px;padding:10px 0}
@media(max-width:760px){
 #momentDialog{width:100%;height:100dvh;max-height:100dvh;max-width:100%;margin:0;border-radius:0}
 .moment-content{height:100%;max-height:none;padding-bottom:env(safe-area-inset-bottom)}
 #momentDialog .modal-photo{height:clamp(240px,38svh,360px)}
 #momentDialog .modal-copy{padding:28px 24px 32px}
 #momentDialog .close{top:calc(12px + env(safe-area-inset-top));right:12px}
 #momentDialog .modal-copy h2{font-size:40px}
}
.moment.active,.moment:hover,.moment:focus-visible{border-color:#F28DA8;background:#382a31}
.moment.active .moment-number,.moment:hover .moment-number,.moment:focus-visible .moment-number,
.moment.active .moment-plus,.moment:hover .moment-plus,.moment:focus-visible .moment-plus{color:#F28DA8}
.route-marker.active path,.route-marker:hover path,.route-marker:focus-visible path{fill:#F28DA8;stroke:#ffe0e9}
.moment:focus-visible,.route-marker:focus-visible{outline-color:#F28DA8}
@media(max-width:760px){
 .intro .linkedin-link,#restart{display:none}
 .linkedin-mobile{display:inline-flex;margin:0 -11px 0 0}
}