From 2b783876f8df37e23658b669545e55322ddff5d2 Mon Sep 17 00:00:00 2001
From: cverorg <292680828+cverorg@users.noreply.github.com>
Date: Fri, 28 Aug 2026 20:16:54 +0900
Subject: [PATCH] sitetile: every section gets the shared inset floor; gallery,
 tagcloud and collection-pills get base paint
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A coral that forgot its own container rule rendered its text at x=0 on desktop and phone
(faq was fixed one at a time in #6; gallery, carousel, collection and timeline still did it).
The floor: :where(section[class^="st-"]:not(.st-full-bleed)) carries the shared wrapper's
max-width/margin/padding at zero specificity, so every existing per-coral rule keeps its own
values; hero opts out with .st-full-bleed while its inner content stays inset. tile-lab#11:
gallery cells, tag pills and collection pills had no rule at all — they now reuse the existing
filter-pill idiom and a responsive grid. pre.st-code gets max-width:100%; inline code spans get
overflow-wrap:anywhere so a quoted line never widens the page. New section-inset.test.mjs scans
every coral's emitted markup, so a future coral is covered without being listed.
---
 packages/sitetile/astro/smoke-build.mjs       |  11 +-
 .../astro/src/components/sections/Hero.astro  |   6 +-
 packages/sitetile/astro/src/styles/site.css   |  74 ++++-
 packages/sitetile/section-inset.test.mjs      | 260 ++++++++++++++++++
 4 files changed, 344 insertions(+), 7 deletions(-)
 create mode 100644 packages/sitetile/section-inset.test.mjs

diff --git a/packages/sitetile/astro/smoke-build.mjs b/packages/sitetile/astro/smoke-build.mjs
index 53e1307..f8ec00e 100644
--- a/packages/sitetile/astro/smoke-build.mjs
+++ b/packages/sitetile/astro/smoke-build.mjs
@@ -189,12 +189,17 @@ function claimedIcons() {
 
 const checks = [
   // -- home.md: the 5 section types + platform defaults --
-  ['hero renders', () => occ('class="st-hero"') === 1],
+  // 🩸 2026-08-28. `class="st-hero"` was an EXACT string match, so it broke the moment the section
+  // gained a second class — which every hero variant now does (`.st-full-bleed`, the opt-out from
+  // the generic section-inset floor below; see site.css). Matched here as `st-hero st-full-bleed`
+  // rather than loosened to a substring check, so the assertion still pins the exact class list a
+  // non-layered hero renders, not just "some class starting with st-hero".
+  ['hero renders', () => occ('class="st-hero st-full-bleed"') === 1],
   ['grid renders', () => occ('class="st-grid"') === 1],
   ['prose renders', () => occ('class="st-prose"') >= 1],
   ['cta renders', () => occ('class="st-cta"') === 1],
   ['embed renders', () => occ('class="st-embed"') === 1],
-  ['hero background-image', () => /class="st-hero"[^>]*background-image:url\(/.test(html)],
+  ['hero background-image', () => /class="st-hero st-full-bleed"[^>]*background-image:url\(/.test(html)],
   ['hero CTA anchor', () => /st-hero-cta"\s+href="\/checkup"/.test(html)],
   ['grid has 3 cells', () => occ('class="st-cell"') === 3],
   ['grid cols=3', () => /class="st-grid"[^>]*\sdata-cols="3"/.test(html)],
@@ -255,7 +260,7 @@ const checks = [
   ['nav: ARBITRARY depth — 3rd-level leaf renders', () => html.includes('rf-nav-subgroup') && html.includes('href="/games/puzzle"')],
   ['nav: default flyout CSS present (hover reveal)', () => allCss().replace(/\s+/g, '').includes('.rf-nav-group:hover>.rf-nav-sub')],
   // -- markers.md: graduated markers the home fixture can't reach --
-  ['markers: hero media=logo (uncropped, not round)', () => /<section class="st-hero"[^>]*\sdata-media="logo"/.test(markers)],
+  ['markers: hero media=logo (uncropped, not round)', () => /<section class="st-hero st-full-bleed"[^>]*\sdata-media="logo"/.test(markers)],
   ['markers: block image → figure+img', () => /<figure class="st-figure">\s*<img class="st-img" src="\/img\/demo-logo\.gif" alt="Mark"/.test(markers)],
   ['markers: captioned whole-cell link with labeled chevron', () =>
     markers.includes('<a class="st-cell st-cell-link group" href="/products">') &&
diff --git a/packages/sitetile/astro/src/components/sections/Hero.astro b/packages/sitetile/astro/src/components/sections/Hero.astro
index 9cbce8e..d9f390c 100644
--- a/packages/sitetile/astro/src/components/sections/Hero.astro
+++ b/packages/sitetile/astro/src/components/sections/Hero.astro
@@ -40,7 +40,7 @@ const logo = pm.logo ? (typeof pm.logo === 'object' ? (pm.logo.href || pm.logo.l
 const logoPos = pm['logo-pos'] ? String(typeof pm['logo-pos'] === 'object' ? pm['logo-pos'].label : pm['logo-pos']) : 'bottom';
 ---
 {layerList.length ? (
-  <section class="st-hero st-hero-layered" id={section.id} data-media={media} data-parallax={parallax ? '' : undefined} data-logo-pos={logoPos} data-enter={enter ? '' : undefined}>
+  <section class="st-hero st-full-bleed st-hero-layered" id={section.id} data-media={media} data-parallax={parallax ? '' : undefined} data-logo-pos={logoPos} data-enter={enter ? '' : undefined}>
     <div class="st-hero-stage" aria-hidden="true">
       {layerList.map((src, i) => (
         <img class="st-hero-layer" src={src} alt="" data-depth={i} loading="eager" decoding="async" />
@@ -56,7 +56,7 @@ const logoPos = pm['logo-pos'] ? String(typeof pm['logo-pos'] === 'object' ? pm[
     </div>
   </section>
 ) : layout ? (
-  <section class="st-hero" id={section.id} data-media={media} data-layout={layout} style={style}>
+  <section class="st-hero st-full-bleed" id={section.id} data-media={media} data-layout={layout} style={style}>
     {marqueeWords.length > 0 && (
       <div class="st-hero-marquee" aria-hidden="true">
         {marqueeWords.map((w, i) => (
@@ -85,7 +85,7 @@ const logoPos = pm['logo-pos'] ? String(typeof pm['logo-pos'] === 'object' ? pm[
     )}
   </section>
 ) : (
-  <section class="st-hero" id={section.id} data-media={media} data-enter={enter ? '' : undefined} style={style}>
+  <section class="st-hero st-full-bleed" id={section.id} data-media={media} data-enter={enter ? '' : undefined} style={style}>
     {enter && pm.bg && <div class="st-hero-bg" aria-hidden="true" style={`background-image:url(${pm.bg})`} />}
     <h1 set:html={inlineHtml(section.title)} />
     <Fragment set:html={bodyHtml(section.body)} />
diff --git a/packages/sitetile/astro/src/styles/site.css b/packages/sitetile/astro/src/styles/site.css
index cab6ebb..4f57e9f 100644
--- a/packages/sitetile/astro/src/styles/site.css
+++ b/packages/sitetile/astro/src/styles/site.css
@@ -272,6 +272,35 @@ img { max-width: 100%; height: auto; }
 .st-prose h2, .st-grid h2, .st-cta h2, .st-people h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.25; margin: 0 0 0.75rem; }
 .st-prose p, .st-cta p { margin: 0 0 1rem; }
 
+/* ── generic section-container floor ── every coral the renderer emits wraps its content in
+   `<section class="st-<name>" …>` (verified against every file in astro/src/components/sections/
+   plus the renderer's own 404/footer-widget markup). A handful of those containers have their OWN
+   rule above/below (.st-prose/.st-grid/.st-cta/.st-people here, .st-embed/.st-form-section/.st-faq/
+   .st-social/.st-notfound further down) — this is the floor for every OTHER one, so a coral that
+   has never been given its own layout still isn't flush against the viewport edge.
+
+   🪩 2026-08-28. probe_render on a built site (desktop AND phone) found `.st-gallery`,
+   `.st-carousel`, `.st-collection` and `.st-timeline` headings sitting at x=0 — the exact defect
+   .st-faq had above, just not caught per coral because each one's DESCENDANTS may well be styled
+   (a carousel's cards, a timeline's rows), so nothing about the file LOOKS incomplete. The
+   container — the box that carries the page's left/right margin — is the one thing no individual
+   coral's CSS remembers to add, because from inside that file it looks like somebody else's job.
+   Written once, generically, it stops being anyone's job to remember.
+
+   `[class^="st-"]` (attribute, not `.st-`) so it also reaches the renderer's OWN two-class markup
+   (404's `st-section st-notfound`, the footer widgets' `st-prose rf-foot-widget …`) without
+   needing every future emitter to lead with one clean class. `:where()` is zero specificity — any
+   of the specific rules named above (also zero, but written later in this file) still wins the
+   properties it cares about, and a theme overrides all of it without a fight, same as .st-faq. */
+:where(section[class^="st-"]:not(.st-full-bleed)) {
+  max-width: var(--gd-maxw);
+  margin-inline: auto;
+  padding: 2.5rem clamp(1rem, 4vw, 3rem);
+}
+/* Opt-out for a section that is deliberately edge-to-edge — the hero's own background (below) is
+   the only current user. The exemption is for the OUTER box only: a full-bleed section still
+   insets its own inner content itself (.st-hero-overlay / .st-hero h1,p already do that). */
+
 /* hero — full-bleed, optional background image */
 .st-hero {
   display: grid; place-content: center; gap: 1rem; text-align: center;
@@ -343,6 +372,20 @@ img { max-width: 100%; height: auto; }
 }
 .st-filter-pill:hover { border-color: var(--gd-accent); color: var(--gd-fg, inherit); }
 .st-filter-pill.is-active { border-color: var(--gd-accent); background: var(--gd-accent); color: var(--gd-accent-ink, #fff); font-weight: 700; }
+
+/* ── tagcloud / tag-flow + collection jump-pills ── same pill idiom as the grid facet filter
+   above (`.st-filter-pill`), reused rather than reinvented: an inline-wrapping row of chips is one
+   look, not three. Until now neither `.st-tagcloud` nor `.st-collection-pills` matched anything
+   beyond `* { box-sizing }` (tile-lab#11) — a tag cloud rendered as a run of plain underlined
+   links with no wrap gap, and the collection's category nav the same. */
+.st-tag-flow, .st-collection-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
+.st-tag, .st-collection-pill {
+  display: inline-flex; align-items: center; font-size: 0.85rem; line-height: 1;
+  padding: 0.5rem 0.9rem; border-radius: 999px; text-decoration: none;
+  border: 1px solid var(--gd-border); color: var(--gd-muted); transition: border-color .15s, color .15s;
+}
+.st-tag:hover, .st-collection-pill:hover { border-color: var(--gd-accent); color: var(--gd-text); }
+
 .st-cells {
   display: grid; gap: var(--gd-gap); margin-top: 1.5rem;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
@@ -362,6 +405,29 @@ a.st-cell-link .st-cell-cta { margin-top: auto; align-self: flex-end; color: var
 a.st-cell-link .st-cell-cta-labeled { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 600; }
 .st-cta-label { line-height: 1; }
 
+/* ── gallery / carousel shared cells ── the reference renderer (site-core.js) emits the SAME
+   `.st-gal-cell` / `.st-gal-fig` markup for three call sites (grid's `cards=image` variant,
+   `gallery`, and `carousel`'s track — see the "reusing gallery's exact cell markup/CSS" comment
+   at the grid case in site-core.js). grid's cells additionally carry `.st-cell` (skinned above);
+   gallery's and carousel's do not, so until now neither had a painted card: `.st-gallery` and
+   `.st-carousel` matched nothing beyond `* { box-sizing }` (tile-lab#11).
+   STRUCTURE (grid/flex, aspect-ratio, object-fit) is ungated, same split as the people roster
+   below — a themed site restyles a card, it should never have to lay one out from scratch. */
+.st-gal-cells {
+  display: grid; gap: var(--gd-gap); margin-top: 1.5rem; align-items: start;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+}
+.st-gallery[data-cols="2"] .st-gal-cells { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
+/* `align=stretch` (Gallery.astro's own `pm.align`) opts back into CSS Grid's default row-stretch;
+   the floor above overrides it to natural per-card height, which is what most photo/cast grids want. */
+.st-gallery[data-align="stretch"] .st-gal-cells { align-items: stretch; }
+.st-gal-cell { display: flex; flex-direction: column; min-width: 0; border-radius: var(--gd-radius); overflow: hidden; }
+.st-gal-fig { margin: 0; aspect-ratio: 4 / 3; }
+.st-gal-fig .st-img, .st-gal-fig .st-video { width: 100%; height: 100%; object-fit: cover; }
+.st-gal-cell h3 { margin: 0.75rem 1rem 0.35rem; font-size: 1.1rem; }
+.st-gal-cell p { margin: 0 1rem 1rem; color: var(--gd-muted); }
+:where(body:not([data-theme-custom])) .st-gal-cell { background: var(--gd-surface); border: 1px solid var(--gd-border); }
+
 /* `people` coral — roster of humans/companies: portrait, name, roles, blurb, link row.
    🩸 Shipped WITH base CSS on purpose. `gallery` has none at all, so every roster page on every
    site had to hand-roll its layout in theme CSS, and each one drifted (one client site: four
@@ -633,8 +699,14 @@ p .st-img { display: inline; vertical-align: middle; }
   .st-turn-who { width: 1.6rem; height: 1.6rem; font-size: 0.7rem; }
 }
 /* pre.st-code (block) — scoped to pre so it never hits cssmd's inline `code` span (also .st-code) */
-pre.st-code { margin: 0 0 1rem; padding: 1rem 1.25rem; background: var(--gd-surface); border: 1px solid var(--gd-border); border-radius: var(--gd-radius); overflow-x: auto; }
+pre.st-code { margin: 0 0 1rem; padding: 1rem 1.25rem; background: var(--gd-surface); border: 1px solid var(--gd-border); border-radius: var(--gd-radius); max-width: 100%; overflow-x: auto; }
 pre.st-code code { font-family: ui-monospace, SFMono-Regular, Menlo, "Roboto Mono", monospace; font-size: 0.9em; line-height: 1.5; }
+/* cssmd's INLINE code span shares that class name (see comment above) with no rule of its own —
+   a long unbroken token quoted inline in prose (a URL, a hash, a path with no spaces) had nowhere
+   to break, so it pushed the whole page wider instead of the block form's own overflow-x:auto
+   scrollbar. `anywhere` (not `break-word`) so it also breaks mid-word when there is no better
+   opportunity, which is the case that actually occurs in a quoted inline token. */
+span.st-code { overflow-wrap: anywhere; }
 /* ── code highlighting: four token classes and no more (cssmd/highlight.js emits them; an
    unlabelled or unknown fence emits none, so those blocks are unchanged). Restrained on purpose —
    the job is to separate machinery from value at a glance, not to decorate. Comments carry their
diff --git a/packages/sitetile/section-inset.test.mjs b/packages/sitetile/section-inset.test.mjs
new file mode 100644
index 0000000..8eba3e5
--- /dev/null
+++ b/packages/sitetile/section-inset.test.mjs
@@ -0,0 +1,260 @@
+// Guard: every top-level `<section class="st-<name>">` a coral component emits gets a box-model
+// FLOOR (max-width + padding) from the package, and the three corals tile-lab#11 found completely
+// unpainted (`.st-gallery`, `.st-tagcloud`/`.st-tag-flow`, `.st-collection-pills`) get real paint.
+//   run: node packages/sitetile/section-inset.test.mjs   (wired into scripts/test.sh via the glob)
+//
+// 🩸 2026-08-28. probe_render on a built site (desktop AND phone) found `.st-gallery`,
+// `.st-carousel`, `.st-collection`, `.st-timeline` headings sitting at x=0 — the same defect class
+// `.st-faq` had (base-paint.test.mjs, tile PR #6), just not caught per coral because a coral's
+// DESCENDANTS may well be styled while its CONTAINER — the box that carries the page's left/right
+// margin — is not. A file full of `.st-gal-*` / `.st-tl-*` rules reads as "this coral got CSS";
+// whether the outer `<section>` itself did is invisible next to them.
+//
+// Root-cause fix (site.css) is a GENERIC floor: `:where(section[class^="st-"]:not(.st-full-bleed))`.
+// This file checks that rule exists and is not a cage, checks every coral's own emitted section
+// class is actually reachable by it (so a coral added later inherits the floor without anyone
+// remembering to write a new rule), and checks the specific paint tile-lab#11 asked for.
+
+import assert from 'node:assert/strict';
+import { readFileSync, readdirSync } from 'node:fs';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const CSS = readFileSync(join(HERE, 'astro', 'src', 'styles', 'site.css'), 'utf8');
+const SECTIONS_DIR = join(HERE, 'astro', 'src', 'components', 'sections');
+const PAGE_404 = readFileSync(join(HERE, 'astro', 'src', 'pages', '404.astro'), 'utf8');
+
+console.log('section-inset');
+
+let passed = 0;
+function test(name, fn) {
+  try { fn(); passed += 1; console.log(`  ok  ${name}`); }
+  catch (e) { console.error(`  FAIL ${name}\n       ${e.message}`); process.exitCode = 1; }
+}
+
+/** Rule bodies whose selector contains `needle` (comments stripped first). Mirrors base-paint.test.mjs's
+ *  reader — anchored on the selector run so it can't skip alternating rules (see that file's own test
+ *  for why that anchor matters). */
+function rulesFor(needle) {
+  const body = CSS.replace(/\/\*[\s\S]*?\*\//g, '');
+  const out = [];
+  for (const m of body.matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
+    if (m[1].includes(needle)) out.push({ selector: m[1].trim(), css: m[2] });
+  }
+  return out;
+}
+
+// ── every coral's OWN emitted section class(es), scanned from markup (not hand-kept) ───────────
+//
+// A hand-kept list of "the containers" is exactly the kind of list this repo's scripts/test.sh
+// distrusts (see its own comments on SUITE_GLOBS/covered — "a hand-kept list is wrong the day the
+// renderer moves"). Scanning `<section class="…">` out of every *.astro in sections/ means a new
+// coral file is covered automatically, and a renamed class fails this test instead of drifting
+// silently.
+const CORAL_FILES = readdirSync(SECTIONS_DIR)
+  .filter((f) => f.endsWith('.astro') && f !== 'GridCell.astro'); // a child partial, not a coral
+
+/** All literal class tokens on every `<section class="…">` in one file's source (static prefix
+ *  only — `class="st-hero st-full-bleed st-hero-layered"` → ['st-hero','st-full-bleed','st-hero-layered'];
+ *  a `class={cls}` expression (Embed.astro) is skipped — its container is exercised on its own below. */
+function sectionClassSets(src) {
+  return [...src.matchAll(/<section\s+class="([^"]+)"/g)].map((m) => m[1].split(/\s+/));
+}
+
+const emitted = new Map(); // file -> class-token arrays (one per <section> in that file)
+for (const f of CORAL_FILES) {
+  const src = readFileSync(join(SECTIONS_DIR, f), 'utf8');
+  emitted.set(f, sectionClassSets(src));
+}
+
+test('🔴 CONTROL: the scan actually finds section classes (wrong directory would pass vacuously)', () => {
+  assert.ok(CORAL_FILES.length > 5, `only ${CORAL_FILES.length} section components found`);
+  const total = [...emitted.values()].flat().length;
+  assert.ok(total > 10, `only ${total} <section class="…"> tags scanned across ${CORAL_FILES.length} files`);
+  assert.ok(emitted.get('Gallery.astro').flat().includes('st-gallery'), 'sanity: Gallery.astro must emit st-gallery');
+});
+
+// ── the generic floor rule itself ───────────────────────────────────────────────────────────────
+
+const FLOOR_SELECTOR_RE = /:where\(section\[class\^="st-"\][^)]*\)/;
+
+test('🔴 a generic section-container floor rule exists, targeting the SECTION the renderer wraps a coral in', () => {
+  assert.match(CSS, FLOOR_SELECTOR_RE, 'no :where(section[class^="st-"]…) rule in site.css');
+  const rules = CSS.replace(/\/\*[\s\S]*?\*\//g, '').match(/:where\(section\[class\^="st-"\][^{]*\{[^}]*\}/);
+  assert.ok(rules, 'the floor selector exists but is not attached to a rule body');
+  assert.match(rules[0], /max-width/, 'floor rule has no max-width');
+  assert.match(rules[0], /padding[^;]*clamp|padding-inline/, 'floor rule has no padding');
+  assert.match(rules[0], /margin-inline:\s*auto/, 'floor rule has no centering margin');
+});
+
+test('🔴 the floor rule is NOT gated on a custom theme (the sites missing this ARE the custom-theme ones)', () => {
+  const m = CSS.replace(/\/\*[\s\S]*?\*\//g, '').match(/:where\(section\[class\^="st-"\][^{]*\{[^}]*\}/);
+  assert.ok(m, 'nothing to check means this proves nothing — assert existence first');
+  assert.ok(!/data-theme-custom/.test(m[0]), 'the floor selector excludes exactly the sites that have this bug');
+});
+
+test('it is a FLOOR not a ceiling — :where() so a theme (or a coral\'s own rule) outranks it for free', () => {
+  assert.match(CSS, /:where\(section\[class\^="st-"\]/, 'the rule must sit in :where() for zero specificity');
+});
+
+test('the floor carries the SAME box values as the shared wrapper — one opinion about page width, not two', () => {
+  const shared = rulesFor('.st-cta').find((r) => /max-width/.test(r.css) && /st-prose/.test(r.selector));
+  assert.ok(shared, 'the shared section wrapper rule (.st-prose, .st-grid, .st-cta, .st-people) is gone');
+  const floorBody = CSS.replace(/\/\*[\s\S]*?\*\//g, '').match(/:where\(section\[class\^="st-"\][^{]*\{([^}]*)\}/)[1];
+  const norm = (s) => s.replace(/\s+/g, ' ').trim();
+  assert.equal(norm(floorBody), norm(shared.css), 'the floor should carry the same declarations as the shared wrapper');
+});
+
+// ── every coral's own emitted section class is actually reachable by the floor selector ─────────
+//
+// `[class^="st-"]` matches the *string value* of the class attribute, so a class list has to be
+// checked the way the browser checks it: does the whole attribute value start with "st-", and
+// does the token list contain "st-full-bleed"? This mirrors that logic instead of re-declaring a
+// by-hand exemption list, so a coral that quietly starts (or stops) opting out is caught here.
+function matchesFloor(classTokens) {
+  const attr = classTokens.join(' ');
+  return attr.startsWith('st-') && !classTokens.includes('st-full-bleed');
+}
+
+test('🔴 REGRESSION PIN: gallery / carousel / collection / timeline are reached by the floor selector', () => {
+  // The exact four corals probe_render found at x=0. Pinned individually so a future refactor of
+  // the generic rule that happens to stop covering one of them fails on the coral, not in the
+  // abstract.
+  for (const [file, cls] of [['Gallery.astro', 'st-gallery'], ['Carousel.astro', 'st-carousel'],
+                              ['Collection.astro', 'st-collection'], ['Timeline.astro', 'st-timeline']]) {
+    const sets = emitted.get(file);
+    const set = sets.find((s) => s.includes(cls));
+    assert.ok(set, `${file} no longer emits <section class="${cls}">`);
+    assert.ok(matchesFloor(set), `${cls} (${JSON.stringify(set)}) is not reached by [class^="st-"]:not(.st-full-bleed)`);
+  }
+});
+
+test('🔴 no coral in sections/ emits a section the floor cannot reach, unless it opts out on purpose', () => {
+  // The forward-looking half of the fix: a coral added after this file was written does not need
+  // a new CSS rule OR a new line in this test to get the inset — it only needs to keep emitting
+  // `<section class="st-…">`. This test is what makes that a checked property instead of a hope.
+  const unreached = [];
+  for (const [file, sets] of emitted) {
+    for (const classTokens of sets) {
+      if (!classTokens.some((c) => c.startsWith('st-'))) continue; // e.g. a blog/search section, out of scope
+      if (!matchesFloor(classTokens)) unreached.push(`${file}: ${classTokens.join(' ')}`);
+    }
+  }
+  // Hero is the one intentional exemption, and it is asserted explicitly below — everything else
+  // unreached here is either a bug or missing its own container rule (also checked below).
+  const unexplained = unreached.filter((u) => !/st-full-bleed/.test(u));
+  assert.deepEqual(unexplained, [], `section(s) the floor cannot reach and that did not opt out on purpose:\n    ${unexplained.join('\n    ')}`);
+});
+
+test('the 404 page section (`st-section st-notfound`) is also reached — two classes, not one', () => {
+  const m = /<section\s+class="([^"]+)"/.exec(PAGE_404);
+  assert.ok(m, '404.astro must still render a <section class="…">');
+  const tokens = m[1].split(/\s+/);
+  assert.ok(matchesFloor(tokens), `404 section (${m[1]}) is not reached by the floor selector`);
+});
+
+// ── hero: the one deliberate full-bleed opt-out ──────────────────────────────────────────────────
+
+test('🔴 every hero variant opts out via .st-full-bleed — the outer box stays edge-to-edge on purpose', () => {
+  const heroSrc = readFileSync(join(SECTIONS_DIR, 'Hero.astro'), 'utf8');
+  const sets = sectionClassSets(heroSrc);
+  assert.ok(sets.length >= 3, `expected 3 hero <section> variants, found ${sets.length}`);
+  for (const s of sets) {
+    assert.ok(s.includes('st-hero'), `a hero <section> lost its st-hero class: ${s.join(' ')}`);
+    assert.ok(s.includes('st-full-bleed'), `a hero <section> is missing the opt-out: ${s.join(' ')}`);
+  }
+});
+
+test('opting the OUTER hero box out of the floor does not mean the hero is unstyled — its inner content is still inset', () => {
+  // The exemption is for the section itself; the overlay/text that sits on top of the background
+  // carries its own max-width and padding regardless, same as before this change.
+  const overlay = rulesFor('st-hero-overlay').find((r) => /^\.st-hero-overlay\s*\{/.test(r.selector + ' {'));
+  assert.ok(overlay, '.st-hero-overlay rule is gone');
+  assert.match(overlay.css, /padding/, '.st-hero-overlay lost its padding');
+  const h1 = rulesFor('.st-hero h1').find((r) => /max-width/.test(r.css));
+  assert.ok(h1, '.st-hero h1 no longer bounds its own line length');
+});
+
+// ── tile-lab#11: the three corals with literally zero paint ─────────────────────────────────────
+
+test('the gallery/carousel coral still emits .st-gal-cells / .st-gal-cell / .st-gal-fig', () => {
+  const galSrc = readFileSync(join(SECTIONS_DIR, 'Gallery.astro'), 'utf8');
+  assert.match(galSrc, /class="st-gal-cells"/);
+  assert.match(galSrc, /st-gal-cell/);
+  assert.match(galSrc, /st-gal-fig/);
+});
+
+test('🔴 .st-gal-cells is a responsive GRID with a token gap', () => {
+  const rules = rulesFor('st-gal-cells').filter((r) => /^\.st-gal-cells\b/.test(r.selector));
+  assert.ok(rules.length > 0, '.st-gal-cells must be styled in site.css');
+  assert.ok(rules.some((r) => /display:\s*grid/.test(r.css)), 'no display:grid on .st-gal-cells');
+  assert.ok(rules.some((r) => /grid-template-columns/.test(r.css)), 'no responsive track');
+  assert.ok(rules.some((r) => /gap:\s*var\(--gd-gap\)/.test(r.css)), 'gap is not token-driven (var(--gd-gap))');
+});
+
+test('🔴 gallery/carousel images are object-fit: cover inside their figure', () => {
+  const rules = rulesFor('st-gal-fig');
+  assert.ok(rules.some((r) => /object-fit:\s*cover/.test(r.css)),
+    `no object-fit: cover reachable from .st-gal-fig; selectors were: ${rules.map((r) => r.selector).join(' | ')}`);
+});
+
+test('the tagcloud coral still emits .st-tag-flow / .st-tag', () => {
+  const tcSrc = readFileSync(join(SECTIONS_DIR, 'Tagcloud.astro'), 'utf8');
+  assert.match(tcSrc, /class="st-tag-flow"/);
+  assert.match(tcSrc, /class="st-tag"/);
+});
+
+test('the collection coral still emits .st-collection-pills / .st-collection-pill', () => {
+  const colSrc = readFileSync(join(SECTIONS_DIR, 'Collection.astro'), 'utf8');
+  assert.match(colSrc, /class="st-collection-pills"/);
+  assert.match(colSrc, /class="st-collection-pill/);
+});
+
+test('🔴 tag-flow / collection-pills are an inline-wrapping FLEX row (a container floor, not just chip color)', () => {
+  const rules = rulesFor('st-tag-flow').filter((r) => /st-tag-flow/.test(r.selector));
+  assert.ok(rules.length > 0, '.st-tag-flow must be styled');
+  assert.ok(rules.some((r) => /display:\s*flex/.test(r.css) && /flex-wrap:\s*wrap/.test(r.css)),
+    'no display:flex;flex-wrap:wrap on .st-tag-flow');
+  const pillRules = rulesFor('st-collection-pills').filter((r) => /^\.st-tag-flow,\s*\.st-collection-pills\b|st-collection-pills\s*\{/.test(r.selector) || /st-collection-pills/.test(r.selector));
+  assert.ok(pillRules.some((r) => /display:\s*flex/.test(r.css)), '.st-collection-pills is not a flex row');
+});
+
+test('🔴 .st-tag and .st-collection-pill render as PILLS — inline-flex + fully-rounded corners, matching the grid facet filter idiom', () => {
+  for (const cls of ['st-tag', 'st-collection-pill']) {
+    const rules = rulesFor(cls).filter((r) => new RegExp(`\\.${cls}\\b`).test(r.selector));
+    assert.ok(rules.length > 0, `.${cls} must be styled in site.css`);
+    assert.ok(rules.some((r) => /display:\s*inline-flex/.test(r.css)), `.${cls} is not inline-flex`);
+    assert.ok(rules.some((r) => /border-radius:\s*999px/.test(r.css)), `.${cls} is not a fully-rounded pill`);
+  }
+});
+
+// ── .st-code: pre stays bounded, inline spans can break ────────────────────────────────────────
+
+test('the coral/prose renderer still emits pre.st-code (block) and span.st-code (inline)', () => {
+  const core = readFileSync(join(HERE, 'site-core.js'), 'utf8');
+  const cssmd = readFileSync(join(HERE, '..', 'cssmd', 'cssmd.js'), 'utf8');
+  assert.match(core, /<pre class="st-code">/, 'site-core.js must still emit pre.st-code for fenced code');
+  assert.match(cssmd, /'-code">'/, 'cssmd must still emit the inline `<prefix>-code` span');
+});
+
+test('🔴 pre.st-code never pushes the page wider — max-width:100% ALONGSIDE its existing overflow-x:auto scroll', () => {
+  const rules = rulesFor('pre.st-code').filter((r) => /^pre\.st-code\b/.test(r.selector));
+  assert.ok(rules.length > 0, 'pre.st-code must be styled');
+  assert.ok(rules.some((r) => /max-width:\s*100%/.test(r.css)), 'pre.st-code has no max-width: 100%');
+  assert.ok(rules.some((r) => /overflow-x:\s*auto/.test(r.css)), 'pre.st-code lost its existing overflow-x: auto');
+});
+
+test('🔴 an inline code span can break — overflow-wrap: anywhere, so a long quoted token cannot widen the page', () => {
+  const rules = rulesFor('span.st-code');
+  assert.ok(rules.some((r) => /overflow-wrap:\s*anywhere/.test(r.css)),
+    `no overflow-wrap: anywhere reachable from span.st-code; selectors were: ${rules.map((r) => r.selector).join(' | ')}`);
+});
+
+test('🩸 CONTROL: the inline-span rule stays scoped to span, so it can never re-apply block padding/border to inline text', () => {
+  const rules = CSS.replace(/\/\*[\s\S]*?\*\//g, '').match(/span\.st-code\s*\{[^}]*\}/);
+  assert.ok(rules, 'span.st-code rule is gone');
+  assert.ok(!/padding|border|background/.test(rules[0]), 'span.st-code must not carry the block chrome — that is pre.st-code\'s job');
+});
+
+console.log(`  ${passed} passed`);