/* 05 — colour */
.colour__tools { margin-bottom: 18px; }
.colour__palette { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-radius: var(--r-l); overflow: hidden; }
.colour__palette { position: relative; }
.colour__palette::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--navy-15); pointer-events: none; }
.swatch { position: relative; border: 0; text-align: left; padding: clamp(20px, 3vw, 40px); min-height: clamp(240px, 25vw, 360px); display: flex; flex-direction: column; justify-content: space-between; gap: 20px; cursor: pointer; }
.swatch__name { font-size: var(--fs-h3); font-weight: 300; line-height: 1.1; }
.swatch__role { font-size: var(--fs-small); opacity: .8; max-width: 26em; margin-top: 6px; }
.swatch__value { font-family: var(--mono); font-size: clamp(1.05rem, .9rem + .6vw, 1.5rem); font-weight: 400; }
.swatch__hint { position: absolute; top: clamp(20px, 3vw, 40px); right: clamp(20px, 3vw, 40px); font-size: .6875rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; opacity: 0; transition: opacity .15s; }
.swatch:hover .swatch__hint, .swatch:focus-visible .swatch__hint { opacity: .75; }
.swatch:focus-visible { outline-offset: -6px; }
.colour__note { margin-top: 18px; max-width: 760px; }
.colour__more { margin-top: 24px; gap: 12px; }

.colour__balance { display: flex; height: 76px; border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--navy-15); }
.colour__balance span { display: flex; align-items: flex-end; padding: 10px 14px; font-size: var(--fs-micro); font-weight: 500; letter-spacing: .06em; }

.pair { border-radius: var(--r-m); padding: 18px; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; border: 1px solid var(--navy-15); }
.pair__sample { font-size: 1.5rem; font-weight: 300; line-height: 1.1; }
.pair__meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--fs-micro); font-weight: 500; letter-spacing: .04em; }
.pair__badge { padding: 3px 8px; border-radius: 6px; border: 1px solid currentColor; white-space: nowrap; }
.pair--fail { opacity: .92; }
.pair--fail .pair__sample { text-decoration: line-through; text-decoration-thickness: 1px; }

@media (max-width: 800px) { .colour__palette { grid-template-columns: 1fr; } .swatch { min-height: 200px; } }