/* =========================================================
   BOUNDARIES & FENCES
   Great Library / Bookshelves

   Chapter 1: Meet the Fence

   The goal:
   Make boundaries feel visual, understandable, flexible,
   and a little playful.

   Build gently.
   Leave room for crocodiles.
========================================================= */


/* =========================================================
   PAGE VARIABLES
========================================================= */

:root {

    --fence-forest: #355c4a;
    --fence-moss: #648c6a;
    --fence-fern: #89a67b;
    --fence-sage: #dce8d4;

    --fence-gold: #f6c85f;
    --fence-sun: #ffd97d;

    --fence-pink: #e98bb3;
    --fence-lavender: #c6b4ef;
    --fence-sky: #bfe6f7;

    --fence-earth: #d8bf9f;
    --fence-earth-dark: #9b7653;

    --fence-cream: #fff9f3;
    --fence-paper: #ffffff;
    --fence-soft: #f7f1ea;

    --fence-text: #403835;
    --fence-muted: #746864;

    --fence-border: rgba(81, 72, 65, 0.14);

    --fence-shadow:
        0 18px 45px rgba(70, 55, 45, 0.08);

    --fence-shadow-hover:
        0 24px 52px rgba(70, 55, 45, 0.12);

}


/* =========================================================
   GENERAL PAGE SAFETY
========================================================= */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}


/* =========================================================
   BREADCRUMBS
========================================================= */

.fence-breadcrumbs {

    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 0.5rem;

    width: min(1180px, calc(100% - 3rem));

    margin: 1.25rem auto 0;

    color: var(--fence-muted);

    font-size: 0.82rem;

}

.fence-breadcrumbs a {

    color: inherit;
    text-decoration: none;

}

.fence-breadcrumbs a:hover,
.fence-breadcrumbs a:focus-visible {

    color: var(--fence-forest);
    text-decoration: underline;

}

.fence-breadcrumbs span[aria-current="page"] {

    color: var(--fence-text);
    font-weight: 700;

}


/* =========================================================
   BOOK HEADER
========================================================= */

.fence-book-header {

    position: relative;

    padding: 5.5rem 1.5rem 4rem;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(255, 255, 255, 0.9),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 18%,
            rgba(255, 233, 172, 0.5),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #eff6e9,
            var(--fence-cream)
        );

    text-align: center;

}

.fence-book-header__inner {

    position: relative;
    z-index: 1;

    width: min(860px, 100%);

    margin: 0 auto;

}

.fence-book-header__icon {

    margin-bottom: 1rem;

    font-size: clamp(3.5rem, 8vw, 5.8rem);

    line-height: 1;

}

.fence-eyebrow,
.fence-kicker {

    margin: 0 0 0.75rem;

    color: var(--fence-forest);

    font-size: 0.76rem;

    font-weight: 800;

    letter-spacing: 0.14em;

    text-transform: uppercase;

}

.fence-book-header h1 {

    margin: 0;

    color: var(--fence-forest);

    font-size: clamp(3rem, 7vw, 6rem);

    line-height: 0.98;

    letter-spacing: -0.035em;

}

.fence-book-header__tagline {

    max-width: 690px;

    margin: 1.5rem auto 0;

    color: var(--fence-text);

    font-size: clamp(1.2rem, 2.5vw, 1.65rem);

    font-weight: 700;

    line-height: 1.45;

}


/* =========================================================
   BOOK CHAPTER NAVIGATION
========================================================= */

.book-chapter-nav {

    position: relative;

    padding: 1.4rem 1.5rem;

    background: #ffffff;

    border-top: 1px solid var(--fence-border);
    border-bottom: 1px solid var(--fence-border);

    box-shadow:
        0 8px 24px rgba(70, 55, 45, 0.04);

}

.book-chapter-nav__inner {

    width: min(1180px, 100%);

    margin: 0 auto;

}

.book-chapter-nav__label {

    margin: 0 0 0.85rem;

    color: var(--fence-muted);

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;

}

.book-chapter-nav__chapters {

    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 0.75rem;

}

.book-chapter-link {

    position: relative;

    display: flex;

    min-width: 0;

    min-height: 92px;

    flex-direction: column;

    justify-content: center;

    padding: 0.9rem 1rem;

    color: var(--fence-text);

    background: var(--fence-soft);

    border: 1px solid var(--fence-border);

    border-radius: 18px;

    text-decoration: none;

    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;

}

a.book-chapter-link:hover {

    transform: translateY(-2px);

    background: #ffffff;

    box-shadow:
        0 10px 22px rgba(70, 55, 45, 0.08);

}

.book-chapter-link--current {

    background:
        linear-gradient(
            145deg,
            #fff5cb,
            #fffaf0
        );

    border-color:
        rgba(185, 141, 42, 0.28);

}

.book-chapter-link--coming {

    opacity: 0.56;

}

.book-chapter-link__number {

    display: block;

    margin-bottom: 0.28rem;

    color: var(--fence-forest);

    font-size: 0.66rem;

    font-weight: 800;

    letter-spacing: 0.09em;

    text-transform: uppercase;

}

.book-chapter-link__title {

    display: block;

    font-size: 0.86rem;

    font-weight: 750;

    line-height: 1.32;

}

.book-chapter-link small {

    margin-top: 0.28rem;

    color: var(--fence-muted);

    font-size: 0.68rem;

}


/* =========================================================
   CHAPTER INTRO
========================================================= */

.fence-chapter-intro {

    padding: 5.5rem 1.5rem;

    background: var(--fence-cream);

}

.fence-chapter-intro__inner {

    width: min(800px, 100%);

    margin: 0 auto;

    text-align: center;

}

.fence-chapter-intro h2 {

    margin: 0 0 1rem;

    color: var(--fence-forest);

    font-size: clamp(2.4rem, 5vw, 4rem);

    line-height: 1.05;

}

.fence-chapter-intro__lead {

    color: var(--fence-text) !important;

    font-size: clamp(1.2rem, 2.5vw, 1.5rem);

    font-weight: 700;

}

.fence-chapter-intro p {

    max-width: 680px;

    margin: 0.9rem auto;

    color: var(--fence-muted);

    line-height: 1.75;

}


/* =========================================================
   SHARED SECTION STRUCTURE
========================================================= */

.fence-section {

    padding: 5.5rem 1.5rem;

}

.fence-section h2 {

    margin: 0 0 1.4rem;

    color: var(--fence-forest);

    font-size: clamp(2rem, 4.5vw, 3.35rem);

    line-height: 1.08;

}

.fence-story {

    width: min(820px, 100%);

    margin: 0 auto;

    text-align: center;

}

.fence-story p {

    max-width: 700px;

    margin: 0.8rem auto;

    color: var(--fence-muted);

    line-height: 1.8;

}

.fence-story__icon {

    margin-bottom: 1rem;

    font-size: 3.3rem;

    line-height: 1;

}

.fence-story__big-line {

    margin-top: 2rem !important;

    color: var(--fence-text) !important;

    font-size: clamp(1.25rem, 2.7vw, 1.6rem);

    font-weight: 800;

    line-height: 1.45 !important;

}

.fence-section-heading {

    width: min(820px, 100%);

    margin: 0 auto 3rem;

    text-align: center;

}

.fence-section-heading p {

    max-width: 690px;

    margin: 0.75rem auto;

    color: var(--fence-muted);

    line-height: 1.75;

}


/* =========================================================
   LANDED
========================================================= */

.fence-section--landing {

    background:
        linear-gradient(
            180deg,
            #fffaf3,
            #eef5e9
        );

}


/* =========================================================
   FIRST FENCE
========================================================= */

.fence-section--first-fence {

    position: relative;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(255, 220, 233, 0.45),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #eef5e9,
            #fffaf5
        );

}

.fence-language {

    display: grid;

    gap: 0.8rem;

    width: min(660px, 100%);

    margin: 2rem auto;

}

.fence-language p {

    margin: 0;

    padding: 1rem 1.2rem;

    color: var(--fence-text);

    background: rgba(255, 255, 255, 0.88);

    border: 1px solid var(--fence-border);

    border-radius: 18px;

    box-shadow:
        0 8px 20px rgba(70, 55, 45, 0.05);

    font-weight: 650;

}


/* =========================================================
   QUOTES
========================================================= */

.fence-quote {

    width: min(720px, 100%);

    margin: 2.5rem auto 0;

    padding: 2rem;

    background: #ffffff;

    border-left: 6px solid var(--fence-gold);

    border-radius: 22px;

    box-shadow: var(--fence-shadow);

}

.fence-quote strong {

    display: block;

    color: var(--fence-forest);

    font-size: clamp(1.2rem, 2.5vw, 1.55rem);

    line-height: 1.5;

}


/* =========================================================
   FENCE CHOICES
========================================================= */

.fence-section--choices {

    background:
        linear-gradient(
            180deg,
            #fffaf5,
            #f7f2eb
        );

}

.fence-choice-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 1.4rem;

    width: min(1120px, 100%);

    margin: 0 auto;

}

.fence-choice-card {

    position: relative;

    display: flex;

    min-width: 0;

    min-height: 300px;

    flex-direction: column;

    justify-content: flex-start;

    padding: 2rem;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid var(--fence-border);

    border-radius: 26px;

    box-shadow: var(--fence-shadow);

    text-align: center;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease;

}

.fence-choice-card:hover {

    transform: translateY(-5px);

    box-shadow: var(--fence-shadow-hover);

}

.fence-choice-card__icon {

    margin-bottom: 1rem;

    font-size: 3rem;

    line-height: 1;

}

.fence-choice-card h3 {

    margin: 0 0 0.8rem;

    color: var(--fence-forest);

    font-size: 1.35rem;

}

.fence-choice-card p {

    margin: 0.5rem 0;

    color: var(--fence-muted);

    line-height: 1.65;

}


/* Garden fence */

.fence-choice-card:nth-child(1) {

    background:
        linear-gradient(
            145deg,
            #fffdf6,
            #fff1d4
        );

}


/* Privacy fence */

.fence-choice-card:nth-child(2) {

    background:
        linear-gradient(
            145deg,
            #f7f0e8,
            #eee0d2
        );

}


/* Brick wall */

.fence-choice-card:nth-child(3) {

    background:
        linear-gradient(
            145deg,
            #f6e9e4,
            #efd7cd
        );

}


/* Moat */

.fence-choice-card:nth-child(4) {

    background:
        linear-gradient(
            145deg,
            #eaf7fb,
            #d8eef7
        );

}


/* Crocodiles */

.fence-choice-card--crocs {

    background:
        radial-gradient(
            circle at bottom right,
            rgba(126, 170, 107, 0.22),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #e8f2e2,
            #d8ead0
        );

}


/* Imagination */

.fence-choice-card--imagination {

    background:
        radial-gradient(
            circle at top left,
            rgba(233, 139, 179, 0.25),
            transparent 35%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(183, 156, 237, 0.24),
            transparent 35%
        ),
        #fffafc;

}


/* =========================================================
   LANGUAGE / DRAW THE FENCE
========================================================= */

.fence-section--language {

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(198, 180, 239, 0.25),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            #f7f2eb,
            #fbf8ff
        );

}

.fence-silly-note {

    margin-top: 1.8rem !important;

    color: var(--fence-forest) !important;

    font-size: 1.15rem;

    font-weight: 800;

}


/* =========================================================
   SHARED LANGUAGE
========================================================= */

.fence-section--shared-language {

    background:
        linear-gradient(
            180deg,
            #fbf8ff,
            #f0f8f0
        );

}


/* =========================================================
   NOT A VERDICT
========================================================= */

.fence-section--not-verdict {

    background:
        linear-gradient(
            180deg,
            #f0f8f0,
            #fff8f3
        );

}

.fence-not-list {

    display: grid;

    gap: 0.7rem;

    width: min(620px, 100%);

    margin: 2rem auto;

}

.fence-not-list p {

    margin: 0;

    padding: 0.85rem 1rem;

    background: rgba(255, 255, 255, 0.75);

    border: 1px solid var(--fence-border);

    border-radius: 16px;

    color: var(--fence-text);

    font-weight: 650;

}


/* =========================================================
   CARE
========================================================= */

.fence-section--care {

    background:
        radial-gradient(
            circle at center,
            rgba(233, 139, 179, 0.16),
            transparent 45%
        ),
        #fff8f3;

}


/* =========================================================
   CHANGE
========================================================= */

.fence-section--change {

    background:
        linear-gradient(
            180deg,
            #fff8f3,
            #eef6eb
        );

}


/* =========================================================
   CHAPTER CLOSING
========================================================= */

.fence-section--closing {

    background:
        radial-gradient(
            circle at center,
            rgba(255, 255, 255, 0.9),
            transparent 43%
        ),
        linear-gradient(
            145deg,
            #eaf5e5,
            #fff3cf
        );

}

.fence-closing {

    width: min(800px, 100%);

    margin: 0 auto;

    text-align: center;

}

.fence-closing__icon {

    margin-bottom: 1rem;

    font-size: 4rem;

}

.fence-closing p {

    margin: 0.75rem auto;

    color: var(--fence-muted);

    line-height: 1.75;

}

.fence-closing blockquote {

    margin: 2.3rem auto;

    padding: 2rem;

    background: #ffffff;

    border: 1px solid var(--fence-border);

    border-radius: 26px;

    box-shadow: var(--fence-shadow);

}

.fence-closing blockquote strong {

    color: var(--fence-forest);

    font-size: clamp(1.3rem, 3vw, 1.7rem);

    line-height: 1.45;

}

.fence-closing__silly {

    margin-top: 1.8rem !important;

    color: var(--fence-forest) !important;

    font-size: 1.2rem;

    font-weight: 850;

}


/* =========================================================
   NEXT CHAPTER
========================================================= */

.fence-next-chapter {

    padding: 5rem 1.5rem;

    background: var(--fence-paper);

}

.fence-next-chapter__inner {

    width: min(760px, 100%);

    margin: 0 auto;

    padding: clamp(2rem, 5vw, 3.2rem);

    background:
        linear-gradient(
            145deg,
            #fffdf8,
            #f7f1e7
        );

    border: 1px solid var(--fence-border);

    border-radius: 30px;

    box-shadow: var(--fence-shadow);

    text-align: center;

}

.fence-next-chapter h2 {

    margin: 0;

    color: var(--fence-forest);

    font-size: 1.3rem;

}

.fence-next-chapter h3 {

    margin: 0.55rem 0 1rem;

    color: var(--fence-text);

    font-size: clamp(1.7rem, 4vw, 2.5rem);

}

.fence-next-chapter p {

    max-width: 620px;

    margin: 0 auto;

    color: var(--fence-muted);

    line-height: 1.7;

}

.fence-next-chapter__coming {

    display: inline-flex;

    margin-top: 1.7rem;

    padding: 0.7rem 1.15rem;

    color: var(--fence-muted);

    background: rgba(255, 255, 255, 0.7);

    border: 1px solid var(--fence-border);

    border-radius: 999px;

    font-size: 0.85rem;

    font-weight: 700;

}


/* =========================================================
   TRAIL MARKERS
========================================================= */

.fence-section--markers {

    background: var(--fence-cream);

}

.fence-marker-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 1rem;

    width: min(1120px, 100%);

    margin: 0 auto;

}

.fence-marker {

    display: flex;

    align-items: flex-start;

    gap: 0.9rem;

    min-width: 0;

    padding: 1.4rem;

    color: var(--fence-text);

    background: #ffffff;

    border: 1px solid var(--fence-border);

    border-radius: 22px;

    box-shadow:
        0 10px 26px rgba(70, 55, 45, 0.05);

    text-decoration: none;

    transition:
        transform 160ms ease,
        box-shadow 160ms ease;

}

a.fence-marker:hover {

    transform: translateY(-3px);

    box-shadow:
        0 16px 34px rgba(70, 55, 45, 0.09);

}

.fence-marker--coming {

    opacity: 0.62;

}

.fence-marker__icon {

    flex: 0 0 auto;

    font-size: 2rem;

}

.fence-marker__content {

    min-width: 0;

}

.fence-marker__content strong,
.fence-marker__content small {

    display: block;

}

.fence-marker__content strong {

    color: var(--fence-forest);

    font-size: 1rem;

}

.fence-marker__content small {

    margin-top: 0.4rem;

    color: var(--fence-muted);

    font-size: 0.84rem;

    line-height: 1.5;

}


/* =========================================================
   RETURN TO BOOKSHELVES
========================================================= */

.fence-return {

    padding: 3.5rem 1.5rem 6rem;

    background: var(--fence-cream);

    text-align: center;

}

.fence-return p {

    margin-bottom: 1.4rem;

    color: var(--fence-muted);

}

.fence-button {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding: 0.85rem 1.5rem;

    color: #ffffff;

    background: var(--fence-forest);

    border: 2px solid var(--fence-forest);

    border-radius: 999px;

    font-weight: 750;

    text-decoration: none;

    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;

}

.fence-button:hover,
.fence-button:focus-visible {

    transform: translateY(-2px);

    background: #294d3b;

    box-shadow:
        0 10px 22px rgba(53, 92, 74, 0.18);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .book-chapter-nav__chapters {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

    }

    .fence-choice-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

    .fence-marker-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

}


/* =========================================================
   SMALL TABLET
========================================================= */

@media (max-width: 760px) {

    .book-chapter-nav {

        padding-left: 1rem;
        padding-right: 1rem;

    }

    .book-chapter-nav__chapters {

        display: flex;

        overflow-x: auto;

        gap: 0.75rem;

        padding-bottom: 0.4rem;

        scroll-snap-type: x proximity;

        -webkit-overflow-scrolling: touch;

    }

    .book-chapter-link {

        flex: 0 0 min(260px, 78vw);

        scroll-snap-align: start;

    }

}


/* =========================================================
   PHONE
========================================================= */

@media (max-width: 640px) {

    .fence-book-header {

        padding:
            4.3rem 1rem
            3.3rem;

    }

    .fence-chapter-intro,
    .fence-section {

        padding:
            4rem 1rem;

    }

    .fence-choice-grid {

        grid-template-columns: 1fr;

    }

    .fence-choice-card {

        min-height: 0;

        padding: 1.7rem 1.4rem;

    }

    .fence-marker-grid {

        grid-template-columns: 1fr;

    }

    .fence-quote {

        padding: 1.6rem 1.25rem;

    }

    .fence-closing blockquote {

        padding: 1.6rem 1.25rem;

    }

    .fence-next-chapter {

        padding:
            4rem 1rem;

    }

    .fence-next-chapter__inner {

        padding: 2rem 1.35rem;

        border-radius: 24px;

    }

    .fence-breadcrumbs {

        width:
            calc(100% - 2rem);

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .book-chapter-link,
    .fence-choice-card,
    .fence-marker,
    .fence-button {

        transition: none;

    }

    a.book-chapter-link:hover,
    .fence-choice-card:hover,
    a.fence-marker:hover,
    .fence-button:hover {

        transform: none;

    }

}

/* =========================================================
   BOUNDARIES & FENCES
   BOOK COVER / TABLE OF CONTENTS
========================================================= */

.fence-book-cover__intro {
    max-width: 680px;
    margin: 1rem auto 0;

    color: var(--fence-muted);

    font-size: 1.05rem;
    line-height: 1.75;
}

.fence-book-cover__start {
    margin-top: 2rem;
}


/* =========================================================
   BOOK WELCOME
========================================================= */

.fence-book-welcome {
    background:
        linear-gradient(
            180deg,
            var(--fence-cream),
            #eef5e9
        );
}


/* =========================================================
   NOT A TEST
========================================================= */

.fence-book-not-test {
    background:
        linear-gradient(
            180deg,
            #eef5e9,
            #fbf8ff
        );
}


/* =========================================================
   TABLE OF CONTENTS
========================================================= */

.fence-book-contents {
    background:
        linear-gradient(
            180deg,
            #fbf8ff,
            #fffaf5
        );
}

.fence-book-chapter-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 1.4rem;

    width: min(1120px, 100%);
    margin: 0 auto;
}

.fence-book-chapter {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 330px;

    padding: 2rem;

    color: var(--fence-text);
    background: #ffffff;

    border: 1px solid var(--fence-border);
    border-radius: 26px;

    box-shadow: var(--fence-shadow);

    text-align: center;
    text-decoration: none;
}

a.fence-book-chapter {
    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

a.fence-book-chapter:hover,
a.fence-book-chapter:focus-visible {
    transform: translateY(-5px);

    box-shadow: var(--fence-shadow-hover);
}

.fence-book-chapter--available {
    background:
        linear-gradient(
            145deg,
            #fff5cb,
            #fffdf8
        );

    border-color:
        rgba(185, 141, 42, 0.25);
}

.fence-book-chapter--coming {
    background: rgba(255, 255, 255, 0.68);
}

.fence-book-chapter__number {
    color: var(--fence-forest);

    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.fence-book-chapter__icon {
    display: block;

    margin: 1.25rem 0 0.8rem;

    font-size: 3rem;
}

.fence-book-chapter h3 {
    margin: 0 0 0.8rem;

    color: var(--fence-forest);

    font-size: 1.35rem;
}

.fence-book-chapter p {
    margin: 0;

    color: var(--fence-muted);

    line-height: 1.65;
}

.fence-book-chapter__action,
.fence-book-chapter__status {
    display: inline-flex;

    align-self: center;

    margin-top: auto;
    padding-top: 1.5rem;

    font-size: 0.85rem;
    font-weight: 800;
}

.fence-book-chapter__action {
    color: var(--fence-forest);
}

.fence-book-chapter__status {
    color: var(--fence-muted);
}


/* =========================================================
   FENCE PREVIEW
========================================================= */

.fence-book-preview {
    background:
        linear-gradient(
            180deg,
            #fffaf5,
            #eef6eb
        );
}

.fence-book-preview-grid {
    display: grid;
    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap: 1rem;

    width: min(1120px, 100%);
    margin: 0 auto;
}

.fence-book-preview-card {
    display: flex;
    flex-direction: column;
    align-items: center;

    min-width: 0;
    min-height: 180px;

    padding: 1.5rem 1rem;

    background: rgba(255, 255, 255, 0.82);

    border: 1px solid var(--fence-border);
    border-radius: 22px;

    text-align: center;
}

.fence-book-preview-card span {
    display: block;

    margin-bottom: 0.8rem;

    font-size: 2.5rem;
}

.fence-book-preview-card strong {
    color: var(--fence-forest);

    line-height: 1.3;
}

.fence-book-preview-card small {
    margin-top: 0.5rem;

    color: var(--fence-muted);

    line-height: 1.4;
}


/* =========================================================
   BEGIN THE BOOK
========================================================= */

.fence-book-begin {
    background:
        radial-gradient(
            circle at center,
            rgba(255, 255, 255, 0.9),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #eaf5e5,
            #fff3cf
        );
}

.fence-book-begin__inner {
    width: min(780px, 100%);
    margin: 0 auto;

    text-align: center;
}

.fence-book-begin__icon {
    margin-bottom: 1rem;

    font-size: 4rem;
}

.fence-book-begin__inner p {
    max-width: 650px;
    margin: 0.75rem auto;

    color: var(--fence-muted);

    line-height: 1.75;
}

.fence-book-begin__inner blockquote {
    margin: 2rem auto;
    padding: 2rem;

    background: #ffffff;

    border: 1px solid var(--fence-border);
    border-radius: 24px;

    box-shadow: var(--fence-shadow);
}

.fence-book-begin__inner blockquote strong {
    color: var(--fence-forest);

    font-size: clamp(1.3rem, 3vw, 1.7rem);

    line-height: 1.45;
}


/* =========================================================
   BOOK COVER RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .fence-book-chapter-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .fence-book-preview-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 640px) {

    .fence-book-chapter-grid {
        grid-template-columns: 1fr;
    }

    .fence-book-chapter {
        min-height: 0;
    }

    .fence-book-chapter__action,
    .fence-book-chapter__status {
        margin-top: 1.25rem;
        padding-top: 0;
    }

    .fence-book-preview-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .fence-book-preview-card {
        min-height: 160px;
    }

}


@media (max-width: 400px) {

    .fence-book-preview-grid {
        grid-template-columns: 1fr;
    }

    .fence-book-preview-card {
        min-height: 0;
    }

}