
.article-head{max-width:800px;margin-inline:auto;text-align:center;padding-block:var(--space-8) var(--space-6)}
.article-head .cat{display:inline-block;background:var(--gold-500);color:var(--navy-900);font-size:.72rem;font-weight:700;padding:4px 12px;border-radius:var(--radius-pill)}
.article-head h1{font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1.3;margin:var(--space-4) 0}
.article-head .ameta{display:flex;gap:var(--space-4);justify-content:center;flex-wrap:wrap;font-size:.82rem;color:var(--text-tertiary)}
.article-head .ameta span{display:inline-flex;align-items:center;gap:6px}.article-head .ameta svg{width:15px;height:15px;stroke:var(--text-tertiary)}
.featured-img{aspect-ratio:16/7;border-radius:var(--radius-xl);overflow:hidden;background:linear-gradient(135deg,var(--navy-900),var(--navy-700));display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-10)}
.featured-img svg{width:72px;height:72px;stroke:rgba(224,197,143,.6)}
.article-body{display:grid;grid-template-columns:1fr 240px;gap:var(--space-12);align-items:start}
@media(max-width:900px){.article-body{grid-template-columns:1fr}}
.toc{position:sticky;top:96px}
@media(max-width:900px){.toc{position:static;order:-1;background:var(--bg-sunken);border-radius:var(--radius-lg);padding:var(--space-5)}}
.toc .tt{font-size:.75rem;font-weight:700;color:var(--text-tertiary);margin-bottom:var(--space-3)}
.toc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2);border-inline-start:2px solid var(--border);padding-inline-start:var(--space-4)}
.toc a{font-size:.85rem;color:var(--text-secondary);font-weight:500}
.toc a:hover,.toc a.on{color:var(--accessible-gold)}
.prose{max-width:680px;font-size:1.02rem;line-height:1.9;color:var(--text-primary)}
.prose h2{font-size:1.4rem;margin:var(--space-10) 0 var(--space-4);scroll-margin-top:96px}
.prose h2:first-child{margin-top:0}
.prose p{margin-bottom:var(--space-4);color:var(--slate-600)}
.prose p b,.prose strong{color:var(--navy-900)}
.prose ul{margin:0 0 var(--space-4);padding-inline-start:var(--space-6);color:var(--slate-600)}
.prose ul li{margin-bottom:var(--space-2)}
.midcta{display:grid;grid-template-columns:88px 1fr auto;gap:var(--space-4);align-items:center;background:var(--bg-elevated);border:1px solid var(--gold-300);border-radius:var(--radius-lg);box-shadow:var(--shadow-e2);padding:var(--space-4);margin:var(--space-8) 0}
@media(max-width:560px){.midcta{grid-template-columns:1fr;text-align:center}}
.midcta img{width:88px;height:110px;object-fit:cover;border-radius:var(--radius-md);background:var(--n-100);margin-inline:auto}
.midcta .tag{font-size:.7rem;font-weight:700;color:var(--gold-text)}
.midcta h4{font-size:1.05rem;margin:2px 0}
.midcta .pr{font-weight:700}
.summary-box{background:var(--bg-sunken);border-radius:var(--radius-lg);padding:var(--space-6);margin:var(--space-8) 0}
.summary-box h3{font-size:1.05rem;margin-bottom:var(--space-3)}
.summary-box .links{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-4)}
.summary-box .links a{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-pill);padding:var(--space-2) var(--space-4);font-size:.85rem;font-weight:600;color:var(--link)}
.endcta{background:linear-gradient(135deg,var(--navy-900),var(--navy-800));color:var(--ivory-50);border-radius:var(--radius-xl);padding:var(--space-8);text-align:center;margin-top:var(--space-10)}
.endcta h3{color:var(--ivory-50)}.endcta p{color:var(--sand-200);margin:var(--space-2) 0 var(--space-5)}
.comments{max-width:680px}
.comment{display:flex;gap:var(--space-3);padding:var(--space-4) 0;border-bottom:1px solid var(--border)}
.comment .av{width:40px;height:40px;flex:none;border-radius:var(--radius-pill);background:linear-gradient(135deg,var(--navy-700),var(--sapphire-500));color:var(--ivory-50);display:flex;align-items:center;justify-content:center;font-weight:700}
.comment b{font-size:.9rem}.comment .t{font-size:.72rem;color:var(--text-tertiary)}
.comment p{color:var(--text-secondary);font-size:.9rem;margin-top:var(--space-2);line-height:1.7}
.comment-form{display:flex;gap:var(--space-2);margin-top:var(--space-6)}
.comment-form textarea{flex:1;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:1.5px solid var(--border);font-family:inherit;min-height:52px;resize:vertical}
.comment-form textarea:focus{outline:none;border-color:var(--navy-800)}
