/* The floor plan — owned by plan.js; loaded after museum.css and shares its
   tokens (--wall, --ink, --ink-2, --faint, --hair, --tint, --serif, --ease).
   Everything plan.js draws lives under .mp; the heading rules above it are the
   page's. Line work is laid out in screen pixels and re-laid on resize, so
   every stroke stays the width it says. The plan, its legend and the page
   heading share one left edge. */

/* ═══ the drawing ═══ */
.mp{position:relative;width:100%;min-width:0;font-family:var(--serif);font-variation-settings:"STYL" 100}
.mp-stage{position:relative;width:100%;overflow:hidden}
.mp-svg{display:block}
.mp-svg path,.mp-ground,.mp-ring{pointer-events:none}
.mp-ground{fill:var(--wall)}
.mp-floor{fill:transparent;transition:fill .45s var(--ease)}
.mp-room.mp-go{cursor:pointer}
.mp-room.hot .mp-floor{fill:var(--tint)}
/* a keyboard on the room's row: its own walls thicken, by two pixels inside the room (plan.js sets the inset per wall, so an outer wall shows it too) */
.mp-ring{fill:none;stroke:var(--ink);stroke-width:2;opacity:0;vector-effect:non-scaling-stroke;transition:opacity .3s var(--ease)}
.mp-room.kb .mp-ring{opacity:1}
.mp-wall{fill:none;stroke:var(--ink);stroke-width:1;stroke-linecap:square;vector-effect:non-scaling-stroke}
.mp-outer{fill:none;stroke:var(--ink);stroke-width:3;stroke-linejoin:miter;stroke-linecap:butt;vector-effect:non-scaling-stroke}
.mp-leaf{fill:none;stroke:var(--ink);stroke-width:1;stroke-linecap:butt;vector-effect:non-scaling-stroke}
.mp-swing{fill:none;stroke:var(--faint-line,rgba(17,17,17,.42));stroke-width:.75;vector-effect:non-scaling-stroke}
/* the pictures: one small glyph each, lighter than the partitions */
.mp-work{fill:var(--ink-2);stroke:none;shape-rendering:crispEdges}

/* the words in the rooms */
.mp-measure{position:absolute;left:0;top:0;visibility:hidden;white-space:nowrap;pointer-events:none;line-height:1}
.mp-measure span{display:inline-block;white-space:nowrap;max-width:none;overflow:visible}
.mp-labels{position:absolute;inset:0;pointer-events:none}
.mp-lab{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;
  line-height:1.2;color:var(--ink);transition:opacity .35s var(--ease)}
/* a room too small to hang its cover beside its words: the words step back while the cover is over them */
.mp-lab.under{opacity:0}
.mp-no{font-size:12px;line-height:16px;color:var(--ink);font-variant-numeric:lining-nums proportional-nums;letter-spacing:0}
.mp-t{display:block;font-size:15px;line-height:19px;margin-top:1px;white-space:nowrap}
/* plan.js breaks a title into its lines itself, only between its parts */
.mp-ln{display:block;white-space:nowrap}
.mp-c{font-size:12px;line-height:16px;margin-top:2px;color:var(--ink-2);font-variant-numeric:lining-nums proportional-nums;white-space:nowrap}
.mp-wide .mp-lab .mp-no{font-size:12.5px}
.mp-wide .mp-lab .mp-t{font-size:16.5px;line-height:21px}
.mp-wide .mp-lab .mp-c{font-size:12.5px}
.mp-measure .mp-t{margin:0}

/* the one word at the door */
.mp-entrance{position:absolute;transform:translateX(-50%);padding-top:9px;font-size:13px;line-height:18px;font-style:italic;
  color:var(--ink-2);white-space:nowrap;pointer-events:none}
.mp-measure .mp-entrance{position:static;transform:none;padding:0}

/* the cover, laid on the plan like a print: a white mat, a hairline frame */
.mp-preview{position:absolute;z-index:2;margin:0;padding:6px;background:var(--wall);border:1px solid var(--ink);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s var(--ease),visibility 0s linear .35s}
.mp-preview.in{opacity:1;visibility:visible;transition:opacity .45s var(--ease),visibility 0s}
/* .mp in the selectors: the plan may be drawn inside a page box with its own img and a rules (the lobby's) */
.mp .mp-preview img{display:block;object-fit:cover;background:var(--tint);opacity:1;max-width:none;max-height:none;transition:none}

/* ═══ the legend: the same rooms, as a list, under the drawing and as wide ═══ */
.mp-legend{list-style:none;margin:clamp(1.6rem,3.4vw,2.6rem) 0 0;padding:0;columns:17rem auto;column-gap:clamp(1.6rem,4vw,3.2rem)}
/* a lit row has no box: its own hairline darkens, exactly where it lies, and so do its words */
.mp-legend li{position:relative;break-inside:avoid;border-top:1px solid var(--hair)}
.mp-legend li::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--ink);opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease)}
.mp-legend li.hot::before{opacity:1}
/* a keyboard on the row: the line is drawn twice as heavy, downward from the hairline */
.mp-legend li.kb::before{height:2px}
.mp-legend .mp-row{display:flex;align-items:baseline;gap:.9rem;padding:.42rem 0 .46rem;margin:0;text-decoration:none;color:var(--ink)}
.mp-legend .mp-no{flex:none;min-width:1.6em;color:var(--ink-2);font-size:.82rem;line-height:inherit;font-variant-numeric:lining-nums proportional-nums;
  transition:color .35s var(--ease)}
.mp-legend .mp-t{flex:1;min-width:0;overflow-wrap:anywhere;text-align:left;font-size:inherit;line-height:inherit;margin:0;white-space:normal;
  text-decoration:underline 1px transparent;text-underline-offset:.22em;transition:text-decoration-color .35s var(--ease)}
/* ...and its name is underlined, so the heavy line is read as this row's, not the one above */
.mp-legend li.kb .mp-t{text-decoration-color:var(--ink)}
.mp-legend .mp-c{flex:none;color:var(--faint);font-size:.88rem;line-height:inherit;margin:0;font-variant-numeric:lining-nums proportional-nums;
  transition:color .35s var(--ease)}
.mp-legend li.hot .mp-no,.mp-legend li.hot .mp-c{color:var(--ink)}
/* the row's focus is the heavy line and its lit room, not a box out past the hairlines */
.mp-legend a:focus-visible{outline:none}
.mp-small .mp-legend{columns:auto}

/* ═══ the lobby: the plan fills the box it is given, no legend; each room is a link ═══ */
.mp-lobby{height:100%;display:flex;flex-direction:column;justify-content:center}
.mp-lobby .mp-stage{flex:none}
.mp-lobby.mp-top{justify-content:flex-start}
.mp-lobby.mp-bottom{justify-content:flex-end}
.mp .mp-hits{position:absolute;inset:0;z-index:1}
.mp .mp-hit{position:absolute;display:block;margin:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mp .mp-hit:focus-visible{outline:none}   /* the room's own walls are ringed instead */
/* a room drawn too small for its name is named here, under the plan */
.mp-key{flex:none;display:flex;flex-wrap:wrap;column-gap:1.1em;row-gap:2px;margin:4px 0 0;padding:0 0 0 1px;font-size:13px;line-height:18px;color:var(--ink-2)}
.mp-key-i{display:inline-flex;align-items:baseline;gap:.4em;max-width:100%;min-width:0;transition:color .35s var(--ease)}
.mp-key .mp-no{flex:none;font-size:12px;line-height:inherit;color:var(--ink)}
.mp-key-t{min-width:0;overflow-wrap:anywhere}
.mp-key-i.hot{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .mp-floor,.mp-ring,.mp-lab,.mp-legend li::before,.mp-legend .mp-no,.mp-legend .mp-t,.mp-legend .mp-c,.mp-key-i,.mp-preview,.mp-preview.in{transition:none}
}