/* Articles: topic ink sketches, contents list and practice cards (loaded after ys.css). */
.ys5 .ar-head-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,56px);align-items:end}
.ys5 .ar-head-art{display:grid;place-items:center;width:clamp(200px,24vw,300px);aspect-ratio:1;border-radius:50%;background:var(--ys-wash);margin-bottom:8px}
.ys5 .ar-head-art .ys-sk{width:72%;height:auto}
.ys5 .ar-head .c-kicker a{color:inherit;text-decoration:underline;text-underline-offset:.2em;text-decoration-color:var(--ys-rule)}
.ys5 .ar-byline{margin:18px 0 0;font-size:14px;color:var(--ys-stone)}
.ys5 .ar-head .c-chips small{margin-left:4px;color:var(--ys-stone);font-size:12px}
@media (max-width:760px){.ys5 .ar-head-grid{grid-template-columns:1fr}.ys5 .ar-head-art{display:none}}

.ys5 .ar-body{padding-top:clamp(12px,2vw,24px)}
.ys5 .ar-prose h2{scroll-margin-top:110px}
.ys5 .ar-prose h3{scroll-margin-top:110px}
.ys5 .ar-prose>p:first-of-type{font-size:20px;line-height:1.7;color:var(--ys-ink)}
.ys5 .ar-prose blockquote{margin:1.6em 0;padding:18px 22px;border-left:4px solid var(--ys-haldi);background:var(--ys-wash);border-radius:0 var(--ys-r-sm) var(--ys-r-sm) 0}
.ys5 .ar-prose blockquote p:last-child{margin-bottom:0}
.ys5 .ar-prose table{background:var(--ys-lime-2);border-radius:var(--ys-r-sm);overflow:hidden}
.ys5 .ar-prose th{background:var(--ys-lime);text-align:left}
.ys5 .ar-prose th,.ys5 .ar-prose td{padding:10px 14px;border-bottom:1px solid var(--ys-rule);vertical-align:top}

.ys5 .ar-aside{gap:24px}
.ys5 .ar-aside h2{font:600 12px/1 var(--ys-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ys-stone);margin:0 0 12px;border:0;padding:0}
.ys5 .ar-toc{max-height:calc(100vh - 360px);overflow:auto}
.ys5 .ar-toc .c-guide-toc li{border-left-color:var(--ys-rule)}
.ys5 .ar-toc .c-guide-toc a{color:var(--ys-ink);line-height:1.4}
.ys5 .ar-toc .c-guide-toc a:hover{color:var(--ys-ink-2);text-decoration:underline}
.ys5 .ar-try .c-guide-related a{background:var(--ys-lime-2);border-left:3px solid var(--ys-haldi)}
.ys5 .ar-try .c-guide-related a:hover{background:var(--ys-wash)}
.ys5 .ar-try .c-guide-related span{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ys-stone);margin-bottom:2px}
.ys5 .ar-try .c-guide-related b{font-weight:600;color:var(--ys-ink)}
@media (max-width:980px){.ys5 .ar-toc{max-height:none}}

.ys5 .ar-card{overflow:hidden}
.ys5 .ar-card-art{display:flex;align-items:center;justify-content:center;height:120px;margin:-24px -24px 18px;background:var(--ys-wash)}
.ys5 .ar-card-art .ys-sk{height:84px;width:auto}
.ys5 .ar-card-more{margin-top:auto;padding-top:12px;font-size:14px;font-weight:600;color:var(--ys-ink)}
.ys5 .ar-featured{padding-top:clamp(8px,2vw,16px)}
.ys5 .ar-feature-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:20px}
.ys5 .ar-card-lead .ar-card-art{height:180px}
.ys5 .ar-card-lead .ar-card-art .ys-sk{height:130px}
.ys5 .ar-card-lead h3{font-size:clamp(24px,2.4vw,30px)}
@media (max-width:900px){.ys5 .ar-feature-grid{grid-template-columns:1fr}.ys5 .ar-card-lead .ar-card-art{height:140px}}

.ys5 .ar-topic-head{display:flex;align-items:flex-end;gap:16px}
.ys5 .ar-topic-head .ys-sk{height:56px;width:auto;flex:none;margin-bottom:4px}
.ys5 .ar-topic-head h2{flex:1}