/* ColorLoop adaptation of the Sterling Gate kinetic navigation reference. */
html{scrollbar-gutter:stable}
.header-actions{display:flex;align-items:center;gap:34px}.header-caption{font-size:11px;letter-spacing:.08em}
.header .menu-toggle,.gate-close{display:flex;align-items:center;gap:18px;background:none;border:0;border-radius:0;padding:12px 0;font-size:20px;font-weight:600;line-height:1.3}
.menu-symbol{position:relative;display:block;width:26px;height:26px}.menu-symbol i{position:absolute;top:12px;left:0;width:26px;height:2px;background:currentColor;transition:transform .55s cubic-bezier(.22,1,.36,1)}.menu-symbol i:last-child{transform:rotate(90deg)}.menu-toggle:hover .menu-symbol{transform:rotate(90deg);transition:transform .5s}.gate-close .menu-symbol{transform:rotate(45deg)}
.kinetic-menu{--gate-width:min(740px,62vw);position:fixed;inset:0;margin:0;padding:0;width:100%;max-width:none;height:100dvh;max-height:none;border:0;background:transparent;color:var(--ink);overflow:hidden;isolation:isolate}
.kinetic-menu::backdrop{background:rgb(12 16 18 / .4);backdrop-filter:blur(5px)}
.gate-panel,.gate-layer{position:absolute;top:0;right:0;bottom:0;width:var(--gate-width);border-radius:24px 0 0 24px;transform:translateX(105%);transition:transform .65s cubic-bezier(.77,0,.175,1);will-change:transform}
.gate-layer{pointer-events:none}.gate-layer-blue{background:var(--cl-blue);transition-delay:.15s}.gate-layer-pink{background:var(--cl-pink);transition-delay:.075s}
.gate-panel{background:var(--paper);padding:30px 44px;display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;transition-delay:0s}
.gate-panel:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.10;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.is-open .gate-layer,.is-open .gate-panel{transform:translateX(0)}.is-open .gate-layer-blue{transition-delay:0s}.is-open .gate-layer-pink{transition-delay:.08s}.is-open .gate-panel{transition-delay:.16s}
.gate-top{display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative}.gate-top>.mono{font-size:11px}.gate-close{font-size:22px;padding:6px 0}.gate-close:hover .menu-symbol{transform:rotate(135deg);transition:transform .4s}
.gate-links{display:flex;flex-direction:column;margin:35px 0 30px;flex:1;justify-content:center;position:relative}
.gate-link{--hover-ink:var(--cl-blue);position:relative;display:grid;grid-template-columns:24px 1fr 32px;column-gap:14px;align-items:center;padding:12px 0 14px;border-bottom:1px solid rgb(20 20 22 / .16);transform:translateY(35px);opacity:0;transition:transform .35s,opacity .2s}
.gate-link:nth-child(2){--hover-ink:#19aae3}.gate-link:nth-child(3){--hover-ink:#a62f79}.gate-link:nth-child(4){--hover-ink:#707800}.gate-link:nth-child(5){--hover-ink:var(--cl-red)}
.is-open .gate-link{opacity:1;transform:translateY(0);transition:transform .8s cubic-bezier(.22,1,.36,1),opacity .5s;transition-delay:calc(.27s + var(--row)*.06s)}
.gate-number{font-size:11px;align-self:start;padding-top:11px;color:var(--muted)}
.gate-word{display:flex;font-size:clamp(40px,5.4vw,76px);font-weight:800;letter-spacing:-.065em;line-height:1.04;text-transform:uppercase}
.gate-char{position:relative;display:inline-block;overflow:hidden;padding-bottom:.05em}.gate-char>span{display:block;transition:transform .62s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--char)*.025s)}.gate-char>span:last-child{position:absolute;top:100%;left:0;color:var(--hover-ink);font-style:italic}
.gate-link:hover .gate-char>span,.gate-link:focus-visible .gate-char>span{transform:translateY(-100%)}
.gate-arrow{font-size:32px;font-weight:300;transform:translate(-10px,10px);opacity:0;transition:transform .4s,opacity .3s;color:var(--hover-ink)}.gate-link:hover .gate-arrow,.gate-link:focus-visible .gate-arrow{transform:translate(0);opacity:1}
.gate-description{grid-column:2/4;font-size:10px;letter-spacing:.08em;margin-top:4px;color:#65665c}.gate-bottom{position:relative;border-top:0;padding-top:6px}.gate-bottom>a{font-size:15px;border-bottom:1px solid var(--line);padding-bottom:6px;display:inline-block}.gate-print{display:flex;justify-content:space-between;align-items:end;margin-top:24px;line-height:1.6;font-size:10px}.gate-print .mini-swatches{display:flex;gap:3px}.gate-print .mini-swatches i{width:17px;height:17px}
@media(min-width:1600px){.gate-word{font-size:80px}.gate-links{margin-top:50px}}
@media(max-width:1000px){.header-caption{display:none}.kinetic-menu{--gate-width:min(680px,80vw)}.gate-word{font-size:clamp(42px,7vw,70px)}}
@media(max-width:650px){.header-actions{gap:0}.header .menu-toggle{font-size:17px;gap:13px;padding:12px 0}.menu-symbol,.menu-symbol i{width:22px}.kinetic-menu{--gate-width:100%}.gate-panel,.gate-layer{border-radius:0}.gate-panel{padding:22px 6%}.gate-top>.mono{font-size:10px}.gate-close{font-size:18px}.gate-links{margin:26px 0 24px;justify-content:center}.gate-link{grid-template-columns:22px 1fr 25px;gap:0 9px;padding:12px 0}.gate-word{font-size:clamp(39px,11vw,68px)}.gate-description{font-size:9px;margin-top:5px}.gate-number{padding-top:7px;font-size:10px}.gate-arrow{font-size:26px}.gate-print{margin-top:21px}.gate-bottom>a{font-size:14px}}
@media(max-height:650px){.gate-panel{padding-top:18px;padding-bottom:18px}.gate-links{margin:18px 0}.gate-link{padding:7px 0}.gate-word{font-size:clamp(34px,6vh,54px)}.gate-description{font-size:9px}.gate-print{margin-top:15px}}
@media(prefers-reduced-motion:reduce){.gate-panel,.gate-layer,.gate-link,.gate-char>span{transition:none!important}}
html[data-motion=paused] .gate-panel,html[data-motion=paused] .gate-layer,html[data-motion=paused] .gate-link,html[data-motion=paused] .gate-char>span{transition:none!important}
/* 320 px: the header is 7 px too wide (13 Oct 2026, every page) */
@media (max-width:340px){html .header-actions,html .header.site-nav .header-actions{gap:6px}html .header .button.small,html .site-nav .header-actions .button.small{padding-left:9px;padding-right:9px;font-size:12px}}