/* The map — owned by map.js; loaded after museum.css and shares its tokens
   (--wall, --ink, --ink-2, --faint, --hair, --tint, --serif, --ease, --top).
   White land on white wall: the coasts and borders are hairlines, the
   countries with pictures carry a faint tint and a darker line, the pins are
   black with white numerals. */
.maphead{margin:0 0 var(--headgap2,1.6rem)}

/* a phone (map.js sets .mm-phone): the map runs up behind the heading to the
   bar, its land cleared around the words, and down to the list's first line.
   The heading stays above the map; only its link takes a tap, so a finger
   anywhere else on the map moves the map */
.maphead:has(+ * > .mm-phone){position:relative;z-index:2;pointer-events:none}
.maphead:has(+ * > .mm-phone) a{pointer-events:auto}
.mmap.mm-phone.mm-country{row-gap:0}
/* the list is first in the page's order (for the keyboard); the map is drawn first */
.mmap{display:grid;grid-template-columns:minmax(0,1fr) 16rem;gap:clamp(1.8rem,4vw,3.6rem);align-items:start}
.mm-box{order:-1}
@media (max-width:819.98px){.mmap{grid-template-columns:minmax(0,1fr);gap:1.6rem}}
/* a page that draws the list and controls itself (map.js chrome: false): the map takes the whole width */
.mmap.mm-bare{grid-template-columns:minmax(0,1fr)}
/* a country whose places carry no coordinates: just the list */
.mm-nomap{grid-template-columns:minmax(0,24rem)}
.mm-nomap .mm-box{display:none}

/* ── the map ── */
.mm-box{position:relative;width:100%;min-width:0}
/* beside a long list the map stays in view */
@media (min-width:820px){.mm-box{position:sticky;top:calc(var(--top,20px) + 3.4rem)}}
/* a desktop's map page fits its window (map.js fitRoom, mm-fit: Sha, Oct 11):
   the page's foot is the corner's gutter, and the list beside the map scrolls
   on its own, its rows' focus rings kept clear of its edges */
.view:has(.mmap.mm-fit){padding-bottom:calc(var(--top) + env(safe-area-inset-bottom))}
.mmap.mm-fit > .mm-side{max-height:var(--mm-fit,none);overflow-y:auto;overscroll-behavior:contain;margin:-4px;padding:4px}
/* a level's page scrolls on to its pictures: the wheel over its list does too (held, it did nothing) */
.mmap.mm-lv.mm-fit > .mm-side{overscroll-behavior:auto}
/* the box clipped while its first height eases (map.js easeBox) */
.mm-box.mm-easing{overflow:hidden}
.mm-box.mm-failed{height:auto}
/* the drawing's colours are roles a page or the shared kit can set, each the page's own when unset (#111 ink, white
   wall, as before): its lines, the ink ones and the softer ones at an alpha of it (--ink-l: --mm-line, else
   --mm-ink); its pins and names (--ink-d: --mm-ink); the wall it knocks out of them, its lakes (--wall-d:
   --mm-wall, as the veils and halos map.js paints read it, wallColor); a level's areas' and the parks' tint
   (--tint-d: --mm-tint, else the ink at 3.5%, so a dark wall's light ink tints it light). The ink lines take --ink-l
   whole, so a level's line easing in (flyPaint) is the line at rest. The maps kit's dark (labs/maps/system/kit/,
   renderer-museum.js since 1.1.1) sets --mm-wall, --mm-ink and the city's roles below on the map's box and reads
   them, with their fallbacks to --wall and --ink, as a contract: a role renamed or a fallback changed is told to
   the kit's chat (rhapsode: LAYOUT) first (Oct 26) */
.mm-svg{--ink-l:var(--mm-line,var(--mm-ink,var(--ink,#111)));--ink-d:var(--mm-ink,var(--ink,#111));
  --wall-d:var(--mm-wall,var(--wall,#fff));--tint-d:var(--mm-tint,color-mix(in srgb,var(--ink-d) 3.5%,transparent));
  display:block;overflow:visible;font-family:var(--serif);font-variation-settings:"STYL" 100;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  /* unzoomed, a finger scrolls the page past the map; zoomed in, it moves the map */
  touch-action:pan-y}
.mm-svg.mm-zoomed{touch-action:none;cursor:grab}
.mm-svg.mm-grab{cursor:grabbing}
.mm-svg:focus{outline:none}
.mm-svg:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
/* the drawn land is moved and scaled while the view moves: its lines stay hairlines */
.mm-geo path{vector-effect:non-scaling-stroke}
/* while the view moves (map.js motion, mm-mv) the masks are let go, and the wall's white laid over the
   land draws the same picture: the edges' fades (.mm-veil), a phone's clearings and the fade under its
   bar (.mm-kv, laid out at rest too, so a clearing easing in or out goes on easing under it), the band
   along a level's ink (.mm-halo). At rest the masks draw the map as they always have */
.mm-svg.mm-mv [mask]{mask:none;-webkit-mask:none}
.mm-veil,.mm-halo{display:none}
.mm-svg.mm-mv .mm-veil,.mm-svg.mm-mv .mm-halo{display:inline}
.mm-kv{visibility:hidden}
.mm-svg.mm-mv .mm-kv{visibility:visible}
.mm-veil,.mm-kv,.mm-halo{pointer-events:none}
.mm-halo{fill:none;stroke-linejoin:round;stroke-linecap:round}
/* arrivals ease in with the Web Animations API (map.js fadeIn); leaving, as here */
.mm-geo,.mm-divs,.mm-namelink{transition:opacity .45s var(--ease)}
.mm-geo.mm-leave,.mm-divs.mm-leave,.mm-namelink.mm-leave{opacity:0;pointer-events:none}
.mm-svg.first{animation:mm-in .6s var(--ease) both}
@keyframes mm-in{from{opacity:0}to{opacity:1}}
.mm-msg{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;text-align:center;
  font-style:italic;color:var(--faint);transition:opacity .4s var(--ease);pointer-events:none}
.mm-msg.gone{opacity:0}
.mm-msg.fail{position:static;display:block;text-align:left;color:var(--ink-2)}

.mm-coast{fill:none;stroke:color-mix(in srgb,var(--ink-l) 30%,transparent);stroke-width:.6;stroke-linejoin:round}
.mm-border{fill:none;stroke:color-mix(in srgb,var(--ink-l) 15%,transparent);stroke-width:.5;stroke-linejoin:round}
.mm-has{fill:color-mix(in srgb,var(--ink-l) 4.5%,transparent);stroke:color-mix(in srgb,var(--ink-l) 55%,transparent);stroke-width:.6;stroke-linejoin:round;cursor:pointer;transition:fill .3s var(--ease)}
.mm-has.hot{fill:color-mix(in srgb,var(--ink-l) 10%,transparent)}
/* many countries with pictures: a lighter tint, so the map stays white */
.mm-many .mm-has{fill:color-mix(in srgb,var(--ink-l) 2.2%,transparent);stroke:color-mix(in srgb,var(--ink-l) 42%,transparent)}
.mm-many .mm-has.hot{fill:color-mix(in srgb,var(--ink-l) 8%,transparent)}
/* a country: its neighbours recede, its own outline is ink; a neighbour with
   pictures is only a slightly darker line until it is pointed at */
.mm-country .mm-coast{stroke:color-mix(in srgb,var(--ink-l) 22%,transparent)}
.mm-country .mm-border{stroke:color-mix(in srgb,var(--ink-l) 12%,transparent)}
.mm-country .mm-has{fill:color-mix(in srgb,var(--ink-l) 0%,transparent);stroke:none}
.mm-hasline{fill:none;stroke:color-mix(in srgb,var(--ink-l) 34%,transparent);stroke-width:.6;stroke-linejoin:round;pointer-events:none}
.mm-country .mm-has.hot{fill:color-mix(in srgb,var(--ink-l) 5%,transparent)}
/* the lakes: the wall's white over the land, a hairline shore (as a coast) */
.mm-lake{fill:var(--wall-d);stroke:none;pointer-events:none}
.mm-shore{fill:none;stroke:color-mix(in srgb,var(--ink-l) 30%,transparent);stroke-width:.6;stroke-linejoin:round;pointer-events:none}
.mm-country .mm-shore{stroke:color-mix(in srgb,var(--ink-l) 22%,transparent)}
.mm-focus{fill:none;stroke:var(--ink-l);stroke-width:.85;stroke-linejoin:round;pointer-events:none}
/* a level of the country (map.js at): its outline in ink, a place's own with
   it; the country's line and the levels' above it fall to the coast's weight;
   its areas tinted as the parks are, each a way in; its places' own outlines
   a hairline. The softer lines give way along the ink (map.js inkMask): one
   line per edge */
.mm-level,.mm-own{fill:none;stroke:var(--ink-l);stroke-width:.85;stroke-linejoin:round;pointer-events:none}
.mm-focus.mm-quiet,.mm-level.mm-quiet{stroke:color-mix(in srgb,var(--ink-l) 22%,transparent);stroke-width:.6}
.mm-child{fill:var(--tint-d);stroke:color-mix(in srgb,var(--ink-l) 42%,transparent);stroke-width:.55;stroke-linejoin:round;transition:fill .3s var(--ease)}
.mm-carea{cursor:pointer}
.mm-carea.hot{fill:color-mix(in srgb,var(--ink-l) 7%,transparent)}
.mm-cplace{fill:none;pointer-events:none}
/* a line a level change is easing away: drawn, never a way anywhere */
.mm-going{pointer-events:none}
.mm-geo .mm-mk{vector-effect:none}
/* a region's land on the country's own view: unpainted, a way in; under the
   mouse its outline eases in as a hairline (Sha, Oct 11: on every country page) */
.mm-reghit{fill:color-mix(in srgb,var(--ink-l) 0%,transparent);stroke:none;cursor:pointer}
.mm-hov,.mm-hover{pointer-events:none}
.mm-hover{fill:none;stroke:color-mix(in srgb,var(--ink-l) 50%,transparent);stroke-width:.6;stroke-linejoin:round}
.mm-div{fill:none;stroke:color-mix(in srgb,var(--ink-l) 20%,transparent);stroke-width:.5;stroke-linejoin:round;pointer-events:none}
.mm-divhas{fill:none;stroke:color-mix(in srgb,var(--ink-l) 50%,transparent);stroke-width:.6;stroke-linejoin:round;pointer-events:none}
.mm-divland{fill:color-mix(in srgb,var(--ink-l) 0%,transparent);stroke:none;pointer-events:none;transition:fill .3s var(--ease)}
.mm-divland.hot{fill:color-mix(in srgb,var(--ink-l) 5%,transparent)}
/* the national parks: every one a faint line, one that holds pictures in ink
   and a way to its room (a click, or a tap: a drag that starts on it still
   moves the map); a touch goes through the faint ones to the map */
.mm-park{fill:var(--tint-d);stroke:color-mix(in srgb,var(--ink-l) 42%,transparent);stroke-width:.55;stroke-linejoin:round;pointer-events:none;transition:fill .3s var(--ease),stroke .3s var(--ease)}
.mm-park.mm-parkhas{stroke:var(--ink-l);stroke-width:.85}
.mm-park.mm-parkhas[data-href]{pointer-events:visiblePainted;cursor:pointer}
.mm-park.hot{fill:color-mix(in srgb,var(--ink-l) 7%,transparent);stroke:color-mix(in srgb,var(--ink-l) 60%,transparent)}
.mm-park.mm-parkhas.hot{stroke:var(--ink-l)}
.mm-plate{fill:none;stroke:var(--hair);stroke-width:1;shape-rendering:crispEdges}
.mm-cap{font-size:12px;fill:var(--ink-2);pointer-events:none}
/* a pin's name goes where its pin goes */
.mm-namelink{cursor:pointer}
.mm-namelink .hit{fill:rgba(255,255,255,0);pointer-events:all}
.mm-namelink .ul{stroke:var(--ink-d);stroke-width:1;shape-rendering:crispEdges;opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
.mm-namelink .mm-cap~.ul{stroke:var(--ink-2)}

/* pins */
.mm-pin{cursor:pointer;outline:none;transition:opacity .35s var(--ease)}
.mm-pin .hit{fill:rgba(255,255,255,0)}
.mm-pin .dot{fill:var(--ink-d);transition:transform .3s var(--ease)}
.mm-pin .ring{fill:none;stroke:var(--ink-d);stroke-width:1;opacity:0;transition:opacity .42s var(--ease)}   /* .42 s: a place's ring (cur) comes and goes with its level, never more than a fifth of its ink in a frame */
/* a park with pictures smaller than its pin: the park's line, round the pin, while the parks show */
.mm-pin .pring{fill:none;stroke:var(--ink-d);stroke-width:.85;opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.mm-pin .pring.on{opacity:1}
.mm-pin.hot .dot{transform:scale(1.16)}
.mm-pin:focus-visible .ring,.mm-pin[aria-expanded="true"] .ring{opacity:1}
/* the place a level is: its pin's ring */
.mm-pin.cur .ring{opacity:1}
.mm-pin .num{fill:var(--wall-d);text-anchor:middle;font-weight:500;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1;pointer-events:none}
.mm-pin.dim{opacity:.18}
/* a museum's other layer (map.js opts.layer): a pin of one place is a dot with no number, filled
   where its work was seen, open where it was made; one that holds only places made is open too */
.mm-pin.mm-made .dot{fill:var(--wall-d);stroke:var(--ink-d);stroke-width:1.5}
.mm-pin.mm-made .num{fill:var(--ink-d)}
.mm-pin.mm-in0{opacity:0}   /* made, before it eases in (map.js easeIn) */
/* a layer's pins come in, go out, and fade with a work chosen, from a standing start (map.js EASE_ON):
   on the page's ease a pin coming into the frame mid-flight had a third of its ink in a frame */
.mm-layer .mm-pin{transition:opacity .42s cubic-bezier(.42,0,.32,1)}
/* a layer's merged pin, as its places merge or part: the number of the pin going goes first, the
   new one's comes in a little after (map.js leavePin, easeIn), so no two show at once in one ring.
   Its fade under the pin's own (TW, 420 ms) loses no more than about 12% of its ink a frame: over
   140 ms it lost 15% (Oct 14) */
.mm-layer .mm-pin .num{transition:opacity .26s cubic-bezier(.42,0,.32,1) .21s}
.mm-layer .mm-pin.mm-in0 .num{opacity:0;transition:none}
.mm-layer .mm-pin.mm-leave .num{opacity:0;transition:opacity .21s linear}
/* and it is ringed, as no pin of the pictures' map is, so its number reads as how many places it
   holds, not as a count of pictures (Oct 13); a focused or open one's ring heavier */
.mm-layer .mm-pin.many .ring{opacity:1;stroke-width:.75}
.mm-layer .mm-pin.many:focus-visible .ring,.mm-layer .mm-pin.many[aria-expanded="true"] .ring{stroke-width:1.75}
/* a work's title in a pin's name, set as a work's title is (museum.css's italic alternates) */
.mm-it{font-style:italic;font-feature-settings:"ss04" 1,"ss09" 1,"lnum" 1}
/* a pin leaving, or outside the view */
.mm-pin.mm-leave{opacity:0;pointer-events:none}
.mm-pin.off{opacity:0;pointer-events:none}
/* a pin the search has dimmed still shows whole while the keyboard is on it */
.mm-pin.dim:focus-visible{opacity:1}
.mm-name{font-size:13px;fill:var(--ink-d);paint-order:stroke;stroke:var(--wall-d);stroke-width:6px;stroke-linejoin:round;stroke-linecap:round;pointer-events:none}
.mm-tip{opacity:0;transition:opacity .3s var(--ease)}
.mm-tip.on{opacity:1}

/* the map's controls under its foot (inside the frame, a zoomed map's lines
   ran through them): the divisions' word, faint until it is on, as the page's
   other switches are; + and −, plain glyphs. On a touch screen a pinch and a
   double tap zoom in, so + goes, and − shows only while the map is zoomed in,
   the way back out without a pinch. */
.mm-ctl{position:absolute;left:0;z-index:4;display:flex;align-items:baseline;gap:.15rem;transform:translateY(calc(-100% - 4px));
  animation:mm-in .6s var(--ease) .1s both}
.mm-ctl button{font:inherit;font-size:.98rem;line-height:1.2;color:var(--faint);background:none;border:0;border-radius:0;
  margin:0;padding:.2rem .4rem;min-width:1.8rem;cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:color .3s var(--ease),opacity .3s var(--ease)}
.mm-ctl button:first-child{padding-left:0;min-width:0}
.mm-ctl .mm-z{color:var(--ink-2);font-size:1.2rem;font-variant-numeric:lining-nums}
.mm-ctl .mm-word{font-style:italic;margin-right:.6rem}
.mm-ctl .mm-word[aria-pressed="true"]{color:var(--ink)}
.mm-ctl button[aria-disabled="true"]{opacity:.35;cursor:default}
.mm-ctl button:focus{outline:none}
.mm-ctl button:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
.mm-ctl.mm-below{transform:none}
/* a phone: on the heading's first line, at the right (map.js puts it on that line's baseline) */
.mm-ctl.mm-over{left:auto;right:0;transform:none;pointer-events:none}   /* only its buttons take a finger; a hidden − leaves the map under it */
.mm-ctl.mm-over button{pointer-events:auto}
/* the clearing under − (inside the map's mask) comes and goes with it */
.mm-kz{opacity:0;transition:opacity .4s var(--ease)}
.mm-kz.on{opacity:1}
/* a level reached in place: the clearings round the heading's new words come in as the words do, the old ones go as theirs do;
   the controls ease to the line that has room for them */
.mm-kz.mm-kh{transition:opacity .32s cubic-bezier(.42,0,.32,1)}
.mm-kz.mm-kh.mm-out{transition-duration:.18s}
.mm-ctl.mm-over.mm-move{transition:top .32s var(--ease)}
.mm-box.mm-roomctl{margin-bottom:1.9rem}
/* whose park outlines they are, quietly, while they show: at the end of the
   controls' line (under them when the line is too short), on a phone at the
   map's foot */
.mm-credit{font-size:.78rem;line-height:1.3;color:var(--faint);white-space:nowrap;opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease),visibility 0s linear .4s}
.mm-credit.on{opacity:1;visibility:visible;transition:opacity .4s var(--ease),visibility 0s}
.mm-ctl.mm-below:has(.mm-credit){right:0;flex-wrap:wrap}
.mm-ctl .mm-credit{margin-left:auto;padding-left:1rem}
/* the parks' words within it: they keep their room when they go, so the outlines' words never move;
   an outline's own credit (places-map.json's, linked as the file gives it) does the same */
.mm-cpk,.mm-cent{opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s linear .4s}
.mm-cpk.on,.mm-cent.on{opacity:1;visibility:visible;transition:opacity .4s var(--ease),visibility 0s}
/* until it shows, an outline's credit takes no room (a desktop's line, a phone's foot: map.js phoneFoot lays it again) */
.mm-cent.mm-cnew{display:none}
.mm-credit .mm-cent.mm-cgone{display:none}
/* at a level (map.js mm-lv) a desktop's credit stays within the map's width beside the controls,
   wrapping between its parts, right-aligned: the count under the map never moves for it */
.mmap.mm-lv .mm-ctl.mm-below .mm-credit{white-space:normal;text-align:right;flex:1 1 0;min-width:0}
.mmap.mm-lv .mm-ctl.mm-below .mm-credit > span{white-space:nowrap}
/* each part slides (map.js credSlide: left, top) from where it stood when another comes or goes */
.mm-ctl .mm-credit > span{position:relative}
.mmap.mm-lv .mm-ctl.mm-below .mm-credit .mm-csep{white-space:normal}   /* the line breaks only after a separator */
.mmap.mm-lv .mm-ctl .mm-credit .mm-cpk.mm-pkgone{display:none}   /* the parks' words, off, take no room at a level */
.mm-credit a{color:inherit;pointer-events:auto;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;
  text-decoration-color:var(--hair);transition:text-decoration-color .3s var(--ease)}
.mm-credit a:focus{outline:none}
.mm-credit a:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
/* a phone: one credit a line, at the right */
.mm-credit.mm-foot{display:flex;flex-direction:column;align-items:flex-end}
.mm-credit.mm-foot .mm-csep{display:none}
.mm-box > .mm-credit.mm-foot{position:absolute;right:0;z-index:3;pointer-events:none}
.mm-box.mm-roomctl2{margin-bottom:3.1rem}
/* the parks' small frames coming or going: the map's height, and the controls under it, ease */
.mm-box.mm-easeh{transition:height .45s var(--ease)}
.mm-box.mm-easeh .mm-ctl.mm-below{transition:top .45s var(--ease)}
@media (pointer:coarse){
  .mm-ctl .mm-zin{display:none}
  .mm-ctl button{padding-block:.6rem;min-height:2.75rem}   /* a finger's height, whatever the glyph's size */
  .mm-ctl .mm-zin:first-child + .mm-zout{padding-left:0;text-align:left}
  .mm-ctl button.mm-zout{opacity:0;visibility:hidden;transition:color .3s var(--ease),opacity .4s var(--ease),visibility 0s linear .4s}
  .mm-ctl.mm-in button.mm-zout{opacity:1;visibility:visible;transition:color .3s var(--ease),opacity .4s var(--ease),visibility 0s}
}
/* a phone, over the map (after the block above, and more specific, so it wins):
   − is a finger's width (2.75rem), its glyph at the right margin; beside the
   divisions' word it goes to the word's left, so the word always ends at the
   margin whether − is showing or not */
.mm-ctl.mm-over button.mm-z.mm-zout{min-width:2.75rem;padding-left:0;padding-right:0;text-align:right}
.mm-ctl.mm-over .mm-word ~ button.mm-z.mm-zout{order:-1;text-align:center}
.mm-ctl.mm-over button.mm-word{margin-right:0;padding-right:0}
.mm-ctl.mm-over .mm-word + .mm-word{margin-left:.55rem}

/* the list a merged pin opens */
.mm-pop{position:absolute;z-index:5;min-width:11rem;max-width:min(17rem,100%);background:var(--mm-wall,var(--wall));border:1px solid var(--hair);
  padding:.35rem .9rem .45rem;font-size:.95rem;opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s}
.mm-pop.open{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s}
.mm-pop ul{list-style:none;margin:0;padding:0;max-height:min(56vh,22rem);overflow-y:auto}
/* held to itself only when it has more than it shows: a list that fits lets the wheel scroll the page */
.mm-pop ul.mm-scroll{overscroll-behavior:contain}
.mm-pop li + li a{border-top:1px solid var(--hair)}
.mm-pop a{display:flex;justify-content:space-between;gap:1rem;padding:.38rem 0;text-decoration:none}
.mm-pop .k{color:var(--faint);font-variant-numeric:lining-nums proportional-nums}
.mm-pop a.mm-show{cursor:pointer}   /* a layer's place in a pin's list: it shows its place (map.js showPlace) */

/* ── the list beside it ── */
.mm-side{min-width:0;position:relative}   /* a level's rows leaving fade where they were (map.js rebuildList) */
.mm-lab{display:block;margin:0;font-size:.9rem;line-height:1.4;color:var(--ink-2)}
.mm-ph{margin-top:1.4rem}
.mm-find{display:block;width:100%;border:0;border-bottom:1px solid var(--rule,rgba(17,17,17,.45));border-radius:0;padding:.35rem 0 .5rem;margin:0;line-height:1.35;background:transparent;outline:none;font-size:16px;
  transition:border-color .3s var(--ease);-webkit-appearance:none;appearance:none}
.mm-find:focus{border-color:var(--ink)}
.mm-find::-webkit-search-cancel-button{-webkit-appearance:none}
.mm-list{list-style:none;margin:0;padding:0}
.mm-list a{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.42rem 0;border-bottom:1px solid var(--hair);text-decoration:none}
.mm-list li:first-child a{border-top:1px solid var(--hair)}
.mm-find + .mm-list li:first-child a{border-top:0}
.mm-list .v{min-width:0;overflow-wrap:anywhere;text-wrap:balance}
/* a region or an area with no room of its own: a button that looks like the rows */
.mm-list .mm-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;width:100%;margin:0;padding:.42rem 0;
  font:inherit;color:inherit;text-align:left;background:none;border:0;border-bottom:1px solid var(--hair);border-radius:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.mm-list li:first-child > .mm-row{border-top:1px solid var(--hair)}
.mm-list .mm-row:focus{outline:none}
.mm-list .mm-row:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
/* the places inside a region, and inside an area: each step in by one indent */
.mm-sub{list-style:none;margin:0;padding:0}
.mm-list .mm-sub li a,.mm-list .mm-sub li > .mm-row{border-top:0}
.mm-list .d1 > a,.mm-list .d1 > .mm-row{padding-left:1.1rem}
.mm-list .d2 > a,.mm-list .d2 > .mm-row{padding-left:2.2rem}
.mm-list .d3 > a,.mm-list .d3 > .mm-row{padding-left:3.3rem}
.mm-list .k{flex:none;color:var(--faint);font-variant-numeric:lining-nums proportional-nums}   /* Timeless's tabular figures spread 11 to '1 1' */
.mm-list .sub{color:var(--faint);font-style:italic;display:inline-block;max-width:100%}   /* goes to a second line whole ("Los Lagos Region"), wrapping only if it is longer than the line */
/* a lit row underlines the place's name only, never the region beside it,
   easing in and out. A row lights for a mouse (map.js adds .hot) and for the
   keyboard; a touch never lights it (Sha, Oct 10) */
.mm-list .nm,.mm-pop .nm{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;
  text-decoration-color:transparent;transition:text-decoration-color .3s var(--ease)}
.mm-list .hot .nm,.mm-list a:focus-visible .nm,.mm-list .mm-row:focus-visible .nm,
.mm-pop a.hot .nm,.mm-pop a:focus-visible .nm{text-decoration-color:currentColor}
/* at a place's level, its own row in the list: underlined in ink */
.mm-list a[aria-current="page"] .nm{text-decoration-color:currentColor}
/* the page's own drawing for beside the map (map.js opts.aside: a place's outline and its credit),
   under the list where the list stands beside the map: at the column's right, as the counts are,
   sized (--s, the page's drawing size) so a pair fits the column's width */
.mm-side,.mm-asides{--s:clamp(120px,11vw,160px)}
.mm-side > .mm-aside,.mm-asides > .mm-aside{margin-left:auto}
.mm-side > .mm-aside:not(.mm-aside + .mm-aside),.mm-asides > .mm-aside:not(.mm-aside + .mm-aside){margin-top:1.6rem}
.mm-side > .mm-aside + .mm-aside,.mm-asides > .mm-aside + .mm-aside{width:auto}   /* the words under the drawing: the column's width, so a credit keeps to one line */
.mm-none{margin:0;font-style:italic;color:var(--faint)}
.mm-none:not(:empty){margin-top:.6rem}
.mm-side > .mm-none:first-child{margin-top:0}
/* a layer's rows: a work's artist and the place it was seen under its title; a place's own mark,
   the pin's, before its name */
.mm-list .mm-by,.mm-list .mm-at{display:block;color:var(--ink-2);font-size:.9rem;line-height:1.35;margin-top:.12rem}
.mm-list .mm-at{color:var(--faint)}
.mm-list .mm-pl{position:relative;padding-left:1.1rem}
.mm-list .mm-kd{position:absolute;left:0;top:calc(.42rem + .5lh - 3px);width:7px;height:7px;border-radius:50%;background:var(--ink)}
.mm-list .mm-kd.made{background:none;box-shadow:inset 0 0 0 1.25px var(--ink)}

/* hover marks only with a mouse; on a touch screen they stick after a tap */
@media (hover:hover) and (pointer:fine){
  .mm-has:hover{fill:color-mix(in srgb,var(--ink-l) 10%,transparent)}
  .mm-many .mm-has:hover{fill:color-mix(in srgb,var(--ink-l) 8%,transparent)}
  .mm-country .mm-has:hover{fill:color-mix(in srgb,var(--ink-l) 5%,transparent)}
  .mm-pin:hover .dot{transform:scale(1.16)}
  .mm-namelink:hover .ul{opacity:1}
  .mm-park{pointer-events:all}
  .mm-park[data-href]{cursor:pointer}
  .mm-ctl button:not([aria-disabled="true"]):hover{color:var(--ink)}
  .mm-credit a:hover{text-decoration-color:currentColor}
}

/* ═══ the city: New York, block by block (map.js city, city.js; MU-87: the lab's look, Sha approved Oct 26) ═══
   Laid under the map's own drawing at its main frame (its pins, names, controls and the wall's white veils over
   it), shown past ATLAS_PXKM in New York, when the map's own land fades. Its colours are roles a page or the shared
   kit can set: --mm-land, --mm-water, --mm-water-rim (the coasts, banks and piers' ink), --mm-water-pool,
   --mm-park, --mm-park-pool and --mm-road (every street's grey and a lake's shore, each a fixed share of it over
   the land), each by default the lab's (slate coasts #5f7783, the washed water and parks, the grey streets). Its
   widths are CSS px on the screen at rest: each layer is drawn at one reference closeness and carries --u, its
   reference over the closeness it rests at, so a stroke-width of w x --u is w on the screen (city.js build). Its
   look's bands of closeness: the city under 30 px/km, the district 30-80, the blocks 80-200, the street from 200
   (data-look 0-3). The stage, each layer and each canvas is never hit-tested, and no layer's opacity, nor the
   stage's, reaches 1 (city.js SHOWN: WebKit draws a layer again when it does) */
.mm-box.mm-hascity > .mm-svg{position:relative;z-index:1}
.mm-city{position:absolute;left:0;top:0;z-index:0;overflow:hidden;contain:strict;pointer-events:none;opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility 0s linear .45s;
  --land:var(--mm-land,var(--mm-wall,var(--wall,#fff)));--coast:var(--mm-water-rim,#5f7783);
  --water:var(--mm-water,#dfe9ee);--water-pool:var(--mm-water-pool,#c6d8e1);--water-pool-a:.75;--water-pool-w:5;
  --park:var(--mm-park,#e3ecda);--park-pool:var(--mm-park-pool,#cddcc0);--park-pool-a:.7;
  --shore:color-mix(in srgb,var(--mm-road,#111) 48.3%,var(--land));--shore-w:.5;--deck:var(--land);--deck-w:1.6}
.mm-city.on{opacity:.999;visibility:visible;transition:opacity .45s var(--ease),visibility 0s}
.mm-cturn{position:absolute;inset:0;will-change:transform}
.mm-city .ly{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;opacity:.004}
.mm-city .ly.on{opacity:.999}
.mm-city .ly.fade{transition:opacity .45s var(--ease)}
.mm-city .ly svg{display:block;overflow:hidden}
.mm-city .ly.cv canvas{display:block;width:100%;height:100%}
.mm-city .ly[data-look="0"]{--kw:.85;--pp:3.5;--hw:.9;--hc:color-mix(in srgb,var(--mm-road,#111) 55.9%,var(--land));--mw:.55;--mc:color-mix(in srgb,var(--mm-road,#111) 38.7%,var(--land))}
.mm-city .ly[data-look="1"]{--kw:1;--pp:3.5;--hw:1.1;--hc:color-mix(in srgb,var(--mm-road,#111) 55.9%,var(--land));--mw:.8;--mc:color-mix(in srgb,var(--mm-road,#111) 42.4%,var(--land));--tw:.6;--tc:color-mix(in srgb,var(--mm-road,#111) 34.5%,var(--land));--nw:.4;--nc:color-mix(in srgb,var(--mm-road,#111) 24.8%,var(--land))}
.mm-city .ly[data-look="2"]{--kw:1.2;--pp:3.5;--hw:1.5;--hc:color-mix(in srgb,var(--mm-road,#111) 53.4%,var(--land));--mw:1.1;--mc:color-mix(in srgb,var(--mm-road,#111) 42.4%,var(--land));--tw:.85;--tc:color-mix(in srgb,var(--mm-road,#111) 36.6%,var(--land));--nw:.6;--nc:color-mix(in srgb,var(--mm-road,#111) 29.4%,var(--land));--vw:.4;--vc:color-mix(in srgb,var(--mm-road,#111) 19.7%,var(--land));--aw:.4;--ac:color-mix(in srgb,var(--mm-road,#111) 20.2%,var(--land))}
.mm-city .ly[data-look="3"]{--kw:1.4;--pp:2.5;--hw:2.2;--hc:color-mix(in srgb,var(--mm-road,#111) 50.8%,var(--land));--mw:1.6;--mc:color-mix(in srgb,var(--mm-road,#111) 39.9%,var(--land));--tw:1.25;--tc:color-mix(in srgb,var(--mm-road,#111) 34.9%,var(--land));--nw:.9;--nc:color-mix(in srgb,var(--mm-road,#111) 29.4%,var(--land));--vw:.55;--vc:color-mix(in srgb,var(--mm-road,#111) 22.7%,var(--land));--aw:.5;--ac:color-mix(in srgb,var(--mm-road,#111) 23.9%,var(--land))}
.mm-city .ly .land{fill:var(--land)}
.mm-city .ly path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.mm-city .ly .p{fill:var(--park)}
.mm-city .ly .e{stroke:color-mix(in srgb,var(--park-pool) calc(var(--park-pool-a) * 100%),var(--park));stroke-width:calc(var(--pp) * var(--u))}
.mm-city .ly .k{stroke:var(--coast);stroke-width:calc(2 * var(--kw) * var(--u))}
.mm-city .ly .w{fill:var(--water)}
.mm-city .ly .kp{stroke:color-mix(in srgb,var(--water-pool) calc(var(--water-pool-a) * 100%),var(--water));stroke-width:calc(var(--water-pool-w) * var(--u))}
.mm-city .ly .ro{stroke:var(--coast);stroke-width:calc(2 * var(--kw) * var(--u))}
.mm-city .ly .r{fill:var(--land)}
.mm-city .ly .ls{stroke:var(--shore);stroke-width:calc(2 * var(--shore-w) * var(--u))}
.mm-city .ly .l{fill:var(--water)}
/* an islet too narrow to ink at the rest (city.js inked): water, its edge stroked so no seam of the land shows round it */
.mm-city .ly .iw{fill:var(--water);stroke:var(--water);stroke-width:var(--u)}
.mm-city .ly .g{stroke:var(--water);stroke-width:var(--seam);stroke-linecap:butt}
/* a lake's seam with the sea (city.js yw): the water's colour over the lake's shore where it meets the sea's water,
   and over the strip of land between them */
.mm-city .ly .y{stroke:var(--water);stroke-width:var(--yw)}
.mm-city .ly .h,.mm-city .ly .H{stroke:var(--hc);stroke-width:calc(var(--hw) * var(--u))}
.mm-city .ly .m,.mm-city .ly .M{stroke:var(--mc);stroke-width:calc(var(--mw) * var(--u))}
.mm-city .ly .t,.mm-city .ly .T{stroke:var(--tc);stroke-width:calc(var(--tw) * var(--u))}
.mm-city .ly .n,.mm-city .ly .N{stroke:var(--nc);stroke-width:calc(var(--nw) * var(--u))}
.mm-city .ly .v,.mm-city .ly .V{stroke:var(--vc);stroke-width:calc(var(--vw) * var(--u))}
.mm-city .ly .a,.mm-city .ly .A{stroke:var(--ac);stroke-width:calc(var(--aw) * var(--u))}
/* a bridge: butt ends, over a deck of the land's white a little wider than it, laid only over the water */
.mm-city .ly .H,.mm-city .ly .M,.mm-city .ly .T,.mm-city .ly .N,.mm-city .ly .V,.mm-city .ly .A{stroke-linecap:butt}
.mm-city .ly .dk{stroke:var(--deck);stroke-linecap:butt}
.mm-city .ly .dk.H{stroke-width:calc((var(--hw) + var(--deck-w)) * var(--u))}
.mm-city .ly .dk.M{stroke-width:calc((var(--mw) + var(--deck-w)) * var(--u))}
.mm-city .ly .dk.T{stroke-width:calc((var(--tw) + var(--deck-w)) * var(--u))}
.mm-city .ly .dk.N{stroke-width:calc((var(--nw) + var(--deck-w)) * var(--u))}
.mm-city .ly .dk.V{stroke-width:calc((var(--vw) + var(--deck-w)) * var(--u))}
.mm-city .ly .dk.A{stroke-width:calc((var(--aw) + var(--deck-w)) * var(--u))}
/* while the city shows, the wall's white veils stay laid over it at rest too (map.js motion lays them while the view
   moves): its edges fade as the land's do, and a phone's clearings round the heading's words and under its bar */
/* the land's own ways in (a region's, an area's, a country's) do not lie under the city: a click or a tap on the street
   map is the street map's (on Maya's page New York's had taken every click on its side of the city out to its level) */
.mm-svg.mm-cityon .mm-reghit,.mm-svg.mm-cityon .mm-has,.mm-svg.mm-cityon .mm-carea,.mm-svg.mm-cityon .mm-divland{pointer-events:none}
.mm-svg.mm-cityon .mm-veil{display:inline}
.mm-svg.mm-cityon .mm-kv{visibility:visible}
@media (prefers-reduced-motion:reduce){.mm-city,.mm-city.on,.mm-city .ly.fade{transition:none}}

@media (prefers-reduced-motion:reduce){
  .mm-box,.mm-svg.first,.mm-msg,.mm-pin,.mm-pin .dot,.mm-pin .ring,.mm-pin .pring,.mm-tip,.mm-pop,.mm-has,
  .mm-geo,.mm-divs,.mm-namelink,.mm-namelink .ul,.mm-divland,.mm-ctl,.mm-ctl button,.mm-list .nm,.mm-pop .nm,.mm-kz,.mm-park,.mm-credit,.mm-cpk,.mm-box.mm-easeh,.mm-box.mm-easeh .mm-ctl.mm-below,
  .mm-cent,.mm-child,.mm-credit a,.mm-kz.mm-kh,.mm-ctl.mm-over.mm-move,.mm-layer .mm-pin,.mm-layer .mm-pin .num{animation:none;transition:none}
  .mm-ctl button.mm-zout,.mm-ctl.mm-in button.mm-zout{transition:none}
  /* a level reached in place (map.js mm-xf): its credit's words crossfade with the map, opacity only */
  .mmap.mm-xf .mm-cent{transition:opacity .2s linear,visibility 0s linear .2s}
  .mmap.mm-xf .mm-cent.on{transition:opacity .2s linear,visibility 0s}
}
/* the map's frame given the focus from the keyboard (a place row whose pin does not show): the house ring,
   over museum.css's no ring for [tabindex="-1"] */
.mm-box[tabindex]:focus-visible{outline:1px solid var(--ink,#111);outline-offset:3px}

/* ── a layer on a page of its own (map.js layerMap): any page that loads map.js and map.css ── */
/* the museum's tokens (museum.css :root) for the map's words and lines, set on its own box: a page's tokens of the
   same names can mean something else (Maya's --faint is her lines' pale grey, and the list's years and its place
   seen under each title came out at 2.2:1 on white: Oct 14). A page gives the map its own on purpose by the map's
   names (--mm-wall, --mm-ink, --mm-ink-2, --mm-faint, --mm-hair, --mm-ease); the type is the page's (--serif unset).
   And the browser keeps no row in place as the list is made again (museum.css .view.layered); no double tap zooms it */
.mm-lpage{--wall:var(--mm-wall,#fff);--ink:var(--mm-ink,#111);--ink-2:var(--mm-ink-2,rgba(17,17,17,.74));
  --faint:var(--mm-faint,rgba(17,17,17,.58));--hair:var(--mm-hair,rgba(17,17,17,.13));--ease:var(--mm-ease,cubic-bezier(.22,1,.32,1));
  overflow-anchor:none;touch-action:manipulation}
/* the map drawn no further than its own box: iOS Safari takes a zoomed map's touch-action (none) for all it draws,
   and its land is drawn half a frame past each edge, clipped but not cut off, so a finger on the key or the list's
   first rows under a zoomed map moved nothing, the page held (simulator, Oct 14: a place's row used from the list's
   foot, then a swipe up from under the map) */
.mmap.mm-lp .mm-svg{overflow:hidden}
/* what museum.css gives every page, for the map's own links, buttons and words for screen readers only */
:where(.mm-lpage) a{color:inherit}
:where(.mm-lpage) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:where(.mm-lpage) .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* a work chosen heads its list: its title's row (its own page) and, beside it, under the same hairlines, the way back (×) */
.mm-list .mm-wh{display:flex;align-items:stretch}
.mm-list .mm-wh > a{flex:1 1 auto;min-width:0}
.mm-list .mm-wh > .mm-back{flex:none;width:auto;justify-content:flex-end;padding:.42rem 0 .42rem 1rem;color:var(--ink-2);transition:color .3s var(--ease)}
/* a finger's: as wide as a fingertip, the × where it is, at the row's end (it was 26 px, and a tap beside it took the title's link) */
@media (pointer:coarse){.mm-list .mm-wh > .mm-back{min-width:2.75rem}}
/* its places' groups, each under its word: where it was seen, then where it was made (a pin's verb, or words.made) */
.mm-list .mm-gl{display:block;padding:1.05rem 0 .15rem;font-size:.9rem;line-height:1.4;color:var(--ink-2)}
/* the key under the map: a filled dot and an open one, as the pins are */
.mm-key{display:flex;flex-wrap:wrap;gap:.25rem 1.2rem;margin:0;font-size:.9rem;line-height:1.4;color:var(--ink-2)}
.mm-key .mm-ki{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap}
.mm-key .mm-kd{flex:none;width:10px;height:10px;border-radius:50%;background:var(--ink)}
.mm-key .mm-kd.made{background:var(--wall);box-shadow:inset 0 0 0 1.5px var(--ink)}
/* the map and its key, one column (.mm-mcol) that stays in view beside a long list, as the map alone does: the key
   just under the map (on a phone, the list under them both), or under the controls' line */
.mmap.mm-haskey > .mm-mcol{order:-1;min-width:0}
.mm-mcol > .mm-box{position:relative;top:auto}
.mm-mcol > .mm-key{margin:.75rem 0 0}
.mm-mcol > .mm-box.mm-roomctl + .mm-key{margin-top:0}
.mm-mcol > .mm-box.mm-failed + .mm-key{display:none}
@media (min-width:820px){.mmap.mm-haskey > .mm-mcol{position:sticky;top:calc(var(--top,20px) + 3.4rem)}}
@media (hover:hover) and (pointer:fine){
  .mm-list .mm-wh > .mm-back:hover{color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){
  .mm-list .mm-wh > .mm-back{transition:none}
}