/* ===========================
   RESET & BASE STYLES
   =========================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #D8CCBA;
    font-family: "Nunito", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.75;
    color: #3A3028;
    overflow-x: hidden;
}

/* ===========================
   TYPOGRAPHY
   =========================== */

h1, h2, h3, h4, h5, h6 {
    font-family: "Zilla Slab", serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #3A3028;
}

h1 {
    font-size: clamp(1.8rem, 4.5vw, 3.2rem);
    line-height: 1.2;
}

h2 {
    font-size: 1.3rem;
    line-height: 1.3;
}

.section-title {
    margin-bottom: 2.5rem;
    padding-left: 1rem;
}

.card-title {
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
    color: #3A3028;
}

.card-text {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #3A3028;
}

/* Annotation style with Caveat */
.annotation {
    font-family: "Caveat", cursive;
    font-weight: 400;
    font-size: 15px;
    color: #7A6B52;
}

/* ===========================
   NAVIGATION
   =========================== */

.navigation-toggle {
    position: fixed;
    top: 1.5rem;
    left: 1.5rem;
    z-index: 100;
    cursor: pointer;
    padding: 0.5rem;
    background-color: rgba(245, 237, 224, 0.8);
    border: 1px solid #C4B8A0;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.navigation-toggle:hover {
    background-color: rgba(245, 237, 224, 1);
    box-shadow: 2px 3px 8px rgba(40, 30, 20, 0.1);
}

.mushroom-icon {
    display: block;
}

.side-nav {
    position: fixed;
    left: -250px;
    top: 0;
    width: 250px;
    height: 100vh;
    background-color: #F5EDE0;
    border-right: 1px solid #C4B8A0;
    padding: 3rem 1.5rem;
    z-index: 99;
    transition: left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.side-nav.active {
    left: 0;
}

.nav-list {
    list-style: none;
}

.nav-list li {
    margin-bottom: 1.5rem;
}

.nav-list a {
    color: #3A3028;
    text-decoration: none;
    font-size: 1rem;
    font-family: "Zilla Slab", serif;
    font-weight: 700;
    transition: color 0.2s ease;
}

.nav-list a:hover {
    color: #6B5A3E;
}

/* ===========================
   MAIN CONTENT
   =========================== */

.content {
    padding: 3rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.section {
    margin-bottom: 6rem;
}

/* ===========================
   CARD GRID & LAYOUT
   =========================== */

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    grid-auto-rows: minmax(280px, auto);
}

/* Card base styles */
.card {
    background-color: #F5EDE0;
    border: 1px solid #C4B8A0;
    border-radius: 3px;
    padding: 1.5rem;
    position: relative;
    box-shadow: 4px 6px 12px rgba(40, 30, 20, 0.15);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: rotate(var(--rot, 0deg));
    margin: -8px;
}

/* Stagger entrance animation */
.card {
    opacity: 0;
    animation: cardEnter 0.6s ease-out forwards;
}

.card:nth-child(1) { animation-delay: 0ms; }
.card:nth-child(2) { animation-delay: 40ms; }
.card:nth-child(3) { animation-delay: 80ms; }
.card:nth-child(4) { animation-delay: 120ms; }
.card:nth-child(5) { animation-delay: 160ms; }
.card:nth-child(6) { animation-delay: 200ms; }
.card:nth-child(7) { animation-delay: 240ms; }
.card:nth-child(8) { animation-delay: 280ms; }
.card:nth-child(9) { animation-delay: 320ms; }
.card:nth-child(10) { animation-delay: 360ms; }

@keyframes cardEnter {
    from {
        opacity: 0;
        transform: translateY(30px) rotate(var(--rot, 0deg));
    }
    to {
        opacity: 1;
        transform: translateY(0) rotate(var(--rot, 0deg));
    }
}

/* Hover-lift interaction */
.card:hover {
    transform: translateY(-6px) rotate(0deg);
    box-shadow: 8px 14px 28px rgba(40, 30, 20, 0.2);
    z-index: 10;
}

/* Card color variants */
.card-primary {
    background-color: #F5EDE0;
    background-image: radial-gradient(circle at 15% 20%, rgba(107, 90, 62, 0.03) 0%, transparent 50%);
}

.card-secondary {
    background-color: #F5EDE0;
    background-image: radial-gradient(circle at 85% 85%, rgba(90, 122, 80, 0.03) 0%, transparent 50%);
}

.card-accent-warm {
    background-color: #F5EDE0;
    background-image: radial-gradient(circle at 20% 80%, rgba(184, 122, 106, 0.03) 0%, transparent 50%);
}

.card-accent-cool {
    background-color: #F5EDE0;
    background-image: radial-gradient(circle at 70% 30%, rgba(90, 138, 120, 0.03) 0%, transparent 50%);
}

/* Glassmorphic cards */
.card-glass {
    background: rgba(245, 237, 224, 0.4);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(200, 190, 170, 0.3);
}

/* Coffee-stain effect for select cards */
.card:nth-child(4) {
    box-shadow:
        4px 6px 12px rgba(40, 30, 20, 0.15),
        inset 40px 40px 0 -38px rgba(140, 110, 70, 0.06);
}

.card:nth-child(8) {
    box-shadow:
        4px 6px 12px rgba(40, 30, 20, 0.15),
        inset 35px 45px 0 -36px rgba(140, 110, 70, 0.05);
}

/* ===========================
   BOTANICAL WATERMARKS
   =========================== */

.botanical-watermark {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 80px;
    height: 80px;
    opacity: 0.3;
    pointer-events: none;
}

/* Fern frond watermark */
.botanical-watermark[data-type="fern"]::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 10 L50 90 M45 40 L30 35 M45 40 L30 45 M55 40 L70 35 M55 40 L70 45 M45 60 L25 55 M45 60 L25 65 M55 60 L75 55 M55 60 L75 65" stroke="%235A7A50" stroke-width="1" fill="none"/></svg>') no-repeat center;
    background-size: contain;
}

/* Mushroom cross-section */
.botanical-watermark[data-type="mushroom"]::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="30" r="20" stroke="%235A7A50" stroke-width="1" fill="none"/><circle cx="50" cy="30" r="15" stroke="%235A7A50" stroke-width="0.5" fill="none" opacity="0.5"/><line x1="50" y1="50" x2="50" y2="85" stroke="%235A7A50" stroke-width="1"/><line x1="35" y1="60" x2="65" y2="60" stroke="%235A7A50" stroke-width="0.5" opacity="0.5"/></svg>') no-repeat center;
    background-size: contain;
}

/* Root system */
.botanical-watermark[data-type="roots"]::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 10 L50 50 M50 50 L30 75 M50 50 L50 85 M50 50 L70 75" stroke="%235A7A50" stroke-width="1" fill="none"/><circle cx="30" cy="75" r="3" fill="%235A7A50" opacity="0.3"/><circle cx="50" cy="85" r="2" fill="%235A7A50" opacity="0.3"/><circle cx="70" cy="75" r="3" fill="%235A7A50" opacity="0.3"/></svg>') no-repeat center;
    background-size: contain;
}

/* Seed pod */
.botanical-watermark[data-type="seedpod"]::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><ellipse cx="50" cy="40" rx="12" ry="18" stroke="%235A7A50" stroke-width="1" fill="none"/><line x1="50" y1="58" x2="50" y2="80" stroke="%235A7A50" stroke-width="0.8"/><circle cx="45" cy="40" r="2" fill="%235A7A50" opacity="0.4"/><circle cx="50" cy="35" r="2" fill="%235A7A50" opacity="0.4"/><circle cx="55" cy="40" r="2" fill="%235A7A50" opacity="0.4"/></svg>') no-repeat center;
    background-size: contain;
}

/* Moss clump */
.botanical-watermark[data-type="moss"]::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M30 60 Q40 40 50 50 Q60 40 70 60 Q65 75 50 85 Q35 75 30 60" stroke="%235A7A50" stroke-width="1" fill="none"/><circle cx="40" cy="55" r="2" fill="%235A7A50" opacity="0.3"/><circle cx="50" cy="65" r="2" fill="%235A7A50" opacity="0.3"/><circle cx="60" cy="55" r="2" fill="%235A7A50" opacity="0.3"/></svg>') no-repeat center;
    background-size: contain;
}

/* ===========================
   RESPONSIVE DESIGN
   =========================== */

@media (max-width: 1024px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .content {
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 640px) {
    .card-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(250px, auto);
    }

    .card {
        margin: -4px;
    }

    .section-title {
        font-size: 1.6rem;
    }

    .content {
        padding: 1.5rem 1rem;
    }

    .side-nav {
        width: 200px;
        padding: 2rem 1rem;
    }

    .nav-list li {
        margin-bottom: 1rem;
    }

    .navigation-toggle {
        top: 1rem;
        left: 1rem;
    }
}

/* ===========================
   UTILITY & ACCESSIBILITY
   =========================== */

a {
    color: inherit;
    text-decoration: none;
}

button, a {
    cursor: pointer;
}

/* Focus states for keyboard navigation */
.card:focus-visible,
.nav-list a:focus-visible,
.navigation-toggle:focus-visible {
    outline: 2px solid #6B5A3E;
    outline-offset: 2px;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .card:hover {
        transform: rotate(var(--rot, 0deg));
    }
}