/* ==========================================================================
   Single-article extras (loaded only by article.njk, after style.css):
   byline, table of contents, author card, related articles.
   ========================================================================== */

/* style.css caps the title at 22ch, which wraps short titles with room to spare */
.article-hero h1{max-width:none}

/* byline (headshot + name + dates + reading time) */
.byline-block{display:flex;align-items:center;gap:14px;margin-top:24px}
.byline-photo{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--bg)}
.byline-name{margin:0;font-size:.95rem;color:var(--ink-2)}
.byline-name a{color:var(--ink);font-weight:600}
.byline-name a:hover{color:var(--blue)}
.byline-block .article-meta{margin:2px 0 0;max-width:none;gap:4px 10px}

/* body + table of contents: inline box on small screens, sticky sidebar on wide ones */
.article-body h2,.article-body h3{scroll-margin-top:96px}
.toc{border:1px solid var(--line);border-radius:6px;background:var(--bg-alt);padding:18px 22px;font-size:.92rem;line-height:1.45}
.toc-title{font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.toc ol{list-style:none;margin:0;padding:0}
.toc ol ol{padding-left:14px;margin-top:6px;border-left:1px solid var(--line-2)}
.toc li{margin:0 0 8px}
.toc li:last-child{margin-bottom:0}
.toc a{color:var(--ink-2);display:block}
.toc a:hover,.toc a.is-active{color:var(--blue)}
.toc a.is-active{font-weight:600}
.article-layout.has-toc .article-aside{max-width:720px;margin:clamp(32px,4vw,48px) auto 0}
.article-layout.has-toc .article-body{padding-top:clamp(28px,3.5vw,40px)}
@media(min-width:1100px){
  .article-layout.has-toc{display:grid;grid-template-columns:230px minmax(0,720px);gap:56px;justify-content:center;align-items:start}
  .article-layout.has-toc .article-aside{position:sticky;top:96px;margin:clamp(40px,5vw,64px) 0 0;max-height:calc(100vh - 120px);overflow:auto}
  .article-layout.has-toc .article-body{padding-top:clamp(40px,5vw,64px)}
  .article-layout.has-toc .toc{background:none;border:none;border-left:1px solid var(--line);border-radius:0;padding:2px 0 2px 18px}
}

/* author bio card */
.author-card{max-width:720px;margin:0 auto clamp(28px,3.5vw,40px);display:flex;gap:20px;align-items:flex-start;border:1px solid var(--line);border-radius:6px;padding:24px;background:var(--bg-alt)}
.author-card img{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:none}
.author-card p{margin:0 0 .6rem;font-size:.95rem;line-height:1.6}
.author-card p:last-child{margin:0}
.author-card .author-card-label{font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.author-card-name a{color:var(--ink);font-weight:600;font-size:1.08rem}
.author-card-name span{display:block;font-size:.85rem;color:var(--muted)}
.author-card .author-card-links{font-size:.85rem}
@media(max-width:520px){.author-card{flex-direction:column}}

/* related articles */
.related{background:var(--bg-alt);border-top:1px solid var(--line);padding-block:clamp(40px,5vw,64px)}
.related-title{font-size:1.4rem;margin:0 0 24px}
.post-grid--3{grid-template-columns:repeat(3,1fr)}
.post-grid--3 .post-card h3{font-size:1.12rem;font-weight:600;line-height:1.3;margin:0 0 10px}
.post-grid--3 .post-card h3 a{color:var(--ink)}
.post-grid--3 .post-card h3 a:hover{color:var(--blue)}
@media(max-width:960px){.post-grid--3{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.post-grid--3{grid-template-columns:1fr}}