/* ================================================================
   Truss — blog
   Additive only. Loaded AFTER /assets/site.css and scoped to blog
   classes, so nothing here can regress an existing page.
   Reuses the existing tokens (--ink, --brand, --line, --r-*, --maxw).
   ================================================================ */

/* ================================================================
   FONT-SWAP CLS
   The site loads Inter from Google Fonts with display=swap, so the first
   paint uses a fallback and the swap reflows the page. The audit measured
   CLS 0.13–0.17 on two existing mobile pages from exactly this.
   These metric overrides make the Arial fallback occupy the same space as
   Inter, so the swap is invisible. Scoped to .blog-body — no existing page
   changes. The real fix is self-hosting the fonts site-wide (audit #5,
   owned by MSP-5); this is the blog's local mitigation until then.
   ================================================================ */
@font-face{
  font-family:"Inter fallback";
  src:local("Arial");
  size-adjust:107%;
  ascent-override:90%;
  descent-override:22.43%;
  line-gap-override:0%;
}
/* Instrument Serif italic is far narrower than Georgia italic. Measured in
   Chromium 131 against the live Google Fonts files: width ratio 67.33%,
   ascent 99/em, descent 31/em. Overrides below are those measurements
   expressed against the size-adjusted em. Without this the blog index H1
   ("owning software") shifted 0.117 CLS on the font swap. */
@font-face{
  font-family:"Instrument Serif fallback";
  src:local("Georgia"),local("Times New Roman");
  font-style:italic;
  size-adjust:67.33%;
  ascent-override:147%;
  descent-override:46%;
  line-gap-override:0%;
}
@font-face{
  font-family:"JetBrains Mono fallback";
  src:local("Courier New"),local("monospace");
  size-adjust:99.66%;
  ascent-override:102.3%;
  descent-override:30.1%;
  line-gap-override:0%;
}

.blog-body{
  font-family:'Inter','Inter fallback',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
.blog-body .h1 em,
.blog-body .h2 em,
.blog-body .prose em,
.blog-body .pullquote{
  font-family:'Instrument Serif','Instrument Serif fallback','Iowan Old Style',Georgia,serif;
}
.blog-body .eyebrow,
.blog-body .crumbs,
.blog-body .postcard__meta,
.blog-body .relcard__kicker,
.blog-body .footer__col .footer__h,
.blog-body code{
  font-family:'JetBrains Mono','JetBrains Mono fallback',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ---------- breadcrumb ---------- */
.crumbs{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  display:flex;gap:8px;flex-wrap:wrap;
  padding-top:clamp(96px,11vw,140px);
}
.crumbs a{border-bottom:1px solid transparent}
.crumbs a:hover{color:var(--brand);border-bottom-color:currentColor}

/* ---------- footer column headings ----------
   The live templates use <h5> here, which produces an h2 -> h5 skip on any
   page whose last content heading is an h2 (audit finding #12, WCAG 1.3.1).
   Blog pages emit <h2 class="footer__h"> instead; this rule reproduces the
   existing .footer__col h5 declaration exactly, so nothing moves visually. */
.footer__col .footer__h{
  margin:0 0 14px;font-size:11px;font-family:var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);font-weight:500;
}

/* ---------- draft banner (drafts/ only, never shipped) ---------- */
.draftbar{
  background:var(--warn-soft);
  border-bottom:1px solid var(--warn);
  color:#5a3a06;
  font-size:14px;line-height:1.5;
  padding:14px var(--gutter);
  text-align:center;
  position:sticky;top:0;z-index:60;
}
.draftbar code{font-family:var(--mono);font-size:12.5px}

/* ================================================================
   ARTICLE
   ================================================================ */
.article__inner{max-width:760px}
.article__head{padding:20px 0 0}
.article__h1{
  /* the page H1 is a sentence, not a hero slab */
  font-size:clamp(32px,4.6vw,52px);
  line-height:1.06;
  margin:14px 0 0;
  text-wrap:balance;
}
.article__standfirst{margin:18px 0 0;max-width:62ch;color:var(--muted)}
.article__meta{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  margin-top:22px;padding-bottom:26px;
  border-bottom:1px solid var(--line);
  font-size:14px;color:var(--muted);
}
.article__author{color:var(--ink);font-weight:500}

/* ---------- table of contents ---------- */
.article__toc{
  margin:28px 0 4px;
  padding:18px 22px;
  background:var(--bg-tint);
  border:1px solid var(--line);
  border-radius:var(--r-3);
}
.article__toc p{margin:0 0 10px}
.article__toc ol{margin:0;padding-left:1.1em;display:grid;gap:7px}
.article__toc li{font-size:15px;color:var(--muted)}
.article__toc a{border-bottom:1px solid transparent}
.article__toc a:hover{color:var(--brand);border-bottom-color:currentColor}

/* ---------- body ---------- */
.article__body{
  max-width:68ch;
  padding:34px 0 8px;
}
.article__body a{
  color:var(--brand-deep);
  border-bottom:1px solid rgba(124,58,237,.35);
}
.article__body a:hover{border-bottom-color:var(--brand)}
.article__body .cta-link{
  font-weight:600;
  color:var(--brand-deep);
  border-bottom:2px solid rgba(124,58,237,.45);
}

.article__h2{
  font-size:clamp(23px,2.7vw,31px);
  line-height:1.16;
  color:var(--ink);
  margin:2.1em 0 .6em;
  scroll-margin-top:110px;
  text-wrap:balance;
}
.article__h3{
  margin:1.7em 0 .5em;
  color:var(--ink);
  scroll-margin-top:110px;
}
.article__body > :first-child{margin-top:0}

.article__list{margin:0 0 1.2em;padding-left:1.25em;display:grid;gap:.55em}
.article__list li{line-height:1.6}
.article__list li::marker{color:var(--muted-2)}

.article__note{
  margin:1.6em 0;
  padding:16px 20px;
  border-left:3px solid var(--brand);
  background:var(--brand-soft);
  border-radius:0 var(--r-2) var(--r-2) 0;
  color:var(--brand-ink);
}
.article__note p:last-child{margin-bottom:0}
.article__note code{
  font-family:var(--mono);font-size:12.5px;
  background:rgba(255,255,255,.6);padding:1px 5px;border-radius:4px;
}

.article__body code{
  font-family:var(--mono);font-size:.88em;
  background:var(--bg-tint);border:1px solid var(--line);
  padding:1px 5px;border-radius:5px;color:var(--ink-soft);
}
.article__rule{margin:2.4em 0}

/* ---------- related ---------- */
.article__related{
  margin-top:56px;padding-top:34px;
  border-top:1px solid var(--line);
}
.article__related h2{margin:0 0 18px}
.relgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.relcard{
  display:grid;gap:7px;align-content:start;
  padding:20px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-3);
  box-shadow:var(--shadow-1);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);
}
.relcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--line-strong)}
.relcard__kicker{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand);
}
.relcard__title{font-weight:600;font-size:16.5px;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.relcard__desc{font-size:14px;line-height:1.5;color:var(--muted)}
.article__backlink{margin:20px 0 0;font-size:14.5px}
.article__backlink a{color:var(--brand-deep);border-bottom:1px solid rgba(124,58,237,.35)}

/* ---------- article CTA block ---------- */
.article__cta .prose{max-width:60ch}
.article__cta .prose p{margin:0 0 .9em}

/* ================================================================
   INDEX
   ================================================================ */
.blogindex{padding-bottom:clamp(56px,8vw,96px)}
.blogindex__head{max-width:780px;padding:22px 0 0}
.blogindex__head .h1{margin:14px 0 0;font-size:clamp(34px,5.2vw,60px)}
.blogindex__head .lede{margin-top:20px;max-width:64ch}

.postgrid{
  margin-top:clamp(36px,5vw,56px);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:18px;
}
.postcard{display:flex}
.postcard__link{
  display:grid;gap:10px;align-content:start;
  width:100%;
  padding:26px 26px 24px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-4);
  box-shadow:var(--shadow-1);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);
}
.postcard__link:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--line-strong)}
.postcard__title{margin:0;color:var(--ink);text-wrap:balance}
.postcard__desc{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.postcard__meta{
  margin:4px 0 0;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  /* --muted-2 (#8A8790) is 3.53:1 on white at 11.5px — a WCAG 1.4.3 AA fail.
     --muted (#5A5862) is 7.0:1. Verified with axe-core 4.10. */
  text-transform:uppercase;color:var(--muted);
}
.postcard__more{
  margin-top:8px;font-size:14.5px;font-weight:500;color:var(--brand-deep);
  display:inline-flex;align-items:center;gap:6px;
}
.postcard__link:hover .arrow{transform:translateX(3px)}

.blogindex__upcoming{
  margin-top:clamp(40px,6vw,64px);
  padding-top:30px;border-top:1px solid var(--line);
  max-width:760px;
}
.blogindex__upcoming h2{margin:0 0 14px}
.blogindex__upcoming .article__list{color:var(--muted)}

/* ================================================================
   MOBILE — the audit found 4 of 5 existing pages overflowing at 360px.
   Nothing added here is allowed to repeat that.
   ================================================================ */
@media (max-width:640px){
  .article__inner,.blogindex .container{overflow-wrap:anywhere}
  .article__toc{padding:16px 18px}
  .postgrid,.relgrid{grid-template-columns:1fr}
  .crumbs{padding-top:96px}
}

@media (prefers-reduced-motion:reduce){
  .relcard,.postcard__link{transition:none}
  .relcard:hover,.postcard__link:hover{transform:none}
}