/* ==========================================================================
   The blog: the index and the article layout.

   Both come out of scripts/build-blog.py. The header, footer, buttons, arch and
   type all come from base.css, so this file is only the card grid and the
   article's own reading measure.

   No colour, size, radius or duration is written by hand: every value is a
   --rw-* token.
   ========================================================================== */

/* ------------------------------------------------------------ the index --- */

.bhead { max-width: 44rem; }
.bhead .lead { margin-top: var(--rw-s-5); }

.bgrid {
  display: grid;
  gap: var(--rw-s-7);
  grid-template-columns: 1fr;
  margin-top: var(--rw-s-8);
}

@media (min-width: 48rem) {
  .bgrid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 68rem) {
  .bgrid { grid-template-columns: repeat(3, 1fr); }
}

.bcard { display: flex; flex-direction: column; }

.bcard__img {
  display: block;
  border-radius: var(--rw-r-lg);
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

.bcard__img img { width: 100%; height: 100%; object-fit: cover; }

.bcard__meta { margin-top: var(--rw-s-4); color: var(--rw-text-accent); }

.bcard__title { margin-top: var(--rw-s-3); }

/* The whole card is the link target, but only the title carries the underline,
   so a card does not read as one long run of underlined text. */
/* inline-block plus padding so a one line title still clears the 44px tap
   target. Two line titles clear it on their own. */
.bcard__title a {
  display: inline-block;
  padding-block: var(--rw-s-3);
  color: inherit;
  text-decoration: none;
}
.bcard:hover .bcard__title a { text-decoration: underline; }
.bcard__title a:focus-visible { outline: var(--rw-focus); outline-offset: 3px; }

.bcard__excerpt { margin-top: var(--rw-s-3); color: var(--rw-text-muted); }

/* ---------------------------------------------------------- the article --- */

/* A narrower measure than the rest of the site. Long-form prose wants about 68
   characters a line, and --rw-measure is set for shorter marketing copy. */
.bpost { max-width: 40rem; }

.bpost__meta { color: var(--rw-text-accent); }

.bpost__lead { margin-top: var(--rw-s-5); }

.bpost__body { margin-top: var(--rw-s-7); }

.bpost__body > * + * { margin-top: var(--rw-s-5); }

.bpost__body h2 {
  margin-top: var(--rw-s-8);
  font-size: var(--rw-fs-xl);
  font-weight: var(--rw-w-bold);
  line-height: var(--rw-lh-snug);
  letter-spacing: var(--rw-ls-head);
  color: var(--rw-text-strong);
}

.bpost__body h3 {
  margin-top: var(--rw-s-7);
  font-size: var(--rw-fs-lg);
  font-weight: var(--rw-w-semi);
  line-height: var(--rw-lh-snug);
  color: var(--rw-text-strong);
}

.bpost__body p { max-width: none; }

.bpost__body ul,
.bpost__body ol { padding-left: var(--rw-s-6); }

.bpost__body li + li { margin-top: var(--rw-s-3); }

.bpost__body a { color: var(--rw-text-accent); }

/* A pulled-out line, used once or twice in a post where a number or a
   correction deserves to stop the eye. Not a quote, so no quotation marks. */
.bpost__body .bnote {
  padding-left: var(--rw-s-5);
  border-left: var(--rw-rule-w) solid var(--rw-rust);
  color: var(--rw-text-strong);
}

.bpost__img { margin-top: var(--rw-s-7); border-radius: var(--rw-r-lg); overflow: hidden; }
.bpost__img img { display: block; width: 100%; height: auto; }

/* ----------------------------------------------------------- the footer --- */

.bnext { margin-top: var(--rw-s-9); padding-top: var(--rw-s-6); border-top: var(--rw-rule-w) solid var(--rw-border); }
.bnext__label { color: var(--rw-text-accent); }
.bnext__list { margin-top: var(--rw-s-4); display: grid; gap: var(--rw-s-3); }