@refrakt-md/skeleton 0.22.0

package/styles/layouts/split.css

@@ -0,0 +1,127 @@
+/* split — structure. The shared media|content layout used by card, recipe, hero,
+ * feature, step, realm, faction, playlist (the `splitLayoutAttributes` preset):
+ * the start/end two-column grid, the top/bottom stack, the 3-section grid
+ * placement, the media-zone fill/clip mechanism, and the responsive collapse.
+ *
+ * Mutually exclusive with cover (media-position=cover). The media radius tier, the
+ * beside-image depth shadow, and the codegroup radius alignment are skin (Lumina's
+ * layouts/split.css). Zone rhythm (sections.css margins) is skin too, so a rune's
+ * zone overrides still resolve by source order against it. */
+
+/* ─── Beside layouts (start / end): two-column grid ─── */
+[data-media-position="start"],
+[data-media-position="end"] {
+	display: grid;
+	grid-template-columns: var(--media-share, 50%) 1fr;
+	align-items: var(--split-valign, start);
+}
+/* "end" flips the grid so media lands in column 2 (source order is media-first). */
+[data-media-position="end"] {
+	grid-template-columns: 1fr var(--media-share, 50%);
+}
+[data-media-position="end"] > [data-section="media"],
+[data-media-position="end"] > [data-name="media"] { grid-column: 2; }
+[data-media-position="end"] > [data-name="content"] { grid-column: 1; }
+
+/* `media-ratio` → media's share of the row width. */
+[data-media-ratio="1/3"] { --media-share: 33.333%; }
+[data-media-ratio="2/5"] { --media-share: 40%; }
+[data-media-ratio="1/2"] { --media-share: 50%; }
+[data-media-ratio="3/5"] { --media-share: 60%; }
+[data-media-ratio="2/3"] { --media-share: 66.667%; }
+
+/* Grid so children can use justify-self/align-self (default: stretch). */
+[data-media-position="start"] > [data-name="media"],
+[data-media-position="end"] > [data-name="media"],
+[data-media-position="start"] > [data-section="media"],
+[data-media-position="end"] > [data-section="media"] {
+	display: grid;
+}
+
+/* ─── Stacked layouts (top / bottom) ─── */
+/* "bottom" puts content on top, media at the bottom; column-reverse flips the
+ * media-first source order visually without changing the DOM. */
+[data-media-position="bottom"] {
+	display: flex;
+	flex-direction: column-reverse;
+}
+
+/* ─── 3-section grid placement (header + content + media) ─── */
+[data-media-position="start"]:has(> [data-section="header"]) > [data-section="header"] { grid-column: 1; grid-row: 1; }
+[data-media-position="start"]:has(> [data-section="header"]) > [data-name="content"]   { grid-column: 1; grid-row: 2; }
+[data-media-position="start"]:has(> [data-section="header"]) > [data-section="media"]  { grid-column: 2; grid-row: 1 / 3; }
+
+[data-media-position="end"]:has(> [data-section="header"]) > [data-section="header"] { grid-column: 2; grid-row: 1; }
+[data-media-position="end"]:has(> [data-section="header"]) > [data-name="content"]   { grid-column: 2; grid-row: 2; }
+[data-media-position="end"]:has(> [data-section="header"]) > [data-section="media"]  { grid-column: 1; grid-row: 1 / 3; }
+
+[data-media-position="start"]:has(> [data-section="header"]) > [data-section="media"],
+[data-media-position="end"]:has(> [data-section="header"]) > [data-section="media"] {
+	margin: 0;
+}
+
+/* ─── Media zone base — fill + clip + container-query context ─── */
+[data-section="media"] {
+	container-type: inline-size;
+	overflow: hidden;
+}
+[data-section="media"] > * {
+	display: block;
+	width: 100%;
+	max-height: 100%;
+	margin: 0;
+}
+[data-section="media"] > :is(img, video) {
+	height: 100%;
+	object-fit: cover;
+}
+/* Guests that manage their own bleed / interactive chrome opt out of the clip. */
+[data-section="media"]:is(
+	:has(> [data-rune="preview"]),
+	:has(> [data-rune="juxtapose"]),
+	:has(> .rf-showcase[data-displace]:not(.rf-showcase--in-bento-cell))
+) {
+	overflow: visible;
+	container-type: normal;
+}
+/* …and keep their intrinsic width/sizing (the generic width:100% would defeat a
+ * negative-margin breakout). */
+[data-section="media"]:is(
+	:has(> [data-rune="preview"]),
+	:has(> [data-rune="juxtapose"]),
+	:has(> .rf-showcase[data-displace]:not(.rf-showcase--in-bento-cell))
+) > * {
+	width: auto;
+	max-height: none;
+}
+
+/* ─── Collapse breakpoints — beside layouts drop to one column ─── */
+@media (max-width: 640px) {
+	:is([data-media-position="start"], [data-media-position="end"])[data-collapse="sm"],
+	:is([data-media-position="start"], [data-media-position="end"]):not([data-collapse]) {
+		grid-template-columns: 1fr;
+	}
+	:is([data-media-position="start"], [data-media-position="end"])[data-collapse="sm"] > *,
+	:is([data-media-position="start"], [data-media-position="end"]):not([data-collapse]) > * {
+		grid-column: auto;
+		grid-row: auto;
+	}
+}
+@media (max-width: 768px) {
+	:is([data-media-position="start"], [data-media-position="end"])[data-collapse="md"] {
+		grid-template-columns: 1fr;
+	}
+	:is([data-media-position="start"], [data-media-position="end"])[data-collapse="md"] > * {
+		grid-column: auto;
+		grid-row: auto;
+	}
+}
+@media (max-width: 1024px) {
+	:is([data-media-position="start"], [data-media-position="end"])[data-collapse="lg"] {
+		grid-template-columns: 1fr;
+	}
+	:is([data-media-position="start"], [data-media-position="end"])[data-collapse="lg"] > * {
+		grid-column: auto;
+		grid-row: auto;
+	}
+}

package/styles/layouts/theme-toggle.css

@@ -0,0 +1,26 @@
+/* theme-toggle — structure. The button box (inline-flex centring + size), the
+ * header order, the tint-lock hide, and the icon mask box. Borders, radii, colours,
+ * and the glyph masks are skin. */
+.rf-theme-toggle {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 2rem;
+	height: 2rem;
+}
+.rf-header__inner .rf-theme-toggle,
+.rf-docs-header__inner .rf-theme-toggle,
+.rf-blog-header__inner .rf-theme-toggle {
+	order: 2;
+}
+html[data-tint-lock="true"] .rf-theme-toggle {
+	display: none;
+}
+.rf-theme-toggle__icon {
+	display: inline-block;
+	width: 1rem;
+	height: 1rem;
+	mask-size: contain;
+	mask-repeat: no-repeat;
+	mask-position: center;
+}

package/styles/layouts/version-switcher.css

@@ -0,0 +1,10 @@
+/* version-switcher — structure. The inline-flex row and the native-appearance reset
+ * on the select. Spacing, type, borders, the arrow glyph, and focus chrome are skin. */
+.rf-version-switcher {
+	display: inline-flex;
+	align-items: center;
+}
+.rf-version-switcher__select {
+	appearance: none;
+	-webkit-appearance: none;
+}

package/styles/runes/accordion.css

@@ -0,0 +1,55 @@
+/* accordion — structure. The eyebrow stretched-link, the items passthrough, the
+ * item-header flex + native-marker hide + chevron box/glyph/open-rotate mechanism,
+ * the title/count flex, and the ::details-content collapse mechanism. Type,
+ * borders, spacing, the chevron tint, transitions, and prose are skin (Lumina's
+ * styles/runes/accordion.css). The chevron glyph is the registry mask
+ * --rf-icon-accordion-chevron (SPEC-094 §8 / WORK-437). */
+
+.rf-accordion__eyebrow:has(a) {
+	display: inline-block;
+	position: relative;
+}
+.rf-accordion__eyebrow:has(a) a::before {
+	content: '';
+	position: absolute;
+	inset: 0;
+}
+.rf-accordion__items { display: contents; }
+
+.rf-accordion-item__header {
+	display: flex;
+	align-items: center;
+	list-style: none;
+}
+.rf-accordion-item__header::-webkit-details-marker { display: none; }
+.rf-accordion-item__header::marker { display: none; content: ''; }
+.rf-accordion-item__header::before {
+	content: '';
+	flex-shrink: 0;
+	width: 0.75rem;
+	height: 0.75rem;
+	mask-size: contain;
+	mask-repeat: no-repeat;
+	mask-position: center;
+	-webkit-mask-image: var(--rf-icon-accordion-chevron);
+	mask-image: var(--rf-icon-accordion-chevron);
+}
+.rf-accordion-item[open] .rf-accordion-item__header::before {
+	transform: rotate(90deg);
+}
+.rf-accordion-item__title { flex: 1; min-width: 0; }
+.rf-accordion-item__count { flex-shrink: 0; }
+
+/* Collapse / expand mechanism. */
+.rf-accordion-item { interpolate-size: allow-keywords; }
+.rf-accordion-item::details-content {
+	block-size: 0;
+	overflow: hidden;
+}
+.rf-accordion-item[open]::details-content { block-size: auto; }
+
+/* Block-content panels switch to a flex column (gap is skin). */
+.rf-accordion-item__body:has([data-block]) {
+	display: flex;
+	flex-direction: column;
+}

package/styles/runes/aggregate.css

@@ -0,0 +1,13 @@
+/* aggregate — structure. The items stack / grouped wrap-row and the group min-width.
+ * Margins, the inline-count type, and the empty state are skin. */
+.rf-aggregate__items {
+	display: flex;
+	flex-direction: column;
+}
+.rf-aggregate__items:has(.rf-aggregate__group) {
+	flex-direction: row;
+	flex-wrap: wrap;
+}
+.rf-aggregate__group {
+	min-width: 0;
+}

package/styles/runes/annotate.css

@@ -0,0 +1,55 @@
+/* annotate — structure. The body passthrough, the margin-note float, the inline /
+ * tooltip note display + the tooltip positioning + hover reveal, and the metadata
+ * hide. Type, colour, borders, spacing, and the `?` glyph stay skin (Lumina's
+ * styles/runes/annotate.css). */
+
+.rf-annotate__body { display: contents; }
+
+/* Margin style — float the note into the margin. */
+.rf-annotate--margin .rf-annotate-note {
+	float: right;
+	clear: right;
+	width: 40%;
+}
+
+/* Inline style */
+.rf-annotate--inline p { display: inline; }
+.rf-annotate--inline .rf-annotate-note {
+	display: inline-block;
+	vertical-align: baseline;
+}
+
+/* Tooltip style */
+.rf-annotate--tooltip .rf-annotate-note {
+	display: inline-block;
+	position: relative;
+	vertical-align: super;
+}
+.rf-annotate--tooltip .rf-annotate-note::before {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 1rem;
+	height: 1rem;
+}
+.rf-annotate--tooltip .rf-annotate-note__body {
+	display: none;
+	position: absolute;
+	bottom: 100%;
+	left: 50%;
+	transform: translateX(-50%);
+	width: 16rem;
+	z-index: 10;
+}
+.rf-annotate--tooltip .rf-annotate-note:hover .rf-annotate-note__body {
+	display: block;
+}
+.rf-annotate-note__body > span[property],
+.rf-annotate-note__body > meta { display: none; }
+
+@media (max-width: 768px) {
+	.rf-annotate--margin .rf-annotate-note {
+		float: none;
+		width: 100%;
+	}
+}

package/styles/runes/audio.css

@@ -0,0 +1,70 @@
+/* audio — structure. The web-component block, the player flex column, the info/
+ * controls flex, the name ellipsis clip, the play-button box (size + centring), the
+ * play-icon size, the time min-width, the progress track box + bar fill, the
+ * waveform box, the waveform-mode progress hide, the chapters list reset, and the
+ * chapter row flex. Surface, colours, radii, borders, type, and focus chrome are
+ * skin. */
+.rf-audio rf-audio { display: block; }
+.rf-audio-player {
+	display: flex;
+	flex-direction: column;
+}
+.rf-audio-player__info {
+	display: flex;
+	flex-direction: column;
+}
+.rf-audio-player__name {
+	overflow: hidden;
+}
+.rf-audio-player__controls {
+	display: flex;
+	align-items: center;
+}
+.rf-audio-player__play {
+	flex-shrink: 0;
+	width: 2.25rem;
+	height: 2.25rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.rf-audio-player__play svg {
+	width: 1rem;
+	height: 1rem;
+}
+.rf-audio-player__time {
+	min-width: 2.5rem;
+}
+.rf-audio-player__progress {
+	flex: 1;
+	height: 6px;
+	position: relative;
+	overflow: hidden;
+}
+.rf-audio-player__progress-bar {
+	height: 100%;
+	width: 0%;
+	pointer-events: none;
+}
+.rf-audio-player__waveform {
+	width: 100%;
+	min-height: 48px;
+	overflow: hidden;
+}
+.rf-audio[data-waveform="true"] .rf-audio-player__controls .rf-audio-player__progress {
+	display: none;
+}
+.rf-audio-player__chapters {
+	list-style: none;
+}
+.rf-audio-player__chapter {
+	display: flex;
+	width: 100%;
+	align-items: center;
+}
+.rf-audio-player__chapter-name {
+	flex: 1;
+}
+.rf-audio-player__chapter-time {
+	flex-shrink: 0;
+}

package/styles/runes/bento.css

@@ -0,0 +1,118 @@
+/* bento — structure. The container-query grid system: the grid track + cell
+ * spans, the cell flex layout + media placement, the row/content sizing knobs,
+ * the collapse queries, the stretched link, and metadata hiding. The cell surface
+ * chrome, spacing vars (padding/edge/gap), type, and the media-well chrome stay
+ * skin (Lumina's styles/runes/bento.css). bento-cell is a hand-rolled surface
+ * outside the data-elevation axis, so its padding has no surfaces competitor. */
+
+.rf-bento {
+	container-type: inline-size;
+	container-name: rf-bento;
+}
+
+.rf-bento__grid {
+	--bento-cols-effective: var(--bento-columns, 6);
+	display: grid;
+	grid-template-columns: repeat(var(--bento-cols-effective), 1fr);
+	grid-auto-rows: var(--bento-row-track, var(--bento-row-height, var(--rf-bento-row-height, 24rem)));
+}
+
+/* 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 sizing knobs. */
+.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%; }
+
+.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 columns. */
+.rf-bento-cell {
+	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 flex container (surface chrome + spacing are skin). */
+.rf-bento-cell {
+	overflow: hidden;
+	position: relative; /* anchor for the stretched link */
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+}
+
+/* Media placement (data-media-position). */
+.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%);
+	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; }
+
+.rf-bento-cell__content {
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	flex: 0 0 auto;
+}
+.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); }
+.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__body { min-height: 0; }
+.rf-bento-cell__body > span[property],
+.rf-bento-cell__body > meta { display: none; }
+.rf-bento-cell__footer { margin-top: auto; }
+.rf-bento-cell__body img { width: 100%; height: auto; }
+
+/* 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; }
+
+/* ─── Binary collapse — single stacked column with auto rows below breakpoint. ─── */
+@container rf-bento (max-width: 640px) {
+	: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

@@ -0,0 +1,29 @@
+/* bg — structure. The background/overlay/scrim layer placement (absolute fill +
+ * z-index + clip), the content-above-bg stacking, and the video fill. The images,
+ * gradients, blur/opacity, overlay tints, and scrim paint are skin. */
+[data-name="bg"] {
+	position: absolute;
+	inset: 0;
+	z-index: 0;
+	overflow: hidden;
+}
+[data-bg] > :not([data-name="bg"]) {
+	position: relative;
+	z-index: 1;
+}
+[data-name="bg-video"] {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	object-position: var(--bg-position, center);
+}
+[data-name="bg-overlay"] {
+	position: absolute;
+	inset: 0;
+}
+[data-name="scrim"] {
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+	z-index: 1;
+}

package/styles/runes/blog.css

@@ -0,0 +1,13 @@
+/* blog — structure. The posts flex stack, the date block, and the grid layout. The
+ * post surface chrome, type, and gaps are skin. */
+.rf-blog__posts {
+	display: flex;
+	flex-direction: column;
+}
+.rf-blog__post time {
+	display: inline-block;
+}
+.rf-blog--grid .rf-blog__posts {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+}

package/styles/runes/bond.css

@@ -0,0 +1,36 @@
+/* bond — structure. The flex row, the connector flex, the arrow rail box (display +
+ * size + relative), and the arrowhead pseudo positioning (both directions). The
+ * rail/arrowhead colours (drawn via borders), status tints, and type are skin. */
+.rf-bond {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+}
+.rf-bond__connector {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+}
+.rf-bond__arrow {
+	display: inline-block;
+	width: 2rem;
+	height: 2px;
+	position: relative;
+}
+.rf-bond__arrow::after {
+	content: '';
+	position: absolute;
+	right: -1px;
+	top: 50%;
+	transform: translateY(-50%);
+}
+.rf-bond[data-bidirectional="true"] .rf-bond__arrow::before {
+	content: '';
+	position: absolute;
+	left: -1px;
+	top: 50%;
+	transform: translateY(-50%);
+}
+.rf-bond__body {
+	width: 100%;
+}

package/styles/runes/breadcrumb.css

@@ -0,0 +1,16 @@
+/* breadcrumb — structure. The items/item display:contents passthroughs and the
+ * flex trail (the ol row + each li). Type, colour, gaps, and the separator glyph
+ * are skin (Lumina's styles/runes/breadcrumb.css). */
+
+.rf-breadcrumb__items { display: contents; }
+.rf-breadcrumb-item { display: contents; }
+.rf-breadcrumb ol {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	list-style: none;
+}
+.rf-breadcrumb li {
+	display: flex;
+	align-items: center;
+}

package/styles/runes/budget.css

@@ -0,0 +1,42 @@
+/* budget — structure. The categories stack, the category/line-item/total/per-day
+ * flex rows, the line-items list reset, description/per-day-label flex sizing, and
+ * the summary line-item hide. Type, borders, the est. badge, and spacing are skin. */
+.rf-budget__categories {
+	display: flex;
+	flex-direction: column;
+}
+.rf-budget-category__header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+.rf-budget-category__line-items { list-style: none; }
+.rf-budget-line-item {
+	display: flex;
+	justify-content: space-between;
+	align-items: baseline;
+}
+.rf-budget-line-item__description {
+	flex: 1;
+	min-width: 0;
+}
+.rf-budget__footer {
+	display: flex;
+	flex-direction: column;
+}
+.rf-budget__total {
+	display: flex;
+	justify-content: space-between;
+	align-items: baseline;
+}
+.rf-budget__per-day {
+	display: flex;
+	justify-content: space-between;
+	align-items: baseline;
+}
+.rf-budget__per-day-label {
+	min-width: 0;
+}
+[data-variant="summary"] .rf-budget-category__line-items {
+	display: none;
+}

package/styles/runes/card.css

@@ -0,0 +1,37 @@
+/* card — structure (SPEC-070). Pure layout only: the stretched-link positioning,
+ * the clip, the split vertical-align, the collection-grid height filling, and the
+ * intrinsic-height scale. ALL spacing stays skin in Lumina's card.css — the root
+ * `padding` overrides the surface-elevation padding (skin) by source order, and
+ * the split gaps + zone-reset margins are same-layer rhythm contests. */
+
+.rf-card {
+	position: relative; /* anchor for the stretched link */
+	overflow: hidden; /* clip non-media layers to the rounded box */
+}
+
+/* Split layout: stretch the media zone to the content height (the gaps are skin). */
+.rf-card[data-media-position="start"],
+.rf-card[data-media-position="end"] {
+	align-items: stretch;
+}
+
+/* Collection grid: a stacked card becomes a column and its body grows so footers
+ * drop to a common baseline across the row. */
+.rf-collection[data-layout='grid'] .rf-card[data-layout='stacked'] {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+.rf-collection[data-layout='grid'] .rf-card[data-layout='stacked'] > .rf-card__content { flex: 1; }
+.rf-collection[data-layout='grid'] .rf-card[data-layout='stacked'] .rf-card__content { display: flex; flex-direction: column; }
+.rf-collection[data-layout='grid'] .rf-card[data-layout='stacked'] .rf-card__body { flex: 1; }
+
+/* Intrinsic-height scale (SPEC-089) — poster shape for cover / bg-only cards. */
+.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; real links in body/footer sit above it. */
+.rf-card__link { position: absolute; inset: 0; z-index: 0; }
+.rf-card a:not(.rf-card__link) { position: relative; z-index: 1; }