/* ==========================================================================
   Centered - after a 2000s Adobe PageMill page (hermosarecords.com/marley):
   white, browser-default Times, everything centred down the page. Each
   post is its pictures centred, up to 545px wide like the original's, then
   its title and text in a 450px column under them, centred too, and a
   blank line before the next. Everything is in the title's Times; links
   a size up, like the original's "continue on" / "go back".

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

body {
  margin: 8px;
  background: #fff;
  color: #000;
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
  text-align: center;
}

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

h1 { font-size: 2em; margin: 0.67em 0 0.5em; }

.column {
  max-width: 450px;
  margin: 0 auto;
}

/* The description: a bit wider than the 545px pictures, never the whole screen. */
.intro { max-width: 680px; margin-left: auto; margin-right: auto; }

.site-cover {
  /* 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;
}

.social-links { display: block; margin: 1em 0; font-size: 1.2em; }
.social-links a { margin: 0 0.5em; }

.post { margin: 0 0 3em; }
/* The original's pictures were 450-545px wide. */
.post img, .post video { max-width: min(100%, 545px); height: auto; }
.post .post-video { margin-left: auto; margin-right: auto; } /* centred like the pictures */
/* An audio player as wide as those pictures, centred (full width on a phone). */
.post .audio-block, .post .post-audio { max-width: 545px; margin-left: auto; margin-right: auto; }
/* An attachment's caption, just under it, in the 450px column. */
.post .post-caption { max-width: 450px; margin: 0.4em auto 0; font-size: 0.9em; font-style: italic; }
.post .title { font-weight: bold; }
.post .date { font-size: 0.85em; }
.post .post-embed { margin: 1em 0; }