@refrakt-md/lumina 0.8.5 → 0.9.0

package/styles/runes/plan-progress.css

@@ -0,0 +1,69 @@
+/* Plan Progress */
+.rf-plan-progress {
+	background: var(--rf-color-surface);
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-md);
+	padding: 0.75rem 1.25rem;
+}
+.rf-plan-progress__row {
+	display: flex;
+	align-items: baseline;
+	gap: 0.5rem;
+	padding-block: 0.25rem;
+}
+.rf-plan-progress__row + .rf-plan-progress__row {
+	border-block-start: 1px solid var(--rf-color-border);
+}
+.rf-plan-progress__label {
+	font-weight: 600;
+	font-size: 0.8125rem;
+	color: var(--rf-color-text);
+	min-width: 8rem;
+}
+.rf-plan-progress__counts {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.25rem 0.5rem;
+}
+.rf-plan-progress__count {
+	font-size: 0.75rem;
+	padding: 0.125rem 0.5rem;
+	border-radius: var(--rf-radius-sm);
+	white-space: nowrap;
+}
+
+/* Status-colored counts */
+.rf-plan-progress__count[data-status="done"],
+.rf-plan-progress__count[data-status="fixed"],
+.rf-plan-progress__count[data-status="accepted"],
+.rf-plan-progress__count[data-status="active"],
+.rf-plan-progress__count[data-status="complete"] {
+	color: var(--rf-color-success);
+	background: var(--rf-color-success-bg);
+}
+.rf-plan-progress__count[data-status="in-progress"],
+.rf-plan-progress__count[data-status="confirmed"],
+.rf-plan-progress__count[data-status="review"] {
+	color: var(--rf-color-warning);
+	background: var(--rf-color-warning-bg);
+}
+.rf-plan-progress__count[data-status="ready"],
+.rf-plan-progress__count[data-status="reported"],
+.rf-plan-progress__count[data-status="proposed"],
+.rf-plan-progress__count[data-status="planning"] {
+	color: var(--rf-color-info);
+	background: var(--rf-color-info-bg);
+}
+.rf-plan-progress__count[data-status="blocked"] {
+	color: var(--rf-color-danger);
+	background: var(--rf-color-danger-bg);
+}
+.rf-plan-progress__count[data-status="draft"],
+.rf-plan-progress__count[data-status="pending"],
+.rf-plan-progress__count[data-status="superseded"],
+.rf-plan-progress__count[data-status="deprecated"],
+.rf-plan-progress__count[data-status="wontfix"],
+.rf-plan-progress__count[data-status="duplicate"] {
+	color: var(--rf-color-muted);
+	background: var(--rf-color-surface-active);
+}

package/styles/runes/playlist.css

@@ -1,52 +1,112 @@
 /* Playlist */
-.rf-playlist {
-	margin: 1.5rem 0;
-}
 
-/* Header: title + description */
-.rf-playlist__header {
-	display: flex;
+/* Inner header (headline + description) inside content */
+.rf-playlist__content > .rf-playlist__header {
 	flex-direction: column;
-	gap: 0.5rem;
-	padding: 0 0 1rem;
-}
-.rf-playlist__header h1,
-.rf-playlist__header h2,
-.rf-playlist__header h3,
-.rf-playlist__header h4,
-.rf-playlist__header h5,
-.rf-playlist__header h6 {
+	align-items: flex-start;
+	gap: 0.25rem;
+	margin-bottom: 1rem;
+}
+.rf-playlist__headline {
 	margin: 0;
-	font-size: 1.25rem;
-	font-weight: 700;
-	color: var(--rf-color-text);
 }
-.rf-playlist__header p {
+.rf-playlist__content > .rf-playlist__header p {
 	margin: 0;
-	font-size: 0.875rem;
+	font-size: 0.925rem;
 	color: var(--rf-color-muted);
 	line-height: 1.5;
 }
 
-/* Type badge */
-.rf-playlist__type-badge {
-	display: inline-block;
-	font-size: 0.7rem;
-	font-weight: 600;
-	text-transform: uppercase;
-	letter-spacing: 0.05em;
-	padding: 0.125rem 0.5rem;
-	border-radius: var(--rf-radius-full);
-	color: var(--rf-color-primary);
-	background: color-mix(in srgb, var(--rf-color-primary) 10%, transparent);
-	width: fit-content;
-}
-
 /* Tracks list wrapper */
 .rf-playlist__tracks {
 	list-style: none;
 	padding: 0;
-	margin: 0.5rem 0 0;
+	margin: 0;
+	counter-reset: track;
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-md);
+	overflow: hidden;
+}
+
+/* Track items — override sequence dimension's absolute positioning */
+.rf-playlist__tracks > li {
+	display: flex;
+	align-items: baseline;
+	gap: 0.75rem;
+	padding: 0.75rem 1.25rem;
+	padding-left: 1.25rem;
+	position: static;
+	transition: background 0.15s ease;
+}
+/* Hide meta elements from flex layout */
+.rf-playlist__tracks > li > meta {
+	display: none;
+}
+.rf-playlist__tracks > li + li {
+	border-top: 1px solid var(--rf-color-border);
+}
+.rf-playlist__tracks > li:hover {
+	background: color-mix(in srgb, var(--rf-color-border) 15%, transparent);
+}
+.rf-playlist__tracks > li::before {
+	position: static;
+	width: auto;
+	height: auto;
+	min-width: 1.5rem;
+	font-size: 0.8rem;
+	font-variant-numeric: tabular-nums;
+	color: var(--rf-color-muted);
+	background: none;
+	border-radius: 0;
+	text-align: right;
+	flex-shrink: 0;
+}
+
+/* Track name */
+.rf-playlist__tracks [data-name="track-name"] {
+	flex: 1;
+	font-size: 0.9375rem;
+	font-weight: 500;
+	color: var(--rf-color-text);
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+/* Track artist */
+.rf-playlist__tracks [data-name="track-artist"] {
+	font-size: 0.8125rem;
+	color: var(--rf-color-muted);
+	flex-shrink: 0;
+}
+.rf-playlist__tracks [data-name="track-artist"]::before {
+	content: '\00b7';
+	margin-right: 0.5rem;
+	opacity: 0.5;
+}
+
+/* Track duration — pushed right */
+.rf-playlist__tracks [data-name="track-duration"] {
+	font-size: 0.8125rem;
+	color: var(--rf-color-muted);
+	font-variant-numeric: tabular-nums;
+	flex-shrink: 0;
+	margin-left: auto;
+	min-width: 3rem;
+	text-align: right;
+}
+
+/* Track meta (date etc.) */
+.rf-playlist__tracks [data-name="track-meta"] {
+	font-size: 0.75rem;
+	color: var(--rf-color-muted);
+	flex-shrink: 0;
+}
+.rf-playlist__tracks [data-name="track-meta"]::before {
+	content: '\00b7';
+	margin-right: 0.5rem;
+	opacity: 0.5;
 }
 
 /* Player area */
@@ -55,58 +115,16 @@
 	margin-top: 0.5rem;
 }
 
-/* Media zone — cover art */
-.rf-playlist__media {
-	border-radius: var(--rf-radius-lg);
-	overflow: hidden;
-}
+/* Media zone — domain-specific cover art overrides (base styles in split.css) */
 .rf-playlist__media img {
-	display: block;
-	width: 100%;
-	height: auto;
-	border-radius: var(--rf-radius-lg);
 	aspect-ratio: 1;
 	object-fit: cover;
 }
 
-/* Split layout — shared */
-.rf-playlist[data-layout="split"],
-.rf-playlist[data-layout="split-reverse"] {
-	display: grid;
-	grid-template-columns: var(--split-ratio, 1fr 1fr);
-	gap: var(--split-gap, 2rem);
-	align-items: var(--split-valign, start);
-}
-/* Split: content left (col 1), media right (col 2) — DOM order is media first */
-.rf-playlist[data-layout="split"] > .rf-playlist__content {
-	grid-column: 1;
-	grid-row: 2;
-}
-.rf-playlist[data-layout="split"] > .rf-playlist__media {
-	grid-column: 2;
-	grid-row: 2;
-}
-/* Split-reverse: media left (col 1), content right (col 2) — matches DOM order */
-/* Type badge spans full width in split layouts */
-.rf-playlist[data-layout="split"] > .rf-playlist__type-badge,
-.rf-playlist[data-layout="split-reverse"] > .rf-playlist__type-badge {
-	grid-column: 1 / -1;
-}
-/* Collapse to single column on small screens */
-@media (max-width: 640px) {
-	.rf-playlist[data-layout="split"],
-	.rf-playlist[data-layout="split-reverse"] {
-		grid-template-columns: 1fr;
-	}
-	.rf-playlist[data-layout="split"] > .rf-playlist__content,
-	.rf-playlist[data-layout="split"] > .rf-playlist__media {
-		grid-column: auto;
-		grid-row: auto;
+/* Hide secondary columns on narrow screens */
+@media (max-width: 480px) {
+	.rf-playlist__tracks [data-name="track-artist"],
+	.rf-playlist__tracks [data-name="track-meta"] {
+		display: none;
 	}
 }
-
-/* Split layout media gets subtle depth */
-.rf-playlist[data-layout="split"] .rf-playlist__media img,
-.rf-playlist[data-layout="split-reverse"] .rf-playlist__media img {
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-}

package/styles/runes/plot.css

@@ -1,6 +1,5 @@
 /* Plot */
 .rf-plot {
-	margin: 1.5rem 0;
 	display: flex;
 	flex-direction: column;
 }
@@ -10,30 +9,8 @@
 	font-weight: 700;
 	margin-bottom: 0.5rem;
 	color: var(--rf-color-heading);
-	order: -1;
 }
 
-/* Meta bar — surface strip */
-.rf-plot__badge {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 0.75rem 1.25rem;
-	align-items: center;
-	background: var(--rf-color-surface);
-	border-radius: var(--rf-radius-md);
-	padding: 0.625rem 1rem;
-	margin-bottom: 1rem;
-}
-.rf-plot__type-badge,
-.rf-plot__structure-badge {
-	font-size: 0.8125rem;
-	font-weight: 500;
-	text-transform: capitalize;
-	color: var(--rf-color-muted);
-}
-.rf-plot__type-badge::before { content: 'Type: '; font-weight: 400; opacity: 0.65; }
-.rf-plot__structure-badge::before { content: 'Structure: '; font-weight: 400; opacity: 0.65; }
-
 /* Description */
 .rf-plot > p {
 	color: var(--rf-color-muted);

package/styles/runes/preview.css

@@ -3,19 +3,6 @@
 	margin: 2rem 0;
 }
 
-/* Width variants */
-@container (min-width: 1008px) {
-	.rf-preview[data-width="wide"] {
-		width: calc(100% + 8rem);
-		margin-left: -4rem;
-		max-width: 76rem;
-	}
-}
-.rf-preview[data-width="full"] {
-	width: 100vw;
-	margin-left: calc(-50vw + 50%);
-}
-
 /* Toolbar — transparent, controls float above the canvas */
 .rf-preview__toolbar {
 	display: flex;
@@ -79,7 +66,7 @@
 	box-shadow: var(--rf-shadow-xs);
 }
 
-/* Canvas — bordered frame for the preview content */
+/* Canvas — framed area for the preview content */
 .rf-preview__canvas {
 	padding: 2rem 2.5rem;
 	background: var(--rf-color-bg);
@@ -170,7 +157,7 @@
 }
 
 /* Small containers: edge-to-edge bleed */
-@container (max-width: 1008px) {
+@container (max-width: 1280px) {
 	.rf-preview__toolbar {
 		padding: 0.25rem var(--rf-content-padding, 1.5rem) 0.5rem;
 	}
@@ -182,7 +169,12 @@
 	}
 	.rf-preview__source {
 		border-radius: 0;
-		border-left: none;
-		border-right: none;
+	}
+	/* Break out of feature's padding-inline to reach viewport edges */
+	.rf-preview--in-feature {
+		margin-inline: calc(-1 * var(--rf-content-gutter, 1.5rem));
+	}
+	.rf-preview--in-feature .rf-preview__toolbar {
+		padding-inline: var(--rf-content-gutter, 1.5rem);
 	}
 }

package/styles/runes/pricing.css

@@ -3,7 +3,10 @@
 	padding: 2rem 0;
 }
 .rf-pricing > header,
-.rf-pricing__header {
+.rf-pricing__preamble {
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 0.25rem;
 	text-align: center;
 	margin-bottom: 2rem;
 }

package/styles/runes/realm.css

@@ -1,41 +1,12 @@
 /* Realm */
 .rf-realm {
-	margin: 1.5rem 0;
 	display: flex;
 	flex-direction: column;
 }
 
-/* Badge bar — surface strip */
-.rf-realm__badge {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 0.75rem 1.25rem;
-	align-items: center;
-	background: var(--rf-color-surface);
-	border-radius: var(--rf-radius-md);
-	padding: 0.625rem 1rem;
-	margin-bottom: 1rem;
-}
-.rf-realm__type-badge,
-.rf-realm__scale-badge {
-	font-size: 0.8125rem;
-	font-weight: 500;
-	text-transform: capitalize;
-	color: var(--rf-color-muted);
-}
-.rf-realm__type-badge::before { content: 'Type: '; font-weight: 400; opacity: 0.65; }
-.rf-realm__scale-badge::before { content: 'Scale: '; font-weight: 400; opacity: 0.65; }
-
-/* Scene image */
+/* Scene image — base styles deferred to shared [data-section="media"] in split.css */
 .rf-realm__scene {
-	border-radius: var(--rf-radius-lg);
-	overflow: hidden;
-}
-.rf-realm__scene img {
-	display: block;
-	width: 100%;
-	height: auto;
-	border-radius: var(--rf-radius-lg);
+	margin-bottom: var(--rf-spacing-md);
 }
 
 /* Content */
@@ -54,7 +25,6 @@
 	font-weight: 700;
 	margin-bottom: 0.5rem;
 	color: var(--rf-color-heading);
-	order: -1;
 }
 
 /* Realm Section */
@@ -62,9 +32,11 @@
 	padding: 0.75rem 0;
 	border-top: 1px solid var(--rf-color-border);
 }
-.rf-realm-section__header {
-	font-size: 1.125rem;
-	font-weight: 600;
+.rf-realm-section__name {
+	display: block;
+	font-size: 1.25rem;
+	font-weight: 700;
+	line-height: 1.3;
 	margin-bottom: 0.5rem;
 	color: var(--rf-color-heading);
 }
@@ -78,41 +50,103 @@
 .rf-realm[data-layout="split-reverse"] {
 	display: grid;
 	grid-template-columns: var(--split-ratio, 1fr 1fr);
-	gap: var(--split-gap, 2rem);
+	column-gap: var(--split-gap, 2rem);
 	align-items: var(--split-valign, start);
 }
-/* Name and badge span full width at the top */
-.rf-realm[data-layout="split"] > span[property="name"],
-.rf-realm[data-layout="split-reverse"] > span[property="name"] {
-	grid-column: 1 / -1;
+/* Split: badge + name + content left (col 1), scene right (col 2) */
+.rf-realm[data-layout="split"] > .rf-realm__badge {
+	grid-column: 1;
 	grid-row: 1;
 }
-.rf-realm[data-layout="split"] > .rf-realm__badge,
-.rf-realm[data-layout="split-reverse"] > .rf-realm__badge {
-	grid-column: 1 / -1;
+.rf-realm[data-layout="split"] > span[property="name"] {
+	grid-column: 1;
 	grid-row: 2;
 }
-/* Split: content left (col 1), scene right (col 2) */
 .rf-realm[data-layout="split"] > .rf-realm__content {
 	grid-column: 1;
 	grid-row: 3;
 }
 .rf-realm[data-layout="split"] > .rf-realm__scene {
+	grid-column: 2;
+	grid-row: 1 / 4;
+}
+/* Split-reverse: scene left (col 1), badge + name + content right (col 2) */
+.rf-realm[data-layout="split-reverse"] > .rf-realm__badge {
+	grid-column: 2;
+	grid-row: 1;
+}
+.rf-realm[data-layout="split-reverse"] > span[property="name"] {
+	grid-column: 2;
+	grid-row: 2;
+}
+.rf-realm[data-layout="split-reverse"] > .rf-realm__content {
 	grid-column: 2;
 	grid-row: 3;
 }
-/* Split-reverse: scene left (col 1), content right (col 2) — matches DOM order */
+.rf-realm[data-layout="split-reverse"] > .rf-realm__scene {
+	grid-column: 1;
+	grid-row: 1 / 4;
+	margin: 0;
+}
 /* Collapse to single column on small screens */
 @media (max-width: 640px) {
 	.rf-realm[data-layout="split"],
 	.rf-realm[data-layout="split-reverse"] {
 		grid-template-columns: 1fr;
 	}
+	.rf-realm[data-layout="split"] > .rf-realm__badge,
+	.rf-realm[data-layout="split"] > span[property="name"],
 	.rf-realm[data-layout="split"] > .rf-realm__content,
-	.rf-realm[data-layout="split"] > .rf-realm__scene {
+	.rf-realm[data-layout="split"] > .rf-realm__scene,
+	.rf-realm[data-layout="split-reverse"] > .rf-realm__badge,
+	.rf-realm[data-layout="split-reverse"] > span[property="name"],
+	.rf-realm[data-layout="split-reverse"] > .rf-realm__content,
+	.rf-realm[data-layout="split-reverse"] > .rf-realm__scene {
+		grid-column: auto;
+		grid-row: auto;
+	}
+	/* Only add margin when NOT in full-bleed media-position mode (shared split.css handles that) */
+	.rf-realm[data-layout="split"]:not([data-media-position="top"]) > .rf-realm__scene,
+	.rf-realm[data-layout="split-reverse"]:not([data-media-position="top"]) > .rf-realm__scene {
+		margin-bottom: var(--rf-spacing-md);
+	}
+}
+/* Reset grid placement when data-collapse triggers single-column from shared split.css */
+@media (max-width: 640px) {
+	.rf-realm[data-collapse="sm"] > .rf-realm__badge,
+	.rf-realm[data-collapse="sm"] > span[property="name"],
+	.rf-realm[data-collapse="sm"] > .rf-realm__content,
+	.rf-realm[data-collapse="sm"] > .rf-realm__scene {
 		grid-column: auto;
 		grid-row: auto;
 	}
+	.rf-realm[data-collapse="sm"]:not([data-media-position="top"]) > .rf-realm__scene {
+		margin-bottom: var(--rf-spacing-md);
+	}
+}
+@media (max-width: 768px) {
+	.rf-realm[data-collapse="md"] > .rf-realm__badge,
+	.rf-realm[data-collapse="md"] > span[property="name"],
+	.rf-realm[data-collapse="md"] > .rf-realm__content,
+	.rf-realm[data-collapse="md"] > .rf-realm__scene {
+		grid-column: auto;
+		grid-row: auto;
+	}
+	.rf-realm[data-collapse="md"]:not([data-media-position="top"]) > .rf-realm__scene {
+		margin-bottom: var(--rf-spacing-md);
+	}
+}
+@media (max-width: 1024px) {
+	.rf-realm[data-collapse="lg"] > .rf-realm__badge,
+	.rf-realm[data-collapse="lg"] > span[property="name"],
+	.rf-realm[data-collapse="lg"] > .rf-realm__content,
+	.rf-realm[data-collapse="lg"] > .rf-realm__scene {
+		grid-column: auto;
+		grid-row: auto;
+	}
+	.rf-realm[data-collapse="lg"]:not([data-media-position="top"]) > .rf-realm__scene {
+		margin-bottom: var(--rf-spacing-md);
+	}
 }
 
 /* Split layout scene gets subtle depth */

package/styles/runes/recipe.css

@@ -1,14 +1,5 @@
 /* Recipe — editorial cookbook aesthetic */
 
-/* Root: no border box, just flow spacing */
-.rf-recipe {
-	margin: 1.5rem 0;
-}
-
-/* Header */
-.rf-recipe__header {
-	margin-bottom: 1.25rem;
-}
 .rf-recipe .rf-recipe__eyebrow {
 	font-size: 0.8rem;
 	font-weight: 600;
@@ -30,31 +21,6 @@
 	margin-bottom: 1rem;
 }
 
-/* Meta bar — soft surface strip instead of bordered divider */
-.rf-recipe__meta {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 0.75rem 1.25rem;
-	align-items: center;
-	background: var(--rf-color-surface);
-	border-radius: var(--rf-radius-md);
-	padding: 0.625rem 1rem;
-	margin-bottom: 1.5rem;
-}
-.rf-recipe__meta-item {
-	font-size: 0.8125rem;
-	color: var(--rf-color-muted);
-	font-weight: 400;
-}
-
-/* Difficulty — plain text, same style as other meta items */
-.rf-recipe__badge {
-	font-size: 0.8125rem;
-	font-weight: 400;
-	text-transform: capitalize;
-	color: var(--rf-color-muted);
-}
-
 /* Content wrapper */
 .rf-recipe__content {
 	display: flex;
@@ -65,6 +31,7 @@
 /* Ingredients — surfaced zone with custom markers */
 .rf-recipe__content ul {
 	background: var(--rf-color-surface);
+	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-md);
 	padding: 1.25rem 1.25rem 1.25rem 2.5rem;
 	list-style: disc;
@@ -112,6 +79,11 @@
 	border-radius: var(--rf-radius-full);
 }
 
+.rf-recipe__content ol > li > p,
+.rf-recipe__content ul > li > p {
+	margin: 0;
+}
+
 /* Tips — callout accent like hint */
 .rf-recipe__content blockquote {
 	border-left: 2px solid var(--rf-color-primary);
@@ -128,61 +100,7 @@
 	margin: 0;
 }
 
-/* Media zone */
-.rf-recipe__media {
-	border-radius: var(--rf-radius-lg);
-	overflow: hidden;
-}
+/* Media zone — domain-specific overrides (base styles in split.css) */
 .rf-recipe__media img {
-	display: block;
-	width: 100%;
-	height: auto;
 	border-radius: var(--rf-radius-lg);
 }
-
-/* Split layout — shared */
-.rf-recipe[data-layout="split"],
-.rf-recipe[data-layout="split-reverse"] {
-	display: grid;
-	gap: var(--split-gap, 2rem);
-	align-items: var(--split-valign, start);
-}
-/* Both use the same column template */
-.rf-recipe[data-layout="split"],
-.rf-recipe[data-layout="split-reverse"] {
-	grid-template-columns: var(--split-ratio, 1fr 1fr);
-}
-/* Split: content left (col 1), media right (col 2) — DOM order is media first,
-   so explicit placement is needed */
-.rf-recipe[data-layout="split"] > .rf-recipe__content {
-	grid-column: 1;
-	grid-row: 2;
-}
-.rf-recipe[data-layout="split"] > .rf-recipe__media {
-	grid-column: 2;
-	grid-row: 2;
-}
-/* Split-reverse: media left (col 1), content right (col 2) — matches DOM order */
-/* Meta bar spans full width in split layouts */
-.rf-recipe[data-layout="split"] > .rf-recipe__meta,
-.rf-recipe[data-layout="split-reverse"] > .rf-recipe__meta {
-	grid-column: 1 / -1;
-}
-/* Collapse to single column on small screens */
-@media (max-width: 640px) {
-	.rf-recipe[data-layout="split"],
-	.rf-recipe[data-layout="split-reverse"] {
-		grid-template-columns: 1fr;
-	}
-	.rf-recipe[data-layout="split"] > .rf-recipe__content,
-	.rf-recipe[data-layout="split"] > .rf-recipe__media {
-		grid-column: auto;
-		grid-row: auto;
-	}
-}
-
-/* Split layout media gets subtle depth */
-.rf-recipe[data-layout="split"] .rf-recipe__media img,
-.rf-recipe[data-layout="split-reverse"] .rf-recipe__media img {
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-}

package/styles/runes/reveal.css

@@ -1,8 +1,5 @@
 /* Reveal */
-.rf-reveal {
-	margin: 1.5rem 0;
-}
-.rf-reveal__header {
+.rf-reveal__preamble {
 	margin-bottom: 1.5rem;
 }
 .rf-reveal__eyebrow {