/* The legend: the hover element from room variation 06, built once.
   At rest: a mono label on a sliver of paper with a short pen tick.
   Open (hover, focus, tap): the homepage's own sentence in Newsreader, a pen
   underline under the words that are the link, the destination in italic.
   Markup:
     <div class="legend" style="left:..;top:..">
       <button class="legend-tag" type="button" aria-expanded="false">Label</button>
       <div class="legend-more"><p class="legend-s">Sentence with <a href="/">the link</a>.</p><p class="legend-d">destination</p></div>
     </div>
   Add .dark for the projector wall. A legend with no .legend-more is a label only.
   Put .legend-host on the object that carries a legend (a hotspot, a piece, a slide):
   hovering the object opens it, and a click on the object counts as inside it. */
:root{--room-bg:#fdfaf7;--room-ink:#1a1a1a;--room-muted:#6b6560;--room-pen:#2f6fb0;--room-night:#1c1915}
.legend{position:absolute;z-index:8;font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;line-height:1.3}
.legend-tag{display:inline-block;appearance:none;border:0;margin:0;cursor:pointer;font:inherit;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--room-ink);background:rgba(253,250,247,.92);padding:3px 7px 2px;white-space:nowrap;text-align:left}
.legend-tag::after{content:"";display:block;width:26px;height:6px;margin:4px 0 -2px 0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 6' preserveAspectRatio='none'><path d='M1 4 C 7 1.5, 13 5, 19 3 S 24 2.5, 25 3.5' stroke='%232f6fb0' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>") no-repeat;background-size:100% 100%}
.legend-tag:focus-visible{outline:2px solid var(--room-pen);outline-offset:2px}
.legend-more{position:absolute;left:0;top:100%;margin-top:6px;width:360px;max-width:min(360px,calc(100vw - 32px));background:rgba(253,250,247,.96);padding:12px 14px 10px;box-shadow:0 1px 3px rgba(0,0,0,.18);opacity:0;visibility:hidden;transition:opacity .12s ease,visibility 0s linear .12s;z-index:9}
.legend.up .legend-more{top:auto;bottom:100%;margin-top:0;margin-bottom:6px}
.legend.flip .legend-more{left:auto;right:0}
.legend.is-open .legend-more,.legend:focus-within .legend-more{opacity:1;visibility:visible;transition-delay:0s}
@media (hover:hover){.legend:hover .legend-more,.legend-host:hover .legend .legend-more{opacity:1;visibility:visible;transition-delay:0s}}
.legend-s{margin:0;font-family:Newsreader,Georgia,serif;font-size:19px;line-height:1.35;color:var(--room-ink);font-weight:400;letter-spacing:0;text-transform:none}
.legend-s a{color:inherit;text-decoration:none;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'><path d='M0 3.5 C 18 1.5, 36 5, 55 3 S 86 1.8, 100 4' stroke='%232f6fb0' stroke-width='1.7' fill='none' stroke-linecap='round'/></svg>") repeat-x left bottom;background-size:100% 6px;padding-bottom:3px}
.legend-s a:hover{color:var(--room-pen)}
.legend-s a:focus-visible{outline:2px solid var(--room-pen);outline-offset:2px}
.legend-d{margin:6px 0 0;font-family:Newsreader,Georgia,serif;font-style:italic;font-size:12.5px;line-height:1.35;color:var(--room-muted);letter-spacing:0;text-transform:none}
.legend-d a{color:inherit}
/* inked on the dark, for the projector wall */
.legend.dark .legend-tag{background:rgba(30,26,22,.88);color:#e8ddcc}
.legend.dark .legend-more{background:rgba(30,26,22,.94);box-shadow:none}
.legend.dark .legend-s{color:#f0e8d8}
.legend.dark .legend-d{color:#a89f90}
/* the same tags and sentences as a plain list (the reading version of a scene) */
.legend-list{list-style:none;margin:0;padding:0}
.legend-list li{padding:14px 0;border-top:1px solid rgba(26,26,26,.14)}
.legend-list li:last-child{border-bottom:1px solid rgba(26,26,26,.14)}
.legend-list .legend-tag{background:transparent;padding-left:0;cursor:default}
.legend-list .legend-s{margin-top:8px}

/* an open legend sits above page chrome */
.legend.is-open{z-index:30}