/* =========================
   TOKENS
========================= */

:root{

    --cream:#faf8f3;
    --ink:#171717;
    --paper:#ffffff;
    --sand:#e9e4d8;
    --line:#e6e6e6;
    --blue:#3867ff;
    --blue-dark:#2650db;

    --radius-lg:20px;
    --radius-md:14px;
    --radius-sm:10px;

    --container:1300px;

    /* fluid side padding: grows with viewport, caps out on large screens */
    --pad: clamp(20px, 5vw, 35px);

    --shadow-soft:0 10px 30px rgba(0,0,0,.08);
    --shadow-lift:0 15px 40px rgba(0,0,0,.15);
}


/* =========================
   GLOBAL
========================= */

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


html{
    scroll-behavior:smooth;
}


body{

    font-family:
    Inter,
    Arial,
    Helvetica,
    sans-serif;

    background:var(--cream);

    color:var(--ink);

    -webkit-font-smoothing:antialiased;

}


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


a{

    text-decoration:none;

    color:inherit;

}


button{

    font-family:inherit;

    cursor:pointer;

    border:none;

    background:none;

}


/* consistent, visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible{

    outline:3px solid var(--blue);
    outline-offset:3px;
    border-radius:4px;

}


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

    *{
        animation-duration:.01ms !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }

}




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


header{

    position:sticky;

    top:0;

    z-index:1000;

    background:var(--paper);

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

}



.nav-container{

    max-width:var(--container);

    margin:auto;

    padding:16px var(--pad);

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.logo{

    font-size:clamp(20px, 2.4vw, 28px);

    font-weight:800;

    letter-spacing:-1px;

    white-space:nowrap;

}




/* =========================
   DESKTOP NAVIGATION
========================= */


.desktop-nav{

    display:flex;

    align-items:center;

    gap:clamp(12px, 2.5vw, 35px);

}



.desktop-nav>a,
.dropdown button{

    font-size:16px;

    padding:10px;

    border-radius:8px;

    transition:color .2s ease, background .2s ease;

}



.desktop-nav>a:hover,
.dropdown button:hover{

    color:var(--blue);

    background:rgba(56,103,255,.06);

}





/* DROPDOWNS */


.dropdown{

    position:relative;

}



.dropdown button{

    display:flex;

    align-items:center;

    gap:4px;

}



.dropdown-content{

    position:absolute;

    top:48px;

    left:0;


    width:230px;


    background:var(--paper);


    border-radius:var(--radius-md);


    padding:10px 0;


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



    opacity:0;

    visibility:hidden;

    transform:translateY(-10px);



    transition:opacity .25s ease, transform .25s ease, visibility .25s ease;


}



.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}



.dropdown-content a{

    display:block;

    padding:14px 20px;

    font-size:15px;

}



.dropdown-content a:hover{

    background:#f4f4f4;

}







/* =========================
   HAMBURGER
========================= */


.hamburger{


    display:none;


    width:44px;

    height:44px;


    flex-direction:column;


    justify-content:center;


    align-items:center;


    gap:6px;


    border-radius:10px;


    transition:background .2s ease;


}


.hamburger:hover{

    background:rgba(0,0,0,.04);

}




.hamburger span{


    width:26px;


    height:3px;


    background:var(--ink);


    border-radius:20px;


    transition:transform .35s ease, opacity .35s ease;


}









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


.mobile-menu{


    position:fixed;


    top:0;

    left:0;


    width:100%;


    height:100dvh;


    background:var(--paper);


    z-index:2000;



    display:flex;


    flex-direction:column;


    overflow:hidden;



    transform:translateX(100%);



    transition:transform .35s cubic-bezier(.4,0,.2,1);


}



.mobile-menu.active{


    transform:translateX(0);


}






.mobile-header{


    display:flex;


    justify-content:space-between;


    align-items:center;



    padding:20px var(--pad);



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


}



.mobile-header h2{


    font-size:20px;


}



.mobile-header button{


    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    border-radius:50%;


}


.mobile-header button:hover{

    background:rgba(0,0,0,.05);

}






.mobile-links{


    display:flex;


    flex-direction:column;


    overflow-y:auto;


}




.mobile-links a,
.mobile-links button{


    width:100%;


    padding:20px var(--pad);


    text-align:left;


    background:var(--paper);


    border-bottom:1px solid #eee;


    font-size:18px;



    display:flex;


    justify-content:space-between;

    align-items:center;


}









/* MOBILE SUB PANELS */


.mobile-panel{


    position:absolute;


    inset:0;


    background:var(--paper);


    display:flex;


    flex-direction:column;


    overflow-y:auto;



    transform:translateX(100%);



    transition:transform .35s cubic-bezier(.4,0,.2,1);


}



.mobile-panel.show{


    transform:translateX(0);


}



.mobile-panel a,
.mobile-panel .back{


    padding:20px var(--pad);


    background:var(--paper);


    border-bottom:1px solid #eee;


    font-size:18px;


    text-align:left;


}


.mobile-panel .back{

    font-weight:600;

    color:var(--blue);

}









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


.hero{


    max-width:var(--container);


    margin:auto;


    padding:clamp(50px, 9vw, 90px) var(--pad);


    display:grid;


    grid-template-columns:1.1fr 1fr;


    gap:clamp(30px, 5vw, 60px);


    align-items:center;


}





.hero-text h1{


    font-size:clamp(34px, 5.6vw, 64px);


    line-height:1.05;


    letter-spacing:-2px;


    margin-bottom:22px;


}



.hero-text p{


    font-size:clamp(16px, 1.6vw, 20px);


    line-height:1.6;


    max-width:550px;


    margin-bottom:32px;


}






.primary-button{


    display:inline-block;


    background:var(--blue);


    color:white;


    padding:16px 35px;


    border-radius:12px;


    font-size:18px;


    transition:transform .25s ease, background .25s ease;


}



.primary-button:hover{


    transform:translateY(-3px);

    background:var(--blue-dark);


}






.hero-book{


    aspect-ratio:4/3;

    width:100%;

    max-height:450px;


    background:var(--sand);


    border-radius:var(--radius-lg);


    display:flex;


    justify-content:center;


    align-items:center;

    overflow:hidden;


}



.hero-book-image{

    width:100%;

    max-width:500px;

    height:auto;

    display:block;

    border-radius:12px;

    object-fit:cover;

}



.book-placeholder{


    width:clamp(150px, 22vw, 220px);

    aspect-ratio:11/16;


    background:white;


    box-shadow:0 20px 40px rgba(0,0,0,.15);



    display:flex;


    justify-content:center;


    align-items:center;


    text-align:center;

    border-radius:6px;

    padding:16px;

    font-size:14px;

    color:#8a8a8a;


}









/* =========================
   PRODUCTS
========================= */


.featured{


    max-width:var(--container);


    margin:auto;


    padding:clamp(40px, 7vw, 70px) var(--pad);


}



.featured h2{


    font-size:clamp(28px, 4vw, 40px);


    margin-bottom:clamp(24px, 4vw, 40px);


}




.product-grid{


    display:grid;


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


    gap:clamp(18px, 3vw, 30px);


}





.product-card{


    background:var(--paper);


    border-radius:var(--radius-lg);


    padding-bottom:24px;


    overflow:hidden;


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

    transition:transform .25s ease, box-shadow .25s ease;

    display:flex;

    flex-direction:column;


}


.product-card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}





.product-image{

    /* book-cover proportions, consistent no matter what size png is uploaded */
    aspect-ratio:4/3;

    width:100%;

    background:#ddd;

    object-fit:cover;

    object-position:center;


}



.product-card h3,
.product-card p,
.product-card a{


    margin-left:24px;


    margin-right:24px;


}



.product-card h3{


    margin-top:22px;

    font-size:20px;


}



.product-card p{


    margin-top:8px;


    line-height:1.5;

    color:#4a4a4a;

    flex-grow:1;


}




.product-card a{


    display:inline-block;


    margin-top:18px;


    color:var(--blue);

    font-weight:600;


}


.product-card a:hover{

    text-decoration:underline;

}










/* =========================
   ABOUT
========================= */


.about-preview{


    padding:clamp(50px, 9vw, 90px) var(--pad);


    background:var(--paper);


    text-align:center;


}



.about-preview h2{


    font-size:clamp(26px, 4vw, 42px);


    margin-bottom:18px;


}



.about-preview p{


    max-width:800px;


    margin:auto;


    line-height:1.7;


    font-size:clamp(16px, 1.6vw, 18px);


}









/* =========================
   NEWSLETTER
========================= */


.newsletter{


    max-width:600px;


    margin:clamp(50px, 8vw, 80px) auto;


    text-align:center;


    padding:0 var(--pad);


}


.newsletter h2{

    font-size:clamp(24px, 3.4vw, 32px);

}


.newsletter p{

    margin-top:10px;

    color:#4a4a4a;

}


.newsletter-form{

    display:flex;

    flex-direction:column;

    gap:12px;

}



.newsletter input{


    margin-top:22px;


    width:100%;


    padding:16px 18px;


    border-radius:var(--radius-sm);


    border:1px solid #ccc;

    font-size:16px;


}



.newsletter button{


    padding:15px 35px;


    background:var(--ink);


    color:white;


    border-radius:var(--radius-sm);

    font-size:16px;

    font-weight:600;

    transition:background .2s ease;


}


.newsletter button:hover{

    background:#000;

}


.sr-only{

    position:absolute;

    width:1px;

    height:1px;

    padding:0;

    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}








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


footer{


    background:var(--ink);


    color:white;


    text-align:center;


    padding:clamp(28px, 5vw, 40px) var(--pad);


}


footer p{

    font-size:14px;

}


footer div{

    margin-top:12px;

    font-size:14px;

}




footer a{


    opacity:.8;

    transition:opacity .2s ease;


}


footer a:hover{

    opacity:1;

    text-decoration:underline;

}









/* =========================
   RESPONSIVE
========================= */

/* Large tablet / small desktop: keep 3-column but tighten gaps a touch earlier
   than the nav breakpoint so cards never feel cramped */
@media(max-width:1100px){

    .product-grid{

        gap:20px;

    }

}


/* Tablet: nav collapses, product grid drops to 2 columns instead of
   jumping straight to 1, so mid-size screens don't waste horizontal space */
@media(max-width:900px){


    .desktop-nav{


        display:none;


    }


    .hamburger{


        display:flex;


    }



    .hero{


        grid-template-columns:1fr;


        text-align:center;


    }



    .hero-text p{


        margin-left:auto;

        margin-right:auto;


    }



    .hero-book{


        max-height:360px;

        order:-1;


    }



    .product-grid{


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


    }



}


/* Small tablet / large phone: single column products, tighter hero */
@media(max-width:640px){


    .product-grid{


        grid-template-columns:1fr;


    }


    .nav-container{

        padding:14px var(--pad);

    }


    .primary-button{

        width:100%;

        text-align:center;

    }


}


/* Small phones: trim spacing further */
@media(max-width:400px){


    .hero-text h1{

        letter-spacing:-1px;

    }


    .book-placeholder{

        font-size:13px;

    }


}