/* ============================================================
   SEO Manager — article.css
   Article-page-only components. Requires core.css to be loaded
   first on the same page (uses its variables, container, header,
   footer). Do NOT link this on category/static/search pages that
   don't render an <article> — they only need core.css.
   ============================================================ */

/* ============ ARTICLE PAGE (single column — no sidebar) ============
   Page frame matches the homepage's 1220px container. Everything —
   H1, lede, and the rest of the body — spans that full frame, no
   narrower reading column (Dan's explicit call, see design standards). */
.article-page-wrap{padding:2rem 0 4rem;}
.article-layout{max-width:var(--wrap-max);margin:0 auto;}
.article-col{width:100%;}

.article-header{margin-bottom:1.75rem;}
.article-meta{display:flex;align-items:center;gap:.75rem;font-family:var(--f-mono);font-size:var(--text-min);color:var(--paper-muted);margin-bottom:1.1rem;flex-wrap:wrap;}
.article-cats{display:flex;gap:.5rem;flex-wrap:wrap;}
.cat-tag{
  font-family:var(--f-mono);font-size:.95rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  color:var(--accent-2);background:rgba(47,86,255,.08);border-radius:100px;padding:5px 12px;transition:background .2s;
}
.cat-tag:hover{background:rgba(47,86,255,.16);}
.article-title{font-size:clamp(2rem,6vw,3.2rem);line-height:1.1;letter-spacing:-.02em;}

/* ---- LEDE: intro text (60%) + featured image (40%) on desktop.
   Mobile-first: stacked, text before image — matches DOM order. ---- */
.article-lede{
  display:flex;flex-direction:column;gap:1.75rem;margin-bottom:3rem;
}
.lede-text{display:flex;flex-direction:column;gap:1.1rem;}
.lede-text p{
  font-family:var(--f-body);font-size:1.35rem;line-height:1.65;color:var(--paper-text);
}
.lede-text p:first-child{font-weight:500;}
.article-hero-wrap{border-radius:14px;overflow:hidden;border:1px solid var(--paper-line);flex-shrink:0;}
.article-hero-wrap img{width:100%;height:100%;object-fit:cover;aspect-ratio:930/600;}

@media (min-width:861px){
  .article-lede{flex-direction:row;align-items:stretch;gap:2.5rem;}
  .lede-text{flex:3;justify-content:center;}
  .article-hero-wrap{flex:2;}
}

/* ---- ARTICLE CONTENT TYPOGRAPHY ---- */
.article-content{font-size:1.2rem;}
.article-content > * + *{margin-top:1.4rem;}
.article-content p{line-height:1.8;color:var(--paper-text);}
.article-content h2{font-size:clamp(1.45rem,3.4vw,1.9rem);letter-spacing:-.015em;margin-top:2.75rem !important;scroll-margin-top:calc(var(--header-height) + 20px);}
.article-content h3{font-size:1.3rem;letter-spacing:-.01em;margin-top:2.1rem !important;scroll-margin-top:calc(var(--header-height) + 20px);}
.article-content ul{list-style:disc;padding-left:1.5rem;display:flex;flex-direction:column;gap:.6rem;}
.article-content ul li{line-height:1.75;}
.article-content strong{font-weight:700;}
.article-content em{font-style:italic;}
.article-content code{font-family:var(--f-mono);font-size:.92em;background:var(--paper-2);padding:.15em .4em;border-radius:4px;}
.article-content a:not(.cat-tag){color:var(--accent-2);text-decoration:underline;text-decoration-color:var(--paper-line);text-underline-offset:3px;}
.article-content a:not(.cat-tag):hover{text-decoration-color:currentColor;}

.inline-cta{
  font-family:var(--f-body);font-style:italic;font-size:1.2rem;
  background:var(--ink);color:var(--ink-text);border-radius:12px;
  padding:1.5rem 1.7rem;
}
.inline-cta a{color:var(--accent-soft);font-style:normal;font-family:var(--f-mono);font-size:1.05rem;text-decoration:none;}
.inline-cta a:hover{color:#fff;}

.key-takeaway{
  background:rgba(47,86,255,.06);border:1px solid rgba(47,86,255,.16);border-left:4px solid var(--accent);
  border-radius:0 12px 12px 0;padding:1.4rem 1.6rem;
}

.table-wrap{overflow-x:auto;border:1px solid var(--paper-line);border-radius:12px;-webkit-overflow-scrolling:touch;}
.table-wrap table{width:100%;border-collapse:collapse;font-size:1.05rem;min-width:520px;}
.table-wrap th{
  font-family:var(--f-mono);font-size:.95rem;letter-spacing:.02em;text-transform:uppercase;
  text-align:left;color:var(--paper-muted);background:var(--paper-2);padding:.9rem 1.15rem;border-bottom:1px solid var(--paper-line);
}
.table-wrap td{padding:.9rem 1.15rem;border-bottom:1px solid var(--paper-line);line-height:1.6;}
.table-wrap tr:last-child td{border-bottom:none;}

.article-nav{margin-top:3rem;padding-top:1.75rem;border-top:1px solid var(--paper-line);}
.article-nav a{
  font-family:var(--f-mono);font-size:1.05rem;color:var(--accent-2);font-weight:600;
}
.article-nav a::before{content:'← ';}
.article-nav a:hover{color:var(--accent);}

/* ============ RELATED ARTICLES (replaces sidebar) ============
   Spans the full page frame (--wrap-max), same as the homepage's
   article grids — mobile-first: stacked by default, widens in steps. */
.related-section{max-width:var(--wrap-max);margin:4.5rem auto 0;}
.related-head{margin-bottom:1.75rem;}
.related-kicker{
  font-family:var(--f-mono);font-size:.95rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent-2);display:inline-flex;align-items:center;gap:.6rem;
}
.related-kicker::before{content:'';width:22px;height:1px;background:currentColor;opacity:.5;}
.related-head h2{font-size:clamp(1.4rem,3.4vw,1.75rem);letter-spacing:-.015em;margin-top:.6rem;}
.related-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;}
.related-card{
  background:var(--paper-2);border:1px solid var(--paper-line);border-radius:14px;
  padding:1.75rem;display:flex;flex-direction:column;gap:.9rem;transition:border-color .2s,transform .2s;
}
.related-card:hover{border-color:var(--accent);transform:translateY(-3px);}
.related-card .tag{
  align-self:flex-start;font-family:var(--f-mono);font-size:.95rem;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;color:var(--accent-2);background:rgba(47,86,255,.08);border-radius:100px;padding:5px 12px;
}
.related-card h3{font-size:1.25rem;line-height:1.3;letter-spacing:-.01em;}
.related-card h3 a:hover{color:var(--accent-2);}
.related-card p{font-size:1.1rem;line-height:1.65;color:var(--paper-muted);}
.related-meta{display:flex;align-items:center;justify-content:space-between;margin-top:auto;font-family:var(--f-mono);font-size:.95rem;color:var(--paper-muted);}
.related-read{color:var(--accent-2);font-weight:600;}

@media (min-width:641px){
  .related-grid{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:1000px){
  .related-grid{grid-template-columns:repeat(3,1fr);}
}