posts and avif

styles/styles.css

@@ -487,6 +487,96 @@ treatment it replaces, which read as the wrong category for the work.
     overflow-wrap: anywhere;
   }
 
+  /* Only reached by a post with no excerpt to trail — normally the read-more
+     link rides at the end of .post-card__excerpt instead. */
+  .post-card__more { margin-top: var(--s-1); }
+
+  /* Trailing an excerpt, the link is part of that paragraph and wraps with it,
+     but it must not break across lines itself: "Read the full / post →" reads
+     as two different things. */
+  .post-card__excerpt .link-more { white-space: nowrap; }
+
+  /* ── one post, in full ──────────────────────────────────────────────
+     The body is prose rendered from Markdown by Catcrafts.Shared:Markdown,
+     so the element set here is exactly what that module can emit and no
+     more. Everything is capped at --measure: a post page is reading
+     material, and full-viewport line lengths are not read, they are
+     skimmed. Media is the exception — it keeps the full column, because a
+     screenshot of a feature-support table is unreadable at text width. */
+  .post-body {
+    display: grid;
+    gap: var(--s0);
+    margin-top: var(--s1);
+  }
+  /* The measure goes on the prose, not on the container, so media can use the
+     full column: a post page is reading material and full-viewport line
+     lengths get skimmed rather than read, but a screenshot of a feature
+     support table is unreadable at text width. */
+  .post-body > :not(.post-media) { max-width: var(--measure); }
+  /* .post-media carries its own top margin for the cards, where it follows an
+     excerpt; inside this grid the gap already provides it. */
+  .post-body > .post-media { margin-top: 0; }
+  /* Grid items default to min-width:auto, which refuses to shrink below their
+     content. Without this the overflow-x on a code block below never engages —
+     the track widens instead and the whole PAGE scrolls sideways, which is the
+     one thing wide content must never cause. */
+  .post-body > *, .post-body__quote > * { min-width: 0; }
+
+  .post-body h2 { font-size: var(--step-2); letter-spacing: -0.01em; }
+  .post-body h3 { font-size: var(--step-1); }
+  .post-body h4, .post-body h5, .post-body h6 { font-size: var(--step-0); }
+  /* Extra air above a heading, none below: a heading belongs to what
+     follows it, and the grid gap alone reads as floating between two
+     equally distant paragraphs. */
+  .post-body :is(h2, h3, h4, h5, h6) { margin-top: var(--s1); }
+  .post-body :is(h2, h3, h4, h5, h6):first-child { margin-top: 0; }
+
+  .post-body a { overflow-wrap: anywhere; }
+
+  .post-body__list { padding-left: var(--s1); display: grid; gap: var(--s-2); }
+  .post-body__list li { padding-left: var(--s-3); }
+
+  .post-body__quote {
+    padding: var(--s-2) var(--s0);
+    border-left: 2px solid var(--border-strong);
+    background: var(--surface-1);
+    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+    color: var(--text-muted);
+    display: grid;
+    gap: var(--s-1);
+  }
+
+  .post-body__code {
+    padding: var(--s-1) var(--s0);
+    background: var(--surface-0);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    font-family: var(--font-mono);
+    font-size: var(--step--1);
+    /* Terminal output and measurement tables are tabular: wrapping them
+       destroys the alignment that is the whole reason they were pasted.
+       Scroll the block instead — never the page. */
+    overflow-x: auto;
+  }
+  .post-body :not(pre) > code {
+    font-family: var(--font-mono);
+    font-size: 0.9em;
+    padding: 0.1em 0.3em;
+    background: var(--surface-0);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+  }
+
+  /* An image inside a sentence still gets its own line — these are
+     screenshots being pointed at, not icons sitting in the text. The <picture>
+     is what sits in the paragraph now (the reset already makes it a block);
+     the bare .post-media__item covers an image with no format ladder, which
+     is what a mirror failure or a missing encoder leaves behind. */
+  .post-body p > picture,
+  .post-body p > .post-media__item { margin-top: var(--s-2); }
+
+  .post__back { margin-top: var(--s1); }
+
   /* Post media — screenshots and screen recordings of the work, mirrored to our
      own origin by tools/fetch-media.sh. */
   .post-media {