/*=========================================================
HOME - FOLLOW THE STORY
=========================================================*/

.home_follow_story
{
    position:relative;

    width:100%;

    overflow:hidden;

    background:var(--aob-ivory);

    border-bottom:1px solid var(--aob-gold);
}


/*=========================================================
HERO - MOBILE FIRST
=========================================================*/

.home_follow_story_hero
{
    display:grid;

    width:100%;

    grid-template-columns:1fr;
    grid-template-areas:
        "copy"
        "image";

    background:var(--aob-ivory);
}


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

.home_follow_story_hero_copy
{
    grid-area:copy;

    display:flex;

    width:100%;

    padding:3rem 1.25rem;

    align-items:center;
    justify-content:center;

    background:var(--aob-ivory);
}

.home_follow_story_hero_copy_inner
{
    width:100%;
    max-width:39rem;

    text-align:center;
}

.home_follow_story_hero_copy .section_eyebrow
{
    color:var(--aob-champagne-gold);
}

.home_follow_story_hero_copy .section_divider_line
{
    background:rgba(184,138,79,0.75);
}

.home_follow_story_hero_copy .section_divider_heart
{
    color:var(--aob-champagne-gold);
}


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

.home_follow_story_hero h2
{
    max-width:37rem;

    margin:0 auto;

    color:var(--aob-black);

    font-family:var(--font_display);
    font-size:clamp(2.6rem,12vw,4.5rem);
    font-weight:500;
    letter-spacing:-0.025em;
    line-height:1.08;
}

.home_follow_story_hero_script
{
    margin:1.25rem auto 1.5rem;

    color:var(--aob-champagne-gold);

    font-family:var(--font_script);
    font-size:clamp(3.1rem,14vw,5rem);
    font-weight:400;
    line-height:0.9;
}


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

.home_follow_story_hero_button
{
    min-width:17rem;
}


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

.home_follow_story_hero_image
{
    grid-area:image;

    position:relative;

    width:100%;
    min-height:20rem;

    margin:0;

    overflow:hidden;

    background:#e5ded5;
}

.home_follow_story_hero_image::after
{
    content:"";

    position:absolute;

    inset:0;

    z-index:2;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(247,242,234,0.08),
            rgba(247,242,234,0)
        );
}

.home_follow_story_hero_image img
{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center 45%;

    transition:
        filter 450ms ease,
        transform 650ms ease;
}


/*=========================================================
SOCIAL CARD AREA
=========================================================*/

.home_follow_story_cards_container
{
    width:min(100% - 2rem,92rem);

    margin:0 auto;

    padding:2rem 0 3rem;
}

.home_follow_story_cards
{
    display:grid;

    width:100%;

    grid-template-columns:1fr;

    gap:1rem;
}


/*=========================================================
SOCIAL CARD
=========================================================*/

.home_follow_story_card
{
    display:flex;

    min-width:0;
    min-height:25rem;

    padding:2rem 1.25rem;

    flex-direction:column;
    align-items:center;

    background:rgba(255,255,255,0.18);

    border:1px solid var(--aob-gold);

    box-shadow:
        0 1.25rem 2.75rem rgba(37,23,12,0.12),
        0 0.3rem 0.85rem rgba(37,23,12,0.08);

    text-align:center;
}

.home_follow_story_card_header
{
    width:100%;
}

.home_follow_story_card_header .section_eyebrow
{
    color:var(--aob-champagne-gold);
}

.home_follow_story_card_header .section_divider_line
{
    background:rgba(184,138,79,0.72);
}

.home_follow_story_card_header .section_divider_heart
{
    color:var(--aob-champagne-gold);
}


/*=========================================================
SOCIAL ICONS
=========================================================*/

.home_follow_story_social_icon
{
    display:inline-flex;

    width:3.25rem;
    height:3.25rem;

    margin-bottom:0.8rem;

    align-items:center;
    justify-content:center;

    border:2px solid var(--aob-gold);

    border-radius:0.75rem;

    color:var(--aob-champagne-gold);

    font-family:var(--font_display);
    font-size:2.05rem;
    line-height:1;
}

.home_follow_story_facebook_icon
{
    font-family:Arial,Helvetica,sans-serif;
    font-size:2rem;
    font-weight:700;
}


/*=========================================================
SOCIAL INTRODUCTION
=========================================================*/

.home_follow_story_social_intro
{
    max-width:30rem;

    margin:0 auto 1.15rem;

    color:var(--aob-text-soft);

    font-size:0.95rem;
    line-height:1.55;
}


/*=========================================================
SOCIAL THUMBNAILS
=========================================================*/

.home_follow_story_thumbnails
{
    display:grid;

    width:100%;

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

    gap:0.5rem;
}

.home_follow_story_thumbnail
{
    position:relative;

    display:block;

    min-width:0;

    overflow:hidden;

    background:#21160f;

    border:1px solid rgba(184,138,79,0.75);

    aspect-ratio:1 / 1;
}

.home_follow_story_thumbnail img
{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        filter 350ms ease,
        transform 500ms ease;
}


/*=========================================================
TEMPORARY THUMBNAIL CROPS
=========================================================*/

.home_follow_story_thumbnail:nth-child(1) img
{
    object-position:20% 50%;
}

.home_follow_story_thumbnail:nth-child(2) img
{
    object-position:42% 50%;
}

.home_follow_story_thumbnail:nth-child(3) img
{
    object-position:64% 50%;
}

.home_follow_story_thumbnail:nth-child(4) img
{
    object-position:84% 50%;
}


/*=========================================================
CARD ACTIONS
=========================================================*/

.home_follow_story_card_action
{
    display:flex;

    width:100%;

    margin-top:auto;
    padding-top:1.5rem;

    justify-content:center;
}

.home_follow_story_card_button
{
    min-width:14rem;

    border-color:var(--aob-champagne-gold);

    color:var(--aob-black);
}

.home_follow_story_card_button:hover,
.home_follow_story_card_button:focus-visible
{
    background:var(--aob-gold);
    border-color:var(--aob-champagne-gold);
    color:var(--aob-black);
}


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

@media (min-width:30rem)
{
    .home_follow_story_hero_copy
    {
        padding:4rem 2rem;
    }

    .home_follow_story_hero_image
    {
        min-height:28rem;
    }

    .home_follow_story_cards_container
    {
        width:min(100% - 3rem,92rem);
    }

    .home_follow_story_card
    {
        min-height:25rem;

        padding:2rem 1.75rem;
    }

    .home_follow_story_thumbnails
    {
        gap:0.7rem;
    }
}


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

@media (min-width:48rem)
{
    .home_follow_story_hero_copy
    {
        padding:5rem 3rem;
    }

    .home_follow_story_hero_image
    {
        min-height:34rem;
    }

    .home_follow_story_cards_container
    {
        width:min(100% - 4rem,92rem);

        padding:2.5rem 0 3.5rem;
    }

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

        gap:1.25rem;
    }

    .home_follow_story_card
    {
        min-height:25rem;
    }

    .home_follow_story_social_intro
    {
        min-height:3rem;
    }
}


/*=========================================================
DESKTOP
=========================================================*/

@media (min-width:68rem)
{

    /*=====================================================
    FULL-WIDTH HERO
    =====================================================*/

    .home_follow_story_hero
    {
        grid-template-columns:minmax(24rem,0.82fr) minmax(0,1.48fr);
        grid-template-areas:"copy image";

        min-height:35rem;
    }

    .home_follow_story_hero_copy
    {
        padding:
            clamp(4rem,6vw,7rem)
            clamp(3rem,6vw,7rem);
    }

    .home_follow_story_hero_copy_inner
    {
        max-width:36rem;
    }

    .home_follow_story_hero h2
    {
        font-size:clamp(3.25rem,3.8vw,5rem);
    }

    .home_follow_story_hero_script
    {
        font-size:clamp(3.75rem,4.4vw,5.5rem);
    }

    .home_follow_story_hero_image
    {
        min-height:35rem;
    }


    /*=====================================================
    CREAM FADE

    The original photograph is retained.

    The photograph is flipped horizontally so the model's
    head and hair sit on the outside/right of the hero.

    Her legs sit toward the left and disappear naturally
    into the cream transition.
    =====================================================*/

    .home_follow_story_hero_image::before
    {
        content:"";

        position:absolute;

        z-index:3;

        top:0;
        bottom:0;
        left:0;

        width:clamp(7rem,10vw,11rem);

        pointer-events:none;

        background:
            linear-gradient(
                90deg,
                var(--aob-ivory) 0%,
                rgba(247,242,234,0.88) 15%,
                rgba(247,242,234,0.52) 38%,
                rgba(247,242,234,0.14) 70%,
                rgba(247,242,234,0) 100%
            );
    }


    /*=====================================================
    ORIGINAL HERO IMAGE - DESKTOP COMPOSITION

    IMPORTANT:

    The original JPG remains completely unchanged.

    scaleX(-1)
    flips the photograph horizontally.

    object-position:62% 48%
    moves the visible crop toward the model's head/hair.

    This intentionally allows more of the legs to disappear
    off the left side while retaining more hair on the right.
    =====================================================*/

    .home_follow_story_hero_image img
    {
        object-position:62% 48%;

        transform:scaleX(-1);
    }


    /*=====================================================
    TWO WIDE SOCIAL CARDS
    =====================================================*/

    .home_follow_story_cards_container
    {
        width:min(100% - 6rem,92rem);

        padding:2.75rem 0 3.75rem;
    }

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

        gap:1.75rem;
    }

    .home_follow_story_card
    {
        min-height:23rem;

        padding:2rem 2rem;
    }

    .home_follow_story_social_intro
    {
        max-width:33rem;
        min-height:0;

        margin-bottom:1.15rem;
    }

    .home_follow_story_thumbnails
    {
        max-width:35rem;

        margin-right:auto;
        margin-left:auto;

        gap:0.65rem;
    }

    .home_follow_story_card_action
    {
        padding-top:1.4rem;
    }
}


/*=========================================================
LARGE DESKTOP
=========================================================*/

@media (min-width:90rem)
{
    .home_follow_story_hero
    {
        grid-template-columns:minmax(28rem,0.84fr) minmax(0,1.5fr);

        min-height:39rem;
    }

    .home_follow_story_hero_image
    {
        min-height:39rem;
    }


    /*=====================================================
    LARGE DESKTOP IMAGE POSITION

    Keep the head/hair comfortably inside the right edge
    on wider monitors.
    =====================================================*/

    .home_follow_story_hero_image img
    {
        object-position:64% 48%;
    }


    /*=====================================================
    SOCIAL CARDS
    =====================================================*/

    .home_follow_story_cards_container
    {
        width:min(100% - 8rem,96rem);

        padding:3rem 0 4rem;
    }

    .home_follow_story_cards
    {
        gap:2rem;
    }

    .home_follow_story_card
    {
        min-height:24rem;

        padding:2.25rem 2.5rem;
    }

    .home_follow_story_thumbnails
    {
        max-width:38rem;
    }
}


/*=========================================================
HOVER - POINTER DEVICES ONLY
=========================================================*/

@media (hover:hover) and (pointer:fine)
{

    /*=====================================================
    MOBILE / TABLET HERO
    =====================================================*/

    .home_follow_story_hero_image:hover img
    {
        filter:brightness(1.025);

        transform:scale(1.012);
    }


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

    Retain the horizontal flip while applying the subtle
    hover zoom.
    =====================================================*/

    @media (min-width:68rem)
    {
        .home_follow_story_hero_image:hover img
        {
            filter:brightness(1.025);

            transform:
                scaleX(-1)
                scale(1.012);
        }
    }


    /*=====================================================
    SOCIAL THUMBNAILS
    =====================================================*/

    .home_follow_story_thumbnail:hover img,
    .home_follow_story_thumbnail:focus-visible img
    {
        filter:brightness(1.08);

        transform:scale(1.06);
    }
}


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

@media (max-width:29.99rem)
{
    .home_follow_story_hero_copy
    {
        padding:2.75rem 1rem;
    }

    .home_follow_story_hero h2
    {
        font-size:clamp(2.45rem,12vw,3.2rem);
    }

    .home_follow_story_hero_script
    {
        font-size:clamp(2.85rem,15vw,3.8rem);
    }

    .home_follow_story_hero_button
    {
        width:100%;
        min-width:0;
    }

    .home_follow_story_hero_image
    {
        min-height:18rem;
    }

    .home_follow_story_cards_container
    {
        width:min(100% - 1.25rem,92rem);

        padding:1.25rem 0 2rem;
    }

    .home_follow_story_cards
    {
        gap:0.9rem;
    }

    .home_follow_story_card
    {
        min-height:24rem;

        padding:1.75rem 1rem;
    }

    .home_follow_story_social_icon
    {
        width:3rem;
        height:3rem;

        font-size:1.9rem;
    }

    .home_follow_story_thumbnails
    {
        gap:0.35rem;
    }

    .home_follow_story_card_button
    {
        width:100%;
        min-width:0;
    }
}


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

@media (prefers-reduced-motion:reduce)
{
    .home_follow_story_hero_image img,
    .home_follow_story_thumbnail img
    {
        transition:none;
    }

    .home_follow_story_thumbnail:hover img,
    .home_follow_story_thumbnail:focus-visible img
    {
        filter:none;

        transform:none;
    }


    /*=====================================================
    RETAIN DESKTOP IMAGE FLIP

    Reduced motion removes animation only. The deliberate
    horizontal composition remains in place.
    =====================================================*/

    @media (min-width:68rem)
    {
        .home_follow_story_hero_image img,
        .home_follow_story_hero_image:hover img
        {
            filter:none;

            transform:scaleX(-1);
        }
    }
}