/* article.css — blog posts and the blog index ("Working paper", 2026-09-29).
   Loaded after ../style.css, which holds every token, the header, the footer and
   the buttons. Rules: design-system/gstr2bmatch/MASTER.md.

   Five sizes on an article page: --fs-title (h1), --fs-heading (h2), --fs-lead
   (h3, lead, quotes), --fs-body, --fs-small. h4 is body-size semibold.
   Class names here are a contract with the writer agents — do not rename. */

/* ── Page frame ─────────────────────────────────────────────── */
.article-container,
.blog-wrap {
  max-width: calc(70ch + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--sp-12) var(--gutter) var(--sp-20);
}

/* ── Article header ─────────────────────────────────────────── */
.article-header {
  padding-bottom: var(--sp-8);
  margin-bottom: var(--sp-10);
  border-bottom: 3px double var(--ink);
}
.article-tag {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--mono); font-size: var(--fs-small); font-weight: 500;
  color: var(--ink-2);
  margin-bottom: var(--sp-5);
}
.article-tag::before { content: ""; width: 10px; height: 10px; background: var(--mark); border: 1.5px solid var(--ink); }
.article-title {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--fs-title); line-height: 1.04; letter-spacing: -.015em;
  text-wrap: balance;
  margin-bottom: var(--sp-6);
}
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  font-family: var(--mono); font-size: var(--fs-small); color: var(--ink-2);
}
.article-meta strong { font-weight: 500; color: var(--ink); }
.meta-sep, .read-time { font-family: var(--mono); }
.article-lead {
  margin-top: var(--sp-6);
  font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2);
  text-wrap: pretty;
}

/* ── Body ───────────────────────────────────────────────────── */
.article-content, .article-body {
  font-size: var(--fs-body); line-height: 1.72; color: var(--ink);
  overflow-wrap: break-word;   /* long URLs / codes must not push a phone page sideways */
}
.article-content > * + *, .article-body > * + * { margin-top: var(--sp-5); }
.article-content p, .article-body p { text-wrap: pretty; }

.article-content h2, .article-body h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--fs-heading); line-height: 1.12; letter-spacing: -.01em;
  text-wrap: balance;
  margin-top: var(--sp-16);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--rule);
}
.article-content h3, .article-body h3 {
  font-size: var(--fs-lead); font-weight: 600; line-height: 1.35;
  margin-top: var(--sp-10);
}
.article-content h4, .article-body h4 {
  font-size: var(--fs-body); font-weight: 600; margin-top: var(--sp-8);
}
.article-content h2 + *, .article-content h3 + *, .article-content h4 + *,
.article-body h2 + *, .article-body h3 + *, .article-body h4 + * { margin-top: var(--sp-3); }

.article-content ul, .article-content ol,
.article-body ul, .article-body ol { padding-left: var(--sp-6); }
.article-content li + li, .article-body li + li { margin-top: var(--sp-2); }
.article-content ul li::marker, .article-body ul li::marker { color: var(--ink-3); }
.article-content ol li::marker, .article-body ol li::marker {
  font-family: var(--mono); font-size: var(--fs-small); color: var(--ink-3);
}

.code-inline {
  font-family: var(--mono); font-size: var(--fs-small);
  background: var(--note-bg); border-radius: var(--r-1);
  padding: 1px 5px;
  overflow-wrap: anywhere;
}

blockquote {
  margin-left: 0;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
  border-left: 3px double var(--ink);
  font-family: var(--serif); font-size: var(--fs-lead); line-height: 1.45; color: var(--ink);
}
blockquote small {
  display: block; margin-top: var(--sp-3);
  font-family: var(--mono); font-size: var(--fs-small); color: var(--ink-2);
}

/* colour helpers for table cells (use instead of inline style) */
.is-risk { color: var(--risk); }
.is-ok   { color: var(--ok); }
.is-warn { color: var(--warn); }

/* ── Notes (callouts) ───────────────────────────────────────── */
.callout {
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--ink);
  background: var(--sheet);
  border-radius: 0 var(--r-1) var(--r-1) 0;
}
.callout > * + * { margin-top: var(--sp-3); }
.callout ul, .callout ol { padding-left: var(--sp-5); }
.callout-info    { border-left-color: var(--ink);  background: var(--sheet); }
.callout-neutral { border-left-color: var(--rule-strong); background: var(--sheet); }
.callout-success { border-left-color: var(--ok);   background: var(--ok-bg); }
.callout-warning { border-left-color: var(--warn); background: var(--warn-bg); }
.callout-danger  { border-left-color: var(--risk); background: var(--risk-bg); }

/* the call-to-action box near the end of a post */
.callout-card {
  margin-top: var(--sp-10);
  padding: var(--sp-6);
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  box-shadow: var(--sheet-shadow);
}
.callout-card > * + * { margin-top: var(--sp-3); }
.callout-card h2, .callout-card h3 { margin-top: 0; padding-top: 0; border-top: 0; }

/* letters and emails to copy */
.template-card {
  padding: var(--sp-5);
  background: var(--sheet);
  border: 1.5px dashed var(--rule-strong);
  border-radius: var(--r-2);
  font-family: var(--mono); font-size: var(--fs-small); line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* step sequences and file shapes — kept on paper, never a dark slab */
.workflow-box {
  padding: var(--sp-4) var(--sp-5);
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--mark);
  font-family: var(--mono); font-size: var(--fs-small); line-height: 1.7;
  overflow-x: auto;
}

.faq-item { padding: var(--sp-5) 0; border-top: 1px solid var(--rule); }
.faq-item + .faq-item { margin-top: 0; }
.faq-item h3 { margin-top: 0; }
.faq-item > * + * { margin-top: var(--sp-2); }
.faq-item p { color: var(--ink-2); }

/* ── Tables ─────────────────────────────────────────────────── */
.table-responsive {
  overflow-x: auto;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-1);
}
.article-table, .article-content table, .article-body table {
  width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: 1.55;
}
.table-responsive table { min-width: 520px; }
.article-content th, .article-body th {
  text-align: left; vertical-align: bottom;
  font-family: var(--mono); font-weight: 500; color: var(--ink-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--ink);
  background: var(--sheet);
}
.article-content td, .article-body td {
  padding: var(--sp-3) var(--sp-4); vertical-align: top;
  border-bottom: 1px solid var(--rule-soft);
}
.article-content tbody tr:last-child td, .article-body tbody tr:last-child td { border-bottom: 0; }
.article-content tbody tr:hover, .article-body tbody tr:hover { background: var(--mark-soft); }

/* ── Call to action ─────────────────────────────────────────── */
.btn-cta,
.article-content a.btn-cta, .article-body a.btn-cta,
.article-content a.btn, .article-body a.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 14px var(--sp-6);
  font-family: var(--sans); font-size: var(--fs-body); font-weight: 600; line-height: 1.25;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); border-radius: var(--r-1);
  text-decoration: none;
  transition: background-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
.btn-cta:hover,
.article-content a.btn-cta:hover, .article-body a.btn-cta:hover,
.article-content a.btn:hover, .article-body a.btn:hover {
  background: var(--ink-2); color: var(--paper); box-shadow: 3px 3px 0 var(--mark);
}
.btn-cta:active, .article-content a.btn:active { transform: translateY(1px); }

/* ── Blog index ─────────────────────────────────────────────── */
.blog-head {
  padding-bottom: var(--sp-8);
  margin-bottom: var(--sp-8);
  border-bottom: 3px double var(--ink);
}
.blog-head .label { display: block; margin-bottom: var(--sp-5); }
.blog-title {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--fs-title); line-height: 1.04; letter-spacing: -.015em;
  margin-bottom: var(--sp-5);
}
.blog-intro { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 52ch; }

.post-list { list-style: none; counter-reset: post; }
.post-list li { counter-increment: post; border-bottom: 1px solid var(--rule); }
.post-card {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--sp-4);
  padding: var(--sp-5) 0;
  text-decoration: none; color: var(--ink);
}
.post-card::before {
  content: counter(post, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--mono); font-size: var(--fs-small); color: var(--ink-3);
  padding-top: 4px;
}
.post-card h2 {
  grid-column: 2;
  font-size: var(--fs-lead); font-weight: 600; line-height: 1.35;
  text-wrap: pretty;
}
.post-card p { grid-column: 2; margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--ink-2); line-height: 1.6; }
.post-card:hover { background: transparent; }
.post-card:hover h2 { background: linear-gradient(transparent 60%, var(--mark) 60%); }
.post-card:focus-visible { outline-offset: 4px; outline: 2px solid var(--ink); }

.blog-cta {
  margin-top: var(--sp-12);
  padding: var(--sp-6);
  background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-2);
  box-shadow: var(--sheet-shadow);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4);
}
.blog-cta p { max-width: 44ch; color: var(--ink-2); }
.blog-cta strong { color: var(--ink); }

@media (max-width: 559px) {
  .article-container, .blog-wrap { padding-top: var(--sp-8); }
  .post-card { grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--sp-2); }
  /* Writers give CTAs long labels ("Reconcile Marg ERP Purchase Register ->").
     A nowrap button that long pushes a phone page sideways; on narrow screens the
     in-article CTA becomes a bold highlighted link that wraps like prose. */
  .article-container .btn-cta,
  .article-content a.btn-cta, .article-body a.btn-cta,
  .article-content a.btn, .article-body a.btn {
    display: inline; padding: 0; border: 0; border-radius: 0;
    background: linear-gradient(transparent 62%, var(--mark) 62%);
    color: var(--ink); white-space: normal; line-height: 1.5;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  .article-container .btn-cta:hover,
  .article-content a.btn-cta:hover, .article-body a.btn-cta:hover,
  .article-content a.btn:hover, .article-body a.btn:hover {
    background: var(--mark); color: var(--ink); box-shadow: none;
  }
}