/* ==========================================================================
   Blog - a single continuous feed, ported from the original static mockup.
   Tiny fixed-width column, plain serif typography, minimal chrome.

   Type is River Mono, as on morgan-ali.com/river (files in static/fonts):
   Light for text, Bold for bold (the site title), Regular for post
   titles. Every class below is named for what it does (spacing, color,
   layout), never for a font choice.

   Every color that was plain "grey" reads var(--accent, #bebebe) instead -
   links, .muted text, .intro-box's border, and hr. --accent itself is set
   by a <style> block in blog/index.html's <head>, only when the site has
   one (Site.accent_color); the var() fallback keeps every site that's
   never touched it looking exactly as it did before that field existed.

   .social-links (see templates/_social_links.html) is a plain list of `a`
   tags, so it already gets the same accent-colored chip look as any other
   link with no extra color rule needed here.
   ========================================================================== */

@font-face {
  font-family: "River Mono";
  src: url("../fonts/rivermono-lig.41998fb2170b.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "River Mono";
  src: url("../fonts/rivermono-reg.427dec27442a.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "River Mono";
  src: url("../fonts/rivermono-bol.9584fe4af604.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

body {
  max-width: 333px;
  width: 90vw;
  font-family: "River Mono", monospace;
  font-weight: 300;
  margin: 0 0 0 5vw;
  padding: 0;
  font-size: 14px;
  color: rgb(66, 66, 66);
  background: #fff;
  /* A long unbroken string (a URL with no title, a run-on word) is wider
     than this 333px column and has nowhere else to wrap by default - it
     just overflows past the edge instead of respecting max-width.
     overflow-wrap only kicks in at that point, so normal short words are
     never broken mid-word; word-break is the same rule for browsers that
     don't honor overflow-wrap on certain inline elements (e.g. `a`). */
  overflow-wrap: break-word;
  word-break: break-word;
}

a {
  background-color: var(--accent, #bebebe);
  color: white;
  text-decoration: none;
  padding: 0 2px;
}

.muted {
  color: var(--accent, #bebebe);
}

b, strong { font-weight: 700; }

/* The original's underlined headings: Regular, not Bold. */
.post-title {
  text-decoration: underline;
  display: block;
  margin: 0 0 0.5em;
  line-height: 21px;
}
.post-title b { font-weight: 400; }

.post-image {
  width: 90vw;
  max-width: 333px;
  display: block;
}

/* Embedded players: see embeds.css - here just this column's spacing. */
.post-embed { margin: 0 0 1em; }

.photo-link {
  /* Wraps a photo post's image so it's click-to-expand. `a` is inline by
     default, so its grey chip background (see `a {}` above) doesn't collapse
     tightly around a block-level image child - it shows as a grey bar above
     and below it instead. display: block fixes that; the rest undoes the
     chip styling entirely, since it's not meant to look like a text link. */
  display: block;
  background: none;
  padding: 0;
}

.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: 20px 0 0;
}

.intro-box {
  margin: 20px 0;
  border: solid var(--accent, #bebebe) 1px;
  border-radius: 5px;
  padding: 10px;
}

.site-title,
.site-description {
  margin: 0;
}
.site-description {
  margin-top: 0.4em;
}

/* Block, so its top margin applies: the same gap as title-to-description
   (the description's 0.4em, at its 14px), in this smaller text. */
.social-links {
  display: block;
  margin: calc(0.4 * 14px) 0 0;
  padding: 0;
  list-style: none;
}
.social-links li {
  display: inline-block;
  margin: 0 4px 4px 0;
}

.post-list {
  margin: 0;
}

.post {
  padding: 20px 0;
}

.post-date {
  display: block;
  margin-bottom: 6px;
}

.empty-state {
  padding: 20px 0;
}

hr {
  border: none;
  border-top: 1px solid var(--accent, #bebebe);
}