/* =========================================================
   ASILI DISCOVERY — ANIMALS
   Brand palette
   ========================================================= */

:root {

    --asili-green: #35351f;
    --asili-gold: #855e26;
    --asili-milk: #e4d6c5;
    --asili-bg: #34321e;

    --asili-cream: #efe5d8;
    --asili-white: #f8f4ed;

    --asili-green-dark: #292918;
    --asili-gold-light: #a77a37;

    --asili-border:
        rgba(228, 214, 197, .20);

    --asili-border-dark:
        rgba(53, 53, 31, .16);

    --asili-muted:
        rgba(228, 214, 197, .68);

    --asili-text:
        #35351f;
}


/* =========================================================
   PAGE
   ========================================================= */

.animals-page {

    background:
        var(--asili-milk);

    color:
        var(--asili-green);

}


/* =========================================================
   CONTAINER
   ========================================================= */

.animals-page .container {

    width:
        min(1250px, calc(100% - 60px));

    margin:
        0 auto;

}


/* =========================================================
   HERO
   ========================================================= */

.animals-hero {

    position:
        relative;

    background:
        var(--asili-bg);

    color:
        var(--asili-milk);

    padding:
        105px 0 115px;

    overflow:
        hidden;

}


/*
 * Decorative editorial block.
 */

.animals-hero::before {

    content:
        '';

    position:
        absolute;

    width:
        420px;

    height:
        420px;

    right:
        -150px;

    top:
        -190px;

    border:
        1px solid
        rgba(228, 214, 197, .10);

    border-radius:
        50%;

}


.animals-hero::after {

    content:
        '';

    position:
        absolute;

    width:
        240px;

    height:
        240px;

    right:
        -70px;

    top:
        -100px;

    border:
        1px solid
        rgba(133, 94, 38, .35);

    border-radius:
        50%;

}


.animals-hero .container {

    position:
        relative;

    z-index:
        2;

}


/* =========================================================
   KICKER
   ========================================================= */

.animals-page .section-kicker {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        18px;

    color:
        var(--asili-gold-light);

    font-size:
        11px;

    font-weight:
        800;

    line-height:
        1;

    text-transform:
        uppercase;

    letter-spacing:
        2px;

}


.animals-page .section-kicker::before {

    content:
        '';

    width:
        8px;

    height:
        8px;

    flex:
        0 0 8px;

    background:
        var(--asili-gold);

}


/* =========================================================
   HERO TITLE
   ========================================================= */

.animals-hero h1 {

    margin:
        0;

    color:
        var(--asili-milk);

    font-family:
        Georgia,
        'Times New Roman',
        serif;

    font-size:
        clamp(64px, 10vw, 132px);

    font-weight:
        400;

    line-height:
        .86;

    letter-spacing:
        -6px;

}


.animals-hero p {

    max-width:
        680px;

    margin:
        30px 0 0;

    color:
        rgba(228, 214, 197, .78);

    font-size:
        18px;

    line-height:
        1.75;

}


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

.animals-content {

    background:
        var(--asili-milk);

    padding:
        90px 0 110px;

}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.animals-page .section-heading {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;

    margin-bottom:
        40px;

}


.animals-page .section-heading h2 {

    margin:
        0;

    color:
        var(--asili-green);

    font-family:
        Georgia,
        'Times New Roman',
        serif;

    font-size:
        clamp(38px, 5vw, 62px);

    font-weight:
        400;

    line-height:
        .95;

    letter-spacing:
        -2px;

}


/* =========================================================
   ANIMAL GRID
   ========================================================= */

.animals-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        28px;

}


/* =========================================================
   ANIMAL CARD
   ========================================================= */

.animals-page .animal-card {

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    background:
        var(--asili-white);

    border:
        1px solid
        rgba(53, 53, 31, .10);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.animals-page .animal-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 18px 45px
        rgba(53, 53, 31, .13);

}


/* =========================================================
   CARD IMAGE
   ========================================================= */

.animals-page .animal-card__image {

    display:
        block;

    width:
        100%;

    aspect-ratio:
        4 / 3;

    overflow:
        hidden;

    background:
        var(--asili-green);

}


.animals-page .animal-card__image img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .55s ease;

}


.animals-page .animal-card:hover
.animal-card__image img {

    transform:
        scale(1.045);

}


/* =========================================================
   CARD BODY
   ========================================================= */

.animals-page .animal-card__body {

    display:
        flex;

    flex-direction:
        column;

    flex:
        1;

    padding:
        25px 25px 28px;

}


/* =========================================================
   CARD TITLE
   ========================================================= */

.animals-page .animal-card h3 {

    margin:
        0;

    font-family:
        Georgia,
        'Times New Roman',
        serif;

    font-size:
        30px;

    font-weight:
        400;

    line-height:
        1;

    letter-spacing:
        -.8px;

}


.animals-page .animal-card h3 a {

    color:
        var(--asili-green);

    text-decoration:
        none;

    transition:
        color .2s ease;

}


.animals-page .animal-card h3 a:hover {

    color:
        var(--asili-gold);

}


/* =========================================================
   SCIENTIFIC NAME
   ========================================================= */

.animals-page .animal-card__scientific {

    margin:
        9px 0 0;

    color:
        var(--asili-gold);

    font-family:
        Georgia,
        'Times New Roman',
        serif;

    font-size:
        14px;

    font-style:
        italic;

}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.animals-page .animal-card__description {

    display:
        -webkit-box;

    overflow:
        hidden;

    margin:
        18px 0 0;

    color:
        rgba(53, 53, 31, .72);

    font-size:
        14px;

    line-height:
        1.7;

    -webkit-line-clamp:
        4;

    -webkit-box-orient:
        vertical;

}


/* =========================================================
   CARD LINK
   ========================================================= */

.animals-page .animal-card__link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    width:
        fit-content;

    margin-top:
        auto;

    padding-top:
        22px;

    color:
        var(--asili-gold);

    font-size:
        10px;

    font-weight:
        900;

    text-decoration:
        none;

    text-transform:
        uppercase;

    letter-spacing:
        1.4px;

}


.animals-page .animal-card__link::after {

    content:
        '';

    width:
        25px;

    height:
        1px;

    background:
        var(--asili-gold);

    transition:
        width .25s ease;

}


.animals-page .animal-card:hover
.animal-card__link::after {

    width:
        40px;

}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.animals-page .empty-state {

    padding:
        70px 40px;

    background:
        var(--asili-green);

    color:
        var(--asili-milk);

    text-align:
        center;

}


.animals-page .empty-state h2 {

    margin:
        0;

    color:
        var(--asili-milk);

    font-family:
        Georgia,
        'Times New Roman',
        serif;

    font-size:
        38px;

    font-weight:
        400;

}


.animals-page .empty-state p {

    max-width:
        550px;

    margin:
        15px auto 0;

    color:
        rgba(228, 214, 197, .72);

    line-height:
        1.7;

}


/* =========================================================
   DARK GREEN EDITORIAL DIVIDER
   ========================================================= */

.animals-content::after {

    content:
        '';

    display:
        block;

    width:
        70px;

    height:
        5px;

    margin:
        85px auto 0;

    background:
        var(--asili-gold);

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .animals-page .container {

        width:
            min(100% - 40px, 850px);

    }


    .animals-hero {

        padding:
            85px 0 90px;

    }


    .animals-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            22px;

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .animals-page .container {

        width:
            calc(100% - 40px);

    }


    .animals-hero {

        padding:
            65px 0 75px;

    }


    .animals-hero h1 {

        font-size:
            68px;

        letter-spacing:
            -4px;

    }


    .animals-hero p {

        margin-top:
            24px;

        font-size:
            15px;

        line-height:
            1.7;

    }


    .animals-content {

        padding:
            60px 0 75px;

    }


    .animals-page .section-heading {

        margin-bottom:
            28px;

    }


    .animals-page .section-heading h2 {

        font-size:
            40px;

    }


    .animals-grid {

        grid-template-columns:
            1fr;

        gap:
            20px;

    }


    .animals-page .animal-card__body {

        padding:
            23px 22px 25px;

    }


    .animals-page .animal-card h3 {

        font-size:
            27px;

    }


    .animals-content::after {

        margin-top:
            60px;

    }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 420px) {

    .animals-page .container {

        width:
            calc(100% - 30px);

    }


    .animals-hero h1 {

        font-size:
            58px;

    }


    .animals-hero p {

        font-size:
            14px;

    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.animals-page a:focus-visible {

    outline:
        2px solid
        var(--asili-gold);

    outline-offset:
        4px;

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .animals-page .animal-card,
    .animals-page .animal-card__image img,
    .animals-page .animal-card__link::after {

        transition:
            none;

    }

}