/* ============================== ARTICLE DETAIL PAGE ============================== */

.article-head-wrap{ padding: clamp(2.5rem,5vw,4rem) 0 0; max-width: 780px; margin-inline:auto; }
.back-link{ display:inline-flex; align-items:center; gap:.5em; font-size:.85rem; color: var(--ink-faint); margin-bottom:1.6rem; transition: color var(--dur-fast); }
.back-link:hover{ color: var(--ink); }
.article-head-wrap h1{ font-size: clamp(2rem,4.4vw,3.1rem); margin-top:1rem; line-height:1.12; }
.article-lede{ font-size:1.15rem; color: var(--ink-dim); margin-top:1.1rem; line-height:1.6; }

.article-byline{ display:flex; align-items:center; gap:.9rem; margin-top:2rem; padding-bottom:2rem; border-bottom:1px solid var(--line); }
.byline-avatar{ width:46px; height:46px; border-radius:50%; overflow:hidden; flex:none; border:1px solid var(--glass-border); }
.byline-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.article-byline strong{ display:block; font-size:.92rem; }
.article-byline span{ font-size:.8rem; color: var(--ink-faint); }

.article-hero-frame{ max-width: 1040px; margin: 2.2rem auto 0; padding-inline: var(--gutter); }
.article-hero-img{ width:100%; max-height:520px; object-fit:cover; border-radius: var(--radius-lg); border:1px solid var(--glass-border); display:block; }
.article-hero-caption{ font-size:.78rem; color: var(--ink-faint); margin-top:.7rem; text-align:center; }

.article-body-wrap{ max-width: 720px; margin: 3rem auto 0; }
.article-body{ font-size:1.06rem; line-height:1.8; color: var(--ink-dim); }
.article-body p{ margin-bottom:1.4rem; }
.article-body h2{ font-size:1.55rem; color: var(--ink); margin: 2.4rem 0 1.1rem; line-height:1.3; }
.article-body h3{ font-size:1.2rem; color: var(--ink); margin: 1.8rem 0 .9rem; }
.article-body ul, .article-body ol{ margin: 0 0 1.4rem; padding-left:1.4rem; display:flex; flex-direction:column; gap:.6rem; }
.article-body li{ line-height:1.7; }
.article-body ul li{ list-style: disc; }
.article-body ol li{ list-style: decimal; }
.article-body strong{ color: var(--ink); }
.article-body a{ color: var(--ink); text-decoration: underline; text-decoration-color: var(--glass-border); text-underline-offset: 3px; }
.article-body a:hover{ text-decoration-color: var(--ink); }
.article-body blockquote{ margin: 2.2rem 0; padding: 1.6rem 1.8rem; border-left: 3px solid var(--ink-dim); background: var(--glass-bg); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-family: var(--f-display); font-size:1.25rem; font-weight:500; color: var(--ink); line-height:1.5; }
.article-body blockquote cite{ display:block; margin-top:.8rem; font-family: var(--f-body); font-style:normal; font-size:.8rem; color: var(--ink-faint); }
.article-stat-row{ display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; margin: 2rem 0; }
.article-stat-row .mini-stat{ padding: 1.1rem; border-radius: var(--radius-sm); background: var(--glass-bg); border:1px solid var(--glass-border); text-align:center; }
.article-stat-row .mini-stat b{ display:block; font-family: var(--f-display); font-size:1.5rem; color: var(--ink); }
.article-stat-row .mini-stat span{ font-size:.74rem; color: var(--ink-faint); }
@media (max-width:640px){ .article-stat-row{ grid-template-columns:1fr; } }

.article-inline-ad{ margin: 2.6rem 0; }
.article-inline-ad .ad-embed{ width:100%; }
.article-inline-ad .ad-rect,
.article-inline-ad .ad-large-rect{ width:100%; max-width:none; height:auto; min-height:250px; }
.article-tags{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2.4rem; }

.author-bio-card{ display:flex; gap:1.2rem; margin-top:3rem; padding: 1.7rem; align-items:flex-start; }
.author-bio-card .byline-avatar{ width:58px; height:58px; }
.author-bio-card h4{ font-size:1rem; }
.author-bio-card p{ font-size:.86rem; color: var(--ink-faint); margin-top:.5rem; line-height:1.6; }

.related-section{ padding: 3rem 0 5rem; max-width: 1040px; margin-inline:auto; }
.related-section h3{ font-size:1.1rem; margin-bottom:1.4rem; }
.related-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.2rem; }
.related-card{ display:flex; flex-direction:column; gap:.8rem; }
.related-thumb{ height:120px; border-radius:12px; overflow:hidden; }
.related-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s var(--ease-out); }
.related-card:hover .related-thumb img{ transform: scale(1.06); }
.related-card h4{ font-size:.92rem; line-height:1.4; }
.related-card span{ font-size:.76rem; color: var(--ink-faint); }
@media (max-width: 760px){ .related-grid{ grid-template-columns:1fr; } }