/* One circular menu control on all screens. */
header{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:18px}
header .wordmark{grid-column:1;grid-row:1}
header .looks{grid-column:2;grid-row:1}
header .menu-toggle{display:grid;grid-column:3;grid-row:1;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent}
header .menu-plus{width:22px;height:22px;transition:transform .28s ease;transform:rotate(0deg)}
body.menu-open header .menu-plus{transform:rotate(45deg)}
header nav#site-nav{display:none;position:absolute;left:auto;right:var(--site-content-inset,4vw);top:calc(100% + 12px);width:min(620px,calc(100vw - 2 * var(--site-content-inset,4vw)));margin:0;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--bg);max-height:calc(100dvh - 170px);overflow:auto;z-index:1}
body.menu-open header nav#site-nav{display:flex;flex-direction:column;align-items:stretch;gap:10px}
header nav#site-nav>a{padding:12px 10px;margin:0;border-bottom:1px solid var(--line)}
header nav#site-nav #language{align-self:flex-start;margin:0}
header .tools-dropdown-panel{position:static;right:auto;width:100%;max-height:50vh;margin-top:8px;box-shadow:none}
header .tools-dropdown summary{padding-inline:10px}
/* Thin circular rim; the look colors fade toward it. */
header .looks button{width:44px;height:44px;margin:0 3px;border:1px solid var(--line);border-radius:50%;background:transparent}
header .looks button[data-look]:before{inset:3px;border:0;background:linear-gradient(135deg,var(--swatch-dark) 0 33.333%,var(--swatch-main) 33.333% 66.666%,var(--swatch-third) 66.666% 100%);mask-image:radial-gradient(circle,#000 20%,#000b 48%,transparent 74%);-webkit-mask-image:radial-gradient(circle,#000 20%,#000b 48%,transparent 74%)}
header .looks button[aria-pressed=true]:after{inset:-4px;border:1px solid var(--accent);border-radius:50%;background:transparent}
/* Large footer mark and left-aligned family name. */
.review-footer .footer-brand .brand{display:flex;flex-direction:column;align-items:flex-start;gap:18px;width:max-content}
.review-footer .footer-brand .brand-mark{width:clamp(100px,12vw,180px);height:auto;max-width:none;color:var(--accent)}
.review-footer .footer-brand .brand>span{font-size:clamp(21px,2vw,30px);line-height:1;font-weight:800;letter-spacing:-.02em}
/* Fill sweeps in from the left for both mouse and keyboard. */
.review-footer nav a,.review-footer .footer-bottom>a{background-image:linear-gradient(105deg,color-mix(in srgb,var(--accent) 55%,transparent),color-mix(in srgb,var(--accent) 12%,transparent))!important;background-repeat:no-repeat;background-position:left;background-size:0% 100%!important;transition:background-size .45s ease,color .25s ease}
.review-footer nav a:hover,.review-footer nav a:focus-visible,.review-footer .footer-bottom>a:hover,.review-footer .footer-bottom>a:focus-visible{background-size:100% 100%!important;background-color:var(--bg)!important;color:var(--ink)}
@media(max-width:600px){header{gap:5px}header .looks,body.menu-open header .looks{grid-column:2;grid-row:1;margin:0;gap:3px;justify-content:center}header .looks button{width:32px;height:32px;margin:0;border-radius:50%}header .looks button[aria-pressed=true]:after{inset:-3px}header .menu-toggle{width:38px;height:38px}.review-footer .footer-brand .brand-mark{width:130px}}
@media(prefers-reduced-motion:reduce){header .menu-plus,.review-footer nav a,.review-footer .footer-bottom>a{transition:none}}