#skip {   background: var(--orange);
    background: var(--search-blue); font-size: 21px; line-height: 1.2; padding: var(--unit) 0;

    transform: translate(-100%);
    position: absolute; top: 0; left: 0; width: 100%;

}
#skip:focus-within {
    transform: translate(0);
    position: static;
}


#skip>.wrapper  { display: flex;  }
#skip>.wrapper>a {position: relative; margin-right:var(--gutter); color: rgba(0,0,0,0.87); color: white; }


#skip>.wrapper>a::before {
    content: '';
    background-color: currentColor;
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    z-index: -1;
    transition: all .2s ease-in-out;
}

#skip>.wrapper>a:is(:hover,:focus-visible) {
    color: black;
}
#skip>.wrapper>a:hover::before {
    background-color: rgba(255,255,255,1);
    bottom: 0;
    height: calc(100% - 1px);
}
#skip>.wrapper>a:focus-visible { box-shadow: 0 0 0 2px var(--search-blue), 0 0 0 4px white;
    border-radius: 2px; background:white; }


@media all and (max-width: 899px) {
    #skip {  position: absolute;    font-size: 16px; }
    #skip:focus-within {
        position: fixed;
        z-index:999;
    }
}