.site-header { --ink: #0d0c0c; --accent: #ca5e38; }
.site-header .icons, .site-header .icons *, .site-header .spill, .site-header .spill * { box-sizing: border-box; }
.site-header .header__right { position: relative; }

.site-header .icons { position: relative; display: none; align-items: center; justify-content: space-between; width: 270px; height: 40px; }
@media (min-width: 75rem) { .site-header .icons { display: flex; } }
.site-header .icons__slot { position: relative; display: block; width: 24px; height: 24px; flex: 0 0 24px; }

.site-header .pill { --size: 40px; position: absolute; top: 50%; left: -8px; z-index: 1; display: flex; align-items: center; width: var(--size); height: var(--size); overflow: hidden; border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none; transform: translateY(-50%); isolation: isolate; outline-offset: 4px; }
.site-header .pill:focus-visible { outline: 2px solid var(--accent); }
.site-header .pill[data-open] { z-index: 10; box-shadow: 0 0 0 1px #ffffff26, 0 4px 18px #00000066; }
.site-header .pill__icon { position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 var(--size); height: var(--size); }
.site-header .pill__icon img, .site-header .pill__icon svg { display: block; width: auto; height: 24px; }
.site-header .pill__color { position: absolute; inset: 0; margin: auto; opacity: 0; }
.site-header .pill__mono--google { filter: grayscale(1) brightness(0) invert(1); }
.site-header .pill__text { display: inline-flex; padding-right: 22px; font: 700 16px/1 "Mulish", sans-serif; white-space: nowrap; }
.site-header .pill__char { display: inline-block; white-space: pre; opacity: 0; }
.site-header .pill__glow { position: absolute; inset: auto 0 0 0; z-index: 0; height: 3px; transform: scaleX(0); transform-origin: left; background: var(--glow); }

.site-header .search-slot { position: static; display: block; width: 24px; height: 24px; flex: 0 0 24px; }
.site-header .spill { --size: 40px; position: absolute; top: 50%; right: -8px; z-index: 1; display: flex; flex-direction: row-reverse; align-items: center; width: var(--size); height: var(--size); margin: 0; overflow: hidden; border-radius: 999px; background: var(--ink); transform: translateY(-50%); isolation: isolate; }
.site-header .spill[data-open] { z-index: 20; background: #262525; box-shadow: 0 0 0 1px #ffffff26, 0 4px 18px #00000066; }
.site-header .spill__button { position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 var(--size); height: var(--size); padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; outline-offset: -4px; }
.site-header .spill__button:focus-visible { outline: 2px solid var(--accent); }
.site-header .spill__icon { position: relative; display: block; width: 24px; height: 24px; }
.site-header .spill__icon img, .site-header .spill__icon svg { display: block; width: 24px; height: 24px; }
.site-header .spill__input { flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0 0 0 20px; border: 0; background: transparent; color: #fff; font: 400 16px/1 "Mulish", sans-serif; outline: none; opacity: 0; appearance: none; }
.site-header .spill__input::placeholder { color: #ffffff80; }
.site-header .spill__input::-webkit-search-cancel-button { display: none; }
.site-header .spill__input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #262525 inset; -webkit-text-fill-color: #fff; caret-color: #fff; transition: background-color 5000s ease-in-out 0s; }
.site-header .spill__glow { position: absolute; inset: auto 0 0 0; z-index: 0; height: 3px; transform: scaleX(0); transform-origin: right; background: var(--accent); }