.home[data-page=blog]{--help-section:clamp(64px, 8vw, 96px);--help-head:var(--ui-space-5)}.home .blog-byline{gap:var(--ui-space-1) var(--ui-space-2);color:var(--ui-muted);flex-wrap:wrap;font-size:14px;line-height:1.5;display:flex}.blog-byline>*+:before{margin-right:var(--ui-space-2);content:"·" / ""}.blog-card{gap:var(--ui-space-4);display:grid}.blog-card>div{align-content:start;gap:var(--ui-space-3);display:grid}.blog-cover{border:var(--ui-stroke) solid var(--ui-ink);background:var(--ui-sunken);aspect-ratio:16/9;border-radius:16px;display:block;overflow:hidden}.blog-cover img{object-fit:cover;width:100%;height:100%;transition:transform .4s var(--ui-ease-out)}.blog-card :is(h2,h3){letter-spacing:-.02em;text-wrap:balance;font-size:21px;line-height:1.25}.blog-card :is(h2,h3) a{text-underline-offset:4px;transition:text-decoration-color var(--ui-duration) var(--ui-ease-out);-webkit-text-decoration:underline #0000;text-decoration:underline #0000;text-decoration-thickness:1px}.blog-card[data-lead]{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,56px)}.blog-card[data-lead]>div{gap:var(--ui-space-4)}.blog-card[data-lead] h2{letter-spacing:-.035em;font-size:clamp(28px,3.2vw,42px);line-height:1.08}.home .blog-summary{color:var(--ui-muted);font-size:var(--ui-text-lg);text-wrap:pretty;line-height:1.5}.blog-more{margin-top:var(--help-section)}.blog-more>h2{margin-bottom:var(--help-head);letter-spacing:-.02em;font-size:22px;line-height:1.25}.blog-grid{gap:var(--ui-space-7) 32px;grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.blog-picture{width:100%;margin-bottom:var(--ui-space-7);border:var(--ui-stroke) solid var(--ui-ink);aspect-ratio:16/9;object-fit:cover;border-radius:16px;grid-row:2}[data-page=blog] .help-aside{grid-row:2/span 2}[data-page=blog] .help-prose{grid-row:3}[data-page=blog] .help-article-end .blog-more+.help-contact{margin-top:var(--help-section)}@media (hover:hover) and (pointer:fine){.blog-card:hover .blog-cover img{transform:scale(1.03)}.blog-card :is(h2,h3) a:hover,.blog-card:hover :is(h2,h3) a{text-decoration-color:currentColor}}@media (prefers-reduced-motion:reduce){.blog-cover img{transition:none}}@media (width<=960px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}[data-page=blog] :is(.blog-picture,.help-aside,.help-prose){grid-row:auto}.blog-picture{margin-bottom:40px}}@media (width<=720px){.blog-card[data-lead]{gap:var(--ui-space-5);grid-template-columns:minmax(0,1fr)}.blog-grid{grid-template-columns:minmax(0,1fr);gap:40px}}
