@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
    --ink: #173e31;
    --paper: #fbf3e5;
    --line: #c9b798;
    --wa-color-brand-fill-loud: #173e31;
    --wa-color-brand-on-loud: #fff5e2;
    --wa-color-brand-fill-loud-hover: #2a5948;
    --wa-color-surface-default: #fbf3e5;
    --wa-font-family-body: 'DM Sans', sans-serif
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 16px/1.6 'DM Sans', sans-serif
}

a {
    color: inherit;
    text-decoration: none
}

a:hover {
    color: #a77440
}

img {
    display: block;
    max-width: 100%
}

h1, h2, h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    line-height: .98;
    margin: .15em 0 .4em
}

h1 {
    font-size: clamp(4.5rem, 9vw, 8rem)
}

h2 {
    font-size: clamp(3.3rem, 6vw, 5rem)
}

.shell {
    width: min(1160px, calc(100% - 44px));
    margin: auto
}

.eyebrow {
    font-size: .75rem;
    letter-spacing: .2em;
    font-weight: 700;
    color: #956b3c
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #f9f1e3;
    border-bottom: 1px solid var(--line)
}

.header-row {
    min-height: 88px;
    display: flex;
    align-items: center;
    gap: 3rem;
    transition: min-height .2s ease
}

.site-header.is-compact .header-row {
    min-height: 64px
}

.brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    font: 600 1.35rem/.85 'Cormorant Garamond', serif;
    letter-spacing: .1em;
    white-space: nowrap
}

.brand img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    transition: width .2s ease, height .2s ease
}

.site-header.is-compact .brand img {
    width: 36px;
    height: 36px
}

.brand small {
    display: block;
    font-size: .65em;
    letter-spacing: .23em;
    margin-top: 8px
}

.nav {
    display: flex;
    gap: 3rem;
    margin-left: auto;
    text-transform: uppercase;
    font-size: .8rem;
    letter-spacing: .12em;
    font-weight: 700
}

.header-actions {
    display: flex;
    align-items: center;
    margin-left: auto
}

.cart-count {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1px solid #987745;
    border-radius: 50%
}

#menu-toggle {
    display: none
}

wa-button {
    --wa-color-brand-fill-loud: var(--ink);
    --wa-color-brand-on-loud: #fff5e2
}

wa-button[variant=brand] {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .12em
}

wa-icon {
    vertical-align: middle
}

wa-drawer {
    --size: min(420px, 100vw)
}

/* Keep drawer contents out of the page until Web Awesome initializes. */
wa-drawer:not(:defined) {
    display: none
}

.drawer-cart {
    padding: 20px
}

.drawer-cart .cart-line {
    flex-wrap: wrap;
    gap: 12px;
}

.drawer-cart .catalog-details {
    min-width: 140px;
}

.hero {
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: 630px;
    display: flex;
    align-items: center
}

.hero:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #fcf2debd, #fcf2de73 35%, transparent 70%)
}

.hero-content {
    position: relative;
    padding: 75px 0 95px
}

.hero h1 {
    margin: .1em 0;
    line-height: .85
}

.hero em {
    font-weight: 400
}

.hero p:not(.eyebrow) {
    font: 1.5rem 'Cormorant Garamond', serif
}

.ornament {
    color: #9c6d37;
    font-size: 1.3rem;
    margin: 25px 0
}

.featured {
    padding: 105px 0;
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 12%;
    align-items: center
}

.featured p:not(.eyebrow) {
    max-width: 450px;
    line-height: 1.8
}

.featured-cover {
    display: block;
    width: min(100%, 380px);
    aspect-ratio: 2 / 3;
    justify-self: center;
    background: #e3d2b2;
    box-shadow: 15px 18px 0 #c79e68
}

.featured-cover img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.text-link, .back-link {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    border-bottom: 1px solid #a77440;
    padding-bottom: 7px
}

.author-tease {
    background: #183f32;
    color: #f8ead3
}

.author-tease-row {
    padding: 60px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px
}

.author-tease h2 {
    margin: .2em 0
}

.author-tease wa-button {
    --wa-color-brand-fill-loud: #f8ead3;
    --wa-color-brand-on-loud: var(--ink);
    --wa-color-brand-fill-loud-hover: #e8d4b4
}

.site-footer {
    background: #132f27;
    color: #f7e8d3
}

.footer-row {
    padding: 55px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px
}

.footer-brand {
    font: 2rem 'Cormorant Garamond', serif
}

.footer-row nav {
    display: flex;
    gap: 25px;
    font-size: .8rem;
    text-transform: uppercase
}

.footer-row p, .footer-row span {
    font-size: .85rem
}

.interior {
    padding-top: 75px;
    padding-bottom: 110px;
    min-height: 55vh
}

.interior > h1 {
    margin: .08em 0 .2em
}

.book-list {
    margin-top: 65px
}

.book-list-item {
    display: grid;
    grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
    gap: clamp(36px, 7vw, 100px);
    align-items: center;
    padding: 48px 0;
    border-top: 1px solid var(--line)
}

.book-list-item:last-child {
    border-bottom: 1px solid var(--line)
}

.book-list-item .cover {
    display: block;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: #e3d2b2;
    box-shadow: 15px 18px 0 #c79e68
}

.book-list-item .cover img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.book-list-copy h2 {
    font-size: clamp(3.5rem, 6vw, 5.5rem)
}

.book-list-byline {
    font-size: .9rem;
    color: #55665d
}

.book-list-tagline {
    max-width: 34rem;
    margin: 28px 0 36px;
    font: 1.6rem/1.35 'Cormorant Garamond', serif
}

.book-detail {
    display: grid;
    grid-template-columns:.9fr 1.1fr;
    gap: 9%;
    align-items: center
}

.back-link {
    display: inline-block;
    margin-bottom: 40px
}

.cover-frame {
    box-shadow: 15px 18px 0 #c79e68
}

.cover-frame img {
    width: 100%;
    height: auto
}

.lead {
    font: 1.8rem/1.3 'Cormorant Garamond', serif;
    color: #3d5749
}

.rich-text {
    max-width: 590px;
    line-height: 1.8
}

.edition {
    border-top: 1px solid var(--line);
    padding: 18px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px
}

.edition strong, .edition span {
    display: block
}

.edition span {
    font-size: .8rem
}

.amazon-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--line)
}

.amazon-section .edition {
    border-top: 0
}

.amazon-heading {
    margin: 0 0 18px
}

.amazon-badge {
    width: 140px;
    height: auto;
    margin-inline: auto
}

.amazon-trademark {
    margin: 72px 0 0;
    font-size: .75rem;
    text-align: center;
    color: #55665d
}

.cart-feedback {
    color: #914438;
    min-height: 1.5em
}

.author-hero, .featured-backdrop, .book-index, .book-page {
    background: linear-gradient(130deg, #f5e7d2, #e8d4b4)
}

.author-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 8%;
    align-items: center;
    padding: 85px 0
}

.author-art {
    height: 470px;
    overflow: hidden;
    box-shadow: 15px 18px 0 #c79e68
}

.author-art img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.author-books {
    text-align: center;
    padding: 85px 0
}

.cart-page {
    max-width: 850px
}

.cart-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    border-top: 1px solid var(--line);
    padding: 24px 0
}

.cart-line a {
    font: 1.7rem 'Cormorant Garamond', serif
}

.catalog-image {
    width: 72px;
    height: 108px;
    object-fit: contain;
    flex: 0 0 72px;
}

.catalog-details {
    flex: 1;
    min-width: 0;
}

.cart-line p {
    font-size: .85rem
}

.quantity {
    padding: 0 12px
}

.cart-total {
    text-align: right;
    font-size: 1.4rem
}

@media (max-width: 700px) {
    .header-row {
        min-height: 74px;
        gap: 8px
    }

    .site-header.is-compact .header-row {
        min-height: 58px
    }

    .brand {
        font-size: 1rem
    }

    .brand img {
        width: 38px;
        height: 38px
    }

    .site-header.is-compact .brand img {
        width: 32px;
        height: 32px
    }

    .nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 25px;
        background: #f9f1e3;
        border-bottom: 1px solid var(--line);
        flex-direction: column;
        gap: 20px
    }

    .nav.open {
        display: flex
    }

    #menu-toggle {
        display: inline-block
    }

    .header-actions {
        margin-left: auto
    }

    .hero {
        min-height: 640px;
        background-position: 68% center;
        align-items: flex-start
    }

    .hero:before {
        background: linear-gradient(180deg, #f9edd9e6, #f9edd9bd 44%, transparent)
    }

    .hero-content {
        padding: 70px 0
    }

    .hero h1 {
        font-size: clamp(4.1rem, 15vw, 6rem)
    }

    .featured, .book-detail, .author-grid {
        grid-template-columns:1fr;
        gap: 45px
    }

    .featured {
        padding: 75px 0
    }

    .author-tease-row, .footer-row {
        display: block
    }

    .footer-row nav {
        margin: 25px 0
    }

    .author-art {
        height: 330px
    }

    .interior {
        padding: 55px 0
    }

    .book-list {
        margin-top: 35px
    }

    .book-list-item {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 36px 0
    }

    .book-list-item .cover {
        width: min(100%, 320px)
    }

    .cover-frame {
        max-width: 460px
    }

    .cart-line {
        flex-wrap: wrap
    }

    .edition {
        flex-wrap: wrap
    }
}

.error-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column
}

.error-content {
    flex: 1;
    padding-block: clamp(64px, 12vh, 140px)
}

.error-content h1 {
    max-width: 900px;
    font-size: clamp(3rem, 8vw, 6.5rem);
    overflow-wrap: break-word
}

.error-content h2 {
    max-width: 560px;
    margin-block: 28px;
    font: inherit;
    line-height: 1.6
}

.error-home {
    display: inline-block;
    padding: 12px 20px;
    border: 1px solid var(--ink);
    border-radius: 4px
}

.error-home:focus-visible {
    outline: 3px solid #956b3c;
    outline-offset: 4px
}

@media (prefers-reduced-motion: reduce) {
    .header-row, .brand img {
        transition: none
    }
}