:root{color-scheme:light;--ink:#20241e;--paper:#f1eee4;--green:#237817;--muted:#666a5e}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 Arial,Helvetica,sans-serif}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:1px solid #a8a899;border-radius:3px;background:transparent;padding:11px 18px;color:var(--ink)}button:hover{background:#e3e4d5}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #c16b23;outline-offset:4px}.primary{background:var(--green);color:#fff;border-color:var(--green)}.primary:hover{background:#185b10}.site-header{padding:18px 4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #c4c3b8;background:#f5f2e9;gap:20px}.wordmark{font-size:28px;font-weight:900;letter-spacing:5px;line-height:1;text-decoration:none;color:var(--ink)}.wordmark span{display:block;font-size:8px;letter-spacing:5px;margin-top:6px}.header-tag,.demo-badge,.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700}.demo-badge{border:1px solid #a1a68e;padding:6px 10px;color:#505b46}.journey{max-width:1800px;margin:auto;background:#eee9db url('assets/desert-background-right.png') center bottom/100% 100% no-repeat;padding:32px 3.7% 30px;overflow:hidden}.hero-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.eyebrow{margin:0 0 10px;color:#626654}h1{font-family:Impact,'Arial Narrow',sans-serif;font-size:clamp(64px,7vw,116px);font-weight:900;letter-spacing:-2px;line-height:1;margin:0}.subtitle{letter-spacing:8px;font-size:18px;margin:8px 0 12px}.endpoints{letter-spacing:3px;font-size:12px;border-top:1px solid #a9a798;padding-top:12px;margin:0}.endpoints span{padding:0 12px}.hero-note{font-family:Georgia,serif;font-size:21px;line-height:1.7;margin-right:2%;color:#4d5146}.hero-note em{font-size:16px}.map-wrap{position:relative;margin-top:0}#map{display:block;width:100%;height:auto;overflow:hidden}.state{fill:#a8ab9d;fill-opacity:.17;stroke:#939986;stroke-opacity:.35;stroke-width:1}.state-label{font-size:12px;letter-spacing:2px;fill:#5d6354;opacity:.62}.route-base{fill:none;stroke:#7c8177;stroke-width:7;stroke-linecap:round}.route-done{fill:none;stroke:#2d861d;stroke-width:7;stroke-linecap:round}.marker{position:absolute;transform:translate(-50%,-50%);padding:0;background:transparent;border:0;min-width:44px;min-height:44px;display:grid;place-items:center;isolation:isolate}.marker:hover{background:transparent}.marker .dot{display:block;width:18px;height:18px;border-radius:50%;border:3px solid #fffaf0;background:#757a71;box-shadow:0 0 0 1px #7b8171}.marker.reached .dot{background:var(--green)}.marker .label{position:absolute;bottom:39px;white-space:nowrap;font-size:13px;font-weight:700;text-align:center;line-height:1.1;text-shadow:0 1px 5px #fff,0 -1px 5px #fff}.marker.below .label{top:39px;bottom:auto}.marker small{display:block;font-size:9px;font-weight:400;letter-spacing:1.5px;margin-top:4px}.marker:hover .dot,.marker:focus-visible .dot{box-shadow:0 0 0 5px #e1cda3}.journey-bottom{display:flex;justify-content:flex-end;align-items:center;gap:8%;padding:0 0 32px;min-height:155px}.quote{font:italic 28px/1.4 Georgia,serif;color:#f7f0de;text-shadow:0 2px 6px #211e17}.quote span{padding-left:30px}.progress-card{background:#f5f0e0ed;border:1px solid #a9a58e;border-radius:8px;padding:16px 25px;min-width:250px}.progress-card>div{display:flex;align-items:baseline;gap:3px}.progress-card strong{font-family:Impact,'Arial Narrow',sans-serif;color:#17560f;font-size:70px;line-height:1}.percent-sign{font-size:32px;color:#17560f}.complete-label{font-weight:700;font-size:14px;letter-spacing:3px;margin-left:10px}.progress-card p{margin:5px 0;color:#575d4e;font-size:14px;letter-spacing:1px}.progress-card>span{font-size:12px;color:#414837}.ride-strip{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 5%;background:#e6e9da;border-bottom:1px solid #c8cdbb}.ride-strip p{margin:0;font:22px Georgia,serif}.ride-strip .eyebrow{display:block;margin:0 0 5px}.ride-actions{display:flex;gap:10px}.ride-form{padding:24px 5%;border-bottom:1px solid #c4c3b8}.ride-form form{max-width:660px}.ride-form label{display:block;margin-bottom:8px;font-weight:bold}.ride-form form>div{display:flex;gap:10px;flex-wrap:wrap}.ride-form input{width:160px;padding:10px;border:1px solid #7c8271;background:#fffef7}.ride-form p{font-size:13px;color:var(--muted)}.milestones{padding:42px 5%}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:26px}h2{font:36px/1.15 Georgia,serif;margin:0}.section-heading>span{font-size:13px;white-space:nowrap;color:var(--muted)}.postcards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:8px 0 25px}.postcard{padding:10px 10px 14px;background:#fff7e6;border:1px solid #d9d1bf;box-shadow:0 5px 12px #403c2725;transform:rotate(-2deg);text-align:left;border-radius:0}.postcard:nth-child(even){transform:rotate(2deg)}.postcard:hover{background:#fff7e6;transform:rotate(0deg) translateY(-4px)}.postcard img{width:100%;display:block;aspect-ratio:1.5}.postcard.locked img{filter:blur(32px) grayscale(1);opacity:.18}.postcard.locked{cursor:not-allowed;overflow:hidden}.postcard.locked:hover{transform:rotate(-2deg)}.postcard.locked:nth-child(even):hover{transform:rotate(2deg)}.postcard h3{font:22px Georgia,serif;margin:12px 3px 5px}.postcard p{margin:0 3px;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#536047}.city-list{display:flex;flex-wrap:wrap;gap:8px;padding-top:20px}.city-list button{font-size:12px;padding:9px 12px;min-height:42px}.city-list button.reached{border-color:#447936;color:#23571a;background:#e5edda}.demo-controls{padding:24px 5%;background:#e8e5dc;border-block:1px dashed #b5b5a6}.demo-controls label{display:flex;justify-content:space-between;max-width:640px;font-weight:700}.demo-controls input{width:min(100%,640px);display:block;margin:15px 0;accent-color:var(--green)}.presets{display:flex;gap:8px}.presets button{font-size:12px;padding:7px 13px}.demo-controls p{font-size:12px;color:#636757;margin-bottom:0}footer{padding:32px 5%;display:flex;justify-content:space-between;align-items:center;gap:20px}footer p{font:italic 17px Georgia,serif}dialog{max-width:480px;width:calc(100% - 32px);padding:30px;background:#f7f0de;border:1px solid #a5a28e;border-radius:6px;color:var(--ink)}dialog::backdrop{background:#161b12aa}dialog .close-dialog{position:absolute;top:8px;right:8px;border:none;background:#f5f0e4;font-size:26px;padding:0;width:40px;height:40px;z-index:2}#dialog-art svg{width:100%;margin-bottom:22px}#dialog-state{color:var(--green)}#dialog-description{font-family:Georgia,serif;font-size:18px}#dialog-distance{color:var(--muted);font-size:14px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}@media(max-width:760px){.header-tag{display:none}.site-header{padding:16px 5%}.demo-badge{font-size:9px;letter-spacing:1px}.journey{padding:25px 5% 0;background-size:auto 100%;background-position:85% bottom}.hero-note{display:none}.subtitle{font-size:14px;letter-spacing:5px}.hero-heading .eyebrow{font-size:9px;letter-spacing:1.2px}.map-wrap{margin:10px -2% 0}#map{min-height:300px}.marker .label{font-size:10px;bottom:32px}.marker.below .label{top:32px}.marker small{display:none}.marker .dot{width:13px;height:13px;border-width:2px}.marker{min-width:30px;min-height:30px}.marker .label{display:none}.marker:first-child .label,.marker:last-child .label{display:block}.journey-bottom{padding:4px 0 25px;min-height:170px;gap:10px}.quote{display:none}.progress-card{padding:12px 18px;min-width:215px}.progress-card strong{font-size:58px}.ride-strip{flex-direction:column;align-items:stretch;padding:22px 5%}.ride-strip p{font-size:20px}.ride-actions button{flex:1;font-size:13px;padding:11px 8px}.section-heading{display:block}.section-heading>span{display:block;margin-top:12px}h2{font-size:28px}.postcards{grid-template-columns:repeat(2,1fr);gap:20px 14px}.postcard h3{font-size:19px}.postcard p{font-size:9px}.milestones{padding:30px 5%}.city-list button{min-height:44px}.eyebrow{font-size:10px;letter-spacing:1.5px}footer{align-items:start}footer p{font-size:14px;max-width:160px;margin:0}dialog h2{font-size:28px}}@media(prefers-reduced-motion:no-preference){.postcard{transition:transform .2s}.route-done{transition:stroke-dasharray .25s}} 

@media(max-width:760px){.marker:first-child .label{transform:translateX(-15px)}.marker:last-child .label{transform:translateX(18px)}}
@media(min-width:761px){.marker:nth-child(2) .label{left:38px;top:10px;bottom:auto;text-align:left}.marker:nth-child(3) .label{right:38px;bottom:20px;text-align:right}}

/* Leave the right-hand motorcycle artwork visible beside the progress summary. */
.journey-bottom{justify-content:flex-start}

.journey-bottom .progress-card{order:-1}

.postcard img{aspect-ratio:16/9;height:auto;object-fit:contain}
#milestone-dialog{width:calc(100vw - 32px);max-width:1920px;max-height:94dvh;padding:0;overflow:auto}
#dialog-art img{display:block;width:100%;height:auto;max-height:76dvh;object-fit:contain;background:#20241e}
#milestone-dialog>p,#milestone-dialog>h2{margin-left:28px;margin-right:28px}
#milestone-dialog>#dialog-state{margin-top:24px}
#dialog-done{margin:0 28px 28px}
#milestone-dialog .close-dialog{position:sticky;float:right;top:10px;margin:10px 10px -50px 0;box-shadow:0 2px 10px #0004}
@media(max-width:760px){#milestone-dialog{width:calc(100vw - 16px)}#milestone-dialog>p,#milestone-dialog>h2{margin-left:18px;margin-right:18px}}