/* =====================================================
   01 - MAIN SETTINGS
   Change these variables first for global adjustments.
===================================================== */
:root {
    --background: #eee5d6;
    --background-light: #f7f0e5;
    --text: #29271f;
    --muted: #716b60;
    --accent: #9a6231;
    --accent-dark: #74451f;
    --button-light: #f8ecd6;
    --button-light-hover: #fff7e9;
    --white: #fffaf1;
    --radius: 15px;
    --max-width: 1180px;
    --shadow: 0 8px 28px rgba(43,37,27,.10);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--background); color:var(--text); font-family:Arial,Helvetica,sans-serif; line-height:1.45; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; }
.container { width:min(var(--max-width),calc(100% - 48px)); margin-inline:auto; }
.section-space { margin-top:18px; }
.eyebrow,.card-label { margin:0; font-size:.72rem; letter-spacing:.08em; font-weight:700; }
.button { display:inline-flex; align-items:center; gap:18px; width:max-content; padding:13px 22px; border-radius:999px; font-size:.78rem; font-weight:700; text-transform:uppercase; box-shadow:0 4px 15px rgba(20,18,14,.13); transition:.2s ease; }
.button-cream { background:var(--button-light); color:#30291f; }
.button-cream:hover { background:var(--button-light-hover); transform:translateY(-1px); }
.button span { font-size:1.05rem; }
.small-button { padding:10px 18px; font-size:.70rem; }

/* =====================================================
   02 - HEADER
===================================================== */
.site-header { background:rgba(247,240,229,.97); border-bottom:1px solid rgba(60,50,35,.10); }
.header-inner { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { font-weight:800; line-height:.92; letter-spacing:.02em; font-size:1rem; }
.brand small { display:block; font-size:1rem; margin-top:3px; letter-spacing:.02em; }
.main-nav { display:flex; align-items:center; gap:30px; font-size:.82rem; font-weight:600; }
.main-nav a { padding:9px 0 6px; border-bottom:1px solid transparent; }
.main-nav a:hover,.main-nav .active { border-color:var(--accent); }
.menu-button { display:none; border:0; background:none; font-size:1.6rem; color:var(--text); }

/* =====================================================
   03 - HERO
   Image contrast intentionally kept from original code.
===================================================== */
.hero { position:relative; min-height:500px; display:flex; align-items:center; overflow:hidden; }
.hero-image,.hero-overlay { position:absolute; inset:0; height:100%; object-fit:cover; }
.hero-image { filter:saturate(.72) contrast(.90) sepia(.12); }
.hero-overlay { background:linear-gradient(90deg,rgba(22,21,17,.76) 0%,rgba(22,21,17,.32) 50%,rgba(22,21,17,.05) 100%); }
.hero-content { position:relative; z-index:2; color:var(--white); padding-block:54px 34px; }
.hero h1 { margin:0 0 13px; font:400 clamp(3.3rem,7vw,5.5rem)/.88 Georgia,'Times New Roman',serif; letter-spacing:-.04em; }
.hero-text { margin:0 0 18px; max-width:430px; font-size:.98rem; }
.stats { display:flex; flex-wrap:wrap; gap:0; margin-top:28px; }
.stats span { display:flex; align-items:center; gap:10px; padding:0 24px; border-right:1px solid rgba(255,255,255,.32); }
.stats span:first-child { padding-left:0; }
.stats span:last-child { border:0; }
.stats i { font-style:normal; font-size:1.8rem; }
.stats b { display:grid; font-weight:400; }
.stats strong { font:400 1.35rem Georgia,serif; line-height:1; }
.stats small { margin-top:3px; font-size:.57rem; text-transform:uppercase; }

/* =====================================================
   04 - MY TRAVELS / PLACES I RECOMMEND
   Same image filter values as original code.
===================================================== */
.gateways { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.gateway { min-height:300px; position:relative; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow); }
.gateway img,.gateway-shade { position:absolute; inset:0; height:100%; object-fit:cover; }
.gateway img { filter:saturate(.70) contrast(.92); transition:transform .4s ease; }
.gateway:hover img { transform:scale(1.025); }
.gateway-shade { background:linear-gradient(90deg,rgba(18,17,14,.78),rgba(18,17,14,.18) 80%); }
.gateway-content { position:absolute; inset:30px; color:white; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; }
.gateway h2 { margin:5px 0 8px; font:400 2.25rem/.98 Georgia,serif; }
.gateway-content > p:not(.card-label) { margin:0 0 15px; font-size:.9rem; }

/* =====================================================
   05 - WORLD MAP
===================================================== */
.map-preview { display:grid; grid-template-columns:.30fr .70fr; min-height:330px; background:var(--background-light); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.map-copy { padding:38px 34px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.map-copy h2 { font:400 2.35rem/.98 Georgia,serif; margin:0 0 10px; }
.short-rule { width:28px; height:1px; background:#6e6557; margin:3px 0 12px; }
.map-copy p { margin:0 0 18px; color:#4e493f; font-size:.83rem; }
.map-visual { position:relative; min-height:330px; overflow:hidden; background-color:#eee4d2; background-image:radial-gradient(ellipse at 22% 45%,#8f8b70 0 8%,transparent 8.5%),radial-gradient(ellipse at 38% 38%,#a49d7e 0 11%,transparent 11.5%),radial-gradient(ellipse at 55% 43%,#7f8065 0 16%,transparent 16.5%),radial-gradient(ellipse at 75% 60%,#a39c7e 0 7%,transparent 7.5%); }
.map-visual:after { content:""; position:absolute; inset:0; opacity:.23; background-image:linear-gradient(25deg,transparent 48%,rgba(80,70,55,.13) 49%,transparent 50%); background-size:34px 34px; }
.map-watermark { position:absolute; inset:0; display:grid; place-items:center; text-align:center; font:700 3rem/.8 Georgia,serif; letter-spacing:.18em; color:rgba(66,62,48,.13); }
.compass { position:absolute; right:24px; top:18px; z-index:2; text-align:center; font:700 .55rem Georgia,serif; line-height:1.1; color:#5e5648; }
.compass span { font-size:.72rem; }

/* =====================================================
   06 - FEATURED EXPLORATION
   Same image filter values as original code.
===================================================== */
.featured { position:relative; min-height:360px; overflow:hidden; }
.featured-slides,.featured-slide,.featured-shade { position:absolute; inset:0; width:100%; height:100%; }
.featured-slide { object-fit:cover; filter:saturate(.68) contrast(.91); opacity:0; transition:opacity 1.5s ease-in-out; }
.featured-slide.active { opacity:1; }
.featured-shade { background:linear-gradient(90deg,rgba(20,18,14,.72),rgba(20,18,14,.07)); }
.featured-content { position:relative; z-index:2; color:white; padding-block:66px; }
.featured-content h2 { font:400 3.4rem/.95 Georgia,serif; margin:6px 0 10px; }
.featured-content p { margin:0 0 18px; max-width:450px; }

.ui-icon { width:30px; height:30px; display:grid; place-items:center; }
.ui-icon svg { width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

.carousel-dots { position:absolute; z-index:4; left:50%; bottom:18px; transform:translateX(-50%); display:flex; gap:10px; }
.carousel-dot { width:10px; height:10px; padding:0; border-radius:50%; border:1px solid rgba(255,255,255,.95); background:transparent; cursor:pointer; }
.carousel-dot.active { background:var(--button-light); }

/* =====================================================
   07 - LATEST EXPLORATIONS
   Same image filter values as original code.
===================================================== */
.latest { margin-top:20px; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:10px; }
.section-heading h2 { margin:0; font:700 .86rem Arial,sans-serif; }
.section-heading a { font-size:.64rem; font-weight:700; }
.explorations { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.exploration-card { position:relative; min-height:215px; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow); color:white; }
.exploration-card img,.exploration-shade { position:absolute; inset:0; height:100%; object-fit:cover; }
.exploration-card img { filter:saturate(.72) contrast(.92); transition:transform .35s ease; }
.exploration-card:hover img { transform:scale(1.025); }
.exploration-shade { background:linear-gradient(0deg,rgba(17,16,13,.78),rgba(17,16,13,.02) 70%); }
.country-tag { position:absolute; top:12px; left:14px; padding:4px 10px; border-radius:999px; background:rgba(116,91,67,.86); font-size:.58rem; font-weight:700; }
.exploration-copy { position:absolute; left:18px; right:18px; bottom:14px; }
.exploration-copy h3 { margin:0 0 2px; font:400 1.45rem Georgia,serif; }
.exploration-copy p { margin:0 0 9px; font-size:.76rem; }
.exploration-copy small { font-size:.64rem; display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.meta-item { display:inline-flex; align-items:center; gap:5px; }
.meta-item svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* =====================================================
   08 - DISCOVER MORE
   Asymmetrical photo mosaic so this section feels different
   from Latest Explorations.
===================================================== */
.discover-more { margin-top:26px; }
.discover-grid {
    display:grid;
    grid-template-columns:minmax(0,.82fr) minmax(0,1.55fr);
    grid-template-rows:210px 210px;
    gap:16px;
}
.discover-card {
    position:relative;
    overflow:hidden;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    color:white;
    min-height:0;
    isolation:isolate;
    transition:transform .35s ease, box-shadow .35s ease;
}
.discover-urbex { grid-column:1; grid-row:1 / 3; }
.discover-vanlife { grid-column:2; grid-row:1; }
.discover-exotic { grid-column:2; grid-row:2; }
.discover-card img,.discover-shade { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.discover-card img { filter:saturate(.72) contrast(.92); transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.discover-card:hover { transform:translateY(-3px); box-shadow:0 16px 34px rgba(57,47,34,.17); }
.discover-card:hover img { transform:scale(1.055); }
.discover-shade { z-index:1; background:linear-gradient(0deg,rgba(17,16,13,.84),rgba(17,16,13,.03) 70%); }
.discover-copy { position:absolute; z-index:2; left:22px; right:22px; bottom:20px; }
.discover-copy span { display:block; margin-bottom:5px; font:700 .58rem Arial,sans-serif; letter-spacing:.08em; color:#ead7b8; }
.discover-copy h3 { margin:0 0 3px; font:400 1.8rem Georgia,serif; }
.discover-copy p { margin:0; font-size:.78rem; }
.discover-urbex .discover-copy h3 { font-size:2.15rem; }

/* =====================================================
   09 - QUICK LINKS
   Hover gives Instagram / Favorites / Nearby a clearer
   interactive feel without changing the visual language.
===================================================== */
.quick-links { display:grid; grid-template-columns:repeat(3,1fr); background:var(--background-light); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); margin-bottom:34px; }
.quick-links a {
    min-height:92px;
    padding:18px;
    display:grid;
    grid-template-columns:38px 1fr auto;
    align-items:center;
    gap:10px;
    border-right:1px solid rgba(60,50,35,.12);
    transition:background-color .28s ease, transform .28s ease, box-shadow .28s ease;
}
.quick-links a:last-child { border:0; }
.quick-links a:hover {
    position:relative;
    z-index:2;
    background:#f7eddd;
    transform:translateY(-3px);
    box-shadow:0 12px 26px rgba(57,47,34,.12);
}
.quick-links i { font-style:normal; color:var(--accent); transition:transform .28s ease, color .28s ease; }
.quick-links a:hover i { transform:scale(1.12); color:#9a6237; }
.quick-icon svg { display:block; width:31px; height:31px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.quick-icon svg .fill-dot { fill:currentColor; stroke:none; }
.quick-links b { font-size:.78rem; }
.quick-links b small { display:block; margin-top:3px; color:var(--muted); font-weight:400; font-size:.62rem; }
.quick-links > a > span { color:var(--accent); transition:transform .28s ease; }
.quick-links a:hover > span { transform:translateX(4px); }
.instagram-icon { color:#b75a2a !important; }

/* =====================================================
   10 - FOOTER
===================================================== */
.site-footer { background:var(--background-light); color:var(--text); padding:22px 0; border-top:1px solid rgba(60,50,35,.10); }
.footer-inner { display:flex; justify-content:space-between; align-items:center; gap:30px; }
.footer-inner strong { font:700 .78rem Arial,sans-serif; }
.footer-inner p { color:var(--muted); margin:3px 0 0; font-size:.65rem; }
.footer-brand { text-align:right; font-size:.65rem; letter-spacing:.06em; }

/* =====================================================
   11 - MOBILE / TABLET
===================================================== */
@media (max-width:800px) {
    .container { width:min(100% - 28px,var(--max-width)); }
    .header-inner { min-height:66px; }
    .menu-button { display:block; }
    .main-nav { display:none; position:absolute; z-index:20; top:66px; left:0; right:0; padding:20px 24px; background:var(--background-light); flex-direction:column; align-items:flex-start; gap:10px; }
    .main-nav.open { display:flex; }
    .hero { min-height:610px; align-items:end; }
    .hero-overlay { background:linear-gradient(0deg,rgba(22,21,17,.84),rgba(22,21,17,.12)); }
    .hero h1 { font-size:3.5rem; }
    .stats { gap:14px; }
    .stats span { width:calc(50% - 7px); padding:0 0 0 10px; border-left:1px solid rgba(255,255,255,.28); border-right:0; }
    .stats span:first-child { padding-left:10px; }
    .gateways,.map-preview,.explorations,.quick-links { grid-template-columns:1fr; }
    .discover-grid { grid-template-columns:1fr; grid-template-rows:none; }
    .discover-urbex,.discover-vanlife,.discover-exotic { grid-column:auto; grid-row:auto; min-height:250px; }
    .gateway { min-height:310px; }
    .map-copy { padding:30px; }
    .map-visual { min-height:290px; }
    .featured { min-height:460px; }
    .featured-content { padding-block:70px; }
    .slider-ui { right:16px; }
    .section-heading { align-items:flex-start; }
    .exploration-card { min-height:250px; }
    .quick-links a { border-right:0; border-bottom:1px solid rgba(60,50,35,.12); }
    .footer-inner { align-items:flex-start; flex-direction:column; }
    .footer-brand { text-align:left; }
}

/* =====================================================
   12 - MOBILE COMPACT LAYOUT (V7)
   Keeps desktop unchanged. These rules only make the
   mobile home page lighter, shorter and better balanced.
===================================================== */
@media (max-width:800px) {
    /* HERO: shorter image and more compact content */
    .hero { min-height:455px; }
    .hero-content { padding-block:34px 25px; }
    .hero h1 { font-size:2.75rem; line-height:.92; margin-bottom:10px; }
    .hero-text { max-width:330px; margin-bottom:14px; font-size:.84rem; line-height:1.4; }
    .hero .button { padding:10px 17px; font-size:.68rem; gap:12px; }
    .stats { margin-top:20px; gap:8px 0; }
    .stats span { width:50%; min-height:42px; gap:7px; padding-left:8px; }
    .stats i { font-size:1.35rem; }
    .stats strong { font-size:1.05rem; }
    .stats small { font-size:.50rem; margin-top:2px; }

    /* MY TRAVELS / PLACES: less bulky on phones */
    .gateways { gap:12px; }
    .gateway { min-height:220px; border-radius:12px; }
    .gateway-content { inset:20px; }
    .gateway h2 { margin:4px 0 6px; font-size:1.72rem; }
    .gateway-content > p:not(.card-label) { margin-bottom:11px; max-width:280px; font-size:.78rem; line-height:1.35; }
    .gateway .card-label { font-size:.60rem; }
    .gateway .small-button { padding:8px 14px; font-size:.62rem; }

    /* FEATURED: keep the cinematic banner deliberately thin */
    .featured { min-height:285px; }
    .featured-content { padding-block:34px 48px; }
    .featured-content .eyebrow { font-size:.60rem; }
    .featured-content h2 { margin:4px 0 7px; font-size:2.25rem; }
    .featured-content p { max-width:300px; margin-bottom:12px; font-size:.78rem; line-height:1.35; }
    .featured-content .button { padding:9px 15px; font-size:.62rem; }
    .carousel-dots { bottom:13px; gap:8px; }
    .carousel-dot { width:8px; height:8px; }
}

@media (max-width:430px) {
    .hero { min-height:430px; }
    .hero h1 { font-size:2.5rem; }
    .hero-text { max-width:285px; }
    .gateway { min-height:205px; }
    .featured { min-height:265px; }
    .featured-content h2 { font-size:2.05rem; }
}

/* =====================================================