/* ==========================
   ARTICLE SUMMARY FLYOUT
   ========================== */

.article-summary-trigger{
    margin:24px 0;
}

.summary-overlay{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.35);

    opacity:0;
    visibility:hidden;

    transition:.3s;

    z-index:100001;
}

.summary-overlay.active{

    opacity:1;
    visibility:visible;
}

.summary-panel{

    position:fixed;
    top:0;
    right:-50px;
    width:600px;
    max-width:90vw;
    height:100vh;
    background:#FFF8CC;
    overflow-y:auto;
    box-shadow:-12px 0 40px rgba(0,0,0,.2);
    transform:translateX(100%);
    transition:transform .3s ease;
    z-index:100002;
    display:flex;
    flex-direction:column;
}



.summary-panel.active{

    transform:translateX(-50px);
}

.summary-header{

    position:sticky;

    top:0;

    background:#FFE714;

    padding:24px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-bottom:1px solid rgba(0,0,0,.08);
}

.summary-header h3{

    margin:0;

    font-size:1.5rem;
}

.summary-content{

    padding:32px;
}

.summary-reading-time{

    font-family:Inter,sans-serif;

    text-transform:uppercase;

    letter-spacing:.12em;

    font-size:.75rem;

    color:#666;

    margin-bottom:2rem;
}

.summary-content h4{

    margin:2rem 0 1.5rem;

    font-size:1.2rem;

    font-family:"ClashDisplay",sans-serif;
}

.summary-content h3{

    margin:2rem 0 1rem;

    font-size:1.4rem;

    font-family:"ClashDisplay",sans-serif;
}

.summary-content p{



    line-height:1.8;

    margin-bottom:1rem;
}

.summary-content ul{

    margin:1rem 0 2rem;
     font-size:1rem;

    padding-left:1.5rem;
}

.summary-content li{

    margin-bottom:.75rem;
}

#backToArticle{

    margin-top:2rem;
}

body.summary-open{

    overflow:hidden;
}

@media(max-width:768px){

.summary-panel{

    width:100%;
    max-width:100%;
}

.summary-content{

    padding:24px;
}

}