/* All changes are inside media queries. Desktop rules and saved content stay intact.
   The second query includes larger touch tablets in landscape orientation. */
@media screen and (max-width: 1024px),
       screen and (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
    #demos-archive-root .be-homehero,
    #demos-archive-root .be-projectfeature {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        align-items: start !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    #demos-archive-root .be-homehero > .be-herotext,
    #demos-archive-root .be-projectfeature > .dda-projecttext {
        contain: none !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 18px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        padding: clamp(20px, 4vw, 30px) !important;
        overflow: visible !important;
    }

    #demos-archive-root .dda-projectcopy {
        contain: none !important;
        display: block !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #demos-archive-root .be-homehero h1,
    #demos-archive-root .be-projectfeature h2,
    #demos-archive-root .dda-projectsubtitle,
    #demos-archive-root .be-projectfeature .dda-directory-subtitle,
    #demos-archive-root .dda-projectmeta > span,
    #demos-archive-root .dda-projectcopy > .be-small {
        display: block !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        -webkit-box-orient: initial !important;
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        white-space: normal !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    #demos-archive-root .be-homehero h1,
    #demos-archive-root .be-projectfeature h2 {
        font-size: clamp(24px, 3.4vw, 28px) !important;
        line-height: 1.28 !important;
        letter-spacing: -0.4px !important;
        margin: 0 0 14px !important;
    }

    #demos-archive-root .dda-projectsubtitle,
    #demos-archive-root .be-projectfeature .dda-directory-subtitle {
        font-size: 17px !important;
        line-height: 1.6 !important;
        letter-spacing: normal !important;
        margin: 0 !important;
    }

    #demos-archive-root .dda-projectmeta {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    #demos-archive-root .dda-projectcopy > .be-small {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-top: 14px !important;
    }

    #demos-archive-root .be-homehero > .be-heroimage,
    #demos-archive-root .be-projectfeature > img,
    #demos-archive-root .be-projectfeature > .dda-cover-placeholder {
        contain: none !important;
        align-self: start !important;
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 4 / 3 !important;
        object-fit: contain !important;
        object-position: center !important;
    }

    #demos-archive-root .be-heroimage > img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
    }

    #demos-archive-root .dda-projecttext > .be-button {
        align-self: flex-start !important;
        max-width: 100% !important;
        white-space: normal !important;
        font-size: 15px !important;
        line-height: 1.5 !important;
    }

    #demos-projects-root .dmp-project-hero {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 24px !important;
    }

    #demos-projects-root .dmp-project-hero h1,
    #demos-projects-root .dmp-card h2,
    #demos-projects-root .dmp-card h2 a,
    #demos-projects-root .dmp-project-intro,
    #demos-projects-root .dmp-facts dd,
    #demos-projects-root .dmp-card-donor {
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        white-space: normal !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
    }

    #demos-projects-root .dmp-project-hero h1 {
        font-size: 28px !important;
        line-height: 1.28 !important;
        letter-spacing: -0.4px !important;
    }

    #demos-projects-root .dmp-project-cover {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 4 / 3 !important;
    }

    #demos-projects-root .dmp-facts {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px !important;
    }

    #demos-projects-root .dmp-lead,
    #demos-projects-root .dmp-card-summary,
    #demos-projects-root .dmp-facts dd {
        font-size: 16px !important;
        line-height: 1.65 !important;
    }

    #demos-projects-root .dmp-card-period,
    #demos-projects-root .dmp-card-donor {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
}

/* A compact shared header; the existing drawer and navigation keep their behavior. */
@media screen and (max-width: 1024px) {
    body.dss-site,
    body.dda-archive-page {
        --dss-scroll-offset: 90px;
    }

    #demos-style-header .dss-header,
    #demos-archive-root header.dda-site-header,
    #demos-mobile-header-root header.dda-site-header {
        padding: 12px 5% !important;
    }

    #demos-style-header .dss-brandline,
    #demos-archive-root .dda-site-header .be-brandline,
    #demos-mobile-header-root .dda-site-header .be-brandline {
        min-height: 44px !important;
        gap: 12px !important;
    }

    #demos-style-header .dss-brand > span,
    #demos-archive-root .dda-site-header .dda-site-brand > span,
    #demos-mobile-header-root .dda-site-header .dda-site-brand > span {
        font-size: clamp(18px, 2.8vw, 22px) !important;
        line-height: 1.3 !important;
    }
}

/* Short landscape screens regain the full viewport while the page is scrolled. */
@media screen and (max-width: 1024px) and (max-height: 520px) and (orientation: landscape) {
    #demos-style-header,
    #demos-archive-root .be-header {
        position: relative !important;
        top: auto !important;
    }
    body.dss-site,
    body.dda-archive-page {
        --dss-scroll-offset: 20px;
    }
}