/* Pixel Art Theme for micro.blog */
/* Dylan's Blog */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: url('/cursors/pointer.png'), auto;
}

a, button, .nav-sign, .post-tag, .archive-tag, .mode-toggle, .photo-item {
    cursor: url('/cursors/hand.png'), pointer;
}

body {
    font-family: "Spectral", Georgia, serif;
    min-height: 100vh;
    transition: background 0.3s ease;
    background: url("/background/3.png");
    background-repeat: repeat;
    image-rendering: pixelated;
}

/* Navigation */
.site-nav {
    max-width: 964px;
    margin: 0 auto;
    padding: 0 40px;
    margin-top: -20px;
    display: flex;
    justify-content: center;
    gap: 40px;
}

.nav-sign {
    display: block;
    transition: transform 0.15s ease;
}

.nav-sign:hover {
    transform: rotate(-4deg) translateY(-3px);
}

.nav-sign.active {
    transform: translateY(10px);
}

.nav-sign.active:hover {
    transform: rotate(-4deg) translateY(7px);
}

.nav-sign img {
    height: 88px;
    width: auto;
    image-rendering: pixelated;
}

/* Mode toggle */
.mode-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 24px;
    background: #4a3020;
    color: #f5e6d3;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-family: Georgia, serif;
    font-size: 14px;
    z-index: 1000;
    transition: background 0.3s ease;
}

.mode-toggle:hover {
    background: #6b4423;
}

/* Night mode - twilight overlay */
body.night::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(13, 27, 42, 0.55);
    pointer-events: none;
    z-index: 50;
}

/* Elements above the night overlay */
body.night .nav-sign,
body.night .post-sprite,
body.night .archive-sprite,
body.night .category-sprite-large,
body.night .diver {
    position: relative;
    z-index: 100;
}

/* Night mode content background - matches overlay-covered cream */
body.night .posts-container::before,
body.night .post-container::before,
body.night .page-container::before,
body.night .archive-container::before {
    background: #747878;
}

/* Night mode text adjustments for readability */
body.night .post-title,
body.night .post-title a,
body.night .page-title,
body.night .category-title,
body.night .archive-title,
body.night .year-header {
    color: #ffffff;
    position: relative;
    z-index: 60;
}

body.night .post-excerpt,
body.night .post-content,
body.night .page-content {
    color: #f0f0f0;
    position: relative;
    z-index: 60;
}

body.night .post-meta,
body.night .archive-date,
body.night .category-count {
    color: #d0d0d0;
    position: relative;
    z-index: 60;
}

body.night .post,
body.night .post-body,
body.night .archive-entry,
body.night .photo-grid,
body.night .photo-item img {
    position: relative;
    z-index: 60;
}

body.night .site-footer {
    color: #c0c0c0;
}

/* Header */
.site-header {
    max-width: 964px;
    margin: 0 auto;
    padding: 20px 20px 0;
}

.header-container {
    position: relative;
    width: 100%;
    z-index: 2;
}

.header-image {
    width: 100%;
    height: 300px;
    background-image: url("/headers/home.png");
    background-size: cover;
    background-position: center;
    image-rendering: pixelated;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.header-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("/headers/ornate frome.png");
    background-size: 100% 100%;
    image-rendering: pixelated;
    pointer-events: none;
    z-index: 5;
}

.site-title {
    position: absolute;
    bottom: 30px;
    left: 100px;
    font-family: "Uncial Antiqua", cursive;
    font-size: 42px;
    color: #f5e6d3;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    z-index: 1;
}

.site-title a {
    color: inherit;
    text-decoration: none;
}

/* Main content */
.main-content {
    max-width: 964px;
    margin: 0 auto;
    padding: 0;
}

/* Posts container - single grass border */
.posts-container,
.post-container,
.page-container {
    position: relative;
    background: transparent;
    image-rendering: pixelated;
    border: 64px solid transparent;
    border-image-source: url("/tiles/dylanblogtileset.png");
    border-image-slice: 64 96 64 96;
    border-image-width: 64px 96px 64px 96px;
    border-image-repeat: round;
    padding: 20px;
}

/* Cream background inside border - extends into border to fill transparent gap */
.posts-container::before,
.post-container::before,
.page-container::before {
    content: "";
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: #f1e9d2;
    z-index: -1;
}

/* Post list */
.posts {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Individual post in list */
.post {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 10px 0;
    border-bottom: 2px solid rgba(139, 90, 43, 0.2);
}

.post:last-child {
    border-bottom: none;
}

/* Post sprite - inline with content */
.post-sprite {
    width: 96px;
    height: 96px;
    overflow: hidden;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.post-sprite img {
    width: 192px;
    height: 192px;
    image-rendering: pixelated;
}

/* Post body */
.post-body {
    flex: 1;
}

.post-tag {
    display: inline-block;
    background: #8b5a2b;
    color: #f5e6d3;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.post-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    color: #f5e6d3;
}

.post-title {
    font-family: "MedievalSharp", cursive;
    font-size: 24px;
    color: #2d2d2d;
    margin-bottom: 8px;
}

.post-title a {
    color: inherit;
    text-decoration: none;
}

.post-title a:hover {
    color: #4a3020;
}

.post-meta {
    font-size: 14px;
    color: #888;
    margin-bottom: 15px;
}

.post-excerpt,
.post-content {
    color: #5a4030;
    line-height: 1.7;
}

.post-content {
    font-size: 18px;
    line-height: 1.8;
}

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

.post-content h2 {
    font-family: "MedievalSharp", cursive;
    font-size: 24px;
    color: #4a3020;
    margin: 2em 0 1em;
}

.post-content h3 {
    font-family: "MedievalSharp", cursive;
    font-size: 20px;
    color: #4a3020;
    margin: 1.5em 0 0.75em;
}

.post-content a {
    color: #8b5a2b;
    text-decoration: underline;
}

.post-content a:hover {
    color: #4a3020;
}

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

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

.post-content blockquote {
    border-left: 4px solid #8b5a2b;
    padding-left: 1.5em;
    margin: 1.5em 0;
    font-style: italic;
    color: #6a5040;
}

.post-content img {
    max-width: 100%;
    height: auto;
    margin: 1.5em 0;
}

.post-content code {
    background: rgba(139, 90, 43, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
}

.post-content pre {
    background: rgba(139, 90, 43, 0.1);
    padding: 1em;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1.5em 0;
}

.post-content pre code {
    background: none;
    padding: 0;
}

.post-link {
    display: inline-block;
    margin-top: 15px;
    color: #8b5a2b;
    text-decoration: none;
    font-weight: bold;
}

.post-link:hover {
    text-decoration: underline;
}

/* Single post header */
.post-header {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 2px solid rgba(139, 90, 43, 0.2);
}

.post-header .post-sprite {
    width: 96px;
    height: 96px;
    /* Scale container to 128px visual size while keeping 96px for animations */
    transform: scale(1.333);
    transform-origin: top left;
    margin-right: 32px;
    margin-bottom: 32px;
}

.post-header .post-sprite img {
    width: 192px;
    height: 192px;
}

.post-header-content {
    flex: 1;
}

.post-header .post-title {
    font-size: 32px;
    line-height: 1.2;
}

/* Page title (for about, contact, etc) */
.page-title {
    font-family: "MedievalSharp", cursive;
    font-size: 32px;
    color: #2d2d2d;
    margin-bottom: 20px;
    text-align: center;
}

.page-content {
    color: #5a4030;
    line-height: 1.8;
    font-size: 18px;
}

/* Photo grid */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    padding: 10px 0;
}

.photo-item {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border: 3px solid #8b5a2b;
    border-radius: 4px;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.photo-item:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: auto;
}

/* Sprite animations (96px size for list) */
.sprite-cat img {
    animation: anim-cat 2.4s steps(1) infinite;
}
.sprite-knight img {
    animation: anim-knight 3.1s steps(1) infinite;
}
.sprite-dragon img {
    animation: anim-dragon 1.8s steps(1) infinite;
}
.sprite-clown img {
    animation: anim-clown 1.6s steps(1) infinite;
}
.sprite-golem img {
    animation: anim-golem 1.6s steps(1) infinite;
}
.sprite-bard img {
    animation: anim-bard 0.6s steps(1) infinite;
}
.sprite-adventure img {
    animation: anim-adventure 1.6s steps(1) infinite;
}
.sprite-quill img {
    animation: anim-quill 1.6s steps(1) infinite;
}
.sprite-imp img {
    animation: anim-imp 1.6s steps(1) infinite;
}
.sprite-book img {
    animation: anim-book 0.8s steps(1) infinite;
}
.sprite-clem img {
    animation: anim-clem 0.8s steps(1) infinite;
}
.sprite-muse img {
    animation: anim-muse 1.6s steps(1) infinite;
}
.sprite-skele img {
    animation: anim-skele 2s steps(1) infinite;
}
.sprite-balloon img {
    animation: anim-balloon 1.5s steps(1) infinite;
}
.sprite-donkey img {
    animation: anim-donkey 2.8s steps(1) infinite;
}
.sprite-cauldron img {
    animation: anim-cauldron 1.6s steps(1) infinite;
}
.sprite-banjo img {
    animation: anim-banjo 0.8s steps(1) infinite;
}
.sprite-wizard img {
    animation: anim-wizard 0.8s steps(1) infinite;
}

@keyframes anim-cat {
    0% {
        transform: translate(0, 0);
    }
    41.67% {
        transform: translate(-96px, 0);
    }
    50% {
        transform: translate(0, -96px);
    }
    91.67% {
        transform: translate(-96px, -96px);
    }
}
@keyframes anim-knight {
    0% {
        transform: translate(0, 0);
    }
    6.45% {
        transform: translate(-96px, 0);
    }
    38.71% {
        transform: translate(-96px, -96px);
    }
    54.84% {
        transform: translate(-96px, 0);
    }
    87.1% {
        transform: translate(-96px, -96px);
    }
    93.55% {
        transform: translate(0, -96px);
    }
}
@keyframes anim-dragon {
    0% {
        transform: translate(0, 0);
    }
    55.56% {
        transform: translate(-96px, 0);
    }
    66.67% {
        transform: translate(0, -96px);
    }
    88.89% {
        transform: translate(-96px, -96px);
    }
}
@keyframes anim-clown {
    0% {
        transform: translate(0, 0);
    }
    12.5% {
        transform: translate(-96px, 0);
    }
    25% {
        transform: translate(-96px, -96px);
    }
    87.5% {
        transform: translate(0, -96px);
    }
}
@keyframes anim-golem {
    0% {
        transform: translate(0, 0);
    }
    62.5% {
        transform: translate(-96px, 0);
    }
    75% {
        transform: translate(0, -96px);
    }
    87.5% {
        transform: translate(-96px, -96px);
    }
}
@keyframes anim-bard {
    0% {
        transform: translate(0, 0);
    }
    16.67% {
        transform: translate(-96px, 0);
    }
    50% {
        transform: translate(0, -96px);
    }
    66.67% {
        transform: translate(-96px, -96px);
    }
}
@keyframes anim-adventure {
    0% {
        transform: translate(0, 0);
    }
    62.5% {
        transform: translate(-96px, 0);
    }
    75% {
        transform: translate(0, -96px);
    }
    87.5% {
        transform: translate(-96px, -96px);
    }
}
@keyframes anim-quill {
    0% {
        transform: translate(0, 0);
    }
    12.5% {
        transform: translate(-96px, 0);
    }
    25% {
        transform: translate(0, -96px);
    }
    37.5% {
        transform: translate(-96px, -96px);
    }
}
@keyframes anim-imp {
    0% {
        transform: translate(0, 0);
    }
    62.5% {
        transform: translate(-96px, 0);
    }
    75% {
        transform: translate(0, -96px);
    }
    87.5% {
        transform: translate(-96px, -96px);
    }
}
@keyframes anim-book {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(-96px, 0);
    }
    50% {
        transform: translate(0, -96px);
    }
    75% {
        transform: translate(-96px, -96px);
    }
}
@keyframes anim-clem {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(-96px, 0);
    }
    50% {
        transform: translate(0, -96px);
    }
    75% {
        transform: translate(-96px, -96px);
    }
}
@keyframes anim-muse {
    0% {
        transform: translate(0, 0);
    }
    12.5% {
        transform: translate(-96px, 0);
    }
    25% {
        transform: translate(0, -96px);
    }
    37.5% {
        transform: translate(-96px, -96px);
    }
}
@keyframes anim-skele {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(-96px, 0);
    }
    62.5% {
        transform: translate(0, -96px);
    }
    87.5% {
        transform: translate(-96px, -96px);
    }
}
@keyframes anim-balloon {
    0% {
        transform: translate(0, 0);
    }
    33.33% {
        transform: translate(-96px, 0);
    }
    53.33% {
        transform: translate(0, -96px);
    }
    86.67% {
        transform: translate(-96px, -96px);
    }
}
@keyframes anim-donkey {
    0% {
        transform: translate(0, 0);
    }
    7.14% {
        transform: translate(-96px, 0);
    }
    42.86% {
        transform: translate(-96px, -96px);
    }
    57.14% {
        transform: translate(-96px, 0);
    }
    92.86% {
        transform: translate(-96px, -96px);
    }
}
@keyframes anim-cauldron {
    0% {
        transform: translate(0, 0);
    }
    62.5% {
        transform: translate(-96px, 0);
    }
    75% {
        transform: translate(0, -96px);
    }
    87.5% {
        transform: translate(-96px, -96px);
    }
}
@keyframes anim-banjo {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(-96px, 0);
    }
    50% {
        transform: translate(0, -96px);
    }
    75% {
        transform: translate(-96px, -96px);
    }
}
@keyframes anim-wizard {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(-96px, 0);
    }
    50% {
        transform: translate(0, -96px);
    }
    75% {
        transform: translate(-96px, -96px);
    }
}

/* Sprite-specific title glow and tag colors */
.sprite-skele ~ .post-body .post-title,
.category-health .post-title {
    text-shadow:
        0 0 8px #5de2a3,
        2px 2px 0 rgba(255, 255, 255, 0.3);
}
.sprite-skele ~ .post-body .post-tag,
.category-health .post-tag {
    background: #5de2a3;
    color: #1a3a2a;
}

.sprite-knight ~ .post-body .post-title,
.category-gaming .post-title {
    text-shadow:
        0 0 8px #40c8d8,
        2px 2px 0 rgba(255, 255, 255, 0.3);
}
.sprite-knight ~ .post-body .post-tag,
.category-gaming .post-tag {
    background: #40c8d8;
    color: #1a3a3a;
}

.sprite-dragon ~ .post-body .post-title,
.category-tabletop .post-title {
    text-shadow:
        0 0 8px #40c8d8,
        2px 2px 0 rgba(255, 255, 255, 0.3);
}

.sprite-dragon ~ .post-body .post-tag,
.category-tabletop .post-tag {
    background: #40c8d8;
    color: #1a3a3a;
}

.sprite-clown ~ .post-body .post-title,
.category-personal .post-title {
    text-shadow:
        0 0 8px #7050a0,
        2px 2px 0 rgba(255, 255, 255, 0.3);
}

.sprite-clown ~ .post-body .post-tag,
.category-personal .post-tag {
    background: #7050a0;
    color: #fff;
}

.sprite-golem ~ .post-body .post-title,
.category-tech .post-title {
    text-shadow:
        0 0 8px #6cd9e8,
        2px 2px 0 rgba(255, 255, 255, 0.3);
}
.sprite-golem ~ .post-body .post-tag,
.category-tech .post-tag {
    background: #6cd9e8;
    color: #1a3a3a;
}

.sprite-wizard ~ .post-body .post-tag,
.sprite-banjo ~ .post-body .post-title,
.category-music .post-title {
    text-shadow:
        0 0 8px #e8c546,
        2px 2px 0 rgba(255, 255, 255, 0.3);
}

.sprite-banjo ~ .post-body .post-tag,
.category-music .post-tag {
    background: #e8c546;
    color: #3a3020;
}
.sprite-adventure ~ .post-body .post-title,
.category-travel .post-title {
    text-shadow:
        0 0 8px #5a9e5a,
        2px 2px 0 rgba(255, 255, 255, 0.3);
}
.sprite-adventure ~ .post-body .post-tag,
.category-travel .post-tag {
    background: #5a9e5a;
    color: #fff;
}

.sprite-donkey ~ .post-body .post-title,
.category-adhd .post-title {
    text-shadow:
        0 0 8px #5a9e5a,
        2px 2px 0 rgba(255, 255, 255, 0.3);
}
.sprite-donkey ~ .post-body .post-tag,
.category-adhd .post-tag {
    background: #5a9e5a;
    color: #fff;
}

.sprite-quill ~ .post-body .post-title,
.category-writing .post-title {
    text-shadow:
        0 0 8px #c4a060,
        2px 2px 0 rgba(255, 255, 255, 0.3);
}

.sprite-quill ~ .post-body .post-tag,
.category-writing .post-tag {
    background: #c4a060;
    color: #2a2010;
}

.sprite-muse ~ .post-body .post-title,
.category-crafting .post-title {
    text-shadow:
        0 0 8px #c4a060,
        2px 2px 0 rgba(255, 255, 255, 0.3);
}

.sprite-muse ~ .post-body .post-tag,
.category-crafting .post-tag {
    background: #c4a060;
    color: #2a2010;
}
.sprite-cauldron ~ .post-body .post-title,
.category-cooking .post-title {
    text-shadow:
        0 0 8px #e07040,
        2px 2px 0 rgba(255, 255, 255, 0.3);
}

.sprite-cauldron ~ .post-body .post-tag,
.category-cooking .post-tag {
    background: #e07040;
    color: #fff;
}

.sprite-book ~ .post-body .post-title,
.category-reading .post-title {
    text-shadow:
        0 0 8px #8060c0,
        2px 2px 0 rgba(255, 255, 255, 0.3);
}
.sprite-book ~ .post-body .post-tag,
.category-reading .post-tag {
    background: #8060c0;
    color: #fff;
}

.sprite-cat ~ .post-body .post-title,
.category-pets .post-title {
    text-shadow:
        0 0 8px #e0a080,
        2px 2px 0 rgba(255, 255, 255, 0.3);
}
.sprite-cat ~ .post-body .post-tag,
.category-pets .post-tag {
    background: #e0a080;
    color: #3a2010;
}

/* Single post navigation arrows */
.post-nav-arrows {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px 0 10px;
    margin-top: 10px;
    border-top: 2px solid rgba(139, 90, 43, 0.2);
}

.nav-arrow {
    width: 48px;
    height: 48px;
    background: #8b5a2b;
    color: #f5e6d3;
    border: 3px solid #5c3d2e;
    border-radius: 8px;
    font-size: 24px;
    font-weight: bold;
    cursor: url('/cursors/hand.png'), pointer;
    transition: transform 0.15s ease, background 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-arrow:hover:not(:disabled) {
    background: #a06830;
    transform: scale(1.1);
}

.nav-arrow:disabled {
    background: #ccc;
    border-color: #999;
    color: #888;
    cursor: url('/cursors/pointer.png'), auto;
    opacity: 0.5;
}

.post-counter {
    font-family: "MedievalSharp", cursive;
    font-size: 18px;
    color: #5c3d2e;
    min-width: 60px;
    text-align: center;
}

/* Footer */
.site-footer {
    max-width: 964px;
    margin: 40px auto;
    padding: 20px;
    text-align: center;
    color: #888;
    font-size: 14px;
}

/* Archive styles */
.archive-container {
    position: relative;
    background: transparent;
    image-rendering: pixelated;
    border: 64px solid transparent;
    border-image-source: url("/tiles/dylanblogtileset.png");
    border-image-slice: 64 96 64 96;
    border-image-width: 64px 96px 64px 96px;
    border-image-repeat: round;
    padding: 20px;
}

/* Cream background inside archive border */
.archive-container::before {
    content: "";
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: #f1e9d2;
    z-index: -1;
}

.year-section {
    margin-bottom: 40px;
}

.year-section:last-child {
    margin-bottom: 0;
}

.year-header {
    font-family: "MedievalSharp", cursive;
    font-size: 32px;
    color: #4a3020;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 3px solid #8b5a2b;
}

.archive-list {
    list-style: none;
}

.archive-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(139, 90, 43, 0.2);
    transition: background 0.2s;
}

.archive-entry:hover {
    background: rgba(139, 90, 43, 0.1);
    margin: 0 -10px;
    padding: 8px 10px;
}

.archive-entry:last-child {
    border-bottom: none;
}

.archive-sprite {
    width: 96px;
    height: 96px;
    overflow: hidden;
    image-rendering: pixelated;
    flex-shrink: 0;
    /* Scale container to 64px visual size while keeping 96px for animations */
    transform: scale(0.667);
    transform-origin: top left;
    margin-right: -32px;
    margin-bottom: -32px;
}

.archive-sprite img {
    width: 192px;
    height: 192px;
    image-rendering: pixelated;
}

.archive-date {
    font-size: 14px;
    color: #888;
    min-width: 60px;
}

.archive-title {
    flex: 1;
    font-family: "MedievalSharp", cursive;
    font-size: 18px;
    color: #2d2d2d;
    text-decoration: none;
}

.archive-title:hover {
    color: #4a3020;
}

.archive-tag {
    display: inline-block;
    background: #8b5a2b;
    color: #f5e6d3;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: transform 0.15s ease;
}

.archive-tag:hover {
    transform: translateY(-1px);
    color: #f5e6d3;
}

/* Category page */
.category-page {
    padding: 20px 0;
}

.category-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 2px solid rgba(139, 90, 43, 0.2);
}

.category-sprite-large {
    margin-bottom: 20px;
}

.category-sprite-large .post-sprite {
    width: 96px;
    height: 96px;
    transform: scale(1.5);
    transform-origin: center;
}

.category-title {
    font-family: "MedievalSharp", cursive;
    font-size: 36px;
    color: #5c3d2e;
    margin-bottom: 8px;
    text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.5);
}

.category-count {
    font-size: 14px;
    color: #8b5a2b;
    font-style: italic;
}

/* Walking Diver */
.diver-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 64px;
    pointer-events: none;
    z-index: 1000;
    overflow: visible;
}

.diver {
    position: absolute;
    width: 64px;
    height: 64px;
    image-rendering: pixelated;
    transition: none;
}

/* Responsive */
@media (max-width: 768px) {
    .site-nav {
        flex-wrap: wrap;
        gap: 10px;
    }

    .nav-sign img {
        height: 60px;
    }

    .header-image {
        height: 200px;
    }

    .site-title {
        font-size: 28px;
        left: 20px;
        bottom: 20px;
    }

    .posts-container,
    .post-container,
    .page-container,
    .archive-container,
    .category-page {
        border-width: 32px;
        border-image-width: 32px 48px 32px 48px;
    }

    .category-title {
        font-size: 28px;
    }

    .category-sprite-large .post-sprite {
        transform: scale(1.2);
    }

    .post {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .post-sprite {
        width: 64px;
        height: 64px;
    }

    .post-sprite img {
        width: 128px;
        height: 128px;
    }
}