/* Technical article typography and lightweight code/callout styles. */
.avc-article-page { background: #fff; }.avc-article__container,.avc-article__layout { width: min(100% - 2rem, 72rem); margin-inline: auto; }.avc-article__hero { padding: 3rem 0; background: linear-gradient(135deg,#eef3fc,#f8fafc); }.avc-article__hero nav { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; font-size: .86rem; }.avc-article__category { color: var(--avc-secondary); font-size: .8rem; font-weight: 800; text-transform: uppercase; }.avc-article__intro { max-width: 52rem; color: var(--avc-muted); font-size: 1.15rem; }.avc-article__meta { color: var(--avc-muted); }.avc-article__image { width: 100%; max-height: 36rem; margin-top: 1.5rem; object-fit: cover; border-radius: 1rem; }.avc-article__layout { display: grid; gap: 2rem; padding: 3rem 0; }.avc-article__content { max-width: 46rem; }.avc-article__content h2 { margin-top: 2.5rem; }.avc-article__content h3 { margin-top: 1.75rem; }.avc-article__content blockquote { margin: 1.5rem 0; padding: 1rem 1.2rem; border-left: .3rem solid var(--avc-accent); background: #fff6ed; }.avc-article__content pre { overflow-x: auto; padding: 1rem; border-radius: .75rem; color: #e7edf9; background: #071b40; }.avc-article__content code { padding: .1rem .3rem; border-radius: .2rem; background: #edf2f9; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; }.avc-article__content pre code { padding: 0; color: inherit; background: transparent; }.avc-article__content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }.avc-article__content th,.avc-article__content td { padding: .6rem; border: 1px solid var(--avc-border); text-align: left; }.avc-article__content .is-style-note,.avc-article__content .is-style-tip,.avc-article__content .is-style-warning,.avc-article__content .is-style-best-practice,.avc-article__content .is-style-architecture-decision { padding: 1rem; border-radius: .6rem; background: #edf5ff; }.avc-article__content .is-style-warning { background: #fff6ed; }.avc-article-toc,.avc-article-share { margin-bottom: 1rem; }.avc-article-toc button { display: flex; width: 100%; justify-content: space-between; padding: .6rem; border: 1px solid var(--avc-border); border-radius: .5rem; background: #fff; font-weight: 800; text-align: left; }.avc-article-toc ol { padding-left: 1.25rem; }.avc-article-toc li { margin: .4rem 0; }.avc-article-toc .is-subheading { margin-left: .75rem; font-size: .9rem; }.avc-article-share { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }.avc-article-share a,.avc-article-share button { padding: .35rem .5rem; border: 1px solid var(--avc-border); border-radius: .35rem; background: #fff; color: var(--avc-primary); font-size: .82rem; font-weight: 700; text-decoration: none; cursor: pointer; }.avc-article-author,.avc-article-related,.avc-article-cta { max-width: 46rem; margin-top: 3rem; padding: 1.25rem; border: 1px solid var(--avc-border); border-radius: 1rem; background: #f8fafc; }.avc-article-author > div { display: flex; gap: 1rem; align-items: flex-start; }.avc-article-author img { border-radius: 50%; }.avc-article-related > div { display: grid; gap: .8rem; }.avc-article-related article { padding: 1rem; border-radius: .6rem; background: #fff; }.avc-article-cta { color: #fff; background: linear-gradient(135deg,#071b40,#0d2d6c); }.avc-article-cta h2,.avc-article-cta p { color: #fff; }.avc-article__button { display: inline-flex; margin: .25rem .4rem .25rem 0; padding: .6rem .8rem; border-radius: .5rem; background: var(--avc-accent); color: #fff; font-weight: 800; text-decoration: none; }.avc-article__button--outline { border: 1px solid #fff; background: transparent; }
@media (min-width: 66rem) { .avc-article__layout { grid-template-columns: 14rem minmax(0,1fr); }.avc-article__aside { position: sticky; top: 6rem; align-self: start; }.avc-article-toc ol { display: block !important; }.avc-article-toc button { display: none; }.avc-article-related > div { grid-template-columns: repeat(3,1fr); } }