:root{
    --bg:#ffffff;
    --fg:#0b0b0b;
    --muted:#6a6a6a;
    --line:#d9d9d9;
    --hard:#111111;
    --max:1120px;
  }
  
  *{ box-sizing:border-box; }
  
  body{
    margin:0;
    font-family: Avenir, "Avenir Next", "Segoe UI", Arial, sans-serif;
    color:var(--fg);
    background:var(--bg);
  }
  
  a{ color:inherit; }
  
  /* Layout wrapper used by the nav */
  .wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }
  
  /* Navbar */
  .site-header{
    /* position:sticky; */
    top:0;
    /* z-index:10; */
    background:var(--bg);
    border-bottom:1px solid var(--line);
  }
  
  .navbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:18px 0;
  }
  
  .logo{
    text-decoration:none;
    display:flex;
    align-items:baseline;
    letter-spacing:-0.02em;
    border:2px solid transparent;
    padding:2px 0;
  }
  .logo span{
    font-weight:800;
    font-size:34px;
    line-height:1;
  }
  .logo:focus-visible{ outline:none; border-color:var(--hard); }
  
  .nav-right{ display:flex; align-items:center; gap:22px; }
  
  .nav-menu{
    list-style:none;
    display:flex;
    align-items:center;
    gap:18px;
    margin:0;
    padding:0;
    flex-wrap:wrap;
  }
  
  .nav-link{
    text-decoration:none;
    font-size:14px;
    letter-spacing:0.02em;
    padding:10px 2px;
    border-bottom:2px solid transparent;
  }
  .nav-link:hover, .nav-link:focus-visible{
    outline:none;
    border-bottom-color:var(--hard);
  }
  
  .nav-auth{
    display:flex;
    align-items:center;
    gap:10px;
    padding-left:18px;
    border-left:1px solid var(--line);
  }
  
  .auth-link{
    text-decoration:none;
    font-size:14px;
    padding:10px 10px;
    border:1px solid transparent;
  }
  .auth-link:hover, .auth-link:focus-visible{
    outline:none;
    border-color:var(--hard);
  }
  
  .auth-btn{
    text-decoration:none;
    font-size:14px;
    padding:10px 14px;
    border:1px solid var(--hard);
    background:var(--hard);
    color:var(--bg);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
  }
  .auth-btn:hover, .auth-btn:focus-visible{
    outline:none;
    background:var(--bg);
    color:var(--hard);
  }
  
  /* Responsive tweaks that affect the nav */
  @media (max-width: 980px){
    .nav-auth{ border-left:none; padding-left:0; }
    .nav-right{ width:100%; justify-content:space-between; }
    .navbar{ flex-wrap:wrap; }
  }