body {
  background-color: #262425;
  color: #ffffff;
  font-family: sans-serif;
  line-height: 1.3em;
}

a:link {
  color: #6996f9;
}

/* Make map images clickable. */
article a.map {
  display: inline-block;
}
article a.map > object {
  pointer-events: none;
}

article {
  --nav-button-height: 2em;
  --nav-button-max-count: 2;
}

article {
  margin-bottom: 2em;
}

/* Show the caption right of the map. */
article figure {
  display: grid;
  grid-template-areas:
    "caption map"
    "nav map";
  grid-template-columns: 200px auto;
  grid-template-rows:
    calc(100vh - var(--nav-button-height) * var(--nav-button-max-count))
    calc(var(--nav-button-height) * var(--nav-button-max-count));
}
article figure > nav {
  grid-area: nav;
}
article figure > a:first-child {
  grid-area: map;
}
article object.map {
  height: 100%;
  object-fit: contain;
  width: 100%;
}
article figure {
  margin: 0;
}
article figure > figcaption {
  grid-area: caption;
}

article.exposition {
  margin: 0;
  position: relative;

  /* See padding rules for what we subtract. */
  min-height: calc(
    100vh - (var(--nav-button-height) * var(--nav-button-max-count) + 1px)
  );
}
article.exposition {
  /* HACK(strager): Put child h3's margin inside this article. */
  margin-top: -1px;
  padding-top: 1px;
}
article.exposition {
  /* Make room for nav at bottom. */
  padding-bottom: calc(var(--nav-button-height) * var(--nav-button-max-count));
}
article.exposition > nav {
  bottom: 0;
  left: 0;
  position: absolute;
}

article figure > nav > a:link,
article.exposition > nav > a:link {
  background-color: #666666;
  color: #ffffff;
  display: inline-block;
  line-height: calc(var(--nav-button-height) - 0.25em);
  margin-top: 0.25em;
  padding-left: 0.75em;
  padding-right: 0.75em;
  text-align: center;
}

/* Stack .previous atop .next. */
article figure > nav > a:link,
article.exposition > nav > a:link {
  clear: left;
  float: left;
}

/* If .previous is missing, place .next as if .previous was present. */
article figure > nav > a.next:first-child,
article.exposition > nav > a.next:first-child {
  margin-top: calc(0.25em + var(--nav-button-height));
}

ol.horizontal {
  display: flex;
}
ol.horizontal > li {
  margin-right: 2em;
}