/* ─────────────────────────────────────────────────────────────
   Seam — the woven band laid across the join between two
   full-bleed photographs.
   ───────────────────────────────────────────────────────────── */

/* The wrapper needs a block formatting context. Without it the band's
   negative block margins collapse straight through, and the wrapper gets
   pulled up over the photograph above rather than staying put. Its height
   then works out as the band's height less the two overlaps.
   It carries the band's own colour so the rounded corners have something
   to sit against in the strip where neither photograph reaches. */
.jm-seam-wrap {
    position: relative;
    display: flow-root;
    background-color: var(--bg-deep);
}

.jm-seam {
    position: relative;
    /* Above both photographs, and above the postcard's drop shadow. */
    z-index: 3;
    display: grid;
    place-items: center;
    height: var(--seam-height);
    /* The overlap is the whole effect: without it this is a strip between
       two pictures rather than a band lying over them. It is also what
       makes the rounded corners read — they fall in the overlap, against
       the photographs, rather than against the band's own ground. */
    margin-block: calc(-1 * var(--seam-overlap));
    border-radius: clamp(14px, 1.6vw, 22px);
    /* Two drops, one up and one down: the only thing telling the eye the
       band is in front of both pictures rather than between them. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.32),
        0 -16px 30px -18px rgba(8, 18, 23, 0.7),
        0 20px 34px -20px rgba(8, 18, 23, 0.75);
}

/* ─── The metal badge ──────────────────────────────────────────
   Milled aluminium, not a printed logo. The shape is used only as a
   mask over a metal gradient, so what fills it is a ramp of highlights
   and shadows that changes across the mark the way a machined face
   catches light. A dark drop below and a light one above seat it into
   the cloth — a flat mark would look printed on.

   The mask file is the logo with its wordmark cropped off: at this size
   the type was unreadable and only muddied the silhouette. */
.jm-seam__mark {
    display: block;
    height: clamp(24px, 2.4vw, 32px);
    aspect-ratio: 650 / 336;

    background-image: linear-gradient(138deg,
        #7C8C93 0%,
        #C6D4D9 10%,
        #FFFFFF 19%,
        #9FAFB6 30%,
        #E7EFF1 42%,
        #82939A 55%,
        #FBFDFD 67%,
        #AEBDC3 79%,
        #8E9DA4 90%,
        #D8E3E7 100%);

    -webkit-mask-image: url("../../../assets/logos/logo-mark.png");
            mask-image: url("../../../assets/logos/logo-mark.png");
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;

    filter:
        drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.55))
        drop-shadow(0 -1px 0.5px rgba(255, 255, 255, 0.14));
}