/* blog.html: page-only parts. Uses site.css (.blog, .post-lead, .widget, .filters, .kind) and
   listing.css (.phero, .toolbar, .icards). */
.filters small{font-size:.75rem;font-weight:800;color:var(--muted)}
.filters a[aria-current] small{color:var(--glow)}

.bmain{display:grid;gap:clamp(1.75rem,1.2rem + 1.5vw,2.5rem);min-width:0}
.bgroup{min-width:0;scroll-margin-top:6rem}
.bgroup__head{display:flex;align-items:center;gap:.65rem;margin-bottom:.9rem}
.bgroup__head h2{font-size:clamp(1.25rem,1.05rem + .7vw,1.6rem)}
.bgroup__head .chip{margin-left:auto;white-space:nowrap;flex:none}
.bgroup__head h2{min-width:0}
.bgroup__ico{display:grid;place-items:center;flex:none;width:2.4rem;height:2.4rem;border-radius:12px;background:var(--ember-tint);color:var(--ember-600)}

/* featured post: the homepage's .post-lead with a short "inside" list */
.bfeat__tags{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .5rem}
.bfeat__tags .season-badge{font-size:.78rem}
.bfeat__list{display:grid;gap:.35rem;margin-top:.75rem}
.bfeat__list li{display:flex;align-items:center;gap:.45rem;font-size:.88rem;font-weight:650;color:var(--ink)}
.bfeat__list .ic{color:var(--ok)}

/* blog cards: a row on phones, a 2-up grid of photo cards from tablet up */
.bcards{display:grid;gap:.75rem}
.bcard{position:relative;display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:.85rem;align-items:start;padding:.65rem;border-radius:var(--r-m);background:#fff;box-shadow:var(--sh-1);transition:transform .2s,box-shadow .2s}
.bcard:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.bcard__media{position:relative;aspect-ratio:1;border-radius:var(--r-s);overflow:hidden;background:var(--frost)}
.bcard__media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bcard h3{margin-top:.35rem;font-size:1rem;line-height:1.26}
.bcard h3 a{text-decoration:none}
.bcard h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.bcard h3 a:hover{text-decoration:underline}
.bcard h3 a:focus-visible{outline:none}
.bcard:has(a:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.bcard__body>p:not(.bcard__meta){display:none;margin-top:.35rem;font-size:.88rem;line-height:1.5;color:var(--muted)}
.bcard__meta{display:flex;flex-wrap:wrap;gap:.25rem .8rem;margin-top:.5rem;font-size:.78rem;font-weight:650;color:var(--muted)}
.bcard__meta span{display:inline-flex;align-items:center;gap:.3rem}
.bcard__meta .ic{color:var(--ember-600)}

/* the rules strip reuses .icards from listing.css */
.bgroup--rules .icards{gap:.75rem}
@media (max-width:39.99rem){
  .bgroup--rules .icards{grid-template-columns:1fr}
  .bgroup--rules .icard{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.15rem .85rem;align-items:start}
  .bgroup--rules .icard__ico{grid-row:span 2}
  .bgroup--rules .icard h3{margin-top:0}
}
@media (min-width:40rem){.bgroup--rules .icards{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* recalls widget */
.widget--recall{border:1.5px solid #f3c4bf}
.widget--recall h3 .ic{color:var(--bad)}
.recalls{display:grid;margin-top:.5rem}
.recalls li+li{border-top:1px solid var(--line)}
.recalls a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.1rem .6rem;align-items:center;padding:.6rem 0;text-decoration:none;color:var(--ink)}
.recalls .kind{grid-row:span 2;align-self:start;margin-top:.15rem}
.recalls b{font-size:.9rem;line-height:1.3}
.recalls small{font-size:.78rem;color:var(--muted);font-weight:600}
.recalls a:hover b{text-decoration:underline}
.recalls__note{margin-top:.4rem;padding-top:.6rem;border-top:1px dashed var(--line-2);font-size:.8rem;color:var(--muted)}

/* five widgets are taller than a laptop screen: the first three scroll with the page, the last two
   (topics, newsletter) stick beside the long list on desktop */
.blog .aside{position:static}
.bcard__body>.kind{align-self:flex-start}

@media (min-width:40rem){
  .bcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
  .bcard{grid-template-columns:1fr;grid-template-rows:auto 1fr;padding:0;overflow:hidden}
  .bcard__media{aspect-ratio:16/10;border-radius:0}
  .bcard__body{display:flex;flex-direction:column;padding:.35rem 1rem 1rem}
  .bcard__body>p:not(.bcard__meta){display:block}
  .bcard__meta{margin-top:auto;padding-top:.7rem}
  .bcard h3{font-size:1.06rem}
}
@media (max-width:63.99rem){
  .aside__stick{display:contents}
}
@media (min-width:48rem) and (max-width:63.99rem){
  .blog .aside{grid-template-columns:1fr 1fr;align-items:start}
}
@media (min-width:64rem){
  .blog .aside{display:flex;flex-direction:column;gap:1rem;align-self:stretch}
  .aside__stick{position:sticky;top:5.5rem;display:grid;gap:1rem}
}
.bcard__media--low>img{object-position:50% 82%}
/* tablet: the newsletter takes the full row under the other widgets */
@media (min-width:48rem) and (max-width:63.99rem){.blog .widget--mail{grid-column:1/-1}}