/* blog.css: the article list on /blog/ and the layout of one article.
   Loads after site-v2.css and uses its tokens. */

/* ---- /blog/: one row per article, newest first, hairlines between ---- */
.post-list{ list-style:none; max-width:720px; margin:0 auto; padding:0; }
.post-item{ border-top:1px solid var(--line); }
.post-item:last-child{ border-bottom:1px solid var(--line); }
.post-link{ display:block; padding:clamp(20px,3vw,28px) 0; }
.post-date{ margin:0 0 8px; font-family:var(--font-mono); font-size:13px; color:var(--text-3); letter-spacing:.04em; }
.post-title{ margin:0 0 6px; font-size:clamp(1.2rem,1.2vw + 1rem,1.5rem); line-height:1.25; letter-spacing:-.02em; color:var(--text); }
.post-excerpt{ margin:0; color:var(--text-2); line-height:1.6; }
@media (hover:hover){ .post-link:hover .post-title{ text-decoration:underline; text-underline-offset:3px; } }
.post-link:focus-visible{ outline:2px solid var(--focus); outline-offset:4px; border-radius:6px; }
.post-empty{ max-width:720px; margin-inline:auto; }

/* ---- one article: a centered title, an optional photo, one column of text ---- */
.article-figure{ max-width:860px; margin:0 auto clamp(28px,4vw,44px); }
.article-figure img{ display:block; width:100%; height:auto; border-radius:var(--radius-lg); }
.article-figure figcaption{ margin-top:10px; font-size:.85rem; color:var(--text-3); text-align:center; }
.article-body{ max-width:720px; margin-inline:auto; }
.article-body .prose{ max-width:none; font-size:1.0625rem; }
/* .article-lead: the opening paragraph, a step larger and brighter than the rest */
.article-body .prose .article-lead{ font-size:1.2rem; line-height:1.55; color:var(--text); }
/* the foot: back to the list on the left, the original Facebook post on the right */
.article-foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  margin-top:40px; padding-top:24px; border-top:1px solid var(--line);
}
.article-back{ color:var(--text-2); }
@media (hover:hover){ .article-back:hover{ color:var(--text); } }
.article-note{ margin:24px 0 0; font-size:.85rem; line-height:1.6; color:var(--text-3); }