.blog-article{--blog-anchor-offset:calc(var(--size-header) + var(--space-md));background:var(--color-page)}.blog-article__hero.section{padding-block-start:calc(var(--space-section-block) * 1.5)}.blog-article__hero-layout{gap:var(--space-xl);grid-template-areas:"copy""media";display:grid}.blog-article__hero-copy{align-content:center;gap:var(--space-md);grid-area:copy;min-width:0;max-width:60rem;display:grid}.blog-article__info{gap:var(--space-2xs);display:grid}.blog-article__hero-copy h1{max-width:19ch;margin:0}.blog-article__meta{gap:var(--space-2xs);color:var(--color-text-muted);font-size:var(--type-meta-size);flex-wrap:wrap;align-items:center;display:flex}.blog-article__meta span{color:var(--color-text);font-weight:var(--font-weight-semibold)}.blog-article__meta>*+:before{color:var(--color-text-muted);content:"·";margin-inline-end:var(--space-2xs)}.blog-article__excerpt{max-width:56ch;color:var(--color-text-muted);font-size:var(--type-lead-size)}.blog-article__byline{gap:var(--space-2xs);color:var(--color-text-muted);font-size:var(--type-meta-size);flex-wrap:wrap;margin:0;display:flex}.blog-article__cover{gap:var(--space-2xs);grid-area:media;align-content:start;align-self:center;width:100%;min-width:0;margin:0;display:grid}.blog-article__cover-media{aspect-ratio:var(--aspect-project-card-landscape);border-radius:var(--radius-card);background:var(--color-surface-strong);overflow:clip}.blog-article__cover img{object-fit:cover;width:100%;height:100%;display:block}.article-rich-text-image figcaption{padding:var(--space-xs) var(--space-sm);color:var(--color-text-muted);font-size:var(--type-meta-size)}.blog-article__content{padding-block-start:var(--space-md)}.blog-article__layout{gap:var(--space-xl);align-items:start;display:grid}.blog-article__toc{z-index:90;border:var(--border-width-hairline) solid transparent;border-radius:var(--radius-card);min-inline-size:0;box-shadow:none;transition:background-color var(--transition-interactive), border-color var(--transition-interactive), box-shadow var(--transition-interactive), padding var(--transition-interactive), opacity var(--transition-interactive), transform var(--transition-interactive), visibility 0s linear 0s;background:0 0;padding:0;position:sticky;inset-block-start:calc(var(--size-header) + var(--space-sm))}.blog-article__toc.is-near-end{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(calc(var(--space-sm) * -1)) scale(var(--scale-reveal));transform-origin:top;transition:background-color var(--transition-interactive), border-color var(--transition-interactive), box-shadow var(--transition-interactive), padding var(--transition-interactive), opacity var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-standard), visibility 0s linear var(--duration-slow)}.blog-article__toc.is-anchor-measuring,.blog-article__toc.is-anchor-measuring *,.blog-article__toc.is-anchor-navigating,.blog-article__toc.is-anchor-navigating *{transition:none!important}.blog-article__toc-flat{gap:var(--space-sm);opacity:1;visibility:visible;max-block-size:24rem;transition:max-block-size var(--duration-base) var(--ease-enter), opacity var(--transition-interactive), transform var(--transition-interactive), visibility 0s linear 0s;display:grid;overflow:hidden;transform:translateY(0)}.blog-article__toc-flat>.type-caption{margin:0}.blog-article__toc-flat-list{gap:var(--space-2xs);margin:0;padding:0;list-style:none;display:grid}.blog-article__toc-flat-link{align-items:baseline;gap:var(--space-xs);padding-block:var(--space-2xs);color:var(--color-text);font-family:var(--font-heading);font-size:var(--type-body-size);font-weight:var(--font-weight-semibold);line-height:var(--leading-heading);transition:color var(--transition-interactive), transform var(--transition-interactive);transform-origin:0;grid-template-columns:auto minmax(0,1fr);text-decoration:none;display:grid}.blog-article__toc-flat-subitem{padding-inline-start:calc(var(--space-md) + var(--space-xs))}.blog-article__toc-flat-subitem .blog-article__toc-flat-link{color:var(--color-text-muted);font-family:var(--font-body);font-size:var(--type-body-sm-size);font-weight:var(--font-weight-regular);line-height:var(--leading-body)}.blog-article__toc-flat-link:hover,.blog-article__toc-flat-link:focus-visible{color:var(--color-text);transform:scale(var(--scale-interactive-hover))}.blog-article__toc.is-sticky{padding:var(--space-xs);border-color:var(--color-header-border);background:var(--color-header-glass);box-shadow:var(--header-shadow);backdrop-filter:blur(var(--blur-glass)) saturate(var(--saturate-glass))}.blog-article__toc.is-sticky .blog-article__toc-flat{opacity:0;visibility:hidden;pointer-events:none;max-block-size:0;transform:translateY(calc(var(--space-2xs) * -1));transition-delay:0s, 0s, 0s, var(--duration-base)}.blog-article__toc-compact-trigger{align-items:center;gap:var(--space-xs);width:100%;max-block-size:0;color:var(--color-text);text-align:start;cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(var(--space-2xs));transition:max-block-size var(--duration-base) var(--ease-enter), opacity var(--transition-interactive), transform var(--transition-interactive), visibility 0s linear var(--duration-base);background:0 0;border:0;grid-template-columns:minmax(0,1fr) auto;padding:0;display:grid}.blog-article__toc.is-sticky .blog-article__toc-compact-trigger{opacity:1;visibility:visible;pointer-events:auto;max-block-size:6rem;transition-delay:0s;transform:translateY(0)}.blog-article__toc.is-near-end .blog-article__toc-compact-trigger{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(calc(var(--space-sm) * -1)) scale(var(--scale-reveal));transition:opacity var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-standard), visibility 0s linear var(--duration-slow)}.blog-article__toc-current{gap:var(--space-4xs);min-inline-size:0;display:grid}.blog-article__toc-current-document{color:var(--color-text-muted);font-size:var(--type-caption-size);line-height:var(--leading-body);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.blog-article__toc-current-section{font-family:var(--font-heading);font-size:var(--type-body-sm-size);font-weight:var(--font-weight-semibold);line-height:var(--leading-heading);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.blog-article__toc-compact-icon{width:var(--size-reveal-control);height:var(--size-reveal-control);border:var(--border-width-hairline) solid var(--color-circular-control-border);border-radius:var(--radius-feature-control);background:var(--color-circular-control-background);color:var(--color-circular-control-text);backdrop-filter:blur(var(--blur-media-control-glass)) saturate(var(--saturate-media-control-glass));transition:background-color var(--transition-interactive), border-color var(--transition-interactive), color var(--transition-interactive), transform var(--transition-interactive);place-items:center;display:grid}.blog-article__toc-compact-icon svg{width:var(--size-reveal-control-icon);height:var(--size-reveal-control-icon);fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:var(--border-width-strong)}.blog-article__toc-compact-trigger:hover .blog-article__toc-compact-icon,.blog-article__toc-compact-trigger:focus-visible .blog-article__toc-compact-icon{border-color:var(--color-circular-control-hover-border);background:var(--color-circular-control-hover-background);color:var(--color-circular-control-hover-text);transform:scale(var(--scale-interactive-hover))}.blog-article__toc.is-compact-open .blog-article__toc-compact-icon{transform:rotate(45deg)}.blog-article__toc.is-compact-open .blog-article__toc-compact-trigger:hover .blog-article__toc-compact-icon,.blog-article__toc.is-compact-open .blog-article__toc-compact-trigger:focus-visible .blog-article__toc-compact-icon{transform:rotate(45deg) scale(var(--scale-interactive-hover))}.blog-article__toc-panel{max-block-size:none;opacity:0;visibility:hidden;pointer-events:none;max-height:none;transition:opacity var(--transition-interactive), visibility 0s linear var(--duration-base);display:none;overflow:visible}.blog-article__toc.is-compact-open .blog-article__toc-panel{max-height:min(70vh,36rem);border-block-start:var(--border-width-hairline) solid var(--color-header-border);opacity:1;visibility:visible;pointer-events:auto;margin-block-start:var(--space-xs);padding-block-start:var(--space-xs);transition-delay:0s;display:grid;overflow:auto}.blog-article__toc-panel>.type-caption{margin:0 0 var(--space-xs)}.blog-article__toc-list,.blog-article__toc-sublist{margin:0;padding:0;list-style:none;display:grid}.blog-article__toc-list{gap:var(--space-2xs)}.blog-article__toc-section{min-inline-size:0;display:grid}.blog-article__toc-section.is-current{gap:var(--space-3xs)}.blog-article__toc-link{min-inline-size:0;color:var(--color-text-muted);font-size:var(--type-body-sm-size);line-height:var(--leading-body);transition:background-color var(--transition-interactive), color var(--transition-interactive), transform var(--transition-interactive);transform-origin:0;text-decoration:none;display:block}.blog-article__toc-link--section{align-items:baseline;gap:var(--space-xs);padding:var(--space-2xs) var(--space-xs);border-radius:var(--radius-utility);color:var(--color-text);font-family:var(--font-heading);font-size:var(--type-body-size);font-weight:var(--font-weight-semibold);line-height:var(--leading-heading);grid-template-columns:auto minmax(0,1fr);display:grid}.blog-article__toc-index{color:var(--color-text-subtle);font-family:var(--font-body);font-size:var(--type-caption-size);font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium)}.blog-article__toc-sublist{gap:var(--space-3xs);padding-inline-start:calc(var(--space-md) + var(--space-xs))}.blog-article__toc-sublist-shell{min-block-size:0;transition:grid-template-rows var(--duration-base) var(--ease-enter);grid-template-rows:1fr;display:grid}.blog-article__toc-sublist-shell>.blog-article__toc-sublist{min-block-size:0;overflow:hidden}.blog-article__toc[data-toc-interactive] .blog-article__toc-sublist-shell{grid-template-rows:0fr}.blog-article__toc[data-toc-interactive] .blog-article__toc-section.is-current .blog-article__toc-sublist-shell{grid-template-rows:1fr}.blog-article__toc-sublist .blog-article__toc-link{padding-block:var(--space-3xs)}.blog-article__toc-link:hover,.blog-article__toc-link:focus-visible{color:var(--color-text);transform:scale(var(--scale-interactive-hover))}.blog-article__toc-link--section.is-active,.blog-article__toc-section.is-current>.blog-article__toc-link--section{background:var(--color-surface-card);color:var(--color-surface-card-text)}.blog-article__toc-link.is-active{color:var(--color-text);font-weight:var(--font-weight-semibold)}.blog-article__toc-sublist .blog-article__toc-link.is-active{position:relative}.blog-article__toc-sublist .blog-article__toc-link.is-active:before{inset:50% auto auto calc((var(--space-md) + var(--space-xs)) * -1);width:var(--space-2xs);height:var(--space-2xs);border-radius:var(--radius-full);background:var(--color-text);content:"";position:absolute;transform:translateY(-50%)}.blog-article__body{width:100%;min-width:0;font-size:var(--type-body-size)}.blog-article__body>*{margin-block:0}.blog-article__body p{color:var(--color-text);font-size:var(--type-body-size);line-height:var(--leading-reading)}.blog-article__body>:is(p,ul,ol)+:is(p,ul,ol){margin-block-start:var(--space-md)}.blog-article__body h2{margin-block:var(--space-xl) var(--space-sm);font-size:var(--type-h2-size);scroll-margin-block-start:var(--blog-anchor-offset)}.blog-article__body h3{margin-block:var(--space-lg) var(--space-xs);font-size:var(--type-h3-size);scroll-margin-block-start:var(--blog-anchor-offset)}.blog-article__body>:is(h2,h3):first-child{margin-block-start:0}.blog-article__body ul,.blog-article__body ol{gap:var(--space-xs);color:var(--color-text);font-size:var(--type-body-size);line-height:var(--leading-reading);margin:0;padding-inline-start:1.25em;display:grid}.blog-article__body blockquote{margin-block:var(--space-lg);padding:var(--space-md);border-inline-start:.2rem solid var(--color-text);background:var(--color-surface);font-family:var(--font-heading);font-size:var(--type-subtitle-size);line-height:var(--leading-heading)}.blog-article__body a{color:var(--color-text);text-decoration-thickness:var(--border-width-hairline);text-underline-offset:.2em}.article-rich-text-image{margin:var(--space-xl) 0}.article-rich-text-image img{border-radius:var(--radius-card);width:100%;height:auto;display:block}.blog-article__pagination{gap:var(--space-lg);border-block-start:var(--border-width-hairline) solid var(--color-border);grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;margin-block-start:var(--space-2xl);padding-block-start:var(--space-lg);display:grid}.blog-article__pagination-link{gap:var(--space-2xs);min-width:0;padding-block:var(--space-xs);color:var(--color-text);transition:color var(--transition-interactive), transform var(--transition-interactive);text-decoration:none;display:grid}.blog-article__pagination-link:hover,.blog-article__pagination-link:focus-visible{color:var(--color-text-muted);transform:scale(var(--scale-interactive-hover))}.blog-article__pagination-link--next{text-align:end}.blog-article__pagination-direction{color:var(--color-text-muted);font-size:var(--type-caption-size);font-weight:var(--font-weight-semibold);letter-spacing:var(--tracking-caps);text-transform:uppercase}.blog-article__pagination-title{font-family:var(--font-heading);font-size:var(--type-body-sm-size);font-weight:var(--font-weight-semibold);line-height:var(--leading-heading);text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.blog-article__pagination-placeholder{display:block}@media (width>=75rem){.blog-article__hero-layout{column-gap:var(--space-md);grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-areas:"copy media";align-items:stretch;row-gap:0}.blog-article__hero-copy{align-content:center}.blog-article__layout{column-gap:var(--space-md);grid-template-columns:minmax(16rem,20rem) minmax(0,1fr)}.blog-article__toc{z-index:auto;align-content:start;gap:var(--space-sm);box-shadow:none;backdrop-filter:none;background:0 0;border:0;border-radius:0;padding:0;display:grid}.blog-article__toc-flat,.blog-article__toc-compact-trigger{display:none}.blog-article__toc-panel{gap:var(--space-sm);max-block-size:none;opacity:1;visibility:visible;pointer-events:auto;max-height:none;transition:none;display:grid;overflow:visible}.blog-article__toc-panel>.type-caption{margin:0}}@media (width<=47.99rem){.blog-article__pagination{grid-template-columns:1fr;justify-items:stretch}.blog-article__pagination-placeholder{display:none}.blog-article__pagination>.button{justify-self:center}.blog-article__pagination-link--next{text-align:start}}@media (prefers-reduced-motion:reduce){.blog-article__toc a{transition:none}.blog-article__toc-sublist-shell{transition-duration:0s}}
