/* Simple blog styles */
:root{
  --bg:#a9a9a9;
  --card:#d9d9d9;
  --accent:#842bb0;
  --muted:#6b7280;
}
html,body{
    height:100%;
    margin:0;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background:var(--bg);
    color:#111
}
.container{
    max-width:1100px;
    margin:0 auto;
    padding:0 16px
}
.top-nav{
    background:var(--card);
    box-shadow:0 1px 3px rgba(0,0,0,.06);
    position:sticky;
    top:0;z-index:10
}
.nav-inner{
    display:flex;
    align-items:center;
    gap:16px;
    padding:12px 0
}
.brand{
    font-weight:700;
    font-size:1.1rem;
    color: var(--accent);
}
.nav-links{
    margin-left:auto;
    display:flex;
    gap:12px
}
.nav-links a{
    color:var(--muted);
    text-decoration:none;
    padding:6px 8px;
    border-radius:6px
}
.nav-links a:hover{
    background:#f0f6ff;
    color:var(--accent)
}
.menu-toggle{
    display:none;
    background:transparent;
    border:0;
    font-size:1.2rem
}

.layout{display:grid;
    grid-template-columns:220px 1fr 280px;
    gap:24px;padding:28px 0;
    align-items:start
}
.left-col,.right-col{
    background:var(--card);
    padding:16px;
    border-radius:8px;
    box-shadow:0 1px 2px rgba(16,24,40,.03)
}
.content{
    background:transparent
}
.post{
    background:var(--card);
    padding:22px;
    border-radius:8px;
    box-shadow:0 1px 2px rgba(16,24,40,.03)
}
.post h1{
    margin-top:0
}
.meta{
    color:var(--muted);
    font-size:.9rem
}
.site-footer{padding:18px 0;color:var(--muted);font-size:.9rem;text-align:center}

/* Responsive: stack columns on small screens */
@media (max-width:900px){
    .layout{
        grid-template-columns:1fr;
        gap:16px
    }
    .nav-links{
        position:absolute;
        right:16px;
        top:60px;
        background:var(--card);
        box-shadow:0 6px 18px rgba(2,6,23,.08);
        flex-direction:column;
        padding:8px;
        border-radius:8px;
        display:none
    }
    .nav-links.open{
        display:flex
    }
    .menu-toggle{
        display:block;
        margin-left:8px
    }
}
/* small polish */
.left-col ul{
    list-style:none;
    padding-left:0;
    margin:0
}
.left-col li{
    margin:8px 0
}
.left-col a{
    color:var(--accent);
    text-decoration:none
}
a{
    color:var(--accent)
}