/* ============================================================================
   ARGOS - article.css
   Long-form prose: legal pages, the whitepaper article, blog posts and case
   studies. Everything here is scoped under .prose so it cannot leak into the
   marketing pages' tighter typographic rhythm.
   ========================================================================= */

/* The legal pages quote bare URLs inside body text and bold runs, not only
   inside links, so the wrap rule has to cover the whole prose block or they
   push the page sideways on narrow screens. */
.prose{max-width:var(--measure);font-size:var(--fs-body);line-height:1.72;color:var(--text-secondary);overflow-wrap:break-word}
.prose-wide{max-width:82ch}

.prose > * + *{margin-top:20px}

.prose h2{
  font-size:clamp(22px,2.4vw,30px);line-height:1.2;letter-spacing:-.01em;font-weight:600;
  letter-spacing:-.01em;color:var(--text-primary);
  margin-top:56px;padding-top:28px;border-top:1px solid var(--border-subtle);
}
/* The first heading opens the document - the rule above it would read as a
   separator from nothing. */
.prose > h2:first-child{margin-top:0;padding-top:0;border-top:none}
.prose h3{font-size:clamp(18px,1.8vw,22px);line-height:1.3;font-weight:600;color:var(--text-primary);margin-top:36px}
.prose h4{font-size:var(--fs-body);line-height:1.4;font-weight:600;color:var(--text-primary);margin-top:28px}

.prose p{margin-top:18px}
.prose strong,.prose b{color:var(--text-primary);font-weight:600}
.prose em,.prose i{font-style:italic}

.prose a{color:var(--accent-bright);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .2s}
.prose a:hover{color:var(--text-primary)}
/* Legal pages carry long bare URLs that would otherwise force a horizontal
   scrollbar on narrow screens. */
.prose a{overflow-wrap:anywhere}

.prose ul,.prose ol{margin-top:18px;padding-left:26px}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-top:10px;padding-left:4px}
.prose li::marker{color:var(--accent)}

/* Raised ground and a full hairline, not an accent stripe - the 3px
   border-left this used to carry is the side-stripe DESIGN-SYSTEM.md bans. */
.prose blockquote{
  margin-top:28px;padding:20px 26px;
  background:var(--bg-raised);border:1px solid var(--border-subtle);
  border-radius:var(--r-card);
  color:var(--text-primary);font-size:var(--fs-lead);line-height:1.6;
}

.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em;padding:2px 6px;border-radius:5px;
  background:rgba(255,255,255,.06);color:var(--accent-bright);
}
.prose pre{
  margin-top:24px;padding:20px 24px;overflow-x:auto;
  background:var(--bg-raised);border:1px solid var(--border-subtle);
  border-radius:var(--r-card);
}
.prose pre code{background:none;padding:0;color:var(--text-secondary);font-size:var(--fs-small);line-height:1.7}

.prose img{margin-top:28px;border-radius:var(--r-card);border:1px solid var(--border-subtle)}
.prose hr{border:none;border-top:1px solid var(--border-subtle);margin:40px 0}

/* Tables scroll inside their own box rather than widening the page. */
.prose .table-wrap{overflow-x:auto;margin-top:28px}
.prose table{width:100%;border-collapse:collapse;font-size:var(--fs-small);min-width:520px}
.prose th,.prose td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border-subtle)}
.prose th{font-family:var(--font-display);font-weight:600;color:var(--text-primary);white-space:nowrap}

/* ---------- Article furniture ---------- */
.article-meta{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:var(--fs-small);color:var(--text-muted);margin-bottom:8px}
.article-meta time{color:var(--text-secondary)}
.article-tag{
  font-family:var(--font-display);font-size:var(--fs-label);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-bright);
  background:rgba(var(--accent-rgb),.12);padding:4px 10px;border-radius:20px;
}

/* Post cards on the blog index. */
.post-card{display:flex;flex-direction:column;gap:12px;height:100%}
.post-card .article-meta{margin-bottom:0}
.post-card h3{font-size:var(--fs-lead);line-height:1.35;font-weight:600;margin:0}
.post-card h3 a{transition:color .2s}
.post-card:hover h3 a{color:var(--accent-bright)}
.post-card p{font-size:var(--fs-small);line-height:23px;color:var(--text-muted);flex:1}
.post-card .more{font-family:var(--font-display);font-size:var(--fs-small);font-weight:500;color:var(--accent-bright)}

@media (max-width:767px){
  .prose{font-size:var(--fs-body)}
  .prose h2{margin-top:40px;padding-top:24px}
}