/* ==================================================
   PIMPLOWE CREATIONS
   MAIN STYLESHEET
================================================== */

/* ==================================================
   HANDWRITTEN FONT
================================================== */


/* ==================================================
   COLOR VARIABLES
================================================== */

:root {

    --purple: #6b4b7c;
    --dark-purple: #563b69;
    --deep-purple: #34283c;

    --pink: #c97976;
    --soft-pink: #f7edf0;

    --lavender: #f2e9f3;
    --light-lavender: #eadcf0;

    --cream: #fffaf7;
    --white: #ffffff;

    --text: #3f3548;
    --muted-text: #66596a;

    --border: #eee3df;
}



/* ==================================================
   RESET
================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;
}


body {

    font-family:
        "Trebuchet MS",
        Arial,
        sans-serif;

    color: var(--text);

    background: var(--cream);

    line-height: 1.6;
}


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


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



/* ==================================================
   GENERAL
================================================== */

.container {

    width: min(1100px, 90%);

    margin: 0 auto;
}


.button {

    display: inline-block;

    padding: 13px 25px;

    border-radius: 30px;

    font-weight: bold;

    transition:
        transform 0.3s ease,
        background 0.3s ease;

}


.button:hover {

    transform:
        translateY(-3px);

}


.primary-button {

    background:
        var(--purple);

    color:
        var(--white);

}


.primary-button:hover {

    background:
        var(--dark-purple);

}


.secondary-button {

    border:
        2px solid var(--purple);

    color:
        var(--purple);

}


.secondary-button:hover {

    background:
        var(--light-lavender);

}



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

.site-header {

    background:
        var(--cream);

    padding:
        22px 0;

    position:
        sticky;

    top:
        0;

    z-index:
        1000;

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

}


.nav {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--dark-purple);
}


.logo-icon {
    width: 55px;
    height: 55px;
    max-width: none;
    flex-shrink: 0;
    object-fit: contain;

    transform: scale(2);
    transform-origin: center;
}

.logo-name {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

/* PimLowe */
.logo-name .fancy {
    font-family: "Corinthia", cursive;
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1;
    color: var(--purple);
}

/* CREATIONS */
.logo-name .modern {
    font-family: "Montserrat", sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pink);
}


nav ul {

    display:
        flex;

    gap:
        35px;

    list-style:
        none;

}


nav a {

    font-size:
        0.95rem;

    font-weight:
        bold;

    color:
        #594c60;

}


nav a:hover {

    color:
        #a35d72;

}



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

.hero {

    min-height:
        720px;

    display:
        flex;

    align-items:
        center;

    background:

        radial-gradient(
            circle at 85% 20%,
            #f5d7df 0 10%,
            transparent 11%
        ),

        radial-gradient(
            circle at 15% 80%,
            #e4d9ed 0 9%,
            transparent 10%
        ),

        var(--cream);

    overflow:
        hidden;

}


.hero-content {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        60px;

    align-items:
        center;

}


.hero-text {

    max-width:
        560px;

}


.eyebrow {

    text-transform:
        uppercase;

    letter-spacing:
        3px;

    font-size:
        0.75rem;

    font-weight:
        bold;

    color:
        #b36a78;

    margin-bottom:
        18px;

}


.hero h1 {

    font-family:
        Georgia,
        serif;

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

    line-height:
        1;

    color:
        var(--dark-purple);

    margin-bottom:
        25px;

}


.hero h1 span {

    color:
        var(--pink);

}


.hero p {

    font-size:
        1.2rem;

    max-width:
        520px;

    margin-bottom:
        30px;

    color:
        var(--muted-text);

}


.hero-buttons {

    display:
        flex;

    gap:
        15px;

    flex-wrap:
        wrap;

}



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

.hero-image {
    width: 100%;
    max-width: 500px;

    aspect-ratio: 1 / 1;
    object-fit: cover;

    border-radius: 50%;

    display: block;
}


.hero-art {
    display: flex;
    justify-content: center;
    align-items: center;
}


.art-circle {

    width:
        440px;

    height:
        440px;

    border-radius:
        50%;

    background:
        var(--light-lavender);

    position:
        relative;

}


.art-placeholder {

    position:
        absolute;

    inset:
        30px;

    border-radius:
        50%;

    background:
        #f8eee9;

    border:
        3px dashed #c99aae;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    color:
        #876b82;

    padding:
        40px;

}


/* ==================================================
   ILLUSTRATOR CALLOUT
================================================== */

.illustrator-callout {
    padding: 35px 0;
    background: var(--cream);
}


.illustrator-callout-card {
    max-width: 1000px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;

    padding: 30px 40px;

    background: var(--lavender);

    border-radius: 25px;

    border-left:
        5px solid var(--pink);
}


.illustrator-callout-text {
    display: flex;
    align-items: center;
    gap: 22px;
}


.illustrator-spark {
    font-size: 2.5rem;
    color: #e5a61d;
}


.illustrator-callout .section-label {
    margin-bottom: 5px;
}


.illustrator-callout h2 {
    font-family: Georgia, serif;

    color: var(--dark-purple);

    font-size: 2rem;

    margin-bottom: 6px;
}


.illustrator-callout p {
    color: var(--muted-text);
}


.illustrator-button {
    flex-shrink: 0;

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

    white-space: nowrap;
}


.illustrator-button:hover {
    background: var(--dark-purple);
}


@media (max-width: 750px) {

    .illustrator-callout-card {
        flex-direction: column;
        align-items: flex-start;

        padding: 28px;
    }

    .illustrator-button {
        margin-left: 0;
    }

}



/* ==================================================
   SECTION HEADINGS
================================================== */

.section-label {

    text-transform:
        uppercase;

    letter-spacing:
        3px;

    font-size:
        0.75rem;

    font-weight:
        bold;

    color:
        #b36a78;

    margin-bottom:
        12px;

}


.intro h2,
.ari-section h2,
.chronicles h2,
.coming h2 {

    font-family:
        Georgia,
        serif;

    color:
        var(--dark-purple);

    font-size:
        clamp(2.3rem, 4vw, 3.5rem);

    line-height:
        1.15;

    margin-bottom:
        20px;

}



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

.intro {

    padding:
        110px 0;

    background:
        var(--white);

    text-align:
        center;

}


.intro p {

    max-width:
        760px;

    margin:
        0 auto;

    font-size:
        1.05rem;
        line-height: 1.8;

    color:
        var(--muted-text);

}



/* ==================================================
   AUTHOR
================================================== */

.author {
    padding: 110px 0;
    background: var(--lavender);
}


/* ---------- Heading ---------- */

.author-heading {
    text-align: center;
    margin-bottom: 55px;
}

.author-heading h2 {
    font-family: Georgia, serif;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    color: var(--dark-purple);
    line-height: 1.15;
}


/* ---------- Main Layout ---------- */

.author-content {
    display: grid;

    grid-template-columns: 360px 1fr;

    gap: 75px;

    align-items: center;

    max-width: 1150px;

    margin: 0 auto;
}


/* ---------- Photo ---------- */

.author-photo {
    height: 480px;

    background: #dfcbdc;

    border-radius: 180px 180px 25px 25px;

    padding: 12px;

    overflow: hidden;
}


.author-image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 168px 168px 17px 17px;

    display: block;
}


/* ---------- Story ---------- */

.author-story {
    color: var(--muted-text);
}


.author-story p {
    margin-bottom: 22px;

    font-size: 1.4rem !important;

    line-height: 1.8;
}


.author-lead {
    font-family: Georgia, serif;

    font-size: 1.3rem !important;

    line-height: 1.65 !important;

    color: var(--dark-purple);
}


/* ---------- Granny Moment ---------- */

.granny-moment {
    background: var(--cream);

    border-radius: 25px;

    padding: 30px 35px;

    margin: 30px 0;

    border-left: 5px solid #F2B84B;

    box-shadow: 0 10px 30px rgba(86, 59, 105, 0.08);
}


.granny-question,
.granny-answer {
    font-family: "Short Stack", cursive;

    color: var(--dark-purple);

    font-size: 1.4rem !important;

    font-style: italic;

    margin-bottom: 12px !important;
}


.granny-answer {
    color: var(--pink);

    margin-top: 18px;
}

.author-bridge {
    font-family: Georgia, serif;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--dark-purple);
    margin: 28px 0 14px;
}


.granny-story {
    font-size: 0.95rem !important;

    line-height: 1.6 !important;

    margin-bottom: 0 !important;
}


/* ---------- Closing ---------- */

.author-closing {
    max-width: 780px;

    margin: 70px auto 0;

    text-align: center;
}


.author-closing h3 {
    font-family: Georgia, serif;

    font-size: 2rem;

    color: var(--dark-purple);

    margin-bottom: 22px;
}


.author-closing p {
    color: var(--muted-text);

    font-size: 1.05rem;

    line-height: 1.8;

    margin-bottom: 18px;
}


.author-final-thought {
    display: inline-block;

    margin-top: 20px;

    padding-bottom: 4px;

    border-bottom: 2px solid #F2B84B;

    font-family: Georgia, serif;

    font-size: 1.25rem;

    font-style: italic;

    color: var(--dark-purple);
}



/* ==================================================
   ARI
================================================== */

.ari-section {

    padding:
        120px 0;

    background:
        var(--cream);

}


.ari-content {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        70px;

    align-items:
        center;

}


.ari-art {

   border-radius: 35px;
    overflow: hidden;
    padding: 0;
    background: transparent;

}

.ari-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 35px;
}

.ari-text {

    max-width:
        540px;

}


.ari-text p {

    font-size:
        1.05rem;
        line-height: 1.8;

    color:
        var(--muted-text);

    margin-bottom:
        22px;

}


.quote {

    border-left:
        4px solid var(--pink);

    padding-left:
        20px;

    margin:
        30px 0;

    font-family:
        Georgia,
        serif;

    font-size:
        1.25rem;

    color:
        #684b67;

}



/* ==================================================
   CHRONICLES
================================================== */

.chronicles {

    padding:
        110px 0;

    background:
        var(--white);

    text-align:
        center;

}


.chronicles-intro {

    max-width:
        720px;

    margin:
        0 auto 50px;

    color:
        var(--muted-text);

    font-size:
        1.05rem;

}


.chronicle-card {

    max-width:
        700px;

    margin:
        0 auto;

    padding:
        50px;

    border-radius:
        25px;

    background:
        var(--soft-pink);

    text-align:
        left;

}


.chronicle-number {

    font-size:
        0.75rem;

    text-transform:
        uppercase;

    letter-spacing:
        3px;

    color:
        #b36a78;

    font-weight:
        bold;

}


.chronicle-card h3 {

    font-family:
        Georgia,
        serif;

    font-size:
        2.5rem;

    color:
        var(--dark-purple);

    margin:
        10px 0 15px;

}


.chronicle-card p {

    color:
        var(--muted-text);

    margin-bottom:
        20px;

}


.coming-soon {

    display:
        inline-block;

    background:
        var(--purple);

    color:
        white;

    padding:
        8px 17px;

    border-radius:
        20px;

    font-size:
        0.8rem;

    font-weight:
        bold;

}



/* ==================================================
   PHILOSOPHY
================================================== */

.philosophy {

    padding:
        110px 0;

    background:
        var(--purple);

    color:
        white;

    text-align:
        center;

}


.philosophy h2 {

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(2.3rem, 4vw, 3.5rem);

    margin-bottom:
        25px;

}


.philosophy p {

    max-width:
        750px;

    margin:
        0 auto;

    font-size:
        1.15rem;

    line-height:
        1.8;

}


.light-line {

    margin:
        35px auto;

    width:
        60px;

    height:
        3px;

    background:
        #e3a4a3;

}



/* ==================================================
   COMING SOON
================================================== */

.coming {

    padding:
        110px 0;

    text-align:
        center;

    background:
        var(--cream);

}


.coming p {

    max-width:
        650px;

    margin:
        0 auto 30px;

    color:
        var(--muted-text);

    font-size:
        1.05rem;

}


.email-form {

    display:
        flex;

    max-width:
        520px;

    margin:
        0 auto;

    gap:
        10px;

}


.email-form input {

    flex:
        1;

    padding:
        15px 18px;

    border:
        1px solid #d7c9d4;

    border-radius:
        30px;

    font-size:
        1rem;

    background:
        white;

}


.email-form button {

    border:
        none;

    cursor:
        pointer;

    font-size:
        0.95rem;

}



/* ==================================================
   FOOTER
================================================== */

footer {

    background:
        var(--deep-purple);

    color:
        #eee;

    padding:
        50px 0 25px;

}


.footer-content {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        30px;

    flex-wrap:
        wrap;

    margin-bottom:
        35px;

}


.footer-brand {

    font-family:
        Georgia,
        serif;

    font-size:
        1.5rem;

}


.footer-brand span {

    color:
        #d28b88;

}


.footer-links {

    display:
        flex;

    gap:
        25px;

    flex-wrap:
        wrap;

}


.footer-links a:hover {

    color:
        #e4b1b0;

}


.copyright {

    border-top:
        1px solid #55485c;

    padding-top:
        20px;

    font-size:
        0.8rem;

    color:
        #b9aebd;

}


.instagram-link {
    color: var(--purple);
    font-weight: 600;
    transition: color 0.3s ease;
}

.instagram-link:hover {
    color: var(--pink);
}



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

@media (max-width: 800px) {


    nav ul {

        gap:
            15px;

    }


    .hero {

        padding:
            80px 0;

    }


    .hero-content,
    .ari-content,
    .author-content {

        grid-template-columns:
            1fr;

    }


    .hero-art {

        order:
            -1;

    }


    .art-circle {

        width:
            320px;

        height:
            320px;

    }


    .author-photo {

        width: min(350px, 100%);

        height: 420px;

        margin: 0 auto;

    }

    .author-story {
    max-width: 600px;
    margin: 0 auto;
    
    }

    .author-closing {
    margin-top: 50px;
    
    }


    .ari-art {

        min-height:
            350px;

    }


    .email-form {

        flex-direction:
            column;

    }


    .email-form button {

        width:
            100%;

    }

}



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

@media (max-width: 500px) {


    .logo {

        font-size:
            1.2rem;

    }


    nav ul {

        gap:
            12px;

    }


    nav a {

        font-size:
            0.8rem;

    }


    .hero h1 {

        font-size:
            3rem;

    }


    .hero-buttons {

        flex-direction:
            column;

    }


    .button {

        text-align:
            center;

    }

}


/* ==================================================
   THANK YOU PAGE
================================================== */

.thank-you-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 85% 15%,
            #f5d7df 0 11%,
            transparent 12%
        ),

        radial-gradient(
            circle at 10% 85%,
            #e4d9ed 0 10%,
            transparent 11%
        ),

        var(--cream);
}


.thank-you-wrapper {
    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 40px 20px;
}


.thank-you-card {
    width: min(650px, 100%);

    text-align: center;

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

    padding: 65px 55px;

    border-radius: 35px;

    box-shadow:
        0 20px 60px
        rgba(86, 59, 105, 0.10);
}


.thank-you-logo {
    width: 300px;

    height: auto;

    margin: 0 auto 12px;

    display: block;
}


.thank-you-card h1 {
    font-family: Georgia, serif;

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

    line-height: 1.1;

    color: var(--dark-purple);

    margin-bottom: 25px;
}


.thank-you-card p {
    max-width: 500px;

    margin: 0 auto 20px;

    font-size: 1.1rem;

    line-height: 1.8;

    color: var(--muted-text);
}


.thank-you-small {
    font-family:
        "Short Stack",
        cursive;

    color: var(--pink) !important;

    margin-bottom: 35px !important;
}

.thank-you-card .section-label {
    margin-top: 0;
    margin-bottom: 14px;
}

@media (max-width: 600px) {

    .thank-you-card {
        padding: 45px 25px;
    }

}



/* ==================================================
   ILLUSTRATOR PAGE
================================================== */

.illustrator-hero {
    padding: 110px 0;

    text-align: center;

    background:
        radial-gradient(
            circle at 88% 20%,
            #f5d7df 0 10%,
            transparent 11%
        ),

        radial-gradient(
            circle at 8% 90%,
            #e4d9ed 0 10%,
            transparent 11%
        ),

        var(--cream);
}


.illustrator-hero-inner {
    max-width: 800px;
}


.illustrator-hero h1 {
    font-family: Georgia, serif;

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

    line-height: 0.98;

    color: var(--dark-purple);

    margin: 15px 0 25px;
}


.illustrator-hero-lead {
    max-width: 650px;

    margin: 0 auto 35px;

    font-size: 1.15rem;

    line-height: 1.8;

    color: var(--muted-text);
}

.ari-way-statement {
    margin-top: 25px;

    font-family: "Short Stack", cursive;

    font-size: 1.25rem !important;

    color: var(--pink);

    font-weight: bold;
}

/* PROJECT */

.project-about {
    padding: 100px 0;

    background: var(--white);
}


.project-grid {
    display: grid;

    grid-template-columns:
        1.1fr 0.9fr;

    gap: 80px;

    align-items: center;
}


.project-about h2,
.artist-welcome h2,
.project-details h2,
.illustrator-interest h2 {

    font-family: Georgia, serif;

    color: var(--dark-purple);

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

    line-height: 1.1;

    margin-bottom: 25px;
}


.project-about p {
    font-size: 1.05rem;

    line-height: 1.8;

    margin-bottom: 18px;
}


.project-art-note {
    padding: 45px;

    background: var(--lavender);

    border-radius: 35px;
}


.project-star {
    display: block;

    color: #e5a61d;

    font-size: 2.5rem;

    margin-bottom: 10px;
}


.project-art-note h3 {
    font-family: Georgia, serif;

    color: var(--dark-purple);

    font-size: 1.7rem;

    margin-bottom: 15px;
}



/* ARTIST WELCOME */

.artist-welcome {
    padding: 100px 0;

    background: var(--lavender);

    text-align: center;
}


.artist-welcome-inner {
    max-width: 750px;
}


.artist-welcome-lead {
    font-family: Georgia, serif;

    font-size: 1.4rem !important;

    color: var(--pink);
}


.artist-welcome p {
    font-size: 1.05rem;

    line-height: 1.8;

    margin-bottom: 15px;
}

.opportunity-compensation {
    max-width: 650px;
    margin: 45px auto 0;
    padding: 28px 35px;

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

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

    text-align: center;
}

.opportunity-compensation h3 {
    margin: 5px 0 12px;

    font-family: Georgia, serif;
    font-size: 1.5rem;

    color: var(--dark-purple);
}

.opportunity-compensation p {
    margin: 8px auto;
    line-height: 1.7;
}


.handwritten-note {
    margin-top: 30px !important;

    font-family:
        "Short Stack",
        cursive;

    font-size: 1.4rem !important;

    color: var(--dark-purple);
}



/* DETAILS */

.project-details {
    padding: 100px 0;

    background: var(--cream);
}


.project-details-heading {
    text-align: center;

    margin-bottom: 50px;
}


.detail-cards {
    display: grid;

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

    gap: 20px;
}


.detail-card {
    padding: 35px 28px;

    background: var(--white);

    border-radius: 25px;

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


.detail-card > span {
    font-family: Georgia, serif;

    color: var(--pink);

    font-size: 1.1rem;
}


.detail-card h3 {
    font-family: Georgia, serif;

    color: var(--dark-purple);

    font-size: 1.45rem;

    margin: 15px 0;
}


.detail-card p {
    line-height: 1.7;

    color: var(--muted-text);
}



/* INTEREST FORM */

.illustrator-interest {
    padding: 100px 0;

    background: var(--white);
}


.interest-heading {
    max-width: 700px;

    margin: 0 auto 45px;

    text-align: center;
}


.interest-heading > p:last-child {
    font-size: 1.05rem;

    color: var(--muted-text);
}


.artist-form {
    max-width: 800px;

    margin: 0 auto;

    padding: 50px;

    background: var(--soft-pink);

    border-radius: 35px;
}


.form-row {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 20px;
}


.form-field {
    margin-bottom: 25px;
}


.form-field label {
    display: block;

    margin-bottom: 8px;

    font-weight: bold;

    color: var(--dark-purple);
}


.form-field input,
.form-field textarea {

    width: 100%;

    padding: 15px 17px;

    font: inherit;

    color: var(--text);

    background: var(--white);

    border:
        1px solid #dbcbd9;

    border-radius: 14px;

    outline: none;
}


.form-field textarea {
    resize: vertical;
}


.form-field input:focus,
.form-field textarea:focus {

    border-color: var(--purple);

    box-shadow:
        0 0 0 3px
        rgba(107, 75, 124, 0.10);
}


.form-field small {
    display: block;

    margin-top: 7px;

    color: var(--muted-text);
}


.budget-check {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin: 10px 0 30px;

    line-height: 1.6;
}


.budget-check input {
    margin-top: 5px;

    accent-color: var(--purple);
}


.sample-note {
    padding: 20px;

    margin-bottom: 30px;

    background: var(--white);

    border-left:
        4px solid #e5a61d;

    border-radius: 12px;

    line-height: 1.6;

    color: var(--muted-text);
}


.sample-note strong {
    display: block;

    color: var(--dark-purple);

    margin-bottom: 5px;
}


.artist-submit {
    width: 100%;

    border: none;

    cursor: pointer;

    font-size: 1rem;
}



/* MOBILE */

@media (max-width: 850px) {

    .project-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    .detail-cards {
        grid-template-columns:
            1fr 1fr;
    }

}


@media (max-width: 600px) {

    .illustrator-hero {
        padding: 80px 0;
    }


    .detail-cards {
        grid-template-columns: 1fr;
    }


    .form-row {
        grid-template-columns: 1fr;

        gap: 0;
    }


    .artist-form {
        padding: 30px 22px;
    }

}