/*
 * BS.Web.Blog: the article page.      <link rel="stylesheet" href="/_content/BS.Web.Blog/bs-article.css">
 *
 * The page writes the frame; BlogArticleBody and BlogArticlePage.TableOfContents write what stands in brackets:
 *
 *   <article class="bs-article">                     one centred column, --bs-article-measure wide
 *     <header class="bs-article-header">
 *       <p class="bs-article-eyebrow">Guide</p>      the pill above the title (a span or a link works too)
 *       <h1>Title</h1>
 *       <p class="bs-article-lead">Description</p>
 *       <p class="bs-article-meta"><time>...</time> <span>...</span></p>     date, reading time, author; icons 1.25rem
 *       [p.bs-article-byline]                          BlogPublisher.Byline: "Published by ... · created with AI assistance"
 *     </header>
 *     <figure class="bs-article-hero"><img src="..." alt="" width="1200" height="672" fetchpriority="high"></figure>
 *     [nav.bs-article-toc]                            before the body, not inside it
 *     <div class="bs-article-body">[BlogArticleBody.Html: figure.bs-article-figure, div.bs-article-table,
 *       section.bs-article-faq > details.bs-article-faq-item > summary + div.bs-article-faq-answer, section.bs-article-closing;
 *       BlogArticleBody.HtmlWith places aside.bs-article-tool (BlogTool.Box) after the first section]</div>
 *     <aside class="bs-article-cta"><h2>Next step</h2><p>...</p><a href="...">...</a></aside>
 *     [aside.bs-article-publisher]                    BlogPublisher.Profile: photo, byline, role, bio, methodology link
 *     <section class="bs-article-share"><h2>Share</h2><ul><li><a href="...">LinkedIn</a></li></ul></section>
 *   </article>
 *
 * The theme: set any of these on :root, body or .bs-article, in any cascade layer (this file only reads them, so nothing here
 * competes with a site's values). Every colour, radius and font comes from them; the defaults make a light page.
 *
 *   --bs-article-measure        40rem to 46.67rem   width of the column: 40rem up to a 1280px window, growing with the text up to
 *                                                   2400px (about 70 characters a line); a value set here is the width at every size
 *   --bs-article-text           18px to 21px        the text from a 1024px window: 18px up to 1280px, 21px from 2400px (any length,
 *                                                   clamp() included); headings, tables, captions and boxes follow it
 *   --bs-article-leading        32px to 36px        its line height, same range (a length: the list markers are placed by it)
 *   --bs-article-title          42px to 49px        the title, same range
 *   --bs-article-bg             #ffffff             the page behind the article: the question cards
 *   --bs-article-ink            #172033             text
 *   --bs-article-muted          #5a6478             lead, meta, captions, quotes, the contents' label
 *   --bs-article-accent         #1d4ed8             links, list markers, eyebrow, closing box, call to action
 *   --bs-article-accent-ink     #ffffff             text on the accent: step numbers, call to action
 *   --bs-article-heading        the accent          the title and the closing box's heading
 *   --bs-article-surface        #f3f5f9             contents box, code, table heads, hover, pictures while loading
 *   --bs-article-border         #dce1ea             rules, table lines, question cards
 *   --bs-article-shadow         #0b1530             shadows (on a dark page: black)
 *   --bs-article-focus          the accent          focus rings
 *   --bs-article-radius         1rem                boxes and pictures; smaller parts in proportion, 0 for square corners
 *   --bs-article-font           the page's font     text
 *   --bs-article-font-display   --bs-article-font   headings
 *   --bs-article-cta-bg         accent gradient     background of the call to action (any background value)
 *   --bs-article-scroll-margin  1.5rem              room above a section a contents link jumps to (a sticky header's height)
 *
 * A dark page, for example:
 *   :root { --bs-article-bg: #0b0f17; --bs-article-ink: #e6e9ef; --bs-article-muted: #9aa3b2; --bs-article-accent: #7aa2ff;
 *           --bs-article-accent-ink: #0b0f17; --bs-article-surface: #151b27; --bs-article-border: #2a3344;
 *           --bs-article-shadow: #000000; }
 */
/* The theme with its defaults, taken on every part a page may use on its own (private: --_bsa-*). */
:where(.bs-article, .bs-article-header, .bs-article-hero, .bs-article-toc, .bs-article-body, .bs-article-cta, .bs-article-share,
.bs-article-byline, .bs-article-publisher, .bs-article-tool) {
  --_bsa-bg: var(--bs-article-bg, #ffffff);
  --_bsa-ink: var(--bs-article-ink, #172033);
  --_bsa-muted: var(--bs-article-muted, #5a6478);
  --_bsa-accent: var(--bs-article-accent, #1d4ed8);
  --_bsa-accent-ink: var(--bs-article-accent-ink, #ffffff);
  --_bsa-heading: var(--bs-article-heading, var(--_bsa-accent));
  --_bsa-surface: var(--bs-article-surface, #f3f5f9);
  --_bsa-border: var(--bs-article-border, #dce1ea);
  --_bsa-shadow: var(--bs-article-shadow, #0b1530);
  --_bsa-focus: var(--bs-article-focus, var(--_bsa-accent));
  --_bsa-radius: var(--bs-article-radius, 1rem);
  --_bsa-text: var(--bs-article-text, clamp(1.125rem, 0.9107rem + 0.2679vw, 1.3125rem));
}

/* The column. Without --bs-article-font the text keeps the page's font. */
.bs-article {
  box-sizing: border-box;
  margin-inline: auto;
  width: 100%;
  max-width: var(--bs-article-measure, clamp(40rem, 32.381rem + 9.524vw, 46.667rem));
  color: var(--_bsa-ink);
  font-family: var(--bs-article-font);
}

/* Header: eyebrow pill, title, lead, meta. */
.bs-article-header {
  margin: 0;
}

.bs-article-header > :first-child {
  margin-top: 0;
}

.bs-article-eyebrow {
  display: inline-block;
  margin: 0;
  border-radius: 9999px;
  background-color: color-mix(in srgb, var(--_bsa-accent) 10%, transparent);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--_bsa-accent);
}

.bs-article-header h1 {
  margin: 1.25rem 0 0;
  font-family: var(--bs-article-font-display, var(--bs-article-font));
  font-size: 1.875rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--_bsa-heading);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

.bs-article-lead {
  margin: 1.25rem 0 0;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--_bsa-muted);
}

.bs-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--_bsa-muted);
}

.bs-article-meta > * {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.bs-article-meta :is(img, svg) {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}

:where(.bs-article-meta) a {
  color: inherit;
}

/* The cover and the pictures: full width, rounded, a fine ring and a soft shadow; the surface until they have loaded. */
.bs-article-hero {
  margin: 2.5rem 0 0;
}

.bs-article-hero img,
.bs-article-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--_bsa-radius);
  background-color: var(--_bsa-surface);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--_bsa-ink) 8%, transparent), 0 2px 6px color-mix(in srgb, var(--_bsa-shadow) 6%, transparent), 0 20px 40px -28px color-mix(in srgb, var(--_bsa-shadow) 45%, transparent);
}

.bs-article-hero img {
  aspect-ratio: 16/9;
  object-fit: cover;
}

.bs-article-hero figcaption,
.bs-article-figure figcaption {
  margin-top: 0.875rem;
  padding-inline: 0.5rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--_bsa-muted);
  text-wrap: balance;
}

/* The table of contents. */
.bs-article-toc {
  margin: 2.5rem 0 0;
  border-radius: var(--_bsa-radius);
  background-color: var(--_bsa-surface);
  padding: 1.5rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_bsa-ink) 6%, transparent);
}

.bs-article-toc h2 {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--_bsa-muted);
}

.bs-article-toc ol {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.bs-article-toc ol:first-child {
  margin-top: 0;
}

.bs-article-toc li {
  margin: 0;
  padding: 0;
}

.bs-article-toc a {
  display: flex;
  gap: 0.75rem;
  padding-block: 0.375rem;
  font-weight: 500;
  line-height: 1.5rem;
  color: var(--_bsa-ink);
  text-decoration: none;
  transition: color 0.2s;
}

.bs-article-toc a::before {
  content: "";
  flex: none;
  margin-top: 0.25rem;
  width: 1rem;
  height: 1rem;
  background-color: var(--_bsa-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform 0.2s;
}

.bs-article-toc a:hover {
  color: var(--_bsa-accent);
}

.bs-article-toc a:hover::before {
  transform: translateX(0.125rem);
}

.bs-article-toc a:focus-visible {
  outline: 2px solid var(--_bsa-focus);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* The text. Lines have a fixed height (--_bsa-leading), so the list markers sit on the first line whatever their size. */
.bs-article-body {
  --_bsa-leading: 1.875rem;
  margin: 2.5rem 0 0;
  font-size: 1.0625rem;
  line-height: var(--_bsa-leading);
  color: var(--_bsa-ink);
  overflow-wrap: break-word;
}

.bs-article-body > :first-child {
  margin-top: 0;
}

.bs-article-body > :last-child {
  margin-bottom: 0;
}

.bs-article-body p {
  margin: 1.25rem 0;
}

.bs-article-body :is(h2, h3, h4, h5, h6) {
  font-family: var(--bs-article-font-display, var(--bs-article-font));
  font-weight: 600;
  color: inherit;
}

.bs-article-body h2 {
  margin: 3.5rem 0 1rem;
  scroll-margin-top: var(--bs-article-scroll-margin, 1.5rem);
  font-size: 1.5rem;
  line-height: 1.3;
  text-wrap: balance;
}

.bs-article-body h3 {
  margin: 2.25rem 0 0.75rem;
  font-size: 1.25rem;
  line-height: 1.4;
}

.bs-article-body :is(h4, h5, h6) {
  margin: 1.75rem 0 0.5rem;
  font-size: 1.0625rem;
  line-height: 1.5;
}

.bs-article-body a {
  color: var(--_bsa-accent);
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, var(--_bsa-accent) 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.2s;
}

.bs-article-body a:hover {
  text-decoration-color: currentColor;
}

.bs-article-body a:focus-visible {
  outline: 2px solid var(--_bsa-focus);
  outline-offset: 2px;
  border-radius: 0.125rem;
}

.bs-article-body strong {
  font-weight: 600;
}

.bs-article-body em {
  font-style: italic;
}

.bs-article-body img {
  max-width: 100%;
  height: auto;
}

.bs-article-body code {
  border-radius: calc(var(--_bsa-radius) * 0.375);
  background-color: var(--_bsa-surface);
  padding: 0.125rem 0.375rem;
  font-size: 0.875em;
}

.bs-article-body pre {
  margin: 1.75rem 0;
  overflow-x: auto;
  border-radius: calc(var(--_bsa-radius) * 0.75);
  background-color: var(--_bsa-surface);
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
}

.bs-article-body pre code {
  border-radius: 0;
  background: none;
  padding: 0;
  font-size: inherit;
}

.bs-article-body blockquote {
  margin: 2rem 0;
  border-inline-start: 4px solid var(--_bsa-accent);
  padding: 0;
  padding-inline-start: 1.25rem;
  color: var(--_bsa-muted);
}

.bs-article-body blockquote > :first-child {
  margin-top: 0;
}

.bs-article-body blockquote > :last-child {
  margin-bottom: 0;
}

.bs-article-body hr {
  margin: 3rem 0;
  height: 0;
  border: 0;
  border-top: 1px solid var(--_bsa-border);
}

/* Lists: check marks in the accent; numbered lists as steps in circles (a list that starts later is reset by BlogArticleBody). */
.bs-article-body :is(ul, ol) {
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}

.bs-article-body li {
  position: relative;
  margin: 0;
  padding-inline-start: 2.25rem;
}

.bs-article-body li + li {
  margin-top: 0.625rem;
}

.bs-article-body li > :is(ul, ol) {
  margin: 0.625rem 0 0;
}

.bs-article-body li > p {
  margin: 0.5rem 0;
}

.bs-article-body li > p:first-child {
  margin-top: 0;
}

.bs-article-body li > p:last-child {
  margin-bottom: 0;
}

.bs-article-body ul > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: calc((var(--_bsa-leading) - 1.375rem) / 2);
  width: 1.375rem;
  height: 1.375rem;
  background-color: var(--_bsa-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='11' fill-opacity='.1'/%3E%3Cpath d='m7.06 11.44 2.63 2.62 5.25-6.12' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='11' fill-opacity='.1'/%3E%3Cpath d='m7.06 11.44 2.63 2.62 5.25-6.12' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

.bs-article-body ol {
  counter-reset: bs-article-step;
}

.bs-article-body ol > li {
  counter-increment: bs-article-step;
  padding-inline-start: 2.75rem;
}

.bs-article-body ol > li::before {
  content: counter(bs-article-step);
  position: absolute;
  inset-inline-start: 0;
  top: calc((var(--_bsa-leading) - 1.875rem) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 9999px;
  background-color: var(--_bsa-accent);
  font-size: 0.875rem;
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--_bsa-accent-ink);
}

/* Pictures in the text and tables, which scroll sideways in their frame on a phone. */
.bs-article-body h2 + .bs-article-figure {
  margin-top: 1.5rem;
}

.bs-article-figure {
  margin: 2.5rem 0;
}

.bs-article-figure img {
  aspect-ratio: auto 1200/672;
}

.bs-article-table {
  margin: 2rem 0;
  overflow-x: auto;
  border: 1px solid var(--_bsa-border);
  border-radius: calc(var(--_bsa-radius) * 0.75);
}

.bs-article-table table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.9375rem;
  line-height: 1.5rem;
}

.bs-article-table :is(th, td) {
  border: 0;
  padding: 0.75rem 1rem;
  text-align: start;
  vertical-align: top;
}

.bs-article-table th {
  background-color: var(--_bsa-surface);
  font-weight: 600;
}

.bs-article-table td {
  border-top: 1px solid var(--_bsa-border);
}

/* The readers' questions: a card per question, closed until clicked (keyboard: Tab, then Enter or Space). */
.bs-article-faq-item {
  margin-top: 0.75rem;
  border-radius: calc(var(--_bsa-radius) * 0.875);
  background-color: var(--_bsa-bg);
  box-shadow: inset 0 0 0 1px var(--_bsa-border);
  transition: box-shadow 0.2s;
}

.bs-article-faq > .bs-article-faq-item:first-of-type {
  margin-top: 1.5rem;
}

.bs-article-faq-item[open] {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_bsa-accent) 30%, transparent), 0 16px 32px -24px color-mix(in srgb, var(--_bsa-shadow) 45%, transparent);
}

.bs-article-faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: calc(var(--_bsa-radius) * 0.875);
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.2s;
}

.bs-article-faq-item > summary::-webkit-details-marker {
  display: none;
}

.bs-article-faq-item > summary:hover {
  background-color: var(--_bsa-surface);
}

.bs-article-faq-item > summary:focus-visible {
  outline: 2px solid var(--_bsa-focus);
  outline-offset: 2px;
}

.bs-article-faq-item[open] > summary {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

.bs-article-faq-item > summary h3 {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.5rem;
  font-weight: 600;
}

.bs-article-faq-item > summary::after {
  content: "";
  flex: none;
  width: 2rem;
  height: 2rem;
  background-color: var(--_bsa-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill-opacity='.08'/%3E%3Cpath d='m12 14 4 4 4-4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill-opacity='.08'/%3E%3Cpath d='m12 14 4 4 4-4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform 0.2s;
}

.bs-article-faq-item[open] > summary::after {
  transform: rotate(180deg);
}

.bs-article-faq-answer {
  padding: 0.25rem 1.25rem 1.25rem;
}

.bs-article-faq-answer > :first-child {
  margin-top: 0;
}

.bs-article-faq-answer > :last-child {
  margin-bottom: 0;
}

/* The closing section, in a box tinted with the accent. */
.bs-article-closing {
  margin-top: 3.5rem;
  border-radius: var(--_bsa-radius);
  padding: 1.5rem;
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--_bsa-accent) 7%, transparent), color-mix(in srgb, var(--_bsa-accent) 4%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_bsa-accent) 14%, transparent);
}

.bs-article-closing > h2 {
  margin-top: 0;
  color: var(--_bsa-heading);
}

.bs-article-closing > :last-child {
  margin-bottom: 0;
}

/* The call to action: the accent (a gradient from it where the browser can turn its hue), its text in --bs-article-accent-ink.
   Links take the box's text colour; a site's own button classes win over that. */
.bs-article-cta {
  box-sizing: border-box;
  margin-top: 2.5rem;
  border-radius: var(--_bsa-radius);
  padding: 2rem 1.5rem;
  background: var(--bs-article-cta-bg, var(--_bsa-accent));
  color: var(--_bsa-accent-ink);
  box-shadow: 0 28px 56px -32px color-mix(in srgb, var(--_bsa-shadow) 60%, transparent);
}

@supports (color: oklch(from red l c h)) {
  .bs-article-cta {
    background: var(--bs-article-cta-bg, linear-gradient(135deg, var(--_bsa-accent), oklch(from var(--_bsa-accent) l c calc(h + 25))));
  }
}
.bs-article-cta > :first-child {
  margin-top: 0;
}

.bs-article-cta :is(h2, h3) {
  margin: 0;
  font-family: var(--bs-article-font-display, var(--bs-article-font));
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 600;
  color: inherit;
  text-wrap: balance;
}

.bs-article-cta p {
  margin: 0.75rem 0 0;
  line-height: 1.625rem;
  color: color-mix(in srgb, var(--_bsa-accent-ink) 88%, transparent);
}

:where(.bs-article-cta) a {
  color: inherit;
  font-weight: 600;
  text-decoration-line: underline;
  text-underline-offset: 0.2em;
}

:where(.bs-article-cta) a:focus-visible {
  outline: 2px solid var(--_bsa-accent-ink);
  outline-offset: 2px;
}

/* The share links. */
.bs-article-share {
  margin-top: 3rem;
  border-top: 1px solid var(--_bsa-border);
  padding-top: 2rem;
  color: var(--_bsa-ink);
}

.bs-article-share > :first-child {
  margin-top: 0;
}

.bs-article-share :is(h2, h3) {
  margin: 0;
  font-family: var(--bs-article-font-display, var(--bs-article-font));
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--_bsa-heading);
}

.bs-article-share ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.bs-article-share li {
  margin: 0;
  padding: 0;
}

.bs-article-share a {
  color: var(--_bsa-accent);
  font-weight: 500;
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, var(--_bsa-accent) 35%, transparent);
  text-underline-offset: 0.2em;
}

.bs-article-share a:hover {
  text-decoration-color: currentColor;
}

.bs-article-share a:focus-visible {
  outline: 2px solid var(--_bsa-focus);
  outline-offset: 2px;
  border-radius: 0.125rem;
}

/* The byline with the AI label: in the header under the meta line, and first in the publisher box. */
.bs-article-byline {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--_bsa-muted);
}

.bs-article-byline a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 0.2em;
}

.bs-article-byline a[rel~=author] {
  color: var(--_bsa-ink);
  font-weight: 600;
}

.bs-article-byline a:hover {
  text-decoration-color: currentColor;
}

.bs-article-byline a:focus-visible {
  outline: 2px solid var(--_bsa-focus);
  outline-offset: 2px;
  border-radius: 0.125rem;
}

/* The publisher box under a guide: the photo in a circle beside the byline, role, bio and the methodology link. */
.bs-article-publisher {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 3rem;
  border-radius: var(--_bsa-radius);
  background-color: var(--_bsa-surface);
  padding: 1.25rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_bsa-ink) 6%, transparent);
  color: var(--_bsa-ink);
}

.bs-article-publisher-photo {
  flex: none;
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  object-fit: cover;
  background-color: var(--_bsa-border);
}

.bs-article-publisher-text {
  min-width: 0;
}

.bs-article-publisher-text > p {
  margin: 0.375rem 0 0;
}

.bs-article-publisher-text > p:first-child {
  margin-top: 0;
}

.bs-article-publisher-role {
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--_bsa-muted);
}

.bs-article-publisher-bio {
  font-size: 0.9375rem;
  line-height: 1.5rem;
}

.bs-article-publisher-method a {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--_bsa-accent);
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, var(--_bsa-accent) 35%, transparent);
  text-underline-offset: 0.2em;
}

.bs-article-publisher-method a:hover {
  text-decoration-color: currentColor;
}

.bs-article-publisher-method a:focus-visible {
  outline: 2px solid var(--_bsa-focus);
  outline-offset: 2px;
  border-radius: 0.125rem;
}

/* A tool box in the text (BlogTool.Box): the picture, the pill, the title, a line and the link as a button. */
.bs-article-tool {
  box-sizing: border-box;
  display: grid;
  gap: 1.25rem;
  margin: 2.5rem 0;
  border-radius: var(--_bsa-radius);
  background-color: var(--_bsa-surface);
  padding: 1.25rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_bsa-accent) 18%, transparent);
  color: var(--_bsa-ink);
  line-height: 1.625rem;
}

.bs-article-tool p {
  margin: 0;
}

.bs-article-tool-image {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: calc(var(--_bsa-radius) * 0.75);
  background-color: var(--_bsa-border);
}

.bs-article-tool-content {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.bs-article-tool-eyebrow {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--_bsa-accent);
}

.bs-article-tool-title {
  font-family: var(--bs-article-font-display, var(--bs-article-font));
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--_bsa-heading);
}

.bs-article-tool-text {
  font-size: 1rem;
  color: var(--_bsa-muted);
}

.bs-article-tool-action {
  padding-top: 0.5rem;
}

.bs-article-tool-action a {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  background-color: var(--_bsa-accent);
  padding: 0.5rem 1.125rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5rem;
  color: var(--_bsa-accent-ink);
  text-decoration: none;
  transition: filter 0.2s;
}

.bs-article-tool-action a:hover {
  filter: brightness(1.08);
}

.bs-article-tool-action a:focus-visible {
  outline: 2px solid var(--_bsa-focus);
  outline-offset: 2px;
  border-radius: 9999px;
}

@media (min-width: 640px) {
  .bs-article-toc {
    padding: 1.75rem 2rem;
  }
  .bs-article-closing {
    padding: 2rem 2.5rem;
  }
  .bs-article-cta {
    padding: 2.5rem;
  }
  .bs-article-publisher {
    padding: 1.5rem;
  }
  .bs-article-tool {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: center;
    padding: 1.5rem;
  }
  .bs-article-tool > .bs-article-tool-content:only-child {
    grid-column: 1/-1;
  }
}
/* From 1280px the text grows with the window, in rem + vw so that the browser's zoom and default size still count. The parts follow
   it in em or by a factor; up to 1280px every size equals a plain 18px page (h2 30px, table 15px, contents 16px). */
@media (min-width: 1024px) {
  .bs-article-header h1 {
    font-size: var(--bs-article-title, clamp(2.625rem, 2.125rem + 0.625vw, 3.0625rem));
    line-height: 1.15;
  }
  .bs-article-lead {
    font-size: calc(var(--_bsa-text) * 1.1111);
    line-height: 1.6;
  }
  .bs-article-toc a {
    font-size: calc(var(--_bsa-text) * 0.8889);
    line-height: 1.5;
  }
  .bs-article-body {
    --_bsa-leading: var(--bs-article-leading, clamp(2rem, 1.7143rem + 0.3571vw, 2.25rem));
    font-size: var(--_bsa-text);
  }
  .bs-article-body h2 {
    font-size: 1.6667em;
  }
  .bs-article-body h3 {
    font-size: 1.1111em;
  }
  .bs-article-body :is(h4, h5, h6) {
    font-size: 0.9444em;
  }
  .bs-article-body pre {
    font-size: 0.7778em;
    line-height: 1.7143;
  }
  .bs-article-figure {
    margin-block: 3rem;
  }
  .bs-article-figure figcaption {
    font-size: 0.7778em;
    line-height: 1.5714;
  }
  .bs-article-table table {
    font-size: 0.8333em;
    line-height: 1.6;
  }
  .bs-article-faq-item > summary h3 {
    font-size: 0.9444em;
    line-height: 1.4118;
  }
  .bs-article-body .bs-article-tool-title {
    font-size: 1.1111em;
  }
  .bs-article-body .bs-article-tool-text {
    font-size: 0.8889em;
    line-height: 1.625;
  }
  .bs-article-cta :is(h2, h3) {
    font-size: calc(var(--_bsa-text) * 1.3333);
  }
  .bs-article-cta p {
    font-size: calc(var(--_bsa-text) * 0.8889);
    line-height: 1.625;
  }
}
/* Long compounds on a phone; tables and question cards a little tighter there. */
@media (max-width: 639px) {
  .bs-article-body,
  .bs-article-lead {
    hyphens: auto;
  }
  .bs-article-table table {
    font-size: 0.875rem;
    line-height: 1.375rem;
  }
  .bs-article-table :is(th, td) {
    padding: 0.625rem 0.75rem;
  }
  .bs-article-faq-item > summary {
    padding: 1rem;
  }
  .bs-article-faq-answer {
    padding: 0.25rem 1rem 1.25rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bs-article-toc a,
  .bs-article-toc a::before,
  .bs-article-body a,
  .bs-article-faq-item,
  .bs-article-faq-item > summary,
  .bs-article-faq-item > summary::after,
  .bs-article-tool-action a {
    transition: none;
  }
}
/* High contrast (forced colours): the drawn markers in the system's text colour. */
@media (forced-colors: active) {
  .bs-article-toc a::before,
  .bs-article-body ul > li::before,
  .bs-article-faq-item > summary::after {
    background-color: CanvasText;
    forced-color-adjust: none;
  }
}