@refrakt-md/lumina 0.19.0 → 0.20.1

package/base.css

@@ -33,5 +33,9 @@
 @import './styles/dimensions/state.css';
 @import './styles/dimensions/media.css';
 @import './styles/dimensions/surfaces.css';
+@import './styles/dimensions/frame.css';
+@import './styles/dimensions/substrate.css';
+@import './styles/dimensions/cover.css';
+@import './styles/dimensions/guest-posture.css';
 @import './styles/dimensions/checklist.css';
 @import './styles/dimensions/sequence.css';

package/contracts/structures.json

@@ -288,6 +288,18 @@
 				"collapse": {
 					"source": "meta",
 					"dataAttribute": "data-collapse"
+				},
+				"content-place": {
+					"source": "meta",
+					"dataAttribute": "data-content-place"
+				},
+				"height": {
+					"source": "meta",
+					"dataAttribute": "data-height"
+				},
+				"aspect": {
+					"source": "meta",
+					"dataAttribute": "data-aspect"
 				}
 			},
 			"elements": {
@@ -305,6 +317,76 @@
 			"inlineStyles": {
 				"valign": {
 					"prop": "--split-valign"
+				},
+				"aspect": "aspect-ratio"
+			},
+			"variants": {
+				"media-position": {
+					"cover": {
+						"block": "card",
+						"root": ".rf-card",
+						"dataRune": "card",
+						"childOrder": [
+							"media",
+							"content",
+							"{content}"
+						],
+						"modifiers": {
+							"media-position": {
+								"source": "meta",
+								"default": "top",
+								"dataAttribute": "data-media-position"
+							},
+							"media-ratio": {
+								"source": "meta",
+								"dataAttribute": "data-media-ratio"
+							},
+							"valign": {
+								"source": "meta",
+								"dataAttribute": "data-valign"
+							},
+							"collapse": {
+								"source": "meta",
+								"dataAttribute": "data-collapse"
+							},
+							"content-place": {
+								"source": "meta",
+								"dataAttribute": "data-content-place"
+							},
+							"height": {
+								"source": "meta",
+								"dataAttribute": "data-height"
+							},
+							"aspect": {
+								"source": "meta",
+								"dataAttribute": "data-aspect"
+							}
+						},
+						"staticModifiers": [
+							{
+								"name": "cover",
+								"selector": ".rf-card--cover"
+							}
+						],
+						"elements": {
+							"content": {
+								"tag": "div",
+								"selector": ".rf-card__content",
+								"source": "layout",
+								"children": [
+									"eyebrow",
+									"body",
+									"footer"
+								]
+							}
+						},
+						"inlineStyles": {
+							"valign": {
+								"prop": "--split-valign"
+							},
+							"aspect": "aspect-ratio"
+						}
+					}
 				}
 			}
 		},
@@ -876,44 +958,12 @@
 			"childOrder": [
 				"{content}"
 			],
-			"modifiers": {
-				"shadow": {
-					"source": "meta",
-					"default": "none",
-					"classPattern": ".rf-showcase--{value}",
-					"dataAttribute": "data-shadow"
-				},
-				"bleed": {
-					"source": "meta",
-					"default": "none",
-					"classPattern": ".rf-showcase--{value}",
-					"dataAttribute": "data-bleed"
-				},
-				"aspect": {
-					"source": "meta",
-					"dataAttribute": "data-aspect"
-				},
-				"offset": {
-					"source": "meta",
-					"dataAttribute": "data-offset"
-				},
-				"place": {
-					"source": "meta",
-					"dataAttribute": "data-place"
-				}
-			},
 			"contextModifiers": {
 				"bento-cell": {
 					"suffix": "in-bento-cell",
 					"selector": ".rf-showcase--in-bento-cell"
 				}
 			},
-			"inlineStyles": {
-				"offset": {
-					"prop": "--showcase-offset"
-				},
-				"aspect": "--showcase-aspect"
-			},
 			"childDensity": "compact"
 		},
 		"TabGroup": {
@@ -3266,6 +3316,10 @@
 				"collapse": {
 					"source": "meta",
 					"dataAttribute": "data-collapse"
+				},
+				"content-place": {
+					"source": "meta",
+					"dataAttribute": "data-content-place"
 				}
 			},
 			"elements": {
@@ -3333,6 +3387,144 @@
 				"valign": {
 					"prop": "--split-valign"
 				}
+			},
+			"variants": {
+				"media-position": {
+					"cover": {
+						"block": "recipe",
+						"root": ".rf-recipe",
+						"dataRune": "recipe",
+						"childOrder": [
+							"cover-band",
+							"content",
+							"{content}"
+						],
+						"modifiers": {
+							"media-position": {
+								"source": "meta",
+								"default": "top",
+								"dataAttribute": "data-media-position"
+							},
+							"prepTime": {
+								"source": "meta",
+								"dataAttribute": "data-prep-time"
+							},
+							"cookTime": {
+								"source": "meta",
+								"dataAttribute": "data-cook-time"
+							},
+							"servings": {
+								"source": "meta",
+								"dataAttribute": "data-servings"
+							},
+							"difficulty": {
+								"source": "meta",
+								"default": "medium",
+								"classPattern": ".rf-recipe--{value}",
+								"dataAttribute": "data-difficulty"
+							},
+							"media-ratio": {
+								"source": "meta",
+								"dataAttribute": "data-media-ratio"
+							},
+							"valign": {
+								"source": "meta",
+								"dataAttribute": "data-valign"
+							},
+							"collapse": {
+								"source": "meta",
+								"dataAttribute": "data-collapse"
+							},
+							"content-place": {
+								"source": "meta",
+								"dataAttribute": "data-content-place"
+							}
+						},
+						"staticModifiers": [
+							{
+								"name": "cover",
+								"selector": ".rf-recipe--cover"
+							}
+						],
+						"elements": {
+							"metadata": {
+								"tag": "dl",
+								"selector": ".rf-recipe__metadata",
+								"source": "block",
+								"layout": "definition-list",
+								"fields": [
+									"prepTime",
+									"cookTime",
+									"servings",
+									"difficulty"
+								]
+							},
+							"preamble": {
+								"tag": "header",
+								"selector": ".rf-recipe__preamble",
+								"source": "layout",
+								"children": [
+									"eyebrow",
+									"headline",
+									"blurb"
+								]
+							},
+							"eyebrow": {
+								"tag": "eyebrow",
+								"selector": ".rf-recipe__eyebrow",
+								"source": "autoLabel"
+							},
+							"headline": {
+								"tag": "headline",
+								"selector": ".rf-recipe__headline",
+								"source": "autoLabel"
+							},
+							"blurb": {
+								"tag": "blurb",
+								"selector": ".rf-recipe__blurb",
+								"source": "autoLabel"
+							},
+							"image": {
+								"tag": "image",
+								"selector": ".rf-recipe__image",
+								"source": "autoLabel"
+							},
+							"media": {
+								"tag": "media",
+								"selector": ".rf-recipe__media",
+								"source": "autoLabel"
+							},
+							"content": {
+								"tag": "div",
+								"selector": ".rf-recipe__content",
+								"source": "layout",
+								"children": [
+									"metadata",
+									"ingredients",
+									"steps",
+									"tips"
+								]
+							},
+							"cover-band": {
+								"tag": "div",
+								"selector": ".rf-recipe__cover-band",
+								"source": "layout",
+								"children": [
+									"media",
+									"preamble"
+								],
+								"attrs": {
+									"data-color-scheme": "dark"
+								}
+							}
+						},
+						"inlineStyles": {
+							"valign": {
+								"prop": "--split-valign"
+							}
+						}
+					}
+				}
 			}
 		},
 		"RecipeIngredient": {

package/dist/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE3D;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,YAAY,EAAE,iBAmL1B,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE3D;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,YAAY,EAAE,iBAyL1B,CAAC"}

package/dist/tokens.js

@@ -93,6 +93,7 @@ export const luminaTokens = {
         breathe: '8rem',
     },
     shadow: {
+        none: 'none',
         xs: '0 1px 2px rgba(0,0,0,0.04)',
         sm: '0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)',
         md: '0 4px 12px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04)',
@@ -160,6 +161,8 @@ export const luminaTokens = {
             // above by the generator.
             extra: {
                 'rf-color-inline-code-bg': '#2b2b29',
+                // SPEC-087 — inset surfaces dip a touch deeper in dark mode.
+                'rf-surface-inset-shift': '0.06',
             },
         },
     },
@@ -175,6 +178,9 @@ export const luminaTokens = {
      *  them here. */
     extra: {
         'rf-color-inline-code-bg': '#e6e5e3',
+        // SPEC-087 — lightness delta for the derived inset surface (a tint-tracking
+        // recessed fill applied at use-site via relative-color). Per-mode tunable.
+        'rf-surface-inset-shift': '0.04',
     },
 };
 //# sourceMappingURL=tokens.js.map

package/dist/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"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"}

package/index.css

@@ -34,6 +34,10 @@
 @import './styles/dimensions/state.css';
 @import './styles/dimensions/media.css';
 @import './styles/dimensions/surfaces.css';
+@import './styles/dimensions/frame.css';
+@import './styles/dimensions/substrate.css';
+@import './styles/dimensions/cover.css';
+@import './styles/dimensions/guest-posture.css';
 @import './styles/dimensions/checklist.css';
 @import './styles/dimensions/sequence.css';
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@refrakt-md/lumina",
   "description": "Lumina theme for refrakt.md — design tokens, CSS, identity transform, and layout configs",
-  "version": "0.19.0",
+  "version": "0.20.1",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -83,9 +83,9 @@
     "build": "tsc"
   },
   "dependencies": {
-    "@refrakt-md/runes": "0.19.0",
-    "@refrakt-md/transform": "0.19.0",
-    "@refrakt-md/types": "0.19.0"
+    "@refrakt-md/runes": "0.20.1",
+    "@refrakt-md/transform": "0.20.1",
+    "@refrakt-md/types": "0.20.1"
   },
   "devDependencies": {
     "postcss": "^8.4.0"

package/styles/base/attributes.css

@@ -18,3 +18,12 @@
 [data-rune][data-inset="tight"]   { padding-inline: var(--rf-inset-tight, 1rem); }
 [data-rune][data-inset="loose"]   { padding-inline: var(--rf-inset-loose, 4rem); }
 [data-rune][data-inset="breathe"] { padding-inline: var(--rf-inset-breathe, 8rem); }
+
+/* ── Elevation — drop shadow (box-shadow) ──────────────────────────────
+ * Universal `elevation` attribute (SPEC-086). Maps to the shared --rf-shadow-*
+ * token scale; `none` explicitly flattens a rune's default shadow. */
+
+[data-rune][data-elevation="none"] { box-shadow: var(--rf-shadow-none); }
+[data-rune][data-elevation="sm"]   { box-shadow: var(--rf-shadow-sm); }
+[data-rune][data-elevation="md"]   { box-shadow: var(--rf-shadow-md); }
+[data-rune][data-elevation="lg"]   { box-shadow: var(--rf-shadow-lg); }

package/styles/dimensions/cover.css

@@ -0,0 +1,153 @@
+/* Cover layout (SPEC-089) — `media-position="cover"`.
+ *
+ * The media well fills the rune interior and the content overlays it (the poster
+ * / cover card). The media stays a media guest — the thin-edge frame and
+ * `--rf-radius-media` are preserved — with content floated on top via grid
+ * stacking (media + content share one grid cell). No overlay primitive in the
+ * layout config; the variant supplies the structure (SPEC-091), CSS positions.
+ *
+ * Height authority: an external grid track (bento) wins; else the media aspect
+ * (`frame-aspect`, default portrait); a card height/aspect knob overrides via the
+ * cascade. Cover supersedes the media-vs-content split knobs (content-height /
+ * media-ratio), which have no meaning when there is no split. */
+
+/* ── full scope — the whole content overlays the media well ──────────── */
+[data-media-position="cover"]:not([data-cover-scope="header"]) {
+	display: grid;
+	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
+	aspect-ratio: var(--frame-aspect, var(--cover-aspect, 3 / 4));
+	container-type: size;
+	overflow: hidden;
+	isolation: isolate;
+}
+[data-media-position="cover"]:not([data-cover-scope="header"]) > [data-section="media"],
+[data-media-position="cover"]:not([data-cover-scope="header"]) > [data-name="content"] {
+	grid-area: 1 / 1;
+	margin: 0;
+	min-width: 0;
+}
+
+/* ── header scope — only the cover-band overlays; body flows below ────── */
+[data-cover-scope="header"] > [data-name="cover-band"] {
+	display: grid;
+	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
+	aspect-ratio: var(--frame-aspect, 16 / 9);
+	border-radius: var(--rf-radius-media);
+	overflow: hidden;
+	isolation: isolate;
+	container-type: size;
+}
+/* On narrow screens a 16/9 band is too short to seat the preamble over the
+ * scrim, so default it to a taller (≥1:1) poster shape. An explicit
+ * `frame-aspect` still wins. */
+@media (max-width: 40rem) {
+	[data-cover-scope="header"] > [data-name="cover-band"] {
+		aspect-ratio: var(--frame-aspect, 4 / 5);
+	}
+}
+[data-cover-scope="header"] > [data-name="cover-band"] > [data-section="media"],
+[data-cover-scope="header"] > [data-name="cover-band"] > [data-name="preamble"] {
+	grid-area: 1 / 1;
+	margin: 0;
+}
+
+/* ── shared: the media well fills, the overlaid box positions ─────────── */
+[data-media-position="cover"] [data-section="media"] {
+	position: relative;
+	height: 100%;
+	border-radius: var(--rf-radius-media);
+	overflow: hidden;
+}
+[data-media-position="cover"] [data-section="media"] > :is(img, video) {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+/* The overlaid box (full: content; header: preamble) anchors via content-place. */
+[data-media-position="cover"]:not([data-cover-scope="header"]) > [data-name="content"],
+[data-cover-scope="header"] > [data-name="cover-band"] > [data-name="preamble"] {
+	position: relative;
+	z-index: 1;
+	align-self: var(--cover-place-block, end);
+	justify-self: var(--cover-place-inline, stretch);
+	padding: var(--rune-padding, var(--rf-spacing-md));
+}
+
+/* ── auto / unset placement ───────────────────────────────────────────
+ * `auto` is the cover default, so an unset content-place behaves the same as an
+ * explicit `auto`. A header band is always a caption strip — the preamble sits at
+ * the block-end over the scrim regardless of the band's orientation. A full-scope
+ * overlay adapts to the cover region's orientation (portrait → block-end caption;
+ * landscape → inline-start side panel). An explicit value (e.g. "center center")
+ * sets the `--cover-place-*` vars on the base rule above and does NOT match here,
+ * so it pins regardless of orientation. */
+[data-media-position="cover"]:not([data-cover-scope="header"]):is([data-content-place="auto"], :not([data-content-place])) > [data-name="content"],
+[data-cover-scope="header"]:is([data-content-place="auto"], :not([data-content-place])) > [data-name="cover-band"] > [data-name="preamble"] {
+	align-self: end;
+	justify-self: stretch;
+}
+@container (min-aspect-ratio: 1 / 1) {
+	[data-media-position="cover"]:not([data-cover-scope="header"]):is([data-content-place="auto"], :not([data-content-place])) > [data-name="content"] {
+		align-self: center;
+		justify-self: start;
+	}
+}
+
+/* ── default cover scrim (SPEC-088 scrim, on the media surface) ────────
+ * Overlaying text on an arbitrary image without a scrim is a legibility footgun,
+ * so cover applies a default gradient scrim weighted toward the content edge.
+ * `scrim="none"` opts out. The overlaid foreground is set light by the engine
+ * (data-color-scheme) so text reads against the darkened media. */
+[data-media-position="cover"]:not([data-scrim="none"]) [data-section="media"]::after {
+	content: "";
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+	/* `inherit` matches the media zone's `--rf-radius-media`, so a frost scrim's
+	 * `backdrop-filter` region clips at the same rounded corners — `overflow:
+	 * hidden` on the media zone doesn't reliably clip backdrop-filter past the
+	 * rounded edge in WebKit, so the pseudo carries its own radius. (The
+	 * gradient variant doesn't strictly need this, but it's harmless and keeps
+	 * the two scrim variants visually congruent.) */
+	border-radius: inherit;
+	/* The scrim shape is `--cover-scrim-image` (custom property override) when
+	 * the engine emits one — for `content-place="center …"` it emits a radial
+	 * ellipse so the dark falls under the centred overlay. For the directional
+	 * cases (`start`/`end` block-axis) the engine sets `--cover-scrim-dir` and
+	 * the linear fallback resolves to the right edge. */
+	background-image: var(--cover-scrim-image, linear-gradient(var(--cover-scrim-dir, to top), rgb(0 0 0 / 0.55), transparent 62%));
+}
+
+/* Frost treatment (`scrim-type="frost"`) — a frosted-glass blur over the media
+ * instead of a gradient. `scrim-blur` (named scale) sets the blur radius; the
+ * tint follows the cover scheme (a dark scheme → a dark frost for light text).
+ * The frost is masked to the content edge (following `--cover-scrim-dir`, default
+ * bottom) so it reads as a band behind the text, not a blur over the whole
+ * image. `--cover-scrim-mask` is the radial equivalent for centred content. */
+[data-media-position="cover"][data-scrim-blur="none"] { --cover-scrim-blur: 0px; }
+[data-media-position="cover"][data-scrim-blur="sm"]   { --cover-scrim-blur: 4px; }
+[data-media-position="cover"][data-scrim-blur="md"]   { --cover-scrim-blur: 8px; }
+[data-media-position="cover"][data-scrim-blur="lg"]   { --cover-scrim-blur: 16px; }
+[data-media-position="cover"][data-scrim-type="frost"]:not([data-scrim="none"]) [data-section="media"]::after {
+	background-image: none;
+	background-color: rgb(0 0 0 / 0.18);
+	-webkit-backdrop-filter: blur(var(--cover-scrim-blur, 8px));
+	backdrop-filter: blur(var(--cover-scrim-blur, 8px));
+	-webkit-mask-image: var(--cover-scrim-mask, linear-gradient(var(--cover-scrim-dir, to top), #000 30%, transparent 72%));
+	mask-image: var(--cover-scrim-mask, linear-gradient(var(--cover-scrim-dir, to top), #000 30%, transparent 72%));
+}
+[data-media-position="cover"][data-scrim-type="frost"][data-color-scheme="light"]:not([data-scrim="none"]) [data-section="media"]::after {
+	background-color: rgb(255 255 255 / 0.25);
+}
+
+/* The overlay carries the cover colour-scheme (set by the engine) so its text
+ * reads against the darkened media. The standalone `[data-color-scheme]` rule
+ * also paints a `background-color`; null it out here so the overlay stays
+ * see-through over the media (the scrim, not a solid box, does the legibility). */
+[data-media-position="cover"] [data-name="content"][data-color-scheme],
+[data-cover-scope="header"] > [data-name="cover-band"][data-color-scheme] {
+	background-color: transparent;
+	/* Muted text (the blurb) is barely legible over a photo, so on the overlay it
+	 * reads at full foreground strength — the same colour as the headline. */
+	--rf-color-muted: var(--rf-color-text);
+}

package/styles/dimensions/frame.css

@@ -0,0 +1,104 @@
+/* Frame chrome (SPEC-086) — media-surface presentation.
+ *
+ * The engine lands the frame contract on the frame-target element: a rune's
+ * `[data-section="media"]` zone (frameTarget: 'media') or the rune's own root
+ * (frameTarget: 'self', e.g. figure/showcase). These selectors are intentionally
+ * surface-agnostic — they match wherever the chrome is emitted.
+ *
+ *   data-frame              — applied preset name (marker)
+ *   data-frame-shadow       — silhouette drop-shadow (none|sm|md|lg)
+ *   data-displace           — edge/corner the guest moves toward
+ *   --frame-aspect          — aspect-ratio of the framed media
+ *   --frame-offset          — displacement distance (resolved spacing token)
+ *   --frame-oversize        — scale factor by which the guest exceeds its slot
+ *   --frame-anchor          — crop focal point (object-position)
+ *   --frame-place-x / -y    — guest-box alignment within its slot
+ *
+ * Clip is host-owned: a clipping host (card/bento-cell/figure media well) crops a
+ * displaced/oversized guest into a *peek*; a breakout host (showcase-self, a
+ * section/page) lets it *spill*. `elevation` (box-shadow on the self surface) and
+ * `frame-shadow` (drop-shadow silhouette here) never collide — different property,
+ * different surface. */
+
+/* ── Silhouette drop-shadow ────────────────────────────────────────────
+ * Same media-target / self-target split as `frame-displace`. Media-target
+ * frames land `data-frame-shadow` on the media zone wrapper, but the shadow
+ * should ride the inner guest so it (a) shifts with `frame-displace` and
+ * (b) actually casts onto exposed slot interior when the guest is inset
+ * from the wrapper. Self-target frames (showcase, figure) keep the filter
+ * on the root itself, where it traces the rune's own painted silhouette. */
+[data-frame-shadow="none"] { --frame-shadow: none; }
+[data-frame-shadow="sm"]   { --frame-shadow: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.10)); }
+[data-frame-shadow="md"]   { --frame-shadow: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25)); }
+[data-frame-shadow="lg"]   { --frame-shadow: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.20)); }
+
+/* Self-target — figure, showcase, anything else where the rune root is the
+ * frame target. The filter applies to the painted root. */
+[data-frame-shadow]:not([data-section="media"]) {
+	filter: var(--frame-shadow);
+}
+
+/* Media-target — card, bento-cell, recipe, etc. The filter rides the inner
+ * guest so a displaced image's shadow falls into the slot's exposed
+ * interior (clipped at the slot's `overflow: hidden` boundary like any
+ * other in-slot content). */
+[data-section="media"][data-frame-shadow] > :is(img, video, [data-rune]) {
+	filter: var(--frame-shadow);
+}
+
+/* ── Aspect ratio ────────────────────────────────────────────────────── */
+[style*="--frame-aspect"] { aspect-ratio: var(--frame-aspect); }
+
+/* ── Crop anchor — focal point when the guest is cut ─────────────────── */
+[style*="--frame-anchor"] > :is(img, video) { object-position: var(--frame-anchor); }
+
+/* ── Placement of the framed box within its slot ─────────────────────── */
+[style*="--frame-place-x"] { justify-self: var(--frame-place-x, auto); align-self: var(--frame-place-y, auto); }
+
+/* ── Oversize — guest exceeds its slot (clipping hosts crop it) ──────── */
+/* `[data-rune]` extends the rule to nested rune guests (codegroup, mockup,
+ * chart, etc.), so frame chrome stays guest-agnostic — the same selector
+ * pattern the displace rule uses. */
+[style*="--frame-oversize"] > :is(img, video, [data-rune]) { width: calc(100% * var(--frame-oversize, 1)); max-width: none; }
+
+/* ── Displacement (peek / spill) — move the guest toward an edge/corner.
+ * The host decides whether the guest is cropped or spills; this only moves it.
+ * Two cases, distinguished by where the engine landed `data-displace`:
+ *
+ *   1. Media-target frame (`frameTarget: 'media'`, e.g. card / bento-cell /
+ *      figure media well). `data-displace` lands on the media zone wrapper
+ *      (`[data-section="media"]`), but the wrapper itself is the *host* and
+ *      already has `overflow: hidden`. We translate the inner guest with
+ *      `transform: translate(...)` so the zone clips the peek at its own edge,
+ *      not at the outer card/cell edge. The wrapper stays put — the card's
+ *      layout is unchanged.
+ *
+ *   2. Self-target frame (`frameTarget: 'self'`, e.g. showcase, where the rune
+ *      root is the host). `data-displace` lands on the root, and the root's
+ *      parent (a page section, the page itself) is the clip-or-spill decider.
+ *      We push the root with negative margins so it can spill past its
+ *      parent's edge for a true breakout. */
+
+/* — Case 1: media-zone displace → translate the inner guest, zone clips. */
+[data-section="media"][data-displace] > :is(img, video, [data-rune]) {
+	transform: translate(var(--displace-x, 0), var(--displace-y, 0));
+}
+[data-section="media"][data-displace="top"]        { --displace-y: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); }
+[data-section="media"][data-displace="bottom"]     { --displace-y: var(--frame-offset, var(--rf-spacing-lg)); }
+[data-section="media"][data-displace="end"]        { --displace-x: var(--frame-offset, var(--rf-spacing-lg)); }
+[data-section="media"][data-displace="top-end"]    { --displace-x: var(--frame-offset, var(--rf-spacing-lg)); --displace-y: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); }
+[data-section="media"][data-displace="bottom-end"] { --displace-x: var(--frame-offset, var(--rf-spacing-lg)); --displace-y: var(--frame-offset, var(--rf-spacing-lg)); }
+
+/* — Case 2: self-target (showcase, etc.) → root moves; parent decides. */
+[data-displace]:not([data-section="media"]) { position: relative; z-index: 1; }
+[data-displace="top"]:not([data-section="media"])        { margin-top: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); }
+[data-displace="bottom"]:not([data-section="media"])     { margin-bottom: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); }
+[data-displace="both"]:not([data-section="media"])       { margin-block: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); }
+[data-displace="end"]:not([data-section="media"])        { margin-inline-end: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); }
+[data-displace="bottom-end"]:not([data-section="media"]) { margin-bottom: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); margin-inline-end: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); }
+[data-displace="top-end"]:not([data-section="media"])    { margin-top: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); margin-inline-end: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); }
+
+/* Displacement carries across breakpoints. For media-target the guest is
+ * clipped by the zone's `overflow: hidden` regardless of width, so the peek
+ * reads consistently from desktop to mobile. For self-target (showcase) the
+ * negative-margin spill stays on too — that's the intended breakout. */

package/styles/dimensions/guest-posture.css

@@ -0,0 +1,27 @@
+/* Media-guest interaction posture (SPEC-090).
+ *
+ * A media-slot guest is presentational by default. When its container is itself
+ * an interaction target — a `card` / `bento-cell` with a stretched whole-tile
+ * `href` link — or the guest is a `cover` backdrop (SPEC-089), the engine marks
+ * the media zone `data-guest-posture="presentational"`. That makes the guest
+ * non-interactive at the pointer level, so:
+ *   • a linked tile links reliably — clicks over the media fall through to the
+ *     stretched link beneath it instead of being eaten by the guest's controls;
+ *   • a cover backdrop never steals interaction from the overlaid content.
+ *
+ * The behaviours layer additionally skips JS enhancement for a presentational
+ * guest (see @refrakt-md/behaviors), so it renders its static fallback. The
+ * posture is scoped to the media zone only — content-overlay controls
+ * (body/footer links & buttons) are outside it and stay fully interactive. */
+[data-section="media"][data-guest-posture="presentational"] {
+	pointer-events: none;
+}
+
+/* Static fallback for demoted tabbed guests (`codegroup`, `tabs`): their tab
+ * strip is rendered statically but the behaviour that wires it is skipped, so
+ * it would sit there inert. Hide it and let the panels read as plain stacked
+ * content — the non-enhanced render is the fallback. (Guests whose chrome is
+ * JS-injected — datatable toolbars, map controls — simply never appear.) */
+[data-section="media"][data-guest-posture="presentational"] :is(.rf-tabs__tabs, .rf-codegroup__tabs) {
+	display: none;
+}

package/styles/dimensions/substrate.css

@@ -0,0 +1,108 @@
+/* Substrate (SPEC-087) — generated surface pattern.
+ *
+ * The token-driven gradient recipes that realise each pattern ship here in the
+ * always-included base layer (not a theme's swappable CSS), so "dots = dots on
+ * every theme" is a guarantee: themes retune the `--substrate-*` token hooks
+ * (ink colour, cell size), they don't redefine a pattern's geometry. Patterns
+ * are pure CSS — no image assets, crisp at any zoom. The engine emits markers
+ * only (`data-substrate` + `--substrate-*`); CSS does the drawing.
+ *
+ * The pattern is a `background-image` over the surface `background-color`; the
+ * gradient's `transparent` gaps reveal whatever fill sits beneath (tint/inset).
+ * `--substrate-ink` resolves from `--rf-color-border` (tint-bridged), so the
+ * pattern recolours with the surface.
+ *
+ * Runes set their surface with the `background` *shorthand* (e.g.
+ * `.rf-card { background: var(--rf-color-surface) }`), which resets
+ * `background-image`/`-size`/`-position` and loads *after* this base layer. So
+ * the actual `background-*` longhands live here on the higher-specificity
+ * `[data-substrate]:not(…)` selector (0,2,0 — beats a rune's `.rf-*`, 0,1,0),
+ * and each pattern only feeds custom properties (which never collide with a
+ * rune's background). The rune's `background-color` still shows through. */
+
+[data-substrate]:not([data-substrate="none"]) {
+	--substrate-cell: 16px;
+	--substrate-opacity: 0.5;
+	/* `--substrate-boost` (per-pattern) and `--substrate-mode-boost` (light/dark)
+	 * are intentionally NOT set here — only referenced with a `1` fallback — so a
+	 * lower-specificity pattern rule or an inherited dark-mode rule can drive them
+	 * without losing to this (0,2,0) base. The product is clamped to 100% by
+	 * color-mix. */
+	--substrate-ink: color-mix(in oklab, var(--rf-color-border) calc(var(--substrate-opacity) * var(--substrate-boost, 1) * var(--substrate-mode-boost, 1) * 100%), transparent);
+	background-image: var(--substrate-image);
+	background-size: var(--substrate-tile, var(--substrate-cell) var(--substrate-cell));
+	background-position: var(--substrate-pos, 0 0);
+	background-repeat: repeat;
+}
+
+/* dots — one tiled radial-gradient. A small dot reads fainter than a 1px line,
+ * so dots get a per-pattern ink boost. */
+[data-substrate="dots"] {
+	--substrate-image: radial-gradient(var(--substrate-ink) var(--substrate-dot, 1.5px), transparent 0);
+	--substrate-boost: 1.4;
+}
+
+/* grid — two tiled linear-gradients */
+[data-substrate="grid"] {
+	--substrate-image:
+		linear-gradient(var(--substrate-ink) 1px, transparent 1px),
+		linear-gradient(90deg, var(--substrate-ink) 1px, transparent 1px);
+}
+
+/* lines — diagonal hatching (the repeating gradient owns its own spacing) */
+[data-substrate="lines"] {
+	--substrate-image: repeating-linear-gradient(45deg, var(--substrate-ink) 0 1px, transparent 1px var(--substrate-cell));
+	--substrate-tile: auto;
+}
+
+/* cross — plus marks at the centre of each cell, drawn as two perpendicular
+ * thin ellipses (no `mask` — an element-level `mask` would clip the rune's
+ * own text content along with the pattern, which is what we don't want). A
+ * small plus reads fainter than a 1px line at the same ink opacity, so the
+ * pattern carries its own ink boost — same idea as dots.
+ *
+ * The stop syntax mirrors dots: `ink <r>, transparent 0` produces a sharp-
+ * edged shape filled with ink (the explicit length on ink, plus `0` after
+ * transparent for a zero-length transition, beats the `ink 100%, transparent
+ * 100%` form which some renderers collapse to nothing). Ellipse radii at
+ * 1px (rather than sub-pixel 0.5px) so the stroke survives DPR rounding. */
+[data-substrate="cross"] {
+	--substrate-image:
+		radial-gradient(ellipse 3px 1px at center, var(--substrate-ink) 100%, transparent 0),
+		radial-gradient(ellipse 1px 3px at center, var(--substrate-ink) 100%, transparent 0);
+	--substrate-pos: center;
+	--substrate-boost: 1.6;
+}
+
+/* checker — alternating filled cells */
+[data-substrate="checker"] {
+	--substrate-image:
+		conic-gradient(var(--substrate-ink) 0 25%, transparent 0 50%, var(--substrate-ink) 0 75%, transparent 0);
+}
+
+[data-substrate="none"] { background-image: none; }
+
+/* substrate-fill="inset" — paint the pattern over the recessed inset fill
+ * (SPEC-087 inset surface) instead of the inherited surface colour. */
+[data-substrate][data-substrate-fill="inset"] {
+	background-color: oklch(from var(--rf-color-surface) calc(l - var(--rf-surface-inset-shift)) c h);
+}
+
+/* Dark mode — the border ink sits close to the dark surface, so patterns need
+ * more presence across the board (dots compound their per-pattern boost on top,
+ * landing near full strength). Set the multiplier on the dark root so it
+ * inherits into every substrate element; mirrors how dark.css triggers dark. */
+[data-theme="dark"],
+[data-color-scheme="dark"] {
+	--substrate-mode-boost: 1.6;
+}
+@media (prefers-color-scheme: dark) {
+	:root:not([data-theme="light"]) {
+		--substrate-mode-boost: 1.6;
+	}
+}
+/* A tint-locked light subtree resets to the light intensity (nearest ancestor
+ * wins via inheritance), even when nested inside dark mode. */
+[data-color-scheme="light"] {
+	--substrate-mode-boost: 1;
+}

package/styles/dimensions/surfaces.css

@@ -102,3 +102,56 @@
 	border-radius: var(--rf-radius-container);
 	padding: var(--rune-padding, var(--rf-spacing-md));
 }
+
+/* ─── Media slot inherits the surface border ─────────────────────────
+ * When a surface-bearing rune wraps a `[data-section="media"]` slot, the slot
+ * shares the surface's 1px border so the framed media reads as part of the
+ * same surface rather than a separate inner box. Scoped via `:where()` for
+ * zero specificity — per-rune CSS can still override if a particular surface
+ * wants a different chrome (e.g. character's circular portrait avoids this
+ * because it's not a `[data-section="media"]` slot). */
+:where(.rf-card, .rf-bento-cell, .rf-recipe, .rf-realm, .rf-faction, .rf-playlist) [data-section="media"] {
+	border: 1px solid var(--rf-color-border);
+}
+
+/* ─── Inset surface (SPEC-087) — tint-tracking recessed fill ──────────
+ * Derived at use-site via relative-color (lower L, keep C+H) so it recomputes from a tinted
+ * `--rf-color-surface` automatically (a static inset-colour token would
+ * freeze to the untinted :root). Writes `background` only — never re-bases
+ * `--rf-color-surface` — so insets don't compound under nesting; depth is
+ * conveyed by border/elevation. `--rf-surface-inset-shift: 0` flushes it. */
+
+/* chart / diagram self surface: the standalone "darker surface". */
+.rf-chart,
+.rf-diagram {
+	background: oklch(from var(--rf-color-surface) calc(l - var(--rf-surface-inset-shift)) c h);
+}
+
+/* …but when they're a media-zone guest the slot already provides the recessed
+ * surface (border, radius, inset fill), so the inner chrome would just stack
+ * as double-chrome. Drop it; keep padding so axis labels / SVG keep breathing
+ * room. */
+[data-section="media"] > :is(.rf-chart, .rf-diagram) {
+	background: transparent;
+	border: 0;
+}
+
+/* Same treatment for `juxtapose` as a media guest — its `__panels` container
+ * has its own border + background + rounded corners (juxtapose stands alone
+ * outside a card), but inside a card slot they double up with the slot's own
+ * chrome. Drop the inner chrome; round to match the slot's media radius so the
+ * comparison reads as part of the card surface. The slot's overflow:visible
+ * and container-type:normal still come from `split.css` (juxtapose manages
+ * its own clip inside `__panels`). */
+[data-section="media"] > .rf-juxtapose .rf-juxtapose__panels {
+	background: transparent;
+	border: 0;
+	border-radius: var(--rf-radius-media);
+}
+
+/* Media wells of media-bearing runes: a recessed sub-surface that tracks the
+ * (possibly tinted) container colour — invisible under a full-bleed guest,
+ * visible in the gaps (transparent, displaced, or absent guest). */
+:is(.rf-card, .rf-bento-cell, .rf-recipe, .rf-realm, .rf-faction, .rf-playlist) [data-section="media"] {
+	background: oklch(from var(--rf-color-surface) calc(l - var(--rf-surface-inset-shift)) c h);
+}

package/styles/layouts/split.css

@@ -102,10 +102,20 @@
 [data-section="media"]:is(
   :has(> [data-rune="preview"]),
   :has(> [data-rune="juxtapose"]),
-  :has(> .rf-showcase[data-bleed]:not(.rf-showcase--in-bento-cell))
+  :has(> .rf-showcase[data-displace]:not(.rf-showcase--in-bento-cell))
 ) {
   overflow: visible;
   container-type: normal;
+}
+/* `preview` (negative-margin breakout) and a displaced `showcase` (peek
+ * spill) want the slot fully de-chromed so the bleed reads as edge-to-edge.
+ * Juxtapose just opted out of the clip — it still wants to read as part of
+ * the card surface, so it keeps the slot's rounded corners (juxtapose's
+ * own `__panels` chrome is dropped instead; see surfaces.css). */
+[data-section="media"]:is(
+  :has(> [data-rune="preview"]),
+  :has(> .rf-showcase[data-displace]:not(.rf-showcase--in-bento-cell))
+) {
   border-radius: 0;
 }
 /* …and let those self-managing guests keep their intrinsic width/sizing: the
@@ -114,7 +124,7 @@
 [data-section="media"]:is(
   :has(> [data-rune="preview"]),
   :has(> [data-rune="juxtapose"]),
-  :has(> .rf-showcase[data-bleed]:not(.rf-showcase--in-bento-cell))
+  :has(> .rf-showcase[data-displace]:not(.rf-showcase--in-bento-cell))
 ) > * {
   width: auto;
   max-height: none;

package/styles/runes/bento.css

@@ -142,6 +142,11 @@
 	aspect-ratio: var(--bento-media-aspect, 16 / 9);
 }
 .rf-bento-cell__media > :is(img, video) { object-position: var(--bento-media-anchor, center); }
+/* SPEC-086 — reconcile `frame` facets with bento's existing media vars rather
+ * than duplicating them: frame-aspect/anchor (landed on the media zone by the
+ * engine) feed the knobs bento already consumes (incl. the collapse path). */
+.rf-bento-cell__media[style*="--frame-aspect"] { --bento-media-aspect: var(--frame-aspect); }
+.rf-bento-cell__media[style*="--frame-anchor"] { --bento-media-anchor: var(--frame-anchor); }
 .rf-bento-cell__title {
 	font-size: 1.125rem;
 	font-weight: 600;

package/styles/runes/bg.css

@@ -1,11 +1,16 @@
 /* Background — Directive rune for background images, video, overlays, blur */
 
-/* Background layer — absolute positioned behind content */
+/* Background layer — absolute positioned behind content. `border-radius:
+ * inherit` rounds the gradient/image to whatever shape the parent surface has,
+ * so a card / bento-cell / any rounded host clips the bg to its own corners
+ * without needing `overflow: hidden` (though hosts with thin-edge padding
+ * still need it so the bg can't poke past the rounded outer edge). */
 [data-name="bg"] {
 	position: absolute;
 	inset: 0;
 	z-index: 0;
 	overflow: hidden;
+	border-radius: inherit;
 	background-image: var(--bg-image);
 	background-size: var(--bg-fit, cover);
 	background-position: var(--bg-position, center);
@@ -22,8 +27,14 @@
 [data-name="bg"][data-bg-fixed] {
 	background-attachment: fixed;
 }
-/* Content above background — any sibling of bg layer gets z-index */
-.rf-has-bg > :not([data-name="bg"]) {
+/* Content above background — any sibling of the bg layer gets `z-index: 1`
+ * so it stacks over the `data-name="bg"` layer (which sits at `z-index: 0`).
+ * Keyed off the `data-bg` attribute the engine emits on the bg-owning rune
+ * (`engine.ts` → `bgDataAttrs['data-bg'] = ''`), not the per-block BEM
+ * modifier class `rf-<block>--has-bg` — the attribute is rune-agnostic so
+ * one rule covers card, bento-cell, hero, feature, and anything else that
+ * raises a bg layer. */
+[data-bg] > :not([data-name="bg"]) {
 	position: relative;
 	z-index: 1;
 }
@@ -51,3 +62,27 @@
 [data-name="bg-overlay"][data-bg-overlay="light"] {
 	background: rgba(255, 255, 255, 0.6);
 }
+
+/* Scrim (SPEC-088) — a structured legibility treatment behind overlaid text.
+ * gradient: a directional darken/lighten; frost: a backdrop blur + tint.
+ * `tone` picks the colour, `dir` the heavy edge; strength/blur come inline. */
+[data-name="scrim"] {
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+	z-index: 1;
+}
+[data-name="scrim"][data-scrim-tone="dark"]  { --scrim-color: 0 0 0; }
+[data-name="scrim"][data-scrim-tone="light"] { --scrim-color: 255 255 255; }
+[data-name="scrim"][data-scrim-dir="top"]    { --scrim-grad-dir: to top; }
+[data-name="scrim"][data-scrim-dir="bottom"] { --scrim-grad-dir: to bottom; }
+[data-name="scrim"][data-scrim-dir="left"]   { --scrim-grad-dir: to left; }
+[data-name="scrim"][data-scrim-dir="right"]  { --scrim-grad-dir: to right; }
+[data-name="scrim"][data-scrim="gradient"] {
+	background-image: linear-gradient(var(--scrim-grad-dir, to top), transparent, rgb(var(--scrim-color, 0 0 0) / var(--scrim-strength, 0.55)));
+}
+[data-name="scrim"][data-scrim="frost"] {
+	-webkit-backdrop-filter: blur(var(--scrim-blur, 8px));
+	backdrop-filter: blur(var(--scrim-blur, 8px));
+	background: rgb(var(--scrim-color, 0 0 0) / 0.18);
+}

package/styles/runes/card.css

@@ -27,6 +27,13 @@
 	border-radius: var(--rf-radius-container);
 	border: 1px solid var(--rf-color-border);
 	background: var(--rf-color-surface);
+	/* Clip non-media content (substrate patterns, bg gradient/image layers) to
+	 * the card's rounded outer corners. The displaced-peek case is unaffected:
+	 * `frame-displace` translates the guest *inside* the media zone, which has
+	 * its own `overflow: hidden`, so no peek ever crosses this boundary.
+	 * `box-shadow` from `elevation` paints outside the element box and is
+	 * unaffected by `overflow`. */
+	overflow: hidden;
 }
 
 /* Content zone fills the remaining inset so total text padding still equals
@@ -125,6 +132,19 @@
 	flex: 1;
 }
 
+/* Height knob (SPEC-089) — a named intrinsic-height scale for cover / bg-only
+ * cards that have no natural content height to fill. `aspect` (→ aspect-ratio,
+ * emitted inline by the engine) is the proportional alternative; `height` is the
+ * absolute one. Both are authority overrides: they win over the cover variant's
+ * default media aspect because they sit on the card root with a real value, and
+ * over an external grid track only when the card isn't being stretched by one.
+ * For cover cards the grid stack (cover.css) fills this box; for bg-only cards
+ * the min-height simply gives the surface a poster shape. */
+.rf-card[data-height="sm"] { min-height: 12rem; }
+.rf-card[data-height="md"] { min-height: 18rem; }
+.rf-card[data-height="lg"] { min-height: 26rem; }
+.rf-card[data-height="xl"] { min-height: 34rem; }
+
 /* Whole-card stretched link — covers the card; real links in body/footer
  * sit above it via position:relative. */
 .rf-card__link {

package/styles/runes/figure.css

@@ -1,9 +1,23 @@
 /* Figure */
 .rf-figure img {
+	display: block;
 	max-width: 100%;
 	height: auto;
+	margin-inline: auto;
 	border-radius: var(--rf-radius-media);
 }
+
+/* When `frame-aspect` sets an explicit surface shape, the image fills the
+ * shape rather than sitting at its natural size with whitespace on the
+ * inline-end. `object-fit: cover` crops only if the natural aspect doesn't
+ * match — and `frame-anchor` already picks the focal point of that crop
+ * (the same contract as a card's media slot). */
+.rf-figure[style*="--frame-aspect"] img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	margin: 0;
+}
 .rf-figure figcaption {
 	margin-top: 0.625rem;
 	font-size: 0.825rem;

package/styles/runes/map.css

@@ -22,6 +22,13 @@
 	width: 100%;
 	position: relative;
 	background: var(--rf-color-surface, #f8f9fa);
+	/* Establish a stacking context so Leaflet's internal pane z-indices
+	 * (tile-pane 200, overlay-pane 400, marker-pane 600, popup-pane 700,
+	 * etc.) stay contained instead of escaping past siblings — otherwise
+	 * a map dropped into a cover card's media slot punches through the
+	 * cover scrim (z-index auto) and overlaid content (z-index 1).
+	 * `position: relative` alone is not enough; `isolation: isolate` is. */
+	isolation: isolate;
 }
 
 /* Fallback list shown while Leaflet loads */
@@ -80,6 +87,28 @@
 	display: none;
 }
 
+/* ── Map as a media guest ──
+ * When dropped into a `[data-section="media"]` slot (e.g. a card or
+ * bento-cell in cover mode), the map yields its standalone presentation to
+ * the slot: no outer margin or padding (map is in the Banner surface group
+ * which gives it vertical `--rune-padding`; see `surfaces.css`), no rounding
+ * (the slot already clips), and the Leaflet container stretches to fill the
+ * slot height instead of capping at the per-size pixel height. The fallback
+ * list (rendered before Leaflet hydrates) drops its outer padding too so it
+ * doesn't bleed past the slot edge during the brief flash before tiles load. */
+[data-section="media"] > .rf-map {
+	margin: 0;
+	padding: 0;
+	height: 100%;
+	border-radius: inherit;
+}
+[data-section="media"] > .rf-map > .rf-map__container {
+	height: 100%;
+}
+[data-section="media"] .rf-map__fallback {
+	padding: 0.75rem 1rem;
+}
+
 /* Leaflet popup overrides to match theme */
 .rf-map .leaflet-popup-content-wrapper {
 	border-radius: var(--rf-radius-md, 0.5rem);

package/styles/runes/preview.css

@@ -75,7 +75,11 @@
 	border-radius: var(--rf-radius-lg);
 	overflow: hidden;
 }
-.rf-preview__canvas:has(.rf-mockup) {
+/* Centre a standalone mockup whose `data-fit="none"` makes it inline-block —
+ * margin-inline auto can't centre an inline-block, only its parent's text
+ * alignment can. Scoped to a *direct-child* mockup so a card or bento cell
+ * that happens to hold a mockup doesn't get its body text centred too. */
+.rf-preview__canvas:has(> .rf-mockup) {
 	text-align: center;
 }
 .rf-preview__canvas > *:first-child {

package/styles/runes/showcase.css

@@ -1,56 +1,16 @@
-/* Showcase — Media presentation wrapper with shadows, bleed, and aspect ratio */
+/* Showcase — `frameTarget: 'self'` media wrapper (SPEC-086). Shadow, aspect,
+ * displacement, place, and crop anchor are now the shared `frame` chrome
+ * (dimensions/frame.css), landing on the showcase root. This file keeps only
+ * showcase's structural rules and its distinct value: breakout. */
 .rf-showcase {
 	position: relative;
 }
 .rf-showcase__viewport {
 	position: relative;
 }
-/* Shadows */
-.rf-showcase[data-shadow="soft"] {
-	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
-}
-.rf-showcase[data-shadow="hard"] {
-	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25));
-}
-.rf-showcase[data-shadow="elevated"] {
-	filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.2));
-}
-/* Bleed displacement via negative margins */
-.rf-showcase[data-bleed="top"] {
-	margin-top: calc(-1 * var(--showcase-offset, 2rem));
-	position: relative;
-	z-index: 1;
-}
-.rf-showcase[data-bleed="bottom"] {
-	margin-bottom: calc(-1 * var(--showcase-offset, 2rem));
-	position: relative;
-	z-index: 1;
-}
-.rf-showcase[data-bleed="both"] {
-	margin-top: calc(-1 * var(--showcase-offset, 2rem));
-	margin-bottom: calc(-1 * var(--showcase-offset, 2rem));
-	position: relative;
-	z-index: 1;
-}
-.rf-showcase[data-bleed="end"] {
-	margin-inline-end: calc(-1 * var(--showcase-offset, 2rem));
-	position: relative;
-	z-index: 1;
-}
-.rf-showcase[data-bleed="bottom-end"] {
-	margin-bottom: calc(-1 * var(--showcase-offset, 2rem));
-	margin-inline-end: calc(-1 * var(--showcase-offset, 2rem));
-	position: relative;
-	z-index: 1;
-}
-.rf-showcase[data-bleed="top-end"] {
-	margin-top: calc(-1 * var(--showcase-offset, 2rem));
-	margin-inline-end: calc(-1 * var(--showcase-offset, 2rem));
-	position: relative;
-	z-index: 1;
-}
-/* Parent needs overflow visible for bleed — except inside clipping containers like bento cells */
-:has(> .rf-showcase[data-bleed]:not(.rf-showcase--in-bento-cell)) {
+/* Breakout — a displaced showcase spills past a non-clipping ancestor; clipping
+ * hosts (e.g. bento cells) keep it cropped (host-owned clip). */
+:has(> .rf-showcase[data-displace]:not(.rf-showcase--in-bento-cell)) {
 	overflow: visible;
 }
 /* Bento cell context — showcase fills remaining space */
@@ -58,22 +18,6 @@
 	flex: 1;
 	min-height: 0;
 }
-/* Aspect ratio enforcement */
-.rf-showcase[data-aspect] .rf-showcase__viewport {
-	aspect-ratio: var(--showcase-aspect);
-	overflow: hidden;
-}
-.rf-showcase[data-aspect] .rf-showcase__viewport > img,
-.rf-showcase[data-aspect] .rf-showcase__viewport > video {
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-}
-/* Self-positioning within parent via place attribute */
-.rf-showcase[data-place] {
-	justify-self: var(--place-x, auto);
-	align-self: var(--place-y, auto);
-}
 /* Spacing — vertical margin around the showcase */
 .rf-showcase[data-spacing="flush"]   { margin-top: 0; margin-bottom: 0; }
 .rf-showcase[data-spacing="tight"]   { margin-top: var(--rf-spacing-section-tight, 1.5rem); margin-bottom: var(--rf-spacing-section-tight, 1.5rem); }

package/tokens/base.css

@@ -27,6 +27,9 @@
 	--rf-color-surface-hover: #ecebe8;
 	--rf-color-surface-active: #e2e0dd;
 	--rf-color-surface-raised: #ffffff;
+	/* SPEC-087 — lightness delta for the derived inset surface (applied at use-site
+	 * via relative-color — lower L, keep C+H — so it tracks a tinted --rf-color-surface). */
+	--rf-surface-inset-shift: 0.04;
 
 	/* Semantic — muted earthy band per SPEC-051 */
 	--rf-color-info: #34547a;
@@ -89,6 +92,7 @@
 	--rf-inset-breathe: 8rem;
 
 	/* Shadows */
+	--rf-shadow-none: none;
 	--rf-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
 	--rf-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
 	--rf-shadow-md: 0 4px 12px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);

package/tokens/dark.css

@@ -19,6 +19,7 @@
 	--rf-color-surface-hover: #282825;
 	--rf-color-surface-active: #333330;
 	--rf-color-surface-raised: #272723;
+	--rf-surface-inset-shift: 0.06;
 
 	--rf-color-info: #9bb4c7;
 	--rf-color-info-bg: #1f2530;
@@ -79,6 +80,7 @@
 		--rf-color-surface-hover: #282825;
 		--rf-color-surface-active: #333330;
 		--rf-color-surface-raised: #272723;
+	--rf-surface-inset-shift: 0.06;
 
 		--rf-color-info: #9bb4c7;
 		--rf-color-info-bg: #1f2530;