:root {
    --sky-slate: #141b1f;
    --sage-muted: #829281;
    --fog-gray: #d1d7d9;
    --moss-action: #4a5d4e;
    --canvas-light: #fbfbfa;
    --ink-dark: #1c2327;
}

body {
    background-color: var(--sky-slate);
    color: var(--fog-gray);
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.font-serif { font-family: 'Playfair Display', serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; }

.nav-glass {
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    background: rgba(20, 27, 31, 0.92);
}

.whatsapp-float {
    position: fixed; bottom: 24px; right: 24px; z-index: 100;
    background-color: #25d366; color: white;
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}
@media (min-width: 768px) {
    .whatsapp-float { bottom: 40px; right: 40px; width: 60px; height: 60px; font-size: 30px; }
}
.whatsapp-float:hover { transform: scale(1.1); background-color: #128c7e; }

/* Cards ------------------------------------------------------------------ */
.journal-card img { transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease; filter: grayscale(15%); }
.journal-card:hover img { transform: scale(1.04); filter: grayscale(0); }
.journal-card .read-link span { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); display: inline-block; }
.journal-card:hover .read-link span { transform: translateX(6px); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Reading progress ------------------------------------------------------- */
#readProgress {
    position: fixed; top: 0; left: 0; height: 2px; width: 0;
    background: var(--sage-muted); z-index: 60; transition: width 0.1s linear;
}

/* Article typography ----------------------------------------------------- */
.prose-journal { color: #3a4449; font-size: 1.05rem; line-height: 1.85; }
@media (min-width: 768px) { .prose-journal { font-size: 1.125rem; } }
.prose-journal > * + * { margin-top: 1.4em; }
.prose-journal p.lead {
    font-family: 'Playfair Display', serif; font-style: italic;
    font-size: 1.35rem; line-height: 1.6; color: var(--ink-dark);
}
@media (min-width: 768px) { .prose-journal p.lead { font-size: 1.6rem; } }
.prose-journal p.lead::first-letter {
    float: left; font-size: 4.2em; line-height: 0.85;
    padding: 0.08em 0.12em 0 0; color: var(--sage-muted); font-style: normal;
}
.prose-journal h2 {
    font-family: 'Playfair Display', serif; font-style: italic;
    font-size: 1.75rem; line-height: 1.25; color: var(--ink-dark);
    margin-top: 2.2em; padding-left: 1rem; border-left: 2px solid var(--sage-muted);
}
@media (min-width: 768px) { .prose-journal h2 { font-size: 2.1rem; } }
.prose-journal strong { color: var(--ink-dark); font-weight: 600; }
.prose-journal em { color: var(--moss-action); }
.prose-journal a { color: var(--moss-action); text-decoration: underline; text-underline-offset: 3px; }
.prose-journal ul { list-style: none; padding: 0; }
.prose-journal ul li { position: relative; padding-left: 1.6rem; margin-top: 0.7em; }
.prose-journal ul li::before {
    content: ''; position: absolute; left: 0; top: 0.8em;
    width: 0.7rem; height: 1px; background: var(--sage-muted);
}
.prose-journal blockquote {
    margin: 2.4em 0; padding: 2rem 1.5rem; text-align: center;
    border-top: 1px solid rgba(130,146,129,0.4); border-bottom: 1px solid rgba(130,146,129,0.4);
    font-family: 'Playfair Display', serif; font-style: italic;
    font-size: 1.35rem; line-height: 1.55; color: var(--ink-dark);
}
@media (min-width: 768px) { .prose-journal blockquote { font-size: 1.6rem; padding: 2.5rem 3rem; } }

/* In-article photography ------------------------------------------------- */
.prose-journal .journal-figure { margin: 2.8em 0; }
.prose-journal .journal-figure img {
    width: 100%; height: auto; display: block;
    border: 1px solid rgba(0,0,0,0.05); background: #eceeea;
}
.prose-journal .journal-figure.wide img { aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 1280px) {
    .prose-journal .journal-figure.wide { margin-left: -10rem; margin-right: -10rem; }
}
.prose-journal .journal-figure.portrait { max-width: 30rem; margin-left: auto; margin-right: auto; }
.prose-journal .journal-figure.portrait img { aspect-ratio: 4 / 5; object-fit: cover; }
.prose-journal figcaption {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.35rem 1.5rem;
    margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid rgba(0,0,0,0.08);
    font-size: 0.85rem; line-height: 1.5; color: #6b7478;
    font-family: 'Playfair Display', serif; font-style: italic;
}
.journal-credit, .prose-journal figcaption .credit {
    font-family: 'JetBrains Mono', monospace; font-style: normal;
    font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: #9aa3a6;
}
.prose-journal figcaption .credit a, .journal-credit a { color: inherit; text-decoration: none; }
.prose-journal figcaption .credit a:hover, .journal-credit a:hover { color: var(--moss-action); text-decoration: underline; }