/* =========================================================
   TRIPS BY KAITLIN
========================================================= */

:root {

    --cream: #f5f0e8;
    --light-cream: #fbf8f3;
    --sand: #ded2c0;

    --terracotta: #b85f42;
    --terracotta-dark: #91452f;

    --forest: #263d35;
    --forest-light: #39554a;

    --charcoal: #252522;
    --gray: #6e6b64;
    --white: #ffffff;

    --serif: "Playfair Display", Georgia, serif;
    --sans: "DM Sans", Arial, sans-serif;

    --container: 1200px;
}


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


html {
    scroll-behavior: smooth;
}


body {
    font-family: var(--sans);
    color: var(--charcoal);
    background: var(--light-cream);
    line-height: 1.65;
}


img {
    max-width: 100%;
}


a {
    color: inherit;
    text-decoration: none;
}


.container {
    width: min(90%, var(--container));
    margin: auto;
}



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

.site-header {
    background: rgba(251, 248, 243, .97);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}


.nav-container {
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.brand {
    display: flex;
    align-items: baseline;
    gap: 7px;
}


.brand-main {
    font-family: var(--serif);
    font-size: 2rem;
    font-weight: 700;
}


.brand-small {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1rem;
    color: var(--terracotta);
}


.main-nav {
    display: flex;
    align-items: center;
    gap: 32px;
    font-size: .88rem;
    font-weight: 600;
}


.main-nav a {
    transition: .25s;
}


.main-nav a:hover {
    color: var(--terracotta);
}


.nav-button {
    background: var(--forest);
    color: white !important;
    padding: 12px 20px;
    border-radius: 50px;
}


.mobile-toggle {
    display: none;
    background: none;
    border: 0;
}


.mobile-toggle span {
    display: block;
    width: 25px;
    height: 2px;
    background: var(--charcoal);
    margin: 5px;
}



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

.hero {
    height: 720px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}


.hero-image {
    position: absolute;
    inset: 0;

    /*
       Replace this with one of Kaitlin's photos.
    */

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

    transform: scale(1.02);
}


.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(20, 27, 24, .82) 0%,
            rgba(20, 27, 24, .55) 48%,
            rgba(20, 27, 24, .08) 100%
        );
}


.hero-content {
    position: relative;
    z-index: 2;
    color: white;
}


.eyebrow,
.section-kicker {
    display: block;
    font-size: .72rem;
    letter-spacing: .18em;
    font-weight: 700;
    color: var(--terracotta);
    margin-bottom: 18px;
}


.hero .eyebrow {
    color: #ead9c8;
}


.hero h1 {
    font-family: var(--serif);
    font-size: clamp(3.4rem, 7vw, 6.4rem);
    line-height: .98;
    max-width: 850px;
    margin-bottom: 30px;
}


.hero h1 em {
    font-weight: 600;
    color: #f1d4be;
}


.hero p {
    max-width: 610px;
    font-size: 1.1rem;
    color: rgba(255,255,255,.88);
}


.hero-buttons {
    display: flex;
    gap: 14px;
    margin-top: 36px;
}



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

.button {
    display: inline-block;
    padding: 15px 25px;
    border-radius: 50px;
    font-size: .88rem;
    font-weight: 700;
    transition: .25s;
}


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


.button-primary {
    background: var(--terracotta);
    color: white;
}


.button-light {
    border: 1px solid rgba(255,255,255,.55);
    color: white;
}


.button-dark {
    background: var(--forest);
    color: white;
}


.button-cream {
    background: var(--cream);
    color: var(--forest);
}



/* =========================================================
   INTRO
========================================================= */

.intro {
    padding: 120px 0;
}


.intro-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 120px;
}


.intro h2,
.section-heading h2,
.story-content h2 {
    font-family: var(--serif);
    font-size: clamp(2.6rem, 5vw, 4rem);
    line-height: 1.05;
}


.intro-copy {
    max-width: 650px;
}


.intro-copy p {
    margin-bottom: 20px;
    color: var(--gray);
}


.large-copy {
    font-family: var(--serif);
    font-size: 1.45rem;
    color: var(--charcoal) !important;
}


.rating-key {
    display: flex;
    gap: 30px;
    margin-top: 35px;
    font-size: .82rem;
    font-weight: 700;
}


.rating-key strong {
    color: var(--terracotta);
    margin-right: 5px;
}



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

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 45px;
}


.text-link {
    font-weight: 700;
    color: var(--terracotta);
}


.heading-copy {
    max-width: 390px;
    color: var(--gray);
}



/* =========================================================
   FEATURED TRIP
========================================================= */

.featured-trip {
    padding: 110px 0;
    background: var(--cream);
}


.feature-card {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    min-height: 550px;
    background: white;
}


.feature-image {
    position: relative;
    min-height: 500px;

    background:
        url("images/kentucky.jpg")
        center / cover no-repeat;
}


.trip-tag {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(255,255,255,.92);
    padding: 8px 14px;
    border-radius: 50px;
    font-size: .7rem;
    font-weight: 700;
}


.feature-content {
    padding: 65px 55px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.small-label,
.place-type {
    color: var(--terracotta);
    font-size: .68rem;
    letter-spacing: .15em;
    font-weight: 700;
}


.feature-content h3 {
    font-family: var(--serif);
    font-size: 2.8rem;
    line-height: 1.08;
    margin: 12px 0 20px;
}


.feature-content p {
    color: var(--gray);
}


.trip-stats {
    display: flex;
    gap: 35px;
    padding: 30px 0;
    margin: 30px 0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}


.trip-stats div {
    display: flex;
    flex-direction: column;
}


.trip-stats strong {
    font-family: var(--serif);
    font-size: 1.6rem;
}


.trip-stats span {
    color: var(--gray);
    font-size: .72rem;
}



/* =========================================================
   TRIP CARDS
========================================================= */

.trip-section {
    padding: 120px 0;
}


.trip-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


.trip-card {
    background: white;
}


.trip-card-image {
    height: 310px;
    position: relative;
    background-size: cover;
    background-position: center;
}


.trip-image-one {
    background-image: url("images/trip-1.jpg");
}


.trip-image-two {
    background-image: url("images/trip-2.jpg");
}


.trip-image-three {
    background-image: url("images/trip-3.jpg");
}


.trip-card-content {
    padding: 30px;
}


.trip-card h3 {
    font-family: var(--serif);
    font-size: 1.7rem;
    line-height: 1.15;
    margin: 10px 0 15px;
}


.trip-card p {
    color: var(--gray);
    font-size: .9rem;
    margin-bottom: 20px;
}


.trip-card a {
    font-weight: 700;
    color: var(--terracotta);
    font-size: .85rem;
}



/* =========================================================
   PLACES
========================================================= */

.places-section {
    padding: 120px 0;
    background: var(--forest);
    color: white;
}


.places-section .section-kicker {
    color: #d8a88f;
}


.places-section .heading-copy {
    color: rgba(255,255,255,.65);
}


.places-grid {
    border-top: 1px solid rgba(255,255,255,.18);
}


.place-card {
    display: grid;
    grid-template-columns: 100px 1fr 130px;
    align-items: center;
    padding: 38px 0;
    border-bottom: 1px solid rgba(255,255,255,.18);
}


.place-number {
    font-family: var(--serif);
    font-size: 1.3rem;
    color: rgba(255,255,255,.35);
}


.place-info h3 {
    font-family: var(--serif);
    font-size: 1.65rem;
    margin: 5px 0;
}


.place-info p {
    color: rgba(255,255,255,.62);
}


.place-rating {
    justify-self: end;
    font-size: .8rem;
    font-weight: 700;
}


.loved {
    color: #e7a184;
}


.liked {
    color: #d8c99c;
}


.meh {
    color: #aaa;
}



/* =========================================================
   STORY
========================================================= */

.story-section {
    padding: 130px 0;
}


.story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center;
}


.story-image {
    min-height: 600px;

    /*
       Eventually this should be a photo of Kaitlin
       or the two of you traveling.
    */

    background:
        url("images/kaitlin-travel.jpg")
        center / cover no-repeat;
}


.story-content p {
    color: var(--gray);
    margin-top: 22px;
}



/* =========================================================
   PLAN YOUR TRIP
========================================================= */

.plan-section {
    padding: 130px 0;
    background: var(--terracotta);
    color: white;
    text-align: center;
}


.plan-container {
    max-width: 850px;
}


.section-kicker.light {
    color: #f3d7c9;
}


.plan-section h2 {
    font-family: var(--serif);
    font-size: clamp(3rem, 6vw, 5rem);
    line-height: 1.02;
}


.plan-section h2 em {
    color: #f4dacd;
}


.plan-section p {
    max-width: 650px;
    margin: 28px auto;
    color: rgba(255,255,255,.85);
}


.price {
    margin-bottom: 30px;
}


.price strong {
    font-family: var(--serif);
    font-size: 1.5rem;
}



/* =========================================================
   SOCIAL
========================================================= */

.social-section {
    padding: 110px 0;
    text-align: center;
}


.social-content {
    max-width: 700px;
}


.social-content h2 {
    font-family: var(--serif);
    font-size: 3rem;
}


.social-content p {
    color: var(--gray);
    margin: 18px 0 30px;
}


.social-links {
    display: flex;
    justify-content: center;
    gap: 30px;
}


.social-links a {
    font-weight: 700;
    color: var(--terracotta);
}



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

footer {
    background: #1d2925;
    color: white;
    padding: 55px 0;
}


.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
}


.footer-brand span {
    font-family: var(--serif);
    font-size: 1.8rem;
}


.footer-brand small {
    color: #d8a88f;
    font-family: var(--serif);
    font-style: italic;
}


.footer-copy {
    text-align: center;
    color: rgba(255,255,255,.6);
    font-size: .8rem;
}


.footer-right {
    text-align: right;
    color: rgba(255,255,255,.5);
    font-size: .75rem;
}



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

@media (max-width: 850px) {

    .nav-container {
        height: 72px;
    }


    .mobile-toggle {
        display: block;
        cursor: pointer;
    }


    .main-nav {
        display: none;
        position: absolute;
        top: 72px;
        left: 0;
        width: 100%;
        padding: 25px 5%;
        background: var(--light-cream);
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        border-top: 1px solid #ddd;
    }


    .main-nav.open {
        display: flex;
    }


    .hero {
        height: 650px;
    }


    .hero-overlay {
        background: rgba(20, 27, 24, .67);
    }


    .hero-buttons {
        flex-direction: column;
        align-items: flex-start;
    }


    .intro,
    .trip-section,
    .featured-trip,
    .places-section,
    .story-section {
        padding: 80px 0;
    }


    .intro-grid,
    .story-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }


    .feature-card {
        grid-template-columns: 1fr;
    }


    .feature-image {
        min-height: 400px;
    }


    .feature-content {
        padding: 40px 30px;
    }


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


    .section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }


    .place-card {
        grid-template-columns: 50px 1fr;
    }


    .place-rating {
        grid-column: 2;
        justify-self: start;
        margin-top: 12px;
    }


    .story-image {
        min-height: 450px;
    }


    .footer-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        text-align: center;
    }


    .footer-right {
        text-align: center;
    }


    .rating-key {
        flex-wrap: wrap;
    }

}



@media (max-width: 500px) {

    .hero h1 {
        font-size: 3.25rem;
    }


    .feature-image {
        min-height: 320px;
    }


    .feature-content h3 {
        font-size: 2.2rem;
    }


    .trip-stats {
        gap: 22px;
    }


    .story-image {
        min-height: 375px;
    }

}

/* =========================================================
   PUBLIC TRIP PAGE
========================================================= */
.trip-hero{min-height:680px;background-size:cover;background-position:center;display:flex;align-items:flex-end;color:#fff;padding:110px 0 70px;position:relative}.trip-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,22,19,.35),transparent 45%);pointer-events:none}.trip-hero-content{position:relative;z-index:1;max-width:980px}.trip-hero .eyebrow{color:#f0d3c3;margin-bottom:14px}.trip-hero h1{font-family:var(--serif);font-size:clamp(3.7rem,7.5vw,7rem);line-height:.94;letter-spacing:-.025em;max-width:950px}.trip-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}.trip-meta span{padding:9px 15px;border:1px solid rgba(255,255,255,.35);border-radius:50px;font-size:.76rem;font-weight:700;background:rgba(20,27,24,.28);backdrop-filter:blur(4px)}
.trip-intro{padding:110px 0 95px}.trip-intro-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:110px;align-items:start}.trip-intro h2{font-family:var(--serif);font-size:clamp(2.55rem,4.5vw,4.1rem);line-height:1.04}.trip-summary{font-family:var(--serif);font-size:1.45rem;line-height:1.55;color:var(--charcoal);margin-bottom:24px}.trip-long-copy{color:var(--gray);font-size:1rem}.trip-long-copy p+p{margin-top:18px}
.trip-gallery-section{padding:0 0 120px}.trip-gallery{display:grid;grid-template-columns:1.55fr .75fr .75fr;grid-template-rows:250px 250px;gap:12px}.trip-gallery figure{margin:0;overflow:hidden;background:var(--sand)}.trip-gallery figure:first-child{grid-row:1/3}.trip-gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}.trip-gallery figure:hover img{transform:scale(1.025)}
.itinerary-section{padding:120px 0;background:var(--cream)}.itinerary-section>.container>.section-heading{margin-bottom:75px}.trip-day{margin-top:90px}.trip-day:first-of-type{margin-top:0}.day-heading{display:grid;grid-template-columns:105px 1fr;align-items:end;border-bottom:1px solid var(--sand);padding-bottom:22px;margin-bottom:36px}.day-number{font-size:.7rem;letter-spacing:.17em;font-weight:700;color:var(--terracotta);padding-bottom:5px}.day-heading h3{font-family:var(--serif);font-size:clamp(2rem,3.5vw,3rem);line-height:1}.day-stops{display:grid;gap:32px}
.featured-stop{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);background:#fff;min-height:500px;box-shadow:0 12px 35px rgba(38,61,53,.05)}.featured-stop:nth-child(even) .stop-media{order:2}.stop-media{min-width:0;overflow:hidden;background:var(--sand)}.stop-media>img,.stop-placeholder{width:100%;height:100%;min-height:500px;object-fit:cover;display:block}.stop-content{padding:55px;display:flex;flex-direction:column;justify-content:center;min-width:0}.stop-topline{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:5px}.stop-content h3{font-family:var(--serif);font-size:clamp(2.2rem,3vw,3rem);line-height:1.03;margin:10px 0 5px}.stop-location{color:var(--gray);font-size:.82rem;margin-bottom:22px}.stop-content p{color:var(--gray);margin-bottom:22px}.public-rating{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700;white-space:nowrap;padding:7px 11px;border-radius:50px;background:var(--light-cream)}.public-rating.loved{color:var(--terracotta)}.public-rating.liked{color:#8b6d25}.public-rating.meh{color:#777}.stop-actions{display:flex;align-items:center;gap:18px;margin-top:2px}.stop-website{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--terracotta);font-size:.84rem}.stop-website:hover{color:var(--terracotta-dark)}.stop-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:28px}.stop-thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.compact-stop{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:25px 30px;background:rgba(255,255,255,.72);border-left:4px solid var(--sand)}.compact-stop h4{font-family:var(--serif);font-size:1.4rem;margin:4px 0 2px}.compact-stop-location{font-size:.78rem;color:var(--gray)}
.trip-closing{padding:95px 0;background:var(--forest);color:#fff}.trip-closing-grid{display:grid;grid-template-columns:1fr auto;gap:50px;align-items:center}.trip-closing .section-kicker{color:#d8a88f}.trip-closing h2{font-family:var(--serif);font-size:clamp(2.4rem,4vw,3.7rem);line-height:1.05;max-width:700px}.trip-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}.trip-tags span{border:1px solid rgba(255,255,255,.22);border-radius:50px;padding:7px 12px;color:rgba(255,255,255,.75);font-size:.72rem}.trip-back{white-space:nowrap;background:var(--cream);color:var(--forest);padding:14px 22px;border-radius:50px;font-weight:700;font-size:.84rem}
@media(max-width:850px){.trip-hero{min-height:560px;padding:80px 0 55px}.trip-intro{padding:80px 0 70px}.trip-intro-grid{grid-template-columns:1fr;gap:30px}.trip-summary{font-size:1.3rem}.trip-gallery-section{padding-bottom:80px}.trip-gallery{grid-template-columns:1fr 1fr;grid-template-rows:300px 180px 180px}.trip-gallery figure:first-child{grid-column:1/3;grid-row:auto}.itinerary-section{padding:80px 0}.itinerary-section>.container>.section-heading{margin-bottom:55px}.trip-day{margin-top:65px}.day-heading{grid-template-columns:80px 1fr}.featured-stop{grid-template-columns:1fr;min-height:0}.featured-stop:nth-child(even) .stop-media{order:0}.stop-media>img,.stop-placeholder{height:360px;min-height:0}.stop-content{padding:38px 30px}.trip-closing{padding:75px 0}.trip-closing-grid{grid-template-columns:1fr;gap:30px}.trip-back{justify-self:start}}
@media(max-width:500px){.trip-hero{min-height:500px;padding-bottom:42px}.trip-hero h1{font-size:3.25rem}.trip-meta{margin-top:22px}.trip-meta span{font-size:.7rem;padding:7px 11px}.trip-gallery{grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:235px}.trip-gallery figure:first-child{grid-column:auto}.trip-gallery figure:nth-child(n+4){display:none}.day-heading{display:block}.day-number{display:block;margin-bottom:7px}.stop-media>img,.stop-placeholder{height:290px}.stop-content{padding:30px 24px}.stop-topline{align-items:flex-start}.stop-thumbs{grid-template-columns:repeat(2,1fr)}.compact-stop{align-items:flex-start;padding:22px}.trip-closing h2{font-size:2.5rem}}