/* ===================================
   THE SUBSTITUTE
   Global Stylesheet
   Bradley Hobbs
=================================== */
/* ===================================
   ROOT
=================================== */
:root{
--midnight:#08121c;
--night:#0d1722;
--charcoal:#141a1f;
--deep-shadow:#1a222b;
--panel:#212d38;
--gold:#d6a647;
--gold-light:#e8c46c;
--sunrise:#f0bc59;
--amber:#b8842d;
--ivory:#f5f1e8;
--soft-white:#e7e2d7;
--light-text:#cfc9be;
--muted-text:#a29c92;
--border:#2c3742;
--shadow-dark:
0 15px 40px rgba(0,0,0,.35);
--shadow-light:
0 0 25px rgba(214,166,71,.12);
--radius:16px;
--content-width:1200px;
}

main{
max-width:var(--content-width);
margin:auto;
padding:4rem 2rem;
width:100%;
}
/* ===================================
   RESET
=================================== */
*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
background:
linear-gradient(
180deg,
var(--midnight),
var(--night)
);
color:var(--light-text);
font-family:
Inter,
sans-serif;
font-size:1.125rem;
line-height:1.9;
min-height:100vh;
}
/* ===================================
   TYPOGRAPHY
=================================== */
h1,
h2,
h3,
h4,
h5,
h6{
font-family:
Cinzel,
serif;
color:var(--ivory);
line-height:1.3;
margin-bottom:1rem;
}

h1{
font-size:
clamp(2.5rem,5vw,4.5rem);
}

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

h3{
font-size:
1.5rem;
}

p{
margin-bottom:1.75rem;
}

strong{
color:var(--ivory);
}

em{
color:var(--gold-light);
}
/* ===================================
   LINKS
=================================== */
a{
color:var(--gold);
text-decoration:none;
transition:.3s ease;
}

a:hover{
color:var(--gold-light);
}

/* ===================================
   BUTTON LINK OVERRIDE
=================================== */

a.button,
a.button:link,
a.button:visited,
a.button:hover,
a.button:active{

color:var(--midnight) !important;
text-decoration:none;

}

/* ===================================
   HEADER
=================================== */
header{
position:sticky;
top:0;
z-index:999;
background:
rgba(8,18,28,.95);
backdrop-filter:
blur(10px);
border-bottom:
1px solid var(--border);
}

nav{
max-width:var(--content-width);
margin:auto;
padding:1.25rem;
display:flex;
justify-content:center;
gap:2rem;
flex-wrap:wrap;
}

nav a{
font-weight:600;
text-transform:uppercase;
letter-spacing:.08em;
font-size:.95rem;
}
/* ===================================
   MAIN
=================================== */
main{
max-width:var(--content-width);
margin:auto;
padding:4rem 1.5rem;
}
/* ===================================
   BANNER
=================================== */
.banner{
margin-bottom:4rem;
overflow:hidden;
border-radius:var(--radius);
box-shadow:var(--shadow-dark);
}

.banner img{
display:block;
width:100%;
height:auto;
}
/* ===================================
   CONTENT SECTIONS
=================================== */
.hero-content,
.book-overview,
.author-section,
.book-summary,
.chapter-content,
.page-header,
.chapter-header{
background:
rgba(20,26,31,.55);
border:
1px solid var(--border);
border-radius:var(--radius);
padding:3rem;
margin-bottom:3rem;
box-shadow:var(--shadow-dark);
}
/* ===================================
   CHAPTER NUMBER
=================================== */
.chapter-number{
display:inline-block;
margin-bottom:1rem;
font-size:.9rem;
font-weight:700;
letter-spacing:.15em;
text-transform:uppercase;
color:var(--gold);
}
/* ===================================
   BREADCRUMB
=================================== */
.book-path{
margin-bottom:2rem;
font-size:.95rem;
color:var(--muted-text);
}
/* ===================================
   QUOTE BOX
=================================== */
.quote-box{
background:
rgba(214,166,71,.08);
border-left:
4px solid var(--gold);
padding:2rem;
margin:3rem 0;
font-style:italic;
font-size:1.2rem;
color:var(--ivory);
border-radius:0 var(--radius) var(--radius) 0;
}

/* ===================================
   CONTENTS PAGE
=================================== */
.content-group{
background:
rgba(20,26,31,.55);
border:
1px solid var(--border);
border-radius:var(--radius);
padding:2rem;
margin-bottom:2rem;
}

.content-group ul{
list-style:none;
}

.content-group li{
padding:1rem 0;
border-bottom:
1px solid rgba(255,255,255,.05);
}

.content-group li:last-child{
border-bottom:none;
}

.part-description{
color:var(--gold-light);
font-style:italic;
margin-bottom:1rem;
}

.book-title{
font-size:3rem;
font-family:Cinzel,serif;
color:var(--ivory);
margin-bottom:1rem;
}

.book-subtitle{
font-size:1.3rem;
color:var(--gold-light);
max-width:800px;
margin:auto;
}

section{
margin:5rem 0;
}

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

.button,
button{

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

padding:18px 42px;

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

color:var(--midnight) !important;

font-family:Inter,sans-serif;
font-size:1.05rem;
font-weight:700;
letter-spacing:.03em;

border:none;
border-radius:14px;

text-decoration:none;

cursor:pointer;

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

box-shadow:
0 12px 28px rgba(214,166,71,.22);

}

.button:link,
.button:visited,
.button:hover,
.button:active,
.button:focus{

color:var(--midnight) !important;
text-decoration:none;

}

.button:hover{

background:linear-gradient(
180deg,
#f0d07c,
#ddb04f
);

transform:translateY(-3px);

box-shadow:
0 18px 36px rgba(214,166,71,.32);

}
/* ===================================
   START READING
=================================== */
.start-reading{
display:flex;
justify-content:center;
align-items:center;
min-height:220px;
padding:4rem 1rem;
margin:0;
}
/* ===================================
   CHAPTER NAVIGATION
=================================== */
.chapter-navigation{
display:flex;
justify-content:space-between;
align-items:center;
gap:1rem;
margin-top:3rem;
flex-wrap:wrap;
}

.chapter-navigation a{
padding:1rem 1.25rem;
background:
rgba(20,26,31,.8);
border:
1px solid var(--border);
border-radius:10px;
}
/* ===================================
   HR
=================================== */
hr{
border:none;
height:1px;
background:
linear-gradient(
90deg,
transparent,
var(--gold),
transparent
);
margin:3rem 0;
}
/* ===================================
   LISTS
=================================== */
ul,
ol{
padding-left:1.5rem;
margin-bottom:2rem;
}

li{
margin-bottom:.75rem;
}
/* ===================================
   IMAGES
=================================== */
img{
max-width:100%;
height:auto;
}
/* ===================================
   FOOTER
=================================== */
footer{
padding:5rem 2rem;
text-align:center;
background:var(--midnight);
border-top:1px solid rgba(255,255,255,.08);
}

footer h3{
margin-bottom:1rem;
}

footer p{
margin-bottom:1rem;
line-height:1.7;
}

.footer-divider{
border:none;
height:1px;
background:rgba(255,255,255,.15);
max-width:220px;
margin:30px auto;
}

.donation-buttons{
display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;
margin:25px 0;
}

.donate-btn{

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

padding:14px 30px;

background:
linear-gradient(
180deg,
#e8c46c,
#d6a647
);

color:#08121c;

font-weight:700;

border-radius:999px;

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

box-shadow:
0 10px 24px rgba(214,166,71,.18);

}

.donate-btn:hover{

color:#08121c;

transform:translateY(-3px);

box-shadow:
0 16px 32px rgba(214,166,71,.28);

}

.footer-links{

display:flex;
justify-content:center;
align-items:center;
gap:30px;
flex-wrap:wrap;
margin:25px 0;

}

.footer-links a{

color:var(--gold);
font-weight:600;

}

.footer-links a:hover{

color:var(--gold-light);

}

/* ===================================
   SELECTION
=================================== */
::selection{
background:var(--gold);
color:var(--midnight);
}
/* ===================================
   SCROLLBAR
=================================== */
::-webkit-scrollbar{
width:10px;
}
::-webkit-scrollbar-track{
background:var(--night);
}
::-webkit-scrollbar-thumb{
background:var(--gold);
border-radius:20px;
}
/* ===================================
   HERO
=================================== */
.hero{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
min-height:55vh;
padding:4rem 2rem;
}

.hero h1{
max-width:900px;
margin-bottom:1rem;
}

.hero p{
max-width:700px;
opacity:.85;
}
/* ===================================
   MOBILE
=================================== */
@media (max-width:900px){
main{
padding:2rem 1rem;
}
.hero-content,
.book-overview,
.author-section,
.book-summary,
.chapter-content,
.page-header,
.chapter-header{
padding:2rem;
}
.chapter-navigation{
flex-direction:column;
align-items:stretch;
}
.chapter-navigation a{
text-align:center;
}
}
@media (max-width:600px){
body{
font-size:1rem;
}
nav{
gap:1rem;
}
h1{
font-size:2.2rem;
}
h2{
font-size:1.8rem;
}
.quote-box{
font-size:1.05rem;
padding:1.5rem;
}
}