/* "In short": the summary at the top of every blog article.
   One answer sentence and three points, always open, directly under the
   title block and above the photo, so a reader gets the point in the first
   screen. Written into each page by scripts/patch-blog-summaries.php from
   scripts/blog-summaries.php; uses the article tokens from home.css (.cp-home),
   so it is linked after home.css, on article pages only.

   Set like a printed standfirst rather than a card: the label sits between
   two hairlines, the answer is centred in the serif under the centred title,
   and the three points stand in ruled columns with brass numerals, as wide as
   the photo below (760px). No box, no side bar, no shadow. On a phone the
   columns stack. The answer is set a step below the article's opening
   paragraph so the order reads title, summary, article. */

/* Hero rhythm (visual audit, 12 Oct). The title group, from the back link to
   the date line, sits close together; a clear gap then separates it from the
   summary, which is a new section. Measured at 1280x800 before: about 42px of
   air between the back link and the category, 40px between the category and
   the title, but only 26px before the summary. Most of the first gap was the
   back link's 44px tap area sitting below its text (home.css sets it to
   display: block), so the text is now centred in that area, which keeps the
   44px target and loses the dead space. */
.cp-home .blog-article-hero { padding-top: clamp(84px, 10vh, 108px); }
.cp-home .blog-article-hero .article-back {
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  margin: 0 auto 6px;
}
.cp-home .blog-article-hero .eyebrow { margin-bottom: 12px; }
.cp-home .blog-article-hero h1 { margin: 0 auto 16px; }
.cp-home .blog-article-hero .article-meta { margin-bottom: 36px; }

.cp-home .article-brief {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.cp-home .article-brief-label {
  display: flex;
  max-width: none;               /* the site caps every h2 at 16.5ch */
  align-items: center;
  gap: 16px;
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-wrap: nowrap;
  color: var(--brass-text);
}
.cp-home .article-brief-label::before,
.cp-home .article-brief-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-strong);
}

.cp-home .article-brief-answer {
  max-width: 36em;
  margin: 0 auto 22px;
  font-family: var(--serif);
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.55;
  text-wrap: balance;
  color: var(--navy);
}

.cp-home .article-brief-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: brief;
  text-align: left;
}
.cp-home .article-brief-points li {
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line-strong);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  counter-increment: brief;
}
.cp-home .article-brief-points li::before {
  content: counter(brief, decimal-leading-zero);
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--brass-text);
}

@media (max-width: 720px) {
  .cp-home .blog-article-hero { padding-top: 80px; }
  .cp-home .blog-article-hero .article-back { margin-bottom: 0; }
  .cp-home .blog-article-hero .eyebrow { margin-bottom: 10px; }
  .cp-home .blog-article-hero h1 { margin-bottom: 12px; }
  .cp-home .blog-article-hero .article-meta { margin-bottom: 26px; }
  .cp-home .article-brief-label { margin-bottom: 12px; }
  .cp-home .article-brief-answer { margin-bottom: 14px; font-size: 16.5px; line-height: 1.55; }
  .cp-home .article-brief-points { grid-template-columns: 1fr; }
  .cp-home .article-brief-points li {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: baseline;
    padding: 9px 0;
    font-size: 14.5px;
    line-height: 1.55;
  }
  .cp-home .article-brief-points li:last-child { border-bottom: 1px solid var(--line-strong); }
  .cp-home .article-brief-points li::before { margin-bottom: 0; }
}

@media print {
  .cp-home .article-brief { break-inside: avoid; }
}