.blog-note {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  align-items: center;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid rgba(35, 124, 141, 0.22);
  border-radius: 16px;
  background: rgba(181, 217, 224, 0.18);
  color: var(--navy);
  font-size: 0.9rem;
}

.blog-note span { color: rgba(9, 34, 57, 0.72); }

/* Keep the spaces between wrapped title lines inside the clickable link. */
.blog-post-card h2 a { display: block; }

.blog-article .article-featured-image {
  margin: 1.8rem 0 0;
  overflow: hidden;
  border: 1px solid rgba(12, 44, 71, 0.1);
  border-radius: 20px;
}

.blog-article .article-featured-image img {
  display: block;
  width: 100%;
  height: auto;
}

.blog-excerpt {
  max-width: 700px;
  color: rgba(9, 34, 57, 0.75);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.65;
}

.blog-contents {
  max-width: 720px;
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(12, 44, 71, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.blog-contents summary {
  cursor: pointer;
  color: var(--navy);
  font-weight: 800;
}

.blog-contents ul {
  display: grid;
  gap: 0.65rem;
  padding-left: 1.25rem;
  line-height: 1.5;
}

.blog-contents a { color: var(--teal-dark); }
.blog-article :is(h2, h3) { scroll-margin-top: 8rem; }
.blog-table { overflow-x: auto; }
.blog-table:has(tr > :nth-child(4)) table { min-width: 36rem; }
.blog-table:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }

.blog-search { display: grid; gap: 0.6rem; margin: 1rem 0 1.5rem; max-width: 650px; }
.blog-search > div { display: flex; gap: 0.75rem; }
.blog-search input { min-width: 0; flex: 1; padding: 0.8rem 1rem; border: 1px solid rgba(12, 44, 71, 0.25); border-radius: 10px; font: inherit; }
.blog-article .article-content img { max-width: 100%; height: auto; }
.blog-article .article-content a { overflow-wrap: anywhere; }

.blog-faq { margin-top: 3rem; }
.blog-faq-answer { padding: 0 22px 22px; color: rgba(9, 34, 57, 0.78); }
.blog-faq .blog-faq-answer p { margin: 0 0 0.8rem; padding: 0; color: inherit; }
.blog-faq .blog-faq-answer > :last-child { margin-bottom: 0; }
.blog-faq .faq-list summary:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: inherit; }

@media (max-width: 560px) {
  .blog-note { font-size: 0.82rem; }
  .blog-article .article-content :is(th, td) {
    padding: 0.65rem;
    overflow-wrap: normal;
  }
}