/*====================================================

WHO GAVE YOU AUTHORITY?
Master Stylesheet
Version 2.0
Author: Bradley Hobbs

PART 1
Foundation

======================================================*/



/*====================================================

GOOGLE FONTS

======================================================*/

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700;800&display=swap');



/*====================================================

RESET

======================================================*/

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

margin:0;

padding:0;

box-sizing:border-box;

}

html{

font-size:16px;

scroll-behavior:smooth;

overflow-x:hidden;

}

body{

overflow-x:hidden;

}



/*====================================================

ROOT VARIABLES

======================================================*/

:root{

--gold:#C79A33;

--gold-light:#E4B24D;

--gold-soft:#E9D4A3;

--gold-dark:#8F6A2B;

--navy:#122032;

--midnight:#0A111D;

--charcoal:#171E2A;

--surface:#1E283A;

--surface-light:#273245;

--cream:#F6F2EA;

--white:#FFFFFF;

--text:#F4F2EC;

--text-light:#D6D2CA;

--text-muted:#A4A9B3;

--border:#2F394B;

--shadow:
0 20px 60px rgba(0,0,0,.22);

--shadow-large:
0 30px 80px rgba(0,0,0,.30);

--radius:28px;

--radius-small:16px;

--radius-large:40px;

--transition:.35s ease;

--max-width:1280px;

--reading-width:900px;

}



/*====================================================

BODY

======================================================*/

body{

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

font-size:18px;

font-weight:400;

line-height:1.9;

letter-spacing:.01em;

color:var(--text);

background:

linear-gradient(

180deg,

#0A111D 0%,

#111827 50%,

#0A111D 100%

);

animation:fadePage .6s ease;

}



/*====================================================

TYPOGRAPHY

======================================================*/

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

font-family:'Cormorant Garamond',serif;

font-weight:700;

color:var(--white);

line-height:1.2;

letter-spacing:.02em;

margin-bottom:25px;

}

h1{

font-size:4rem;

}

h2{

font-size:3rem;

}

h3{

font-size:2.4rem;

}

h4{

font-size:2rem;

}

h5{

font-size:1.5rem;

}

h6{

font-size:1.25rem;

}

p{

margin-bottom:30px;

color:var(--text-light);

}

strong{

font-weight:700;

color:var(--white);

}

em{

color:var(--gold-soft);

}



/*====================================================

LINKS

======================================================*/

a{

color:var(--gold);

text-decoration:none;

transition:var(--transition);

}

a:hover{

color:var(--gold-light);

}



/*====================================================

LISTS

======================================================*/

ul,
ol{

margin-left:30px;

margin-bottom:30px;

}

li{

margin-bottom:12px;

}



/*====================================================

IMAGES

======================================================*/

img{

display:block;

max-width:100%;

height:auto;

border-radius:24px;

transition:.45s ease;

}

img:hover{

transform:scale(1.01);

}



/*====================================================

CONTAINERS

======================================================*/

.container{

width:92%;

max-width:var(--max-width);

margin:0 auto;

}

.reading-width{

max-width:var(--reading-width);

margin:0 auto;

}



/*====================================================

SECTIONS

======================================================*/

section{

position:relative;

padding:90px 0;

}

.section-dark{

background:transparent;

}

.section-light{

background:rgba(255,255,255,.02);

backdrop-filter:blur(14px);

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

border-bottom:1px solid rgba(255,255,255,.05);

}



/*====================================================

DIVIDERS

======================================================*/

.divider{

width:140px;

height:2px;

margin:40px auto;

background:

linear-gradient(

90deg,

transparent,

var(--gold),

transparent

);

}

.divider-left{

margin:40px 0;

}



/*====================================================

TEXT UTILITIES

======================================================*/

.text-center{

text-align:center;

}

.text-left{

text-align:left;

}

.text-right{

text-align:right;

}

.text-white{

color:var(--white);

}

.text-gold{

color:var(--gold);

}

.muted{

color:var(--text-muted);

}



/*====================================================

SPACING

======================================================*/

.mt-1{

margin-top:20px;

}

.mt-2{

margin-top:40px;

}

.mt-3{

margin-top:70px;

}

.mb-1{

margin-bottom:20px;

}

.mb-2{

margin-bottom:40px;

}

.mb-3{

margin-bottom:70px;

}

.pt-0{

padding-top:0;

}

.pt-1{

padding-top:30px;

}

.pt-2{

padding-top:60px;

}

.pt-3{

padding-top:90px;

}

.pb-0{

padding-bottom:0;

}

.pb-1{

padding-bottom:30px;

}

.pb-2{

padding-bottom:60px;

}

.pb-3{

padding-bottom:90px;

}



/*====================================================

DISPLAY UTILITIES

======================================================*/

.d-flex{

display:flex;

}

.flex-column{

flex-direction:column;

}

.align-center{

align-items:center;

}

.justify-center{

justify-content:center;

}

.justify-between{

justify-content:space-between;

}

.gap-20{

gap:20px;

}

.gap-40{

gap:40px;

}

.w-100{

width:100%;

}

.mx-auto{

margin-left:auto;

margin-right:auto;

}

.hidden{

display:none;

}



/*====================================================

BLOCKQUOTE

======================================================*/

blockquote{

margin:40px 0;

padding:25px 35px;

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

border-radius:0 16px 16px 0;

background:rgba(255,255,255,.03);

font-style:italic;

}



/*====================================================

HORIZONTAL RULE

======================================================*/

hr{

border:none;

height:1px;

margin:60px 0;

background:rgba(255,255,255,.08);

}



/*====================================================

SMALL TEXT

======================================================*/

small{

font-size:.9rem;

color:var(--text-muted);

}



/*====================================================

TEXT SELECTION

======================================================*/

::selection{

background:var(--gold);

color:#111;

}



/*====================================================

SCROLLBAR

======================================================*/

::-webkit-scrollbar{

width:12px;

}

::-webkit-scrollbar-track{

background:#08111E;

}

::-webkit-scrollbar-thumb{

background:var(--gold);

border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--gold-light);

}



/*====================================================

ACCESSIBILITY

======================================================*/

a:focus,
button:focus,
input:focus,
textarea:focus{

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

outline-offset:3px;

}



/*====================================================

PAGE FADE

======================================================*/

@keyframes fadePage{

from{

opacity:0;

}

to{

opacity:1;

}

}

/*====================================================

WHO GAVE YOU AUTHORITY?
Master Stylesheet
Version 2.0

PART 2
Header
Navigation
Hero
Buttons
Page Banner

======================================================*/



/*====================================================

HEADER

======================================================*/

.site-header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:9999;

background:rgba(8,15,25,.18);

backdrop-filter:blur(16px);

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

border-bottom:1px solid rgba(255,255,255,.05);

transition:var(--transition);

}

.site-header.scrolled{

background:rgba(10,17,29,.96);

box-shadow:0 14px 40px rgba(0,0,0,.28);

}



/*====================================================

NAVIGATION

======================================================*/

.navbar{

max-width:var(--max-width);

margin:0 auto;

padding:18px 30px;

display:flex;

justify-content:space-between;

align-items:center;

}



/*====================================================

LOGO

======================================================*/

.logo{

display:flex;

flex-direction:column;

text-decoration:none;

}

.logo h2{

margin:0;

font-family:'Cinzel',serif;

font-size:1.9rem;

letter-spacing:.06em;

color:white;

}

.logo span{

margin-top:4px;

font-family:'Cinzel',serif;

font-size:.8rem;

letter-spacing:.18em;

text-transform:uppercase;

color:var(--gold);

}



/*====================================================

MENU

======================================================*/

.nav-links{

display:flex;

align-items:center;

gap:36px;

list-style:none;

margin:0;

padding:0;

}

.nav-links li{

position:relative;

}

.nav-links a{

position:relative;

font-size:.95rem;

font-weight:600;

letter-spacing:.08em;

text-transform:uppercase;

color:var(--cream);

padding-bottom:6px;

transition:var(--transition);

}

.nav-links a:hover{

color:var(--gold);

}

.nav-links a::after{

content:"";

position:absolute;

left:0;

bottom:-4px;

width:0;

height:2px;

background:var(--gold);

transition:var(--transition);

}

.nav-links a:hover::after,

.nav-links .active::after{

width:100%;

}

.nav-links .active{

color:var(--gold);

}



/*====================================================

MOBILE MENU

======================================================*/

.menu-toggle{

display:none;

font-size:2rem;

color:white;

cursor:pointer;

}



/*====================================================

BUTTONS

======================================================*/

.btn,

.open-book-btn{

display:inline-flex;

justify-content:center;

align-items:center;

padding:18px 56px;

border-radius:50px;

font-weight:700;

font-size:1rem;

font-family:'Cinzel',serif;

letter-spacing:.18em;

text-transform:uppercase;

transition:var(--transition);

cursor:pointer;

}

.btn-primary{

background:var(--gold);

color:#111;

}

.btn-primary:hover{

background:var(--gold-light);

transform:translateY(-4px);

box-shadow:0 20px 45px rgba(199,154,51,.30);

}

.btn-outline,

.open-book-btn{

background:transparent;

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

color:var(--gold);

}

.btn-outline:hover,

.open-book-btn:hover{

background:var(--gold);

color:var(--midnight);

transform:translateY(-4px);

box-shadow:0 20px 45px rgba(199,154,51,.30);

}



/*====================================================

HOME HERO

======================================================*/

.hero{

position:relative;

max-width:1200px;

margin:100px auto 40px;

overflow:hidden;

border-radius:28px;

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

}

.hero img{

display:block;

width:100%;

height:auto;

border-radius:0;

}

.hero::before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(

180deg,

rgba(10,17,29,.12),

rgba(10,17,29,.22),

rgba(10,17,29,.38),

rgba(10,17,29,.50)

);

z-index:1;

}

.hero-content{

position:absolute;

left:50%;

bottom:45px;

transform:translateX(-50%);

width:100%;

padding:0 30px;

text-align:center;

z-index:2;

}

.hero-subtitle{

font-family:'Cinzel',serif;

font-size:.85rem;

letter-spacing:.28em;

text-transform:uppercase;

color:var(--gold-soft);

margin-bottom:20px;

}

.hero-title{

font-size:5rem;

color:white;

margin-bottom:24px;

text-shadow:0 8px 24px rgba(0,0,0,.35);

}

.hero-description{

max-width:760px;

margin:0 auto;

font-size:1.2rem;

color:var(--text);

}

.cover-actions{

display:flex;

justify-content:center;

margin:40px auto 20px;

}



/*====================================================

PAGE BANNER

======================================================*/

.page-header{

max-width:1200px;

margin:120px auto 70px;

padding:0 30px;

text-align:center;

}

.page-banner{

margin-bottom:45px;

}

.page-banner img{

display:block;

width:100%;

height:auto;

border-radius:28px;

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

}

.page-header-content{

position:static;

max-width:760px;

margin:50px auto 0;

padding:0 20px;

}

.page-header h1{

font-size:3.5rem;

margin-bottom:18px;

}

.page-header p{

max-width:650px;

margin:0 auto;

font-size:1.15rem;

color:var(--text-light);

}



/*====================================================

BREADCRUMBS

======================================================*/

.breadcrumb{

display:flex;

justify-content:center;

align-items:center;

gap:12px;

margin-top:20px;

font-size:.9rem;

letter-spacing:.08em;

text-transform:uppercase;

}

.breadcrumb a{

color:var(--gold-soft);

}

.breadcrumb span{

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

}



/*====================================================

FEATURE STRIP

======================================================*/

.feature-strip{

padding:28px;

background:rgba(255,255,255,.03);

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

border-bottom:1px solid rgba(255,255,255,.05);

backdrop-filter:blur(12px);

}

.feature-strip .container{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:50px;

}

.feature-item{

text-align:center;

}

.feature-item h4{

margin-bottom:8px;

font-family:'Cinzel',serif;

font-size:1rem;

color:var(--gold);

}

.feature-item p{

margin:0;

font-size:.92rem;

color:var(--text-muted);

}



/*====================================================

SECTION TITLES

======================================================*/

.section-title{

max-width:900px;

margin:0 auto 70px;

text-align:center;

}

.section-title span{

display:block;

margin-bottom:18px;

font-family:'Cinzel',serif;

font-size:.9rem;

letter-spacing:.24em;

text-transform:uppercase;

color:var(--gold);

}

.section-title h2{

margin-bottom:18px;

}

.section-title p{

font-size:1.08rem;

color:var(--text-light);

}



/*====================================================

RESPONSIVE

======================================================*/

@media (max-width:992px){

.menu-toggle{

display:block;

}

.nav-links{

position:fixed;

top:82px;

left:0;

width:100%;

display:none;

flex-direction:column;

gap:24px;

padding:40px;

background:rgba(10,17,29,.98);

backdrop-filter:blur(18px);

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

}

.nav-links.active{

display:flex;

}

.hero{

margin:90px auto 40px;

}

.hero-title{

font-size:3.5rem;

}

.page-header{

margin-top:105px;

}

}

@media (max-width:768px){

.hero{

border-radius:20px;

}

.hero-content{

bottom:30px;

padding:20px;

}

.hero-title{

font-size:2.9rem;

}

.hero-description{

font-size:1.05rem;

}

.open-book-btn{

padding:16px 42px;

font-size:.9rem;

}

.page-header{

padding:0 20px;

}

.page-header h1{

font-size:2.6rem;

}

}

@media (max-width:576px){

.logo h2{

font-size:1.35rem;

}

.logo span{

font-size:.7rem;

}

.hero{

margin-top:80px;

border-radius:16px;

}

.hero-content{

bottom:20px;

}

.hero-title{

font-size:2.2rem;

}

.hero-subtitle{

font-size:.72rem;

letter-spacing:.18em;

}

.page-header h1{

font-size:2rem;

}

.page-header p{

font-size:1rem;

}

.open-book-btn{

width:220px;

padding:15px 20px;

font-size:.82rem;

}

}

/*====================================================

WHO GAVE YOU AUTHORITY?
Master Stylesheet
Version 2.0

PART 3
Home
Contents
Author
Contact
Shared Cards

======================================================*/



/*====================================================

BOOK INTRO

======================================================*/

.book-intro{

padding:100px 0;

}

.book-intro-grid{

display:grid;

grid-template-columns:420px 1fr;

gap:70px;

align-items:center;

}

.book-cover{

overflow:hidden;

border-radius:30px;

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

}

.book-cover img{

width:100%;

display:block;

}

.book-description h2{

margin-bottom:25px;

}

.book-description p{

font-size:1.15rem;

}



/*====================================================

BOOK HIGHLIGHT

======================================================*/

.book-highlight{

margin:120px auto;

padding:80px;

text-align:center;

border-radius:34px;

background:

linear-gradient(

135deg,

rgba(199,154,51,.08),

rgba(255,255,255,.03)

);

border:1px solid rgba(255,255,255,.06);

}

.book-highlight h2{

margin-bottom:25px;

}

.book-highlight p{

max-width:760px;

margin:0 auto;

font-size:1.2rem;

}



/*====================================================

CONTENT GRID

======================================================*/

.content-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(320px,1fr));

gap:35px;

align-items:stretch;

}



/*====================================================

FEATURE GRID

======================================================*/

.feature-grid{

display:grid;

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

gap:35px;

margin-top:70px;

}



/*====================================================

FEATURE CARD

======================================================*/

.feature-card{

padding:45px;

height:100%;

border-radius:28px;

background:rgba(255,255,255,.03);

border:1px solid rgba(255,255,255,.05);

transition:var(--transition);

}

.feature-card:hover{

transform:translateY(-8px);

border-color:var(--gold);

background:rgba(255,255,255,.05);

}

.feature-card h3{

margin-bottom:18px;

}

.feature-card p{

margin-bottom:0;

}



/*====================================================

BOOK CARD

======================================================*/

.book-card{

overflow:hidden;

border-radius:30px;

background:

linear-gradient(

180deg,

rgba(255,255,255,.05),

rgba(255,255,255,.02)

);

border:1px solid rgba(255,255,255,.08);

box-shadow:var(--shadow);

transition:var(--transition);

}

.book-card:hover{

transform:translateY(-10px);

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

}

.book-card img{

border-radius:0;

}

.book-card-content{

padding:45px;

}



/*====================================================

CHAPTER CARD

======================================================*/

.chapter-card{

display:flex;

justify-content:space-between;

align-items:center;

gap:30px;

padding:36px;

margin-bottom:24px;

border-radius:24px;

background:rgba(255,255,255,.03);

border:1px solid rgba(255,255,255,.06);

transition:var(--transition);

}

.chapter-card:hover{

transform:translateX(8px);

border-color:var(--gold);

}

.chapter-card h3{

margin-bottom:8px;

}

.chapter-arrow{

font-size:2rem;

color:var(--gold);

}



/*====================================================

CONTENTS PAGE

======================================================*/

.contents-wrapper{

max-width:1000px;

margin:100px auto;

padding:0 30px;

}

.contents-title{

text-align:center;

margin-bottom:70px;

}

.contents-grid{

display:grid;

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

gap:30px;

}

.contents-item{

display:flex;

justify-content:space-between;

align-items:center;

gap:25px;

padding:28px 32px;

border-radius:22px;

background:rgba(255,255,255,.03);

border:1px solid rgba(255,255,255,.05);

transition:var(--transition);

}

.contents-item:hover{

border-color:var(--gold);

transform:translateX(6px);

}

.contents-item span{

display:block;

margin-bottom:6px;

font-family:'Cinzel',serif;

font-size:.8rem;

letter-spacing:.18em;

text-transform:uppercase;

color:var(--gold);

}

.contents-item h3{

margin-bottom:0;

font-size:1.5rem;

}

.contents-arrow{

font-size:1.8rem;

color:var(--gold);

}



/*====================================================

AUTHOR PAGE

======================================================*/

.author-section{

padding:110px 0;

}

.author-grid{

display:grid;

grid-template-columns:360px 1fr;

gap:70px;

align-items:center;

}

.author-photo{

overflow:hidden;

border-radius:30px;

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

}

.author-photo img{

width:100%;

display:block;

}

.author-content h2{

margin-bottom:25px;

}

.author-content p{

font-size:1.1rem;

}

.author-quote{

margin-top:45px;

padding:35px;

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

border-radius:0 18px 18px 0;

background:rgba(255,255,255,.03);

font-style:italic;

}



/*====================================================

MISSION PANEL

======================================================*/

.mission{

margin:120px auto;

padding:80px;

text-align:center;

border-radius:34px;

background:rgba(255,255,255,.03);

border:1px solid rgba(255,255,255,.05);

}

.mission h2{

margin-bottom:20px;

}

.mission p{

max-width:800px;

margin:0 auto;

}



/*====================================================

CONTACT PAGE

======================================================*/

.contact-section{

max-width:900px;

margin:100px auto;

padding:0 30px;

}

.contact-card{

padding:60px;

border-radius:30px;

background:rgba(255,255,255,.03);

border:1px solid rgba(255,255,255,.05);

}

.contact-card h2{

margin-bottom:20px;

}

.contact-card p{

margin-bottom:40px;

}



/*====================================================

FORMS

======================================================*/

form{

display:grid;

gap:25px;

}

label{

font-weight:700;

color:white;

}

input,
textarea{

width:100%;

padding:18px 20px;

border-radius:16px;

border:1px solid rgba(255,255,255,.08);

background:rgba(255,255,255,.05);

color:white;

font-size:1rem;

font-family:inherit;

transition:var(--transition);

}

input:focus,
textarea:focus{

outline:none;

border-color:var(--gold);

box-shadow:0 0 0 4px rgba(199,154,51,.15);

}

textarea{

resize:vertical;

min-height:180px;

}

button{

border:none;

cursor:pointer;

font-family:inherit;

}



/*====================================================

RESPONSIVE

======================================================*/

@media (max-width:1200px){

.book-intro-grid,

.author-grid{

grid-template-columns:1fr;

text-align:center;

}

.book-cover,

.author-photo{

max-width:420px;

margin:0 auto;

}

.feature-grid{

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

}

.contents-grid{

grid-template-columns:1fr;

}

}

@media (max-width:768px){

.book-highlight,

.mission{

padding:45px 30px;

}

.contact-card{

padding:40px 28px;

}

.feature-grid{

grid-template-columns:1fr;

}

.chapter-card{

flex-direction:column;

text-align:center;

}

.contents-item{

padding:24px;

}

}

@media (max-width:576px){

.book-description p,

.author-content p{

font-size:1.05rem;

}

.feature-card{

padding:30px;

}

.book-card-content{

padding:30px;

}

.contents-item h3{

font-size:1.3rem;

}

.contents-arrow{

font-size:1.5rem;

}

}

/*====================================================

WHO GAVE YOU AUTHORITY?
Master Stylesheet
Version 2.0

PART 4
Front Matter
Copyright
Dedication
Word to the Reader
Preface
Introduction

======================================================*/



/*====================================================

GENERAL FRONT MATTER

======================================================*/

.page{

max-width:960px;

margin:180px auto 120px;

padding:0 30px;

}

.page-header-simple{

padding-top:60px;

margin-bottom:70px;

text-align:center;

}

.front-matter-label{

display:inline-block;

margin-bottom:30px;

font-family:'Cinzel',serif;

font-size:.8rem;

letter-spacing:.35em;

text-transform:uppercase;

color:var(--gold);

opacity:.9;

}

.page-header-simple h1{

margin-bottom:18px;

}

.page-header-simple p{

max-width:700px;

margin:0 auto;

font-size:1.1rem;

color:var(--text-light);

}

.page-content{

max-width:760px;

margin:0 auto;

}

.page-content p{

font-size:1.12rem;

line-height:2;

margin-bottom:32px;

color:var(--text-light);

}



/*====================================================

COPYRIGHT

======================================================*/

.copyright-page .page-content{

text-align:center;

}

.copyright-page strong{

display:block;

margin:35px 0;

font-family:'Cinzel',serif;

font-size:1.2rem;

letter-spacing:.08em;

color:white;

}

.copyright-page .copyright-verse{

margin-top:45px;

font-style:italic;

color:var(--gold-soft);

}



/*====================================================

DEDICATION

======================================================*/

.dedication-page .page-content{

text-align:center;

max-width:760px;

}

.dedication-opening{

margin-bottom:45px;

font-family:'Cinzel',serif;

font-size:2rem;

letter-spacing:.08em;

color:var(--gold);

}

.dedication-signature{

margin-top:70px;

}

.dedication-signature p{

margin-bottom:10px;

font-style:italic;

}

.dedication-signature h3{

margin:0;

font-family:'Cinzel',serif;

font-size:1.45rem;

font-weight:600;

letter-spacing:.08em;

color:var(--gold);

}



/*====================================================

WORD TO THE READER

======================================================*/

.reader-page .page-content{

max-width:780px;

}

.reader-page blockquote{

margin:55px auto;

padding:38px;

text-align:center;

font-family:'Cormorant Garamond',serif;

font-size:2rem;

line-height:1.5;

font-style:italic;

background:rgba(199,154,51,.08);

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

border-radius:18px;

color:var(--gold-soft);

}

.reader-signature{

margin-top:70px;

text-align:center;

}

.reader-signature h3{

margin-top:12px;

font-family:'Cinzel',serif;

letter-spacing:.08em;

color:var(--gold);

}



/*====================================================

PREFACE

======================================================*/

.preface-page .page-content{

max-width:780px;

}

.preface-page .page-content p:first-of-type{

font-size:1.2rem;

color:var(--cream);

}

.preface-signature{

margin-top:70px;

text-align:center;

}

.preface-signature h3{

margin-top:12px;

font-family:'Cinzel',serif;

letter-spacing:.08em;

color:var(--gold);

}



/*====================================================

INTRODUCTION

======================================================*/

.introduction-page .page-content{

max-width:780px;

}

.introduction-page .page-content p:first-of-type{

font-size:1.2rem;

color:var(--cream);

}

.introduction-closing{

margin-top:80px;

text-align:center;

}

.introduction-closing hr{

width:140px;

margin:0 auto 35px;

border:none;

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

}

.introduction-closing p{

margin-bottom:0;

font-style:italic;

color:var(--gold-soft);

}



/*====================================================

ORNAMENT

======================================================*/

.ornament{

display:flex;

align-items:center;

justify-content:center;

gap:18px;

margin:55px auto;

}

.ornament::before,

.ornament::after{

content:"";

width:120px;

height:1px;

background:

linear-gradient(

90deg,

transparent,

var(--gold),

transparent

);

}

.ornament span{

font-size:1.3rem;

color:var(--gold);

}



/*====================================================

SECTION LABEL

======================================================*/

.section-label{

display:inline-block;

padding:10px 22px;

margin-bottom:20px;

border-radius:50px;

background:rgba(199,154,51,.10);

border:1px solid rgba(199,154,51,.20);

font-family:'Cinzel',serif;

font-size:.75rem;

letter-spacing:.18em;

text-transform:uppercase;

color:var(--gold);

}



/*====================================================

SIGNATURE

======================================================*/

.author-signature{

margin-top:70px;

text-align:right;

}

.author-signature h4{

margin-bottom:8px;

font-family:'Cormorant Garamond',serif;

font-size:2rem;

}

.author-signature span{

font-family:'Cinzel',serif;

font-size:.82rem;

letter-spacing:.18em;

text-transform:uppercase;

color:var(--gold);

}



/*====================================================

RESPONSIVE

======================================================*/

@media (max-width:768px){

.page{

margin:150px auto 90px;

padding:0 24px;

}

.page-header-simple{

padding-top:40px;

margin-bottom:55px;

}

.dedication-opening{

font-size:1.6rem;

}

.reader-page blockquote{

padding:28px;

font-size:1.6rem;

}

.author-signature{

text-align:center;

}

}

@media (max-width:576px){

.page{

padding:0 20px;

}

.page-content p{

font-size:1.05rem;

line-height:1.9;

}

.page-header-simple h1{

font-size:2.2rem;

}

.front-matter-label{

font-size:.72rem;

letter-spacing:.25em;

}

.reader-page blockquote{

font-size:1.35rem;

padding:24px;

}

.dedication-opening{

font-size:1.35rem;

}

.ornament::before,

.ornament::after{

width:70px;

}

}

/*====================================================

WHO GAVE YOU AUTHORITY?
Master Stylesheet
Version 2.0

PART 5
Chapter Pages
Reading Experience
Chapter Navigation
Reading Progress

======================================================*/



/*====================================================

CHAPTER PAGE

======================================================*/

.chapter-page .page{

max-width:980px;

margin:170px auto 120px;

padding:0 35px;

}

.reading-width{

max-width:900px;

margin:0 auto;

}



/*====================================================

CHAPTER HEADER

======================================================*/

.chapter-header{

padding-top:60px;

margin-bottom:70px;

text-align:center;

}

.chapter-number{

display:block;

margin-bottom:18px;

font-family:'Cinzel',serif;

font-size:.9rem;

letter-spacing:.32em;

text-transform:uppercase;

color:var(--gold);

}

.chapter-header h1{

font-size:4rem;

line-height:1.1;

margin-bottom:25px;

}



/*====================================================

CHAPTER CONTENT

======================================================*/

.chapter-content{

max-width:900px;

margin:0 auto;

}

.chapter-content p{

font-size:1.18rem;

line-height:2.05;

margin-bottom:34px;

color:var(--text-light);

}

.chapter-content p:first-of-type{

font-size:1.28rem;

color:var(--cream);

}



/*====================================================

DROP CAP

======================================================*/

.chapter-content.drop-cap p:first-of-type::first-letter{

float:left;

font-family:'Cinzel',serif;

font-size:5rem;

line-height:.8;

padding-right:14px;

padding-top:10px;

color:var(--gold);

}



/*====================================================

HEADINGS

======================================================*/

.chapter-content h2{

margin-top:80px;

margin-bottom:28px;

font-size:2.7rem;

}

.chapter-content h3{

margin-top:60px;

margin-bottom:22px;

font-size:2rem;

}

.chapter-content h4{

margin-top:45px;

margin-bottom:18px;

font-size:1.5rem;

}



/*====================================================

LISTS

======================================================*/

.chapter-content ul,

.chapter-content ol{

margin:35px 0 35px 35px;

}

.chapter-content li{

margin-bottom:18px;

line-height:1.9;

color:var(--text-light);

}

.chapter-content ol li::marker{

color:var(--gold);

font-weight:700;

}



/*====================================================

SCRIPTURE PANEL

======================================================*/

.scripture{

margin:60px 0;

padding:40px;

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

border-radius:0 24px 24px 0;

background:

linear-gradient(

135deg,

rgba(199,154,51,.08),

rgba(255,255,255,.03)

);

position:relative;

}

.scripture::before{

content:"✝";

position:absolute;

top:18px;

right:24px;

font-size:2rem;

color:rgba(199,154,51,.20);

}

.scripture p{

margin-bottom:20px;

font-style:italic;

font-size:1.2rem;

color:var(--cream);

}

.scripture cite{

display:block;

font-style:normal;

font-family:'Cinzel',serif;

font-size:.85rem;

letter-spacing:.18em;

text-transform:uppercase;

color:var(--gold);

}



/*====================================================

AUTHOR NOTE

======================================================*/

.author-note{

margin:60px 0;

padding:40px;

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

border-radius:0 20px 20px 0;

background:rgba(255,255,255,.03);

}

.author-note h4{

margin-bottom:16px;

font-family:'Cinzel',serif;

color:var(--gold);

}

.author-note p:last-child{

margin-bottom:0;

}



/*====================================================

INFORMATION BOX

======================================================*/

.info-box{

margin:60px 0;

padding:45px;

border-radius:28px;

background:rgba(255,255,255,.03);

border:1px solid rgba(255,255,255,.05);

}

.info-box p:last-child{

margin-bottom:0;

}



/*====================================================

READING PANEL

======================================================*/

.reading-panel{

margin:70px 0;

padding:55px;

border-radius:30px;

background:

linear-gradient(

180deg,

rgba(255,255,255,.04),

rgba(255,255,255,.02)

);

border:1px solid rgba(255,255,255,.05);

}



/*====================================================

PULL QUOTE

======================================================*/

.pull-quote{

max-width:760px;

margin:90px auto;

padding:20px;

text-align:center;

}

.pull-quote::before{

content:"“";

display:block;

font-size:6rem;

line-height:.6;

color:rgba(199,154,51,.20);

}

.pull-quote::after{

content:"”";

display:block;

font-size:6rem;

line-height:.4;

color:rgba(199,154,51,.20);

}

.pull-quote p{

font-family:'Cormorant Garamond',serif;

font-size:2.5rem;

line-height:1.45;

color:white;

}



/*====================================================

CHAPTER IMAGE

======================================================*/

.chapter-image{

margin:70px 0;

overflow:hidden;

border-radius:30px;

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

}

.chapter-image img{

width:100%;

display:block;

}



/*====================================================

TABLES

======================================================*/

.table-wrapper{

overflow-x:auto;

margin:60px 0;

}

table{

width:100%;

border-collapse:collapse;

background:rgba(255,255,255,.03);

border-radius:20px;

overflow:hidden;

}

th{

padding:18px;

background:rgba(199,154,51,.14);

color:white;

text-align:left;

}

td{

padding:18px;

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

color:var(--text-light);

}



/*====================================================

END OF CHAPTER

======================================================*/

.chapter-end{

margin:120px auto;

text-align:center;

}

.chapter-end h3{

margin-bottom:20px;

font-family:'Cinzel',serif;

font-size:1rem;

letter-spacing:.20em;

text-transform:uppercase;

color:var(--gold);

}



/*====================================================

CHAPTER NAVIGATION

======================================================*/

.chapter-navigation-section{

margin-top:110px;

padding-top:80px;

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

}

.chapter-navigation{

display:grid;

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

gap:20px;

}

.chapter-button{

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

min-height:125px;

padding:28px;

border-radius:24px;

background:rgba(255,255,255,.03);

border:1px solid rgba(255,255,255,.06);

transition:var(--transition);

}

.chapter-button:hover{

transform:translateY(-6px);

border-color:var(--gold);

background:rgba(199,154,51,.08);

}

.chapter-button span{

margin-bottom:10px;

font-family:'Cinzel',serif;

font-size:.78rem;

letter-spacing:.15em;

text-transform:uppercase;

color:var(--gold);

}

.chapter-button strong{

font-size:1rem;

font-weight:600;

line-height:1.45;

color:white;

}

.contents-chapter{

background:

linear-gradient(

135deg,

rgba(199,154,51,.12),

rgba(199,154,51,.04)

);

border-color:rgba(199,154,51,.25);

}



/*====================================================

READING PROGRESS

======================================================*/

.read-progress{

position:fixed;

top:0;

left:0;

width:0;

height:4px;

background:

linear-gradient(

90deg,

var(--gold),

var(--gold-light)

);

z-index:10000;

}



/*====================================================

SCROLL TO TOP

======================================================*/

.scroll-top{

position:fixed;

right:28px;

bottom:28px;

width:58px;

height:58px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:var(--gold);

color:#111;

font-size:1.5rem;

box-shadow:var(--shadow);

transition:var(--transition);

z-index:999;

}

.scroll-top:hover{

background:var(--gold-light);

transform:translateY(-5px);

}



/*====================================================

RESPONSIVE

======================================================*/

@media (max-width:992px){

.chapter-header h1{

font-size:3.2rem;

}

.chapter-navigation{

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

}

}

@media (max-width:768px){

.chapter-page .page{

margin:150px auto 90px;

padding:0 22px;

}

.chapter-header{

padding-top:40px;

margin-bottom:55px;

}

.chapter-header h1{

font-size:2.6rem;

}

.chapter-content p{

font-size:1.08rem;

line-height:1.95;

}

.scripture,

.info-box,

.author-note,

.reading-panel{

padding:30px;

}

.pull-quote p{

font-size:2rem;

}

}

@media (max-width:576px){

.chapter-page .page{

padding:0 18px;

}

.chapter-header h1{

font-size:2.1rem;

}

.chapter-content p:first-of-type{

font-size:1.15rem;

}

.chapter-navigation{

grid-template-columns:1fr;

gap:18px;

}

.chapter-button{

min-height:auto;

padding:22px;

}

.chapter-button span{

font-size:.72rem;

}

.chapter-button strong{

font-size:.98rem;

}

.scroll-top{

width:50px;

height:50px;

right:18px;

bottom:18px;

font-size:1.25rem;

}

}

/*====================================================

WHO GAVE YOU AUTHORITY?
Master Stylesheet
Version 2.0

PART 6
Footer
Animations
Utilities
Accessibility
Print
Responsive Helpers

======================================================*/



/*====================================================

FOOTER

======================================================*/

footer{

margin-top:80px;

padding:35px 20px;

background:#070D16;

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

text-align:center;

}

.footer-container{

max-width:1280px;

margin:0 auto;

padding:30px;

}

.footer-top{

display:grid;

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

gap:60px;

margin-bottom:50px;

text-align:left;

}

.footer-brand h2{

font-family:'Cinzel',serif;

margin-bottom:16px;

}

.footer-brand p{

margin-bottom:0;

}

.footer-links h3{

font-size:1.2rem;

margin-bottom:18px;

}

.footer-links ul{

list-style:none;

margin:0;

padding:0;

}

.footer-links li{

margin-bottom:12px;

}

.footer-links a{

color:var(--text-light);

}

.footer-links a:hover{

color:var(--gold);

}

.footer-bottom{

padding-top:35px;

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

text-align:center;

}

.footer-bottom p{

margin-bottom:10px;

font-size:.95rem;

color:var(--text-muted);

}

.footer-bottom a{

color:var(--gold);

display:inline-block;

margin:6px 8px;

}

.footer-bottom a:hover{

color:var(--gold-light);

}



/*====================================================

ANIMATIONS

======================================================*/

.fade-up{

opacity:0;

transform:translateY(40px);

transition:.8s ease;

}

.fade-up.show{

opacity:1;

transform:none;

}

.reveal{

opacity:0;

transform:translateY(40px);

transition:.8s ease;

}

.reveal.active{

opacity:1;

transform:none;

}

.slide-left{

opacity:0;

transform:translateX(-40px);

transition:.8s ease;

}

.slide-left.active{

opacity:1;

transform:none;

}

.slide-right{

opacity:0;

transform:translateX(40px);

transition:.8s ease;

}

.slide-right.active{

opacity:1;

transform:none;

}



/*====================================================

HOVER HELPERS

======================================================*/

.hover-lift{

transition:var(--transition);

}

.hover-lift:hover{

transform:translateY(-8px);

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

}

.rounded{

border-radius:28px;

}

.shadow{

box-shadow:var(--shadow);

}

.shadow-large{

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

}



/*====================================================

BACKGROUND HELPERS

======================================================*/

.bg-dark{

background:var(--midnight);

}

.bg-surface{

background:var(--surface);

}

.texture-overlay{

position:relative;

overflow:hidden;

}

.texture-overlay::before{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(

circle at top,

rgba(199,154,51,.05),

transparent 60%

),

radial-gradient(

circle at bottom,

rgba(255,255,255,.03),

transparent 70%

);

pointer-events:none;

}

.glow-top{

position:relative;

}

.glow-top::after{

content:"";

position:absolute;

top:-240px;

left:50%;

transform:translateX(-50%);

width:700px;

height:700px;

background:

radial-gradient(

circle,

rgba(199,154,51,.08),

transparent 70%

);

pointer-events:none;

}



/*====================================================

UTILITY CLASSES

======================================================*/

.center{

text-align:center;

}

.text-white{

color:white;

}

.text-gold{

color:var(--gold);

}

.hidden{

display:none;

}

.overflow-hidden{

overflow:hidden;

}

.w-auto{

width:auto;

}

.h-auto{

height:auto;

}



/*====================================================

ACCESSIBILITY

======================================================*/

a:focus,

button:focus,

input:focus,

textarea:focus,

select:focus{

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

outline-offset:3px;

}

button{

border:none;

background:none;

cursor:pointer;

font-family:inherit;

}

input,

textarea,

button{

font:inherit;

}



/*====================================================

PRINT

======================================================*/

@media print{

body{

background:white !important;

color:black !important;

font-size:12pt;

}

.site-header,

.hero,

.page-header,

.read-progress,

.scroll-top,

.chapter-navigation-section,

.menu-toggle,

footer{

display:none !important;

}

.page,

.chapter-page .page,

.container,

.reading-width{

max-width:100%;

width:100%;

margin:0;

padding:0;

background:none;

border:none;

box-shadow:none;

}

h1,

h2,

h3,

h4,

h5,

h6,

strong{

color:black !important;

}

p,

li{

color:#333 !important;

}

a{

color:black;

text-decoration:none;

}

}



/*====================================================

REDUCED MOTION

======================================================*/

@media (prefers-reduced-motion:reduce){

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}



/*====================================================

LARGE SCREENS

======================================================*/

@media (min-width:1600px){

.container{

max-width:1400px;

}

.hero{

max-width:1320px;

}

.page-header{

max-width:1320px;

}

}



/*====================================================

TABLETS

======================================================*/

@media (max-width:992px){

.footer-top{

grid-template-columns:1fr;

gap:40px;

text-align:center;

}

.footer-links{

text-align:center;

}

}



/*====================================================

MOBILE

======================================================*/

@media (max-width:768px){

footer{

margin-top:60px;

}

.footer-container{

padding:25px;

}

.footer-bottom{

padding-top:25px;

}

.footer-bottom p{

font-size:.9rem;

}

}



/*====================================================

SMALL MOBILE

======================================================*/

@media (max-width:576px){

.footer-container{

padding:20px;

}

.footer-brand h2{

font-size:1.6rem;

}

.footer-links h3{

font-size:1.05rem;

}

.footer-bottom{

font-size:.85rem;

}

}



/*====================================================

END OF MASTER STYLESHEET

WHO GAVE YOU AUTHORITY

Version 2.0

Designed for:
Bradley Hobbs

Clean Architecture
Responsive Design
Accessible
Optimized for Reading
Desktop
Tablet
Mobile
Print Friendly

======================================================*/
.visually-hidden{

position:absolute;

width:1px;

height:1px;

padding:0;

margin:-1px;

overflow:hidden;

clip:rect(0,0,0,0);

white-space:nowrap;

border:0;

}

/*======================================
LANDING INTRO
======================================*/

.landing-intro{

max-width:900px;

margin:55px auto 120px;

padding:0 30px;

text-align:center;

}

.landing-intro .section-label{

display:inline-block;

margin-bottom:38px;

}

.landing-intro p{

max-width:820px;

margin:0 auto;

font-size:1.18rem;

line-height:2;

}

/*======================================
LANDING PAGE BUTTONS
======================================*/

.hero-buttons{

display:flex;

justify-content:center;

align-items:center;

gap:28px;

margin-top:60px;

margin-bottom:20px;

flex-wrap:wrap;

}

/*======================================
HOME PAGE
======================================*/

.home-page .page-header{

margin-bottom:35px;

}

.home-page .landing-intro{

margin-top:35px;

}