/* Typography & Font Loading */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

/* CSS Variables for Clean Design */
:root {
    /* Typography Scale */
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 2rem;      /* 32px */
    --font-size-4xl: 2.5rem;    /* 40px */
    
    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.6;
    --line-height-loose: 1.8;
    
    /* Spacing Scale */
    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-2xl: 3rem;     /* 48px */
    --space-3xl: 4rem;     /* 64px */
    --space-4xl: 6rem;     /* 96px */
    
    /* Light Theme Colors */
    --color-text-primary: #1a1a1a;      /* Near black */
    --color-text-secondary: #666666;     /* Medium gray */
    --color-text-muted: #999999;        /* Light gray */
    --color-link: #000000;               /* Pure black */
    --color-link-hover: #333333;        /* Dark gray */
    
    --color-bg-primary: #ffffff;        /* Pure white */
    --color-bg-secondary: #f8f8f8;      /* Off white */
    --color-border: #e5e5e5;            /* Light border */
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;

    /* Override PaperMod code backgrounds (light mode) */
    --code-block-bg: #f6f8fa; /* GitHub light */
    --code-bg: #f6f8fa;
}

/* Dark Theme */
body.dark {
    /* Dark Theme Colors */
    --color-text-primary: #e5e5e5;      /* Light gray */
    --color-text-secondary: #b0b0b0;     /* Medium light gray */
    --color-text-muted: #888888;        /* Medium gray */
    --color-link: #ffffff;               /* Pure white */
    --color-link-hover: #cccccc;        /* Light gray */
    
    --color-bg-primary: #1a1a1a;        /* Near black */
    --color-bg-secondary: #2a2a2a;      /* Dark gray */
    --color-border: #3a3a3a;            /* Medium dark gray */

    /* Override PaperMod code backgrounds (dark mode) */
    --code-block-bg: #161b22; /* GitHub dark */
    --code-bg: #21262d;
}

/* Ensure code blocks text color tracks theme syntax color */
.post-content pre code {
    color: var(--chroma-text) !important;
}

/* Align PaperMod highlight wrapper to our variables */
.post-content .highlight:not(table),
.post-content .highlight pre {
    background: var(--code-block-bg) !important;
}

/* Base Reset */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Layout Container */
.layout-container {
    display: flex;
    min-height: 100vh;
}

/* Sidebar Styles */
.sidebar {
    width: 320px;
    min-width: 320px;
    padding: var(--space-4xl) var(--space-2xl);
    background: var(--color-bg-primary);
    border-right: 1px solid var(--color-border);
    position: fixed;
    height: 100vh;
    overflow-y: auto;
}

.sidebar-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Site Header in Sidebar */
.site-header {
    margin-bottom: var(--space-4xl);
}

.site-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    line-height: var(--line-height-tight);
}

.site-title-link {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-fast);
}

.site-title-link:hover {
    color: var(--color-text-secondary);
}

/* Navigation */
.sidebar-nav {
    flex-grow: 1;
}

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-item {
    margin-bottom: var(--space-lg);
}

.nav-link {
    display: block;
    font-size: var(--font-size-base);
    font-weight: 400;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
    line-height: var(--line-height-relaxed);
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-text-primary);
}

/* Sidebar Footer */
.sidebar-footer {
    margin-top: auto;
    padding-top: var(--space-2xl);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* RSS Link */
.rss-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border-radius: 6px;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.rss-link:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

.rss-link:focus {
    outline: none;
    background: var(--color-bg-secondary);
}

.rss-icon {
    width: 18px;
    height: 18px;
    transition: opacity var(--transition-fast);
}

/* Minimal Theme Toggle */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

.theme-toggle-btn:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

.theme-toggle-btn:focus {
    outline: none;
    background: var(--color-bg-secondary);
}

.theme-icon {
    width: 18px;
    height: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity var(--transition-fast);
}

.theme-icon.sun-icon {
    opacity: 1;
}

.theme-icon.moon-icon {
    opacity: 0;
}

body.dark .theme-icon.sun-icon {
    opacity: 0;
}

body.dark .theme-icon.moon-icon {
    opacity: 1;
}

/* Main Content */
.main-content {
    flex: 1;
    margin-left: 320px;
    min-height: 100vh;
    background: var(--color-bg-primary);
}

.content-wrapper {
    max-width: 740px;
    padding: var(--space-4xl) var(--space-3xl);
    background: var(--color-bg-primary);
}

/* Page Header */
.page-header {
    margin-bottom: var(--space-4xl);
}

.page-title {
    font-size: var(--font-size-4xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-md) 0;
    line-height: var(--line-height-tight);
}

.page-description {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin: 0;
}

/* Post Entries */
.post-entry {
    margin-bottom: var(--space-3xl);
    padding: var(--space-xl);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    transition: all var(--transition-normal);
}

.post-entry:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: var(--color-text-muted);
}

.post-entry:last-child {
    margin-bottom: var(--space-3xl);
}

/* Compact two-column list just for posts section */
.posts-list {
    margin-top: var(--space-md);
}

.posts-list .post-entry {
    display: grid;
    grid-template-columns: 140px 1fr;
    column-gap: var(--space-lg);
    align-items: start;
    padding: var(--space-sm) 0;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    border-bottom: 1px solid var(--color-border);
}

.posts-list .post-entry:hover {
    box-shadow: none;
    border-color: var(--color-border);
}

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

.posts-list .entry-meta {
    margin: 0;
    display: block;
}

.posts-list .entry-date {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.posts-list .entry-header {
    margin: 0;
}

.posts-list .entry-title {
    font-size: var(--font-size-lg);
    margin: 0 0 var(--space-xs) 0;
}

.posts-list .entry-content p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

@media (max-width: 720px) {
    .posts-list .post-entry {
        grid-template-columns: 1fr;
        row-gap: var(--space-xs);
    }
}

.entry-meta {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
}

.entry-date {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-weight: 400;
}

.entry-category {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.entry-header {
    margin-bottom: var(--space-md);
}

.entry-title {
    margin: 0;
    font-size: var(--font-size-2xl);
    font-weight: 600;
    line-height: var(--line-height-tight);
}

.entry-title-link {
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.entry-title-link:hover {
    color: var(--color-text-secondary);
}

.draft-indicator {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-left: var(--space-sm);
}

.entry-content {
    margin: 0;
}

.entry-content p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin: 0;
}

/* Responsive Design */
/* Switch sidebar to top nav (tablet & below) */
@media (max-width: 1024px) {
    .layout-container {
        flex-direction: column;
    }
    
    .sidebar {
        width: 100%;
        min-width: auto;
        /* Make the top navigation bar sticky for better access while scrolling */
        position: sticky;
        top: 0;
        z-index: 1000;
        height: auto;
        padding: var(--space-lg) var(--space-lg); /* Consistent padding across all breakpoints */
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        background: var(--color-bg-primary);
        /* Subtle elevation to separate from content */
        box-shadow: 0 1px 0 rgba(0,0,0,0.04);
    }
    
    .sidebar-content {
        flex-direction: row;
        align-items: center;
        gap: var(--space-xl);
    }
    
    .site-header {
        margin-bottom: 0;
    }
    
    .sidebar-nav {
        flex-grow: 0;
    }
    
    .nav-list {
        display: flex;
        gap: var(--space-lg);
        align-items: center;
        flex-wrap: nowrap; /* Single row for medium screens */
    }
    
    .nav-item {
        margin-bottom: 0;
    }

    /* Improve touch targets and hover affordance in top nav */
    .nav-link {
        padding: var(--space-sm) var(--space-xs);
        border-radius: 6px;
        white-space: nowrap;
    }

    .nav-link:hover,
    .nav-link.active {
        background: var(--color-bg-secondary);
    }

    .sidebar-footer {
        display: none;
    }
    
    .main-content {
        margin-left: 0;
    }
    
    .content-wrapper {
        padding: var(--space-xl) var(--space-lg);
    }
    
    .page-title {
        font-size: var(--font-size-3xl);
    }
    
    .entry-title {
        font-size: var(--font-size-xl);
    }
}

/* Medium screens (large mobile/small tablet) - Single row navigation */
@media (max-width: 1024px) and (min-width: 601px) {
    .nav-list {
        gap: var(--space-md); /* Tighter spacing for single row */
        flex-wrap: nowrap !important; /* Keep single row */
    }
    
    .nav-link {
        padding: var(--space-xs) var(--space-sm); /* Adjust padding for better fit */
        font-size: var(--font-size-sm);
    }
    
    .sidebar-content {
        gap: var(--space-lg); /* Reduce gap between title and nav */
    }
    
    .site-title {
        font-size: var(--font-size-lg); /* Slightly smaller title for space */
    }
}

/* Utility Classes */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Hide Elements We Don't Need */
.logo-switches,
.header,
nav.nav {
    display: none !important;
}

/* Fix navbar text wrapping - Override if header is shown */
#menu a,
#menu span,
.nav a {
    white-space: nowrap !important;
}

/* Prevent mid-word breaks in custom sidebar/top nav */
.site-title-link,
.nav-link {
    /* Ensure words don't split awkwardly */
    word-break: keep-all;
    overflow-wrap: normal;
    hyphens: none;
}

/* Extra-small screens: Two row navigation */
@media (max-width: 600px) {
    .nav-list {
        flex-wrap: wrap !important; /* Override single-row behavior */
        overflow: visible;
        row-gap: var(--space-xs);
        column-gap: var(--space-sm);
        justify-content: space-between;
    }
    
    /* Force a 2-column layout for extra-small screens */
    .nav-item {
        flex: 1 1 calc(50% - var(--space-sm));
    }
    
    .nav-link {
        text-align: center;
        white-space: nowrap;
        padding: var(--space-xs) 0 !important;
        font-size: var(--font-size-sm) !important;
    }
    
    .sidebar-content {
        gap: var(--space-md) !important; /* Tighter gap for compact layout */
    }
    
    .site-title {
        font-size: var(--font-size-base) !important; /* Even smaller title for extra small screens */
    }
}

/* Override any theme defaults */
body, 
body.dark,
body.list,
.main,
.content,
.content-wrapper,
.layout-container,
.main-content {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Ensure posts follow theme */
.post-entry,
article {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Focus Styles for Accessibility */
a:focus {
    outline: 2px solid var(--color-text-primary);
    outline-offset: 2px;
}

/* Typography Improvements */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
}

p {
    margin-bottom: var(--space-md);
}

a {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-link-hover);
}

/* Theme Toggle Styles */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    background: none;
    border: none;
    padding: var(--space-sm);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--transition-fast);
    border-radius: 4px;
}

.theme-toggle:hover {
    color: var(--color-text-secondary);
}

.theme-toggle:focus {
    outline: 2px solid var(--color-text-primary);
    outline-offset: 2px;
}

.theme-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    position: relative;
}

.theme-toggle-icon svg {
    position: absolute;
    transition: opacity var(--transition-fast);
    width: 16px;
    height: 16px;
    stroke-width: 1.5;
}

.sun-icon {
    opacity: 1;
}

.moon-icon {
    opacity: 0;
}

body.dark .sun-icon {
    opacity: 0;
}

body.dark .moon-icon {
    opacity: 1;
}

.theme-toggle-text {
    font-weight: 400;
    user-select: none;
    letter-spacing: 0.01em;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
}

.theme-toggle-text::after {
    content: "Dark";
}

body.dark .theme-toggle-text::after {
    content: "Light";
}

/* Projects Page */
.projects-page {
    padding: var(--space-3xl) 0;
}

.projects-header {
    margin-bottom: var(--space-3xl);
}

.projects-title {
    font-size: var(--font-size-4xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-md) 0;
    line-height: var(--line-height-tight);
}

.projects-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

/* Projects Grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-top: var(--space-3xl);
}

/* Logo Grid for Post */
.logo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
    margin: var(--space-xl) 0;
}

.logo-grid picture,
.logo-grid img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 1024px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }
    
    .logo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .projects-grid {
        grid-template-columns: 1fr;
    }
    
    .logo-grid {
        grid-template-columns: 1fr;
    }
}

.project-card {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: var(--space-lg);
    transition: all var(--transition-normal);
    min-height: 100px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.project-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.project-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--color-text-secondary);
}

body.dark .project-card:hover {
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.03);
}

.project-icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-emoji {
    font-size: 32px;
    line-height: 1;
}

.project-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.project-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.project-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-xs) 0;
    line-height: var(--line-height-tight);
}

.project-description {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    line-height: var(--line-height-snug);
    margin: 0;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .theme-toggle {
        display: none;
    }
    
    .projects-title {
        font-size: var(--font-size-3xl);
    }
    
    .projects-subtitle {
        font-size: var(--font-size-base);
    }
    
    .project-card {
        padding: var(--space-md);
    }
    
    .project-icon {
        width: 40px;
        height: 40px;
    }
    
    .icon-emoji {
        font-size: 28px;
    }
}

/* Syntax Highlighting - Chroma Styles */
/* Light theme syntax highlighting */
:root {
    --chroma-bg: #ffffff;
    --chroma-text: #1f2328;
    --chroma-comment: #57606a;
    --chroma-keyword: #cf222e;
    --chroma-string: #0a3069;
    --chroma-number: #0550ae;
    --chroma-function: #6639ba;
    --chroma-constant: #0550ae;
    --chroma-variable: #953800;
    --chroma-line-highlight: #e5e5e5;
}

/* Dark theme syntax highlighting */
body.dark {
    --chroma-bg: #0d1117;
    --chroma-text: #c9d1d9;
    --chroma-comment: #8b949e;
    --chroma-keyword: #ff7b72;
    --chroma-string: #a5d6ff;
    --chroma-number: #79c0ff;
    --chroma-function: #d2a8ff;
    --chroma-constant: #79c0ff;
    --chroma-variable: #ffa657;
    --chroma-line-highlight: #21262d;
}

/* Code block styling */
pre, code {
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.45;
}

pre {
    background: var(--chroma-bg);
    color: var(--chroma-text);
    padding: var(--space-md);
    border-radius: 6px;
    overflow-x: auto;
    margin: var(--space-lg) 0;
    border: 1px solid var(--color-border);
}

code {
    background: var(--color-bg-secondary);
    color: var(--chroma-text);
    padding: 0.125rem 0.25rem;
    border-radius: 3px;
    font-size: 0.85em;
}

pre code {
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
}

/* Wrap long lines for plain-text code blocks only */
/* - Indented code blocks (no .chroma) should wrap
   - Fenced blocks explicitly marked as text/plain should wrap
   - Keep syntax-highlighted code default (scroll horizontally) */
.post-content pre:not(.chroma),
.post-content pre:not(.chroma) code {
    white-space: pre-wrap;       /* wrap while preserving newlines */
    word-break: break-word;      /* break long tokens if needed */
    overflow-wrap: anywhere;     /* allow breaks anywhere for very long strings */
}

/* Fenced code blocks with language set to text/plain variants */
.post-content pre code[class*="language-text"],
.post-content pre code[class*="language-plain"],
.post-content pre code[class*="language-txt"],
.post-content .highlight pre.chroma code[class*="language-text"],
.post-content .highlight pre.chroma code[class*="language-plain"],
.post-content .highlight pre.chroma code[class*="language-txt"] {
    white-space: pre-wrap !important;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Chroma syntax highlighting classes */
.chroma { 
    background-color: var(--chroma-bg); 
    color: var(--chroma-text);
}

.chroma .err { color: #f97583; background-color: rgba(249, 117, 131, 0.1); }
.chroma .lnlinks { outline: none; text-decoration: none; color: inherit; }
.chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
.chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
.chroma .hl { background-color: var(--chroma-line-highlight); }
.chroma .lnt, .chroma .ln { 
    white-space: pre; 
    user-select: none; 
    margin-right: 0.4em; 
    padding: 0 0.4em 0 0.4em; 
    color: var(--chroma-comment); 
    opacity: 0.6;
}
.chroma .line { display: flex; }

/* Keywords */
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .kt { 
    color: var(--chroma-keyword); 
    font-weight: 600;
}

/* Names and identifiers */
.chroma .n, .chroma .na, .chroma .nc, .chroma .nx { color: var(--chroma-text); }
.chroma .no, .chroma .nd, .chroma .nt { color: var(--chroma-constant); }
.chroma .ni { color: var(--chroma-function); }
.chroma .nl { color: var(--chroma-keyword); font-weight: bold; }
.chroma .nn { color: var(--chroma-text); }
.chroma .nb, .chroma .nf, .chroma .fm { color: var(--chroma-function); }
.chroma .bp { color: var(--chroma-comment); }
.chroma .nv, .chroma .vc, .chroma .vg, .chroma .vi, .chroma .vm { color: var(--chroma-variable); }

/* Strings */
.chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd, 
.chroma .s2, .chroma .se, .chroma .sh, .chroma .si, .chroma .sx, .chroma .sr, 
.chroma .s1, .chroma .ss { color: var(--chroma-string); }

/* Numbers */
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo { 
    color: var(--chroma-number); 
}

/* Operators and punctuation */
.chroma .o, .chroma .ow { color: var(--chroma-keyword); }
.chroma .p { color: var(--chroma-text); }

/* Comments */
.chroma .c, .chroma .ch, .chroma .cm, .chroma .c1, .chroma .cs, .chroma .cp, .chroma .cpf { 
    color: var(--chroma-comment); 
    font-style: italic;
}

/* Generic */
.chroma .gd { color: #f97583; background-color: rgba(249, 117, 131, 0.1); }
.chroma .gi { color: #85e89d; background-color: rgba(133, 232, 157, 0.1); }
.chroma .go { color: var(--chroma-text); }
.chroma .gl { text-decoration: underline; }

/* Inline code in content */
.post-content code, .entry-content code, article code {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    font-size: 0.85em;
    padding: 0.125em 0.25em;
    border-radius: 3px;
    color: var(--chroma-text);
}

/* Image caption styling - override PaperMod defaults */
.post-content figure > figcaption,
.post-content figcaption {
    color: var(--color-text-muted) !important;
    font-size: var(--font-size-sm) !important; /* 14px */
    font-weight: 400 !important;
    font-style: italic;
    text-align: center;
    margin: var(--space-sm) 0 var(--space-md) 0 !important;
    line-height: var(--line-height-snug);
}

/* 52 Weeks Navigation */
.week-banner {
    width: 100%;
    height: 200px;
    margin-bottom: var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #f5f1e8 0%, #ede7d9 100%);
    border-radius: 12px;
}

.week-banner-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.week-banner-curves {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.week-banner-svg {
    width: 100%;
    height: 100%;
}

.week-banner-title {
    font-family: 'Inter', serif;
    font-size: 4rem;
    font-weight: 400;
    color: #2a2a2a;
    margin: 0;
    position: relative;
    z-index: 2;
    letter-spacing: -0.02em;
    line-height: 1;
}

/* Dark mode adjustments */
body.dark .week-banner {
    background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
}

body.dark .week-banner-title {
    color: #e5e5e5;
}

body.dark .week-banner-svg path {
    stroke: #e5e5e5 !important;
}

.week-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 var(--space-2xl) 0;
    padding: var(--space-lg) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    gap: var(--space-lg);
}

.week-nav-prev,
.week-nav-next {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-text-primary);
    transition: all var(--transition-normal);
    min-width: 140px;
}

.week-nav-prev:hover,
.week-nav-next:hover {
    background: var(--color-bg-primary);
    border-color: var(--color-text-secondary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.week-nav-prev {
    justify-content: flex-start;
}

.week-nav-next {
    justify-content: flex-end;
}

.week-nav-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.week-nav-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.week-nav-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.week-nav-arrow {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    transition: transform var(--transition-fast);
}

.week-nav-prev:hover .week-nav-arrow {
    transform: translateX(-2px);
}

.week-nav-next:hover .week-nav-arrow {
    transform: translateX(2px);
}

.week-nav-center {
    flex: 0 0 auto;
    text-align: center;
}

.week-nav-current {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-weight: 500;
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-bg-secondary);
    border-radius: 6px;
    display: inline-block;
}

.week-nav-placeholder {
    min-width: 140px;
}

/* Dark mode adjustments for week navigation */
body.dark .week-nav-prev:hover,
body.dark .week-nav-next:hover {
    background: var(--color-bg-secondary);
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.05);
}

/* Mobile responsive for week navigation */
@media (max-width: 768px) {
    .week-banner {
        height: 150px;
        border-radius: 8px;
    }
    
    .week-banner-title {
        font-size: 2.5rem;
    }
    
    .week-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-sm);
        padding: var(--space-md) 0;
        margin: 0 0 var(--space-xl) 0;
    }
    
    .week-nav-center {
        order: -1;
        width: 100%;
        margin-bottom: var(--space-md);
    }
    
    .week-nav-prev,
    .week-nav-next {
        flex: 1;
        min-width: 0;
        justify-content: center;
    }
    
    .week-nav-text {
        align-items: center;
        text-align: center;
    }
    
    .week-nav-placeholder {
        display: none;
    }
    
    .week-nav-arrow {
        font-size: var(--font-size-base);
    }
}

/* Center images with .center class */
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Also center the picture element wrapper */
picture.center {
    display: block;
    text-align: center;
}

picture.center img {
    display: inline-block;
    margin: 0 auto;
}