/* ── Base ── */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.organic-shape {
    position: absolute;
    z-index: 0;
    filter: blur(2px);
    pointer-events: none;
}

.blob {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

/* ── Blob floating animations ── */
@keyframes blob-float-1 {
    0%,100% { transform: translate(0,0) scale(1);    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    33%      { transform: translate(18px,-22px) scale(1.05); border-radius: 40% 60% 55% 45% / 50% 65% 35% 55%; }
    66%      { transform: translate(-12px,14px) scale(0.97); border-radius: 70% 30% 45% 55% / 35% 55% 65% 45%; }
}
@keyframes blob-float-2 {
    0%,100% { transform: translate(0,0) scale(1);    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
    40%      { transform: translate(-20px,16px) scale(1.08); border-radius: 55% 45% 40% 60% / 60% 40% 70% 30%; }
    70%      { transform: translate(10px,-18px) scale(0.95); border-radius: 45% 55% 60% 40% / 40% 70% 30% 60%; }
}
@keyframes blob-float-3 {
    0%,100% { transform: translate(0,0) scale(1);    border-radius: 50% 60% 30% 70% / 40% 50% 60% 50%; }
    50%      { transform: translate(16px,20px) scale(1.06); border-radius: 65% 35% 50% 50% / 55% 45% 40% 60%; }
}
@keyframes blob-float-4 {
    0%,100% { transform: translate(0,0) scale(1);    border-radius: 60% 30% 50% 40% / 50% 60% 40% 60%; }
    45%      { transform: translate(-14px,-10px) scale(1.04); border-radius: 40% 60% 35% 65% / 60% 40% 55% 45%; }
}
@keyframes blob-float-5 {
    0%,100% { transform: translate(0,0) scale(1);    border-radius: 40% 60% 50% 50% / 60% 40% 60% 40%; }
    55%      { transform: translate(12px,-14px) scale(1.07); border-radius: 55% 45% 65% 35% / 45% 55% 45% 55%; }
}

/* ── Hero entrance animations ── */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.hero-badge    { animation: fade-up .6s ease both;  animation-delay: .1s; }
.hero-headline { animation: fade-up .7s ease both;  animation-delay: .25s; }
.hero-sub      { animation: fade-up .7s ease both;  animation-delay: .4s; }
.hero-ctas     { animation: fade-up .7s ease both;  animation-delay: .55s; }

/* ── Scroll-reveal ── */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .65s ease, transform .65s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }

/* ── Blog listing cards ── */
.blog-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}

/* ── Post content typography ── */
.post-content {
    font-size: 1.125rem;
    line-height: 1.8;
    color: #2d2f2c;
}
.post-content h2 {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 1.875rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    letter-spacing: -0.025em;
    color: #2d2f2c;
}
.post-content h3 {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: #2d2f2c;
}
.post-content p {
    margin-bottom: 1.5rem;
}
.post-content a {
    color: #006a2b;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.post-content a:hover {
    color: #005d25;
}
.post-content ul,
.post-content ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}
.post-content li {
    margin-bottom: 0.5rem;
}
.post-content blockquote {
    border-left: 3px solid #006a2b;
    padding-left: 1.25rem;
    margin: 1.5rem 0;
    color: #5a5c58;
    font-style: italic;
}
.post-content img {
    border-radius: 1rem;
    margin: 2rem 0;
}
.post-content pre {
    background: #1a1f1a;
    color: #e2e3dd;
    border-radius: 0.75rem;
    padding: 1.25rem;
    overflow-x: auto;
    margin: 1.5rem 0;
    font-size: 0.9rem;
}
.post-content code {
    background: #e8e9e3;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.9em;
}
.post-content pre code {
    background: none;
    padding: 0;
    border-radius: 0;
}

/* Ghost-specific card styles (bookmarks, galleries, etc.) */
.kg-image-card img {
    border-radius: 1rem;
}
.kg-bookmark-card {
    border: 1px solid #e2e3dd;
    border-radius: 1rem;
    overflow: hidden;
}

/* Ghost wide/full image cards */
.post-content .kg-width-wide {
    position: relative;
    width: 85vw;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1040px;
    margin: 2rem auto;
}
.post-content .kg-width-full {
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    margin: 2rem auto;
}
.post-content .kg-width-full img,
.post-content .kg-width-wide img {
    width: 100%;
    border-radius: 1rem;
}
.post-content .kg-width-full img {
    border-radius: 0;
}

/* Ghost gallery card */
.kg-gallery-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 2rem 0;
}
.kg-gallery-row {
    display: flex;
    gap: 0.75rem;
}
.kg-gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}