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

.story-section{
    padding:10px 24px;
    position:relative;
    overflow:hidden;
}

.story-section::before{
    content:"";
    position:absolute;
    left:-60px;
    top:120px;
    width:220px;
    height:220px;
    background:radial-gradient(circle,#7ba54722 0%,transparent 70%);
    pointer-events:none;
}

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

.story-container{
    max-width:1200px;
    margin:0 auto;

    display:grid;
    grid-template-columns:380px 1fr;
    gap:90px;
    align-items:center;
}

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

.story-image{
    position:relative;
    display:flex;
    justify-content:center;
}


.story-image img{
    position:relative;
    z-index:2;

    width:340px;
    height:340px;

    object-fit:cover;

    border-radius:50%;
    border:10px solid #fff;

    box-shadow:
        0 30px 70px rgba(0,0,0,.12);
}

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

.story-content{
    position:relative;

    background:rgba(255,255,255,.72);

    backdrop-filter:blur(8px);

    border:1px solid #e6ddd2;

    border-radius:28px;

    padding:35px;

    overflow:hidden;

    box-shadow:
        0 20px 60px rgba(0,0,0,.06);
}

/* =========================
   QUOTE
========================= */

.story-quote-mark{
    position:absolute;

    right:28px;
    top:-25px;

    font-size:180px;
    line-height:1;

    color:#5b7b334d;

    font-family:Georgia, serif;

    pointer-events:none;
}

/* =========================
   EYEBROW
========================= */

.story-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:14px;

    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;

    color:#3d7d3e;
}

.story-eyebrow::before{
    content:"";
    width:55px;
    height:2px;
    background:#64873a;
}

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

.story-content h2{
    margin:22px 0 22px;

    font-size:clamp(2.4rem,5vw,4rem);

    line-height:1.05;

    color:#1f1f1f;

    font-family:"Cormorant Garamond", serif;
}

/* =========================
   TEXT
========================= */

.story-content p{
    margin-bottom:22px;

    font-size:1.12rem;

    line-height:1.5;

    color:#555;
}

.story-content p:last-of-type{
    margin-bottom:0;
}

/* =========================
   SIGNATURE
========================= */

.story-signature{
    margin-top:20px;

    display:flex;
    align-items:center;
    gap:16px;

    color:#3d7d3e;

    font-size:1.3rem;

    font-weight:600;

    letter-spacing:.04em;
}


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

@media (max-width:900px){

.story-section{
    padding:90px 20px;
}

.story-container{
    grid-template-columns:1fr;
    gap:50px;
    text-align:center;
}

.story-image::before{
    width:260px;
    height:260px;
    transform:translate(14px,14px);
}

.story-image img{
    width:260px;
    height:260px;
}

.story-content{
    padding:42px 28px;
}

.story-quote-mark{
    right:15px;
    top:-10px;
    font-size:120px;
}

.story-eyebrow{
    justify-content:center;
}

.story-content h2{
    font-size:2.5rem;
}

.story-signature{
    justify-content:center;
}

.story-signature::before{
    width:50px;
}
}