/*
 * templates/article.css -- standard template for every PBN/blog article on
 * analyzing.markets (market-insight long-form posts, distinct from the
 * entity-driven industry/country/city templates). Loads after tokens.css,
 * base.css and components.css, same load order as every other
 * templates/*.css file (see docs/DESIGN_SYSTEM.md "File architecture").
 *
 * This is the house standard: every future blog/article page should set
 * $template_css = 'article' and wrap its body in the .container > 
 * .article-shell > article.article-body structure below. Do not invent a
 * one-off layout per article.
 */

.article-shell{
  padding:52px 0 96px;
}
.article-shell .breadcrumb{margin-bottom:18px}

.article-body{
  max-width:760px;
  margin:0 auto;
}

.article-body .article-dek{
  font-size:16px;
  line-height:1.68;
  color:var(--ink-2);
  margin:0 0 28px;
  max-width:720px;
}

.article-body h1{
  font-family:Georgia,serif;
  font-weight:500;
  font-size:clamp(34px,4.2vw,52px);
  line-height:1.04;
  letter-spacing:-.03em;
  margin:0 0 20px;
}

.article-body h2{
  font-family:Georgia,serif;
  font-weight:500;
  font-size:clamp(22px,2.6vw,30px);
  line-height:1.16;
  letter-spacing:-.02em;
  margin:44px 0 16px;
  padding-top:28px;
  border-top:1px solid var(--line);
}
.article-body h2:first-of-type{border-top:0;padding-top:0;margin-top:8px}

.article-body p{
  font-size:15px;
  line-height:1.75;
  color:var(--ink-2);
  margin:0 0 18px;
}
.article-body p:last-child{margin-bottom:0}

.article-body p strong{color:var(--ink);font-weight:700}

.article-body ul{
  margin:0 0 20px;
  padding-left:22px;
}
.article-body ul li{
  font-size:15px;
  line-height:1.7;
  color:var(--ink-2);
  margin:0 0 10px;
}
.article-body ul li:last-child{margin-bottom:0}
.article-body ul li strong{color:var(--ink)}

.article-body blockquote{
  border-left:3px solid var(--copper);
  background:var(--ice);
  padding:16px 20px;
  margin:24px 0;
  font-size:14px;
  line-height:1.65;
  color:var(--ink-2);
}
.article-body blockquote strong{color:var(--ink)}

.article-body a{
  color:var(--cobalt);
  text-decoration:underline;
  text-underline-offset:2px;
}
.article-body a:hover{color:var(--navy)}

.article-body img{
  max-width:100%;
  height:auto;
  border:1px solid var(--line);
  margin:8px 0 24px;
}

/* Sources block reuses the site's shared .source-list pattern where possible;
   this simplified fallback covers plain markdown-derived bullet sources. */
.article-body .article-sources{
  margin-top:44px;
  padding-top:24px;
  border-top:1px solid var(--navy);
}
.article-body .article-sources p:first-child{
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:10px;
}

.article-body .article-bottom-line{
  margin-top:44px;
  padding:24px 26px;
  border:1px solid var(--navy);
  background:var(--paper);
}
.article-body .article-bottom-line h2{
  border-top:0;
  padding-top:0;
  margin-top:0;
  font-size:20px;
}

@media(max-width:720px){
  .article-shell{padding:36px 0 64px}
  .article-body{max-width:100%}
  .article-body h2{margin-top:32px;padding-top:20px}
}