.article-head{ padding:50px 0 0; max-width:820px; }
.back-link{ font-size:.85rem; color:var(--star-500); display:inline-block; margin-bottom:18px; }
.back-link:hover{ color:var(--event-cyan); }
.article-head h1{ font-size:clamp(1.9rem,3.6vw,2.7rem); margin-top:14px; }
.article-sub{ color:var(--star-500); font-size:1.05rem; }
.article-meta{ display:flex; gap:8px; font-size:.82rem; color:var(--star-700); font-family:var(--font-mono); }

.article-featured{ aspect-ratio:21/8; margin:28px auto 0; border-radius:28px; max-width:1240px; }
@media (max-width:700px){ .article-featured{ aspect-ratio:4/3; } }

.article-layout{ display:grid; grid-template-columns:220px 1fr; gap:56px; align-items:start; }
.toc-rail{ position:sticky; top:96px; }
.toc-panel{ padding:22px; }
.toc-panel ul{ margin-top:14px; display:flex; flex-direction:column; gap:10px; }
.toc-panel a{ font-size:.85rem; color:var(--star-500); }
.toc-panel a:hover{ color:var(--event-cyan); }
.share-block{ margin-top:24px; padding-top:18px; border-top:1px solid var(--line-soft); }
.share-row{ margin-top:10px; }

.article-body{ max-width:700px; }
.article-body h2{ font-size:1.4rem; margin-top:2em; }
.article-body p{ color:var(--star-300); font-size:1rem; }
.article-body::after{ content:""; display:block; clear:both; }

.pull-quote{
  margin:34px 0; padding:26px 30px; border-left:3px solid var(--mass-violet);
  background:var(--mass-violet-dim); border-radius:0 var(--radius-md) var(--radius-md) 0;
  font-family:var(--font-display); font-size:1.15rem; color:var(--star-100); font-style:normal;
}
.rank-list{ display:flex; flex-direction:column; gap:12px; counter-reset:rank; margin:20px 0; padding-left:0; }
.rank-list li{
  list-style:none; counter-increment:rank; position:relative; padding:14px 20px 14px 52px;
  background:var(--void-2); border:1px solid var(--line-soft); border-radius:var(--radius-sm);
  color:var(--star-300); font-size:.94rem;
}
.rank-list li::before{
  content:counter(rank); position:absolute; left:16px; top:50%; transform:translateY(-50%);
  font-family:var(--font-display); color:var(--event-cyan); font-weight:700;
}

@media (max-width:900px){
  .article-layout{ grid-template-columns:1fr; }
  .toc-rail{ position:static; order:2; }
}

.related-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.related-card{
  background:var(--grad-panel); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:20px; display:flex; flex-direction:column; gap:8px; overflow:hidden;
}
.related-photo{ aspect-ratio:16/9; margin:-20px -20px 4px; border-radius:var(--radius-md) var(--radius-md) 0 0; }
.related-card h3{ font-size:1rem; margin:0; }
@media (max-width:800px){ .related-row{ grid-template-columns:1fr; } }