/* The map keeps its own chart palette. Light is the approved paper chart;
     dark is a candlelit version of it (warm parchment, ink-blue sea, cream
     ink, muted gold highways) rather than the site's charcoal surfaces. */
  @supports (color: light-dark(white, black)) {
    .map, .map-preview-frame, .street-inset {
      --bg: light-dark(#FFFCF5, #2B251D);
      --panel: light-dark(#FFFFFF, #332C22);
      --text: light-dark(#25221D, #EFE4CC);
      --text-quiet: light-dark(#514B42, #CDBF9F);
      --tint-1: light-dark(#D7F3FF, #16303A);
      --tint-3: light-dark(#FFFFD6, #6E5B2A);
      --accent: light-dark(#00517A, #8CC4DC);
      --line: light-dark(#D9D1C3, #5A4E3B);
    }
  }
  .map { position: relative; height: min(78vh, 780px); min-height: 460px; border: 2px solid var(--text); border-radius: 18px;
         box-shadow: 10px 12px 0 var(--brand-pink); overflow: hidden; background: var(--tint-1); outline: none;
         touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; cursor: grab; }
  .map:focus-visible { box-shadow: 10px 12px 0 var(--brand-pink), 0 0 0 4px var(--brand-yellow); }
  .map.dragging { cursor: grabbing; }
  .map:fullscreen { border-radius: 0; box-shadow: none; }
  #svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

  /* land and water */
  .lining path, .lining use { fill: none; stroke: var(--accent); stroke-linejoin: round; vector-effect: non-scaling-stroke; }
  .land { fill: var(--bg); stroke: var(--text); stroke-width: 1.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
  .lakes { fill: var(--tint-1); stroke: var(--text); stroke-width: .9; vector-effect: non-scaling-stroke; }
  .detail, .map.close .base { display: none; }
  .map.close .detail { display: inline; }
  .borders { fill: none; stroke: var(--text); stroke-width: .9; stroke-dasharray: 5 2 1 2; opacity: .55; vector-effect: non-scaling-stroke; }
  .states { fill: none; stroke: var(--text); stroke-width: .7; stroke-dasharray: 1 3; stroke-linecap: round; opacity: .5; vector-effect: non-scaling-stroke; display: none; }
  .map.mid .states { display: inline; }
  .towns circle { r: calc(2.2px * var(--inv, 1)); fill: var(--text); opacity: .7; }
  .towns text { font: calc(12px * var(--inv, 1)) var(--font); fill: var(--text-quiet); stroke: var(--bg);
                stroke-width: calc(3px * var(--inv, 1)); transform: translate(calc(5px * var(--inv, 1)), calc(4px * var(--inv, 1))); }

  /* streets: OpenStreetMap, drawn like an engraved city plan */
  #streets { display: none; }
  .map.street #streets { display: inline; }
  .area .plate { fill: var(--bg); }
  .area .rim { fill: none; stroke: var(--text); stroke-width: 1.4; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; opacity: .6; }
  .area path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
  .area .pk { fill: var(--tint-3); stroke: var(--text); stroke-width: .6; stroke-dasharray: 1 2; }
  .area .wa { fill: var(--tint-1); fill-rule: evenodd; stroke: var(--accent); stroke-width: .8; }
  .area .w { stroke: var(--brand-blue); stroke-width: 3; opacity: .8; }
  .area .rail { stroke: var(--text); stroke-width: 1; stroke-dasharray: 6 3; }
  .area .r4 { stroke: var(--text); stroke-width: .5; opacity: .45; display: none; }
  .area .r3 { stroke: var(--text); stroke-width: .9; opacity: .75; display: none; }
  .area .r2.casing { stroke: var(--text); stroke-width: 4.2; } .area .r2.fill { stroke: var(--bg); stroke-width: 2.2; }
  .area .r1.casing { stroke: var(--text); stroke-width: 6; } .area .r1.fill { stroke: var(--tint-3); stroke-width: 3.8; }
  .map.street2 .area .r3 { display: inline; }
  .map.street3 .area .r4 { display: inline; }
  .stname { font: italic calc(11.5px * var(--kinv, 1)) var(--font); fill: var(--text); stroke: var(--bg); stroke-width: calc(3.5px * var(--kinv, 1));
            paint-order: stroke; letter-spacing: .03em; display: none; }
  .map.street2 .stname.r1, .map.street2 .stname.r2, .map.street3 .stname { display: inline; }
  .map.street .towns, .map.street .borders, .map.street .states, .map.regional .states { display: none; }
  .osm { position: absolute; right: 16px; bottom: 44px; z-index: 1; font: 11px var(--font-ui); background: var(--bg);
         border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; display: none; }
  .map.regional .osm { display: block; }
  /* regional layer: highways, rivers, lakes */
  .region path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
  .region .wa { fill: var(--tint-1); fill-rule: evenodd; stroke: var(--accent); stroke-width: .8; }
  .region .rv { stroke: var(--brand-blue); stroke-width: 1.2; opacity: .5; }
  .region .p { stroke: var(--text); stroke-width: .8; opacity: .6; }
  .region .t.casing { stroke: var(--text); stroke-width: 3.2; } .region .t.fill { stroke: var(--bg); stroke-width: 1.6; }
  .region .m.casing { stroke: var(--text); stroke-width: 4.6; } .region .m.fill { stroke: var(--tint-3); stroke-width: 2.8; }
  .region .ref { font: 700 calc(10px * var(--kinv, 1)) var(--font-ui); letter-spacing: .06em; fill: var(--text); stroke: var(--bg);
                 stroke-width: calc(3.5px * var(--kinv, 1)); paint-order: stroke; dominant-baseline: central; }
  .map.street .region .ref { display: none; }

  .region.wide { transition: opacity .2s; }
  .hills path { fill: var(--bg); stroke: var(--text); stroke-width: .8; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .hills .hatch { fill: none; stroke-width: .6; }
    svg text { paint-order: stroke; stroke-linejoin: round; }
  .ocean { font: italic calc(15px * var(--inv, 1)) var(--font); fill: var(--accent); letter-spacing: .08em; stroke: var(--tint-1); stroke-width: calc(3px * var(--inv, 1)); text-anchor: middle; }
  .sea { font: italic calc(13px * var(--inv, 1)) var(--font); fill: var(--accent); stroke: var(--tint-1); stroke-width: calc(3px * var(--inv, 1)); text-anchor: middle; display: none; }
  .map.mid .sea, .map.close .sea { display: inline; }
  .map.mid .ocean { display: none; }
  .route { fill: none; stroke: var(--text); stroke-width: 1.2; stroke-dasharray: 1 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .routelabel { font: italic calc(13px * var(--inv, 1)) var(--font); fill: var(--text-quiet); stroke: var(--tint-1); stroke-width: calc(3px * var(--inv, 1)); }
  .map.close .decor, .map.close .hills { display: none; }
  .fine path { stroke: var(--text); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
  .fine path:not([fill]) { fill: none; }
  .fine .ripple { stroke: var(--accent); opacity: .5; }
  .note { font: 17px var(--font-note); fill: var(--text); stroke: var(--tint-1); stroke-width: 4px; }

  /* markers: constant screen size, rebuilt on zoom */
  .mk .dot { stroke: var(--text); stroke-width: 1.5; }
  .mk .ring { fill: var(--brand-yellow); stroke: var(--text); stroke-width: 1.5; }
  .mk .count { font: 700 12px var(--font-ui); fill: var(--text); text-anchor: middle; dominant-baseline: central; stroke: none; }
  .mk text { stroke: var(--bg); stroke-width: 4px; }
  .mk .city { font: 700 11px var(--font-ui); letter-spacing: .13em; text-transform: uppercase; fill: var(--text); }
  .mk .shop { font: italic 15px var(--font); fill: var(--text); }
  .mk .score { font: 600 11px var(--font-ui); fill: var(--text-quiet); }
  .mk a, .mk .zoom { cursor: pointer; }
  .mk a:hover .shop, .mk a:focus-visible .shop { fill: var(--accent); text-decoration: underline; }
  .mk a:focus-visible text { stroke: var(--brand-yellow); stroke-width: 7px; }
  .mk .zoom:focus-visible .ring { stroke-width: 4; }
  .mk a:focus, .mk .zoom:focus { outline: none; }
  .mk.test .dot, .mk.test .ring { fill: #CFC7B8; }

  /* chrome over the map */
  .controls { position: absolute; top: 14px; right: 14px; display: flex; flex-direction: column; gap: 8px; z-index: 2; }
  .controls button { width: 44px; height: 44px; border: 2px solid var(--text); border-radius: 12px; background: var(--panel);
                     font: 700 20px/1 var(--font-ui); color: var(--text); cursor: pointer; box-shadow: 3px 3px 0 var(--text); }
  .controls button:hover { background: var(--brand-yellow); }
  .controls button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  .controls .wide { width: auto; padding: 0 12px; font-size: 13px; }
  .compass { position: absolute; top: 14px; left: 16px; width: 74px; height: 96px; z-index: 1; pointer-events: none; }
  .cartouche { position: absolute; left: 16px; bottom: 16px; z-index: 1; background: var(--bg); border: 1.6px solid var(--text);
               padding: 5px; pointer-events: none; }
  .cartouche div { border: .8px solid var(--text); padding: 10px 22px 10px; text-align: center; }
  .cartouche b { font: 700 21px var(--font); }
  .cartouche mark { background: var(--brand-yellow); border-radius: 6px; padding: 0 3px; color: inherit; }
  .cartouche i { display: block; font: italic 13px var(--font); color: var(--text-quiet); margin-top: 2px; }
  .cartouche small { display: block; font: italic 11px var(--font); color: var(--text-quiet); margin-top: 6px; }
  .cartouche small::before { content: ""; display: block; width: 130px; height: 5px; margin: 0 auto 4px;
    background: linear-gradient(90deg, var(--text) 25%, transparent 25% 50%, var(--text) 50% 75%, transparent 75%); outline: .8px solid var(--text); }
  .hint { position: absolute; right: 16px; bottom: 14px; z-index: 1; font: 16px var(--font-note); background: color-mix(in srgb, var(--tint-1) 85%, transparent);
          padding: 2px 8px; border-radius: 8px; pointer-events: none; }
  .stress { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 2; font: 700 12px var(--font-ui);
            background: var(--pink-soft); border: 1.5px solid var(--text); border-radius: 999px; padding: 4px 12px; }
  @media (max-width: 700px) {
    .map { height: 72vh; }
    .cartouche { transform: scale(.62); transform-origin: left bottom; }

    .ocean { display: none; }
    .hint { display: none; }
    .compass { width: 56px; }
  }
  @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }

.map { box-shadow:none; min-height:420px; margin-block:1rem; }
.map.engaged { touch-action:none; }
.map .mk a:focus-visible, .map .mk [role=button]:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.map .mk .count { fill:var(--ink); }
.map .cartouche mark { color:var(--ink); }
.map .label-paper { fill:var(--bg); stroke:var(--line); stroke-width:1; }
.map .controls button:hover { color:var(--ink); }
.map .osm { display:block; bottom:0; left:0; right:0; margin:0; border-radius:0; font:12px/1.5 var(--font-ui); padding:5px 8px; }
.map .osm a { display:inline-block; min-height:44px; align-content:center; }
.map .cartouche { bottom:68px; }
.map .hint { bottom:68px; }
.map .controls { gap:6px; }
.map .controls .wide { max-width:110px; height:auto; min-height:44px; line-height:1.3; }
.map.expanded { position:fixed; inset:0; width:100%; height:100dvh; z-index:100; margin:0; border-radius:0; }
.map:fullscreen { width:100%;height:100%; }
.map-actions { display:flex;flex-wrap:wrap;gap:1rem;align-items:center; }
.map-list { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:1rem;padding:0;list-style:none; }
.map-list a { display:inline-block;min-height:44px;align-content:center; }
.map-list li { border:1px solid var(--line);border-radius:12px;padding:1rem;background:var(--panel); }
.map-list p { margin:0; }
.map-status { min-height:1.5em;font-family:var(--font-ui); }
.map.street .towns { display:none; }
@media(max-width:700px){.map .cartouche{display:none}.map .compass{width:40px;height:60px}.map{height:65vh}.map .controls{right:8px;top:8px}}
@media(prefers-reduced-motion:reduce){.map *{transition:none!important;animation:none!important}}

/* Compact page furniture: the map leads, instructions stay available to assistive technology. */
.vh { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.map-lede { margin:.25rem 0 1rem; }
.map-skip { position:absolute; left:-9999px; }
.map-skip:focus { position:static; display:inline-block; margin-bottom:.75rem; }
.map .gestures { display:none; position:absolute; left:50%; bottom:3.6rem; transform:translateX(-50%); z-index:2; min-height:44px;
  padding:.5rem 1rem; border:2px solid var(--text); border-radius:999px; background:var(--panel); color:var(--text);
  font:700 .875rem/1.2 var(--font-ui); box-shadow:3px 3px 0 var(--text); white-space:nowrap; }
@media (pointer:coarse), (max-width:700px) { .map .gestures { display:block; } }
@media (max-width:700px) {
  .map { height:min(60vh,520px); min-height:340px; }
  .map-lede { font-size:1rem; }
}

/* Chart-instrument controls: 32 px to the eye, 44 px to the finger. */
.map .controls { top:12px; right:12px; gap:8px; align-items:flex-end; }
.map .controls button { position:relative; width:32px; height:32px; min-height:0; max-width:none; padding:0; display:grid; place-items:center;
  border:1.5px solid var(--text); border-radius:8px; background:var(--panel); color:var(--text);
  font:600 18px/1 var(--font-ui); box-shadow:2px 2px 0 color-mix(in srgb, var(--text) 35%, transparent); }
.map .controls button::before { content:""; position:absolute; inset:-6px; }
.map .zoom-pair { display:flex; flex-direction:column; }
.map .zoom-pair button:first-child { border-radius:8px 8px 0 0; border-bottom-width:.75px; box-shadow:none; }
.map .zoom-pair button:last-child { border-radius:0 0 8px 8px; border-top-width:.75px; }
.map .zoom-pair button::before { inset:-6px -6px 0; }
.map .zoom-pair button:last-child::before { inset:0 -6px -6px; }
.map .controls button:hover { background:var(--brand-yellow); color:var(--ink); }
@media (max-width:700px) { .map .controls { top:8px; right:8px; } }
.map .gestures { min-height:0; padding:.35rem .8rem; border-width:1.5px; font-size:.8125rem; bottom:4.5rem;
  box-shadow:2px 2px 0 color-mix(in srgb, var(--text) 35%, transparent); }
.map .gestures::before { content:""; position:absolute; inset:-8px -4px; }

/* Engraved labels: caps city line, italic serif name, paper halo; no boxes. */
.map .label-hit { fill:transparent; }
.map .mk text { paint-order:stroke; stroke:var(--bg); stroke-width:4px; stroke-linejoin:round; }
.map .mk .city { font:700 11px var(--font-ui); letter-spacing:.13em; fill:var(--text); }
.map .mk .shop { font:italic 15px var(--font); fill:var(--text); }
.map .mk .shop .score { font:600 11px var(--font-ui); font-style:normal; fill:var(--text-quiet); }
.map .mk .ring { stroke-width:1.25; }
.map .mk .count { font-size:11px; }
.map .mk .dot { stroke-width:1.25; }
.map .mk a:hover .shop, .map .mk a:focus-visible .shop { fill:var(--accent); text-decoration:underline; }

/* Embedded in the field guide, above the filters. */
.field-map { margin:1rem 0 1.5rem; }
.field-map .map { height:min(62vh,540px); min-height:360px; margin-block:0; }
.field-map .map-note { margin:.5rem 0 0; font:.875rem/1.4 var(--font-ui); color:var(--text-quiet); }
.field-map .map-status:empty { display:none; }
@media (max-width:700px) { .field-map .map { height:min(60vh,460px); min-height:320px; } }
#find:focus { outline:none; }
.field-map .map-status { margin:.5rem 0 0; font:600 .875rem/1.4 var(--font-ui); }
/* Land is drawn through <use>, which ignores non-scaling strokes; divide by the zoom instead (--inv = 1/scale). */
#world use.land { stroke-width: calc(1.2px * var(--inv, 1)); }
#world .lining use:first-child { stroke-width: calc(9px * var(--inv, 1)); }
#world .lining use:last-child { stroke-width: calc(4px * var(--inv, 1)); }
.map .mk .count { stroke: none; }