/* pllc-article.css — blog post bodies. The 129 <article> bodies are frozen
   byte-for-byte (tests/blog-body.test.mjs), so this file styles the class
   names they already carry, on --ds-* tokens, replacing the 14 inline
   <style> variants that used to sit in each post's <head>. */
.pllc-article-main{display:block}
.article-header{padding:var(--ds-space-12) 0 var(--ds-space-8);border-bottom:1px solid var(--ds-line);margin-bottom:var(--ds-space-8)}
.article-header .kicker{display:inline-flex;align-items:center;gap:var(--ds-space-3)}
.article-header .kicker::before{content:"";width:2rem;height:1px;background:var(--ds-accent)}
h1.headline,h1.article-title{font-size:var(--ds-display-2);margin:0 0 var(--ds-space-4);text-wrap:balance}
h1.headline em{font-style:italic;color:var(--ds-accent)}
.deck,.article-deck{font-family:var(--ds-font-display);font-style:italic;font-size:var(--ds-text-lg);line-height:1.5;color:var(--ds-ink);max-width:60ch;margin:0 0 var(--ds-space-6)}
.byline,.article-meta{font-family:var(--ds-font-ui);font-size:var(--ds-text-xs);letter-spacing:.04em;color:var(--ds-ink-secondary);display:flex;gap:var(--ds-space-4);flex-wrap:wrap;margin:0}
.byline .gold,.gold{color:var(--ds-accent)}

.article-body{max-width:var(--ds-prose-max);padding:0 0 var(--ds-space-16)}
.article-body p{font-size:17px;line-height:1.75;margin:0 0 var(--ds-space-6);color:var(--ds-ink)}
.article-body p.lead{font-size:var(--ds-text-lg);font-family:var(--ds-font-display)}
.article-body h2{font-size:var(--ds-display-3);margin:var(--ds-space-12) 0 var(--ds-space-4);text-wrap:balance}
.article-body h3{font-family:var(--ds-font-display);font-weight:400;text-transform:none;letter-spacing:0;font-size:var(--ds-text-xl);line-height:1.25;margin:var(--ds-space-8) 0 var(--ds-space-3)}
.article-body h2 .num{display:block;font-family:var(--ds-font-mono);font-size:var(--ds-text-xs);letter-spacing:var(--ds-meta-tracking);text-transform:uppercase;color:var(--ds-accent);margin-bottom:var(--ds-space-2)}
.article-body ul,.article-body ol{margin:0 0 var(--ds-space-6);padding-left:1.4rem;font-size:17px;line-height:1.7}
.article-body li{margin-bottom:var(--ds-space-2)}
.article-body li::marker{color:var(--ds-accent)}
.article-body img{display:block;width:100%;height:auto;margin:var(--ds-space-8) auto;border:1px solid var(--ds-line-soft)}
.article-body blockquote{margin:var(--ds-space-8) 0;padding:0 0 0 var(--ds-space-6);border-left:2px solid var(--ds-accent);font-size:var(--ds-text-lg)}
.article-body blockquote p{font-family:var(--ds-font-display);font-style:italic;font-size:var(--ds-text-xl);line-height:1.5;margin:0 0 var(--ds-space-3)}
.article-body blockquote cite{display:block;font-family:var(--ds-font-ui);font-style:normal;font-size:var(--ds-meta-size);letter-spacing:var(--ds-meta-tracking);text-transform:uppercase;color:var(--ds-ink-secondary)}
.article-body sup{font-size:11px;font-family:var(--ds-font-mono);padding:0 1px}
.article-body sup a{color:var(--ds-accent);text-decoration:none}
.article-body sup a:hover{text-decoration:underline}
.article-body .table-wrap{overflow-x:auto;margin:var(--ds-space-8) 0;max-width:100%;border-top:1px solid var(--ds-line);border-bottom:1px solid var(--ds-line)}
.article-body table,.compare-table{width:100%;border-collapse:collapse;font-size:var(--ds-text-sm);line-height:1.5;margin:0}
.compare-table{margin:var(--ds-space-8) 0}
.article-body thead th,.compare-table thead th{text-align:left;padding:var(--ds-space-3) var(--ds-space-4);font-family:var(--ds-font-ui);font-size:var(--ds-meta-size);letter-spacing:var(--ds-meta-tracking);text-transform:uppercase;color:var(--ds-ink-secondary);border-bottom:1px solid var(--ds-line);white-space:nowrap}
.article-body td,.compare-table tbody td{padding:var(--ds-space-3) var(--ds-space-4);border-bottom:1px solid var(--ds-line-soft);vertical-align:top}
.article-body tbody tr:last-child td,.compare-table tbody tr:last-child td{border-bottom:none}
.compare-table tbody td:first-child{font-weight:600}

/* boxed blocks: flat panels, a rule on the left — never a card with a shadow */
.definition-block,.key-takeaways,.symptom-checklist,.glass-blog,.aeo-summary,.crisis-block,.citations,.disclaimer,.disclaimer-block,.educational-disclaimer,.foot-cta,.end-cta,.series-nav{
  background:var(--ds-panel);border:1px solid var(--ds-line-soft);border-radius:var(--ds-radius);padding:var(--ds-space-6);margin:var(--ds-space-8) 0}
.definition-block,.aeo-summary,.crisis-block{border-left:3px solid var(--ds-accent)}
.definition-block .term,.key-takeaways .label,.symptom-checklist .label,.aeo-summary .label{font-family:var(--ds-font-ui);font-size:var(--ds-meta-size);letter-spacing:var(--ds-meta-tracking);text-transform:uppercase;font-weight:600;color:var(--ds-accent);margin:0 0 var(--ds-space-3)}
.definition-block .text{font-family:var(--ds-font-display);font-style:italic;font-size:var(--ds-text-lg);line-height:1.5;margin:0}
.key-takeaways ul{margin:0;padding:0;list-style:none}
.key-takeaways li{padding:var(--ds-space-2) 0 var(--ds-space-2) 1.4rem;position:relative;line-height:1.6}
.key-takeaways li::before{content:"→";position:absolute;left:0;color:var(--ds-accent)}
.symptom-checklist ol{margin:0;padding:0;list-style:none;counter-reset:crit}
.symptom-checklist li{counter-increment:crit;padding:var(--ds-space-3) 0 var(--ds-space-3) 2.4rem;position:relative;line-height:1.55;border-bottom:1px solid var(--ds-line-soft)}
.symptom-checklist li:last-child{border-bottom:none}
.symptom-checklist li::before{content:counter(crit,decimal-leading-zero);position:absolute;left:0;top:var(--ds-space-3);font-family:var(--ds-font-mono);font-size:var(--ds-text-xs);color:var(--ds-accent)}

.faq{margin:var(--ds-space-10) 0;border-top:1px solid var(--ds-line)}
.faq details{border-bottom:1px solid var(--ds-line)}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-4);min-height:var(--ds-touch-min);padding:var(--ds-space-4) 0;font-family:var(--ds-font-ui);font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--ds-font-mono);color:var(--ds-accent);font-size:1.25rem}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0;padding:0 0 var(--ds-space-6);font-size:var(--ds-text-base);line-height:1.65}
.faq h3{margin:var(--ds-space-6) 0 var(--ds-space-2)}
.faq-item{border-top:1px solid var(--ds-line);padding:var(--ds-space-4) 0}
.faq-question{font-family:var(--ds-font-ui);font-weight:600;margin:0 0 var(--ds-space-2)}
.faq-answer p{margin-bottom:var(--ds-space-3)}

.citations h3{font-family:var(--ds-font-display);font-weight:400;text-transform:none;letter-spacing:0;font-size:var(--ds-text-lg);margin:0 0 var(--ds-space-4)}
.citations ol,.footnotes ol{margin:0;padding:0 0 0 1.5rem;font-size:var(--ds-text-xs);line-height:1.6;color:var(--ds-ink-secondary)}
.citations li{margin-bottom:var(--ds-space-2)}
.footnotes{margin-top:var(--ds-space-12);padding-top:var(--ds-space-6);border-top:1px solid var(--ds-line)}
.data-footnote-backref{text-decoration:none}
.disclaimer,.disclaimer-block,.educational-disclaimer{font-size:var(--ds-text-sm);line-height:1.6;color:var(--ds-ink-secondary);font-style:italic}
.disclaimer p{margin:0 0 var(--ds-space-3)}
.disclaimer p:last-child{margin-bottom:0}
.disclaimer strong{color:var(--ds-ink);font-style:normal}

.foot-cta,.end-cta{border-top:2px solid var(--ds-line-strong);border-bottom:2px solid var(--ds-line-strong);border-left:0;border-right:0;border-radius:0;background:none;padding:var(--ds-space-12) 0;margin-top:var(--ds-space-12);text-align:center}
.foot-cta h2,.end-cta h2{font-size:var(--ds-display-3);margin:0 0 var(--ds-space-3)}
.foot-cta p,.end-cta p{max-width:var(--ds-prose-max);margin:0 auto var(--ds-space-6)}
.foot-cta .session-detail,.session-detail{display:block;font-family:var(--ds-font-ui);font-size:var(--ds-text-xs);color:var(--ds-ink-secondary);margin-top:var(--ds-space-4)}

.series-nav{font-size:var(--ds-text-sm)}
.series-nav a{color:var(--ds-accent)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* figures and inline diagrams */
.figure,figure.dgm,.pillar-graphic{margin:var(--ds-space-10) 0;padding:var(--ds-space-6);border:1px solid var(--ds-line);background:var(--ds-panel)}
.figure svg{display:block;width:100%;height:auto}
.figure svg text{paint-order:stroke fill;stroke:var(--ds-panel);stroke-width:3px;stroke-linejoin:round;font-weight:600;fill:var(--ds-ink)}
.figure svg text[opacity]{opacity:1!important}
.figure figcaption,figure.dgm figcaption{font-family:var(--ds-font-ui);font-size:var(--ds-text-xs);color:var(--ds-ink-secondary);margin-top:var(--ds-space-4);line-height:1.55}
.figure figcaption .source{display:block;margin-top:var(--ds-space-1)}
figure.dgm .dgm-cap{font-family:var(--ds-font-ui);font-size:var(--ds-meta-size);letter-spacing:var(--ds-meta-tracking);text-transform:uppercase;color:var(--ds-accent);margin:0 0 var(--ds-space-4)}
.dgm-engine{display:grid;gap:var(--ds-space-4)}
.dgm-core{text-align:center;padding:var(--ds-space-4);border:1px dashed var(--ds-line);background:var(--ds-accent-surface)}
.dgm-core .lbl,.dgm-arm .arena,.dgm-step .n{font-family:var(--ds-font-mono);font-size:var(--ds-text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--ds-accent);display:block;margin-bottom:var(--ds-space-1)}
.dgm-core .fuel{font-family:var(--ds-font-display);font-style:italic;font-size:var(--ds-text-lg)}
.dgm-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--ds-space-4)}
.dgm-arm{padding:var(--ds-space-4);border:1px solid var(--ds-line)}
.dgm-arm.communal{border-color:var(--ds-error)}
.dgm-arm.communal .arena{color:var(--ds-error)}
.dgm-arm h4{margin:0 0 var(--ds-space-1);text-transform:none;letter-spacing:0;font-size:var(--ds-text-sm);color:var(--ds-ink)}
.dgm-arm ul{margin:0;padding:0;list-style:none}
.dgm-arm li{font-family:var(--ds-font-display);font-style:italic;font-size:var(--ds-text-sm);padding:var(--ds-space-1) 0;border-bottom:1px solid var(--ds-line-soft)}
.dgm-arm li:last-child{border-bottom:none}
.dgm-gap{display:grid;gap:var(--ds-space-4)}
.dgm-bar-row .bar-lbl{font-size:var(--ds-text-sm);margin-bottom:var(--ds-space-2);display:flex;justify-content:space-between}
.dgm-bar-row .bar-lbl span{font-family:var(--ds-font-mono);font-size:var(--ds-text-xs);color:var(--ds-accent)}
.dgm-track{height:30px;background:var(--ds-ground-alt);border:1px solid var(--ds-line);overflow:hidden}
.dgm-fill{height:100%;display:flex;align-items:center;padding-left:var(--ds-space-3);font-family:var(--ds-font-mono);font-size:var(--ds-text-xs);color:var(--ds-on-accent);font-weight:600}
.dgm-fill.self{width:94%;background:var(--ds-accent)}
.dgm-fill.peer{width:31%;background:var(--ds-error)}
.dgm-loop{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.dgm-step{position:relative;padding:var(--ds-space-4);border:1px solid var(--ds-line);margin-right:var(--ds-space-6)}
.dgm-step:last-child{margin-right:0}
.dgm-step p{margin:0;font-size:var(--ds-text-xs);line-height:1.45}
.dgm-step::after{content:"→";position:absolute;right:-18px;top:50%;transform:translateY(-50%);color:var(--ds-accent)}
.dgm-step:last-child::after{content:"↻";right:-2px;top:-16px;transform:none}
@media (max-width:47.5rem){
  .dgm-split,.dgm-loop{grid-template-columns:1fr}
  .dgm-step{margin-right:0;margin-bottom:var(--ds-space-6)}
  .dgm-step::after{content:"↓";right:50%;top:auto;bottom:-19px;transform:translateX(50%)}
  .dgm-step:last-child::after{content:"↻";right:50%;bottom:-19px;top:auto}
}
@media (max-width:37.99rem){
  .article-header{padding:var(--ds-space-8) 0 var(--ds-space-6)}
  .article-body p{font-size:16.5px}
  .definition-block,.key-takeaways,.symptom-checklist,.citations,.glass-blog{padding:var(--ds-space-4)}
}

/* ── CTA blocks are centred ──────────────────────────────────────────────
   The 2026-09-03 restyle rewrote this file and set `.foot-cta{text-align:left}`,
   where the pre-restyle rule was `text-align:center` (8ffbbd5, the posts' inline
   <style>). On 129 posts the end-of-post CTA therefore sat hard left inside a
   full-width, rule-topped band that reads as a centred feature block — measured
   at 1280: 0px of gap on the left, 262px on the right. The rule above is now
   centred again; these two lines centre the block-level children the button and
   copy sit in. Alignment only: nothing here changes a size or a spacing. */
.foot-cta>*,.end-cta>*{margin-inline:auto}
.foot-cta .session-detail,.end-cta .session-detail{text-align:center}

/* ── the article column is one centred measure ──────────────────────────
   THE root cause of "the CTAs are off-centre". `.article-body` carried
   `max-width: var(--ds-prose-max)` with no auto margins, inside a 1120px
   `.shell` — measured at 1280: the 608px prose column sat 104px from the left
   and 568px from the right, while `.article-header` above it spanned the full
   1072px. Everything inside the body inherited that offset, the end-of-post CTA
   included, so a centred CTA still looked pushed left. Pre-restyle there was no
   max-width on `.article-body` at all: the column was the 880px `.shell`,
   centred, and the measure came from `p{max-width:62ch}` (8ffbbd5).
   One rule puts the header, the body and everything in them on the same centred
   column. */
.article-header,.article-body{max-width:var(--ds-prose-max);margin-inline:auto}
