/* ==========================================
   CANDLE MEMORY
========================================== */


/* ==========================================
   CANDLE CLICK WRAPPER
========================================== */

#candleHitbox{
    position:absolute;

    left:1042px;
    top:255px;

    width:93px;
    height:132px;

    z-index:3;

    cursor:default;

    user-select:none;
    -webkit-user-select:none;

    -webkit-touch-callout:none;

    touch-action:manipulation;

    outline:none;

    overflow:visible;
}


/* ==========================================
   CANDLE IMAGES
========================================== */

#candle,
#candle1,
#candle2,
#candle3,
#candle4{
    position:absolute;

    pointer-events:none;

    user-select:none;
    -webkit-user-select:none;

    -webkit-user-drag:none;
    -webkit-touch-callout:none;
}


#candle{
    left:-232px;
    top:-258px;

    width:550px;
    height:616px;

    display:none;
}


#candle1{
    left:-232px;
    top:-258px;

    width:551px;
    height:616px;

    display:none;
}


#candle2{
    left:-628px;
    top:-653px;

    width:1300px;
    height:1454px;

    display:none;
}


#candle3{
    left:-681px;
    top:-712px;

    width:1400px;
    height:1566px;

    display:none;
}


#candle4{
    left:-785px;
    top:-830px;

    width:1600px;
    height:1790px;

    display:none;
}

/* ==========================================
   CANDLE MEMORY POPUP V2
   ========================================== */

.memoryPopup{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(8,5,3,.72);
    z-index:1000;
}

.memoryPopup.isOpen{
    display:flex;
}

/* ===========================
   NOTEBOOK PAGES
=========================== */

#memoryPageOne{display:block;}
#memoryPageTwo{display:none;}

/* ===========================
   PANEL
=========================== */

.memoryPopupPanel{

    position:relative;

    width:min(650px,92vw);

    min-height:860px;
    
    background:transparent;

    padding:95px 95px 70px;

    text-align:center;

    overflow:hidden;

}

#candlePopupFrame{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    z-index:0;
    pointer-events:none;
}

.memoryPopupPanel>*{
    position:relative;
    z-index:2;
}

/* ===========================
   CLOSE
=========================== */
.memoryPopupClose{

    position:absolute;

       width:44px;
    height:44px;

    background:transparent;
    border:none;
    color:#3B2902;
    font-family:"Hoefler Text", serif;
    font-size:50px;
    z-index:100;
    cursor:pointer;
    top:180px;
    right:75px;
}

.memoryPopupClose:hover{

    opacity:1;

    transform:scale(1.05);

    cursor:pointer;

}

.memoryPopupClose:focus{

    outline:none;

    opacity:1;

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

.memoryPopupPanel h2{
    margin:90px 0 8px;
    font-family:"Hoefler Text",serif;
    font-style:italic;
    font-weight:400;
    font-size:38px;
    color:#3B2902;
    line-height:1.2;
}

/* ===========================
   INTRO
=========================== */

.memoryIntroduction{
    max-width:360px;
    margin:0 auto 20px;
    font-family:"Hoefler Text",serif;
    font-style:italic;
    font-size:18px;
    color:rgba(59,41,2,.82);
    line-height:1.6;
}

/* ===========================
   DETAILS
=========================== */

.memoryDetails{
    display:grid;
    gap:0;
     width:88%;

    margin:0 auto;
}

.memoryDetails p{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:0;
    padding:15px 0;
    padding-left:8px;
    padding-right:8px;
    border-bottom:1px solid rgba(59,41,2,.18);
}

.memoryDetails span{
    font-family:"Hoefler Text",serif;
    font-style:italic;
    font-size:17px;
    color:rgba(59,41,2,.75);
}

.memoryDetails strong{
    font-family:"Hoefler Text",serif;
    font-style:normal;
    font-size:17px;
    font-weight:500;
    color:#3B2902;
    text-align:right;
}

/* ===========================
   TOGGLE
=========================== */

.memoryToggle{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:26px;
    padding-top:16px;
    border-top:1px solid rgba(59,41,2,.18);
    color:#3B2902;
    font-family:"Hoefler Text",serif;
    font-style:italic;
    font-size:19px;
}

.memoryToggle button{
    border:none;
    background:none;
    color:#3B2902;
    font:400 18px Georgia,serif;
    cursor:pointer;
}

/* ===========================
   PAGE TWO
=========================== */

#visitHistoryList{

    display:grid;

    gap:0;

    width:88%;

    margin:100px auto 0;

}
.visitHistoryEntry{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 0;
    border-bottom:1px solid rgba(59,41,2,.18);
    color:#3B2902;
    font-family:"Hoefler Text",serif;
}

/* ===========================
   FOOTER
=========================== */

.memoryClosingMessage{
    margin-top:8px;
    font-family:"Hoefler Text",serif;
    font-style:italic;
    font-size:17px;
    color:rgba(59,41,2,.78);
    line-height:1.6;
}
/* ==========================================
   TABLET
========================================== */

@media (max-width:1024px){

    .memoryPopupPanel{

        width:min(580px,88vw);

        min-height:auto;

        padding:120px 70px 60px;

    }

    .memoryPopupPanel h2{

        font-size:34px;

        margin:35px 0 16px;

    }

    .memoryIntroduction{

        max-width:420px;

        font-size:17px;

        margin:12px auto 34px;

    }

    .memoryDetails{

        width:92%;

        margin:0 auto;

    }

    #visitHistoryList{

        width:92%;

        margin:70px auto 0;

    }

    .memoryPopupClose{

        top:170px;

        right:65px;

        font-size:28px;

    }

    .memoryClosingMessage{

        font-size:18px;

    }

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

@media (max-width:768px){

    .memoryPopup{

        padding:16px;

    }

    .memoryPopupPanel{

        width:96vw;

        min-height:auto;

        padding:72px 28px 42px;

    }

    .memoryPopupPanel h2{

        font-size:18px;

        margin:8px 0 14px;

        line-height:1.1;

    }

    .memoryIntroduction{

        max-width:100%;

        font-size:14px;

        line-height:1.5;

        margin:10px auto 12px;

    }

    .memoryDetails{

        width:87%;

        margin:0 auto;

    }

  .memoryDetails p{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

    padding:8px 0;

}

.memoryDetails span{

    font-size:12px;

    font-style:italic;

}

.memoryDetails strong{

    padding-right:10px;

    font-size:12px;

    white-space:nowrap;

} 

      #visitHistoryList{

        width:82%;

        margin:18px auto 0;

    }

    .visitHistoryEntry{

        padding:8px 0;

        font-size:14px;

    }

    .memoryClosingMessage{

        font-size:13px;

        margin-top:18px;

    }

    .memoryPopupClose{

        top:70px;

        right:20px;

        font-size:26px;
        
    }
    
    .memoryToggle{
    
     margin-top:8px;

    padding-top:6px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    font-size:15px;

}

#recentVisitsToggle{

    justify-content:center;
    
    margin-top:8px;

    padding-top:6px;

    gap:8px;

}

#openVisitHistory{

    margin:0;

    padding:0;

    font-size:15px;

}

/* ===========================
   MOBILE PAGE TWO
=========================== */

#memoryPageTwo{

    display:none;

    width:100%;

    text-align:center;

}

.memoryPageTwoMessage{

    margin:70px auto 12px;

    font-family:"Hoefler Text",serif;

    font-style:italic;

    font-size:14px;

    color:rgba(59,41,2,.82);

    line-height:1.4;

}

#recentVisitsToggle{

    margin:0 auto 14px;

    font-family:"Hoefler Text",serif;

    font-style:italic;

    font-size:13px;

    color:rgba(59,41,2,.65);

    cursor:pointer;

    user-select:none;

}

#visitHistoryList{

    width:88%;

    margin:0 auto;

}

.visitHistoryEntry{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:6px 0;

    border-bottom:1px solid rgba(59,41,2,.16);

    font-family:"Hoefler Text",serif;

    font-size:13px;

    color:#3B2902;

}

.visitHistoryEntry span:first-child{

    font-style:italic;

}

.visitHistoryEntry span:last-child{

    font-style:normal;

}