/* Compact article cards, scoped to the blog listing. */
html body[data-page-kind="blog"] main .grid{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr))!important;
 width:100%;max-width:860px!important;margin-inline:auto;gap:20px!important;align-items:stretch
}
html body[data-page-kind="blog"] main .grid>.article:not([hidden]){
 display:flex;flex-direction:column;min-width:0;max-width:none;width:100%;margin:0;
 background:rgba(255,251,243,.8);border:1px solid rgba(255,255,255,.9);
 border-radius:20px;overflow:hidden;box-shadow:0 10px 28px rgba(61,48,30,.07)
}
html body[data-page-kind="blog"] main .article>a{
 display:block;aspect-ratio:1200/630;overflow:hidden;flex:none
}
html body[data-page-kind="blog"] main .article img{
 display:block;width:100%;height:100%;aspect-ratio:1200/630;object-fit:cover;object-position:center
}
html body[data-page-kind="blog"] main .article .copy{
 display:flex;flex:1;flex-direction:column;gap:8px;padding:16px 18px;
 text-align:right;font:400 16px/1.5 Rubik,Arial,sans-serif!important
}
html body[data-page-kind="blog"] main .article .tag{
 align-self:flex-start;display:inline-block;margin:0;padding:3px 9px;
 border:1px solid rgba(23,61,52,.18);border-radius:999px;
 font:400 12px/1.5 Rubik,Arial,sans-serif!important
}
html body[data-page-kind="blog"] main .article .meta{
 margin:0;opacity:.75;font:400 13px/1.5 Rubik,Arial,sans-serif!important
}
html body[data-page-kind="blog"] main .article h2{
 margin:0;min-height:2.8em;font:500 20px/1.4 Rubik,Arial,sans-serif!important;
 text-wrap:pretty!important
}
html body[data-page-kind="blog"] main .article h2 a{color:inherit;text-decoration:none}
html body[data-page-kind="blog"] main .article .copy>p{
 display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;
 min-height:6em;margin:0;text-wrap:pretty!important;
 font:400 16px/1.5 Rubik,Arial,sans-serif!important
}
html body[data-page-kind="blog"] main .article a.read{
 display:inline-flex;align-items:center;align-self:flex-start;min-height:44px;
 margin-top:auto;color:#173d34;font:500 16px/1.4 Rubik,Arial,sans-serif!important;
 text-underline-offset:4px
}
html body[data-page-kind="blog"] main .article a:focus-visible{
 outline:3px solid #b68a4d;outline-offset:-3px
}
@media(max-width:700px){
 html body[data-page-kind="blog"] main .grid{grid-template-columns:1fr!important;max-width:430px!important;gap:18px!important}
 html body[data-page-kind="blog"] main .article .copy{padding:14px 16px}
 html body[data-page-kind="blog"] main .article h2{min-height:0}
 html body[data-page-kind="blog"] main .article .copy>p{min-height:0}
}