/*
 * Teresa Werth site — mobile-first layout
 *
 * Color themes (from her work: natural assemblage, roots & growth, stone stacking,
 * driftwood & water, compassion writing): earth & bark, moss & sage, slate-teal
 * water/sky, terracotta warmth, soft amber light.
 */

:root {
    --color-text: #2a3328;
    --color-text-muted: #4a5548;
    --color-bg: #f0ebe3;
    --color-bg-mid: #e8f0e6;
    --color-surface: #fffcf7;
    --color-border: #cfd6c8;
    --color-border-strong: #b8c4ae;

    /* Earth & wood */
    --color-bark: #5c4a3d;
    --color-terracotta: #a85c42;
    --color-terracotta-mid: #c17a62;

    /* Growth & outdoors */
    --color-moss: #3d5c42;
    --color-sage: #5a7d5f;
    --color-sage-soft: #7a9e80;
    --color-sage-pale: #e3efe4;

    /* Water, stone, sky (Finger Lakes / lakeshore tones) */
    --color-slate-teal: #3d6b6b;
    --color-slate-deep: #2f4f4f;
    --color-mist: #c8dad8;

    /* Warm light — hope, memory, creative spark */
    --color-amber: #b8860b;
    --color-amber-pale: #f5edd8;

    /* UI aliases */
    --color-accent: var(--color-moss);
    --color-accent-hover: #2d4330;
    --color-link: var(--color-slate-teal);
    --color-link-hover: var(--color-slate-deep);

    /* Header chrome & nav (overridden per page theme) */
    --color-header-face-start: #fffcf7;
    --color-header-face-end: #f2efe8;
    --color-header-shadow: rgba(61, 91, 66, 0.07);
    --color-nav-active-tint: rgba(61, 92, 66, 0.12);

    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: Georgia, "Times New Roman", serif;
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --content-max: 42rem;
    --header-z: 100;
}

/* ----- Page themes: natural pastels (see $pageTheme in each PHP page) ----- */

body.theme-earth {
    --color-text: #283228;
    --color-text-muted: #465244;
    --color-bg: #e4ebe0;
    --color-bg-mid: #dae6d6;
    --color-surface: #f6faf4;
    --color-border: #c5d1be;
    --color-border-strong: #aab8a3;
    --color-terracotta: #9d5a3c;
    --color-terracotta-mid: #b3745a;
    --color-moss: #355239;
    --color-sage: #557a59;
    --color-sage-soft: #6f9474;
    --color-sage-pale: #dce9dd;
    --color-slate-teal: #3f6560;
    --color-slate-deep: #2a4542;
    --color-mist: #bdd4cf;
    --color-amber: #a67c32;
    --color-amber-pale: #eee4cf;
    --color-link: #3a5f5a;
    --color-link-hover: #26403c;
    --color-header-face-start: #f8faf6;
    --color-header-face-end: #ebece4;
    --color-header-shadow: rgba(53, 82, 57, 0.08);
    --color-nav-active-tint: rgba(53, 82, 57, 0.14);
    background-color: var(--color-bg);
    background-image:
        radial-gradient(ellipse 115% 75% at 100% 5%, rgba(220, 233, 221, 0.95) 0%, transparent 52%),
        radial-gradient(ellipse 85% 55% at 0% 95%, rgba(238, 228, 207, 0.45) 0%, transparent 48%),
        linear-gradient(180deg, #eef3eb 0%, var(--color-bg) 38%, #d8e3d4 100%);
    background-attachment: fixed;
}

body.theme-studio {
    --color-text: #2e2830;
    --color-text-muted: #544a55;
    --color-bg: #ebe4ec;
    --color-bg-mid: #e2dae6;
    --color-surface: #faf7fb;
    --color-border: #cec4d4;
    --color-border-strong: #b8adbf;
    --color-bark: #5c4450;
    --color-terracotta: #985c6a;
    --color-terracotta-mid: #a97482;
    --color-moss: #5b4a62;
    --color-sage: #736784;
    --color-sage-soft: #8d8199;
    --color-sage-pale: #e4dde8;
    --color-slate-teal: #5a6578;
    --color-slate-deep: #3d4558;
    --color-mist: #cfc8d8;
    --color-amber: #9a7644;
    --color-amber-pale: #f0e6dc;
    --color-link: #4d5f78;
    --color-link-hover: #364456;
    --color-header-face-start: #faf7fb;
    --color-header-face-end: #ebe4ee;
    --color-header-shadow: rgba(91, 74, 98, 0.07);
    --color-nav-active-tint: rgba(91, 74, 98, 0.12);
    background-color: var(--color-bg);
    background-image:
        radial-gradient(ellipse 120% 80% at 95% 0%, rgba(232, 220, 236, 0.9) 0%, transparent 55%),
        radial-gradient(ellipse 90% 60% at 5% 100%, rgba(224, 232, 245, 0.5) 0%, transparent 50%),
        linear-gradient(180deg, #f2ecf5 0%, var(--color-bg) 36%, #ddd5e4 100%);
    background-attachment: fixed;
}

body.theme-tide {
    --color-text: #273033;
    --color-text-muted: #4a5c62;
    --color-bg: #e4ecee;
    --color-bg-mid: #d8e4e7;
    --color-surface: #f6fafb;
    --color-border: #bac9ce;
    --color-border-strong: #a0b4bb;
    --color-terracotta: #8f6a58;
    --color-terracotta-mid: #a38272;
    --color-moss: #3d5a5f;
    --color-sage: #5a7d84;
    --color-sage-soft: #729199;
    --color-sage-pale: #d4e4e6;
    --color-slate-teal: #3f6f7a;
    --color-slate-deep: #2d4d56;
    --color-mist: #b8d0d6;
    --color-amber: #8f9a6a;
    --color-amber-pale: #e2ebe8;
    --color-link: #355f6d;
    --color-link-hover: #234048;
    --color-header-face-start: #f5f9fa;
    --color-header-face-end: #e5edef;
    --color-header-shadow: rgba(61, 90, 95, 0.07);
    --color-nav-active-tint: rgba(61, 90, 95, 0.12);
    background-color: var(--color-bg);
    background-image:
        radial-gradient(ellipse 115% 78% at 100% 0%, rgba(212, 228, 230, 0.95) 0%, transparent 54%),
        radial-gradient(ellipse 88% 58% at 0% 100%, rgba(200, 220, 228, 0.45) 0%, transparent 50%),
        linear-gradient(180deg, #eaf2f4 0%, var(--color-bg) 35%, #cddce0 100%);
    background-attachment: fixed;
}

body.theme-parchment {
    --color-text: #2f2c26;
    --color-text-muted: #524d44;
    --color-bg: #f0e9df;
    --color-bg-mid: #e8dfd2;
    --color-surface: #fffbf7;
    --color-border: #d4cbbf;
    --color-border-strong: #bfb5a6;
    --color-bark: #5a4f42;
    --color-terracotta: #9d6a42;
    --color-terracotta-mid: #b5855c;
    --color-moss: #5a5340;
    --color-sage: #6f6a58;
    --color-sage-soft: #8a8575;
    --color-sage-pale: #ebe4d6;
    --color-slate-teal: #5a6b62;
    --color-slate-deep: #3d4a43;
    --color-mist: #d1ccc0;
    --color-amber: #a67c38;
    --color-amber-pale: #f2e8d4;
    --color-link: #4a6b5c;
    --color-link-hover: #334a40;
    --color-header-face-start: #fffbf7;
    --color-header-face-end: #ebe3d6;
    --color-header-shadow: rgba(90, 83, 64, 0.06);
    --color-nav-active-tint: rgba(90, 83, 64, 0.11);
    background-color: var(--color-bg);
    background-image:
        radial-gradient(ellipse 118% 82% at 100% 0%, rgba(242, 232, 220, 0.92) 0%, transparent 53%),
        radial-gradient(ellipse 90% 58% at 0% 100%, rgba(232, 224, 208, 0.55) 0%, transparent 51%),
        linear-gradient(180deg, #faf5ec 0%, var(--color-bg) 35%, #e0d6c8 100%);
    background-attachment: fixed;
}

body.theme-canopy {
    --color-text: #243028;
    --color-text-muted: #44504a;
    --color-bg: #e0ebe3;
    --color-bg-mid: #d3e3d8;
    --color-surface: #f6fbf7;
    --color-border: #b8d0c0;
    --color-border-strong: #9fbdae;
    --color-terracotta: #8b6848;
    --color-terracotta-mid: #a08062;
    --color-moss: #2f5c45;
    --color-sage: #4a7d5f;
    --color-sage-soft: #649678;
    --color-sage-pale: #d2ebe0;
    --color-slate-teal: #3d7068;
    --color-slate-deep: #2a524a;
    --color-mist: #b8d8ce;
    --color-amber: #8b9240;
    --color-amber-pale: #e6edd8;
    --color-link: #356857;
    --color-link-hover: #244538;
    --color-header-face-start: #f6fbf7;
    --color-header-face-end: #e2ede6;
    --color-header-shadow: rgba(47, 92, 69, 0.07);
    --color-nav-active-tint: rgba(47, 92, 69, 0.12);
    background-color: var(--color-bg);
    background-image:
        radial-gradient(ellipse 120% 78% at 100% 0%, rgba(210, 235, 224, 0.9) 0%, transparent 54%),
        radial-gradient(ellipse 88% 58% at 0% 100%, rgba(230, 237, 216, 0.5) 0%, transparent 52%),
        linear-gradient(180deg, #e8f4ec 0%, var(--color-bg) 36%, #c5dccf 100%);
    background-attachment: fixed;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    height: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
    background-image:
        radial-gradient(ellipse 120% 80% at 100% 0%, rgba(232, 240, 230, 0.95) 0%, transparent 55%),
        radial-gradient(ellipse 90% 60% at 0% 100%, rgba(245, 237, 216, 0.5) 0%, transparent 50%),
        linear-gradient(180deg, #f7f4ee 0%, var(--color-bg) 35%, #e5ebe3 100%);
    background-attachment: fixed;
}

::selection {
    background: var(--color-sage-pale);
    color: var(--color-text);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: var(--space-sm);
    z-index: calc(var(--header-z) + 1);
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-terracotta);
    color: var(--color-surface);
    text-decoration: none;
    border-radius: 4px;
}

.skip-link:focus {
    top: var(--space-sm);
}

/* ----- Header & nav ----- */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--header-z);
    border-bottom: 1px solid var(--color-border);
    box-shadow:
        0 3px 0 0 transparent,
        0 4px 20px var(--color-header-shadow);
    background-image:
        linear-gradient(90deg, var(--color-moss) 0%, var(--color-slate-teal) 38%, var(--color-terracotta-mid) 72%, var(--color-amber) 100%),
        linear-gradient(180deg, var(--color-header-face-start) 0%, var(--color-header-face-end) 100%);
    background-size: 100% 3px, 100% 100%;
    background-position: top, top;
    background-repeat: no-repeat;
}

.site-header__inner {
    max-width: 72rem;
    margin: 0 auto;
    padding: var(--space-sm);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

.site-logo {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-moss);
    text-decoration: none;
    line-height: 1.3;
    max-width: min(100%, 14rem);
}

.site-logo:hover,
.site-logo:focus-visible {
    color: var(--color-slate-teal);
    text-decoration: underline;
}

.nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--color-border-strong);
    border-radius: 6px;
    background: var(--color-sage-pale);
    cursor: pointer;
}

.nav-toggle:hover {
    background: var(--color-mist);
    border-color: var(--color-sage-soft);
}

.nav-toggle:focus-visible {
    outline: 2px solid var(--color-slate-teal);
    outline-offset: 2px;
}

.nav-toggle__bar {
    display: block;
    width: 22px;
    height: 2px;
    margin: 0 auto;
    background: var(--color-text);
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.site-nav {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.site-nav.is-open {
    max-height: 100vh;
}

.site-nav__list {
    list-style: none;
    margin: 0;
    padding: var(--space-sm) 0 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.site-nav__link {
    display: block;
    padding: var(--space-sm) var(--space-xs);
    color: var(--color-text);
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9375rem;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
    background: var(--color-sage-pale);
    color: var(--color-moss);
}

.site-nav__link.is-active {
    font-weight: 600;
    color: var(--color-moss);
    background: var(--color-nav-active-tint);
    box-shadow: inset 3px 0 0 var(--color-terracotta);
}

/* Desktop: horizontal nav, hide hamburger */
@media (min-width: 56rem) {
    .nav-toggle {
        display: none;
    }

    .site-header__inner {
        flex-wrap: nowrap;
    }

    .site-logo {
        flex: 0 0 auto;
        max-width: none;
    }

    .site-nav {
        width: auto;
        max-height: none !important;
        overflow: visible;
    }

    .site-nav__list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: var(--space-xs);
        padding: 0;
    }

    .site-nav__link {
        padding: var(--space-xs) var(--space-sm);
        white-space: nowrap;
    }
}

body.nav-open {
    overflow: hidden;
}

@media (min-width: 56rem) {
    body.nav-open {
        overflow: auto;
    }
}

@media (max-width: 47.9375em) {
    body {
        background-attachment: scroll;
    }
}

/* ----- Main & typography ----- */

.site-main {
    flex: 1 0 auto;
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    padding: var(--space-lg) var(--space-sm) var(--space-xl);
}

/* Background page — full-bleed hero image at top */
.site-main--background {
    padding-top: 0;
}

.background-hero {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: var(--space-lg);
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.background-hero__img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(52vh, 640px);
}

.content-block {
    max-width: var(--content-max);
    margin-left: auto;
    margin-right: auto;
}

.content-block--wide {
    max-width: 50rem;
}

h1 {
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 5vw, 2.25rem);
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 var(--space-md);
    color: var(--color-moss);
    text-shadow: 0 1px 0 rgba(255, 252, 247, 0.8);
}

h2 {
    font-family: var(--font-serif);
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    font-weight: 600;
    margin: var(--space-lg) 0 var(--space-sm);
    color: var(--color-slate-teal);
}

h3 {
    font-size: 1.0625rem;
    margin: var(--space-md) 0 var(--space-xs);
}

p {
    margin: 0 0 var(--space-md);
    color: var(--color-text);
}

.lead {
    font-size: 1.0625rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.site-main .lead a {
    color: var(--color-terracotta);
    font-weight: 500;
}

.site-main .lead a:hover {
    color: var(--color-bark);
}

.site-main a:not(.site-nav__link):not(.site-logo) {
    color: var(--color-link);
    text-underline-offset: 0.15em;
}

.site-main a:not(.site-nav__link):not(.site-logo):hover,
.site-main a:not(.site-nav__link):not(.site-logo):focus-visible {
    color: var(--color-link-hover);
}

blockquote {
    margin: var(--space-lg) 0;
    padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
    border-left: 4px solid var(--color-sage-soft);
    border-radius: 0 8px 8px 0;
    font-family: var(--font-serif);
    color: var(--color-text-muted);
    background: linear-gradient(90deg, var(--color-amber-pale) 0%, rgba(255, 252, 247, 0.65) 100%);
    box-shadow: inset 0 0 0 1px rgba(200, 218, 216, 0.5);
}

blockquote cite {
    display: block;
    margin-top: var(--space-sm);
    font-size: 0.9375rem;
    font-style: normal;
    color: var(--color-slate-teal);
}

.callout {
    background: linear-gradient(135deg, var(--color-sage-pale) 0%, var(--color-surface) 55%, #eef6f0 100%);
    border: 1px solid var(--color-border-strong);
    border-left: 4px solid var(--color-slate-teal);
    border-radius: 8px;
    padding: var(--space-md);
    margin: var(--space-lg) 0;
    box-shadow: 0 2px 12px rgba(61, 107, 107, 0.08);
}

.callout p:last-child {
    margin-bottom: 0;
}

.link-external {
    color: var(--color-slate-teal);
    font-weight: 500;
    word-break: break-word;
}

.link-external:hover {
    color: var(--color-slate-deep);
    text-decoration: underline;
}

ul.plain-list {
    margin: 0 0 var(--space-md);
    padding-left: 1.25rem;
}

/* ----- Images ----- */

.site-main--home {
    padding-top: var(--space-sm);
}

.home-intro__table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}

.home-intro__table td {
    vertical-align: top;
}

.home-intro__table td.home-intro__media {
    width: 35%;
    max-width: 16.25rem;
    padding: 0 var(--space-md) 0 0;
}

.home-intro__table td.home-intro__text {
    padding: 0;
}

.home-intro__media-stack {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.home-intro__media-stack .home-intro__media-cell {
    padding: 0 0 var(--space-md);
}

.home-intro__media-stack tr:last-child .home-intro__media-cell {
    padding-bottom: 0;
}

@media (max-width: 39.9375em) {
    .home-intro__table,
    .home-intro__table tbody,
    .home-intro__table tr,
    .home-intro__table td.home-intro__media,
    .home-intro__table td.home-intro__text {
        display: block;
        width: 100%;
        max-width: none;
    }

    .home-intro__table td.home-intro__media {
        padding: 0 0 var(--space-md);
    }
}

@media (min-width: 40rem) {
    .home-intro__table td.home-intro__media {
        padding-right: var(--space-lg);
    }
}

.home-intro__portrait-wrap {
    margin: 0;
}

.home-intro__book-link {
    display: block;
    max-width: 280px;
    margin: 0 auto;
    text-decoration: none;
    color: inherit;
    border-radius: 10px;
    outline-offset: 3px;
}

.home-intro__book-link:focus-visible {
    outline: 2px solid var(--color-slate-teal);
}

.home-intro__book {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow:
        0 8px 32px rgba(61, 91, 66, 0.18),
        0 0 0 3px rgba(232, 240, 230, 0.9);
}

@media (min-width: 40rem) {
    .home-intro__book-link {
        margin: 0;
        max-width: none;
    }
}

.home-intro__quote {
    margin: 0;
}

.home-intro__portrait {
    display: block;
    width: 100%;
    max-width: 280px;
    height: auto;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow:
        0 8px 32px rgba(61, 91, 66, 0.18),
        0 0 0 3px rgba(232, 240, 230, 0.9);
}

@media (min-width: 40rem) {
    .home-intro__portrait {
        margin: 0;
        max-width: none;
    }
}

.home-intro__text .lead:first-of-type {
    margin-top: 0;
}

.home-thanks {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

.home-thanks h2 {
    margin-top: 0;
}

.home-thanks__list {
    margin-bottom: 0;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
    gap: var(--space-sm);
    margin: var(--space-lg) 0;
    list-style: none;
    padding: 0;
}

.gallery-grid__item {
    margin: 0;
}

/* Gallery uses same book-thumb zoom script as order-books; fill grid cells (not 10rem book spine). */
.gallery-grid .book-thumb {
    width: 100%;
    max-width: none;
    aspect-ratio: 1;
}

.gallery-grid .book-thumb__preview {
    object-fit: contain;
}

.book-order-layout {
    display: grid;
    gap: var(--space-lg);
    align-items: start;
}

.book-order-layout__table {
    width: 100%;
    max-width: 10rem;
    margin: 0 auto;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}

.book-order-layout__td {
    vertical-align: top;
    padding: 0 0 var(--space-md);
}

.book-order-layout__td:last-child {
    padding-bottom: 0;
}

.book-thumb {
    position: relative;
    width: 100%;
    max-width: 10rem;
    aspect-ratio: 2 / 3;
    margin: 0;
    cursor: zoom-in;
    border-radius: 6px;
    box-shadow:
        0 6px 24px rgba(61, 79, 79, 0.18),
        0 0 0 1px rgba(232, 240, 230, 0.95);
    overflow: hidden;
    outline: none;
}

.book-thumb:focus-visible {
    box-shadow:
        0 6px 24px rgba(61, 79, 79, 0.18),
        0 0 0 2px var(--color-slate-teal);
}

.book-thumb__preview {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--color-mist);
}

.book-thumb__zoom {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    background: rgba(40, 48, 44, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
}

.book-thumb__close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    z-index: 201;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    padding: 0;
    border: 2px solid rgba(220, 53, 69, 0.95);
    border-radius: 50%;
    background: rgba(255, 252, 247, 0.98);
    color: #c41e3a;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.book-thumb__close:hover {
    background: #fff;
    color: #a01830;
}

.book-thumb__close:focus-visible {
    outline: 2px solid var(--color-slate-teal);
    outline-offset: 2px;
}

.book-thumb--open .book-thumb__zoom,
.book-thumb:focus-within .book-thumb__zoom {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.book-thumb__zoom img {
    display: block;
    width: 80vw;
    max-width: 80vw;
    height: auto;
    max-height: min(90vh, 90dvh);
    object-fit: contain;
    border-radius: 4px;
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.12);
}

.book-order-layout__text h1 {
    margin-top: 0;
}

@media (min-width: 40rem) {
    .book-order-layout {
        grid-template-columns: auto 1fr;
        gap: var(--space-xl);
        align-items: start;
    }

    .book-order-layout__table {
        margin: 0;
    }
}

/* ----- Book catalog (order page) ----- */

.book-catalog {
    max-width: var(--content-max);
    margin: var(--space-xl) auto 0;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

.book-catalog > h2 {
    margin-top: 0;
}

.book-catalog h3 {
    margin-top: var(--space-md);
    margin-bottom: var(--space-xs);
    color: var(--color-moss);
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-weight: 600;
}

.book-catalog .book-order-layout__text > h3:first-child {
    margin-top: 0;
}

.book-catalog > h3 + p,
.book-catalog .book-order-layout__text p {
    margin-bottom: var(--space-sm);
}

.book-catalog__order + h3 {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

.book-catalog > p {
    margin-bottom: var(--space-sm);
}

.book-catalog > p.book-catalog__intro {
    margin-bottom: var(--space-md);
}

.book-catalog .book-catalog__order {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

p.book-catalog__intro + .book-catalog__order {
    margin-top: var(--space-md);
    padding-top: 0;
    border-top: none;
}

.book-catalog__caption {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.book-catalog__caption cite {
    font-style: italic;
}

/* ----- Footer ----- */

.site-footer {
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--color-moss), var(--color-slate-teal), var(--color-terracotta-mid)) 1;
    background: linear-gradient(180deg, #3a4540 0%, #2c3530 48%, #252d28 100%);
    padding: var(--space-lg) var(--space-sm);
    margin-top: auto;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.site-footer__inner {
    max-width: 72rem;
    margin: 0 auto;
    text-align: center;
}

.site-footer__copy {
    margin: 0;
    font-size: 0.875rem;
    color: #c5cfc0;
    letter-spacing: 0.02em;
}