/* Blog pages, using the agreed Gate5 design system. */
.article-intro{padding-top:48px;padding-bottom:48px}
.article-kicker{margin:0 0 24px;font-size:12px;font-weight:600;color:var(--text)}
.article-intro h1{font-size:36px;font-weight:300;line-height:1.3;color:var(--heading);max-width:1080px;margin:0 0 24px}
.article-intro strong,.article-body strong{font-weight:600}
.article-meta{display:flex;flex-wrap:wrap;gap:24px;font-size:12px;padding-bottom:24px;border-bottom:1px solid var(--heading);margin-bottom:24px}
.article-summary{font-size:13px;line-height:1.6;max-width:760px;margin:0}
.editorial-grid{display:grid;grid-template-columns:240px minmax(0,760px);gap:64px;padding-bottom:64px;align-items:start;justify-content:space-between}
.article-contents{position:sticky;top:136px;border-top:1px solid var(--heading);padding-top:16px;font-size:12px}
.contents-heading{font-size:13px;font-weight:600;color:var(--heading);margin:0 0 16px}
.article-contents ol{list-style:none;counter-reset:toc;padding:0;margin:0}
.article-contents li{counter-increment:toc;display:grid;grid-template-columns:24px 1fr;gap:8px;margin-bottom:12px;line-height:1.5}
.article-contents li::before{content:counter(toc,decimal-leading-zero);color:var(--text)}
.article-contents a{text-decoration:none;color:var(--heading)}
.article-contents a:hover,.article-contents a:focus-visible{color:var(--hover-solid)}
.contents-foot{border-top:1px solid var(--heading);padding-top:16px;margin-top:24px}
.article-body{min-width:0;font-size:13px;line-height:1.6;color:var(--text)}
.article-body p{margin:0 0 16px}
.article-body figure{margin:0 0 32px}
.article-body figcaption{font-size:12px;line-height:1.5;margin-top:8px;color:var(--text)}
.article-opening-image img{width:100%;height:384px;object-fit:cover;object-position:center 55%}
.article-section{padding:48px 0 0;scroll-margin-top:136px}
.article-body .sec-head{gap:2px;margin-bottom:32px}
.article-body .sec-head h2{max-width:none;font-size:30px;line-height:1.3;font-weight:300;padding-bottom:2px}
.article-body .sec-head .rule{background:var(--heading)}
.source-link{display:block;font-size:12px;margin-top:8px;color:var(--text);text-underline-offset:4px}
.article-body a:focus-visible{outline:2px solid var(--hover-solid);outline-offset:4px}
.article-body p a:not(.source-link){text-underline-offset:4px;color:var(--heading)}
.article-design-image{margin-top:24px!important}.article-design-image img{width:100%;max-height:480px;object-fit:contain;background:var(--secondary)}
.article-comparison{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:24px 0}.article-comparison figure{margin-bottom:0}.article-comparison img{width:100%;aspect-ratio:4/3;object-fit:cover}
.article-text-link{color:var(--heading);font-weight:600;text-underline-offset:4px}
.article-checklist{margin-top:48px;background:var(--secondary);padding:32px}
.article-checklist ul{padding-left:16px;margin-bottom:0}.article-checklist li{margin-bottom:12px;padding-left:8px}.article-checklist li:last-child{margin-bottom:0}
.article-contact{padding-bottom:48px}.article-contact .btn{margin-top:8px;font-size:13px;font-weight:600;transition:background-color .2s ease,transform .2s ease}.article-contact .btn:hover{background:var(--hover-solid);transform:scale(1.045)}
.article-source-note{border-top:1px solid var(--heading);padding-top:16px;font-size:12px;line-height:1.5}
@media(max-width:1100px){.editorial-grid{grid-template-columns:200px minmax(0,1fr);gap:32px}.article-body,.article-summary{font-size:16px}.article-contents{top:112px}.article-opening-image img{height:320px}.desktop-break{display:none}}
@media(max-width:760px){.article-intro{padding-top:32px;padding-bottom:32px}.article-intro h1{font-size:30px}.article-meta{gap:16px}.editorial-grid{grid-template-columns:1fr;gap:32px}.article-contents{position:static}.article-contents ol{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.contents-foot{display:none}.article-opening-image img{height:280px}.article-body .sec-head h2{font-size:24px}.article-section{padding-top:32px}.article-checklist{padding:24px;margin-top:32px}.article-contact{padding-bottom:32px}.article-comparison{gap:16px}.article-contents{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.blog-skip{position:fixed;top:-80px;left:16px;z-index:10001;padding:12px 16px;background:var(--heading);color:#FFFFFF}
.blog-skip:focus{top:12px}
.blog-index{padding-block:48px 64px}
.blog-index .sec-head h1{font-size:36px;font-weight:300;margin:0;line-height:1.3}
.blog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;margin-top:32px;align-items:stretch}
.blog-index .blog-card{display:flex;flex-direction:column;min-width:0;margin:0;overflow:hidden;border-radius:24px;background:var(--g5-color-white,#FFFFFF);box-shadow:0 4px 12px rgba(0,0,0,.12);transition:background-color .2s ease,transform .2s ease}
.blog-index .blog-card:is(:hover,:focus-within){background:var(--g5-color-selection,#FFF8ED);transform:scale(1.018)}
.blog-card-image{display:block;flex:none}
.blog-card img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.blog-card-copy{display:flex;flex-direction:column;flex:1;padding:32px}
.blog-index .blog-card h2{font-size:var(--g5-type-20,20px);font-weight:300;line-height:1.3;margin:0 0 16px}
.blog-card h2 a{display:block;text-decoration:none;color:var(--heading)}
.blog-card .article-kicker{margin:0 0 12px}
.blog-card-copy>p:not(.article-kicker):not(.article-meta){margin:0 0 16px}
.blog-card .article-meta{margin-top:auto;margin-bottom:16px;padding-bottom:16px;gap:16px}
.blog-card .project-support-link{align-self:flex-start;font-style:italic;text-decoration:none}
.blog-card .project-support-link span{color:var(--accent);font-style:normal}
.blog-card a:focus-visible{outline:2px solid var(--hover-solid);outline-offset:4px}
.blog-card-image:focus-visible{outline-offset:-4px}
@media(max-width:1100px){.blog-grid{gap:32px}.blog-card-copy{padding:24px}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr;gap:24px}.blog-index .sec-head h1{font-size:30px}}
@media(prefers-reduced-motion:reduce){.blog-index .blog-card{transition:none}.blog-index .blog-card:is(:hover,:focus-within){transform:none}}