/* v4.0.12: shared page edges, centered galleries and natural document scrolling.
   Loaded after the legacy stylesheet so its historical breakpoint patches cannot
   reintroduce fixed text heights or move the controls back onto the photographs. */

/* v4.0.13: expanded navigation labels must fit the sidebar, including bold hover. */
html body .econ-main-nav,
html body .econ-main-nav .econ-project-nav,
html body .econ-main-nav .econ-category-nav {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}
html body .econ-main-nav .econ-accordion-panel {
    min-width: 0;
    max-width: 100%;
}
html body .econ-main-nav .econ-project-nav-link {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal;
}

.econ-gallery-status {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    max-width: 85%;
    margin: 0;
    padding: 8px 12px;
    background: rgba(255, 255, 255, .92);
    color: #707070;
    text-align: center;
    transform: translate(-50%, -50%);
}
.econ-gallery-status[hidden] {
    display: none !important;
}

/* One spacing rule for the intro, desktop sidebar and phone/tablet mastheads. */
html body .econ-intro__word,
html body .econ-logo,
html body .econ-mobile-brand {
    letter-spacing: .065em !important;
}
html body .econ-logo__light {
    margin-left: 0 !important;
}

/* The fixed white navigation field ends at the content edge. Give the widened
   wordmark that available space; the expanding tablet project menu stays full-width. */
@media (min-width: 700px) {
    html body:not(.single-econ_project) .econ-sidebar {
        width: var(--econ-t-main-left, var(--econ-master-left)) !important;
    }
}

/* The document, rather than a nested text panel, owns vertical scrolling. */
html body.single-econ_project .econ-project,
html body.single-econ_project .econ-project-info,
html body.single-econ_project .econ-project-description {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}
html body.single-econ_project .econ-project-info {
    min-width: 0 !important;
    overflow-wrap: anywhere;
}

/* Hidden in the image-stream layout used by phones and portrait tablets. */
.econ-gallery-controls {
    display: none;
}

html body .econ-contact-page .econ-contact-details {
    grid-column: 1 !important;
    min-width: 0;
    overflow-wrap: anywhere;
}
html body .econ-contact-page .econ-contact-label {
    padding: 0 !important;
    margin: 0 0 24px !important;
}
html body .econ-contact-page .econ-contact-body {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
html body .econ-contact-page .econ-contact-image {
    grid-column: 2 !important;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-width: 0;
    margin: 0;
}
html body .econ-contact-page .econ-contact-image img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 74vh;
    object-fit: contain;
    object-position: center top;
}

/* This matches the existing desktop/stream breakpoint, including short laptops. */
@media (min-width: 1367px), (min-width: 821px) and (max-height: 599px) {
    :root {
        --econ-master-left: clamp(260px, 21vw, 410px) !important;
        --econ-layout-right: clamp(56px, 7.5vw, 148px);
        --econ-master-width: calc(100vw - var(--econ-master-left) - var(--econ-layout-right)) !important;
        --econ-copy-width: clamp(240px, 18vw, 345px);
        --econ-column-gap: clamp(40px, 5.6vw, 108px);
    }

    html body .econ-sidebar,
    html body .econ-sidebar:not(.is-open) {
        opacity: 1 !important;
        visibility: visible !important;
    }
    html body.single-econ_project .econ-sidebar {
        width: var(--econ-master-left) !important;
    }
    html body .econ-practice-page,
    html body .econ-contact-page,
    html body .econ-research-index,
    html body .econ-editorial,
    html body .econ-overview,
    html body .econ-project-index {
        width: var(--econ-master-width) !important;
        max-width: none !important;
        margin-left: var(--econ-master-left) !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    html body .econ-home-stage {
        width: var(--econ-master-width) !important;
        max-width: none !important;
        margin-left: var(--econ-master-left) !important;
        margin-right: 0 !important;
        left: auto !important;
    }
    html body .econ-practice-section,
    html body .econ-research-index,
    html body .econ-editorial,
    html body .econ-overview,
    html body .econ-project-index {
        grid-template-columns: var(--econ-copy-width) minmax(0, 1fr) !important;
        column-gap: var(--econ-column-gap) !important;
    }
    html body .econ-practice-label,
    html body .econ-research-index__nav,
    html body .econ-editorial > .econ-page-index,
    html body .econ-overview-list,
    html body .econ-project-index__filters {
        grid-column: 1 !important;
        padding-right: 0 !important;
    }
    html body .econ-practice-body,
    html body .econ-research-index__content,
    html body .econ-editorial > .econ-page-content,
    html body .econ-overview-preview,
    html body .econ-project-index__list {
        grid-column: 2 !important;
    }

    html body.single-econ_project .econ-project {
        display: grid !important;
        grid-template-columns: var(--econ-copy-width) minmax(0, 1fr) !important;
        align-items: start !important;
        column-gap: var(--econ-column-gap) !important;
        row-gap: 0 !important;
        width: var(--econ-master-width) !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 0 0 var(--econ-master-left) !important;
        padding: var(--econ-project-datum, var(--econ-nav-start)) 0 0 !important;
    }
    html body.single-econ_project.admin-bar .econ-project {
        padding-top: var(--econ-project-datum, calc(var(--econ-nav-start) + 32px)) !important;
    }
    html body.single-econ_project .econ-project-info {
        grid-column: 1 !important;
        align-self: start !important;
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    html body.single-econ_project .econ-project-gallery {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        grid-column: 2 !important;
        align-self: start !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    html body.single-econ_project .econ-gallery-stage {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: clamp(300px, calc(100vh - var(--econ-project-datum, var(--econ-nav-start)) - 100px), 780px) !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    html body.single-econ_project .econ-gallery-slide {
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    html body.single-econ_project .econ-gallery-slide img {
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: center top !important;
        margin: 0 !important;
    }
    html body.single-econ_project .econ-gallery-controls {
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        gap: 12px;
        width: 100%;
        margin-top: 12px;
    }
    html body.single-econ_project .econ-gallery-counter {
        display: block !important;
        align-self: center !important;
        flex: 0 0 auto;
        width: auto !important;
        min-width: 58px;
        padding: 0 !important;
        margin: 0 !important;
        text-align: center !important;
        font-variant-numeric: tabular-nums;
    }
    html body.single-econ_project .econ-gallery-controls .econ-gallery-zone {
        position: static !important;
        inset: auto !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 36px;
        width: 36px !important;
        height: 36px !important;
        transform: none !important;
    }
    html body.single-econ_project .econ-gallery-controls .econ-gallery-zone span {
        position: static !important;
        inset: auto !important;
        opacity: 1 !important;
        font-size: 23px !important;
        color: #707070 !important;
        transform: none !important;
    }
    html body.single-econ_project .econ-gallery-controls .econ-gallery-zone:hover span,
    html body.single-econ_project .econ-gallery-controls .econ-gallery-zone:focus-visible span {
        color: #000 !important;
    }
    html body.single-econ_project .econ-gallery-controls .econ-gallery-zone:focus-visible {
        outline: 1px solid #707070;
        outline-offset: 2px;
    }
    html body.single-econ_project .econ-gallery-controls .econ-gallery-zone:disabled {
        cursor: default;
        opacity: .25;
    }
    html body.single-econ_project .econ-gallery-mobile-first,
    html body.single-econ_project .econ-gallery-mobile-rest {
        display: none !important;
    }

    html body .econ-contact-page .econ-contact-grid {
        display: grid !important;
        grid-template-columns: var(--econ-copy-width) minmax(0, 1fr) !important;
        column-gap: var(--econ-column-gap) !important;
        align-items: start;
    }

    /* The same frame drives Home, editorial pages, Contact and the footer. */
    html body .econ-site-footer {
        position: relative !important;
        width: var(--econ-master-width) !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 0 0 var(--econ-master-left) !important;
        padding: clamp(64px, 8vh, 86px) 0 46px !important;
    }
    html body .econ-site-footer__inner {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 24px !important;
    }
    html body .econ-site-footer__legal {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px 26px;
        margin: 0 !important;
    }
}

@media (min-width: 700px) and (max-width: 1366px) and (min-height: 600px) {
    html body.single-econ_project .econ-site-footer {
        width: min(88vw, 920px) !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (min-width: 821px) and (max-width: 1366px) and (min-height: 600px) {
    html body .econ-contact-page .econ-contact-grid {
        display: grid !important;
        grid-template-columns: minmax(190px, 1fr) minmax(0, 1.5fr) !important;
        gap: 32px !important;
    }
}

@media (max-width: 820px) {
    html body .econ-contact-page .econ-contact-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
    }
    html body .econ-contact-page .econ-contact-image {
        width: 100%;
    }
    html body .econ-contact-page .econ-contact-image img {
        width: 100%;
        max-height: none;
    }
}