/* ==========================================================================
   BLOG: the article reading surface (/blog/*.html)

   Loads after pages/simple.css on every post. It owns three things: the
   article's type scale, the body ink, and the ending (the post's own next
   step, then the next read). Before it existed, each post's subheads took
   whatever size the wrapping component gave them, so the same H2 rendered at
   16, 20, 28.8 and 43.2px across the family, and the argument ran in
   secondary ink.

   Scope is `.article-body`, the section that holds a post's content. Rules
   skip classed elements (`:not([class])`) so a component inside a post, a
   card title or a numeral, keeps its own styling (DESIGN.md section 7).
   ========================================================================== */

/* --- Article hero ------------------------------------------------------- */

/* The site hero is sized for landing pages (64px H1, 120px padding); on a post
   it pushed the first line of the argument below the fold on 16 of 17 posts.
   The article hero is left-aligned, one step down in scale, and carries the
   reading time in the byline instead of a separate meta row. */
.page-hero.article-hero {
  padding: var(--space-10) 0 var(--space-8);
}

.article-hero .page-hero__inner {
  /* The body column is centred at 880px; a hero pinned to the container's
     left edge started 184px left of it. Same column, same left edge. */
  max-width: calc(var(--container-editorial) - 2 * var(--gutter));
  margin-inline: auto;
  text-align: left;
}

.article-hero h1 {
  font-size: var(--text-h1);
  line-height: var(--leading-snug);
  max-width: 28ch;
  margin-inline: 0;
}

.article-hero .page-hero__subtitle {
  max-width: 62ch;
  margin-inline: 0;
}

.section.article-body {
  padding-top: var(--space-10);
}

/* A featured image section directly above the body already supplies the
   gap; stacked paddings left 180px between caption and first paragraph. */
.section:has(> .container > .post-feature) + .section.article-body {
  padding-top: 0;
}

/* On a phone five posts' heroes ran to 731-785px of an 844px screen: six
   lines of headline and seven of standfirst before a word of the article. */
@media (max-width: 480px) {
  .page-hero.article-hero {
    padding: var(--space-8) 0 var(--space-6);
  }

  .article-hero .page-hero__subtitle {
    font-size: var(--text-body);
  }

  /* Five posts' heroes still took 69-79% of the first screen. */
  .article-hero h1 {
    font-size: 1.75rem;
  }
}

/* --- Body ---------------------------------------------------------------- */

/* The argument is the primary text on the page, so it takes primary ink
   (16.46:1), not ink-soft (6.46:1). Metadata, captions and the byline keep
   ink-soft, which is the job that token is for. */
.article-body p:not([class]),
.article-body li:not([class]) {
  color: var(--color-ink);
}

.article-body .case-study-prose,
.article-body .post-prose {
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  max-width: 65ch;
}

.article-body .post-prose {
  margin-inline: 0;
}

/* Numbered blocks (question, control, reason) carry most of the argument in
   several posts; their paragraphs set at 16px while the prose around them
   sat at 18px. One size for the running text. */
.article-body :is(.question-block__body, .control-block__body, .reason-block__body) > p:not([class]),
.article-body :is(.question-block__body, .control-block__body, .reason-block__body) > :is(ul, ol) > li:not([class]) {
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  max-width: 65ch;
}

/* Definition, ladder, and comparison-card text is running text too; it
   stayed at 16px beside 18px prose. */
.article-body :is(.tool-def, .ladder__rung) p:not([class]),
.article-body .shines-card li:not([class]) {
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
}

/* The same measure for the other running-text blocks inside posts. */
.article-body :is(.tool-def, .ladder__rung) p:not([class]) {
  max-width: 65ch;
}

/* The pilots post's 2x2 quadrant: two 171px columns on a phone wrapped the
   copy at about 14 characters. One column below 640px. */
@media (max-width: 640px) {
  .article-body .quadrant {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* About one line of air between paragraphs on a long read (32px on a 29.7px
   line), up from 0.8 of a line. */
.article-body .case-study-prose p:not([class]) {
  margin-bottom: var(--space-6);
}

.article-body .case-study-prose p:not([class]):last-child {
  margin-bottom: 0;
}

.article-body .post-prose > * + * {
  margin-top: var(--space-6);
}

/* --- Headings ------------------------------------------------------------ */

.article-body h2:not([class]) {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  letter-spacing: 0;
  color: var(--color-ink);
  max-width: 28ch;
  margin: var(--space-10) 0 var(--space-5);
}

.article-body :is(.case-study-prose, .post-prose) > h3:not([class]),
.article-body :is(.question-block__body, .control-block__body, .reason-block__body) > h3:not([class]) {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  letter-spacing: 0;
  color: var(--color-ink);
  margin: var(--space-7) 0 var(--space-3);
}

/* Numbered blocks set the heading beside a numeral and own the gap above. */
.article-body :is(.question-block__body, .control-block__body, .reason-block__body) > :is(h2, h3):first-child {
  margin-top: 0;
}

/* A post that opens on a heading needs no extra lead-in. */
.article-body .case-study-container > h2:not([class]):first-child {
  margin-top: 0;
}

/* A source or citation line under the argument. */
.article-source {
  margin: var(--space-6) 0 0;
  max-width: 65ch;
  font-size: var(--text-small);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-soft);
}

/* --- Ending: the next read ----------------------------------------------- */

.article-next {
  margin-top: var(--space-10);
}

.article-aside + .article-next {
  margin-top: 0;
}

.article-next__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  color: var(--color-ink);
  margin: 0 0 var(--space-5);
}

.article-next__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.article-next__list > li {
  margin: 0;
}

.article-next__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-5);
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.article-next__link:hover {
  color: var(--color-ink);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.article-next__link:focus-visible {
  outline-offset: 3px;
}

.article-next__meta {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-normal);
  color: var(--color-ink-soft);
}

.article-next__name {
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  color: var(--color-ink);
}

.article-next__link:hover .article-next__name {
  color: var(--color-brand-pressed);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-next__all {
  margin: var(--space-5) 0 0;
  font-size: var(--text-body);
}

.article-next__all a {
  font-weight: var(--fw-semibold);
}

/* --- Ending: the post's own next step ---------------------------------- */

/* One line naming the service the post argues for. The Finder and Roadmap
   buttons are not repeated here: the footer band carries them on every page,
   one screen further down. */
.article-body .article-aside {
  max-width: 65ch;
  margin: 0 0 var(--space-8);
}

/* --- Small screens ------------------------------------------------------- */

@media (max-width: 768px) {
  .article-next__list {
    grid-template-columns: 1fr;
  }
}