/* =================================================================
   MARK TALKS HEALTH — BLOG
   Oct 30: a calm, Substack-style reading page. Dark ink type on a near-white
   page, one narrow column, thin rules, small square photos in the list and
   one small photo tucked into the middle of each article.
   Sits on top of mth.css (header, footer, palette). Pages are drawn by
   assets/blog-render.mjs.
================================================================= */
body.blog{background:#fdfbf8}
.bl-wrap{max-width:700px;margin:0 auto;padding:40px 22px 70px;color:var(--ink)}
.bl-wrap a{color:inherit}

/* ---------- the blog home ---------- */
.bl-home{text-align:center;padding:10px 0 8px}
.bl-logo{width:56px;height:56px;border-radius:12px;display:block;margin:0 auto 14px}
.bl-name{font-family:var(--serif);font-weight:600;font-size:clamp(34px,6vw,44px);line-height:1.05;letter-spacing:-.01em;margin:0;color:var(--ink)}
.bl-tag{font-size:16px;line-height:1.55;color:var(--muted);margin:10px auto 0;max-width:470px}
.bl-by{font-size:13px;color:var(--faint);margin:12px 0 0}
.bl-sec{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:26px 0 0;padding-bottom:10px;border-bottom:1px solid var(--line)}

/* one post in a list: words on the left, small square photo on the right */
.bl-list{display:block}
.bl-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:start;padding:22px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.bl-item .bl-tx{display:flex;flex-direction:column;gap:6px;min-width:0}
.bl-item b{font-family:var(--sans);font-weight:700;font-size:19px;line-height:1.3;letter-spacing:-.005em;color:var(--ink)}
.bl-item .bl-sum{font-size:15px;line-height:1.5;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bl-item .bl-d{font-size:12.5px;color:var(--faint);letter-spacing:.01em}
.bl-item:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.bl-th{width:112px;height:112px;border-radius:6px;object-fit:cover;display:block;background:var(--bg2);flex:none}
@media(max-width:520px){.bl-item{gap:14px;padding:18px 0}.bl-item b{font-size:17px}.bl-th{width:84px;height:84px}.bl-item .bl-sum{font-size:14px}}

/* ---------- an article ---------- */
.bl-meta{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px}
.bl-meta a{color:var(--faint);text-decoration:none}
.bl-meta a:hover{color:var(--ink)}
.bl-t{font-family:var(--serif);font-weight:600;font-size:clamp(36px,6.2vw,50px);line-height:1.06;letter-spacing:-.012em;margin:0 0 12px;color:var(--ink)}
.bl-sub{font-size:19px;line-height:1.5;color:var(--muted);margin:0 0 22px}
.bl-author{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 0 30px}
.bl-av{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;background:var(--bg2)}
.bl-author div{display:flex;flex-direction:column;gap:1px;font-size:14px;line-height:1.35}
.bl-author b{font-weight:600;color:var(--ink)}
.bl-author span{color:var(--faint);font-size:13px}

/* the study: one tiny line — a little blue PubMed card and the study in a sentence */
.bs{display:flex;align-items:center;gap:9px;margin:0 0 26px;min-width:0}
.bs-pm{flex:none;display:inline-block;background:#20558a;color:#fff;font:700 10.5px/1 Arial,Helvetica,sans-serif;letter-spacing:.02em;padding:5px 7px;border-radius:4px}
.bs-one{min-width:0;font-size:13.5px;line-height:1.35;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bs-one b{font-weight:600;color:var(--ink);margin-right:2px}
@media(max-width:520px){.bs{gap:7px;margin-bottom:22px}.bs-pm{font-size:9.5px;padding:4px 6px}.bs-one{font-size:12.5px}}

/* the words: a calm reading serif */
.bl-body{font-family:Charter,"Bitstream Charter","Iowan Old Style","Sitka Text",Cambria,Georgia,serif}
.bl-body p{font-size:20px;line-height:1.7;color:#2f2925;margin:0 0 1.15em}
.bl-body a{color:var(--terra);text-underline-offset:3px}
.bl-body::after{content:"";display:table;clear:both}
@media(max-width:520px){.bl-body p{font-size:18.5px;line-height:1.68}}

/* the small photo tucked into the middle of the article */
.bl-fig{float:right;width:min(42%,270px);margin:6px 0 14px 24px}
.bl-fig img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;box-shadow:0 1px 2px rgba(43,39,36,.08)}
@media(max-width:520px){.bl-fig{width:44%;margin:5px 0 10px 16px}}

/* end of the article */
.bl-go{clear:both;margin:30px 0 0;font-size:17px}
.bl-go a{color:var(--terra);font-weight:600;text-decoration:none}
.bl-go a:hover{text-decoration:underline}
.bl-more{margin-top:52px}
.bl-more .bl-sec{margin-top:0}
.bl-all{display:inline-block;margin-top:16px;font-weight:600;font-size:15px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.bl-foot{margin-top:40px;padding-top:16px;border-top:1px solid var(--line)}
.bl-src{font-size:13px;color:var(--muted);line-height:1.5;margin:0}
.bl-src a{color:var(--muted);text-decoration:underline}
.bl-fine{font-size:12.5px;color:var(--faint);margin:14px 0 0;line-height:1.5}
.bl-empty{color:var(--muted);padding:30px 0}