/* The blog's furniture: the index list, the post header, related posts.
 *
 * SEPARATE FROM `prose.css` on purpose. That file exists because markdown
 * decides the markup and cannot apply a class, so it is the one place that
 * needs bare element selectors — and `check-blog.mjs` reads the set of
 * elements a post may contain out of it. Everything here is markup the build
 * writes, so it is classed like the rest of the site and must not widen that
 * set by accident.
 *
 * Loaded only by baked blog pages, alongside `site.css` and `prose.css`. No
 * colour literal (check-blog.mjs asserts it), and `--accent` stays on focus,
 * active nav and selection per ADR-0052 D2 — a post title is a link, not a
 * selection.
 */

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

.bindex { border-top: 1px solid var(--rule); }

/* One row per post. Title left, metadata right, and on a phone the metadata
   drops under the title rather than wrapping into it. `align-items: baseline`
   so the date sits on the title's baseline, not on the row's centre. */
.brow {
  display: flex; align-items: baseline; gap: var(--sp-4);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--rule);
  transition: background var(--mo-fast);
}
.brow:hover { background: var(--raised); }

.brow-title {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--ff-display); font-weight: 600;
  font-size: clamp(18px, 1.7vw, 23px);
  letter-spacing: -0.025em; line-height: 1.25;
  max-width: 46ch; text-wrap: balance;
}
.brow-title a { color: var(--ink-1); text-decoration: none; }
/* The underline appears on hover rather than sitting there permanently: a list
   of twenty underlined headlines reads as a wall of links, not as an index. */
.brow:hover .brow-title a { border-bottom: 1px solid var(--rule-strong); }

/* Author · date · category. Mono, because it is metadata about the row and not
   part of the row's voice — the same register the site uses for every caption
   and axis tick. `--ink-2`, never `--ink-3`: 2.9:1 is short of AA. */
.brow-meta {
  flex: 0 0 auto;
  display: flex; align-items: baseline; gap: var(--sp-2);
  font-family: var(--ff-mono); font-size: var(--t-mono-label-size);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
  white-space: nowrap;
}
.brow-cat { color: var(--ink-1); }

@media (max-width: 760px) {
  .brow { flex-direction: column; gap: var(--sp-2); align-items: stretch; }
  .brow-meta { white-space: normal; flex-wrap: wrap; }
}

/* The Spanish index carries one line saying which languages posts exist in.
   It is a statement of fact, not a warning, so it gets no colour of its own. */
.bnote {
  margin-top: var(--sp-4); color: var(--ink-2);
  font-size: var(--t-body); max-width: 66ch;
}

.bempty { color: var(--ink-2); font-size: var(--t-lede); padding: var(--sp-7) 0; }

/* ------------------------------------------------------------- post header */

.bpost-head { border-bottom: 1px solid var(--rule); padding-bottom: var(--sp-6); }

.bpost-title {
  font-family: var(--ff-display); font-weight: 600;
  font-size: clamp(28px, 3.4vw, 46px);
  letter-spacing: -0.035em; line-height: 1.1;
  color: var(--ink-1); max-width: 22ch; text-wrap: balance;
  margin-top: var(--sp-3);
}

.bpost-meta {
  margin-top: var(--sp-4);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2);
  font-family: var(--ff-mono); font-size: var(--t-mono-label-size);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
}

/* The article body sits under the header on the same shell — no second,
   narrower container. `prose.css` puts the measure on each element. */
.bpost-body { padding-top: var(--sp-7); }

.bback {
  display: inline-block; margin-top: var(--sp-7);
  font-family: var(--ff-mono); font-size: var(--t-mono-label-size);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: color var(--mo-fast), border-color var(--mo-fast);
}
.bback:hover { color: var(--ink-1); border-bottom-color: var(--ink-1); }

/* ----------------------------------------------------------------- related */

.brelated { border-top: 1px solid var(--rule); }
.brelated .brow:last-child { border-bottom: 0; }