/* ==========================================================================
   NDF — single article extras (post.html body area): type label, byline,
   caption, rich body, tags, author box, related. Site tokens only.
   ========================================================================== */

/* the article column is not a hover card */
#post:hover{ background:var(--paper); }
#post::before{ display:none; }

.post-kicker{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.post-type{
  display:inline-block; padding:3px 8px; border:1px solid currentColor;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
}
#post[data-type="opinion"] .post-type, #post[data-type="analysis"] .post-type{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.post-byline{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
.post-byline a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.post-byline a:hover{ color:var(--stamp); }
.post-byline-sep{ color:var(--ink-3); }
.post-fig-cap{ padding:10px 0 0; font-family:var(--mono); font-size:12px; line-height:1.5; color:var(--ink-3); }
#post .post-fig{ background:transparent; }
#post .post-fig img{ background:var(--rule-soft); }

/* rich body (md.js output). site.css's card rule `.post p` (15.5px, light, ink-2) also matches this article
   column (#post is a .post): body paragraphs and quotes take the body's own size, weight and ink, as in Editorial */
#post .post-body > p, #post .post-body blockquote p{ font-size:inherit; font-weight:inherit; color:inherit; }
.post-body h3{ font-size:clamp(19px,2vw,23px); margin-top:1.4em; }
.post-body h3 + p{ margin-top:.6em; }
.post-body ul, .post-body ol{ padding-left:1.3em; margin:1em 0; }
.post-body li + li{ margin-top:.35em; }
.post-body blockquote{ margin:1.5em 0; padding:0 0 0 var(--s3); border-left:3px solid var(--stamp); font-family:var(--display); font-size:1.12em; font-style:italic; color:var(--ink-2); }
.post-body blockquote p{ margin:0; }
.post-body figure{ margin:1.8em 0; }
.post-body figure img, .post-body > img, .post-body p > img{ display:block; width:100%; height:auto; background:var(--rule-soft); }
.post-body figcaption{ font-family:var(--mono); font-size:12px; line-height:1.5; color:var(--ink-3); margin-top:8px; }
.post-body a{ color:var(--stamp); text-decoration:underline; text-underline-offset:3px; }
.post-body a:hover{ text-decoration-thickness:2px; }
.post-body p, .post-body li{ overflow-wrap:break-word; }
.post-body > * + ul, .post-body > * + blockquote, .post-body > * + figure{ margin-top:1.2em; }

/* tags */
.post-tags{ margin-top:var(--s4); display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; }
.post-tags ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.post-tag{ display:inline-block; font-family:var(--mono); font-size:12px; padding:4px 10px; border:1px solid var(--rule); color:var(--ink-2); background:var(--ground); }
.post-tag::before{ content:"#"; color:var(--ink-3); }
.post-tag:hover, .post-tag:focus-visible{ border-color:var(--stamp); color:var(--stamp); }

/* author box */
.post-author{
  margin-top:var(--s4); padding:var(--s3); display:grid; grid-template-columns:96px minmax(0,1fr); gap:var(--s3);
  background:var(--ground); border:1px solid var(--rule-soft); border-top:3px solid var(--ink);
}
.post-author-photo{ position:relative; width:96px; height:96px; border-radius:50%; overflow:hidden; background:var(--paper-2); border:1px solid var(--rule); display:block; }
.post-author-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.post-author-ph{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--display); font-size:30px; color:var(--ink-3); }
.post-author-info{ min-width:0; }
.post-author-info .eyebrow{ margin:0; }
.post-author-name{ font-size:24px; line-height:1.2; margin:4px 0 2px; }
.post-author-name a:hover{ color:var(--stamp); }
.post-author-role{ margin:0; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); }
.post-author-bio{ margin:10px 0 0; font-size:16px; line-height:1.55; color:var(--ink-2); }
.post-author-links{ margin-top:12px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.post-author-social{ width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--rule); color:var(--ink-2); background:var(--paper); }
.post-author-social svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.post-author-social:hover, .post-author-social:focus-visible{ background:var(--stamp); border-color:var(--stamp); color:var(--stamp-ink); }
.post-author-more{ margin-left:auto; }

/* related */
.post-related{ padding-top:0; }
.post-related .section-head{ border-top:2px solid var(--ink); padding-top:var(--s3); }
.post-related .art-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.post-rel-by{ margin-top:auto; color:var(--ink-3); font-size:11px; }
@media (max-width:1080px){ .post-related .art-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){
  .post-related .art-grid{ grid-template-columns:1fr; }
  .post-author{ grid-template-columns:64px minmax(0,1fr); gap:var(--s2); padding:var(--s2); }
  .post-author-photo{ width:64px; height:64px; }
  .post-author-ph{ font-size:22px; }
  .post-author-more{ margin-left:0; flex-basis:100%; }
}

/* credits (post.js): the "Updated" line under the byline, and the credits list after the tags */
.post-updated{ margin:var(--s2) 0 0; padding:8px 12px; border-left:3px solid var(--stamp); background:var(--ground);
  font-size:14px; line-height:1.5; color:var(--ink-2); overflow-wrap:break-word; }
.post-updated strong{ font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin-right:4px; }
.post-credits{ margin-top:var(--s4); padding-top:var(--s2); border-top:1px solid var(--rule); }
.post-credits .eyebrow{ margin:0 0 8px; }
.post-credits dl{ margin:0; display:grid; gap:6px; }
.post-credit{ display:grid; grid-template-columns:minmax(110px,max-content) minmax(0,1fr); gap:4px 16px; align-items:baseline; }
.post-credit dt{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.post-credit dd{ margin:0; font-size:15px; color:var(--ink); overflow-wrap:anywhere; }
.post-credit a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.post-credit a:hover{ color:var(--stamp); }
@media (max-width:620px){ .post-credit{ grid-template-columns:1fr; gap:0; } }

/* justified article text (settings 'site'.text, "justify" by default; html[data-text="left"] keeps it ragged):
   the body's own paragraphs and list items only, so headings, quotes, captions and the notes stay left.
   A paragraph holding a web address stays ragged too (post.js .post-ragged), or the line above it would gape. */
html:not([data-text="left"]) .post-body > p,
html:not([data-text="left"]) .post-body > ul > li,
html:not([data-text="left"]) .post-body > ol > li{
  text-align:justify; -webkit-hyphens:auto; hyphens:auto; hyphenate-limit-chars:6 3 3; text-wrap:pretty;
}
html:not([data-text="left"]) .post-body .post-ragged{ text-align:left; -webkit-hyphens:manual; hyphens:manual; }
.post-body a.post-url{ word-break:break-all; }

/* the closing notes (post.js wraps the "Notes" / "References" heading and all after it): smaller, ragged, set
   apart by a rule; the heading becomes a quiet label */
.post-notes{ margin-top:var(--s5); padding-top:var(--s3); border-top:1px solid var(--rule); font-size:15px; line-height:1.6; color:var(--ink-2); }
.post-body .post-notes > h2, .post-body .post-notes > h3, .post-body .post-notes > h4{
  margin:0 0 var(--s2); font-family:var(--mono); font-size:11.5px; font-weight:500; line-height:1.4;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
.post .post-notes p, .post .post-notes li{
  font-size:15px; line-height:1.6; color:var(--ink-2); text-align:left; -webkit-hyphens:manual; hyphens:manual; overflow-wrap:anywhere;
}
.post-body .post-notes p + p{ margin-top:.7em; }
.post-body .post-notes ul, .post-body .post-notes ol{ margin:0; padding-left:1.7em; }
.post-body .post-notes li + li{ margin-top:.55em; }
.post-notes li::marker{ font-family:var(--mono); font-size:12px; color:var(--ink-3); }
.post-notes > :not(h2):not(h3):not(h4) + h2, .post-notes > :not(h2):not(h3):not(h4) + h3{ margin-top:var(--s3); }

/* series (post.js): the kicker line "Series · <name> · Part 2 of 5", and the parts panel after the body */
/* its own row under the type and section, so it wraps as one line of text at any width */
.post-series-line{ flex-basis:100%; font-size:11px; line-height:1.6; letter-spacing:.1em; color:var(--ink-3); }
.post-series-line a{ color:var(--ink); }
.post-series-line a:hover, .post-series-line a:focus-visible{ color:var(--stamp); }
.post-series-sep{ margin:0 .5em; color:var(--ink-3); }

.post-series{
  margin-top:var(--s4); padding:var(--s3); background:var(--ground);
  border:1px solid var(--rule-soft); border-top:3px solid var(--ink);
}
.post-series .eyebrow{ margin:0; }
.post-series-head{ font-size:22px; line-height:1.25; margin:4px 0 0; }
.post-series-head a{ text-decoration:underline; text-decoration-color:var(--rule); text-decoration-thickness:1px; text-underline-offset:4px; }
.post-series-head a:hover, .post-series-head a:focus-visible{ color:var(--stamp); text-decoration-color:currentColor; }
.post .post-series-desc{ margin:8px 0 0; font-size:16px; line-height:1.55; color:var(--ink-2); }
.post-series-parts{ list-style:none; margin:var(--s2) 0 0; padding:0; border-top:1px solid var(--rule); }
.post-series-parts li{ border-bottom:1px solid var(--rule-soft); }
.post-series-row{
  display:grid; grid-template-columns:72px minmax(0,1fr); gap:2px 14px; align-items:baseline;
  padding:10px 12px 10px 11px; border-left:3px solid transparent; color:var(--ink-2);
}
.post-series-n{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
.post-series-t{ font-family:var(--display); font-size:16.5px; line-height:1.35; }
a.post-series-row:hover, a.post-series-row:focus-visible{ background:var(--paper); }
a.post-series-row:hover .post-series-t, a.post-series-row:focus-visible .post-series-t{ color:var(--stamp); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.post-series-parts .is-current .post-series-row{ border-left-color:var(--stamp); background:var(--paper); color:var(--ink); }
.post-series-parts .is-current .post-series-n{ color:var(--stamp); }
.post-series-parts .is-current .post-series-t{ font-weight:700; }
.post-series-step{ margin-top:var(--s2); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.post-series-step a{
  display:flex; flex-direction:column; gap:6px; min-width:0; padding:12px 14px;
  border:1px solid var(--rule); background:var(--paper); color:var(--ink);
}
.post-series-next{ grid-column:2; text-align:right; align-items:flex-end; }
.post-series-dir{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.post-series-dir .arw{ display:inline-block; margin:0 6px; transition:transform .2s var(--ease); }
.post-series-prev .arw{ margin-left:0; }
.post-series-next .arw{ margin-right:0; }
.post-series-step a:hover, .post-series-step a:focus-visible{ border-color:var(--stamp); }
.post-series-step a:hover .post-series-t, .post-series-step a:focus-visible .post-series-t{ color:var(--stamp); }
.post-series-prev:hover .arw{ transform:translateX(-3px); }
.post-series-next:hover .arw{ transform:translateX(3px); }
@media (max-width:620px){
  .post-series{ padding:var(--s2); }
  .post-series-head{ font-size:20px; }
  .post-series-row{ grid-template-columns:1fr; gap:2px; padding-left:9px; }
  .post-series-step{ grid-template-columns:1fr; }
  .post-series-next{ grid-column:auto; }
}
@media (prefers-reduced-motion: reduce){ .post-series-dir .arw{ transition:none; } .post-series-step a:hover .arw{ transform:none; } }