.blog-post{background:var(--color-canvas);padding-block:12rem 5rem}.blog-post .article-shell{width:min(100% - 4rem,75rem);margin-inline:auto}.blog-post .article-breadcrumb{color:#69716a;font-size:var(--text-xs);line-height:var(--text-caption--line-height);flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:2.5rem;display:flex}.blog-post .article-breadcrumb a:hover{color:var(--color-ink)}.blog-post .article-breadcrumb>span{color:#bcc1bb}.blog-post .article-layout{grid-template-columns:minmax(0,1fr) 18rem;align-items:start;gap:4rem;display:grid}.blog-post .article-main{min-width:0}.blog-post .article-eyebrow{color:var(--color-earth);align-items:center;gap:.6rem;display:flex}.blog-post .article-eyebrow:before{content:"";background:var(--color-clay);flex-shrink:0;width:1.5rem;height:2px}.blog-post .article-header h1{color:var(--color-ink);margin-top:1rem}.blog-post .article-categories:has(ul){margin-top:1.25rem}.blog-post .article-meta{color:#657067;font-size:var(--text-xs);line-height:var(--text-caption--line-height);flex-wrap:wrap;align-items:center;gap:.65rem 1rem;margin-block:1.5rem 1.75rem;display:flex}.blog-post .article-meta>*+*{border-left:1px solid #dce0da;padding-left:1rem}.blog-post .article-author{color:#333d34;font-weight:700}.blog-post .article-reading-time{align-items:center;gap:.4rem;display:inline-flex}.blog-post .article-reading-time svg{stroke:currentColor;stroke-width:1.4px;stroke-linecap:round;stroke-linejoin:round;width:.9rem;height:.9rem}.blog-post .article-cover{aspect-ratio:16/9;background:var(--color-mist);border-radius:1rem;overflow:hidden}.blog-post .article-cover img{object-fit:cover;width:100%;height:100%}.blog-post .article-body{padding-top:2.25rem}.blog-post .article-intro,.blog-post .article-prose{color:#424b43;overflow-wrap:anywhere}.blog-post .article-intro{white-space:pre-line;margin-bottom:2.5rem}.blog-post .article-prose>*+*{margin-top:1.25rem}.blog-post .article-prose :is(h2,h3,h4,h5,h6){color:var(--color-ink);scroll-margin-top:2rem}.blog-post .article-prose h2{border-top:1px solid #e3e7e0;margin-block:2.5rem 1rem;padding-top:1.5rem}.blog-post .article-prose h3{margin-block:2rem .75rem}.blog-post .article-prose :is(h4,h5,h6){margin-block:1.5rem .75rem}.blog-post .article-prose>:first-child{margin-top:0}.blog-post .article-prose :is(strong,.font-bold){color:var(--color-ink);font-weight:700}.blog-post .article-prose a{color:var(--color-earth);text-underline-offset:.2em;font-weight:700;text-decoration:underline;text-decoration-thickness:1px}.blog-post .article-prose a:hover{color:var(--color-ink)}.blog-post .article-prose :is(ul,ol){padding-left:1.4rem}.blog-post .article-prose ul{list-style:outside}.blog-post .article-prose ol{list-style:decimal}.blog-post .article-prose li{padding-left:.25rem}.blog-post .article-prose li+li{margin-top:.5rem}.blog-post .article-prose li::marker{color:var(--color-earth);font-weight:700}.blog-post .article-prose blockquote{border-left:3px solid var(--color-clay);color:#394138;background:#f6f5f0;border-radius:0 .65rem .65rem 0;margin-block:2rem;padding:1.25rem 1.5rem}.blog-post .article-prose blockquote p+p{margin-top:1rem}.blog-post .article-prose img{border-radius:.8rem;width:100%;height:auto;margin-block:2rem}.blog-post .article-prose pre{max-width:100%;font-size:var(--text-sm);background:#f6f7f4;border:1px solid #e3e7e0;border-radius:.65rem;padding:1.25rem;overflow-x:auto}.blog-post .article-end{border-top:1px solid #e3e7e0;margin-top:3rem;padding-top:1.5rem}.blog-post .article-end a{color:#394138;align-items:center;gap:.75rem;min-height:2.75rem;display:inline-flex}.blog-post .article-end a:hover{color:var(--color-earth)}.blog-post .article-mobile-contents{display:none}.blog-post :is(a,summary):focus-visible{outline:2px solid var(--color-earth);outline-offset:4px}@media (width<=1100px){.blog-post .article-layout{grid-template-columns:minmax(0,1fr) 16rem;gap:2.25rem}}@media (width<=900px){.blog-post .article-shell{max-width:46rem}.blog-post .article-layout{grid-template-columns:minmax(0,1fr);gap:2.5rem}.blog-post .article-mobile-contents{margin-top:1.5rem;display:block}}@media (width<=600px){.blog-post{padding-block:10.5rem 3rem}.blog-post .article-shell{width:calc(100% - 2.5rem)}.blog-post .article-breadcrumb{margin-bottom:1.75rem}.blog-post .article-meta{gap:.5rem .75rem;margin-block:1.25rem 1.5rem}.blog-post .article-meta>*+*{padding-left:.75rem}.blog-post .article-cover{aspect-ratio:4/3;border-radius:.75rem}.blog-post .article-body{padding-top:1.75rem}}
