/* ===== Navigation ===== */
.site-nav{
  position: sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding-right:10px; height:60px;
  background:rgba(255,255,255,.65);
  backdrop-filter:saturate(160%) blur(10px);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}

.site-nav .brand {
  font-family: 'Pacifico', cursive;
  font-size: 2rem;
  color: #fff;
  text-shadow: 0 0 5px rgba(0,0,0);
  text-decoration: none;
  margin-left: 15px;
  
  height: 65px;

  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;  
}

.site-nav.show-brand .brand { opacity: 1; pointer-events: auto; }

.site-nav .links{
  display:flex; gap:18px; list-style:none; margin:0; padding:0;
}
.site-nav .links a{
  display:block; padding:10px 12px; border-radius:12px; font-weight:700;
  color:#333; background:transparent; transition:.2s ease; text-decoration:none;
}
.site-nav .links a:hover{ background:rgba(255,255,255,.8); }
.site-nav .links a.active{ background:#ff4d6d; color:#fff; box-shadow:0 8px 16px rgba(255,77,109,.28); }

/* Burger */
.burger{
  display:none; position:relative; width:40px; height:40px; border:none; border-radius:12px; cursor:pointer;
  background:rgba(255,255,255,.9); box-shadow:0 6px 14px rgba(0,0,0,.12);
}
.burger span{
  position:absolute; left:10px; right:10px; height:3px; background:#333; border-radius:2px; transition:.2s ease;
}
.burger span:nth-child(1){ top:12px }
.burger span:nth-child(2){ top:20px }
.burger span:nth-child(3){ top:28px }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg) }

/* Mobile */
@media (max-width: 840px){
  .burger{ display:block; }
  :root{ --nav-h: 60px; }

  .site-nav .links{
    position: fixed; inset: var(--nav-h) 0 auto 0;
    display:flex; flex-direction:column; gap:0;
    background:rgba(255,255,255,.95); max-height:0; overflow:hidden;
    transition:max-height .25s ease;
    box-shadow:0 12px 24px rgba(0,0,0,.18);
  }
  .site-nav .links li + li{ border-top:1px solid rgba(0,0,0,.06) }
  .site-nav .links a{ padding:16px 18px; border-radius:0 }
  .site-nav.open .links{ max-height:60vh; }
}