:root {
    --theme: #2ca6cb;
    --page: #dddddd;
    --section: #fafafa;
    --text: #817c7c;
    --heading: #333333;
    --footer: #1f1f1f;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--page); color: var(--text); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1.6; margin: 0; }
a { color: var(--theme); text-decoration: none; }

body > header, .topbar { background: var(--theme) url("../img/banner.jpg") center / cover; box-shadow: 2px 4px 5px rgba(0, 0, 0, .2); color: #fff; }
.header-bar, .topbar { align-items: center; display: flex; gap: 16px; justify-content: space-between; margin: 0 auto; padding: 22px 4%; width: auto; }
.site-name { font-size: 2rem; font-weight: 400; margin: 0; }
.site-name a, .blog-motto, .header-bar nav a, .topbar a { color: #fff; }
.blog-motto { font-size: .95rem; font-weight: 400; margin: 4px 0 0; }
.header-bar nav, .topbar-nav { display: flex; flex-wrap: wrap; gap: 14px; }

.site-shell { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) 260px; margin: 0 auto; max-width: 1080px; padding: 18px 16px 40px; width: 94%; }
.cover { display: none; }
.card-main { min-width: 0; padding: 0; }
.card-index { display: none; }
.card-row { display: block; }
.post { background: var(--section); margin-bottom: 2px; }
.post a { border-left: .5em solid #ccc; display: block; padding: 1em; }
.post a:hover { border-left-color: var(--theme); }
.post time { color: var(--text); font-size: .85rem; }
.post h1 { color: var(--theme); font-size: 1.35rem; font-weight: 500; margin: 4px 0 0; }

.site-sidebar { background: #fff; padding: 8px 16px 16px; }
.sidebar-section h2 { border-bottom: 1px solid #eee; color: var(--heading); font-size: .9rem; margin: 14px 0 8px; }
.sidebar-list, .sidebar-terms { list-style: none; margin: 0; padding: 0; }
.sidebar-list li, .sidebar-terms li { display: flex; gap: 8px; justify-content: space-between; padding: 4px 0; }
.sidebar-list time, .sidebar-terms span, .sidebar-empty { color: #aaa; font-size: .78rem; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-cloud a { background: #e7f6fb; padding: 2px 8px; }

.section-title, .article-header h1, .content-card h2 a, .archive-year a { color: var(--heading); }
.content-card { background: var(--section); margin-bottom: 12px; padding: 16px; }
.card-meta, .empty-state, .pagination span { color: var(--text); }
.pagination { display: flex; justify-content: space-between; margin-top: 12px; }
.page-link { background: #fff; padding: 6px 12px; }
.term-grid { display: grid; gap: 8px; }
.term-card { background: #fff; display: flex; justify-content: space-between; padding: 12px; }
.archive-year { background: #fff; margin-bottom: 12px; padding: 14px; }
.archive-year ul { list-style: none; margin: 8px 0 0; padding: 0; }
.archive-year li { display: flex; gap: 12px; padding: 5px 0; }
.article-content img { height: auto; max-width: 100%; }
.article-content pre, .article-content code { background: #eee; }
.article-content pre { overflow-x: auto; padding: 12px; }
.article-content blockquote { background: #f5f5f5; border-left: 4px solid var(--theme); margin-left: 0; padding: 8px 12px; }
.taxonomy-row { display: flex; flex-wrap: wrap; gap: 8px; }
.article-nav { display: flex; gap: 12px; justify-content: space-between; }
.article-nav a { display: flex; flex: 1; flex-direction: column; }
.article-nav-next { text-align: right; }
.site-footer { background: var(--footer); color: #ccc; padding: 18px 16px; }
.footer-inner { display: flex; gap: 12px; justify-content: space-between; margin: 0 auto; max-width: 1080px; }
.footer-years { display: flex; gap: 10px; }
.site-footer a { color: #fff; }

@media (max-width: 800px) {
    .site-shell, .header-bar, .footer-inner, .article-nav { display: block; }
    .header-bar nav { margin-top: 10px; }
}