/* ==========================================================
   THE SUBSTITUTE
   GLOBAL WEBSITE STYLESHEET
   Bradley Hobbs
   ========================================================== */

:root {
--background:#050b12;
--background-alt:#0b121a;
--surface:#0f1720;
--surface-hover:#18222d;
--gold:#d4a63a;
--gold-light:#f0c766;
--sunrise:#f4bf4f;
--sunrise-light:#ffd978;
--forest:#6f8f3a;
--forest-light:#8eaf57;
--wood:#7d5a34;
--text:#f7f4ee;
--text-muted:#cfc7b8;
--border:#2a3440;
--shadow:0 15px 35px rgba(0,0,0,.45);
--container:1100px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
background:linear-gradient(180deg,var(--background),var(--background-alt),var(--background));
color:var(--text);
font-family:"Inter",sans-serif;
line-height:1.9;
min-height:100vh;
}

::selection{background:var(--gold);color:#000;}
img{max-width:100%;height:auto;display:block;}

main{width:min(var(--container),92%);margin:auto;}

a{color:var(--gold);text-decoration:none;transition:all .3s ease;}
a:hover{color:var(--sunrise-light);}

header{
position:sticky;
top:0;
z-index:1000;
background:rgba(5,11,18,.95);
backdrop-filter:blur(10px);
border-bottom:1px solid rgba(212,166,58,.15);
}

nav{
display:flex;
justify-content:center;
align-items:center;
gap:2rem;
padding:1rem;
flex-wrap:wrap;
}

nav a{font-weight:600;letter-spacing:.5px;}

.banner{margin:2rem 0 3rem;}
.banner img{
border-radius:20px;
box-shadow:var(--shadow);
border:1px solid rgba(212,166,58,.15);
}

.hero-content{text-align:center;padding-bottom:4rem;}

.hero-content h1{
font-family:"Cinzel",serif;
font-size:clamp(3rem,7vw,5.5rem);
color:var(--gold);
line-height:1.1;
margin-bottom:1rem;
}

.hero-content h2{
font-size:clamp(1.2rem,3vw,2rem);
font-weight:400;
color:var(--text-muted);
margin-bottom:2rem;
}

.hero-content p{
max-width:760px;
margin:0 auto 2rem;
font-size:1.1rem;
}

.btn,
.hero-content a{
display:inline-block;
padding:14px 30px;
background:linear-gradient(135deg,var(--gold),var(--sunrise));
color:#000;
font-weight:700;
border-radius:12px;
box-shadow:0 5px 15px rgba(212,166,58,.25);
}

.book-overview,
.author-section,
.chapters{margin-bottom:5rem;}

.book-overview h2,
.author-section h2,
.chapters h2{
font-family:"Cinzel",serif;
font-size:clamp(2rem,4vw,3rem);
color:var(--gold);
text-align:center;
margin-bottom:1.5rem;
}

.book-overview p,
.author-section p{
max-width:760px;
margin:auto;
color:var(--text-muted);
}

.author-section{
background:linear-gradient(180deg,var(--surface),#141d27);
padding:2.5rem;
border-radius:20px;
border:1px solid rgba(212,166,58,.12);
}

.chapters ul{
list-style:none;
max-width:900px;
margin:auto;
display:grid;
gap:1rem;
}

.chapters li{
background:linear-gradient(180deg,var(--surface),#141d27);
padding:1rem 1.25rem;
border-radius:12px;
border:1px solid rgba(212,166,58,.1);
}

.chapter-header{
text-align:center;
max-width:850px;
margin:3rem auto;
}

.chapter-number{
display:block;
font-size:.9rem;
font-weight:700;
letter-spacing:3px;
text-transform:uppercase;
color:var(--forest-light);
margin-bottom:1rem;
}

.chapter-header h1{
font-family:"Cinzel",serif;
font-size:clamp(2.2rem,5vw,4rem);
color:var(--gold);
margin-bottom:1rem;
}

.chapter-meta{
color:var(--text-muted);
margin-bottom:2rem;
}

.chapter-intro{
max-width:760px;
margin:auto;
font-size:1.15rem;
line-height:1.9;
padding:1.5rem 0;
color:var(--text-muted);
}

.chapter-content{
max-width:760px;
margin:auto;
scroll-margin-top:120px;
}

.chapter-content p{
margin-bottom:1.8rem;
font-size:1.08rem;
}

.quote-box{
background:rgba(212,166,58,.08);
border-left:4px solid var(--gold);
padding:1.5rem;
margin:2rem 0;
border-radius:12px;
font-style:italic;
}

.book-path{
margin:2rem 0;
color:var(--text-muted);
font-size:.95rem;
}

.chapter-navigation{
display:flex;
justify-content:space-between;
gap:1rem;
margin-top:4rem;
padding-top:2rem;
border-top:1px solid rgba(212,166,58,.15);
}

.chapter-navigation a{
background:var(--surface);
padding:12px 20px;
border-radius:10px;
border:1px solid rgba(212,166,58,.15);
}

.footer-container{

max-width:900px;

margin:auto;

}

.footer-subtitle{

font-size:1.1rem;

color:var(--text-muted);

margin-bottom:30px;

font-style:italic;

}

.footer-links{

display:flex;

justify-content:center;

align-items:center;

gap:30px;

flex-wrap:wrap;

margin-bottom:35px;

}


.footer-links a{

color:var(--gold);

font-weight:600;

}

footer h3{

font-family:"Cinzel",serif;

font-size:1.8rem;

color:var(--text);

margin-bottom:1.5rem;

}

.footer-divider{

width:120px;

height:1px;

background:rgba(212,166,58,.25);

border:none;

margin:35px auto;

}

.donation-buttons{

display:flex;

justify-content:center;

align-items:center;

gap:18px;

flex-wrap:wrap;

margin:30px 0;

}

.donate-btn{

display:inline-block;

padding:14px 28px;

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

color:#000;

font-weight:700;

text-decoration:none;

border-radius:12px;

box-shadow:
0 5px 15px rgba(
212,
166,
58,
.25
);

transition:.3s;

}

.donate-btn:hover{

background:linear-gradient(
135deg,
var(--gold-light),
var(--sunrise-light)
);

color:#000;

transform:translateY(-3px);

}

footer{
margin-top:6rem;
padding:3rem 1rem;
text-align:center;
border-top:1px solid rgba(212,166,58,.15);
}

footer p{
margin-bottom:.75rem;
color:var(--text-muted);
}

hr{
border:none;
height:1px;
background:rgba(212,166,58,.15);
margin:3rem 0;
}

@media (max-width:768px){
nav{flex-direction:column;gap:.75rem;}
.chapter-navigation{flex-direction:column;}
.chapter-navigation a{width:100%;text-align:center;}
.chapter-content p{font-size:1rem;}
.hero-content{text-align:left;}
}

@media (max-width:768px){

nav{
flex-direction:column;
gap:.75rem;
}

.chapter-navigation{
flex-direction:column;
}

.chapter-navigation a{
width:100%;
text-align:center;
}

.chapter-content p{
font-size:1rem;
}

.hero-content{
text-align:left;
}

.footer-links{

flex-direction:column;

gap:14px;

margin-bottom:25px;

}

.donation-buttons{

flex-direction:column;

gap:12px;

}

.donate-btn{

width:220px;

text-align:center;
}

.footer-subtitle{

font-size:1rem;

line-height:1.6;
}

}