/* =========================================================
   WILLOW & HUE
   ABOUT PAGE
   ========================================================= */


/* =========================================================
   HERO
   ========================================================= */

.about-page-hero {
    position: relative;
    overflow: hidden;

    padding: 75px 0 60px;

    background: var(--cream);
}

.about-page-hero-inner {
    position: relative;

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

    min-height: 300px;

    text-align: center;
}

.about-page-hero-copy {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 760px;
}

.about-page-hero .eyebrow {
    margin-bottom: 15px;
}

.about-page-hero h1 {
    margin: 0;

    color: var(--brown);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3.5rem, 6vw, 5.8rem);
    line-height: 0.9;
    letter-spacing: -0.045em;
}

.about-page-intro {
    max-width: 560px;

    margin: 25px auto 0;

    color: var(--text);

    font-size: 1.12rem;
    line-height: 1.6;
}

.about-flourish {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

    margin-top: 24px;

    color: var(--sage);
}

.about-flourish span:nth-child(2) {
    color: var(--peach);
    font-size: 1.2rem;
}

.about-hero-leaf {
    position: absolute;

    top: 50%;

    font-size: 4.5rem;

    opacity: 0.7;

    pointer-events: none;
}

.about-hero-leaf-left {
    left: 6%;

    transform: translateY(-50%) rotate(-25deg);
}

.about-hero-leaf-right {
    right: 6%;

    transform:
        translateY(-50%)
        scaleX(-1)
        rotate(-25deg);
}


/* =========================================================
   STORY
   ========================================================= */

.about-story {
    padding: 85px 0;

    background: var(--paper);
}

.about-story-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 85px;
}

.about-story-art {
    position: relative;

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

    min-height: 450px;
}

.about-art-backdrop {
    position: absolute;

    width: 95%;
    height: 80%;

    border-radius:
        48% 52% 45% 55% /
        52% 45% 55% 48%;

    background: rgba(229, 162, 111, 0.13);

    transform: rotate(-2deg);
}

.about-story-art img {
    position: relative;
    z-index: 2;

    display: block;

    width: 100%;
    max-width: 590px;
    height: auto;
}

.about-story-copy {
    max-width: 530px;
}

.about-story-copy .eyebrow {
    margin-bottom: 12px;
}

.about-story-copy h2 {
    margin: 0 0 25px;

    color: var(--brown);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3rem, 4.7vw, 4.7rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.about-story-copy p:not(.eyebrow) {
    margin: 0 0 18px;

    color: var(--text);

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


/* =========================================================
   APPROACH
   ========================================================= */

.about-approach {
    padding: 85px 0 90px;

    background: var(--sage-light);
}

.about-section-heading {
    max-width: 800px;

    margin: 0 auto 60px;

    text-align: center;
}

.about-section-heading h2 {
    margin: 0;

    color: var(--brown);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.8rem, 4.5vw, 4.4rem);
    line-height: 1;
    letter-spacing: -0.035em;
}

.about-section-heading > p:last-child {
    max-width: 670px;

    margin: 20px auto 0;

    color: var(--text);

    line-height: 1.7;
}

.about-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.about-value {
    padding: 0 50px;

    text-align: center;

    border-right: 1px solid rgba(95, 68, 52, 0.14);
}

.about-value:first-child {
    padding-left: 20px;
}

.about-value:last-child {
    padding-right: 20px;

    border-right: 0;
}

.about-value-icon {
    display: grid;
    place-items: center;

    width: 110px;
    height: 110px;

    margin: 0 auto 20px;

    border-radius:
        48% 52% 45% 55% /
        52% 45% 55% 48%;

    background: rgba(255, 253, 248, 0.65);

    font-size: 3rem;
}

.about-value-icon img {
    filter: brightness(0) saturate(100%) invert(33%) sepia(13%) saturate(2342%) hue-rotate(28deg) brightness(94%) contrast(90%);
    width: 40px;
}

.about-value h3 {
    margin: 0 0 10px;

    color: var(--brown);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
}

.about-value p {
    max-width: 300px;

    margin: 0 auto;

    color: var(--text);

    font-size: 0.94rem;
    line-height: 1.65;
}


/* =========================================================
   BUTTON
   ========================================================= */

.about-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;

    margin-top: 28px;
    padding: 13px 27px;

    border-radius: 999px;

    background: var(--peach);
    color: white;

    text-decoration: none;

    font-size: 0.92rem;
    font-weight: 700;

    box-shadow: 0 10px 22px rgba(82, 59, 43, 0.11);

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.about-button:hover {
    background: var(--brown);

    transform: translateY(-2px);

    box-shadow: 0 14px 28px rgba(82, 59, 43, 0.15);
}


/* =========================================================
   BOOKS
   ========================================================= */

.about-books {
    padding: 80px 0;

    background: #fae7d5;
}

.about-books-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 80px;
}

.about-books-visual {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 360px;
}

.about-books-covers {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
}

.about-books-covers img {
    position: relative;

    width: 29%;
    max-width: 190px;

    margin-left: -7%;

    border-radius: 3px;

    box-shadow:
        0 20px 35px rgba(82, 59, 43, 0.18);
}

.about-books-covers img:first-child {
    margin-left: 0;

    transform: rotate(-8deg);
}

.about-books-covers img:nth-child(2) {
    z-index: 2;

    transform: rotate(-3deg) translateY(-12px);
}

.about-books-covers img:nth-child(3) {
    z-index: 3;

    transform: rotate(3deg) translateY(-10px);
}

.about-books-covers img:nth-child(4) {
    z-index: 4;

    transform: rotate(8deg) translateY(3px);
}

.about-books-copy h2,
.about-free-copy h2 {
    margin: 0;

    color: var(--brown);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.8rem, 4.4vw, 4.3rem);
    line-height: 1;
    letter-spacing: -0.035em;
}

.about-books-copy > p:not(.eyebrow),
.about-free-copy > p:not(.eyebrow) {
    max-width: 500px;

    margin: 20px 0 0;

    color: var(--text);

    font-size: 1rem;
    line-height: 1.7;
}


/* =========================================================
   FREE COLOURING
   ========================================================= */

.about-free {
    padding: 80px 0;

    background: var(--sage-light);
}

.about-free-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 80px;
}

.about-free-art {
    position: relative;

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

    min-height: 360px;
}

.about-free-paper {
    width: min(80%, 360px);

    padding: 22px;

    background: white;

    border-radius: 4px;

    box-shadow:
        0 20px 40px rgba(82, 59, 43, 0.16);

    transform: rotate(5deg);
}

.about-free-paper img {
    display: block;

    width: 100%;
    height: auto;
}

.about-free-pencil {
    position: absolute;

    right: 13%;
    bottom: 10%;

    font-size: 4rem;

    transform: rotate(-35deg);
}


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

.about-closing {
    padding: 75px 0 85px;

    background: var(--cream);
}

.about-closing-inner {
    display: grid;
    grid-template-columns: 130px minmax(0, 720px) 130px;
    align-items: center;
    justify-content: center;
    gap: 35px;

    text-align: center;
}

.about-closing h2 {
    margin: 0;

    color: var(--brown);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.6rem, 4vw, 4rem);
    line-height: 1;
    letter-spacing: -0.035em;
}

.about-closing p {
    max-width: 690px;

    margin: 20px auto 0;

    color: var(--text);

    font-size: 1rem;
    line-height: 1.7;
}

.about-closing-leaf {
    font-size: 4.5rem;

    opacity: 0.65;
}

.about-closing-leaf:last-child {
    transform: scaleX(-1);
}


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

@media (max-width: 900px) {

    .about-story-grid {
        gap: 50px;
    }

    .about-story-art {
        min-height: 370px;
    }

    .about-value {
        padding-inline: 25px;
    }

    .about-books-grid,
    .about-free-grid {
        gap: 45px;
    }

    .about-books-visual {
        min-height: 300px;
    }

    .about-closing-inner {
        grid-template-columns: 80px minmax(0, 620px) 80px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    /* HERO */

    .about-page-hero {
        padding: 55px 0;
    }

    .about-page-hero-inner {
        min-height: auto;
    }

    .about-page-hero h1 {
        font-size: clamp(3rem, 14vw, 4.1rem);
    }

    .about-page-intro {
        font-size: 1rem;
    }

    .about-hero-leaf {
        display: none;
    }


    /* STORY */

    .about-story {
        padding: 60px 0 65px;
    }

    .about-story-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .about-story-art {
        min-height: auto;
    }

    .about-story-art img {
        max-width: 430px;
    }

    .about-story-copy h2 {
        font-size: clamp(2.8rem, 12vw, 3.7rem);
    }


    /* APPROACH */

    .about-approach {
        padding: 65px 0;
    }

    .about-section-heading {
        margin-bottom: 35px;
    }

    .about-section-heading h2 {
        font-size: clamp(2.6rem, 11vw, 3.5rem);
    }

    .about-values-grid {
        grid-template-columns: 1fr;
    }

    .about-value,
    .about-value:first-child,
    .about-value:last-child {
        padding: 30px 0;

        border-right: 0;
        border-bottom: 1px solid rgba(95, 68, 52, 0.14);
    }

    .about-value:last-child {
        border-bottom: 0;
    }


    /* BOOKS */

    .about-books {
        padding: 65px 0 70px;
    }

    .about-books-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .about-books-visual {
        min-height: 260px;
    }

    .about-books-covers img {
        width: 30%;
    }

    .about-books-copy {
        text-align: center;
    }

    .about-books-copy > p:not(.eyebrow) {
        margin-inline: auto;
    }


    /* FREE COLOURING */

    .about-free {
        padding: 65px 0;
    }

    .about-free-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-free-copy {
        text-align: center;
    }

    .about-free-copy > p:not(.eyebrow) {
        margin-inline: auto;
    }

    .about-free-art {
        min-height: 300px;
    }

    .about-free-paper {
        max-width: 290px;
    }


    /* BUTTONS */

    .about-books-copy .about-button,
    .about-free-copy .about-button {
        width: 100%;
    }


    /* CLOSING */

    .about-closing {
        padding: 65px 0 70px;
    }

    .about-closing-inner {
        display: block;
    }

    .about-closing-leaf {
        display: none;
    }

    .about-closing h2 {
        font-size: clamp(2.6rem, 11vw, 3.4rem);
    }

}