/* Keep the quick-navigation dock visible and proportioned for larger screens. */
@media(min-width:701px){
  .site{padding-bottom:104px}
  .bar{
    position:fixed;
    z-index:50;
    left:50%;
    bottom:18px;
    width:min(860px,calc(100% - 48px));
    height:72px;
    padding:8px 18px;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:center;
    border:1px solid color-mix(in srgb,var(--gold) 70%,#2b2b2b);
    border-radius:22px;
    background:linear-gradient(180deg,#171510f2,#050505f5 78%);
    box-shadow:0 18px 48px #000b,inset 0 1px 0 color-mix(in srgb,var(--gold) 35%,transparent);
    backdrop-filter:blur(18px);
    transform:translateX(-50%);
  }
  .bar>a{
    min-width:0;
    height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:#d9d4c9;
    font-size:12px;
    font-weight:750;
    white-space:nowrap;
    transition:color .2s,transform .2s;
  }
  .bar>a:hover{color:var(--gold);transform:translateY(-2px)}
  .bar>a>img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 4px 7px #000b)}
  .bar .home i{
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    border:2px solid color-mix(in srgb,var(--gold) 82%,#fff);
    border-radius:50%;
    background:radial-gradient(circle,color-mix(in srgb,var(--gold) 24%,#252018),#060606 72%);
    box-shadow:0 7px 18px #000c,0 0 18px color-mix(in srgb,var(--gold) 22%,transparent);
  }
  .bar .home i img{width:44px;height:44px;object-fit:contain}
  .bar .home>span{color:var(--gold)}
}

@media(min-width:701px) and (max-width:1024px){
  .site{padding-bottom:98px}
  .bar{bottom:14px;width:min(720px,calc(100% - 28px));height:76px;padding:7px 12px}
  .bar>a{flex-direction:column;gap:3px;font-size:10px}
  .bar>a>img{width:29px;height:29px}
  .bar .home i{width:45px;height:45px}
  .bar .home i img{width:39px;height:39px}
}