/* Beacon blog: reading layout for /blog/ and every post. Built on the service-page kit (pages/local.css, cta.css); it only adds what that kit lacks. */

/* hero: the service-page hero, with a headline sized for a long title */
.lp-hero.bl-hero h1 { font-size: clamp(36px, 4.6vw, 72px); line-height: .98; }
.bl-meta { margin: 18px 0 0; font: 600 14px/1.3 var(--sans); letter-spacing: .02em; color: var(--muted); }

/* the article */
.bl-post { padding: clamp(56px, 7vw, 100px) 0 clamp(36px, 5vw, 70px); }
.bl-prose { max-width: 720px; margin: 0 auto; }
.bl-prose h2 { margin: 2.1em 0 .55em; }
.bl-prose h2:first-child { margin-top: 0; }
.bl-prose p, .bl-prose li { font-size: clamp(17px, 1.25vw, 19.5px); line-height: 1.7; color: var(--ink-2); }
.bl-prose p { margin: 0 0 1.1em; }
.bl-prose ul, .bl-prose ol { margin: 0 0 1.4em; padding-left: 1.3em; }
.bl-prose li { margin: 0 0 .7em; padding-left: .25em; }
.bl-prose li::marker { color: var(--c); font-weight: 700; }
.bl-prose strong { color: var(--ink); }
.bl-prose a { color: var(--c); text-decoration: underline; text-underline-offset: 3px; }
.bl-prose a:hover { color: var(--ink); }
.bl-fig { margin: 2em 0; }
.bl-fig img { width: 100%; height: auto; border-radius: 22px; }
.bl-fig figcaption { margin-top: 10px; font: 500 14px/1.4 var(--sans); color: var(--muted); }

/* the post list: the site's own photo cards, laid out so one card does not stretch across the page */
.lp-cards.bl-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.bl-cards .lp-card { aspect-ratio: 4 / 3.3; }
.bl-cards .lp-card b { font-size: clamp(21px, 1.8vw, 26px); line-height: 1.08; }
.bl-cards .lp-card small.bl-date { font-size: 13px; letter-spacing: .04em; opacity: .7; }
.bl-related .lp-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.bl-related .lp-card { aspect-ratio: 4 / 3; }