/* Clean Page Press blog (BOOK-72): the blog index, category and search views, and the single post.
   Brand tokens come from cpp.css (body.cpp). Brief: bookdesk/site/BRIEF-book72-blog.md. */

/* ---------- index: hero ---------- */
:root body.cpp .blog-hero { padding: clamp(2.5rem, 5vw, 4.25rem) 0; }
/* BOOK-73: one column that may shrink; an auto column took the search row's intrinsic width (314 px) and the page
   scrolled sideways 10 px at 320 */
:root body.cpp .bh-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; align-items: end; }
:root body.cpp .bh-h1 { font-size: clamp(2.5rem, 5.4vw, 4.75rem); font-weight: 800; font-stretch: 90%; line-height: 1; letter-spacing: -.028em; margin: 0 0 .4em; color: #fff; text-wrap: balance; }
:root body.cpp .bh-copy .lede { margin: 0; color: var(--dark-soft); }
/* BOOK-79: the line of service links under the lede, body size, links in the Ink field's link style */
:root body.cpp .bh-copy .bh-more { margin: .9rem 0 0; max-width: 34em; color: var(--dark-soft); }
:root body.cpp .bh-up { margin: 0 0 .75rem; font-size: var(--fs-label); font-weight: 600; }
:root body.cpp .bh-search label { display: block; font-size: var(--fs-label); font-weight: 600; margin-bottom: .4rem; color: #fff; }
:root body.cpp .bs-row { display: flex; gap: .5rem; }
:root body.cpp .bh-search input { flex: 1; min-width: 0; min-height: 48px; padding: .6rem .9rem; font: inherit; font-size: 1.0625rem; color: #fff; background: var(--ink-2); border: 1px solid var(--field-stroke); border-radius: 12px; }
:root body.cpp .bh-search input:focus { outline: 2px solid var(--green-on-ink); outline-offset: 2px; border-color: var(--green-on-ink); }
:root body.cpp .bh-search .btn { width: auto; margin: 0; min-height: 48px; }
@media (min-width: 900px) {
  :root body.cpp .bh-grid { grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); gap: 3rem; }
}

/* ---------- index: categories ---------- */
:root body.cpp .blog-cats ul { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; margin: 0; padding: 1.25rem 0; border-bottom: 1px solid var(--rule); }
:root body.cpp .blog-cats a { display: inline-block; padding: .35rem 0; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 3px solid transparent; }
:root body.cpp .blog-cats a:hover { border-bottom-color: var(--rule); }
:root body.cpp .blog-cats a[aria-current] { border-bottom-color: var(--green); }

/* ---------- index: featured post and cards ---------- */
:root body.cpp .blog-feed { padding-top: clamp(2rem, 4vw, 3.25rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
:root body.cpp .feat-link, :root body.cpp .pc-link { display: grid; color: var(--ink); text-decoration: none; border-radius: var(--radius-card); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
:root body.cpp .feat-link:hover, :root body.cpp .pc-link:hover { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--ink); color: var(--ink); }
:root body.cpp .feat-link:focus-visible, :root body.cpp .pc-link:focus-visible { outline-offset: 4px; }
:root body.cpp .feat-img, :root body.cpp .pc-img { background: var(--ink); border-radius: var(--radius-card); overflow: hidden; display: flex; align-items: center; justify-content: center; }
:root body.cpp .feat-img img, :root body.cpp .pc-img img { width: 100%; height: 100%; object-fit: contain; }
:root body.cpp .pc-img { aspect-ratio: 3 / 2; }
:root body.cpp .feat-img { aspect-ratio: 9 / 7; }
:root body.cpp .pc-none { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; background: var(--green); --pil: #fff; font-size: 4rem; }
:root body.cpp .pc-cat { margin: 0 0 .35rem; font-size: var(--fs-label); font-weight: 600; color: var(--green); }
:root body.cpp .feat-body { padding: 1.25rem 0 0; }
:root body.cpp .feat-title { font-size: clamp(1.875rem, 3.2vw, 2.75rem); font-weight: 800; font-stretch: 90%; line-height: 1.05; letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: balance; }
:root body.cpp .feat-ex { font-size: var(--fs-lede); line-height: 1.38; margin: 0 0 .9em; }
:root body.cpp .pc-meta { margin: 0; font-size: var(--fs-label); color: var(--ink-soft); }
:root body.cpp .pc-meta .by { font-weight: 600; color: var(--ink); }
@media (min-width: 900px) {
  :root body.cpp .feat-link { grid-template-columns: 55% minmax(0, 1fr); gap: 2.5rem; align-items: center; }
  :root body.cpp .feat-body { padding: 0; }
}
:root body.cpp .feed-h { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; font-stretch: 90%; letter-spacing: -.012em; margin: clamp(2.5rem, 5vw, 4rem) 0 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
:root body.cpp .pc-grid { display: grid; gap: 2.25rem 1.75rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { :root body.cpp .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { :root body.cpp .pc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
:root body.cpp .pc-link { align-content: start; }
:root body.cpp .pc-body { padding: 1rem .25rem .5rem; }
:root body.cpp .pc-title { font-size: 1.5rem; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .45em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
:root body.cpp .pc-ex { margin: 0 0 .7em; font-size: 1.0625rem; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:root body.cpp .blog-empty { padding: 3rem 0; }
:root body.cpp .be-h { font-size: 1.5rem; font-weight: 700; margin: 0 0 .5rem; }
/* BOOK-102: the pager wraps. Without it the 7 to 9 links of /blog/page/2/ and later (Newer, numbers, Older) ran past a
   390 px screen by 51 to 155 px, so the whole page slid sideways while the reader scrolled down */
:root body.cpp .blog-pages ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 3rem 0 0; }
:root body.cpp .blog-pages a, :root body.cpp .blog-pages span { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; padding: 0 .75rem; border-radius: 10px; font-weight: 600; }
:root body.cpp .blog-pages .current { background: var(--ink); color: #fff; }
/* BOOK-79: two lines after the list (about page, prices), ruled off like the "More guides" heading */
:root body.cpp .feed-more { max-width: 38rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.25rem; border-top: 1px solid var(--rule); }
:root body.cpp .feed-more p { margin: 0 0 .6em; }
:root body.cpp .feed-more p:last-child { margin-bottom: 0; }

/* ---------- the Green offer band (index and post end) ---------- */
:root body.cpp .blog-band { padding: clamp(3rem, 6vw, 5rem) 0; }
:root body.cpp .band-grid { display: grid; gap: 1.5rem; align-items: center; }
:root body.cpp .band-h { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; font-stretch: 90%; line-height: 1.02; letter-spacing: -.022em; margin: 0; color: #fff; text-wrap: balance; }
:root body.cpp .band-act p { margin: 0 0 1rem; color: #fff; }
:root body.cpp .band-btns { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
:root body.cpp .band-btns .btn { width: auto; margin: 0; }
:root body.cpp .band-btns .tlink { color: #fff; }
@media (min-width: 900px) { :root body.cpp .band-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; } }

/* ---------- single post: header ---------- */
:root body.cpp .post-head { padding-top: clamp(1.75rem, 4vw, 3rem); }
:root body.cpp .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 1.25rem; padding: 0; font-size: var(--fs-label); font-weight: 600; }
:root body.cpp .crumbs li + li::before { content: "/"; margin-right: .35rem; color: var(--ink-soft); }
:root body.cpp .post-h1 { font-size: clamp(2.25rem, 4.5vw, 3.75rem); font-weight: 800; font-stretch: 90%; line-height: 1.03; letter-spacing: -.025em; margin: 0 0 .5em; max-width: 90%; text-wrap: balance; }
:root body.cpp .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0 0 1.75rem; font-size: var(--fs-label); color: var(--ink-soft); }
:root body.cpp .post-meta .by { font-weight: 600; color: var(--ink); }
:root body.cpp .pm-mark, :root body.cpp .ab-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--green); --pil: #fff; font-size: 15px; }
:root body.cpp .pm-mark .pil, :root body.cpp .ab-mark .pil { margin: 0; }
:root body.cpp .post-hero { margin: 0 auto clamp(2rem, 4vw, 3rem); }
:root body.cpp .post-hero img { width: 100%; max-width: calc(220px + 4rem + 31.5em);   /* the rail, the gap and the text column */ aspect-ratio: 16 / 9; object-fit: contain; background: var(--ink); border-radius: var(--radius-card); }
@media (max-width: 759px) { :root body.cpp .post-hero img { aspect-ratio: auto; height: auto; max-height: 560px; } }   /* phones show the featured image at its own ratio, no letterbox; 4:5 posts capped at 560px tall (BOOK-86, art director 15796) */

/* ---------- single post: body column with the contents rail ---------- */
:root body.cpp .post-grid { display: grid; gap: 1.5rem; padding-bottom: clamp(3rem, 6vw, 4.5rem); }   /* also .wrap: same edges as the header */
:root body.cpp .post-grid > .e-con-inner, :root body.cpp .post-grid > .elementor-element { min-width: 0; }
@media (min-width: 1024px) {
  :root body.cpp .post-grid { grid-template-columns: 220px minmax(0, 31.5em); gap: 4rem; justify-content: start; align-items: start; }
  :root body.cpp .post-grid .w-toc { position: sticky; top: 6rem; }
}
:root body.cpp .toc-box { border: 1px solid var(--rule); border-radius: var(--radius-card); padding: .75rem 1rem; background: var(--paper); }
:root body.cpp .toc-box summary { cursor: pointer; font-weight: 700; min-height: 32px; display: flex; align-items: center; }
:root body.cpp .toc-box ol { list-style: none; margin: .5rem 0 0; padding: 0; counter-reset: toc; }
:root body.cpp .toc-box li a { display: block; padding: .4rem 0 .4rem .85rem; margin-left: -1rem; border-left: 3px solid transparent; font-size: 1rem; line-height: 1.3; color: var(--ink); text-decoration: none; }
:root body.cpp .toc-box li a:hover { color: var(--green); text-decoration: underline; }
:root body.cpp .toc-box li a[aria-current] { border-left-color: var(--green); color: var(--green); font-weight: 600; }
@media (min-width: 1024px) {
  :root body.cpp .toc-box { border: 0; padding: 0; }
  :root body.cpp .toc-box summary { padding-left: calc(.85rem + 3px); pointer-events: none; list-style: none; font-size: var(--fs-label); color: var(--ink-soft); }
  :root body.cpp .toc-box summary::-webkit-details-marker { display: none; }
  :root body.cpp .toc-box li a { margin-left: 0; }
}

/* the text itself: 19 px at a 34em measure */
:root body.cpp .post-body { font-size: 1.1875rem; line-height: 1.6; max-width: 31.5em; }   /* 19 px; 31.5em measures 64 to 68 characters a line in Bricolage */
:root body.cpp .post-body p, :root body.cpp .post-body li { max-width: none; }
:root body.cpp .post-body .post-lede { font-size: var(--fs-lede); line-height: 1.42; }
:root body.cpp .post-body h2 { font-size: 2rem; font-weight: 700; line-height: 1.12; letter-spacing: -.012em; margin: 1.5em 0 .5em; scroll-margin-top: 6rem; text-wrap: balance; }
:root body.cpp .post-body h3 { font-size: 1.5rem; font-weight: 700; line-height: 1.2; margin: 1.5em 0 .4em; }
:root body.cpp .post-body ul, :root body.cpp .post-body ol { padding-left: 1.25em; margin: 0 0 1em; }
:root body.cpp .post-body li { margin-bottom: .35em; }
:root body.cpp .post-body a { color: var(--green); text-decoration: underline; }
:root body.cpp .post-body hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5em 0 1.5em; }
:root body.cpp .post-body em { color: var(--ink-soft); }
:root body.cpp .post-body code { font-size: .9em; background: var(--green-tint); padding: .05em .3em; border-radius: 4px; }
:root body.cpp .post-body .tbl { max-width: min(46em, 100%); overflow-x: auto; margin: 0 0 1.5em; }
:root body.cpp .post-body table { border-collapse: collapse; width: 100%; font-size: 1.0625rem; line-height: 1.4; }
:root body.cpp .post-body th, :root body.cpp .post-body td { text-align: left; vertical-align: top; padding: .55rem .75rem .55rem 0; border-bottom: 1px solid var(--rule); }
:root body.cpp .post-body th { font-weight: 700; border-bottom: 2px solid var(--ink); }

/* the one in-post call to action */
:root body.cpp .post-cta { margin: 2em 0; padding: 1.5rem 1.5rem 1.25rem; background: var(--ink); color: #fff; border-radius: var(--radius-card); }
:root body.cpp .post-cta .pcta-line { font-size: 1.25rem; font-weight: 700; line-height: 1.3; margin: 0 0 1rem; color: #fff; }
:root body.cpp .post-cta .pcta-act { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin: 0; }
:root body.cpp .post-cta .btn { width: auto; margin: 0; text-decoration: none; color: var(--ink); }
:root body.cpp .post-cta .pcta-price { font-size: var(--fs-label); color: var(--dark-soft); text-wrap: balance; }   /* BOOK-96: no lone word on the second line */
:root body.cpp .post-cta :focus-visible { outline-color: var(--hl); }

/* ---------- author box and related posts ---------- */
:root body.cpp .author-box { padding-top: clamp(2.5rem, 5vw, 3.5rem); }
:root body.cpp .ab-in { display: flex; gap: 1rem; align-items: flex-start; max-width: 46em; margin: 0 auto; padding: 1.5rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
:root body.cpp .ab-mark { width: 56px; height: 56px; font-size: 32px; }
:root body.cpp .ab-name { font-weight: 700; margin: 0 0 .2rem; }
:root body.cpp .ab-line { margin: 0 0 .4rem; font-size: 1.0625rem; max-width: 36em; }
:root body.cpp .ab-links { margin: 0; font-size: var(--fs-label); font-weight: 600; }
:root body.cpp .related { padding-bottom: clamp(3rem, 6vw, 5rem); }
:root body.cpp .related .feed-h { margin-top: clamp(2rem, 4vw, 3rem); }

@media (prefers-reduced-motion: reduce) {
  :root body.cpp .feat-link, :root body.cpp .pc-link { transition: none; }
  :root body.cpp .feat-link:hover, :root body.cpp .pc-link:hover { transform: none; }
}