/* Locale — visitlocale.com design system
   Palette: ink pine #1C2B24 · cream #FAF6EF · copper #C96F3B · sage #4C7A63
   Type: Fraunces (display) + Inter (body) — loaded per-page via Google Fonts */

:root{
  --ink:#1C2B24; --cream:#FAF6EF; --copper:#C96F3B; --copper-dark:#A85A2E;
  --sage:#4C7A63; --sage-light:#EAF1ED; --line:#E4DCCF; --muted:#6B6459;
  --card:#FFFFFF; --star:#E0A427;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif; background:var(--cream); color:var(--ink); line-height:1.65; font-size:16.5px}
h1,h2,h3,.display{font-family:'Fraunces',Georgia,serif; font-weight:600; line-height:1.15}
a{color:var(--copper-dark); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1080px; margin:0 auto; padding:0 22px}

/* Nav */
.nav{position:sticky; top:0; z-index:50; background:rgba(250,246,239,.95); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.logo{font-family:'Fraunces',serif; font-weight:700; font-size:1.45rem; color:var(--ink); letter-spacing:-.02em}
.logo em{color:var(--copper); font-style:normal}
.logo .tld{color:var(--muted); font-weight:400; font-size:.95rem}
.nav-links{display:flex; gap:1.4rem; font-size:.92rem; font-weight:500}
.nav-links a{color:var(--ink)}
@media(max-width:820px){.nav-links{display:none}}

/* Hero */
.hero{background:linear-gradient(160deg,var(--ink) 0%, #2C4436 70%, #3A5A48 100%); color:var(--cream); padding:72px 0 60px}
.hero .kicker{color:#D9A87E; text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; font-weight:600; margin-bottom:14px}
.hero h1{font-size:clamp(2.1rem,5vw,3.2rem); margin-bottom:16px; color:#fff}
.hero p.lede{font-size:1.12rem; max-width:680px; color:#E8E3D8}
.hero .stats{display:flex; gap:2.2rem; margin-top:28px; flex-wrap:wrap}
.hero .stat b{display:block; font-family:'Fraunces',serif; font-size:1.5rem; color:#F0C9A8}
.hero .stat span{font-size:.82rem; color:#C9C2B4}

/* Sections */
.section{padding:52px 0}
.section h2{font-size:1.7rem; margin-bottom:8px}
.section .sub{color:var(--muted); margin-bottom:28px; max-width:640px}
.eyebrow{color:var(--sage); text-transform:uppercase; letter-spacing:.12em; font-size:.75rem; font-weight:700; margin-bottom:8px}

/* Category grid (homepage) */
.cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px}
.cat-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px; transition:transform .15s, box-shadow .15s; display:block; color:var(--ink)}
.cat-card:hover{transform:translateY(-3px); box-shadow:0 10px 28px rgba(28,43,36,.10); text-decoration:none}
.cat-card .emoji{font-size:1.6rem}
.cat-card h3{font-size:1.12rem; margin:10px 0 6px}
.cat-card p{font-size:.88rem; color:var(--muted)}
.cat-card .count{display:inline-block; margin-top:10px; font-size:.75rem; font-weight:600; color:var(--sage); background:var(--sage-light); padding:3px 10px; border-radius:999px}

/* Listing cards */
.listing{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px; margin-bottom:16px}
.listing h3{font-size:1.18rem; margin-bottom:4px}
.listing .meta{font-size:.84rem; color:var(--muted); margin-bottom:10px}
.listing .stars{color:var(--star); font-size:.9rem}
.listing p.desc{font-size:.95rem; margin-bottom:12px}
.listing .facts{display:flex; flex-wrap:wrap; gap:14px; font-size:.83rem; color:var(--muted); border-top:1px dashed var(--line); padding-top:12px}
.listing .facts b{color:var(--ink); font-weight:600}
.badge{display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 10px; border-radius:999px; margin-left:8px; vertical-align:middle}
.badge.pick{background:#F7E8DC; color:var(--copper-dark)}
.badge.deal{background:var(--sage-light); color:var(--sage)}

/* Editorial blocks */
.knowbox{background:var(--sage-light); border-radius:14px; padding:24px 26px; margin:26px 0}
.knowbox h3{font-size:1.05rem; margin-bottom:10px; color:var(--sage)}
.knowbox ul{padding-left:18px; font-size:.94rem}
.knowbox li{margin-bottom:6px}

/* FAQ */
.faq details{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 20px; margin-bottom:10px}
.faq summary{font-weight:600; cursor:pointer; font-size:.98rem}
.faq details p{margin-top:10px; font-size:.93rem; color:#3A3A34}

/* Lodging CTA */
.lodge{background:linear-gradient(135deg,#22352B,#33513F); border-radius:16px; color:var(--cream); padding:32px; margin:40px 0; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap}
.lodge h3{color:#fff; font-size:1.25rem; margin-bottom:6px}
.lodge p{font-size:.9rem; color:#D8D2C4; max-width:520px}
.btn{display:inline-block; background:var(--copper); color:#fff; font-weight:600; font-size:.92rem; padding:12px 22px; border-radius:10px; white-space:nowrap}
.btn:hover{background:var(--copper-dark); text-decoration:none}
.btn.ghost{background:transparent; border:1.5px solid var(--copper); color:var(--copper)}

/* Footer */
footer{background:var(--ink); color:#B9B2A4; padding:48px 0 36px; margin-top:64px; font-size:.86rem}
footer .cols{display:grid; grid-template-columns:2fr 1fr 1fr; gap:32px}
@media(max-width:720px){footer .cols{grid-template-columns:1fr}}
footer h4{color:#E8E3D8; font-size:.9rem; margin-bottom:12px}
footer a{color:#CFC8BA; display:block; margin-bottom:7px}
footer .fine{border-top:1px solid #33413A; margin-top:32px; padding-top:20px; font-size:.78rem; color:#8A857B}
.crumbs{font-size:.8rem; color:var(--muted); padding:18px 0 0}
.crumbs a{color:var(--muted)}