html, body {
    height: 100%;
    margin: 0;
    background: radial-gradient(circle at 20% 10%, rgba(255,255,240,0.04), rgba(0,0,0,0) 8%), #050507;
    display: flex;
    justify-content: center;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    color: #eee;
}

/* page-wide spotlight overlay (blends on top of content so it lights images) */
.page-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100vw;
    padding: 6vh 2vw;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.page-wrapper::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: conic-gradient(from -30deg at 8% 22%, rgba(255,255,220,0.95) 0%, rgba(255,245,200,0.7) 16%, rgba(255,245,200,0.25) 36%, rgba(0,0,0,0) 68%);
    filter: blur(80px);
    transform: translateX(-10%) rotate(-6deg);
    mix-blend-mode: screen;
    opacity: 0.95;
}

/* Polaroid frame styling */

.polaroid-stack {
    position: relative; /* makes percentages on .polaroid children relative to this box */
    width: 90vw;
    height: 520px;
    margin: 0 auto;
    display: block;
}

.polaroid {
    position: absolute;
    --polaroid-size: min(40vw, 444px);

    --hole-top: 8%;
    --hole-left: 22%;
    --hole-width: 56%;
    --hole-height: 74%;

    width: var(--polaroid-size);
    height: calc(var(--polaroid-size) * 1); /* square frame */
    display: inline-block;
}

.polaroid .frame-window {
    position: absolute;
    top: var(--hole-top);
    left: var(--hole-left);
    width: var(--hole-width);
    height: var(--hole-height);
    overflow: hidden; /* mask out anything that overflows from the frame hole */
    z-index: 1;
}

.polaroid .content {
    display: block;
    width: 100%;
    height: 100%;
    object-position: 10% 50%;
    object-fit: cover; /* crop the content to fill the frame window */
}

.polaroid .frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2; /* sits on top of the content */
    pointer-events: none;
}

.page-wrapper > p.caption {
    position: relative;
    width: 30vw;
    margin: 0 auto;
    text-align: center;
    font-size: 1.25em;
}