/* =====================================================
   STORY
===================================================== */

.story{

    background:#fff;

    padding:var(--space-10) 0;

}

.story .container{

    width:min(var(--container),92%);

    margin:auto;

}

.story__layout{

    display:grid;

    grid-template-columns:minmax(0,6fr) minmax(280px,4fr);

    gap:var(--space-7);

    align-items:center;

}

.story__card{

    --frame-inset-x:calc(var(--space-6) / 2);
    --frame-inset-y:calc(var(--space-6) / 2);

    position:relative;

    padding:var(--space-6);

    background:var(--color-warm-white);

    border-radius:8px;

    box-shadow:var(--shadow-soft);

    overflow:hidden;

}

.story__card > :not(.frame){

    position:relative;

    z-index:2;

}

.story__card .frame{

    opacity:1;

}

.story__eyebrow{

    font-size:13px;

    font-weight:600;

    line-height:1.4;

    letter-spacing:.12em;

    color:var(--sage);

    text-transform:uppercase;

    margin-bottom:var(--space-2);

}

.story__title{

    max-width:720px;

    font-family:var(--font-heading);

    font-size:40px;

    font-weight:600;

    line-height:1.16;

    color:var(--graphite);

    margin-bottom:var(--space-3);

}

.story__lead{

    max-width:760px;

    font-size:18px;

    line-height:1.75;

    color:var(--graphite-600);

    margin-bottom:var(--space-4);

}

.story__text{

    max-width:760px;

    display:grid;

    gap:var(--space-2);

    font-size:16px;

    line-height:1.8;

    color:var(--graphite-600);

}

.story__audience{

    padding:var(--space-4) 0;

}

.story__audience-title{

    font-family:var(--font-heading);

    font-size:28px;

    font-weight:600;

    line-height:1.2;

    color:var(--graphite);

    margin-bottom:var(--space-4);

}

.story__list{

    display:grid;

    gap:var(--space-3);

}

.story__list li{

    display:grid;

    grid-template-columns:24px minmax(0,1fr);

    align-items:start;

    gap:var(--space-2);

    font-size:17px;

    line-height:1.55;

    color:var(--graphite);

}

.story__list span{

    color:var(--sage);

    font-weight:600;

}

@media (max-width:1024px){

    .story{

        padding:var(--space-9) 0;

    }

    .story__layout{

        grid-template-columns:1fr;

        gap:var(--space-6);

    }

    .story__title{

        font-size:34px;

    }

    .story__lead{

        font-size:17px;

    }

    .story__audience{

        padding:0;

    }

    .story__audience-title{

        margin-bottom:var(--space-3);

    }

}

@media (max-width:720px){

    .story{

        padding:var(--space-8) 0;

    }

    .story__card{

        --frame-inset-x:var(--space-2);
        --frame-inset-y:var(--space-2);

        padding:var(--space-4);

    }

    .story__title{

        font-size:30px;

    }

    .story__lead,
    .story__text{

        font-size:15px;

        line-height:1.75;

    }

    .story__audience-title{

        font-size:24px;

    }

    .story__list{

        gap:var(--space-2);

    }

    .story__list li{

        font-size:16px;

    }

}