/* ===== NAV: back + lang toggle ===== */
.back{position:fixed;top:0;left:0;z-index:100;display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.75);padding:8px 24px;width:100%;box-sizing:border-box}
.back a{color:#000;text-decoration:none;padding:2px 6px;font-size:14px}
.back a:hover{background:#000;color:#fff}

/* nav variant: top-left links (index page) */
.nav-top-left{
  position:fixed;top:20px;left:20px;z-index:100;
  font-size:14px;
}
.nav-top-left a{
  display:block;color:#000;text-decoration:none;
  padding:2px 6px;margin-bottom:8px;
}
.nav-top-left a:hover{background:#000;color:#fff}

/* nav variant: bottom-left works link (index page) */
.nav-bottom-left{
  position:fixed;bottom:20px;left:20px;z-index:100;
  font-size:14px;
  display:flex;flex-direction:column;gap:4px;
}
.nav-bottom-left a{
  display:block;color:#000;text-decoration:none;
  padding:2px 6px;
}
.nav-bottom-left a:hover{background:#000;color:#fff}
.nav-lowercase{position:relative;top:-1px}

/* nav variant: top-right name (index page) */
.nav-top-right{
  position:fixed;top:20px;right:20px;z-index:100;
  font-size:14px;letter-spacing:1px;cursor:pointer;
  text-align:right;
  padding:4px 6px 0;
}

/* nav variant: bottom-right lang toggle (index page) */
.nav-bottom-right{
  position:fixed;bottom:20px;right:20px;z-index:100;
  font-size:14px;
  text-align:right;
}
.nav-bottom-right a{
  color:#000;text-decoration:none;padding:2px 6px;
}
.nav-bottom-right a:hover{background:#000;color:#fff}

@media(max-width:768px){
  .back{gap:8px;padding:8px 12px;padding-top:max(8px, env(safe-area-inset-top))}

  .nav-top-left{
    top:max(10px, env(safe-area-inset-top));
    left:max(10px, env(safe-area-inset-left));
    font-size:12px;
    max-width:40vw;
  }
  .nav-top-left a{padding:4px 6px;margin-bottom:6px}

  .nav-top-right{
    top:max(10px, env(safe-area-inset-top));
    right:max(10px, env(safe-area-inset-right));
    font-size:12px;
    left:50vw;
    text-align:right;
    word-break:break-all;
    overflow-wrap:break-word;
  }

  .nav-bottom-left{
    bottom:max(10px, env(safe-area-inset-bottom));
    left:max(10px, env(safe-area-inset-left));
    font-size:12px;
  }
  .nav-bottom-left a{padding:4px 6px}
  .nav-lowercase{top:-1px}

  .nav-bottom-right{
    bottom:max(10px, env(safe-area-inset-bottom));
    right:max(10px, env(safe-area-inset-right));
    font-size:12px;
    left:50vw;
    text-align:right;
  }
  .nav-bottom-right a{padding:4px 6px}
}