/* RESET */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    width: 100%;
    min-height: 100vh;

    background: #D8CDB7;
    color: #28382D;

    font-family: "DM Sans", sans-serif;

    overflow-x: auto;
}

.site-wrapper {
    width: 100%;
    transform-origin: top center;
}

/* PAGE WRAPPER */

.header,
main,
footer {
    width: 65%;
    max-width: 1440px;

    margin-left: auto;
    margin-right: auto;
}

main,
footer {
    background: #E9DFC9;
}


/* HEADER */

.header {
    height: 64px;

    padding: 0 32px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: #28382D;
    color: #E9DFC9;

    font-size: 12px;
    letter-spacing: 0.1em;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 22px;
}

.header-left img {
    width: 75px;
    height: auto;

    display: block;
}

.header-left span {
    color: #E9DFC9;

    font-size: 12px;

    white-space: nowrap;
}

.header-buy {
    color: #E9DFC9;

    font-size: 12px;

    text-decoration: none;
    white-space: nowrap;
}


/* HERO */

.hero {
    min-height: 700px;

    padding: 50px 32px;

    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 20px;

    align-items: center;
}


/* TEXT */

.hero-text {
    grid-column: 1 / 8;
}

.hero h1 {
    max-width: 850px;

    font-family: "Playfair Display", serif;

    font-size: clamp(55px, 6.2vw, 100px);
    line-height: 0.88;
    font-weight: 400;

    letter-spacing: -0.045em;
}

.author {
    margin-top: 30px;

    font-size: 19px;
}

.intro {
    max-width: 330px;

    margin-top: 20px;

    font-size: 16px;
    line-height: 1.5;
}


/* BOOK */

.hero-book {
    grid-column: 9 / 13;

    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-book img {
    width: min(100%, 340px);

    display: block;

    box-shadow: 18px 18px 0 #28382D;
}


/* ATMOSPHERE */

.atmosphere {
    padding: 70px 32px;

    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 20px;

    background: #14361f;
    color: #E9DFC9;
}


/* IMAGE */

.atmosphere-image {
    grid-column: 1 / 8;

    height: 560px;
}

.atmosphere-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* TEXT */

.atmosphere-text {
    grid-column: 9 / 13;

    align-self: center;
}

.atmosphere h2 {
    margin-bottom: 25px;

    font-family: "Playfair Display", serif;

    font-size: clamp(40px, 4vw, 65px);
    line-height: 0.9;
    font-weight: 400;

    letter-spacing: -0.04em;
}

.atmosphere-text p {
    max-width: 360px;

    font-size: 16px;
    line-height: 1.55;
}


/* PURCHASE */

.purchase {
    padding: 70px 32px;

    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 20px;

    background: #6b1905;
    color: #E9DFC9;
}


/* TITLE */

.purchase-title {
    grid-column: 1 / 8;
}

.purchase h2 {
    max-width: 700px;

    font-family: "Playfair Display", serif;

    font-size: clamp(42px, 5vw, 75px);
    line-height: 0.9;
    font-weight: 400;

    letter-spacing: -0.04em;
}


/* INFO */

.purchase-info {
    grid-column: 9 / 13;

    align-self: end;
}

.details {
    margin-bottom: 45px;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 25px;
}

.details div {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.details span {
    font-size: 11px;
    letter-spacing: 0.1em;
}

.details strong {
    font-size: 16px;
    font-weight: 500;
}


/* BUTTON */

.buy-button {
    width: 100%;

    padding: 18px 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: #C4953D;
    color: #28382D;

    text-decoration: none;

    font-size: 12px;
    letter-spacing: 0.08em;
}

.buy-button span {
    font-size: 18px;
}


/* FOOTER */

footer {
    padding: 18px 32px;

    display: flex;
    justify-content: space-between;

    font-size: 11px;
    letter-spacing: 0.08em;
}


/* MOBILE */

@media (max-width: 800px) {

    .header,
    main,
    footer {
        width: 100%;
    }


    /* HEADER */

    .header {
        height: 60px;

        padding: 0 20px;

        display: flex;
        justify-content: space-between;
    }

    .header-left {
        gap: 15px;
    }

    .header-left img {
        width: 65px;
    }

    .header-left span,
    .header-buy {
        font-size: 11px;
    }


    /* HERO */

    .hero {
        min-height: auto;

        padding: 60px 20px;

        display: flex;
        flex-direction: column;
        gap: 60px;

        align-items: stretch;
    }

    .hero-text {
        width: 100%;
    }

    .hero h1 {
        font-size: 54px;
    }

    .hero-book {
        width: 100%;
    }

    .hero-book img {
        width: 250px;
    }

    .author {
        font-size: 18px;
    }

    .intro {
        font-size: 16px;
    }


    /* ATMOSPHERE */

    .atmosphere {
        padding: 50px 20px;

        display: flex;
        flex-direction: column;
        gap: 45px;
    }

    .atmosphere-image {
        height: 420px;
    }

    .atmosphere-text {
        width: 100%;
    }

    .atmosphere h2 {
        font-size: 48px;
    }

    .atmosphere-text p {
        font-size: 16px;
    }


    /* PURCHASE */

    .purchase {
        padding: 55px 20px;

        display: flex;
        flex-direction: column;
        gap: 55px;
    }

    .purchase h2 {
        font-size: 50px;
    }

    .purchase-info {
        width: 100%;
    }

    .details span {
        font-size: 11px;
    }

    .details strong {
        font-size: 16px;
    }


    /* FOOTER */

    footer {
        padding: 18px 20px;

        flex-direction: column;
        gap: 8px;

        font-size: 10px;
    }
}