/* /color/<slug> page */
.color-hero { display: flow-root; }
.color-hero-swatch { position: relative; display: block; min-height: 14rem; overflow: hidden; padding: 1.5rem 1.5rem 7.75rem; border: 1px solid rgb(0 0 0 / 0.1); border-radius: 1.5rem; box-shadow: var(--shadow-md); margin-bottom: 1.5rem; }
@media (min-width: 640px) { .color-hero-swatch { min-height: 18rem; padding-bottom: 9rem; } }
/* Wide screens: swatch floats left (1 : 1.2 split), the text column fills the rest */
@media (min-width: 1024px) { .color-hero-swatch { float: left; width: calc((100% - 1.5rem) / 2.2); margin: 0 1.5rem 0 0; } .color-hero-body { display: flow-root; } }
.color-hero-code { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.5rem; }
.color-hero-rgb { font-family: var(--font-mono); font-size: 0.875rem; opacity: 0.8; }
.color-hero-hex { margin-top: 0.25rem; font-family: var(--font-mono); font-size: 2.25rem; font-weight: 700; letter-spacing: 0.05em; }
@media (min-width: 640px) { .color-hero-hex { font-size: 3rem; } }
.color-title { font-size: 1.875rem; } @media (min-width: 640px) { .color-title { font-size: 2.25rem; } }
.color-title-hex { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 500; color: var(--text-muted); } @media (min-width: 640px) { .color-title-hex { font-size: 1.875rem; } }
.color-title-sub { font-size: 1.5rem; font-weight: 500; color: var(--text-muted); }
.color-paragraph { line-height: 1.65; color: var(--text-muted); }
.btn-pill-lg { height: 2.5rem; padding: 0 0.75rem; font-size: 0.875rem; font-family: var(--font-sans); font-weight: 500; }
.heart-icon { transition: transform 120ms; } [aria-pressed="true"] .heart-icon { fill: currentColor; color: var(--danger); }
.values-table td.mono { font-family: var(--font-mono); }
.contrast-card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.contrast-sample { padding: 1rem; }
.contrast-meta { display: flow-root; padding: 0.75rem 1rem; font-size: 0.875rem; }
.contrast-meta > div:first-child { display: inline-block; vertical-align: middle; margin-right: 0.5rem; }
.contrast-grade { float: right; padding-top: 0.25rem; }
.contrast-grade > * { display: inline-block; vertical-align: middle; } .contrast-grade > * + * { margin-left: 0.5rem; }
.scale-grid { font-size: 0; margin-left: -0.1875rem; margin-right: -0.1875rem; margin-bottom: -0.375rem; }
.scale-grid > li { display: inline-block; vertical-align: top; width: 16.6667%; padding: 0 0.1875rem 0.375rem; font-size: 1rem; }
@media (min-width: 640px) { .scale-grid > li { width: 9.0909%; } }
.scale-step { display: block; height: 3rem; border: 1px solid rgb(0 0 0 / 0.1); border-radius: var(--radius-md); } @media (min-width: 640px) { .scale-step { height: 3.5rem; } }
.scale-step.is-base { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.scale-step-label { margin-top: 0.25rem; font-size: 11px; font-weight: 600; color: var(--text-muted); } .scale-step-hex { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }
.related-grid { font-size: 0; margin-left: -0.375rem; margin-right: -0.375rem; margin-bottom: -0.75rem; }
.related-grid > li { display: inline-block; vertical-align: top; width: 50%; padding: 0 0.375rem 0.75rem; font-size: 1rem; }
@media (min-width: 640px) { .related-grid > li { width: 33.3333%; } }
@media (min-width: 768px) { .related-grid > li { width: 25%; } }
@media (min-width: 1024px) { .related-grid > li { width: 16.6667%; } }

/* Picture of the nearest illustrated color (the original site's thumbnail set) */
.color-photo { display: block; max-width: 20rem; margin: 0 auto; text-align: center; }
.color-photo img { display: block; width: 100%; max-width: 20rem; height: auto; border-radius: var(--radius-lg); border: 1px solid rgb(0 0 0 / 0.1); box-shadow: var(--shadow-sm); }
.color-photo a { display: block; }
.color-photo figcaption { margin-top: 0.5rem; font-size: 0.75rem; opacity: 0.75; }
.color-photo figcaption a{display:inline;color:inherit;text-decoration:underline}
.color-facts { margin-top: 0.25rem; font-size: 0.875rem; color: var(--text-muted); } .color-facts code { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text); }

/* The old site's header picture: transparent subjects painted by the color behind them (ColorWidgets::headerImage) */
#wrapHeaderImage { display: none; margin-top: 1.5rem; text-align: center; }
@media (min-width: 950px) { #wrapHeaderImage { display: block; } }
#headerImage { display: inline-block; max-width: 100%; line-height: 0; border-radius: var(--radius-xl); border: 1px solid var(--border); box-shadow: var(--shadow-sm); overflow: hidden; }
#headerImage img { display: block; max-width: 100%; height: auto; }

/* The hand-written article about a named color (Color\Articles) */
.color-article h3:first-child { margin-top: 0.75rem; }