/* Floating navigation — shared by every page.
   A rounded glass bar that floats over the content. It slides away while you scroll down
   and slides back in as soon as you scroll up. */
:root{
  --nav-top:12px;
  --nav-h:60px;
  --nav-space:calc(var(--nav-top) + var(--nav-h) + 12px + env(safe-area-inset-top,0px));
}
html{scroll-padding-top:var(--nav-space)}

.site-header{
  position:fixed;left:0;right:0;top:calc(var(--nav-top) + env(safe-area-inset-top,0px));z-index:10000;
  padding-inline:clamp(12px,2.4vw,40px);pointer-events:none;line-height:1.6;
  font-family:'Inter Tight','Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased;
  transition:transform .45s cubic-bezier(.2,0,0,1),opacity .35s cubic-bezier(.2,0,0,1);
}
.site-header.is-hidden{
  transform:translateY(calc(-100% - var(--nav-top) - 24px - env(safe-area-inset-top,0px)));opacity:0;
}
.site-header .bar{
  pointer-events:auto;box-sizing:border-box;max-width:1360px;height:var(--nav-h);margin:0 auto;
  display:flex;align-items:center;gap:clamp(20px,3.4vw,56px);padding:0 8px 0 26px;
  border-radius:999px;color:#eeece7;
  background:rgba(24,24,27,.7);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 32px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);
  transition:background-color .35s ease,border-color .35s ease,box-shadow .35s ease,-webkit-backdrop-filter .35s ease,backdrop-filter .35s ease;
}

.site-header .brand{
  flex:none;color:#f4f2ee;transition:color .3s ease;text-decoration:none;text-transform:uppercase;
  font-family:inherit;font-weight:600;font-size:17px;letter-spacing:.01em;white-space:nowrap;
}

.site-header .site-nav{display:flex;align-items:center;gap:clamp(18px,3vw,44px);list-style:none;margin:0 auto 0 0;padding:0}
.site-header .site-nav a{
  position:relative;display:block;padding:6px 0;text-decoration:none;text-transform:uppercase;
  font-size:14.5px;font-weight:500;letter-spacing:.02em;color:rgba(238,236,231,.7);transition:color .2s;
}
.site-header .site-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;border-radius:2px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,0,0,1);
}
.site-header .site-nav a:hover,.site-header .site-nav a[aria-current]{color:#fff}
.site-header .site-nav a:hover::after,.site-header .site-nav a[aria-current]::after{transform:scaleX(1)}

.site-header .nav-mail{
  flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 16px 0 20px;
  border:0;border-radius:999px;background:#f4f2ee;color:#0b0b0c;cursor:pointer;
  font:600 15px/1 'Inter Tight','Helvetica Neue',Arial,sans-serif;letter-spacing:-.005em;white-space:nowrap;
  transition:background-color .2s,transform .2s;
}
.site-header .nav-mail:hover{background:#fff}
.site-header .nav-mail:active{transform:scale(.97)}
.site-header .nav-mail svg{width:16px;height:16px;flex:none}
.site-header a:focus-visible,.site-header button:focus-visible{outline:2px solid #3fa2ff;outline-offset:4px;border-radius:999px}

.nav-mail{box-shadow:0 0 0 0 rgba(0,0,0,0)}

/* At the very top of the page: no bar, just the items (like a page header).
   Over a light container the text turns dark. */
.site-header.at-top .bar{background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.site-header.at-top.on-light .brand{color:#0b0b0c}
.site-header.at-top.on-light .site-nav a{color:#3a414b}
.site-header.at-top.on-light .site-nav a:hover,.site-header.at-top.on-light .site-nav a[aria-current]{color:#0b0b0c}
.site-header.at-top.on-light .nav-mail{background:#fff;box-shadow:0 1px 2px rgba(11,11,12,.06),0 6px 18px -10px rgba(11,11,12,.25)}

@media (max-width:860px){
  .site-header .site-nav{display:none}
  .site-header .bar{padding-left:20px}
}
@media (max-width:420px){
  :root{--nav-h:54px}
  .site-header .brand{font-size:15px}
  .site-header .nav-mail{height:40px;padding:0 14px;font-size:13px;gap:8px}
}
@media (max-width:350px){.site-header .nav-mail .txt{display:none}}

.nav-toast{
  position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:10001;
  transform:translate(-50%,16px);opacity:0;pointer-events:none;
  background:#f4f2ee;color:#0b0b0c;font:600 14px/1 'Inter Tight','Helvetica Neue',Arial,sans-serif;
  padding:12px 18px;border-radius:999px;box-shadow:0 10px 30px -10px rgba(0,0,0,.6);
  transition:opacity .25s,transform .35s cubic-bezier(.2,0,0,1);
}
.nav-toast.show{opacity:1;transform:translate(-50%,0)}

/* Back to top */
.to-top{
  position:fixed;right:calc(clamp(16px,2.4vw,40px) + env(safe-area-inset-right,0px));bottom:calc(clamp(16px,2.4vw,32px) + env(safe-area-inset-bottom,0px));z-index:9997;
  width:52px;height:52px;border-radius:999px;display:grid;place-items:center;cursor:pointer;padding:0;
  color:#eeece7;background:rgba(24,24,27,.7);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 30px -14px rgba(0,0,0,.7);
  opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;
  transition:opacity .25s linear,transform .4s cubic-bezier(.2,0,0,1),background-color .2s,color .2s;
}
.to-top svg{width:20px;height:20px}
.to-top.on{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:#f4f2ee;color:#0b0b0c}
.to-top:active{transform:scale(.94)}
.to-top:focus-visible{outline:2px solid #3fa2ff;outline-offset:3px}
@media (max-width:420px){.to-top{width:46px;height:46px}}

@media (prefers-reduced-motion:reduce){.site-header,.site-header .site-nav a::after,.to-top{transition:none}}