/* ==========================================================================
   Jack's Adventures - the interactive map (/map/)
   --------------------------------------------------------------------------
   Two colour worlds:
   - The CHROME (chapter chips, legend, buttons, story panel, HUD, list) uses the
     site tokens (--paper, --ink, --surface, ...) and therefore follows the theme.
   - The MAP CANVAS (sea, land, routes, pins, inset) uses the --jm-* tokens below.
     In light mode they point at the site tokens; in dark mode they are pinned to
     the light values, so the map stays a sheet of sunlit paper at night.
   Contrast rules from the design brief: routes are drawn in text-safe colours
   (--ember-ink, --pine, --sea) over a paper halo; ember-ink never goes on sky
   without that halo.
   ========================================================================== */

.jm, .jm-list {
  --jm-land: var(--map-paper, #F3E6C8);
  --jm-foreign: #E4DBC2;
  --jm-sea: var(--sky, #9AD3E3);
  --jm-sea-ink: var(--sea, #146A85);
  --jm-ink: var(--ink, #1E2B3A);
  --jm-ink-soft: var(--ink-soft, #4A5866);
  --jm-pine: var(--pine, #2C6446);
  --jm-ember: var(--ember-ink, #B43F17);
  --jm-ember-fill: var(--ember, #E2572B);
  --jm-sun: var(--sun, #F5B73B);
  --jm-sand: var(--sand, #EFD09B);
  --jm-paper: var(--paper, #FFF8E9);
  --jm-glacier: #FBFCF6;
  --jm-prov: #8A6D4B;
  --jm-photo-mat: #FFFFFF;
  /* chrome (theme-following) */
  --jm-bg: var(--surface, var(--paper, #FFF8E9));
  --jm-bg-2: var(--surface-2, var(--map-paper, #F3E6C8));
  --jm-fg: var(--ink, #1E2B3A);
  --jm-fg-soft: var(--ink-soft, #4A5866);
  --jm-focus: var(--sea, #146A85);
  --jm-hard: 3px 3px 0 var(--ink, #1E2B3A);
  --jm-hand: var(--font-hand, "Caveat", "Bradley Hand", "Segoe Print", cursive);
  --jm-stamp: var(--font-stamp, "Special Elite", "Courier New", monospace);
  --jm-display: var(--font-display, "Fraunces", Georgia, serif);
  --jm-body: var(--font-body, "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif);
  --jm-top: 64px; /* header bottom, measured by map.js */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.jm, .jm-list) {
    --jm-land: #F3E6C8; --jm-sea: #9AD3E3; --jm-sea-ink: #146A85; --jm-ink: #1E2B3A; --jm-ink-soft: #4A5866;
    --jm-pine: #2C6446; --jm-ember: #B43F17; --jm-ember-fill: #E2572B; --jm-sun: #F5B73B; --jm-sand: #EFD09B; --jm-paper: #FFF8E9;
    --jm-photo-mat: #F6ECD6; --jm-focus: var(--sun, #F7C45E); --jm-hard: 3px 3px 0 #05090d;
  }
}
:root[data-theme="dark"] :is(.jm, .jm-list) {
  --jm-land: #F3E6C8; --jm-sea: #9AD3E3; --jm-sea-ink: #146A85; --jm-ink: #1E2B3A; --jm-ink-soft: #4A5866;
  --jm-pine: #2C6446; --jm-ember: #B43F17; --jm-ember-fill: #E2572B; --jm-sun: #F5B73B; --jm-sand: #EFD09B; --jm-paper: #FFF8E9;
  --jm-photo-mat: #F6ECD6; --jm-focus: var(--sun, #F7C45E); --jm-hard: 3px 3px 0 #05090d;
}

/* The map page is full-bleed: undo any content max-width on <main>. */
body.page-map main#main { max-width: none; width: auto; padding: 0; margin: 0; }

.jm svg, .jm img, .jm-list svg { max-width: none; }   /* site.css caps img/svg at 100% of their (zero-size) pin anchors */
.jm-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.jm-skip { position: absolute; left: 16px; top: -60px; z-index: 30; padding: .5rem .9rem; background: var(--jm-bg); color: var(--jm-fg); border: 2px solid var(--jm-fg); border-radius: 10px; font: 700 1rem var(--jm-body); }
.jm-skip:focus { top: 16px; }

/* ---------- the section + instrument-panel frame ---------- */
.jm { position: relative; padding: 8px 10px 0; color: var(--jm-fg); font-family: var(--jm-body); }
.jm-frame {
  position: relative; height: calc(100vh - var(--jm-top) - 3.4rem - var(--tabbar-h, 0px)); height: calc(100svh - var(--jm-top) - 3.4rem - var(--tabbar-h, 0px)); min-height: 440px;
  border: 2px solid var(--jm-fg); border-radius: 6px; overflow: hidden; background: var(--jm-sea);
  box-shadow: 0 1px 0 var(--jm-fg), 0 14px 30px -18px rgba(20, 30, 40, .45);
  isolation: isolate;
}
/* paper margin band with graduation ticks, like the neatline of an old chart */
.jm-frame::before, .jm-frame::after { content: ""; position: absolute; pointer-events: none; z-index: 3; }
.jm-frame::before { inset: 0; border: 7px solid var(--jm-land); }
.jm-frame::after {
  inset: 7px; border: 1.5px solid color-mix(in srgb, var(--jm-ink) 70%, transparent);
  background:
    repeating-linear-gradient(90deg, var(--jm-ink) 0 1.5px, transparent 1.5px 64px) top left / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, var(--jm-ink) 0 1.5px, transparent 1.5px 64px) bottom left / 100% 6px no-repeat,
    repeating-linear-gradient(180deg, var(--jm-ink) 0 1.5px, transparent 1.5px 64px) top left / 6px 100% no-repeat,
    repeating-linear-gradient(180deg, var(--jm-ink) 0 1.5px, transparent 1.5px 64px) top right / 6px 100% no-repeat;
  opacity: .55;
}
.jm-corner { position: absolute; z-index: 4; width: 18px; height: 18px; border: 0 solid var(--jm-ink); pointer-events: none; }
.jm-corner--tl { top: 2px; left: 2px; border-top-width: 3px; border-left-width: 3px; }
.jm-corner--tr { top: 2px; right: 2px; border-top-width: 3px; border-right-width: 3px; }
.jm-corner--bl { bottom: 2px; left: 2px; border-bottom-width: 3px; border-left-width: 3px; }
.jm-corner--br { bottom: 2px; right: 2px; border-bottom-width: 3px; border-right-width: 3px; }

/* ---------- stage: SVG map + paper + HTML pins (this is the d3-zoom target) ---------- */
.jm-stage { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.jm-stage.is-dragging { cursor: grabbing; }
.jm-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.jm-paper { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .7;
  background-image:
    radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 58%, rgba(84, 54, 24, .26) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .33  0 0 0 0 .2  0 0 0 .38 -.06'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900'><filter id='b' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.006 .009' numOctaves='3' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .75  0 0 0 0 .6  0 0 0 0 .38  0 0 0 .5 -.12'/></filter><rect width='100%' height='100%' filter='url(%23b)'/></svg>"); }
@media (pointer: coarse) { .jm-paper { mix-blend-mode: normal; opacity: .28; } }
.jm-noscript { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); max-width: 26rem; padding: 1rem 1.2rem; background: var(--jm-paper); color: var(--jm-ink); border: 2px solid var(--jm-ink); border-radius: 12px; font-size: 1.05rem; }

/* svg layers (land geometry is baked with a hand wobble; strokes never scale with zoom) */
.jm-world path, .jm-world use { vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.jm-sea { fill: var(--jm-sea); }
.jm-halo { fill: none; stroke: var(--jm-sea-ink); }
.jm-foreign { fill: var(--jm-foreign); }
.jm-canada { fill: var(--jm-land); }
.jm-coast { fill: none; stroke: var(--jm-ink); }
.jm-glaciers { fill: var(--jm-glacier); stroke: #a7c3c9; stroke-width: .8; opacity: .92; }
.jm-rivers { fill: none; stroke: #6fa8b4; stroke-width: 1.1; opacity: .85; }
.jm-prov { fill: none; stroke: var(--jm-prov); stroke-width: 1; stroke-dasharray: 5 5; opacity: .7; }
.jm-intl { fill: none; stroke: var(--jm-ink-soft); stroke-width: 1.5; stroke-dasharray: 9 3 2 3; opacity: .75; }
.jm-lbl { font-family: var(--jm-hand); fill: var(--jm-ink); paint-order: stroke; stroke: var(--jm-land); stroke-width: 3.5px; stroke-linejoin: round; text-anchor: middle; pointer-events: none; }
.jm-lbl--sea { fill: #2f6878; font-style: italic; letter-spacing: 2px; stroke: none; }
.jm-lbl--prov { fill: #7a5f3f; letter-spacing: 3px; font-weight: 700; }
.jm-lbl--route { fill: var(--jm-ink); font-weight: 700; stroke: var(--jm-paper); stroke-width: 4px; }

/* routes: faint planned trail, paper halo, dashed line revealed through a mask */
.jm-route { transition: opacity .35s; }
.jm-route.is-dim { opacity: .22; }
.jm-route.is-hidden { display: none; }
.jm-route__ghost { fill: none; stroke-width: 2px; opacity: .3; }
.jm-route__casing { fill: none; stroke: var(--jm-paper); stroke-width: 7.5px; opacity: .8; stroke-linecap: round; stroke-linejoin: round; }
.jm-route__line { fill: none; stroke-width: 3.6px; stroke-linecap: round; stroke-linejoin: round; }
.jm-route__hit { fill: none; stroke: transparent; stroke-width: 16px; pointer-events: stroke; cursor: pointer; }
.jm-route--zodiac .jm-route__casing { stroke: var(--jm-ink); stroke-width: 6.6px; opacity: 1; }
.jm-route--zodiac .jm-route__line { stroke-width: 4.4px; }
.jm-veh { pointer-events: none; }
.jm-veh image { overflow: visible; }

/* ---------- pins (HTML buttons positioned over the SVG) ---------- */
.jm-pins { position: absolute; inset: 0; pointer-events: none; }
.jm-pin { position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; margin: 0; border: 0; background: none; color: var(--jm-ink); cursor: pointer; pointer-events: auto; font: inherit; outline: none; --s: 34px; --c: var(--jm-ink); }
.jm-pin[hidden] { display: none; }
.jm-pin__body { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); margin: calc(var(--s) * -1 - 9px) 0 0 calc(var(--s) / -2);
  border-radius: 50%; border: 3px solid var(--c); background: var(--jm-photo-mat) center / cover no-repeat;
  box-shadow: 0 0 0 1.5px var(--jm-ink), 0 4px 7px -2px rgba(30, 43, 58, .45); transform-origin: 50% calc(100% + 9px);
  transition: scale .16s ease-out; }
.jm-pin__body::after { content: ""; position: absolute; left: 50%; top: 100%; margin: 1px 0 0 -6px; border: 6px solid transparent; border-top: 8px solid var(--jm-ink); border-bottom: 0; }
.jm-pin__img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.jm-pin__img.is-loaded { opacity: 1; }
.jm-pin__glyph { position: absolute; right: -7px; bottom: -5px; width: 19px; height: 19px; padding: 2.5px; border-radius: 50%; background: var(--jm-paper); border: 1.5px solid var(--jm-ink); color: var(--jm-ink); box-sizing: border-box; }
.jm-pin__count { display: none; position: absolute; top: -7px; right: -11px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--jm-ink); color: var(--jm-paper); font: 800 12px/22px var(--jm-body); text-align: center; box-sizing: border-box; }
.jm-pin[data-kind="overnight"] { --s: 40px; }
.jm-pin[data-kind="place"] { --s: 34px; }
.jm-pin[data-kind="waypoint"] { --s: 28px; }
/* no photo: the glyph fills the bubble */
.jm-pin--glyph { --s: 26px !important; }
.jm-pin--glyph .jm-pin__body { background: var(--jm-paper); }
.jm-pin--glyph .jm-pin__glyph { left: 3px; top: 3px; right: auto; bottom: auto; width: calc(100% - 6px); height: calc(100% - 6px); padding: 0; border: 0; background: none; }
/* waypoint without photo: small dot, anchored at its centre */
.jm-pin--dot { --s: 13px !important; }
.jm-pin--dot .jm-pin__body { margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-width: 2.5px; border-color: var(--jm-paper); background: var(--c); box-shadow: 0 0 0 1.5px var(--jm-ink); transform-origin: 50% 50%; }
.jm-pin--dot .jm-pin__body::after, .jm-pin--dot .jm-pin__glyph { display: none; }
.jm-pin--dot .jm-pin__body::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; } /* bigger hit area */
/* cluster: a little stack of photos with a count */
.jm-pin--cluster { --s: 44px !important; }
.jm-pin--cluster .jm-pin__body { margin: calc(var(--s) * -1 - 9px) 0 0 calc(var(--s) / -2); border-color: var(--c); background-color: var(--jm-paper);
  box-shadow: 0 0 0 1.5px var(--jm-ink), 4px -4px 0 -1px var(--jm-paper), 4px -4px 0 .5px var(--jm-ink), 8px -8px 0 -1px var(--jm-paper), 8px -8px 0 .5px var(--jm-ink), 0 4px 7px -2px rgba(30,43,58,.45); transform-origin: 50% calc(100% + 9px); }
.jm-pin--cluster .jm-pin__body::after { display: block; }
.jm-pin--cluster .jm-pin__count { display: block; }
.jm-pin--cluster .jm-pin__glyph { display: none; }
/* a cluster of photo-less stops: a round counter */
.jm-pin.jm-pin--cluster:is(.jm-pin--dot, .jm-pin--glyph) { --s: 26px !important; }
.jm-pin.jm-pin--cluster:is(.jm-pin--dot, .jm-pin--glyph) .jm-pin__body { margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); background: var(--jm-paper); border: 2.5px solid var(--c);
  box-shadow: 0 0 0 1.5px var(--jm-ink), 3px -3px 0 -1px var(--jm-paper), 3px -3px 0 .5px var(--jm-ink); transform-origin: 50% 50%; }
.jm-pin.jm-pin--cluster:is(.jm-pin--dot, .jm-pin--glyph) .jm-pin__body::after { display: none; }
.jm-pin.jm-pin--cluster:is(.jm-pin--dot, .jm-pin--glyph) .jm-pin__count { position: absolute; inset: 0; top: 0; right: 0; min-width: 0; height: auto; padding: 0; background: none; color: var(--jm-ink); font-size: 12px; line-height: 21px; }
/* far out (k < 2): smaller bubbles so the coast does not clump */
.jm-pins.is-far .jm-pin[data-kind="overnight"] { --s: 31px; }
.jm-pins.is-far .jm-pin[data-kind="place"] { --s: 27px; }
.jm-pins.is-far .jm-pin[data-kind="waypoint"] { --s: 23px; }
.jm-pins.is-far .jm-pin--cluster { --s: 36px !important; }

@media (hover: hover) { .jm-pin:hover .jm-pin__body { scale: 1.16; } }
.jm-pin:focus-visible .jm-pin__body { outline: 3px solid var(--jm-focus); outline-offset: 3px; scale: 1.16; }
.jm-pin.is-selected { z-index: 3; }
.jm-pin.is-selected .jm-pin__body { scale: 1.22; border-width: 4px; box-shadow: 0 0 0 2px var(--jm-ink), 0 0 0 6px color-mix(in srgb, var(--c) 35%, transparent), 0 6px 10px -2px rgba(30,43,58,.5); }
.jm-pin.is-pop .jm-pin__body { animation: jm-pop .6s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes jm-pop { 0% { scale: .6; } 55% { scale: 1.45; } 100% { scale: 1.22; } }
.jm-pins.is-hidden-until-drawn .jm-pin { opacity: 0; }
.jm-pin { transition: opacity .4s; }
.jm-home-marker { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; color: var(--jm-ink); }
.jm-home-marker svg { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; padding: 3px; box-sizing: border-box; border-radius: 6px; background: var(--jm-sun); border: 1.5px solid var(--jm-ink); }
.jm-spot { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 4; }
.jm-spot__x { position: absolute; left: 0; top: 0; }
.jm-spot__x::before { content: ""; position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 3px solid var(--jm-ember); animation: jm-ping 1.8s ease-out infinite; }
.jm-spot__x::after { content: "\2715"; position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; display: grid; place-items: center; border-radius: 50%; background: var(--jm-paper); border: 2px solid var(--jm-ink); color: var(--jm-ember); font: 900 15px/1 var(--jm-body); }
/* "nearest: Tofino · 42 km" under the X */
.jm-spot__near { position: absolute; left: 0; top: 21px; transform: translateX(-50%); pointer-events: auto; white-space: nowrap; padding: 1px 9px 2px; background: var(--jm-paper); color: var(--jm-ink);
  border: 1.5px solid var(--jm-ink); border-radius: 999px; box-shadow: 2px 2px 0 var(--jm-ink); font: 600 .76rem/1.35 var(--jm-body); text-decoration: none; }
.jm-spot__near b { font-weight: 800; }
.jm-spot__near:hover { text-decoration: underline; text-underline-offset: 2px; }
@keyframes jm-ping { 0% { transform: scale(.8); opacity: 1; } 100% { transform: scale(2); opacity: 0; } }

/* ---------- chrome ---------- */
.jm-chrome > * { z-index: 5; }
.jm-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 40px; padding: 0 .85rem; background: var(--jm-bg); color: var(--jm-fg);
  border: 2px solid var(--jm-fg); border-radius: 12px; box-shadow: var(--jm-hard); font: 800 .95rem/1.1 var(--jm-body); cursor: pointer; white-space: nowrap; transition: transform .12s, box-shadow .12s; }
.jm-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--jm-fg); }
.jm-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--jm-fg); }
.jm-btn:disabled { opacity: .45; cursor: default; transform: none; box-shadow: var(--jm-hard); }
.jm-btn--icon { width: 40px; padding: 0; }
.jm-ico { width: 20px; height: 20px; flex: none; }
.jm :focus-visible { outline: 3px solid var(--jm-focus); outline-offset: 2px; }

.jm-top { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; gap: .6rem; align-items: flex-start; pointer-events: none; }
.jm-top > * { pointer-events: auto; }
.jm-chapters { display: flex; gap: .45rem; flex-wrap: wrap; min-width: 0; }
.jm-chip { --accent: var(--jm-fg); --chip-bg: var(--jm-bg); display: inline-flex; align-items: center; gap: .45rem; min-height: 38px; padding: .2rem .75rem .2rem .55rem;
  background: var(--chip-bg); color: var(--jm-fg); border: 2px solid var(--jm-fg); border-radius: 999px; box-shadow: 2px 2px 0 var(--jm-fg);
  font: 700 .9rem/1.1 var(--jm-body); cursor: pointer; white-space: nowrap; transition: transform .12s, box-shadow .12s, background-color .2s; }
.jm-chip:hover { transform: translate(-1px, -1px) rotate(-.6deg); box-shadow: 3px 3px 0 var(--jm-fg); }
.jm-chip__swatch { width: 30px; height: 10px; flex: none; border-radius: 3px; background: #F3E6C8; }
.jm-chip__year { font-family: var(--jm-stamp); font-weight: 400; letter-spacing: .02em; }
.jm-chip[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 24%, var(--chip-bg)); box-shadow: inset 0 -4px 0 var(--accent), 2px 2px 0 var(--jm-fg); }
.jm-chip--sky { --chip-bg: var(--sky, #9AD3E3); }
.jm-chip--sky[aria-pressed="true"] { background: var(--chip-bg); }
.jm-play { margin-left: auto; }
.jm-play.is-playing { background: var(--jm-bg-2); }

.jm-controls { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: .5rem; }
.jm-compass { width: 56px; height: 56px; padding: 0; border-radius: 50%; margin-top: .3rem; }
.jm-compass__rose { display: block; width: 52px; height: 52px; }
.jm-compass__rose svg { width: 100%; height: 100%; overflow: visible; }
.jm-compass:hover .jm-compass__rose { transform: rotate(-12deg); transition: transform .3s; }

.jm-legend { position: absolute; right: 16px; top: 68px; width: 228px; background: var(--jm-bg); color: var(--jm-fg); border: 2px solid var(--jm-fg); border-radius: 14px; box-shadow: var(--jm-hard); font-size: .88rem; }
.jm-legend summary { display: flex; align-items: center; gap: .45rem; padding: .45rem .75rem; font-weight: 800; cursor: pointer; list-style: none; }
.jm-legend summary::-webkit-details-marker { display: none; }
.jm-legend summary::after { content: "+"; margin-left: auto; font-size: 1.2rem; line-height: 1; }
.jm-legend[open] summary::after { content: "\2212"; }
.jm-legend__list { list-style: none; margin: 0; padding: .1rem .75rem .5rem; display: grid; gap: .32rem; }
.jm-legend__list li { display: flex; align-items: center; gap: .55rem; line-height: 1.2; }
.jm-legend__line { width: 44px; height: 14px; flex: none; background: var(--jm-land); border-radius: 4px; padding: 2px 0; box-sizing: border-box; }
.jm-legend__pin { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; margin: 0 10px 0 10px; border-radius: 50%; background: var(--jm-paper); color: var(--jm-ink); border: 1.5px solid var(--jm-ink); box-sizing: border-box; }
.jm-legend__pin svg { width: 15px; height: 15px; }
.jm-legend__pin--cluster { background: var(--jm-ink); color: var(--jm-paper); font: 800 12px var(--jm-body); }
.jm-legend__pin--home { border-radius: 6px; background: var(--jm-sun); }
.jm-legend__hint { margin: 0; padding: 0 .75rem .6rem; color: var(--jm-fg-soft); font-size: .8rem; }

.jm-bottom { position: absolute; left: 16px; right: 16px; bottom: 12px; display: flex; align-items: flex-end; gap: 1rem; pointer-events: none; }
.jm-scale { font: 1.05rem/1 var(--jm-hand); color: var(--jm-ink); text-shadow: 0 0 4px var(--jm-land), 0 0 2px var(--jm-land); }
.jm-scale i { display: block; height: 7px; border: 2px solid var(--jm-ink); border-top: 0; margin-bottom: 2px; }
.jm-coords { font: .78rem/1 var(--jm-stamp); color: var(--jm-ink); background: color-mix(in srgb, var(--jm-land) 80%, transparent); padding: 3px 6px; border-radius: 4px; min-width: 9.5rem; }
.jm-coords:empty { visibility: hidden; }
.jm-credit { margin: 0 0 0 auto; pointer-events: auto; font: .72rem/1.3 var(--jm-body); color: var(--jm-ink-soft); background: color-mix(in srgb, var(--jm-land) 85%, transparent); padding: 2px 7px; border-radius: 6px; text-align: right; }
.jm-credit a { color: inherit; }

/* tooltip ("name bubble") */
.jm-tip { position: absolute; left: 0; top: 0; z-index: 9; pointer-events: none; padding: .15rem .6rem .25rem; background: var(--jm-bg); color: var(--jm-fg); border: 2px solid var(--jm-fg); border-radius: 12px; box-shadow: 2px 3px 0 var(--jm-fg);
  font: 700 1.3rem/1.1 var(--jm-hand); white-space: nowrap; opacity: 0; transition: opacity .12s; }
.jm-tip small { display: block; font: 600 .75rem/1.2 var(--jm-body); color: var(--jm-fg-soft); }
.jm-tip.is-on { opacity: 1; }

/* HUD */
.jm-hud { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: .7rem; padding: .35rem .45rem .35rem 1rem;
  background: var(--jm-bg); color: var(--jm-fg); border: 2px solid var(--jm-fg); border-radius: 14px; box-shadow: var(--jm-hard); max-width: calc(100% - 32px); z-index: 6; }
.jm-hud[hidden] { display: none; }
.jm-hud__line { margin: 0; font: 1rem/1.2 var(--jm-stamp); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jm-hud__vehicle { font: 700 1.25rem/1 var(--jm-hand); color: var(--jm-fg-soft); }
.jm-hud__day { font-weight: 400; }
.jm-hud__km { color: var(--jm-fg-soft); }
.jm-hud__km:not(:empty)::before { content: "\00b7\00a0"; }
.jm-hud__place:not(:empty)::before { content: "\00b7\00a0"; }
.jm-hud__btns { display: flex; gap: .35rem; }
.jm-hud .jm-btn--icon { width: 34px; min-height: 34px; box-shadow: 2px 2px 0 var(--jm-fg); }
/* Follow toggle: pressed = the camera follows the marker; a manual drag / zoom releases it */
.jm-hud__follow { min-height: 34px; gap: .3rem; padding: 0 .6rem 0 .45rem; font-size: .85rem; box-shadow: 2px 2px 0 var(--jm-fg); }
.jm-hud__follow[hidden] { display: none; }
.jm-hud__follow .jm-ico { width: 18px; height: 18px; }
.jm-hud__follow[aria-pressed="true"] { background: color-mix(in srgb, var(--jm-focus) 20%, var(--jm-bg)); box-shadow: inset 0 -3px 0 var(--jm-focus), 2px 2px 0 var(--jm-fg); }
.jm-hud__follow[aria-pressed="false"] { color: var(--jm-fg-soft); border-style: dashed; }

/* replay postcard */
.jm-postcard { position: absolute; left: 16px; bottom: 58px; width: 250px; z-index: 6; padding: 10px 10px 8px; background: var(--jm-photo-mat); color: #1E2B3A; border-radius: 3px;
  box-shadow: 0 12px 24px -10px rgba(20, 30, 40, .55), 0 0 0 1px rgba(30,43,58,.18); transform: rotate(-2deg); animation: jm-card .45s cubic-bezier(.2, .9, .3, 1.2); }
.jm-postcard[hidden] { display: none; }
.jm-postcard img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #d9d2c0 center / cover; filter: sepia(.18) saturate(1.08) contrast(.98); }
.jm-postcard__day { margin: .45rem 0 0; font: .8rem/1.2 var(--jm-stamp); color: #4A5866; }
.jm-postcard__title { margin: .1rem 0 0; font: 700 1.35rem/1.05 var(--jm-hand); }
.jm-postcard a { color: #1E2B3A; font: 700 .85rem/1.3 var(--jm-body); }
@keyframes jm-card { from { transform: translateY(20px) rotate(-6deg) scale(.9); opacity: 0; } }

/* world inset (Africa side trip) */
.jm-inset { position: absolute; left: 16px; bottom: 50px; z-index: 5; }
.jm-inset__btn { display: block; padding: 0; width: 196px; background: var(--jm-land); border: 2px solid var(--jm-fg); border-radius: 12px; box-shadow: var(--jm-hard); cursor: pointer; overflow: hidden; color: var(--jm-ink); text-align: left; }
.jm-inset__btn svg { display: block; width: 100%; height: auto; }
.jm-inset__cap { display: block; padding: .15rem .55rem .3rem; font: 700 1.05rem/1.1 var(--jm-hand); background: var(--jm-bg); color: var(--jm-fg); border-top: 2px solid var(--jm-fg); }
.jm-inset__card { position: relative; width: min(500px, calc(100vw - 60px)); background: var(--jm-land); border: 2px solid var(--jm-fg); border-radius: 14px; box-shadow: var(--jm-hard); overflow: hidden; color: var(--jm-ink); }
.jm-inset__card header { display: flex; align-items: center; gap: .5rem; padding: .35rem .4rem .35rem .8rem; background: var(--jm-bg); color: var(--jm-fg); border-bottom: 2px solid var(--jm-fg); }
.jm-inset__card h2 { margin: 0; font: 800 1rem/1.2 var(--jm-body); }
.jm-inset__card h2 small { display: block; font-weight: 600; color: var(--jm-fg-soft); font-size: .8rem; }
.jm-inset__card header .jm-btn { margin-left: auto; width: 34px; min-height: 34px; box-shadow: 2px 2px 0 var(--jm-fg); }
.jm-inset__map { position: relative; height: 330px; background: var(--jm-sea); }
.jm-inset__map > svg { position: absolute; inset: 0; width: 100%; height: 100%; }   /* the map only, not the pins' glyph icons */
.jm-inset__map .jm-pins { position: absolute; inset: 0; }

/* story panel */
.jm-panel { position: absolute; top: 68px; right: 16px; bottom: 44px; width: min(390px, calc(100% - 32px)); z-index: 7; display: flex; flex-direction: column;
  background: var(--jm-bg); color: var(--jm-fg); border: 2px solid var(--jm-fg); border-radius: 18px; box-shadow: var(--jm-hard), 0 18px 40px -18px rgba(20,30,40,.55);
  transform: translateX(calc(100% + 40px)) rotate(1.5deg); visibility: hidden; transition: transform .38s cubic-bezier(.2, .9, .3, 1.08), visibility 0s .38s; }
.jm-panel.is-open { transform: none; visibility: visible; transition: transform .38s cubic-bezier(.2, .9, .3, 1.08), visibility 0s; }
.jm-panel__grip { display: none; }
.jm-panel__close { position: absolute; top: 10px; right: 10px; z-index: 2; }
.jm-panel__scroll { overflow: auto; overscroll-behavior: contain; padding: 1rem 1.15rem .8rem; flex: 1; }
.jm-badge { display: inline-flex; align-items: center; gap: .4rem; margin: 0 2.6rem .5rem 0; padding: .15rem .65rem; border-radius: 999px; background: color-mix(in srgb, var(--accent, var(--jm-fg)) 20%, var(--jm-bg)); border: 1.5px solid var(--accent, var(--jm-fg)); font: 800 .8rem/1.3 var(--jm-body); }
.jm-badge__dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--accent, var(--jm-fg)); }
.jm-panel h2:focus { outline: none; }
.jm-panel h2 { margin: 0 2.4rem .25rem 0; font: 800 1.75rem/1.05 var(--jm-display); font-variation-settings: "SOFT" 100, "WONK" 0; outline: none; }
.jm-panel__sub { margin: 0 0 .4rem; color: var(--jm-fg-soft); font-size: .9rem; }
.jm-stamp { display: inline-flex; gap: .6rem; align-items: center; margin: .3rem 0 .6rem; padding: .2rem .6rem; border: 2px solid var(--ember-ink, #B43F17); color: var(--ember-ink, #B43F17); border-radius: 6px;
  font: 1rem/1.2 var(--jm-stamp); letter-spacing: .06em; text-transform: uppercase; transform: rotate(-2.5deg); }
.jm-stamp span + span { padding-left: .6rem; border-left: 2px solid currentColor; }
.jm-polaroid { position: relative; margin: .5rem .2rem 1rem; padding: 10px 10px 8px; background: var(--jm-photo-mat); color: #1E2B3A; transform: rotate(-1.5deg);
  box-shadow: 0 10px 22px -8px rgba(30, 43, 58, .45), 0 0 0 1px rgba(30,43,58,.12); }
.jm-polaroid::before { content: ""; position: absolute; top: -12px; left: 50%; width: 84px; height: 24px; transform: translateX(-50%) rotate(3deg); background: rgba(245, 183, 59, .6); }
.jm-polaroid img { display: block; width: 100%; height: auto; background: #d9d2c0 center / cover; filter: sepia(.18) saturate(1.08) contrast(.98); }
.jm-polaroid figcaption { margin-top: .45rem; font: 700 1.3rem/1.15 var(--jm-hand); text-align: center; }
.jm-strip { display: flex; gap: .4rem; margin: -.3rem 0 .9rem; flex-wrap: wrap; }
.jm-strip button { width: 54px; height: 54px; padding: 0; border: 2px solid var(--jm-fg); border-radius: 8px; overflow: hidden; background: #d9d2c0 center / cover; cursor: pointer; }
.jm-strip button[aria-pressed="true"] { outline: 3px solid var(--jm-focus); outline-offset: 1px; }
.jm-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jm-note { margin: .4rem 0 1rem; padding: .7rem .9rem; background: var(--jm-bg-2); border-radius: 10px; font: 700 1.3rem/1.2 var(--jm-hand); }
.jm-excerpt { margin: 0 0 .6rem; font-size: 1rem; line-height: 1.55; }
.jm-read { display: inline-block; margin: 0 0 .6rem; font-weight: 800; color: var(--jm-fg); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.jm-more { margin: .2rem 0 0; padding: 0; list-style: none; font-size: .92rem; }
.jm-more li { margin: .2rem 0; }
.jm-more a { color: var(--jm-fg); }
.jm-more__label { font-weight: 800; color: var(--jm-fg-soft); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; margin: .6rem 0 0; }
.jm-panel__nav { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem .75rem; border-top: 2px dashed color-mix(in srgb, var(--jm-fg) 35%, transparent); }
.jm-panel__nav .jm-btn { flex: 1; min-width: 0; flex-direction: column; gap: 0; padding: .3rem .5rem; min-height: 46px; }
.jm-panel__nav .jm-btn small { font: 600 .72rem/1.2 var(--jm-body); color: var(--jm-fg-soft); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.jm-panel__pos { font: .8rem var(--jm-stamp); color: var(--jm-fg-soft); white-space: nowrap; }
/* first / last stop: no wrap-around; the button stays, dashed and inert, and says "first stop" / "last stop" */
.jm-panel__nav .jm-btn.is-end { border-style: dashed; box-shadow: none; }
.jm-panel__nav .jm-btn.is-end small { font-style: italic; }

.jm-tolist { display: flex; justify-content: center; align-items: center; gap: .45rem; height: 3rem; color: var(--jm-fg); font: 800 .95rem var(--jm-body); text-decoration: none; }
.jm-tolist:hover { text-decoration: underline; }

/* ---------- accessible list of stops (also the no-JS view) ---------- */
.jm-list { max-width: 76rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; color: var(--jm-fg); }
.jm-list h2 { margin: 0 0 .3rem; font: 800 clamp(1.6rem, 3vw, 2.2rem)/1.1 var(--jm-display); }
.jm-list__intro { margin: 0 0 1.4rem; color: var(--jm-fg-soft); max-width: 44rem; }
.jm-list__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1.2rem; align-items: start; }
.jm-list__journey { padding: 1rem 1.1rem; background: var(--jm-bg); border: 2px solid var(--jm-fg); border-radius: 16px; box-shadow: var(--jm-hard); border-top: 8px solid var(--accent, var(--jm-fg)); scroll-margin-top: 1rem; }
.jm-list__journey h3 { margin: 0 0 .2rem; font: 800 1.25rem/1.15 var(--jm-display); }
.jm-list__year { font: 400 1rem var(--jm-stamp); color: var(--jm-fg-soft); margin-right: .2rem; }
.jm-list__tag { font: 700 .72rem var(--jm-body); text-transform: uppercase; letter-spacing: .06em; padding: .05rem .4rem; border: 1.5px solid currentColor; border-radius: 6px; vertical-align: middle; }
.jm-list__sub { margin: 0 0 .7rem; color: var(--jm-fg-soft); font-size: .92rem; }
.jm-list__sub a, .jm-list__stop a { color: var(--jm-fg); }
.jm-list__stops { margin: 0; padding-left: 1.8rem; display: grid; gap: .45rem; }
.jm-list__stop { line-height: 1.35; }
.jm-list__stop::marker { font: .85rem var(--jm-stamp); color: var(--jm-fg-soft); }
.jm-list__place { font-weight: 800; }
.jm-list__meta { display: block; font-size: .84rem; color: var(--jm-fg-soft); }
.jm-list__posts { display: block; font-size: .88rem; }
.jm-list__empty { color: var(--jm-fg-soft); }

/* ---------- small screens: chips scroll, legend folds, panel becomes a bottom sheet ---------- */
@media (max-width: 760px) {
  .jm { padding: 6px 6px 0; }
  .jm-frame { height: calc(100vh - var(--jm-top) - 3rem - var(--tabbar-h, 0px)); height: calc(100svh - var(--jm-top) - 3rem - var(--tabbar-h, 0px)); min-height: 400px; }
  .jm-top { top: 12px; left: 12px; right: 12px; gap: .4rem; }
  .jm-chapters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 4px 5px 0; margin-bottom: -5px; }
  .jm-chapters::-webkit-scrollbar { display: none; }
  .jm-chip { min-height: 36px; font-size: .84rem; }
  .jm-chip__swatch { width: 22px; }
  .jm-play { min-height: 36px; width: 38px; padding: 0; }
  .jm-play__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .jm-controls { left: auto; right: 14px; top: auto; bottom: 64px; transform: none; gap: .4rem; }
  .jm-controls .jm-btn--icon { width: 38px; min-height: 38px; }
  .jm-compass { width: 46px; height: 46px; }
  .jm-compass__rose { width: 42px; height: 42px; }
  .jm-legend { top: 60px; right: 12px; width: min(230px, calc(100% - 24px)); }
  .jm-hud { top: 108px; padding-left: .7rem; gap: .4rem; }
  .jm-hud__line { font-size: .85rem; }
  .jm-hud__vehicle { display: none; }
  .jm-hud__follow { width: 34px; padding: 0; }
  .jm-hud__follow-label { display: none; }
  .jm-inset { left: 12px; bottom: 44px; }
  .jm-inset__btn { width: 128px; }
  .jm-inset__cap { font-size: .9rem; }
  .jm-inset__card { width: calc(100vw - 42px); }
  .jm-inset__map { height: min(300px, 42svh); }
  .jm-bottom { left: 12px; right: 12px; bottom: 10px; }
  .jm-coords { display: none; }
  .jm-credit { font-size: .62rem; max-width: 62%; }
  .jm-postcard { left: 12px; bottom: 50px; width: 190px; }
  .jm-panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 64%; border-radius: 20px 20px 0 0; border-bottom: 0;
    transform: translateY(calc(100% + 30px)); box-shadow: 0 -10px 30px -12px rgba(20,30,40,.5); }
  .jm-panel.is-open { transform: none; }
  .jm-panel__grip { display: block; width: 44px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: color-mix(in srgb, var(--jm-fg) 35%, transparent); flex: none; }
  .jm-panel h2 { font-size: 1.45rem; }
  .jm-polaroid { max-width: 300px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 760px) {
  .jm-legend:not([open]) { width: auto; }
  .jm-legend:not([open]) summary { padding: .3rem .6rem; min-height: 34px; }
  .jm-legend:not([open]) summary::after { display: none; }
}

/* Safari 16.0-16.1 (and other engines without color-mix): a declaration whose var()-containing value
   cannot compute falls back to its initial value (no border, transparent), so restate the essentials. */
@supports not (color: color-mix(in srgb, red, blue)) {
  .jm-frame::after { border: 1.5px solid var(--jm-ink); }
  .jm-pin.is-selected .jm-pin__body { box-shadow: 0 0 0 2px var(--jm-ink), 0 0 0 6px rgba(30, 43, 58, .22), 0 6px 10px -2px rgba(30,43,58,.5); }
  .jm-chip[aria-pressed="true"], .jm-hud__follow[aria-pressed="true"] { background: var(--jm-bg-2); }
  .jm-coords, .jm-credit { background: var(--jm-land); }
  .jm-badge { background: var(--jm-bg-2); }
  .jm-panel__nav { border-top: 2px dashed var(--jm-fg-soft); }
  .jm-panel__grip { background: var(--jm-fg-soft); }
}

@media (prefers-reduced-motion: reduce) {
  .jm *, .jm *::before, .jm *::after { transition: none !important; animation: none !important; }
}
/* the site's own "Reduce motion" toggle (site.js sets html[data-motion="reduce"]) */
:root[data-motion="reduce"] .jm *, :root[data-motion="reduce"] .jm *::before, :root[data-motion="reduce"] .jm *::after { transition: none !important; animation: none !important; }