@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:wght@500;600;700&display=swap');

:root{
  --bg:#FDFBF7; --soft:#F4EFE6; --tan:#E2D6C0; --brown:#8B6F4E;
  --ink:#1C1C1C; --muted:#6B6256; --card:#FFFFFF; --line:#EFE8DC;
  --r:16px; color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;line-height:1.75;font-size:16px}
img{max-width:100%;height:auto;border-radius:var(--r)}
a{color:var(--brown);text-decoration:none}
a:hover{color:var(--ink)}

h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif;
  color:var(--ink);line-height:1.2;font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(2.2rem,7vw,4rem)}
h2{font-size:clamp(1.6rem,4.5vw,2.4rem)}
h3{font-size:1.3rem}
p{color:var(--muted)}

main,section,.container{max-width:1100px;margin-inline:auto;padding:48px 20px}

header,.header,.navbar{position:sticky;top:0;z-index:50;
  background:rgba(253,251,247,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);padding:14px 20px}
nav a{color:var(--ink);font-size:.92rem;font-weight:500;margin:0 10px}
nav a:hover{color:var(--brown)}

button,.btn,.button,input[type=submit],a.cta{
  background:var(--ink);color:#fff;border:1px solid var(--ink);
  padding:12px 24px;border-radius:999px;font-weight:500;
  font-family:inherit;cursor:pointer;transition:.25s}
button:hover,.btn:hover,.button:hover,a.cta:hover{
  background:var(--brown);border-color:var(--brown);color:#fff}
.btn-outline,.secondary{background:transparent;color:var(--ink)}

.card,article,.post,.guide-card,.destination,.service{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:22px;transition:.3s}
.card:hover,.post:hover,.guide-card:hover{transform:translateY(-3px)}

.grid,.cards,.posts{display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}

input,textarea,select{width:100%;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:13px 16px;
  font-family:inherit;font-size:1rem;color:var(--ink)}
input:focus,textarea:focus{outline:2px solid var(--tan);border-color:var(--tan)}

.hero{background:linear-gradient(180deg,var(--soft),var(--bg));
  text-align:center;padding:80px 20px;border-radius:0 0 28px 28px}
.hero p{max-width:620px;margin:16px auto}

.post-content,.article-content{max-width:720px;margin:auto}
.post-content p{color:#3a342c}
blockquote{border-left:3px solid var(--tan);margin:24px 0;
  padding:8px 20px;background:var(--soft);border-radius:0 12px 12px 0}
table{width:100%;border-collapse:collapse}
th,td{border-bottom:1px solid var(--line);padding:10px;text-align:left}

footer{background:var(--soft);border-top:1px solid var(--line);
  padding:40px 20px;text-align:center;color:var(--muted);font-size:.9rem}

@media(max-width:640px){
  main,section,.container{padding:32px 16px}
  .hero{padding:56px 16px}
}