.blog-shell {
  padding-block:64px 80px;
  max-width:1120px
}
.blog-heading {
  margin:24px 0 36px
}
.blog-heading h1 {
  font-size:clamp(2.1rem,5vw,3.7rem);
  line-height:1.12;
  letter-spacing:-.04em;
  margin:16px 0;
  overflow-wrap:anywhere
}
.blog-heading p {
  color:#526174;
  max-width:65ch
}
.blog-eyebrow {
  font-size:.75rem;
  letter-spacing:.16em;
  font-weight:750
}
.blog-filters {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:32px
}
.blog-filters a,.blog-category {
  padding:8px 14px;
  border:1px solid #d7dfe8;
  border-radius:24px;
  display:inline-block
}
.blog-filters [aria-current] {
  background:#172b46;
  color:white
}
.blog-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px
}
.blog-card {
  background:white;
  border:1px solid #dfe5ee;
  border-radius:18px;
  padding:28px;
  overflow-wrap:anywhere
}
.blog-card h2 {
  font-size:1.45rem;
  line-height:1.3
}
.blog-card p {
  line-height:1.7
}
.blog-meta {
  font-size:.85rem;
  color:#526174
}
.blog-empty {
  padding:32px 0
}
.blog-pagination {
  display:flex;
  gap:24px;
  justify-content:center;
  margin-top:36px
}
.blog-reading {
  max-width:800px
}
.blog-excerpt {
  font-size:1.2rem;
  line-height:1.7
}
.blog-featured,.blog-prose img {
  max-width:100%;
  height:auto;
  border-radius:16px
}
.blog-prose {
  font-size:1.1rem;
  line-height:1.85;
  overflow-wrap:anywhere
}
.blog-prose h2,.blog-prose h3 {
  line-height:1.3;
  margin-top:2em
}
.blog-prose a,.blog-resources a {
  text-decoration:underline;
  text-underline-offset:3px
}
.blog-prose pre {
  overflow-x:auto;
  padding:20px;
  background:#edf1f6
}
.blog-prose table {
  display:block;
  overflow-x:auto;
  max-width:100%
}
.blog-prose blockquote {
  border-left:3px solid #7893b4;
  padding-left:24px;
  margin-left:0
}
.blog-author,.blog-resources,.blog-comments {
  border-top:1px solid #dfe5ee;
  margin-top:40px;
  padding-top:28px
}
.blog-comment {
  padding:18px 0;
  border-bottom:1px solid #dfe5ee;
  overflow-wrap:anywhere
}
.blog-form label {
  display:block;
  margin-bottom:8px;
  font-weight:650
}
.blog-form input,.blog-form textarea {
  width:100%;
  padding:12px;
  border:1px solid #aab9ca;
  border-radius:8px;
  font:inherit;
  box-sizing:border-box
}
.blog-form .errorlist {
  color:#9c2424
}
.blog-form p {
  margin-block:20px
}
.blog-shell a:focus-visible,.blog-form :focus-visible {
  outline:3px solid #2677c9;
  outline-offset:4px
}
@media(max-width:800px) {
  .blog-grid {
  grid-template-columns:1fr
}
.blog-shell {
  padding-block:32px 48px
}
.blog-card {
  padding:24px
}
.blog-reading {
  width:calc(100% - 40px)
}
.blog-pagination {
  gap:16px
}

}