/* A small road trip that follows the reader down the page. */
.journey-layer {
  --journey-ink: #244c3b;
  --journey-paper: #f5efdf;
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
  contain: layout style;
}
.journey-map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.journey-road-edge { fill: none; stroke: #86987b; stroke-width: 18; opacity: .65; }
.journey-road-fill { fill: none; stroke: #f5efdf; stroke-width: 14.5; }
.journey-road-dashes { fill: none; stroke: #bd865b; stroke-width: 1.4; stroke-dasharray: 8 11; opacity: .8; }
.journey-spur-edge { fill: none; stroke: #86987b; stroke-width: 13; opacity: .6; }
.journey-spur-fill { fill: none; stroke: #f5efdf; stroke-width: 10.5; }
.journey-side-road-edge { fill: none; stroke: #86987b; stroke-width: 8; opacity: .55; }
.journey-side-road-fill { fill: none; stroke: #f5efdf; stroke-width: 5.5; }
.journey-parking-pad { fill: #e7e6d5; fill-opacity: .7; stroke: #92a080; stroke-width: .8; stroke-dasharray: 2 4; }
.journey-mountain-trail { fill: none; stroke: #f4eedc; stroke-width: 1.4; stroke-dasharray: 3 7; opacity: .45; }
.journey-stop .stop-post { stroke: #58704f; stroke-width: 1.2; }
.journey-stop .stop-board { fill: #355640; stroke: #355640; stroke-width: 1; }
.journey-stop text { fill: #f5efdf; stroke: none; font: 6.5px monospace; font-weight: 700; letter-spacing: .5px; text-anchor: middle; dominant-baseline: central; }
.journey-stop.is-current .stop-board { fill: #dd7b4b; stroke: #dd7b4b; }
.journey-stop.is-current text { fill: #183e31; }
.journey-roadside { color: #55724d; stroke: currentColor; stroke-width: 1.4; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.roadside-pine { opacity: .6; }
.roadside-rocks { opacity: .55; }
.roadside-watcher { color: #31523d; }
.watcher-pack { fill: #d6ddc6; }
.watcher-head circle { fill: #f5efdf; }
.watcher-body { transform: scaleX(var(--watch-facing, 1)); transform-origin: 0 0; }
.watcher-head { transform-origin: 0 -21px; transition: transform .35s ease-out; }
.is-watching .watcher-head { transform: rotate(var(--look-angle, -12deg)); }
.is-watching .watcher-wave { animation: journey-wave .7s ease-in-out infinite alternate; transform-origin: 3px -17px; }
.route-shield { fill: #f5efdf; stroke: #456747; stroke-width: 1.5; }
.shield-post { stroke: #6c8261; stroke-width: 1.3; }
.shield-name, .shield-number, .side-road-label { stroke: none; fill: #35573e; text-anchor: middle; font-family: monospace; font-weight: 700; }
.shield-name { font-size: 6px; letter-spacing: 1px; }
.shield-number { font-size: 10px; }
.side-road-label { font-size: 6px; letter-spacing: .3px; }
.roadside-direction { fill: #f5efdf; }
.journey-vehicle, .journey-walker, .journey-musician {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--journey-ink);
  will-change: transform;
  transform-origin: center center;
}
.journey-vehicle { width: 92px; height: 58px; }
.car-parked-view, .car-aerial-view { position: absolute; inset: 0; }
.car-aerial-view { visibility: hidden; }
.journey-vehicle.is-aerial .car-aerial-view { visibility: visible; }
.journey-vehicle.is-aerial .car-parked-view { visibility: hidden; }
.car-aerial-art { width: 100%; height: 100%; object-fit: contain; transform-origin: center; --driving-bob: -1px; }
.journey-vehicle svg, .journey-walker svg, .journey-musician svg { width: 100%; height: 100%; display: block; overflow: visible; }
.journey-vehicle .car-body { fill: var(--journey-paper); }
.journey-vehicle .car-window { fill: #d7ddca; }
.journey-vehicle .car-tire { fill: #244c3b; stroke: #f5efdf; stroke-width: 1.3; }
.journey-vehicle .car-wheel { fill: none; stroke: #f5efdf; stroke-width: 1.3; }
.journey-vehicle .car-drawing { transform-origin: 66px 46px; }
.journey-vehicle.is-driving .car-aerial-art { animation: journey-road-bounce 1.35s ease-in-out infinite; }
.journey-vehicle.is-on-mountain { --journey-paper: #183e31; color: #f4eedc; }
.journey-vehicle.is-on-mountain .car-window { fill: #244c3b; }
.journey-walker { width: 43px; height: 66px; color: #f4eedc; }
.journey-walker .hiker-fill { fill: #183e31; }
.journey-walker.is-walking .hiker-leg-front { animation: journey-step .5s ease-in-out infinite alternate; transform-origin: 25px 46px; }
.journey-walker.is-walking .hiker-leg-back { animation: journey-step .5s ease-in-out infinite alternate-reverse; transform-origin: 25px 46px; }
.journey-walker.is-walking .hiker-arm { animation: journey-arm .5s ease-in-out infinite alternate; transform-origin: 26px 30px; }
.journey-musician { width: 46px; height: 69px; opacity: 0; }
.journey-quote { position: absolute; top: 0; left: 0; opacity: 0; padding: 5px 7px; border: 1px solid #a0ad90; border-radius: 9px 9px 9px 2px; background: #f5efdf; color: #244c3b; font: 600 10px/1.35 'DM Sans', sans-serif; text-align: center; }
.journey-musician .hiker-fill { fill: var(--journey-paper); }
.journey-musician .guitar { fill: #dd7b4b; }
.journey-musician.is-playing .strum-arm { transform-origin: 25px 32px; animation: journey-strum .3s ease-in-out infinite alternate; }
.journey-musician.is-playing .musician-groove { transform-origin: 27px 72px; animation: journey-groove .88s ease-in-out infinite; }
.journey-musician.is-playing .guitar-note { animation: journey-note 1.8s ease-out infinite; }
.journey-musician .note-two { animation-delay: .75s !important; }
.journey-musician .guitar-note { opacity: 0; }
@keyframes journey-step { from { transform: rotate(-17deg); } to { transform: rotate(17deg); } }
@keyframes journey-arm { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@keyframes journey-strum { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }
@keyframes journey-note { 0% { opacity: 0; transform: translate(0, 4px); } 20% { opacity: .85; } 100% { opacity: 0; transform: translate(6px, -18px); } }
@keyframes journey-road-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(var(--driving-bob, -1px)) scale(1.018); }
}
@keyframes journey-groove {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  25% { transform: rotate(0) translateY(-3px); }
  50% { transform: rotate(7deg) translateY(0); }
  75% { transform: rotate(0) translateY(-2px); }
}
@keyframes journey-wave { from { transform: rotate(-8deg); } to { transform: rotate(23deg); } }
@media (max-width: 760px) {
  .journey-quote { padding: 4px 3px; font-size: 10px; border-radius: 6px 6px 6px 1px; }
  .car-aerial-art { --driving-bob: -.4px; }
  .journey-vehicle { width: 34px; height: 22px; }
  .journey-walker { width: 29px; height: 45px; }
  .journey-musician { width: 25px; height: 38px; }
  .journey-road-edge { stroke-width: 9; opacity: .5; }
  .journey-road-fill { stroke-width: 6.7; }
  .journey-road-dashes { stroke-width: .9; stroke-dasharray: 4 7; opacity: .7; }
  .journey-spur-edge { stroke-width: 7; }
  .journey-spur-fill { stroke-width: 5; }
  .journey-side-road-edge { stroke-width: 5; }
  .journey-side-road-fill { stroke-width: 3.5; }
  .journey-stop text { font-size: 6.5px; letter-spacing: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .journey-layer *, .journey-layer *::before, .journey-layer *::after { animation: none !important; }
  .journey-musician .guitar-note { opacity: .55; }
}