:root {
    --ajr-lightmode-beige: #f9d4b2;
    --ajr-lightmode-darkred: #99201e;
    --ajr-lightmode-pink: #f3ceec;
    --ajr-lightmode-peach: #f3bd96;
    --ajr-lightmode-burgundy: #571d1f;
    --ajr-lightmode-darkgrey: #1a1a1a;
    --ajr-lightmode-white: #efefef;

    --ajr-font-sansserif: Inter, sans-serif;
    --ajr-font-serif-condensed: "Times New Roman Condensed", "Times New Roman", serif;
    --ajr-font-serif: "Times New Roman", serif;

    --max-content-width: 30rem;
    --mobile-nav-peek-amount: 2.75rem;
}

@font-face {
    font-family: "Inter";
    font-stretch: 50% 200%;
    font-weight: 100 900;
    src: url(../fonts/inter-regular-variable.ttf) format("opentype");
}

@font-face {
    font-family: "Times New Roman Condensed";
    font-stretch: condensed;
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/times-new-roman-condensed-regular.woff2) format("woff2");
}

@font-face {
    font-family: "Times New Roman Condensed";
    font-stretch: condensed;
    font-style: italic;
    font-weight: 400;
    src: url(../fonts/times-new-roman-condensed-italic.woff2) format("woff2");
}

@font-face {
    font-family: "Times New Roman Condensed";
    font-stretch: condensed;
    font-style: normal;
    font-weight: bold;
    src: url(../fonts/times-new-roman-condensed-bold.woff2) format("woff2");
}

@font-face {
    font-family: "Times New Roman";
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    src: url(../fonts/times-new-roman-std-regular.ttf) format("opentype");
}

@font-face {
    font-family: "Times New Roman";
    font-stretch: normal;
    font-style: italic;
    font-weight: normal;
    src: url(../fonts/times-new-roman-std-italic.ttf) format("opentype");
}

@font-face {
    font-family: "Times New Roman";
    font-stretch: normal;
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/times-new-roman-std-bold.ttf) format("opentype");
}

@font-face {
    font-family: "Times New Roman";
    font-stretch: normal;
    font-style: italic;
    font-weight: 700;
    src: url(../fonts/times-new-roman-std-bold-italic.ttf) format("opentype");
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: var(--ajr-font-serif);
    text-align: center;
    color: var(--ajr-lightmode-darkred);
    background-color: var(--ajr-lightmode-beige);
    scroll-behavior: smooth;
}

h2,
h3,
h4 {
    display: inline-block;
    margin: 0;
    padding: 0;
    font-family: var(--ajr-font-serif);
    font-style: italic;
    font-weight: normal;
    line-height: 1;
}

h2 {
    font-size: 3rem;
}

h3 {
    font-size: 2.5rem;
}

h4 {
    font-size: 1.5rem;
}

p {
    margin: 1rem 0;
    padding: 0;
    line-height: 1.3;
    max-width: min(80ch, var(--max-content-width));
}

a {
    color: inherit;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

ul {
    margin: 0.75rem 0 0;
    padding: 0 0 0 1rem;
}

picture {
    display: inline-block;
    width: 100%;
}

picture > img {
    display: inline-block;
    vertical-align: bottom;
    width: 100%;
    max-width: 100%;
}

nav {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    position: fixed;
    bottom: 0;
    left: calc(50% - calc(min(var(--max-content-width), 100%) / 2));
    box-sizing: border-box;
    width: 100%;
    max-width: var(--max-content-width);
    padding: 1rem;
    border-radius: 1rem 1rem 0 0;
    font-family: var(--ajr-font-serif-condensed);
    font-size: 1.5rem;
    font-style: italic;
    background-color: var(--ajr-lightmode-darkred);
    color: var(--ajr-lightmode-beige);
    transform: translate3d(0, calc(100% - var(--mobile-nav-peek-amount)), 0) !important;
    transition: transform 0.2s;
    cursor: pointer;
    z-index: 100;
    -webkit-tap-highlight-color: transparent;
}

nav > svg {
    width: 1.5rem !important;
    height: auto !important;
}

.nav_open {
    transform: translate3d(0, 0, 0) !important;
}

.nav_open > svg {
    rotate: 180deg;
}

nav > ul {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.nav-link {
    display: inline-block;
    padding: 0.625rem;
    font-family: var(--ajr-font-serif);
    line-height: 1;
    text-decoration: none;
}

.nav-link:focus-visible {
    outline-offset: 0;
}

.page-section {
    box-sizing: border-box;
    padding: 3rem 2rem;
}

.page-section:nth-child(n + 2) {
    border-top: 0.5rem solid var(--ajr-lightmode-darkred);
}

hr {
    max-width: var(--max-content-width);
    margin: 2rem auto;
    border-color: var(--ajr-lightmode-darkred);
}

.cta-button {
    display: inline-block;
    box-sizing: border-box;
    padding: 0.75rem 2rem;
    border-radius: 999px;
    font-family: var(--ajr-font-sansserif);
    background-color: var(--ajr-lightmode-darkred);
    color: var(--ajr-lightmode-beige);
    text-decoration: none;
}

.cta-button_secondary {
    border: 2px solid var(--ajr-lightmode-darkred);
    background-color: transparent;
    color: var(--ajr-lightmode-darkred);
}

.cta-button_beige {
    background-color: var(--ajr-lightmode-beige);
    color: var(--ajr-lightmode-darkred);
}

/* ---- hero section ---- */

#home {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding-inline: 0;
}

.hero-image {
    display: inline-block;
    width: 100%;
    max-width: var(--max-content-width);
}

#hero-title {
    display: inline-block;
    margin-inline: auto;
}

h1 {
    margin: 0;
    padding: 0;
    font-family: var(--ajr-font-serif-condensed);
    font-size: 6.5rem;
    font-style: italic;
    font-weight: 400;
    line-height: 0.8;
}

h1 > .text-highlight::before {
    background-color: var(--ajr-lightmode-peach);
}

#hero-aj {
    font-family: var(--ajr-font-sansserif);
    font-size: 0.8em;
    font-style: normal;
    display: block;
    font-weight: 900;
}

#subtitle {
    margin: 1rem 0 0;
    padding: 0;
    font-family: var(--ajr-font-serif);
    font-size: 1.3rem;
}

.text-highlight,
h2 {
    position: relative;
    z-index: 0;
}

.text-highlight::before,
h2::before {
    content: "";
    display: inline-block;
    width: 100%;
    height: 1.2ex;
    position: absolute;
    bottom: 17%;
    left: 0;
    background-color: color(from currentColor srgb r g b / 0.15);
    z-index: -1;
}

h2::before {
    height: 1.3ex;
    bottom: 10%;
}

/* ---- books section ---- */

#books {
    background-color: var(--ajr-lightmode-pink);
}

.book-grid {
    display: grid;
    gap: 2rem;
    max-width: var(--max-content-width);
    margin: 3rem auto 0;
}

.book-grid__front-cover-image {
    width: 100%;
}

.book-grid__front-cover-container {
    position: relative;
}

.book-grid__front-cover-roundel {
    display: inline-block;
    position: absolute;
    top: -3.25rem;
    right: -1.5rem;
    align-content: center;
    box-sizing: border-box;
    width: 6.5rem;
    height: 6.5rem;
    margin: 0;
    padding: 0.25rem;
    border-radius: 999px;
    background-color: var(--ajr-lightmode-darkred);
    color: var(--ajr-lightmode-beige);
    font-style: italic;
    rotate: 10deg;
}

.book-grid__details {
    display: flex;
    flex-flow: column nowrap;
    gap: 2rem;
}

.book-grid__title-container {
    display: none;
}

.book-grid__tropes-list {
    display: flex;
    flex-flow: column nowrap;
    gap: 1rem;
    box-sizing: border-box;
    margin: 0;
    padding: 1rem 0.5rem;
    border: 2px solid var(--ajr-lightmode-darkred);
    list-style-type: none;
    font-size: 1.5rem;
    font-style: italic;
    font-weight: bold;
}

.book-grid__ctas {
    display: flex;
    flex-flow: column nowrap;
    gap: 0.75rem;
}

.book-grid__ctas p {
    margin: 0;
}

.book-grid__blurb {
    position: relative;
    background-color: var(--ajr-lightmode-darkred);
    color: var(--ajr-lightmode-beige);
    padding: 1rem 1rem 3rem;
    cursor: pointer;
}

.book-grid__blurb *,
.book-grid__blurb *::after {
    max-width: 32rem;
    margin-inline: auto;
}

.book-grid__blurb summary {
    list-style-type: none;
    border-bottom: 1px solid var(--ajr-lightmode-beige);
    text-wrap: balance;
}

.book-grid__blurb summary p {
    margin-inline: auto;
}

.book-grid__blurb summary::after {
    content: "read more";
    position: absolute;
    inset: auto 1rem 0;
    box-sizing: border-box;
    padding: 1rem;
    background-color: var(--ajr-lightmode-darkred);
    font-size: 1rem;
    line-height: 1rem;
}

.book-grid__blurb[open] summary::after {
    content: "read less";
    border-top: 1px solid var(--ajr-lightmode-beige);
}

.book-grid__blurb::details-content {
    text-align: left;
}

.book-series-teaser {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    max-width: var(--max-content-width);
    margin-inline: auto;
}

.book-series-teaser p {
    display: inline-block;
    max-width: 25ch;
    margin: 0;
    font-size: 1.25rem;
    font-weight: bold;
}

.book-series-teaser__images {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    gap: 1rem;
}

.book-series-teaser__images > * {
    flex: 1 1 auto;
}

/* ---- socials section ---- */

#socials {
    background-color: var(--ajr-lightmode-peach);
}

.socials-list {
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: var(--max-content-width);
    margin: 2rem auto 0;
    padding: 0;
    font-family: var(--ajr-font-serif-condensed);
    font-size: 1.5rem;
    font-style: italic;
}

.socials-list img {
    margin-block-end: 0.5rem;
}

.socials-list a {
    display: inline-block;
    padding: 0.5rem;
    background-color: var(--ajr-lightmode-white);
    text-decoration: none;
}

/* ---- newsletter section ---- */

#newsletter-contact {
    background-color: var(--ajr-lightmode-burgundy);
    color: var(--ajr-lightmode-beige);
}

.newsletter-contact-grid {
    display: grid;
    align-items: center;
    gap: 2rem;
}

#newsletter,
#contact {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--max-content-width);
    margin-inline: auto;
    padding: 2rem 1rem;
    border: 2px solid var(--ajr-lightmode-beige);
}

#newsletter p,
#contact p {
    margin: 0;
}

footer {
    padding: 0.75rem 1rem 3.5rem;
    background-color: var(--ajr-lightmode-darkgrey);
    color: var(--ajr-lightmode-beige);
}

*:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 5px;
}

.cta-button:focus {
    outline-color: var(--ajr-lightmode-darkred);
}

.cta-button_secondary:focus {
    outline-color: var(--ajr-lightmode-darkred);
}

.cta-button_beige:focus {
    outline-color: var(--ajr-lightmode-beige);
}

@media screen and (hover: hover) and (pointer: fine) {
    a:hover:not(.cta-button, .nav-link) {
        color: color-mix(in srgb, currentColor 50%, black 50%);
    }

    .nav-link:hover {
        color: var(--ajr-lightmode-white);
    }

    .socials-list a:hover {
        background-color: color-mix(in srgb, var(--ajr-lightmode-white) 85%, black 15%);
    }

    .cta-button:hover {
        background-color: color-mix(in srgb, var(--ajr-lightmode-darkred) 85%, black 15%);
    }

    .cta-button_secondary:hover {
        background-color: color-mix(in srgb, transparent 85%, black 15%);
    }

    .cta-button_beige:hover {
        background-color: color-mix(in srgb, var(--ajr-lightmode-beige) 85%, black 15%);
    }
}

.book-grid__blurb:focus-within {
    outline: 2px solid var(--ajr-lightmode-darkred);
    outline-offset: 4px;
}

.book-grid__blurb summary:focus-visible {
    outline: none;
}

@media screen and (min-width: 64rem) {
    :root {
        --max-content-width: 66rem;
    }

    nav {
        max-width: none;
        top: 0;
        bottom: unset;
        left: 0;
        border-radius: 0;
        transform: none !important;
        transition: none;
    }

    nav > svg {
        display: none;
    }

    nav > ul {
        flex-direction: row;
        justify-content: center;
        gap: 2rem;
    }

    /* ---- hero section ---- */

    #home {
        flex-direction: row;
        gap: 2rem;
        min-height: min(100svh, 64rem);
        padding-inline: 1rem;
        margin-inline: auto;
    }

    #home > * {
        max-width: max-content;
    }

    #hero-title {
        margin-inline: 0;
    }

    .hero-image {
        max-width: 28.9375rem;
    }

    h1 {
        font-size: clamp(7rem, 10vw, 9rem);
        font-size: 11rem;
    }

    #subtitle {
        margin-block-start: 4rem;
        font-size: 1.75rem;
    }

    /* ---- books section ---- */

    .book-grid {
        grid-template-columns: 1fr 1fr;
        column-gap: 2rem;
        row-gap: 0;
        margin-top: 4rem;
    }

    .book-grid__front-cover-image {
        padding-bottom: 2rem;
    }

    .book-grid__details {
        gap: 0rem;
        align-items: center;
    }

    .book-grid__title-container {
        display: flex;
        flex-flow: column nowrap;
        gap: 0.25rem;
        max-width: max-content;
        margin-top: 2rem;
    }

    .book-grid__title {
        font-style: normal;
        font-weight: bold;
    }

    .book-grid__subtitle {
        margin: 0;
        border-top: 2px solid var(--ajr-lightmode-darkred);
        font-size: 1.5rem;
    }

    .book-grid__tropes-list {
        width: 100%;
        margin-top: 3rem;
        font-size: 2rem;
    }

    .book-grid__ctas {
        width: 100%;
        max-width: 22rem;
        margin-block: auto;
        padding-block: 2rem;
    }

    .book-grid__blurb {
        grid-column: span 2;
    }

    .book-series-teaser {
        flex-direction: row;
        gap: 2rem;
    }

    .book-series-teaser > * {
        flex: 1 1 50%;
    }

    .book-series-teaser p {
        font-size: 2rem;
    }

    hr {
        margin-block: 4rem 2rem;
    }

    /* ---- socials section ---- */

    .socials-list {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }

    .socials-list img {
        margin-block-end: 0.75rem;
    }

    .socials-list a {
        padding: 0.75rem;
    }

    /* ---- newsletter/contact section ---- */

    .newsletter-contact-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: var(--max-content-width);
        margin-inline: auto;
    }

    footer {
        padding: 1rem;
    }
}