/* ==========================================================================
   Blog posts, 2026 - the Toybox Calm look (assets/css/toybox-calm.css) set for long reading
   On top of the shared family stylesheet (loaded first by _ToyboxCalmHead): the article header (title, summary, byline
   and the post's artwork side by side), the reading column on white with a sticky contents card that follows the
   reader, framed figures, and the blocks a post is built from (technique headings, case cards, a warning-signs card,
   numbered steps, a wrap-up card, a related post, questions), then the share row, author card and sign-up panel.
   Below those, the blocks the older posts and glossary pages need (tips, term lists, two-sided cards, notes, list-post
   items, card grids, tables, code, embeds, definitions...), each picked in the 2026 block gallery.
   Every class starts with bp-. Posts render through Views/Shared/_BlogPostLayout.cshtml, which links it after the head
   partial with a ?v= cache buster from StaticAssetVersion. Scripts/blog-post/blog-post.js (hooks: #bp-toc, .bp-prose,
   .bp-toc__link, the progress parts and [data-bp-copy]) opens the contents card on desktop, marks the section being
   read, fills the progress bars and copies the post's address. Without the script the post reads the same.
   Section numbers are opt-in (.bp-prose--numbered with .bp-toc__list--numbered): a post whose headings carry their own
   numbers ("#13. ...") leaves both off.
   First used by Views/Blog/AIAssistants.cshtml (/blog/how-attackers-target-ai-assistants), the trial post.
   ========================================================================== */

/* The post reads on white. --bp-measure is the paragraphs' line length; --bp-frame is the width the header and the
   article share; --bp-hairline is the thin outline of the quieter cards in the article (contents, case cards) */
.bp-root { --bp-measure: 42rem; --bp-frame: 1100px; --bp-hairline: rgba(47, 42, 79, .16); background: #fff; }
/* Contents links glide to their section (the family already stops a jumped-to heading clear of the fixed header) */
html:has(.bp-root) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.bp-root) { scroll-behavior: auto; } }

/* The article's frame: the header and the article share one centred box, so the title, the contents card and the
   reading column line up */
.bp-frame { width: 100%; max-width: var(--bp-frame); margin: 0 auto; }

/* ---------- Reading progress: a thin bar along the top of the window ---------- */
/* Over the fixed site header (1001), under Bootstrap's modal and its backdrop (1050+) */
.bp-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 1002; height: 4px; pointer-events: none; }
.bp-progress__bar { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--tc-yellow), var(--tc-coral)); transform: scaleX(0); transform-origin: 0 50%; }

/* ==========================================================================
   HEADER: breadcrumb, title, summary and byline beside the post's artwork
   ========================================================================== */
.bp-hero { padding-bottom: 72px; }
@media (min-width: 992px) { .bp-hero { padding-bottom: 88px; } }
/* The artwork is the banner's picture without its words (the title is the H1 beside it), so from tablets up it takes a
   narrow column and the copy the rest; on phones the copy has the header to itself */
.bp-hero__grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 768px) { .bp-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px; } }
@media (min-width: 992px) { .bp-hero__grid { gap: 40px; } }
@media (min-width: 1200px) { .bp-hero__grid { gap: 56px; } }
.bp-hero__copy { min-width: 0; }
/* The current page in the trail is the title again: one line, cut short */
.bp-hero .tc-crumbs li:last-child { min-width: 0; max-width: 100%; }
.bp-hero .tc-crumbs li:last-child > span { display: block; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Beside the artwork the trail keeps to one line, the title cut shorter to fit the copy column */
@media (min-width: 768px) { .bp-hero .tc-crumbs { flex-wrap: nowrap; } }
/* Post titles run longer than the family's page names, so the title steps down a weight. Its size is set for this
   post's title, which the family balances across its lines: without the artwork (below 768px) it runs the width of
   the header, in four lines on phones and two from 480px; beside the artwork it sets in three lines, two from 1200px */
.tc-root .bp-title { font-size: clamp(2rem, 12.5vw, 3rem); font-weight: 600; line-height: 1.1; margin-bottom: 18px; }
@media (min-width: 480px) { .tc-root .bp-title { font-size: min(2.875rem, calc(7.14vw - 1.77px)); } }
@media (min-width: 768px) { .tc-root .bp-title { font-size: 2.6rem; } }
@media (min-width: 1200px) { .tc-root .bp-title { font-size: 3rem; } }
/* A post's key phrase can be long, so where it can't fit on a line it takes one yellow card per line (as the family does
   on phones) rather than one tall card. Lines with a card stand far enough apart that a card and its shadow clear the
   card below. Where the phrase fits on a line, the layout's script keeps it on one card (bp-whole) */
.bp-title .tc-title__hl { display: inline; line-height: 1.72; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.bp-title .tc-title__hl.bp-whole { white-space: nowrap; }
.bp-dek { font-size: 1.1875rem; }
@media (max-width: 575.98px) { .bp-dek { font-size: 1.0625rem; } }

/* The byline: photo, author and the post's dates and reading time */
.bp-byline { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.tc-root .bp-byline__photo { flex: none; width: 56px; height: 56px; border: 3px solid #fff; border-radius: 50%; object-fit: cover; object-position: 50% 18%; background: var(--tc-sky-2); box-shadow: 0 4px 0 var(--tc-deep); }
.bp-byline__text { min-width: 0; }
.tc-root .bp-byline__name { position: relative; display: inline-block; font: 700 1.0625rem/1.3 var(--tc-display); color: #fff; text-decoration: underline; text-decoration-color: var(--tc-yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tc-root .bp-byline__name:hover { color: #fff; text-decoration-color: #fff; }
/* A 44px tap area round the 22px link, without moving its underline */
.bp-byline__name::before { content: ""; position: absolute; inset: -11px -4px; }
.bp-byline__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 2px 0 0; font-size: .9375rem; color: #D6D2F2; }
.bp-byline__meta i { font-size: 1.05rem; color: var(--tc-yellow); vertical-align: -2px; margin-right: 4px; }
.bp-byline__meta time { white-space: nowrap; }
.bp-byline__dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .6; }
/* On phones the date and reading time stack, rather than wrapping with the dot left at a line's end */
@media (max-width: 479.98px) { .bp-byline__meta { flex-direction: column; align-items: flex-start; } .bp-byline__dot { display: none; } }
/* Where the copy has the width (a full-width column from 640px, beside the artwork from 992px), the byline is one line:
   author, date and reading time, a dot between each */
@media (min-width: 640px) and (max-width: 767.98px), (min-width: 992px) {
  .bp-byline__text { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
  .bp-byline__meta { margin: 0; }
  .bp-byline__meta::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .6; }
}

/* The artwork: the banner's picture cut out on a transparent background, straight on the header. A soft sky glow behind
   it (as the banner had) and a faint light rim keep its black shapes readable on the dark purple. It shows only beside
   the copy (from 768px), where it reaches into the header's padding above and below, so it is never what sets the
   header's height */
.bp-hero__art { display: none; }
@media (min-width: 768px) { .bp-hero__art { position: relative; display: block; justify-self: center; width: 100%; max-width: 260px; margin: -24px 0 -40px; } }
@media (min-width: 992px) { .bp-hero__art { max-width: 360px; margin: -40px 0 -56px; } }
.bp-hero__art::before { content: ""; position: absolute; left: 8%; right: 0; top: 30%; bottom: 0; background: radial-gradient(closest-side, rgba(82, 180, 255, .55), rgba(82, 180, 255, .18) 55%, transparent); filter: blur(6px); }
.tc-root .bp-hero__art img { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 0 1px rgba(255, 255, 255, .45)) drop-shadow(0 0 14px rgba(140, 124, 240, .45)); }
/* Tall artwork keeps to the height of the trial's (800 x 965 at 360px wide), so a narrow picture doesn't stretch the
   header: it shrinks to fit, centred in its column, its shape kept */
@media (min-width: 768px) { .tc-root .bp-hero__art img { width: auto; max-width: 100%; max-height: 340px; margin: 0 auto; } }
@media (min-width: 992px) { .tc-root .bp-hero__art img { max-height: 440px; } }
/* A post without artwork (its old picture was a screenshot or a photo): the copy has the header to itself at every
   width, kept to a reading width */
@media (min-width: 768px) {
  .bp-hero--text .bp-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .bp-hero--text .bp-hero__copy { max-width: 46rem; }
}

/* ==========================================================================
   ARTICLE: the contents card beside the reading column (above it below 992px)
   ========================================================================== */
.bp-body { padding: 8px 0 88px; }
@media (min-width: 992px) { .bp-body { padding: 16px 0 112px; } }
.bp-layout { display: grid; gap: 28px; }
.bp-aside, .bp-main { min-width: 0; }
@media (min-width: 992px) {
  /* The aside stretches the full height of the post, so its card can stay in view while the post scrolls by */
  .bp-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 44px; }
  .bp-toc { position: sticky; top: 100px; }
}
@media (min-width: 1200px) { .bp-layout { grid-template-columns: 270px minmax(0, 1fr); gap: 64px; } }
/* A post with no sections has no contents card: the column alone, on the header copy's left edge */
.bp-layout.bp-layout--solo { grid-template-columns: minmax(0, 1fr); }
/* Everything in the column (text, figures, cards, the panels after the post) keeps to the text's line length, so it all
   shares one right edge */
.bp-main { max-width: var(--bp-measure); }
/* One column below 992px: a reading width, on the same left edge as the header's copy */
@media (max-width: 991.98px) { .bp-main, .bp-aside { width: 100%; } .bp-aside { max-width: var(--bp-measure); } }

/* ---------- The contents card: an ink-outlined <details> (as /privacy-policy's) a weight lighter than the family's
   cards, so it sits beside the article without shouting over it, with the section being read marked and a progress
   line along its foot ---------- */
.bp-toc__box { background: #fff; border: 2px solid var(--tc-ink); border-radius: 18px; box-shadow: 0 3px 0 var(--tc-ink); }
.bp-toc__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 10px 14px 10px 18px; border-radius: 16px; cursor: pointer; list-style: none; }
.bp-toc__head::-webkit-details-marker { display: none; }
.bp-toc__head::marker { content: ""; }
.bp-toc__box[open] .bp-toc__head { border-bottom: 2px solid var(--tc-line); border-radius: 16px 16px 0 0; }
.bp-toc__label { font: 600 .8125rem/1.2 var(--tc-display); letter-spacing: .07em; text-transform: uppercase; color: var(--tc-ink); }
/* The open/close mark: a yellow circle, open or closed, lighter on hover (as the family's) */
.bp-toc__icon { flex: none; position: relative; width: 28px; height: 28px; border: 2px solid var(--tc-ink); border-radius: 50%; background: var(--tc-yellow); transition: background-color .2s ease; }
.bp-toc__icon::before, .bp-toc__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 2.5px; margin: -1.25px 0 0 -5.5px; background: var(--tc-ink); border-radius: 2px; }
.bp-toc__icon::after { transform: rotate(90deg); transition: transform .25s ease; }
.bp-toc__box[open] .bp-toc__icon::after { transform: rotate(0); }
.bp-toc__head:hover .bp-toc__icon { background: #FFD776; }
.bp-toc__list { display: grid; gap: 2px; padding: 10px 10px 12px; }
.tc-root .bp-toc__link { position: relative; display: flex; align-items: center; min-height: 44px; padding: 7px 10px; border-radius: 10px; font: 500 .9375rem/1.3 var(--tc-display); color: var(--tc-ink-2); text-decoration: none; transition: background-color .15s ease, color .15s ease; }
/* Numbered: the number is drawn, not text, so the link's name stays the heading's own words */
.bp-toc__list--numbered { counter-reset: bp-toc; }
.bp-toc__list--numbered > li { counter-increment: bp-toc; }
.tc-root .bp-toc__list--numbered > li > .bp-toc__link { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: baseline; gap: 6px; padding-left: 8px; }
.bp-toc__list--numbered > li > .bp-toc__link::before { content: counter(bp-toc, decimal-leading-zero); content: counter(bp-toc, decimal-leading-zero) / ""; font: 600 .75rem/1.3 var(--tc-display); letter-spacing: .04em; color: var(--tc-muted); font-variant-numeric: tabular-nums; }
/* The entries the old contents list nested under a section (its H3s): indented on a hairline, a step smaller, never
   numbered */
.bp-toc__sub { display: grid; gap: 1px; margin: 2px 0 6px 14px; padding: 0 0 0 8px; list-style: none; border-left: 2px solid var(--tc-line); }
.tc-root .bp-toc__link--sub { min-height: 40px; padding: 5px 10px; font-size: .875rem; }
.bp-toc__list--numbered .bp-toc__sub { margin-left: 22px; }
.tc-root .bp-toc__link:hover, .tc-root .bp-toc__link:focus { color: var(--tc-ink); text-decoration: none; background: var(--tc-butter); }
/* The section being read (set by the script) */
.tc-root .bp-toc__link[aria-current] { color: var(--tc-ink); background: var(--tc-sky-1); }
.bp-toc__link[aria-current]::before { color: var(--tc-rust); }
.bp-toc__link[aria-current]::after { content: ""; position: absolute; left: -6px; top: 9px; bottom: 9px; width: 4px; border-radius: 4px; background: var(--tc-coral); }
.tc-root .bp-toc__link:focus-visible { outline: 3px solid var(--tc-ink); outline-offset: -3px; box-shadow: none; background: var(--tc-butter); }
@media (min-width: 992px) {
  /* Beside the article the list scrolls inside the card when the window is short: stuck, it has the window less the
     card's top, head and foot. A list too long even for that keeps one height, the room it has where the card first
     sits (--bp-toc-room, set by the script), so the card ends above the window's foot there too. The wheel carries on
     to the page */
  .bp-toc__list { max-height: calc(100vh - 230px); max-height: min(calc(100dvh - 230px), var(--bp-toc-room, 100dvh)); overflow-y: auto; scrollbar-width: thin; }
}
@media (min-width: 992px) and (pointer: fine) { .tc-root .bp-toc__link { min-height: 0; padding-top: 6px; padding-bottom: 6px; } .tc-root .bp-toc__link--sub { padding-top: 4px; padding-bottom: 4px; } }
/* The card's foot: how far through the post the reader is */
.bp-toc__foot { display: flex; align-items: center; gap: 10px; padding: 12px 18px 14px; border-top: 2px solid var(--tc-line); }
.bp-toc__track { flex: 1; height: 6px; overflow: hidden; border: 1.5px solid rgba(47, 42, 79, .45); border-radius: 999px; background: var(--tc-sky-0); }
.bp-toc__fill { display: block; width: 100%; height: 100%; background: var(--tc-yellow); transform: scaleX(0); transform-origin: 0 50%; }
.bp-toc__pct { min-width: 3.4em; font: 700 .8125rem/1 var(--tc-display); font-variant-numeric: tabular-nums; color: var(--tc-ink-2); text-align: right; }
/* No script, no progress: the foot only shows once the script has run */
.bp-toc__foot[hidden] { display: none; }

/* ==========================================================================
   THE POST: the family's prose set for long reading
   ========================================================================== */
.bp-prose { font-size: 1.0625rem; line-height: 1.72; color: var(--tc-ink-2); overflow-wrap: break-word; }
@media (min-width: 768px) { .bp-prose { font-size: 1.125rem; line-height: 1.75; } }
.bp-prose p, .bp-prose ul:not([class]), .bp-prose ol:not([class]) { max-width: var(--bp-measure); }
.bp-prose p { margin-bottom: 1.15em; }
/* The paragraphs before the first section, set like the rest of the post */
.bp-intro { margin-bottom: 8px; }

/* Section headings in the family's display face, a weight down; everything under them (techniques, cases, steps) in the
   body face, so the post reads as an article rather than a run of cards */
.tc-root .bp-prose h2 { margin: 2.4em 0 .6em; font: 600 clamp(1.6rem, 1.3rem + 1vw, 2.05rem)/1.12 var(--tc-display); color: var(--tc-ink); text-wrap: balance; }
.tc-root .bp-prose h3 { margin: 1.9em 0 .5em; font: 700 1.25rem/1.35 var(--tc-body); letter-spacing: -.005em; color: var(--tc-ink); text-wrap: balance; }
.tc-root .bp-prose h2 + h3, .tc-root .bp-prose h2 + figure, .tc-root .bp-prose h3 + figure { margin-top: .6em; }
.bp-prose strong { color: var(--tc-ink); }
.bp-prose a:not([class]) { overflow-wrap: anywhere; }
/* Numbered sections: a pill over each heading (drawn, so the heading's text is unchanged) */
.bp-prose--numbered { counter-reset: bp-sec; }
.bp-prose--numbered h2 { counter-increment: bp-sec; }
.bp-prose--numbered h2::before { content: counter(bp-sec, decimal-leading-zero); content: counter(bp-sec, decimal-leading-zero) / ""; display: block; width: fit-content; margin: 0 0 12px; padding: 4px 11px 3px; border: 2px solid var(--tc-ink); border-radius: 999px; background: var(--tc-yellow); box-shadow: 0 3px 0 var(--tc-ink); font: 700 .8125rem/1.2 var(--tc-display); letter-spacing: .08em; color: var(--tc-ink); font-variant-numeric: tabular-nums; }

/* Figures: the post's pictures in an ink frame (they are dark, so the frame's fill is too) */
.bp-figure { margin: 1.6em 0 1.8em; overflow: hidden; border: 3px solid var(--tc-ink); border-radius: 20px; background: var(--tc-deep); box-shadow: 0 5px 0 var(--tc-ink); }
.tc-root .bp-figure img { display: block; width: 100%; height: auto; border-radius: 0; }

/* ---------- Technique headings: a plain icon beside the heading ---------- */
.tc-root .bp-prose .bp-tech { display: flex; align-items: center; gap: 10px; }
.bp-tech__icon { flex: none; display: grid; place-items: center; font-size: 1.35rem; color: var(--tc-rust); }

/* ---------- Case cards: one documented example each, its date and subject as tags ---------- */
.bp-cases { display: grid; gap: 22px; margin: 1.6em 0 2em; }
.bp-case { position: relative; padding: 22px 20px 20px; background: #fff; border: 1px solid var(--bp-hairline); border-radius: 16px; }
@media (min-width: 768px) { .bp-case { padding: 22px 26px 20px; } }
.bp-prose .bp-case__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.tc-root .bp-prose .bp-case h3 { margin: 0 0 .55em; }
.bp-case p { max-width: none; }
.bp-case > p:last-of-type { margin-bottom: 0; }

/* ---------- The warning-signs card ---------- */
.bp-signs { max-width: var(--bp-measure); margin: 1.4em 0 1.6em; padding: 22px 20px 20px; background: var(--tc-butter); border: 3px solid var(--tc-ink); border-radius: var(--tc-r); box-shadow: var(--tc-drop); }
@media (min-width: 768px) { .bp-signs { padding: 26px 28px 24px; } }
.tc-root .bp-prose .bp-signs__label { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 700 1.25rem/1.2 var(--tc-display); color: var(--tc-ink); }
/* (.tc-root i.bx gives every icon a 1em box, so these tiles name the icon too) */
.tc-root .bp-signs__label i.bx { display: grid; place-items: center; width: 40px; height: 40px; border: 3px solid var(--tc-ink); border-radius: 13px; background: var(--tc-coral); background-image: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 55%); box-shadow: 0 3px 0 var(--tc-ink); font-size: 1.35rem; line-height: 1; }
/* The signs themselves: a plain bulleted list, a small rust dot centred on each item's first line */
.bp-signs__list { display: grid; gap: 8px; }
.bp-signs__list > li { position: relative; padding-left: 22px; color: var(--tc-ink); line-height: 1.55; }
.bp-signs__list > li::before { content: ""; position: absolute; left: 4px; top: calc(.775em - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: var(--tc-rust); }
/* Red flags the post marks with its own 🚩: the flag is each line's marker, so no dot */
.bp-signs--flags .bp-signs__list > li { padding-left: 0; }
.bp-signs--flags .bp-signs__list > li::before { content: none; }

/* ---------- Numbered steps: a run of how-tos, joined by a dashed line. The numbers keep the family's bold ink-ringed
   circle, a size down and in sky rather than yellow, so the yellow section numbers over the headings stay the ones that
   lead; each sits centred on its step's heading ---------- */
.bp-steps { position: relative; counter-reset: bp-step; margin: 1.4em 0 1.6em; }
.bp-step { position: relative; padding-left: 56px; counter-increment: bp-step; }
.bp-step + .bp-step { margin-top: 2.2em; }
.bp-step::before { content: counter(bp-step); content: counter(bp-step) / ""; position: absolute; left: 0; top: -6.5px; display: grid; place-items: center; width: 40px; height: 40px; border: 3px solid var(--tc-ink); border-radius: 50%; background: var(--tc-sky); box-shadow: 0 3px 0 var(--tc-ink); font: 700 1.0625rem/1 var(--tc-display); color: var(--tc-ink); }
.bp-step:not(:last-child)::after { content: ""; position: absolute; left: 18.5px; top: 45px; bottom: -1.8em; border-left: 3px dashed rgba(47, 42, 79, .28); }
.tc-root .bp-prose .bp-step h3 { margin-top: 0; }
.bp-step > :last-child { margin-bottom: 0; }
/* A step whose old icon showed a symbol (a 🔍) rather than its number: the symbol sits in the circle */
.bp-step--mark::before { content: ""; }
.bp-step__mark { position: absolute; left: 0; top: -6.5px; display: grid; place-items: center; width: 40px; height: 40px; font-size: 1.125rem; line-height: 1; }
/* A checklist the old page drew with ticks in its step circles: a green tick on mint */
.bp-step--tick::before { background: var(--tc-mint); }
.bp-step--tick .bp-step__mark::before { content: ""; width: 8px; height: 15px; margin-top: -4px; border: solid var(--bp-forest); border-width: 0 3.5px 3.5px 0; border-radius: 1px; transform: rotate(45deg); }
@media (max-width: 575.98px) {
  .bp-step { padding-left: 48px; }
  .bp-step::before { top: -3.5px; width: 34px; height: 34px; font-size: .9375rem; }
  .bp-step:not(:last-child)::after { left: 15.5px; top: 42px; }
  .bp-step__mark { top: -3.5px; width: 34px; height: 34px; font-size: 1rem; }
}

/* ---------- The wrap-up: the closing section on a cream card ---------- */
.bp-wrapup { margin: 2.6em 0 0; padding: 4px 22px 24px; background: var(--tc-cream); border: 3px solid var(--tc-ink); border-radius: 26px; box-shadow: var(--tc-drop); }
@media (min-width: 768px) { .bp-wrapup { padding: 8px 36px 30px; } }
.tc-root .bp-prose .bp-wrapup h2 { margin-top: 1.1em; }
.bp-wrapup > p:last-child { margin-bottom: 0; }

/* ---------- Related post: another post (or tool, game...) between the wrap-up and the questions. On a phone the
   picture sits on top; from 700px it sits beside the title, about two thirds of the card, with the text set tight.
   The picture always shows whole, at its own shape (banners are 1.91:1, the games' pictures 16:9). Its text is kept to
   12 words (docs/blog-2026/README.md), so it fits beside the picture. Where the text is still taller, the picture
   sits in the middle of its column on the card's deep blue rather than being cropped. The title's link (the family's
   .tc-card__link) covers the card and draws its focus ring outside it, so nothing here may clip (no overflow on the
   card: the picture rounds its own corners) ---------- */
.bp-related { position: relative; display: grid; margin: 2.6em 0 0; background: #fff; border: 3px solid var(--tc-ink); border-radius: var(--tc-r); box-shadow: var(--tc-drop); transition: transform .15s ease, box-shadow .15s ease; }
@media (min-width: 700px) { .bp-related { grid-template-columns: minmax(0, 13fr) minmax(0, 7fr); } }
.bp-related:hover, .bp-related:focus-within { transform: translateY(-3px); box-shadow: 0 8px 0 var(--tc-ink); }
.bp-related__pic { display: flex; align-items: center; overflow: hidden; border-radius: 19px 19px 0 0; background: var(--tc-deep); border-bottom: 3px solid var(--tc-ink); }
@media (min-width: 700px) { .bp-related__pic { border-radius: 19px 0 0 19px; border-bottom: 0; border-right: 3px solid var(--tc-ink); } }
.tc-root .bp-related__pic img { display: block; width: 100%; height: auto; border-radius: 0; }
/* A video promo: the player in the picture's place, at 16:9 */
.bp-related__pic--video iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
.bp-related__body { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 16px 20px 18px; }
/* It sits in the prose, so the prose's paragraph and heading styles are kept off it */
.bp-prose .bp-related p { max-width: none; margin: 0; }
.tc-root .bp-prose .bp-related__title { margin: 0; font: 700 1.25rem/1.2 var(--tc-display); letter-spacing: 0; }
.bp-related__text { font-size: .9375rem; line-height: 1.5; color: var(--tc-ink-2); }
/* The old page's "Check out our top picks" link sits over the title link's cover, so it keeps its own hover */
.bp-related__body .tc-arrow { z-index: 2; align-self: flex-start; margin-top: 4px; font-size: 1rem; }
@media (min-width: 700px) {
  .bp-related__body { gap: 4px; padding: 14px 16px 15px; }
  .tc-root .bp-prose .bp-related__title { font-size: 1.0625rem; }
  .bp-related__text { font-size: .875rem; line-height: 1.45; }
  .bp-related__body .tc-arrow { margin-top: 2px; font-size: .9375rem; }
}
/* What the card links to (a blog post, a tool, a game...), as a sticker on its top-right corner so it reads as apart
   from the post. Yellow unless the card sets --type to another of the family's colours */
.bp-related__type { position: absolute; z-index: 2; top: -16px; right: 18px; padding: 5px 12px 4px; border: 2px solid var(--tc-ink); border-radius: 999px; background: var(--type, var(--tc-yellow)); box-shadow: 0 3px 0 var(--tc-ink); transform: rotate(4deg); font: 700 .75rem/1.2 var(--tc-display); letter-spacing: .08em; text-transform: uppercase; color: var(--tc-ink); pointer-events: none; }

/* ---------- Questions: the family's <details> cards, a step smaller in the column ---------- */
.bp-faq { margin-top: 1.2em; }
.tc-root .bp-faq .tc-qa__q { margin: 0; font: 600 1.125rem/1.35 var(--tc-display); color: var(--tc-ink); }
.bp-faq .tc-qa__a p { max-width: none; }
@media (min-width: 768px) { .bp-faq .tc-qa summary { padding: 18px 22px; } .bp-faq .tc-qa__a { padding: 0 22px 20px; } }

/* ==========================================================================
   AFTER THE POST: share, author and the sign-up panel
   ========================================================================== */
.bp-after { display: grid; gap: 28px; margin-top: 56px; }

/* Share */
.bp-share { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-top: 24px; border-top: 2px dashed rgba(47, 42, 79, .25); }
.bp-share__label { margin: 0; font: 700 .8125rem/1.2 var(--tc-display); letter-spacing: .06em; text-transform: uppercase; color: var(--tc-muted); }
.bp-share__list { display: flex; flex-wrap: wrap; gap: 10px; }
.tc-root .bp-share__btn { display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 2px solid var(--tc-ink); border-radius: 50%; background: #fff; box-shadow: 0 3px 0 var(--tc-ink); font-size: 1.35rem; color: var(--tc-ink); text-decoration: none; cursor: pointer; transition: transform .15s ease, background-color .2s ease; }
.tc-root .bp-share__btn:hover, .tc-root .bp-share__btn:focus { color: var(--tc-ink); background: var(--tc-yellow); text-decoration: none; }
.tc-root .bp-share__btn:hover { transform: translateY(-2px); }
.tc-root .bp-share__btn.is-copied { background: var(--tc-green); }
.bp-share__status { min-width: 0; font: 600 .875rem/1.3 var(--tc-display); color: var(--tc-ink-2); overflow-wrap: anywhere; }

/* Author */
.bp-author { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 22px; align-items: center; padding: 24px 22px; background: var(--tc-sky-0); border: 3px solid var(--tc-ink); border-radius: var(--tc-r); box-shadow: var(--tc-drop); }
@media (min-width: 768px) { .bp-author { padding: 28px 30px; } }
.tc-root .bp-author__photo { width: 88px; height: 88px; border: 3px solid var(--tc-ink); border-radius: 50%; object-fit: cover; object-position: 50% 18%; background: var(--tc-sky-2); box-shadow: 0 4px 0 var(--tc-ink); }
.bp-author__kicker { margin: 0 0 2px; font: 700 .75rem/1.2 var(--tc-display); letter-spacing: .08em; text-transform: uppercase; color: var(--tc-muted); }
.tc-root .bp-author__name { margin: 0 0 6px; font: 700 1.5rem/1.2 var(--tc-display); color: var(--tc-ink); }
.tc-root .bp-author__name a { position: relative; color: var(--tc-ink); text-decoration: underline; text-decoration-color: var(--tc-yellow); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.tc-root .bp-author__name a:hover { text-decoration-color: var(--tc-coral); }
/* A 44px tap area round the name */
.bp-author__name a::before { content: ""; position: absolute; inset: -8px -4px; }
.bp-author__bio { margin: 0; color: var(--tc-ink-2); }
.bp-author__follow { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding-top: 16px; border-top: 2px solid var(--tc-line); }
.bp-author__follow-label { margin: 0; font: 700 .8125rem/1.2 var(--tc-display); letter-spacing: .06em; text-transform: uppercase; color: var(--tc-muted); }
@media (max-width: 479.98px) { .bp-author { grid-template-columns: minmax(0, 1fr); } }

/* The sign-up panel */
.bp-cta { gap: 22px; }
@media (min-width: 992px) { .bp-cta { padding: 44px 48px; } }
.tc-root .bp-cta .tc-h3 { margin: 0 0 6px; color: #fff; }
.bp-cta p { margin: 0; }

/* ==========================================================================
   MORE BLOCKS: the patterns the older posts and the glossary use, as picked in the 2026 block gallery. Tone carries
   meaning: rust and coral for dangers (the warning-signs card above, crosses), mint and green for advice (ticks), sky
   for neutral. A block's label ("Do this", "Definition"...) is the template's, not the post's; everything inside a
   block is the post's own words.
   ========================================================================== */
.bp-root { --bp-forest: #1F7A4D; }

/* Shared pieces: the icon tile beside a block's label (as the warning-signs card's), the label, ticks and crosses.
   (.tc-root i.bx gives every icon a 1em box, so the tile names the element too) */
.tc-root i.bx.bp-tile { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 3px solid var(--tc-ink); border-radius: 13px; background: var(--tile, var(--tc-yellow)); background-image: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 55%); box-shadow: 0 3px 0 var(--tc-ink); font-size: 1.35rem; line-height: 1; color: var(--tc-ink); }
.tc-root i.bx.bp-tile--sm { width: 32px; height: 32px; border-width: 2px; border-radius: 10px; font-size: 1.1rem; box-shadow: 0 2px 0 var(--tc-ink); }
.tc-root .bp-prose .bp-label { display: flex; align-items: center; gap: 10px; max-width: none; margin: 0 0 14px; font: 700 1.25rem/1.2 var(--tc-display); color: var(--tc-ink); }
.bp-ticks, .bp-crosses { display: grid; gap: 8px; }
.bp-ticks > li, .bp-crosses > li { position: relative; padding-left: 28px; color: var(--tc-ink); line-height: 1.55; }
.bp-ticks > li::before { content: ""; position: absolute; left: 7px; top: calc(.775em - 8.5px); width: 7px; height: 13px; border: solid var(--bp-forest); border-width: 0 3px 3px 0; border-radius: 1px; transform: rotate(45deg); }
.bp-ticks > li.is-cross::before, .bp-crosses > li::before, .bp-ticks > li.is-cross::after, .bp-crosses > li::after { content: ""; position: absolute; left: 3px; top: calc(.775em - 1.5px); width: 14px; height: 3px; border: 0; border-radius: 2px; background: var(--tc-rust); transform: rotate(45deg); }
.bp-ticks > li.is-cross::after, .bp-crosses > li::after { transform: rotate(-45deg); }
.bp-prose > .bp-ticks, .bp-prose > .bp-crosses { max-width: var(--bp-measure); margin: 0 0 1.4em; }
/* A numbered list in a tips or red-flag card keeps its numbers: small discs in the card's tone where the ticks or dots
   go (drawn, so the list's own numbering isn't read twice) */
.bp-ticks--numbered, .bp-signs__list--numbered { counter-reset: bp-n; }
.bp-ticks--numbered > li, .bp-signs__list--numbered > li { counter-increment: bp-n; padding-left: 34px; }
.bp-ticks--numbered > li::before, .bp-signs__list--numbered > li::before { content: counter(bp-n); content: counter(bp-n) / ""; left: 0; top: calc(.775em - 11px); display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; transform: none; font: 700 .75rem/1 var(--tc-display); color: #fff; }
.bp-ticks--numbered > li::before { background: var(--bp-forest); }
.bp-signs__list--numbered > li::before { background: var(--tc-rust); }
/* A post's plain bullets take the term lists' calm sky dot, not the family's coral: in a post, coral means a warning */
.bp-prose ul:not([class]) > li::before { left: 5px; top: calc(.8em - 3.5px); width: 7px; height: 7px; border: 0; background: var(--tc-sky); box-shadow: 0 0 0 2px var(--tc-sky-1); }
.bp-prose li > .bp-figure, .bp-prose li > .bp-code { margin: .8em 0 1em; }

/* ---------- Tips and good practice: the warning-signs card's positive twin, mint with ticks ---------- */
.bp-tips { --tile: var(--tc-green); max-width: var(--bp-measure); margin: 1.4em 0 1.6em; padding: 22px 20px 20px; background: var(--tc-mint); border: 3px solid var(--tc-ink); border-radius: var(--tc-r); box-shadow: var(--tc-drop); }
@media (min-width: 768px) { .bp-tips { padding: 26px 28px 24px; } }

/* ---------- Term lists: a bold term and its sentence, run in as written, on the column's calm bullets ---------- */
.bp-terms { display: grid; gap: 10px; max-width: var(--bp-measure); margin: 1em 0 1.6em; }
.bp-terms > li { position: relative; padding-left: 22px; line-height: 1.6; }
.bp-terms > li::before { content: ""; position: absolute; left: 5px; top: calc(.8em - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: var(--tc-sky); box-shadow: 0 0 0 2px var(--tc-sky-1); }

/* ---------- Two sides (pros and cons, good and bad): a mint card of ticks over a blush card of crosses, each headed
   by the post's own heading ---------- */
.bp-compare { display: grid; gap: 18px; max-width: var(--bp-measure); margin: 1.2em 0 1.8em; }
.bp-compare__side { padding: 18px 18px 16px; border: 2px solid var(--tc-ink); border-radius: 18px; box-shadow: 0 3px 0 var(--tc-ink); }
.bp-compare__side--pro { background: var(--tc-mint); --tile: var(--tc-green); }
.bp-compare__side--con { background: var(--tc-blush); --tile: var(--tc-coral); }
.tc-root .bp-prose .bp-compare h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 700 1.1875rem/1.2 var(--tc-display); }
.bp-compare li { font-size: 1rem; }
.bp-compare__side > p { max-width: none; font-size: 1rem; }
.bp-compare__side > :last-child { margin-bottom: 0; }

/* ---------- Real and fake side by side (lookalike domains): mint with a tick, blush with a cross ---------- */
.bp-pairs { display: grid; gap: 12px; max-width: var(--bp-measure); margin: .4em 0 1.6em; }
.bp-pair { display: grid; gap: 8px; }
@media (min-width: 560px) { .bp-pair { grid-template-columns: 1fr 1fr; } }
.bp-prose .bp-pair__item { position: relative; max-width: none; margin: 0; padding: 10px 14px 10px 42px; border: 2px solid var(--tc-ink); border-radius: 14px; line-height: 1.4; color: var(--tc-ink); }
.bp-pair__item--real { background: var(--tc-mint); }
.bp-pair__item--fake { background: var(--tc-blush); }
.bp-pair__item::before, .bp-pair__item::after { content: ""; position: absolute; }
.bp-pair__item--real::before { left: 18px; top: 13px; width: 7px; height: 13px; border: solid var(--bp-forest); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.bp-pair__item--fake::before, .bp-pair__item--fake::after { left: 14px; top: 20px; width: 15px; height: 3px; border-radius: 2px; background: var(--tc-rust); transform: rotate(45deg); }
.bp-pair__item--fake::after { transform: rotate(-45deg); }
.bp-pair__item code { padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, .7); font-size: .95em; }

/* ---------- The fix after a myth or a mistake ("What to do instead"): a green tick on the heading ---------- */
.tc-root .bp-prose .bp-good { display: flex; align-items: center; gap: 10px; }
.bp-good__icon { flex: none; font-size: 1.5rem; color: var(--bp-forest); }

/* ---------- What the post covers ("What You'll Learn..."): a sky card with ticks ---------- */
.bp-learn { --tile: var(--tc-sky); max-width: var(--bp-measure); margin: 1.4em 0 1.8em; padding: 20px 20px 20px; background: var(--tc-sky-1); border: 2px solid var(--tc-ink); border-radius: 18px; }
@media (min-width: 768px) { .bp-learn { padding: 22px 26px 22px; } }
.tc-root .bp-prose .bp-learn .bp-label { font-size: 1.0625rem; }

/* ---------- Notes, tips, recommendations and warnings: one callout, its tone set by what it says, its lead word
   ("Tip:", "Note:") the post's own ---------- */
.bp-note { --tile: var(--tc-sky); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; max-width: var(--bp-measure); margin: 1.2em 0 1.4em; padding: 14px 18px 14px 14px; background: var(--tc-sky-1); border: 2px solid var(--tc-ink); border-radius: 16px; font-size: 1rem; line-height: 1.6; color: var(--tc-ink-2); }
.bp-prose .bp-note p { max-width: none; margin: 0; }
.bp-prose .bp-note p + p { margin-top: .5em; }
.bp-note__body { min-width: 0; padding-top: 3px; }
.bp-note--tip { --tile: var(--tc-yellow); background: var(--tc-butter); }
.bp-note--warn { --tile: var(--tc-coral); background: var(--tc-blush); }
.bp-note--brand { --tile: var(--tc-violet); background: var(--tc-lilac); }

/* ---------- A figure the post already sets in bold: a highlighter stroke behind it ---------- */
.bp-prose strong.bp-hl { padding: 0 .12em; background: linear-gradient(180deg, transparent 52%, rgba(255, 201, 77, .6) 52%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- Quotes: a centred lilac card under a quote-mark badge ---------- */
.bp-quote { position: relative; max-width: var(--bp-measure); margin: 2.4em 0 1.8em; padding: 34px 24px 26px; text-align: center; background: var(--tc-lilac); border: 3px solid var(--tc-ink); border-radius: var(--tc-r); box-shadow: var(--tc-drop); }
.bp-quote::before { content: "\201C"; content: "\201C" / ""; position: absolute; left: 50%; top: -26px; transform: translateX(-50%); display: grid; place-items: center; width: 48px; height: 48px; padding-top: 14px; border: 3px solid var(--tc-ink); border-radius: 50%; background: var(--tc-yellow); box-shadow: 0 3px 0 var(--tc-ink); font: 700 2.25rem/1 var(--tc-display); color: var(--tc-ink); }
.bp-quote blockquote { margin: 0; font: 600 1.875rem/1.2 var(--tc-display); color: var(--tc-ink); }
.bp-quote figcaption { margin-top: 10px; font: 600 .9375rem/1.4 var(--tc-display); color: var(--tc-muted); }

/* ---------- A TL;DR (the older posts hid it until hover; it shows now) ---------- */
.bp-prose .bp-tldr { display: flex; gap: 12px; align-items: flex-start; max-width: var(--bp-measure); margin: 0 0 1.4em; padding: 14px 18px; background: var(--tc-butter); border: 2px solid var(--tc-ink); border-radius: 16px; color: var(--tc-ink); line-height: 1.55; }
.bp-tldr > b:first-child { flex: none; margin-top: 1px; padding: 3px 10px 2px; border: 2px solid var(--tc-ink); border-radius: 999px; background: var(--tc-yellow); font: 700 .8125rem/1.2 var(--tc-display); letter-spacing: .04em; }

/* ---------- List-post items ("#13 The Peripheral"): the number the heading types as a yellow badge, a bonus item's
   label as a pink sticker, the ratings or categories as tags, and the repeated sub-headings as small labels ---------- */
.tc-root .bp-prose h2.bp-item__title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.tc-root .bp-item__title a { color: var(--tc-ink); text-decoration: underline; text-decoration-color: var(--tc-yellow); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.tc-root .bp-item__title a:hover { color: var(--tc-ink); text-decoration-color: var(--tc-coral); }
.tc-root .bp-item__title a i.bx { width: auto; font-size: .6em; vertical-align: .25em; margin-left: 2px; color: var(--tc-muted); }
.bp-item__num { display: inline-grid; place-items: center; min-width: 58px; height: 46px; margin-right: 12px; padding: 0 12px; border: 3px solid var(--tc-ink); border-radius: 14px; background: var(--tc-yellow); background-image: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 55%); box-shadow: 0 3px 0 var(--tc-ink); font: 700 1.3125rem/1 var(--tc-display); font-variant-numeric: tabular-nums; color: var(--tc-ink); vertical-align: middle; }
.bp-item__num--bonus { height: 38px; padding: 0 14px; background-color: var(--tc-pink); font-size: .9375rem; letter-spacing: .04em; text-transform: uppercase; transform: rotate(-3deg); }
.bp-prose .bp-item__meta { display: flex; flex-wrap: wrap; gap: 8px; max-width: none; margin: -.6em 0 1.4em; }
.bp-item__meta .tc-tag { padding: 4px 11px 3px; font-size: .8125rem; white-space: normal; }
/* The item's repeated sub-headings ("What This Show Is About"): a clear display heading in ink, a step under an h3 */
.tc-root .bp-prose h3.bp-item__sub { margin: 1.6em 0 .45em; font: 700 1.375rem/1.25 var(--tc-display); letter-spacing: 0; color: var(--tc-ink); }

/* ---------- A section's typed number ("Step 1.", "1.") in the section pill, above the rest of its heading ---------- */
.bp-num { display: block; width: fit-content; margin: 0 0 12px; padding: 4px 11px 3px; border: 2px solid var(--tc-ink); border-radius: 999px; background: var(--tc-yellow); box-shadow: 0 3px 0 var(--tc-ink); font: 700 .8125rem/1.2 var(--tc-display); letter-spacing: .08em; color: var(--tc-ink); font-variant-numeric: tabular-nums; }

/* ---------- Card grids: two up from 640px. Text cards in the family's ink, centred; picture cards on a hairline, no
   coloured edge. A card's picture shows whole, at its own shape (never cropped to fit) ---------- */
.bp-cards { display: grid; gap: 18px; max-width: var(--bp-measure); margin: 1.2em 0 1.8em; }
@media (min-width: 640px) { .bp-cards { grid-template-columns: 1fr 1fr; } }
.bp-card { position: relative; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--bp-hairline); border-radius: 16px; }
.bp-card__body { padding: 16px 18px 18px; }
.tc-root .bp-prose .bp-card h3, .tc-root .bp-prose .bp-card h4 { margin: 0 0 .4em; font: 700 1.125rem/1.3 var(--tc-display); }
.bp-prose .bp-card p { max-width: none; margin: 0 0 .55em; font-size: 1rem; line-height: 1.6; }
.bp-card p:last-child { margin-bottom: 0; }
.tc-root .bp-card__img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--bp-hairline); border-radius: 0; }
/* The post's run-in lead words ("The Scam:", "How It Works:") as small labels over their lines */
.bp-card--labelled p strong:first-child { display: block; margin-bottom: 1px; font: 700 .75rem/1.3 var(--tc-display); letter-spacing: .08em; text-transform: uppercase; color: var(--tc-rust); }
.bp-cards--ink .bp-card { background: var(--tc-sky-0); border: 3px solid var(--tc-ink); border-radius: var(--tc-r); box-shadow: var(--tc-drop); text-align: center; }

/* ---------- Tables: an outlined fact card; a wider table scrolls inside it on phones ---------- */
.bp-spec { max-width: var(--bp-measure); margin: .8em 0 1.6em; overflow-x: auto; border: 2px solid var(--tc-ink); border-radius: 16px; box-shadow: 0 3px 0 var(--tc-ink); background: #fff; }
.bp-spec table { width: 100%; border-collapse: collapse; }
.bp-spec th, .bp-spec td { padding: 11px 16px; border-bottom: 1px solid var(--bp-hairline); text-align: left; vertical-align: top; }
.bp-spec tr:last-child > * { border-bottom: 0; }
.bp-spec th { background: var(--tc-sky-0); font: 600 .9375rem/1.4 var(--tc-display); color: var(--tc-ink-2); }
.bp-spec th[scope="row"] { width: 44%; }
.bp-spec thead th { background: var(--tc-sky-1); color: var(--tc-ink); white-space: nowrap; }
.bp-spec td { font-weight: 600; color: var(--tc-ink); }

/* ---------- Code, records and prompts: a dark terminal with the post's label and a copy button; lines are numbered
   where the text refers to them ---------- */
.bp-code { max-width: var(--bp-measure); margin: .8em 0 1.6em; overflow: hidden; border: 3px solid var(--tc-ink); border-radius: 16px; background: var(--tc-deep); box-shadow: var(--tc-drop); }
.bp-code__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 7px 8px 7px 16px; background: var(--tc-night); border-bottom: 2px solid rgba(255, 255, 255, .1); font: 600 .875rem/1.35 var(--tc-display); color: #D6D2F2; }
.bp-code__head strong { color: #fff; }
.tc-root .bp-code__copy { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 4px 12px; border: 2px solid rgba(255, 255, 255, .55); border-radius: 999px; background: none; font: 600 .8125rem/1 var(--tc-display); color: #fff; cursor: pointer; }
.tc-root .bp-code__copy:hover { background: rgba(255, 255, 255, .12); }
/* (the layout's theme gives every pre a light box of its own: this one sits on the terminal's dark) */
.tc-root .bp-code pre { margin: 0; padding: 14px 16px 16px; overflow-x: auto; background: none; border: 0; border-radius: 0; box-shadow: none; font: 500 .9375rem/1.7 var(--tc-mono); color: #A6F4C5; white-space: pre; counter-reset: bp-line; }
/* The part of a record the text points at, underlined in yellow as the old pages had it */
.bp-code__mark { border-bottom: 3px solid var(--tc-yellow); }
/* ---------- Hand-built pages ---------- */
/* An example (a "how to spot AI" sample): its player or slider as it was, with its label, heading and text. An audio
   sample sits beside the words from 768px; a video or a slider sits above them */
.bp-example { display: grid; max-width: var(--bp-measure); margin: 1.4em 0 2em; overflow: hidden; background: #fff; border: 3px solid var(--tc-ink); border-radius: var(--tc-r); box-shadow: var(--tc-drop); }
@media (min-width: 768px) { .bp-example--audio { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.bp-example__media { position: relative; background: var(--tc-deep); }
.bp-example--audio .bp-example__media { border-bottom: 3px solid var(--tc-ink); }
@media (min-width: 768px) { .bp-example--audio .bp-example__media { border-bottom: 0; border-right: 3px solid var(--tc-ink); } }
.bp-example--video .bp-example__media, .bp-example--slider .bp-example__media { border-bottom: 3px solid var(--tc-ink); }
.bp-example__media .audio-container { position: relative; height: 100%; min-height: 200px; background-size: cover; background-position: center; }
.bp-example__media .audio-container audio { position: absolute; left: 10px; bottom: 10px; width: calc(100% - 20px); height: 44px; }
.bp-example__media video, .bp-example__media iframe { display: block; width: 100%; height: auto; border: 0; border-radius: 0; }
.bp-example__media img-comparison-slider { display: block; width: 100%; }
.tc-root .bp-example__media img { display: block; width: 100%; height: auto; border-radius: 0; }
.bp-example__body { padding: 16px 20px 18px; }
.bp-prose .bp-example__label { margin: 0 0 6px; font: 700 .8125rem/1.3 var(--tc-display); letter-spacing: .08em; text-transform: uppercase; color: var(--tc-ink-2); }
.tc-root .bp-prose .bp-example h3 { margin: 0 0 .45em; font: 700 1.25rem/1.3 var(--tc-display); color: var(--tc-ink); }
.bp-prose .bp-example p { max-width: none; }
.bp-example__body > :last-child { margin-bottom: 0; }

/* A meme: the picture opens full size (the layout's fsLightbox), its download link under it */
.bp-meme { max-width: var(--bp-measure); margin: 1.2em 0 2em; text-align: center; }
.bp-meme__open { display: inline-block; max-width: 100%; overflow: hidden; border: 3px solid var(--tc-ink); border-radius: 18px; background: #fff; box-shadow: var(--tc-drop); cursor: zoom-in; }
/* The meme shows at its own size, no taller than 620px. --bp-meme-w is that width (its natural width, or less when
   620px tall caps it), set per picture so it holds its space before it loads; height follows its width and height
   attributes' shape */
.tc-root .bp-meme__open img { display: block; max-width: 100%; max-height: 620px; width: var(--bp-meme-w, auto); height: auto; border-radius: 0; }
.bp-meme figcaption { margin-top: 12px; }

/* A disclosure the post keeps (a "Full methodology" panel in a note) */
.bp-details { margin: .6em 0 0; }
.bp-details > summary { cursor: pointer; font: 700 .9375rem/1.4 var(--tc-display); color: var(--tc-ink); }
.bp-details[open] > summary { margin-bottom: .6em; }
.bp-details h5 { margin: 1em 0 .3em; font: 700 1rem/1.3 var(--tc-display); color: var(--tc-ink); }

/* A tool the page built itself (a password generator, a wizard, a movie finder): its own markup, styles and script,
   in the column, in the family's ink frame. The frame clips the tool's card, so the card's own corners and soft shadow
   don't show (some set them by id, past any class rule here); its hairline and margins go (the margins are utility
   classes, hence the !important) */
.bp-widget { max-width: var(--bp-measure); margin: 1.4em 0 2em; overflow: hidden; border: 3px solid var(--tc-ink); border-radius: var(--tc-r); box-shadow: var(--tc-drop); }
.tc-root .bp-widget > :only-child { border: 0; margin-top: 0 !important; margin-bottom: 0 !important; }
/* Front's soft buttons, which a widget's script still writes (the layout's theme has none, so they drew white on white) */
.tc-root .bp-widget .btn-soft-primary, .tc-root .bp-widget .btn-soft-secondary { border: 2px solid var(--tc-ink); color: var(--tc-ink); box-shadow: 0 2px 0 var(--tc-ink); }
.tc-root .bp-widget .btn-soft-primary { background: var(--tc-sky-1); }
.tc-root .bp-widget .btn-soft-secondary { background: #fff; }
.tc-root .bp-widget .btn-soft-primary:hover, .tc-root .bp-widget .btn-soft-secondary:hover { background: var(--tc-butter); color: var(--tc-ink); }

/* A coloured symbol the post puts before a line or heading (✖ what goes wrong, ✔ what goes right), with a gap after */
.bp-glyph { margin-right: .4em; }
.bp-glyph--bad { color: var(--tc-rust); }
.bp-glyph--good { color: var(--bp-forest); }
.bp-glyph--warn { color: var(--tc-orange, #E8890C); }
.bp-code--lines pre > span { display: block; counter-increment: bp-line; }
.bp-code--lines pre > span::before { content: counter(bp-line); display: inline-block; width: 2ch; margin-right: 16px; text-align: right; color: rgba(255, 255, 255, .32); }

/* ---------- Embedded players (podcast, video): in the figures' ink frame ---------- */
.bp-embed { max-width: var(--bp-measure); margin: 1.2em 0 1.8em; overflow: hidden; border: 3px solid var(--tc-ink); border-radius: 18px; box-shadow: var(--tc-drop); background: #282828; }
.bp-embed iframe, .bp-embed video { display: block; width: 100%; border: 0; border-radius: 0; }
.bp-embed--video iframe { height: auto; aspect-ratio: 16 / 9; }
.bp-embed audio { display: block; width: 100%; }
/* An audio player: the frame takes the player's pill shape and grey, so the ink border hugs it */
.bp-embed--audio { border-radius: 999px; background: #F1F3F4; box-shadow: 0 3px 0 var(--tc-ink); }
.bp-embed--audio audio { height: 54px; border-radius: 999px; }

/* ---------- The related card's sticker, by what it links to: reading in yellow (the default), free things in green,
   videos in sky, research and pricing in lilac ---------- */
.bp-related__type--free { --type: var(--tc-green); }
.bp-related__type--video { --type: var(--tc-sky); }
.bp-related__type--research { --type: var(--tc-lilac); }

/* ---------- A download (the PDF datasheets): a card with a file tile and the family's button, its sticker as the
   related card's ---------- */
.bp-download { --tile: var(--tc-yellow); position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; max-width: var(--bp-measure); margin: 1.8em 0; padding: 22px; background: #fff; border: 3px solid var(--tc-ink); border-radius: var(--tc-r); box-shadow: var(--tc-drop); }
.tc-root .bp-download i.bx.bp-tile { width: 56px; height: 56px; border-radius: 16px; font-size: 1.75rem; }
.tc-root .bp-prose .bp-download h3 { flex: 1 1 220px; margin: 0; font: 700 1.25rem/1.25 var(--tc-display); }

/* ---------- A glossary term's definition: the answer to the page's question, on a sky card ---------- */
.bp-define { max-width: var(--bp-measure); margin: 0 0 1.4em; padding: 20px 22px 22px; background: var(--tc-sky-1); border: 3px solid var(--tc-ink); border-radius: var(--tc-r); box-shadow: var(--tc-drop); }
.bp-prose .bp-define__label { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 4px 11px 3px; border: 2px solid var(--tc-ink); border-radius: 999px; background: #fff; font: 700 .75rem/1.2 var(--tc-display); letter-spacing: .08em; text-transform: uppercase; color: var(--tc-ink); }
.tc-root .bp-define__label i.bx { font-size: 1rem; }
.bp-prose .bp-define p:not(.bp-define__label) { max-width: none; margin: 0; font-size: 1.1875rem; line-height: 1.6; font-weight: 500; color: var(--tc-ink); }
.bp-prose .bp-define p:not(.bp-define__label) + p { margin-top: .7em; }

/* ---------- A post's video (BlogPost.Video, Views/Shared/_BlogVideo.cshtml): under a glossary term's definition or a
   section's heading, in the ink frame on the header's deep blue, its length on the family's yellow sticker and its
   line above the player ---------- */
.bp-video { max-width: var(--bp-measure); margin: 1.4em 0 1.8em; overflow: hidden; background: var(--tc-deep); border: 3px solid var(--tc-ink); border-radius: var(--tc-r); box-shadow: var(--tc-drop); }
.bp-video__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; padding: 14px 18px; }
.bp-video__tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px 3px; border: 2px solid var(--tc-ink); border-radius: 999px; background: var(--tc-yellow); box-shadow: 0 2px 0 var(--tc-ink); font: 700 .75rem/1.2 var(--tc-display); letter-spacing: .08em; text-transform: uppercase; color: var(--tc-ink); white-space: nowrap; }
.tc-root .bp-video__tag i.bx { font-size: 1rem; }
.bp-video__title { flex: 1 1 240px; font: 600 1.0625rem/1.3 var(--tc-display); color: #fff; }
.bp-video__player { border-top: 3px solid var(--tc-ink); background: #000; }
.bp-video__player iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }

/* ---------- Fourth-level headings: the display face, a size under h3 ---------- */
.tc-root .bp-prose h4 { margin: 1.6em 0 .35em; font: 600 1.1875rem/1.35 var(--tc-display); color: var(--tc-ink); text-wrap: balance; }

/* ---------- Print: the post alone, in ink on paper (the script opens the questions for printing) ---------- */
@media print {
  .bp-progress, .bp-aside, .bp-share, .bp-cta { display: none !important; }
  .bp-layout { display: block; }
  .tc-root .bp-hero { display: block; color: var(--tc-ink); background: none; padding: 0 0 24px; }
  .tc-root .bp-hero .tc-crumbs, .tc-root .bp-hero .tc-crumbs a { color: var(--tc-ink); }
  .tc-root .bp-title, .bp-dek, .tc-root .bp-byline__name, .bp-byline__meta { color: var(--tc-ink); }
  .bp-hero__art { max-width: 240px; margin: 0; }
  .bp-hero__art::before { display: none; }
  .tc-root .bp-hero__art img { filter: none; }
  .bp-figure, .bp-case, .bp-signs, .bp-wrapup, .bp-author, .bp-related, .bp-tips, .bp-compare__side, .bp-quote, .bp-cards--ink .bp-card, .bp-spec, .bp-code, .bp-embed, .bp-download, .bp-define, .bp-video { box-shadow: none; break-inside: avoid; }
  .bp-code__copy { display: none; }
}