/* =========================================================
   Metis Advisory Group — Insights article pages
   site/article.css  (load after site/site.css)
   ---------------------------------------------------------
   Long-form reading layout for insights/<slug>.html. The body
   markup is whatever the Insights Agent writes into
   .article-body (plain <p> blocks), so everything here keys off
   that one container.
   ========================================================= */

.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; pointer-events: none; }
.read-progress span { display: block; height: 100%; width: 100%; background: var(--metis-charred-plum); transform-origin: 0 50%; transform: scaleX(0); }

.art-head { max-width: 860px; margin: 0 auto; padding: 164px 32px 0; position: relative; }
.art-head .crumbs { margin-bottom: 30px; }
.art-head h1 { font-size: clamp(40px, 5.6vw, 76px); font-weight: 300; letter-spacing: -0.034em; line-height: 1.02; margin: 20px 0 26px; text-wrap: balance; }
.art-head .dek { font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 2vw, 25px); line-height: 1.45; color: var(--slate-700); margin: 0 0 40px; max-width: 760px; }
.art-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 22px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.art-meta .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--metis-deep-indigo); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.art-meta .avatar img { width: 30px; height: 30px; object-fit: contain; filter: brightness(0) invert(0.95); }
.art-meta .who .n { font-size: 14px; font-weight: 500; }
.art-meta .who .r { font-family: var(--font-display); font-style: italic; font-size: 13px; color: var(--slate-600); }
.art-meta .facts { margin-left: auto; display: flex; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-600); }
.art-meta .facts .dot { color: var(--metis-charred-plum); }

.article-body { max-width: 680px; margin: 56px auto 0; padding: 0 32px; font-size: 19px; line-height: 1.78; font-weight: 300; color: var(--indigo-800); }
.article-body p { margin: 0 0 26px; max-width: none; }
.article-body > p:first-child { font-size: 22px; line-height: 1.6; display: flow-root; }
.article-body > p:first-child::first-letter {
  font-family: var(--font-display); font-style: normal; font-weight: 400;
  float: left; font-size: 4.1em; line-height: 0.82; padding: 0.06em 0.12em 0 0; color: var(--metis-charred-plum);
}
.article-body a { color: var(--metis-charred-plum); border-bottom: 1px solid rgba(76,46,69,0.35); }
.article-body a:hover { border-bottom-color: currentColor; }
.article-body strong { font-weight: 500; }
.art-fin { display: flex; justify-content: center; margin: 48px auto 0; color: var(--metis-charred-plum); }
.art-fin span { width: 8px; height: 8px; transform: rotate(45deg); background: currentColor; margin: 0 10px; opacity: 0.85; }
.art-fin span:nth-child(2) { opacity: 0.5; } .art-fin span:nth-child(3) { opacity: 0.25; }

.art-end { max-width: 680px; margin: 56px auto 0; padding: 0 32px; }
.author-card { display: grid; grid-template-columns: auto 1fr; gap: 22px; padding: 30px; border-radius: 18px; background: var(--bone-100); border: 1px solid var(--border-soft); }
.author-card .avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--metis-deep-indigo); display: flex; align-items: center; justify-content: center; }
.author-card .avatar img { width: 44px; height: 44px; object-fit: contain; filter: brightness(0) invert(0.95); }
.author-card .k { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--metis-charred-plum); font-weight: 500; }
.author-card h2 { font-size: 22px; font-weight: 400; letter-spacing: -0.01em; margin: 6px 0 8px; }
.author-card p { font-size: 14.5px; line-height: 1.6; color: var(--slate-700); margin: 0 0 14px; }
.author-card .links { display: flex; gap: 22px; flex-wrap: wrap; }
.share { margin-top: 24px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.share .lbl { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--slate-600); font-weight: 500; margin-right: 6px; }
.share a, .share button {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 13px; font-weight: 400;
  padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(28,30,63,0.14); background: transparent;
  color: var(--metis-deep-indigo); text-decoration: none; cursor: pointer; transition: border-color 180ms, background 180ms;
}
.share a:hover, .share button:hover { border-color: rgba(76,46,69,0.4); background: var(--bone-100); color: var(--metis-deep-indigo); }

.art-cta { margin-top: 96px; }

@media (max-width: 680px) {
  .art-head { padding: 124px 22px 0; }
  .art-meta .facts { margin-left: 0; width: 100%; }
  .article-body { padding: 0 22px; font-size: 18px; margin-top: 40px; }
  .article-body > p:first-child { font-size: 19.5px; }
  .art-end { padding: 0 22px; }
  .author-card { grid-template-columns: 1fr; padding: 24px; }
  .art-cta { margin-top: 64px; }
}
@media print {
  .top, .foot, .read-progress, .art-cta, .share, .skip { display: none !important; }
  .art-head { padding-top: 0; }
}