/* Clip the photo stack to the folder's top edge.
   A new object key: CloudFront keeps mailing-list-20261017-paperclip.css. */

#mailing-list-page .dossier {
    /* Matches .dossier padding-top. The clip and photos measure from the
       folder edge with this, so a later padding change has to update both. */
    --mailing-folder-pad-top: 28px;
    isolation: isolate;
    background: transparent;
}

#mailing-list-page .dossier::before {
    content: "";
    /* .clear::before is display:table, which collapses this face to 0×0. */
    display: block;
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background-color: #d2bb89;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
    background-blend-mode: multiply;
}

#mailing-list-page .mailing-list-container {
    position: relative;
    z-index: 2;
}

/* Front photo starts just under the folder edge so a fixed-length clip
   can reach the edge and the print. 10px is the manila lip under the edge. */
#mailing-list-page .dossier-stack .dossier-photo {
    top: calc(10px - var(--mailing-folder-pad-top));
}

#mailing-list-page .dossier-stack .dossier-photo--1 {
    z-index: 2;
}

#mailing-list-page .dossier-stack .dossier-photo--2 {
    z-index: 3;
}

#mailing-list-page .dossier-stack .dossier-photo--3 {
    z-index: 4;
}

#mailing-list-page .dossier-stack .feature-photo-credit {
    z-index: 2;
}

/* Paper line in the 108-unit viewBox is y=18, drawn at 100px.
   top is that line minus the folder padding, so the bend stays on the
   folder edge when the photo offset changes. */
#mailing-list-page .dossier-stack .paperclip {
    top: calc(var(--mailing-folder-pad-top) * -1 - 16.67px);
    left: 144.5px;
    width: 41px;
    height: 100px;
    transform: rotate(2deg);
    transform-origin: 20.5px 16.67px;
}

#mailing-list-page .dossier-stack .paperclip.paperclip-rear {
    z-index: 0;
}

#mailing-list-page .dossier-stack .paperclip.paperclip-front {
    z-index: 5;
}

@media screen and (max-width: 720px) {
    #mailing-list-page .dossier {
        --mailing-folder-pad-top: 22px;
    }
}