/* Blog reading styles (index + posts). Mobile-first: base rules are for phones,
   media queries add room from 640px up. Linked as /assets/blog.css?v=N on each blog page. */

.blog-wrap { max-width: 44rem; margin: 0 auto; padding: 0 20px; }
@media (min-width: 640px) { .blog-wrap { padding: 0 24px; } }

/* On phones the article sits straight on the page so text gets the full width;
   the white card appears from 640px up. */
.article-card { padding: 0; }
@media (min-width: 640px) {
  .article-card { background: #fff; border: 1px solid rgba(15,118,110,.05); border-radius: 24px; padding: 32px; box-shadow: 0 16px 40px rgba(18,32,28,.08); }
}
@media (min-width: 1024px) { .article-card { padding: 40px 48px; } }

/* Body copy: 18px with open leading and a clear gap between paragraphs. */
.prose-g2g { font-size: 18px; line-height: 1.7; color: #2c3d36; overflow-wrap: break-word; }
@media (min-width: 640px) { .prose-g2g { line-height: 1.75; } }
.prose-g2g > :first-child { margin-top: 0; }
.prose-g2g > :last-child { margin-bottom: 0; }
.prose-g2g p { margin: 0 0 20px; }

/* Lead paragraph: the opening reads as an introduction. */
.prose-g2g > p:first-child { font-size: 20px; line-height: 1.6; color: #12201C; }
@media (min-width: 640px) { .prose-g2g > p:first-child { font-size: 21px; } }

/* Section breaks: generous space and a short accent bar so sections read as chunks. */
.prose-g2g h2 { font-size: 25px; font-weight: 700; color: #12201C; margin: 44px 0 12px; letter-spacing: -0.02em; line-height: 1.25; scroll-margin-top: 112px; }
.prose-g2g h2::before { content: ""; display: block; width: 36px; height: 3px; margin-bottom: 14px; border-radius: 2px; background: #0F766E; }
.prose-g2g h3 { font-size: 20px; font-weight: 700; color: #12201C; margin: 28px 0 10px; line-height: 1.3; }
@media (min-width: 640px) {
  .prose-g2g h2 { font-size: 28px; margin-top: 52px; }
  .prose-g2g h3 { font-size: 22px; }
}

.prose-g2g a { color: #0F766E; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.prose-g2g ul, .prose-g2g ol { margin: 0 0 20px; padding-left: 24px; }
.prose-g2g ul { list-style: disc; }
.prose-g2g ol { list-style: decimal; }
.prose-g2g li { line-height: 1.65; margin-bottom: 10px; padding-left: 4px; }
.prose-g2g li::marker { color: #0F766E; font-weight: 700; }

/* Quotes double as pull-quotes that break up long stretches of text. */
.prose-g2g blockquote { border-left: 4px solid #0F766E; background: #EAF3EF; padding: 16px 18px; border-radius: 0 12px 12px 0; margin: 24px 0; color: #12201C; font-size: 19px; line-height: 1.6; }
.prose-g2g blockquote p { margin: 0; }
.prose-g2g .nowrap { white-space: nowrap; }

/* Before/after example notes: a weak and a strong version stacked as one unit.
   Labels are text so the meaning never depends on color alone. */
.prose-g2g .note-pair { margin: 0 0 20px; }
.prose-g2g .note-pair p { margin: 0; padding: 12px 16px; font-size: 17px; line-height: 1.6; color: #12201C; }
.prose-g2g .note-bad { background: #FDF1F0; border-left: 4px solid #B42318; border-radius: 12px 12px 0 0; }
.prose-g2g .note-good { background: #EAF3EF; border-left: 4px solid #0F766E; border-radius: 0 0 12px 12px; margin-top: 3px !important; }
.prose-g2g .note-label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.prose-g2g .note-bad .note-label { color: #B42318; }
.prose-g2g .note-good .note-label { color: #0B5F59; }
.prose-g2g .note-bad .note-label::before { content: "\2715\00a0"; }
.prose-g2g .note-good .note-label::before { content: "\2713\00a0"; }
.prose-g2g hr { border: 0; border-top: 1px solid rgba(15,118,110,.2); margin: 32px 0; }
.prose-g2g img { max-width: 100%; height: auto; border-radius: 16px; margin: 24px 0; }

/* "In this article" jump list: collapsed by default, one tap to open. */
.toc { margin: 16px 0 0; border: 1px solid rgba(15,118,110,.22); border-radius: 12px; background: #fff; }
.toc summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 16px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; color: #0F766E; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.toc[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.toc ol { margin: 0; padding: 6px 16px 10px 38px; list-style: decimal; border-top: 1px solid rgba(15,118,110,.12); }
.toc li { margin: 0; padding-left: 2px; font-size: 15px; line-height: 1.4; }
.toc li::marker { color: #0F766E; font-weight: 600; }
.toc a { display: block; padding: 8px 0; color: #12201C; font-weight: 500; text-decoration: none; }
.toc a:hover { color: #0F766E; }