:root{
  --paper: #ffffff;
  --ink: #0f172a;
  --muted: rgba(15,23,42,.65);
  --accent: #0ea5e9;
  --side: #f1f5f9;
}

body{background:linear-gradient(180deg, rgba(14,165,233,.08), transparent 55%), var(--paper); color:var(--ink);}
.wrap{max-width: 1100px; margin: 0 auto; padding: 1rem;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

.top{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.88); backdrop-filter: blur(10px); border-bottom:1px solid rgba(0,0,0,.06);}
.top__row{display:flex; gap:.75rem; align-items:center;}
#logo a{font-weight:900; color:var(--accent); text-decoration:none;}
.tagline{color:var(--muted); margin-left:auto; max-width: 52ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.layout{display:grid; grid-template-columns: 300px minmax(0,1fr); min-height: calc(100vh - 64px);}
.nav{background:var(--side); border-right:1px solid rgba(0,0,0,.06);}
.nav__inner{padding:1rem; position:sticky; top:84px;}
.nav__title{font-weight:800; margin-bottom:.5rem;}
.nav ul{list-style:none; padding:0; margin:0; display:grid; gap:.35rem;}
.nav a{display:block; padding:.55rem .7rem; border-radius:12px; text-decoration:none; color:var(--ink); background:rgba(255,255,255,.7); border:1px solid rgba(0,0,0,.06);}
.nav a[aria-current="page"]{border-color: rgba(14,165,233,.35); background:rgba(14,165,233,.10);}
.nav__hint{margin-top:.75rem; color:var(--muted); font-size:.9rem;}

.main{padding:1rem; min-width:0;}
.feature__card{background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:18px; padding:1.25rem;}
.kicker{font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(15,23,42,.55);}
.reader{margin-top:1rem; background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:18px; padding:1.25rem;}

@media (max-width: 980px){
  .layout{grid-template-columns: 1fr;}
  .nav{position:fixed; top:64px; bottom:0; left:0; width:min(86vw, 340px); transform:translateX(-110%); transition: transform .2s ease; z-index:50;}
  .layout.nav-open .nav{transform:translateX(0);}
}

#footer{background:#fff; border-top:1px solid rgba(0,0,0,.06);}
#footer .container{max-width:1100px; margin:0 auto; padding:1.2rem;}