html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #eaf3f8;
  overflow: hidden;
}

a { color: #1f4a66; text-decoration: none; }
a:hover { color: #5b8aa6; }

.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: linear-gradient(180deg, #eef6fa 0%, #e3eff6 100%);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #1f4a66;
}

.stage__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.site-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 clamp(20px, 4vw, 40px) clamp(20px, 4vh, 32px);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: #5b8aa6;
  text-wrap: pretty;
}

.site-footer__name,
.site-footer__label { color: #1f4a66; }
/* Separate the name, each site's label, its address lines and its phone
   number into groups; the address lines themselves keep the base spacing. */
.site-footer__name { margin-bottom: 0.6em; }
.site-footer__label { margin-bottom: 0.3em; }
.site-footer__tel { margin-top: 0.3em; }
/* Each address is its own block, so a drag-select that starts in one ends at
   its last line instead of running into the other. The rule between them is a
   border, not a text character, so it never lands in a copied selection. */
.site-footer__addrs { display: flex; flex-wrap: wrap; column-gap: 1.6em; }
.site-footer__addr { font-style: normal; }
/* The addresses link to Google Maps but should read as plain text, so undo
   the global link colors. Links are draggable by default, which turns a drag
   into a URL drag instead of a text selection; -webkit-user-drag covers
   Chrome and Safari, and draggable="false" in the markup covers Firefox. */
.site-footer__addr a,
.site-footer__addr a:hover { color: inherit; -webkit-user-drag: none; }
.site-footer__addr + .site-footer__addr {
  padding-left: 1.6em;
  border-left: 1px solid rgba(91, 138, 166, 0.35);
}
/* Too narrow for two columns beside the copyright line: stack them instead. */
@media (max-width: 480px) {
  .site-footer__addrs { flex-direction: column; row-gap: 0.6em; }
  .site-footer__addr + .site-footer__addr { padding-left: 0; border-left: 0; }
}