/* CSS Variables for consistent theming */
:root {
    /* Typography - Inspired by classic book typography */
    --font-serif: 'EB Garamond', 'Crimson Text', Georgia, serif;
    --font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* Type scale - Golden ratio based for perfect hierarchy */
    --font-size-xs: 0.694rem;   /* 11px */
    --font-size-sm: 0.833rem;   /* 13px */
    --font-size-base: 1rem;     /* 16px - perfect reading size */
    --font-size-lg: 1.2rem;     /* 19px */
    --font-size-xl: 1.44rem;    /* 23px */
    --font-size-2xl: 1.728rem;  /* 28px */
    --font-size-3xl: 2.074rem;  /* 33px */
    --font-size-4xl: 2.488rem;  /* 40px - for impact titles */
    
    /* Spacing - Modular scale for perfect rhythm */
    --space-1: 0.25rem;    /* 4px */
    --space-2: 0.5rem;     /* 8px */
    --space-3: 0.75rem;    /* 12px */
    --space-4: 1rem;       /* 16px - base unit */
    --space-5: 1.25rem;    /* 20px */
    --space-6: 1.5rem;     /* 24px */
    --space-8: 2rem;       /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */
    
    /* Design tokens */
    --border-radius: 2px;        /* Subtle, not round */
    --border-radius-lg: 4px;
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75; /* Perfect for reading */
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    
    /* Vintage color palette - Inspired by aged manuscripts */
    --ink-black: #1a1a1a;           /* Rich black ink */
    --charcoal: #2d2d2d;            /* Deep charcoal */
    --slate: #4a4a4a;               /* Medium slate */
    --ash: #6b6b6b;                 /* Light ash */
    --fog: #8f8f8f;                 /* Soft fog */
    --mist: #b3b3b3;                /* Light mist */
    
    --parchment: #fefefe;           /* Pure parchment white */
    --cream: #faf9f7;               /* Warm cream */
    --ivory: #f5f4f2;               /* Aged ivory */
    --dust: #f0efed;                /* Paper dust */
    
    /* Accent colors - Enhanced vintage ink wells with more personality */
    --burgundy: #722f37;            /* Deep burgundy */
    --forest: #2d4a2c;              /* Forest green */
    --navy: #2c3e50;                /* Classic navy */
    --amber: #b8860b;               /* Warm amber */
    --rust: #a0522d;                /* Vintage rust */
    --sepia: #8b4513;               /* Old photo sepia */
    
    /* Vintage accent colors - subtle and refined */
    --vintage-brass: #b8860b;       /* Antique brass */
    --vintage-sage: #87a96b;        /* Muted sage green */
    --vintage-burgundy: #722f37;    /* Deep burgundy */
    --vintage-copper: #b87333;      /* Weathered copper */
    --vintage-slate: #708090;       /* Classic slate */
    --vintage-sepia: #d4c5a0;       /* Warm sepia tone */
    --vintage-sky: #7db8c7;         /* Muted sky blue */
    --vintage-cornflower: #6495d4;  /* Vintage cornflower blue */
    
    /* Extended vintage rainbow palette */
    --vintage-rose: #d4a5a5;        /* Dusty rose */
    --vintage-coral: #cd7f7f;       /* Faded coral */
    --vintage-peach: #ddb89e;       /* Vintage peach */
    --vintage-amber: #d4a574;       /* Muted amber */
    --vintage-gold: #c9a961;        /* Tarnished gold */
    --vintage-olive: #8b8c5a;       /* Weathered olive */
    --vintage-forest: #5a6b47;      /* Deep forest */
    --vintage-pine: #4a5d3a;        /* Aged pine */
    --vintage-teal: #5a8a8a;        /* Vintage teal */
    --vintage-navy: #4a5a7a;        /* Weathered navy */
    --vintage-indigo: #6b5b95;      /* Faded indigo */
    --vintage-lavender: #9b8bb4;    /* Dusty lavender */
    --vintage-plum: #8b6a7a;        /* Muted plum */
    --vintage-mauve: #a68a8a;       /* Soft mauve */
    --vintage-cream: #f0ead6;       /* Aged cream */
    --vintage-ivory: #f5f0e8;       /* Yellowed ivory */
    --vintage-pearl: #e8e2d5;       /* Dulled pearl */
    --vintage-ash: #a5a29e;         /* Soft ash */
    
    /* Mad vintage collection - ancient pigments & weathered materials */
    --vintage-crimson: #8b2635;     /* Aged crimson ink */
    --vintage-rust: #a0522d;        /* Deep rust patina */
    --vintage-ochre: #cc7722;       /* Earth ochre */
    --vintage-sienna: #a0522d;      /* Burnt sienna */
    --vintage-umber: #6b4423;       /* Raw umber */
    --vintage-saffron: #f4c430;     /* Faded saffron */
    --vintage-mustard: #c19a6b;     /* Weathered mustard */
    --vintage-chartreuse: #8b8b00;  /* Muted chartreuse */
    --vintage-moss: #6b8e23;        /* Aged moss */
    --vintage-malachite: #4f7942;   /* Weathered malachite */
    --vintage-verdigris: #43b3ae;   /* Copper verdigris */
    --vintage-peacock: #2e8b8b;     /* Faded peacock */
    --vintage-cerulean: #4682b4;    /* Aged cerulean */
    --vintage-periwinkle: #9999cc;  /* Dusty periwinkle */
    --vintage-violet: #8b7d8b;      /* Muted violet */
    --vintage-amethyst: #9966cc;    /* Weathered amethyst */
    --vintage-lilac: #c8a2c8;       /* Faded lilac */
    --vintage-orchid: #da70d6;      /* Dusty orchid */
    --vintage-magenta: #8b5a8c;     /* Aged magenta */
    --vintage-wine: #722f37;        /* Deep wine stain */
    
    /* Manuscript & parchment tones */
    --vintage-parchment: #f7f3e9;   /* Ancient parchment */
    --vintage-vellum: #f5f5dc;      /* Aged vellum */
    --vintage-papyrus: #e8dcc0;     /* Weathered papyrus */
    --vintage-manila: #e6d690;      /* Old manila paper */
    --vintage-newsprint: #ddd6c1;   /* Yellowed newsprint */
    --vintage-tea: #d2b48c;         /* Tea-stained paper */
    --vintage-coffee: #d2691e;      /* Coffee stain */
    --vintage-tobacco: #8b4513;     /* Tobacco brown */
    
    /* Metallic patinas & aged materials */
    --vintage-bronze: #cd7f32;      /* Tarnished bronze */
    --vintage-pewter: #96a3a3;      /* Aged pewter */
    --vintage-silver: #c0c0c0;      /* Tarnished silver */
    --vintage-lead: #8c8c8c;        /* Weathered lead */
    --vintage-iron: #696969;        /* Rusted iron */
    --vintage-tin: #a8a8a8;         /* Dull tin */
    --vintage-zinc: #b8b8b8;        /* Oxidized zinc */
    --vintage-nickel: #b0b0b0;      /* Weathered nickel */
    
    /* Fabric & textile inspired */
    --vintage-linen: #faf0e6;       /* Aged linen */
    --vintage-burlap: #deb887;      /* Weathered burlap */
    --vintage-canvas: #e6e2d3;      /* Old canvas */
    --vintage-velvet: #8b0000;      /* Faded velvet */
    --vintage-silk: #f0e68c;        /* Aged silk */
    --vintage-wool: #d2d2d2;        /* Weathered wool */
    --vintage-tweed: #a0522d;       /* Classic tweed */
    --vintage-flannel: #b8860b;     /* Worn flannel */
    
    /* Natural weathering & decay */
    --vintage-bark: #8b4513;        /* Tree bark */
    --vintage-driftwood: #d2b48c;   /* Weathered driftwood */
    --vintage-stone: #a9a9a9;       /* Aged stone */
    --vintage-marble: #f8f8ff;      /* Yellowed marble */
    --vintage-limestone: #f5deb3;   /* Weathered limestone */
    --vintage-sandstone: #faf0e6;   /* Aged sandstone */
    --vintage-clay: #cd853f;        /* Fired clay */
    --vintage-terracotta: #e2725b;  /* Weathered terracotta */
    
    /* Semantic colors */
    --text-primary: var(--ink-black);
    --text-secondary: var(--slate);
    --text-tertiary: var(--ash);
    --text-muted: var(--fog);
    
    --bg-primary: var(--parchment);
    --bg-secondary: var(--cream);
    --bg-tertiary: var(--ivory);
    --bg-accent: var(--dust);
    
    --border-subtle: #e8e6e3;
    --border-light: #d1ccc0;
    --border-medium: #b8b3a6;
    
    --accent-primary: var(--forest);
    --accent-secondary: var(--burgundy);
    --accent-tertiary: var(--navy);
    --accent-warm: var(--amber);
    
    /* Shadows - Subtle and paper-like */
    --shadow-subtle: 0 1px 2px rgba(26, 26, 26, 0.04);
    --shadow-soft: 0 2px 4px rgba(26, 26, 26, 0.06);
    --shadow-medium: 0 4px 8px rgba(26, 26, 26, 0.08);
}

[data-theme="dark"] {
    /* Dark theme - Inspired by midnight oil lamp reading */
    --ink-black: #e8e6e3;          /* Warm white ink */
    --charcoal: #d1ccc0;           /* Light charcoal */
    --slate: #b8b3a6;              /* Warm slate */
    --ash: #9a9590;                /* Medium ash */
    --fog: #7c7873;                /* Deep fog */
    --mist: #5e5b56;               /* Dark mist */
    
    --parchment: #1a1916;          /* Dark parchment */
    --cream: #1f1e1b;              /* Dark cream */
    --ivory: #252420;              /* Dark ivory */
    --dust: #2a2925;               /* Dark dust */
    
    /* Warmer, more inviting dark accents */
    --forest: #7fb069;             /* Bright forest */
    --burgundy: #d4758a;           /* Soft burgundy */
    --navy: #6b8db5;               /* Warm navy */
    --amber: #ffd700;              /* Bright amber */
    --rust: #cd853f;               /* Warm rust */
    
    --text-primary: var(--ink-black);
    --text-secondary: var(--slate);
    --text-tertiary: var(--ash);
    --text-muted: var(--fog);
    
    --bg-primary: var(--parchment);
    --bg-secondary: var(--cream);
    --bg-tertiary: var(--ivory);
    --bg-accent: var(--dust);
    
    --border-subtle: #333330;
    --border-light: #3d3a35;
    --border-medium: #47443f;
    
    --accent-primary: var(--forest);
    --accent-secondary: var(--burgundy);
    --accent-tertiary: var(--navy);
    --accent-warm: var(--amber);
}

/* Dark theme tag colors - lighter and more pleasant */
[data-theme="dark"] .tag:nth-child(1) { 
    background-color: #2d3748;
    color: #a0d0f0;
    border-color: #4a90e2;
}

[data-theme="dark"] .tag:nth-child(2) { 
    background-color: #2f4f4f;
    color: #90ee90;
    border-color: #5cb85c;
}

[data-theme="dark"] .tag:nth-child(3) { 
    background-color: #3b3226;
    color: #ffe080;
    border-color: #f0ad4e;
}

[data-theme="dark"] .tag:nth-child(4) { 
    background-color: #4b2f4b;
    color: #dda0dd;
    border-color: #9370db;
}

[data-theme="dark"] .tag:nth-child(n+5) { 
    background-color: #264d26;
    color: #98fb98;
    border-color: #5cb85c;
}

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

html {
    font-size: 18px; /* Larger base for better readability */
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-serif);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
    font-feature-settings: "kern" 1, "liga" 1, "onum" 1; /* Enable beautiful typography */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Beautiful typography hierarchy */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: 500; /* Lighter weight for elegance */
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--text-primary);
    margin-bottom: var(--space-6);
}

h1 { 
    font-size: var(--font-size-4xl);
    font-weight: 600;
    margin-bottom: var(--space-8);
}

h2 { 
    font-size: var(--font-size-2xl);
    margin-top: var(--space-16);
    margin-bottom: var(--space-6);
}

h3 { 
    font-size: var(--font-size-xl);
    margin-top: var(--space-12);
    margin-bottom: var(--space-5);
}

/* Sophisticated paragraph styling */
p {
    margin-bottom: var(--space-6);
    color: var(--text-primary);
    max-width: 75ch; /* Optimal reading length */
}

/* Links with vintage book styling */
a {
    color: var(--accent-primary);
    text-decoration-color: var(--accent-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: all 0.2s ease;
}

a:hover {
    color: var(--accent-secondary);
    text-decoration-color: var(--accent-secondary);
    text-decoration-thickness: 2px;
}

/* Lists with proper spacing */
ul, ol {
    margin-bottom: var(--space-6);
    padding-left: var(--space-8);
}

li {
    margin-bottom: var(--space-3);
    line-height: var(--line-height-relaxed);
}

/* Code styling - monospace heritage */
code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background-color: var(--bg-tertiary);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    font-weight: 500;
}

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

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

/* Blockquotes - like vintage marginalia */
blockquote {
    border-left: 3px solid var(--accent-primary);
    padding-left: var(--space-6);
    margin: var(--space-8) 0;
    font-style: italic;
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    position: relative;
}

blockquote::before {
    content: "\201C";
    font-size: var(--font-size-2xl);
    color: var(--accent-tertiary);
    font-family: var(--font-serif);
    position: absolute;
    left: -0.5em;
    top: -0.2em;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

/* Header - Inspired by vintage book title pages */
header {
    border-bottom: 1px solid var(--border-light);
    padding: var(--space-10) 0 var(--space-8) 0;
    margin-bottom: var(--space-12);
    background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

.header-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--space-6);
    text-align: center;
}

.logo {
    font-size: var(--font-size-3xl);
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    display: block;
    margin-bottom: var(--space-3);
    letter-spacing: var(--letter-spacing-wide);
    font-feature-settings: "smcp" 1; /* Small caps for elegance */
}

.logo:hover {
    color: var(--accent-primary);
    transition: color 0.3s ease;
}

.tagline {
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    margin-bottom: var(--space-8);
    font-style: italic;
    letter-spacing: var(--letter-spacing-wide);
    font-family: var(--font-serif);
}

/* Navigation - Like vintage book index tabs */
nav ul {
    list-style: none;
    display: flex;
    gap: var(--space-2);
    align-items: center;
    justify-content: center;
    margin-top: var(--space-2);
}

nav li {
    margin-bottom: 0;
}

nav a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-family: var(--font-mono);
    font-weight: 500;
    padding: var(--space-2) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    transition: all 0.2s ease;
    letter-spacing: var(--letter-spacing-wide);
    text-transform: lowercase;
}

nav a:hover {
    color: var(--accent-primary);
    background-color: var(--bg-tertiary);
    border-color: var(--border-light);
    box-shadow: var(--shadow-subtle);
}

nav a.active {
    color: var(--accent-primary);
    background-color: var(--bg-accent);
    border-color: var(--accent-primary);
    font-weight: 600;
}

#theme-toggle {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    font-size: var(--font-size-base);
    cursor: pointer;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--border-radius);
    transition: all 0.2s ease;
    margin-left: var(--space-2);
}

#theme-toggle:hover {
    background-color: var(--bg-accent);
    border-color: var(--border-medium);
    box-shadow: var(--shadow-subtle);
    transform: translateY(-1px);
}

/* Intro text on home page */
.intro-text {
    text-align: center;
    margin-bottom: var(--space-8);
}

.intro-text p {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    font-style: italic;
}

/* Home page stats */
.home-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-16);
    padding: var(--space-8) 0;
    border-bottom: 1px solid var(--border-light);
}

.stat-item {
    text-align: center;
    flex: 1;
}

.stat-number {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    margin-bottom: var(--space-1);
}

.stat-number.green { color: var(--accent-primary); }
.stat-number.amber { color: var(--accent-warm); }
.stat-number.rust { color: var(--rust); }
.stat-number.purple { color: var(--accent-tertiary); }

.stat-item div:last-child {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Blog posts */
.blog-posts {
    margin-top: var(--space-8);
}

.blog-post {
    margin-bottom: var(--space-12);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--border-light);
}

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

.blog-post-title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-3);
}

.blog-post-title a {
    color: var(--text-primary);
    text-decoration: none;
}

.blog-post-title a:hover {
    color: var(--accent-primary);
}

.blog-post-meta {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Seasonal time styling for essays */
.seasonal-time {
    font-style: italic;
    color: var(--accent-secondary);
    font-weight: 500;
}

/* Ensure tags are centered within blog post meta */
.blog-post-meta .tags {
    width: 100%;
    justify-content: center;
}

.blog-post-excerpt {
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
    line-height: 1.7;
}

.blog-post-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
}

.post-stats-mini {
    display: flex;
    gap: var(--space-3);
    color: var(--text-tertiary);
}

.read-more {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 500;
}

.read-more:hover {
    text-decoration: underline;
}

/* Footer */
footer {
    margin-top: var(--space-24);
    padding: var(--space-8) 0;
    border-top: 1px solid var(--border-light);
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
    text-align: center;
}

/* Post page styles */
.post {
    max-width: 70ch;
    margin: 0 auto;
    background-color: var(--bg-primary);
    position: relative;
}

/* Beautiful reading progress indicator */
.post::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--emerald), var(--teal), var(--sapphire), var(--purple));
    background-size: 200% 100%;
    animation: progressGradient 3s ease-in-out infinite;
    width: var(--scroll-progress, 0%);
    z-index: 1000;
    transition: width 0.1s ease-out;
}

@keyframes progressGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.post-header {
    margin-bottom: var(--space-12);
    text-align: center;
    padding: var(--space-6);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--border-light);
    position: relative;
}

.post-title {
    font-size: var(--font-size-3xl);
    font-weight: 600;
    margin-bottom: var(--space-4);
    line-height: 1.2;
    color: var(--vintage-sage);
    text-align: center;
    position: relative;
}

.post-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 1px;
    background: var(--vintage-brass);
    opacity: 0.6;
}

.post-meta {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.tags {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: center;
}

.tag {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    font-family: var(--font-mono);
    font-weight: 500;
    border: 1px solid var(--border-light);
    transition: all 0.2s ease;
}

/* Pleasant vintage tag colors */
.tag:nth-child(1) { 
    background-color: #f0e6d2;
    color: var(--vintage-burgundy);
    border-color: var(--vintage-brass);
}

.tag:nth-child(2) { 
    background-color: #e8f4f8;
    color: var(--vintage-slate);
    border-color: var(--vintage-sage);
}

.tag:nth-child(3) { 
    background-color: #fdf5e6;
    color: var(--vintage-copper);
    border-color: var(--vintage-brass);
}

.tag:nth-child(4) { 
    background-color: #f5f0f5;
    color: var(--vintage-burgundy);
    border-color: var(--vintage-slate);
}

.tag:nth-child(n+5) { 
    background-color: #f0f5e8;
    color: var(--vintage-sage);
    border-color: var(--vintage-copper);
}

.tag:hover {
    transform: translateY(-1px);
    opacity: 0.8;
}

.post-content {
    font-size: var(--font-size-lg);
    line-height: 1.7;
    color: var(--text-primary);
}

.post-content h2 {
    font-size: var(--font-size-xl);
    margin: var(--space-12) 0 var(--space-6) 0;
    color: var(--text-primary);
    font-weight: 600;
    position: relative;
    padding-left: var(--space-4);
    border-left: 2px solid var(--vintage-brass);
}

.post-content h3 {
    font-size: var(--font-size-lg);
    margin: var(--space-8) 0 var(--space-4) 0;
    color: var(--vintage-burgundy);
    font-weight: 500;
}

.post-content h3:hover {
    background-size: 100% 2px;
    color: var(--navy);
}

.post-content p {
    margin-bottom: var(--space-6);
}

/* Subtle vintage links */
.post-content a {
    color: var(--vintage-brass);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-bottom-color 0.3s ease;
}

.post-content a:hover {
    border-bottom-color: var(--vintage-brass);
}

/* Subtle typography for emphasis */
.post-content strong {
    font-weight: 600;
    color: var(--vintage-burgundy);
}

.post-content em {
    font-style: italic;
    color: var(--vintage-sage);
}

/* Beautiful first letter styling */
.post-content > p:first-of-type::first-letter {
    font-size: 3.5em;
    font-weight: 400;
    line-height: 1;
    float: left;
    margin: 0.1em 0.1em 0 0;
    color: var(--emerald);
    font-family: var(--font-serif);
    text-shadow: 2px 2px 4px rgba(45, 125, 50, 0.2);
}

/* Subtle paragraph hover effect */
.post-content p:hover {
    color: var(--text-primary);
    transition: color 0.2s ease;
}

.post-content ul,
.post-content ol {
    margin: var(--space-6) 0;
    padding-left: var(--space-8);
    list-style: none;
}

.post-content li {
    margin-bottom: var(--space-2);
    position: relative;
}

/* Different light colors for each list item */
.post-content ul li,
.post-content ol li {
    margin-bottom: var(--space-3);
}

.post-content ul li:nth-child(1),
.post-content ol li:nth-child(1) {
    color: #4682b4;
}

.post-content ul li:nth-child(2),
.post-content ol li:nth-child(2) {
    color: #5cb85c;
}

.post-content ul li:nth-child(3),
.post-content ol li:nth-child(3) {
    color: #f0ad4e;
}

.post-content ul li:nth-child(4),
.post-content ol li:nth-child(4) {
    color: #d9534f;
}

.post-content ul li:nth-child(n+5),
.post-content ol li:nth-child(n+5) {
    color: #9370db;
}

.post-content blockquote {
    border-left: 3px solid var(--vintage-brass);
    padding: var(--space-6) var(--space-8);
    margin: var(--space-8) 0;
    font-style: italic;
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.post-content code {
    background-color: var(--bg-tertiary);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--border-radius);
    font-family: var(--font-mono);
    font-size: 0.9em;
    color: var(--vintage-copper);
    font-weight: 500;
    border: 1px solid var(--border-light);
}

.post-content pre {
    background-color: var(--bg-tertiary);
    padding: var(--space-6);
    border-radius: var(--border-radius-lg);
    overflow-x: auto;
    margin: var(--space-8) 0;
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--vintage-brass);
}

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

.post-footer {
    margin-top: var(--space-16);
    padding-top: var(--space-8);
    border-top: 1px solid var(--border-light);
    text-align: center;
}

.back-link {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--font-size-sm);
}

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

/* Responsive design */
@media (max-width: 640px) {
    .home-stats {
        flex-direction: column;
        gap: var(--space-4);
    }
    
    .blog-post-footer {
        flex-direction: column;
        gap: var(--space-3);
        text-align: center;
    }
    
    .post-stats-mini {
        justify-content: center;
    }
    
    nav ul {
        flex-wrap: wrap;
        gap: var(--space-4);
    }
    
    .post-title {
        font-size: var(--font-size-2xl);
    }
    
    .post-content {
        font-size: var(--font-size-base);
    }
    
    .post-meta {
        flex-direction: column;
        gap: var(--space-2);
    }
}

/* Analytics Page Styling */
.vintage-subtitle {
    font-family: var(--font-mono);
    color: var(--text-secondary);
    text-align: center;
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-8);
    text-transform: lowercase;
    letter-spacing: 0.05em;
}

.visitor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-6);
    margin: var(--space-8) 0;
}

.stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius);
    padding: var(--space-6);
    text-align: center;
    transition: all 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.stat-label {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    text-transform: lowercase;
}

.post-rankings {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius);
    padding: var(--space-6);
    margin: var(--space-8) 0;
}

.post-rank {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-light);
    transition: all 0.2s ease;
}

.post-rank:hover {
    background: var(--bg-secondary);
    transform: translateX(4px);
}

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

.post-number {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--accent-primary);
    font-size: var(--font-size-lg);
    min-width: 30px;
    text-align: center;
}

.analytics-post-title {
    flex: 1;
    font-family: var(--font-serif);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: 500;
    line-height: 1.4;
}

.post-views {
    font-family: var(--font-mono);
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    white-space: nowrap;
}

.country-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-4);
    margin: var(--space-8) 0;
}

.country-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-light);
    transition: all 0.2s ease;
}

.country-item:hover {
    background: var(--bg-primary);
    transform: translateX(4px);
}

.country-flag {
    font-size: var(--font-size-xl);
    min-width: 40px;
    text-align: center;
}

.country-name {
    flex: 1;
    font-family: var(--font-serif);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: 500;
}

.country-count {
    font-family: var(--font-mono);
    color: var(--accent-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    white-space: nowrap;
}

.vintage-map {
    margin: var(--space-8) 0;
    padding: var(--space-6);
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius);
}

.map-placeholder {
    text-align: center;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--font-size-lg);
    padding: var(--space-8);
}

/* About page vintage styling */
.about-page h1 {
    color: var(--vintage-burgundy);
    border-bottom: 2px solid var(--vintage-sky);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-8);
}

.about-page h2 {
    color: var(--text-primary);
    margin-top: var(--space-10);
    margin-bottom: var(--space-6);
    font-style: normal;
    font-weight: 500;
    font-size: 1.4em;
    letter-spacing: 0.01em;
    position: relative;
}

.about-page h2::before {
    content: '§';
    color: var(--vintage-brass);
    font-style: normal;
    margin-right: var(--space-2);
    opacity: 0.7;
}

.about-page strong {
    color: var(--text-primary);
    font-weight: 600;
    font-family: var(--font-mono);
    font-size: 0.95em;
    letter-spacing: 0.02em;
}

/* Section header colors */
.about-page .section-origin { color: var(--vintage-saffron); }
.about-page .section-academic { color: var(--vintage-amethyst); }
.about-page .section-odyssey { color: var(--vintage-forest); }
.about-page .section-hobbies { color: var(--vintage-lavender); }
.about-page .section-crisis { color: var(--vintage-sage); }
.about-page .section-blog { color: var(--rust); }
.about-page .section-contact { color: var(--vintage-sky); }

.about-page code {
    background-color: var(--bg-tertiary);
    color: var(--vintage-slate);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--border-radius);
    font-family: var(--font-mono);
    border: 1px solid var(--vintage-sepia);
}

/* Laboratory page styling */
.lab-tagline {
    font-family: var(--font-serif);
    font-size: var(--font-size-lg);
    color: var(--amber);
    text-align: center;
    font-style: italic;
    line-height: var(--line-height-relaxed);
    margin: var(--space-6) 0;
    letter-spacing: var(--letter-spacing-normal);
}