.site-header{
  position:fixed;
  inset:0 0 auto;
  z-index:80;
  padding:24px 0;
  background:transparent;
  transition:none;
}
.site-header.scrolled{
  padding:24px 0;
  background:transparent;
  box-shadow:none;
}
.admin-bar .site-header{top:32px}

.header-inner{
  width:min(1480px,calc(100% - 56px));
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  color:#fff;
  min-width:210px;
  transition:color .3s var(--ease),filter .3s var(--ease);
}
.site-header.scrolled .brand{color:var(--ink)}
.brand-mark{width:48px;height:48px;flex:0 0 auto}
.brand-name{
  display:block;
  font-family:var(--font-en);
  font-size:20px;
  letter-spacing:.22em;
  line-height:1;
}
.brand-sub{
  display:block;
  font-size:8px;
  letter-spacing:.30em;
  margin-top:7px;
  opacity:.72;
}

/* Desktop floating navigation: translucent capsule with a little more breathing room. */
.nav-capsule{
  position:relative;
  padding:7px 13px;
  border-radius:999px;
  background:
    linear-gradient(180deg,rgba(65,60,55,.58),rgba(43,39,35,.52));
  -webkit-backdrop-filter:blur(20px) saturate(130%);
  backdrop-filter:blur(20px) saturate(130%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 12px 34px rgba(29,24,20,.13),
    0 2px 8px rgba(29,24,20,.08),
    inset 0 1px 0 rgba(255,255,255,.12);
  transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);
}
.nav-capsule::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.035);
}
.site-header.scrolled .nav-capsule{
  background:
    linear-gradient(180deg,rgba(59,54,49,.69),rgba(39,35,31,.62));
  border-color:rgba(255,255,255,.20);
  box-shadow:
    0 14px 40px rgba(29,24,20,.17),
    0 3px 10px rgba(29,24,20,.08),
    inset 0 1px 0 rgba(255,255,255,.12);
}
.nav{display:flex;align-items:center;gap:3px}
.nav a{
  position:relative;
  color:#fff;
  font-size:var(--text-sm);
  font-weight:400;
  letter-spacing:.12em;
  padding:14px 18px;
  border-radius:999px;
  white-space:nowrap;
  opacity:.96;
  transition:background .24s var(--ease),opacity .24s var(--ease),transform .24s var(--ease),box-shadow .24s var(--ease);
}
.nav a::after{
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  bottom:8px;
  height:1px;
  background:rgba(255,255,255,.88);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .28s var(--ease),opacity .28s var(--ease);
  opacity:.86;
}
.nav a:hover,
.nav a:focus-visible,
.nav a.active{
  background:rgba(255,255,255,.075);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);
  opacity:1;
  transform:translateY(-1px);
}
.nav a:hover::after,
.nav a:focus-visible::after,
.nav a.active::after{transform:scaleX(1)}
.nav a:focus-visible{outline:1px solid rgba(255,255,255,.5);outline-offset:2px}

.mobile-nav-shell{display:none}

@media(max-width:980px){
  .site-header,.site-header.scrolled{padding:16px 0}
  .admin-bar .site-header{top:32px}
  .header-inner{width:calc(100% - 30px)}
  .brand{min-width:auto}
  .nav-capsule-desktop{display:none}
  .mobile-nav-shell{display:block;position:relative}
  .mobile-nav-shell>summary{
    display:flex;
    width:46px;
    height:46px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.42);
    background:rgba(37,33,29,.46);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:4px;
    list-style:none;
    transition:border-color .3s var(--ease),background .3s var(--ease);
  }
  .site-header.scrolled .mobile-nav-shell>summary{
    border-color:rgba(37,34,30,.24);
    background:rgba(246,241,232,.86);
  }
  .mobile-nav-shell>summary::-webkit-details-marker{display:none}
  .menu-toggle span{width:17px;height:1px;background:#fff;transition:background .3s var(--ease)}
  .site-header.scrolled .menu-toggle span{background:var(--ink)}
  .nav-mobile{
    display:none;
    position:fixed;
    top:78px;
    left:15px;
    right:15px;
    flex-direction:column;
    align-items:stretch;
    border-radius:22px;
    padding:10px;
    background:rgba(43,39,35,.95);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    box-shadow:0 18px 50px rgba(0,0,0,.18);
  }
  .admin-bar .nav-mobile{top:110px}
  .mobile-nav-shell[open] .nav-mobile{display:flex}
  .nav-mobile a{padding:14px 18px;font-size:15px}
}

@media(max-width:782px){
  .admin-bar .site-header{top:46px}
  .admin-bar .nav-mobile{top:124px}
}

@media(max-width:640px){
  .brand-name{font-size:16px}
  .brand-sub{font-size:7px;letter-spacing:.24em}
  .brand-mark{width:38px;height:38px}
}