/* ============================================================
   Clearlii — article / prose styles
   Rich content for blog posts, changelog and long-form pages.
   Wrap article body in <article class="prose"> … </article>
   ============================================================ */

.article-wrap { max-width: 820px; margin-inline: auto; padding-block: 24px 90px; }
.article-hero { max-width: 820px; margin-inline: auto; padding-top: 20px; }
.article-hero .breadcrumb { margin-bottom: 18px; }
.article-hero .tag { display:inline-flex; align-items:center; height:26px; padding:0 12px; border-radius:999px; font-size:12px; font-weight:600; letter-spacing:.02em; background:rgba(121,33,129,.1); color:var(--purple); }
.article-hero h1 { font-size: clamp(34px, 5vw, 60px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; margin: 18px 0 0; color: var(--ink); text-wrap: balance; }
.article-hero .standfirst { font-size: 20px; line-height: 1.55; color: var(--muted); margin: 18px 0 0; }
.article-meta { display:flex; align-items:center; gap:14px; margin-top:24px; flex-wrap:wrap; color:var(--muted); font-size:14px; }
.article-meta .who { display:flex; align-items:center; gap:10px; }
.article-meta .av { width:40px; height:40px; border-radius:50%; background:linear-gradient(150deg,var(--purple),var(--blue)); color:#fff; display:grid; place-items:center; font-weight:600; font-size:14px; }
.article-meta .who b { color:var(--ink); font-weight:500; display:block; font-size:14px; }
.article-meta .dot-sep { width:4px; height:4px; border-radius:50%; background:#cdd0d8; }
.article-cover { border-radius: var(--r-lg); overflow:hidden; margin: 34px 0 0; box-shadow: var(--sh-card); }
.article-cover img { width:100%; display:block; }

/* ---- the prose body ---- */
.prose { font-size: 18px; line-height: 1.75; color: #2a2b30; }
.prose > * + * { margin-top: 1.35em; }
.prose h2 { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; color: var(--ink); margin-top: 1.8em; }
.prose h3 { font-size: 23px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin-top: 1.6em; }
.prose h4 { font-size: 19px; font-weight: 600; color: var(--ink); margin-top: 1.4em; }
.prose h2 + p, .prose h3 + p, .prose h4 + p { margin-top: .6em; }
.prose p { margin: 0; }
.prose a { color: var(--purple); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: color .15s; }
.prose a:hover { color: var(--blue); }
.prose strong { font-weight: 600; color: var(--ink); }
.prose small { font-size: 80%; color: var(--muted); }
.prose mark { background: rgba(179,26,239,.16); color: inherit; padding: 0 3px; border-radius: 4px; }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 2.4em 0; }

/* lists */
.prose ul, .prose ol { margin: 1.2em 0; padding-left: 1.4em; }
.prose li { margin: .45em 0; padding-left: .2em; }
.prose li::marker { color: var(--purple); }
.prose ul li::marker { font-size: 1.1em; }
.prose ol { counter-reset: li; list-style: none; padding-left: 0; }
.prose ol > li { counter-increment: li; position: relative; padding-left: 2.4em; }
.prose ol > li::before { content: counter(li); position:absolute; left:0; top:.05em; width:1.7em; height:1.7em; border-radius:50%; background:rgba(121,33,129,.1); color:var(--purple); font-size:.8em; font-weight:700; display:grid; place-items:center; }
.prose ul ul, .prose ol ol, .prose ul ol, .prose ol ul { margin:.4em 0; }
.prose dl { margin:1.2em 0; }
.prose dt { font-weight:600; color:var(--ink); }
.prose dd { margin:.2em 0 1em; color:var(--muted); }

/* checklist / task list */
.prose ul.checklist { list-style:none; padding-left:0; }
.prose ul.checklist li { padding-left:2em; position:relative; }
.prose ul.checklist li::before { content:''; position:absolute; left:0; top:.35em; width:1.15em; height:1.15em; border-radius:6px; background:var(--purple); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/70% no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/70% no-repeat; }

/* blockquote */
.prose blockquote { margin: 1.8em 0; padding: 4px 0 4px 28px; border-left: 4px solid var(--purple); font-size: 22px; line-height: 1.5; font-style: italic; color: var(--ink); }
.prose blockquote p { margin: 0; }
.prose blockquote cite { display:block; margin-top:.6em; font-size:15px; font-style:normal; color:var(--muted); }
.prose blockquote cite::before { content:'— '; }
.prose blockquote.pull { border:none; text-align:center; padding:0; font-size:26px; letter-spacing:-0.01em; color:var(--purple); }

/* callouts */
.prose .callout { display:flex; gap:14px; padding:20px 22px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line); font-size:16px; line-height:1.6; }
.prose .callout .ci { flex:none; width:26px; height:26px; color:var(--purple); }
.prose .callout p { margin:0; }
.prose .callout.info { background:rgba(40,53,131,.05); border-color:rgba(40,53,131,.18); }
.prose .callout.info .ci { color:var(--blue); }
.prose .callout.tip { background:rgba(31,138,91,.07); border-color:rgba(31,138,91,.22); }
.prose .callout.tip .ci { color:#1f8a5b; }
.prose .callout.warn { background:rgba(216,90,125,.07); border-color:rgba(216,90,125,.25); }
.prose .callout.warn .ci { color:#d65a7d; }

/* code */
.prose code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .88em; background: var(--surface-2); padding: .15em .45em; border-radius: 6px; color: #6a1b74; }
.prose pre { background: #1a1620; color: #eee; border-radius: var(--r-md); padding: 22px 24px; overflow-x: auto; font-size: 14.5px; line-height: 1.6; }
.prose pre code { background: none; color: inherit; padding: 0; font-size: inherit; }

/* tables */
.prose .table-scroll { overflow-x:auto; border-radius:var(--r-md); border:1px solid var(--line); }
.prose table { width:100%; border-collapse:collapse; font-size:15.5px; background:#fff; min-width:520px; }
.prose thead th { background:var(--surface); text-align:left; font-weight:600; color:var(--ink); padding:14px 18px; border-bottom:1px solid var(--line); }
.prose tbody td, .prose tbody th { padding:13px 18px; border-bottom:1px solid var(--line); text-align:left; }
.prose tbody tr:last-child td, .prose tbody tr:last-child th { border-bottom:none; }
.prose tbody tr:hover td, .prose tbody tr:hover th { background:#faf7fb; }
.prose td.num, .prose th.num { text-align:right; font-variant-numeric:tabular-nums; }
.prose caption { caption-side:bottom; font-size:13px; color:var(--muted); padding-top:10px; text-align:left; }

/* media: images, figures, video, audio, iframe embeds */
.prose img { max-width:100%; border-radius:var(--r-md); display:block; }
.prose figure { margin: 1.8em 0; }
.prose figure img, .prose figure video { width:100%; }
.prose figcaption { font-size:14px; color:var(--muted); margin-top:10px; text-align:center; }
.prose video, .prose audio, .prose iframe { max-width:100%; border-radius:var(--r-md); display:block; }
.prose video { width:100%; background:#000; }
.prose audio { width:100%; }
.prose .embed { position:relative; padding-top:56.25%; border-radius:var(--r-md); overflow:hidden; }
.prose .embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:0; }
.prose figure.wide { width:min(1080px,92vw); margin-inline:calc(50% - min(540px,46vw)); }

/* alignment helpers */
.prose .align-left { text-align:left; }
.prose .align-center { text-align:center; }
.prose .align-right { text-align:right; }
.prose .align-justify { text-align:justify; }
.prose figure.float-left { float:left; width:min(46%,340px); margin:.4em 1.6em 1.2em 0; }
.prose figure.float-right { float:right; width:min(46%,340px); margin:.4em 0 1.2em 1.6em; }
.prose .clear { clear:both; }
.prose .cols-2 { column-count:2; column-gap:36px; }
.prose .cols-2 p { margin-top:0; }

/* lead paragraph + first-letter option */
.prose .lead-p { font-size:21px; line-height:1.6; color:var(--ink); }
.prose .dropcap::first-letter { float:left; font-size:3.4em; line-height:.8; font-weight:600; padding:6px 12px 0 0; color:var(--purple); }

/* footnotes / references */
.prose .footnotes { font-size:14px; color:var(--muted); border-top:1px solid var(--line); margin-top:2.4em; padding-top:1.4em; }
.prose .footnotes ol { padding-left:1.4em; }
.prose sup a { text-decoration:none; }
.prose kbd { font-family:ui-monospace,monospace; font-size:.82em; background:#fff; border:1px solid var(--line); border-bottom-width:2px; border-radius:6px; padding:.1em .5em; color:var(--ink); }

/* keep media & long words in-bounds on mobile */
.prose { overflow-wrap:break-word; }

/* share + tags footer (reused from article page) */
.article-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:40px; }
.article-tags a { font-size:13px; padding:6px 14px; border-radius:999px; background:var(--surface); color:var(--muted); transition:.15s; }
.article-tags a:hover { background:var(--purple); color:#fff; }

@media (max-width: 700px){
  .prose { font-size:17px; }
  .prose h2 { font-size:26px; }
  .prose .cols-2 { column-count:1; }
  .prose figure.float-left, .prose figure.float-right { float:none; width:100%; margin:1.4em 0; }
  .prose blockquote { font-size:20px; }
}

/* ── CMS bodies: neutralise Google-Docs / rich-text inline styles so the
   .prose typography above wins (posts render $single_post.text pasted from
   Docs with inline Arial 11pt, color:#000, list-style:disc,
   padding-inline-start:48px, white-space:pre…). ── */
.prose span {
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
  background: transparent !important;
  white-space: normal !important;
  vertical-align: baseline !important;
  letter-spacing: normal !important;
}
.prose p, .prose li, .prose td, .prose th, .prose h1, .prose h2, .prose h3, .prose h4 { white-space: normal !important; }
.prose p { font-family: inherit !important; }
.prose ul, .prose ol { padding-inline-start: 0 !important; }
.prose ul { padding-left: 1.4em !important; }
.prose ol { padding-left: 0 !important; }
.prose li { font-family: inherit !important; font-size: inherit !important; }
.prose ol > li { list-style: none !important; }   /* let .prose numbered circles show */