/* ---- Reset & base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: #fff;
    color: #1a1a1a;
    line-height: 1.7;
}
a { color: #7b2ff2; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Layout ---- */
.wrapper { max-width: 1024px; margin: 0 auto; }

/* ---- Banner ---- */
.banner {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.banner img {
    width: 100%;
    height: auto;
    display: block;
}
.banner-title {
    position: absolute;
    bottom: 1.2rem;
    right: 1.5rem;
    color: #fff;
    font-weight: 800;
    font-size: 1.5rem;
    text-shadow: 0 2px 12px rgba(0,0,0,.6);
    letter-spacing: .02em;
}

/* ---- Nav ---- */
nav {
    display: flex;
    gap: 2rem;
    padding: 1rem 1rem;
    flex-wrap: wrap;
    justify-content: center;
}
nav a {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .25rem 0;
    border-bottom: 2px solid transparent;
    transition: border-color .2s;
}
nav a:hover, nav a.active {
    border-color: #7b2ff2;
    text-decoration: none;
}

/* ---- Posts ---- */
.posts { padding: 1rem 1rem 2rem; }
.post { margin-bottom: 3rem; }
.post-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: .15rem;
}
.post-title a {
    color: inherit;
    text-decoration: none;
}
.post-title a:hover {
    text-decoration: underline;
}
.post-date {
    font-size: .85rem;
    color: #999;
    letter-spacing: .03em;
    margin-bottom: .8rem;
    margin-left: .8rem;
}
.post-intro {
    font-size: 1.05rem;
    color: #444;
    line-height: 1.6;
    margin-bottom: 1.2rem;
    font-style: italic;
}
.post-body p {
    text-align: justify;
    margin-bottom: .9rem;
}
.post-body h2 { font-size: 1.3rem; margin: 1.6rem 0 .5rem; }
.post-body h3 { font-size: 1.15rem; margin: 1.4rem 0 .4rem; }
.post-body h4 { font-size: 1.05rem; margin: 1.2rem 0 .3rem; }
.post-body blockquote {
    border-left: 3px solid #c084fc;
    padding: .6rem 1rem;
    margin: 1rem 0;
    color: #444;
    background: #faf5ff;
    border-radius: 0 6px 6px 0;
}
.post-body ul { padding-left: 1.5rem; margin-bottom: .9rem; }
.post-body li { margin-bottom: .3rem; }
.post-body code {
    background: #f3f0ff;
    padding: .15em .35em;
    border-radius: 3px;
    font-size: .92em;
}
.post-body pre {
    background: #1e1e2e;
    color: #cdd6f4;
    padding: 1rem;
    border-radius: 6px;
    overflow-x: auto;
    margin-bottom: 1rem;
}
.post-body pre code {
    background: none;
    padding: 0;
    color: inherit;
}
.post-body a { word-break: break-all; }
.read-more {
    text-align: center;
    margin-top: -.4rem;
}
.read-more a {
    font-weight: 700;
    letter-spacing: .05em;
}

/* ---- Pagination ---- */
.pagination {
    display: flex;
    justify-content: flex-end;
    padding: 0 1rem 2rem;
}
.pagination a {
    font-weight: 600;
}

/* ---- Footer ---- */
footer {
    text-align: center;
    padding: 2rem 1rem 1.5rem;
    font-size: .8rem;
    color: #999;
}

/* ---- About page ---- */
.about { padding: 2rem 1rem; }
.about p { text-align: justify; margin-bottom: .9rem; }
.about ul { padding-left: 1.5rem; margin-bottom: .9rem; }
.about li { margin-bottom: .3rem; }

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .banner-title { font-size: 1rem; bottom: .6rem; right: .8rem; }
    nav { gap: 1rem; padding: .75rem .75rem; }
    nav a { font-size: .95rem; }
    .posts, .about { padding: .75rem .75rem 2rem; }
    .post-title { font-size: 1.2rem; }
}