:root{
    --blue:#0935ff;
    --cyan:#00e1ff;
    --white:#fff;
    --muted:rgba(255,255,255,.72);
    --muted2:rgba(255,255,255,.55);
    --card:rgba(255,255,255,.06);
    --border:rgba(0,225,255,.35);
}

body{
    background:
        radial-gradient(1200px 500px at 50% -150px, rgba(0,225,255,.22), transparent 60%),
        linear-gradient(180deg, #050717 0%, #070a1a 100%);
    color:var(--white);
}

.page{
    width:min(1000px, 92vw);
    margin:0 auto;
    padding:1.5rem 0 4rem;
}

.blog-head{ text-align:center; }

.section-title{
    font-size:clamp(1.7rem, 3.6vw, 2.3rem);
    margin:0 0 .55rem;
}

.lead{
    color:var(--muted);
    line-height:1.7;
    margin:0 auto 1.8rem;
    max-width:70ch;
}

/* ── Search ── */
.search-wrap{
    max-width:32rem;
    margin:0 auto 1.8rem;
}

.search-input{
    width:100%;
    padding:.85rem 1.2rem;
    font-size:1rem;
    font-family:inherit;
    color:var(--white);
    background:rgba(255,255,255,.06);
    border:1px solid var(--border);
    border-radius:999px;
    outline:none;
    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

.search-input::placeholder{
    color:var(--muted2);
}

.search-input:focus{
    border-color:var(--cyan);
    background:rgba(0,225,255,.08);
    box-shadow:0 0 0 3px rgba(0,225,255,.18);
}

/* ── Posts Grid ── */
.posts{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:1rem;
}

.post{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:1.1rem;
    padding:1.1rem;
    box-shadow:0 18px 55px rgba(0,0,0,.25);
    position:relative;
    overflow:hidden;
}

.post-image{
    height:10.5rem;
    border-radius:.9rem;
    border:1px solid rgba(0,225,255,.35);
    background:
        radial-gradient(circle at 20% 30%, rgba(0,225,255,.35), transparent 55%),
        linear-gradient(135deg, rgba(9,53,255,.45), rgba(0,225,255,.12));
    margin-bottom:.9rem;
    overflow:hidden;

    display:flex;
    align-items:center;
    justify-content:center;
}

.post-image-img{
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:.95;
    transform:scale(1.01);
    transition: transform .35s ease, opacity .35s ease;
}

.readme-btn{
    position:absolute;
    left:50%;
    top:1.05rem;
    transform:translate(-50%, -110%) scale(.94);

    padding:.65rem 1rem;
    border-radius:999px;
    border:1px solid rgba(0,225,255,.5);
    background:rgba(0,225,255,.12);
    color:rgba(255,255,255,.96);

    text-decoration:none;
    font-weight:700;
    letter-spacing:.02em;

    opacity:0;
    pointer-events:none;
    transition:
        opacity .25s ease,
        transform .35s ease,
        background .25s ease,
        box-shadow .35s ease;
    z-index:2;
}

.post:hover .readme-btn,
.post:focus-within .readme-btn{
    opacity:1;
    pointer-events:auto;
    transform:translate(-50%, 0) scale(1);

    background:rgba(0, 149, 168, 0.89);
    box-shadow:0 14px 40px rgba(0,225,255,.12);
}

.post:hover .post-image-img,
.post:focus-within .post-image-img{
    transform:scale(1.06);
    opacity:0.5;
}

.post .readme-btn:focus-visible{
    opacity:1;
    pointer-events:auto;
    outline:none;
    box-shadow:0 0 0 3px rgba(0,225,255,.35);
}


.post-title{
    font-size:1.06rem;
    margin:.1rem 0 .55rem;
}

.post-desc{
    color:var(--muted);
    line-height:1.65;
    margin:0 0 .95rem;
}

.tags{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
}

.tag{
    font-size:.84rem;
    padding:.35rem .6rem;
    border-radius:999px;
    border:1px solid rgba(0,225,255,.32);
    background:rgba(0,225,255,.08);
    color:rgba(255,255,255,.88);
}

@media (max-width: 820px){
    .posts{ grid-template-columns:1fr; }
}