baseline-foundry 0.1.4 → 0.1.6

package/dist/css-components/logo-media.js

@@ -1,14 +1,14 @@
 /**
  * Vanilla parity ports: logo section and media object.
  *
- * Vanilla → BF rhythm mapping (at Vanilla's 8px unit):
- * - Logo mark heights 72px / 104px → `space-8 + space-1` / `space-12 +
+ * Vanilla → BF rhythm mapping (at Vanilla's 0.5rem unit):
+ * - Logo mark heights 4.5rem / 6.5rem → `space-8 + space-1` / `space-12 +
  *   space-1` (nine / thirteen BF baselines).
- * - Logo 32px inline gap → `space-4`; Vanilla's 8px / 16px negative row pull
+ * - Logo 2rem inline gap → `space-4`; Vanilla's 0.5rem / 1rem negative row pull
  *   and matching wrapper compensation → `space-1` / `space-2`.
- * - Media thumbnails 48px / 96px → `space-6` / `space-12`; their 16px
- *   gap → `space-2`; trailing 24px → `section-space-shallow`; metadata top
- *   8px → `space-1`.
+ * - Media thumbnails 3rem / 6rem → `space-6` / `space-12`; their 1rem
+ *   gap → `space-2`; trailing 1.5rem → `section-space-shallow`; metadata top
+ *   0.5rem → `space-1`.
  *
  * Those are relative values, rather than fixed pixels, so the same semantics
  * retain the deliberately denser documentation, app, and OS tiers.
@@ -21,7 +21,7 @@ export function logoMediaCss() {
 :where(.bf-theme) :where(.bf-logo-section) {
   container-name: bf-logo-section;
   container-type: inline-size;
-  margin-block-end: var(--bf-section-space-shallow);
+  margin: 0;
   min-inline-size: 0;
 }
 
@@ -55,8 +55,8 @@ export function logoMediaCss() {
 }
 
 :where(.bf-theme) :where(.bf-logo-section-link:focus-visible) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: 2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: 0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-logo-section-logo) {
@@ -83,7 +83,7 @@ export function logoMediaCss() {
   inline-size: 100%;
 }
 
-/* Vanilla's small breakpoint is 620px. The items descendant, rather than the
+/* Vanilla's small breakpoint is 38.75rem. The items descendant, rather than the
    query container itself, responds when its allocated space reaches it. */
 @container bf-logo-section (width >= 38.75rem) {
   :where(.bf-theme) :where(.bf-logo-section-items) {
@@ -107,19 +107,21 @@ export function logoMediaCss() {
 
 /* ------------------------------------------------------------------ */
 /* Media object — semantic media/content slots with a container-owned */
-/* structural collapse only. Content roles retain their own spacing.  */
+/* structural collapse. Content roles retain their metric boxes.      */
 /* ------------------------------------------------------------------ */
 
 :where(.bf-theme) :where(.bf-media-object) {
-  margin-block-end: var(--bf-section-space-shallow);
+  container-name: bf-media-object;
+  container-type: inline-size;
+  margin: 0;
   min-inline-size: 0;
 }
 
 :where(.bf-theme) :where(.bf-media-object-layout) {
-  display: grid;
   align-items: start;
-  column-gap: var(--bf-space-2);
-  grid-template-columns: auto minmax(0, 1fr);
+  column-gap: var(--bf-grid-gap-inline);
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
   min-inline-size: 0;
 }
 
@@ -131,6 +133,10 @@ export function logoMediaCss() {
   min-inline-size: 0;
 }
 
+:where(.bf-theme) :where(.bf-media-object-media) {
+  grid-column: 1 / span 2;
+}
+
 :where(.bf-theme) :where(.bf-media-object-media > :where(img, picture, svg, video)) {
   block-size: 100%;
   display: block;
@@ -145,6 +151,7 @@ export function logoMediaCss() {
 }
 
 :where(.bf-theme) :where(.bf-media-object-content) {
+  grid-column: 3 / -1;
   min-inline-size: 0;
   overflow-wrap: anywhere;
 }
@@ -184,8 +191,12 @@ export function logoMediaCss() {
 }
 
 :where(.bf-theme) :where(.bf-media-object-meta-list) {
+  --bf-stack-space: var(--bf-space-1);
+  align-content: start;
+  display: grid;
+  gap: var(--bf-stack-space);
   list-style: none;
-  margin: var(--bf-space-1) 0 0;
+  margin: 0;
   padding: 0;
 }
 
@@ -198,22 +209,22 @@ export function logoMediaCss() {
   overflow-wrap: anywhere;
 }
 
-:where(.bf-theme) :where(.bf-media-object-meta + .bf-media-object-meta) {
-  margin-block-start: var(--bf-space-1);
-}
-
 :where(.bf-theme) :where(.bf-media-object-meta .bf-icon) {
   margin-block-start: var(--bf-body-nudge-start);
 }
 
-:where(.bf-theme) :where(.bf-media-object.is-media-end) :where(.bf-media-object-content) {
-  grid-column: 1;
-  grid-row: 1;
-}
+@container bf-media-object (width >= 38.75rem) {
+  :where(.bf-theme) :where(.bf-media-object-layout) {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
 
-:where(.bf-theme) :where(.bf-media-object.is-media-end) :where(.bf-media-object-media) {
-  grid-column: 2;
-  grid-row: 1;
+  :where(.bf-theme) :where(.bf-media-object-media) {
+    grid-column: 1 / span 2;
+  }
+
+  :where(.bf-theme) :where(.bf-media-object-content) {
+    grid-column: 3 / -1;
+  }
 }
 `;
 }

package/dist/css-components/navigation-layout.js

@@ -14,8 +14,8 @@ export function navigationLayoutCss() {
 }
 
 /* The tagged treatment is opt-in. The Circle of Friends is aligned to the
- * first title line, then the 38px tag extends upward to the navigation edge.
- * Its 22px inline size preserves the established 38:22 (~1.73) tag ratio; the
+ * first title line, then the 2.375rem tag extends upward to the navigation edge.
+ * Its 1.375rem inline size preserves the established 38:22 (~1.73) tag ratio; the
  * tag must not stretch to the full occupied navigation row. */
 :where(.bf-theme) :where(.bf-top-navigation-logo.is-canonical-tagged) {
   min-inline-size: 0;
@@ -69,13 +69,11 @@ export function navigationLayoutCss() {
   line-height: var(--bf-top-navigation-logo-title-line-height, var(--bf-body-line-height, 1.5));
   overflow: visible;
   overflow-wrap: anywhere;
-  /* The first title line and the 16px mark share the mark's fixed centre:
-   * tag block-end minus the 6px inset minus half the mark. Symmetric title
-   * padding keeps the occupied row stable across all four type-density tiers. */
+  /* The first title line and the 1rem mark share the public brand-line centre.
+   * The derived brand block is twice that fixed centre, so the orange tag can
+   * extend upward without changing the title or adjacent-header baseline. */
   padding-block: calc(
-    var(--bf-top-navigation-logo-tag-block-size)
-    - var(--bf-top-navigation-logo-icon-bottom-offset)
-    - (var(--bf-top-navigation-logo-icon-size) / 2)
+    var(--bf-navigation-brand-line-center-block)
     - (var(--bf-top-navigation-logo-title-line-height, var(--bf-body-line-height, 1.5rem)) / 2)
   );
   text-overflow: clip;

package/dist/css-components/panel.js

@@ -1,6 +1,7 @@
 export function panelCss(options) {
     const { bodyTypeStyles, h4TypeStyles } = options;
     return `:where(.bf-theme) :where(.bf-panel) {
+  --bf-panel-content-padding-inline: var(--bf-component-inline-inset-continuation);
   background: var(--bf-color-background-default);
   color: var(--bf-color-text-default);
   display: flex;
@@ -23,6 +24,9 @@ export function panelCss(options) {
   overscroll-behavior: contain;
 }
 
+/* Panel chrome and content consume the live page-grid gutter through a local
+ * derived property, so their internal text rails follow the same
+ * viewport brackets as surrounding page content. */
 :where(.bf-theme) :where(.bf-panel-header) {
   align-items: start;
   display: flex;
@@ -31,7 +35,7 @@ export function panelCss(options) {
   justify-content: space-between;
   padding-block-end: var(--bf-panel-padding-block);
   padding-block-start: var(--bf-panel-padding-block);
-  padding-inline: var(--bf-panel-padding-inline);
+  padding-inline: var(--bf-panel-content-padding-inline, var(--bf-panel-padding-inline));
 }
 
 /* A navigation brand keeps the Canonical tag attached to the panel's top edge
@@ -41,17 +45,13 @@ export function panelCss(options) {
   gap: 0;
   padding-block: 0;
   padding-inline-end: 0;
-  padding-inline-start: var(--bf-panel-padding-inline);
+  padding-inline-start: var(--bf-panel-content-padding-inline, var(--bf-panel-padding-inline));
 }
 
 :where(.bf-theme) :where(.bf-panel-header.is-navigation-brand) > :where(.bf-top-navigation-logo.is-canonical-tagged) {
   inline-size: 100%;
 }
 
-:where(.bf-theme) :where(.bf-panel-header.is-navigation-brand) :where(.bf-top-navigation-logo-title) {
-  transform: translateY(var(--bf-navigation-brand-title-optical-offset-block));
-}
-
 :where(.bf-theme) :where(.bf-panel-header) > :where(.bf-panel-title) {
   min-inline-size: 0;
 }
@@ -72,10 +72,10 @@ export function panelCss(options) {
   flex-wrap: wrap;
   gap: var(--bf-field-gap);
   justify-content: space-between;
-  min-block-size: calc(var(--bf-control-box-size-compact) + (var(--bf-panel-padding-block) * 2));
+  min-block-size: calc(var(--bf-control-box-size-compact) + var(--bf-panel-padding-block));
   padding-block-end: var(--bf-panel-padding-block);
-  padding-block-start: calc(var(--bf-panel-padding-block) - var(--bf-border-width));
-  padding-inline: var(--bf-panel-padding-inline);
+  padding-block-start: 0;
+  padding-inline: var(--bf-panel-content-padding-inline, var(--bf-panel-padding-inline));
 }
 
 :where(.bf-theme) :where(.bf-panel-footer.is-sticky) {
@@ -127,8 +127,8 @@ ${bodyTypeStyles}  align-items: center;
 }
 
 :where(.bf-theme) :where(.bf-panel-toggle:focus-visible) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: 2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: 0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-panel-content) {
@@ -136,7 +136,7 @@ ${bodyTypeStyles}  align-items: center;
   min-block-size: 0;
   padding-block-end: var(--bf-panel-padding-block);
   padding-block-start: var(--bf-panel-padding-block);
-  padding-inline: var(--bf-panel-padding-inline);
+  padding-inline: var(--bf-panel-content-padding-inline, var(--bf-panel-padding-inline));
 }
 
 :where(.bf-theme) :where(.bf-panel-content.is-flush) {

package/dist/css-components/search-box-and-filter.d.ts

@@ -2,7 +2,6 @@ type SearchBoxAndFilterCssOptions = {
     bodySelectedStartNudge: string;
     bodyTypeStyles: string;
     buttonBlockPaddingVar: string;
-    h6TypeStyles: string;
     inputMarginBottom: string;
 };
 export declare function searchBoxAndFilterCss(options: SearchBoxAndFilterCssOptions): string;

package/dist/css-components/search-box-and-filter.js

@@ -1,7 +1,7 @@
 export function searchBoxAndFilterCss(options) {
-    const { bodySelectedStartNudge, bodyTypeStyles, buttonBlockPaddingVar, h6TypeStyles, inputMarginBottom, } = options;
+    const { bodySelectedStartNudge, bodyTypeStyles, buttonBlockPaddingVar, inputMarginBottom, } = options;
     return `:where(.bf-theme) :where(.bf-search-box) {
-  --bf-search-box-action-inline-size: calc(1rem + (var(--bf-control-inline-padding-field) * 2));
+  --bf-search-box-action-inline-size: calc(1rem + (var(--bf-component-inline-inset-field) * 2));
   --bf-search-box-trailing-inline-size: calc((var(--bf-search-box-action-inline-size) * 2) + var(--bf-border-width));
   display: flex;
   inline-size: 100%;
@@ -18,12 +18,12 @@ export function searchBoxAndFilterCss(options) {
 
 :where(.bf-theme) :where(.bf-search-box-reset, .bf-search-box-button) {
   align-items: center;
-  block-size: var(--bf-control-box-size);
+  block-size: auto;
   display: inline-flex;
   inline-size: var(--bf-search-box-action-inline-size);
+  inset-block: 0;
   justify-content: center;
   position: absolute;
-  top: 0;
 }
 
 :where(.bf-theme) :where(.bf-search-box-reset) {
@@ -40,7 +40,7 @@ export function searchBoxAndFilterCss(options) {
   inset-inline-end: var(--bf-border-width);
   margin: 0;
   padding: 0;
-  text-indent: -9999px;
+  text-indent: -624.9375rem;
 }
 
 :where(.bf-theme) :where(.bf-search-box-button)::before {
@@ -67,8 +67,8 @@ export function searchBoxAndFilterCss(options) {
 }
 
 :where(.bf-theme) :where(.bf-search-box-reset:focus-visible, .bf-search-box-button:focus-visible) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: -2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: -0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-search-and-filter) {
@@ -83,7 +83,7 @@ export function searchBoxAndFilterCss(options) {
 :where(.bf-theme) :where(.bf-search-and-filter-search-container) {
   align-items: stretch;
   background: transparent;
-  box-shadow: inset 0 -1px 0 var(--bf-color-border-high-contrast);
+  box-shadow: inset 0 -0.0625rem 0 var(--bf-color-border-high-contrast);
   display: flex;
   flex-wrap: wrap;
   gap: var(--bf-field-gap);
@@ -99,7 +99,7 @@ export function searchBoxAndFilterCss(options) {
 }
 
 :where(.bf-theme) :where(.bf-search-and-filter-box) {
-  --bf-search-and-filter-action-inline-size: calc(1rem + (var(--bf-control-inline-padding-field) * 2));
+  --bf-search-and-filter-action-inline-size: calc(1rem + (var(--bf-component-inline-inset-field) * 2));
   --bf-search-and-filter-trailing-inline-size: calc(var(--bf-search-and-filter-action-inline-size) * 2);
   display: inline-flex;
   flex: 1 1 12rem;
@@ -116,17 +116,17 @@ export function searchBoxAndFilterCss(options) {
 :where(.bf-theme) :where(.bf-search-and-filter-search-button) {
   appearance: none;
   background: transparent;
-  block-size: var(--bf-control-box-size);
+  block-size: auto;
   border: 0;
   color: var(--bf-color-text-default);
   cursor: pointer;
   inline-size: var(--bf-search-and-filter-action-inline-size);
+  inset-block: 0;
   inset-inline-end: 0;
   margin: 0;
   padding: 0;
   position: absolute;
-  text-indent: -9999px;
-  top: 0;
+  text-indent: -624.9375rem;
 }
 
 :where(.bf-theme) :where(.bf-search-and-filter-search-button)::before {
@@ -153,16 +153,16 @@ export function searchBoxAndFilterCss(options) {
 }
 
 :where(.bf-theme) :where(.bf-search-and-filter-search-button:focus-visible, .bf-search-and-filter-selected-count:focus-visible) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: -2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: -0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-search-and-filter-clear) {
-  block-size: var(--bf-control-box-size);
+  block-size: auto;
   inline-size: var(--bf-search-and-filter-action-inline-size);
+  inset-block: 0;
   inset-inline-end: var(--bf-search-and-filter-action-inline-size);
   position: absolute;
-  top: 0;
 }
 
 :where(.bf-theme) :where(.bf-search-and-filter-selected-count) {
@@ -187,12 +187,12 @@ ${bodyTypeStyles}  appearance: none;
   background-color: var(--bf-color-background-inputs);
   border: var(--bf-border-width) solid var(--bf-color-border-default);
   border-top: 0;
-  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.38);
+  box-shadow: 0 1.5rem 4.5rem rgba(0, 0, 0, 0.38);
   display: grid;
   gap: var(--bf-field-gap);
   opacity: 1;
   padding-bottom: calc(var(--bf-panel-padding-block) - var(--bf-border-width));
-  padding-inline: var(--bf-panel-padding-inline);
+  padding-inline: var(--bf-component-inline-inset-continuation);
   padding-top: var(--bf-panel-padding-block);
   position: absolute;
   top: 100%;
@@ -237,7 +237,6 @@ ${bodyTypeStyles}  appearance: none;
 }
 
 :where(.bf-theme) :where(.bf-filter-panel-section-heading) {
-${h6TypeStyles}  color: var(--bf-color-text-muted);
   margin: 0;
   padding-block: 0;
 }

package/dist/css-components/sites-editorial-ports.d.ts

@@ -7,10 +7,9 @@
  *
  * Vanilla → BF spacing mapping:
  * - Hero's `$spv--large` / `$spv--x-large` top boundary → `space-2` /
- *   `space-3`; `$spv--strip-regular / 2` / full strip bottom boundary →
- *   half `section-space` / full `section-space`.
- * - The 50/50, 25/75 and 75/25 grid relationships use BF's intrinsic grid
- *   and gutter token at Vanilla's 620px / 1036px composition thresholds.
+ *   `space-3`; the surrounding stack owns the section exit.
+ * - The default 50/50 relationship remains viable from a measured 45rem
+ *   allocation; explicit 25/75 and 75/25 variants retain their own thresholds.
  * - Quote-wrapper's signpost/content and quote/citation relationships use
  *   the same 25/75 and 2/1 proportions. A quotation itself remains the
  *   existing semantic BF prose `blockquote`; it is not recreated as a

package/dist/css-components/sites-editorial-ports.js

@@ -7,10 +7,9 @@
  *
  * Vanilla → BF spacing mapping:
  * - Hero's `$spv--large` / `$spv--x-large` top boundary → `space-2` /
- *   `space-3`; `$spv--strip-regular / 2` / full strip bottom boundary →
- *   half `section-space` / full `section-space`.
- * - The 50/50, 25/75 and 75/25 grid relationships use BF's intrinsic grid
- *   and gutter token at Vanilla's 620px / 1036px composition thresholds.
+ *   `space-3`; the surrounding stack owns the section exit.
+ * - The default 50/50 relationship remains viable from a measured 45rem
+ *   allocation; explicit 25/75 and 75/25 variants retain their own thresholds.
  * - Quote-wrapper's signpost/content and quote/citation relationships use
  *   the same 25/75 and 2/1 proportions. A quotation itself remains the
  *   existing semantic BF prose `blockquote`; it is not recreated as a
@@ -23,15 +22,15 @@ export function sitesEditorialPortsCss() {
 /* semantic gaps and every text child keeps metric compensation.        */
 /* ------------------------------------------------------------------ */
 
-/* Hero: its deliberately asymmetric boundary mirrors the current Vanilla
-   section--hero: a compact arrival space, then the normal section exit. The
-   entry rule replaces one pixel of padding so it never changes the rhythm. */
+/* Hero: the compact arrival space belongs inside its entry rule. The outer
+   stack owns the section exit, and the rule replaces one pixel of padding so
+   it never changes the rhythm. */
 :where(.bf-theme) :where(.bf-hero) {
   border-block-start: var(--bf-border-width) solid var(--bf-color-border-low-contrast);
   container-name: bf-hero;
   container-type: inline-size;
   min-inline-size: 0;
-  padding-block-end: calc(var(--bf-section-space) / 2);
+  padding-block-end: 0;
   padding-block-start: calc(var(--bf-space-2) - var(--bf-border-width));
 }
 
@@ -44,6 +43,7 @@ export function sitesEditorialPortsCss() {
 
 :where(.bf-theme) :where(.bf-hero-layout) {
   display: grid;
+  gap: var(--bf-section-space-shallow);
   grid-template-columns: minmax(0, 1fr);
   min-inline-size: 0;
 }
@@ -53,9 +53,9 @@ export function sitesEditorialPortsCss() {
   overflow-wrap: anywhere;
 }
 
-/* The normal hero keeps title, supporting heading, chip, prose and CTA in a
-   semantic copy stack. Hero titles are h1 slots and supporting titles are h2
-   slots. */
+/* Legacy copy slots remain valid for signpost variants. The default arrival
+   composition separates a title area from its supporting content area, and
+   the demo composes each area with the public stack density modifiers. */
 :where(.bf-theme) :where(.bf-hero-copy) {
   align-content: start;
   display: grid;
@@ -82,7 +82,7 @@ export function sitesEditorialPortsCss() {
    allocated a fluid grid track. Snap only the media block to the active tier
    baseline so the following semantic text remains on-grid; its inline track
    and the surrounding Vanilla proportions remain unchanged. */
-@supports (block-size: calc-size(auto, round(up, size, 1px))) {
+@supports (block-size: calc-size(auto, round(up, size, 0.0625rem))) {
   :where(.bf-theme) :where(.bf-hero-media > .bf-aspect, .bf-hero-signpost > :where(img, picture, video, canvas, svg)) {
     block-size: calc-size(auto, round(up, size, var(--bf-baseline)));
   }
@@ -105,14 +105,10 @@ export function sitesEditorialPortsCss() {
   inline-size: 100%;
 }
 
-/* Vanilla's desktop hero boundary is 1036px. The layout descendant responds
-   to the root container so embedding it in a narrower rail still collapses
-   correctly. */
-/* The section boundary itself follows Vanilla's page-level desktop switch;
-   the composition below continues to react to the allocated container. */
+/* The section boundary follows the page-level desktop switch, while the
+   two-column composition uses its measured intrinsic allocation below. */
 @media (width >= 64.75rem) {
   :where(.bf-theme) :where(.bf-hero) {
-    padding-block-end: var(--bf-section-space);
     padding-block-start: calc(var(--bf-space-3) - var(--bf-border-width));
   }
 
@@ -121,7 +117,7 @@ export function sitesEditorialPortsCss() {
   }
 }
 
-@container bf-hero (width >= 64.75rem) {
+@container bf-hero (width >= 45rem) {
   :where(.bf-theme) :where(.bf-hero-layout) {
     column-gap: var(--bf-grid-gap-inline);
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -141,9 +137,10 @@ export function sitesEditorialPortsCss() {
   }
 }
 
-/* Vanilla can intentionally split the three proportioned layouts at its
-   medium threshold. The modifier changes only structural tracks. */
-@container bf-hero (width >= 38.75rem) {
+/* The named variants retain their proportion but share the readable split
+   threshold with the default hero. The modifier changes only structural
+   tracks; it does not introduce an earlier cramped layout. */
+@container bf-hero (width >= 45rem) {
   :where(.bf-theme) :where(.bf-hero.is-split-medium) :where(.bf-hero-layout) {
     column-gap: var(--bf-grid-gap-inline);
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -163,14 +160,10 @@ export function sitesEditorialPortsCss() {
 :where(.bf-theme) :where(.bf-quote-wrapper) {
   container-name: bf-quote-wrapper;
   container-type: inline-size;
-  margin-block-end: var(--bf-section-space);
+  margin: 0;
   min-inline-size: 0;
 }
 
-:where(.bf-theme) :where(.bf-quote-wrapper.is-shallow) {
-  margin-block-end: var(--bf-section-space-shallow);
-}
-
 :where(.bf-theme) :where(.bf-quote-wrapper-header, .bf-quote-wrapper-layout, .bf-quote-wrapper-signpost, .bf-quote-wrapper-content, .bf-quote-wrapper-citation, .bf-quote-wrapper-media) {
   min-inline-size: 0;
   overflow-wrap: anywhere;
@@ -217,7 +210,7 @@ export function sitesEditorialPortsCss() {
 /* The quote rail can also be a fractional grid track. Keep its media from
    introducing a sub-baseline row while leaving quotation and citation rhythm
    entirely baseline-compensated while its stack owns semantic gaps. */
-@supports (block-size: calc-size(auto, round(up, size, 1px))) {
+@supports (block-size: calc-size(auto, round(up, size, 0.0625rem))) {
   :where(.bf-theme) :where(.bf-quote-wrapper-signpost > :where(img, picture, svg), .bf-quote-wrapper-media > .bf-aspect) {
     block-size: calc-size(auto, round(up, size, var(--bf-baseline)));
   }
@@ -256,8 +249,47 @@ export function sitesEditorialPortsCss() {
 }
 
 @container bf-quote-wrapper (width >= 64.75rem) {
+  :where(.bf-theme) :where(.bf-quote-wrapper-header) {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+
+  :where(.bf-theme) :where(.bf-quote-wrapper-header) > :first-child {
+    grid-column: 1 / span 6;
+  }
+
+  :where(.bf-theme) :where(.bf-quote-wrapper-header-link) {
+    grid-column: 7 / -1;
+  }
+
+  :where(.bf-theme) :where(.bf-quote-wrapper-layout) {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+
+  :where(.bf-theme) :where(.bf-quote-wrapper-signpost) {
+    grid-column: 1 / span 2;
+  }
+
+  :where(.bf-theme) :where(.bf-quote-wrapper-content, .bf-quote-wrapper-content:only-child) {
+    display: grid;
+    grid-column: 3 / -1;
+    grid-template-columns: subgrid;
+  }
+
   :where(.bf-theme) :where(.bf-quote-wrapper-quote-row) {
-    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+  }
+
+  :where(.bf-theme) :where(.bf-quote-wrapper-prose) {
+    grid-column: 1 / span 4;
+  }
+
+  :where(.bf-theme) :where(.bf-quote-wrapper-citation) {
+    grid-column: 5 / -1;
+  }
+
+  :where(.bf-theme) :where(.bf-quote-wrapper-content) > :where(.bf-cta-block, .bf-quote-wrapper-media) {
+    grid-column: 1 / -1;
   }
 }
 `;

package/dist/css-components/sites-foundation.js

@@ -55,35 +55,27 @@ export function sitesFoundationCss() {
 }
 
 /* A section title may be the route action without looking like body copy. */
-:where(.bf-theme) :where(.bf-basic-section-title-link, .bf-basic-section-title-link:visited) {
+:where(.bf-theme) :where(a.bf-basic-section-title-link, a.bf-basic-section-title-link:visited) {
   color: var(--bf-color-link-default);
   text-decoration: none;
 }
 
-:where(.bf-theme) :where(.bf-basic-section-title-link:hover) {
+:where(.bf-theme) :where(a.bf-basic-section-title-link:hover) {
   text-decoration: underline;
   text-decoration-thickness: var(--bf-border-width);
   text-underline-offset: 0.12em;
 }
 
-/* Vanilla splits at medium only on request, otherwise at its large breakpoint.
-   The layout descendant reacts to the root container; the query never tries to
+/* A balanced section switches at the shared readable 50/50 threshold. The
+   layout descendant reacts to the root container; the query never tries to
    restyle the container that established it. */
-@container bf-basic-section (width >= 38.75rem) {
-  :where(.bf-theme) :where(.bf-basic-section.is-split-medium) :where(.bf-basic-section-layout) {
+@container bf-basic-section (width >= 45rem) {
+  :where(.bf-theme) :where(.bf-basic-section-layout) {
     column-gap: var(--bf-grid-gap-inline);
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 
-@container bf-basic-section (width >= 64.75rem) {
-  :where(.bf-theme) :where(.bf-basic-section:not(.is-split-medium)) :where(.bf-basic-section-layout) {
-    column-gap: var(--bf-grid-gap-inline);
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-}
-
 /* CTA section: Vanilla's 25/75 variant is an offset content rail. The full
    variant stays naturally full-width. Typography and action presentation are
    supplied by real heading elements and bf-cta-block. */
@@ -97,19 +89,23 @@ export function sitesFoundationCss() {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   min-inline-size: 0;
-  padding-block: calc(var(--bf-section-space-deep) / 2);
 }
 
 :where(.bf-theme) :where(.bf-cta-section-content) {
+  --bf-stack-space: var(--bf-section-space-shallow);
+  align-content: start;
+  display: grid;
+  gap: var(--bf-stack-space);
   min-inline-size: 0;
   overflow-wrap: anywhere;
 }
 
-@container bf-cta-section (width >= 64.75rem) {
-  :where(.bf-theme) :where(.bf-cta-section-layout) {
-    padding-block: var(--bf-section-space-deep);
-  }
+:where(.bf-theme) :where(.bf-cta-section-copy) {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
 
+@container bf-cta-section (width >= 64.75rem) {
   :where(.bf-theme) :where(.bf-cta-section.is-offset) :where(.bf-cta-section-layout) {
     column-gap: var(--bf-grid-gap-inline);
     grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);

package/dist/css-components/sites-rich-lists.d.ts

@@ -8,11 +8,11 @@
  * content paired with one responsive image or video slot.
  *
  * Vanilla → BF spacing mapping:
- * - horizontal item 8px/16px block padding → `space-1`/`space-2`;
- * - 16px grid gutters → `grid-gap-inline`;
- * - shallow/default/deep section exits → BF's existing section tokens;
- * - the 620px/1036px page breakpoints → 38.75rem/64.75rem container
+ * - horizontal item 0.5rem/1rem block padding → `space-1`/`space-2`;
+ * - 1rem grid gutters → `grid-gap-inline`;
+ * - the 38.75rem/64.75rem page breakpoints → 38.75rem/64.75rem container
  *   thresholds for descendants. Text roles keep their own metric-derived
- *   margins and baseline compensation in every tier.
+ *   margins and baseline compensation in every tier. Parent stacks own every
+ *   boundary outside the pattern.
  */
 export declare function sitesRichListsCss(): string;