/* =========================================================
   RESPONSIVE
   All site breakpoints live here, ordered largest to smallest.
   ========================================================= */

@media (max-width: 1050px) {
    .characterGrid,
    .codexGrid {
        grid-template-columns: repeat(3, 220px);
    }
}

@media (max-width: 1000px) {
    .artGrid {
        column-count: 3;
    }
}

@media (max-width: 950px) {
    .bookGrid {
        grid-template-columns: repeat(2, 260px);
    }
}

@media (max-width: 900px) {
    .mapLayout {
        grid-template-columns: 1fr;
    }

    .mapInfo {
        min-height: auto;

        border-left: 0;
        border-top: 1px solid var(--border-strong);
    }

    .landGrid {
        grid-template-columns: repeat(2, 260px);
    }
}

@media (max-width: 1500px) {
    .siteHeader {
        flex-wrap: wrap;
    }

    .menuButton {
        display: block;
    }

    .mainNav {
        display: none;

        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;

        gap: 0;

        margin-top: 15px;
        border-top: 1px solid var(--border);
    }

    .mainNav.open {
        display: flex;
    }

    .mainNav a {
        padding: 14px 5px;
        border-bottom: 1px solid rgba(201, 166, 91, 0.12);
    }

    .mainNav a::after {
        display: none;
    }

    .hero {
        min-height: 75vh;
        padding: 70px 6%;
    }

    .heroContent {
        padding: 35px 22px;
    }

    .pageSection {
        padding: 75px 6%;
    }

    .characterGrid,
    .codexGrid {
        grid-template-columns: repeat(2, 220px);
    }

    .aboutContent {
        grid-template-columns: 1fr;
    }

    .authorPhotoWrap {
        width: 100%;
        max-width: 300px;
    
        margin: auto;
    }

    .contactForm {
        padding: 25px 20px;
    }
}

@media (max-width: 750px) {
    .artGrid {
        column-count: 2;
    }
}

@media (max-width: 650px) {
    .bookGrid {
        grid-template-columns: 260px;
    }

    .bookProfileTop {
        grid-template-columns: 1fr;
    }

    .bookModalCover {
        width: 170px;
        margin: 0 auto;
    }
}

@media (max-width: 600px) {
    .landGrid {
        grid-template-columns: 260px;
    }

    .timeline {
        padding-left: 32px;
    }

    .timeline::before {
        left: 7px;
    }

    .timelineMarker {
        left: -32px;
    }

    .timelineEra {
        margin-left: -32px;
    }
    
    .modal {
        padding: 12px;
    }

    .modalContent {
        width: 100%;

        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);

        padding: 42px 20px 24px;
    }
}

@media (max-width: 520px) {
    .characterGrid,
    .codexGrid {
        grid-template-columns: 220px;
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 3rem;
    }

    .heroText {
        font-size: 1rem;
    }

    .mapEditHelper {
        right: 12px;
        bottom: 12px;

        width: calc(100% - 24px);
        max-width: 300px;
    }

    .artGrid {
        column-count: 1;
    }
}