/* Sitebraid blog.
   Extends the site design system rather than replacing it: site.css supplies
   the header, navigation, footer, palette and Manrope type. This file adds the
   post-level layout only. Existing tokens (--ink, --muted, --orange, --line,
   --pale) are reused; no new palette is introduced. */

/* Post shell, narrower measure than the standard article for long-form reading */
.blog-post{max-width:1000px}
.blog-post article{max-width:760px}

.blog-standfirst{
  font-size:20px;line-height:1.6;color:var(--ink);
  margin:0 0 24px;padding-left:20px;
  border-left:3px solid var(--orange);
}

.blog-byline{
  font-size:14px;line-height:1.7;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);
  padding-bottom:22px;border-bottom:1px solid var(--line);margin:0 0 34px;
}

/* Body copy: slightly larger and looser than the standard article,
   because these posts run long. Same family and palette as the site. */
.blog-body-copy p{font-size:18px;line-height:1.85;max-width:68ch;margin:0 0 1.25rem}
.blog-body-copy h2{
  font-size:27px;line-height:1.3;letter-spacing:-.3px;
  color:var(--ink);margin:2.6rem 0 .9rem;max-width:26ch;
}
.blog-body-copy h2::before{
  content:"";display:block;width:42px;height:3px;background:var(--orange);margin-bottom:14px;
}
.blog-body-copy ul{margin:0 0 22px;padding-left:22px;max-width:68ch}
.blog-body-copy li{font-size:18px;line-height:1.85;margin-bottom:8px}
.blog-body-copy hr{border:0;border-top:1px solid var(--line);margin:44px 0}
.blog-body-copy strong{font-weight:700;color:var(--ink)}

/* Dated update note, visibly distinct from body copy */
.blog-body-copy p.blog-update{
  background:var(--pale);border-left:3px solid var(--orange);
  padding:16px 20px;margin:0 0 28px;font-size:16px;line-height:1.7;max-width:68ch;
}

/* Pulled rule text */
.blog-body-copy blockquote{
  margin:24px 0;padding:2px 0 2px 22px;
  border-left:3px solid var(--line);max-width:68ch;
}
.blog-body-copy blockquote p{
  font-size:17px;line-height:1.75;color:var(--ink);margin:0;
}

/* Data table */
.blog-table-wrap{
  margin:32px 0;overflow-x:auto;
  border-top:2px solid var(--ink);border-bottom:1px solid var(--line);
}
.blog-table-wrap table{border-collapse:collapse;width:100%;font-size:14px}
.blog-table-wrap thead th{
  text-align:left;padding:13px 14px 11px;font-weight:700;font-size:12px;
  letter-spacing:.8px;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.blog-table-wrap tbody td{
  padding:12px 14px;border-bottom:1px solid var(--line);
  vertical-align:top;line-height:1.5;
}
.blog-table-wrap tbody tr:last-child td{border-bottom:0}
.blog-table-wrap tbody td:first-child{font-weight:700;color:var(--ink)}

/* Takeaway panel, uses the site ink and orange */
.blog-takeaway{
  background:var(--ink);color:#EEF1F4;padding:32px;margin:44px 0;
  border-left:5px solid var(--orange);max-width:760px;
}
.blog-takeaway h2{color:#fff;margin:0 0 14px;font-size:20px;letter-spacing:-.2px}
.blog-takeaway h2::before{display:none}
.blog-takeaway p{color:#D4DAE1;font-size:18px;line-height:1.8;margin-bottom:14px;max-width:none}
.blog-takeaway p:last-child{margin-bottom:0}
.blog-takeaway strong{color:#fff}
.blog-takeaway a{color:#F2A481;text-decoration:underline;text-underline-offset:3px}

/* Sources */
.blog-sources{margin-top:48px;padding-top:26px;border-top:2px solid var(--ink);max-width:760px}
.blog-sources h2{font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;margin:0 0 18px}
.blog-sources h2::before{display:none}
.blog-sources ul{margin:0;padding-left:20px}
.blog-sources li{font-size:16px;line-height:1.7;color:var(--muted);margin-bottom:9px}
.blog-sources p{font-size:16px;line-height:1.7;color:var(--muted);max-width:68ch}

/* Closing italic notes from the source document */
.blog-body-copy p.blog-closing{font-size:16px;line-height:1.7;color:var(--muted);max-width:68ch}

/* Back link, below the article rather than above the eyebrow */
.blog-backlink{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);font-size:16px;line-height:1.7;max-width:760px}

/* Index.
   The bare .wrap class carries no top padding, so the eyebrow would sit flush
   against the sticky header. Match the rhythm the insights index uses. */
.blog-index{padding-top:44px;padding-bottom:40px}
.blog-index-head{max-width:760px;margin-bottom:8px}

/* Two columns on wide viewports so the page fills its 1200px container
   rather than leaving a single narrow column against empty space. Entry
   copy keeps a readable measure inside each column. */
.blog-entries{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 56px;border-top:2px solid var(--ink);margin-top:28px;
}
.blog-entry{
  display:block;text-decoration:none;color:inherit;
  padding:30px 0;border-bottom:1px solid var(--line);
}
.blog-entry:hover h2{color:var(--orange)}
.blog-entry-date{
  font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:10px;
}
.blog-entry h2{
  font-size:27px;line-height:1.3;letter-spacing:-.3px;
  color:var(--ink);margin:0 0 10px;max-width:26ch;transition:color .15s;
}
.blog-entry p{font-size:18px;line-height:1.7;color:var(--muted);margin:0;max-width:52ch}

@media(max-width:980px){
  .blog-entries{grid-template-columns:1fr;gap:0}
}

@media(max-width:780px){
  .blog-index{padding-top:28px}
  /* Regression guard: the roster table must not push past the viewport.
     Narrow the cells and release the header nowrap so it wraps instead. */
  .blog-table-wrap table{font-size:13px}
  .blog-table-wrap thead th{white-space:normal;padding:10px 8px 9px;font-size:10.5px;letter-spacing:.6px}
  .blog-table-wrap tbody td{padding:10px 8px}
  .blog-body-copy p,.blog-body-copy li{font-size:17px}
  .blog-standfirst{font-size:18px;padding-left:16px}
  .blog-body-copy h2,.blog-entry h2{font-size:23px}
  .blog-takeaway{padding:24px 20px}
  .blog-body-copy h2{margin-top:38px}
}