/* ---- ARTICLES (/articles/) ----
   Long-form reading pages. Built on the site system in styles.css: same type, colors and
   button rules. Only the reading column, the article hero title size and the small article
   parts (byline, Score callout, author box, related list, hub cards) are defined here. */

.article-hero .page-hero__inner{max-width:900px}
.article-hero .eyebrow a{color:inherit}
.article-hero .eyebrow a:hover{color:var(--off)}
.article__title{
  font-family:var(--font-display);font-weight:900;font-stretch:75%;text-transform:uppercase;
  font-size:clamp(2.1rem,5.4vw,4.2rem);line-height:.92;letter-spacing:-.01em;margin:0 0 22px;
}
.article__meta{color:#BDBAB5;font-size:1rem;margin:0 auto}
.article__meta a{color:var(--off);text-decoration:underline;text-underline-offset:3px}

.article-wrap{padding-top:clamp(32px,5vw,64px)}
.article{max-width:720px;margin:0 auto}
.article p,.article li{font-size:1.12rem;line-height:1.7;color:#D8D5D0}
.article p{margin-bottom:20px}
.article strong{color:var(--off)}
.article a{color:var(--off);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px;text-decoration-thickness:2px}
.article a:hover{color:var(--red-text)}
.article a.link--score{color:var(--red-text);text-decoration-color:currentColor;font-weight:700}
.article h2{font-family:var(--font-head);font-weight:800;font-size:clamp(1.45rem,2.6vw,1.85rem);line-height:1.2;color:var(--off);margin:52px 0 16px;scroll-margin-top:96px}
.article h3{font-family:var(--font-head);font-weight:700;font-size:1.2rem;line-height:1.3;color:var(--off);margin:32px 0 10px}
.article ul,.article ol{margin:0 0 22px 24px}
.article li{margin-bottom:10px;padding-left:4px}
.article li::marker{color:var(--red-text);font-weight:700}

.article__callout{border-left:3px solid var(--red);background:var(--panel);padding:18px 22px;margin:28px 0 8px;border-radius:0 6px 6px 0}
.article__callout p{margin:0;font-size:1.05rem}

.article__author{display:flex;gap:20px;align-items:flex-start;margin:56px 0 0;padding:26px;background:var(--panel);border:1px solid var(--line);border-radius:8px}
.article__author img{width:72px;height:72px;border-radius:50%;flex:0 0 72px}
.article__author p{font-size:1rem;margin:0}
.article__author .article__author-name{font-weight:800;color:var(--off);margin-bottom:6px;font-size:1.05rem}

.article__related{max-width:720px;margin:56px auto 0;padding-top:30px;border-top:1px solid var(--line)}
.article__related ul{list-style:none;margin:14px 0 0}
.article__related li{margin-bottom:18px}
.article__related a{display:block;font-weight:800;font-size:1.15rem;color:var(--off);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:4px;text-decoration-thickness:2px}
.article__related a:hover{color:var(--red-text)}
.article__related span{display:block;color:#BDBAB5;font-size:1rem;margin-top:4px}

.article-list{list-style:none;max-width:760px;margin:0 auto}
.article-card{padding:28px 0;border-bottom:1px solid var(--line)}
.article-card:first-child{padding-top:0}
.article-card__meta{color:#BDBAB5;font-size:.95rem;margin-bottom:8px}
.article-card__title{font-family:var(--font-head);font-weight:800;font-size:clamp(1.35rem,2.6vw,1.75rem);line-height:1.2;margin-bottom:10px}
.article-card__title a{color:var(--off)}
.article-card__title a:hover{color:var(--red-text)}
.article-card p:last-child{color:#D8D5D0;font-size:1.08rem;line-height:1.6}

@media (max-width:600px){
  .article p,.article li{font-size:1.06rem}
  .article__author{flex-direction:column;gap:14px;padding:20px}
}