/* ===== minimal nav ===== */
:root{--navh:60px}

.site-header{position:sticky;top:0;padding:0;background:var(--header);border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:box-shadow .25s,background .4s}
.site-header.scrolled{box-shadow:0 8px 24px -16px var(--shadow)}
.nav{position:relative;display:flex;align-items:center;gap:12px;height:var(--navh);min-height:0;padding:0}

/* logo */
.logo{display:inline-flex;align-items:center;flex:none;font-family:var(--mono);font-weight:800;font-size:1.1rem;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.logo-mark{display:grid;place-items:center;width:30px;height:30px;margin-right:10px;border-radius:8px;background:var(--blue)}
.logo-mark svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.logo-mark .cur{animation:blink 1s steps(1) infinite}
.logo-text{color:var(--ink)}
.logo b{color:var(--accent)}

/* links */
.nav-links{display:flex;align-items:center;gap:2px;margin:0 0 0 auto;padding:0;list-style:none}
.nav-links a:not(.btn){position:relative;display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:8px;
  font:500 .85rem var(--mono);color:var(--muted);text-decoration:none;transition:color .2s,background .2s}
.nav-links a:not(.btn)::before{content:none}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;border-radius:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nav-links a:not(.btn):hover,.nav-links a:not(.btn).active{color:var(--ink)}
.nav-links a:not(.btn):hover::after,.nav-links a:not(.btn).active::after{transform:scaleX(1)}
.ni{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.nav-links a:not(.btn).active .ni{color:var(--accent)}

/* call to action: flat button */
.nav-links .btn-primary{display:inline-flex;align-items:center;gap:7px;margin-left:10px;padding:8px 14px;border-radius:8px;font-size:.82rem;color:#fff}
.nav-links .btn-primary .ni{transition:transform .2s}
.nav-links .btn-primary:hover .ni{transform:translate(2px,-2px)}

/* theme switch: icon only */
.nav-right{display:flex;align-items:center;gap:8px;margin-left:10px}
.tbtn{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink);transition:background .2s,border-color .2s}
.tbtn:hover{background:var(--soft);color:var(--ink);border-color:var(--accent)}
.tbtn:hover .tb-icon svg{animation:none}
.tb-icon{width:18px;height:18px}
.tb-icon svg{width:18px;height:18px;stroke-width:1.75}
#theme-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* menu button */
.nav-toggle{display:none;position:relative;width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:8px;background:transparent;cursor:pointer;transition:border-color .2s}
.nav-toggle:hover{border-color:var(--accent)}
.nav-toggle span{position:absolute;left:9px;right:9px;height:2px;border-radius:1px;background:var(--ink);transition:transform .25s,opacity .2s,top .25s}
.nav-toggle span:nth-child(1){top:11px}
.nav-toggle span:nth-child(2){top:16px}
.nav-toggle span:nth-child(3){top:21px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){top:16px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){top:16px;transform:rotate(-45deg)}

/* phones and small tablets: simple dropdown */
@media (max-width:900px){
  .nav-toggle{display:block}
  .nav-right{margin-left:auto}
  .nav-links{display:flex;position:absolute;top:calc(100% + 8px);left:0;right:0;margin:0;flex-direction:column;align-items:stretch;gap:2px;padding:8px;
    background:var(--panel-solid);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -20px var(--shadow);
    visibility:hidden;opacity:0;transform:translateY(-6px);pointer-events:none;
    transition:opacity .2s,transform .25s ease,visibility 0s .25s}
  .nav-links.open{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition-delay:0s}
  .nav-links a:not(.btn){display:flex;padding:12px 14px;font-size:.9rem}
  .nav-links a:not(.btn)::after{display:none}
  .nav-links a:not(.btn).active{background:var(--soft);color:var(--ink)}
  .nav-links .btn-primary{justify-content:center;margin:6px 0 0;padding:12px}
}
@media (prefers-reduced-motion:reduce){
  .nav-links{transition:none}
}