/*======================================================
WHO DO YOU CALL SAVIOR?
Bradley Hobbs
Master Stylesheet
Part 1 • Foundation
======================================================*/


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

*,
*::before,
*::after{

margin:0;
padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

scroll-padding-top:90px;

}

body{

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

font-size:16px;

line-height:1.8;

background:#faf7f2;

color:#2f2f2f;

overflow-x:hidden;

text-rendering:optimizeLegibility;

-webkit-font-smoothing:antialiased;

}


/*======================================================
COLOR PALETTE
Inspired by Hero Banner
======================================================*/

:root{

/* Backgrounds */

--bg:#faf7f2;

--surface:#ffffff;

--surface-alt:#f3eee6;

--cream:#f8f5ef;


/* Brand */

--navy:#23384c;

--navy-dark:#1b2b3d;

--gold:#c7a252;

--gold-light:#e2c886;

--gold-dark:#9f7830;


/* Supporting */

--stone:#d7cec2;

--border:#e7dfd4;


/* Text */

--heading:#23384c;

--text:#2f2f2f;

--text-light:#6a6a6a;

--white:#ffffff;


/* Radius */

--radius-sm:8px;

--radius:18px;

--radius-lg:30px;


/* Shadows */

--shadow-sm:
0 4px 16px rgba(0,0,0,.05);

--shadow:
0 12px 35px rgba(0,0,0,.08);

--shadow-lg:
0 25px 70px rgba(0,0,0,.12);


/* Transition */

--transition:.35s ease;

}


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

h1,
h2,
h3,
h4,
h5,
h6{

font-family:"Cinzel",serif;

font-weight:600;

line-height:1.2;

color:var(--heading);

margin-bottom:24px;

}

h1{

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

}

h2{

font-size:clamp(2.2rem,4vw,3.25rem);

}

h3{

font-size:1.5rem;

}

h4{

font-size:1.25rem;

}

p{

margin-bottom:24px;

color:var(--text);

}

.subtitle{

font-family:"Cormorant Garamond",serif;

font-size:clamp(1.6rem,3vw,2.4rem);

font-style:italic;

font-weight:500;

color:var(--gold-dark);

margin-bottom:24px;

}

blockquote{

font-family:"Cormorant Garamond",serif;

font-size:clamp(1.8rem,3vw,2.8rem);

font-style:italic;

font-weight:500;

color:var(--navy);

line-height:1.4;

}


/*======================================================
LINKS
======================================================*/

a{

color:inherit;

text-decoration:none;

transition:var(--transition);

}


/*======================================================
IMAGES
======================================================*/

img{

display:block;

max-width:100%;

height:auto;

}


/*======================================================
LISTS
======================================================*/

ul,
ol{

list-style:none;

}


/*======================================================
LAYOUT
======================================================*/

.container{

width:min(1180px,92%);

margin-inline:auto;

}

section{

position:relative;

padding:110px 0;

}


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

.button,
.primary-button,
.secondary-button{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 36px;

border-radius:999px;

font-weight:600;

transition:var(--transition);

cursor:pointer;

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

}

.primary-button{

background:var(--gold);

color:var(--white);

box-shadow:var(--shadow-sm);

}

.primary-button:hover{

background:var(--gold-dark);

transform:translateY(-3px);

box-shadow:var(--shadow);

}

.secondary-button{

background:transparent;

border:2px solid var(--gold);

color:var(--gold-dark);

}

.secondary-button:hover{

background:var(--gold);

color:var(--white);

}


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

.card{

background:var(--surface);

padding:40px;

border-radius:var(--radius);

border:1px solid var(--border);

box-shadow:var(--shadow-sm);

transition:var(--transition);

}

.card:hover{

transform:translateY(-8px);

box-shadow:var(--shadow);

}


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

.section-divider{

width:120px;

height:2px;

background:var(--gold);

margin:60px auto;

position:relative;

}

.section-divider::before{

content:"✦";

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

background:var(--bg);

padding:0 18px;

color:var(--gold);

}


/*======================================================
HELPER CLASSES
======================================================*/

.text-center{

text-align:center;

}

.text-gold{

color:var(--gold);

}

.text-light{

color:var(--text-light);

}

.bg-light{

background:var(--surface);

}

.bg-alt{

background:var(--surface-alt);

}


/*======================================================
SELECTION
======================================================*/

::selection{

background:var(--gold);

color:var(--white);

}


/*======================================================
ACCESSIBILITY
======================================================*/

:focus-visible{

outline:3px solid var(--gold);

outline-offset:4px;

border-radius:4px;

}

.skip-link{

position:absolute;

left:-9999px;

top:auto;

}

.skip-link:focus{

left:20px;

top:20px;

padding:12px 18px;

background:var(--navy);

color:var(--white);

border-radius:var(--radius-sm);

z-index:9999;

}


/*======================================================
SPACING UTILITIES
======================================================*/

.mt-1{margin-top:1rem;}
.mt-2{margin-top:2rem;}
.mt-3{margin-top:3rem;}
.mt-4{margin-top:4rem;}

.mb-1{margin-bottom:1rem;}
.mb-2{margin-bottom:2rem;}
.mb-3{margin-bottom:3rem;}
.mb-4{margin-bottom:4rem;}

/*======================================================
PART 2
HEADER & NAVIGATION
======================================================*/

/*======================================================
SITE HEADER
======================================================*/

.site-header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:1000;

padding:16px 0;

background:rgba(248,245,239,.88);

backdrop-filter:blur(14px);

-webkit-backdrop-filter:blur(14px);

border-bottom:1px solid rgba(200,164,90,.20);

box-shadow:0 6px 25px rgba(0,0,0,.06);

transition:all .35s ease;

}

.site-header.scrolled{

background:rgba(248,245,239,.96);

padding:12px 0;

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

}

/*======================================================
NAVBAR
======================================================*/

.navbar{

max-width:1200px;

margin:auto;

display:flex;

align-items:center;

justify-content:space-between;

}

/*======================================================
LOGO
======================================================*/

.logo{

font-family:"Cinzel",serif;

font-size:1.4rem;

font-weight:700;

letter-spacing:2px;

color:var(--navy);

transition:var(--transition);

}

.site-header.scrolled .logo{

color:var(--navy);

}

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

.nav-links{

display:flex;

align-items:center;

gap:32px;

}

.nav-links a{

position:relative;

font-size:.95rem;

font-weight:600;

letter-spacing:.5px;

color:var(--navy);

transition:var(--transition);

}

.site-header.scrolled .nav-links a{

color:var(--navy);

}

/*======================================================
UNDERLINE
======================================================*/

.nav-links a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--gold);

transition:.35s;

}

.nav-links a:hover::after,

.nav-links a.active::after{

width:100%;

}

.nav-links a:hover{

color:var(--gold-dark);

}

.site-header.scrolled .nav-links a:hover{

color:var(--gold-dark);

}

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

.nav-button{

background:var(--gold);

color:var(--white);

padding:14px 28px;

border-radius:999px;

font-weight:600;

box-shadow:var(--shadow-sm);

}

.nav-button:hover{

background:var(--gold-dark);

transform:translateY(-3px);

box-shadow:var(--shadow);

}

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

.menu-toggle{

display:none;

background:none;

border:none;

cursor:pointer;

padding:6px;

}

.menu-toggle span{

display:block;

width:28px;

height:2px;

margin:6px 0;

background:var(--navy);

transition:.35s;

}

.site-header.scrolled .menu-toggle span{

background:var(--navy);

}

/*======================================================
MOBILE MENU
======================================================*/

.mobile-menu{

position:fixed;

top:0;

right:-100%;

width:320px;

height:100vh;

background:var(--cream);

padding:120px 40px;

box-shadow:-10px 0 40px rgba(0,0,0,.15);

transition:.4s ease;

z-index:999;

}

.mobile-menu.active{

right:0;

}

.mobile-menu a{

display:block;

padding:18px 0;

font-size:1.05rem;

font-weight:600;

border-bottom:1px solid var(--border);

color:var(--navy);

}

.mobile-menu a:hover{

color:var(--gold-dark);

padding-left:10px;

}

/*======================================================
OVERLAY
======================================================*/

.menu-overlay{

position:fixed;

inset:0;

background:rgba(0,0,0,.45);

opacity:0;

visibility:hidden;

transition:.35s;

z-index:998;

}

.menu-overlay.active{

opacity:1;

visibility:visible;

}

/*======================================================
STICKY SHADOW
======================================================*/

.site-header::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:100%;

height:1px;

background:transparent;

transition:.35s;

}

.site-header.scrolled::after{

background:rgba(0,0,0,.06);

}

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

@media(max-width:960px){

.nav-links{

display:none;

}

.nav-button{

display:none;

}

.menu-toggle{

display:block;

}

}

@media(max-width:768px){

.site-header{

padding:18px 0;

}

.mobile-menu{

width:280px;

padding:100px 30px;

}

}

@media(max-width:480px){

.mobile-menu{

width:100%;

}

}

/*======================================================
PART 3
HERO
======================================================*/

.hero{

padding:0;

margin:0;

height:100vh;

min-height:700px;

overflow:hidden;

padding-top:82px;

background:var(--cream);

}

.hero img{

display:block;

width:100%;

height:100%;

object-fit:contain;

}

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

.welcome{

padding:80px 0;

background:var(--surface);

text-align:center;

}

.welcome-text{

font-family:"Cormorant Garamond",serif;

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

font-style:italic;

color:var(--navy);

max-width:900px;

margin:auto;

line-height:1.4;

}

.welcome-text span{

display:block;

margin-top:10px;

color:var(--gold-dark);

font-weight:600;

}

/*======================================================
SCRIPTURE
======================================================*/

.scripture{

background:var(--surface-alt);

text-align:center;

}

.scripture blockquote{

max-width:900px;

margin:0 auto;

}

.scripture cite{

display:block;

margin-top:35px;

font-family:"Cinzel",serif;

font-size:.9rem;

font-style:normal;

font-weight:600;

letter-spacing:3px;

text-transform:uppercase;

color:var(--gold-dark);

}

/*======================================================
INTRODUCTION
======================================================*/

.introduction{

background:var(--surface);

}

.section-header{

text-align:center;

margin-bottom:60px;

}

.eyebrow{

font-size:.85rem;

font-weight:700;

letter-spacing:3px;

text-transform:uppercase;

color:var(--gold-dark);

margin-bottom:15px;

}

.lead{

font-family:"Cormorant Garamond",serif;

font-size:2rem;

font-style:italic;

color:var(--navy);

text-align:center;

margin:40px 0;

}

.button-group{

display:flex;

justify-content:center;

gap:20px;

margin-top:50px;

flex-wrap:wrap;

}

/*======================================================
FEATURED CHAPTER QUESTIONS
======================================================*/

.chapter-question{

max-width:12ch;

margin:4rem auto;

text-align:center;

font-family:"Cormorant Garamond",serif;

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

font-weight:600;

font-style:italic;

line-height:1.1;

color:var(--navy);

text-wrap:balance;

}

.chapter-question::after{

content:"";

display:block;

width:100px;

height:3px;

margin:1.5rem auto 0;

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

border-radius:999px;

}

/*======================================================
JOURNEY
======================================================*/

.journey{

background:var(--surface-alt);

}

.topic-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-top:60px;

}

.topic-grid .card{

text-align:center;

}

.topic-grid h3{

color:var(--gold-dark);

margin-bottom:20px;

}

/*======================================================
BOOK PREVIEW
======================================================*/

.preview{

background:var(--surface);

}

.preview-grid{

display:grid;

grid-template-columns:450px 1fr;

gap:80px;

align-items:center;

}

.preview-image{

display:flex;

justify-content:center;

}

.preview-image img{

width:100%;

max-width:360px;

border-radius:20px;

border:4px solid var(--gold-light);

box-shadow:var(--shadow-lg);

transition:var(--transition);

}

.preview-image img:hover{

transform:translateY(-10px);

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

}

.preview-content{

max-width:650px;

}

/*======================================================
RESOURCES
======================================================*/

.resources{

background:var(--surface-alt);

}

.resource-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:30px;

margin-top:60px;

}

/*======================================================
INVITATION
======================================================*/

.invitation{

background:linear-gradient(
180deg,
var(--cream),
var(--surface));

text-align:center;

}

.invitation-content{

max-width:800px;

margin:auto;

}

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

.site-footer{

background:var(--navy);

color:rgba(255,255,255,.85);

padding:90px 0 30px;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:60px;

margin-bottom:60px;

}

.footer-grid h3,
.footer-grid h4{

color:var(--gold-light);

margin-bottom:20px;

}

.footer-links ul{

display:flex;

flex-direction:column;

gap:14px;

}

.footer-links a:hover{

color:var(--gold-light);

}

.footer-scripture p{

margin-bottom:10px;

}

.footer-bottom{

padding-top:30px;

border-top:1px solid rgba(255,255,255,.15);

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

font-size:.9rem;

}

/*======================================================
FOOTER TEXT FIX
======================================================*/

.site-footer{

color:rgba(255,255,255,.88);

}

.site-footer p{

color:rgba(255,255,255,.82);

}

.site-footer li{

color:rgba(255,255,255,.82);

}

.site-footer a{

color:rgba(255,255,255,.82);

}

.site-footer a:hover{

color:var(--gold-light);

}

.footer-scripture p{

color:rgba(255,255,255,.75);

}

.footer-bottom p{

color:rgba(255,255,255,.65);

margin-bottom:0;

}

.footer-scripture p:first-of-type{

font-family:"Cormorant Garamond",serif;

font-size:1.25rem;

font-style:italic;

line-height:1.7;

color:rgba(255,255,255,.88);

}

.footer-scripture p:last-of-type{

font-family:"Cinzel",serif;

font-size:.9rem;

letter-spacing:2px;

text-transform:uppercase;

color:var(--gold-light);

margin-top:20px;

}

.footer-brand p{

font-size:1.1rem;

line-height:1.8;

max-width:320px;

color:rgba(255,255,255,.82);

}

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

@media(max-width:992px){

.hero{

min-height:550px;

}

.topic-grid{

grid-template-columns:repeat(2,1fr);

}

.preview-grid{

grid-template-columns:1fr;

text-align:center;

}

.resource-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-bottom{

flex-direction:column;

}

}

@media(max-width:768px){

.hero{

height:auto;

min-height:auto;

}

.welcome{

padding:60px 0;

}

section{

padding:80px 0;

}

.topic-grid{

grid-template-columns:1fr;

}

.preview-image img{

max-width:280px;

}

blockquote{

font-size:2rem;

}

}

/*======================================================
CONTENTS PAGE
======================================================*/

.page-header{

padding:180px 0 90px;

background:
linear-gradient(
180deg,
var(--cream),
var(--surface));

text-align:center;

}

.page-header h1{

margin:18px 0;

}

.page-intro{

max-width:760px;

margin:35px auto 0;

font-size:1.15rem;

color:var(--text-light);

line-height:1.9;

}

.contents-page{

background:var(--surface);

}

.contents-grid{

max-width:900px;

margin:80px auto 0;

display:grid;

gap:45px;

}

.chapter-card{

padding:0 0 45px;

border-bottom:1px solid var(--border);

transition:var(--transition);

}

.chapter-card:last-child{

border-bottom:none;

padding-bottom:0;

}

.chapter-card:hover{

padding-left:18px;

}

.chapter-number{

font-family:"Cinzel",serif;

font-size:.85rem;

font-weight:700;

letter-spacing:4px;

text-transform:uppercase;

color:var(--gold-dark);

margin-bottom:18px;

}

.chapter-card h2{

margin-bottom:18px;

font-size:2rem;

color:var(--navy);

transition:var(--transition);

}

.chapter-card:hover h2{

color:var(--gold-dark);

}

.chapter-card p{

max-width:720px;

margin-bottom:24px;

color:var(--text-light);

}

.chapter-card a{

display:inline-flex;

align-items:center;

gap:10px;

font-weight:700;

color:var(--gold-dark);

transition:var(--transition);

}

.chapter-card a::after{

content:"→";

font-size:1.1rem;

transition:.3s;

}

.chapter-card:hover a::after{

transform:translateX(6px);

}

.chapter-card:hover a{

color:var(--navy);

}

.page-header .subtitle{

margin-top:10px;

margin-bottom:20px;

font-size:2rem;

font-style:normal;

color:var(--gold-dark);

}

.page-header .section-divider{

margin:45px auto;

}
/*======================================================
CONTENTS PAGE NAVIGATION
======================================================*/

.page-header ~ * .site-header,
body.contents-page .site-header{

background:rgba(248,245,239,.96);

backdrop-filter:blur(16px);

-webkit-backdrop-filter:blur(16px);

border-bottom:1px solid rgba(0,0,0,.08);

}

body.contents-page .logo,

body.contents-page .nav-links a{

color:var(--navy);

}

body.contents-page .menu-toggle span{

background:var(--navy);

}

/*======================================================
404 PAGE
======================================================*/

.error-page{

min-height:100vh;

padding-top:180px;

padding-bottom:120px;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(
180deg,
var(--cream),
var(--surface));

text-align:center;

}

.error-content{

max-width:850px;

margin:auto;

}

.error-code{

font-family:"Cinzel",serif;

font-size:clamp(5rem,10vw,8rem);

font-weight:700;

letter-spacing:10px;

color:var(--gold);

opacity:.18;

line-height:1;

margin-bottom:20px;

}

.error-content h1{

margin-bottom:25px;

}

.error-content > p:not(.lead){

max-width:700px;

margin:0 auto 30px;

font-size:1.15rem;

line-height:1.9;

color:var(--text-light);

}

.error-scripture{

margin:60px auto;

max-width:760px;

padding:50px;

background:var(--white);

border-radius:24px;

border:1px solid var(--border);

box-shadow:var(--shadow-lg);

}

.error-scripture blockquote{

margin:0;

font-family:"Cormorant Garamond",serif;

font-size:2rem;

font-style:italic;

line-height:1.5;

color:var(--navy);

}

.error-scripture cite{

display:block;

margin-top:25px;

font-family:"Cinzel",serif;

font-size:.9rem;

font-style:normal;

letter-spacing:3px;

text-transform:uppercase;

color:var(--gold-dark);

}

.error-buttons{

display:flex;

justify-content:center;

gap:20px;

margin-top:50px;

flex-wrap:wrap;

}

.error-content{

max-width:900px;

margin:auto;

}

.error-content h1{

margin-bottom:30px;

}

.error-content .lead{

margin-bottom:40px;

}

@media(max-width:768px){

.error-page{

padding-top:140px;

padding-bottom:80px;

}

.error-scripture{

padding:30px;

}

.error-scripture blockquote{

font-size:1.7rem;

}

.error-buttons{

flex-direction:column;

align-items:center;

}

.error-buttons a{

width:100%;

max-width:320px;

}

}

/*======================================================
ANIMATIONS
======================================================*/

.fade-up{

opacity:1;

transform:none;

transition:
opacity .8s ease,
transform .8s ease;

}

.fade-up.visible{

opacity:1;

transform:translateY(0);

}

body.menu-open{

overflow:hidden;

}


/*======================================================
CONTACT PAGE
======================================================*/

.contact-form-section{

padding:6rem 0;

}

.contact-form{

max-width:850px;

margin:3rem auto 0;

background:#ffffff;

padding:2.5rem;

border:1px solid rgba(12,30,58,.08);

border-radius:20px;

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

}

.form-grid{

display:grid;

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

gap:1.5rem;

margin-bottom:1.5rem;

}

.form-group{

display:flex;

flex-direction:column;

margin-bottom:1.5rem;

}

.form-group label{

font-family:"Cinzel",serif;

font-size:.9rem;

font-weight:600;

color:var(--navy);

margin-bottom:.75rem;

letter-spacing:.05em;

}

.form-group input,

.form-group textarea{

width:100%;

padding:1rem 1.2rem;

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

font-size:1rem;

color:var(--text);

background:#ffffff;

border:1px solid rgba(12,30,58,.15);

border-radius:12px;

transition:.3s ease;

resize:vertical;

}

.form-group textarea{

min-height:180px;

}

.form-group input::placeholder,

.form-group textarea::placeholder{

color:#8b8b8b;

}

.form-group input:focus,

.form-group textarea:focus{

outline:none;

border-color:var(--accent);

box-shadow:0 0 0 4px rgba(201,169,97,.18);

}

.contact-form button{

margin-top:1rem;

}

.contact-info{

padding:6rem 0;

}

.contact-info .card{

height:100%;

text-align:center;

padding:2.5rem;

}

.contact-info .card h3{

margin-bottom:1rem;

}

.contact-info .card p{

margin-bottom:0;

}

.contact-invitation{

padding:6rem 0;

}

/*======================================================
CHAPTERS
======================================================*/

.chapter{

background:var(--surface);

}

.chapter-content{

max-width:850px;

margin:0 auto;

}

.chapter-content h2{

text-align:center;

margin-bottom:2rem;

}

.chapter-content > h2:first-child{

margin-bottom:2.5rem;

}

.chapter-content p{

font-size:1.08rem;

line-height:2;

margin-bottom:28px;

}

.chapter-scripture{

margin:60px 0;

padding:45px;

background:var(--surface-alt);

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

border-radius:18px;

text-align:center;

}

.chapter-scripture blockquote{

margin-bottom:20px;

}

.chapter-scripture cite{

display:block;

font-family:"Cinzel",serif;

letter-spacing:2px;

text-transform:uppercase;

color:var(--gold-dark);

font-style:normal;

}

.chapter-closing{

margin-top:80px;

text-align:center;

}

.chapter-navigation{

background:var(--surface-alt);

}

.chapter-nav-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:30px;

}

.chapter-nav{

display:block;

padding:35px;

background:white;

border-radius:20px;

border:1px solid var(--border);

transition:.3s;

}

.chapter-nav:hover{

transform:translateY(-6px);

box-shadow:var(--shadow);

}

.nav-label{

display:block;

font-size:.85rem;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

color:var(--gold-dark);

margin-bottom:12px;

}

@media(max-width:768px){

.chapter-nav-grid{

grid-template-columns:1fr;

}

.chapter-scripture{

padding:30px;

}

}