/* Shared public-site heading scale. Load after the page styles so the same
   hierarchy applies to the home page, archives, offices and article pages.
   Keep reader-controlled body text and printable documents independent. */
@media screen {
    :root {
        --site-section-title-size: clamp(1.375rem, 1.1rem + .7vw, 1.75rem);
        --site-article-title-size: clamp(1.5rem, 1.15rem + 1vw, 1.875rem);
        --site-card-title-size: clamp(1.0625rem, .98rem + .2vw, 1.15625rem);
    }

    /* The active home page already has compact spacing; adjust its type only. */
    body.d9-body .d9-heading h2,
    body.d9-body .d9-video .d9-heading h2,
    body.d9-body .d9-quotes .d9-heading h2,
    body.d9-body .d9-d2-positions h2,
    body.d9-body .d9-institutions .d9-heading h2,
    body.d9-body .d9-institutions__title h2 {
        font-size: var(--site-section-title-size);
        font-weight: 800;
        line-height: 1.4;
        letter-spacing: 0;
        text-wrap: balance;
    }

    body.d9-body .d9-listening .d8-adhan__head h3 {
        font-size: clamp(1.125rem, .95rem + .6vw, 1.5rem);
        line-height: 1.5;
        letter-spacing: 0;
        text-wrap: balance;
    }

    /* Existing list pages use an h6 subtitle as their main archive heading. */
    .page-content .section-head .sub-title,
    .page-content .section-head h1,
    .page-content .section-head h3 {
        font-size: var(--site-section-title-size);
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: 0;
        overflow-wrap: anywhere;
        text-wrap: balance;
    }

    /* custom.css supplies important declarations for this legacy selector. */
    .page-content .section-head h2,
    .page-content .section-head .h2 {
        font-size: var(--site-section-title-size) !important;
        line-height: 1.5 !important;
        font-weight: 700;
        letter-spacing: 0;
        text-wrap: balance;
    }

    .page-content .dz-card .dz-title {
        font-size: var(--site-card-title-size);
        font-weight: 700;
        line-height: 1.65;
        letter-spacing: 0;
        overflow-wrap: anywhere;
    }

    .page-content .post-details-style .dz-title,
    .page-content .dz-bnr-inr-entry > h1 {
        font-size: var(--site-article-title-size);
        font-weight: 700;
        line-height: 1.6;
        letter-spacing: 0;
        overflow-wrap: anywhere;
        text-wrap: balance;
    }

    .page-content .widget-title .title,
    .page-content .similar-posts h4,
    .page-content .comments-area > .title,
    .page-content .comment-respond .title {
        font-size: clamp(1.125rem, 1rem + .3vw, 1.375rem);
        line-height: 1.55;
        letter-spacing: 0;
    }

    /* Newer content templates use their own heading classes. */
    body .ed-magazine-hero__heading h1,
    body .book-library__intro h1,
    body .book-library__catalog-head h2,
    body .book-detail__about h2,
    body .media-library__hero-copy h1,
    body .media-catalog__head h2 {
        font-size: var(--site-section-title-size);
        line-height: 1.5;
        letter-spacing: 0;
        overflow-wrap: anywhere;
        text-wrap: balance;
    }

    body .ed-reader-hero__copy h1,
    body .book-detail__copy h1,
    body .media-detail__header h1 {
        font-size: var(--site-article-title-size);
        line-height: 1.6;
        letter-spacing: 0;
        overflow-wrap: anywhere;
        text-wrap: balance;
    }

    body .ed-story-card h2 {
        font-size: var(--site-card-title-size);
        line-height: 1.65;
        letter-spacing: 0;
    }
}

/* Whole-site scale trim on desktop: text and sections (hero, sliders, cards)
   render about 8% smaller. The sticky header sits outside .page-content, so
   its calibrated 122px stays as designed. */
@media screen and (min-width: 1101px) {
    :root {
        --site-zoom: .8;
        --site-header-height: 92px;
        --site-hero-zoom: 1;
    }

    .page-content,
    .d8-footer,
    footer.site-footer {
        zoom: var(--site-zoom);
    }

    /* First fold: the hero fills the space under the header on any laptop.
       Inside the zoomed content 100vh is scaled too, so divide it back
       (by both zooms: the hero's own multiplies the site trim). */
    .d9-main .d9-hero {
        display: flex;
        flex-direction: column;
        justify-content: center;
        zoom: var(--site-hero-zoom);
        min-height: calc((100vh - var(--site-header-height)) / var(--site-zoom) / var(--site-hero-zoom));
    }
}

/* Large monitors. The .8 trim above was calibrated for a laptop; on a 2560 or
   3440 screen it left every section as a narrow 1056px column inside enormous
   margins.

   Two ladders, on purpose:
   - Widths follow the screen's width alone, so an ultrawide 3440x1440 uses its
     width even though it is too short to scale everything up.
   - Zoom steps also require height, so a short screen is not filled edge to
     edge with oversized type.

   Shell widths are given in vw and multiplied by the zoom they sit inside, so
   each section lands at roughly three quarters of the screen. The hero carries
   a second zoom (--site-hero-zoom); its vw values are divided by that, and the
   pair keeps the hero's effective scale at x1 / x1.28 / x1.43 / x1.6. */
@media screen and (min-width: 1600px) {
    .d9-body {
        --d9-shell: min(82vw, calc(100vw - 64px));
        --d8-shell: min(84vw, calc(100vw - 64px));
    }

    .d9-body .d9-main .d7-shell { width: min(79vw, calc(100% - 64px)); }
}

@media screen and (min-width: 2300px) {
    .d9-body {
        --d9-shell: min(74vw, calc(100vw - 80px));
        --d8-shell: min(76vw, calc(100vw - 80px));
    }

    .d9-body .d9-main .d7-shell { width: min(61vw, calc(100% - 56px)); }
}

@media screen and (min-width: 3000px) {
    .d9-body {
        --d9-shell: min(70vw, calc(100vw - 96px));
        --d8-shell: min(72vw, calc(100vw - 96px));
    }

    .d9-body .d9-main .d7-shell { width: min(55vw, calc(100% - 56px)); }
}

@media screen and (min-width: 3600px) {
    .d9-body {
        --d9-shell: min(62vw, calc(100vw - 112px));
        --d8-shell: min(64vw, calc(100vw - 112px));
    }

    .d9-body .d9-main .d7-shell { width: min(49vw, calc(100% - 56px)); }
}

@media screen and (min-width: 1600px) {
    :root {
        --site-zoom: .9;
        --site-hero-zoom: 1.12;
    }
}

@media screen and (min-width: 2300px) and (min-height: 1250px) {
    :root {
        --site-zoom: 1;
        /* The hero's own zoom, independent of --site-zoom: only .d9-hero and
           its children read it, so this cannot change any other section's
           size. A common target is exactly 2560x1440, where 1.28 (the value
           matching 1920's designed size) still left the slider looking small
           inside its fold; 1.42 fills noticeably more of both axes. */
        --site-hero-zoom: 1.42;
    }
}

@media screen and (min-width: 3000px) and (min-height: 1600px) {
    :root {
        --site-zoom: 1.1;
        --site-hero-zoom: 1.3;
    }
}

@media screen and (min-width: 3600px) and (min-height: 1900px) {
    :root {
        --site-zoom: 1.25;
        --site-hero-zoom: 1.28;
    }
}