:root{
    --bg:#faf7f2;
    --card:#ffffff;
    --soft:#f6efe6;
    --text:#2f2a28;
    --muted:#6e625d;
    --accent:#7a8f68;
    --accent-light:#dfe9d5;
    --border:#e7ddd1;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.75;
}


/* -------------------------------- */
/* Navigation */
/* -------------------------------- */

.site-header{
    background:white;
    border-bottom:1px solid var(--border);
    position:sticky;
    top:0;
    z-index:50;
}

.site-nav{
    max-width:1200px;
    margin:auto;
    display:flex;
    justify-content:center;
    gap:28px;
    flex-wrap:wrap;
    padding:18px;
}

.site-nav a{
    text-decoration:none;
    color:var(--text);
    font-weight:700;
}

.site-nav a:hover{
    color:var(--accent);
}


/* -------------------------------- */
/* General */
/* -------------------------------- */

main{
    overflow:hidden;
}

section{
    padding:80px 8%;
}

.centered{
    max-width:820px;
    margin:auto;
    text-align:center;
}

.eyebrow{
    color:var(--accent);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:.8rem;
    margin-bottom:12px;
}

h1{
    font-size:clamp(3rem,8vw,5.5rem);
    line-height:.95;
    margin-bottom:20px;
}

h2{
    font-size:clamp(2rem,5vw,3rem);
    margin-top:0;
}

p{
    color:var(--muted);
    font-size:1.08rem;
}


/* -------------------------------- */
/* Hero */
/* -------------------------------- */

.rock-hero{

    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:60px;
    align-items:center;

}

.hero-image img{

    width:100%;
    display:block;
    border-radius:28px;
    box-shadow:0 18px 45px rgba(0,0,0,.12);

}

.hero-content{

    max-width:520px;

}

.hero-intro{

    font-size:1.35rem;
    color:var(--text);

}


/* -------------------------------- */
/* Cards */
/* -------------------------------- */

.trail-card,
.question-card{

    background:white;
    border-radius:30px;
    padding:50px;
    border:1px solid var(--border);
    box-shadow:0 14px 35px rgba(0,0,0,.05);

}


/* -------------------------------- */
/* Two Column Sections */
/* -------------------------------- */

.landscape-grid,
.sunny-seat-grid{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;

}

.landscape-image img,
.sunny-seat-image img{

    width:100%;
    border-radius:24px;
    display:block;
    box-shadow:0 15px 40px rgba(0,0,0,.08);

}


/* -------------------------------- */
/* Alternate Sections */
/* -------------------------------- */

.landscape-section{

    background:var(--soft);

}

.look-around-section{

    background:white;

}

.sunny-seat-section{

    background:linear-gradient(
        to bottom,
        #faf7f2,
        #fdfbf8
    );

}

.question-section{

    background:var(--soft);

}


/* -------------------------------- */
/* Buttons */
/* -------------------------------- */

.button-row{

    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
    margin-top:35px;

}

.trail-button{

    display:inline-block;
    padding:15px 28px;
    border-radius:999px;
    text-decoration:none;
    font-weight:bold;
    background:var(--accent);
    color:white;
    transition:.25s;

}

.trail-button:hover{

    transform:translateY(-2px);

}

.trail-button.secondary{

    background:white;
    color:var(--accent);
    border:2px solid var(--accent);

}


/* -------------------------------- */
/* Closing */
/* -------------------------------- */

.closing-section{

    text-align:center;

}

.closing-content{

    max-width:850px;
    margin:auto;

}


/* -------------------------------- */
/* Footer */
/* -------------------------------- */

.site-footer{

    text-align:center;
    padding:60px 20px;
    background:white;
    border-top:1px solid var(--border);

}

.site-footer p{

    color:var(--muted);

}

.small-note{

    font-size:.9rem;

}


/* -------------------------------- */
/* Mobile */
/* -------------------------------- */

@media (max-width:900px){

    section{

        padding:60px 6%;

    }

    .rock-hero,
    .landscape-grid,
    .sunny-seat-grid{

        grid-template-columns:1fr;
        gap:40px;

    }

    .hero-content{

        text-align:center;
        margin:auto;

    }

    .trail-card,
    .question-card{

        padding:30px;

    }

}