/* Flowella 2026: the journal (the blog). Loaded by the blog listing, blog post and journal preview templates through
   the base layout's template_css, after tokens, base and components, and before the modules' own CSS.
   From the approved phase 2 concepts (design-concepts/phase2-2026-10/journal and journal-article):
   - the journal card (.jcard), shared by the listing and the related posts; the listing's lead variant is in the
     journal-posts module;
   - the post: the plain long-read hero (.ja-hero), the featured image over its foot (.ja-cover), the frame with the
     contents rail and sharing (.ja-frame, .ja-rail, .ja-toc, .ja-share);
   - the post body (.post-body, the concept's .ja-prose): every element HubSpot's rich text editor produces, including
     the inline styles it writes on images, figures and tables. The in-article demo (.ja-flow) keeps its own
     components, so the element rules here leave it alone.
   Logical properties throughout, so Arabic (dir="rtl") mirrors without overrides. */

/* ===== The journal card: the featured image at 3:2, the first tag (Lagoon Mint, Open Sky or Sunset Coral by position,
   set as --pc), the date and reading time, and a title whose link covers the card ===== */
.jcard { position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.jcard-img { position: relative; aspect-ratio: 3 / 2; border-radius: 28px; overflow: hidden; background: var(--surface-2); }
.jcard-img img { width: 100%; height: 100%; object-fit: cover; transition: scale 280ms var(--ease-out); }
/* A post without a featured image we can show keeps its slot, with the Resources section's pages icon */
.jcard-img.is-empty { display: grid; place-items: center; color: var(--line-strong); }
.jcard-img.is-empty .i { width: 56px; height: 56px; }
.jcard-body { display: grid; gap: 10px; align-content: start; min-width: 0; }
.jcard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 30px; font-size: 14px; line-height: 1.3; color: var(--ink-soft); }
.jcard-meta time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.jcard-tag { background: var(--pc, var(--mint)); color: var(--on-bright); }
.jcard-title { font: 800 1.2rem/1.3 var(--text); letter-spacing: -0.01em; text-wrap: balance; overflow-wrap: break-word; }
.jcard-title a { color: inherit; text-decoration: none; }
.jcard-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 28px; }
.jcard-title a:focus-visible { outline: none; }
.jcard-title a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 6px; }
/* The reading time follows the date after a small dot (also used in the post's byline) */
.ja-dot { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ja-dot::before { content: ""; flex: none; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.6; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .jcard:hover .jcard-img img { scale: 1.04; }
}
@media (hover: hover) and (pointer: fine) {
  .jcard:hover .jcard-title a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
}
@media (prefers-reduced-motion: reduce) {
  .jcard-img img { transition: none; }
}

/* ===== The post ===== */
/* Frame: one centred column; from 1180px a contents rail on the start side and the main column, where text keeps a
   reading measure and figures widen to the column's full width */
.ja-frame { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1180px) {
  .ja-frame { grid-template-columns: [rail] minmax(0, 220px) [main] minmax(0, 1fr); column-gap: clamp(48px, 4.4vw, 68px); }
  .ja-frame > * { grid-column: main; }
  .ja-frame > .ja-hero-copy { grid-column: rail / -1; }
  .ja-frame > .ja-rail { grid-column: rail; }
}

/* Hero: Sky Field, no motif and no Flo, as a long read allows (DESIGN.md, The Section Signature Rule). The wayfinding
   tab reads Journal › the post's first tag; both are links (the tag page is the topic, not this page). The field's
   deep foot is the room the featured image overlaps; a post without one keeps a normal foot. */
.ja-hero { padding-top: 6px; --crumbs-disc: var(--sky); --crumbs-disc-ink: var(--on-bright); }
.ja-hero-field {
  margin-inline: var(--inset);
  border-radius: var(--r-xl);
  background: var(--field-sky);
  padding-block: clamp(22px, 2.2vw, 34px) clamp(132px, 13vw, 200px);
}
.ja-hero.no-cover .ja-hero-field { padding-block-end: clamp(40px, 5vw, 64px); }
.ja-hero-copy { display: grid; gap: 22px; justify-items: start; min-width: 0; }
.ja-title {
  font-size: clamp(2.1rem, 1.15rem + 2.7vw, 3.5rem);
  font-weight: 750;
  line-height: 1.08;
  max-width: min(100%, 15em);
  overflow-wrap: break-word;
}
.ja-standfirst { max-width: 36em; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
.ja-byline { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ja-ava { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--surface-2); box-shadow: 0 0 0 3px var(--surface); }
.ja-ava.is-initials { display: grid; place-items: center; background: var(--btn-bg); color: var(--btn-ink); font: 800 15px/1 var(--display); }
.ja-byline-text { display: grid; gap: 3px; min-width: 0; font-size: 15px; line-height: 1.35; }
.ja-author {
  justify-self: start; position: relative;
  font-weight: 800; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color 160ms ease;
}
span.ja-author { text-decoration: none; }
.ja-author::before { content: ""; position: absolute; inset: -12px -4px; }
@media (hover: hover) and (pointer: fine) { a.ja-author:hover { text-decoration-color: currentColor; } }
.ja-byline-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Cover: the featured image overlaps the field's foot, aligned with the article column */
.ja-cover-frame { position: relative; z-index: 1; margin-top: calc(-1 * clamp(104px, 10.5vw, 168px)); }
.ja-cover { margin: 0; }
.ja-cover img { width: 100%; height: auto; border-radius: 28px; background: var(--surface-2); box-shadow: var(--shadow); }
@media (max-width: 1179px) {
  .ja-cover { width: min(100%, 960px); margin-inline: auto; }
  .ja-hero-copy { width: min(100%, 760px); margin-inline: auto; }
}

/* Body: the rail and the post */
.ja-body { margin-top: clamp(40px, 5vw, 72px); container-type: inline-size; }
.ja-main { min-width: 0; }
@media (max-width: 1179px) {
  .ja-main { width: min(100%, 680px); margin-inline: auto; }
}

/* The rail: contents that follow the reader on wide screens, then sharing. Hidden below 1180px, where the contents
   open from a disclosure at the top of the post and sharing follows the post. */
.ja-rail { display: none; }
.ja-rail-in { display: grid; gap: 32px; }
.ja-toc-title { margin-bottom: 10px; font: 800 15px/1.3 var(--text); color: var(--ink); }
.ja-toc-list { display: grid; gap: 2px; }
.ja-toc-list a {
  display: block; padding: 8px 12px; border-radius: 12px;
  color: var(--ink-soft); font: 600 14.5px/1.35 var(--text);
  text-decoration: none; text-wrap: pretty; overflow-wrap: break-word;
  transition: background-color 160ms ease, color 160ms ease;
}
.ja-toc-list a[aria-current="true"] { background: var(--field-sky); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .ja-toc-list a:not([aria-current]):hover { background: var(--surface-2); color: var(--ink); }
}
@media (min-width: 1180px) {
  .ja-rail { display: block; }
  .ja-rail-in {
    position: sticky; top: calc(var(--header-h) + 28px);
    max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto;
    overscroll-behavior: contain; scrollbar-width: thin;
    padding-block: 4px 8px; padding-inline: 0 4px;
  }
  .ja-main > .ja-toc-m, .ja-main > .ja-share-end { display: none; }
}

/* Contents on narrower screens: a disclosure row, the theme's FAQ pattern */
.ja-toc-m { margin-bottom: 36px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-xs); }
.ja-toc-m summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding-inline: 18px;
  font: 800 17px/1.3 var(--text); cursor: pointer; list-style: none;
  border-radius: 22px;
  -webkit-tap-highlight-color: transparent;
}
.ja-toc-m summary::-webkit-details-marker { display: none; }
.ja-toc-m summary::marker { content: ""; }
.ja-toc-m summary .i { transition: rotate 200ms var(--ease-out); }
.ja-toc-m[open] summary .i { rotate: 180deg; }
.ja-toc-m .ja-toc-list { padding: 0 8px 12px; }

/* Sharing: LinkedIn, X and WhatsApp, plus copying the link */
.ja-share { display: grid; gap: 12px; }
.ja-share-title { font: 800 15px/1.3 var(--text); }
.ja-share-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ja-share-btn {
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms var(--ease-out);
}
.ja-share-btn .i { width: 18px; height: 18px; }
.ja-share-btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .ja-share-btn:hover { border-color: var(--line-strong); background: var(--surface-2); } }
/* The copy note changes while it is read, so it is never the scroll anchor */
.ja-share-note { min-height: 1.4em; font: 700 14px/1.4 var(--text); color: var(--ink-soft); overflow-anchor: none; }
.ja-share-end { margin-top: clamp(40px, 5vw, 56px); padding-top: 28px; border-top: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) {
  .ja-toc-m summary .i { transition: none; }
  .ja-share-btn:active { transform: none; }
}

/* ===== The post body: HubSpot rich text. The editor writes inline styles on images, figures and tables; the rules
   that must beat them say !important. The demo (.ja-flow) sits in the body as a module and keeps its own look.
   In the post editor the body arrives inside HubSpot's wrapper span, so the measure and rhythm rules also look one
   level down. ===== */
.post-body { --measure: 680px; font-size: 18px; line-height: 1.7; color: var(--ink); overflow-wrap: break-word; }
.post-body > .hs_cos_wrapper { display: contents; }
.post-body > *, .post-body > .hs_cos_wrapper > * { max-width: var(--measure); }
.post-body > * + *, .post-body > .hs_cos_wrapper > * + * { margin-top: 1.15em; }
.post-body p:not(.ja-flow *) { text-wrap: pretty; }
.post-body :is(strong, b):not(.ja-flow *) { font-weight: 750; }
.post-body a:not(.ja-flow *) {
  color: var(--accent-ink); font-weight: 650;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color 160ms ease;
}
@media (hover: hover) and (pointer: fine) { .post-body a:not(.ja-flow *):hover { text-decoration-color: currentColor; } }
.post-body :is(h1, h2):not(.ja-flow *) {
  margin-top: 2.1em;
  font: 700 clamp(1.5rem, 1.12rem + 1.05vw, 2rem)/1.16 var(--display);
  letter-spacing: -0.02em; text-wrap: balance;
  scroll-margin-top: 112px;
}
.post-body h3:not(.ja-flow *) { margin-top: 1.7em; font: 800 1.3rem/1.25 var(--text); letter-spacing: -0.01em; text-wrap: balance; scroll-margin-top: 112px; }
.post-body :is(h4, h5, h6):not(.ja-flow *) { margin-top: 1.5em; font: 800 1.08rem/1.35 var(--text); text-wrap: balance; scroll-margin-top: 112px; }
.post-body > :is(h1, h2, h3, h4, h5, h6) + *, .post-body > .hs_cos_wrapper > :is(h1, h2, h3, h4, h5, h6) + * { margin-top: 0.7em; }
.post-body > :first-child, .post-body > .hs_cos_wrapper > :first-child { margin-top: 0; }
/* Text pasted into the editor can carry its own face, size or highlight; the theme's type wins */
.post-body :is(strong, b, span, em, i)[style*="font-family"]:not(.ja-flow *) { font-family: inherit !important; }
.post-body :is(h1, h2, h3, h4, h5, h6) :is(strong, b, span)[style]:not(.ja-flow *) { font-size: inherit !important; background-color: transparent !important; }
:lang(ar) .post-body :is(h1, h2):not(.ja-flow *) { letter-spacing: 0; line-height: 1.35; }
:lang(ar) .post-body { line-height: 1.85; }
.post-body :is(em, i):not(.ja-flow *) { font-style: italic; }
.post-body u:not(.ja-flow *) { text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
.post-body :is(s, del):not(.ja-flow *) { color: var(--ink-soft); }
.post-body mark:not(.ja-flow *) { padding: 0 0.15em; border-radius: 4px; background: var(--field-green); color: var(--ink); }
.post-body small:not(.ja-flow *) { font-size: 0.86em; }

/* Lists: Open Sky dots; numbered steps in Unbounded on Sky Field discs. A nested list steps in under its item. */
.post-body :is(ul, ol):not(.ja-flow *) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6em; padding: 0; list-style: none; }
/* A list item, link or embedded HubSpot card can always shrink to the column: a long address (a source list, a
   link written out in full) wraps rather than widen the page on a phone */
.post-body li:not(.ja-flow *), .post-body [class*="hs-elevate"]:not(.ja-flow *) { min-width: 0; }
.post-body a:not(.ja-flow *) { overflow-wrap: anywhere; }
.post-body li :is(ul, ol):not(.ja-flow *) { margin-top: 0.6em; }
.post-body ul:not(.ja-flow *) > li { position: relative; padding-inline-start: 1.55em; }
.post-body ul:not(.ja-flow *) > li::before {
  content: ""; position: absolute; inset-inline-start: 0.3em; top: 0.66em;
  width: 0.45em; height: 0.45em; border-radius: 50%; background: var(--sky);
}
.post-body li :is(ul):not(.ja-flow *) > li::before { background: transparent; box-shadow: inset 0 0 0 2px var(--sky); }
.post-body ul:not(.ja-flow *) > li[style*="list-style-type: none"]::before { display: none; }
.post-body ol:not(.ja-flow *) { counter-reset: ja-ol; }
.post-body ol:not(.ja-flow *) > li { position: relative; min-height: 1.75em; padding-inline-start: 2.5em; counter-increment: ja-ol; }
.post-body ol:not(.ja-flow *) > li::before {
  content: counter(ja-ol); position: absolute; inset-inline-start: 0; top: 0.12em;
  width: 1.95em; height: 1.95em; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--field-sky); color: var(--ink);
  font: 700 0.78em/1 var(--display); font-variant-numeric: tabular-nums;
}
.post-body li > p:not(.ja-flow *) + p { margin-top: 0.5em; }
.post-body dl:not(.ja-flow *) { display: grid; gap: 0.4em; }
.post-body dt:not(.ja-flow *) { font-weight: 800; }
.post-body dd:not(.ja-flow *) { margin: 0 0 0.6em; padding-inline-start: 1.2em; color: var(--ink-soft); }

/* Quotations: a Mist panel with a large Open Sky quote mark, the quote in Figtree 500 and its source beneath. Not
   the customer quote bubble, which is for approved testimonials only. */
.post-body blockquote:not(.ja-flow *) {
  position: relative; margin-top: 1.6em; margin-inline: 0;
  padding: 30px clamp(22px, 3vw, 34px) 24px; padding-inline-start: clamp(30px, 4vw, 52px);
  border: 0; border-radius: 22px; background: var(--surface-2);
}
.post-body blockquote:not(.ja-flow *)::before {
  content: "\201C"; position: absolute; top: 0.08em; inset-inline-start: 0.22em;
  font: 800 3.4rem/1 var(--display); color: var(--sky);
}
[dir="rtl"] .post-body blockquote:not(.ja-flow *)::before { content: "\201D"; }
.post-body blockquote:not(.ja-flow *) > p:first-child { font: 500 1.12rem/1.55 var(--text); }
.post-body blockquote:not(.ja-flow *) > p + p { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.post-body blockquote:not(.ja-flow *) em { font-style: normal; }

/* Figures and images. Figures widen to the main column (and past the measure on narrower screens), with the caption
   at reading width. The editor's inline sizes, margins, centring and caption colours give way to the theme's. */
.post-body > :is(figure, .ja-flow, .hs-embed-wrapper, .hs-responsive-embed-wrapper),
.post-body > .hs_cos_wrapper > :is(figure, .ja-flow) { max-width: none; margin-top: 2em; }
.post-body > :is(figure, .ja-flow) + *, .post-body > .hs_cos_wrapper > :is(figure, .ja-flow) + * { margin-top: 1.6em; }
@media (max-width: 1179px) {
  .post-body > :is(figure, .ja-flow), .post-body > .hs_cos_wrapper > :is(figure, .ja-flow) { margin-inline: calc((100% - min(100cqw, 960px)) / 2) !important; }
}
.post-body figure:not(.ja-flow, .ja-flow *) { margin-block-end: 0 !important; margin-inline: 0; text-align: start !important; }
.post-body figure:not(.ja-flow, .ja-flow *) img {
  display: block; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important;
  border: 1px solid var(--line); border-radius: 22px !important; background: var(--surface);
}
.post-body figure:not(.ja-flow, .ja-flow *) figcaption {
  max-width: var(--measure); margin-top: 12px !important;
  font-size: 15px !important; line-height: 1.5; color: var(--ink-soft) !important; text-align: start !important; text-wrap: pretty;
}
@media (max-width: 1179px) {
  .post-body figure:not(.ja-flow, .ja-flow *) figcaption { margin-inline: auto; padding-inline: max(0px, calc((min(100cqw, 960px) - 100%) / 2)); max-width: none; }
}
/* An image placed straight into the text (not in a figure) keeps its own width up to the measure */
.post-body :is(p, div, a, span) > img:not(.ja-flow *) {
  display: block; max-width: 100% !important; height: auto !important; margin-inline: auto;
  border: 1px solid var(--line); border-radius: 22px !important; background: var(--surface);
}
.post-body p:has(> img:only-child):not(.ja-flow *) { margin-top: 1.6em; }
/* Video and embeds: HubSpot's responsive wrappers, rounded like the figures */
.post-body :is(iframe, video):not(.ja-flow *) { display: block; max-width: 100%; border: 0; border-radius: 22px; }
.post-body :is(.hs-responsive-embed-wrapper, .hs-embed-wrapper, div[style*="padding-bottom"]):not(.ja-flow *) { border-radius: 22px; overflow: hidden; }

/* Tables: HubSpot's responsive wrapper scrolls sideways on a phone; a table without it scrolls itself. The editor's
   black borders and 3px padding give way to the theme's table. */
.post-body [data-hs-responsive-table]:not(.ja-flow *) {
  margin-top: 1.5em; max-width: 100% !important;
  overflow-x: auto !important;
  border: 1px solid var(--line); border-radius: 22px;
  background: var(--surface);
  scrollbar-width: thin;
}
.post-body table:not(.ja-flow *):not([data-hs-responsive-table] table) {
  display: block; max-width: 100%; min-width: 0 !important; overflow-x: auto; margin-top: 1.5em;
  border: 1px solid var(--line) !important; border-radius: 22px; background: var(--surface);
}
.post-body table:not(.ja-flow *) {
  width: 100% !important; min-width: 520px;
  border: 0 !important; border-collapse: separate; border-spacing: 0;
  font-size: 16px; line-height: 1.45;
}
.post-body table:not(.ja-flow *) caption { caption-side: top; padding: 14px 16px 10px; text-align: start; font: 800 16px/1.35 var(--text); }
.post-body table:not(.ja-flow *) :is(th, td) {
  padding: 13px 16px !important;
  border: 0 !important; border-bottom: 1px solid var(--line) !important;
  text-align: start; vertical-align: top;
}
.post-body table:not(.ja-flow *) thead th, .post-body table:not(.ja-flow *) thead td { background: var(--surface-2); font: 700 15px/1.3 var(--text); }
.post-body table:not(.ja-flow *) tbody tr:last-child > * { border-bottom: 0 !important; }
/* The row labels stay put while a narrow table scrolls sideways, as in the theme's .table, so a cut-off column reads as
   more to scroll rather than missing */
.post-body table:not(.ja-flow *) :is(th, td):first-child {
  position: sticky; inset-inline-start: 0; z-index: 1;
  background: var(--surface); color: var(--ink);
  border-inline-end: 1px solid var(--line) !important;
}
.post-body table:not(.ja-flow *) thead :is(th, td):first-child { background: var(--surface-2); }

/* Inline code, preformatted text, citations, the rule before the references */
.post-body code:not(.ja-flow *) {
  padding: 0.08em 0.32em; border-radius: 7px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
  font: 600 0.86em/1.3 var(--mono);
  overflow-wrap: anywhere;
}
.post-body pre:not(.ja-flow *) {
  overflow-x: auto; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface-2); color: var(--ink); font: 500 14px/1.55 var(--mono);
  direction: ltr; text-align: left; scrollbar-width: thin;
}
.post-body pre:not(.ja-flow *) code { padding: 0; border: 0; background: none; font: inherit; overflow-wrap: normal; }
.post-body :is(sup, sub):not(.ja-flow *) { line-height: 0; font-size: 0.68em; }
.post-body sup:not(.ja-flow *) { vertical-align: 0.55em; }
.post-body sup:not(.ja-flow *) a { padding-inline: 0.12em; font-weight: 700; text-decoration: none; font-variant-numeric: tabular-nums; scroll-margin-top: 140px; }
.post-body hr:not(.ja-flow *) { height: 2px; margin-block: 2.6em 0; margin-inline: 0; border: 0; border-radius: 2px; background: var(--line); }

/* References: a numbered list of sources, each with a way back to where it is cited (the post script adds the back
   link where the body has none) */
.post-body h2#references:not(.ja-flow *) { font-size: clamp(1.3rem, 1.1rem + 0.5vw, 1.5rem); }
.post-body ol:has(> li[id^="ref-"]):not(.ja-flow *) { gap: 14px; font-size: 15.5px; line-height: 1.5; }
.post-body ol:not(.ja-flow *) > li[id^="ref-"] { scroll-margin-top: 140px; border-radius: 14px; }
.post-body ol:not(.ja-flow *) > li[id^="ref-"]::before { background: var(--surface-2); }
.post-body [id^="ref-"] > a[href^="#cite-"] {
  display: inline-flex; align-items: center; gap: 4px;
  margin-inline-start: 4px; padding: 2px 10px 2px 8px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-soft);
  font: 700 13px/1.4 var(--text); text-decoration: none; white-space: nowrap;
}
.post-body [id^="ref-"] > a[href^="#cite-"]::before {
  content: ""; width: 12px; height: 12px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%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 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* A jump to a reference, or back to its citation, marks where it landed */
.post-body :is(li, a):target:not(.ja-flow *) { background-color: var(--field-sky); box-shadow: 0 0 0 4px var(--field-sky); }

/* A call-to-action block written into a post (div.blog-cta): a Mist panel, its link as a text link with weight */
.post-body .blog-cta:not(.ja-flow *) { display: grid; gap: 10px; justify-items: start; margin-top: 2em; padding: clamp(20px, 2.6vw, 28px); border-radius: 22px; background: var(--surface-2); }
.post-body .blog-cta:not(.ja-flow *) > * { margin: 0; }
.post-body .blog-cta:not(.ja-flow *) h3 { margin: 0; }

/* ===== Phones, as in the concept: the body's text a size down from 719px, the title from 479px ===== */
@media (max-width: 719px) {
  .post-body { font-size: 17px; }
}
@media (max-width: 479px) {
  .ja-title { font-size: 1.9rem; }
}