.projectBlockColor.projectBlock
{
	background-color: white;
	padding: calc(var(--defaultInterval)*2) calc(var(--defaultInterval)*.5);
}

/* ── Two-column layout ───────────────────────────────────────────────────────── */

.projectBlockColor.projectBlock .color-columns
{
	display: flex;
	align-items: center;
	gap: calc(var(--defaultInterval) * 2);
	max-width: var(--maxWidth);
	margin-left: auto;
	margin-right: auto;
}

.projectBlockColor.projectBlock .color-col--text 
{
	flex: 1 1 0;
}

.projectBlockColor.projectBlock .color-col--colors
{
	flex: 1 1 0;
}

/* Column split ratios */

.projectBlockColor.projectBlock .col-split-50-50 .color-col--text   { flex: 50 1 0; }
.projectBlockColor.projectBlock .col-split-50-50 .color-col--colors { flex: 50 1 0; }

.projectBlockColor.projectBlock .col-split-60-40 .color-col--text   { flex: 60 1 0; }
.projectBlockColor.projectBlock .col-split-60-40 .color-col--colors { flex: 40 1 0; }

.projectBlockColor.projectBlock .col-split-40-60 .color-col--text   { flex: 40 1 0; }
.projectBlockColor.projectBlock .col-split-40-60 .color-col--colors { flex: 60 1 0; }

.projectBlockColor.projectBlock .col-split-67-33 .color-col--text   { flex: 67 1 0; }
.projectBlockColor.projectBlock .col-split-67-33 .color-col--colors { flex: 33 1 0; }

.projectBlockColor.projectBlock .col-split-33-67 .color-col--text   { flex: 33 1 0; }
.projectBlockColor.projectBlock .col-split-33-67 .color-col--colors { flex: 67 1 0; }

/* ── Swatches (inside color-col--colors) ─────────────────────────────────────── */

.projectBlockColor.projectBlock .palettes
{
	display: flex;
	justify-content: center;
	overflow: hidden;
}

.projectBlockColor.projectBlock .palettes .palette
{
	height: 100%;
	position: relative;
}

.projectBlockColor.projectBlock .palettes > div .label
{
	padding: 0 calc(var(--defaultInterval)*.5);
	margin-top: calc(var(--defaultInterval)*.5);
	margin-bottom: 0px;
}

.projectBlockColor.projectBlock .palettes .primary .palette
{
	display: grid;
	flex-wrap: wrap;
	grid-template-rows: auto;
	grid-auto-flow: column;
}

.projectBlockColor.projectBlock .palettes .primary.secondaryPaletteFalse .label
{
	text-align: center;
}

.projectBlockColor.projectBlock .palettes .primary.secondaryPaletteTrue .label
{
	text-align: right;
	border-right: 4px solid grey;
	margin-right: -2px;
}

.projectBlockColor.projectBlock .palettes .secondary .palette
{
	display: grid;
	grid-template-rows: auto auto;
	grid-auto-flow: column;
}

.projectBlockColor.projectBlock .palettes .color
{
	aspect-ratio: 1/1;
	margin: calc(var(--defaultInterval)*.25);
	-moz-border-radius: var(--defaultBorderRadius);
	-webkit-border-radius: var(--defaultBorderRadius);
	-khtml-border-radius: var(--defaultBorderRadius);
	border-radius: var(--defaultBorderRadius);
	box-sizing: border-box;
}

/* ── Color notes headline — subhead design token ─────────────────────────────── */

#SD .projectBlockColor.projectBlock .colorNotesHeadline
{
	margin-bottom:  calc(var(--defaultInterval) * .5);
	font-family:    var(--subhead-font);
	font-weight:    var(--subhead-weight);
	text-transform: var(--subhead-transform);
	letter-spacing: var(--subhead-tracking);
	font-size:      var(--subhead-size);
	color:          var(--subhead-color);
}

/* Text-first + radial: right-align the text column (desktop only) */

@media only screen and (min-width: 801px)
{
	.projectBlockColor.projectBlock .color-columns.order-text-first.display-radial .color-col--text
	{
		text-align: right;
	}
}

/* ── Color Wheel ─────────────────────────────────────────────────────────────── */

.projectBlockColor.projectBlock .color-wheel-wrap
{
	display: flex;
	justify-content: center;
	align-items: center;
}

.projectBlockColor.projectBlock .color-wheel
{
	width: 100%;
	max-width: 560px;
	height: auto;
	overflow: visible;
}

.projectBlockColor.projectBlock .color-wheel .color-wheel-label
{
	font-family: inherit;
	font-size: 11px;
	letter-spacing: 0.04em;
	pointer-events: none;
}

/* Each slice starts invisible and scales in from center when the
   wrapper receives is-in-view from the scroll observer.
   --slice-delay is set inline on each <path> by createColorWheel(). */

.projectBlockColor.projectBlock .color-wheel-wrap .color-wheel path
{
	opacity: 0;
	transform: scale(0.5);
	transform-origin: 250px 250px; /* SVG viewBox center */
	transition:
		opacity  0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--slice-delay, 0ms),
		transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--slice-delay, 0ms);
}

.projectBlockColor.projectBlock .color-wheel-wrap.is-in-view .color-wheel path
{
	opacity: 1;
	transform: scale(1);
}

@media (prefers-reduced-motion: reduce)
{
	.projectBlockColor.projectBlock .color-wheel-wrap .color-wheel path
	{
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */

@media only screen and (max-width: 800px)
{
	/* Colors always appear first on mobile — reverse default (text-first) order */
	.projectBlockColor.projectBlock .color-columns
	{
		flex-direction: column-reverse;
	}

	.projectBlockColor.projectBlock .color-columns.order-colors-first
	{
		flex-direction: column;
	}

	.projectBlockColor.projectBlock .color-col--text,
	.projectBlockColor.projectBlock .color-col--colors
	{
		flex: 1 1 auto;
		width: 100%;
	}

	.projectBlockColor.projectBlock .palettes
	{
		flex-direction: column;
		justify-content: flex-start;
	}

	.projectBlockColor.projectBlock .palettes > div
	{
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
	}

	#SD .projectBlockColor.projectBlock .palettes > div > *
	{
		justify-content: flex-start;
		text-align: left;
		margin-top: calc(var(--defaultInterval)*1);
	}

	.projectBlockColor.projectBlock .palettes .primary.secondaryPaletteTrue .label
	{
		border-right: none;
	}
}