/* ===================================
KEPT OR RELEASED BY COVENANT
Stylesheet
Bradley Hobbs
=================================== */

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

:root{

--midnight:#0b1a2b;
--navy:#17304d;
--twilight:#27496b;

--gold:#d8a04c;
--gold-light:#f1c97a;

--amber:#c87b2b;
--bronze:#8c4c21;

--parchment:#f4e6c7;
--cream:#f8f0dc;

--text:#2b2218;
--white:#ffffff;

--border:
rgba(216,160,76,.25);

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

}

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

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:"Inter",sans-serif;

font-size:19px;

line-height:2;

background:

linear-gradient(
180deg,
var(--cream) 0%,
var(--parchment) 100%
);

color:var(--text);

overflow-x:hidden;

}

/* ===================================
TYPOGRAPHY
=================================== */

h1,
h2,
h3,
h4{

font-family:
"Cormorant Garamond",
serif;

font-weight:700;

line-height:1.1;

}

a{

text-decoration:none;

}

p{

margin-bottom:28px;

}

.wrapper{

width:min(1000px,92%);

margin:auto;

}


/* ===================================
TABLE OF CONTENTS CARDS
=================================== */

.contents-cards{

max-width:900px;

margin:0 auto;

}

.toc-card{

display:block;

padding:32px;

margin:24px 0;

background:

rgba(255,255,255,.35);

border:

1px solid
rgba(216,160,76,.20);

border-radius:20px;

color:var(--text);

transition:.3s;

box-shadow:

0 10px 30px

rgba(0,0,0,.05);

}

.toc-card:hover{

transform:translateY(-4px);

border-color:

rgba(216,160,76,.50);

box-shadow:

0 20px 40px

rgba(0,0,0,.10);

}

.toc-label{

display:block;

font-size:.85rem;

font-weight:700;

letter-spacing:3px;

text-transform:uppercase;

color:var(--amber);

margin-bottom:10px;

}

.toc-card h3{

font-size:2.2rem;

line-height:1.1;

color:var(--bronze);

margin-bottom:16px;

}

.toc-card p{

margin-bottom:16px;

}

.read-link{

font-weight:700;

color:var(--amber);

}

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

.image-hero{

padding:50px 0 70px;

background:

linear-gradient(
180deg,
#f8f0dc 0%,
#f4e6c7 100%
);

display:flex;

justify-content:center;

align-items:center;

}

.hero-banner{

width:min(1400px,90%);

margin:auto;

}

.banner-image{

display:block;

width:100%;

height:auto;

border-radius:18px;

box-shadow:

0 25px 60px

rgba(0,0,0,.18);

}
/* ===================================
CHAPTER HEROES
=================================== */

.small-hero{

position:relative;

min-height:50vh;

display:flex;

justify-content:center;
align-items:center;

text-align:center;

background:

linear-gradient(
rgba(11,26,43,.60),
rgba(11,26,43,.80)
),

url("banner.jpg")

center center
cover
no-repeat;

color:var(--white);

}

.hero-overlay{

position:absolute;

inset:0;

background:

linear-gradient(
180deg,
rgba(11,26,43,.20),
rgba(11,26,43,.70)
);

}

.hero-content{

position:relative;

z-index:2;

max-width:900px;

padding:20px;

}

.eyebrow{

font-size:.9rem;

text-transform:uppercase;

letter-spacing:4px;

color:var(--gold-light);

margin-bottom:20px;

}

.hero h1{

font-size:
clamp(3.5rem,8vw,6rem);

color:var(--white);

margin-bottom:10px;

}

.hero h2{

font-size:
clamp(1.6rem,4vw,2.5rem);

font-weight:400;

color:var(--gold-light);

}

.hero-text{

font-size:1.1rem;

margin-top:20px;

color:var(--parchment);

}

/* ===================================
MAIN
=================================== */

main{

padding:80px 0 40px;

}

section{

margin-bottom:100px;

}

section h2{

font-size:
clamp(3rem,6vw,5rem);

text-align:center;

color:var(--bronze);

margin-bottom:60px;

}

/* ===================================
HOME ACTIONS
=================================== */

.home-actions{

display:flex;

justify-content:center;

align-items:center;

gap:20px;

flex-wrap:wrap;

margin-top:60px;

margin-bottom:100px;

}

.home-actions .chapter-button{

min-width:240px;

}

/* ===================================
BOOK CONTENT
=================================== */

.introduction,
.contents,
.support-section,
.chapter-page{

max-width:1000px;

margin:auto;

}

.glass-card{

background:none;

border:none;

padding:0;

box-shadow:none;

backdrop-filter:none;

}

.chapter-page{

max-width:900px;

}

.chapter-page p{

font-size:1.08rem;

}


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

.support-section{

max-width:800px;

margin:0 auto 80px;

text-align:center;

}

.support-section h2{

font-size:

clamp(2.5rem,5vw,4rem);

margin-bottom:25px;

}

.support-section p{

max-width:750px;

margin:0 auto 18px;

}

.support-buttons{

display:flex;

justify-content:center;
align-items:center;

gap:16px;

flex-wrap:wrap;

margin:30px 0;

}

.support-buttons a{

display:inline-flex;

justify-content:center;
align-items:center;

padding:14px 32px;

border-radius:999px;

font-weight:700;

background:

linear-gradient(
135deg,
var(--amber),
var(--gold)
);

color:var(--white);

box-shadow:

0 10px 25px

rgba(200,123,43,.25);

transition:.3s;

min-width:160px;

font-size:1rem;


}

.support-buttons a:hover{

transform:translateY(-3px);

box-shadow:

0 18px 35px

rgba(200,123,43,.35);

}

.support-note{

font-style:italic;

opacity:.85;

}

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

.chapter-divider{

width:min(350px,60%);

margin:90px auto;

border:none;

height:1px;

background:

linear-gradient(
90deg,
transparent,
rgba(216,160,76,.65),
transparent
);

}

/* ===================================
CHAPTER NAVIGATION
=================================== */

.chapter-navigation{

width:min(1000px,92%);

margin:0 auto 100px;

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

flex-wrap:wrap;

}

.chapter-button{

display:inline-flex;

justify-content:center;
align-items:center;

min-width:220px;

padding:16px 32px;

border-radius:999px;

font-weight:600;

background:

linear-gradient(
135deg,
var(--amber),
var(--gold)
);

color:var(--white);

transition:.3s;

}

.chapter-button:hover{

transform:translateY(-3px);

}

.chapter-button.contents{

background:

var(--cream);

color:var(--bronze);

border:

1px solid
rgba(216,160,76,.40);

}

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

footer{

padding:100px 0 80px;

background:

linear-gradient(
180deg,
var(--navy),
var(--midnight)
);

color:var(--parchment);

text-align:center;

margin-top:40px;

}

.footer-brand{

margin-bottom:50px;

}

.footer-brand h2{

font-size:
clamp(2.5rem,6vw,4rem);

color:var(--gold-light);

}

.footer-brand h3{

font-size:1.6rem;

font-weight:400;

color:var(--parchment);

margin-top:5px;

}

.footer-description{

opacity:.85;

margin-top:20px;

}

.footer-links{

display:flex;

justify-content:center;
align-items:center;

gap:30px;

flex-wrap:wrap;

margin-bottom:50px;

}

.footer-links a{

color:var(--gold-light);

font-weight:600;

}

.footer-links a:hover{

color:var(--white);

}

.footer-divider{

width:min(500px,70%);

height:1px;

margin:50px auto;

background:

linear-gradient(
90deg,
transparent,
rgba(241,201,122,.60),
transparent
);

}

.copyright{

opacity:.85;

margin-bottom:12px;

}

.footer-quote{

opacity:.8;

}

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

.footer-navigation{

display:flex;

justify-content:center;

align-items:center;

gap:30px;

flex-wrap:wrap;

margin:30px 0;

}

.footer-navigation a{

color:var(--gold-light);

font-weight:600;

font-size:1.05rem;

transition:.3s;

}

.footer-navigation a:visited{

color:var(--gold-light);

}

.footer-navigation a:hover{

color:var(--white);

}

.footer-navigation a:active{

color:var(--gold);

}

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

.section-divider{

width:min(900px,90%);

height:1px;

margin:100px auto;

border:none;

background:

linear-gradient(
90deg,
transparent,
rgba(140,76,33,.25),
rgba(216,160,76,.95),
rgba(140,76,33,.25),
transparent
);

}

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

@media(max-width:768px){

body{

font-size:17px;

}

main{

padding:70px 0;

}

section{

margin-bottom:100px;

}

.chapter-navigation{

flex-direction:column;

}

.chapter-button{

width:100%;

}

.support-buttons{

flex-direction:column;

}

.support-buttons a{

width:100%;
max-width:320px;

}

.footer-links{

gap:18px;

}

section h2{

font-size:3rem;

}

}

@media(max-width:480px){

.hero h1{

font-size:2.8rem;

}

.hero h2{

font-size:1.3rem;

}

body{

font-size:16px;

}

}