/* The top bar and the button, shared by every page. Never add a variant for one page or position. */
:root{--a:#00D5BE;--deep:#0F4A44;--edge:clamp(20px,5vw,72px)}
html{scroll-padding-top:60px}

/* One top bar: it stays where it is, the page scrolls under it, and site.js adds the line once scrolled. */
.bar-top{position:sticky;top:0;z-index:10;background:var(--a);color:#000;border-bottom:1px solid transparent}
.bar-top.stuck{border-bottom-color:#000}
.nav{box-sizing:border-box;display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);max-width:1440px;height:60px;margin:0 auto;padding-inline:var(--edge);font-weight:600;font-size:17px}
.nav a{text-decoration:none}
.nav a:not(.go):hover{text-decoration:underline}
.nav .home{margin-right:clamp(8px,2vw,24px)}
.nav .logo{display:block;width:120px;height:auto}
.nav .go{margin-left:auto}
@media (max-width:820px){.nav a:not(.go):not(.home){display:none}}

/* Button: the two logo corners are cut off, --c is the corner size, and hover opens them further. */
@property --c{syntax:"<length>";inherits:true;initial-value:12px}
.go{position:relative;z-index:0;overflow:clip;display:inline-block;white-space:nowrap;font-weight:600;font-size:17px;line-height:20px;text-decoration:none;padding:13px 20px;background:var(--deep);color:#fff;--c:12px;transition:--c .18s;clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.go:hover{--c:20px}
/* A light runs around the edge: a spinning layer shows only in the 2px the face leaves free. Rotating needs no repaint. */
.go::before{content:"";position:absolute;z-index:-2;left:50%;top:50%;width:160%;aspect-ratio:1;translate:-50% -50%;background:conic-gradient(transparent 0 62%,var(--a) 88%,#fff 100%);animation:go-spin 3.5s linear infinite}
/* The face. --i is 1px smaller than --c, which keeps the edge 2px wide along the cut corners. */
.go::after{--i:calc(var(--c) - 1px);content:"";position:absolute;z-index:-1;inset:2px;background:var(--deep);clip-path:polygon(var(--i) 0,100% 0,100% calc(100% - var(--i)),calc(100% - var(--i)) 100%,0 100%,0 var(--i))}
@keyframes go-spin{to{rotate:360deg}}
@media (prefers-reduced-motion:reduce){.go::before{display:none}}
/* The clip path would cut off an outer focus ring, so the ring sits inside the button. */
.go:focus-visible{outline:2px solid #fff;outline-offset:-5px}