/* Blog layout (Ramp-style structure, Canopy look). Loaded only by /blog/ pages. */
.wrapx { width: 92%; max-width: 1200px; margin: 0 auto; }
.blog-index, .blog-post { padding-bottom: 72px; }
/* ---------- covers: photo + serif cover line, scales with its card ---------- */
.cover { position: relative; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: #24382a; container-type: inline-size; }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.cover::after { content: ""; position: absolute; inset: 0; }
.cover.dark::after { background: linear-gradient(180deg, rgba(12,26,18,.18), rgba(12,26,18,.58)); }
.cover.light::after { background: linear-gradient(180deg, rgba(245,244,234,.42), rgba(245,244,234,.7)); }
.cover.plain::after { display: none; }   /* featured slides: photo only, the title sits beside it */
.cv-line { position: absolute; z-index: 1; left: 9%; right: 9%; top: 50%; transform: translateY(-50%); text-align: center;
  font-family: var(--serif); font-weight: 560; font-size: 7.4cqw; line-height: 1.08; letter-spacing: -0.02em; }
.cover.dark .cv-line { color: #f5f4ea; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.cover.light .cv-line { color: #263420; }
/* ---------- cards ---------- */
.bgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.bcard { display: block; text-decoration: none; color: var(--ink); }
.bcard:hover .cover img { transform: scale(1.04); }
.bcard .bk { display: block; margin-top: 16px; font-size: 10.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--forest); }
.bcard h3 { margin: 6px 0 6px; font-family: var(--serif); font-weight: 560; font-size: 20px; line-height: 1.22; color: var(--ink); }
.bcard p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bcard:hover h3 { color: var(--forest-deep); }
/* ---------- index ---------- */
.bi-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 56px 0 18px; }
.bi-head h1 { margin: 0; font-size: clamp(40px, 6vw, 68px); letter-spacing: -0.02em; }
.bi-search { display: flex; align-items: center; gap: 8px; width: min(320px, 100%); padding: 11px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; }
.bi-search svg { width: 16px; height: 16px; flex: 0 0 auto; stroke: var(--ink-faint); fill: none; stroke-width: 2; }
.bi-search input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--ink); width: 100%; }
.bi-cats { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 30px; }
.bi-cats a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; }
.bi-cats a:hover { border-color: var(--forest); color: var(--forest-deep); }
.bi-feature { position: relative; }
.bi-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 26px; }
.bi-track::-webkit-scrollbar { display: none; }
.bi-slide { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 44px; align-items: center;
  padding: 44px; border-radius: 26px; text-decoration: none; color: var(--ink);
  background: radial-gradient(90% 90% at 0% 0%, rgba(255,254,249,.95), rgba(255,254,249,.7) 45%, rgba(233,235,223,.6)), #e9ebdf url("greenbg.webp") center / cover no-repeat; }
.bi-slide .bk { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--forest); }
.bi-slide h2 { margin: 12px 0 14px; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.06; letter-spacing: -0.015em; }
.bi-slide p { margin: 0 0 22px; color: var(--ink-soft); font-size: 16px; }
.bi-slide:hover h2 { color: var(--forest-deep); }
.bi-pager { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.bi-dots { display: flex; gap: 8px; flex: 1; }
.bi-dots button { flex: 1; max-width: 70px; height: 3px; border: 0; border-radius: 2px; background: rgba(38,52,32,.16); cursor: pointer; padding: 0; }
.bi-dots button.on { background: var(--forest); }
.bi-arrow { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; font-size: 16px; line-height: 1; }
.bi-arrow:hover { border-color: var(--forest); }
.bi-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 44px 0 64px; }
.bi-news { padding: 30px 32px; border-radius: 22px; color: #f5f4ea; background: radial-gradient(ellipse at 15% 10%, rgba(120,180,140,.25), transparent 55%), linear-gradient(150deg, #2b4432, #1a2b20 60%, #142018); }
.bi-news h2 { margin: 0 0 6px; font-size: 26px; color: #f5f4ea; }
.bi-news p { margin: 0 0 18px; color: rgba(245,244,234,.78); font-size: 14.5px; }
.bi-compare { position: relative; display: block; overflow: hidden; padding: 30px 32px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--ink); min-height: 190px; }
.bi-compare h2 { margin: 0 0 6px; font-size: 26px; max-width: 60%; }
.bi-compare p { margin: 0 0 16px; font-size: 14.5px; color: var(--ink-soft); max-width: 58%; }
.bi-compare .go { font-size: 14px; font-weight: 600; color: var(--forest-deep); }
.bi-compare img { position: absolute; right: -24px; bottom: -18px; width: 44%; height: auto; border-radius: 12px; box-shadow: 0 18px 40px rgba(30,45,28,.22); transform: rotate(-4deg); transition: transform .4s ease; }
.bi-compare:hover img { transform: rotate(-2deg) translateY(-4px); }
.bi-sec { margin-bottom: 64px; scroll-margin-top: 100px; }
.bi-sechead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; }
.bi-sechead h2 { margin: 0; font-size: clamp(26px, 3vw, 34px); }
.bi-sechead span { font-size: 13px; color: var(--ink-faint); }
.bi-empty { padding: 40px 0 60px; color: var(--ink-soft); }
/* ---------- launch-email form (index card + post rail) ---------- */
.nf { display: flex; gap: 8px; }
.nf input[type=email] { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 999px; border: 1px solid rgba(245,244,234,.25); background: rgba(255,255,255,.95); font: inherit; font-size: 14px; color: var(--ink); }
.nf button { padding: 11px 18px; border: 0; border-radius: 999px; background: #efe9d3; color: var(--ink); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; }
.nf button:hover { background: #fff; }
.nf .hp { position: absolute; left: -9999px; }
.nf-done { font-weight: 600; }
.bp-promo .nf { flex-direction: column; }
.bp-promo .nf input[type=email] { border-color: var(--line); }
.bp-promo .nf button { background: var(--forest); color: #fff; }
.bp-promo .nf button:hover { background: var(--forest-deep); }
/* ---------- post ---------- */
.bp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 56px; align-items: center; padding: 48px 0 44px; }
.bp-crumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-faint); margin-bottom: 22px; }
.bp-crumbs a { color: var(--ink-soft); text-decoration: none; } .bp-crumbs a:hover { color: var(--forest-deep); }
.bp-date { font-size: 13px; color: var(--ink-faint); margin-bottom: 12px; }
.bp-hero h1 { margin: 0 0 24px; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.06; letter-spacing: -0.02em; }
.bp-author { display: flex; align-items: center; gap: 12px; }
.bp-av { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; background: var(--forest); color: #fff; font-weight: 700; font-size: 14px; }
.bp-av img { width: 100%; height: 100%; object-fit: cover; }
.bp-av-img { background: #f5f4ea; box-shadow: inset 0 0 0 1px rgba(30,45,28,.12); }
.bp-av-img img { transform: scale(1.22); }   /* crop past the icon's rounded corners */
.bp-author b { display: block; font-size: 14px; font-weight: 600; } .bp-author span { font-size: 13px; color: var(--ink-faint); }
.bp-hero .cover { border-radius: 24px; box-shadow: 0 30px 60px rgba(30,45,28,.16); }
.bp-rule { border-top: 1px solid var(--line); }
.bp-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 72px; padding-top: 44px; }
.bp-rail { position: relative; }
.bp-rail-in { position: sticky; top: 108px; display: grid; gap: 28px; }
.bp-share { display: flex; gap: 8px; }
.bp-share a, .bp-share button { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; padding: 0; }
.bp-share a:hover, .bp-share button:hover { border-color: var(--forest); color: var(--forest-deep); }
.bp-share svg { width: 16px; height: 16px; fill: currentColor; }
.bp-share button svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bp-share .copied { border-color: var(--forest); background: var(--forest); color: #fff; }
.bp-toc .h { font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink); margin-bottom: 10px; }
.bp-toc a { display: block; padding: 6px 0 6px 12px; border-left: 2px solid var(--line); font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); text-decoration: none; }
.bp-toc a:hover { color: var(--ink); }
.bp-toc a.on { border-left-color: var(--forest); color: var(--ink); font-weight: 600; }
.bp-promo { padding: 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(30,45,28,.08); }
/* the promo screenshot sits in a small drawn laptop */
.mini-mac { margin: 6px 10px 18px; }
.mm-screen { aspect-ratio: 16 / 10; overflow: hidden; background: #1d211e; border: 6px solid #1d211e; border-bottom-width: 8px; border-radius: 9px 9px 3px 3px; box-shadow: 0 12px 26px rgba(30,45,28,.16); }
.mm-screen img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
.mm-base { position: relative; height: 7px; margin: 0 -12px; border-radius: 1px 1px 8px 8px; background: linear-gradient(180deg, #e3e5df, #a7aba4); }
.mm-base::after { content: ""; position: absolute; left: 50%; top: 0; width: 20%; height: 3px; transform: translateX(-50%); border-radius: 0 0 4px 4px; background: rgba(0,0,0,.16); }
.bp-promo .pt { font-family: var(--serif); font-weight: 560; font-size: 19px; line-height: 1.2; margin-bottom: 6px; }
.bp-promo p { font-size: 13px; margin: 0 0 12px; }
.bp-promo .pl { display: block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--forest-deep); text-decoration: none; }
.bp-body { max-width: 700px; }
.bp-body .lede { margin-top: 0; }
.bp-body h2 { scroll-margin-top: 100px; }
.bp-body .also { margin-top: 36px; padding: 18px 20px; border-radius: 14px; background: rgba(38,52,32,.045); }
.bp-body .also b { display: block; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 6px; color: var(--ink); }
.bp-body .also a { display: block; padding: 4px 0; font-weight: 600; text-decoration: none; }
.bp-more { margin-top: 72px; }
.bp-more h2 { margin: 0 0 24px; font-size: clamp(26px, 3vw, 34px); }
@media (max-width: 1000px) {
  .bp-grid { grid-template-columns: 1fr; gap: 0; }
  .bp-rail { order: 2; margin-top: 40px; }
  .bp-rail-in { position: static; }
  .bp-toc { display: none; }
  .bp-share { order: -1; }
}
@media (max-width: 860px) {
  .bi-slide, .bp-hero { grid-template-columns: 1fr; gap: 26px; }
  .bi-slide { padding: 24px; }
  .bi-slide .cover { order: -1; }
  .bp-hero .bp-cover { order: -1; }
  .bp-hero .cover { order: -1; }
  .bp-hero { padding-top: 28px; }
  .bgrid { grid-template-columns: 1fr 1fr; gap: 22px; }
  .bi-duo { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .bi-head { flex-direction: column; align-items: flex-start; padding-top: 36px; }
  .bi-search { width: 100%; }
  .bgrid { grid-template-columns: 1fr; }
  .bi-compare h2, .bi-compare p { max-width: 100%; }
  .bi-compare { padding-bottom: 150px; }
  .bi-compare img { width: 62%; }
  .nf { flex-direction: column; }
}

/* featured slides show the product shot; credits under post covers */
.bi-fig .shot { margin: 0; box-shadow: 0 24px 50px rgba(30,45,28,.18); }
.bi-fig .shot .switcher { padding: 10px; gap: 7px; }
.bi-fig .shot .win { width: 118px; padding: 5px; gap: 4px; }
.bi-fig .shot .thumb { height: 74px; }
.bi-fig .shot .win .t { font-size: 10px; } .bi-fig .shot .win .d { font-size: 9px; }
.bi-fig .shot .win:nth-child(5) { display: none; }
.bp-credit { margin: 10px 4px 0; font-size: 12px; color: var(--ink-faint); text-align: right; }
.bp-credit a { color: inherit; }
@media (max-width: 860px) { .bi-fig { order: -1; } .bp-cover { order: -1; } .bp-credit { text-align: left; } }
@media (max-width: 600px) { .bi-fig .shot .win { width: 86px; } .bi-fig .shot .thumb { height: 52px; } .bi-fig .shot .sw-head { display: none; } }

/* Category pages, and View all on the index */
.bi-sechead h2 a { color: inherit; text-decoration: none; }
.bi-sechead h2 a:hover { color: var(--forest-deep); }
.bi-sechead .va { font-size: 14px; font-weight: 600; color: var(--forest-deep); text-decoration: none; white-space: nowrap; }
.bi-sechead .va:hover { text-decoration: underline; }
.blog-index:not(.searching) .bcard.xtra { display: none; }
.bi-cats a[aria-current="page"] { background: var(--forest-deep); border-color: var(--forest-deep); color: #fff; }
.blog-cat .bp-crumbs { margin: 8px 0 18px; }
.blog-cat .bi-head { align-items: flex-end; }
.bi-lede { margin: 12px 0 0; max-width: 640px; font-size: 18px; line-height: 1.55; color: var(--ink-soft); }
.bi-num { font-size: 13px; color: var(--ink-faint); white-space: nowrap; }
.blog-cat .bgrid { margin-bottom: 64px; }
.bi-news-wide { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 64px; }
.bi-news-wide h2 { margin-top: 0; }
.bi-news-wide .nf { flex: 0 1 460px; }
@media (max-width: 760px) { .bi-news-wide { flex-direction: column; align-items: stretch; } .bi-news-wide .nf { flex-basis: auto; } }

/* Callouts: the fine-print notes in posts (disclosures, gentle notes, tips) */
.bp-note { display: flex; gap: 14px; align-items: flex-start; margin: 26px 0; padding: 16px 20px 16px 16px; border-radius: 18px;
  background: #eaf1e4; border: 1px solid rgba(56,133,86,.22); box-shadow: 0 6px 18px rgba(30,45,28,.06); }
.bp-note-ic { flex: 0 0 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #fff;
  font-size: 19px; line-height: 1; box-shadow: 0 2px 6px rgba(30,45,28,.10); }
.bp-note b { display: block; margin: 1px 0 3px; font-size: 11.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--forest-deep); }
.bp-note p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.bp-note-care { background: #f8efd9; border-color: rgba(190,140,40,.28); }
.bp-note-care b { color: #8a5f12; }
.bp-note-research { background: #e8eef3; border-color: rgba(60,100,140,.22); }
.bp-note-research b { color: #33587a; }
.bp-note-tip { background: #f3f1e4; border-color: rgba(38,52,32,.14); }
.bp-note-tip b { color: #6b5d1d; }
.bp-note-draft { background: #fbf3dc; border: 1px dashed rgba(160,120,30,.5); box-shadow: none; }
.bp-note-draft b { color: #8a5f12; }
.bi-slide .bp-note, .bcard .bp-note { display: none; }
@media (max-width: 560px) { .bp-note { gap: 12px; padding: 14px 16px 14px 12px; } .bp-note-ic { flex-basis: 32px; height: 32px; font-size: 16px; } }

.bp-note-ic svg { display: block; }

/* In-post figures: four cards fit on one row inside the 700px column */
.bp-body .shot .switcher { padding: 12px; gap: 9px; }
.bp-body .shot .win { width: 128px; padding: 6px; gap: 5px; }
.bp-body .shot .thumb { height: 80px; }
@media (max-width: 640px) { .bp-body .shot .win { width: 96px; } .bp-body .shot .thumb { height: 60px; } }