/* Blog listing and single post. */

.bl-wrap{max-width:1180px;margin:0 auto;padding:34px 20px 20px}
.bl-wrap--single{max-width:820px}

.bl__head{margin:0 0 26px}
.bl__title{font-size:clamp(1.8rem,4vw,2.7rem);margin:0 0 8px;line-height:1.1}
.bl__lead{margin:0;color:var(--col-muted);max-width:620px}
.bl__empty{color:var(--col-muted)}
.bl__empty a{color:var(--col-accent-text);font-weight:700}

.bl__grid{display:flex;flex-wrap:wrap;gap:18px;margin:0 0 30px}
.bl-card{flex:0 1 calc(33.333% - 12px);min-width:0;display:flex}
.bl-card__link{
  display:flex;flex-direction:column;width:100%;text-decoration:none;
  background:var(--col-white);border:1px solid var(--col-border);
  border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-card);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)
}
.bl-card__link:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.bl-card__media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--col-cream)}
.bl-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.bl-card__body{display:flex;flex-direction:column;gap:7px;padding:16px 17px 18px}
.bl-card__date{font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--col-muted)}
.bl-card__title{font-family:var(--font-display);font-weight:700;font-size:1.12rem;color:var(--col-heading);line-height:1.25}
.bl-card__excerpt{font-size:.92rem;color:var(--col-text);line-height:1.6}

/* single */
.bl-post__title{font-size:clamp(1.8rem,4vw,2.6rem);margin:0 0 8px;line-height:1.12}
.bl-post__date{display:block;color:var(--col-muted);font-size:.88rem;margin:0 0 22px}
.bl-post__media{margin:0 0 26px}
.bl-post__media img{width:100%;height:auto;border-radius:var(--radius-card);display:block}
.bl-post__body{font-size:1.03rem;line-height:1.8}
.bl-post__body p{margin:0 0 18px}
.bl-post__body h2{margin:34px 0 12px;font-size:1.45rem}
.bl-post__body h3{margin:26px 0 10px;font-size:1.2rem}
.bl-post__body ul,.bl-post__body ol{margin:0 0 18px;padding-left:22px}
.bl-post__body li{margin:0 0 8px}
.bl-post__body img{max-width:100%;height:auto;border-radius:12px}
.bl-post__body a{color:var(--col-accent-text);font-weight:600}

@media (max-width:900px){
  .bl-card{flex:0 1 calc(50% - 9px)}
}
@media (max-width:640px){
  .bl-wrap{padding:22px 16px 16px}
  .bl-card{flex:0 1 100%}
  .bl__grid{gap:14px}
}

/* --- article furniture: lead paragraph, table of contents, tables --------- */

.bl-post__intro{font-size:1.12rem;line-height:1.7;color:var(--col-heading);font-weight:500}

.bl-toc{margin:26px 0 30px;padding:18px 22px;background:var(--col-band);border:1px solid var(--col-border);border-radius:var(--radius-card)}
.bl-toc__title{margin:0 0 10px;font-weight:800;font-size:.95rem;letter-spacing:.02em;color:var(--col-heading)}
.bl-toc ol{margin:0;padding-left:20px}
.bl-toc li{margin:0 0 6px;line-height:1.5}
.bl-toc a{color:var(--col-accent-text);font-weight:600;text-decoration:none}
.bl-toc a:hover,.bl-toc a:focus-visible{text-decoration:underline}

/* Anchored headings must clear the sticky header when jumped to. */
.bl-post__body h2[id],.bl-post__body h3[id]{scroll-margin-top:90px}

/* A table is the one block that can force the page to scroll sideways on a
   phone, so it scrolls inside its own box instead. */
.bl-table{margin:0 0 22px;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--col-border);border-radius:var(--radius-card)}
.bl-table table{border-collapse:collapse;width:100%;min-width:560px;font-size:.95rem}
.bl-table th,.bl-table td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--col-border)}
.bl-table thead th{background:var(--col-band);font-weight:800;color:var(--col-heading)}
.bl-table tbody tr:last-child td{border-bottom:0}
.bl-table td:first-child{font-weight:700;white-space:nowrap}

/* In-article figures. */
.bl-post__fig{margin:26px 0 24px}
.bl-post__fig img{display:block;width:100%;height:auto;border-radius:var(--radius-card)}
.bl-post__fig figcaption{margin:9px 2px 0;font-size:.88rem;line-height:1.5;color:var(--col-muted)}