/* The blog's own styles (Oct 23, 2026; cards reworked Oct 24, 2026; green edge, gold frame, shadow and desktop hover added later on Oct 24). Loaded only by the blog's pages: /blog/, the category pages, each post and blog/_template.html, after site.css. No other page links this file, so nothing here can change the home page, founding, mba, contact, terms or privacy. */

/* ---------- The list pages: /blog/ and the category pages ---------- */

.blog-top { --frame: #f8f1df; background: var(--soft); } /* --frame: a very pale wash of brand gold #c9a24a, behind every card picture */
.blog-top .k a { color: inherit; text-decoration: none; }
.blog-top .k a:hover { text-decoration: underline; }
.blog-top .k::before,
.posts.blog-grid .pc-text .cat::before,
.post-cat::before { content: ""; display: inline-block; width: 22px; height: 2px; margin: 0 10px 0 0; vertical-align: middle; background: var(--gold); position: relative; top: -1px; }
.blog-h1 { font: 800 clamp(36px, 6.2vw, 64px)/1.04 Montserrat, sans-serif; letter-spacing: -.024em; margin: 0 0 22px; max-width: 900px; text-wrap: balance; }
.blog-top .lede { font-size: clamp(17px, 1.6vw, 19px); max-width: 640px; }
.blog-cats { margin-top: 40px; }
.blog-cats a { background: #fff; }

/* One card for every post, the newest first. Words on the left, the picture on the right in a pale gold frame. A brand-green edge down the left of every card. On a phone: words first, the picture under them.
   A card's line (see blog/_template.html for the copy to paste):
   <li><a href="/blog/ADDRESS"><span class="pc-img" style="--pos: 0% 0%; --pos-phone: 0% 0%; --zoom-phone: 1.6"><img src="/blog/images/PHOTO.webp" width="1600" height="1000" alt="…" decoding="async" /></span><span class="pc-text">…</span></a></li>
   --pos is the part of the picture to keep on a computer (left/right %, top/bottom %). --pos-phone and --zoom-phone are the same for a phone: the picture is enlarged by --zoom-phone around --pos-phone, so a screenshot's words stay readable. All three are optional. */
.posts.blog-grid,
.blog-cats + .posts.blog-grid { max-width: none; grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 28px; margin-top: 48px; }
@media (min-width: 768px) { .posts.blog-grid, .blog-cats + .posts.blog-grid { gap: 40px; margin-top: 64px; } }

/* The green edge is an inset shadow, so it follows the card's rounded corners; the soft shadow under it lifts the card off the grey page. */
.posts.blog-grid > li { --edge: inset 5px 0 0 #01a263; grid-column: auto; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: var(--edge), 0 1px 3px rgba(1, 34, 61, .06), 0 12px 32px rgba(1, 34, 61, .08); transform: none; transition: transform .18s ease, box-shadow .18s ease; }
/* site.css lifts a card on any hover, phones included; here the lift is for a computer with a mouse only. */
.posts.blog-grid > li:hover { transform: none; box-shadow: var(--edge), 0 1px 3px rgba(1, 34, 61, .06), 0 12px 32px rgba(1, 34, 61, .08); }
@media (hover: hover) and (min-width: 900px) {
  .posts.blog-grid > li:hover,
  .posts.blog-grid > li:focus-within { box-shadow: var(--edge), 0 2px 6px rgba(1, 34, 61, .08), 0 20px 44px rgba(1, 34, 61, .13); }
}
@media (hover: hover) and (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .posts.blog-grid > li:hover { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) { .posts.blog-grid > li, .posts.blog-grid > li:hover { transform: none; transition: none; } }
.posts.blog-grid > li > a { display: flex; flex-direction: column; border-radius: 24px; }
.posts.blog-grid > li > a:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }

/* The words */
.posts.blog-grid > li .pc-text { order: 1; display: flex; flex-direction: column; flex: 1; padding: 28px 24px 24px; }
.posts.blog-grid > li .pc-text .cat { margin: 0 0 12px; }
.posts.blog-grid > li .pc-text b { display: block; margin: 0 0 14px; font: 800 clamp(26px, 2.4vw, 36px)/1.14 Montserrat, sans-serif; letter-spacing: -.024em; color: var(--navy); text-wrap: balance; }
.posts.blog-grid > li .pc-text .pc-ex { display: block; overflow: visible; -webkit-line-clamp: unset; line-clamp: none; max-width: 560px; font: 500 17px/1.65 Montserrat, sans-serif; color: var(--body); }
.posts.blog-grid > li .pc-text time { display: block; margin: 20px 0 0; padding: 0; font-size: 13px; color: var(--slate); }
.posts.blog-grid > li .pc-text .pc-read { display: inline-block; align-self: flex-start; margin-top: 18px; font: 700 16px/1.3 Montserrat, sans-serif; color: var(--green-text); }
.posts.blog-grid > li > a:hover .pc-text b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.posts.blog-grid > li > a:hover .pc-read { text-decoration: underline; }

/* The picture, in its frame. The frame is a thick pale gold border; the picture is clipped inside it. */
.posts.blog-grid > li .pc-img { order: 2; position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; margin: 0 14px 14px; border: 14px solid var(--frame); border-radius: 16px; background: var(--frame); }
.posts.blog-grid > li .pc-img > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border: 0; border-radius: 0; object-fit: cover; object-position: var(--pos-phone, var(--pos, 50% 50%)); transform: scale(var(--zoom-phone, 1)); transform-origin: var(--pos-phone, var(--pos, 50% 50%)); }
/* An older card line with the photo straight in the link, no frame span: framed with padding instead. */
.posts.blog-grid > li > a > img { order: 2; width: auto; height: auto; aspect-ratio: 4 / 3; margin: 0 14px 14px; padding: 14px; border: 0; border-radius: 16px; background: var(--frame); object-fit: cover; object-position: 50% 0; }
/* A post with no photo: the title card (class="pc-type"), on the same side as a photo. */
.posts.blog-grid > li.pc-type > a > .pc-panel { order: 2; aspect-ratio: auto; min-height: 220px; margin: 0 14px 14px; padding: 28px; border: 0; border-radius: 16px; border-left: 3px solid var(--gold); background: var(--frame); }
.posts.blog-grid > li.pc-type > a > .pc-panel b { font-size: clamp(22px, 2.2vw, 30px); }

@media (min-width: 768px) {
  .posts.blog-grid > li > a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); min-height: 400px; }
  .posts.blog-grid > li .pc-text { grid-column: 1; grid-row: 1; justify-content: center; padding: 48px 44px 48px 48px; }
  .posts.blog-grid > li .pc-img,
  .posts.blog-grid > li > a > img,
  .posts.blog-grid > li.pc-type > a > .pc-panel { grid-column: 2; grid-row: 1; aspect-ratio: auto; height: auto; min-height: 340px; margin: 18px 18px 18px 0; }
  .posts.blog-grid > li .pc-img,
  .posts.blog-grid > li > a > img { align-self: center; aspect-ratio: 16 / 10; min-height: 0; }
  .posts.blog-grid > li .pc-img { border-width: 28px; border-radius: 18px; }
  .posts.blog-grid > li .pc-img > img { object-position: var(--pos, 50% 50%); transform: scale(var(--zoom, 1)); transform-origin: var(--pos, 50% 50%); }
  .posts.blog-grid > li > a > img { width: 100%; height: auto; padding: 28px; border-radius: 18px; }
}
@media (min-width: 1200px) { .posts.blog-grid > li .pc-text { padding: 56px 52px 56px 60px; } }

/* ---------- A post's own page ---------- */

.post-h1 { font: 800 clamp(32px, 5.2vw, 52px)/1.08 Montserrat, sans-serif; letter-spacing: -.024em; margin: 0 0 24px; text-wrap: balance; }
.post-cat { display: block; margin: 0 0 16px; }
.post-meta { display: flex; align-items: center; gap: 12px; position: relative; margin: 0 0 40px; padding: 0 0 28px; border-bottom: 1px solid var(--hair); font-size: 14px; }
.post-meta::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 48px; height: 2px; background: var(--gold); }
.post-meta .post-av { width: 36px; height: 36px; flex: none; border-radius: 50%; object-fit: cover; }
.post-hero img { border-radius: 24px; box-shadow: 0 18px 48px rgba(1, 34, 61, .08); }
.post-body img { border-radius: 16px; box-shadow: 0 0 0 1px var(--hair), 0 14px 36px rgba(1, 34, 61, .06); }

/* Round 2 (#109, Oct 30, 2026): no tan frame. The picture sits inside the white card with a thin light border and rounded corners. */
.blog-top { --frame: #fff; }
.posts.blog-grid > li .pc-img { border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.posts.blog-grid > li > a > img { padding: 0; border: 1px solid var(--line); background: #fff; }
.posts.blog-grid > li.pc-type > a > .pc-panel { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--gold); }
@media (min-width: 768px) {
  .posts.blog-grid > li .pc-img { border-width: 1px; border-radius: 16px; margin: 28px 28px 28px 0; }
  .posts.blog-grid > li > a > img { padding: 0; }
}
.posts-empty a { color: var(--green-text, #0a7a4f); }
/* Kelly, Nov 1, 2026: two-tone blog headline like every other; its line under it on one line from 1280. */
.blog-h1 .g { color: var(--green); }
@media (min-width: 1280px) { .blog-top .lede { max-width: none; white-space: nowrap; } }

/* G1 (Nov 2, 2026, overnight): no one-word last lines */
main p, main li { text-wrap: pretty; }
main h1, main h2, main h3 { text-wrap: balance; }