/* BOOK-99: the "Guides by topic" block under the post cards on /blog/ page 1. Tokens come from cpp.css. */
:root body.cpp .blog-guides { padding-bottom: clamp(3rem, 6vw, 5rem); }
:root body.cpp .blog-guides .feed-h { margin-top: 0; }
:root body.cpp .gt-lede { max-width: 38rem; margin: 0 0 clamp(1.75rem, 3vw, 2.5rem); }
:root body.cpp .gt-grid { column-gap: 1.75rem; }
:root body.cpp .gt { break-inside: avoid; margin-bottom: 2.5rem; }
:root body.cpp .gt:last-child { margin-bottom: 0; }
:root body.cpp .gt-h { font-size: 1.25rem; font-weight: 700; line-height: 1.2; letter-spacing: -.008em; margin: 0 0 .5rem; padding-bottom: .6rem; border-bottom: 2px solid var(--ink); text-wrap: balance; }
:root body.cpp .gt-list { list-style: none; margin: 0; padding: 0; }
:root body.cpp .gt-list li { border-bottom: 1px solid var(--rule); }
:root body.cpp .gt-list a { display: block; padding: .7rem 0; min-height: 44px; color: var(--ink); text-decoration: none; line-height: 1.3; }
:root body.cpp .gt-list a:hover { color: var(--green); text-decoration: underline; }
:root body.cpp .gt-list a:focus-visible { outline-offset: 2px; }
@media (min-width: 768px) { :root body.cpp .gt-grid { columns: 2; } }
@media (min-width: 1200px) { :root body.cpp .gt-grid { columns: 3; } }