/* --- CSS Variables (Matching Tailwind Stone Palette) --- */
:root {
    --bg-color: #fcfbf9;
    --text-900: #1c1917;
    --text-800: #292524;
    --text-600: #57534e;
    --text-500: #78716c;
    --text-400: #a8a29e;
    --text-300: #d6d3d1;
    --text-200: #e7e5e4;
    --text-100: #f5f5f4;
    --border-color: #d6d3d1;

    --font-serif: 'Georgia', 'Cambria', 'Times New Roman', Times, serif;
    --font-sans: system-ui, -apple-system, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* --- Reset & Base --- */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background-color: var(--bg-color);
    color: var(--text-800);
    font-family: var(--font-sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

::selection {
    background: var(--border-color);
    color: var(--text-900);
}

/* --- Layout Utilities --- */
.container {
    max-width: 48rem; /* ~768px */
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-4 { gap: 1rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mt-8 { margin-top: 2rem; }

/* --- Typography --- */
h1, h2, h3 { font-family: var(--font-serif); color: var(--text-900); }

.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }

.font-mono { font-family: var(--font-mono); }
.font-serif { font-family: var(--font-serif); }
.font-bold { font-weight: 700; }

.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.05em; }
.tracking-tight { letter-spacing: -0.025em; }

/* --- Specific Components --- */

/* Texture Overlay */
.texture-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.4;
    mix-blend-mode: multiply;
}

/* Navigation */
nav {
    padding: 2rem 0;
    margin-bottom: 3rem;
    border-bottom: 1px solid var(--border-color);
}
.nav-title {
    cursor: pointer;
    text-decoration: none;
}
.nav-title:hover h1 { color: var(--text-600); }
.nav-icons a {
    color: var(--text-500);
    transition: color 0.2s;
}
.nav-icons a:hover { color: var(--text-900); }

/* Post List Item */
.post-item {
    cursor: pointer;
    display: block;
    text-decoration: none;
}
.post-item:hover h2 { color: var(--text-600); }
.post-item:hover .read-link { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--text-400); }

.post-meta {
    color: var(--text-500);
    display: flex;
    justify-content: space-between;
}
.read-link {
    display: flex;
    align-items: center;
    color: var(--text-800);
    font-size: 0.75rem;
}

/* Blog Post Detail */
.back-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-500);
    display: flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0;
    transition: color 0.2s;
}
.back-btn:hover { color: var(--text-900); }
.back-btn svg { margin-right: 0.5rem; transition: transform 0.2s; }
.back-btn:hover svg { transform: translateX(-4px); }

.tag {
    background-color: var(--text-200);
    color: var(--text-600);
    padding: 0.25rem 0.5rem;
    border-radius: 2px;
    font-size: 0.75rem;
    margin-right: 0.5rem;
}

/* Typography Content (Prose) */
.prose p { margin-bottom: 1.5rem; color: var(--text-800); font-size: 1.125rem; }
.prose h3 { margin-top: 2rem; margin-bottom: 1rem; font-size: 1.5rem; }
.prose blockquote {
    border-left: 4px solid var(--text-400);
    padding-left: 1rem;
    margin: 2rem 0;
    font-style: italic;
    color: var(--text-600);
}

/* Styled Lists */
.prose ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.5rem;
}
.prose li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-800);
    font-size: 1.125rem;
}
.prose li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6rem;
    width: 6px;
    height: 6px;
    background-color: var(--text-400);
    border-radius: 1px; /* Soft square */
}

.prose img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 4px;
    margin-top: 2rem;
    margin-bottom: 2rem;
}


/* Syntax Highlighting Overrides (To match Stone theme) */
.prose pre[class*="language-"] {
    background-color: var(--text-100) !important;
    border: 1px solid var(--text-200);
    border-radius: 4px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    text-shadow: none !important;
    font-family: var(--font-mono) !important;
    font-size: 0.875rem;
}

.prose code[class*="language-"],
.prose pre[class*="language-"] {
    color: var(--text-800) !important; /* Default code text */
}

/* Customize Prism Tokens for Stone Palette */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: var(--text-400) !important;
}

.token.punctuation {
    color: var(--text-500) !important;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
    color: #b91c1c !important; /* Muted Red */
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
    color: #0f766e !important; /* Muted Teal */
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
    color: var(--text-600) !important;
    background: transparent !important;
}

.token.atrule,
.token.attr-value,
.token.keyword {
    color: #0369a1 !important; /* Muted Blue */
}

.token.function,
.token.class-name {
    color: #b45309 !important; /* Muted Amber */
}

/* Inline code styled simply */
.prose :not(pre) > code {
    background-color: var(--text-200);
    padding: 0.1rem 0.3rem;
    border-radius: 2px;
    font-size: 0.9em;
    font-family: var(--font-mono);
    color: var(--text-900);
}

/* Footer */
footer {
    margin-top: auto;
    padding: 2rem 0;
    border-top: 1px solid var(--border-color);
    color: var(--text-500);
}
footer a { color: inherit; text-decoration: none; margin-left: 1rem; }
footer a:hover { color: var(--text-900); }

/* Utilities */
.hidden { display: none; }
.fade-in { animation: fadeIn 0.5s ease-out; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Contact Box */
.contact-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.75rem 2rem;
    border-radius: 4px;
    border: 1px solid var(--text-200);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(252, 251, 249, 0.9));
    box-shadow: 0 12px 35px rgba(28, 25, 23, 0.04);
    flex-wrap: wrap;
}
.contact-box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.5);
    pointer-events: none;
}
.contact-box::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    background: linear-gradient(90deg, var(--text-300), transparent 70%);
    opacity: 0.8;
}
.contact-eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-500);
    margin-bottom: 0.5rem;
}
.contact-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-900);
}
.contact-subtitle {
    color: var(--text-600);
}
.contact-box .nav-icons a { color: var(--text-500); }
.contact-box .nav-icons a:hover { color: var(--text-900); }
@media (max-width: 640px) {
    .contact-box {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.5rem;
    }
}
.btn-primary {
    background-color: var(--text-800);
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
}
.btn-primary:hover { background-color: var(--text-600); }