.blog-article{--article-width:100%;--article-radius:6px;max-width:1150px;margin-inline:auto;padding:8rem 1.5rem 5rem}.blog-article .article-header,.blog-article .article-body{width:100%;max-width:var(--article-width);margin-inline:auto}.blog-article .back-link:hover{text-underline-offset:4px;text-decoration:underline}.blog-article .article-header{text-align:center;margin-bottom:3rem}.blog-article .article-category{color:var(--color-primary);letter-spacing:.12em;text-transform:uppercase;margin-bottom:1.25rem;font-size:.75rem;font-weight:700;display:inline-block}.blog-article h1{color:var(--color-primary-dark);margin-bottom:1.5rem;font-size:clamp(2rem,4.5vw,3.25rem);line-height:1.15}.blog-article .article-intro{color:var(--color-text-light);text-wrap:pretty;font-size:clamp(1.05rem,2vw,1.2rem)}.blog-article .article-meta{border-top:1px solid var(--color-border);color:var(--color-text-light);flex-wrap:wrap;justify-content:center;gap:.5rem .75rem;margin-top:1.75rem;padding-top:1.25rem;font-size:.8rem;display:flex}.blog-article .article-cover{aspect-ratio:2;object-fit:cover;border-radius:var(--article-radius);width:100%;height:auto;margin-bottom:3.5rem}.blog-article .article-content-grid{grid-template-columns:minmax(0,1fr) 290px;align-items:start;gap:3rem;display:grid}.blog-article .article-body{overflow-wrap:break-word;min-width:0;font-size:1.05rem;line-height:1.8}.blog-article .article-sidebar{background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:var(--article-radius);padding:1.5rem}.blog-article .article-sidebar>h2{color:var(--color-primary-dark);margin:0 0 1.25rem;font-size:1.15rem}.blog-article .related-posts{margin:0;padding:0;list-style:none}.blog-article .related-posts li+li{border-top:1px solid var(--color-border);margin-top:1.25rem;padding-top:1.25rem}.blog-article .related-post{border-radius:3px;display:block}.blog-article .related-post-category{color:var(--color-primary);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.5rem;font-size:.7rem;font-weight:700;display:block}.blog-article .related-post h3{color:var(--color-primary-dark);margin:0 0 .5rem;font-size:.95rem;line-height:1.5}.blog-article .related-post time{color:var(--color-text-light);font-size:.75rem}.blog-article .related-post-read{color:var(--color-primary);justify-content:space-between;margin-top:.75rem;font-size:.8rem;font-weight:600;display:flex}.blog-article .related-post:hover h3{text-underline-offset:3px;text-decoration:underline}.blog-article .related-post:focus-visible{outline:2px solid var(--color-primary);outline-offset:5px}@media (width<=900px){.blog-article .article-content-grid{grid-template-columns:minmax(0,1fr);gap:2.5rem}}.blog-article .article-body p{color:var(--color-text-light);margin-bottom:1.25rem}.blog-article .article-intro,.blog-article .article-body p,.blog-article .article-body li,.blog-article .article-note{text-align:justify;hyphens:auto}.blog-article .article-body h2{color:var(--color-primary-dark);margin:2.75rem 0 1rem;font-size:clamp(1.4rem,3vw,1.85rem);line-height:1.3}.blog-article .article-body ul,.blog-article .article-body ol{color:var(--color-text-light);margin-bottom:1.5rem;padding-left:1.4rem}.blog-article .article-body ul{list-style:outside}.blog-article .article-body ol{list-style:decimal}.blog-article .article-body li{margin-bottom:.75rem;padding-left:.25rem}.blog-article .article-body strong{color:var(--color-text)}.blog-article .article-note{background:var(--color-bg-alt);border-block:1px solid var(--color-border);border-radius:var(--article-radius);margin-block:2rem;padding:1.5rem}.blog-article .article-contact{background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:var(--article-radius);text-align:center;margin:3rem 0 2rem;padding:2.5rem}.blog-article .article-contact h2{margin-top:0}.blog-article .article-contact a{background:var(--color-brand);color:#fff;border-radius:4px;padding:.75rem 1.25rem;font-weight:600;display:inline-block}.blog-article .back-link{text-align:center;color:var(--color-primary);font-weight:600;display:block}@media (width<=600px){.blog-article{padding:7rem 1.25rem 3.5rem}.blog-article .article-body{font-size:1rem}.blog-article .article-contact{padding:1.5rem}.blog-article .article-header,.blog-article .article-cover{margin-bottom:2rem}}
