/*
 * Blog layout.
 *
 * The storefront's vocabulary carries over: ruled ledger rows, no boxes, no
 * left bars, slab numerals, one solid purple. A post is a column of text with
 * a direct answer nailed to the top, because that is both how people read it
 * and how an answer engine lifts from it.
 */

/* ------------------------------------------------------------ breadcrumb --- */

.crumbs {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  font-size: 0.8rem; color: var(--muted); padding: 22px 0 0;
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
/* A rule rather than a slash or a chevron, so the trail reads as a path. */
.crumbs > * + *::before {
  content: ''; display: inline-block; width: 14px; height: 1px;
  background: var(--line-strong); margin-right: 10px; vertical-align: middle;
}
.crumbs [aria-current] { color: var(--text); font-weight: 600; }

/* ------------------------------------------------------------------ post --- */

.post { max-width: 780px; padding-bottom: 20px; }
.post-head { padding: 0 0 6px; }
.post-title {
  font-size: clamp(1.75rem, 4.4vw, 2.6rem); line-height: 1.1;
  letter-spacing: -0.02em; margin: 18px 0 0; max-width: 20ch;
  font-variation-settings: 'wdth' 108;
}

/* The direct answer, set off between rules with the label knocked into the
   top one. It is the passage a machine will quote, so it is the passage that
   gets the strongest position on the page. */
.post-answer {
  position: relative; font-size: 1.1rem; line-height: 1.65; color: var(--text);
  border-top: 2px solid var(--accent); border-bottom: 1px solid var(--line);
  padding: 28px 0 22px; margin: 30px 0 0;
}
.post-answer::before {
  content: 'The short answer'; position: absolute; top: -8px; left: 0;
  background: var(--bg); padding-right: 12px;
  font-family: var(--font-display); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent);
}

.post-meta {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  font-size: 0.8rem; color: var(--muted); margin: 14px 0 0;
}
.post-meta > span { display: inline-flex; align-items: center; gap: 8px; }
.post-meta > span + span::before {
  content: ''; width: 3px; height: 3px; border-radius: 50%;
  background: var(--line-strong); display: inline-block;
}
.pm-by { font-weight: 500; }

.post-body { padding: 8px 0 0; }
.post-body p { font-size: 1.02rem; line-height: 1.75; color: var(--muted); margin: 0 0 20px; }
.post-body p.answer-lead { color: var(--text); }
.post-body a { color: var(--accent); }
.post-body a:hover { color: var(--accent-hover); }
.post-body .sub-head { margin-top: 44px; }
.post-body .cmp { min-width: 0; }
.post-body .methods { margin-bottom: 26px; }

/* Tables have to be allowed to scroll on a phone rather than push the page. */
.post-body table {
  display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------- close-out --- */

.post-cta {
  border-top: 2px solid var(--accent); margin: 46px 0 0; padding: 24px 0 0;
}
.post-cta-title {
  font-family: var(--font-display); font-variation-settings: 'wdth' 100;
  font-size: 1.12rem; font-weight: 800; margin: 0 0 10px; color: var(--text);
}
.post-cta p { font-size: 0.97rem; line-height: 1.7; color: var(--muted); margin: 0; }
.post-cta a, .post-cta .link-btn { color: var(--accent); }

.post-related { margin: 44px 0 0; }
.post-related-title {
  font-family: var(--font-display); font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 4px;
}

/* ------------------------------------------------------------------ index --- */

/* The index runs at the same measure as a post, so the two do not sit on
   different grids on the same site. */
.blog-head, .blog-index { max-width: 820px; }
.blog-head { padding: 10px 0 0; }
.blog-head .eyebrow { margin-top: 20px; }
.blog-head h1 {
  font-size: clamp(1.85rem, 5vw, 2.9rem); line-height: 1.08;
  letter-spacing: -0.02em; margin: 8px 0 18px; font-variation-settings: 'wdth' 110;
}
.blog-lead {
  font-size: 1.02rem; line-height: 1.75; color: var(--muted); max-width: 72ch; margin: 0;
}

.blog-index { padding: 30px 0 20px; }
.blog-group { margin: 0 0 40px; }
/* The section name with a rule running out from it, the same index device the
   storefront uses, so the two halves of the site read as one thing. */
.blog-group-title {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-display); font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 6px;
}
.blog-group-title::after {
  content: ''; flex: 1; height: 1px; background: var(--line-strong);
}

.blog-list { list-style: none; margin: 0; padding: 0; }
.blog-row { border-bottom: 1px solid var(--line); }
.blog-row:last-child { border-bottom: 0; }
.blog-row-link {
  display: block; text-decoration: none; padding: 18px 0 18px 2px;
  transition: background .16s ease, padding-left .16s ease;
}
.blog-row-link:hover { background: var(--panel); padding-left: 10px; }
.blog-row-title {
  display: block; font-family: var(--font-display);
  font-variation-settings: 'wdth' 104;
  font-size: 1.08rem; font-weight: 700; color: var(--text); margin-bottom: 5px;
}
.blog-row-link:hover .blog-row-title { color: var(--accent); }
.blog-row-answer {
  display: block; font-size: 0.92rem; line-height: 1.6; color: var(--muted); max-width: 78ch;
}
.blog-row-meta {
  display: block; font-family: var(--font-figure); font-size: 0.8rem;
  color: var(--muted); margin-top: 7px; font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .post-answer { font-size: 1.04rem; }
  .post-body .sub-head { margin-top: 34px; }
  .blog-index { padding: 26px 0 12px; }
}