/* Shared by the blog index, the post pages and the category archives.
   It lives in blocks/ rather than beside one instance because the build
   inlines a part's CSS only when the filenames match — so as instances/blog/
   index.css it loaded on /blog/ and silently did not load on the posts or the
   archives, which is exactly how three pages shipped with unstyled meta lines
   and sub-44px links. All three now carry it as a <link>. */

/* =============================================================================
   The blog — index, archive and post. One stylesheet for all three because
   they share nearly everything and splitting them would mean maintaining the
   same measure and the same hairline in three places.
   ========================================================================== */

.b-bloglist__head { max-width: 60ch; }
.b-bloglist__lede { margin-top: var(--sp-6); color: var(--soft); }

/* Category chips. Not tap-target-exempt — they navigate — so they carry the
   44px floor the same way the breadcrumbs do. */
.b-bloglist__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin: var(--sp-8) 0 0;
  padding: 0;
}
.b-bloglist__chip {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
  padding-inline: var(--sp-4);
  background: var(--alt);
  color: var(--accent);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  text-decoration: none;
  transition: border-color var(--dur-hover) var(--ease-out);
}
.b-bloglist__chip:hover { border-color: var(--accent); }

/* The post list is a stack of hairline-separated rows rather than cards —
   the same decision the services list made, and for the same reason: three
   posts as three cards reads as a grid with gaps in it. */
/* Cards since 21 Aug 2026 — the newest post leads full-width on the sand
   ground, the rest pair up beneath it. nth-child here is WITHIN one
   repeated list, which the portability rule allows (it bans cross-section
   coupling). */
.b-bloglist__posts {
  list-style: none;
  margin: clamp(var(--sp-12), 6vw, var(--sp-20)) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
}
.b-bloglist__post {
  padding: clamp(var(--sp-6), 3vw, var(--sp-8));
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-tight, 3px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.b-bloglist__post:first-child {
  grid-column: 1 / -1;
  background: var(--alt);
  border-color: transparent;
  padding: clamp(var(--sp-8), 4vw, var(--sp-12));
}
.b-bloglist__post:first-child .b-bloglist__title { max-width: 32ch; }

.b-bloglist__excerpt { flex: 1; }

.b-bloglist__more { margin-top: var(--sp-5); }
.b-bloglist__more a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: var(--tap-min);
  font-weight: 600;
  color: var(--dark);
  text-decoration: none;
  border-bottom: 1px solid var(--sage);
}
.b-bloglist__more a:hover { border-color: var(--accent); }
.b-bloglist__go { transition: translate 0.15s ease; }
.b-bloglist__more a:hover .b-bloglist__go { translate: 3px 0; }

@media (max-width: 767.98px) {
  .b-bloglist__posts { grid-template-columns: minmax(0, 1fr); }
}

.b-bloglist__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
/* The category link in a meta line is standalone navigation, not a link in
   running prose, so the 44px floor applies. inline-flex + min-block-size,
   the same treatment the breadcrumbs get in alwc-tokens.css. */
.b-bloglist__meta a,
.b-post__meta a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
  color: inherit;
}

.b-bloglist__title { margin-top: var(--sp-4); max-width: 26ch; }
.b-bloglist__title a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-hover) var(--ease-out);
}
.b-bloglist__title a:hover { border-color: var(--accent); }

.b-bloglist__excerpt { margin-top: var(--sp-4); max-width: var(--measure); color: var(--soft); }
.b-bloglist__back { margin-top: clamp(var(--sp-10), 5vw, var(--sp-16)); }

/* --- the post itself ------------------------------------------------------ */

.b-post__inner { max-width: 72ch; }
.b-post__head { background: var(--alt); }
.b-post__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

.b-post__h1 { margin-top: var(--sp-5); max-width: 20ch; }
.b-post__standfirst { margin-top: var(--sp-6); max-width: var(--measure); color: var(--soft); }

/* The citable paragraph is set slightly larger and rules off from the body.
   That is not decoration: it is the passage most likely to be quoted back to
   someone by a search engine, and it should read as the answer rather than as
   the first of several paragraphs. */
.b-post__citable {
  padding-bottom: clamp(var(--sp-8), 4vw, var(--sp-12));
  border-bottom: 1px solid var(--line);
  max-width: var(--measure);
}

.b-post__section { margin-top: clamp(var(--sp-10), 5vw, var(--sp-16)); }
.b-post__h2 { max-width: 24ch; }
.b-post__section p { margin-top: var(--sp-5); max-width: var(--measure); }

.b-post__links {
  margin-top: clamp(var(--sp-12), 6vw, var(--sp-20));
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line);
}
.b-post__links ul { list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
.b-post__links li { border-bottom: 1px solid var(--line); }
.b-post__links a {
  display: flex;
  align-items: center;
  min-block-size: var(--tap-min);
  padding-block: var(--sp-3);
  color: var(--accent);
  text-decoration: none;
}
.b-post__links a:hover { text-decoration: underline; }

/* The index's breadcrumb borrows the hero's crumb classes, but this page
   never loads mod-hero.css — it rendered as a literal numbered list until
   21 Aug 2026 (found during the index revamp). These are the hero's crumb
   rules, scoped to the blog list so nothing else doubles up. */
.b-bloglist .b-hero__crumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--soft);
}
.b-bloglist .b-hero__crumb-list li { display: inline-flex; align-items: center; }
.b-bloglist .b-hero__crumb-list li + li::before {
  content: "/";
  margin-inline-end: var(--sp-2);
  color: var(--sage);
}
.b-bloglist .b-hero__crumb-list a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
  color: inherit;
}