/* Volt: article pages (docs, how rankings work, news). Figma: "12 Article". */
.art-h{font-size:56px}
.art-wrap{padding-top:44px}
.art-grid{display:grid;grid-template-columns:760px 1fr;gap:28px;align-items:start}
.art{min-width:0}
.art h2{font:800 italic 28px/1.15 Kanit;color:#fff;text-transform:uppercase;margin:40px 0 14px;scroll-margin-top:20px}
.art>h2:first-child,.art>section:first-child>h2{margin-top:0}
.art h3{font:800 italic 18px/1.25 Kanit;color:#fff;text-transform:uppercase;margin:28px 0 10px}
.art p{font-size:17px;line-height:1.75;color:#ccc;margin-bottom:16px}
.art ul,.art ol{margin:0 0 16px 22px;font-size:17px;line-height:1.75;color:#ccc}
.art li{margin-bottom:6px}.art li::marker{color:var(--a)}
.art li ul{margin:6px 0 0 20px}
.art b,.art strong{color:#fff;font-weight:700}
.art a{color:var(--a)}.art a:hover{text-decoration:underline}
.art code{font:500 14px/1 ui-monospace,Menlo,Consolas,monospace;color:#f0e2d6;background:#151515;padding:2px 6px;overflow-wrap:anywhere}
.art pre{background:#121212;border:1px solid rgba(255,122,26,.4);padding:18px 22px;font:500 14px/1.7 ui-monospace,Menlo,Consolas,monospace;color:#e6d8cc;white-space:pre-wrap;overflow-wrap:anywhere;margin-bottom:16px}
.art .note,.art .hw-note{border-left:4px solid var(--a);background:var(--s1);padding:18px 22px;color:#ddd}
.art section{scroll-margin-top:20px}
.toc{position:sticky;top:20px}
.toc nav .ks{padding:0 0 12px;border-bottom:1px solid var(--ln)}
.toc nav a{display:block;font:700 italic 13px/1.2 Kanit;color:#aaa;text-transform:uppercase;padding:12px 0;border-bottom:1px solid var(--ln)}
.toc nav a:hover{color:#fff}
.toc nav a.on{color:var(--a)}
.toc .card{margin-top:28px}
.toc .card .h3{margin-bottom:8px}
.toc .card p{font-size:14px;margin-bottom:16px}
@media (max-width:1100px){.art-grid{grid-template-columns:minmax(0,1fr) 260px}}
@media (max-width:980px){.art-grid{grid-template-columns:1fr}.toc{position:static}.toc nav{display:none}.art-h{font-size:40px}.art p,.art ul,.art ol{font-size:16px}}
/* how rankings work: live numbers above the text */
.hw-st{padding-top:44px}
.hw-st+.art-wrap{padding-top:40px}
.hw-st .stat small{display:block;margin-top:8px;padding:0 10px;line-height:1.3}
@media (max-width:640px){.hw-st .statrow{grid-template-columns:1fr 1fr}.hw-st .stat:nth-child(2){border-right:0}.hw-st .stat:nth-child(-n+2){border-bottom:1px solid var(--ln)}}
.pghead p a{color:var(--a)}.pghead p a:hover{text-decoration:underline}