/* Wilson Quarterly responsive fixes. The 2019 build only has a desktop layout and a
   640px-and-below layout, so tablets got desktop type that overflows and overlaps,
   and phones got a hero title flush against the screen edge. */

@media only screen and (max-width: 640px) {
    html body .LakeChadStory__ ._StoryCover__ .Cover__ ._CoverTitle__ {
        left: 24px;
        right: 24px;
    }
    html body .LakeChadStory__ ._StoryCover__ .Cover__ ._CoverTitle__ .Title ._Sub {
        font-size: min(32px, 6.5vw);
        line-height: 1.2;
        letter-spacing: 0.14em;
    }
    html body .LakeChadStory__ ._StoryCover__ .Cover__ ._CoverTitle__ .Title ._Main {
        font-size: min(102px, 21vw);
        line-height: 0.95;
        letter-spacing: 0.1em;
    }
    html body .LakeChadStory__ .SectionPicture {
        padding-right: 0;
    }
}

/* tablets: the section menu no longer fits beside the title, so give it its own line */
@media only screen and (min-width: 641px) and (max-width: 900px) {
    html body .LakeChadStory__ ._StoryHeader__ {
        height: auto;
    }
    html body .LakeChadStory__ ._StoryCover__ {
        margin-top: 78px;
    }
    html body .LakeChadStory__ .LakeChadHeader__ {
        display: block;
    }
    html body .LakeChadStory__ .LakeChadHeader__ ._Branding__ {
        width: 96px;
    }
    html body .LakeChadStory__ .LakeChadHeader__ ._StoryNav__ {
        display: block;
        padding: 6px 16px 10px;
        text-align: left;
        white-space: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    html body .LakeChadStory__ .LakeChadHeader__ ._StoryNav__ .NavLink {
        margin-right: 20px;
    }
}

@media only screen and (min-width: 901px) and (max-width: 1199px) {
    html body .LakeChadStory__ .LakeChadHeader__ {
        grid-template-columns: auto auto 1fr;
        column-gap: 16px;
    }
    html body .LakeChadStory__ .LakeChadHeader__ ._StoryNav__ .NavLink {
        margin-right: 16px;
        font-size: 14px;
    }
}

/* tablets: scale the desktop section headings down so they fit beside their text */
@media only screen and (min-width: 641px) and (max-width: 1199px) {
    html body .LakeChadStory__ ._Section__#intro .SectionHeading ._HeadingText {
        font-size: min(102px, 9vw);
        letter-spacing: 0.11em;
        line-height: 1.45;
    }
    html body .LakeChadStory__ ._Section__#should-look-like .SectionHeading {
        position: relative;
        padding-right: 5vw;
    }
    html body .LakeChadStory__ ._Section__#should-look-like .SectionHeading ._HeadingText {
        font-size: 48px;
        line-height: 56px;
        max-width: 640px;
    }
    html body .LakeChadStory__ ._Section__#should-look-like ._SectionBody__ {
        padding-top: 32px;
    }
    html body .LakeChadStory__ ._Section__#arctic .SectionHeading {
        padding: 48px 5vw 24px;
    }
    html body .LakeChadStory__ ._Section__#arctic .SectionHeading ._HeadingText {
        font-size: 44px;
        line-height: 52px;
        max-width: 100%;
    }
    html body .LakeChadStory__ ._Section__#displaced .SectionHeading ._HeadingText {
        font-size: 40px;
        line-height: 48px;
        max-width: min(640px, 70vw);
        padding: 96px 32px 48px;
    }
    html body .LakeChadStory__ ._Section__#subdue .SectionHeading {
        position: relative;
        left: auto;
        width: auto;
        margin-top: 0;
        padding: 48px 5vw 24px;
    }
    html body .LakeChadStory__ ._Section__#subdue .SectionHeading ._HeadingText {
        font-size: 44px;
        line-height: 52px;
    }
}