:root{
    --dark:#07110e;
    --dark2:#0d2d23;
    --green:#123a2e;
    --green-light:#527566;

    --accent:#e9c46a;
    --accent-dark:#b88b29;

    --cream:#f5f1e8;
    --white:#ffffff;

    --text:#18221f;
    --muted:#68736f;
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Inter",sans-serif;
    background:#f5f3ed;
    color:var(--text);
    overflow-x:hidden;
}

img{
    max-width:100%;
}


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

.navbar{
    height:82px;

    padding:0 6%;

    display:flex;
    align-items:center;
    justify-content:space-between;

    background:rgba(7,17,14,.97);

    position:sticky;
    top:0;

    z-index:9999;

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


.navbar-logo{
    height:82px;

    display:flex;
    align-items:center;

    gap:11px;

    text-decoration:none;

    flex-shrink:0;
}


.navbar-logo img{
    width:44px;
    height:44px;

    object-fit:contain;

    display:block;
}


.navbar-logo-text{
    display:flex;
    flex-direction:column;

    align-items:flex-start;

    line-height:1;
}


.navbar-logo-text strong{
    color:white;

    font-family:"Playfair Display",serif;

    font-size:20px;

    font-weight:700;

    line-height:1.1;
}


.navbar-logo-text small{
    margin-top:5px;

    color:var(--accent);

    font-size:8px;

    font-weight:700;

    letter-spacing:1.6px;
}


.nav-menu{
    display:flex;
    align-items:center;

    gap:23px;
}


.nav-menu a{
    color:rgba(255,255,255,.72);

    font-size:12px;

    font-weight:500;

    text-decoration:none;

    transition:.25s;
}


.nav-menu a:hover{
    color:white;
}


.back-button{
    padding:9px 14px;

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

    border-radius:30px;
}


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

.hero{
    min-height:calc(100vh - 82px);

    position:relative;

    display:flex;
    align-items:center;

    padding:100px 9%;

    color:white;

    overflow:hidden;

    background:var(--dark);
}


.hero-background{
    position:absolute;

    inset:0;

    z-index:0;
}


.hero-background img{
    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center;
}


.hero-overlay{
    position:absolute;

    inset:0;

    z-index:1;

    background:
        linear-gradient(
            90deg,
            rgba(3,14,10,.93) 0%,
            rgba(3,14,10,.76) 38%,
            rgba(3,14,10,.36) 72%,
            rgba(3,14,10,.20) 100%
        ),
        linear-gradient(
            to top,
            rgba(0,0,0,.48),
            transparent 50%
        );
}


.hero-content{
    position:relative;

    z-index:2;

    max-width:790px;
}


.eyebrow,
.section-label{
    color:var(--accent-dark);

    font-size:11px;

    font-weight:700;

    letter-spacing:2.2px;

    text-transform:uppercase;
}


.hero h1{
    margin-top:18px;

    font-family:"Playfair Display",serif;

    font-size:clamp(50px,6vw,84px);

    line-height:1;

    max-width:850px;
}


.hero h1 span{
    color:var(--accent);
}


.hero-description{
    margin-top:28px;

    max-width:630px;

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

    font-size:15px;

    line-height:1.85;
}


.hero-meta{
    margin-top:25px;

    display:flex;

    flex-wrap:wrap;

    gap:22px;

    font-size:12px;

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


.hero-meta i{
    margin-right:6px;

    color:var(--accent);
}


.hero-button{
    margin-top:34px;

    width:max-content;

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 21px;

    border-radius:30px;

    background:var(--accent);

    color:#17251f;

    font-size:12px;

    font-weight:700;

    text-decoration:none;

    transition:.25s;
}


.hero-button:hover{
    transform:translateY(-3px);
}


/* =========================
   QUICK FACTS
========================= */

.quick-facts{
    width:86%;

    margin:-48px auto 90px;

    position:relative;

    z-index:20;

    display:grid;

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

    background:white;

    border-radius:18px;

    box-shadow:0 15px 50px rgba(0,0,0,.12);

    overflow:hidden;
}


.quick-card{
    min-height:130px;

    padding:25px;

    display:flex;

    align-items:center;

    gap:17px;

    border-right:1px solid #e8e4da;
}


.quick-card:last-child{
    border-right:none;
}


.quick-card i{
    width:45px;
    height:45px;

    flex-shrink:0;

    display:flex;

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

    border-radius:50%;

    background:#f7efd8;

    color:#9b7320;

    font-size:17px;
}


.quick-card strong{
    display:block;

    font-family:"Playfair Display",serif;

    font-size:18px;
}


.quick-card span{
    display:block;

    margin-top:5px;

    color:var(--muted);

    font-size:10px;

    line-height:1.5;
}


/* =========================
   GENERAL ARTICLE
========================= */

main{
    overflow:hidden;
}


.article-section{
    max-width:1120px;

    margin:auto;

    padding:95px 6%;

    display:grid;

    grid-template-columns:110px 1fr;

    gap:45px;
}


.section-number{
    font-family:"Playfair Display",serif;

    font-size:72px;

    color:#ded8cb;

    font-weight:700;
}


.article-content{
    max-width:800px;
}


.article-content h2,
.split-content h2,
.section-header h2{
    margin:12px 0 24px;

    font-family:"Playfair Display",serif;

    font-size:clamp(34px,4vw,52px);

    line-height:1.15;
}


.article-content p,
.split-content p{
    margin-bottom:18px;

    color:var(--muted);

    line-height:1.85;

    font-size:14px;
}


.article-content .lead{
    color:#2f413a;

    font-size:20px;

    font-family:"Playfair Display",serif;

    line-height:1.6;
}


/* =========================
   SPLIT SECTION
========================= */

.split-section{
    width:88%;

    margin:60px auto 120px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;
}


.split-section.reverse .split-image{
    order:2;
}


.split-section.reverse .split-content{
    order:1;
}


.split-image{
    height:600px;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 20px 55px rgba(20,40,30,.12);
}


.split-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .7s ease;
}


.split-image:hover img{
    transform:scale(1.05);
}


.info-box{
    margin-top:30px;

    padding:20px;

    display:flex;

    gap:15px;

    background:#eee6cf;

    border-left:4px solid var(--accent-dark);

    border-radius:10px;
}


.info-box i{
    color:#a27719;

    font-size:20px;
}


.info-box strong{
    display:block;

    margin-bottom:6px;
}


.info-box p{
    margin:0;

    font-size:12px;
}


/* =========================
   DARK SECTION
========================= */

.dark-section{
    max-width:none;

    padding:100px 10%;

    background:var(--dark2);

    color:white;
}


.dark-section .section-number{
    color:rgba(255,255,255,.12);
}


.dark-section h2{
    color:white;
}


.dark-section p{
    color:rgba(255,255,255,.68);
}


.dark-section .lead{
    color:white;
}


.biodiversity-grid{
    margin-top:45px;

    display:grid;

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

    gap:16px;
}


.bio-card{
    padding:28px 22px;

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

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

    border-radius:16px;

    transition:.25s;
}


.bio-card:hover{
    transform:translateY(-6px);

    background:rgba(255,255,255,.09);
}


.bio-card i{
    color:var(--accent);

    font-size:25px;
}


.bio-card h3{
    margin:16px 0 10px;

    font-family:"Playfair Display",serif;
}


.bio-card p{
    font-size:12px;

    line-height:1.7;

    margin:0;
}


/* =========================
   DESTINATION
========================= */

.destination-section{
    padding:110px 7%;
}


.section-header{
    max-width:700px;

    margin-bottom:45px;
}


.section-header > p:last-child{
    color:var(--muted);

    line-height:1.8;

    font-size:13px;
}


.destination-grid{
    display:grid;

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

    gap:22px;
}


.destination-card{
    height:420px;

    position:relative;

    overflow:hidden;

    border-radius:20px;

    color:white;
}


.destination-card img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .7s ease;
}


.destination-card:hover img{
    transform:scale(1.07);
}


.destination-overlay{
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(5,17,13,.90),
            rgba(5,17,13,.10) 65%
        );
}


.destination-content{
    position:absolute;

    bottom:0;
    left:0;

    padding:30px;

    max-width:440px;
}


.destination-content > span{
    color:var(--accent);

    font-size:11px;

    font-weight:700;
}


.destination-content h3{
    margin:7px 0 9px;

    font-family:"Playfair Display",serif;

    font-size:30px;
}


.destination-content p{
    color:rgba(255,255,255,.74);

    font-size:12px;

    line-height:1.7;
}


/* =========================
   CONSERVATION
========================= */

.conservation-section{
    padding:110px 7%;

    background:#e9e3d6;
}


.conservation-container{
    max-width:1200px;

    margin:auto;
}


.conservation-container h2{
    margin:12px 0 20px;

    font-family:"Playfair Display",serif;

    font-size:48px;
}


.conservation-intro{
    max-width:720px;

    color:var(--muted);

    line-height:1.8;

    font-size:14px;
}


.rules-grid{
    margin-top:50px;

    display:grid;

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

    gap:17px;
}


.rule-card{
    padding:28px;

    min-height:290px;

    position:relative;

    background:white;

    border-radius:17px;

    transition:.25s;
}


.rule-card:hover{
    transform:translateY(-5px);
}


.rule-card > span{
    position:absolute;

    top:20px;
    right:20px;

    color:#d8cfbd;

    font-family:"Playfair Display",serif;

    font-size:30px;
}


.rule-card i{
    width:45px;
    height:45px;

    display:flex;

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

    border-radius:50%;

    background:#f0e6c8;

    color:#9f751c;
}


.rule-card h3{
    margin:22px 0 12px;

    font-family:"Playfair Display",serif;

    font-size:20px;
}


.rule-card p{
    color:var(--muted);

    font-size:12px;

    line-height:1.7;
}


/* =========================
   TIPS
========================= */

.tips-section{
    padding:110px 8%;

    max-width:1200px;

    margin:auto;
}


.tips-list{
    margin-top:40px;
}


.tip-item{
    display:grid;

    grid-template-columns:70px 1fr;

    gap:20px;

    padding:25px 0;

    border-bottom:1px solid #ddd8cc;
}


.tip-icon{
    width:55px;
    height:55px;

    display:flex;

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

    border-radius:50%;

    background:var(--dark2);

    color:var(--accent);
}


.tip-item h3{
    margin-bottom:8px;

    font-family:"Playfair Display",serif;

    font-size:21px;
}


.tip-item p{
    color:var(--muted);

    font-size:13px;

    line-height:1.75;
}


/* =========================
   QUOTE
========================= */

.quote-section{
    padding:120px 20px;

    text-align:center;

    background:var(--dark);

    color:white;
}


.quote-section > i{
    color:var(--accent);

    font-size:30px;
}


.quote-section blockquote{
    max-width:850px;

    margin:24px auto;

    font-family:"Playfair Display",serif;

    font-size:clamp(30px,4vw,48px);

    line-height:1.35;
}


.quote-section span{
    color:rgba(255,255,255,.55);

    font-size:10px;

    letter-spacing:2px;

    text-transform:uppercase;
}


/* =========================
   SOURCES
========================= */

.sources-section{
    padding:110px 8%;

    max-width:1200px;

    margin:auto;
}


.source-list{
    display:grid;

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

    gap:16px;
}


.source-card{
    min-height:130px;

    padding:25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    background:white;

    border:1px solid #e5e0d5;

    border-radius:14px;

    color:var(--text);

    text-decoration:none;

    transition:.25s;
}


.source-card:hover{
    transform:translateY(-4px);

    border-color:#bea04f;

    box-shadow:0 12px 40px rgba(40,50,40,.08);
}


.source-card span{
    color:#a47a1e;

    font-size:9px;

    letter-spacing:1.5px;

    font-weight:700;
}


.source-card h3{
    margin-top:8px;

    font-family:"Playfair Display",serif;

    font-size:18px;
}


.source-card > i{
    color:#9d7a29;
}


/* =========================
   CLOSING
========================= */

.closing{
    padding:110px 20px;

    text-align:center;

    background:#ede8dd;
}


.closing > p{
    color:#a47a1e;

    font-size:10px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;
}


.closing h2{
    margin:15px auto 30px;

    font-family:"Playfair Display",serif;

    font-size:50px;
}


.closing h2 span{
    color:#54786a;

    font-style:italic;
}


.closing a{
    display:inline-flex;

    gap:9px;

    align-items:center;

    padding:13px 20px;

    border-radius:30px;

    background:var(--dark2);

    color:white;

    text-decoration:none;

    font-size:12px;
}


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

footer{
    padding:40px 7%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:var(--dark);

    color:white;
}


.footer-brand strong{
    font-family:"Playfair Display",serif;

    font-size:20px;
}


.footer-brand p,
.footer-right{
    margin-top:5px;

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

    font-size:11px;
}


/* =========================
   BACK TOP
========================= */

#backToTop{
    position:fixed;

    right:25px;
    bottom:25px;

    width:44px;
    height:44px;

    display:none;

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

    border:0;

    border-radius:50%;

    background:var(--accent);

    color:#14231e;

    cursor:pointer;

    z-index:1000;

    box-shadow:0 8px 25px rgba(0,0,0,.15);
}


#backToTop.show{
    display:flex;
}


/* =========================
   SCROLL ANIMATION
========================= */

.reveal{
    opacity:0;

    transform:translateY(35px);

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


.reveal.visible{
    opacity:1;

    transform:translateY(0);
}


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

@media(max-width:1000px){

    .nav-menu > a:not(.back-button){
        display:none;
    }

    .quick-facts{
        grid-template-columns:repeat(2,1fr);
    }

    .quick-card:nth-child(2){
        border-right:none;
    }

    .article-section{
        grid-template-columns:70px 1fr;
    }

    .biodiversity-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .rules-grid{
        grid-template-columns:repeat(2,1fr);
    }

}


@media(max-width:800px){

    .split-section,
    .split-section.reverse{
        grid-template-columns:1fr;

        width:calc(100% - 40px);

        gap:35px;
    }

    .split-section.reverse .split-image,
    .split-section.reverse .split-content{
        order:initial;
    }

    .split-image{
        height:430px;
    }

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

    .source-list{
        grid-template-columns:1fr;
    }

}


@media(max-width:600px){

    .navbar{
        height:72px;

        padding:0 18px;
    }

    .navbar-logo{
        height:72px;
    }

    .navbar-logo img{
        width:37px;
        height:37px;
    }

    .navbar-logo-text strong{
        font-size:16px;
    }

    .navbar-logo-text small{
        font-size:7px;

        letter-spacing:1px;
    }

    .back-button{
        font-size:0 !important;

        width:38px;
        height:38px;

        padding:0;

        display:flex;

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

    .back-button i{
        font-size:12px;
    }


    .hero{
        min-height:80vh;

        padding:80px 24px;
    }

    .hero h1{
        font-size:47px;
    }

    .hero-description{
        font-size:13px;
    }


    .quick-facts{
        width:calc(100% - 30px);

        margin:-35px auto 60px;

        grid-template-columns:1fr;
    }

    .quick-card{
        border-right:none;

        border-bottom:1px solid #e8e4da;
    }

    .quick-card:last-child{
        border-bottom:none;
    }


    .article-section{
        padding:70px 23px;

        display:block;
    }

    .section-number{
        margin-bottom:20px;

        font-size:48px;
    }


    .dark-section{
        padding:75px 23px;
    }


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


    .destination-section{
        padding:75px 20px;
    }


    .destination-card{
        height:390px;
    }


    .conservation-section{
        padding:75px 20px;
    }

    .conservation-container h2{
        font-size:38px;
    }

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


    .tips-section{
        padding:75px 22px;
    }

    .tip-item{
        grid-template-columns:55px 1fr;
    }

    .tip-icon{
        width:45px;
        height:45px;
    }


    .quote-section{
        padding:85px 23px;
    }


    .sources-section{
        padding:75px 20px;
    }


    .closing{
        padding:80px 20px;
    }

    .closing h2{
        font-size:38px;
    }


    footer{
        padding:35px 20px;

        flex-direction:column;

        align-items:flex-start;

        gap:15px;
    }

}