/* 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 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}
.mm-box.mm-ease{transition:height .45s var(--ease),margin-top .45s var(--ease);overflow:hidden}
.mm-box.mm-failed{height:auto}
.mm-svg{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:rgba(17,17,17,.30);stroke-width:.6;stroke-linejoin:round}
.mm-border{fill:none;stroke:rgba(17,17,17,.15);stroke-width:.5;stroke-linejoin:round}
.mm-has{fill:rgba(17,17,17,.045);stroke:rgba(17,17,17,.55);stroke-width:.6;stroke-linejoin:round;cursor:pointer;transition:fill .3s var(--ease)}
.mm-has.hot{fill:rgba(17,17,17,.1)}
/* many countries with pictures: a lighter tint, so the map stays white */
.mm-many .mm-has{fill:rgba(17,17,17,.022);stroke:rgba(17,17,17,.42)}
.mm-many .mm-has.hot{fill:rgba(17,17,17,.08)}
/* 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:rgba(17,17,17,.22)}
.mm-country .mm-border{stroke:rgba(17,17,17,.12)}
.mm-country .mm-has{fill:rgba(17,17,17,0);stroke:none}
.mm-hasline{fill:none;stroke:rgba(17,17,17,.34);stroke-width:.6;stroke-linejoin:round;pointer-events:none}
.mm-country .mm-has.hot{fill:rgba(17,17,17,.05)}
/* the lakes: the wall's white over the land, a hairline shore (as a coast) */
.mm-lake{fill:var(--wall);stroke:none;pointer-events:none}
.mm-shore{fill:none;stroke:rgba(17,17,17,.30);stroke-width:.6;stroke-linejoin:round;pointer-events:none}
.mm-country .mm-shore{stroke:rgba(17,17,17,.22)}
.mm-focus{fill:none;stroke:var(--ink);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);stroke-width:.85;stroke-linejoin:round;pointer-events:none}
.mm-focus.mm-quiet,.mm-level.mm-quiet{stroke:rgba(17,17,17,.22);stroke-width:.6}
.mm-child{fill:var(--tint,rgba(17,17,17,.035));stroke:rgba(17,17,17,.42);stroke-width:.55;stroke-linejoin:round;transition:fill .3s var(--ease)}
.mm-carea{cursor:pointer}
.mm-carea.hot{fill:rgba(17,17,17,.07)}
.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:rgba(17,17,17,0);stroke:none;cursor:pointer}
.mm-hov,.mm-hover{pointer-events:none}
.mm-hover{fill:none;stroke:rgba(17,17,17,.5);stroke-width:.6;stroke-linejoin:round}
.mm-div{fill:none;stroke:rgba(17,17,17,.2);stroke-width:.5;stroke-linejoin:round;pointer-events:none}
.mm-divhas{fill:none;stroke:rgba(17,17,17,.5);stroke-width:.6;stroke-linejoin:round;pointer-events:none}
.mm-divland{fill:rgba(17,17,17,0);stroke:none;pointer-events:none;transition:fill .3s var(--ease)}
.mm-divland.hot{fill:rgba(17,17,17,.05)}
/* 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,rgba(17,17,17,.035));stroke:rgba(17,17,17,.42);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);stroke-width:.85}
.mm-park.mm-parkhas[data-href]{pointer-events:visiblePainted;cursor:pointer}
.mm-park.hot{fill:rgba(17,17,17,.07);stroke:rgba(17,17,17,.6)}
.mm-park.mm-parkhas.hot{stroke:var(--ink)}
.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);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);transition:transform .3s var(--ease)}
.mm-pin .ring{fill:none;stroke:var(--ink);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);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);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);stroke:var(--ink);stroke-width:1.5}
.mm-pin.mm-made .num{fill:var(--ink)}
.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);paint-order:stroke;stroke:var(--wall);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(--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{--s:clamp(120px,11vw,160px)}
.mm-side > .mm-aside{margin-left:auto}
.mm-side > .mm-aside:not(.mm-aside + .mm-aside){margin-top:1.6rem}
.mm-side > .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:rgba(17,17,17,.1)}
  .mm-many .mm-has:hover{fill:rgba(17,17,17,.08)}
  .mm-country .mm-has:hover{fill:rgba(17,17,17,.05)}
  .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}
}

@media (prefers-reduced-motion:reduce){
  .mm-box,.mm-box.mm-ease,.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}
}