/* ======================================
   FARRELL J. CHILES WEBSITE
   STYLE.CSS
   PART 1
====================================== */

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

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Source Sans 3',sans-serif;
    background:#F7F4EE;
    color:#2A2A2A;
    line-height:1.7;
    overflow-x:hidden;
}

img{
    display:block;
    max-width:100%;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

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

:root{

    --navy:#0F2D52;
    --gold:#C8A34D;
    --bronze:#A36D2F;
    --ivory:#F7F4EE;
    --white:#FFFFFF;
    --charcoal:#2A2A2A;

    --radius:14px;

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

    --transition:.35s ease;

}

/* ======================================
   CONTAINER
====================================== */

.container{

    width:min(92%,1200px);
    margin:auto;

}

/* ======================================
   SECTION SPACING
====================================== */

section{

    padding:120px 0;

}

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

.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:999;

    background:rgba(15,45,82,.96);

    backdrop-filter:blur(12px);

    transition:.35s ease;

}

.header.scrolled{

    background:rgba(15,45,82,.98);

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

}

.header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:90px;

}

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

.logo{

    display:flex;

    align-items:center;

}

.logo img{

    width:auto;

    height:82px;

    transition:.35s ease;

}

.logo:hover img{

    transform:scale(1.03);

}

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

.navbar{

    display:flex;

    align-items:center;

}

.nav-links{

    display:flex;

    align-items:center;

    gap:25px;

}

.nav-links li{

    position:relative;

}

.nav-links a{

    color:white;

    font-weight:600;

    transition:.3s;

    font-size:.98rem;

}

.nav-links a:hover{

    color:var(--gold);

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--gold);

    transition:.3s;

}

.nav-links a:hover::after{

    width:100%;

}

.nav-links a.active{

    color:var(--gold);

}

.nav-links a.active::after{

    width:100%;

}

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

.mobile-toggle{

    display:none;

    color:white;

    font-size:2rem;

    cursor:pointer;

}

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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    padding-top:100px;

    background:
    url("../img/author/hero-bg.jpg")
    center center/cover no-repeat;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(15,45,82,.92),
        rgba(15,45,82,.60)
    );

}

.hero-content{

    position:relative;

    z-index:2;

}

.hero-text{

    max-width:720px;

    color:white;

}

.hero-tag{

    display:inline-block;

    margin-bottom:20px;

    color:var(--gold);

    letter-spacing:2px;

    font-weight:700;

    text-transform:uppercase;

}

.hero h1{

    font-family:'Playfair Display',serif;

    font-size:4.2rem;

    line-height:1.12;

    margin-bottom:28px;

}

.hero p{

    font-size:1.18rem;

    color:#EFEFEF;

    margin-bottom:40px;

    max-width:650px;

}

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

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 32px;

    border-radius:50px;

    font-weight:700;

    transition:var(--transition);

}

.btn-primary{

    background:var(--gold);

    color:var(--navy);

}

.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 25px rgba(0,0,0,.18);

}

.btn-secondary{

    border:2px solid white;

    color:white;

}

.btn-secondary:hover{

    background:white;

    color:var(--navy);

}

/* ======================================
   SECTION HEADING
====================================== */

.section-heading{

    text-align:center;

    margin-bottom:70px;

}

.section-heading span{

    color:var(--gold);

    text-transform:uppercase;

    font-weight:700;

    letter-spacing:2px;

}

.section-heading h2{

    font-family:'Playfair Display',serif;

    font-size:3rem;

    color:var(--navy);

    margin-top:10px;

}

.section-heading p{

    max-width:700px;

    margin:18px auto 0;

}

/* ======================================
   TABLET
====================================== */

@media(max-width:992px){

.hero h1{

font-size:3.2rem;

}

.nav-links{

gap:18px;

}

}

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

@media(max-width:768px){

.mobile-toggle{

display:block;

}

.navbar{

position:absolute;

top:90px;

left:0;

width:100%;

background:var(--navy);

max-height:0;

overflow:hidden;

transition:max-height .4s ease;

}

.navbar.active{

max-height:700px;

}

.nav-links{

flex-direction:column;

align-items:flex-start;

padding:25px;

gap:20px;

}

.hero{

text-align:center;

}

.hero-text{

margin:auto;

}

.hero h1{

font-size:2.5rem;

}

.hero p{

font-size:1rem;

}

.hero-buttons{

justify-content:center;

}

.section-heading h2{

font-size:2.2rem;

}

}
/* ===================================
   HERO
=================================== */

.hero{

    position:relative;

    min-height:100vh;

    display:flex;
    align-items:center;

    background:
    url('../img/author/hero-bg.jpg')
    center center/cover no-repeat;
}

.hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    90deg,
    rgba(15,45,82,.95),
    rgba(15,45,82,.70)
    );
}

.hero-content{

    position:relative;

    z-index:2;
}

.hero-text{

    max-width:720px;

    color:white;
}

.hero-tag{

    display:inline-block;

    margin-bottom:20px;

    color:var(--gold);

    letter-spacing:2px;

    font-weight:700;

    text-transform:uppercase;
}

.hero h1{

    font-family:'Playfair Display',serif;

    font-size:4rem;

    line-height:1.15;

    margin-bottom:25px;
}

.hero p{

    font-size:1.25rem;

    margin-bottom:35px;

    color:#f0f0f0;
}

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

.hero-buttons{

    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.btn{

    display:inline-flex;

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

    padding:15px 30px;

    border-radius:50px;

    font-weight:700;

    transition:.35s;
}

.btn-primary{

    background:var(--gold);

    color:var(--navy);
}

.btn-primary:hover{

    transform:translateY(-3px);

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

.btn-secondary{

    border:2px solid white;

    color:white;
}

.btn-secondary:hover{

    background:white;

    color:var(--navy);
}

/* ===================================
   SECTION HEADING
=================================== */

.section-heading{

    text-align:center;

    margin-bottom:70px;
}

.section-heading span{

    color:var(--gold);

    text-transform:uppercase;

    font-weight:700;

    letter-spacing:2px;
}

.section-heading h2{

    font-family:'Playfair Display',serif;

    font-size:3rem;

    margin-top:10px;

    color:var(--navy);
}

.section-heading p{

    max-width:700px;

    margin:20px auto 0;
}


/* ======================================
   PART 2
   FEATURED BOOKS
====================================== */

.featured-books{
    background:var(--ivory);
}

.book-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:40px;
}

.book-card{
    background:#fff;
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.book-card:hover{
    transform:translateY(-10px);
}

.book-cover{
    overflow:hidden;
}

.book-cover img{
    width:100%;
    height:450px;
    object-fit:cover;
    transition:.5s ease;
}

.book-card:hover .book-cover img{
    transform:scale(1.08);
}

.book-content{
    padding:30px;
}

.book-content h3{
    font-family:'Playfair Display',serif;
    color:var(--navy);
    margin-bottom:8px;
    font-size:1.5rem;
}

.subtitle{
    display:block;
    margin-bottom:18px;
    color:var(--gold);
    font-weight:700;
}

.book-content p{
    margin-bottom:25px;
}

.book-links{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.book-links a{
    background:var(--navy);
    color:#fff;
    padding:10px 18px;
    border-radius:30px;
    transition:var(--transition);
    font-size:.9rem;
}

.book-links a:hover{
    background:var(--gold);
    color:var(--navy);
}

/* ======================================
   LEGACY TIMELINE
====================================== */

.legacy{
    background:#fff;
}

.timeline{
    max-width:950px;
    margin:auto;
    position:relative;
}

.timeline::before{
    content:"";
    position:absolute;
    left:58px;
    top:0;
    bottom:0;
    width:3px;
    background:var(--gold);
}

.timeline-item{
    display:flex;
    gap:40px;
    margin-bottom:55px;
    position:relative;
}

.year{
    min-width:120px;
    font-size:1.4rem;
    font-weight:700;
    color:var(--gold);
    position:relative;
}

.year::after{
    content:"";
    position:absolute;
    right:-18px;
    top:10px;
    width:14px;
    height:14px;
    border-radius:50%;
    background:var(--gold);
    border:4px solid #fff;
    box-shadow:0 0 0 3px var(--gold);
}

.content{
    flex:1;
    background:#fff;
    padding:30px;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

.content h3{
    color:var(--navy);
    margin-bottom:12px;
    font-family:'Playfair Display',serif;
}

.content p{
    margin:0;
}

/* ======================================
   LEADERSHIP
====================================== */

.leadership{
    background:var(--ivory);
}

.leadership-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
}

.leader-card{
    background:#fff;
    padding:35px;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.leader-card:hover{
    transform:translateY(-8px);
}

.leader-card h3{
    color:var(--navy);
    margin-bottom:15px;
    font-family:'Playfair Display',serif;
}

/* ======================================
   STATS
====================================== */

.stats{
    background:var(--navy);
    color:#fff;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:35px;
    text-align:center;
}

.stat-box{
    padding:40px 25px;
    background:rgba(255,255,255,.05);
    border-radius:16px;
    transition:var(--transition);
}

.stat-box:hover{
    transform:translateY(-6px);
}

.stat-box h2{
    color:var(--gold);
    font-size:3rem;
    margin-bottom:10px;
}

.stat-box p{
    font-size:1.05rem;
}

/* ======================================
   REVEAL ANIMATION
====================================== */

.reveal{
    opacity:0;
    transform:translateY(50px);
    transition:all .8s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}

/* ======================================
   TABLET
====================================== */

@media(max-width:992px){

    .book-grid{
        gap:30px;
    }

    .timeline-item{
        gap:25px;
    }

}

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

@media(max-width:768px){

    .book-grid{
        grid-template-columns:1fr;
    }

    .book-cover img{
        height:380px;
    }

    .timeline::before{
        left:20px;
    }

    .timeline-item{
        flex-direction:column;
        padding-left:35px;
        gap:15px;
    }

    .year{
        min-width:auto;
    }

    .year::after{
        left:-22px;
        right:auto;
    }

    .leader-card{
        padding:28px;
    }

    .stats-grid{
        grid-template-columns:1fr;
    }

    .stat-box{
        padding:30px;
    }

}



/* ===================================
   PART 3
   FOOTER PREP
=================================== */
/* ======================================
   QUOTE SECTION
====================================== */

.quote-section{
    background:#FDFBF6;
    padding:120px 0;
}

.quote-section blockquote{

    max-width:900px;
    margin:auto;

    text-align:center;

    font-family:'Playfair Display',serif;

    font-size:2.2rem;

    line-height:1.6;

    color:var(--navy);

    position:relative;

    padding:0 40px;

}

.quote-section blockquote::before{

    content:"“";

    position:absolute;

    left:0;
    top:-20px;

    font-size:5rem;

    color:var(--gold);

}

.quote-section blockquote::after{

    content:"”";

    position:absolute;

    right:0;
    bottom:-50px;

    font-size:5rem;

    color:var(--gold);

}

/* ======================================
   COUNTDOWN
====================================== */

.countdown-section{

    background:var(--ivory);

}

.countdown-grid{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:30px;

    flex-wrap:wrap;

}

.time-box{

    width:150px;

    height:150px;

    background:#fff;

    border-radius:20px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.time-box:hover{

    transform:translateY(-8px);

}

.time-box span{

    font-size:3rem;

    font-weight:700;

    color:var(--navy);

}

.time-box small{

    margin-top:10px;

    color:#666;

    text-transform:uppercase;

    letter-spacing:1px;

}

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

footer{

    background:var(--navy);

    color:#fff;

    padding:80px 0 40px;

}

.footer-content{

    text-align:center;

}

.footer-content img{

    width:130px;

    margin:0 auto 25px;

}

.footer-content p{

    max-width:700px;

    margin:0 auto 30px;

    opacity:.9;

}

.footer-links{

    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

    margin-bottom:30px;

}

.footer-links a{

    color:#fff;

    font-weight:600;

    transition:var(--transition);

}

.footer-links a:hover{

    color:var(--gold);

}

.copyright{

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

    padding-top:25px;

    font-size:.95rem;

    opacity:.75;

}

/* ======================================
   GLOBAL TRANSITIONS
====================================== */

a,
button,
.book-card,
.leader-card,
.time-box{

    transition:var(--transition);

}

/* ======================================
   SCROLLBAR
====================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#ececec;

}

::-webkit-scrollbar-thumb{

    background:var(--gold);

    border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--bronze);

}

/* ======================================
   TABLET
====================================== */

@media(max-width:992px){

    section{

        padding:90px 0;

    }

    .quote-section blockquote{

        font-size:1.8rem;

    }

    .time-box{

        width:130px;

        height:130px;

    }

}

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

@media(max-width:768px){

    section{

        padding:70px 0;

    }

    .header .container{

        min-height:80px;

    }

    .logo img{

        height:65px;

    }

    .quote-section{

        padding:80px 0;

    }

    .quote-section blockquote{

        font-size:1.45rem;

        padding:0 15px;

    }

    .quote-section blockquote::before,

    .quote-section blockquote::after{

        display:none;

    }

    .countdown-grid{

        gap:15px;

    }

    .time-box{

        width:120px;

        height:120px;

    }

    .time-box span{

        font-size:2.2rem;

    }

    .footer-links{

        flex-direction:column;

        gap:15px;

    }

}

/* ======================================
   SMALL MOBILE
====================================== */

@media(max-width:480px){

    .hero h1{

        font-size:2rem;

    }

    .hero-tag{

        font-size:.8rem;

    }

    .btn{

        width:100%;

    }

    .book-content{

        padding:22px;

    }

    .section-heading h2{

        font-size:1.8rem;

    }

    .time-box{

        width:95px;

        height:95px;

    }

    .time-box span{

        font-size:1.8rem;

    }

}

.back-to-top{

position:fixed;

right:25px;

bottom:25px;

width:50px;

height:50px;

display:flex;

align-items:center;

justify-content:center;

background:var(--gold);

color:#fff;

border-radius:50%;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.3s;

z-index:999;

}

.back-to-top.show{

opacity:1;

visibility:visible;

}

.back-to-top:hover{

transform:translateY(-4px);

}

.page-loader{

position:fixed;

inset:0;

background:var(--ivory);

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

transition:.5s;

}

.page-loader.hide{

opacity:0;

visibility:hidden;

}