/*=================================
EDITORIAL STORY
The Maramatta Difference
=================================*/

.maramatta-editorial{

    display:flex;
    flex-direction:column;

    gap:clamp(6rem,8vw,10rem);

    width:100%;
    margin-top:clamp(3rem,5vw,5rem);

}


/*=================================
CHAPTER
=================================*/

.editorial-chapter{

    display:flex;
    align-items:flex-start;

    gap:clamp(1.75rem,3vw,3rem);

    max-width:760px;

    width:100%;

}


/* alternate chapters */

.editorial-chapter--reverse{

    margin-left:auto;

}


/*=================================
META
=================================*/

.editorial-chapter__meta{

    flex-shrink:0;

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

    gap:1rem;

    width:64px;

}


/*=================================
NUMBER
=================================*/

.editorial-chapter__number{

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

    font-size:.82rem;

    font-weight:600;

    letter-spacing:.35em;

    color:var(--ms-text-muted);

    opacity:.35;

    line-height:1;

}


/*=================================
ICON
=================================*/

.editorial-chapter__symbol{

    width:46px;
    height:46px;

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

    border-radius:50%;

    background:rgba(39,73,33,.045);

    transition:all .35s ease;

}


.editorial-chapter__symbol i{

    font-size:1.15rem;

    color:var(--ms-green);

    transition:inherit;

}


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

.editorial-chapter__content{

    flex:1;

    display:flex;
    flex-direction:column;

}


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

.editorial-chapter__content > .editorial-chapter__eyebrow{

    display:inline-block;

    margin-bottom:.85rem;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.28em;

    text-transform:uppercase;

    color:var(--ms-orange);

}


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

.editorial-chapter__content > .editorial-chapter__title{

    margin:0;

    max-width:18ch;

    font-size:clamp(1.65rem,2vw,2.3rem);

    line-height:1.18;

    font-weight:500;

    color:var(--ms-green);

    transition:color .35s ease;

}


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

.editorial-chapter__content > .editorial-chapter__text{

    margin-top:1.4rem;

    max-width:58ch;

    font-size:1.05rem;

    line-height:1.9;

    color:var(--ms-text);

}


/*=================================
DIVIDER
=================================*/

.editorial-divider{

    display:block;

    width:72px;

    height:1px;

    margin-top:2rem;

    background:var(--ms-border-soft);

    transition:width .35s ease;

}


/*=================================
INTERACTION
=================================*/

.editorial-chapter:hover .editorial-divider{

    width:104px;

}


.editorial-chapter:hover .editorial-chapter__title{

    color:var(--ms-orange);

}


.editorial-chapter:hover .editorial-chapter__symbol{

    transform:translateY(-4px);

    background:rgba(39,73,33,.08);

}


.editorial-chapter:hover .editorial-chapter__symbol i{

    transform:scale(1.05);

}


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

@media (max-width:900px){

    .maramatta-editorial{

        gap:5rem;

    }

    .editorial-chapter{

        max-width:100%;

    }

}


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

@media (max-width:768px){

    .maramatta-editorial{

        gap:4rem;

    }

    .editorial-chapter,
    .editorial-chapter--reverse{

        margin-left:0;

    }

    .editorial-chapter{

        gap:1.25rem;

    }

    .editorial-chapter__meta{

        width:52px;

    }

    .editorial-chapter__symbol{

        width:40px;
        height:40px;

    }

    .editorial-chapter__title{

        max-width:none;

        font-size:1.55rem;

    }

    .editorial-chapter__text{

        margin-top:1rem;

        max-width:none;

        font-size:1rem;

        line-height:1.8;

    }

}