/* Editorial template. Keep prose independent of the converter's UI type scale. */
.container:has(.blog-layout) { max-width: 960px; padding-inline: clamp(1.25rem, 5vw, 4rem); }
.blog-layout { --prose-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); --prose-leading: 1.9;
  max-width: 72ch; margin: 0 auto; padding-bottom: 3rem; overflow-wrap: anywhere; }
.blog-layout article { margin-top: 0; }
.blog-layout h1 { font-size: clamp(2rem, 1.4rem + 2vw, 3.1rem) !important;
  line-height: 1.18; text-align: left; margin: 1.25rem 0 1.75rem !important; text-wrap: balance; }
.blog-layout h2 { font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem); line-height: 1.35;
  margin: 3rem 0 1.1rem; text-wrap: balance; }
.blog-layout h3 { font-size: 1.2rem; line-height: 1.45; margin: 2rem 0 .85rem; }
.blog-layout p, .blog-layout article p, .blog-layout article li {
  font-family: var(--font-serif); font-size: var(--prose-size); line-height: var(--prose-leading); }
.blog-layout p, .blog-layout article p { margin: 0 0 1.5rem; max-width: none; }
.blog-layout article ul, .blog-layout article ol { margin: 0 0 1.75rem; padding-left: 1.5em; }
.blog-layout article li { margin: .7rem 0; padding-left: .25em; }
.blog-layout article a { text-decoration: underline; text-underline-offset: .18em; }
.blog-layout .post-meta, .blog-layout .crumbs, .blog-layout .meta {
  font: .85rem/1.7 var(--font-sans); color: var(--text-secondary); margin: .75rem 0; }
.blog-layout .hub-intro { font-size: clamp(1.15rem, 1rem + .5vw, 1.35rem); color: var(--text-secondary); }
.blog-layout [id] { scroll-margin-top: 6rem; }
.blog-layout img { max-width: 100%; height: auto; }
.blog-layout pre { overflow-x: auto; padding: 1rem; background: var(--bg-subtle); }
.blog-layout table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.blog-layout th, .blog-layout td { padding: .75rem; border-bottom: 1px solid var(--border); text-align: left; }
.blog-layout .toc { padding: 1.5rem; background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: .75rem; margin: 2rem 0; }
.blog-layout .toc ul { list-style: none; padding: 0; margin: .75rem 0 0; }
.blog-layout .toc li { font: .95rem/1.6 var(--font-sans); margin: .5rem 0; }
.blog-layout .blog-figure { margin: 2rem 0 2.5rem; max-width: 100%; min-width: 0; }
.blog-layout .blog-figure img { display: block; width: 100%; height: auto; border-radius: .75rem; }
.blog-layout figcaption { font: .8rem/1.6 var(--font-sans); color: var(--text-secondary); margin-top: .75rem; }
.blog-layout .proof-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; min-width: 0; }
.blog-layout .proof-pair > figure { margin: 0; min-width: 0; }
.blog-layout .proof-pair figcaption { margin-top: .4rem; }
.blog-layout .proof-pair img { background: #fffdf9; border: 1px solid var(--border); }
@media (max-width: 40rem) {
  .blog-layout .proof-pair { grid-template-columns: minmax(0, 1fr); }
}
.blog-layout .blog-converter { background: var(--bg-surface); border: 1px solid var(--border-strong);
  border-radius: 1rem; padding: clamp(1.25rem, 4vw, 2rem); margin: 2.5rem 0; }
.blog-layout .blog-converter h2 { margin: 0 0 .75rem; }
.blog-layout .blog-converter p { font: 1rem/1.65 var(--font-sans); margin-bottom: 1rem; }
.blog-layout .blog-converter .upload-wrap { margin: 1.25rem 0 0; max-width: none; }
.blog-layout .blog-converter .upload-cta { white-space: normal; }
.blog-layout .blog-converter .upload-hint { font-size: .875rem; margin: 0; }
.blog-layout .blog-converter .trust-strip { font-size: .8rem; line-height: 1.7; }
.blog-layout .blog-converter .upload-area:focus-within { outline: 2px solid var(--interactive); outline-offset: 4px; }
.blog-layout .reading-path { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font: .8rem/1.6 var(--font-sans);
  color: var(--text-secondary); padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.blog-layout .reading-path span:first-child { color: var(--text-link); }
.blog-layout .related p, .blog-layout .post-list p { font: .95rem/1.65 var(--font-sans); }
.blog-layout .cta-box p, .blog-layout .hub-card p { font: 1rem/1.7 var(--font-sans); }
.blog-layout .cta-box .btn { text-decoration: none; }
/* The site nav is wider than a small phone; let it take a second row. */
@media (max-width: 30rem) {
  body:has(.blog-layout) .site-header .wrap { height: auto; min-height: 60px; flex-wrap: wrap; gap: .5rem; padding-block: .75rem; }
  body:has(.blog-layout) .site-nav { flex-wrap: wrap; }
  .blog-layout .blog-converter .upload-wrap { padding: 0; border: 0; box-shadow: none; }
  .blog-layout .blog-converter .upload-area { padding: 1.75rem .75rem; }
  .blog-layout [id] { scroll-margin-top: 9rem; }
}

/* --- Post components --------------------------------------------------------
   Written by the template (blog.py): .short-version, .toc, .inline-cta and the
   .step-strip for Send to Kindle / Send to Kobo. Written by hand in a post:

   A figure with numbered callouts on the image —
     <figure class="blog-figure has-callouts">
       <div class="callout-wrap">
         <img src="…" alt="…" width="…" height="…" loading="lazy">
         <span class="callout" style="--x:32%;--y:18%">1</span>
       </div>
       <ol class="callout-list"><li>what 1 points at</li></ol>
       <figcaption>…</figcaption>
     </figure>
   --x and --y are the dot's centre as a percentage of the image box.

   A row of 2-4 steps — <div class="step-strip"> holding one <figure> per step.
   Captions number themselves in document order, so write no number.

   An FAQ entry — <details class="faq"><summary>Q</summary><p>A</p></details>.
   The summary keeps the h3 look, so a post can swap h3+p for it as it stands.
----------------------------------------------------------------------------- */
.blog-layout .toc strong, .blog-layout .short-version strong {
  font: 600 .8rem/1.6 var(--font-sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-secondary); }
.blog-layout .short-version { margin: 1.5rem 0 2rem; padding: 1.1rem 1.5rem;
  border-left: 3px solid var(--interactive); border-radius: 0 .5rem .5rem 0; background: var(--bg-subtle); }
.blog-layout .short-version ol { margin: .6rem 0 0; padding-left: 1.3em; }
.blog-layout .short-version li { margin: .35rem 0; }
.blog-layout .inline-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  font: 1rem/1.6 var(--font-sans); margin: 1.75rem 0; }
.blog-layout .inline-cta .btn { display: inline-block; width: auto; padding: .5rem 1.1rem;
  font-size: .95rem; text-decoration: none; }
.blog-layout .callout-wrap { position: relative; }
.blog-layout .callout-wrap img { display: block; width: 100%; height: auto; border-radius: .75rem; }
.blog-layout .callout { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  display: grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .35rem;
  border-radius: 999px; background: var(--interactive); color: var(--text-inverse);
  font: 700 .9rem/1 var(--font-sans);
  /* A white ring and a soft shadow: the dot has to read on a pale scan and on a dark screenshot. */
  box-shadow: 0 0 0 .18rem rgba(255, 255, 255, .92), 0 1px 4px rgba(0, 0, 0, .45); }
.blog-layout .callout-list { margin: .9rem 0 0; padding-left: 1.4em; }
.blog-layout .callout-list li { font: .95rem/1.6 var(--font-sans); margin: .3rem 0; }
/* The list already explains the image, so the caption sits closer to it. */
.blog-layout .has-callouts figcaption { margin-top: .5rem; }
.blog-layout .step-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.25rem; margin: 2rem 0 2.5rem; counter-reset: step; }
.blog-layout .step-strip > figure { margin: 0; min-width: 0; }
.blog-layout .step-strip img { display: block; width: 100%; height: auto; border-radius: .5rem;
  border: 1px solid var(--border); background: var(--bg-surface); }
.blog-layout .step-strip figcaption { margin-top: .5rem; }
.blog-layout .step-strip figcaption::before { counter-increment: step; content: counter(step) ". ";
  font-weight: 700; color: var(--text-link); }
.blog-layout details.faq { border-bottom: 1px solid var(--border); }
.blog-layout details.faq > summary { cursor: pointer; list-style: none; position: relative;
  font-size: 1.2rem; line-height: 1.45; font-weight: 700; margin: 0; padding: 1.1rem 1.75rem 1.1rem 0; }
.blog-layout details.faq > summary::-webkit-details-marker { display: none; }
.blog-layout details.faq > summary::after { content: "+"; position: absolute; right: .25rem;
  font-weight: 400; color: var(--text-secondary); }
.blog-layout details.faq[open] > summary::after { content: "–"; }
.blog-layout details.faq > :not(summary):last-child { margin-bottom: 1.25rem; }
@media (max-width: 40rem) {
  .blog-layout .step-strip { grid-template-columns: minmax(0, 1fr); }
}