/* Visible, equally sized controls for the supplied logo variants. */
.logo-controls{--control-focus:#252422;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;max-width:380px;margin-inline:auto}
.logo-controls button{min-width:0;min-height:44px;padding:10px 12px;border:1px solid currentColor;border-radius:6px;background:transparent;color:inherit;font:600 13px/1.3 var(--body);opacity:1;cursor:pointer;transition:background .2s,color .2s}
.logo-controls button[aria-pressed="true"]{background:#252422;color:#f4f2ed;border-color:#252422}
.logo-display:has([data-logo="black"][aria-pressed="true"]) .logo-controls button[aria-pressed="true"]{background:#f4f2ed;color:#171716;border-color:#f4f2ed}
.logo-controls button:focus-visible{outline:2px solid var(--control-focus);outline-offset:4px}
@media(hover:hover){.logo-controls button[aria-pressed="false"]:hover{background:color-mix(in srgb,currentColor 10%,transparent)}}
@media(max-width:400px){.logo-controls{gap:6px}.logo-controls button{padding-inline:6px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.logo-controls button{transition:none}}

.logo-display:has([data-logo="black"][aria-pressed="true"]) .logo-controls{--control-focus:#f4f2ed}