@refrakt-md/lumina 0.18.0 → 0.20.0

package/styles/runes/bento.css

@@ -1,126 +1,220 @@
-/* Bento */
-.rf-bento__preamble {
-	flex-direction: column;
-	align-items: flex-start;
-	gap: 0.25rem;
-	margin-bottom: 1.5rem;
-}
-.rf-bento__eyebrow {
-	font-size: 0.8125rem;
-	font-weight: 600;
-	letter-spacing: 0.05em;
-	text-transform: uppercase;
-	color: var(--rf-color-primary);
-	margin: 0 0 0.5rem;
-}
-.rf-bento__eyebrow:has(a) {
-	display: inline-block;
-	position: relative;
-	padding: 0.25rem 0.875rem;
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-full);
-	color: var(--rf-color-text);
-	font-weight: 400;
-	text-transform: none;
-	letter-spacing: 0;
-	transition: border-color 150ms ease;
-}
-.rf-bento__eyebrow:has(a):hover { border-color: var(--rf-color-muted); }
-.rf-bento__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: 600; text-decoration: none; }
-.rf-bento__eyebrow:has(a) a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
-.rf-bento__headline {
-	margin-top: 0;
-}
-.rf-bento__blurb {
-	color: var(--rf-color-muted);
-	margin-bottom: 0;
-}
-.rf-bento__image {
-	margin-bottom: 1rem;
-}
+/* Bento — a grid of cells, each a card-in-a-grid-track (SPEC-085). */
+
+/* The grid responds to its OWN width, not the viewport, so it reduces columns and
+ * stacks correctly inside any container — a doc preview, a sidebar, a narrow page
+ * track — not just at viewport breakpoints. The progressive-reduction and collapse
+ * rules below are `@container rf-bento` queries against this. */
+.rf-bento {
+	container-type: inline-size;
+	container-name: rf-bento;
+}
+
 .rf-bento__grid {
+	/* Effective column count: the author's `--bento-columns` (default 6),
+	 * progressively reduced at breakpoints below. A CSS variable (not the inline
+	 * `--bento-columns`) so the media queries can override it without !important. */
+	--bento-cols-effective: var(--bento-columns, 6);
 	display: grid;
-	grid-template-columns: repeat(var(--bento-columns, 4), 1fr);
+	grid-template-columns: repeat(var(--bento-cols-effective), 1fr);
+	/* Uniform fixed row tracks in grid mode — never tied to column width (which
+	 * would explode vertically on collapse). Makes row spans meaningful and bounds
+	 * tall guests instead of letting them balloon a row. When the grid collapses to
+	 * a single column it becomes a STACK, and `--bento-row-track` is flipped to
+	 * `auto` (below) so cells size to their content and text is never clipped.
+	 * `--bento-row-height` is the author's `row-height` preset (below); it falls
+	 * back to the theme default `--rf-bento-row-height`. */
+	grid-auto-rows: var(--bento-row-track, var(--bento-row-height, var(--rf-bento-row-height, 24rem)));
 	gap: var(--bento-gap, 1rem);
 }
+
+/* Author row-height presets — the uniform grid row track height (grid mode). */
+.rf-bento[data-row-height="sm"] { --bento-row-height: 16rem; }
+.rf-bento[data-row-height="md"] { --bento-row-height: 24rem; }
+.rf-bento[data-row-height="lg"] { --bento-row-height: 32rem; }
+.rf-bento[data-row-height="xl"] { --bento-row-height: 40rem; }
+
+/* content-height / media-ratio — perpendicular text-zone knobs, each settable as
+ * a GRID default (on .rf-bento, inherited by every cell) or a per-CELL override
+ * (on .rf-bento-cell, shadowing the inherited value). A cell is either a column
+ * cell or a beside cell, so the two never collide:
+ *   • column cells (top/bottom/no-media): `content-height` pins the TEXT height;
+ *     the media zone (flex:1) absorbs the rest of the row track.
+ *   • beside cells (start/end): `media-ratio` pins the MEDIA width; the content
+ *     (flex:1) absorbs the rest of the cell width.
+ * The cascade is pure CSS variable inheritance — grid sets the var on the
+ * section, a cell redeclares it on itself. */
+.rf-bento[data-content-height="sm"], .rf-bento-cell[data-content-height="sm"] { --cell-content-height: 6rem; --cell-content-overflow: hidden; }
+.rf-bento[data-content-height="md"], .rf-bento-cell[data-content-height="md"] { --cell-content-height: 10rem; --cell-content-overflow: hidden; }
+.rf-bento[data-content-height="lg"], .rf-bento-cell[data-content-height="lg"] { --cell-content-height: 14rem; --cell-content-overflow: hidden; }
+.rf-bento[data-content-height="xl"], .rf-bento-cell[data-content-height="xl"] { --cell-content-height: 18rem; --cell-content-overflow: hidden; }
+
+.rf-bento[data-media-ratio="1/3"], .rf-bento-cell[data-media-ratio="1/3"] { --cell-media-ratio: 33.333%; }
+.rf-bento[data-media-ratio="2/5"], .rf-bento-cell[data-media-ratio="2/5"] { --cell-media-ratio: 40%; }
+.rf-bento[data-media-ratio="1/2"], .rf-bento-cell[data-media-ratio="1/2"] { --cell-media-ratio: 50%; }
+.rf-bento[data-media-ratio="3/5"], .rf-bento-cell[data-media-ratio="3/5"] { --cell-media-ratio: 60%; }
+.rf-bento[data-media-ratio="2/3"], .rf-bento-cell[data-media-ratio="2/3"] { --cell-media-ratio: 66.667%; }
+
+/* content-height pins the text area on COLUMN cells only (top/bottom — and
+ * no-media cells, which default to `top`). Positive selectors keep this at the
+ * same specificity as the mobile/collapse stack resets below, so those still win
+ * and the text area returns to natural height when stacked. Both the basis and
+ * the clip are gated on content-height being set (via the cascading vars): when
+ * unset they fall back to `auto` / `visible`, so the content zone keeps its
+ * default overflow and a bleeding showcase (negative margins) still reaches the
+ * cell edge. The clip only engages when you actually pin the height. */
+.rf-bento-cell[data-media-position="top"] > .rf-bento-cell__content,
+.rf-bento-cell[data-media-position="bottom"] > .rf-bento-cell__content {
+	flex-basis: var(--cell-content-height, auto);
+	overflow: var(--cell-content-overflow, visible);
+}
+
+/* Cell footprint: resolved `cols`/`rows` spans, auto-capped to the effective
+ * column count so a wide cell never overflows the (reduced) grid. */
 .rf-bento-cell {
-	border-radius: var(--rf-radius-md);
-	padding: 1.25rem;
+	grid-column: span min(var(--cell-cols, 1), var(--bento-cols-effective, 6));
+	grid-row: span var(--cell-rows, 1);
+	min-width: 0;
+}
+
+/* The cell. `:where()` keeps the background at zero specificity so a per-cell
+ * `{% tint %}` can repaint it (tint-deferrable). */
+:where(.rf-bento-cell) {
 	background: var(--rf-color-surface);
-	overflow: hidden;
-}
-.rf-bento-cell--full {
-	grid-column: 1 / -1;
-}
-.rf-bento-cell--large {
-	grid-column: span 2;
-	grid-row: span 2;
-}
-.rf-bento-cell--medium {
-	grid-column: span 2;
-}
-.rf-bento-cell--small {
-	grid-column: span 1;
-}
-/* Span mode: heading level determines column span via CSS variable */
-.rf-bento-cell--span {
-	grid-column: span var(--cell-span, 1);
-}
-.rf-bento-cell__icon {
-	margin-bottom: 0.75rem;
-	line-height: 0;
-}
-.rf-bento-cell__icon svg {
-	width: 1.5rem;
-	height: 1.5rem;
-	color: var(--rf-color-accent);
-}
-.rf-bento-cell__icon .rf-icon {
-	width: 1.5rem;
-	height: 1.5rem;
-	color: var(--rf-color-accent);
 }
+.rf-bento-cell {
+	border-radius: var(--rf-radius-container);
+	/* The cell hugs its media with only a thin edge margin; the content zone adds
+	 * the remaining inset back (below), so copy still sits at the full padding
+	 * while media — and a media banner — sits close to the cell border.
+	 * `--bento-media-gap` is the always-on space between media and content (in any
+	 * `data-media-position`), regardless of cell size; the flex gap handles both
+	 * column / column-reverse (top/bottom) and row / row-reverse (start/end). */
+	--container-padding: 1.25rem;
+	--bento-cell-edge: 0.5rem;
+	--bento-media-gap: var(--rf-spacing-md);
+	padding: var(--bento-cell-edge);
+	border: 1px solid var(--rf-color-border);
+	overflow: hidden;
+	position: relative; /* anchor for the stretched link */
+	display: flex;
+	flex-direction: column;
+	gap: var(--bento-media-gap);
+	min-height: 0;
+}
+
+/* Media placement (data-media-position): top stacks media above content (the
+ * default flow order); bottom flips it; start/end place media beside the body. */
+.rf-bento-cell[data-media-position="bottom"] { flex-direction: column-reverse; }
+.rf-bento-cell[data-media-position="start"] { flex-direction: row; align-items: stretch; }
+.rf-bento-cell[data-media-position="end"] { flex-direction: row-reverse; align-items: stretch; }
+.rf-bento-cell[data-media-position="start"] > .rf-bento-cell__media,
+.rf-bento-cell[data-media-position="end"] > .rf-bento-cell__media {
+	flex: 0 0 var(--cell-media-ratio, 42%);
+	margin-bottom: 0;
+	align-self: stretch;
+}
+.rf-bento-cell[data-media-position="start"] > .rf-bento-cell__content,
+.rf-bento-cell[data-media-position="end"] > .rf-bento-cell__content { flex: 1; min-width: 0; }
+
+/* Zones. The WORK-339 media-zone selector sizes/clips any guest — no per-guest
+ * CSS here. */
+.rf-bento-cell__media { margin-bottom: 0; }
+/* Text-first: the body keeps its natural height and is never squeezed out by
+ * media. In a fixed grid track the media zone (top/bottom) absorbs the leftover
+ * height and crops (cover); once collapsed to a stack it becomes an aspect-ratio
+ * banner (below). `--bento-media-aspect` is the knob SPEC-086's `frame-aspect`
+ * will drive; `--bento-media-anchor` picks which slice shows when cropped (e.g.
+ * `top` to peek the top of a tall guest like a phone mockup). */
+/* Add the remaining inset back on top of the cell's thin edge, so text sits at
+ * the full `--container-padding`. The top inset doubles as the gap between media
+ * and copy (media zone carries no margin of its own). */
+.rf-bento-cell__content {
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	flex: 0 0 auto;
+	padding: calc(var(--container-padding) - var(--bento-cell-edge));
+}
+.rf-bento-cell[data-media-position="top"] > .rf-bento-cell__media,
+.rf-bento-cell[data-media-position="bottom"] > .rf-bento-cell__media {
+	flex: 1 1 auto;
+	min-height: 0;
+	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;
 	margin: 0 0 0.5rem;
 }
+.rf-bento-cell__body { min-height: 0; }
 .rf-bento-cell__body > span[property],
 .rf-bento-cell__body > meta { display: none; }
+.rf-bento-cell__body > :first-child { margin-top: 0; }
 .rf-bento-cell__body p:last-child { margin-bottom: 0; }
-.rf-bento-cell img {
+.rf-bento-cell__footer {
+	margin-top: auto;
+	padding-top: 0.5rem;
+	border-top: 1px solid var(--rf-color-border);
+	font-size: 0.8125em;
+	color: var(--rf-color-muted);
+}
+.rf-bento-cell__body img {
 	width: 100%;
 	height: auto;
 	border-radius: var(--rf-radius-sm);
 	margin-bottom: 0.75rem;
 }
-/* Remove padding on bleed edges when showcase bleeds inside a cell */
+
+/* Whole-cell link — stretched overlay; nested links stay clickable. */
+.rf-bento-cell__link { position: absolute; inset: 0; z-index: 0; }
+.rf-bento-cell a:not(.rf-bento-cell__link) { position: relative; z-index: 1; }
+
+/* Drop padding on bleed edges when a showcase bleeds (clipped to a peek by
+ * the media-zone + cell overflow). */
 .rf-bento-cell:has(.rf-showcase[data-bleed="bottom"]),
 .rf-bento-cell:has(.rf-showcase[data-bleed="both"]),
-.rf-bento-cell:has(.rf-showcase[data-bleed="bottom-end"]) {
-	padding-bottom: 0;
-}
+.rf-bento-cell:has(.rf-showcase[data-bleed="bottom-end"]) { padding-bottom: 0; }
 .rf-bento-cell:has(.rf-showcase[data-bleed="end"]),
 .rf-bento-cell:has(.rf-showcase[data-bleed="bottom-end"]),
-.rf-bento-cell:has(.rf-showcase[data-bleed="top-end"]) {
-	padding-inline-end: 0;
-}
+.rf-bento-cell:has(.rf-showcase[data-bleed="top-end"]) { padding-inline-end: 0; }
 .rf-bento-cell:has(.rf-showcase[data-bleed="top"]),
 .rf-bento-cell:has(.rf-showcase[data-bleed="both"]),
-.rf-bento-cell:has(.rf-showcase[data-bleed="top-end"]) {
-	padding-top: 0;
-}
-@media (max-width: 768px) {
-	.rf-bento__grid { grid-template-columns: repeat(2, 1fr) !important; }
-	.rf-bento-cell--full { grid-column: 1 / -1; }
-	.rf-bento-cell--large { grid-column: span 2; grid-row: span 1; }
-	.rf-bento-cell--medium { grid-column: span 2; }
-	.rf-bento-cell--span { grid-column: span min(var(--cell-span, 1), 2); }
-}
-@media (max-width: 480px) {
-	.rf-bento__grid { grid-template-columns: 1fr !important; }
-	.rf-bento-cell--full,
-	.rf-bento-cell--large,
-	.rf-bento-cell--medium,
-	.rf-bento-cell--span { grid-column: span 1; }
+.rf-bento-cell:has(.rf-showcase[data-bleed="top-end"]) { padding-top: 0; }
+
+/* ─── Binary collapse ─── Above the chosen breakpoint, the grid renders exactly
+ * as authored: `columns` and per-cell `cols`/`rows` are honored (span auto-cap
+ * above still keeps wide cells inside the grid). Below it, the grid drops to a
+ * single stacked column with auto row tracks (cells size to content, never
+ * clipped). Default = `sm` (640px), so phones stack but tablet-portrait and up
+ * keep the grid. Authors who want graceful column reduction between desktop and
+ * stack can opt in via `collapse="gradual"` (not yet implemented). */
+@container rf-bento (max-width: 640px) {
+	/* `[data-collapse=""]` matches the unset (default) case — the engine emits
+	 * the attribute with an empty value when the author doesn't set it, so a bare
+	 * `:not([data-collapse])` wouldn't match. */
+	:is(.rf-bento[data-collapse="sm"], .rf-bento[data-collapse=""]) .rf-bento__grid { --bento-cols-effective: 1; --bento-row-track: auto; }
+	:is(.rf-bento[data-collapse="sm"], .rf-bento[data-collapse=""]) .rf-bento-cell[data-media-position="start"],
+	:is(.rf-bento[data-collapse="sm"], .rf-bento[data-collapse=""]) .rf-bento-cell[data-media-position="end"] { flex-direction: column; }
+	:is(.rf-bento[data-collapse="sm"], .rf-bento[data-collapse=""]) .rf-bento-cell[data-media-position] > .rf-bento-cell__media { flex: 0 0 auto; aspect-ratio: var(--bento-media-aspect, 16 / 9); }
+	:is(.rf-bento[data-collapse="sm"], .rf-bento[data-collapse=""]) .rf-bento-cell[data-media-position] > .rf-bento-cell__content { flex: 0 0 auto; }
+}
+@container rf-bento (max-width: 768px) {
+	.rf-bento[data-collapse="md"] .rf-bento__grid { --bento-cols-effective: 1; --bento-row-track: auto; }
+	.rf-bento[data-collapse="md"] .rf-bento-cell[data-media-position="start"],
+	.rf-bento[data-collapse="md"] .rf-bento-cell[data-media-position="end"] { flex-direction: column; }
+	.rf-bento[data-collapse="md"] .rf-bento-cell[data-media-position] > .rf-bento-cell__media { flex: 0 0 auto; aspect-ratio: var(--bento-media-aspect, 16 / 9); }
+	.rf-bento[data-collapse="md"] .rf-bento-cell[data-media-position] > .rf-bento-cell__content { flex: 0 0 auto; }
+}
+@container rf-bento (max-width: 1024px) {
+	.rf-bento[data-collapse="lg"] .rf-bento__grid { --bento-cols-effective: 1; --bento-row-track: auto; }
+	.rf-bento[data-collapse="lg"] .rf-bento-cell[data-media-position="start"],
+	.rf-bento[data-collapse="lg"] .rf-bento-cell[data-media-position="end"] { flex-direction: column; }
+	.rf-bento[data-collapse="lg"] .rf-bento-cell[data-media-position] > .rf-bento-cell__media { flex: 0 0 auto; aspect-ratio: var(--bento-media-aspect, 16 / 9); }
+	.rf-bento[data-collapse="lg"] .rf-bento-cell[data-media-position] > .rf-bento-cell__content { flex: 0 0 auto; }
 }

package/styles/runes/bg.css

@@ -51,3 +51,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/bond.css

@@ -9,7 +9,7 @@
 .rf-bond > span[property="to"] {
 	font-weight: 600;
 	font-size: 1rem;
-	color: var(--rf-color-heading);
+	color: var(--rf-color-text);
 	white-space: nowrap;
 }
 .rf-bond__connector {

package/styles/runes/budget.css

@@ -86,7 +86,7 @@
 	gap: 1rem;
 }
 .rf-budget-line-item + .rf-budget-line-item {
-	border-top: 1px solid var(--rf-color-border-light, var(--rf-color-border));
+	border-top: 1px solid var(--rf-color-border);
 }
 .rf-budget-line-item__description {
 	font-size: 0.875rem;

package/styles/runes/card.css

@@ -1,20 +1,75 @@
 /* card — generic content card (SPEC-070).
  *
- * Borderless (no outline) but with a soft surface fill — the surface + the
- * structure (media split, footer separator) carry the card, no border needed.
- * The media|content split + responsive collapse + mobile full-bleed media
- * header come from the shared layouts/split.css (keyed off data-layout /
- * data-section="media" / data-name="content" / data-media-position).
+ * A soft surface fill plus a subtle border; the surface + border + structure
+ * (media split, footer separator) carry the card. The media|content split +
+ * responsive collapse + inset media banner come from the shared
+ * layouts/split.css (keyed off data-layout / data-section="media" /
+ * data-name="content" / data-media-position).
  */
 
 .rf-card {
-	position: relative; /* anchor for the stretched link + media bleed */
-	padding: var(--rune-padding, var(--rf-spacing-md));
-	border-radius: var(--rf-radius-md);
+	position: relative; /* anchor for the stretched link */
+	/* Thin-edge inset model (matches `bento-cell`): the card hugs its media with
+	 * only a small edge margin, and the content zone adds the remaining inset
+	 * back below — so text still sits at the full `--rune-padding` while media
+	 * sits close to the card border, with no negative-margin bleed.
+	 *   • `--rf-card-edge`        — fixed thin outer padding.
+	 *   • `--rf-card-media-gap`   — generous gap when media stacks above/below
+	 *                                content (stacked layout, or split collapsed
+	 *                                to one column on mobile).
+	 *   • `--rf-card-split-gap`   — tight gap when media sits beside content,
+	 *                                so the card reads as a unified surface
+	 *                                rather than two loosely-related panels. */
+	--rf-card-edge: 0.5rem;
+	--rf-card-media-gap: var(--rf-spacing-lg);
+	--rf-card-split-gap: var(--rf-spacing-sm);
+	padding: var(--rf-card-edge);
+	border-radius: var(--rf-radius-container);
+	border: 1px solid var(--rf-color-border);
 	background: var(--rf-color-surface);
 }
 
-.rf-card:hover {
+/* Content zone fills the remaining inset so total text padding still equals
+ * `--rune-padding`. `max(0, …)` keeps dense+ (rune-padding < edge) safe — at
+ * tighter densities the edge becomes the floor. */
+.rf-card__content {
+	padding: max(0px, calc(var(--rune-padding, var(--rf-spacing-md)) - var(--rf-card-edge)));
+}
+
+/* Split layout: tight column-gap when media sits beside content. `row-gap`
+ * stays at the larger media-gap so the collapse step (split grid → single
+ * column) automatically picks up the generous stacked spacing instead of
+ * inheriting the tight beside-gap. (2-section cards have only one grid row in
+ * the uncollapsed state, so row-gap is dormant until collapse.) `stretch`
+ * lets the media zone match the content's height — the image inside uses
+ * `object-fit: cover` so it re-crops rather than letterboxing when content
+ * is taller than the media's natural aspect ratio.
+ *
+ * We set `column-gap` / `row-gap` / `align-items` directly rather than override
+ * `--split-gap` / `--split-valign`: the shared split layout transform emits
+ * those vars as inline styles even when the author doesn't set the matching
+ * attributes, so a CSS-variable override loses to inline-style specificity.
+ * Direct grid properties win via selector specificity and stay in our control. */
+.rf-card[data-media-position="start"],
+.rf-card[data-media-position="end"] {
+	column-gap: var(--rf-card-split-gap);
+	row-gap: var(--rf-card-media-gap);
+	align-items: stretch;
+}
+
+/* Stacked layouts (top / bottom): explicit gap between the media banner and
+ * the content zone (replaces the figure-style margin-bottom from the bleed
+ * model). For `bottom`, column-reverse already flips the visual order, so the
+ * gap still reads as the space between the two zones. */
+.rf-card[data-media-position="top"] > [data-section="media"] {
+	margin-bottom: var(--rf-card-media-gap);
+}
+.rf-card[data-media-position="bottom"] > [data-section="media"] {
+	margin-top: var(--rf-card-media-gap);
+}
+
+/* Only a linked card (stretched `.rf-card__link` present) reacts to hover. */
+.rf-card:has(.rf-card__link):hover {
 	background: var(--rf-color-surface-hover);
 }
 
@@ -70,6 +125,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/character.css

@@ -46,7 +46,7 @@
 	font-weight: 700;
 	line-height: 1.3;
 	margin-bottom: 0.5rem;
-	color: var(--rf-color-heading);
+	color: var(--rf-color-text);
 }
 .rf-character-section__body ul,
 .rf-character-section__body ol {

package/styles/runes/chart.css

@@ -1,11 +1,74 @@
 /* Chart */
 .rf-chart {
+	/* ─── Theming contract (SPEC-083 / WORK-353) ───
+	 * Every paint + geometry value the renderer uses is one of these
+	 * `--rf-chart-*` properties; a theme overrides any of them (here, on a tint
+	 * scope, or inline) with no renderer or selector changes. A non-CSS provider
+	 * (canvas) reads the same props via getComputedStyle. */
+
+	/* Series palette — a dedicated categorical palette, deliberately distinct
+	 * from the semantic status tokens (those are reserved for sentiment mode). */
+	--rf-chart-series-1: #6366f1;
+	--rf-chart-series-2: #06b6d4;
+	--rf-chart-series-3: #22c55e;
+	--rf-chart-series-4: #f59e0b;
+	--rf-chart-series-5: #a855f7;
+	--rf-chart-series-6: #ec4899;
+
+	/* Geometry (layout values the renderer reads via getComputedStyle). */
+	--rf-chart-bar-ratio: 0.75;        /* bar width as a fraction of its slot */
+	--rf-chart-bar-thickness: 48px;    /* max bar width cap */
+	--rf-chart-bar-gap: 0.15;          /* slot fraction reserved as inter-group gap */
+	--rf-chart-bar-radius: 2px;
+	--rf-chart-point-radius: 4px;
+	--rf-chart-line-width: 2px;
+
+	/* Typography / grid (paint values applied by CSS below). */
+	--rf-chart-label-size: 12px;
+	--rf-chart-label-color: var(--rf-color-muted);
+	--rf-chart-grid-color: var(--rf-color-border);
+	--rf-chart-grid-width: 1px;
+
 	display: block;
 	border-radius: var(--rf-radius-lg);
 	padding: 1.5rem;
 	margin: 0;
 }
 
+/* ─── SVG paint — driven entirely by the contract (the renderer sets no inline
+ * fill/stroke; it only tags elements with a class + data-series + optional
+ * data-meta-sentiment). ─── */
+.rf-chart__axis { stroke: var(--rf-chart-grid-color); stroke-width: var(--rf-chart-grid-width); }
+.rf-chart__label { fill: var(--rf-chart-label-color); font-size: var(--rf-chart-label-size); }
+.rf-chart__bar { rx: var(--rf-chart-bar-radius); fill: var(--rf-chart-series-1); }
+.rf-chart__point { fill: var(--rf-chart-series-1); }
+.rf-chart__line { fill: none; stroke: var(--rf-chart-series-1); stroke-width: var(--rf-chart-line-width); }
+
+/* Series palette rotation (data-series 0 is the default above). */
+.rf-chart__bar[data-series="1"], .rf-chart__point[data-series="1"] { fill: var(--rf-chart-series-2); }
+.rf-chart__bar[data-series="2"], .rf-chart__point[data-series="2"] { fill: var(--rf-chart-series-3); }
+.rf-chart__bar[data-series="3"], .rf-chart__point[data-series="3"] { fill: var(--rf-chart-series-4); }
+.rf-chart__bar[data-series="4"], .rf-chart__point[data-series="4"] { fill: var(--rf-chart-series-5); }
+.rf-chart__bar[data-series="5"], .rf-chart__point[data-series="5"] { fill: var(--rf-chart-series-6); }
+.rf-chart__line[data-series="1"] { stroke: var(--rf-chart-series-2); }
+.rf-chart__line[data-series="2"] { stroke: var(--rf-chart-series-3); }
+.rf-chart__line[data-series="3"] { stroke: var(--rf-chart-series-4); }
+.rf-chart__line[data-series="4"] { stroke: var(--rf-chart-series-5); }
+.rf-chart__line[data-series="5"] { stroke: var(--rf-chart-series-6); }
+
+/* Sentiment colouring — a data cell carrying `data-meta-sentiment` overrides the
+ * rotating palette with the semantic token (the roadmap chart renders green-done
+ * / red-blocked with no per-chart config). After the palette so it wins at equal
+ * specificity. */
+.rf-chart__bar[data-meta-sentiment="positive"], .rf-chart__point[data-meta-sentiment="positive"] { fill: var(--rf-color-success); }
+.rf-chart__bar[data-meta-sentiment="negative"], .rf-chart__point[data-meta-sentiment="negative"] { fill: var(--rf-color-danger); }
+.rf-chart__bar[data-meta-sentiment="caution"],  .rf-chart__point[data-meta-sentiment="caution"]  { fill: var(--rf-color-warning); }
+.rf-chart__bar[data-meta-sentiment="neutral"],  .rf-chart__point[data-meta-sentiment="neutral"]  { fill: var(--rf-color-muted); }
+.rf-chart__line[data-meta-sentiment="positive"] { stroke: var(--rf-color-success); }
+.rf-chart__line[data-meta-sentiment="negative"] { stroke: var(--rf-color-danger); }
+.rf-chart__line[data-meta-sentiment="caution"]  { stroke: var(--rf-color-warning); }
+.rf-chart__line[data-meta-sentiment="neutral"]  { stroke: var(--rf-color-muted); }
+
 /* Data table — the no-JS / screen-reader source of truth. Visible as the
  * fallback; visually-hidden (but kept for assistive tech) once rf-chart has
  * rendered the svg. */
@@ -60,4 +123,10 @@
 	width: 12px;
 	height: 12px;
 	border-radius: 2px;
+	background: var(--rf-chart-series-1);
 }
+.rf-chart__legend-color[data-series="1"] { background: var(--rf-chart-series-2); }
+.rf-chart__legend-color[data-series="2"] { background: var(--rf-chart-series-3); }
+.rf-chart__legend-color[data-series="3"] { background: var(--rf-chart-series-4); }
+.rf-chart__legend-color[data-series="4"] { background: var(--rf-chart-series-5); }
+.rf-chart__legend-color[data-series="5"] { background: var(--rf-chart-series-6); }

package/styles/runes/design-context.css

@@ -10,12 +10,14 @@
 	gap: 1.5rem;
 }
 
-/* Children inside design-context: remove card styling */
-.rf-palette--in-design-context,
-.rf-typography--in-design-context,
-.rf-spacing--in-design-context,
-.rf-swatch--in-design-context {
+/* Children inside design-context: remove card styling so the outer
+ * design-context surface is the only visible frame. Structural selector
+ * (`> [data-rune]` inside the sections wrapper) catches every direct rune
+ * child, not just the four design-system runes — so dropping a future rune
+ * into a design-context will Just Work without a per-rune CSS update. */
+.rf-design-context__sections > [data-rune] {
 	background: none;
+	border: none;
 	border-radius: 0;
 	padding: 0;
 }

package/styles/runes/event.css

@@ -14,7 +14,7 @@
 	display: inline-block;
 	padding: 0.5rem 1rem;
 	background: var(--rf-color-primary);
-	color: #fff;
+	color: var(--rf-color-on-primary);
 	border-radius: var(--rf-radius-md);
 	font-weight: 500;
 	font-size: 0.875rem;

package/styles/runes/faction.css

@@ -4,15 +4,41 @@
  * "preamble"), and dimensions/metadata.css ([data-zone-layout]). This file
  * only carries faction-specific chrome. */
 
-/* Stacked layout — split / split-reverse are handled by shared split.css */
-.rf-faction[data-layout="stacked"] {
+/* Thin-edge inset model (matches `.rf-card` / `.rf-recipe`): card outer padding
+ * is a thin edge, the content column adds the remaining inset back so text sits
+ * at the full `--rune-padding` without negative-margin bleed. Like recipe, no
+ * `--split-valign: stretch` — faction content can be long (multiple sections),
+ * so we let the scene keep its natural aspect ratio rather than cover-cropping. */
+.rf-faction {
+	--rf-faction-edge: 0.5rem;
+	--rf-faction-media-gap: var(--rf-spacing-lg);
+	--rf-faction-split-gap: var(--rf-spacing-sm);
+	padding: var(--rf-faction-edge);
+}
+
+.rf-faction__content {
+	padding: max(0px, calc(var(--rune-padding, var(--rf-spacing-md)) - var(--rf-faction-edge)));
+}
+
+/* Direct grid properties (column-gap / row-gap) win via selector specificity
+ * over the shared media-position layout vars. */
+.rf-faction[data-media-position="start"],
+.rf-faction[data-media-position="end"] {
+	column-gap: var(--rf-faction-split-gap);
+	row-gap: var(--rf-faction-media-gap);
+}
+
+/* Stacked layouts — beside layouts handled by shared split.css */
+.rf-faction[data-media-position="top"] {
 	display: flex;
 	flex-direction: column;
 }
 
-/* Scene image — base styles deferred to shared [data-section="media"] in split.css */
-.rf-faction__scene {
-	margin-bottom: var(--rf-spacing-md);
+.rf-faction[data-media-position="top"] > .rf-faction__scene {
+	margin-bottom: var(--rf-faction-media-gap);
+}
+.rf-faction[data-media-position="bottom"] > .rf-faction__scene {
+	margin-top: var(--rf-faction-media-gap);
 }
 
 /* Content */
@@ -37,7 +63,7 @@
 	font-weight: 700;
 	line-height: 1.3;
 	margin-bottom: 0.5rem;
-	color: var(--rf-color-heading);
+	color: var(--rf-color-text);
 }
 .rf-faction-section__body ul,
 .rf-faction-section__body ol {