/* ============================================================
   EXHIBIT PROFILE — LEATHER TIMELINE
   Vertical stitched spine, leather profile cards,
   teal thread accents, warm cream details.
   ============================================================ */

.exhibit-profile-wrapper {
    position: relative;
    padding-block: clamp(3rem, 6vw, 5rem);
    padding-inline: clamp(1rem, 3vw, 2rem);
    max-width: 1100px;
    margin-inline: auto;
}

    /* ---------- vertical stitched spine ---------- */
    .exhibit-profile-wrapper::after {
        content: "";
        position: absolute;
        width: 0;
        height: calc(100% - clamp(6rem, 12vw, 10rem));
        left: 50%;
        top: clamp(3rem, 6vw, 5rem);
        transform: translateX(-50%);
        /* dashed teal thread on leather */
        border-left: 2px dashed rgba(5, 93, 83, .55);
        filter: drop-shadow(0 1px 0 rgba(255, 240, 215, .15));
        pointer-events: none;
        z-index: 0;
    }

/* ============================================================
   PROFILE ROW
   ============================================================ */
.profile-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
    position: relative;
    z-index: 1;
}

    .profile-wrapper.right {
        justify-content: flex-end;
    }

    .profile-wrapper.left {
        justify-content: flex-start;
    }

/* ============================================================
   PROFILE IMAGE — LEATHER PHOTO PATCH
   ============================================================ */
.profile-img-box {
    width: 50%;
    padding-inline: 5%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

    .profile-img-box img {
        position: relative;
        /* width: clamp(180px, 24vw, 260px); */
        height: auto;
        /* aspect-ratio: 1 / 1; */
        object-fit: cover;
        border-radius: 12px;
        display: block;
        /* thick cream photo border */
        border: 4px solid #fdfbf7;
        /* deep 3D layering on leather */
        /* box-shadow:
        0 12px 26px -10px rgba(0, 0, 0, .75),
        0 24px 48px -16px rgba(0, 0, 0, .85),
        inset 0 0 0 1px rgba(0, 0, 0, .15); */
        transition: transform .55s var(--ease-out, cubic-bezier(.16, 1, .3, 1)), box-shadow .55s var(--ease-out, cubic-bezier(.16, 1, .3, 1));
    }

/* soft tilt on the left image */
.profile-wrapper.left .profile-img-box img {
    transform: rotate(-2.5deg);
}

.profile-wrapper.right .profile-img-box img {
    transform: rotate(2.5deg);
}

/* stitched inner ring on the image */
.profile-img-box img::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1.5px dashed rgba(255, 235, 200, .7);
    border-radius: 8px;
    pointer-events: none;
}

/* hover — photo lifts and straightens */
.profile-wrapper .profile-img-box img:hover {
    transform: rotate(0deg) translateY(-6px) scale(1.03);
    border-color: #ffffff;
    box-shadow: 0 22px 40px -12px rgba(0, 0, 0, .85), 0 40px 60px -24px rgba(0, 0, 0, .95), inset 0 0 0 1px rgba(0, 0, 0, .15);
}

/* ============================================================
   PROFILE BOX — LEATHER CARD
   ============================================================ */
.profile-box {
    width: 50%;
    position: relative;
    padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 2vw, 1.75rem);
    border-radius: 14px;
    z-index: 2;
    corner-shape: scoop;
    /* warm cream leather base */
    background: var(--grain), repeating-linear-gradient(90deg, rgba(0, 0, 0, .02) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgba(120, 95, 60, .018) 0 1px, transparent 1px 3px), radial-gradient(140% 100% at 50% 0%, rgba(255, 255, 255, .55), transparent 55%), linear-gradient(160deg, #fdfcf8 0%, #f5f1e7 60%, #efe9db 100%);
    background-size: 140px 140px, auto, auto, auto, auto;
    background-blend-mode: multiply, normal, normal, normal, normal;
    border: 1px solid rgba(120, 80, 35, .16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 12px 26px -16px rgba(60, 40, 15, .3), 0 2px 6px -2px rgba(60, 40, 15, .12);
    transition: transform .5s var(--ease-out, cubic-bezier(.16, 1, .3, 1)), box-shadow .5s var(--ease-out, cubic-bezier(.16, 1, .3, 1)), border-color .4s ease;
}

    /* stitched seam inside the card */
    .profile-box::before {
        content: "";
        position: absolute;
        inset: 8px;
        border: 1.5px dashed rgba(120, 80, 35, .28);
        border-radius: 9px;
        pointer-events: none;
        filter: drop-shadow(0 .5px 0 rgba(255, 255, 255, .6));
        opacity: .75;
        transition: opacity .4s ease, border-color .4s ease;
    }

    /* hover — card lifts, stitch brightens to teal */
    .profile-box:hover {
        transform: translateY(-4px);
        border-color: rgba(5, 93, 83, .4);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 24px 44px -20px rgba(5, 93, 83, .35), 0 4px 10px -4px rgba(5, 93, 83, .15);
    }

        .profile-box:hover::before {
            opacity: 1;
            border-color: rgba(5, 93, 83, .5);
        }

    /* ============================================================
   TIMELINE NODE — BRASS RIVET ON THE SPINE
   ============================================================ */
    .profile-box::after {
        content: "";
        position: absolute;
        top: 28px;
        width: 18px;
        left: -10px;
        height: 18px;
        border-radius: 50%;
        z-index: 5;
        /* domed brass rivet */
        background: radial-gradient(circle at 35% 30%, #fff2cf 0%, #e6c988 35%, #b8894a 70%, #7a5228 100%);
        box-shadow: 0 2px 4px rgba(0, 0, 0, .5), inset 0 1px 1px rgba(255, 255, 255, .9), inset 0 -2px 3px rgba(80, 50, 20, .5), 0 0 0 1.5px rgba(255, 240, 215, .25);
        transition: transform .4s var(--ease-out, cubic-bezier(.16, 1, .3, 1)), box-shadow .4s ease;
    }

/* LEFT-aligned box → rivet on its right edge */
.profile-wrapper.left .profile-box::after {
    right: -9px;
    left: auto;
}

/* RIGHT-aligned box ’ rivet on its left edge */
.profile-wrapper.right .profile-box::after {
    left: -9px;
}

/* hover ” rivet pops */
.profile-box:hover::after {
    transform: scale(1.2);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .55), inset 0 1.5px 1.5px rgba(255, 255, 255, 1), inset 0 -2px 3px rgba(80, 50, 20, .55), 0 0 0 2px rgba(230, 201, 136, .45), 0 0 14px rgba(230, 201, 136, .5);
}

/* ============================================================
   PROFILE TEXT
   ============================================================ */
.profile-box p {
    position: relative;
    z-index: 2;
    font-family: "Tahoma", sans-serif;
    font-size: clamp(.9rem, .85rem + .3vw, 1.05rem);
    font-weight: 400;
    line-height: 1.7;
    color: var(--muted, #5c6675);
    margin-bottom: 14px;
}

    .profile-box p:last-child {
        margin-bottom: 0;
    }

/* left-aligned row → text right-aligned (mirrors layout) */
.profile-wrapper.left .profile-box p {
    text-align: right;
}

/* teal accent inside text */
.profile-box p i {
    color: var(--primary, #055d53);
    font-style: normal;
}

.profile-box p a {
    color: var(--primary, #055d53);
    font-weight: 600;
    text-decoration: none;
    background-image: linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px);
    background-size: 8px 1.5px;
    background-repeat: repeat-x;
    background-position: 0 100%;
    padding-bottom: 2px;
    transition: color .3s ease, background-size .4s ease;
}

    .profile-box p a:hover {
        color: var(--secondary, #002b68);
        background-size: 6px 2px;
    }

/* ============================================================
   ORGANIZER SOCIAL ICONS — LEATHER WASHER DOTS
   ============================================================ */
.media-icon-list-organizer {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    margin-bottom: 1.25em;
}

.profile-wrapper.left .media-icon-list-organizer {
    justify-content: flex-end;
}

.media-icon-list-organizer a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 34px;
    width: 34px;
    border-radius: 50%;
    font-size: 15px;
    line-height: 1;
    color: var(--primary, #055d53);
    text-decoration: none;
    /* cream leather washer */
    background: linear-gradient(160deg, #fbfaf6, #ffffff);
    outline: 1.5px dashed rgba(120, 80, 35, .4);
    outline-offset: -5px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(60, 40, 15, .18);
    transition: transform .35s var(--ease-out, cubic-bezier(.16, 1, .3, 1)), background-color .3s ease, color .3s ease, box-shadow .35s ease, outline-color .3s ease;
}

    .media-icon-list-organizer a:hover {
        color: #fff;
        background-color: var(--primary, #055d53);
        background-image: none;
        transform: scale(1.14) rotate(-4deg);
        outline-color: rgba(255, 235, 200, .6);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 2px rgba(0, 0, 0, .3), 0 10px 22px -8px rgba(5, 93, 83, .6);
    }

/* ============================================================
   GENERAL DISPLAY — LEATHER PANEL
   ============================================================ */
.general-display-wrapper {
    position: relative;
    padding-block: clamp(2.5rem, 5vw, 4rem);
    padding-inline: clamp(1.25rem, 3vw, 2.5rem);
    margin-block: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: 16px;
    corner-shape: scoop;
    max-width: 1100px;
    margin-inline: auto;
    /* warm linen leather board */
    background: var(--grain), repeating-linear-gradient(45deg, rgba(120, 80, 35, .02) 0 1px, transparent 1px 4px), repeating-linear-gradient(-45deg, rgba(120, 80, 35, .02) 0 1px, transparent 1px 4px), linear-gradient(160deg, #f7f4ed 0%, #efe9db 100%);
    background-size: 140px 140px, auto, auto, auto;
    background-blend-mode: multiply, normal, normal, normal;
    border: 1px solid rgba(120, 80, 35, .15);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 20px 46px -30px rgba(60, 40, 15, .35);
}

    /* stitched inner frame */
    .general-display-wrapper::before {
        content: "";
        position: absolute;
        inset: 12px;
        border: 1.5px dashed rgba(120, 80, 35, .3);
        border-radius: 10px;
        pointer-events: none;
        filter: drop-shadow(0 .5px 0 rgba(255, 255, 255, .6));
    }

    /* corner cross-stitch tacks */
    .general-display-wrapper::after {
        content: "";
        position: absolute;
        inset: 12px;
        border-radius: 10px;
        pointer-events: none;
        background: linear-gradient(rgba(120, 80, 35, .5), rgba(120, 80, 35, .5)) 10px 10px / 14px 1.5px no-repeat, linear-gradient(rgba(120, 80, 35, .5), rgba(120, 80, 35, .5)) 10px 10px / 1.5px 14px no-repeat, linear-gradient(rgba(120, 80, 35, .5), rgba(120, 80, 35, .5)) calc(100% - 10px) 10px / 14px 1.5px no-repeat, linear-gradient(rgba(120, 80, 35, .5), rgba(120, 80, 35, .5)) calc(100% - 10px) 10px / 1.5px 14px no-repeat, linear-gradient(rgba(120, 80, 35, .5), rgba(120, 80, 35, .5)) 10px calc(100% - 10px) / 14px 1.5px no-repeat, linear-gradient(rgba(120, 80, 35, .5), rgba(120, 80, 35, .5)) 10px calc(100% - 10px) / 1.5px 14px no-repeat, linear-gradient(rgba(120, 80, 35, .5), rgba(120, 80, 35, .5)) calc(100% - 10px) calc(100% - 10px) / 14px 1.5px no-repeat, linear-gradient(rgba(120, 80, 35, .5), rgba(120, 80, 35, .5)) calc(100% - 10px) calc(100% - 10px) / 1.5px 14px no-repeat;
        opacity: .55;
    }

    .general-display-wrapper > * {
        position: relative;
        z-index: 2;
    }

    .general-display-wrapper h2 {
        position: relative;
        font-family: "Barlow", "Tahoma", sans-serif;
        font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
        font-weight: 700;
        line-height: 1.3;
        color: var(--ink, #16202e);
        margin-bottom: 20px;
        padding-bottom: 16px;
    }

        /* stitched teal underline under the heading */
        .general-display-wrapper h2::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 72px;
            height: 3px;
            background-image: linear-gradient(90deg, var(--primary, #055d53) 0 8px, transparent 8px 14px);
            background-size: 14px 3px;
            background-repeat: repeat-x;
            border-radius: 3px;
            animation: generalStitchSlide 3s linear infinite;
            filter: drop-shadow(0 .5px 0 rgba(255, 255, 255, .6));
        }

@keyframes generalStitchSlide {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 14px 0;
    }
}

.general-display-wrapper p {
    font-family: "Tahoma", sans-serif;
    font-size: clamp(.92rem, .88rem + .2vw, 1rem);
    line-height: 1.75;
    color: var(--muted, #5c6675);
    margin-bottom: 16px;
}

    .general-display-wrapper p:last-child {
        margin-bottom: 0;
    }

    .general-display-wrapper p a {
        color: var(--primary, #055d53);
        font-weight: 600;
        text-decoration: none;
        border-bottom: 1.5px dashed rgba(5, 93, 83, .45);
        transition: color .3s ease, border-color .3s ease;
    }

        .general-display-wrapper p a:hover {
            color: var(--secondary, #002b68);
            border-bottom-color: var(--secondary, #002b68);
        }

/* ============================================================
   LIGHTBOX GALLERY — PHOTO PATCH GRID
   ============================================================ */
.exhibit-profile-lightbox-wrapper {
    position: relative;
    padding-block: clamp(2.5rem, 5vw, 4rem);
    padding-inline: clamp(1.25rem, 3vw, 2.5rem);
    margin-block: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: 16px;
    corner-shape: scoop;
    max-width: 1200px;
    margin-inline: auto;
    /* dark leather board */
    background: var(--grain), radial-gradient(circle at 18% 24%, rgba(0, 0, 0, .5) 0 1px, transparent 1.8px), radial-gradient(circle at 72% 58%, rgba(0, 0, 0, .45) 0 1px, transparent 1.8px), radial-gradient(130% 90% at 18% 8%, rgba(120, 120, 120, .15), transparent 55%), radial-gradient(130% 100% at 85% 100%, rgba(0, 0, 0, .85), transparent 58%), linear-gradient(155deg, #2a2a2a 0%, #1e1e1e 35%, #141414 65%, #0a0a0a 100%);
    background-size: 140px 140px, 5px 5px, 7px 7px, auto, auto, auto;
    background-blend-mode: multiply, normal, normal, normal, normal, normal;
    border: 1px solid rgba(0, 0, 0, .85);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -3px 8px rgba(0, 0, 0, .6), 0 20px 44px -24px rgba(0, 0, 0, .85);
}

    /* stitched seam — warm thread on black */
    .exhibit-profile-lightbox-wrapper::before {
        content: "";
        position: absolute;
        inset: 12px;
        border: 1.5px dashed rgba(255, 235, 200, .3);
        border-radius: 10px;
        pointer-events: none;
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
    }

    .exhibit-profile-lightbox-wrapper > * {
        position: relative;
        z-index: 2;
    }

/* ---------- gallery grid ---------- */
.exhibitProfilelightbox.Glimpses-light-box div,
.Glimpses-light-box.exhibitProfilelightbox div {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    width: 100%;
}

.exhibitProfilelightbox .uk-inline,
.Glimpses-light-box.exhibitProfilelightbox .uk-inline {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    display: block;
    /* cream photo border */
    border: 3px solid #fdfbf7;
    box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .75), 0 20px 40px -14px rgba(0, 0, 0, .85);
    transition: transform .5s var(--ease-out, cubic-bezier(.16, 1, .3, 1)), box-shadow .5s var(--ease-out, cubic-bezier(.16, 1, .3, 1));
}

    /* stitched inner ring */
    .exhibitProfilelightbox .uk-inline::before,
    .Glimpses-light-box.exhibitProfilelightbox .uk-inline::before {
        content: "";
        position: absolute;
        inset: 4px;
        border: 1px dashed rgba(255, 235, 200, .55);
        border-radius: 6px;
        pointer-events: none;
        z-index: 2;
        opacity: 0;
        transition: opacity .4s ease;
    }

    .exhibitProfilelightbox .uk-inline img,
    .Glimpses-light-box.exhibitProfilelightbox .uk-inline img {
        width: 100%;
        height: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        display: block;
        border-radius: 0;
        transition: transform .7s var(--ease-out, cubic-bezier(.16, 1, .3, 1));
    }

    /* hover overlay + zoom icon */
    .exhibitProfilelightbox .uk-inline::after,
    .Glimpses-light-box.exhibitProfilelightbox .uk-inline::after {
        content: "+";
        font-family: "Barlow", sans-serif;
        font-weight: 300;
        position: absolute;
        inset: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 44px;
        line-height: 1;
        color: #fdf6ec;
        background: linear-gradient(180deg, rgba(5, 93, 83, .35), rgba(0, 8, 30, .65));
        z-index: 3;
        opacity: 0;
        transition: opacity .45s ease;
        text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
    }

    /* hover interactions */
    .exhibitProfilelightbox .uk-inline:hover,
    .Glimpses-light-box.exhibitProfilelightbox .uk-inline:hover {
        transform: translateY(-5px);
        border-color: #fff;
        box-shadow: 0 20px 36px -10px rgba(0, 0, 0, .85), 0 32px 56px -18px rgba(0, 0, 0, .95), 0 0 0 2px rgba(230, 201, 136, .35);
    }

        .exhibitProfilelightbox .uk-inline:hover::before,
        .Glimpses-light-box.exhibitProfilelightbox .uk-inline:hover::before {
            opacity: 1;
        }

        .exhibitProfilelightbox .uk-inline:hover::after,
        .Glimpses-light-box.exhibitProfilelightbox .uk-inline:hover::after {
            opacity: 1;
        }

        .exhibitProfilelightbox .uk-inline:hover img,
        .Glimpses-light-box.exhibitProfilelightbox .uk-inline:hover img {
            transform: scale(1.06);
        }

/* ============================================================
   RESPONSIVE — MOBILE TIMELINE
   ============================================================ */
@media (max-width: 991px) {
    .profile-wrapper {
        gap: 1.25rem;
    }

    .profile-img-box {
        padding-inline: 3%;
    }

    .profile-box {
        padding: 1.25rem 1.25rem;
    }
}

@media (max-width: 768px) {
    .exhibit-profile-wrapper {
        padding-left: 34px;
        padding-right: 12px;
    }

        /* spine shifts to the left rail */
        .exhibit-profile-wrapper::after {
            left: 16px;
            transform: none;
            top: clamp(2.5rem, 6vw, 4rem);
            height: calc(100% - clamp(5rem, 12vw, 8rem));
        }

    .profile-wrapper,
    .profile-wrapper.left,
    .profile-wrapper.right {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 1rem;
        padding-left: 8px;
    }

    .profile-img-box {
        width: 100%;
        max-width: 320px;
        padding-inline: 0;
        justify-content: flex-start;
    }

    .profile-wrapper.left .profile-img-box img,
    .profile-wrapper.right .profile-img-box img {
        transform: rotate(-2deg);
    }

    .profile-img-box img {
        width: 100%;
    }

    .profile-box,
    .profile-wrapper.left .profile-box {
        width: 100%;
        padding: 1.25rem 1.125rem;
    }

        /* text realigns to left on mobile */
        .profile-wrapper.left .profile-box p {
            text-align: left;
        }

    .profile-wrapper.left .media-icon-list-organizer {
        justify-content: flex-start;
    }

    /* rivet moves to the LEFT edge on mobile — sits on the spine */
    .profile-wrapper.left .profile-box::after,
    .profile-wrapper.right .profile-box::after {
        left: -26px;
        right: auto;
        top: 22px;
        width: 15px;
        height: 15px;
    }

    .media-icon-list-organizer {
        margin-bottom: 1rem;
    }

    .general-display-wrapper h2 {
        font-size: 1.25rem;
    }

    .exhibitProfilelightbox.Glimpses-light-box div,
    .Glimpses-light-box.exhibitProfilelightbox div {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 12px;
    }

    .exhibitProfilelightbox .uk-inline,
    .Glimpses-light-box.exhibitProfilelightbox .uk-inline {
        border-width: 2px;
    }
}

@media (max-width: 480px) {
    .exhibit-profile-wrapper {
        padding-left: 28px;
    }

        .exhibit-profile-wrapper::after {
            left: 12px;
        }

    .profile-box,
    .profile-wrapper.left .profile-box,
    .profile-wrapper.right .profile-box {
        padding: 1rem .9rem;
    }

        .profile-wrapper.left .profile-box::after,
        .profile-wrapper.right .profile-box::after {
            left: -22px;
            width: 13px;
            height: 13px;
        }

    .exhibitProfilelightbox.Glimpses-light-box div,
    .Glimpses-light-box.exhibitProfilelightbox div {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
    }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

    .profile-img-box img,
    .profile-box,
    .profile-box::before,
    .profile-box::after,
    .media-icon-list-organizer a,
    .general-display-wrapper h2::after,
    .exhibitProfilelightbox .uk-inline,
    .exhibitProfilelightbox .uk-inline img,
    .Glimpses-light-box.exhibitProfilelightbox .uk-inline,
    .Glimpses-light-box.exhibitProfilelightbox .uk-inline img {
        transition: none;
        animation: none;
    }
}