:root {
    --color-black: #000000;
    --color-white: #ffffff;
    --color-robins-egg: #9ab9d6;
    --color-midnight: #121f3f;
    --color-light-gray: #555555;

    --color-background: var(--color-robins-egg);
    --color-text: var(--color-midnight);
    --color-text-muted: var(--color-light-gray);

    --space-base: 1rem;
    --space-scale-ratio: 1.5;
    --space-xsmall: calc(var(--space-small) / var(--space-scale-ratio));
    --space-small: calc(var(--space-medium) / var(--space-scale-ratio));
    --space-medium: var(--space-base);
    --space-large: calc(var(--space-medium) * var(--space-scale-ratio));
    --space-xlarge: calc(var(--space-large) * var(--space-scale-ratio));
    --space-xxlarge: calc(var(--space-xlarge) * var(--space-scale-ratio));

    --line-height-heading: 0.9;
    --line-height-body: 1.5;

    --text-base-size: 1rem;
    --text-scale-ratio: 1.618;

    --text-xs: calc(var(--text-small) / var(--text-scale-ratio));
    --text-sm: calc(var(--text-medium) / var(--text-scale-ratio));
    --text-medium: var(--text-base-size);
    --text-large: calc(var(--text-medium) * var(--text-scale-ratio));
    --text-xlarge: calc(var(--text-large) * var(--text-scale-ratio));
    --text-xxlarge: calc(var(--text-xlarge) * var(--text-scale-ratio));
}

@media (max-width: 1200px) {
    :root {
        --text-base-size: 0.85rem;
    }
}

@media (max-width: 750px) {
    :root {
        --text-base-size: 0.75rem;
    }
}

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

* + * {
    margin-top: 1.5rem;
}

.list {
    margin-left: var(--space-large);
}

.list__item {
    margin-top: 0;
}

.link {
    color: var(--color-text);
}

.copy {
    max-width: 75ch;
    line-height: var(--line-height-body);
    word-break: break-word;
    hyphens: auto;
}

.copy + .copy {
    text-indent: var(--space-xxlarge);
}

.section {
    margin-top: 3rem;
    grid-column: 2 / span 2;
}

.main {
    display: grid;
    grid-template-columns: auto repeat(2, 1fr) auto;
    grid-column: 1 / -1;
    grid-row: 4;
}

.body {
    margin: 0;
    padding: 5vw;
    background: var(--color-background);
    color: var(--color-text);
    font-family: sans-serif;
    font-size: var(--text-large);
}

.praise {
    display: none;
    grid-row: 4;
}

.header {
    margin: 0;
    grid-row: 1;
}

.heading--large {
    font-size: var(--text-xxlarge);
    margin-bottom: var(--space-medium);
    line-height: var(--line-height-heading);
}

.heading--medium {
    font-size: var(--text-xlarge);
    margin-bottom: var(--space-small);
}

.heading--small {
    font-size: var(--text-large);
    margin-bottom: var(--space-xsmall);
}

.copies-sold {
    grid-row: 2;
}

.buy-links {
    margin-top: 0;
    font-size: var(--text-large);
    grid-row: 3;
}

.buy-links__link {
    margin-top: var(--space-small);
}

.book-cover {
    margin: var(--space-large) auto;
    width: clamp(150px, 25vw, 350px);
}

.book-cover__image {
    margin-top: 0;
}

.responsive-image__image--limited {
    max-width: 100%;
    height: auto;
}

.footer {
    margin-top: var(--space-xxlarge);
    grid-column: 1 / -1;
}

.copyright {
    color: var(--color-text-muted);
}

.twitter-timeline {
    min-width: 0 !important;
}

.twitter-share-button {
    margin: 0 0 0 1rem;
    vertical-align: middle;
}

.affiliate-statement {
    color: var(--color-text-muted);
}

@media (min-width: 600px) {
    .body {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    .main {
        display: grid;
        grid-template-columns: 10vw repeat(2, 1fr) 10vw;
    }

    .header,
    .copies-sold,
    .buy-links {
        grid-column: 1 / span 2;
    }

    .book-cover {
        margin: 0;
        width: 100%;
        grid-column: 4;
        grid-row: 1 / span 3;
    }

    .section:nth-of-type(1) {
        margin-top: 0;
    }
}

@media (min-width: 900px) {
    .body,
    .main {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
    }

    .header,
    .copies-sold,
    .buy-links {
        grid-column: 1 / span 4;
    }

    .section {
        grid-column: 3 / span 4;
    }

    .praise {
        display: block;
        grid-column: 1 / span 2;
    }

    .book-cover {
        grid-column: 7 / span 2;
        grid-row: 1 / span 3;
    }
}

@media (min-width: 1200px) {
    .body,
    .main {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
    }

    .header,
    .copies-sold,
    .buy-links {
        grid-column: 1 / span 6;
    }

    .praise {
        grid-column: 1 / span 3;
    }

    .section {
        grid-column: 4 / span 6;
    }

    .book-cover {
        grid-column: 10 / span 3;
        grid-row: 1 / span 3;
    }
}

.cross-sell {
    background: var(--color-white);
    padding: var(--space-large);
    border-radius: 2px;
}