:root{
  --bg:#0d0f14; --text:#e9edf5; --muted:#a6afc3; --card:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.12); --accent:#8b95f7;
  --headerH:120px; --navH:56px;                 /* JS updates */
  --pageW:1100px; --gpad:1.2rem;
}

/* Global */
html,body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,Segoe UI,Roboto,sans-serif; height:100%;
  overflow-x:hidden;                             /* kill horizontal scroll */
}
*{box-sizing:border-box}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
#ai-bg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.9}

/* Center bands */
.profile-header, .nav, .view, .site-footer {
  padding-left:calc((100vw - var(--pageW))/2 + var(--gpad));
  padding-right:calc((100vw - var(--pageW))/2 + var(--gpad));
  max-width:100%; box-sizing:border-box;
}

/* Sticky header */
.profile-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:1rem;
  padding:.6rem var(--gpad);
  background:rgba(0,0,0,.7); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.profile-avatar{width:92px;height:92px;border-radius:50%;object-fit:cover;border:2px solid var(--border)}
.profile-info h1{margin:0;font-size:1.7rem;font-weight:800}
.profile-info p{margin:.2rem 0;color:var(--muted);font-size:1rem}
.socials a{margin-right:.45rem}

/* Sticky nav - wrap and HIDE horizontal scrollbar (single-line change) */
.nav{
  position:sticky; top:var(--headerH); z-index:9;
  display:flex; flex-wrap:wrap; gap:.45rem;
  padding:.45rem var(--gpad);
  background:rgba(0,0,0,.6); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
  overflow-x:hidden;             /* <- added: remove the tiny horizontal bar */
}
.nav-link{padding:.55rem 1rem;border-radius:10px;color:var(--muted)}
.nav-link.active{background:var(--accent);color:#fff}

/* Views */
.view{
  position:relative; z-index:1;
  min-height:calc(100vh - var(--headerH) - var(--navH));
  padding:8px var(--gpad) 12px;   /* small gap under the menu */
  display:none; opacity:0; transition:opacity .2s ease;
}
.view.show{display:block;opacity:1}

/* Home */
.intro-box{
  max-width:980px; margin:0 auto 10px; text-align:center;
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:1.1rem 1.3rem; box-shadow:0 10px 30px rgba(0,0,0,.18)
}
.pill{display:inline-block;padding:.65rem 1.05rem;background:var(--accent);color:#fff;border-radius:999px}

/* Section internals */
h2{
  margin:0 0 12px; font-size:1.7rem;
  scroll-margin-top:calc(var(--headerH) + var(--navH) + 10px); /* ensure visibility under sticky bars */
}
.section-body{
  max-width:var(--pageW); margin:0 auto;
  max-height:calc(100vh - var(--headerH) - var(--navH) - 80px); /* breathing room */
  overflow:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain; /* don't propagate prematurely */
}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:1rem; margin:0 0 .9rem 0; transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.25)}
.card h3{margin:0 0 .35rem}
.card .muted{color:var(--muted)}
.links a{margin-right:.5rem}

.pager{display:flex;justify-content:space-between;gap:1rem;margin-top:.7rem}
.ghost{background:transparent;border:1px solid var(--border);color:var(--text);padding:.55rem .9rem;border-radius:10px}

/* Footer */
.site-footer{ text-align:center;color:var(--muted);padding:.8rem var(--gpad);border-top:1px solid var(--border) }

@media (min-width: 769px){
  .nav{
    overflow-x: clip !important;
    overflow-y: visible !important;
    max-width: 100vw;
    box-sizing: border-box;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar{ display: none; }
}