.adv-article{
padding-block:var(--space-10);
}
@media (min-width:768px){
.adv-article{padding-block:var(--space-11)}
}
.adv-article__inner{
max-width:var(--container-lg);
margin-inline:auto;
padding-inline:var(--space-6);
}
@media (min-width:768px){
.adv-article__inner{padding-inline:var(--space-8)}
}

.adv-article__header{
margin-bottom:var(--space-9);
max-width:var(--content-wide);
}
.adv-article__category{
font-size:var(--font-size-xs);
font-weight:var(--weight-semibold);
text-transform:uppercase;
letter-spacing:var(--letter-wider);
color:var(--color-accent);
margin-bottom:var(--space-4);
display:inline-block;
}
.adv-article__title{
font-size:var(--font-size-3xl);
font-weight:var(--weight-black);
letter-spacing:var(--letter-tight);
line-height:1.15;
color:var(--color-ink);
margin:0 0 var(--space-5);
}
@media (min-width:768px){
.adv-article__title{font-size:var(--font-size-4xl)}
}
.adv-article__lead{
font-size:var(--font-size-lg);
line-height:var(--line-relaxed);
color:var(--color-muted);
margin:0 0 var(--space-6);
}
.adv-article__meta{
display:flex;
flex-wrap:wrap;
gap:var(--space-3) var(--space-6);
font-size:var(--font-size-sm);
color:var(--color-muted);
padding-top:var(--space-5);
border-top:1px solid var(--color-line);
}
.adv-article__meta span{
display:inline-flex;
align-items:center;
gap:var(--space-2);
}
.adv-article__meta svg{color:var(--color-muted-soft)}

.adv-article__body{
max-width:var(--content-max);
font-size:var(--font-size-lg);
line-height:var(--line-relaxed);
}
.adv-article__body p{margin-bottom:var(--space-6)}
.adv-article__body h2{
font-size:var(--font-size-2xl);
margin-top:var(--space-10);
margin-bottom:var(--space-5);
}
.adv-article__body h3{
font-size:var(--font-size-xl);
margin-top:var(--space-8);
margin-bottom:var(--space-4);
}
.adv-article__body h4{
font-size:var(--font-size-lg);
margin-top:var(--space-7);
margin-bottom:var(--space-3);
}
.adv-article__body ul,
.adv-article__body ol{
margin-bottom:var(--space-6);
padding-left:1.4em;
}
.adv-article__body li{margin-bottom:var(--space-2)}
.adv-article__body blockquote{
margin:var(--space-8) 0;
font-size:var(--font-size-lg);
}
.adv-article__body img{
max-width:100%;
height:auto;
border-radius:var(--radius-md);
margin:var(--space-7) 0;
}
.adv-article__body figure{
margin:var(--space-7) 0;
}
.adv-article__body figure figcaption{
font-size:var(--font-size-sm);
color:var(--color-muted);
text-align:center;
margin-top:var(--space-3);
}
.adv-article__body code{
font-size:.9em;
padding:.1em .4em;
border-radius:var(--radius-xs);
background:var(--color-bg-muted);
}
.adv-article__body pre{
padding:var(--space-5);
background:var(--color-bg-muted);
border-radius:var(--radius-md);
overflow-x:auto;
font-size:var(--font-size-base);
line-height:1.6;
margin-bottom:var(--space-6);
}
.adv-article__body pre code{
background:transparent;
padding:0;
}
.adv-article__body table{
width:100%;
margin:var(--space-6) 0;
font-size:var(--font-size-base);
}
.adv-article__body th,
.adv-article__body td{
padding:var(--space-3) var(--space-4);
border-bottom:1px solid var(--color-line);
text-align:left;
}
.adv-article__body th{
background:var(--color-bg-soft);
font-weight:var(--weight-semibold);
}

.adv-article__toc{
padding:var(--space-5);
background:var(--color-bg-soft);
border:1px solid var(--color-line);
border-radius:var(--radius-md);
margin-bottom:var(--space-8);
}
.adv-article__toc h2{
font-size:var(--font-size-base);
font-weight:var(--weight-bold);
margin:0 0 var(--space-4);
color:var(--color-ink);
}
.adv-article__toc ol{
list-style:none;
padding:0;
margin:0;
display:flex;
flex-direction:column;
gap:var(--space-2);
}
.adv-article__toc a{
color:var(--color-accent);
text-decoration:none;
font-size:var(--font-size-base);
}
.adv-article__toc a:hover{text-decoration:underline;text-underline-offset:3px}