/* Sudohack v1.2 - minimal neon hacker look with sidebar */
/* palette */
:root{
  --bg:#0a0f0a;
  --grid:#0f1a0f;
  --neon:#00ff88;
  --neon-dim:#00cc77;
  --text:#d8ffd8;
  --muted:#7ad9a5;
}
*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; background:var(--bg); color:var(--text); font:16px/1.6 "Fira Code", Consolas, Menlo, monospace; }
.container{max-width:980px;margin:0 auto;padding:0 20px}
.site-header{ border-bottom:1px solid var(--grid); backdrop-filter: blur(3px); position:sticky; top:0; background:rgba(10,15,10,.7); }
.brand{ display:flex; align-items:center; gap:.5rem; padding:14px 0; font-weight:700; letter-spacing:.5px; }
.brand .prompt{color:var(--neon)} .brand a{color:var(--text); text-decoration:none} .brand .cursor{color:var(--neon); animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.nav{display:flex; gap:1rem; padding-bottom:12px}
.nav-link{color:var(--muted); text-decoration:none; border-bottom:1px dotted transparent}
.nav-link:hover{color:var(--neon); border-color:var(--neon)}
.nav-link.active{color:var(--neon); border-color:var(--neon)}
.content{padding:28px 0 60px}
.glitch{ position:relative; display:inline-block; color:var(--neon); text-shadow:0 0 10px var(--neon); }
.glitch::before,.glitch::after{ content:attr(data-text); position:absolute; left:0; top:0; width:100%; overflow:hidden; }
.glitch::before{left:2px; text-shadow:-2px 0 var(--neon-dim); clip-path:inset(0 0 60% 0); animation:gl1 2s infinite linear alternate-reverse}
.glitch::after{left:-2px; text-shadow:2px 0 var(--neon); clip-path:inset(40% 0 0 0); animation:gl2 2.2s infinite linear alternate-reverse}
@keyframes gl1{0%{clip-path:inset(0 0 70% 0)}50%{clip-path:inset(0 0 20% 0)}100%{clip-path:inset(0 0 50% 0)}} @keyframes gl2{0%{clip-path:inset(60% 0 0 0)}50%{clip-path:inset(10% 0 0 0)}100%{clip-path:inset(45% 0 0 0)}}
.blog-list{display:grid; gap:16px; margin-top:8px}
.card{border:1px solid var(--grid); border-radius:10px; padding:18px; background: rgba(10,15,10,.55); box-shadow: 0 2px 16px rgba(0,0,0,.25);}
.card-title{margin:0 0 8px}
.card-title a{color:var(--text); text-decoration:none}
.card-title a:hover{color:var(--neon)}
.card-meta{color:var(--muted); margin:0 0 10px}
.card-excerpt{margin:0 0 12px; color: var(--text)}
/* --- Sidebar layout --- */
.layout{ display:grid; grid-template-columns:260px 1fr; gap:24px; }
.sidebar{ border:1px solid var(--grid); border-radius:10px; padding:14px; background:rgba(10,15,10,.55); }
.sidebar-title{ color:var(--neon); font-weight:700; margin-bottom:10px; text-shadow:0 0 8px var(--neon); }
.sidebar-nav{ display:flex; flex-direction:column; gap:8px; }
.sidebar-link{ color:var(--muted); text-decoration:none; border-left:2px solid transparent; padding-left:8px; }
.sidebar-link:hover{ color:var(--neon); border-color:var(--neon); }
.sidebar-link.active{ color:var(--neon); border-color:var(--neon); }
@media (max-width:900px){ .layout{ grid-template-columns:1fr; } .sidebar{ order:2; } }
.site-footer{border-top:1px solid var(--grid); color:var(--muted)} .site-footer .container{padding:20px}