/* ==========================================
   BOOKS FROM THE CLOSET — CANDLE MEMORY
   The three PNGs provide the complete popup artwork.
========================================== */


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

#candleHitbox{
    position:absolute;
    left:1042px;
    top:255px;
    width:93px;
    height:132px;
    z-index:50;
    display:block;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    appearance:none;
    -webkit-appearance:none;
    cursor:default;
    outline:none;
    overflow:visible;
    pointer-events:auto !important;
    touch-action:manipulation;
    user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
}

#candleHitbox:focus-visible{
    outline:2px solid rgba(201,162,107,.85);
    outline-offset:5px;
}

/* The fade is visual only; it must never swallow candle clicks after opening. */
#fadeOverlay{
    pointer-events:none !important;
}


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

#candle,
#candle1,
#candle2,
#candle3,
#candle4{
    position:absolute;
    display:none;
    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;
}

#candle1{
    left:-232px;
    top:-258px;
    width:551px;
    height:616px;
}

#candle2{
    left:-628px;
    top:-653px;
    width:1300px;
    height:1454px;
}

#candle3{
    left:-681px;
    top:-712px;
    width:1400px;
    height:1566px;
}

#candle4{
    left:-785px;
    top:-830px;
    width:1600px;
    height:1790px;
}


/* ==========================================
   POPUP OVERLAY
========================================== */

.memoryPopup{
    position:fixed;
    inset:0;
    z-index:10000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:16px;
    overflow:auto;
    background:rgba(8,5,3,.76);
    overscroll-behavior:contain;
}

.memoryPopup.isOpen{
    display:flex;
}

body.memoryPopupOpen{
    overflow:hidden;
}


/* ==========================================
   SQUARE PNG PANEL
========================================== */

.memoryPopupPanel{
    position:relative;
    width:min(900px, 94vw, calc(100dvh - 32px));
    aspect-ratio:1 / 1;
    flex:0 0 auto;
    container-type:inline-size;
    isolation:isolate;
}

.memoryPageImage{
    position:absolute;
    inset:0;
    z-index:0;
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    pointer-events:none;
    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;
    -webkit-touch-callout:none;
}


/* ==========================================
   PAGE ONE — LIVE VALUES
   Change only these top/right values if you
   ever revise the PNG's internal spacing.
========================================== */

.memoryValue{
    position:absolute;
    z-index:2;
    left:52%;
    right:15.5%;
    transform:translateY(-50%);
    overflow:hidden;
    color:#3b2902;
    font-family:"Hoefler Text",serif;
    font-size:clamp(9px, calc(2.15cqi + 1px), 23px);
    font-style:italic;
    font-weight:400;
    line-height:1;
    text-align:right;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.memoryValueFirst{
    top:36.0%;
}

.memoryValueLast{
    top:44.0%;
}

.memoryValueTime{
    top:51.7%;
}

.memoryValueCount{
    top:59.8%;
}

.memoryValueCandles{
    top:67.8%;
}

.memoryClosingMessage{
    position:absolute;
    z-index:2;
    top:85.1%;
    left:15%;
    right:15%;
    margin:0;
    transform:translateY(-50%);
    color:rgba(59,41,2,.82);
    font-family:"Hoefler Text", serif;
    font-size:clamp(9px, calc(2.25cqi + 1px), 24px);
    font-style:italic;
    font-weight:400;
    line-height:1.25;
    text-align:center;
}


/* ==========================================
   PAGE TWO — VISIT HISTORY
========================================== */

.visitHistoryList{
    position:absolute;
    z-index:2;
    top:23.5%;
    left:19%;
    right:15.5%;
    max-height:59%;
    overflow:hidden;
    color:#3b2902;
    font-family:"Hoefler Text", serif;
}

.visitHistoryEntry{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:3cqi;
    min-height:5.45cqi;
    border-bottom:1px solid rgba(59,41,2,.22);
    font-size:clamp(9px, calc(2.05cqi + 1px), 22px);
    font-style:italic;
    line-height:1.15;
}

.visitHistoryEntryLabel{
    flex:0 0 auto;
    font-style:italic;
}

.visitHistoryEntryDate{
    min-width:0;
    overflow:hidden;
    text-align:right;
    text-overflow:ellipsis;
    white-space:nowrap;
}


/* ==========================================
   INVISIBLE PNG HIT AREAS
========================================== */

.memoryPopupClose,
.memoryHistoryButton{
    position:absolute;
    z-index:4;
    display:block;
    margin:0;
    padding:0;
    border:0;
    border-radius:8px;
    background:transparent;
    color:transparent;
    appearance:none;
    -webkit-appearance:none;
    touch-action:manipulation;
}

.memoryPopupClose{
    top:12.2%;
    right:11.5%;
    width:7.2%;
    height:7.2%;
    cursor:pointer;
}

.memoryHistoryButton{
    top:75.3%;
    left:13.5%;
    width:73.5%;
    height:8.8%;
    cursor:pointer;
}

.memoryPopupClose:hover,
.memoryHistoryButton:hover{
    background:rgba(59,41,2,.035);
}

.memoryPopupClose:focus-visible,
.memoryHistoryButton:focus-visible{
    outline:2px solid rgba(59,41,2,.65);
    outline-offset:2px;
}

.memoryVisuallyHidden{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
}

[hidden]{
    display:none !important;
}


/* ==========================================
   SMALL SCREENS
========================================== */

@media (max-width:600px){
    .memoryPopup{
        padding:8px;
    }

    .memoryPopupPanel{
        width:min(98vw, calc(100dvh - 16px));
    }

    .memoryValue{
        left:49%;
        right:15.5%;
        font-size:clamp(8.5px, calc(2.15cqi + 1px), 13px);
    }

    .memoryClosingMessage{
        font-size:clamp(8.5px, calc(2.25cqi + 1px), 13px);
    }

    .visitHistoryList{
        left:18%;
        right:15.5%;
    }

    .visitHistoryEntry{
        font-size:clamp(8.5px, calc(2.05cqi + 1px), 12px);
    }
}

@media (prefers-reduced-motion:no-preference){
    .memoryPopup.isOpen .memoryPopupPanel{
        animation:memoryPopupArrival 160ms ease-out;
    }

    @keyframes memoryPopupArrival{
        from{
            opacity:0;
            transform:scale(.985);
        }

        to{
            opacity:1;
            transform:scale(1);
        }
    }
}