/* ==========================================
   ECHOES OF PHILIPPINE LITERATURE
   COLONIAL PAGE
   PART 1
========================================== */

:root{

--bg:#0b0d12;
--surface:#141922;
--surface2:#1b2230;

--gold:#d4af37;
--gold-light:#f3d46b;

--text:#edf2f7;
--muted:#aeb7c5;

--border:rgba(255,255,255,.08);

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

--radius:20px;

}

*{

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

}

html{

scroll-behavior:smooth;

}

body{

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

background:
radial-gradient(circle at top,
#232f4b 0%,
#11161f 45%,
#090b10 100%);

color:var(--text);

line-height:1.8;

overflow-x:hidden;

}

/* =============================
BACKGROUND ORBS
============================= */

.bg-orbs{

position:fixed;
inset:0;

overflow:hidden;

pointer-events:none;

z-index:-1;

}

.bg-orbs span{

position:absolute;

width:280px;
height:280px;

border-radius:50%;

filter:blur(90px);

background:
rgba(212,175,55,.08);

animation:float 18s linear infinite;

}

.bg-orbs span:nth-child(1){

left:6%;
top:10%;

}

.bg-orbs span:nth-child(2){

right:8%;
top:45%;

animation-duration:22s;

}

.bg-orbs span:nth-child(3){

left:40%;
bottom:-5%;

animation-duration:28s;

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-70px);

}

100%{

transform:translateY(0);

}

}

/* =============================
PROGRESS BAR
============================= */

#progress-bar{

position:fixed;

top:0;
left:0;

height:4px;
width:0;

background:
linear-gradient(90deg,
#d4af37,
#f2d574);

z-index:9999;

}

/* =============================
SPOTLIGHT
============================= */

#spotlight{

position:fixed;

width:320px;
height:320px;

border-radius:50%;

pointer-events:none;

background:
radial-gradient(circle,
rgba(212,175,55,.14),
transparent 70%);

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

z-index:0;

}

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

header{

position:sticky;

top:0;

z-index:999;

backdrop-filter:blur(16px);

background:
rgba(20,25,34,.65);

border-bottom:

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

}

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

.navbar{

width:min(1200px,92%);

margin:auto;

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 0;

}

.logo{

display:flex;

align-items:center;

gap:12px;

font-family:'Cinzel',serif;

font-size:1.3rem;

font-weight:700;

color:var(--gold);

}

.logo i{

font-size:1.4rem;

}

.nav-links{

display:flex;

list-style:none;

gap:30px;

}

.nav-links a{

text-decoration:none;

color:white;

font-weight:500;

transition:.35s;

position:relative;

}

.nav-links a::after{

content:"";

position:absolute;

left:0;
bottom:-6px;

width:0;

height:2px;

background:var(--gold);

transition:.35s;

}

.nav-links a:hover{

color:var(--gold-light);

}

.nav-links a:hover::after,

.nav-links a.active::after{

width:100%;

}

.nav-links a.active{

color:var(--gold);

}

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

.hero{

min-height:85vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

padding:120px 20px;

position:relative;

}

.hero-overlay{

position:absolute;

inset:0;

background:

linear-gradient(

180deg,

rgba(0,0,0,.35),

rgba(0,0,0,.65)

);

}

.hero-content{

position:relative;

z-index:2;

max-width:850px;

}

.subtitle{

color:var(--gold-light);

letter-spacing:4px;

text-transform:uppercase;

margin-bottom:20px;

font-size:.95rem;

}

.hero h1{

font-family:'Cormorant Garamond',serif;

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

line-height:1.1;

margin-bottom:25px;

color:var(--gold);

text-shadow:

0 0 25px rgba(212,175,55,.25);

}

.hero p{

color:var(--muted);

font-size:1.1rem;

max-width:760px;

margin:auto;

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

header{
    position:sticky;
    top:0;
    z-index:999;
    backdrop-filter:blur(14px);
    background:rgba(20,25,34,.75);
    border-bottom:1px solid rgba(255,255,255,.08);
}

.navbar{
    width:min(1200px,92%);
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 0;
}

.logo{
    display:flex;
    align-items:center;
    gap:12px;
    font-family:'Cinzel',serif;
    font-size:1.3rem;
    color:var(--gold);
}

.logo i{
    font-size:1.5rem;
}

.nav-links{
    display:flex;
    list-style:none;
    gap:28px;
}

.nav-links a{
    text-decoration:none;
    color:var(--text);
    transition:.3s;
    font-weight:500;
}

.nav-links a:hover,
.nav-links a.active{
    color:var(--gold-light);
}

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

.hero{
    text-align:center;
    padding:90px 20px 70px;
}

.hero h1{
    font-family:'Playfair Display',serif;
    font-size:clamp(2.8rem,7vw,4.4rem);
    color:var(--gold);
    margin-bottom:15px;
}

.hero p{
    max-width:780px;
    margin:auto;
    color:var(--muted);
    font-size:1.08rem;
}

.hero-buttons{
    margin-top:40px;
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.primary-btn,
.secondary-btn{

    padding:15px 34px;

    border-radius:999px;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.primary-btn{

    background:linear-gradient(
    135deg,
    #d4af37,
    #f2d574);

    color:#111;

}

.secondary-btn{

    border:1px solid rgba(212,175,55,.4);

    color:white;

}

.primary-btn:hover,
.secondary-btn:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 40px rgba(212,175,55,.25);

}
/* ===========================
SECTION HEADINGS
=========================== */

.container{

    width:min(1200px,92%);

    margin:auto;

    padding:80px 0;

}

.section-title{

    text-align:center;

    margin-bottom:50px;

}

.section-title h2{

    font-family:'Playfair Display',serif;

    font-size:2.5rem;

    color:var(--gold);

    margin-bottom:15px;

}

.section-title p{

    max-width:760px;

    margin:auto;

    color:var(--muted);

    font-size:1.05rem;

}

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

.grid{

    display:grid;

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

    gap:32px;

}

.card{

    background:
    linear-gradient(
    160deg,
    rgba(255,255,255,.05),
    rgba(255,255,255,.02));

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

    border-radius:22px;

    overflow:hidden;

    backdrop-filter:blur(18px);

    transition:.4s;

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

    display:flex;

    flex-direction:column;

}

.card:hover{

    transform:translateY(-10px);

    border-color:rgba(212,175,55,.35);

    box-shadow:
    0 25px 65px rgba(212,175,55,.15);

}

.card img{

    width:100%;

    height:240px;

    object-fit:cover;

}

.card-content{

    padding:28px;

    display:flex;

    flex-direction:column;

    flex:1;

}

.badge{

    display:inline-block;

    width:max-content;

    padding:6px 14px;

    border-radius:999px;

    background:rgba(212,175,55,.12);

    border:1px solid rgba(212,175,55,.25);

    color:var(--gold-light);

    font-size:.8rem;

    text-transform:uppercase;

    margin-bottom:18px;

}

.card h3{

    font-family:'Playfair Display',serif;

    color:white;

    font-size:1.7rem;

    margin-bottom:12px;

}

.card-author{

    color:var(--gold);

    font-size:.95rem;

    margin-bottom:15px;

}

.card-desc{

    color:var(--muted);

    line-height:1.8;

    flex:1;

    margin-bottom:25px;

}

.btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    border:none;

    cursor:pointer;

    padding:14px 24px;

    border-radius:999px;

    background:linear-gradient(
    135deg,
    #d4af37,
    #f2d574);

    color:#111;

    font-weight:700;

    transition:.3s;

}

.btn:hover{

    transform:translateY(-4px);

    box-shadow:
    0 15px 35px rgba(212,175,55,.28);

}
/* ===========================
SEARCH BAR
=========================== */

.search-bar{

    width:100%;

    padding:16px 22px;

    margin-bottom:45px;

    border-radius:999px;

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

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

    backdrop-filter:blur(12px);

    color:white;

    font-size:1rem;

    outline:none;

    transition:.35s;

}

.search-bar::placeholder{

    color:var(--muted);

}

.search-bar:focus{

    border-color:var(--gold);

    box-shadow:
    0 0 25px rgba(212,175,55,.18);

}

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

.nav-tabs{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

    margin-bottom:45px;

}

.tab-btn{

    padding:14px 24px;

    border-radius:999px;

    border:1px solid rgba(212,175,55,.35);

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

    color:var(--text);

    cursor:pointer;

    font-weight:600;

    transition:.35s;

    backdrop-filter:blur(12px);

}

.tab-btn:hover{

    transform:translateY(-4px);

    color:var(--gold-light);

    border-color:var(--gold);

    box-shadow:
    0 12px 30px rgba(212,175,55,.15);

}

.tab-btn.active{

    background:
    linear-gradient(
    135deg,
    #c89b2a,
    #f2d574);

    color:#111;

    border:none;

    font-weight:700;

    box-shadow:
    0 15px 35px rgba(212,175,55,.30);

}

/* ===========================
MODAL
=========================== */

.modal{

    display:none;

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(8px);

    justify-content:center;

    align-items:center;

    padding:25px;

    z-index:9999;

}

.modal-content{

    width:min(820px,100%);

    max-height:90vh;

    overflow-y:auto;

    background:
    linear-gradient(
    160deg,
    #161c27,
    #10141d);

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

    border-radius:24px;

    padding:40px;

    box-shadow:
    0 25px 70px rgba(0,0,0,.45);

    position:relative;

}

.modal-content h2{

    font-family:'Playfair Display',serif;

    color:var(--gold);

    margin-bottom:15px;

}

.modal-content h4{

    color:var(--gold-light);

    margin-top:25px;

    margin-bottom:12px;

}

.modal-content p{

    color:var(--muted);

    line-height:1.9;

}

.modal-content blockquote{

    background:
    rgba(212,175,55,.08);

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

    padding:18px;

    border-radius:10px;

    color:white;

    font-style:italic;

    margin:20px 0;

}

.close-btn{

    position:absolute;

    top:20px;

    right:25px;

    background:none;

    border:none;

    color:white;

    font-size:2rem;

    cursor:pointer;

    transition:.3s;

}

.close-btn:hover{

    color:var(--gold);

    transform:rotate(90deg);

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

footer{

    margin-top:80px;

    text-align:center;

    padding:45px 20px;

    background:
    rgba(20,25,34,.65);

    backdrop-filter:blur(12px);

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

}

footer p{

    color:var(--muted);

    font-size:.95rem;

}

/* ===========================
VIDEO EMBED
=========================== */

.video-container{

    position:relative;

    padding-bottom:56.25%;

    height:0;

    overflow:hidden;

    border-radius:16px;

    margin-top:20px;

}

.video-container iframe{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    border:none;

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#090b10;

}

::-webkit-scrollbar-thumb{

    background:
    linear-gradient(
    to bottom,
    #d4af37,
    #8d6c17);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#f2d574;

}

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

::selection{

    background:#d4af37;

    color:#111;

}

/* ===========================
PROGRESS BAR
=========================== */

#progress-bar{

    position:fixed;

    top:0;
    left:0;

    width:0%;

    height:4px;

    background:
    linear-gradient(
    90deg,
    #d4af37,
    #f2d574);

    z-index:9999;

}

/* ===========================
MOUSE SPOTLIGHT
=========================== */

#spotlight{

    position:fixed;

    width:320px;
    height:320px;

    border-radius:50%;

    pointer-events:none;

    background:
    radial-gradient(circle,
    rgba(212,175,55,.15),
    transparent 70%);

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

    z-index:0;

}

/* ===========================
BACKGROUND ORBS
=========================== */

.bg-orbs{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:-1;

}

.bg-orbs span{

    position:absolute;

    width:260px;
    height:260px;

    border-radius:50%;

    filter:blur(90px);

    background:
    rgba(212,175,55,.08);

    animation:float 18s linear infinite;

}

.bg-orbs span:nth-child(1){

    left:5%;

    top:10%;

}

.bg-orbs span:nth-child(2){

    right:8%;

    top:45%;

    animation-duration:22s;

}

.bg-orbs span:nth-child(3){

    left:40%;

    bottom:-5%;

    animation-duration:28s;

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-70px);

    }

    100%{

        transform:translateY(0);

    }

}

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

@media(max-width:900px){

    .hero{

        padding:120px 20px 70px;

    }

    .hero h1{

        font-size:2.8rem;

    }

    .navbar{

        flex-direction:column;

        gap:20px;

    }

    .nav-links{

        justify-content:center;

    }

    .card img{

        height:220px;

    }

}

@media(max-width:768px){

    .hero h1{

        font-size:2.2rem;

    }

    .hero p{

        font-size:1rem;

    }

    .nav-tabs{

        flex-direction:column;

        align-items:center;

    }

    .tab-btn{

        width:100%;

        max-width:360px;

    }

    .grid{

        grid-template-columns:1fr;

    }

    .card img{

        height:210px;

    }

    .modal-content{

        padding:25px;

    }

}

@media(max-width:500px){

    .hero{

        padding:100px 18px 60px;

    }

    .hero h1{

        font-size:1.9rem;

    }

    .hero p{

        font-size:.95rem;

    }

    .navbar{

        padding:18px;

    }

    .card-content{

        padding:22px;

    }

}
.period-navigation{

display:flex;

justify-content:center;

margin:60px auto;

}

.period-tabs{

display:flex;

gap:20px;

flex-wrap:wrap;

justify-content:center;

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

padding:14px;

border-radius:999px;

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

backdrop-filter:blur(15px);

}

.period-btn{

background:transparent;

border:none;

padding:15px 30px;

border-radius:999px;

color:#d6d6d6;

cursor:pointer;

font-weight:600;

transition:.35s;

font-size:1rem;

}

.period-btn:hover{

background:rgba(212,175,55,.12);

color:#f2d574;

}

.period-btn.active{

background:linear-gradient(
135deg,
#d4af37,
#f2d574);

color:#111;

box-shadow:
0 12px 30px rgba(212,175,55,.3);

}
/*=========================
MOBILE NAVBAR
=========================*/

@media (max-width:768px){

    .navbar{

        position:relative;

        padding:16px 20px;

        border-radius:18px;

    }

    .logo{

        font-size:1.3rem;

    }

    .nav-links{

        position:absolute;

        top:100%;

        left:0;

        width:100%;

        background:rgba(8,20,33,.97);

        backdrop-filter:blur(20px);

        border-radius:18px;

        display:none;

        flex-direction:column;

        padding:18px 0;

        gap:0;

        margin-top:10px;

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

    }

    .nav-links.active{

        display:flex;

    }

    .nav-links li{

        width:100%;

    }

    .nav-links a{

        display:block;

        padding:15px 25px;

        text-align:center;

    }

    .nav-links a::after{

        display:none;

    }

    .menu-toggle{

        display:flex;

        justify-content:center;

        align-items:center;

        cursor:pointer;

        color:var(--gold);

        font-size:1.6rem;

    }

    .hero{

        padding:150px 20px 100px;

    }

    .hero h1{

        font-size:3.2rem;

    }

    .subtitle{

        letter-spacing:3px;

        font-size:.8rem;

    }

    .description{

        font-size:1rem;

        line-height:1.8;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

        gap:18px;

        margin-bottom:90px;

    }

    .primary-btn,
    .secondary-btn{

        width:260px;

        text-align:center;

    }

    section h2{

        font-size:2.3rem;

    }

    .cards,
    .featured-grid{

        grid-template-columns:1fr;

    }

    .timeline{

        flex-direction:column;

    }

    .timeline::before{

        display:none;

    }

    .time-item{

        width:100%;

    }

    .quote blockquote{

        font-size:2rem;

    }

}

/*=========================
SMALL PHONES
=========================*/

@media (max-width:480px){

    .navbar{

        width:94%;

        margin:12px auto;

    }

    .logo{

        font-size:1.15rem;

    }

    .hero{

        min-height:100vh;

        padding:145px 18px 90px;

    }

    .hero h1{

        font-size:2.4rem;

        line-height:1.2;

    }

    .description{

        font-size:.95rem;

    }

    .primary-btn,
    .secondary-btn{

        width:100%;

        max-width:280px;

        padding:16px;

    }

    .scroll-indicator{

        bottom:15px;

        font-size:.8rem;

    }

    section{

        padding:80px 0;

    }

    section h2{

        font-size:1.9rem;

        margin-bottom:45px;

    }

    .card,
    .featured-card{

        padding:30px;

    }

    .featured-card h3{

        font-size:1.6rem;

    }

    .quote{

        padding:70px 20px;

    }

    .quote blockquote{

        font-size:1.5rem;

    }

    .quote blockquote::before,
    .quote blockquote::after{

        display:none;

    }

    footer{

        padding:60px 20px;

    }

}

/*=========================
VERY SMALL DEVICES
=========================*/

@media (max-width:360px){

    .hero h1{

        font-size:2rem;

    }

    .description{

        font-size:.9rem;

    }

    .logo{

        font-size:1rem;

    }

}