.bar, .base { --sh-ink: #efe9e1; --sh-soft: #a39b90; --sh-faint: #6b655e; --sh-rule: #232224; --sh-accent: #ff8f5c; position: relative; z-index: 2; font-family: var(--font-text); }
.bar-in, .base-in { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; }
.bar-in { height: 92px; }
.bar .lock, .base .lock { display: inline-flex; align-items: center; gap: 1px; color: var(--sh-ink); text-decoration: none; }
.bar .lock span { font: 700 23px/1 var(--font-display); letter-spacing: .02em; }
.base .lock span { font: 700 19px/1 var(--font-display); letter-spacing: .02em; }
.base nav a { position: relative; color: var(--sh-soft); text-decoration: none; transition: color .2s; }
.base nav a:hover, .base nav a[aria-current] { color: var(--sh-ink); }

.bar { position: sticky; top: 0; z-index: 30; transition: background .4s, border-color .4s, backdrop-filter .4s, margin-bottom .45s cubic-bezier(.16, 1, .3, 1); border-bottom: 1px solid transparent; }
.bar-in { transition: height .45s cubic-bezier(.16, 1, .3, 1); }
.bar.stuck { background: rgba(14, 14, 15, .72); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border-bottom-color: var(--sh-rule); }

.bar.stuck .bar-in { height: 66px; }
.bar.stuck { margin-bottom: 26px; }
.bar .lock img { transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.bar .lock:hover img { transform: rotate(-200deg); }
.bar nav { position: relative; display: flex; align-items: center; gap: 2px; padding: 5px; font-size: 15px; border: 1px solid #2c2a28; border-radius: 999px; background: rgba(22, 22, 23, .6); }
.bar nav a { position: relative; z-index: 1; padding: 9px 17px; border-radius: 999px; color: #cdc5ba; font-weight: 500; text-decoration: none; transition: color .25s; }
.bar nav a:hover, .bar nav a[aria-current] { color: #fff; }
.bar nav a:focus-visible { outline: 1.5px solid var(--sh-accent); outline-offset: 2px; }
.nav-pill { position: absolute; left: 0; top: 5px; bottom: 5px; width: 0; border-radius: 999px; background: rgba(255, 255, 255, .075); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); opacity: 0;
  transition: transform .5s cubic-bezier(.3, 1.3, .4, 1), width .5s cubic-bezier(.3, 1.3, .4, 1), opacity .3s; pointer-events: none; }
.nav-pill::after { content: ''; position: absolute; left: 50%; bottom: 4px; width: 14px; height: 1.5px; margin-left: -7px; border-radius: 1px; background: var(--sh-accent); transform: scaleX(0); transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.nav-pill.here::after { transform: none; }

html:not(.shell-on) .bar nav a[aria-current] { background: rgba(255, 255, 255, .075); }

.bar-in { animation: bar-in .8s cubic-bezier(.16, 1, .3, 1) both; }
.bar nav a { animation: link-in .7s cubic-bezier(.16, 1, .3, 1) both; }
.bar nav a:nth-of-type(1) { animation-delay: .12s; } .bar nav a:nth-of-type(2) { animation-delay: .19s; }
.bar nav a:nth-of-type(3) { animation-delay: .26s; } .bar nav a:nth-of-type(4) { animation-delay: .33s; }
@keyframes bar-in { from { opacity: 0; transform: translateY(-14px); } }
@keyframes link-in { from { opacity: 0; transform: translateY(-6px); } }

.base { border-top: 1px solid var(--sh-rule); }
.base-in { gap: 24px; padding-top: 30px; padding-bottom: 30px; font-size: 14px; }
.base nav { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.base-copy { margin: 0; font: 500 11px/1 var(--font-label); letter-spacing: .14em; color: var(--sh-faint); }

@media (max-width: 860px) {
  .bar nav { gap: 0; padding: 4px; font-size: 13.5px; }
  .bar nav a { padding: 8px 11px; }
  .nav-pill { top: 4px; bottom: 4px; }
  .base-in { flex-direction: column; align-items: flex-start; gap: 18px; }
}
@media (max-width: 420px) { .bar nav .opt { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .bar-in, .bar nav a { animation: none; }
  .nav-pill, .bar-in, .bar .lock img { transition: none; }
}
.still .bar-in, .still .bar nav a { animation: none !important; }