/* The blog (/blog and /blog/<slug>). Loaded AFTER landing.css (tokens, base type, pill buttons,
   the card marks, .faq-item) and landing-header.css (the floating pill, shared by every public
   page). It styles what only the blog has: the index grid of post cards and the article column
   with its breadcrumbs, figures, FAQ list, call to action and related box. Dark mode is the
   tokens' job: the pre-paint bootstrap and landing.js put the class on <body id="app">, so
   nothing here has a dark rule of its own. */

.blog { padding: clamp(20px, 3vw, 40px) 0 clamp(56px, 8vw, 110px) }
.blog > .wrap { max-width: calc(1280px + 64px); padding-inline: 32px }

/* ── breadcrumbs ──────────────────────────────────────────────────────────── */

.crumbs { font-size: 13.5px; color: var(--faint); margin: 0 0 28px }
/* One line: a separator is the ::before of the item AFTER it and never breaks away from it, and the
   current page (the long post title) is the one item that shrinks and ends in an ellipsis. */
.crumbs ol { display: flex; flex-wrap: nowrap; gap: 4px 10px; margin: 0; padding: 0; list-style: none }
.crumbs li { flex: none; white-space: nowrap }
.crumbs li:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--faint) }
.crumbs a { color: var(--muted) }
.crumbs a:hover { color: var(--text); text-decoration: underline }
.crumbs [aria-current="page"] { color: var(--text) }

/* ── article ──────────────────────────────────────────────────────────────── */

.blog .post { max-width: 760px; margin-inline: auto }
.blog h1 {
  font-size: var(--fs-art-h1); font-weight: 800; line-height: 1.04; letter-spacing: -.04em;
  margin: 0 0 20px; text-wrap: balance;
}
.blog .byline { font-size: 14px; font-weight: 550; color: var(--faint); margin: 0 0 28px }
.blog .post .lead { font-size: 18px; line-height: 1.6; color: var(--text); max-width: none; margin: 0 0 34px }

.blog .post h2 {
  font-size: var(--fs-art-h2); font-weight: 700; line-height: 1.15; letter-spacing: -.03em;
  margin: 52px 0 14px; scroll-margin-top: 110px;
}
.blog .post p, .blog .post li { font-size: var(--fs-art-body); line-height: 1.72; color: var(--muted) }
.blog .post p { margin: 0 0 20px }
.blog .post strong { color: var(--text); font-weight: 600 }
.blog .post ul, .blog .post ol { margin: 0 0 24px; padding-left: 24px }
.blog .post .crumbs ol { margin: 0; padding-left: 0 }
.blog .post li { margin: 0 0 10px }
.blog .post li::marker { color: var(--ink) }

/* Links in the running text: a 1px teal underline that firms up on hover. The card, the crumbs and
   the buttons are not running text and keep their own look. */
.blog .post a:not(.btn) {
  color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); text-underline-offset: 3px;
  transition: text-decoration-color .2s;
}
.blog .post a:not(.btn):hover { text-decoration-color: var(--accent) }
.blog .post .crumbs a, .blog .post .related a { text-decoration: none }

.post-figure { margin: 0 0 40px }
.post-figure img {
  display: block; width: 100%; height: auto; border-radius: 22px;
  border: 1px solid var(--cardb); box-shadow: var(--shl);
}
.post-figure figcaption { font-size: 14px; color: var(--faint); margin-top: 12px; text-align: center }

/* The "works with" callout and the related box are the same panel. */
.works, .related, .post-cta {
  border: 1px solid var(--cardb); border-radius: 28px; background: var(--glass); box-shadow: var(--sh);
  padding: clamp(24px, 4vw, 40px);
}
.works { margin: 52px 0 0; background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: color-mix(in srgb, var(--accent) 26%, transparent) }
.blog .post .works h2 { margin-top: 0 }
.works p:last-child { margin-bottom: 0 }

/* FAQ: a hairline-separated list, the same as the question list on /home. */
.blog .faq { display: block; margin: 0 0 20px }
.blog .faq-item { padding: 26px 0; background: none; border: 0; border-top: 1px solid var(--cardb); border-radius: 0; box-shadow: none }
.blog .faq-item:last-child { border-bottom: 1px solid var(--cardb) }
.blog .faq-item h3 { font-size: 18px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 8px }
.blog .faq-item p { font-size: var(--fs-body); margin: 0 }

.post-cta { margin: 56px 0 0; text-align: center }
.blog .post .post-cta h2 { margin: 0 0 12px; font-size: clamp(24px, 2.6vw, 30px) }
.blog .post .post-cta p { margin: 0 auto 24px; max-width: 46ch }
.post-cta .cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px }

.related { margin: 24px 0 0 }
.blog .post .related h2 { margin: 0 0 14px; font-size: 22px }
.blog .related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 }
.blog .related li { margin: 0; padding: 14px 0; border-top: 1px solid var(--cardb); font-size: 17px; line-height: 1.45 }
.blog .related li:first-child { border-top: 0; padding-top: 0 }
.blog .related li:last-child { padding-bottom: 0 }
.blog .related a { color: var(--text); font-weight: 560; font-size: 17px }
.blog .post .related a:hover { color: var(--ink); text-decoration: none }

/* ── the index ────────────────────────────────────────────────────────────── */

.blog .post-list-wrap { max-width: none }
.blog .post-list-wrap h1 { max-width: 16ch; font-size: var(--fs-list-h1); line-height: 1.02; margin-bottom: 24px }
.blog .post-list-wrap .crumbs { margin-bottom: 36px }
.blog .blog-intro { font-size: var(--fs-lede); line-height: 1.6; color: var(--muted); max-width: 56ch; margin: 0 0 clamp(36px, 5vw, 64px) }

.blog ul.post-list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.post-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--glass); border: 1px solid var(--cardb); border-radius: 22px; box-shadow: var(--sh);
  transition: translate .3s cubic-bezier(.2, .7, .3, 1), border-color .3s ease;
}
.post-card:hover { translate: 0 -4px; border-color: var(--accent) }
.post-card > a:first-child { display: block; border-bottom: 1px solid var(--cardb); background: var(--cover) }
.post-card img { display: block; width: 100%; height: 210px; object-fit: cover; object-position: top left }
.post-card-body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 22px 24px 24px }
.post-card h2 { font-size: clamp(18px, 1.5vw, 20px); font-weight: 650; line-height: 1.25; letter-spacing: -.025em; margin: 0 0 12px }
.post-card h2 a { color: var(--text) }
.post-card h2 a:hover { text-decoration: none }
/* The whole card is the link: the title's anchor stretches over it. */
.post-card h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1 }
.post-card p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.6; color: var(--muted) }
.post-card .byline { order: 3; margin: 0 0 14px; font-size: 13px; color: var(--faint) }
.post-card h2 { order: 1 }
.post-card-body > p:not(.byline) { order: 2 }
.post-card-more { order: 4; margin-top: auto; font-size: 15px; font-weight: 650; color: var(--ink) }
.post-card-more::after { content: " \2192"; display: inline-block; transition: transform .25s ease }
.post-card:hover .post-card-more::after { transform: translateX(4px) }

@media (max-width: 899px) {
  .blog > .wrap { max-width: calc(680px + 36px); padding-inline: 18px }
  .works, .related, .post-cta { border-radius: 22px }
  .post-figure img { border-radius: 18px }
}
@media (max-width: 520px) {
  .blog .post .lead { font-size: 17px }
  .blog .post p, .blog .post li { font-size: 16px }
  .blog ul.post-list { grid-template-columns: 1fr }
}
@media (prefers-reduced-motion: reduce) {
  .post-card:hover { translate: none }
}