/* ── The article reading surface ──────────────────────────
   Split from blog.css: the index is a browsing problem (grids, cards, hover)
   and this is a reading problem (measure, rhythm, colour of ink). They change
   for different reasons and are edited on different days. Loaded by every blog
   page because the shared header lives in blog.css and this builds on it. */

/* 680px at 18px lands near 68 characters a line. Much past 75 and the eye
   loses its place on the return sweep; much under 45 and it sweeps too often. */
.blog-article { max-width: 680px; }

.blog-crumb {
  display: inline-block;
  margin: 34px 0 18px;
  font-size: 13.5px;
  color: var(--subtle);
  transition: color 0.16s ease;
}
.blog-crumb:hover { color: var(--text); }

.blog-article-head h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0 0 16px;
  text-wrap: balance;
}

/* The standfirst: the promise the headline made, spelled out. It is already
   written, since the same text serves the card and the search result.
   Set in the body face two points larger, it just read as grey body copy.
   Borrowing the headline's serif, in italic, puts it in a different register
   instead, and because the family and the slope carry the distinction it does
   not need to be large as well. */
.blog-article-dek {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.48;
  color: var(--muted);
  margin: 0 0 24px;
  text-wrap: pretty;
}

.blog-article-head .blog-card-byline { font-size: 14px; margin-bottom: 22px; }
.blog-article-head .blog-card-byline time { color: inherit; }

.blog-article-hero {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--line);
  margin-bottom: 38px;
}

.blog-body {
  font-size: 18px;
  line-height: 1.72;
  color: var(--text);
  text-wrap: pretty;
}
.blog-body p { margin: 0 0 1.3em; }

/* The opening paragraph sets the voice; a touch more size earns the reader's
   first few seconds without shouting. */
.blog-body > p:first-child { font-size: 19.5px; line-height: 1.62; color: var(--text); }

/* ...but only when there is no standfirst. Two enlarged ledes stacked on top of
   each other is what made the dek read as body copy in the first place. */
.blog-article-head:has(.blog-article-dek) ~ .blog-body > p:first-child {
  font-size: inherit;
  line-height: inherit;
}

.blog-body h2, .blog-body h3, .blog-body h4 {
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.22;
  margin: 2.1em 0 0.55em;
  scroll-margin-top: 84px;   /* the sticky bar must not cover a linked heading */
  text-wrap: balance;
}
.blog-body h2 {
  font-size: 27px;
  padding-top: 0.5em;
  border-top: 1px solid var(--line);
}
.blog-body h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.blog-body h3 { font-size: 21px; }
.blog-body h4 { font-size: 17px; }
.blog-body a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.blog-body a:hover { text-decoration-thickness: 2px; }

/* Charts and screenshots break out past the measure. A figure sized to the
   text column is a figure you have to squint at; the prose keeps its 68
   characters and the image gets the room it needs. */
.blog-body img {
  width: calc(100% + 96px);
  max-width: calc(100vw - 48px);
  margin: 2em 0 2em -48px;
  border-radius: 14px;
  border: 1px solid var(--line);
}

.blog-body ul, .blog-body ol { margin: 0 0 1.3em; padding-left: 1.3em; }
.blog-body li { margin-bottom: 0.5em; padding-left: 0.2em; }
.blog-body li::marker { color: var(--subtle); }
.blog-body blockquote {
  margin: 1.5em 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--accent);
  color: var(--muted);
  font-style: italic;
}
.blog-body hr { border: none; border-top: 1px solid var(--line); margin: 2.2em 0; }
.blog-body code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--surface-hi);
  border-radius: 6px;
  padding: 2px 6px;
}
.blog-body pre {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  overflow-x: auto;
  margin: 0 0 1.4em;
}
.blog-body pre code { background: none; padding: 0; font-size: 13px; line-height: 1.65; }

/* ── Share row ──────────────────────────────────────────── */

.blog-share { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; }
.blog-share-label { font-size: 12.5px; color: var(--subtle); margin-right: 4px; }

.blog-share-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.blog-share-btn svg { width: 15px; height: 15px; }
.blog-share-btn:hover { color: var(--text); border-color: var(--line-hi); background: var(--surface-hi); transform: translateY(-1px); }
.blog-share-btn.is-copied { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

.blog-article-share-end {
  margin-top: 40px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.blog-article-share-end p { margin: 0 0 10px; font-size: 14px; color: var(--muted); }
.blog-article-share-end .blog-share { margin: 0; }

.blog-article-cta {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}
.blog-article-cta a:hover { color: var(--text); }

/* Below this the measure plus its 48px break-out margins no longer fit, so
   images return inside the column instead of hanging off the left edge. */
@media (max-width: 880px) {
  .blog-body img { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; }
}

@media (max-width: 640px) {
  .blog-crumb { margin-top: 22px; }
  .blog-article-dek { font-size: 18.5px; }
  .blog-body { font-size: 17px; }
  .blog-body > p:first-child { font-size: 18px; }
  .blog-body h2 { font-size: 23px; }
  .blog-body h3 { font-size: 19px; }
  .blog-share { flex-wrap: wrap; }
}