/* Illustrated "how far is it" map (markup: shared/hh-map.svg.html, pasted into each design).
   Each design sets the --m-* colours and fonts; the drive draws itself when the card gets .is-in. */
.map-card {
  --m-ground: #2c4d39; --m-field: #6d8a4a; --m-water: #6f9aa0; --m-road: #f6eedd; --m-topo: #eaa53a;
  --m-tree: #1f3a2b; --m-route: #f6eedd; --m-paper: #fff9ee; --m-accent: #eaa53a; --m-pin: #d65a24; --m-muted: rgba(246, 238, 221, 0.7);
  --m-hand: "Caveat", "Comic Sans MS", cursive; --m-serif: "Fraunces", Georgia, serif; --m-sans: "DM Sans", system-ui, sans-serif;
  position: relative; overflow: hidden; aspect-ratio: 5 / 4;
}
.map-card .hh-map { width: 100%; height: 100%; display: block; }
.hh-map .m-ground { fill: var(--m-ground); }
.hh-map .m-fields { fill: var(--m-field); opacity: 0.45; }
.hh-map .m-river { fill: none; stroke: var(--m-water); stroke-width: 11; stroke-linecap: round; opacity: 0.55; }
.hh-map .m-lake { fill: var(--m-water); opacity: 0.55; }
.hh-map .m-small { font: 600 13px/1 var(--m-hand); fill: var(--m-muted); }
.hh-map .m-road-faint { fill: none; stroke: var(--m-road); stroke-width: 1.6; opacity: 0.16; }
.hh-map .m-road { fill: none; stroke: var(--m-road); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.22; }
.hh-map .m-shield { fill: var(--m-paper); }
.hh-map .m-shield-t { font: 800 11px/1 var(--m-sans); fill: var(--m-ground); }
.hh-map .m-topo { fill: none; stroke: var(--m-topo); stroke-width: 1.2; opacity: 0.3; }
.hh-map .m-trees { fill: var(--m-tree); }
.hh-map .m-route { fill: none; stroke: var(--m-route); stroke-width: 3.5; stroke-dasharray: 8 7; stroke-linecap: round; stroke-linejoin: round; }
.hh-map .m-draw { fill: none; stroke: #fff; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hh-map .m-town { fill: var(--m-paper); }
.hh-map .m-town-dot { fill: var(--m-ground); }
.hh-map .m-label-hand { font: 700 22px/1 var(--m-hand); fill: var(--m-paper); }
.hh-map .m-time { font: 700 21px/1 var(--m-hand); fill: var(--m-accent); }
.hh-map .m-pin, .hh-map .m-pulse { fill: var(--m-pin); }
.hh-map .m-pin-mark { fill: var(--m-paper); }
.hh-map .m-label { font: 600 20px/1 var(--m-serif); fill: var(--m-paper); paint-order: stroke; stroke: var(--m-ground); stroke-width: 5px; stroke-linejoin: round; }

/* Drive animation: route draws from town to the lodge, then the lodge area and the time appear */
@keyframes hm-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hm-pop { 0% { opacity: 0; transform: scale(0.6); } 70% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: none; } }
html[data-motion="on"] .map-card:not(.is-in) .m-draw { stroke-dashoffset: 1; }
html[data-motion="on"] .map-card:not(.is-in) .m-lodge, html[data-motion="on"] .map-card:not(.is-in) .m-time { opacity: 0; }
html[data-motion="on"] .map-card.is-in .m-draw { animation: hm-draw 2.2s cubic-bezier(.45,.05,.35,1) 0.35s both; }
html[data-motion="on"] .map-card.is-in .m-time { animation: hm-fade 0.6s ease-out 1.3s both; }
.hh-map .m-lodge { transform-box: fill-box; transform-origin: 50% 50%; }
html[data-motion="on"] .map-card.is-in .m-lodge { animation: hm-pop 0.7s cubic-bezier(.3,1.3,.5,1) 2.35s both; }