.color-page{max-width:960px;margin:0 auto}.color-header{margin-bottom:2rem}.color-header__title{font-size:1.75rem;font-weight:700;color:var(--color-warm-gray-900);margin:0 0 .5rem}.color-header__subtitle{font-size:.9375rem;color:var(--color-warm-gray-500);margin:0 0 1rem;line-height:1.6}.color-guide{display:grid;gap:.75rem;margin-bottom:2.5rem;padding:1.25rem 1.5rem;background:#f4ead0;border:1px solid var(--color-warm-gray-200);border-radius:var(--radius-lg)}.color-guide__rule{display:flex;align-items:flex-start;gap:.75rem;font-size:.875rem;color:var(--color-warm-gray-700);line-height:1.5}.color-guide__icon{flex-shrink:0;margin-top:.125rem}.color-guide__reject{color:var(--color-warm-gray-400);text-decoration:line-through}.color-recommended{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .75rem;background:#e8d8b0;color:var(--color-cream-900);font-size:.75rem;font-weight:600;border-radius:100px;margin-bottom:1rem}.color-section{margin-bottom:2.5rem}.color-section__heading{font-size:1rem;font-weight:600;color:var(--color-warm-gray-800);margin:0 0 1rem;padding-bottom:.5rem;border-bottom:1px solid var(--color-warm-gray-200)}.color-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}@media (min-width:640px){.color-grid{grid-template-columns:repeat(3,1fr)}}@media (min-width:1024px){.color-grid{grid-template-columns:repeat(4,1fr)}}.color-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:#f0e8d0;border:2px solid transparent;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease;cursor:default}.color-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.08)}.color-card[data-recommended=true]{border-color:var(--color-cream-400)}.color-card[data-recommended=true] .color-swatch__badge{display:flex}.color-swatch__img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}.color-swatch__info{padding:.75rem}.color-swatch__name{font-size:.9375rem;font-weight:600;color:var(--color-warm-gray-900);margin:0 0 .25rem}.color-swatch__combo{font-size:.8125rem;color:var(--color-warm-gray-500);margin:0 0 .5rem}.color-swatch__tags{display:flex;flex-wrap:wrap;gap:.25rem}.color-swatch__tag{display:inline-block;padding:.125rem .5rem;background:#f0e8d0;color:var(--color-warm-gray-600);font-size:.6875rem;border-radius:100px;border:1px solid var(--color-warm-gray-200)}.color-swatch__tag[data-match=true]{background:#f0e8d0;color:var(--color-cream-800);border-color:var(--color-cream-300)}.color-swatch__badge{display:none;position:absolute;top:.5rem;right:.5rem;padding:.2rem .6rem;background:rgb(180 140 60/.12);color:var(--color-cream-800);font-size:.6875rem;font-weight:700;border-radius:100px;backdrop-filter:blur(4px)}.color-card[data-size=large]{grid-column:span 2}.color-card[data-size=large] .color-swatch__img{aspect-ratio:16/9}.color-notes{margin-top:2rem;padding:1rem 1.25rem;background:#f4ead0;border-left:3px solid var(--color-warm-gray-300);border-radius:0 var(--radius-md) var(--radius-md) 0}.color-notes__title{font-size:.875rem;font-weight:600;color:var(--color-warm-gray-700);margin:0 0 .5rem}.color-notes__list{margin:0;padding:0 0 0 1.25rem;font-size:.8125rem;color:var(--color-warm-gray-600);line-height:1.8}@media (max-width:520px){.color-page{max-width:none}.color-header{margin-bottom:1.5rem}.color-header__title{font-size:1.5rem}.color-guide{margin-bottom:2rem;padding:1rem}.color-grid{grid-template-columns:1fr}.color-card[data-size=large]{grid-column:auto}}