/* ====================================
   FEAR BEFORE FEAR
   Homepage Styles
==================================== */

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

:root{

--black:#080A09;
--charcoal:#171412;

--earth-dark:#2A1E17;
--earth-medium:#5A4332;

--taupe:#8D7763;

--gold:#C9A67A;
--sand:#B79A76;

--ivory:#EEE6D8;

--olive:#69724A;
--sage:#7C8860;
--sprout:#A7B46D;

}

html{
scroll-behavior:smooth;
}

body{
font-family:'Inter',sans-serif;

background:
linear-gradient(
180deg,
var(--black) 0%,
var(--charcoal) 25%,
var(--earth-dark) 100%
);

color:var(--ivory);

line-height:1.8;

overflow-x:hidden;

min-height:100vh;
}

body::before{
content:"";

position:fixed;

inset:0;

background:
radial-gradient(
circle at top,
rgba(167,180,109,.10),
transparent 50%
);

pointer-events:none;

z-index:-1;
}

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

.hero{
padding:18px 20px 40px;

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

.banner-wrapper{
width:100%;
max-width:1200px;

display:flex;
flex-direction:column;
align-items:center;
}

.hero-banner{
width:100%;
display:block;

border-radius:24px;

box-shadow:
0 20px 60px rgba(0,0,0,.45);
}

.banner-overlay{
margin-top:24px;
margin-bottom:8px;
}

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

.btn{
display:inline-block;

padding:15px 34px;

border-radius:999px;

text-decoration:none;

background:var(--sprout);

color:var(--black);

font-weight:700;

font-size:.95rem;

letter-spacing:.4px;

box-shadow:
0 10px 28px rgba(0,0,0,.30);

transition:.35s ease;
}

.btn:hover{
transform:translateY(-4px);

background:var(--gold);
}

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

.section{
max-width:920px;
margin:0 auto;
padding:70px 24px;
}

.section h2{
font-family:'Cormorant Garamond',serif;
font-size:2.8rem;
font-weight:600;
text-align:center;
margin-bottom:28px;
color:var(--ivory);
text-shadow:0 0 20px rgba(167,180,109,.10);
}

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

.about p{
max-width:720px;
margin:auto;
font-size:1.05rem;
line-height:1.85;
text-align:center;
color:var(--sand);
}


/* ==========================
   QUOTE
========================== */

.quote{
text-align:center;
padding-top:30px;
padding-bottom:40px;
}

.quote blockquote{
max-width:760px;
margin:auto;
font-family:'Cormorant Garamond',serif;
font-size:2.2rem;
font-style:italic;
line-height:1.3;
color:var(--sprout);
}

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

.navigation{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:18px;
margin-top:28px;
}

.card{
padding:26px;
border-radius:18px;
background:rgba(255,255,255,.03);
border:1px solid rgba(167,180,109,.15);
text-decoration:none;
color:var(--ivory);
transition:.35s ease;
}

.card:hover{
transform:translateY(-6px);
background:rgba(167,180,109,.10);
border-color:rgba(167,180,109,.45);
box-shadow:0 15px 40px rgba(0,0,0,.25);
}

.card h3{
font-family:'Cormorant Garamond',serif;
font-size:1.8rem;
margin-bottom:8px;
color:var(--gold);
}

.card p{
color:var(--sand);
line-height:1.65;
font-size:.98rem;
}

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

.author{
text-align:center;
}

.author p{
max-width:720px;
margin:0 auto 18px;
font-size:1.03rem;
line-height:1.85;
color:var(--sand);
}

.author p + p{
margin-top:14px;
}

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

.book-footer{
margin-top:60px;
padding:45px 24px;
text-align:center;
border-top:1px solid rgba(167,180,109,.20);
}

.footer-divider{
width:140px;
height:2px;
margin:0 auto 24px;
background:linear-gradient(
90deg,
transparent,
var(--sprout),
transparent
);
}

.copyright{
font-size:.9rem;
color:var(--taupe);
margin-bottom:12px;
}

.footer-book-title{
font-family:'Cormorant Garamond',serif;
font-size:1.8rem;
color:var(--ivory);
margin-bottom:6px;
}


.footer-subtitle{
font-size:.8rem;
letter-spacing:1.5px;
text-transform:uppercase;
color:var(--sand);
margin-bottom:18px;
}

.footer-links{
display:flex;
justify-content:center;
align-items:center;
gap:14px;
flex-wrap:wrap;
}

.footer-links a{
color:var(--gold);
text-decoration:none;
transition:.3s ease;
}

.footer-links a:hover{
color:var(--sprout);
}

.separator{
color:var(--taupe);
}

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

@media(max-width:768px){

.hero{
padding:20px 15px 50px;
}

.banner-overlay{
margin-top:25px;
margin-bottom:10px;
}

.btn{
padding:14px 30px;
font-size:.9rem;
}

.section{
padding:80px 20px;
}

.section h2{
font-size:2.4rem;
margin-bottom:35px;
}

.about p,
.author p{
font-size:1rem;
line-height:1.9;
}

.quote blockquote{
font-size:1.8rem;
}

.footer-links{
flex-direction:column;
}

.separator{
display:none;
}

}