.color-section-hero-photo img { object-fit: cover; object-position: var(--pos, 50% 46%); }
.color-section-hero .lead { max-width: 700px; }
.color-section-photo { min-height: 520px; }
.color-section-photo img { height: 520px; object-fit: cover; object-position: var(--pos, center); }
.color-illustration { min-height: 520px; }
.color-illustration img { min-height: 520px; object-fit: contain; background: #fffaf0; }
.color-card-grid, .color-link-grid, .color-pair-grid, .color-photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.color-link-grid.two, .color-photo-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.color-info-card { min-height: 218px; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: var(--radius); background: var(--ivory); box-shadow: 0 16px 42px rgba(17,17,17,.08); text-decoration: none; }
.color-info-card strong { font-family: Georgia, "Times New Roman", serif; font-size: 29px; font-weight: 520; line-height: 1.05; }
.color-info-card span { color: var(--muted); font-size: 15px; }
.mini-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: auto; }
.mini-swatches span { min-height: 36px; border: 1px solid rgba(17,17,17,.12); border-radius: 999px; background: var(--c); }
.color-study-grid { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: 26px; align-items: stretch; }
.color-study-copy { display: grid; align-content: start; gap: 16px; }
.color-study-copy .essay { font-size: 19px; }
.color-photo-card { overflow: hidden; border-radius: var(--radius); background: var(--ivory); box-shadow: 0 16px 42px rgba(17,17,17,.08); text-decoration: none; }
.color-photo-card figure { position: relative; margin: 0; min-height: 330px; background: #e7ded2; overflow: hidden; }
.color-photo-card img { width: 100%; height: 330px; object-fit: cover; object-position: var(--pos, center); }
.color-photo-card .photo-copy { display: grid; gap: 8px; padding: 18px; }
.color-photo-card strong { font-family: Georgia, "Times New Roman", serif; font-size: 27px; font-weight: 520; line-height: 1.05; }
.color-photo-card span { color: var(--muted); font-size: 15px; }
.palette-band { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 18px; border-radius: var(--radius); background: var(--ivory); box-shadow: 0 16px 42px rgba(17,17,17,.08); }
.palette-band span { min-height: 74px; border-radius: 999px; border: 1px solid rgba(17,17,17,.12); background: var(--c); }
.color-wide-note { padding: 28px; border-radius: var(--radius); background: var(--ivory); box-shadow: 0 16px 42px rgba(17,17,17,.08); color: #433d35; font-size: 20px; }
.color-wide-note a { font-weight: 760; }
.color-mini-table { display: grid; gap: 12px; }
.color-mini-row { display: grid; grid-template-columns: minmax(150px,.42fr) minmax(0,1fr) minmax(0,1fr); gap: 14px; padding: 18px; border-radius: var(--radius); background: var(--ivory); box-shadow: 0 14px 34px rgba(17,17,17,.07); }
.color-mini-row strong { font-size: 18px; }
.color-mini-row span { color: var(--muted); }
@media (max-width: 980px) { .color-card-grid, .color-link-grid, .color-pair-grid, .color-photo-grid, .color-link-grid.two, .color-photo-grid.two, .color-study-grid { grid-template-columns: 1fr; } .color-mini-row { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .color-section-hero-photo, .color-section-hero-photo img { min-height: 430px; height: 430px; } .color-section-photo, .color-section-photo img, .color-illustration, .color-illustration img { min-height: 340px; height: 340px; } .palette-band { grid-template-columns: repeat(3,1fr); } .color-photo-card figure, .color-photo-card img { min-height: 280px; height: 280px; } }