@refrakt-md/lumina 0.33.0 → 0.35.0

package/styles/dimensions/cover.css

@@ -1,5 +1,5 @@
 @layer skin {
-/* Cover layout (SPEC-089) — skin.
+	/* Cover layout (SPEC-089) — skin.
  *
  * The grid-overlay *structure* (media well + content share one grid cell, the
  * well fills/crops its guest, the overlay positions via content-place) lives in
@@ -7,83 +7,103 @@
  * media radii, the overlay's surface padding, and the legibility scrim
  * (gradient / frost) painted over the media. */
 
-[data-cover-scope="header"] > [data-name="cover-band"] {
-	border-radius: var(--rf-radius-media);
-}
+	[data-cover-scope="header"] > [data-name="cover-band"] {
+		border-radius: var(--rf-radius-media);
+	}
 
-[data-media-position="cover"] [data-section="media"] {
-	border-radius: var(--rf-radius-media);
-}
+	[data-media-position="cover"] [data-section="media"] {
+		border-radius: var(--rf-radius-media);
+	}
 
-/* A backdrop sandbox sits flush in the well — the well's own radius/overflow
+	/* A backdrop sandbox sits flush in the well — the well's own radius/overflow
  * does the clipping. */
-[data-media-position="cover"] [data-section="media"] .rf-sandbox {
-	border-radius: 0;
-}
+	[data-media-position="cover"] [data-section="media"] .rf-sandbox {
+		border-radius: 0;
+	}
 
-/* The overlaid box carries the surface padding (density-aware via --rune-padding). */
-[data-media-position="cover"]:not([data-cover-scope="header"]) > [data-name="content"],
-[data-cover-scope="header"] > [data-name="cover-band"] > [data-name="preamble"] {
-	padding: var(--rune-padding, var(--rf-spacing-md));
-}
+	/* The overlaid box carries the surface padding (density-aware via --rune-padding). */
+	[data-media-position="cover"]:not([data-cover-scope="header"]) > [data-name="content"],
+	[data-cover-scope="header"] > [data-name="cover-band"] > [data-name="preamble"] {
+		padding: var(--rune-padding, var(--rf-spacing-md));
+	}
 
-/* ── default cover scrim (SPEC-088 scrim, on the media surface) ────────
+	/* ── 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
+	[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
+		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%));
-}
+		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
+	/* 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);
-}
+	[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
+	/* 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
+	[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);
-}
-
+		--rf-color-muted: var(--rf-color-text);
+	}
 }

package/styles/dimensions/density.css

@@ -1,103 +1,107 @@
 @layer skin {
-/* ─── Density Dimension ─────────────────────────────────────────────────
+	/* ─── Density Dimension ─────────────────────────────────────────────────
  * Controls spacing, visibility, and detail level across all runes.
  * Three levels: full (dedicated page), compact (grid/card), minimal (list).
  *
  * Sets --rune-padding which surfaces consume for container padding.
  * ────────────────────────────────────────────────────────────────────── */
 
-/* ─── Full: all content visible, generous spacing ─────────────────── */
+	/* ─── Full: all content visible, generous spacing ─────────────────── */
 
-[data-density="full"] {
-	--rune-padding: var(--rf-spacing-md);
-	--rf-title-size: var(--rf-text-2xl);
-}
+	[data-density="full"] {
+		--rune-padding: var(--rf-spacing-md);
+		--rf-title-size: var(--rf-text-2xl);
+	}
 
-/* ─── Compact: truncated descriptions, tight spacing ──────────────── */
+	/* ─── Compact: truncated descriptions, tight spacing ──────────────── */
 
-[data-density="compact"] {
-	--rune-padding: var(--rf-spacing-sm);
-	--rf-title-size: var(--rf-text-xl);
-}
+	[data-density="compact"] {
+		--rune-padding: var(--rf-spacing-sm);
+		--rf-title-size: var(--rf-text-xl);
+	}
 
-[data-density="compact"] [data-section="description"] {
-	display: -webkit-box;
-	-webkit-line-clamp: 2;
-	-webkit-box-orient: vertical;
-	overflow: hidden;
-}
+	[data-density="compact"] [data-section="description"] {
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
 
-[data-density="compact"] [data-meta-rank="secondary"] {
-	display: none;
-}
+	[data-density="compact"] [data-meta-rank="secondary"] {
+		display: none;
+	}
 
-/* ─── Minimal: title and primary metadata only ────────────────────── */
+	/* ─── Minimal: title and primary metadata only ────────────────────── */
 
-[data-density="minimal"] {
-	--rune-padding: var(--rf-spacing-xs);
-	--rf-title-size: var(--rf-text);
-}
+	[data-density="minimal"] {
+		--rune-padding: var(--rf-spacing-xs);
+		--rf-title-size: var(--rf-text);
+	}
 
-/* Every rune root clears the prominence override so an ancestor's `prominence=`
+	/* Every rune root clears the prominence override so an ancestor's `prominence=`
  * cannot leak into a nested rune's title — the same protection the density
  * declarations above already give --rf-title-size. Declared here because this
  * file is imported before dimensions/surfaces.css, so a rune carrying both
  * `data-density` and `data-prominence` still keeps its own. */
-[data-density] {
-	--rf-prominence-size: initial;
-}
+	[data-density] {
+		--rf-prominence-size: initial;
+	}
 
-[data-density="minimal"] [data-section="description"] {
-	display: none;
-}
+	[data-density="minimal"] [data-section="description"] {
+		display: none;
+	}
 
-[data-density="minimal"] [data-section="body"] {
-	display: none;
-}
+	[data-density="minimal"] [data-section="body"] {
+		display: none;
+	}
 
-/* Most runes put the title beside the body; card puts its leading heading
+	/* Most runes put the title beside the body; card puts its leading heading
  * *inside* the body slot. The blanket hide above would take the title with it
  * and leave an empty surface, so where a title is nested in the body, keep the
  * body box and hide only its other children — "title and primary metadata only"
  * then means what it says on those runes too. (SPEC-125 Phase 1: card only
  * gained a `body` role in v0.31.0, so this case could not arise before.) */
-[data-density="minimal"] [data-section="body"]:has(> [data-name="title"]) {
-	display: revert;
-}
+	[data-density="minimal"] [data-section="body"]:has(> [data-name="title"]) {
+		display: revert;
+	}
 
-[data-density="minimal"] [data-section="body"]:has(> [data-name="title"]) > :not([data-name="title"]) {
-	display: none;
-}
+	[data-density="minimal"]
+		[data-section="body"]:has(> [data-name="title"])
+		> :not([data-name="title"]) {
+		display: none;
+	}
 
-[data-density="minimal"] [data-section="footer"] {
-	display: none;
-}
+	[data-density="minimal"] [data-section="footer"] {
+		display: none;
+	}
 
-[data-density="minimal"] [data-meta-rank="secondary"] {
-	display: none;
-}
+	[data-density="minimal"] [data-meta-rank="secondary"] {
+		display: none;
+	}
 
-/* ─── Nested density scoping ─────────────────────────────────────── *
+	/* ─── Nested density scoping ─────────────────────────────────────── *
  * Density rules use descendant selectors that leak into nested runes
  * with their own density. These resets ensure each rune's density is
  * self-contained — e.g. a full-density recipe inside a compact-density
  * preview should not have its description truncated.
  * ──────────────────────────────────────────────────────────────────── */
 
-[data-density="compact"] [data-density="full"] [data-section="description"] {
-	display: block;
-	-webkit-line-clamp: unset;
-	-webkit-box-orient: initial;
-	overflow: visible;
-}
-
-[data-density="compact"] [data-density="full"] [data-meta-rank="secondary"],
-[data-density="minimal"] [data-density="full"] [data-section="description"],
-[data-density="minimal"] [data-density="full"] [data-section="body"],
-[data-density="minimal"] [data-density="full"] [data-section="footer"],
-[data-density="minimal"] [data-density="full"] [data-meta-rank="secondary"],
-[data-density="minimal"] [data-density="full"] [data-section="body"]:has(> [data-name="title"]) > :not([data-name="title"]) {
-	display: revert;
-}
-
+	[data-density="compact"] [data-density="full"] [data-section="description"] {
+		display: block;
+		-webkit-line-clamp: unset;
+		-webkit-box-orient: initial;
+		overflow: visible;
+	}
+
+	[data-density="compact"] [data-density="full"] [data-meta-rank="secondary"],
+	[data-density="minimal"] [data-density="full"] [data-section="description"],
+	[data-density="minimal"] [data-density="full"] [data-section="body"],
+	[data-density="minimal"] [data-density="full"] [data-section="footer"],
+	[data-density="minimal"] [data-density="full"] [data-meta-rank="secondary"],
+	[data-density="minimal"]
+		[data-density="full"]
+		[data-section="body"]:has(> [data-name="title"])
+		> :not([data-name="title"]) {
+		display: revert;
+	}
 }

package/styles/dimensions/frame.css

@@ -1,5 +1,5 @@
 @layer skin {
-/* Frame chrome (SPEC-086) — media-surface presentation.
+	/* 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
@@ -21,48 +21,66 @@
  * `frame-shadow` (drop-shadow silhouette here) never collide — different property,
  * different surface. */
 
-/* ── Silhouette drop-shadow ────────────────────────────────────────────
+	/* ── 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)); }
+	[data-frame-shadow="none"] {
+		--frame-shadow: none;
+	}
+	[data-frame-shadow="sm"] {
+		--frame-shadow: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
+	}
+	[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.2));
+	}
 
-/* Self-target — figure, showcase, anything else where the rune root is the
+	/* 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);
-}
+	[data-frame-shadow]:not([data-section="media"]) {
+		filter: var(--frame-shadow);
+	}
 
-/* Media-target — card, bento-cell, recipe, etc. The filter rides the inner
+	/* 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, .rf-placeholder, [data-rune]) {
-	filter: var(--frame-shadow);
-}
+	[data-section="media"][data-frame-shadow] > :is(img, video, .rf-placeholder, [data-rune]) {
+		filter: var(--frame-shadow);
+	}
 
-/* ── Aspect ratio ────────────────────────────────────────────────────── */
-[style*="--frame-aspect"] { aspect-ratio: var(--frame-aspect); }
+	/* ── 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, .rf-placeholder) { object-position: var(--frame-anchor); }
+	/* ── Crop anchor — focal point when the guest is cut ─────────────────── */
+	[style*="--frame-anchor"] > :is(img, video, .rf-placeholder) {
+		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); }
+	/* ── 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,
+	/* ── 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, .rf-placeholder, [data-rune]) { width: calc(100% * var(--frame-oversize, 1)); max-width: none; }
+	[style*="--frame-oversize"] > :is(img, video, .rf-placeholder, [data-rune]) {
+		width: calc(100% * var(--frame-oversize, 1));
+		max-width: none;
+	}
 
-/* ── Displacement (peek / spill) — move the guest toward an edge/corner.
+	/* ── 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`:
  *
@@ -80,45 +98,87 @@
  *      We push the root with negative margins so it can spill past its
  *      parent's edge for a true breakout. */
 
-/* — Case 1a: media-zone displace, default `peek` mode → translate the inner
+	/* — Case 1a: media-zone displace, default `peek` mode → translate the inner
  *   guest inside the slot. The zone's `overflow: hidden` clips the displaced
  *   guest into a peek (card / bento-cell behaviour). */
-[data-section="media"][data-displace]:not([data-displace-mode="bleed"]) > :is(img, video, .rf-placeholder, [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)); }
+	[data-section="media"][data-displace]:not([data-displace-mode="bleed"])
+	> :is(img, video, .rf-placeholder, [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 1b: media-zone displace, `bleed` mode → negative margin on the media
+	/* — Case 1b: media-zone displace, `bleed` mode → negative margin on the media
  *   zone itself, so following layout pulls up and the guest extends past the
  *   host's edge (hero / cta behaviour). The guest renders at its natural
  *   position inside the zone — no translate, no artificial gap above. The
  *   margin needs to exceed the host's padding for the guest to clear the host
  *   edge; the offset scale tops out at `3xl` (6rem) for this. */
-[data-section="media"][data-displace="top"][data-displace-mode="bleed"]        { margin-top: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); }
-[data-section="media"][data-displace="bottom"][data-displace-mode="bleed"]     { margin-bottom: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); }
-[data-section="media"][data-displace="end"][data-displace-mode="bleed"]        { margin-inline-end: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); }
-[data-section="media"][data-displace="top-end"][data-displace-mode="bleed"]    { margin-top: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); margin-inline-end: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); }
-[data-section="media"][data-displace="bottom-end"][data-displace-mode="bleed"] { margin-bottom: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); margin-inline-end: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); }
+	[data-section="media"][data-displace="top"][data-displace-mode="bleed"] {
+		margin-top: calc(-1 * var(--frame-offset, var(--rf-spacing-lg)));
+	}
+	[data-section="media"][data-displace="bottom"][data-displace-mode="bleed"] {
+		margin-bottom: calc(-1 * var(--frame-offset, var(--rf-spacing-lg)));
+	}
+	[data-section="media"][data-displace="end"][data-displace-mode="bleed"] {
+		margin-inline-end: calc(-1 * var(--frame-offset, var(--rf-spacing-lg)));
+	}
+	[data-section="media"][data-displace="top-end"][data-displace-mode="bleed"] {
+		margin-top: calc(-1 * var(--frame-offset, var(--rf-spacing-lg)));
+		margin-inline-end: calc(-1 * var(--frame-offset, var(--rf-spacing-lg)));
+	}
+	[data-section="media"][data-displace="bottom-end"][data-displace-mode="bleed"] {
+		margin-bottom: calc(-1 * var(--frame-offset, var(--rf-spacing-lg)));
+		margin-inline-end: calc(-1 * 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))); }
+	/* — 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
+	/* 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. */
 
-/* ── frame-overflow="bleed" (SPEC-116) ───────────────────────────────────
+	/* ── frame-overflow="bleed" (SPEC-116) ───────────────────────────────────
  * The host declares the policy (`data-frame-overflow="bleed"` on its media
  * zone, a bleed host only); the guest signals the fact (`data-overflowing`,
  * set by its runtime when its content is wider than the frame). When both
@@ -131,13 +191,12 @@
  * at the content row). v1 is inline-end only; direction (via frame-anchor) and
  * side-by-side are deferred. The host media zone is already `overflow: visible`
  * for a rune guest (the bleed-host guestFit rule), so the guest can spill. */
-@media (max-width: 640px) {
-	[data-frame-overflow="bleed"] > [data-overflowing] {
-		width: calc(100% + var(--rf-bleed-room-end, var(--rf-content-gutter, 1.5rem)));
-		max-width: none;
-		border-start-end-radius: 0;
-		border-end-end-radius: 0;
+	@media (max-width: 640px) {
+		[data-frame-overflow="bleed"] > [data-overflowing] {
+			width: calc(100% + var(--rf-bleed-room-end, var(--rf-content-gutter, 1.5rem)));
+			max-width: none;
+			border-start-end-radius: 0;
+			border-end-end-radius: 0;
+		}
 	}
 }
-
-}