/* --- FONTS --- */
 /* --- UI sans-serif font --- */
@font-face {
    font-family: 'Figtree';
    src: url('../assets/fonts/Figtree.ttf') format('truetype');
    font-weight: 300 900;
    font-style: normal;
}

@font-face {
    font-family: 'Figtree';
    src: url('../assets/fonts/Figtree-Italic.ttf') format('truetype');
    font-weight: 300 900;
    font-style: italic;
}
/* --- Text serif font --- */
@font-face {
    font-family: 'Source Serif 4';
    src: url('../assets/fonts/SourceSerif4.ttf') format('truetype');
    font-weight: 300 700;
    font-style: normal;
}

@font-face {
    font-family: 'Source Serif 4';
    src: url('../assets/fonts/SourceSerif4-Italic.ttf') format('truetype');
    font-weight: 300 700;
    font-style: italic;
}
/* --- Monospace font for code --- */
@font-face {
    font-family: 'Cascadia Mono';
    src: url('../assets/fonts/CascadiaMono.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Cascadia Mono';
    src: url('../assets/fonts/CascadiaMono-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

/* --- THEME VARIABLES --- */
:root {
    --font-sans: 'Figtree', sans-serif;
    --font-serif: 'Source Serif 4', serif;
    --font-mono: 'Cascadia Mono', monospace;
    
    --color-bg-page: #fafafa;
    --color-text-primary: #1c1917;
    --color-text-secondary: #545454;
    --color-panel-bg: #ffffff;
    --color-panel-border: #d6d3d1;
    --color-panel-shadow: #d6d3d1;
    --color-accent-bg: #e5e4e2;
    --color-accent-border: #a8a29e; 

    --color-code-bg: rgba(250, 234, 167,0.7);
    --color-code-border: #f1cb3f; 
    
    --color-subscribe-hover: #eab308; 

   
    --color-yellow-strong: #facc15; 
    --color-yellow-strong-rgb: 250, 204, 21;

    /* RGB versions for transparency */
    --color-accent-bg-rgb: 229, 228, 226;
    --color-text-primary-rgb: 28, 25, 23;
    --color-accent-border-rgb: 168, 162, 158;
    
    --panel-border-width: 2px;
    --panel-border-radius: 13px;
    --button-border-radius: 32px;

    /* Callout colors (RGB for alpha usage) */
    --callout-note-rgb: 8, 145, 178;       /* cyan-600 */
    --callout-abstract-rgb: 100, 116, 139; /* slate-500 */
    --callout-info-rgb: 37, 99, 235;       /* blue-600 */
    --callout-todo-rgb: 37, 99, 235;       /* blue-600 */
    --callout-tip-rgb: 22, 163, 74;        /* green-600 */
    --callout-success-rgb: 22, 163, 74;    /* green-600 */
    --callout-question-rgb: 37, 99, 235;   /* blue-600 */
    --callout-warning-rgb: 245, 158, 11;   /* amber-500 */
    --callout-caution-rgb: 245, 158, 11;   /* amber-500 */
    --callout-failure-rgb: 220, 38, 38;    /* red-600 */
    --callout-danger-rgb: 220, 38, 38;     /* red-600 */
    --callout-bug-rgb: 219, 39, 119;       /* pink-600 */
    --callout-example-rgb: 147, 51, 234;   /* purple-600 */
    --callout-quote-rgb: 168, 162, 158;    /* stone-400 */

    /* Inline SVG icons (used as masks) */
    --icon-note: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='16' y1='13' x2='8' y2='13'/><line x1='16' y1='17' x2='8' y2='17'/><polyline points='10 9 9 9 8 9'/></svg>");
    --icon-abstract: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><rect x='3' y='3' width='18' height='18' rx='2' ry='2'/><line x1='9' y1='9' x2='15' y2='9'/><line x1='9' y1='15' x2='15' y2='15'/></svg>");
    --icon-info: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>");
    --icon-todo: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>");
    --icon-tip: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/><polyline points='22 4 12 14.01 9 11.01'/></svg>");
    --icon-success: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><polyline points='20 6 9 17 4 12'/></svg>");
    --icon-question: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><circle cx='12' cy='12' r='10'/><path d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
    --icon-warning: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><path d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
    --icon-failure: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><circle cx='12' cy='12' r='10'/><line x1='15' y1='9' x2='9' y2='15'/><line x1='9' y1='9' x2='15' y2='15'/></svg>");
    --icon-danger: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><polygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/></svg>");
    --icon-bug: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><rect x='8' y='6' width='8' height='14' rx='4'/><path d='M6 6h4'/><path d='M14 6h4'/><path d='M6 18h4'/><path d='M14 18h4'/><path d='M6 12h2'/><path d='M16 12h2'/></svg>");
    --icon-example: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><polyline points='16 18 22 12 16 6'/><polyline points='8 6 2 12 8 18'/></svg>");
    --icon-quote: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><path d='M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z'/><path d='M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z'/></svg>");
}

/* --- BASE & RESET --- */
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0;
    font-family: var(--font-sans);
    background-color: var(--color-bg-page);
    color: var(--color-text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { font-family: var(--font-sans); font-weight: 800; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: underline; }
ul { list-style: none; margin: 0; padding: 0; }
button, input { font-family: inherit; }

/* Text highlight */
::selection { background: var(--color-yellow-strong); color: var(--color-text-primary); }
::-moz-selection { background: var(--color-yellow-strong); color: var(--color-text-primary); }
mark { background-color: var(--color-yellow-strong); color: var(--color-text-primary); padding: 0.05em 0.2em; border-radius: 0.2em; }
.container {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* --- LAYOUT --- */
.app-container { min-height: 100vh; display: flex; flex-direction: column; }
.main-content { flex-grow: 1; padding-top: 1rem; padding-bottom: 2rem; }
.layout-top { max-width: 48rem; margin: 0 auto; }
.layout-top .about-section-wrapper {
    margin-bottom: 1.5rem; /* Space between about and posts */
}
.layout-side { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) {
    .main-content { padding-top: 1.5rem; padding-bottom: 3rem; }
    .layout-side { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
    .layout-side .about-section-wrapper {
        grid-column: span 1;
        position: sticky; /* Sticky positioning ONLY for side layout */
        top: 3rem;
    }
    .layout-side .post-list-section-wrapper { grid-column: span 2; }
}

/* --- HEADER & FOOTER --- */
.main-header .container { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.header-title-link { display: inline-block; text-decoration: none; }
.header-title { font-size: 1.5rem; letter-spacing: -0.025em; }
.header-subtitle { font-size: 0.875rem; color: var(--color-text-secondary); margin-top: 0.25rem; }
.main-footer { margin-top: auto; }
.main-footer .container { padding-top: 1rem; padding-bottom: 1rem; text-align: center; font-size: 0.875rem; color: var(--color-text-secondary); }

/* --- GLOBAL COMPONENTS --- */
.section-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 0.75rem; }
.tag-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }
.tag-link-item {
    font-size: 0.75rem; 
    font-weight: 400;
    padding: 0.25rem 0.625rem; border-radius: 9999px;
    background-color: var(--color-accent-bg);
    color: var(--color-text-secondary);
    transition: background-color 0.2s, color 0.2s, font-weight 0.2s;
    text-decoration: none;
}
.tag-link-item:hover { background-color: rgba(var(--color-accent-border-rgb), 0.5); color: var(--color-text-primary); }
.tag-link-item.selected { 
    background-color: var(--color-text-primary); 
    color: var(--color-panel-bg); 
    font-weight: 700;
}

/* --- ABOUT SECTION --- */
.about-content { font-family: var(--font-serif); line-height: 1.75; text-align: justify; }
.about-content p { margin-bottom: 1rem; }
.social-links { margin-top: 1rem; display: flex; align-items: center; gap: 1.25rem; }
.social-link-item { display: flex; align-items: center; font-size: 0.875rem; color: var(--color-text-secondary); transition: color 0.2s; text-decoration: none; padding: 0.25rem 0.5rem;}
.social-link-item:hover { color: var(--color-text-primary); background-color: rgba(var(--color-yellow-strong-rgb), 0.5); border-radius: var(--button-border-radius); padding: 0.25rem 0.5rem;}
.social-link-item svg { width: 1.5rem; height: 1.5rem; margin-right: 0.5rem; }

/* --- POST LIST: FILTERS --- */
.filter-controls, .filter-controls-centered { display: flex; align-items: center; gap: 0.5rem; }
.filter-controls-centered { justify-content: center; }
.no-results-message {
    text-align: center;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 1.3;
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
}
.year-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem; /* Default mb-4 */
}
.year-header.is-timeline {
    margin-bottom: 2rem; /* Timeline mb-8 */
}
@media (min-width: 640px) {
    .year-header {
        flex-direction: row;
        align-items: center; /* Default sm:items-center */
    }
    .year-header.is-timeline {
        align-items: flex-end; /* Timeline sm:items-end */
    }
}
.year-title { font-size: 1.25rem; font-weight: 700; color: var(--color-text-secondary); letter-spacing: 0.025em; }
.search-form { display: contents; }

/* Icon Buttons */
.icon-button {
    position: relative;
    height: 2.5rem; width: 2.5rem;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-text-secondary);
    background-color: transparent;
    border: none;
    border-radius: var(--button-border-radius);
    transition: all 0.2s;
    cursor: pointer;
}
.icon-button:hover { background-color: rgba(var(--color-yellow-strong-rgb), 0.18); }
.icon-button:focus { outline: none; box-shadow: 0 0 0 2px var(--color-bg-page), 0 0 0 4px var(--color-accent-border); }
.icon-button svg { width: 1.25rem; height: 1.25rem; }
.icon-button-indicator {
    position: absolute;
    top: -0.25rem; right: -0.25rem;
    height: 0.75rem; width: 0.75rem;
    border-radius: 9999px;
    background-color: var(--color-text-primary);
    border: 2px solid var(--color-bg-page);
}

/* Search Input */
.search-container {
    position: relative;
    height: 2.5rem;
    width: 2.5rem; /* Collapsed width */
    transition: width 0.3s ease-in-out;
}
.search-input {
    position: absolute; top: 0; right: 0;
    height: 100%;
    width: 100%; /* Take full width of parent */
    font-size: 0.875rem;
    color: var(--color-text-primary);
    background-color: var(--color-bg-page);
    border: 2px solid transparent; /* Border is transparent when collapsed */
    border-radius: var(--button-border-radius);
    transition: opacity 0.3s ease-in-out, border-color 0.3s ease-in-out, padding 0.3s ease-in-out;
    padding: 0.5rem 0.75rem;
    opacity: 0;
    pointer-events: none;
}
.search-input::placeholder { color: var(--color-text-secondary); }
.search-input:focus { outline: none; box-shadow: 0 0 0 2px var(--color-bg-page), 0 0 0 4px var(--color-accent-border); }

.search-container.is-expanded {
    width: 12rem; /* Expanded width for mobile */
}
.search-container.is-expanded .search-input {
    border-color: var(--color-panel-border);
    padding: 0.5rem 2.75rem 0.5rem 1rem;
    opacity: 1;
    pointer-events: auto;
}
@media (min-width: 768px) {
    .search-container.is-expanded {
        width: 14rem; /* Expanded width for desktop */
    }
}
.search-toggle-button {
    position: absolute;
    top: 0; right: 0;
    z-index: 10;
    height: 2.5rem; width: 2.5rem;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-text-secondary);
    border-radius: var(--button-border-radius);
    transition: all 0.2s;
    border: none;
    cursor: pointer;
    background-color: transparent;
}
.search-toggle-button:focus { outline: none; box-shadow: 0 0 0 2px var(--color-bg-page), 0 0 0 4px var(--color-accent-border); }
.search-toggle-button:hover { background-color: rgba(var(--color-yellow-strong-rgb), 0.18); }
.search-container.is-expanded .search-toggle-button {
    border-color: transparent;
    background-color: transparent;
}
.search-toggle-button svg { width: 1.25rem; height: 1.25rem; }

/* Tag Filter Dropdown */
.tag-filter-container { position: relative; }
.tag-filter-menu {
    position: absolute; right: 0; margin-top: 0.5rem; width: 12rem;
    background-color: var(--color-panel-bg);
    border: 1px solid var(--color-panel-border);
    border-radius: var(--panel-border-radius);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    z-index: 10;
    max-height: 15rem; overflow-y: auto;
}
.tag-filter-item {
    display: block; width: 100%; text-align: left; padding: 0.5rem 1rem;
    font-size: 0.875rem; color: var(--color-text-primary);
    transition: background-color 0.2s;
    text-transform: capitalize;
    text-decoration: none;
}
.tag-filter-item:hover { background-color: rgba(var(--color-accent-bg-rgb), 0.5); }
.tag-filter-item.selected { font-weight: 700; background-color: rgba(var(--color-accent-bg-rgb), 0.8); }

/* --- POST LIST: TIMELINE STYLE --- */
.timeline-list { margin-top: 1rem; }
.timeline-item {
    position: relative;
    padding-bottom: 1.5rem;
    padding-left: 8rem;
    cursor: pointer;
    text-decoration: none;
}
.timeline-date {
    position: absolute;
    left: 0;
    top: 0;
    width: 6rem;
    padding-right: 1.5rem;
    text-align: right;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    font-family: var(--font-sans);
    transition: color 0.2s;
}
.timeline-item:hover .timeline-date {
    color: var(--color-accent-border);
}
.timeline-marker {
    position: absolute;
    left: 5.25rem;
    top: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    border: 2px solid var(--color-panel-border);
    background-color: var(--color-bg-page);
    transition: border-color 0.2s;
}
.timeline-item:hover .timeline-marker {
    border-color: var(--color-accent-border);
}
.timeline-marker-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: var(--color-panel-border);
    transform: translate(-50%, -50%);
    transition: background-color 0.2s;
}
.timeline-item:hover .timeline-marker-dot {
    background-color: var(--color-yellow-strong);
}

/* Timeline Line */
.timeline-line {
    position: absolute;
    background-color: var(--color-panel-border);
    width: var(--panel-border-width);
    left: calc(5.875rem - (var(--panel-border-width) / 2));
    top: 1.25rem;
    height: calc(100% - 1.25rem);
}

.post-title-timeline {
    font-size: 1.25rem;
    font-weight: 800;
    transition: color 0.2s;
    line-height: 1.25rem; /* Align with marker height */
}
.timeline-item-body { margin-top: 0.25rem; }
.timeline-item-body .post-excerpt { font-size: 0.875rem; color: rgba(var(--color-text-primary-rgb), 0.9); font-family: var(--font-serif); transition: color 0.2s; }

.timeline-item:hover .post-title-timeline,
.timeline-item:hover .timeline-item-body .post-excerpt {
    color: var(--color-accent-border);
}


/* --- POST VIEW --- */
.post-view-container { max-width: 48rem; margin: 0 auto; }

.back-to-list-link {
    display: inline-flex; align-items: center;
    font-size: 0.875rem; color: var(--color-text-secondary);
    margin-bottom: 1rem;
    transition: color 0.2s;
    text-decoration: none;
}
.back-to-list-link:hover { color: var(--color-text-primary);}
.back-to-list-link svg { width: 1rem; height: 1rem; margin-right: 0.5rem; transition: transform 0.2s; }
.back-to-list-link:hover svg { transform: translateX(-0.25rem); }

.post-header { padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--color-panel-border); }
.post-header h1 { font-size: 2.25rem; line-height: 1.2; letter-spacing: -0.025em; }
@media (min-width: 768px) {
    .post-header h1 { font-size: 3rem; }
}
.post-meta { margin-top: 0.75rem; font-size: 0.875rem; color: var(--color-text-secondary); }
.post-header .tag-list { margin-top: 1rem; }

.post-banner-figure {
    margin-bottom: 2rem;
    border-radius: var(--panel-border-radius);
    overflow: hidden;
}
.post-banner-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.post-content {
    font-family: var(--font-serif);
    font-size: 1.125rem; line-height: 1.6;
    text-align: justify;
}
.post-content > * + * { margin-top: 1.25em; }
.post-content .post-lede { font-size: 1.25rem; color: var(--color-text-secondary); margin-bottom: 2rem !important; }
.post-content strong { font-weight: 700; }
.post-content em { font-style: italic; }
.content-inline-equation { font-family: monospace; background-color: rgba(var(--color-accent-bg-rgb), 0.5); padding: 0.125rem 0.25rem; border-radius: 0.25rem; }
.content-equation-block {
    margin: 1.5rem 0; padding: 1rem;
    background-color: rgba(var(--color-accent-bg-rgb), 0.5);
    border-radius: var(--panel-border-radius);
    text-align: center; font-family: monospace; font-size: 1.25rem;
    overflow-x: auto;
}
.content-figure { margin: 1.5rem 0; text-align: center; }
.post-content img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: auto;
}
/* Tighter spacing between image and inline <em> caption within the same paragraph */
.post-content p > img { margin-bottom: 0.25rem; }
/* For images without explicit width/height attributes, fill available content width */
.post-content img:not([width]):not([height]) {
    width: 100%;
    max-width: 100%;
}
/* Center captions authored as <em> after a line break following an image */
.post-content p > img + br { display: none; }
.post-content p > img + br + em {
    display: block;
    text-align: center;
    color: var(--color-text-secondary);
    font-style: italic;
    margin-top: 0.25rem;
}
.content-figure-placeholder {
    width: 100%; padding: 3rem 0;
    border: 2px dashed var(--color-panel-border);
    border-radius: var(--panel-border-radius);
    background-color: rgba(var(--color-accent-bg-rgb), 0.5);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-text-secondary); font-style: italic;
}
.content-figure figcaption { margin-top: 0.75rem; font-size: 0.875rem; color: var(--color-text-secondary); font-style: italic; }

/* --- LISTS --- */
.post-content ul,
.post-content ol {
    margin: 1rem 0 1rem 1.5rem; /* top/right/bottom + base left indent */
    padding-left: 0.5rem;       /* readable gap between marker and text */
}
.post-content ul { list-style: disc; list-style-position: outside; }
.post-content ul ul { list-style: circle; margin-top: 0.5rem; }
.post-content ul ul ul { list-style: square; }
.post-content ol { list-style: decimal; list-style-position: outside; }
.post-content li { margin: 0.375rem 0; }
.post-content li > p { margin: 0; }
.post-content ol li::marker { font-weight: 700; color: var(--color-text-secondary); }

/* --- ADMONITIONS / CALLOUTS --- */
.post-content .admonition {
    margin: 1.25rem 0;
    padding: 0;
    border: none;
    border-radius: var(--panel-border-radius);
    background-color: var(--color-panel-bg);
    box-shadow: none;
    overflow: hidden;
    position: relative;
}
.post-content .admonition::before {
    display: none;
}
.post-content .admonition .admonition-title {
    display: flex; align-items: center; gap: 0.5rem;
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 0.9375rem;
    padding: 0.75rem 1.5rem 0.5rem 1.5rem;
}
.post-content .admonition .admonition-title .admonition-title-icon {
    width: 1rem; height: 1rem;
}
/* Support default python-markdown structure: content has no wrapper */
.post-content .admonition > :not(.admonition-title) {
    padding-left: 2.75rem;
    padding-right: 2.75rem;
}
/* Remove extra top margin right after the title */
.post-content .admonition .admonition-title + * { margin-top: 0; }
.post-content .admonition .admonition-content > *:first-child {
    margin-top: 0;
}
.post-content .admonition .admonition-content > *:last-child {
    margin-bottom: 0;
}
.post-content .admonition .admonition-content p {
    margin: 0.375rem 0 0.625rem;
}
/* Default python-markdown structure: content may not be wrapped */
.post-content .admonition > p:not(.admonition-title) {
    margin: 0.375rem 0 0.625rem;
}
/* Add a bit of bottom padding so content doesn't touch the border */
.post-content .admonition .admonition-content { padding-bottom: 0.75rem; }
.post-content .admonition > :not(.admonition-title):last-child { padding-bottom: 0.75rem; }
/* Base type hook to color header and border */
.post-content .admonition.note { background-color: rgba(var(--callout-note-rgb), 0.12); }
.post-content .admonition.note::before { background-color: rgb(var(--callout-note-rgb)); }

.post-content .admonition.abstract { background-color: rgba(var(--callout-abstract-rgb), 0.12); }
.post-content .admonition.abstract::before { background-color: rgb(var(--callout-abstract-rgb)); }

.post-content .admonition.info { background-color: rgba(var(--callout-info-rgb), 0.12); }
.post-content .admonition.info::before { background-color: rgb(var(--callout-info-rgb)); }

.post-content .admonition.todo { background-color: rgba(var(--callout-todo-rgb), 0.12); }
.post-content .admonition.todo::before { background-color: rgb(var(--callout-todo-rgb)); }

.post-content .admonition.tip { background-color: rgba(var(--callout-tip-rgb), 0.12); }
.post-content .admonition.tip::before { background-color: rgb(var(--callout-tip-rgb)); }

.post-content .admonition.success { background-color: rgba(var(--callout-success-rgb), 0.12); }
.post-content .admonition.success::before { background-color: rgb(var(--callout-success-rgb)); }

.post-content .admonition.question { background-color: rgba(var(--callout-question-rgb), 0.12); }
.post-content .admonition.question::before { background-color: rgb(var(--callout-question-rgb)); }

.post-content .admonition.warning { background-color: rgba(var(--callout-warning-rgb), 0.12); }
.post-content .admonition.warning::before { background-color: rgb(var(--callout-warning-rgb)); }

.post-content .admonition.caution { background-color: rgba(var(--callout-caution-rgb), 0.12); }
.post-content .admonition.caution::before { background-color: rgb(var(--callout-caution-rgb)); }

.post-content .admonition.failure { background-color: rgba(var(--callout-failure-rgb), 0.12); }
.post-content .admonition.failure::before { background-color: rgb(var(--callout-failure-rgb)); }

.post-content .admonition.danger { background-color: rgba(var(--callout-danger-rgb), 0.12); }
.post-content .admonition.danger::before { background-color: rgb(var(--callout-danger-rgb)); }

.post-content .admonition.bug { background-color: rgba(var(--callout-bug-rgb), 0.12); }
.post-content .admonition.bug::before { background-color: rgb(var(--callout-bug-rgb)); }

.post-content .admonition.example { background-color: rgba(var(--callout-example-rgb), 0.12); }
.post-content .admonition.example::before { background-color: rgb(var(--callout-example-rgb)); }

.post-content .admonition.quote { background-color: rgba(var(--callout-quote-rgb), 0.12); }
.post-content .admonition.quote::before { background-color: rgb(var(--callout-quote-rgb)); }
.post-content .admonition.quote .admonition-content { font-style: italic; }

/* Icons using CSS masks for crisp scaling */
.post-content .admonition .admonition-title::before {
    content: '';
    display: inline-block;
    width: 1.125rem; height: 1.125rem;
    background-color: currentColor;
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
}

/* Apply icons and colors to each callout type */
.post-content .admonition.note .admonition-title { color: rgb(var(--callout-note-rgb)); }
.post-content .admonition.note .admonition-title::before { -webkit-mask-image: var(--icon-note); mask-image: var(--icon-note); }

.post-content .admonition.abstract .admonition-title { color: rgb(var(--callout-abstract-rgb)); }
.post-content .admonition.abstract .admonition-title::before { -webkit-mask-image: var(--icon-abstract); mask-image: var(--icon-abstract); }

.post-content .admonition.info .admonition-title { color: rgb(var(--callout-info-rgb)); }
.post-content .admonition.info .admonition-title::before { -webkit-mask-image: var(--icon-info); mask-image: var(--icon-info); }

.post-content .admonition.todo .admonition-title { color: rgb(var(--callout-todo-rgb)); }
.post-content .admonition.todo .admonition-title::before { -webkit-mask-image: var(--icon-todo); mask-image: var(--icon-todo); }

.post-content .admonition.tip .admonition-title { color: rgb(var(--callout-tip-rgb)); }
.post-content .admonition.tip .admonition-title::before { -webkit-mask-image: var(--icon-tip); mask-image: var(--icon-tip); }

.post-content .admonition.success .admonition-title { color: rgb(var(--callout-success-rgb)); }
.post-content .admonition.success .admonition-title::before { -webkit-mask-image: var(--icon-success); mask-image: var(--icon-success); }

.post-content .admonition.question .admonition-title { color: rgb(var(--callout-question-rgb)); }
.post-content .admonition.question .admonition-title::before { -webkit-mask-image: var(--icon-question); mask-image: var(--icon-question); }

.post-content .admonition.warning .admonition-title { color: rgb(var(--callout-warning-rgb)); }
.post-content .admonition.warning .admonition-title::before { -webkit-mask-image: var(--icon-warning); mask-image: var(--icon-warning); }

.post-content .admonition.caution .admonition-title { color: rgb(var(--callout-caution-rgb)); }
.post-content .admonition.caution .admonition-title::before { -webkit-mask-image: var(--icon-warning); mask-image: var(--icon-warning); }

.post-content .admonition.failure .admonition-title { color: rgb(var(--callout-failure-rgb)); }
.post-content .admonition.failure .admonition-title::before { -webkit-mask-image: var(--icon-failure); mask-image: var(--icon-failure); }

.post-content .admonition.danger .admonition-title { color: rgb(var(--callout-danger-rgb)); }
.post-content .admonition.danger .admonition-title::before { -webkit-mask-image: var(--icon-danger); mask-image: var(--icon-danger); }

.post-content .admonition.bug .admonition-title { color: rgb(var(--callout-bug-rgb)); }
.post-content .admonition.bug .admonition-title::before { -webkit-mask-image: var(--icon-bug); mask-image: var(--icon-bug); }

.post-content .admonition.example .admonition-title { color: rgb(var(--callout-example-rgb)); }
.post-content .admonition.example .admonition-title::before { -webkit-mask-image: var(--icon-example); mask-image: var(--icon-example); }

.post-content .admonition.quote .admonition-title { color: rgb(var(--callout-quote-rgb)); }
.post-content .admonition.quote .admonition-title::before { -webkit-mask-image: var(--icon-quote); mask-image: var(--icon-quote); }

/* --- TABLES --- */
.post-content table {
    width: 100%;
    max-width: 100%;
    margin: 2rem auto;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    background-color: var(--color-panel-bg);
    border: 1px solid var(--color-panel-border);
    border-radius: var(--panel-border-radius);
    overflow: hidden;
}
.post-content table thead {
    background-color: rgba(var(--color-accent-bg-rgb), 0.5);
}
.post-content table th {
    padding: 0.875rem 1rem;
    text-align: left;
    font-weight: 700;
    color: var(--color-text-primary);
    border-bottom: 2px solid var(--color-panel-border);
}
.post-content table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-panel-border);
    color: var(--color-text-primary);
}
.post-content table tbody tr:last-child td {
    border-bottom: none;
}
.post-content table tbody tr:hover {
    background-color: rgba(var(--color-accent-bg-rgb), 0.3);
}
@media (max-width: 768px) {
    .post-content table {
        font-size: 0.875rem;
    }
    .post-content table th,
    .post-content table td {
        padding: 0.625rem 0.75rem;
    }
}

/* --- CODE BLOCKS --- */
.post-content code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background-color: var(--color-code-bg);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    color: var(--color-text-primary);
}
.post-content pre {
    position: relative;
    margin: 2rem 0;
    padding: 0;
    background-color: var(--color-code-bg);
    border: 1px solid var(--color-code-border);
    border-radius: var(--panel-border-radius);
    overflow: hidden;
}
.post-content pre code {
    display: block;
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    background-color: transparent;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-text-primary);
}
/* Copy button for code blocks */
.post-content pre::before {
    content: 'Copy';
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.375rem 0.75rem;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    background-color: var(--color-panel-bg);
    border: 1px solid var(--color-panel-border);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
}
.post-content pre:hover::before {
    color: var(--color-text-primary);
    background-color: rgba(var(--color-accent-bg-rgb), 0.7);
}
.post-content pre.copied::before {
    content: 'Copied!';
    color: var(--color-panel-bg);
    background-color: var(--color-text-primary);
}
/* Syntax highlighting for code blocks */
.post-content pre code .hljs-comment,
.post-content pre code .hljs-quote {
    color: #78716c;
    font-style: italic;
}
.post-content pre code .hljs-keyword,
.post-content pre code .hljs-selector-tag,
.post-content pre code .hljs-subst {
    color: #dc2626;
    font-weight: 600;
}
.post-content pre code .hljs-number,
.post-content pre code .hljs-literal,
.post-content pre code .hljs-variable,
.post-content pre code .hljs-template-variable {
    color: #ea580c;
}
.post-content pre code .hljs-string,
.post-content pre code .hljs-doctag {
    color: #16a34a;
}
.post-content pre code .hljs-title,
.post-content pre code .hljs-section,
.post-content pre code .hljs-selector-id {
    color: #2563eb;
    font-weight: 600;
}
.post-content pre code .hljs-type,
.post-content pre code .hljs-class .hljs-title {
    color: #9333ea;
    font-weight: 600;
}
.post-content pre code .hljs-tag,
.post-content pre code .hljs-name,
.post-content pre code .hljs-attribute {
    color: #0891b2;
    font-weight: 600;
}
.post-content pre code .hljs-function {
    color: #2563eb;
}
.post-content pre code .hljs-built_in,
.post-content pre code .hljs-builtin-name {
    color: #db2777;
}
@media (max-width: 768px) {
    .post-content pre code {
        padding: 1rem;
        font-size: 0.8125rem;
    }
}

.post-footer { margin-top: 3.5rem; }

.newsletter-section { padding-bottom: 2rem; text-align: center; }
.newsletter-section h3 { font-size: 1.125rem; font-weight: 800; margin-bottom: 0.5rem; }
.newsletter-section p { font-family: var(--font-serif); color: var(--color-text-secondary); margin-bottom: 1rem; }

.newsletter-form:focus-within { border-color: var(--color-yellow-strong); }
.newsletter-privacy { font-size: 0.75rem; color: var(--color-text-secondary); margin-top: 0.5rem; margin-bottom: 0; }
.newsletter-input {
    flex: 1;
    width: 40%;
    padding: 0.625rem 1rem;
    padding-right: 2rem; /* avoid overlap with angled button wedge */
    font-size: 0.875rem;
    color: var(--color-text-primary);
    background-color: var(--color-bg-page);
    border: 2px solid var(--color-text-primary);
    border-right: none; /* remove right border to join with diagonal */
    border-radius: var(--button-border-radius) 0 0 var(--button-border-radius);
}
.newsletter-input::placeholder { color: var(--color-text-secondary); }
.newsletter-input:focus { outline: none; box-shadow: inset 0 0 0 4px var(--color-code-border); }
.newsletter-button {
    padding: 0.625rem 1.5rem;
    padding-left: 0.475rem; /* reduce left spacing before text */
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    background-color: var(--color-yellow-strong);
    border: 2px solid var(--color-text-primary);
    border-left: none; /* remove left border to join with diagonal */
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
    position: relative; 
    border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
}
.newsletter-button:hover { background-color: var(--color-subscribe-hover); }
.newsletter-button:hover::before { background-color: var(--color-subscribe-hover); }

/* Remove focus accent from button; only input is accented */

/* Angled join between input and button */
.newsletter-button::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -1.25rem; /* extend into input area */
    width: 1.75rem;
    height: calc(100% + 4px);
    background-color: var(--color-yellow-strong);
    transform: skewX(-22deg);
    transition: background-color 0.2s;
    border: 2px solid var(--color-text-primary);
    border-right: none;
    box-sizing: border-box;
}

.post-footer-actions.with-border { border-top: 1px solid var(--color-panel-border); padding-top: 1.5rem; }
.post-footer-actions {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem;
}
.share-section { display: flex; align-items: center; gap: 1rem; }
.share-section p { font-size: 0.875rem; font-weight: 600; font-family: var(--font-sans); }
.share-links { display: flex; align-items: center; gap: 0.5rem; }
.share-link-item {
    display: block; padding: 0.5rem; border-radius: 9999px;
    background-color: rgba(var(--color-accent-bg-rgb), 0.5);
    transition: background-color 0.2s;
    text-decoration: none;
}
.share-link-item:hover { background-color: rgba(255,215, 0, 0.4); }
.share-link-item svg { width: 1.25rem; height: 1.25rem; color: var(--color-text-secondary); display: block; }

.pagination-nav { display: flex; align-items: center; gap: 0.5rem; }
.pagination-button {
    display: inline-flex; align-items: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-panel-border);
    border-radius: var(--button-border-radius);
    transition: background-color 0.2s, color 0.2s;
    text-decoration: none;
}
.pagination-button:hover { background-color: rgba(var(--color-yellow-strong-rgb), 0.12); color: var(--color-text-primary); border-color: var(--color-code-border); }
.pagination-button svg { width: 1rem; height: 1rem; }
/* Left button */
.pagination-button:first-child svg { margin-right: 0.5rem; }
/* Right button */
.pagination-button:last-child svg { margin-left: 0.5rem; }

/* --- PRIVACY POLICY PAGE --- */
.privacy-article { max-width: 48rem; margin: 0 auto; }
.privacy-header { padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--color-panel-border); }
.privacy-header h1 { font-size: 2.25rem; line-height: 1.2; letter-spacing: -0.025em; }
.privacy-date { margin-top: 0.75rem; font-size: 0.875rem; color: var(--color-text-secondary); }
.privacy-content { font-family: var(--font-serif); font-size: 1rem; line-height: 1.8; text-align: justify; }
.privacy-content > * + * { margin-top: 1.25em; }
.privacy-content h2 { font-family: var(--font-sans); font-size: 1.5rem; font-weight: 800; margin-top: 2rem; margin-bottom: 0.75rem; }
.privacy-content ul { list-style: disc; margin-left: 1.5rem; padding-left: 0.5rem; }
.privacy-content li { margin-bottom: 0.5rem; }
.privacy-content strong { font-weight: 700; }

/* --- BACK TO TOP BUTTON --- */
.back-to-top-button {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 50;
    padding: 0.75rem;
    background-color: var(--color-panel-bg);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-panel-border);
    border-radius: 9999px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    opacity: 0;
    transform: translateY(0.5rem);
    visibility: hidden;
}
.back-to-top-button.visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}
.back-to-top-button:hover {
    background-color: rgba(var(--color-yellow-strong-rgb), 0.15);
    transform: translateY(-0.25rem);
}
.back-to-top-button svg { width: 1.5rem; height: 1.5rem; }

/* --- SCRIPT-CONTROLLED --- */
.hidden { display: none; }

/* --- 404 PAGE --- */
.not-found {
    min-height: calc(100vh - 20rem); 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.not-found-title {
    font-size: clamp(6rem, 18vw, 14rem);
    line-height: 1;
    letter-spacing: -0.04em;
    font-weight: 900;
}
.not-found-subtitle {
    margin-top: 0.5rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--color-text-secondary);
}