/* article.css — /blog/<slug>. Editorial layout on the paper surface; the body
   styles arbitrary CMS-authored HTML (h2/h3, p, lists, quotes, images, code). */

.art{padding-top:var(--sp-8)}
.art__wrap{max-width:760px}

.art__back{display:inline-block;margin-bottom:var(--sp-6);font-family:var(--font-mono);
  font-size:var(--step--1);font-weight:650;color:var(--text-soft)}
.art__back:hover{color:var(--accent)}

.art__head{margin-bottom:var(--sp-6)}
.art__head .ins-meta{margin-bottom:var(--sp-3)}
.art__title{font-size:clamp(30px,4.4vw,46px);line-height:1.1;letter-spacing:-.02em;
  color:var(--text-heading);margin:0 0 var(--sp-4)}
.art__excerpt{font-size:var(--step-2);line-height:1.5;color:var(--text-soft);margin:0}

.art__shot{width:100%;border-radius:var(--radius-lg);margin-bottom:var(--sp-8);display:block}
.art__shot--ph{aspect-ratio:16/8;display:grid;place-items:center;
  background-color:var(--surface-solutions);background-image:var(--solutions-fx)}
.art__shot--ph span{font-family:var(--font-mono);font-size:var(--step--2);letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-solutions-soft)}

/* ---------- article body: style the CMS HTML ---------- */
.art__body{font-size:1.125rem;line-height:1.75;color:var(--text)}
.art__body > *{margin-bottom:var(--sp-5)}
.art__body > *:last-child{margin-bottom:0}
.art__body h2{font-family:var(--font-display);font-size:clamp(24px,3vw,32px);line-height:1.2;
  letter-spacing:-.015em;color:var(--text-heading);margin-top:var(--sp-9)}
.art__body h3{font-family:var(--font-display);font-size:clamp(20px,2.4vw,25px);line-height:1.25;
  color:var(--text-heading);margin-top:var(--sp-7)}
.art__body h4{font-size:var(--step-1);font-weight:700;color:var(--text-heading);margin-top:var(--sp-6)}
.art__body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.art__body a:hover{text-decoration:none}
.art__body strong,.art__body b{color:var(--text-heading);font-weight:700}
.art__body ul,.art__body ol{padding-left:var(--sp-6)}
.art__body li{margin-bottom:var(--sp-2)}
.art__body li::marker{color:var(--accent)}
.art__body blockquote{margin-inline:0;padding:var(--sp-2) 0 var(--sp-2) var(--sp-5);
  border-left:3px solid var(--accent);font-family:var(--font-display);
  font-size:var(--step-2);font-style:italic;color:var(--text-heading)}
.art__body img{border-radius:var(--radius);display:block;height:auto}
.art__body figure{margin-inline:0}
.art__body figcaption{font-size:var(--step--1);color:var(--text-faint);text-align:center;
  margin-top:var(--sp-2)}
.art__body hr{border:0;border-top:var(--border) solid var(--line);margin-block:var(--sp-8)}
.art__body code{font-family:var(--font-mono);font-size:.9em;background:var(--surface-tint);
  padding:2px 6px;border-radius:4px}
.art__body pre{background:var(--surface-invert);color:#e6e9f2;padding:var(--sp-4);
  border-radius:var(--radius);overflow-x:auto;font-size:var(--step--1);line-height:1.6}
.art__body pre code{background:none;padding:0;color:inherit}
.art__body table{width:100%;border-collapse:collapse;font-size:var(--step-0);display:block;overflow-x:auto}
.art__body th,.art__body td{text-align:left;padding:var(--sp-2) var(--sp-3);
  border-bottom:var(--border) solid var(--line)}
.art__body th{font-weight:650;color:var(--text-heading)}