/* The blog in the site's design language: the index and cluster grids, the
   author page and the post page, drawn on the --ic-* theme tokens (global.css)
   so both themes come from the one set of rules.

   blog/index.css and blog/post.css stay: some forty templates share them,
   admin pages included, and they hold the old fixed colours. This file loads
   after them on the blog pages and wins on order and specificity. Rules that
   fight global.css's `main a { color !important }` carry !important too. */

/* ---- layout ------------------------------------------------------------- */
main.page-content .wrapper { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* ---- category filter: a row of chips ------------------------------------ */
/* a panel with a kicker, the post count, and one chip per topic showing how many posts it holds */
main.page-content .topic-rail { max-width: 1040px; margin: 0 auto 44px; padding: 18px 20px 18px; border-radius: 22px; background: var(--ic-panel); border: 1px solid var(--ic-rule); box-shadow: var(--ic-shadow-card); text-align: left; }
main.page-content .topic-rail-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 4px 14px; }
main.page-content .topic-rail-kicker { font: 700 12px/1 sans-serif; font-family: inherit; letter-spacing: .14em; text-transform: uppercase; color: var(--ic-muted); }
main.page-content .topic-rail-hint { font-size: 13px; color: var(--ic-muted); font-variant-numeric: tabular-nums; }
main.page-content #filter { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; margin: 0; }
main.page-content #filter button, main.page-content #filter button.btn-secondary {
	display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 7px 7px 14px; border-radius: 999px; min-height: 38px;
	font: 600 14px/1.1 sans-serif; font-family: inherit; letter-spacing: 0; text-transform: none;
	color: var(--ic-text); background: var(--ic-card); border: 1px solid var(--ic-rule); box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
	transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
main.page-content #filter button .chip-count { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--ic-accent-soft); color: var(--ic-accent-ink); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; transition: background .15s, color .15s; }
main.page-content #filter button:hover, main.page-content #filter button:focus-visible { color: var(--ic-accent-ink); background: var(--ic-accent-soft); border-color: var(--ic-accent-line); transform: translateY(-1px); outline: none; }
main.page-content #filter button:hover .chip-count, main.page-content #filter button:focus-visible .chip-count { background: var(--ic-card); }
main.page-content #filter button.selected, main.page-content #filter button.selected:hover { color: #fff; background: var(--ic-kicker-bg); border-color: var(--ic-kicker-bg); box-shadow: 0 10px 20px -12px var(--ic-kicker-bg); transform: none; }
main.page-content #filter button.selected .chip-count, main.page-content #filter button.selected:hover .chip-count { background: rgba(255, 255, 255, .22); color: #fff; }

/* ---- post cards: the grid, and the related-articles carousel ------------ */
main.page-content .grid.row { margin: 0 -12px; }
/* isotope animates the cards itself (js/blog/index.js); the legacy transition on the outer box would double up */
main.page-content .post-outer { padding: 0 12px 24px !important; margin: 0; background: transparent !important; transition: none; }
main.page-content .carousel-cell { margin: 10px 12px; border-radius: 0; }

main.page-content .post-inner, main.page-content .related-post-inner {
	--blob: #c4b5fd; --line: var(--ic-accent-line);
	position: relative; overflow: hidden; display: flex; flex-direction: column; height: 100%;
	background: var(--ic-card); border-radius: 22px; border: 1px solid var(--ic-rule-2); border-bottom: 5px solid var(--line);
	box-shadow: var(--ic-shadow-card); transition: transform .2s, box-shadow .2s;
}
main.page-content .post-inner::before, main.page-content .related-post-inner::before { content: ""; position: absolute; z-index: 0; right: -80px; bottom: -110px; width: 220px; height: 220px; border-radius: 50%; background: var(--blob); opacity: var(--ic-blob-opacity); pointer-events: none; transition: transform .3s; }
main.page-content .post-inner > *, main.page-content .related-post-inner > * { position: relative; z-index: 1; }
main.page-content .post-inner:hover, main.page-content .related-post-inner:hover { transform: translateY(-4px) rotate(-.3deg); box-shadow: var(--ic-shadow-hover); border-radius: 22px; }
main.page-content .post-inner:hover::before, main.page-content .related-post-inner:hover::before { transform: scale(1.1); }
/* five hues, cycling in DOM order (isotope only moves the cards on screen) */
main.page-content .post-outer:nth-child(5n+2) .post-inner, main.page-content .carousel-cell:nth-child(5n+2) .related-post-inner { --blob: var(--ic-em-line); --line: var(--ic-em-line); }
main.page-content .post-outer:nth-child(5n+3) .post-inner, main.page-content .carousel-cell:nth-child(5n+3) .related-post-inner { --blob: #fda4af; --line: var(--ic-rose-line); }
main.page-content .post-outer:nth-child(5n+4) .post-inner, main.page-content .carousel-cell:nth-child(5n+4) .related-post-inner { --blob: #fde047; --line: var(--ic-amber-line); }
main.page-content .post-outer:nth-child(5n+5) .post-inner, main.page-content .carousel-cell:nth-child(5n+5) .related-post-inner { --blob: var(--ic-sky-line); --line: var(--ic-sky-line); }

main.page-content .post-content, main.page-content .related-post-content { padding: 12px 12px 0; margin: 0 !important; }
main.page-content .post-content > a, main.page-content .related-post-content > a { display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 16px; background: var(--ic-panel) !important; }
main.page-content .post-content img, main.page-content .related-post-content img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; transition: transform .35s; }
main.page-content .post-inner:hover .post-content img, main.page-content .related-post-inner:hover .related-post-content img { transform: scale(1.03); }

main.page-content .post-title, main.page-content .related-post-title { display: block; width: auto; height: auto; min-height: 0; margin: 14px 6px 4px !important; padding: 0; border: 0; background: transparent; font-size: 17px; line-height: 1.35; font-weight: 700; text-transform: none; text-align: left; }
main.page-content .post-title a.post-link, main.page-content .related-post-title a.post-link { display: block !important; padding: 0 4px; text-align: left; color: var(--ic-ink) !important; font-weight: 700 !important; }
main.page-content .post-title a.post-link:hover, main.page-content .related-post-title a.post-link:hover { color: var(--ic-accent) !important; text-decoration: none; }

main.page-content .post-footer, main.page-content .related-post-footer { display: flex; align-items: center; gap: 10px; height: auto; margin-top: auto; padding: 12px 16px 16px; border-radius: 0; background: transparent; font-size: 13px; }
main.page-content .footer-icon, main.page-content .related-post-footer-icon { float: none; flex: 0 0 auto; width: 28px; height: 28px; margin: 0; border-radius: 50%; }
main.page-content .post-categories, main.page-content .related-post-categories { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 6px; padding: 0; min-width: 0; }
main.page-content .category, main.page-content .related-category { padding: 4px 9px; border-radius: 999px; background: var(--ic-chip); color: var(--ic-text-2); font: 600 11px/1 sans-serif; font-family: inherit; letter-spacing: .05em; text-transform: uppercase; }
main.page-content .post-meta { display: inline-block; float: none; margin: 0; padding: 0; color: var(--ic-muted); font-size: 12px; white-space: nowrap; }

/* ---- the author page ---------------------------------------------------- */
main.page-content #headshot { width: 180px; height: 180px; object-fit: cover; border-radius: 50%; border: 5px solid var(--ic-card); box-shadow: var(--ic-shadow-card); }
main.page-content .standard-para { max-width: 760px; margin: 0 auto 8px; color: var(--ic-text); font-size: 17px; line-height: 1.7; }

/* ---- the post page: one centered layout for the article and the sidebar --- */
/* The legacy layout floated the sidebar to the right edge and left the article
   at the left edge, with the gap between them growing with the screen. Here
   both sit in a centered grid: the article column, a gutter, a fixed sidebar
   column, and the footer simply follows. */
.post-layout { --side: 320px; --gutter: 40px; display: grid; grid-template-columns: minmax(0, 1fr) var(--side); column-gap: var(--gutter); align-items: start; max-width: 1280px; margin: 64px auto 0; padding: 0 16px; }
.post-layout.no-sidebar { grid-template-columns: minmax(0, 1fr); max-width: 1000px; }
.post-layout > main.page-content { grid-column: 1; grid-row: 1; width: auto; max-width: none; min-height: 0; margin: 0 !important; padding: 24px 0 40px !important; overflow: visible; }
.post-layout > main.page-content .wrapper { max-width: none; margin: 0; padding: 0; }
.post-layout > #topright-sidebar-ad { grid-column: 2; grid-row: 1; align-self: stretch; float: none; width: auto; margin: 0; padding: 24px 0 0; }
.post-layout > #topright-sidebar-ad .right-sidebar-ad-slot { margin: 0 0 16px; }
.post-layout > #topright-sidebar-ad .fix-on-scroll { position: sticky; top: 80px; }
@media only screen and (max-width: 1200px) {
	.post-layout { grid-template-columns: minmax(0, 1fr); max-width: 1000px; }
	.post-layout > #topright-sidebar-ad { grid-column: 1; grid-row: 2; padding: 0; }
}
@media only screen and (max-width: 720px) {
	.post-layout { padding: 0 8px; }
}

main.page-content .post-wrapper article { padding: 0 34px 34px; margin-bottom: 28px; min-height: 0; background: var(--ic-card); color: var(--ic-text); border: 1px solid var(--ic-rule-2); border-radius: 28px; box-shadow: var(--ic-shadow-card); }
/* width: auto, because .site-hero's calc(100% - 32px) width would leave the negative-margin hero short and off-centre */
main.page-content .post-wrapper article .hero-card.post-hero { width: auto; margin: 0 -34px 24px; border-radius: 28px 28px 0 0; }
main.page-content .post-hero .post-tagline { margin: 14px 0 0 !important; font-size: 19px !important; color: var(--ic-lead) !important; }
main.page-content .post-hero .post-tagline code { font: inherit; background: none; border: 0; padding: 0; color: inherit !important; }
/* post.css indents every paragraph and heading 3% on each side; the meta row lines up with the text instead */
main.page-content article .post-header { margin-left: 0 !important; margin-right: 0 !important; }

/* who, when, where: a row of chips under the hero */
main.page-content article .post-header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 28px; padding: 0; border: 0; overflow: visible; color: var(--ic-muted); font-size: 14px; line-height: 1.4; text-transform: none; }
main.page-content article .post-header .meta-icons { display: none; }
main.page-content article .post-header > span { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 7px 12px; border-radius: 999px; background: var(--ic-chip); color: var(--ic-text-2); font-weight: 600; }
main.page-content article .post-header .post-author::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ic-amber); box-shadow: 0 0 0 3px var(--ic-amber-soft); }
main.page-content article .post-header .post-timestamp::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--ic-rose); box-shadow: 0 0 0 3px var(--ic-rose-soft); }
main.page-content article .post-header .post-cluster { background: var(--ic-accent-soft); border: 1px solid var(--ic-accent-line); }
main.page-content article .post-header a, main.page-content article .post-header a:hover { color: inherit !important; font-weight: 600 !important; text-decoration: none; }
main.page-content article .post-header .post-cluster a { color: var(--ic-accent-ink) !important; }
main.page-content article .post-header a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* the prose */
main.page-content article .post-body { color: var(--ic-text); font-size: 17.5px; line-height: 1.75; }
main.page-content article p, main.page-content article li, main.page-content article td, main.page-content article figure, main.page-content article .post-body ul, main.page-content article ol { color: var(--ic-text) !important; }
main.page-content article h1, main.page-content article h2, main.page-content article h3, main.page-content article h4, main.page-content article h5, main.page-content article th { color: var(--ic-ink) !important; }
main.page-content article .post-body h2 { position: relative; margin: 38px 0 14px; padding: 0; border: 0; font-size: 27px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
main.page-content article .post-body h2::after { content: ""; display: block; width: 64px; height: 6px; margin-top: 10px; border-radius: 999px; background: var(--ic-em-marker); transform: rotate(-1.5deg); }
/* the personal paragraph on a command page: set apart a little, like a margin note */
main.page-content article .post-body .aside-note { margin: 0 0 25px; padding: 14px 20px; border-left: 5px solid var(--ic-accent-line); border-radius: 0 16px 16px 0; background: var(--ic-accent-soft); font-size: 16.5px; }
main.page-content article .post-body h3 { margin: 28px 0 10px; padding: 0; border: 0; font-size: 21px; line-height: 1.3; font-weight: 700; text-transform: none; }
main.page-content article .post-body h4 { margin: 22px 0 8px; font-size: 18px; font-weight: 700; }
main.page-content article .post-body li { margin-left: 26px; }
main.page-content article .post-body ol, main.page-content article .post-body ul { padding: 0 0 0 4px !important; }
main.page-content article .post-body a:not(.post-link):not(.no-highlight), main.page-content article .post-body a:not(.post-link):not(.no-highlight):visited { color: var(--ic-accent) !important; font-weight: 600 !important; text-decoration: underline; text-decoration-color: var(--ic-accent-line); text-decoration-thickness: 2px; text-underline-offset: 3px; }
main.page-content article .post-body a:not(.post-link):not(.no-highlight):hover { color: var(--ic-accent-ink) !important; text-decoration-color: currentColor; }
main.page-content article .post-body strong { color: var(--ic-ink); }
main.page-content article .post-body p.quote, main.page-content article .post-body blockquote { margin: 0 0 25px; padding: 14px 20px; border-left: 5px solid var(--ic-amber-line); border-radius: 0 16px 16px 0; background: var(--ic-amber-soft); }
main.page-content article .post-body p.callout { margin: 0 0 25px; padding: 14px 20px; border: 1px solid var(--ic-accent-line); border-radius: 16px; background: var(--ic-accent-soft); }

/* the table of contents: a quiet list in a panel */
main.page-content article .post-body #table-of-contents { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ic-muted) !important; margin: 0 0 8px; }
main.page-content article .post-body #table-of-contents::after { display: none; }
/* two columns filled top to bottom (1..n/2 on the left, the rest on the right), with quiet numbers */
main.page-content article .post-body #table-of-contents + ul { columns: 2; column-gap: 24px; counter-reset: toc; margin: 0 0 34px; padding: 16px 20px !important; border-radius: 18px; background: var(--ic-panel); border: 1px solid var(--ic-rule); }
main.page-content article .post-body #table-of-contents + ul li { counter-increment: toc; break-inside: avoid; margin: 0; padding: 5px 0 5px 30px; list-style: none; position: relative; font-size: 15.5px; line-height: 1.4; }
main.page-content article .post-body #table-of-contents + ul li::before { content: counter(toc); position: absolute; left: 0; top: 7px; min-width: 20px; text-align: right; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--ic-muted); opacity: .8; }
main.page-content article .post-body #table-of-contents + ul li a { text-decoration: none; color: var(--ic-text-2) !important; }
main.page-content article .post-body #table-of-contents + ul li a:hover { color: var(--ic-accent) !important; text-decoration: underline; }

/* code: chips inline, panels for blocks */
main.page-content article code { padding: 1px 6px; border-radius: 6px; border: 1px solid var(--ic-accent-line); background: var(--ic-accent-soft) !important; color: var(--ic-accent-ink) !important; font-size: .9em; }
main.page-content article pre:not(.file):not(.insert):not(.delete):not(.info):not(.context), main.page-content article pre[class*="language-"], main.page-content article div.highlighter-rouge { margin: 0 0 25px; padding: 14px 18px; border: 1px solid var(--ic-rule); border-radius: 16px; background: var(--ic-panel) !important; color: var(--ic-text) !important; box-shadow: none; }
main.page-content article pre > code, main.page-content article pre[class*="language-"] > code { padding: 0; border: 0; background: transparent !important; color: var(--ic-text) !important; font-size: 15px; text-shadow: none; }
main.page-content article pre[class*="language-"] .token { text-shadow: none; }
main.page-content article pre[class*="language-"] .token.operator, main.page-content article pre[class*="language-"] .token.entity, main.page-content article pre[class*="language-"] .token.url { background: none; }

/* tables */
main.page-content article table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--ic-rule); border-radius: 14px; }
main.page-content article th, main.page-content article td { padding: 9px 12px; border: 0; border-bottom: 1px solid var(--ic-rule); text-align: left; }
main.page-content article th { background: var(--ic-panel); font-weight: 700; }
main.page-content article tr:last-child td { border-bottom: 0; }

/* the image (a post without a simulation) and any figure */
main.page-content article .img-box { width: 100%; margin: 0 0 28px; padding: 12px; border-radius: 18px; background: var(--ic-panel) !important; border: 1px solid var(--ic-rule); }
main.page-content article .img-box .post-img, main.page-content article .img-container img { border-radius: 10px; }
main.page-content article .img-container { background: var(--ic-panel); border-radius: 16px; }
main.page-content article .git-sim-frame { margin-bottom: 30px; }
/* the command pages: several graphs per page (blog/post.html mounts every placeholder) */
main.page-content article .embed-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; align-items: start; margin: 0 0 8px; }
main.page-content article .embed-fig { margin: 0 0 22px; }
main.page-content article .embed-fig .git-sim-frame { margin-bottom: 8px; }
/* the before / after graphs are still pictures: no playback bar, no repeated credit line */
main.page-content article .embed-pair .git-sim-frame { position: relative; }
main.page-content article .embed-pair .git-sim-frame #bar, main.page-content article .embed-pair .git-sim-frame .frame-top, main.page-content article .embed-pair .git-sim-frame .git-sim-credit { display: none; }
main.page-content article .embed-pair .git-sim-frame #stage { padding: 14px 10px 10px; }
main.page-content article .embed-caption { margin: 0 0 26px; font-size: 14px; line-height: 1.5; color: var(--ic-muted) !important; text-align: center; }
main.page-content article .embed-fig .embed-caption { margin-bottom: 0; }
main.page-content article .embed-caption code { font-size: .92em; }
@media only screen and (max-width: 900px) { main.page-content article .embed-pair { grid-template-columns: minmax(0, 1fr); } }
/* a walk-through: numbered steps under a graph that scrub it when clicked */
main.page-content article ol.walk-steps { list-style: none; counter-reset: walk; margin: -8px 0 28px; padding: 0 !important; display: grid; gap: 8px; }
main.page-content article ol.walk-steps li { counter-increment: walk; position: relative; margin: 0; padding: 12px 16px 12px 54px; border: 1px solid var(--ic-rule); border-radius: 14px; background: var(--ic-card); cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
main.page-content article ol.walk-steps li::before { content: counter(walk); position: absolute; left: 14px; top: 11px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ic-accent-soft); color: var(--ic-accent-ink); border: 1px solid var(--ic-accent-line); font: 700 13px/1 sans-serif; font-family: inherit; }
main.page-content article ol.walk-steps li:hover { border-color: var(--ic-accent-line); background: var(--ic-accent-soft); transform: translateX(2px); }
main.page-content article ol.walk-steps li.on { border-color: var(--ic-accent); background: var(--ic-accent-soft); }
main.page-content article ol.walk-steps li.on::before { background: var(--ic-accent); color: #fff; border-color: var(--ic-accent); }
:root[data-theme="dark"] main.page-content article ol.walk-steps li.on::before { color: #1e1b4b; }
main.page-content article ol.walk-steps li:focus-visible { outline: 2px solid var(--ic-accent); outline-offset: 2px; }
main.page-content article .walk-hint { margin: -14px 0 12px !important; font-size: 13.5px; color: var(--ic-muted) !important; }
/* git-sim's pre-flight report */
main.page-content article .risk-card { --risk: var(--ic-emerald); --risk-soft: var(--ic-em-soft); --risk-line: var(--ic-em-line); margin: 0 0 28px; padding: 18px 22px 8px; border: 1px solid var(--risk-line); border-left: 6px solid var(--risk); border-radius: 18px; background: var(--risk-soft); }
main.page-content article .risk-card.risk-caution { --risk: var(--ic-amber); --risk-soft: var(--ic-amber-soft); --risk-line: var(--ic-amber-line); }
main.page-content article .risk-card.risk-destructive { --risk: var(--ic-rose); --risk-soft: var(--ic-rose-soft); --risk-line: var(--ic-rose-line); }
main.page-content article .risk-card p, main.page-content article .risk-card li { margin: 0 0 8px !important; font-size: 15.5px; line-height: 1.55; }
main.page-content article .risk-card .risk-head { display: flex; align-items: center; gap: 10px; font: 700 12px/1 sans-serif; font-family: inherit; letter-spacing: .12em; text-transform: uppercase; color: var(--ic-muted) !important; }
main.page-content article .risk-card .risk-badge { display: inline-block; padding: 6px 10px; border-radius: 999px; background: var(--risk); color: #fff; font-size: 11px; letter-spacing: .1em; }
:root[data-theme="dark"] main.page-content article .risk-card .risk-badge { color: #1e1b4b; }
main.page-content article .risk-card .risk-summary { font-size: 17px !important; font-weight: 600; color: var(--ic-ink) !important; }
main.page-content article .risk-card .risk-label { margin: 10px 0 4px !important; font: 700 11px/1 sans-serif; font-family: inherit; letter-spacing: .12em; text-transform: uppercase; color: var(--ic-muted) !important; }
main.page-content article .risk-card ul { margin: 0 0 8px; padding: 0 0 0 4px !important; }
main.page-content article .risk-card li { margin-left: 18px; }
main.page-content article .risk-card code { background: var(--ic-card) !important; }
/* the text logs, folded */
main.page-content article details.raw-logs { margin: 0 0 28px; border: 1px solid var(--ic-rule); border-radius: 16px; background: var(--ic-panel); }
main.page-content article details.raw-logs summary { padding: 12px 18px; cursor: pointer; font-weight: 600; color: var(--ic-text-2); list-style: none; }
main.page-content article details.raw-logs summary::-webkit-details-marker { display: none; }
main.page-content article details.raw-logs summary::before { content: "\25B8"; display: inline-block; width: 18px; color: var(--ic-accent); transition: transform .15s; }
main.page-content article details.raw-logs[open] summary::before { transform: rotate(90deg); }
main.page-content article details.raw-logs .raw-title { margin: 8px 18px 4px !important; font: 700 11px/1 sans-serif; font-family: inherit; letter-spacing: .12em; text-transform: uppercase; color: var(--ic-muted) !important; }
main.page-content article details.raw-logs pre { margin: 0 18px 14px !important; }
/* the before and after logs side by side, under the pair of graphs they describe; what git printed spans both */
main.page-content article details.raw-logs .raw-command { margin: 14px 18px 2px !important; text-align: center; color: var(--ic-text-2) !important; }
main.page-content article details.raw-logs .raw-command code { font-size: 13.5px; font-weight: 600; padding: 4px 10px; border-radius: 8px; background: var(--ic-accent-soft); color: var(--ic-accent-ink); }
main.page-content article details.raw-logs .raw-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
main.page-content article details.raw-logs .raw-pair .raw-title { text-align: center; }
main.page-content article details.raw-logs .raw-pair + .raw-title { margin-top: 22px !important; padding-top: 16px; border-top: 1px solid var(--ic-rule); }
main.page-content article details.raw-logs .raw-pair .raw-title { margin-right: 0 !important; }
main.page-content article details.raw-logs .raw-pair .raw-title + pre { margin-right: 0 !important; }
main.page-content article details.raw-logs .raw-pair .raw-cell:last-child .raw-title { margin-left: 0 !important; }
main.page-content article details.raw-logs .raw-pair .raw-cell:last-child pre { margin-left: 0 !important; }
main.page-content article details.raw-logs .raw-pair pre { min-height: calc(100% - 26px); }
@media only screen and (max-width: 900px) { main.page-content article details.raw-logs .raw-pair { grid-template-columns: minmax(0, 1fr); } main.page-content article details.raw-logs .raw-pair .raw-cell:last-child .raw-title, main.page-content article details.raw-logs .raw-pair .raw-cell:last-child pre { margin-left: 18px !important; } main.page-content article details.raw-logs .raw-pair .raw-title, main.page-content article details.raw-logs .raw-pair .raw-title + pre { margin-right: 18px !important; } }

/* a product block dropped into the middle of the post */
main.page-content article .product-block, main.page-content article .product-block.devlands { width: auto; margin: 28px 0; padding: 26px 24px; border: 1px solid var(--ic-rule); border-image: none; border-radius: 22px; background: var(--ic-panel); }
main.page-content article .product-block h4, main.page-content article .product-block h5 { color: var(--ic-ink) !important; }
main.page-content article .product-block img { border-radius: 14px; box-shadow: var(--ic-shadow-card); }

/* related articles, and the way back */
main.page-content .relatedArticles { margin: 0 0 28px; }
main.page-content .relatedArticles h4, main.page-content .relatedArticles h3 { display: inline-block; position: relative; margin: 0 0 14px !important; font-size: 24px; font-weight: 700; color: var(--ic-ink); text-decoration: none; letter-spacing: -.01em; }
main.page-content .relatedArticles h4::after, main.page-content .relatedArticles h3::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: 2px; height: 10px; z-index: -1; border-radius: 3px; background: var(--ic-em-marker); transform: rotate(-1deg); }
main.page-content .main-carousel { min-height: 0; padding: 4px 0 8px; }
main.page-content .flickity-button { background: var(--ic-card); color: var(--ic-ink); box-shadow: var(--ic-shadow-card); border: 1px solid var(--ic-rule-2); }
main.page-content .flickity-button:hover { background: var(--ic-accent-soft); color: var(--ic-accent-ink); }
main.page-content .flickity-button-icon { fill: currentColor; }
main.page-content .flickity-page-dots .dot { background: var(--ic-muted); opacity: .35; }
main.page-content .flickity-page-dots .dot.is-selected { background: var(--ic-accent); opacity: 1; }
main.page-content a.home-link, main.page-content a.home-link:hover { display: inline-block; width: auto; margin: 4px 0 32px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--ic-rule); background: var(--ic-card); box-shadow: var(--ic-shadow-card); color: var(--ic-ink) !important; font-weight: 600 !important; text-decoration: none; transition: background .15s, border-color .15s, transform .15s; }
main.page-content a.home-link:hover { background: var(--ic-accent-soft); border-color: var(--ic-accent-line); color: var(--ic-accent-ink) !important; transform: translateY(-1px); }

/* ---- the sidebar (books, Devlands, the newsletter) ---------------------- */
#topright-sidebar-ad .right-sidebar-ad-slot { background: var(--ic-card) !important; color: var(--ic-text); border: 1px solid var(--ic-rule-2); border-radius: 18px; box-shadow: var(--ic-shadow-card); overflow: hidden; }
/* Ads are off wherever this sidebar appears (an empty ad slot would paint an empty card), and the
   product toasts show without a script (post.js used to "show" them; the privacy page has no post.js). */
#topright-sidebar-ad .right-sidebar-ad-slot.ad { display: none; }
#topright-sidebar-ad .toast:not(#cta-toast-1):not(#cta-toast-4) { opacity: 1; }
#topright-sidebar-ad .right-sidebar-ad-slot .ad-title { color: var(--ic-muted); }
#topright-sidebar-ad .toast, #topright-sidebar-ad .toast-body { background: transparent; border: 0; box-shadow: none; color: var(--ic-text); }
#topright-sidebar-ad .toast-header { background: var(--ic-panel); color: var(--ic-ink); border-bottom: 1px solid var(--ic-rule); }
#topright-sidebar-ad .toast-header .badge-primary { background: var(--ic-kicker-bg); color: #fff; }
#topright-sidebar-ad .toast-body, #topright-sidebar-ad .toast-body p, #topright-sidebar-ad .toast-body-title, #topright-sidebar-ad .toast-inline-para p { color: var(--ic-text) !important; }
#topright-sidebar-ad .toast-body-title { color: var(--ic-ink) !important; }
#topright-sidebar-ad .toast-body a { color: var(--ic-accent) !important; }
#topright-sidebar-ad h4, #topright-sidebar-ad h5, #topright-sidebar-ad p { color: var(--ic-text); }
#topright-sidebar-ad input[type="email"], #topright-sidebar-ad input[type="text"] { background: var(--ic-panel); color: var(--ic-text); border: 1px solid var(--ic-rule); }

/* the lesson card: a progress ring, the level to continue, and one button (js/blog/post.js fills it) */
#topright-sidebar-ad .lesson-card { border-color: var(--ic-accent-line); background: linear-gradient(160deg, var(--ic-accent-soft), var(--ic-card) 55%) !important; }
#topright-sidebar-ad .lesson-card .toast-header { background: transparent; border-bottom: 0; padding-bottom: 0; }
#topright-sidebar-ad .lesson-card .toast-header .badge-primary { background: var(--ic-kicker-bg); color: #fff; }
#topright-sidebar-ad .lesson-card .toast-body { padding-top: 10px; }
#topright-sidebar-ad .lesson-card-top { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
#topright-sidebar-ad .lesson-ring { --pct: 0; flex: none; width: 66px; height: 66px; border-radius: 50%; background: conic-gradient(var(--ic-accent) calc(var(--pct) * 1%), var(--ic-chip) 0); display: grid; place-items: center; }
#topright-sidebar-ad .lesson-ring b { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--ic-card); color: var(--ic-ink); font-size: 15px; font-weight: 700; line-height: 1; }
#topright-sidebar-ad .lesson-ring small { font-size: 10px; font-weight: 600; color: var(--ic-muted); }
#topright-sidebar-ad .lesson-card-meta { min-width: 0; }
#topright-sidebar-ad .lesson-card-kicker { margin: 0 0 2px !important; font: 700 10.5px/1 sans-serif; font-family: inherit; letter-spacing: .12em; text-transform: uppercase; color: var(--ic-accent-ink) !important; }
#topright-sidebar-ad .lesson-card .toast-body-title { margin: 0 0 4px !important; font-size: 16px; line-height: 1.3; }
#topright-sidebar-ad .lesson-card-xp { margin: 0 !important; font-size: 12.5px; line-height: 1.4; color: var(--ic-muted) !important; }
#topright-sidebar-ad .toast-body a.lesson-card-cta, #topright-sidebar-ad .toast-body a.lesson-card-cta:visited { display: flex; flex-direction: column; gap: 2px; padding: 12px 18px; border-radius: 14px; background: var(--ic-kicker-bg); color: #fff !important; text-decoration: none !important; box-shadow: 0 12px 24px -14px var(--ic-kicker-bg); transition: transform .15s, filter .15s, box-shadow .15s; }
#topright-sidebar-ad .toast-body a.lesson-card-cta:hover { color: #fff !important; transform: translateY(-1px); filter: brightness(1.15); box-shadow: 0 16px 28px -14px var(--ic-kicker-bg); }
#topright-sidebar-ad .lesson-card-cta .cta-label { font: 700 10.5px/1 sans-serif; font-family: inherit; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
#topright-sidebar-ad .lesson-card-cta .cta-title { font-size: 15px; font-weight: 700; line-height: 1.3; }

/* the subscribe box: a kicker badge like the product cards, a title, and the form */
#topright-sidebar-ad #email-capture-block .toast-header .subscribe-badge { background: var(--ic-em-line); color: #fff; }
#topright-sidebar-ad #email-capture-block .toast-body-title { margin: 0 0 6px !important; font-size: 16px; line-height: 1.3; }
#topright-sidebar-ad #email-capture-block .toast-inline-para > p:not(.toast-body-title) { margin: 0 0 12px !important; font-size: 13.5px; line-height: 1.5; }
#topright-sidebar-ad #email-capture-block #emailCaptureSubmit2 { background: var(--ic-accent); border-color: var(--ic-accent); color: #fff; font-weight: 700; }
#topright-sidebar-ad #email-capture-block #emailCaptureSubmit2:hover { filter: brightness(1.1); }

/* ---- dark theme: code colours, since Prism's stylesheet is a light one -- */
:root[data-theme="dark"] main.page-content article pre[class*="language-"] code, :root[data-theme="dark"] main.page-content article code[class*="language-"] { color: #e6edf3 !important; }
:root[data-theme="dark"] main.page-content article .token.comment, :root[data-theme="dark"] main.page-content article .token.prolog, :root[data-theme="dark"] main.page-content article .token.doctype, :root[data-theme="dark"] main.page-content article .token.cdata { color: #8b949e; }
:root[data-theme="dark"] main.page-content article .token.punctuation { color: #c9d1d9; }
:root[data-theme="dark"] main.page-content article .token.property, :root[data-theme="dark"] main.page-content article .token.tag, :root[data-theme="dark"] main.page-content article .token.boolean, :root[data-theme="dark"] main.page-content article .token.number, :root[data-theme="dark"] main.page-content article .token.constant, :root[data-theme="dark"] main.page-content article .token.symbol, :root[data-theme="dark"] main.page-content article .token.deleted { color: #79c0ff; }
:root[data-theme="dark"] main.page-content article .token.selector, :root[data-theme="dark"] main.page-content article .token.attr-name, :root[data-theme="dark"] main.page-content article .token.string, :root[data-theme="dark"] main.page-content article .token.char, :root[data-theme="dark"] main.page-content article .token.builtin, :root[data-theme="dark"] main.page-content article .token.inserted { color: #a5d6ff; }
:root[data-theme="dark"] main.page-content article .token.operator, :root[data-theme="dark"] main.page-content article .token.entity, :root[data-theme="dark"] main.page-content article .token.url { color: #d2a8ff; }
:root[data-theme="dark"] main.page-content article .token.atrule, :root[data-theme="dark"] main.page-content article .token.attr-value, :root[data-theme="dark"] main.page-content article .token.keyword { color: #ff7b72; }
:root[data-theme="dark"] main.page-content article .token.function, :root[data-theme="dark"] main.page-content article .token.class-name { color: #d2a8ff; }
:root[data-theme="dark"] main.page-content article .token.regex, :root[data-theme="dark"] main.page-content article .token.important, :root[data-theme="dark"] main.page-content article .token.variable { color: #ffa657; }
/* the selected filter chip and the sidebar badges are indigo in the dark theme; their text stays white */

/* ---- phones ------------------------------------------------------------- */
@media only screen and (max-width: 720px) {
	main.page-content .wrapper { padding: 0 8px; }
	main.page-content .post-wrapper article { padding: 0 18px 22px; border-radius: 22px; }
	main.page-content .post-wrapper article .hero-card.post-hero { margin: 0 -18px 18px !important; border-radius: 22px 22px 0 0; }
	/* on a phone the article's own padding is the indent; post.css's extra 3% goes */
	main.page-content article p, main.page-content article h2, main.page-content article h3, main.page-content article h4, main.page-content article h5, main.page-content article figure, main.page-content article ol, main.page-content article .post-body ul, main.page-content article div.highlighter-rouge, main.page-content article pre[class*="language-"], main.page-content article video { margin-left: 0 !important; margin-right: 0 !important; }
	main.page-content article .post-body { font-size: 16.5px; }
	main.page-content article .post-body h2 { font-size: 23px; }
	main.page-content article .post-body #table-of-contents + ul { columns: 1; }
	main.page-content .topic-rail { padding: 14px 14px 14px; border-radius: 18px; }
	main.page-content #filter { gap: 6px; }
	main.page-content #filter button, main.page-content #filter button.btn-secondary { padding: 6px 6px 6px 12px; min-height: 34px; font-size: 13px; gap: 6px; }
	main.page-content #filter button .chip-count { min-width: 20px; height: 20px; font-size: 10.5px; }
}


/* ---- the next rung: the lesson (or the level to continue) in place of the product block ---- */
main.page-content article .next-rung { margin: 28px 0; padding: 24px 26px 22px; border: 1px solid var(--ic-accent-line); border-radius: 22px; background: linear-gradient(135deg, var(--ic-accent-soft), var(--ic-panel) 60%); }
main.page-content article .next-rung .rung-kicker { margin: 0 0 6px; font: 700 11px/1 sans-serif; font-family: inherit; letter-spacing: .14em; text-transform: uppercase; color: var(--ic-accent-ink) !important; }
main.page-content article .next-rung h4 { margin: 0 0 8px; font-size: 22px; font-weight: 700; color: var(--ic-ink) !important; }
main.page-content article .next-rung p { margin: 0 0 10px; color: var(--ic-text); }
main.page-content article .next-rung .rung-bar { height: 8px; margin: 4px 0 14px; border-radius: 999px; background: var(--ic-chip); overflow: hidden; }
main.page-content article .next-rung .rung-bar i { display: block; height: 100%; border-radius: 999px; background: var(--ic-accent); }
main.page-content article .next-rung .rung-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 14px 0 0; }
/* the post-body link rule above is more specific than a plain class, so these carry .post-body and the tag */
main.page-content article .post-body .next-rung a.rung-cta, main.page-content article .post-body .next-rung a.rung-cta:visited { display: inline-block; padding: 12px 20px; border-radius: 999px; background: var(--ic-kicker-bg); color: #fff !important; font-weight: 700 !important; text-decoration: none !important; box-shadow: 0 10px 20px -12px var(--ic-kicker-bg); transition: transform .15s, box-shadow .15s, filter .15s; }
main.page-content article .post-body .next-rung a.rung-cta:hover { color: #fff !important; transform: translateY(-1px); filter: brightness(1.15); box-shadow: 0 14px 24px -12px var(--ic-kicker-bg); }
main.page-content article .post-body .next-rung a.rung-more { font-weight: 600 !important; color: var(--ic-accent) !important; }
/* the one line at the end of Next steps for the rung after that */
main.page-content article .rung-line { margin: 14px 0 0; padding: 14px 18px; border-left: 4px solid var(--ic-accent-line); border-radius: 0 14px 14px 0; background: var(--ic-panel); color: var(--ic-text); }
main.page-content article .rung-line b { color: var(--ic-ink); }


/* sidebar badges: readable kicker pills, not 9px chips */
#topright-sidebar-ad .toast-header .badge { padding: 6px 10px; border-radius: 999px; font: 700 11px/1 sans-serif; font-family: inherit; letter-spacing: .08em; text-transform: uppercase; }
#topright-sidebar-ad #email-capture-block .toast-header .subscribe-badge { background: #047857; color: #fff; }
#topright-sidebar-ad .lesson-ring b { display: flex; align-items: baseline; justify-content: center; gap: 1px; }

#topright-sidebar-ad .lesson-card .lesson-ring b { align-items: center; }

/* the Devlands card's picture is a strip, not a poster, so the sidebar fits a window */
#topright-sidebar-ad #devlandsCard .toast-cover { display: block; width: 100%; max-width: none !important; height: 170px !important; object-fit: cover; object-position: 50% 30%; border-radius: 12px; }
#topright-sidebar-ad #devlandsCard .toast-inline-para p { margin-bottom: 8px; }

/* the subscribe box's captcha stays folded until the reader starts typing (emailCapture.js adds .active) */
#topright-sidebar-ad #email-capture-block .g-recaptcha { max-height: 0; overflow: hidden; margin: 0; transition: max-height .25s, margin .25s; }
#topright-sidebar-ad #email-capture-block.active .g-recaptcha { max-height: 90px; margin-top: 10px; }
#topright-sidebar-ad #email-capture-block .input-group { margin-bottom: 0 !important; }
/* Follow Us: one row of icons, no filler line */
#topright-sidebar-ad #follow-us-block .toast-inline-para > p { display: none; }
#topright-sidebar-ad #follow-us-block .toast-body { padding: 8px 10px 10px; }
#cta-toast-3 .toast-inline-para { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
#cta-toast-3 .row.justify-content-center { display: contents; }
#cta-toast-3 .col-2 a { width: 40px; height: 40px; }
#cta-toast-3 .col-2 .mdi-36px.mdi:before { font-size: 28px; }
#topright-sidebar-ad #devlandsCard .toast-cover { height: 130px !important; }

/* the last few pixels: tighter gaps, a shorter strip, and the picture is the link */
.post-layout > #topright-sidebar-ad .fix-on-scroll { top: 72px; }
.post-layout > #topright-sidebar-ad .fix-on-scroll > .right-sidebar-ad-slot { margin-bottom: 12px; }
#topright-sidebar-ad #devlandsCard .toast-cover { height: 110px !important; }
#topright-sidebar-ad #devlandsCard .toast-inline-para p:last-child { display: none; }
#topright-sidebar-ad .toast-body { padding-top: 10px; padding-bottom: 12px; }

#topright-sidebar-ad #devlandsCard .toast-cover { object-position: 50% 4%; }
#cta-toast-3 .col-2 a { width: 36px; height: 40px; }

/* ---- blog listing cards (blog/index.html, blog/cluster.html) ----
   A quiet card: the command (or series) as a small label over a two-line title,
   the image inset below, and the author and date along the bottom. Every head
   keeps the same height so the images in a row line up. */
main.page-content .post-card { --hue: var(--ic-accent); display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--ic-card); border: 1px solid var(--ic-rule); border-radius: 18px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
/* each card's header takes one of the site's palette colors, in turn */
main.page-content .post-outer:nth-child(5n+2) .post-card { --hue: var(--ic-emerald); }
main.page-content .post-outer:nth-child(5n+3) .post-card { --hue: var(--ic-rose); }
main.page-content .post-outer:nth-child(5n+4) .post-card { --hue: var(--ic-amber); }
main.page-content .post-outer:nth-child(5n+5) .post-card { --hue: var(--ic-sky); }
main.page-content .post-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--hue) 55%, var(--ic-rule)); box-shadow: var(--ic-shadow-hover); }
main.page-content .post-card-link { display: flex; flex-direction: column; flex: 1 1 auto; color: inherit !important; text-decoration: none !important; }
/* the header: a tinted band with the hero's dot grid fading in from the right,
   a soft circle in the corner, and a colored rule along the top */
main.page-content .post-card-head { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; min-height: 122px; padding: 18px 20px 18px; background: color-mix(in srgb, var(--hue) 11%, var(--ic-card)); border-top: 3px solid var(--hue); border-bottom: 1px solid color-mix(in srgb, var(--hue) 30%, var(--ic-rule)); }
main.page-content .post-card-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(color-mix(in srgb, var(--hue) 55%, transparent) 1px, transparent 1.3px); background-size: 12px 12px; -webkit-mask-image: linear-gradient(100deg, transparent 40%, #000 100%); mask-image: linear-gradient(100deg, transparent 40%, #000 100%); opacity: .7; pointer-events: none; }
main.page-content .post-card-head::after { content: ""; position: absolute; z-index: -1; right: -46px; top: -58px; width: 132px; height: 132px; border-radius: 50%; background: color-mix(in srgb, var(--hue) 26%, transparent); transition: transform .35s ease; pointer-events: none; }
main.page-content .post-card:hover .post-card-head::after { transform: scale(1.12); }
main.page-content .post-card-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--hue) 40%, var(--ic-rule)); background: color-mix(in srgb, var(--ic-card) 85%, transparent); font-size: 10.5px; font-weight: 700; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--hue) 55%, var(--ic-ink)); }
main.page-content .post-card-pills { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; max-width: 100%; min-width: 0; }
main.page-content .post-card-pills .post-card-label:not(.cmd) { flex: 0 0 auto; }
main.page-content .post-card-label.cmd { font: 600 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; letter-spacing: 0; text-transform: none; color: var(--ic-ink); }
main.page-content .post-card-label.cmd::before { content: "$ "; color: color-mix(in srgb, var(--hue) 70%, var(--ic-ink)); font-weight: 700; }
main.page-content .post-card-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0 !important; padding: 0; border: 0; background: none; font-size: 19px; line-height: 1.32; font-weight: 700; letter-spacing: -.015em; text-align: left; text-transform: none; color: var(--ic-ink); transition: color .15s; }
main.page-content .post-card:hover .post-card-title { color: color-mix(in srgb, var(--hue) 45%, var(--ic-ink)); }
main.page-content .post-card-media { margin: 14px 14px 0; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--ic-rule); border-radius: 12px; background: var(--ic-panel); }
main.page-content .post-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
main.page-content .post-card:hover .post-card-media img { transform: scale(1.02); }
main.page-content .post-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: auto; padding: 14px 18px 16px; font-size: 13px; }
main.page-content .post-card-cats { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
main.page-content .post-card-cats .footer-icon { width: 20px; height: 20px; margin-right: 2px; }
main.page-content .post-card-author { display: inline-flex; align-items: center; gap: 9px; min-width: 0; font-weight: 600; color: var(--ic-text-2) !important; text-decoration: none !important; }
main.page-content a.post-card-author:hover .post-card-name { color: var(--ic-accent); }
main.page-content .post-card-avatar { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--ic-card), 0 0 0 3px var(--ic-rule); }
main.page-content .post-card-avatar.initial { display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--ic-accent-soft); color: var(--ic-accent-ink); }
main.page-content .post-card-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .15s; }
main.page-content .post-card-date { flex: 0 0 auto; white-space: nowrap; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ic-muted); }
@media (max-width: 575px) { main.page-content .post-card-head { min-height: 0; } }

/* ---- sidebar: softer header pills, a lighter Continue button, an uncropped Devlands picture ---- */
#topright-sidebar-ad .toast-header .badge, #topright-sidebar-ad .toast-header .badge-primary, #topright-sidebar-ad .lesson-card .toast-header .badge-primary { background: var(--ic-accent-soft) !important; color: var(--ic-accent-ink) !important; border: 1px solid var(--ic-accent-line); }
#topright-sidebar-ad #email-capture-block .toast-header .subscribe-badge { background: var(--ic-em-soft, #ecfdf5) !important; color: var(--ic-em-ink, #047857) !important; border-color: var(--ic-em-line, #6ee7b7); }
#topright-sidebar-ad .toast-body a.lesson-card-cta, #topright-sidebar-ad .toast-body a.lesson-card-cta:visited { background: var(--ic-accent-soft); color: var(--ic-accent-ink) !important; border: 1px solid var(--ic-accent-line); box-shadow: none; }
#topright-sidebar-ad .toast-body a.lesson-card-cta:hover { background: var(--ic-accent); color: #fff !important; border-color: var(--ic-accent); filter: none; box-shadow: 0 10px 20px -14px var(--ic-accent); }
#topright-sidebar-ad .lesson-card-cta .cta-label { opacity: .75; }
/* the Devlands picture is tall: shown whole as a thumbnail beside the copy, so the card stays short */
#topright-sidebar-ad #devlandsCard .toast-body { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 12px; align-items: start; }
#topright-sidebar-ad #devlandsCard .toast-body > a { grid-column: 2; grid-row: 1; }
#topright-sidebar-ad #devlandsCard .toast-inline-para { grid-column: 1; grid-row: 1; }
#topright-sidebar-ad #devlandsCard .toast-cover { width: 92px !important; height: auto !important; max-width: 92px !important; object-fit: contain; object-position: center; border-radius: 10px; }