/* The page around the prose. Colours, faces and the prose itself come from
   the theme sheet, zkit-design and prose.css, linked before this. */
/* A column as tall as the screen at least, so the footer sits at the bottom
   of a short page and after the text of a long one. */
/* zkit-design pins an app shell to the viewport and lets only its panes
   scroll. This site is a document, so the document scrolls. */
html,
body {
  height: auto;
  overflow: visible;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--fg);
}
main.page {
  flex: 1 0 auto;
  width: 100%;
}
/* The text column keeps to the left on a wide screen, a fixed step in from
   the edge, so the space to its right is free for sidenotes. On a narrow
   screen it takes the width. */
.page {
  box-sizing: border-box;
  max-width: 44rem;
  margin: 0;
  /* Wider than the list markers that hang left of the text column. */
  padding: var(--space-6) var(--space-7) var(--space-8);
}

/* The mode toggle, a row of its own at the top right, so it never sits on
   the page's first heading. One button cycles system, light and dark and
   shows the icon of the current one. */
.mode {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-4) var(--space-4) 0;
}
.mode button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--r-1);
  background: none;
  color: var(--fg-3);
  cursor: pointer;
}
.mode button:hover {
  color: var(--fg);
  background: var(--accent-tint);
}
.mode svg {
  display: none;
}
.mode button[data-current=""] svg[data-mode=""],
.mode button[data-current="light"] svg[data-mode="light"],
.mode button[data-current="dark"] svg[data-mode="dark"] {
  display: block;
}

footer.page {
  width: 100%;
  padding-top: 0;
  padding-bottom: var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--text--1);
  color: var(--fg-3);
}

@media (min-width: 60rem) {
  .page {
    margin-left: clamp(var(--space-7), 8vw, 9rem);
  }
}