.brand-palette-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:36px 20px;padding-top:8px;display:grid}.brand-swatch{grid-column:span 5;min-width:0}.brand-swatch:is([data-color=ruby],[data-color=black]){grid-column:span 7}.brand-swatch-button{text-align:left;cursor:pointer;flex-direction:column;width:100%;height:100%;display:flex}.brand-swatch-color{align-items:flex-end;width:100%;min-height:260px;padding:28px;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff14}.brand-swatch:is([data-color=off-white],[data-color=black]) .brand-swatch-color{min-height:180px}.brand-swatch-hex{font:13px var(--font-body);opacity:.8;position:absolute;top:24px;left:28px}.brand-swatch-name{font:400 clamp(42px, 5vw, 72px)/1 var(--font-display);letter-spacing:-.05em;transition:transform .4s var(--ease-out-quint)}.brand-swatch-copy{opacity:.65;border-radius:50%;place-items:center;width:30px;height:30px;transition:opacity .2s;display:grid;position:absolute;top:20px;right:24px}.brand-swatch-button:hover .brand-swatch-copy,.brand-swatch-button:focus-visible .brand-swatch-copy{opacity:1}.brand-swatch-button:hover .brand-swatch-name{transform:translate(4px)}.brand-swatch-button:focus-visible{outline-offset:5px;outline:2px solid #f9f5f0}.brand-swatch-details{flex-direction:column;gap:8px;padding:18px 0 0;display:flex}.brand-swatch-role{color:#ffffffd9;justify-content:space-between;gap:12px;font-size:14px;display:flex}.brand-swatch-status{font-size:12px}.brand-swatch-note{color:#fff9;max-width:48ch;font-size:13px;line-height:1.6}.brand-swatch-print{color:#fff6;font-size:11px;line-height:1.5}@media (max-width:639px){.brand-palette-grid{grid-template-columns:minmax(0,1fr);gap:28px}.brand-swatch,.brand-swatch:is([data-color=ruby],[data-color=black]){grid-column:auto}.brand-swatch-color{min-height:220px;padding:24px}.brand-swatch-hex{left:24px}}@media (prefers-reduced-motion:reduce){.brand-swatch-name,.brand-swatch-copy{transition:none}.brand-swatch-button:hover .brand-swatch-name{transform:none}}