/* blog.html only. Shared parts: site.css, listing.css, article.css (see styleguide.html). */

/* hero: three tray drawings in a soft stack */
.blg-hero{margin-bottom:1rem}
.blg-hero__art{display:none;position:relative;width:15rem;height:10.5rem}
.blg-hero__art svg{position:absolute;width:7.5rem;height:auto;padding:.7rem;border-radius:22px;background:#fff;box-shadow:var(--sh-1)}
.blg-hero__art svg:nth-child(1){left:0;top:.5rem;transform:rotate(-6deg)}
.blg-hero__art svg:nth-child(2){left:6.5rem;top:0;transform:rotate(5deg)}
.blg-hero__art svg:nth-child(3){left:3.5rem;top:4.6rem;transform:rotate(-2deg)}
@media (min-width:768px){.blg-hero__art{display:block}}

.blg-topics{margin-bottom:0}
.blg-first{padding-top:clamp(1.25rem,1rem + 1vw,2rem)}

/* small section heads inside the post column */
.blg-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.2rem 1rem;margin-top:.6rem}
.blg-head:first-child{margin-top:0}
.blg-head h2{font-size:clamp(1.3rem,1.1rem + .8vw,1.65rem)}
.blg-head p{color:var(--muted);font-size:.94rem}
.rc-postlead__body .rc-btn{margin-top:.2rem}

/* "every how-to" tile closes the row grid */
.blg-rowmore{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:center;padding:.65rem .9rem .65rem .65rem;border-radius:var(--r-l);background:var(--aqua-tint);border:1px dashed var(--line-2);color:var(--ink);text-decoration:none;transition:border-color .18s}
.blg-rowmore:hover{border-color:var(--aqua);color:var(--ink)}
.blg-rowmore__ico{display:grid;place-items:center;width:3.5rem;height:3.5rem;border-radius:var(--r-m);background:#fff;color:var(--aqua-800)}
.blg-rowmore b{display:block;font:600 1rem var(--display)}
.blg-rowmore small{font-size:.875rem;color:var(--aqua-900)}
.blg-rowmore>.ic{color:var(--aqua-800)}

/* drawn card media keep the photo cards' 16:10 box */
.rc-grid .rc-card__media.rc-art>svg{width:40%;height:auto;aspect-ratio:120/96}

/* review r2: the season calendar labels ("Nov to Dec", "All year") get room for one line */
.rc-widget--season .rc-cal li{grid-template-columns:5.75rem 1fr}
.rc-widget--season .rc-cal li b{padding:0 .5rem;white-space:nowrap}
/* the yellow/cloudy explainer: the tray drawing, warmed to suggest a yellowed tray */
.blg-yellow>svg{filter:sepia(.55) saturate(1.6) hue-rotate(-8deg)}
/* tidy 2026-10-18: with the sources widget gone the two widgets end above the how-to rows, so they stay in view */
@media (min-width:1024px){.blg-first .rc-aside{position:sticky;top:6rem}}
/* review-tidy P2-5: from 1024 to 1279 px the main column is too narrow for two rows side by side */
@media (min-width:1024px) and (max-width:1279.98px){.blg-rows{grid-template-columns:minmax(0,1fr)}.blg-rows .rc-row{grid-template-columns:5.5rem 1fr}.blg-rows .rc-row img{width:5.5rem;height:5.5rem}}