adr-sml/src/components/InfinityMark.astro

---
/**
 * The SML infinity mark.
 *
 * ⚠️ DELIBERATE, TEMPORARY EXCEPTION TO docs/02's "inline SVG, never a PNG".
 * Tracked as AGENTS.md Q38, with a standing reminder (R13) so it cannot become
 * permanent by neglect. Read both before changing this file.
 *
 * WHY A RASTER — and the reason is PAYLOAD, not fidelity. The mark is not a
 * stroked curve; it is a shaded ribbon of variable width that twists in three
 * dimensions, maroon flowing into champagne, passing over itself at the
 * crossing. That is gradient-mesh artwork, not the flat vector paths docs/02
 * assumes.
 *
 * We do hold an SVG — src/assets/brand/sml-logo-source.svg — and **it renders
 * faithfully**: rasterised at 8333px it reproduces the master exactly, at the
 * same 1.566:1 [verified 2026-08-26]. An earlier version of this comment implied
 * it was inadequate artwork. It is not; that was unfair and is corrected here.
 * What rules it out is weight and composition: 257,278 bytes against 3,063 for
 * the AVIF a Retina browser takes — 84× — and SEVEN embedded base64 PNGs plus
 * a 1,225-stop gradient mesh, so inlining it would breach CLAUDE.md's rule
 * against base64-inlining images. The exception ends when a vector master lands
 * that is both faithful AND light.
 *
 * WHAT THIS REPLACES, and why it had to go. Until 2026-08-26 this component
 * drew a hand-traced cubic path lifted from the old site's loading thumbnail.
 * Pouya compared it against the master and it was wrong in three ways; two are
 * reproducible from the path itself:
 *
 *   1. TANGENT, NOT CROSSING. All four branches met the origin at exactly 90°,
 *      so the loops were mutually tangent on a vertical line rather than
 *      crossing. At stroke-width 28 that renders as two circles kissing — the
 *      one thing an infinity mark must not be. Verified by computing the
 *      tangent vector of every segment at the origin.
 *   2. WRONG PROPORTION. The real mark's ink bounding box is 2668 × 1704 =
 *      1.5657:1. The traced path measured 1.667:1 ink / 1.597:1 stroked.
 *   3. FLAT. Two uniform strokes standing in for a shaded ribbon.
 *
 * It is deleted rather than kept as a fallback, on Pouya's instruction: a wrong
 * mark that renders is worse than a missing one, because it stops looking wrong.
 *
 * SOURCE OF TRUTH. src/assets/brand/sml-infinity-mark.png is the master tight-
 * cropped to its ink bounding box, so the file's aspect ratio IS the mark's and
 * layout can be tuned to it directly. Provenance: docs/reference/brand-assets.md.
 */
import { Picture } from 'astro:assets';
import mark from '../assets/brand/sml-infinity-mark.png';

interface Props {
  /** Rendered height. Width follows 1.5657:1. */
  size?: string;
  /** Accessible name. Omit for decorative use — the default. */
  label?: string;
  class?: string;
}

const { size = '1.75rem', label, class: className } = Astro.props;

// Sized to the largest render that SURVIVES, which is the footer at 2.25rem =
// 56.4 CSS px wide. The first attempt used 320px, justified by the 4rem sample
// on the proof sheet — a page step 2 deletes — and then stacked densities on
// top, so the ladder double-counted its own headroom and every Retina device
// pulled a 640px image into a 56px slot.
//
// PASSING A WIDTH EXPLICITLY IS STILL THE POINT. Without it Astro emits the
// untouched 2668px master as the <img src> fallback: 1,146,406 bytes, which any
// client without AVIF or WebP support would actually download, sitting in dist
// looking like an optimisation had happened.
const INTRINSIC_WIDTH = 64;
---

<Picture
  src={mark}
  width={INTRINSIC_WIDTH}
  densities={[1, 2, 3]}
  formats={['avif', 'webp']}
  fallbackFormat="png"
  alt={label ?? ''}
  loading="eager"
  decoding="async"
  class:list={['mark', className]}
  pictureAttributes={{ style: `block-size:${size}` }}
/>

<style>
  /* THE FLEX ITEM IS THE <picture>, NOT THE <img>.
     `class:list` lands on the <img>, which Astro's <Picture> wraps in a
     <picture> — and that wrapper is what `.brand`'s flex layout actually sizes.
     So `flex: none` on .mark reached the wrong box entirely and the mark was
     free to be squeezed: measured 28.52 x 32 at 1024px with seven nav items,
     against a correct 50.09 x 32 — an aspect of 0.891 where it should be 1.5657.

     This is the SAME defect CLAUDE.md already records for <Button> in
     SiteHeader — a parent cannot style a child component's root — reintroduced
     inside the fix for it, one round later. The bare `picture` selector below is
     scoped by Astro's cid, which the emitted markup does carry, and the height
     now goes on the wrapper via `pictureAttributes` rather than on the image.

     Worse than the bug: the page-level overflow check passed throughout, because
     the brand block absorbed the deficit by crushing the logo. "0 overflow at
     every width" was true and misleading — it measured the document, not the
     elements inside it. The harness now asserts the rendered aspect ratio. */
  picture {
    display: block;
    flex: none;
    aspect-ratio: 667 / 426;
    inline-size: auto;
  }
  .mark {
    /* 2668 / 1704 reduced — the master's exact ink bounding box, so the box the
       layout reserves is the shape that fills it. */
    inline-size: 100%;
    block-size: 100%;
    /* Belt and braces: if anything ever squeezes the box again, the artwork
       letterboxes instead of distorting. */
    object-fit: contain;
  }
</style>