@refrakt-md/lumina 0.32.0 → 0.34.0

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;
+		}
 	}
 }
-
-}

package/styles/dimensions/metadata.css

@@ -1,5 +1,5 @@
 @layer skin {
-/* ─── Metadata Dimensions — skin ───────────────────────────────────────
+	/* ─── Metadata Dimensions — skin ───────────────────────────────────────
  * SPEC-080 typography / geometry split. The zone-layout *structure* (bar +
  * definition-list display/grid, the rating flex row, the sr-only label
  * mechanism) lives in @refrakt-md/skeleton (dimensions/metadata.css). What
@@ -9,136 +9,143 @@
  *  - Sentiment rules drive `--meta-color`, inherited by chips + tinted text.
  * ────────────────────────────────────────────────────────────────────── */
 
-/* ─── Sentiment ────────────────────────────────────────────────────── */
+	/* ─── Sentiment ────────────────────────────────────────────────────── */
 
-[data-meta-sentiment="positive"] { --meta-color: var(--rf-color-success, #10b981); }
-[data-meta-sentiment="negative"] { --meta-color: var(--rf-color-danger, #ef4444); }
-[data-meta-sentiment="caution"]  { --meta-color: var(--rf-color-warning, #f59e0b); }
-[data-meta-sentiment="neutral"]  { --meta-color: var(--rf-color-muted, #64748b); }
+	[data-meta-sentiment="positive"] {
+		--meta-color: var(--rf-color-success, #10b981);
+	}
+	[data-meta-sentiment="negative"] {
+		--meta-color: var(--rf-color-danger, #ef4444);
+	}
+	[data-meta-sentiment="caution"] {
+		--meta-color: var(--rf-color-warning, #f59e0b);
+	}
+	[data-meta-sentiment="neutral"] {
+		--meta-color: var(--rf-color-muted, #64748b);
+	}
 
-/* ─── Meta Types — typography only ─────────────────────────────────── */
+	/* ─── Meta Types — typography only ─────────────────────────────────── */
 
-[data-meta-type="id"],
-[data-meta-type="code"] {
-	font-family: var(--rf-font-mono, monospace);
-	font-size: var(--meta-font-size, var(--rf-text-sm));
-}
+	[data-meta-type="id"],
+	[data-meta-type="code"] {
+		font-family: var(--rf-font-mono, monospace);
+		font-size: var(--meta-font-size, var(--rf-text-sm));
+	}
 
-/* IDs read as primary-coloured references wherever they appear (eyebrow
+	/* IDs read as primary-coloured references wherever they appear (eyebrow
  * bars, metadata def-lists, etc.) — a semantic treatment of the `id` type,
  * not a per-layout one. `code` (e.g. API paths) stays neutral monospace. */
-[data-meta-type="id"] {
-	color: var(--rf-color-primary);
-	font-weight: var(--rf-weight-medium);
-}
+	[data-meta-type="id"] {
+		color: var(--rf-color-primary);
+		font-weight: var(--rf-weight-medium);
+	}
 
-[data-meta-type="quantity"] {
-	font-variant-numeric: tabular-nums;
-	font-size: var(--meta-font-size, 0.8125rem);
-}
+	[data-meta-type="quantity"] {
+		font-variant-numeric: tabular-nums;
+		font-size: var(--meta-font-size, 0.8125rem);
+	}
 
-[data-meta-type="temporal"] {
-	font-variant-numeric: tabular-nums;
-	font-size: var(--meta-font-size, 0.8125rem);
-}
+	[data-meta-type="temporal"] {
+		font-variant-numeric: tabular-nums;
+		font-size: var(--meta-font-size, 0.8125rem);
+	}
 
-/* Rating — `value` filled marks out of `total`; each mark carries
+	/* Rating — `value` filled marks out of `total`; each mark carries
  * `data-filled`. Stars via colour (filled = primary, empty = border). The
  * inline-flex row is structure (skeleton); the glyph + spacing + colours are
  * skin. */
-[data-meta-type="rating"] {
-	gap: 0.0625rem;
-	line-height: 1;
-}
-[data-meta-type="rating"] span::before {
-	content: '★';
-}
-[data-meta-type="rating"] span[data-filled="true"] {
-	color: var(--rf-color-primary);
-}
-[data-meta-type="rating"] span[data-filled="false"] {
-	color: var(--rf-color-border);
-}
+	[data-meta-type="rating"] {
+		gap: 0.0625rem;
+		line-height: 1;
+	}
+	[data-meta-type="rating"] span::before {
+		content: "★";
+	}
+	[data-meta-type="rating"] span[data-filled="true"] {
+		color: var(--rf-color-primary);
+	}
+	[data-meta-type="rating"] span[data-filled="false"] {
+		color: var(--rf-color-border);
+	}
 
-[data-meta-type="status"],
-[data-meta-type="category"],
-[data-meta-type="tag"] {
-	font-size: var(--meta-font-size, 0.8125rem);
-}
+	[data-meta-type="status"],
+	[data-meta-type="category"],
+	[data-meta-type="tag"] {
+		font-size: var(--meta-font-size, 0.8125rem);
+	}
 
-/* Linked eyebrow content (matches today's hero behaviour). */
-[data-zone="eyebrow"] a {
-	color: var(--rf-color-primary);
-	text-decoration: underline;
-	text-underline-offset: 0.15em;
-}
+	/* Linked eyebrow content (matches today's hero behaviour). */
+	[data-zone="eyebrow"] a {
+		color: var(--rf-color-primary);
+		text-decoration: underline;
+		text-underline-offset: 0.15em;
+	}
 
-/* ─── Layout: bar — spacing ────────────────────────────────────────── */
-/* The flex row + end-push are structure (skeleton); the gap is skin. */
-[data-zone-layout="bar"] {
-	gap: 0.5rem;
-}
+	/* ─── Layout: bar — spacing ────────────────────────────────────────── */
+	/* The flex row + end-push are structure (skeleton); the gap is skin. */
+	[data-zone-layout="bar"] {
+		gap: 0.5rem;
+	}
 
-/* ─── Layout: definition-list — spacing + chrome ───────────────────── */
-/* The grid + row stacking are structure (skeleton); the gaps, the per-row
+	/* ─── Layout: definition-list — spacing + chrome ───────────────────── */
+	/* The grid + row stacking are structure (skeleton); the gaps, the per-row
  * border/padding/radius card chrome, and the dt/dd type are skin. */
-[data-zone-layout="definition-list"] {
-	gap: 0.75rem;
-	margin: 1.25rem 0;
-}
+	[data-zone-layout="definition-list"] {
+		gap: 0.75rem;
+		margin: 1.25rem 0;
+	}
 
-[data-zone-layout="definition-list"] > [data-name="row"] {
-	gap: 0.125rem;
-	padding: 0.625rem 0.75rem;
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-sm);
-}
+	[data-zone-layout="definition-list"] > [data-name="row"] {
+		gap: 0.125rem;
+		padding: 0.625rem 0.75rem;
+		border: 1px solid var(--rf-color-border);
+		border-radius: var(--rf-radius-sm);
+	}
 
-[data-zone-layout="definition-list"] dt {
-	font-size: var(--rf-text-xs);
-	font-weight: var(--rf-weight-medium);
-	color: var(--rf-color-muted);
-}
+	[data-zone-layout="definition-list"] dt {
+		font-size: var(--rf-text-xs);
+		font-weight: var(--rf-weight-medium);
+		color: var(--rf-color-muted);
+	}
 
-[data-zone-layout="definition-list"] dd {
-	font-size: var(--rf-text-sm);
-}
+	[data-zone-layout="definition-list"] dd {
+		font-size: var(--rf-text-sm);
+	}
 
-[data-zone-layout="definition-list"] dd[data-multi-value] {
-	gap: 0.25rem;
-}
+	[data-zone-layout="definition-list"] dd[data-multi-value] {
+		gap: 0.25rem;
+	}
 
-/* ─── Labels ──────────────────────────────────────────────────────── */
+	/* ─── Labels ──────────────────────────────────────────────────────── */
 
-/* Label element within a chip — thin, muted; pairs visually with the value */
-[data-meta-label] {
-	font-weight: var(--rf-weight-normal);
-	opacity: 0.65;
-}
+	/* Label element within a chip — thin, muted; pairs visually with the value */
+	[data-meta-label] {
+		font-weight: var(--rf-weight-normal);
+		opacity: 0.65;
+	}
 
-/* ─── Mobile: compact ──────────────────────────────────────────────── */
+	/* ─── Mobile: compact ──────────────────────────────────────────────── */
 
-@media (max-width: 48rem) {
-	[data-zone-layout="bar"] {
-		gap: 0.375rem;
-	}
+	@media (max-width: 48rem) {
+		[data-zone-layout="bar"] {
+			gap: 0.375rem;
+		}
 
-	/* The border + padding move to the list itself so the whole group reads as
+		/* The border + padding move to the list itself so the whole group reads as
 	 * one bordered card (the per-row box is dropped by the skeleton's
 	 * `display: contents`). */
-	[data-zone-layout="definition-list"] {
-		gap: 0.25rem 1rem;
-		padding: 0.75rem 1rem;
-		border: 1px solid var(--rf-color-border);
-		border-radius: var(--rf-radius-sm);
-	}
-
-	/* Header rhythm stays skin with sections.css (deferred until the split layout
+		[data-zone-layout="definition-list"] {
+			gap: 0.25rem 1rem;
+			padding: 0.75rem 1rem;
+			border: 1px solid var(--rf-color-border);
+			border-radius: var(--rf-radius-sm);
+		}
+
+		/* Header rhythm stays skin with sections.css (deferred until the split layout
 	 * + sections promote together). */
-	[data-section="header"] {
-		gap: 0.375rem;
-		margin-bottom: 1.5rem;
+		[data-section="header"] {
+			gap: 0.375rem;
+			margin-bottom: 1.5rem;
+		}
 	}
 }
-
-}

package/styles/dimensions/motion.css

@@ -26,12 +26,32 @@
 	/* Per-character offsets — set on the `[data-reveal]` container and inherited by
 	 * staggered children, so the single hidden-state block below covers every
 	 * character. `none` carries no offsets (it never animates). */
-	[data-reveal="fade"]  { --reveal-x: 0; --reveal-y: 0;                      --reveal-scale: 1;                       --reveal-blur: 0; }
-	[data-reveal="slide"] { --reveal-x: 0; --reveal-y: var(--rf-reveal-distance, 1.5rem); --reveal-scale: 1;             --reveal-blur: 0; }
-	[data-reveal="scale"] { --reveal-x: 0; --reveal-y: 0;                      --reveal-scale: var(--rf-reveal-scale-start, 0.95); --reveal-blur: 0; }
+	[data-reveal="fade"] {
+		--reveal-x: 0;
+		--reveal-y: 0;
+		--reveal-scale: 1;
+		--reveal-blur: 0;
+	}
+	[data-reveal="slide"] {
+		--reveal-x: 0;
+		--reveal-y: var(--rf-reveal-distance, 1.5rem);
+		--reveal-scale: 1;
+		--reveal-blur: 0;
+	}
+	[data-reveal="scale"] {
+		--reveal-x: 0;
+		--reveal-y: 0;
+		--reveal-scale: var(--rf-reveal-scale-start, 0.95);
+		--reveal-blur: 0;
+	}
 	/* `blur` is focus-led; it animates `filter` (not compositor-cheap), so a theme
 	 * or low-power path may downgrade it to `fade` by zeroing the blur token. */
-	[data-reveal="blur"]  { --reveal-x: 0; --reveal-y: 0;                      --reveal-scale: 1;                       --reveal-blur: var(--rf-reveal-blur, 8px); }
+	[data-reveal="blur"] {
+		--reveal-x: 0;
+		--reveal-y: 0;
+		--reveal-scale: 1;
+		--reveal-blur: var(--rf-reveal-blur, 8px);
+	}
 
 	/* The animated unit:
 	 *   • non-staggered → the `[data-reveal]` element itself,
@@ -43,19 +63,21 @@
 	 * the `transform` shorthand, so it composes with the rune transforms Lumina
 	 * already uses (hover-lifts on card/cta/feature, frame displacement, drawer/nav
 	 * slides) instead of clobbering them. */
-	[data-animate] :where(
+	[data-animate]
+	:where(
 		[data-reveal]:not([data-reveal="none"]):not([data-stagger]),
 		[data-stagger]:not([data-reveal="none"]) [style*="--rf-reveal-index"]
 	) {
 		transition:
-			opacity   var(--rf-reveal-duration, 0.9s) var(--rf-reveal-easing, ease-out),
+			opacity var(--rf-reveal-duration, 0.9s) var(--rf-reveal-easing, ease-out),
 			translate var(--rf-reveal-duration, 0.9s) var(--rf-reveal-easing, ease-out),
-			scale     var(--rf-reveal-duration, 0.9s) var(--rf-reveal-easing, ease-out),
-			filter    var(--rf-reveal-duration, 0.9s) var(--rf-reveal-easing, ease-out);
+			scale var(--rf-reveal-duration, 0.9s) var(--rf-reveal-easing, ease-out),
+			filter var(--rf-reveal-duration, 0.9s) var(--rf-reveal-easing, ease-out);
 	}
 
 	/* Pre-entrance (hidden) — until the unit's trigger fires. */
-	[data-animate] :where(
+	[data-animate]
+	:where(
 		[data-reveal]:not([data-reveal="none"]):not([data-stagger]):not([data-in-view]),
 		[data-stagger]:not([data-reveal="none"]):not([data-in-view]) [style*="--rf-reveal-index"]
 	) {
@@ -70,7 +92,8 @@
 	 * transition `translate`/`scale`/`filter` to-or-from `none`, so reverting to
 	 * the default would snap (no motion on iOS) — only opacity would animate.
 	 * Transitioning between two explicit values animates everywhere. */
-	[data-animate] :where(
+	[data-animate]
+	:where(
 		[data-reveal]:not([data-reveal="none"]):not([data-stagger])[data-in-view],
 		[data-stagger][data-in-view] [style*="--rf-reveal-index"]
 	) {
@@ -90,11 +113,17 @@
 	 * sliding section, let the media arrive a beat behind the content for a subtle
 	 * two-part entrance. Demonstrated on the named anatomy the theme already styles;
 	 * a theme adds or drops this freely. */
-	[data-animate] [data-reveal="slide"]:not([data-stagger]):not([data-in-view]) > * > [data-section="media"] {
+	[data-animate]
+		[data-reveal="slide"]:not([data-stagger]):not([data-in-view])
+		> *
+		> [data-section="media"] {
 		translate: 0 calc(var(--rf-reveal-distance, 1.5rem) * 1.5);
 	}
-	[data-animate] [data-reveal="slide"]:not([data-stagger])[data-in-view] > * > [data-section="media"] {
-		translate: 0 0;  /* explicit identity end-state — see the WebKit note above */
+	[data-animate]
+		[data-reveal="slide"]:not([data-stagger])[data-in-view]
+		> *
+		> [data-section="media"] {
+		translate: 0 0; /* explicit identity end-state — see the WebKit note above */
 	}
 	[data-animate] [data-reveal="slide"]:not([data-stagger]) > * > [data-section="media"] {
 		transition: translate var(--rf-reveal-duration, 0.9s) var(--rf-reveal-easing, ease-out);

package/styles/dimensions/reading.css

@@ -1,35 +1,35 @@
 @layer skin {
-/* Reading register (SPEC-108) — Lumina's editorial treatment of `[data-reading]`.
+	/* Reading register (SPEC-108) — Lumina's editorial treatment of `[data-reading]`.
  * The measure cap + niceties are structural (skeleton); this is the type, rhythm,
  * and drop-cap glyph. `ui` (the default) is left to the base body styling. */
 
-/* Prose — long-form reading. */
-[data-reading="prose"] {
-	line-height: var(--rf-leading-relaxed);
-}
-[data-reading="prose"] > p {
-	margin-bottom: 1em;
-}
-[data-reading="prose"] a {
-	text-underline-offset: 0.15em;
-}
+	/* Prose — long-form reading. */
+	[data-reading="prose"] {
+		line-height: var(--rf-leading-relaxed);
+	}
+	[data-reading="prose"] > p {
+		margin-bottom: 1em;
+	}
+	[data-reading="prose"] a {
+		text-underline-offset: 0.15em;
+	}
 
-/* Drop-cap glyph — the theme owns the treatment; the author owns where (the
+	/* Drop-cap glyph — the theme owns the treatment; the author owns where (the
  * `dropcap` opt-in, honoured only on a prose body). */
-[data-reading="prose"][data-dropcap] > p:first-child::first-letter {
-	font-size: 3.5em;
-	font-weight: var(--rf-weight-bold);
-	line-height: 0.8;
-	padding-right: 0.1em;
-	margin-top: 0.05em;
-	color: var(--rf-color-primary);
-	font-family: Georgia, 'Times New Roman', serif;
-}
+	[data-reading="prose"][data-dropcap] > p:first-child::first-letter {
+		font-size: 3.5em;
+		font-weight: var(--rf-weight-bold);
+		line-height: 0.8;
+		padding-right: 0.1em;
+		margin-top: 0.05em;
+		color: var(--rf-color-primary);
+		font-family: Georgia, "Times New Roman", serif;
+	}
 
-/* Fine print — captions, footnotes, asides: smaller and quieter. */
-[data-reading="fine"] {
-	font-size: var(--rf-text-sm);
-	line-height: var(--rf-leading-normal);
-	color: var(--rf-color-muted);
-}
+	/* Fine print — captions, footnotes, asides: smaller and quieter. */
+	[data-reading="fine"] {
+		font-size: var(--rf-text-sm);
+		line-height: var(--rf-leading-normal);
+		color: var(--rf-color-muted);
+	}
 }