/*
 Project: snakeriverrv.com
 File: custom.css
 Copyright 2026 Christopher.
 Jun 30, 2026 5:58:03 AM
 license: default
 Author: Christopher
 Note: Reverse engineering of encrypted files is strictly forbidden and will
 disable this web site and will violate Section 103(f) of the
 Digital Millennium Copyright Act (DMCA) (17 USC § 1201 (f).

*/
/*
    Created on : Jun 30, 2026, 5:58:03 AM
    Author     : Christopher
*/

:root{
    --river:#1f4e4a;        /* deep river green */
    --river-dk:#15393a;
    --grass:#5f8a4a;        /* the famous green grass */
    --water:#8fb8b0;        /* pale water */
    --sky:#e8efe9;          /* misty morning */
    --sand:#f4f0e6;         /* riverbank sand */
    --bark:#3a2f25;         /* tree bark / text */
    --ember:#d4763a;        /* fire-pit ember accent */
    --line:rgba(58,47,37,.16);
}
*{
    box-sizing:border-box;
    margin:0;
    padding:0
}
html{
    scroll-behavior:smooth
}
body{
    background:var(--sand);
    color:var(--bark);
    font-family:'Inter',sans-serif;
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
    font-family:'Fraunces',serif;
    font-weight:500;
    line-height:1.05;
    letter-spacing:-.01em
}

.wrap{
    max-width:1120px;
    margin:0 auto;
    padding:0 28px
}
.eyebrow{
    font-size:.74rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    font-weight:600;
    color:var(--grass)
}

/* ---- nav ---- */
nav{
    position:sticky;
    top:0;
    z-index:30;
    background:rgba(244,240,230,.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line)
}
.nav-in{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 28px;
    max-width:1120px;
    margin:0 auto
}
.brand{
    font-family:'Fraunces',serif;
    font-size:1.18rem;
    font-weight:600;
    color:var(--river-dk);
    display:flex;
    align-items:center;
    gap:9px
}
.brand svg{
    flex:0 0 auto
}
.nav-links{
    display:flex;
    gap:30px;
    font-size:.92rem;
    font-weight:500
}
.nav-links a{
    text-decoration:none;
    color:var(--river-dk);
    opacity:.78;
    transition:opacity .2s
}
.nav-links a:hover{
    opacity:1
}
.nav-cta{
    background:var(--river);
    color:var(--sand);
    padding:9px 18px;
    border-radius:999px;
    text-decoration:none;
    font-size:.9rem;
    font-weight:600;
    transition:background .2s
}
.nav-cta:hover{
    background:var(--river-dk)
}
@media(max-width:760px){
    .nav-links{
        display:none
    }
}

/* ---- hero ---- */
.hero{
    position:relative;
    overflow:hidden;

    color:var(--sand)
}
.hero-art{
    position:absolute;
    inset:0;
    width:100%;
    height:100%
}
.hero-in{
    position:relative;
    z-index:2;
    padding:104px 28px 120px;
    max-width:1120px;
    margin:0 auto
}
.hero h1{
    font-size:clamp(2.9rem,7vw,5.4rem);
    max-width:14ch;
    color:var(--sand);
    text-shadow:0 2px 24px rgba(0,0,0,.25)
}
.hero h1 em{
    font-style:italic;
    color:var(--river-dk)
}
.hero p{
    margin-top:24px;
    max-width:46ch;
    font-size:1.12rem;
    color:rgba(244,240,230,.9)
}
.hero-meta{
    margin-top:40px;
    display:flex;
    flex-wrap:wrap;
    gap:14px 30px;
    align-items:center
}
.hero-meta a{
    background:var(--ember);
    color:#fff;
    text-decoration:none;
    font-weight:600;
    padding:14px 26px;
    border-radius:999px;
    transition:transform .2s,box-shadow .2s
}
.hero-meta a:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 28px rgba(212,118,58,.4)
}
.hero-meta span{
    font-size:.95rem;
    color:rgba(244,240,230,.82)
}
.hero-meta b{
    color:var(--river-dk);
    font-weight:600
}

/* waterline divider */
.waterline{
    display:block;
    width:100%;
    height:60px;
    margin-top:-1px
}

/* ---- intro strip ---- */
.intro{
    padding:84px 0 40px
}
.intro .grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:start
}
.intro h2{
    font-size:clamp(1.9rem,3.6vw,2.8rem);
    color:var(--river-dk) !important;
    max-width:16ch
}
.intro .body p+p{
    margin-top:18px
}
.intro .pull{
    font-family:'Fraunces',serif;
    font-style:italic;
    font-size:1.3rem;
    color:var(--grass);
    border-left:3px solid var(--grass);
    padding-left:18px;
    margin-top:26px
}
@media(max-width:760px){
    .intro .grid{
        grid-template-columns:1fr;
        gap:28px
    }
}

/* ---- amenities ---- */
.amen{
    padding:64px 0 80px
}
.amen-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px;
    margin-bottom:38px;
    flex-wrap:wrap
}
.amen-head h2{
    font-size:clamp(1.8rem,3.4vw,2.6rem);
    color:var(--river-dk)
}
.cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}
.card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:26px 24px;
    transition:transform .22s,box-shadow .22s
}
.card:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 34px rgba(31,78,74,.1)
}
.card .ic{
    width:42px;
    height:42px;
    border-radius:11px;
    background:var(--sky);
    display:grid;
    place-items:center;
    margin-bottom:16px;
    color:var(--river)
}
.card h3{
    font-size:1.16rem;
    color:var(--river-dk);
    margin-bottom:6px
}
.card p{
    font-size:.95rem;
    color:rgba(58,47,37,.78)
}
@media(max-width:860px){
    .cards{
        grid-template-columns:1fr 1fr
    }
}
@media(max-width:560px){
    .cards{
        grid-template-columns:1fr
    }
}

/* ---- nearby ---- */
.nearby{
    background:var(--river);
    color:var(--sand);
    padding:84px 0;
    border-radius:32px;
    margin:0 28px
}
.nearby .wrap{
    padding:0 36px;
    max-width:1064px
}
.nearby h2{
    font-size:clamp(1.8rem,3.4vw,2.6rem);
    color:#fff;
    max-width:18ch
}
.nearby p.sub{
    color:var(--water);
    margin-top:14px;
    max-width:50ch
}
.trips{
    margin-top:40px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 56px
}
.trip{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:18px 0;
    border-top:1px solid rgba(143,184,176,.28)
}
.trip:hover .trip-name{
    color:var(--water)
}
.trip-name{
    font-family:'Fraunces',serif;
    font-size:1.18rem;
    transition:color .2s
}
.trip-time{
    font-size:.86rem;
    color:var(--water);
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
    align-self:center
}
@media(max-width:760px){
    .nearby{
        margin:0 14px;
        border-radius:22px
    }
    .trips{
        grid-template-columns:1fr;
        gap:0
    }
}
.mark, mark {
    padding: .1875em;
    color: var(--bs-highlight-color);
    background-color: var(--sky) !important;
}
/* ---- voices ---- */
.voices{
    padding:90px 0
}
.voices .eyebrow{
    text-align:center;
    display:block;
    margin-bottom:14px
}
.voices h2{
    text-align:center;
    font-size:clamp(1.8rem,3.4vw,2.6rem);
    color:var(--river-dk) !important;
    max-width:20ch;
    margin:0 auto 44px
}
.quotes{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:20px !important;
}
.quote{
    background:var(--sky) !important;
    border-radius:18px !important;
    padding:30px 26px !important;
    position:relative !important;
}
.quote .mark{
    font-family:'Fraunces',serif !important;
    font-size:3.2rem !important;
    line-height:.6 !important;
    color:var(--grass)!important;
    opacity:.5 !important;
}
.quote p{
    margin-top:8px !important;
    font-size:1.04rem !important;
    color:var(--bark) !important;
}
.quote cite{
    display:block !important;
    margin-top:16px !important;
    font-style:normal !important;
    font-size:.85rem !important;
    font-weight:600 !important;
    color:var(--river) !important;
    letter-spacing:.03em !important;
}
@media(max-width:860px){
    .quotes{
        grid-template-columns:1fr
    }
}

/* ---- visit / contact ---- */
.visit{
    background:var(--river-dk);
    color:var(--sand);
    padding:84px 0 70px
}
.visit .grid{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:56px;
    align-items:center
}
.visit h2{
    font-size:clamp(2rem,4vw,3rem);
    color:#fff;
    max-width:12ch
}
.visit .lede{
    margin-top:18px;
    color:rgba(244,240,230,.85);
    max-width:42ch
}
.info{
    display:grid;
    gap:2px;
    font-size:1.02rem
}
.info .row{
    display:flex;
    gap:14px;
    padding:16px 0;
    border-bottom:1px solid rgba(143,184,176,.22)
}
.info .row span:first-child{
    color:var(--water);
    min-width:90px;
    font-weight:600;
    font-size:.84rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    padding-top:3px
}
.info a{
    color:var(--sand)
}
.info b{
    font-weight:600
}
.book-btn{
    margin-top:30px;
    display:inline-block;
    background:var(--ember);
    color:#fff;
    text-decoration:none;
    font-weight:600;
    padding:15px 30px;
    border-radius:999px;
    transition:transform .2s,box-shadow .2s
}
.book-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(212,118,58,.4)
}
@media(max-width:760px){
    .visit .grid{
        grid-template-columns:1fr;
        gap:34px
    }
}

footer{
    background:var(--bark);
    color:rgba(244,240,230,.7);
    padding:34px 0;
    font-size:.86rem
}
footer .wrap{
    display:flex;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    align-items:center
}
footer .brand{
    color:var(--sand);
    font-size:1rem
}

@media(prefers-reduced-motion:reduce){
    *{
        animation:none!important;
        transition:none!important;
        scroll-behavior:auto
    }
}
a:focus-visible,button:focus-visible{
    outline:3px solid var(--ember);
    outline-offset:3px;
    border-radius:4px
}