/* ==========================================================================
   Img - modelled on img.lsze.ws: a long single column of photos, one per
   paragraph, at up to 800px wide, with small monospace <pre> captions as
   section headings. A fixed list of every titled post sits in the top
   right corner (Consolas 14px), each one jumping down to that post.

   Everything else is browser defaults, in the list's Consolas: the default 8px
   body margin, <p> spacing between photos. Each post is set off from the
   one above by the original's two blank paragraphs (≈ 4em).

   Links use var(--accent), falling back to the browser's own link blue.
   ========================================================================== */

html { scroll-behavior: smooth; }

/* All text in the index's Consolas at its 14px (the <pre> captions too). */
body {
  margin: 8px;
  font-family: Consolas, monospace;
  font-size: 14px;
  color: #000;
  background: #fff;
}

a { color: var(--accent, #00e); }

pre {
  font-family: inherit;
  font-size: inherit;
  white-space: pre-wrap;
}

/* Fixed in the top right corner on every screen, right-aligned; a long
   list scrolls inside itself. */
.nav {
  position: fixed;
  top: 0;
  right: 8px;
  z-index: 100;
  max-height: 100vh;
  overflow-y: auto;
  text-align: right;
}
.nav li { list-style-type: none; }

.intro {
  margin-top: 54px;
}

.site-title { margin: 0; font-weight: bold; }

.site-description,
.social-links {
  display: block;
  max-width: 800px;
  margin: 1em 0 0;
}
.social-links a { margin-right: 1em; }

.site-cover {
  display: block;
  /* Cover size setting: a real width, so small/medium/large always
     differ (max-* alone did nothing to a cover already under them); the
     300x222 box stays the limit, contain keeps a tall cover unsquished,
     and it's never wider than the screen. */
  width: calc(300px * var(--cover-scale, 1));
  max-width: 100%;
  height: auto;
  max-height: calc(222px * var(--cover-scale, 1));
  object-fit: contain;
  object-position: left;
  margin: 0 0 1em;
}

.entry {
  margin-top: 4em;
  scroll-margin-top: 8px;
}

.entry-title { font-weight: bold; }

.entry-title,
.entry-date {
  margin: 0 0 1em;
}

.entry-body {
  max-width: 800px;
}

.entry img {
  display: block;
  max-width: min(800px, 100%);
  height: auto;
}

/* Audio and video stop at the same 800px as the pictures and text. */
.entry .post-audio,
.entry .audio-block,
.entry .post-video {
  max-width: 800px;
}