/* uFound — article page */
.reading-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--forest-700);z-index:120}
.article-hero{padding:clamp(40px,6vw,64px) 0 34px;background:var(--paper);margin-top:-86px;padding-top:clamp(120px,12vw,150px)}
.article-head{max-width:980px}
.article-head h1{font-size:clamp(38px,6.6vw,82px);line-height:.98;margin:18px 0 24px;letter-spacing:-.035em}
.article-head .dek{font-size:clamp(17px,1.8vw,21px);line-height:1.55;max-width:800px}
.article-meta{display:flex;gap:6px 12px;flex-wrap:wrap;margin-top:26px;align-items:center;font-size:14px;color:var(--graphite)}
.article-cover-large{padding:0 0 clamp(32px,5vw,54px);background:var(--paper)}
.article-cover-frame{padding:0}

.article-wrap{display:grid;grid-template-columns:250px minmax(0,720px);gap:72px;justify-content:center;padding:clamp(40px,6vw,66px) 0 clamp(60px,8vw,90px)}
.toc{position:sticky;top:112px;align-self:start;border-top:1px solid var(--ash);padding-top:18px}
.toc .eyebrow{margin-bottom:10px}
.toc a{display:block;font-size:14px;line-height:1.35;color:var(--graphite);padding:9px 0 9px 12px;margin-left:-12px;border-left:2px solid transparent;border-bottom:1px solid #ecece4;transition:color .2s,border-color .2s}
.toc a:hover{color:var(--forest-700)}
.toc a.active{color:var(--forest-800);font-weight:600;border-left-color:var(--forest-700)}

.article-body{font-size:18px;line-height:1.75}
.article-body p{font-size:clamp(17px,1.5vw,18px);line-height:1.75;color:#3a3b36;margin:0 0 24px}
.article-body h2{font-size:clamp(30px,4vw,42px);line-height:1.06;margin:clamp(44px,6vw,64px) 0 20px;scroll-margin-top:110px}
.article-body h3{font-size:clamp(22px,2.4vw,27px);line-height:1.12;margin:36px 0 14px}
.article-body ul{margin:18px 0 28px;padding-left:22px;color:#3a3b36}
.article-body li{margin:9px 0;padding-left:4px}
.article-body li::marker{color:var(--forest-700)}
.article-body strong{font-weight:600;color:var(--ink)}
.callout{background:var(--paper);border-radius:var(--card);padding:28px;margin:34px 0}
.callout.green{background:var(--signal-soft)}
.callout .eyebrow{color:var(--forest-800);margin-bottom:10px}
.callout p{margin:0;color:var(--ink);font-size:16px;line-height:1.65}
.pullquote{font-size:clamp(23px,3vw,30px);line-height:1.22;letter-spacing:-.03em;font-weight:500;border-left:4px solid var(--signal);padding-left:24px;margin:42px 0;color:var(--forest-950)}
.article-body p.pullquote{color:var(--forest-950)}
.inline-cta{background:var(--forest-950);color:#fff;border-radius:var(--card);padding:clamp(26px,4vw,38px);margin:48px 0}
.inline-cta .eyebrow{color:var(--signal)}
.inline-cta h3{font-size:clamp(26px,3.2vw,34px);margin:12px 0 0;line-height:1.1;color:#fff}
.inline-cta p{color:var(--on-dark);margin:14px 0 24px;font-size:17px}
.author-box{border-top:1px solid var(--ash);border-bottom:1px solid var(--ash);padding:26px 0;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;margin-top:64px}
.avatar{width:52px;height:52px;border-radius:50%;background:var(--signal);display:grid;place-items:center;color:var(--forest-950);font-weight:700}
.author-box p{font-size:14px;margin:5px 0 0;line-height:1.55}

.related{padding:clamp(56px,7vw,80px) 0;background:var(--paper)}
.related-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:28px;flex-wrap:wrap}
.related-head h2{font-size:clamp(32px,4.4vw,48px);line-height:1;margin-top:12px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.related-card{background:#fff;border-radius:var(--card);border:1px solid var(--ash);overflow:hidden;display:flex;flex-direction:column}
.related-card .cover{padding:10px}
.related-card .copy{padding:14px 22px 24px;display:flex;flex-direction:column;align-items:flex-start;flex:1}
.related-card h3{font-size:22px;line-height:1.14;margin:12px 0 18px}
.related-card .text-link{margin-top:auto}
.soon{display:inline-flex;margin-top:auto;padding:6px 12px;border-radius:var(--pill);background:var(--sage);color:var(--forest-800);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}

@media(max-width:900px){
  .article-wrap{grid-template-columns:1fr;gap:32px}
  .toc{position:relative;top:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:0 24px}
  .toc .eyebrow{grid-column:1/-1}
  .related-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .toc{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr}
  .callout{padding:22px}
}