:root {
  --Book1-color: #fc6d6d; /* red */
  --Book2-color: #34d293; /* green */
  --Book3-color: #3ab0e2; /* blue */
  --Book4-color: #f7d861; /* yellow */
  --Book5-color: #b874e3; /* purple */
  --Book6-color: #ff9f40; /* orange */
  --Book7-color: #5b6be1; /* light blue */
  --Short1-color: #ff6ec7; /* magenta */
  --Short2-color: #9be564; /* lime */

    
    --max: 1140px; 
    --gap: 1.25rem;
    --radius: 14px; }

    *
    {
        box-sizing:border-box
    } 

body{
    margin:0;
    font-size:14px;
    font-family: Lato, sans-serif;
    line-height: 21px;
    color:#111}

h1 
{
    font-family: Montserrat, sans-serif;
    color: #404040;
}

a{text-decoration:none;color:inherit} img{max-width:100%;display:block}

.site-header
{
    position: relative;
    width: 100%;
    margin:0 auto;
    padding:1rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    z-index: 15;
    height: 76px;
    background-color: white;

}

.site-footer
{
    position: relative;
    width: 100%;
    margin:0 auto;
    padding:1rem;
    display:flex;
    text-align: center;
    z-index: 15;
    height: 76px;
    background-color: #272727;
    color: white;

}

.container
{
    margin: auto;
    width: 1170px;
    align-content: center;
    text-align: center;
}

main, .grid, .books-highlight 
{
    position: relative;
    z-index: 5;
}

.site-content
{
    margin-top: -80px ; 
    clear: both;
    position: relative;
    z-index: 15;
    background-color: white;
    align-items: center;
}

.site-header nav a{margin-left:1rem;opacity:.85}

.header-wrap
{
    overflow: hidden;
    height: 885px;
}

.header-content-wrap
{
    position: relative;
    padding: 285px 0 210px;
}

.header-content-wrap h1
{
    color: white;
}

.hero   {

    margin:auto;
    padding:clamp(2rem,4vw,2rem);
    display:grid;
    align-items:center;
    text-align: center;
}

.hero-parallax {
  position: relative;
  height: min(70vh, 720px);
  min-height: 420px;
  overflow: hidden;
  isolation: isolate; /* keeps z-index sane */
  z-index:0;
}

#parallax_move {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  z-index: 0;
}

.layer {
  position: absolute;
  inset: -10%; /* overscan so edges don’t show when moving */
  background-size: cover;
  background-position: center;
  will-change: transform;
  transform: translate3d(0,0,0);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(1rem, 4vw, 2rem);
  color: #fff; /* ensure readable over the header image */
  text-shadow: 0 2px 16px rgba(0,0,0,.35);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .layer { transform: none !important; }
}


.hero-text
{
    width: 100%;
}

.hero-text h1
{
    font-size:clamp(1.8rem,4vw,3rem);
}

.intro-text
{
    float: none;
    color: white;
    font-size: 55px;
    line-height: 65px;
    text-align: center;
    text-transform: uppercase;
}
.grid
    {
        max-width:var(--max);
        margin:auto;
        padding:0;
        display:grid;
        grid-template-columns:repeat(auto-fill, 281px);
        justify-content: center;
        gap:0;
        grid-auto-rows: 675px;
        }

.card
    {
        display:flex;
        flex-direction: column;
        justify-content: space-between;
        border:0px solid #eee;
        border-radius:var(--radius);
        padding:1rem;
        padding-top: 3rem;
    }

.card.book1 { --book-color: var(--Book1-color); }
.card.book2 { --book-color: var(--Book2-color); }
.card.book3 { --book-color: var(--Book3-color); }
.card.book4 { --book-color: var(--Book4-color); }
.card.book5 { --book-color: var(--Book5-color); }
.card.book6 { --book-color: var(--Book6-color); }
.card.book7 { --book-color: var(--Book7-color); }
.card.short1 { --book-color: var(--Short1-color); }
.card.short2 { --book-color: var(--Short2-color); }


.bookthumbnail 
{
    width:150px;
    height:150px;
    border-radius: 50%;
    border: lightgray solid 12px;
    object-fit: cover;
    display:block;
    margin: auto;
    transition: border-color .25s;
}

 .card .bookthumbnail:hover
{
    border-color: var(--book-color);
}

.card hr {
  border: none;
  height: 3px;
  width: 50%;
  margin: 0.5rem auto;
  background: var(--book-color);
  border-radius: 3px;
    }

.card h2
    {
        margin:1.5rem 0 .25rem;
        text-align: center;
        font-weight: 700;
        color: #404040;
    }

.card p
{
    font-size: 14px;
    color: #808080;
}


.btn{
    display:inline-block;
    padding:.6rem .9rem;
    border-radius:999px;
    background:#111;
    color:#fff}

.btn:hover
    {
        opacity:.9;
        color: var(--book-color);
    }

.page{max-width:var(--max);margin:2rem auto;padding:0 clamp(1rem,4vw,2rem)}

.contact label{display:block;margin:.6rem 0}

.contact input,.contact textarea{width:100%;padding:.6rem .8rem;border:1px solid #ddd;border-radius:8px}



.bookname
{
    text-transform: uppercase;
    text-decoration: none;
    font-size: 17px;
    font-weight: normal;
    line-height: 25.5px;    
}

.cta-row
{
    margin-top: auto;
    display: flex;
    justify-content: center;
    text-align: center;
}



@media (max-width:860px){.hero{grid-template-columns:1fr}.site-header{flex-wrap:wrap;gap:.5rem}}