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

*{

margin:0;

padding:0;

box-sizing:border-box;

}

/* ==========================================
ROOT
========================================== */

:root{

--bg-main:#f3ebe2;

--bg-alt:#fffaf5;

--navy:#1f2a33;

--gold:#c6a768;

--rose:#8a4f5c;

--soft:#6b6b6b;

}

/* ==========================================
BODY
========================================== */

body{

font-family:

Georgia,

"Times New Roman",

serif;

background:

linear-gradient(

to bottom,

#f6efe7,

#f3ebe2,

#f1e7dd

);

color:var(--navy);

overflow-x:hidden;

line-height:1.7;

}

/* ==========================================
BANNERS
========================================== */

.hero,
.about-banner{

display:flex;

justify-content:center;

width:100%;

line-height:0;

}

.hero img,
.about-banner img{

width:100%;

max-width:1400px;

display:block;

margin:auto;

border-radius:0 0 20px 20px;

}

/* ==========================================
SECTIONS
========================================== */

.section{

max-width:1250px;

margin:60px auto;

padding:70px 45px;

background:#fffaf5;

border-radius:34px;

border:1px solid rgba(198,167,104,.18);

box-shadow:

0 14px 40px rgba(0,0,0,.05);

position:relative;

overflow:hidden;

}

.section::before{

content:"";

position:absolute;

top:0;

left:0;

right:0;

height:5px;

background:

linear-gradient(

90deg,

transparent,

var(--gold),

transparent

);

opacity:.45;

}

.alt{

background:

linear-gradient(

180deg,

#ffffff,

#fcf7f1

);

}

.section-inner{

max-width:1120px;

margin:auto;

}

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

.section-heading{

max-width:760px;

margin:0 auto 55px;

text-align:center;

}

.section-heading h2{

font-size:clamp(2rem,4vw,3rem);

line-height:1.2;

margin-bottom:18px;

color:var(--navy);

}

.section-heading h2::after{

content:"";

display:block;

width:90px;

height:3px;

margin:18px auto 0;

background:var(--gold);

border-radius:999px;

}

.sectionText{

font-size:1.08rem;

line-height:1.9;

color:var(--soft);

}
/* ==========================================
HERO INTRODUCTION
========================================== */

.author-introduction{

max-width:950px;

margin:auto;

text-align:center;

padding:20px 0;

}

.author-introduction h1,
.author-introduction h2{

font-size:clamp(2.8rem,6vw,4.6rem);

font-weight:700;

line-height:1.1;

color:var(--navy);

margin-bottom:20px;

text-shadow:
0 2px 8px rgba(0,0,0,.05);

}

.author-introduction p{

max-width:760px;

margin:0 auto 24px;

font-size:1.08rem;

line-height:2;

color:var(--soft);

}

.seo-intro{

font-size:1.15rem;

line-height:1.9;

color:#374151;

}

/* ==========================================
DIVIDER
========================================== */

.hero-divider{

width:100px;

height:4px;

margin:28px auto 38px;

background:

linear-gradient(
90deg,
transparent,
var(--gold),
transparent
);

border-radius:999px;

}

/* ==========================================
BOOK SUBTITLE
========================================== */

.book-subtitle{

font-size:1.45rem;

font-style:italic;

font-weight:500;

color:var(--rose);

margin:15px 0 30px;

}

/* ==========================================
BLOCKQUOTE
========================================== */

.author-introduction blockquote{

max-width:760px;

margin:40px auto;

padding:28px 34px;

background:

linear-gradient(
135deg,
rgba(255,255,255,.96),
rgba(248,240,228,.92)
);

border-left:5px solid var(--gold);

border-radius:24px;

font-size:1.2rem;

font-style:italic;

line-height:1.9;

color:var(--navy);

box-shadow:
0 12px 28px rgba(0,0,0,.05);

}

/* ==========================================
BUTTONS
========================================== */

.hero-buttons{

display:flex;

justify-content:center;

align-items:center;

flex-wrap:wrap;

gap:18px;

margin:40px 0;

}

.primary-button,
.secondary-button{

display:inline-flex;

justify-content:center;

align-items:center;

padding:15px 34px;

border-radius:999px;

font-weight:700;

text-decoration:none;

font-size:.95rem;

transition:.35s ease;

}

.primary-button{

background:var(--rose);

color:#fff;

box-shadow:
0 10px 25px rgba(138,79,92,.25);

}

.primary-button:hover{

transform:translateY(-4px);

box-shadow:
0 18px 35px rgba(138,79,92,.35);

}

.secondary-button{

background:#ffffff;

color:var(--navy);

border:1px solid rgba(198,167,104,.35);

}

.secondary-button:hover{

transform:translateY(-4px);

background:#faf5ee;

}

/* ==========================================
FEATURED HERO IMAGE
========================================== */

.featured-hero-book{

max-width:1050px;

margin:60px auto 0;

}

.featured-hero-banner{

display:block;

width:100%;

border-radius:28px;

border:1px solid rgba(198,167,104,.20);

box-shadow:
0 22px 50px rgba(0,0,0,.12);

transition:.35s ease;

}

.featured-hero-banner:hover{

transform:scale(1.01);

box-shadow:
0 30px 60px rgba(0,0,0,.18);

}

/* ==========================================
CONTINUE THE STORY
========================================== */


.series-note strong{

display:block;

margin-bottom:18px;

font-size:.82rem;

letter-spacing:4px;

text-transform:uppercase;

color:var(--rose);

}

.series-note p{

font-size:1.08rem;

line-height:2;

color:var(--soft);

margin:0;

}

.series-note em{

color:var(--navy);

font-weight:600;

}

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

.author-statement{

padding:10px 0 70px;

}

.author-statement-inner{

max-width:760px;

margin:auto;

text-align:center;

}

.author-statement h2{

font-size:clamp(2rem,4vw,2.8rem);

line-height:1.2;

margin-bottom:20px;

color:var(--navy);

}

.author-statement h2::after{

content:"";

display:block;

width:90px;

height:3px;

margin:18px auto 0;

background:var(--gold);

border-radius:999px;

}

.author-statement p{

font-size:1.08rem;

line-height:2;

color:var(--soft);

margin-top:28px;

}


/* ==========================================
FEATURED SECTIONS
========================================== */

.featured-book{

position:relative;

overflow:hidden;

padding:55px;

border-radius:38px;

background:

linear-gradient(
145deg,
#fffefc,
#f8f0e4
);

border:1px solid rgba(198,167,104,.22);

box-shadow:
0 20px 55px rgba(0,0,0,.07);

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

}

.featured-book:hover{

transform:translateY(-6px);

box-shadow:
0 28px 70px rgba(0,0,0,.12);

}

.featured-book::before{

content:"";

position:absolute;

top:0;

left:0;

right:0;

height:6px;

background:

linear-gradient(
90deg,
transparent,
var(--gold),
transparent
);

}

.featured-glow{

position:absolute;

top:-150px;

right:-150px;

width:340px;

height:340px;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(198,167,104,.14),
transparent 70%
);

filter:blur(45px);

pointer-events:none;

}

.featured-label{

display:inline-block;

padding:8px 18px;

margin-bottom:25px;

background:rgba(198,167,104,.12);

border:1px solid rgba(198,167,104,.25);

border-radius:999px;

font-size:.75rem;

font-weight:700;

letter-spacing:3px;

text-transform:uppercase;

color:var(--rose);

}

.featured-content{

position:relative;

z-index:2;

display:grid;

grid-template-columns:1fr 340px;

gap:45px;

align-items:center;

}

.featured-text{

position:relative;

z-index:2;

}

.featured-text h2{

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

line-height:1.1;

margin-bottom:12px;

color:var(--navy);

}

.featured-text h3{

font-size:2rem;

font-weight:600;

margin-bottom:22px;

color:var(--rose);

}

.featured-text p{

font-size:1.08rem;

line-height:2;

margin-bottom:22px;

color:var(--soft);

}

.featured-quote{

margin:35px 0;

padding:28px;

background:rgba(255,255,255,.72);

border-left:5px solid var(--gold);

border-radius:22px;

font-size:1.2rem;

font-style:italic;

line-height:1.8;

color:var(--rose);

box-shadow:
0 12px 25px rgba(0,0,0,.05);

}

.featured-button{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 36px;

background:

linear-gradient(
135deg,
var(--rose),
#6d3944
);

color:#ffffff;

font-weight:700;

text-decoration:none;

border-radius:999px;

transition:.35s ease;

box-shadow:
0 12px 28px rgba(138,79,92,.25);

}

.featured-button:hover{

transform:translateY(-5px);

box-shadow:
0 20px 40px rgba(138,79,92,.35);

}

.featured-cover{

display:flex;

justify-content:center;

align-items:center;

}

.featured-cover img{

width:100%;

max-width:320px;

border-radius:22px;

box-shadow:
0 22px 48px rgba(0,0,0,.14);

}

.featured-banner{

display:block;

width:100%;

margin:35px 0;

border-radius:28px;

border:1px solid rgba(198,167,104,.20);

box-shadow:
0 22px 48px rgba(0,0,0,.12);

transition:.35s ease;

}

.featured-banner:hover{

transform:scale(1.015);

}

.featured-book-image{

max-width:900px;

margin:35px auto;

text-align:center;

}

.featured-book-image img{

width:100%;

display:block;

border-radius:24px;

}

.featured-book-image figcaption{

margin-top:18px;

max-width:760px;

margin-left:auto;

margin-right:auto;

font-size:.95rem;

line-height:1.8;

font-style:italic;

color:#6b7280;

}

/* ==========================================
CARDS
========================================== */

.grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:28px;

}

.card{

display:flex;

flex-direction:column;

height:100%;

padding:30px;

background:#ffffff;

border-radius:28px;

border:1px solid rgba(198,167,104,.18);

box-shadow:
0 12px 30px rgba(0,0,0,.05);

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

}

.card:hover{

transform:translateY(-8px);

box-shadow:
0 22px 45px rgba(0,0,0,.10);

}

.icon{

font-size:2.5rem;

margin-bottom:18px;

line-height:1;

}

.card h3{

font-size:1.45rem;

line-height:1.4;

margin-bottom:16px;

color:var(--navy);

}

.card p{

font-size:1rem;

line-height:1.9;

color:var(--soft);

margin-bottom:24px;

}

/* ==========================================
BUTTONS
========================================== */

.view{

display:inline-flex;

justify-content:center;

align-items:center;

align-self:flex-start;

padding:12px 24px;

border-radius:999px;

background:var(--rose);

color:#ffffff;

font-weight:700;

text-decoration:none;

transition:.35s ease;

}

.view:hover{

transform:translateY(-3px);

opacity:.95;

}

/* ==========================================
NEW RELEASES
========================================== */

.new-releases{

background:
linear-gradient(
180deg,
#fffefc,
#f8f1e7
);

}

.new-release-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;
align-items:stretch;
}


.new-release-card{

position:relative;

overflow:hidden;

background:
linear-gradient(
180deg,
#ffffff,
#fffaf2
);

border:1px solid rgba(198,167,104,.22);

}

.new-release-card::before{

content:"NEW";

position:absolute;

top:20px;

right:-40px;

width:140px;

padding:6px 0;

text-align:center;

background:var(--gold);

color:#ffffff;

font-size:.7rem;

font-weight:700;

letter-spacing:2px;

transform:rotate(45deg);

}

.new-release{

margin-top:auto;

display:inline-flex;

justify-content:center;

align-items:center;

padding:14px 28px;

border-radius:999px;

background:
linear-gradient(
135deg,
var(--gold),
#b38f46
);

color:#ffffff;

font-weight:700;

text-decoration:none;

box-shadow:
0 10px 24px rgba(198,167,104,.30);

transition:.35s ease;

}

.new-release:hover{

transform:translateY(-4px);

box-shadow:
0 18px 40px rgba(198,167,104,.40);

}

/* ==========================================
BOOK COLLECTIONS
========================================== */

.collection{

margin-bottom:35px;

overflow:hidden;

background:
linear-gradient(
180deg,
#ffffff,
#fdfaf6
);

border:1px solid rgba(198,167,104,.18);

border-radius:30px;

box-shadow:
0 12px 30px rgba(0,0,0,.05);

transition:.35s ease;

}

.collection:hover{

transform:translateY(-4px);

box-shadow:
0 22px 45px rgba(0,0,0,.08);

}

.collection-header{

display:flex;

justify-content:space-between;

align-items:center;

gap:30px;

padding:34px;

cursor:pointer;

background:
linear-gradient(
135deg,
#fffdf9,
#f8f0e5
);

}

.collection-header h3{

font-size:1.6rem;

margin-bottom:12px;

color:var(--navy);

}

.collection-header p{

line-height:1.8;

color:var(--soft);

}

.collection-toggle{

font-size:2rem;

font-weight:700;

color:var(--gold);

transition:.35s ease;

}

.collection.active .collection-toggle{

transform:rotate(180deg);

}

.collection-content{

display:none;

padding:35px;

animation:fadeCollection .35s ease;

}

.collection.active .collection-content{

display:block;

}

@keyframes fadeCollection{

from{

opacity:0;

transform:translateY(-12px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* ==========================================
SUPPORT SECTION
========================================== */

.support-section{

max-width:1150px;

margin:0 auto;

padding:55px 45px;

background:rgba(255,255,255,.60);

border:1px solid rgba(198,167,104,.18);

border-radius:30px;

text-align:center;

box-shadow:
0 12px 30px rgba(0,0,0,.05);

}

.support-section h2{

font-size:2.2rem;

margin-bottom:20px;

color:var(--navy);

}

.support-section p{

max-width:760px;

margin:0 auto 24px;

line-height:1.9;

color:var(--soft);

}

.support-buttons{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:18px;

margin:35px 0;

}

.support-buttons a{

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 30px;

border-radius:999px;

background:var(--rose);

color:#ffffff;

text-decoration:none;

font-weight:700;

transition:.35s ease;

}

.support-buttons a:hover{

transform:translateY(-4px);

}

.support-note{

font-style:italic;

color:var(--rose);

margin-top:25px;

}

/* ==========================================
SEO
========================================== */

.seo-section{

background:#fffdf8;

}

.seo-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(260px,1fr));

gap:30px;

margin-top:45px;

}

.seo-grid div{

padding:30px;

background:#ffffff;

border-radius:24px;

border:1px solid rgba(198,167,104,.18);

box-shadow:
0 12px 28px rgba(0,0,0,.05);

}

.seo-grid h3{

margin-bottom:15px;

color:var(--navy);

}

.collection-intro{

max-width:900px;

margin:25px auto 40px;

text-align:center;

line-height:1.9;

font-size:1.08rem;

color:var(--soft);

}

.book-category-nav{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

margin:40px auto 55px;

}

.book-category-nav a{

padding:12px 24px;

background:#ffffff;

border-radius:999px;

border:1px solid rgba(198,167,104,.20);

text-decoration:none;

color:var(--navy);

font-weight:600;

transition:.35s ease;

}

.book-category-nav a:hover{

transform:translateY(-3px);

box-shadow:
0 10px 25px rgba(0,0,0,.08);

}

/* ==========================================
CONTACT FORM
========================================== */

.contact-form-card{

max-width:900px;

margin:auto;

padding:50px;

background:#ffffff;

border-radius:32px;

border:1px solid rgba(198,167,104,.18);

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

}

.contact-form{

display:flex;

flex-direction:column;

gap:28px;

}

.form-row{

display:grid;

grid-template-columns:1fr 1fr;

gap:25px;

}

.form-group{

display:flex;

flex-direction:column;

}

.form-group label{

margin-bottom:10px;

font-weight:700;

color:var(--navy);

}

.form-group input,
.form-group select,
.form-group textarea{

padding:16px 18px;

font:inherit;

border-radius:16px;

border:1px solid rgba(198,167,104,.25);

background:#fffdf9;

transition:.3s;

}

.form-group textarea{

resize:vertical;

min-height:180px;

}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

outline:none;

border-color:var(--gold);

box-shadow:
0 0 0 4px rgba(198,167,104,.12);

}

.form-submit{

text-align:center;

}

/* ==========================================
FAQ
========================================== */

.faq-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));

gap:24px;

}

.faq-card{

padding:30px;

background:#ffffff;

border-radius:26px;

border:1px solid rgba(198,167,104,.18);

box-shadow:
0 12px 28px rgba(0,0,0,.05);

transition:.35s ease;

}

.faq-card:hover{

transform:translateY(-5px);

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

}

.faq-card h3{

margin-bottom:16px;

font-size:1.35rem;

color:var(--navy);

}

.faq-card p{

line-height:1.9;

color:var(--soft);

}

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

.footer{

position:relative;

margin-top:80px;

padding:90px 25px;

text-align:center;

background:

linear-gradient(
180deg,
rgba(255,255,255,.65),
#fffaf5
);

border-top:1px solid #eadfce;

overflow:hidden;

}

.footerGlow{

position:absolute;

top:-220px;

left:50%;

transform:translateX(-50%);

width:700px;

height:700px;

background:

radial-gradient(
circle,
rgba(198,167,104,.12),
transparent 70%
);

pointer-events:none;

}

.footerBrand{

font-size:2.4rem;

font-weight:700;

margin-bottom:10px;

color:var(--navy);

position:relative;

}

.footerTag{

margin-bottom:30px;

font-size:.75rem;

letter-spacing:5px;

text-transform:uppercase;

color:var(--rose);

position:relative;

}

.footerDescription{

max-width:700px;

margin:0 auto 35px;

line-height:1.9;

color:var(--soft);

position:relative;

}

.footerLinks{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

margin-bottom:35px;

position:relative;

}

.footerLinks a{

padding:12px 24px;

background:#ffffff;

border-radius:999px;

border:1px solid rgba(198,167,104,.18);

text-decoration:none;

font-weight:700;

color:var(--rose);

transition:.35s ease;

}

.footerLinks a:hover{

background:var(--rose);

color:#ffffff;

transform:translateY(-4px);

}

.footerCopyright{

position:relative;

font-size:.9rem;

color:var(--soft);

opacity:.8;

}

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

@media(max-width:900px){

.section{

padding:45px 25px;

}

.featured-content{

grid-template-columns:1fr;

text-align:center;

}

.featured-text{

text-align:center;

}

.form-row{

grid-template-columns:1fr;

}

.contact-form-card{

padding:35px 25px;

}

.hero-buttons{

flex-direction:column;

}

.primary-button,
.secondary-button{

width:260px;

}

}

@media(max-width:768px){

.grid,

.new-release-grid,

.seo-grid,

.faq-grid{

grid-template-columns:1fr;

}

.collection-header{

flex-direction:column;

align-items:flex-start;

gap:20px;

}

.footerLinks{

flex-direction:column;

align-items:center;

}

}


.footerMotto{

margin:-18px 0 30px;

font-size:1.05rem;

font-style:italic;

color:var(--gold);

}

.featured-library{

max-width:1100px;

margin:70px auto 0;

padding-top:60px;

border-top:1px solid rgba(198,167,104,.20);

}

.featured-library h2{

text-align:center;

font-size:2.3rem;

color:var(--navy);

margin-bottom:18px;

}

.featured-library h2::after{

content:"";

display:block;

width:90px;

height:3px;

margin:18px auto;

background:var(--gold);

border-radius:999px;

}

.featured-library>p{

max-width:720px;

margin:0 auto 50px;

text-align:center;

line-height:1.9;

color:var(--soft);

}

/* ==========================================
WHO SERIES
========================================== */

.series-showcase{

text-align:center;

padding:40px 0;

}

.series-showcase .section-heading{

max-width:900px;

margin:0 auto 30px;
    text-align:center;

}

.series-showcase .sectionText{

max-width:900px;

margin:0 auto 2rem;

font-size:1.1rem;

line-height:1.9;

}

.series-banner{

    display:block;

    width:100%;

    max-width:100%;

    height:auto;

    margin:2rem auto;

    border-radius:24px;

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

}

.series-banner:hover{

transform:translateY(-4px);

box-shadow:
0 35px 70px rgba(0,0,0,.22);

}

.series-tagline{

max-width:820px;

margin:2rem auto;

padding:22px 28px;

background:linear-gradient(
135deg,
#fffdf9,
#f8f1e7
);

border:1px solid rgba(198,167,104,.18);

border-radius:20px;

font-size:1.08rem;

line-height:1.8;

color:var(--soft);

box-shadow:
0 12px 28px rgba(0,0,0,.05);

}