/* Blog index and article pages. Long-form reading, same tokens as the rest. */

.blog-index,
.article {
  border-top: none;
}

.post-meta {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}

.post-meta a {
  color: var(--accent);
}

/* Index -------------------------------------------------------------- */
.post-list {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 2rem;
}

.post-card {
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}

.post-card:last-child {
  border-bottom: none;
}

.post-card h2 {
  font-size: 1.45rem;
  margin-bottom: 0.5rem;
}

.post-card h2 a {
  text-decoration: none;
}

.post-card h2 a:hover {
  color: var(--accent);
}

.post-link {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 3px;
}

.post-link:hover {
  text-decoration: underline;
}

/* Article ------------------------------------------------------------ */
.draft-flag {
  background: #fff4d6;
  border: 1px solid #e0a800;
  border-radius: var(--radius);
  color: #5c4600;
  padding: 0.6rem 0.9rem;
  font-size: 0.88rem;
  margin-bottom: 1.5rem;
}

.article h1 {
  font-size: clamp(2rem, 4.5vw, 2.9rem);
}

.article .lede {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}

.article-body {
  font-size: 1.05rem;
}

.article-body h2 {
  font-size: 1.4rem;
  margin-top: 2.5rem;
}

.article-body h3 {
  font-size: 1.08rem;
  margin-top: 1.75rem;
}

.article-body p,
.article-body li {
  color: var(--ink-soft);
  text-wrap: pretty;
}

.article-body strong {
  color: var(--ink);
}

.article-body ul,
.article-body ol {
  margin: 0 0 1.25rem;
  padding-left: 1.3rem;
  display: grid;
  gap: 0.65rem;
}

.article-body a {
  color: var(--accent);
  text-underline-offset: 3px;
}

/* A post that embeds a CTA puts a .btn inside .article-body, where the prose
   link rule above outranks .btn on specificity and repaints the label in the
   accent it is already sitting on - an accent rectangle with an invisible word
   in it. The closing CTA never hit this because it renders outside the body.
   Scoped to .article-cta rather than to every .btn in prose, so a future
   .btn-ghost in an article still gets its own color. */
.article-cta .btn {
  color: #fff;
  text-decoration: none;
}

.article-body blockquote {
  margin: 1.5rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--accent);
  font-size: 1.1rem;
}

.article-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
}

.article-body th,
.article-body td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--line);
}

/* Wide content must scroll inside itself, never the page. */
.article-body :is(table, pre) {
  display: block;
  overflow-x: auto;
}

/* Table headers borrow the feature-page comparison table's treatment, so a
   column head reads the same way wherever the site sets two things side by
   side. */
.article-body thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
  border-bottom-width: 2px;
}

.article-body tbody th {
  font-weight: 600;
  color: var(--ink);
  vertical-align: top;
}

.article-body td {
  color: var(--ink-soft);
  vertical-align: top;
}

/* Shown only in the stacked layout at the end of this file, where a cell no
   longer has a visible column header above it. */
.article-col-label {
  display: none;
}

/* The short answer, at the top of a post whose title asks a question. It is
   the paragraph a search result quotes and the one a reader in a hurry stops
   at, so it reads as its own object rather than as the first of three
   indistinguishable paragraphs. Accent rule from the blockquote, tinted
   surface from .article-cta - a new emphasis, not a new palette. */
.article-answer {
  margin: 0 0 1.75rem;
  padding: 1.1rem 1.25rem;
  background: var(--bg-alt);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.article-answer p:last-child {
  margin-bottom: 0;
}

/* Table of contents. Long posts only, and deliberately quieter than
   .article-answer directly above it: this is navigation, not an argument, and
   two tinted blocks stacked would read as one confused object. Outline only. */
.article-toc {
  margin: 0 0 2.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.article-toc h2 {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
}

.article-toc ol {
  margin: 0;
  padding-left: 1.15rem;
  gap: 0.45rem;
  font-size: 0.97rem;
}

/* The header is sticky, so an anchor landing flush with the viewport top puts
   the heading it was aimed at underneath it. */
.article-body :is(h2, h3)[id] {
  scroll-margin-top: 5rem;
}

.post-updated {
  margin-top: 2rem;
  font-size: 0.88rem;
  font-style: italic;
}

/* Inside the body it is an interruption between two sections, so it is spaced
   like one. The closing card below the article keeps its larger top margin. */
.article-body .article-cta {
  margin: 2.5rem 0;
}

.article-cta {
  margin-top: 3rem;
  padding: 1.75rem 1.5rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.article-cta h2 {
  font-size: 1.2rem;
  margin-bottom: 0.4rem;
}

.article-cta p {
  font-size: 0.97rem;
}

@media (max-width: 40rem) {
  .article-cta .btn {
    width: 100%;
    text-align: center;
  }

  /* At this width a two-column table scrolls sideways behind a gesture nothing
     advertises, and the second column - the half carrying the answer - starts
     off-screen. Each row becomes a card instead: the same move .compare-table
     makes on the feature pages, for the same reason. */
  .article-body table,
  .article-body tbody,
  .article-body tr,
  .article-body tbody th,
  .article-body td {
    display: block;
  }

  .article-body table {
    overflow-x: visible;
  }

  /* The header row stays in the DOM. The <th scope="col"> is what associates
     each cell with its column for a screen reader, and display: none would
     take that away; its visible job passes to .article-col-label. */
  .article-body thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .article-body tbody tr {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    margin-bottom: 0.75rem;
  }

  .article-body tbody th {
    padding: 0 0 0.6rem;
    font-size: 1rem;
  }

  .article-body tbody td {
    padding: 0.6rem 0 0;
    border-bottom: 0;
  }

  /* A row that opens with a <td> rather than a row header starts flush with
     the top of its card. */
  .article-body tbody tr > td:first-child {
    padding-top: 0;
  }

  .article-col-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--ink-soft);
    margin-bottom: 0.15rem;
  }
}