/* ==========================================================================
   Responsive corrections.
   Loaded last so it can override component defaults.
   Grid children carry min-width:0 so long words and wide media cannot push
   a row past the viewport.
   ========================================================================== */

.shell > *,
.formats > *,
.packages > *,
.compare > *,
.author-block > *,
.download > *,
.book-row > *,
.steps > *,
.footer__grid > *,
.cta-band__inner > *,
.split > *,
.book-detail > *,
.process__item > *,
.field-grid > *,
.choice-grid > *,
.prose {
    min-width: 0;
}

/* A wide table scrolls inside its own box. Without this the grid track it
   sits in grows to the table width and drags the whole page sideways. */
.table-wrap { max-width: 100%; }
.table-wrap table.data { max-width: none; }

/* ------------------------------------------------------------ ≤ 1099px -- */

@media (max-width: 1099px) {
    .masthead__inner { min-height: 88px; gap: 16px; }
    .brand img { height: 64px; }
}

/* ------------------------------------------------------------- ≤ 899px -- */

@media (max-width: 899px) {
    body { font-size: 17px; }

    .hero__viewport { height: clamp(430px, calc(100vh - 190px), 540px); }
    .hero__copy { max-width: 100%; }

    .hero__slide--portrait .hero__scrim {
        background: linear-gradient(180deg,
            rgba(20, 32, 42, .82) 0%,
            rgba(20, 32, 42, .88) 55%,
            rgba(20, 32, 42, .95) 100%);
    }

    .hero__slide--portrait .hero__media { background-position: 62% 12%; }

    .hero__slide--pricing .hero__scrim {
        background:
            url("../images/branding/typewriter-mark-white.png") no-repeat 112% 116%/300px auto,
            linear-gradient(170deg, #1b2932 0%, #2c414e 100%);
    }

    .hero__dots { bottom: 14px; }

    .author-block__media img { min-height: 300px; }
    .author-block__media::after { width: 76px; height: 76px; left: -10px; bottom: -10px; }
}

/* ------------------------------------------------------------- ≤ 779px -- */

@media (max-width: 779px) {
    .step {
        padding: 22px 0;
        border-top-width: 2px;
    }
    .step:first-child { border-top-width: 3px; }

    .steps { row-gap: 0; }

    .utility__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding-block: 9px;
    }

    .utility__note { font-size: .78rem; }
    .utility a { font-size: .84rem; }
}

/* ------------------------------------------------------------- ≤ 639px -- */

@media (max-width: 639px) {
    .masthead__inner { min-height: 78px; }
    .brand img { height: 54px; }

    h1 { line-height: 1.14; }

    /* Taller than the desktop ratio would give, because the copy stacks and
       the sticky header eats the top of the panel. */
    .hero__viewport { height: clamp(500px, calc(100vh - 150px), 620px); }

    .hero__inner { padding-block: 26px clamp(62px, 14vw, 80px); }
    .hero__lede { margin-bottom: 22px; }

    .btn-row .btn { flex: 1 1 100%; }

    .hero__credit { margin-top: 20px; font-size: .72rem; }

    .motto__inner {
        gap: 8px 16px;
        letter-spacing: .16em;
        padding-block: 13px;
    }

    .format { padding: 24px 20px; }

    .format__facts li { flex-direction: column; gap: 2px; }
    .format__facts b { min-width: 0; padding-top: 0; }

    .author-titles img { width: 66px; }

    .compare__frame { aspect-ratio: 3 / 4; }
    .compare__tag { font-size: .64rem; padding: 6px 10px; }
    .compare__grip { width: 46px; height: 46px; }

    .package__head,
    .package__body { padding-inline: 22px; }

    .addon { flex-direction: column; gap: 8px; text-align: center; }

    .book-row__cover img,
    .book-row__placeholder { max-width: 148px; }

    .footer__brand img { height: 66px; }

    .footer__bar-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* --------------------------------------------------------- very narrow -- */

@media (max-width: 380px) {
    :root { --gutter: 18px; }
    .brand img { height: 48px; }
    .nav-toggle { padding: 11px 13px; font-size: .72rem; }
    .drawer nav a { font-size: 1.16rem; padding: 15px 2px; }
}

/* ------------------------------------------- drawer on shorter screens -- */

/* Keeps the request button inside the first screen of the open drawer
   instead of pushing it below the fold on a normal phone. */
@media (max-height: 900px) {
    .drawer__top img { height: 48px; }
    .drawer__top { padding-bottom: 16px; }
    .drawer nav { padding-block: 6px; }
    .drawer nav a { padding: 14px 2px; font-size: 1.2rem; }
    .drawer .submenu a { padding: 9px 2px; font-size: 1rem; }
    .drawer .submenu { padding-bottom: 8px; }
    .drawer__actions { padding-top: 16px; }
}

/* ---------------------------------------------------- short landscape -- */

@media (max-height: 520px) and (orientation: landscape) {
    .hero__viewport { height: 420px; }
    .drawer nav { margin-block: 20px; }
    .drawer nav a { padding: 12px 2px; font-size: 1.06rem; }
}