/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    line-height: 1.5;
    color: #222;
    background-color: #e5e5e5;
}

a {
    color: #58388c;
    text-decoration: none;
}

a:hover {
    color: #906ccf;
}

/* Header */
header {
    background: #5e5e5e;
    padding: 15px 0;
    border-bottom: 18px solid #a777ab;
}

header h1 {
    font-family: "Bitstream Charter", "Charter", Georgia, serif;
    font-size: 34px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

header h1 a {
    color: #c5e7fc;
}

header h1 a:hover {
    color: #fff;
}

.site-description {
    color: #ffdbff;
    font-style: italic;
    margin-top: 0;
    font-size: 17px;
}

/* Container */
.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}

.main {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-top: 10px;
}

/* Content area */
.content {
    flex: 1;
    min-width: 0;
}

/* A plain box for non-post content listings (archives, tags, categories) */
.content-box {
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}

/* Posts: each one is its own box, sitting on the page's gray background */
.post {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}

.post:last-child {
    margin-bottom: 0;
}

.post-title {
    font-family: "Bitstream Charter", "Charter", Georgia, serif;
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 5px;
    line-height: 1.3;
}

.post-title a {
    color: #222;
}

.post-meta {
    color: #999;
    font-size: 12px;
    margin-bottom: 10px;
    font-style: italic;
}

.post-content {
    margin-top: 10px;
}

.post-content p {
    margin-bottom: 1em;
}

.post-content em {
    font-style: italic;
}

.post-content strong {
    font-weight: bold;
}

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    font-family: "Bitstream Charter", "Charter", Georgia, serif;
    font-weight: bold;
    line-height: 1.3;
    margin: 1.2em 0 0.5em;
}

.post-content h1 { font-size: 24px; }
.post-content h2 { font-size: 20px; }
.post-content h3 { font-size: 17px; }
.post-content h4 { font-size: 15px; }
.post-content h5,
.post-content h6 { font-size: 14px; }

.post-content ul,
.post-content ol {
    margin: 0 0 1em 1.5em;
}

.post-content li {
    margin-bottom: 0.3em;
}

.post-content blockquote {
    margin: 0 0 1em 0;
    padding: 2px 1.2em;
    border-left: 4px solid #ddd;
    color: #555;
}

.post-content blockquote p:last-child {
    margin-bottom: 0;
}

.post-content hr {
    margin: 2em 0;
    border: none;
    border-top: 1px solid #ddd;
}

.post-content img {
    max-width: 100%;
    height: auto;
}

/* WordPress-style image alignment classes (may land on the <img> or its
   wrapping <a>, depending on how the source markup attaches them) */
.post-content .alignleft {
    float: left;
    margin: 0.3em 1.5em 1em 0;
}

.post-content .alignright {
    float: right;
    margin: 0.3em 0 1em 1.5em;
}

.post-content .aligncenter {
    display: block;
    margin: 0 auto 1em;
}

.post-content .alignnone {
    margin: 0 0 1em;
}

/* contain any trailing float so the post box doesn't collapse around it,
   without clearfixing individual paragraphs (which would stop text from
   wrapping alongside an aligned image the way it's supposed to) */
.post-content::after {
    content: "";
    display: table;
    clear: both;
}

.post-content table {
    border-collapse: collapse;
    margin-bottom: 1em;
    width: 100%;
}

.post-content th,
.post-content td {
    border: 1px solid #ddd;
    padding: 6px 10px;
    text-align: left;
}

.post-content pre {
    overflow-x: auto;
    padding: 10px;
    margin-bottom: 1em;
    background: #f7f7f7;
}

/* MathJax v2's linebreak_automatic is off (perf tradeoff upstream), so long
   display-math expressions need a scroll fallback instead of breaking layout. */
.post-content div.math,
.post-content .MathJax_Display,
.post-content .MathJax {
    overflow-x: auto;
    overflow-y: hidden;
}

.post-content code {
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
}

/* Sidebar */
.sidebar {
    width: 220px;
    flex-shrink: 0;
    font-size: 13px;
    background-color: #fff;
    padding: 15px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}

.widget {
    margin-bottom: 25px;
}

.widget h3 {
    background: linear-gradient(#8b8e96, #66686e);
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.3px;
    text-shadow: 0 -1px 0 #555;
    margin: 0 -15px 10px -15px;
    padding: 8px 15px;
    border-radius: 4px;
}

.sidebar .widget:first-child h3 {
    margin-top: -15px;
    border-radius: 4px 4px 0 0;
}

.widget ul {
    list-style: none;
}

.widget ul ul {
    margin-left: 10px;
    margin-top: 3px;
    margin-bottom: 5px;
}

.widget li {
    margin-bottom: 3px;
    padding-bottom: 3px;
    line-height: 1.4;
    border-bottom: 1px solid #eee;
}

.widget li:last-child {
    border-bottom: none;
}

.widget li strong {
    font-weight: bold;
    color: #222;
}

.widget a {
    color: #58388c;
    font-size: 12px;
    font-weight: bold;
}

.tagcloud {
    line-height: 1.15;
}

.tagcloud a {
    display: inline-block;
    font-weight: normal;
    margin: 0 3px 0 0;
}

.widget-more {
    margin-top: 8px;
    font-size: 12px;
}

.feed-links {
    display: flex;
    gap: 12px;
}

.feed-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.feed-link svg {
    flex-shrink: 0;
}

.archive-title {
    font-family: "Bitstream Charter", "Charter", Georgia, serif;
    font-size: 22px;
    margin-bottom: 15px;
}

.archive-year {
    font-size: 18px;
    margin: 20px 0 8px;
    border-bottom: 1px solid #ddd;
}

.archive-list {
    list-style: none;
    margin-bottom: 10px;
}

.archive-list li {
    padding: 3px 0;
}

.archive-list time {
    color: #999;
    font-size: 12px;
}

/* Pagination */
.pagination {
    margin-top: 10px;
    padding: 15px 20px;
    background-color: #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,0.25);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.pagination .page-count {
    color: #999;
    margin-right: 10px;
}

.pagination a {
    padding: 2px 4px;
}

.pagination .current {
    font-weight: bold;
    color: #222;
    padding: 2px 4px;
}

/* Footer */
footer {
    margin-top: 40px;
    padding: 15px 0;
    border-top: 1px solid #ddd;
    text-align: center;
    color: #666;
    font-size: 12px;
}

footer p {
    margin-bottom: 0;
}

footer a {
    color: #666;
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .main {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
    }
}