@half-built/astro 0.4.2 → 0.6.0

package/src/components/ThemeToggle.astro

@@ -1,21 +1,30 @@
 ---
-/* Day/night toggle (owner request 2026-08-25): an .icon-box button that
-   flips the site theme. Both glyphs are in the button; CSS shows the
-   current theme's (sun by day, moon by night, owner call 2026-08-26) and
-   the label names the action. State and storage live in
-   scripts/theme-toggle.ts, which mounts every .theme-toggle on the page
-   and keeps them in step; the first paint is stamped by the inline
-   script in Shell.astro's head.
-
-   Two placements: "band" sits beside the date stamp in the header's top
-   band; "phone" sits beside the search icon in the bottom band and shows
-   only under 768px, where the top band is hidden (owner call 2026-08-20),
-   so phones keep a toggle (owner request 2026-08-26). */
 import { ICON_SUN, ICON_MOON } from "../scripts/core/icons";
-interface Props { placement?: "band" | "phone"; class?: string; label?: string }
-const { placement = "band", class: className, label = "Switch to dark mode" } = Astro.props;
+
+interface Props {
+  placement?: "band" | "phone";
+  class?: string;
+  label?: string;
+}
+
+const {
+  placement = "band",
+  class: className,
+  label = "Switch to dark mode",
+} = Astro.props;
 ---
-<button type="button" class:list={["theme-toggle", "icon-box", placement === "phone" && "theme-toggle-phone", className]} aria-label={label} aria-pressed="false">
+
+<button
+  type="button"
+  class:list={[
+    "theme-toggle",
+    "icon-box",
+    placement === "phone" && "theme-toggle-phone",
+    className,
+  ]}
+  aria-label={label}
+  aria-pressed="false"
+>
   <span class="theme-toggle-moon"><Fragment set:html={ICON_MOON} /></span>
   <span class="theme-toggle-sun"><Fragment set:html={ICON_SUN} /></span>
 </button>
@@ -23,18 +32,22 @@ const { placement = "band", class: className, label = "Switch to dark mode" } =
 <style>
   .theme-toggle { font-size: 16px; }
   .theme-toggle span { display: block; line-height: 0; }
+
   /* The glyphs keep their currentColor stroke and take a fill: the moon
      in the second accent, the sun's disc in the first (owner call
      2026-08-26). :global because the svg arrives through set:html. */
   .theme-toggle-moon :global(path) { fill: var(--accent-2); }
   .theme-toggle-sun :global(circle) { fill: var(--accent-1); }
+
   /* Show the glyph of the current theme. Both selectors carry the
      parent class so they outrank the span rule above. */
   .theme-toggle .theme-toggle-moon { display: none; }
   :global(:root[data-theme="dark"]) .theme-toggle .theme-toggle-moon { display: block; }
   :global(:root[data-theme="dark"]) .theme-toggle .theme-toggle-sun { display: none; }
+
   /* The phone placement exists only where the top band does not. */
   .theme-toggle-phone { display: none; }
+
   @media (--bp-phone) {
     .theme-toggle-phone { display: flex; }
   }

package/src/components/TwoColumn.astro

@@ -1,11 +1,11 @@
 ---
-/* The two-column page body (step 8, 2026-08-30): content beside the
-   sidebar slot. Column grid, widths, and the collapse live once in
-   styles/base/shell.css; this component is structure only, so it ships
-   no scoped CSS and stamps no cid on the markup. */
-interface Props { class?: string }
+interface Props {
+  class?: string;
+}
+
 const { class: className } = Astro.props;
 ---
+
 <div class:list={["two-column", className]}>
   <main class="site-main"><slot /></main>
   <slot name="aside" />

package/src/components/Widget.astro

@@ -1,14 +1,14 @@
 ---
-/* Sidebar widget: plain block heading + list, matching the live site's
-   Gutenberg block widgets (which rendered h2.wp-block-heading inside
-   .widget_block; renamed at extraction, step 11.1).
-   List links keep their natural underline: they are proper links. */
-interface Props { title: string; headingLevel?: 2 | 3 | 4; class?: string }
+interface Props {
+  title: string;
+  headingLevel?: 2 | 3 | 4;
+  class?: string;
+}
+
 const { title, headingLevel = 2, class: className } = Astro.props;
-/* Annotated, not cast: an `as` cast in the frontmatter can make the Astro
-   compiler drop the Props type (see PostCard.astro). */
 const Heading: "h2" | "h3" | "h4" = `h${headingLevel}`;
 ---
+
 <section class:list={["widget", className]}>
   <Heading class="widget-title">{title}</Heading>
   <div class="widget-body"><slot /></div>
@@ -16,6 +16,7 @@ const Heading: "h2" | "h3" | "h4" = `h${headingLevel}`;
 
 <style>
   .widget { margin: 0 0 2em; }
+
   /* Owner ruling 2026-07-26 (diverges from live's larger headings):
      widget headers share the Subscribe panel's title scale. */
   .widget-title {
@@ -25,6 +26,7 @@ const Heading: "h2" | "h3" | "h4" = `h${headingLevel}`;
     font-size: var(--font-size-base);
   }
   .widget-body :global(ul) { list-style: none; padding: 0; margin: 0; }
+
   .widget-body :global(li) {
     margin-bottom: 7px;
     padding-bottom: 7px;
@@ -32,6 +34,7 @@ const Heading: "h2" | "h3" | "h4" = `h${headingLevel}`;
     border-bottom: 1px solid var(--divider-faint);
   }
   .widget-body :global(li:last-child) { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
+
   .widget-body :global(a) {
     color: var(--ink);
     transition: var(--transition);

package/src/components/content/BlogImage.astro

@@ -1,24 +1,57 @@
 ---
 import type { ImageMetadata } from "astro";
 import CornerBadges from "../CornerBadges.astro";
+import type { Badge } from "../../scripts/core/badges";
 import SmartImage from "../SmartImage.astro";
 import LightboxLink from "../LightboxLink.astro";
 
-/* `frameless` is the sanctioned exception to the site-wide 2px image
-   outline (prose.css): the mascot on the brand page floats free (owner
-   ruling 2026-07-26). Everything else takes the default. */
-/* `narrow` caps the image at the half-column responsive step (495px),
-   centered; for shots that read fine small (close-ups, tall crops). */
-/* `genai` marks an AI-generated image with the AI Art corner badge
-   (CornerBadges.astro). */
-interface Props { src: ImageMetadata; alt?: string; caption?: string; frameless?: boolean; narrow?: boolean; genai?: boolean; class?: string }
-const { src, alt = "", caption, frameless = false, narrow = false, genai = false, class: className } = Astro.props;
+interface Props {
+  src: ImageMetadata;
+  alt?: string;
+  caption?: string;
+  frameless?: boolean;
+  narrow?: boolean;
+  badges?: Badge[];
+  class?: string;
+}
+
+const {
+  src,
+  alt = "",
+  caption,
+  frameless = false,
+  narrow = false,
+  badges = [],
+  class: className,
+} = Astro.props;
 ---
+
 {/* Image branching and lb-attrs live in the primitives (step 5). */}
-<figure class:list={["blog-image", frameless && "blog-image-frameless", narrow && "blog-image-narrow", className]}>
-  <LightboxLink href={src.src} w={src.width} h={src.height} caption={caption ?? alt}>
-    <SmartImage src={src} alt={alt} widths={[495, 990, Math.min(src.width, 1980)]} sizes={narrow ? "(max-width: 1024px) 50vw, 495px" : "(max-width: 1024px) 100vw, 990px"} />
-    <CornerBadges genai={genai} />
+<figure
+  class:list={[
+    "blog-image",
+    frameless && "blog-image-frameless",
+    narrow && "blog-image-narrow",
+    className,
+  ]}
+>
+  <LightboxLink
+    href={src.src}
+    w={src.width}
+    h={src.height}
+    caption={caption ?? alt}
+  >
+    <SmartImage
+      src={src}
+      alt={alt}
+      widths={[495, 990, Math.min(src.width, 1980)]}
+      sizes={
+        narrow
+          ? "(max-width: 1024px) 50vw, 495px"
+          : "(max-width: 1024px) 100vw, 990px"
+      }
+    />
+    <CornerBadges badges={badges} />
   </LightboxLink>
   {caption && <figcaption class="caption">{caption}</figcaption>}
 </figure>
@@ -26,6 +59,7 @@ const { src, alt = "", caption, frameless = false, narrow = false, genai = false
 <style>
   .blog-image { margin: 20px 0; }
   .blog-image-frameless :global(img) { border: 0; }
+
   /* Images narrower than the column center, matching the centered
      captions (full-width images are unaffected). The link hugs the image
      (fit-content, centered) rather than spanning the column, so a corner
@@ -33,6 +67,7 @@ const { src, alt = "", caption, frameless = false, narrow = false, genai = false
   .blog-image :global(.lightbox-link) { width: fit-content; max-width: 100%; margin-inline: auto; }
   .blog-image :global(img) { max-width: 100%; height: auto; display: block; margin-inline: auto; }
   .blog-image-narrow :global(.lightbox-link) { max-width: min(495px, 100%); }
+
   /* Type from the .caption pattern. Fidelity pass (handoff 5.5): live
      figcaptions are centered. */
   figcaption { margin-top: 5px; text-align: center; }

package/src/components/content/Button.astro

@@ -1,16 +1,4 @@
 ---
-/* The house button (owner request 2026-08-26): one component over the
-   press-box patterns so every button on the site, and later every site
-   on the library, draws the same three looks.
-
-   variant: "plain" is the ink press box (nav links, pagination); "shaded"
-   is the same box on the nav's current-item shade; "accent-1"
-   wears the brand amber and "accent-2" the cyan, both in the callout
-   combination (accent line and ink on a faint tint, filling solid while
-   held). size: "md" is the nav-box size, "lg" the call-to-action size.
-   With href it renders an anchor, otherwise a button (type "button"
-   unless told otherwise). Put an icon first in the slot and it gets the
-   gap; the text is the slot. */
 interface Props {
   variant?: "plain" | "shaded" | "accent-1" | "accent-2";
   size?: "md" | "lg";
@@ -18,7 +6,15 @@ interface Props {
   type?: "button" | "submit";
   class?: string;
 }
-const { variant = "plain", size = "md", href, type = "button", class: className } = Astro.props;
+
+const {
+  variant = "plain",
+  size = "md",
+  href,
+  type = "button",
+  class: className,
+} = Astro.props;
+
 const classes = [
   "button",
   "press-box",
@@ -29,6 +25,7 @@ const classes = [
   `button-${size}`,
 ];
 ---
+
 {href ? (
   <a class:list={[...classes, className]} href={href}><slot /></a>
 ) : (
@@ -41,16 +38,19 @@ const classes = [
     font-weight: 700;
     text-align: center;
   }
+
   .button-md {
     padding: 7px 15px;
     font-size: var(--font-size-sm);
     text-transform: uppercase;
   }
+
   .button-lg {
     padding: 10px 24px;
     font-size: var(--font-size-md);
     letter-spacing: 0.08em;
   }
+
   /* A leading icon sits on the text's baseline with a gap; the svg comes
      through the slot, hence :global. */
   .button :global(svg:first-child) { vertical-align: -0.15em; margin-right: 8px; }

package/src/components/content/Callout.astro

@@ -1,23 +1,27 @@
 ---
-/* Admonition panel (Confluence-style info/warning/error blocks), owner
-   request 2026-08-21, rendered in the house line system: a 2px box in the
-   type's line color, a low-opacity tint of the same color, and a label
-   straddling the top rule the way the theme's date boxes do. Inks stay in
-   the house families (graphite, amber, cyan, red): note and info read
-   graphite and the type is told by the label text, tip and warning take
-   the first accent, success the second, error the red. */
 interface Props {
   type?: "note" | "info" | "tip" | "success" | "warning" | "error";
   title?: string;
   class?: string;
 }
+
 const { type = "note", title, class: className } = Astro.props;
 const label = title ?? type;
 ---
+
 {/* role="note", not <aside>: aside is a landmark, and html-validate's
     unique-landmark rule (rightly) demands unique names, which repeated
     callouts on one page cannot provide. */}
-<div class:list={["callout", `callout-${type}`, "rule-box", "tint-overlay", className]} role="note">
+<div
+  class:list={[
+    "callout",
+    `callout-${type}`,
+    "rule-box",
+    "tint-overlay",
+    className,
+  ]}
+  role="note"
+>
   <strong class="callout-label boxed-label">{label}</strong>
   <div class="callout-body"><slot /></div>
 </div>
@@ -33,10 +37,12 @@ const label = title ?? type;
     margin: 30px 0;
   }
   .callout::before { pointer-events: none; }
+
   .callout-label {
     position: absolute;
     top: 0;
     left: 20px;
+
     /* Center the label on the 2px top rule, not on the padding-box edge. */
     transform: translateY(calc(-50% - 2px));
     padding: 4px 10px;
@@ -57,17 +63,20 @@ const label = title ?? type;
     --callout-line: var(--rule);
     --callout-ink: var(--ink);
   }
+
   .callout-tip,
   .callout-warning {
     --callout-line: var(--accent-1);
     --callout-ink: var(--accent-1-ink);
   }
+
   /* Success takes the second accent (owner call 2026-08-26): cyan is the
      "it worked" temperature, and it keeps the amber for tip and warning. */
   .callout-success {
     --callout-line: var(--accent-2);
     --callout-ink: var(--accent-2-ink);
   }
+
   .callout-error {
     --callout-line: var(--error-ink);
     --callout-ink: var(--error-ink);

package/src/components/content/CodeBlock.astro

@@ -1,7 +1,12 @@
 ---
-interface Props { filename?: string; class?: string }
+interface Props {
+  filename?: string;
+  class?: string;
+}
+
 const { filename, class: className } = Astro.props;
 ---
+
 <div class:list={["code-block", className]} data-code-filename={filename}>
   <slot />
 </div>

package/src/components/content/EditorNote.astro

@@ -1,28 +1,23 @@
 ---
-/* Editor note: a reminder in content that renders on the dev server
-   and stays out of deploy builds. Moved up from the blog's
-   content/EditorNote.astro (owner call 2026-09-06: it is generic and
-   should have crossed in the 11.3 extraction; the blog swaps onto this
-   copy at its next pin bump). The blog's gate read its own SHOW_DRAFTS
-   config, which a package component must not do, so visibility is the
-   `shown` prop instead: the default is the consumer build's dev mode,
-   and a consumer with a preview concept passes its own wider gate.
-   Anatomy follows Callout (box, label straddling the top rule), but the
-   rule is dashed and amber: nothing else in the system is dashed, so a
-   note cannot be mistaken for content or for a callout. */
+interface Props {
+  title?: string;
+  shown?: boolean;
+  class?: string;
+}
+
+const {
+  title,
+  shown = import.meta.env.MODE === "development",
+  class: className,
+} = Astro.props;
 
-/* The label always reads "Editor's Note", with the title after a colon
-   when one is given (owner call 2026-08-27). */
-interface Props { title?: string; shown?: boolean; class?: string }
-const { title, shown = import.meta.env.MODE === "development", class: className } = Astro.props;
 const label = title ? `Editor's Note: ${title}` : "Editor's Note";
 ---
-{shown && (
-  <div class:list={["editor-note", "rule-box", className]} role="note">
-    <strong class="editor-note-label boxed-label">{label}</strong>
-    <div class="editor-note-body"><slot /></div>
-  </div>
-)}
+
+{shown && <div class:list={["editor-note", "rule-box", className]} role="note">
+  <strong class="editor-note-label boxed-label">{label}</strong>
+  <div class="editor-note-body"><slot /></div>
+</div>}
 
 <style>
   /* Box from .rule-box; the dashed amber stroke and the margin are here. */
@@ -32,10 +27,12 @@ const label = title ? `Editor's Note: ${title}` : "Editor's Note";
     border-color: var(--accent-1);
     margin: 30px 0;
   }
+
   .editor-note-label {
     position: absolute;
     top: 0;
     left: 20px;
+
     /* Center the label on the 2px top rule, not on the padding-box edge. */
     transform: translateY(calc(-50% - 2px));
     padding: 4px 10px;
@@ -47,6 +44,7 @@ const label = title ? `Editor's Note: ${title}` : "Editor's Note";
     color: var(--accent-1-ink);
     border-color: var(--accent-1);
   }
+
   /* Reads as an annotation, not a paragraph: a step smaller than prose. */
   .editor-note-body {
     position: relative;

package/src/components/content/Gallery.astro

@@ -1,15 +1,21 @@
 ---
-/* The caption is a string prop for the common case; a named `caption`
-   slot takes over when the caption needs markup (a link in an edit
-   aside, owner request 2026-08-27). */
-interface Props { columns?: number; caption?: string; class?: string }
+interface Props {
+  columns?: number;
+  caption?: string;
+  class?: string;
+}
+
 const { columns = 3, caption, class: className } = Astro.props;
 const hasCaptionSlot = Astro.slots.has("caption");
 ---
+
 {/* Frame comes from the .bracket-frame pattern, same enclosure as the
     article itself (owner request 2026-07-29). */}
 <figure class:list={["gallery-figure", className]}>
-  <div class:list={["gallery-plates", "bracket-frame", `gallery-cols-${columns}`]} style={`--gallery-cols:${columns}`}>
+  <div
+    class:list={["gallery-plates", "bracket-frame", `gallery-cols-${columns}`]}
+    style={`--gallery-cols:${columns}`}
+  >
     <slot />
   </div>
   {hasCaptionSlot ? (
@@ -23,16 +29,21 @@ const hasCaptionSlot = Astro.slots.has("caption");
   /* The figure wrapper exists so a gallery-level caption reads as part of
      the gallery (owner request 2026-07-30); outer spacing lives here. */
   .gallery-figure { margin: 20px 0; }
+
   .gallery-plates {
     display: grid;
     grid-template-columns: repeat(var(--gallery-cols), 1fr);
     gap: 12px;
   }
+
   @media (--bp-phone) { .gallery-plates { grid-template-columns: repeat(2, 1fr); } }
+
   @media (max-width: 480px) { .gallery-plates { grid-template-columns: 1fr; } }
+
   /* Type from the .caption pattern; centered under the plates like
      BlogImage's. */
   figcaption { margin-top: 5px; text-align: center; }
+
   /* Orphan rule (owner request 2026-07-29): a lone plate on the last row
      centers instead of hugging the left column. The :global() escape is
      needed because plates are GalleryImage children, outside this
@@ -40,12 +51,14 @@ const hasCaptionSlot = Astro.slots.has("caption");
      math differs per count; columns other than 2 and 3 get no rule. */
   @media (--bp-phone-up) {
     .gallery-cols-3 > :global(:nth-child(3n + 1):last-child) { grid-column: 2; }
+
     .gallery-cols-2 > :global(:nth-child(odd):last-child) {
       grid-column: 1 / -1;
       justify-self: center;
       width: calc(50% - 6px);
     }
   }
+
   /* Below 768px every gallery is two columns, whatever it asked for. */
   @media (min-width: 481px) and (--bp-phone) {
     .gallery-plates > :global(:nth-child(odd):last-child) {

package/src/components/content/GalleryImage.astro

@@ -1,19 +1,36 @@
 ---
 import type { ImageMetadata } from "astro";
 import CornerBadges from "../CornerBadges.astro";
+import type { Badge } from "../../scripts/core/badges";
 import SmartImage from "../SmartImage.astro";
 import LightboxLink from "../LightboxLink.astro";
 
-/* `genai` marks an AI-generated plate with the AI Art corner badge
-   (CornerBadges.astro). */
-interface Props { src: ImageMetadata; alt?: string; caption?: string; genai?: boolean; class?: string }
-const { src, alt = "", caption, genai = false, class: className } = Astro.props;
+interface Props {
+  src: ImageMetadata;
+  alt?: string;
+  caption?: string;
+  badges?: Badge[];
+  class?: string;
+}
+
+const { src, alt = "", caption, badges = [], class: className } = Astro.props;
 ---
+
 <figure class:list={["gallery-plate", className]}>
   <div class="plate-frame">
-    <LightboxLink href={src.src} w={src.width} h={src.height} caption={caption ?? alt}>
-      <SmartImage src={src} alt={alt} widths={[320, 640]} sizes="(max-width: 600px) 100vw, 320px" />
-      <CornerBadges genai={genai} />
+    <LightboxLink
+      href={src.src}
+      w={src.width}
+      h={src.height}
+      caption={caption ?? alt}
+    >
+      <SmartImage
+        src={src}
+        alt={alt}
+        widths={[320, 640]}
+        sizes="(max-width: 600px) 100vw, 320px"
+      />
+      <CornerBadges badges={badges} />
     </LightboxLink>
   </div>
   {caption && <figcaption class="caption">{caption}</figcaption>}
@@ -22,9 +39,11 @@ const { src, alt = "", caption, genai = false, class: className } = Astro.props;
 <style>
   .gallery-plate { margin: 0; }
   .plate-frame { border: var(--stroke) solid var(--rule); line-height: 0; }
+
   /* The frame owns the outline; zero the default img border from
      prose.css so plates don't double-line. */
   .plate-frame :global(img) { width: 100%; height: 220px; object-fit: cover; border: 0; }
+
   /* Type from the .caption pattern, tracked a touch wider under a plate.
      Caption case is the author's own; the uppercase transform from the
      original plate design was dropped by owner request 2026-07-26. */

package/src/components/content/Group.astro

@@ -1,12 +1,11 @@
 ---
-/* Boxed prose container. Born in phase 1 as a bare passthrough (the
-   migration target for Gutenberg's Group block); styled 2026-08-21 to
-   match the style guide's description of it, as the label-less,
-   tint-less sibling of Callout's box. The box itself is the .rule-box
-   pattern; only the outer margin is this component's. */
-interface Props { class?: string }
+interface Props {
+  class?: string;
+}
+
 const { class: className } = Astro.props;
 ---
+
 <div class:list={["content-group", "rule-box", className]}><slot /></div>
 
 <style>

package/src/components/content/MediaText.astro

@@ -1,24 +1,53 @@
 ---
 import type { ImageMetadata } from "astro";
 import CornerBadges from "../CornerBadges.astro";
+import type { Badge } from "../../scripts/core/badges";
 import SmartImage from "../SmartImage.astro";
 import LightboxLink from "../LightboxLink.astro";
 
-/* `genai` marks an AI-generated image with the AI Art corner badge
-   (CornerBadges.astro). */
-interface Props { src: ImageMetadata; alt?: string; mediaSide?: "left" | "right"; natural?: boolean; genai?: boolean; class?: string }
-const { src, alt = "", mediaSide = "left", natural = false, genai = false, class: className } = Astro.props;
+interface Props {
+  src: ImageMetadata;
+  alt?: string;
+  mediaSide?: "left" | "right";
+  natural?: boolean;
+  badges?: Badge[];
+  class?: string;
+}
+
+const {
+  src,
+  alt = "",
+  mediaSide = "left",
+  natural = false,
+  badges = [],
+  class: className,
+} = Astro.props;
 ---
-<figure class:list={["media-text", mediaSide === "right" && "media-right", natural && "media-natural", className]}>
+
+<figure
+  class:list={[
+    "media-text",
+    mediaSide === "right" && "media-right",
+    natural && "media-natural",
+    className,
+  ]}
+>
   <div class="media-text-media">
     <LightboxLink href={src.src} w={src.width} h={src.height} caption={alt}>
-      {natural
+      {natural ? (
         /* No responsive widths/sizes here: a `sizes` attribute makes the
            browser report that size as the intrinsic width, which defeats
            the natural-size rendering below. */
-        ? <SmartImage src={src} alt={alt} />
-        : <SmartImage src={src} alt={alt} widths={[480, 960]} sizes="(max-width: 600px) 100vw, 480px" />}
-      <CornerBadges genai={genai} />
+        <SmartImage src={src} alt={alt} />
+      ) : (
+        <SmartImage
+          src={src}
+          alt={alt}
+          widths={[480, 960]}
+          sizes="(max-width: 600px) 100vw, 480px"
+        />
+      )}
+      <CornerBadges badges={badges} />
     </LightboxLink>
   </div>
   <figcaption class="media-text-content caption"><slot /></figcaption>
@@ -34,22 +63,27 @@ const { src, alt = "", mediaSide = "left", natural = false, genai = false, class
   }
   .media-right .media-text-media { order: 2; }
   .media-text-media { margin: 0; line-height: 0; }
+
   /* The side text is the caption: type from the .caption pattern (owner
      request 2026-08-14), left-aligned while it sits in its own column;
      it centers only when stacked below. */
   .media-text-content { text-align: left; }
   .media-text-content :global(p) { margin: 0 0 0.5em; }
   .media-text-content :global(p:last-child) { margin-bottom: 0; }
+
   /* Outline comes from the .prose img standard in prose.css. */
   .media-text-media :global(img) { width: 100%; height: auto; }
+
   /* natural: opt-in for small diagrams and cartoons that look blown out
      when stretched to the media column; renders at intrinsic size,
      centered in the cell (owner request 2026-07-30). */
   .media-natural .media-text-media { text-align: center; }
+
   /* The link hugs the natural-size image so a corner badge lands on the
      image, not the cell (same idiom as BlogImage). */
   .media-natural .media-text-media :global(.lightbox-link) { width: fit-content; max-width: 100%; margin-inline: auto; }
   .media-natural .media-text-media :global(img) { width: auto; max-width: 100%; }
+
   @media (max-width: 600px) {
     /* Stacked, the caption sits below the image like BlogImage's:
        centered, hugging at the same 5px. */