/* THE BUILDING'S SHELL - shared by every room page (building.js). The page is
   a tall runway the scroll runs down; the picture is fixed behind it; the
   hotspots are buttons that follow their objects; the drawer is one overlay. */
html,body{margin:0;background:#0B0C0E;color:#F2EEE6;font-family:var(--body);-webkit-font-smoothing:antialiased}
.runway{height:var(--runway,700svh)}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
.mask{position:fixed;inset:0;z-index:30;background:#0B0C0E;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(242,238,230,.6);transition:opacity .9s var(--ease,ease)}
.mask b{font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:.02em;color:#F2EEE6}
.mask.gone{opacity:0;pointer-events:none}
.rh{position:fixed;top:26px;left:34px;z-index:20;font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;line-height:1.9;color:rgba(242,238,230,.6)}
.rh b{font-weight:400;color:#F2EEE6}.rh a{color:inherit;text-decoration:none}.rh a:hover{text-decoration:underline;text-underline-offset:.3em}
.wm{position:fixed;top:26px;left:50%;transform:translateX(-50%);z-index:20;font-family:var(--mono);font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:rgba(242,238,230,.5)}
.hint{position:fixed;left:34px;bottom:26px;z-index:20;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,238,230,.45);line-height:1.9;transition:opacity .6s}
.hint.gone{opacity:0}
/* the elevator, reachable from everywhere on a floor; it grows when the take arrives at the doors */
.el{position:fixed;right:34px;bottom:26px;z-index:20;font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(242,238,230,.6);text-decoration:none;
  border:1px solid rgba(242,238,230,.25);padding:10px 14px;transition:color .3s,border-color .3s,transform .5s var(--ease,ease)}
.el:hover,.el.call{color:#F2EEE6;border-color:#F2EEE6}.el.call{transform:scale(1.08)}
/* the hotspots: a ring on the object, its name on hover; eggs are a dot */
.hots{position:fixed;inset:0;z-index:15;pointer-events:none}
.hot{all:unset;position:absolute;left:0;top:0;transform:translate(-999px,-999px);pointer-events:none;opacity:0;transition:opacity .35s;cursor:pointer;
  font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:#F2EEE6;--s:1}
.hot.on{opacity:1;pointer-events:auto}
.hot i{position:absolute;left:0;top:0;width:calc(26px*var(--s));height:calc(26px*var(--s));margin:calc(-13px*var(--s)) 0 0 calc(-13px*var(--s));border-radius:50%;
  border:1px solid rgba(242,238,230,.9);box-shadow:0 0 0 6px rgba(242,238,230,.10);background:radial-gradient(circle,rgba(242,238,230,.9) 0 2px,transparent 2.5px)}
.hot.egg i{width:10px;height:10px;margin:-5px 0 0 -5px;border-color:rgba(242,238,230,.55);box-shadow:none;background:none}
.hot b{position:absolute;left:calc(18px*var(--s));top:-6px;font-weight:400;white-space:nowrap;opacity:0;transform:translateX(-4px);transition:opacity .25s,transform .25s;
  background:rgba(11,12,14,.72);padding:4px 8px}
.hot:hover b,.hot:focus-visible b{opacity:1;transform:none}
.hot.egg b{font-size:8.5px;color:rgba(242,238,230,.75)}
/* the drawer: whatever a container hands over, on paper */
#drawer{position:fixed;inset:0;z-index:35;background:rgba(11,12,14,.55);display:none;align-items:center;justify-content:center;padding:6vh 6vw}
#drawer.on{display:flex}
.dr-in{position:relative;background:#F7F4EE;color:#111;max-width:min(920px,100%);max-height:88vh;overflow:auto;padding:38px 42px 42px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
  font-family:var(--body);font-weight:300;font-size:15px;line-height:1.7}
.dr-in h2{font-family:var(--display);font-weight:400;font-size:30px;margin:0 0 6px;text-transform:uppercase;letter-spacing:.01em}
.dr-in .k{font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:rgba(17,17,17,.55);margin:0 0 18px}
.dr-in a{color:#111}
.dr-in .draft{display:inline-block;font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:#D9381F;border:1px solid #D9381F;padding:2px 6px;margin-left:8px;vertical-align:middle}
.dr-in .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.dr-in .grid figure{margin:0}.dr-in .grid img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;background:#E6E0D5;filter:saturate(.6) contrast(1.05)}
.dr-in .grid figcaption{font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(17,17,17,.55);margin-top:6px}
.dr-in .pdf{width:100%;height:60vh;border:1px solid rgba(17,17,17,.12);background:#fff}
.dr-in .row{display:flex;gap:2.5ch;flex-wrap:wrap;align-items:baseline;margin-top:18px;font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase}
.dr-in .row a{text-decoration:none;border-bottom:1px solid #111;padding-bottom:2px}
.dr-x{all:unset;position:absolute;right:16px;top:12px;cursor:pointer;font-family:var(--mono);font-size:14px;color:rgba(17,17,17,.6);padding:6px}
.dr-x:hover{color:#111}
/* the directory in the cabin */
.dir{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.dir a{display:flex;justify-content:space-between;gap:2ch;text-decoration:none;color:#111;border:1px solid rgba(17,17,17,.2);padding:14px 16px;font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase}
.dir a:hover,.dir a.here{border-color:#111;background:#111;color:#F7F4EE}
.dir a.here::after{content:'you are here'}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0;padding:0}
@media(max-width:760px){.wm,.hint{display:none}.rh{top:18px;left:18px}.el{right:18px;bottom:18px}.dr-in{padding:26px 22px}}