/* =========================================================
   701 SAN MARCO — ARTWORK FULLPAGE DESIGN
   5 REAL ARTWORK SECTIONS + NATIVE SCROLL SNAP
========================================================= */


/* =========================================================
   NATIVE PAGE SCROLL SNAP — UPDATED BEHAVIOR

   "proximity" is intentional:
   - content above/below the artwork remains normally scrollable
   - once an artwork is substantially entered, it settles cleanly
   - JS below enforces one gesture = one artwork after momentum ends
========================================================= */

html {
    scroll-behavior: smooth;
}


/*
 * Keep the page free to leave the artwork block naturally.
 * Do not use overscroll-behavior-y:none here; that can make
 * touchpad/mobile boundary gestures feel trapped.
 */


/* =========================================================
   ARTWORK WRAPPER

   IMPORTANT:
   The WINDOW handles scrolling.
   This wrapper does NOT create its own scrollable area.
========================================================= */

.ba-fullpage {
    --ba-blue: #004f71;
    --ba-header-height: 95px;
    --ba-sidebar-width: clamp(430px, 34vw, 620px);

    position: relative;

    display: block;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    overflow: visible;

    background: #fff;
}


/* =========================================================
   EACH ARTWORK SECTION
========================================================= */

.ba-fp-section {
    position: relative;

    display: block;

    width: 100%;

    /*
     * Each artwork fills the visible viewport underneath
     * the website header.
     */
    height: calc(100vh - var(--ba-header-height));
    height: calc(100dvh - var(--ba-header-height));

    min-height: calc(100vh - var(--ba-header-height));
    min-height: calc(100dvh - var(--ba-header-height));

    box-sizing: border-box;

    overflow: hidden;

    margin: 0;
    padding: 0;

    background: #e9e9e9;
    /*
     * One artwork per browser snap stop.
     * JS waits for momentum to finish before making any correction.
     */
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-margin-top: var(--ba-header-height);
}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.ba-background {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    width: auto;
    height: 100%;

    overflow: hidden;

    margin: 0;
    padding: 0;

    z-index: 1;

    transition:
        left 500ms cubic-bezier(.4, 0, .2, 1),
        right 500ms cubic-bezier(.4, 0, .2, 1);
}


.ba-background img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    margin: 0;
    padding: 0;

    transition:
        opacity 350ms ease,
        transform 700ms ease;
}


.ba-background img.is-changing {
    opacity: 0;
}


/* =========================================================
   RECENTER IMAGE IN THE VISIBLE AREA WHEN SIDEBAR IS OPEN
========================================================= */

.ba-fp-section:has(
    .ba-sidebar-right:not(.is-closed)
)
.ba-background {
    right: var(--ba-sidebar-width);
}


.ba-fp-section:has(
    .ba-sidebar-left:not(.is-closed)
)
.ba-background {
    left: var(--ba-sidebar-width);
}



/* =========================================================
   SIDEBARS
========================================================= */

.ba-sidebar {
    position: absolute;

    top: 0;
    bottom: 0;

    z-index: 20;

    width: var(--ba-sidebar-width);

    height: 100%;

    box-sizing: border-box;

    background: #fff;

    color: var(--ba-blue);

    /*
     * Keep visible so the toggle tab can sit outside
     * the sidebar.
     */
    overflow: visible;

    transition:
        transform 500ms cubic-bezier(.4, 0, .2, 1);
}


/* LEFT SIDEBAR */

.ba-sidebar-left {
    left: 0;
}


/* RIGHT SIDEBAR */

.ba-sidebar-right {
    right: 0;
}


/* =========================================================
   CLOSED SIDEBARS
========================================================= */

.ba-sidebar-right.is-closed {
    transform: translateX(100%);
}


.ba-sidebar-left.is-closed {
    transform: translateX(-100%);
}


/* =========================================================
   SIDEBAR TOGGLE TAB
========================================================= */

.ba-sidebar-toggle {
    position: absolute;

    top: 50%;

    z-index: 70;

    appearance: none;
    -webkit-appearance: none;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 76px;

    padding: 0;
    margin: 0;

    border: 0;

    background: #fff;

    color: var(--ba-blue);

    cursor: pointer;

    transform: translateY(-50%);

    box-shadow:
        0 2px 12px rgba(0, 0, 0, .14);

    transition:
        background 200ms ease,
        color 200ms ease;
}


/* Right sidebar toggle sits outside LEFT edge */

.ba-sidebar-right
.ba-sidebar-toggle {
    left: -44px;
}


/* Left sidebar toggle sits outside RIGHT edge */

.ba-sidebar-left
.ba-sidebar-toggle {
    right: -44px;
}


/* =========================================================
   TOGGLE CHEVRON
========================================================= */

.ba-sidebar-toggle::before {
    content: "";

    width: 13px;
    height: 13px;

    border-top: 3px solid currentColor;
    border-left: 3px solid currentColor;

    transition:
        transform 300ms ease;
}


/* RIGHT sidebar open */

.ba-sidebar-right
.ba-sidebar-toggle::before {
    transform: rotate(135deg);
}


/* LEFT sidebar open */

.ba-sidebar-left
.ba-sidebar-toggle::before {
    transform: rotate(-45deg);
}


/* RIGHT sidebar closed */

.ba-sidebar-right.is-closed
.ba-sidebar-toggle::before {
    transform: rotate(-45deg);
}


/* LEFT sidebar closed */

.ba-sidebar-left.is-closed
.ba-sidebar-toggle::before {
    transform: rotate(135deg);
}


.ba-sidebar-toggle:hover {
    background: #0A4561;
    color: #fff;
}


/* =========================================================
   SIDEBAR INNER CONTENT
========================================================= */

.ba-sidebar-inner {
    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;

    box-sizing: border-box;

    overflow: hidden;

    padding:
        clamp(60px, 8vh, 110px)
        clamp(65px, 5vw, 95px)
        30px;
}


/*
 * Leave room for the 01–05 navigation and arrows.
 */

.ba-sidebar-left
.ba-sidebar-inner {
    padding-left:
        clamp(90px, 7vw, 120px);
}


.ba-sidebar-right
.ba-sidebar-inner {
    padding-right:
        clamp(90px, 7vw, 120px);
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

.ba-eyebrow {
    margin: 0 0 8px;

    color: var(--ba-blue);

    font-size:
        clamp(28px, 2.5vw, 48px);

    font-weight: 300;

    line-height: 1;

    letter-spacing: .18em;

    text-transform: lowercase;
}


.ba-title {
    margin: 0 0 45px;

    color: var(--ba-blue);

    font-size:
        clamp(30px, 3vw, 54px);

    font-weight: 700;

    line-height: .95;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.ba-description {
    max-width: 430px;

    margin: 0;

    color: var(--ba-blue);

    font-size:
        clamp(15px, 1.15vw, 19px);

    font-weight: 400;

    line-height: 1.75;

    letter-spacing: .12em;
}


.ba-medium {
    margin: 45px 0 0;

    color: var(--ba-blue);

    font-size: 14px;

    font-style: italic;

    line-height: 1.7;
}


/* =========================================================
   01–05 ARTWORK NAVIGATION
========================================================= */

.ba-section-nav {
    position: absolute;

    top: 50%;

    display: flex;
    flex-direction: column;

    gap: 13px;

    z-index: 40;

    transform: translateY(-50%);
}


/* Numbers on outside edge */

.ba-sidebar-left
.ba-section-nav {
    left: 18px;
}


.ba-sidebar-right
.ba-section-nav {
    right: 18px;
}


.ba-section-nav button {
    appearance: none;
    -webkit-appearance: none;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 36px;

    padding: 0;
    margin: 0;

    border: 0;

    background: transparent;

    color: var(--ba-blue);

    cursor: pointer;

    font-family: inherit;

    font-size: 14px;
    font-weight: 400;

    line-height: 1;

    letter-spacing: .08em;

    opacity: .55;

    transition:
        opacity 200ms ease,
        font-weight 200ms ease,
        transform 200ms ease;
}


.ba-section-nav button:hover {
    opacity: 1;

    transform: scale(1.08);
}


.ba-section-nav button.is-active {
    opacity: 1;

    font-weight: 700;
}


/* =========================================================
   THUMBNAILS
========================================================= */

.ba-thumbnails {
    display: flex;

    flex-wrap: nowrap;

    gap: 14px;

    margin-top: auto;

    padding-top: 35px;
}


.ba-thumbnail {
    position: relative;

    appearance: none;
    -webkit-appearance: none;

    flex: 0 0 auto;

    width: 76px;
    height: 58px;

    padding: 0;
    margin: 0;

    overflow: hidden;

    border:
        2px solid transparent;

    background: #eee;

    cursor: pointer;

    opacity: .55;

    transition:
        opacity 220ms ease,
        border-color 220ms ease,
        transform 220ms ease;
}


.ba-thumbnail:hover {
    opacity: .85;
}


.ba-thumbnail.is-active {
    opacity: 1;

    border-color:
        var(--ba-blue);
}


.ba-thumbnail img {
    display: block;

    width: 100%;
    height: 100%!important;

    object-fit: cover;

    pointer-events: none;
}


/* =========================================================
   UP / DOWN ARROWS
========================================================= */

.ba-direction {
    position: absolute;

    z-index: 45;

    appearance: none;
    -webkit-appearance: none;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    padding: 0;
    margin: 0;

    border: 0;

    background: transparent;

    color: var(--ba-blue);

    cursor: pointer;
}


/* LEFT sidebar arrows */

.ba-sidebar-left
.ba-direction {
    left: 12px;
}


/* RIGHT sidebar arrows */

.ba-sidebar-right
.ba-direction {
    right: 12px;
}


.ba-direction-up {
    top: 44px;
}


.ba-direction-down {
    bottom: 28px;
}


/* Arrow shape */

.ba-direction::before {
    content: "";

    width: 23px;
    height: 23px;

    border-top:
        4px solid currentColor;

    border-left:
        4px solid currentColor;
}


.ba-direction-up::before {
    transform:
        rotate(45deg)
        translate(5px, 5px);
}


.ba-direction-down::before {
    transform:
        rotate(225deg)
        translate(5px, 5px);
}


.ba-direction:disabled {
    opacity: .25;

    cursor: default;
}


/* =========================================================
   ACCESSIBILITY / FOCUS
========================================================= */

.ba-fullpage
button:focus-visible {
    outline:
        3px solid #009fc3;

    outline-offset: 3px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .ba-fullpage {
        --ba-sidebar-width: clamp(380px, 42vw, 620px);
    }

    .ba-sidebar {
        width: var(--ba-sidebar-width);
        min-width: 0;
        max-width: none;
    }


    .ba-sidebar-left
    .ba-sidebar-inner {
        padding-left: 85px;
        padding-right: 45px;
    }


    .ba-sidebar-right
    .ba-sidebar-inner {
        padding-left: 45px;
        padding-right: 85px;
    }

}


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

@media (max-width: 767px) {

    /*
     * Mobile header is 75px instead of 95px.
     */
    html.ba-art-page-snap {
        scroll-padding-top: 75px;
    }


    .ba-fullpage {
        --ba-header-height: 75px;
        --ba-sidebar-width: 100%;
    }

    /* Mobile sidebars are bottom sheets, so keep image full width. */
    .ba-fp-section:has(
        .ba-sidebar-right:not(.is-closed)
    )
    .ba-background,
    .ba-fp-section:has(
        .ba-sidebar-left:not(.is-closed)
    )
    .ba-background {
        left: 0;
        right: 0;
    }


    /* =====================================================
       FULL HEIGHT MOBILE ARTWORK
    ====================================================== */

    .ba-fp-section {
        height:
            calc(
                100svh -
                var(--ba-header-height)
            );

        min-height:
            calc(
                100svh -
                var(--ba-header-height)
            );

        scroll-snap-align: start;
        scroll-snap-stop: always;
    }


    /* =====================================================
       MOBILE BOTTOM SHEET
    ====================================================== */

    .ba-sidebar {
        top: auto;
        bottom: 0;

        left: 0 !important;
        right: auto !important;

        width: 100%;

        min-width: 0;
        max-width: none;

        height: 55%;

        min-height: 430px;
        max-height: 650px;

        overflow: visible;

        background: #fff;

        transform: translateY(0);
    }


    /*
     * Closed mobile panels move DOWN
     * instead of left/right.
     */

    .ba-sidebar-left.is-closed,
    .ba-sidebar-right.is-closed {
        transform: translateY(100%);
    }


    /* =====================================================
       MOBILE TOGGLE TAB
    ====================================================== */

    .ba-sidebar-toggle,
    .ba-sidebar-left
    .ba-sidebar-toggle,
    .ba-sidebar-right
    .ba-sidebar-toggle {
        top: -38px;

        left: 50% !important;
        right: auto !important;

        width: 66px;
        height: 38px;

        transform:
            translateX(-50%);
    }


    /*
     * Open sheet = arrow points down.
     */

    .ba-sidebar-left
    .ba-sidebar-toggle::before,
    .ba-sidebar-right
    .ba-sidebar-toggle::before {
        transform:
            rotate(225deg);
    }


    /*
     * Closed sheet = arrow points up.
     */

    .ba-sidebar-left.is-closed
    .ba-sidebar-toggle::before,
    .ba-sidebar-right.is-closed
    .ba-sidebar-toggle::before {
        transform:
            rotate(45deg);
    }


    /* =====================================================
       MOBILE SIDEBAR CONTENT
    ====================================================== */

    .ba-sidebar-left
    .ba-sidebar-inner,
    .ba-sidebar-right
    .ba-sidebar-inner {
        display: flex;
        flex-direction: column;

        width: 100%;
        height: 100%;

        box-sizing: border-box;

        padding:
            28px
            24px
            58px;

        overflow-x: hidden;
        overflow-y: auto;

        overscroll-behavior: contain;

        -webkit-overflow-scrolling: touch;
    }


    /*
     * Prevent content from shrinking vertically.
     */

    .ba-eyebrow,
    .ba-title,
    .ba-description,
    .ba-medium,
    .ba-section-nav,
    .ba-thumbnails {
        flex-shrink: 0;
    }


    .ba-eyebrow {
        font-size: 25px;
    }


    .ba-title {
        margin-bottom: 18px;

        font-size: 31px;
    }


    .ba-description {
        max-width: none;

        font-size: 14px;

        line-height: 1.65;

        letter-spacing: .08em;
    }


    .ba-medium {
        margin-top: 20px;

        font-size: 12px;
    }


    /* =====================================================
       MOBILE 01–05 NAVIGATION
    ====================================================== */

    .ba-section-nav {
        position: static;

        display: flex;
        flex-direction: row;

        align-items: center;
        justify-content: space-between;

        gap: 4px;

        width: 100%;

        margin:
            20px
            0
            10px;

        padding:
            12px
            0
            0;

        border-top:
            1px solid
            rgba(0, 79, 113, .22);

        transform: none;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
    }


    .ba-section-nav button {
        flex:
            0
            0
            44px;

        width: 44px;
        height: 44px;

        min-height: 44px;

        padding: 0;

        opacity: .65;

        font-size: 12px;

        line-height: 1;
    }


    .ba-section-nav
    button.is-active {
        opacity: 1;

        font-weight: 700;
    }


    .ba-section-nav
    button.is-active::before {
        display: none;
    }


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

    .ba-thumbnails {
        position: static;

        display: flex;
        flex-wrap: nowrap;

        align-items: center;

        gap: 8px;

        width: 100%;

        margin:
            6px
            0
            14px;

        padding:
            0
            0
            6px;

        box-sizing: border-box;

        overflow-x: auto;
        overflow-y: visible;

        flex:
            0
            0
            auto;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
    }


    .ba-thumbnails::-webkit-scrollbar {
        display: none;
    }


    .ba-thumbnail {
        flex:
            0
            0
            68px;

        width: 68px;
        height: 50px;

        min-width: 68px;
        min-height: 50px;

        max-height: 50px;
    }


    .ba-thumbnail img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
    }


    /* =====================================================
       MOBILE UP / DOWN ARROWS
    ====================================================== */

    .ba-sidebar-left
    .ba-direction,
    .ba-sidebar-right
    .ba-direction {
        left: auto;

        right: 8px;
    }


    .ba-direction-up {
        top: 8px;
    }


    .ba-direction-down {
        top: auto;

        bottom: 8px;
    }

}


/* =========================================================
   SHORT / NARROW MOBILE SCREENS
========================================================= */

@media
(max-width: 767px) and
(max-height: 760px) {

    .ba-sidebar {
        height: 70%;

        min-height: 0;

        max-height: none;
    }


    .ba-sidebar-left
    .ba-sidebar-inner,
    .ba-sidebar-right
    .ba-sidebar-inner {
        padding-top: 24px;

        padding-bottom: 52px;
    }

}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ba-background img,
    .ba-thumbnail,
    .ba-sidebar,
    .ba-sidebar-toggle::before {
        transition: none;
    }

}



/* =========================================================
   RESPONSIVE HEIGHT FIXES
   Prevent artwork/sidebar from being cut off on
   tablet, mobile, laptops, and short browser windows.
   ========================================================= */


/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 1100px) {

    /*
     * Use the safest available viewport height.
     * svh is especially useful on tablets/mobile browsers.
     */
    .ba-fp-section,
    .ba-art-stage {
        height: calc(100svh - var(--ba-header-height)) !important;
        min-height: calc(100svh - var(--ba-header-height)) !important;
        max-height: calc(100svh - var(--ba-header-height)) !important;

        overflow: hidden !important;
    }


    /*
     * Keep the artwork image inside the available viewport.
     */
    .ba-background {
        top: 0;
        bottom: 0;

        height: 100%;

        overflow: hidden;
    }


    .ba-background img {
        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center center;
    }


    /*
     * Sidebar stays exactly as tall as the artwork stage.
     */
    .ba-sidebar {
        top: 0;
        bottom: 0;

        height: 100%;

        max-height: 100%;

        overflow: visible;
    }


    /*
     * Let sidebar content scroll internally if the available
     * vertical space becomes too short.
     */
    .ba-sidebar-inner {
        height: 100%;
        max-height: 100%;

        overflow-x: hidden;
        overflow-y: auto;

        overscroll-behavior: contain;

        scrollbar-width: thin;

        padding-top: clamp(45px, 6vh, 70px);
        padding-bottom: 65px;
    }


    /*
     * Prevent thumbnails from being pushed below viewport.
     */
    .ba-thumbnails {
        flex-shrink: 0;

        margin-top: auto;
        padding-top: 20px;
        padding-bottom: 6px;
    }


    /*
     * Slightly reduce vertical spacing.
     */
    .ba-title {
        margin-bottom: 26px;
    }


    .ba-medium {
        margin-top: 24px;
    }
}


/* =========================================================
   TABLET PORTRAIT
   ========================================================= */

@media
(max-width: 1024px)
and
(min-width: 768px) {

    /*
     * Sidebar can be a little wider on portrait tablets,
     * but never taller than the stage.
     */
    .ba-sidebar {
        width: 42%;
        min-width: 360px;
        max-width: 460px;
    }


    .ba-sidebar-inner {
        padding-top: 48px;
        padding-bottom: 60px;
    }


    .ba-eyebrow {
        font-size: clamp(24px, 3vw, 34px);
    }


    .ba-title {
        font-size: clamp(28px, 4vw, 38px);
        margin-bottom: 22px;
    }


    .ba-description {
        font-size: 14px;
        line-height: 1.55;
        letter-spacing: .08em;
    }


    .ba-medium {
        font-size: 12px;
        margin-top: 20px;
    }


    /*
     * Slightly smaller thumbnails so they always fit.
     */
    .ba-thumbnail {
        width: 62px;
        height: 46px;
    }
}


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

@media (max-width: 767px) {

    /*
     * Full artwork section fills the actually available
     * mobile viewport, not the larger theoretical 100vh.
     */
    .ba-fp-section,
    .ba-art-stage {
        height: calc(100svh - var(--ba-header-height)) !important;
        min-height: calc(100svh - var(--ba-header-height)) !important;
        max-height: calc(100svh - var(--ba-header-height)) !important;

        overflow: hidden !important;
    }


    /*
     * Background image always fills the complete stage.
     */
    .ba-background {
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;
    }


    .ba-background img {
        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center center;
    }


    /*
     * Sidebar becomes a controlled bottom sheet.
     *
     * Using max-height rather than a rigid percentage
     * prevents it from extending below the viewport.
     */
    .ba-sidebar {
        top: auto !important;
        bottom: 0 !important;

        left: 0 !important;
        right: 0 !important;

        width: 100% !important;

        min-width: 0 !important;
        max-width: none !important;

        height: auto !important;

        min-height: 0 !important;

        max-height: 58% !important;

        overflow: visible;
    }


    /*
     * When closed, move the complete sheet downward.
     */
    .ba-sidebar-left.is-closed,
    .ba-sidebar-right.is-closed {
        transform: translateY(100%) !important;
    }


    /*
     * Important:
     * sidebar CONTENT can scroll if the screen is short.
     */
    .ba-sidebar-inner {
        width: 100%;
        height: auto !important;

        max-height: calc(
            (100svh - var(--ba-header-height)) * .58
        );

        overflow-x: hidden;
        overflow-y: auto;

        overscroll-behavior: contain;

        -webkit-overflow-scrolling: touch;

        padding:
            24px
            24px
            58px !important;
    }


    /*
     * Tighter typography so important content does not
     * disappear below the screen.
     */
    .ba-eyebrow {
        font-size: 24px;
    }


    .ba-title {
        font-size: 30px;

        margin-bottom: 16px;
    }


    .ba-description {
        font-size: 13px;

        line-height: 1.55;

        letter-spacing: .07em;
    }


    .ba-medium {
        font-size: 11px;

        margin-top: 15px;
    }


    /*
     * Navigation stays inside the scrollable sheet.
     */
    .ba-section-nav {
        position: static !important;

        display: flex;
        flex-direction: row;

        justify-content: space-between;
        align-items: center;

        width: 100%;

        gap: 2px;

        margin: 16px 0 8px;

        padding-top: 9px;

        border-top: 1px solid rgba(0, 79, 113, .2);

        transform: none !important;
    }


    .ba-section-nav button {
        flex: 0 0 40px;

        width: 40px;
        height: 40px;

        font-size: 11px;
    }


    .ba-section-nav button.is-active::before {
        display: none;
    }


    /*
     * Thumbnails stay reachable and can horizontally scroll
     * rather than making the panel taller.
     */
    .ba-thumbnails {
        flex-shrink: 0;

        display: flex;
        flex-wrap: nowrap;

        gap: 7px;

        width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        margin: 8px 0 0;

        padding: 0 0 6px;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
    }


    .ba-thumbnails::-webkit-scrollbar {
        display: none;
    }


    .ba-thumbnail {
        flex: 0 0 62px;

        width: 62px;
        height: 46px;
    }


    /*
     * Keep toggle above bottom sheet.
     */
    .ba-sidebar-toggle,
    .ba-sidebar-left .ba-sidebar-toggle,
    .ba-sidebar-right .ba-sidebar-toggle {
        top: -38px !important;

        left: 50% !important;
        right: auto !important;

        width: 66px;
        height: 38px;

        transform: translateX(-50%) !important;
    }
}


/* =========================================================
   SHORT LAPTOP / TABLET WINDOWS
   Example: small browser window or landscape tablet
   ========================================================= */

@media
(min-width: 768px)
and
(max-height: 800px) {

    .ba-sidebar-inner {
        padding-top: 38px;
        padding-bottom: 55px;
    }


    .ba-eyebrow {
        font-size: clamp(22px, 2.2vw, 32px);
    }


    .ba-title {
        font-size: clamp(28px, 3vw, 38px);

        margin-bottom: 18px;
    }


    .ba-description {
        font-size: 13px;

        line-height: 1.5;
    }


    .ba-medium {
        margin-top: 16px;

        font-size: 11px;
    }


    .ba-thumbnails {
        padding-top: 15px;
    }


    .ba-thumbnail {
        width: 60px;
        height: 44px;
    }
}


/* =========================================================
   VERY SHORT MOBILE SCREENS
   ========================================================= */

@media
(max-width: 767px)
and
(max-height: 700px) {

    .ba-sidebar {
        max-height: 68% !important;
    }


    .ba-sidebar-inner {
        max-height: calc(
            (100svh - var(--ba-header-height)) * .68
        );

        padding-top: 20px !important;
        padding-bottom: 52px !important;
    }


    .ba-title {
        margin-bottom: 12px;
    }


    .ba-description {
        line-height: 1.45;
    }
}

/* =========================================================
   FINAL IMAGE FILL FIX — TABLET / MOBILE / SHORT VIEWPORTS
   ========================================================= */

/*
 * GeneratePress / Elementor can apply height:auto to images
 * at responsive breakpoints. That makes the artwork image keep
 * its natural aspect ratio and exposes the gray .ba-background
 * underneath. Force the artwork image to fill its stage.
 */
.ba-background,
.ba-fp-section .ba-background,
.ba-art-stage .ba-background {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    min-height: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

.ba-background > img,
.ba-background img,
.ba-background .ba-gallery-main,
.ba-fp-section .ba-background > img,
.ba-fp-section .ba-background img {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;

    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center center !important;
}

/*
 * Keep the image constrained to the visible image area when
 * a desktop/tablet sidebar is open.
 */
@media (min-width: 768px) {

    .ba-fp-section:has(
        .ba-sidebar-right:not(.is-closed)
    ) .ba-background {
        left: 0 !important;
        right: var(--ba-sidebar-width) !important;
        width: auto !important;
    }

    .ba-fp-section:has(
        .ba-sidebar-left:not(.is-closed)
    ) .ba-background {
        left: var(--ba-sidebar-width) !important;
        right: 0 !important;
        width: auto !important;
    }
}

/*
 * Mobile uses a bottom sheet, so the image remains full width.
 */
@media (max-width: 767px) {

    .ba-fp-section .ba-background {
        inset: 0 !important;
        width: 100% !important;
    }

    .ba-background > img,
    .ba-background img,
    .ba-background .ba-gallery-main {
        width: 100% !important;
        height: 100% !important;
    }
}

/* =========================================================
   FINAL COLUMN-SEAM FIX
   Keep sidebar width and image offset based on the SAME
   containing block, then overlap by 1px to prevent a
   sub-pixel gray seam on tablets/smaller screens.
   ========================================================= */

/* Desktop */
.ba-fullpage {
    --ba-sidebar-width: clamp(430px, 34%, 620px);
}

/* Small laptop / tablet */
@media (min-width: 1025px) and (max-width: 1100px) {
    .ba-fullpage {
        --ba-sidebar-width: clamp(380px, 42%, 620px);
    }

    .ba-sidebar {
        width: var(--ba-sidebar-width) !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* Tablet portrait */
@media (min-width: 768px) and (max-width: 1024px) {
    .ba-fullpage {
        --ba-sidebar-width: clamp(360px, 42%, 460px);
    }

    .ba-sidebar {
        width: var(--ba-sidebar-width) !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/*
 * Use the exact same custom-property value for the image
 * boundary as the sidebar width. The 1px overlap prevents
 * anti-aliasing/sub-pixel seams from exposing the gray stage.
 */
@media (min-width: 768px) {

    .ba-fp-section:has(
        .ba-sidebar-right:not(.is-closed)
    ) .ba-background {
        left: 0 !important;
        right: calc(var(--ba-sidebar-width) - 1px) !important;
        width: auto !important;
    }

    .ba-fp-section:has(
        .ba-sidebar-left:not(.is-closed)
    ) .ba-background {
        left: calc(var(--ba-sidebar-width) - 1px) !important;
        right: 0 !important;
        width: auto !important;
    }
}

/* Mobile remains full-width behind the bottom sheet. */
@media (max-width: 767px) {
    .ba-fullpage {
        --ba-sidebar-width: 100%;
    }

    .ba-fp-section .ba-background {
        inset: 0 !important;
        width: 100% !important;
    }
}





/* =========================================================
   SIDEBAR NUMBER STATE
   Active number is bold only — no horizontal indicator line.
   ========================================================= */

.ba-section-nav button::before,
.ba-section-nav button::after,
.ba-section-nav button.is-active::before,
.ba-section-nav button.is-active::after {
    content: none !important;
    display: none !important;
}

.ba-section-nav button {
    font-weight: 400;
    text-decoration: none;
}

.ba-section-nav button.is-active,
.ba-section-nav button[aria-current="page"] {
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* =========================================================
   MOBILE — MOVE DIRECTION ARROWS AWAY FROM 01–05 NUMBERS
   ========================================================= */

@media (max-width: 767px) {

    /*
     * Give the top arrow more separation from
     * the horizontal 01–05 navigation.
     */
    .ba-direction[data-direction="up"] {
        top: 115px !important;
    }

    /*
     * Keep bottom arrow comfortably below content/nav.
     */
    .ba-direction[data-direction="down"] {
        bottom: 28px !important;
    }
}

/* =========================================================
   UPDATED SCROLL SNAP — STABLE MOBILE VIEWPORT
   dvh changes as the mobile browser chrome collapses/expands.
   svh keeps the artwork snap points stable throughout a gesture.
   ========================================================= */

@media (max-width: 767px) {

    .ba-fp-section {
        height: calc(100svh - var(--ba-header-height)) !important;
        min-height: calc(100svh - var(--ba-header-height)) !important;
        max-height: calc(100svh - var(--ba-header-height)) !important;
    }

    .ba-sidebar-inner {
        overscroll-behavior: contain;
    }
}

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }
}

/* =========================================================
   MOBILE SNAP ALIGNMENT
   Do not expose the previous artwork above the active slide.
   ========================================================= */

@media (max-width: 767px) {

    .ba-fullpage {
        --ba-header-height: 75px !important;
    }


    .ba-fp-section {
        height: calc(100svh - 75px) !important;
        min-height: calc(100svh - 75px) !important;
        max-height: calc(100svh - 75px) !important;

        scroll-margin-top: 75px !important;
    }


    /*
     * Remove any older snap padding that could combine
     * with scroll-margin-top and create a double offset.
     */
    html,
    html.ba-art-page-snap {
        scroll-padding-top: 0 !important;
    }

}


/* =========================================================
   PINNED MANDATORY ARTWORK SCROLLER
   Scroll behavior copied from the supplied working version.
   ========================================================= */
html,
body {
    overflow-x: clip;
}

.ba-pin {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.ba-fullpage {
    position: sticky;
    top: var(--ba-header-height);
    height: calc(100vh - var(--ba-header-height));
    height: calc(100dvh - var(--ba-header-height));
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    scroll-padding: 0;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
}

.ba-fullpage::-webkit-scrollbar {
    display: none;
}

@supports (height: 100dvh) {
    .ba-fullpage {
        height: calc(100dvh - var(--ba-header-height));
    }
}

.ba-fullpage .ba-fp-section {
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-margin-top: 0;
}

.ba-sidebar-inner {
    overscroll-behavior: contain;
}

@media (max-width: 767px) {
    .ba-fullpage {
        --ba-header-height: 75px;
        height: calc(100dvh - var(--ba-header-height));
    }

    .ba-fullpage .ba-fp-section {
        height: 100%;
        min-height: 100%;
        max-height: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    html,
    .ba-fullpage {
        scroll-behavior: auto;
    }
}

/* =========================================================
   MOBILE — SHOW ONLY THE TOP 01–05 NAVIGATION
   The JS creates a cloned .ba-tablet-nav row inside the
   sidebar for larger responsive layouts. Hide that clone
   on mobile so only the original/top 01–05 row remains.
   ========================================================= */

@media (max-width: 767px) {

    .ba-tablet-nav {
        display: none !important;
    }

}

/* =========================================================
   701 SAN MARCO - ARTWORK SCROLLER
   Replaces the old "PINNED MANDATORY ARTWORK SCROLLER" block
   at the end of the stylesheet. Nothing else changes.
   ========================================================= */
 
/* The artwork block is its own scroller, one screen tall, with
   MANDATORY snapping: the browser itself refuses to come to
   rest between two artworks. Nothing is pinned and nothing is
   fixed - the block sits in the page like any other section
   and scrolls away when the artworks run out. Script holds it
   on the header line while there is still artwork to see. */
/* Every declaration here is !important on purpose. The old
   pinned block may still be sitting further down the
   stylesheet - it is meant to be deleted, but if it is not,
   its position: sticky would come back and the block would
   ride over the footer. This wins wherever it sits. */
.ba-fullpage {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    height: calc(100vh - var(--ba-header-height)) !important;
    max-height: none !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    scroll-snap-type: y mandatory !important;
    scroll-padding: 0 !important;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
}
 
/* If a leftover wrapper from the old pinned version is ever
   present, it must not add height of its own. */
.ba-pin {
    height: auto !important;
    min-height: 0 !important;
}
 
.ba-fullpage::-webkit-scrollbar {
    display: none;
}
 
/* dvh, not svh: svh is the height with the phone's address bar
   SHOWING, so the moment the bar slides away the block is
   shorter than the screen and leaves a strip of bare page below
   it - and a thumb landing in that strip scrolls the page
   instead of the artworks. dvh always fills what is visible. */
@supports (height: 100dvh) {
    .ba-fullpage {
        height: calc(100dvh - var(--ba-header-height)) !important;
    }
}
 
/* Each artwork is exactly the container, and the !important is
   deliberate: the responsive blocks earlier in this stylesheet
   set the section height with !important themselves, and if
   those win the artworks no longer match the container - which
   is what lets a previous artwork show above the current one. */
.ba-fullpage .ba-fp-section {
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-margin-top: 0 !important;
}
 
/* The mobile text panel keeps its own scrolling when the copy
   genuinely does not fit, and stops there rather than chaining
   into the artwork scroller behind it. */
.ba-sidebar-inner {
    overscroll-behavior: contain;
}
 
@media (max-width: 767px) {
    .ba-fullpage {
        position: relative !important;
        top: auto !important;
        height: calc(100dvh - var(--ba-header-height)) !important;
        max-height: none !important;
        overflow-y: scroll !important;
    }
    .ba-fullpage .ba-fp-section {
        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;
    }
}
 
@media (prefers-reduced-motion: reduce) {
    html,
    .ba-fullpage {
        scroll-behavior: auto;
    }
}