/* ==========================================
   BOOKS FROM THE CLOSET
   AUTUMN OBSERVATION POPUP
========================================== */


/* Keep the active seasonal object visually undisclosed. */
.seasonalTrigger{
    margin:0;
    padding:0;

    appearance:none;
    -webkit-appearance:none;

    border:0;
    background:transparent;

    color:inherit;
    font:inherit;

    cursor:default;
}


/* ==========================================
   FULL-SCREEN POPUP
========================================== */

.seasonalPopup{
    position:fixed;
    inset:0;
    z-index:20000;

    display:grid;
    place-items:center;

    padding:
        max(14px, env(safe-area-inset-top))
        max(14px, env(safe-area-inset-right))
        max(14px, env(safe-area-inset-bottom))
        max(14px, env(safe-area-inset-left));

    background:rgba(10, 6, 2, 0.78);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity 220ms ease,
        visibility 0s linear 220ms;

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

.seasonalPopup.isOpen{
    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transition:
        opacity 220ms ease,
        visibility 0s linear 0s;
}


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

.seasonalPopupPanel{
    position:relative;

    display:inline-block;

    max-width:94vw;
    max-height:92vh;

    line-height:0;
}

.seasonalPopupImage{
    display:block;

    width:auto;
    height:auto;

    max-width:94vw;
    max-height:92vh;

    object-fit:contain;

    pointer-events:none;

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


/* ==========================================
   UPPER-LEFT CLOSE BUTTON
========================================== */

.seasonalPopupClose{
    position:absolute;
    top:10%;
    right:12%;
    left:auto;
    z-index:2;
    
    display:grid;
    place-items:center;

    width:clamp(42px, 6vw, 58px);
    height:clamp(42px, 6vw, 58px);

    margin:0;
    padding:0 0 5px;

    appearance:none;
    -webkit-appearance:none;

    border:0;
    border-radius:50%;
    outline:none;

    background:transparent;
    color:#3b2902;
    opacity:80%;

    font-family:"Hoefler text", serif;
    font-size:clamp(34px, 5vw, 54px);
    font-weight:400;
    line-height:1;

    cursor:pointer;

    -webkit-tap-highlight-color:transparent;
}

.seasonalPopupClose:hover,
.seasonalPopupClose:focus-visible{
    background:rgba(232, 199, 139, 0.34);
}

.seasonalPopupClose:focus-visible{
    outline:2px solid rgba(59, 41, 2, 0.75);
    outline-offset:2px;
}


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

@media (max-width:768px){

    .seasonalPopup{
        padding:
            max(10px, env(safe-area-inset-top))
            max(10px, env(safe-area-inset-right))
            max(10px, env(safe-area-inset-bottom))
            max(10px, env(safe-area-inset-left));
    }

    .seasonalPopupPanel,
    .seasonalPopupImage{
        max-width:96vw;
        max-height:90vh;
    }

}


/* ==========================================
   COPY / PRINT DETERRENTS

   A webpage cannot block operating-system or
   external-camera screenshots. These rules
   prevent ordinary selection, dragging and
   browser printing of the artwork.
========================================== */

@media print{

    html,
    body{
        visibility:hidden !important;
        background:#000 !important;
    }

}